[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

.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.

packages/wonder-blocks-core/src/hooks/__tests__/use-unique-id.test.tsx

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

packages/wonder-blocks-core/src/hooks/use-unique-id.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import {useRef} from "react";
 
 import {useRenderState} from "./use-render-state";
@@ -9,6 +10,9 @@ import {RenderState} from "../components/render-state-context";
 import type {IIdentifierFactory} from "../util/types";
 
 /**
+ * @deprecated Use `useId` for your ID needs. If you are in a class-based
+ * component and cannot use hooks, then use the `Id` component.
+ *
  * Returns a unique identifier factory.  If the parent component hasn't
  * been mounted yet, the global SsrIDFactory will be returned until the
  * component becomes mounted.
@@ -32,6 +36,9 @@ export const useUniqueIdWithMock = (scope?: string): IIdentifierFactory => {
 };
 
 /**
+ * @deprecated Use `useId` for your ID needs. If you are in a class-based
+ * component and cannot use hooks, then use the `Id` component.
+ *
  * Returns a unique identifier factory.  If the parent component hasn't
  * been mounted yet, null will be returned.
  *

packages/wonder-blocks-core/src/index.ts

@@ -1,5 +1,6 @@
 import type {
     AriaProps,
+    // eslint-disable-next-line import/no-deprecated
     IIdentifierFactory,
     StyleType,
     PropsFor,
@@ -27,4 +28,5 @@ export {RenderStateRoot} from "./components/render-state-root";
 export {RenderState} from "./components/render-state-context";
 export type {AriaRole, AriaAttributes} from "./util/aria-types";
 
+// eslint-disable-next-line import/no-deprecated
 export type {AriaProps, IIdentifierFactory, StyleType, PropsFor};

packages/wonder-blocks-core/src/util/__tests__/unique-id-factory.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import UniqueIDFactory from "../unique-id-factory";
 
 describe("UniqueIDFactory", () => {

packages/wonder-blocks-core/src/util/ssr-id-factory.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-deprecated */
 import type {IIdentifierFactory} from "./types";
 
 /**
@@ -9,6 +10,8 @@ import type {IIdentifierFactory} from "./types";
  *
  * The identifiers are not guaranteed to be unique, but they will match between
  * server and the first client render.
+ * @deprecated Use `useId` for your ID needs. If you are in a class-based
+ * component and cannot use hooks, then use the `Id` component.
  */
 class SsrIDFactory implements IIdentifierFactory {
     static Default: IIdentifierFactory = new SsrIDFactory();

packages/wonder-blocks-core/src/util/types.ts

@@ -104,6 +104,8 @@ export type TextViewSharedProps = {
 
 /**
  * Interface implemented by types that can provide identifiers.
+ * @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 interface IIdentifierFactory {
     get(id: string): string;

packages/wonder-blocks-core/src/util/unique-id-factory.ts

@@ -1,9 +1,13 @@
+/* eslint-disable import/no-deprecated */
 import type {IIdentifierFactory} from "./types";
 
 /**
  * This is NOT for direct use. Instead, see the UniqueIDProvider component.
  *
  * Implements IIdentifierFactory to provide unique identifiers.
+ *
+ * @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 UniqueIDFactory implements IIdentifierFactory {
     _uniqueFactoryName: string;

packages/wonder-blocks-dropdown/src/components/action-menu.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {StyleSheet} from "aphrodite";
 import {
+    // eslint-disable-next-line import/no-deprecated
     IDProvider,
     type AriaProps,
     type StyleType,

packages/wonder-blocks-dropdown/src/components/combobox.tsx

@@ -6,6 +6,7 @@ import xIcon from "@phosphor-icons/core/regular/x.svg";
 
 import {
     StyleType,
+    // eslint-disable-next-line import/no-deprecated
     useUniqueIdWithMock,
     View,
 } from "@khanacademy/wonder-blocks-core";
@@ -175,6 +176,7 @@ export default function Combobox({
     testId,
     value = "",
 }: Props) {
+    // eslint-disable-next-line import/no-deprecated
     const ids = useUniqueIdWithMock("combobox");
     const uniqueId = id ?? ids.get("listbox");
     // Ref to the combobox input element.

packages/wonder-blocks-dropdown/src/components/listbox.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {
     StyleType,
+    // eslint-disable-next-line import/no-deprecated
     useUniqueIdWithMock,
     View,
 } from "@khanacademy/wonder-blocks-core";
@@ -103,6 +104,7 @@ function StandaloneListbox(props: Props) {
         "aria-labelledby": ariaLabelledby,
     } = props;
 
+    // eslint-disable-next-line import/no-deprecated
     const ids = useUniqueIdWithMock("listbox");
     const uniqueId = id ?? ids.get("id");
 

packages/wonder-blocks-dropdown/src/components/multi-select.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import {
+    // eslint-disable-next-line import/no-deprecated
     IDProvider,
     type AriaProps,
     type StyleType,

packages/wonder-blocks-dropdown/src/components/single-select.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import {
+    // eslint-disable-next-line import/no-deprecated
     IDProvider,
     type AriaProps,
     type StyleType,

packages/wonder-blocks-form/src/components/choice-internal.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
+// eslint-disable-next-line import/no-deprecated
 import {View, UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";

packages/wonder-blocks-form/src/components/labeled-text-field.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 
+// eslint-disable-next-line import/no-deprecated
 import {IDProvider, StyleType} from "@khanacademy/wonder-blocks-core";
 
 import FieldHeading from "./field-heading";

packages/wonder-blocks-form/src/components/text-area.tsx

@@ -4,6 +4,7 @@ import {StyleSheet} from "aphrodite";
 import {
     AriaProps,
     StyleType,
+    // eslint-disable-next-line import/no-deprecated
     useUniqueIdWithMock,
     addStyle,
     View,
@@ -244,6 +245,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
         const hasError = error || !!errorMessage;
 
+        // eslint-disable-next-line import/no-deprecated
         const ids = useUniqueIdWithMock("text-area");
         const uniqueId = id ?? ids.get("id");
 

packages/wonder-blocks-form/src/components/text-field.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
+// eslint-disable-next-line import/no-deprecated
 import {IDProvider, addStyle} from "@khanacademy/wonder-blocks-core";
 import {border, color, mix, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";

packages/wonder-blocks-modal/src/components/one-pane-dialog.tsx

@@ -4,6 +4,7 @@ import {Breadcrumbs} from "@khanacademy/wonder-blocks-breadcrumbs";
 import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
+// eslint-disable-next-line import/no-deprecated
 import {IDProvider} from "@khanacademy/wonder-blocks-core";
 import ModalDialog from "./modal-dialog";
 import ModalPanel from "./modal-panel";

packages/wonder-blocks-popover/src/components/popover.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
+// eslint-disable-next-line import/no-deprecated
 import {IDProvider} from "@khanacademy/wonder-blocks-core";
 import {TooltipPopper} from "@khanacademy/wonder-blocks-tooltip";
 import {maybeGetPortalMountedModalHostElement} from "@khanacademy/wonder-blocks-modal";

packages/wonder-blocks-search-field/src/components/search-field.tsx

@@ -5,6 +5,7 @@ import xIcon from "@phosphor-icons/core/regular/x.svg";
 import magnifyingGlassIcon from "@phosphor-icons/core/bold/magnifying-glass-bold.svg";
 
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
+// eslint-disable-next-line import/no-deprecated
 import {View, IDProvider} from "@khanacademy/wonder-blocks-core";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {TextField} from "@khanacademy/wonder-blocks-form";

packages/wonder-blocks-switch/src/components/switch.tsx

@@ -5,6 +5,7 @@ import {
     AriaProps,
     View,
     addStyle,
+    // eslint-disable-next-line import/no-deprecated
     useUniqueIdWithMock,
 } from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
@@ -69,6 +70,7 @@ const SwitchCore = React.forwardRef(function SwitchCore(
         testId,
     } = props;
 
+    // eslint-disable-next-line import/no-deprecated
     const ids = useUniqueIdWithMock("labeled-field");
     const uniqueId = id ?? ids.get("labeled-field-id");
 

packages/wonder-blocks-testing/src/harness/adapters/__tests__/render-state.test.tsx

@@ -48,6 +48,7 @@ describe("SSR.adapter", () => {
     it("should enable harnessing of components that require RenderStateRoot", () => {
         // Arrange
         const ComponentNeedsSsr = (props: any) => {
+            // eslint-disable-next-line import/no-deprecated
             const idf = WBCore.useUniqueIdWithoutMock();
             return <div>{idf?.get("my-id")}</div>;
         };

packages/wonder-blocks-tooltip/src/components/tooltip.tsx

@@ -21,6 +21,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import {
+    // eslint-disable-next-line import/no-deprecated
     UniqueIDProvider,
     IIdentifierFactory,
 } from "@khanacademy/wonder-blocks-core";