Merge branch 'main' into feature/labeled-field

Khan · Dec 16, 2024 · 5badeed · 5badeed
2 parents 309adcb + 3c1682f
commit 5badeed
Show file tree

Hide file tree

Showing 144 changed files with 1,237 additions and 4,374 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": "@changesets/cli/changelog",
-  "commit": false,
+  "commit": true,
   "linked": [],
   "access": "public",
   "baseBranch": "main",
@@ -10,4 +10,4 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"
   }
-}
+}
diff --git a/.changeset/eighty-mayflies-refuse.md b/.changeset/eighty-mayflies-refuse.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/kind-buckets-poke.md b/.changeset/kind-buckets-poke.md
diff --git a/.changeset/perfect-cameras-protect.md b/.changeset/perfect-cameras-protect.md
diff --git a/__docs__/wonder-blocks-core/exports.use-render-state.mdx b/__docs__/wonder-blocks-core/exports.use-render-state.mdx
@@ -1,8 +1,6 @@
 import {Meta} from "@storybook/blocks";
 
-<Meta
-    title="Packages / Core / Exports / useRenderState()"
-/>
+<Meta title="Packages / Core / Exports / useRenderState()" />
 
 # useRenderState()
 
@@ -16,6 +14,3 @@ The `useRenderState` hook will return either:
     the initial rehydration render on the client.
 -   `RenderState.Standard` if the component renders on the client after the initial
     rehydration.
-
-NOTE: Although the `RenderState` enum has a third state `Root`, this value is never
-returned by `useRenderState`.
diff --git a/__docs__/wonder-blocks-core/id-provider.stories.tsx b/__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";
 

diff --git a/__docs__/wonder-blocks-core/id.mdx b/__docs__/wonder-blocks-core/id.mdx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import {Meta, Story, Canvas} from "@storybook/blocks";
+import * as IdStories from "./id.stories";
+
+<Meta of={IdStories} />
+
+# Id
+
+`Id` is a component that provides an identifier to its children.
+
+It is useful for situations where the `useId` hook cannot be easily used,
+such as in class-based components.
+
+If an `id` prop is provided, that is passed through to the children;
+otherwise, a unique identifier is generated.
+
+## Usage
+
+```tsx
+import {Id} from "@khanacademy/wonder-blocks-core";
+
+<Id id={maybeId}>{(id) => <div id={id}>Hello, world!</div>}</Id>;
+```
+
+## Examples
+
+### 1. Generating an id
+
+An identifier will always be generated if an `id` prop is not provided, or the
+provided `id` property is falsy.
+
+<Canvas withSource="open" of={IdStories.GeneratedIdExample} />
+
+### 2. Passthrough an id
+
+If an `id` prop is provided and it is truthy, that value will be passed through
+to the children.
+
+<Canvas sourceState="shown" of={IdStories.PassedThroughIdExample} />
diff --git a/__docs__/wonder-blocks-core/id.stories.tsx b/__docs__/wonder-blocks-core/id.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import {Meta} from "@storybook/react";
+import {View, Id} from "@khanacademy/wonder-blocks-core";
+import {Body, BodyMonospace} from "@khanacademy/wonder-blocks-typography";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+
+export default {
+    title: "Packages / Core / Id",
+
+    parameters: {
+        chromatic: {
+            // We don't need a snapshot for this.
+            disableSnapshot: true,
+        },
+    },
+} as Meta;
+
+export const GeneratedIdExample = () => (
+    <View>
+        <Id>
+            {(id) => (
+                <View style={{flexDirection: "row"}}>
+                    <Body>Generated identifier: </Body>
+                    <Strut size={spacing.xSmall_8} />
+                    <BodyMonospace>{id}</BodyMonospace>
+                </View>
+            )}
+        </Id>
+    </View>
+);
+
+export const PassedThroughIdExample = () => (
+    <View>
+        <Id id="my-identifier">
+            {(id) => (
+                <View style={{flexDirection: "row"}}>
+                    <Body>Passed through identifier: </Body>
+                    <Strut size={spacing.xSmall_8} />
+                    <BodyMonospace>{id}</BodyMonospace>
+                </View>
+            )}
+        </Id>
+    </View>
+);
diff --git a/__docs__/wonder-blocks-core/unique-id-provider.stories.tsx b/__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";
 

