[wb1812.1.deprecate] Mark ID stuff as deprecated (#2388)

## Summary:
This is the first step in removing our custom ID utilities in favour of using the `useId` hook from React's API. This PR is not going to be merged/released on its own. Another PR will be coming to add an `Id` component that wraps `useId` so that there's an easier path for consumers to migrate.

The difficult bit is moving from the provider architecture that gives an ID factory, to the `useId`/`Id` approach. However, long term, it should simplify things greatly.

### Upgrade note:
Upgrading to this will cause deprecation notices in consuming code. If a lint rule is set up to block deprecated usage (which it probably is), then those errors will have to be suppressed. A find/replace may help in some circumstances, but this may also be a manual process. The alternative, of course, is to actually modify stuff to the new approach.

Issue: WB-1812

## Test plan:
`yarn test`
`yarn lint`

Author: somewhatabstract

Reviewers: jandrade

Required Reviewers:

Approved By: jandrade

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2388

Author: somewhatabstract

.changeset/light-goats-serve.md

@@ -0,0 +1,14 @@
+---
+"@khanacademy/wonder-blocks-core": major
+"@khanacademy/wonder-blocks-search-field": patch
+"@khanacademy/wonder-blocks-accordion": patch
+"@khanacademy/wonder-blocks-dropdown": patch
+"@khanacademy/wonder-blocks-popover": patch
+"@khanacademy/wonder-blocks-testing": patch
+"@khanacademy/wonder-blocks-tooltip": patch
+"@khanacademy/wonder-blocks-switch": patch
+"@khanacademy/wonder-blocks-modal": patch
+"@khanacademy/wonder-blocks-form": patch
+---
+
+Deprecate the ID provider and unique ID utilities

__docs__/wonder-blocks-core/id-provider.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import * as React from "react";
 import type {Meta, StoryObj} from "@storybook/react";
 

__docs__/wonder-blocks-core/unique-id-provider.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import * as React from "react";
 import type {Meta, StoryObj} from "@storybook/react";
 

__docs__/wonder-blocks-core/use-unique-id.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import * as React from "react";
 
 import {Meta} from "@storybook/react";

__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import * as React from "react";
 import {Meta} from "@storybook/react";
 import {IDProvider, View} from "@khanacademy/wonder-blocks-core";

packages/wonder-blocks-accordion/src/components/accordion-section.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import type {StyleDeclaration} from "aphrodite";
 
+// eslint-disable-next-line import/no-deprecated
 import {useUniqueIdWithMock, View} from "@khanacademy/wonder-blocks-core";
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {Body} from "@khanacademy/wonder-blocks-typography";
@@ -203,6 +204,7 @@ const AccordionSection = React.forwardRef(function AccordionSection(
 
     const controlledMode = expanded !== undefined && onToggle;
 
+    // eslint-disable-next-line import/no-deprecated
     const ids = useUniqueIdWithMock();
     const sectionId = id ?? ids.get("accordion-section");
     // We need an ID for the header so that the content section's

packages/wonder-blocks-core/src/components/__tests__/id-provider.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import * as React from "react";
 import {render} from "@testing-library/react";
 

packages/wonder-blocks-core/src/components/__tests__/unique-id-provider.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import * as React from "react";
 import * as ReactDOMServer from "react-dom/server";
 import {render} from "@testing-library/react";

packages/wonder-blocks-core/src/components/id-provider.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import * as React from "react";
 
 import UniqueIDProvider from "./unique-id-provider";
@@ -54,6 +55,8 @@ type Props = {
  * </IDProvider>
  * ```
  *
+ * @deprecated Use `useId` for your ID needs. If you are in a class-based
+ * component and cannot use hooks, then use the `Id` component.
  */
 export default class IDProvider extends React.Component<Props> {
     static defaultId = "wb-id";

packages/wonder-blocks-core/src/components/unique-id-provider.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import * as React from "react";
 
 import InitialFallback from "./initial-fallback";
@@ -69,6 +70,9 @@ type Props = {
  *  )}
  * </UniqueIDProvider>
  * ```
+ *
+ * @deprecated Use `useId` for your ID needs. If you are in a class-based
+ * component and cannot use hooks, then use the `Id` component.
  */
 export default class UniqueIDProvider extends React.Component<Props> {
     // @ts-expect-error [FEI-5019] - TS2564 - Property '_idFactory' has no initializer and is not definitely assigned in the constructor.