Skip to content

Commit ea1bf0c

Browse files
somewhatabstractsomewhatabstract
authored
Deprecate custom ID generation APIs from Wonder Blocks (#2007)
## Summary: Welcome to the Wonder Blocks 1812 Overture - a series of PRs that will deprecate and remove the custom ID generation utilities in favour of React's `useId` and the new `Id` component that is built atop of it. This updates dependencies in Perseus to latest webapp dependencies (used the sync script for that), and includes the soon to be released Wonder Blocks that deprecates the custom ID generation utilities in favour of React's `useId` and the new `Id` component that is built atop of it. An upcoming PR will then have the work of removing the old API uses so that we can then delete them from a future Wonder Blocks release. NOTE: I will update this to the actual released WB before landing, once that happens. I am trying to get everything reviewed and ready to go so that when I do that release, I can get everything up-to-date quickly and correctly. Issue: WB-1812 ## Test plan: `yarn test` `yarn lint` Author: somewhatabstract Reviewers: anakaren-rojas, mark-fitzgerald, catandthemachines, somewhatabstract Required Reviewers: Approved By: anakaren-rojas, mark-fitzgerald, catandthemachines Checks: ⌛ Publish npm snapshot (ubuntu-latest, 20.x), ⌛ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⌛ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ⌛ Publish Storybook to Chromatic (ubuntu-latest, 20.x) Pull Request URL: #2007
1 parent cfbe3dc commit ea1bf0c

File tree

34 files changed

+472
-515
lines changed

34 files changed

+472
-515
lines changed

‎.changeset/odd-walls-lick.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@khanacademy/perseus-dev-ui": major
3+
"@khanacademy/math-input": major
4+
"@khanacademy/perseus": major
5+
"@khanacademy/perseus-core": major
6+
"@khanacademy/perseus-editor": major
7+
---
8+
9+
Update to latest webapp dependencies and prepare for deprecation of custom WB ID generators

‎.eslintrc.js

+20
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,26 @@ module.exports = {
289289
message:
290290
"Use of React.FC<Props> is disallowed, use the following alternative: https://khanacademy.atlassian.net/wiki/spaces/ENG/pages/2201682693/TypeScript+for+Flow+Developers#Functional-Components",
291291
},
292+
{
293+
selector:
294+
"JSXElement[openingElement.name.name='UniqueIDProvider']",
295+
message:
296+
"DEPRECATED: Use the `Id` Wonder Blocks Core component instead, or migrate to the `useId` React hook.",
297+
},
298+
{
299+
selector: "JSXElement[openingElement.name.name='IDProvider']",
300+
message:
301+
"DEPRECATED: Use the `Id` Wonder Blocks Core component instead, or migrate to the `useId` React hook.",
302+
},
303+
{
304+
selector: "CallExpression[callee.name='useUniqueIdWithMock']",
305+
message: "DEPRECATED: Use the `useId` React hook instead.",
306+
},
307+
{
308+
selector:
309+
"CallExpression[callee.name='useUniqueIdWithoutMock']",
310+
message: "DEPRECATED: Use the `useId` React hook instead.",
311+
},
292312
],
293313