diff --git a/__docs__/wonder-blocks-core/use-unique-id.mdx b/__docs__/wonder-blocks-core/use-unique-id.mdx
@@ -1,10 +1,13 @@
 import {Meta, Story, Canvas} from "@storybook/blocks";
-import * as UseUniqueIdStories from './use-unique-id.stories';
+import * as UseUniqueIdStories from "./use-unique-id.stories";
 
 <Meta of={UseUniqueIdStories} />
 
 # `useUniqueIdWithoutMock`
 
+DEPRECATED: Will be removed in a future release. Use `useId` from React or
+the `Id` component.
+
 This hook is similar to `<UniqueIDProvider mockOnFirstRender={false}>`.
 It will return `null` on the initial render and then the same identifier
 factory for each subsequent render. The identifier factory is unique to
@@ -19,6 +22,9 @@ render tree.
 
 # `useUniqueIdWithMock`
 
+DEPRECATED: Will be removed in a future release. Use `useId` from React or
+the `Id` component.
+
 This hook is similar to `<UniqueIDProvider mockOnFirstRender={true}>`.
 It will return a mock identifier factory on the initial render that doesn'that
 guarantee identifier uniqueness. Mock mode can help things appear on the screen

diff --git a/__docs__/wonder-blocks-core/use-unique-id.stories.tsx b/__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";

diff --git a/__docs__/wonder-blocks-i18n/i18n-inline-markup.stories.tsx b/__docs__/wonder-blocks-i18n/i18n-inline-markup.stories.tsx
diff --git a/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx b/__docs__/wonder-blocks-timing/with-action-scheduler.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import {Meta} from "@storybook/react";
-import {IDProvider, View} from "@khanacademy/wonder-blocks-core";
+import {Id, View} from "@khanacademy/wonder-blocks-core";
 
 import {
     Unmounter,
@@ -29,7 +29,7 @@ export default {
 } as Meta;
 
 export const IncorrectUsage = () => (
-    <IDProvider id="incorrect" scope="example">
+    <Id>
         {(id) => (
             <View>
                 <Unmounter>
@@ -38,11 +38,11 @@ export const IncorrectUsage = () => (
                 <View id={id} />
             </View>
         )}
-    </IDProvider>
+    </Id>
 );
 
 export const CorrectUsage = () => (
-    <IDProvider id="correct" scope="example">
+    <Id>
         {(id) => (
             <View>
                 <Unmounter>
@@ -51,5 +51,5 @@ export const CorrectUsage = () => (
                 <View id={id} />
             </View>
         )}
-    </IDProvider>
+    </Id>
 );
diff --git a/consistency-tests/tsconfig.json b/consistency-tests/tsconfig.json
@@ -12,7 +12,6 @@
         {"path": "../packages/wonder-blocks-core/tsconfig-build.json"},
         {"path": "../packages/wonder-blocks-dropdown/tsconfig-build.json"},
         {"path": "../packages/wonder-blocks-form/tsconfig-build.json"},
-        {"path": "../packages/wonder-blocks-i18n/tsconfig-build.json"},
         {"path": "../packages/wonder-blocks-icon/tsconfig-build.json"},
         {"path": "../packages/wonder-blocks-icon-button/tsconfig-build.json"},
         {"path": "../packages/wonder-blocks-layout/tsconfig-build.json"},

diff --git a/packages/wonder-blocks-accordion/CHANGELOG.md b/packages/wonder-blocks-accordion/CHANGELOG.md
@@ -1,5 +1,32 @@
 # @khanacademy/wonder-blocks-accordion
 
+## 3.0.0
+
+### Major Changes
+
+-   56d961f1: - Migrate Wonder Blocks components off old id providers and onto new `Id` component
+
+### Patch Changes
+
+-   b6009b77: Deprecate the ID provider and unique ID utilities
+-   Updated dependencies [b6009b77]
+-   Updated dependencies [897686bc]
+-   Updated dependencies [56d961f1]
+    -   @khanacademy/wonder-blocks-core@10.0.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.2
+    -   @khanacademy/wonder-blocks-icon@5.0.2
+    -   @khanacademy/wonder-blocks-typography@3.0.2
+
+## 2.0.1
+
+### Patch Changes
+
+-   Updated dependencies [f4abd572]
+    -   @khanacademy/wonder-blocks-core@9.0.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.1
+    -   @khanacademy/wonder-blocks-icon@5.0.1
+    -   @khanacademy/wonder-blocks-typography@3.0.1
+
 ## 2.0.0
 
 ### Major Changes