294314
/**

‎dev/gallery.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@ function capitalize(key: string): string {
9898
}
9999

100100
export function Gallery() {
101+
// TODO(WB-1812, somewhatabstract): Migrate to Id or useId
102+
// eslint-disable-next-line no-restricted-syntax
101103
const ids = useUniqueIdWithMock();
102104
const params = useMemo(
103105
() => new URLSearchParams(window.location.search),

‎dev/package.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@
2121
"@khanacademy/perseus-linter": "^1.2.5",
2222
"@khanacademy/pure-markdown": "^0.3.14",
2323
"@khanacademy/simple-markdown": "^0.13.7",
24-
"@khanacademy/wonder-blocks-banner": "3.1.7",
25-
"@khanacademy/wonder-blocks-icon": "4.1.3",
26-
"@khanacademy/wonder-blocks-icon-button": "5.3.4",
27-
"@khanacademy/wonder-blocks-link": "6.1.6",
28-
"@khanacademy/wonder-blocks-search-field": "2.2.23",
29-
"@khanacademy/wonder-blocks-timing": "5.0.1",
30-
"@khanacademy/wonder-blocks-tokens": "2.0.0",
31-
"@khanacademy/wonder-blocks-toolbar": "3.0.35",
32-
"@khanacademy/wonder-blocks-tooltip": "2.4.0",
33-
"@khanacademy/wonder-stuff-core": "1.5.2",
24+
"@khanacademy/wonder-blocks-banner": "4.0.2",
25+
"@khanacademy/wonder-blocks-icon": "5.0.2",
26+
"@khanacademy/wonder-blocks-icon-button": "6.0.2",
27+
"@khanacademy/wonder-blocks-link": "7.0.2",
28+
"@khanacademy/wonder-blocks-search-field": "4.0.0",
29+
"@khanacademy/wonder-blocks-timing": "6.0.0",
30+
"@khanacademy/wonder-blocks-tokens": "3.0.0",
31+
"@khanacademy/wonder-blocks-toolbar": "5.0.2",
32+
"@khanacademy/wonder-blocks-tooltip": "4.0.0",
33+
"@khanacademy/wonder-stuff-core": "1.5.4",
3434
"@phosphor-icons/core": "^2.0.2"
3535
},
3636
"devDependencies": {

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
"@jest/globals": "^29.7.0",
3030
"@khanacademy/eslint-config": "^4.0.0",
3131
"@khanacademy/eslint-plugin": "^3.0.1",
32-
"@khanacademy/mathjax-renderer": "^2.1.0",
33-
"@khanacademy/wonder-blocks-button": "6.3.8",
34-
"@khanacademy/wonder-blocks-layout": "2.1.3",
32+
"@khanacademy/mathjax-renderer": "^2.1.1",
33+
"@khanacademy/wonder-blocks-button": "7.0.2",
34+
"@khanacademy/wonder-blocks-layout": "3.0.2",
3535
"@khanacademy/wonder-blocks-spacing": "^4.0.1",
3636
"@popperjs/core": "^2.10.2",
3737
"@rollup/plugin-alias": "^3.1.9",
@@ -109,7 +109,7 @@
109109
"react-router": "5.3.4",
110110
"react-router-dom": "5.3.4",
111111
"react-transition-group": "^4.4.1",
112-
"react-window": "^1.8.5",
112+
"react-window": "^1.8.10",
113113
"rollup": "^2.70.2",
114114
"rollup-plugin-auto-external": "^2.0.0",
115115
"rollup-plugin-executable-output": "^1.3.0",

‎packages/math-input/package.json

+14-14
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@
4343
"mathquill": "https://github.com/Khan/mathquill/releases/download/v1.0.0/mathquill-v1.0.0.tgz"
4444
},
4545
"devDependencies": {
46-
"@khanacademy/mathjax-renderer": "^2.1.0",
47-
"@khanacademy/wonder-blocks-clickable": "4.2.6",
48-
"@khanacademy/wonder-blocks-core": "6.4.3",
49-
"@khanacademy/wonder-blocks-popover": "3.2.13",
50-
"@khanacademy/wonder-blocks-timing": "5.0.1",
51-
"@khanacademy/wonder-blocks-tokens": "2.0.0",
52-
"@khanacademy/wonder-stuff-core": "1.5.2",
46+
"@khanacademy/mathjax-renderer": "^2.1.1",
47+
"@khanacademy/wonder-blocks-clickable": "5.0.2",
48+
"@khanacademy/wonder-blocks-core": "10.0.0",
49+
"@khanacademy/wonder-blocks-popover": "5.0.0",
50+
"@khanacademy/wonder-blocks-timing": "6.0.0",
51+
"@khanacademy/wonder-blocks-tokens": "3.0.0",
52+
"@khanacademy/wonder-stuff-core": "1.5.4",
5353
"@phosphor-icons/core": "^2.0.2",
5454
"aphrodite": "^1.2.5",
5555
"jquery": "^2.1.1",
@@ -61,13 +61,13 @@
6161
"react-transition-group": "^4.4.1"
6262
},
6363
"peerDependencies": {
64-
"@khanacademy/mathjax-renderer": "^2.1.0",
65-
"@khanacademy/wonder-blocks-clickable": "4.2.6",
66-
"@khanacademy/wonder-blocks-core": "6.4.3",
67-
"@khanacademy/wonder-blocks-popover": "3.2.13",
68-
"@khanacademy/wonder-blocks-timing": "5.0.1",
69-
"@khanacademy/wonder-blocks-tokens": "2.0.0",
70-
"@khanacademy/wonder-stuff-core": "1.5.2",
64+
"@khanacademy/mathjax-renderer": "^2.1.1",
65+
"@khanacademy/wonder-blocks-clickable": "5.0.2",
66+
"@khanacademy/wonder-blocks-core": "10.0.0",
67+
"@khanacademy/wonder-blocks-popover": "5.0.0",
68+
"@khanacademy/wonder-blocks-timing": "6.0.0",
69+
"@khanacademy/wonder-blocks-tokens": "3.0.0",
70+
"@khanacademy/wonder-stuff-core": "1.5.4",
7171
"@phosphor-icons/core": "^2.0.2",
7272
"aphrodite": "^1.2.5",
7373
"jquery": "^2.1.1",

‎packages/perseus-core/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
},
2727
"dependencies": {},
2828
"devDependencies": {
29-
"@khanacademy/wonder-stuff-core": "1.5.2"
29+
"@khanacademy/wonder-stuff-core": "1.5.4"
3030
},
3131
"peerDependencies": {},
3232
"keywords": []

‎packages/perseus-editor/package.json

+30-30
Original file line numberDiff line numberDiff line change
@@ -45,21 +45,21 @@
4545
},
4646
"devDependencies": {
4747
"@khanacademy/perseus-linter": "^1.2.5",
48-
"@khanacademy/wonder-blocks-accordion": "1.3.6",
49-
"@khanacademy/wonder-blocks-banner": "3.1.7",
50-
"@khanacademy/wonder-blocks-button": "6.3.8",
51-
"@khanacademy/wonder-blocks-clickable": "4.2.6",
52-
"@khanacademy/wonder-blocks-core": "6.4.3",
53-
"@khanacademy/wonder-blocks-dropdown": "5.4.5",
54-
"@khanacademy/wonder-blocks-form": "4.9.0",
55-
"@khanacademy/wonder-blocks-icon": "4.1.3",
56-
"@khanacademy/wonder-blocks-icon-button": "5.3.4",
57-
"@khanacademy/wonder-blocks-switch": "1.1.20",
58-
"@khanacademy/wonder-blocks-timing": "5.0.1",
59-
"@khanacademy/wonder-blocks-tokens": "2.0.0",
60-
"@khanacademy/wonder-blocks-tooltip": "2.4.0",
61-
"@khanacademy/wonder-blocks-typography": "2.1.14",
62-
"@khanacademy/wonder-stuff-core": "1.5.2",
48+
"@khanacademy/wonder-blocks-accordion": "3.0.0",
49+
"@khanacademy/wonder-blocks-banner": "4.0.2",
50+
"@khanacademy/wonder-blocks-button": "7.0.2",
51+
"@khanacademy/wonder-blocks-clickable": "5.0.2",
52+
"@khanacademy/wonder-blocks-core": "10.0.0",
53+
"@khanacademy/wonder-blocks-dropdown": "7.0.0",
54+
"@khanacademy/wonder-blocks-form": "6.0.0",
55+
"@khanacademy/wonder-blocks-icon": "5.0.2",
56+
"@khanacademy/wonder-blocks-icon-button": "6.0.2",
57+
"@khanacademy/wonder-blocks-switch": "3.0.0",
58+
"@khanacademy/wonder-blocks-timing": "6.0.0",
59+
"@khanacademy/wonder-blocks-tokens": "3.0.0",
60+
"@khanacademy/wonder-blocks-tooltip": "4.0.0",
61+
"@khanacademy/wonder-blocks-typography": "3.0.2",
62+
"@khanacademy/wonder-stuff-core": "1.5.4",
6363
"@phosphor-icons/core": "^2.0.2",
6464
"aphrodite": "^1.2.5",
6565
"classnames": "1.1.4",
@@ -73,21 +73,21 @@
7373
"underscore": "^1.4.4"
7474
},
7575
"peerDependencies": {
76-
"@khanacademy/wonder-blocks-accordion": "1.3.6",
77-
"@khanacademy/wonder-blocks-banner": "3.1.7",
78-
"@khanacademy/wonder-blocks-button": "6.3.8",
79-
"@khanacademy/wonder-blocks-clickable": "4.2.6",
80-
"@khanacademy/wonder-blocks-core": "6.4.3",
81-
"@khanacademy/wonder-blocks-dropdown": "5.4.5",
82-
"@khanacademy/wonder-blocks-form": "4.9.0",
83-
"@khanacademy/wonder-blocks-icon": "4.1.3",
84-
"@khanacademy/wonder-blocks-icon-button": "5.3.4",
85-
"@khanacademy/wonder-blocks-switch": "1.1.20",
86-
"@khanacademy/wonder-blocks-timing": "5.0.1",
87-
"@khanacademy/wonder-blocks-tokens": "2.0.0",
88-
"@khanacademy/wonder-blocks-tooltip": "2.4.0",
89-
"@khanacademy/wonder-blocks-typography": "2.1.14",
90-
"@khanacademy/wonder-stuff-core": "1.5.2",
76+
"@khanacademy/wonder-blocks-accordion": "3.0.0",
77+
"@khanacademy/wonder-blocks-banner": "4.0.2",
78+
"@khanacademy/wonder-blocks-button": "7.0.2",
79+
"@khanacademy/wonder-blocks-clickable": "5.0.2",
80+
"@khanacademy/wonder-blocks-core": "10.0.0",
81+
"@khanacademy/wonder-blocks-dropdown": "7.0.0",
82+
"@khanacademy/wonder-blocks-form": "6.0.0",
83+
"@khanacademy/wonder-blocks-icon": "5.0.2",
84+
"@khanacademy/wonder-blocks-icon-button": "6.0.2",
85+
"@khanacademy/wonder-blocks-switch": "3.0.0",
86+
"@khanacademy/wonder-blocks-timing": "6.0.0",
87+
"@khanacademy/wonder-blocks-tokens": "3.0.0",
88+
"@khanacademy/wonder-blocks-tooltip": "4.0.0",
89+
"@khanacademy/wonder-blocks-typography": "3.0.2",
90+
"@khanacademy/wonder-stuff-core": "1.5.4",
9191
"@phosphor-icons/core": "^2.0.2",
9292
"aphrodite": "^1.2.5",
9393
"classnames": "1.1.4",

‎packages/perseus-editor/src/components/widget-editor.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,8 @@ function LabeledSwitch(props: {
236236
onChange: (value: boolean) => unknown;
237237
}) {
238238
const {label, ...switchProps} = props;
239+
// TODO(WB-1812, somewhatabstract): Migrate to Id or useId
240+
// eslint-disable-next-line no-restricted-syntax
239241
const ids = useUniqueIdWithMock();
240242
const id = ids.get("switch");
241243
return (

‎packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/labeled-switch.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ type Props = {
1818
const LabeledSwitch = (props: Props) => {
1919
const {checked, label, style, onChange} = props;
2020

21+
// TODO(WB-1812, somewhatabstract): Migrate to Id or useId
22+
// eslint-disable-next-line no-restricted-syntax
2123
const ids = useUniqueIdWithMock();
2224
const switchId = ids.get("switch");
2325

‎packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figures-section.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ const LockedFiguresSection = (props: Props) => {
4343

4444
const [isExpanded, setIsExpanded] = React.useState(true);
4545

46+
// TODO(WB-1812, somewhatabstract): Migrate to Id or useId
47+
// eslint-disable-next-line no-restricted-syntax
4648
const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
4749
const {figures, onChange} = props;
4850

‎packages/perseus/package.json

+39-39
Original file line numberDiff line numberDiff line change
@@ -54,25 +54,25 @@
5454
"uuid": "^10.0.0"
5555
},
5656
"devDependencies": {
57-
"@khanacademy/wonder-blocks-banner": "3.1.7",
58-
"@khanacademy/wonder-blocks-button": "6.3.8",
59-
"@khanacademy/wonder-blocks-clickable": "4.2.6",
60-
"@khanacademy/wonder-blocks-core": "6.4.3",
61-
"@khanacademy/wonder-blocks-data": "13.0.10",
62-
"@khanacademy/wonder-blocks-dropdown": "5.4.5",
63-
"@khanacademy/wonder-blocks-form": "4.9.0",
64-
"@khanacademy/wonder-blocks-icon": "4.1.3",
65-
"@khanacademy/wonder-blocks-icon-button": "5.3.4",
66-
"@khanacademy/wonder-blocks-layout": "2.1.3",
67-
"@khanacademy/wonder-blocks-link": "6.1.6",
68-
"@khanacademy/wonder-blocks-pill": "2.4.5",
69-
"@khanacademy/wonder-blocks-popover": "3.2.13",
70-
"@khanacademy/wonder-blocks-progress-spinner": "2.1.5",
71-
"@khanacademy/wonder-blocks-switch": "1.1.20",
72-
"@khanacademy/wonder-blocks-tokens": "2.0.1",
73-
"@khanacademy/wonder-blocks-tooltip": "2.4.0",
74-
"@khanacademy/wonder-blocks-typography": "2.1.14",
75-
"@khanacademy/wonder-stuff-core": "1.5.2",
57+
"@khanacademy/wonder-blocks-banner": "4.0.2",
58+
"@khanacademy/wonder-blocks-button": "7.0.2",
59+
"@khanacademy/wonder-blocks-clickable": "5.0.2",
60+
"@khanacademy/wonder-blocks-core": "10.0.0",
61+
"@khanacademy/wonder-blocks-data": "14.0.2",
62+
"@khanacademy/wonder-blocks-dropdown": "7.0.0",
63+
"@khanacademy/wonder-blocks-form": "6.0.0",
64+
"@khanacademy/wonder-blocks-icon": "5.0.2",
65+
"@khanacademy/wonder-blocks-icon-button": "6.0.2",
66+
"@khanacademy/wonder-blocks-layout": "3.0.2",
67+
"@khanacademy/wonder-blocks-link": "7.0.2",
68+
"@khanacademy/wonder-blocks-pill": "3.0.2",
69+
"@khanacademy/wonder-blocks-popover": "5.0.0",
70+
"@khanacademy/wonder-blocks-progress-spinner": "3.0.2",
71+
"@khanacademy/wonder-blocks-switch": "3.0.0",
72+
"@khanacademy/wonder-blocks-tokens": "3.0.0",
73+
"@khanacademy/wonder-blocks-tooltip": "4.0.0",
74+
"@khanacademy/wonder-blocks-typography": "3.0.2",
75+
"@khanacademy/wonder-stuff-core": "1.5.4",
7676
"@phosphor-icons/core": "^2.0.2",
7777
"@popperjs/core": "^2.10.2",
7878
"aphrodite": "^1.2.5",
@@ -90,25 +90,25 @@
9090
"underscore": "^1.4.4"
9191
},
9292
"peerDependencies": {
93-
"@khanacademy/wonder-blocks-banner": "3.1.7",
94-
"@khanacademy/wonder-blocks-button": "6.3.8",
95-
"@khanacademy/wonder-blocks-clickable": "4.2.6",
96-
"@khanacademy/wonder-blocks-core": "6.4.3",
97-
"@khanacademy/wonder-blocks-data": "13.0.10",
98-
"@khanacademy/wonder-blocks-dropdown": "5.4.5",
99-
"@khanacademy/wonder-blocks-form": "4.9.0",
100-
"@khanacademy/wonder-blocks-icon": "4.1.3",
101-
"@khanacademy/wonder-blocks-icon-button": "5.3.4",
102-
"@khanacademy/wonder-blocks-layout": "2.1.3",
103-
"@khanacademy/wonder-blocks-link": "6.1.6",
104-
"@khanacademy/wonder-blocks-pill": "2.4.5",
105-
"@khanacademy/wonder-blocks-popover": "3.2.13",
106-
"@khanacademy/wonder-blocks-progress-spinner": "2.1.5",
107-
"@khanacademy/wonder-blocks-switch": "1.1.20",
108-
"@khanacademy/wonder-blocks-tokens": "2.0.1",
109-
"@khanacademy/wonder-blocks-tooltip": "2.4.0",
110-
"@khanacademy/wonder-blocks-typography": "2.1.14",
111-
"@khanacademy/wonder-stuff-core": "1.5.2",
93+
"@khanacademy/wonder-blocks-banner": "4.0.2",
94+
"@khanacademy/wonder-blocks-button": "7.0.2",
95+
"@khanacademy/wonder-blocks-clickable": "5.0.2",
96+
"@khanacademy/wonder-blocks-core": "10.0.0",
97+
"@khanacademy/wonder-blocks-data": "14.0.2",
98+
"@khanacademy/wonder-blocks-dropdown": "7.0.0",
99+
"@khanacademy/wonder-blocks-form": "6.0.0",
100+
"@khanacademy/wonder-blocks-icon": "5.0.2",
101+
"@khanacademy/wonder-blocks-icon-button": "6.0.2",
102+
"@khanacademy/wonder-blocks-layout": "3.0.2",
103+
"@khanacademy/wonder-blocks-link": "7.0.2",
104+
"@khanacademy/wonder-blocks-pill": "3.0.2",
105+
"@khanacademy/wonder-blocks-popover": "5.0.0",
106+
"@khanacademy/wonder-blocks-progress-spinner": "3.0.2",
107+
"@khanacademy/wonder-blocks-switch": "3.0.0",
108+
"@khanacademy/wonder-blocks-tokens": "3.0.0",
109+
"@khanacademy/wonder-blocks-tooltip": "4.0.0",
110+
"@khanacademy/wonder-blocks-typography": "3.0.2",
111+
"@khanacademy/wonder-stuff-core": "1.5.4",
112112
"@phosphor-icons/core": "^2.0.2",
113113
"@popperjs/core": "^2.10.2",
114114
"aphrodite": "^1.2.5",
@@ -124,4 +124,4 @@
124124
"underscore": "^1.4.4"
125125
},
126126
"keywords": []
127-
}
127+
}

0 commit comments

Comments
 (0)