-
Notifications
You must be signed in to change notification settings - Fork 84
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[NO-TICKET] Upgrade React types to fix Storybook 8 branch (#3080)
* WIP: Try upgrading the react types and working through errors Here's the summary of errors we're starting with: ``` Found 109 errors in 28 files. Errors Files 4 packages/design-system/src/components/Accordion/Accordion.stories.tsx:8 3 packages/design-system/src/components/Alert/Alert.stories.tsx:6 1 packages/design-system/src/components/Autocomplete/utils.tsx:15 11 packages/design-system/src/components/ChoiceList/ChoiceList.stories.tsx:7 4 packages/design-system/src/components/Drawer/Drawer.stories.tsx:29 12 packages/design-system/src/components/Dropdown/Dropdown.stories.tsx:8 6 packages/design-system/src/components/Dropdown/Dropdown.tsx:171 1 packages/design-system/src/components/Dropdown/DropdownMenuOption.tsx:66 5 packages/design-system/src/components/HelpDrawer/HelpDrawer.stories.tsx:29 4 packages/design-system/src/components/IdleTimeout/IdleTimeout.stories.tsx:10 4 packages/design-system/src/components/PrivacySettingsDialog/PrivacySettingsDialog.stories.tsx:17 6 packages/design-system/src/components/Spinner/Spinner.stories.tsx:6 23 packages/design-system/src/components/TextField/TextField.stories.tsx:10 2 packages/design-system/src/components/Tooltip/Tooltip.tsx:357 1 packages/design-system/src/components/UsaBanner/UsaBanner.stories.tsx:5 1 packages/design-system/src/components/web-components/ds-accordion/ds-accordion.tsx:22 1 packages/design-system/src/components/web-components/preactement/define.test.tsx:35 1 packages/docs/src/components/content/ContentRenderer.tsx:111 1 packages/docs/src/components/content/EmbeddedExample.tsx:17 2 packages/docs/src/components/layout/SideNav/SideNav.tsx:25 2 packages/docs/src/components/layout/TableOfContents.tsx:43 1 packages/docs/src/components/page-templates/BlogPage.tsx:18 1 packages/docs/src/pages/blog.tsx:33 2 packages/ds-healthcare-gov/src/components/Accordion/Accordion.stories.tsx:8 2 packages/ds-medicare-gov/src/components/Card/Card.stories.tsx:6 5 packages/ds-medicare-gov/src/components/HelpDrawer/HelpDrawer.stories.tsx:31 1 packages/ds-medicare-gov/src/components/SimpleFooter/SimpleFooter.stories.tsx:6 2 packages/ds-medicare-gov/src/components/Stars/stars.stories.tsx:6 ``` * Fixing the first batch of errors (down to 89 from 109) * Remove custom docs config for Drawer storybook page and fix VRTs Add new interaction VRTs for dialog and drawer, and don't have any of the stories open them automatically * Trying to fix missing Drawer story controls but failing I was hoping fixing these types would do it. * Ignore errors coming from react-aria types * Two different ways of getting around the errors for inlining the doc page JSX * Down to 24 errors * Finished fixing all the errors in the core package (down to 20 now) * Huh, the errors just go away after making some edits to the yarn lockfile I think I'll go back and undo some of my previous commits to see if I need them * Just realized there was some dead code in here * Revert "Ignore errors coming from react-aria types" This reverts commit f4fac88. * Revert more of the react-aria changes This reverts part of commit ffc035d. * I can revert this change too * Oh no, these new arg tables do not look good It seems as though the type inference has gotten worse in this version. Instead of the type for Badge `size` being listed as `big` (only supports big), it is now reported as `literal`. For `string | React.ReactNode`, it only says `union`. Instead of `type` being `checkbox` and `radio`, it’s `union`. Instead of `ReactNode` for `React.ReactNode`, it prints out as `ReactReactNode` * Revert "Oh no, these new arg tables do not look good" This reverts commit 6811f4b. * Changing the default settings to use the typescript docgen results in much fewer changes See storybookjs/storybook#26496
- Loading branch information
Showing
152 changed files
with
160 additions
and
190 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { Meta, Title, Subtitle, Description, ArgTypes } from '@storybook/blocks'; | ||
import { HtmlElementArgs } from './HtmlElementArgs'; | ||
|
||
<Meta isTemplate /> | ||
|
||
<Title /> | ||
<Subtitle /> | ||
|
||
<Description /> | ||
|
||
## Props | ||
|
||
{/* | ||
* Note that ArgsTable is technically deprecated in v7, but Storybook has yet | ||
* to offer a solid alternative for stories with subcomponents. This args | ||
* table will render multiple tabs when there is a `subcomponents` property | ||
* present in the story meta. See the following discussions: | ||
* | ||
* - https://github.com/storybookjs/storybook/issues/21253 | ||
* - https://github.com/storybookjs/storybook/issues/20782 | ||
* | ||
* If they remove this feature, the path forward may be to create our own | ||
* custom "doc block" that uses the | ||
* [useOf](https://storybook.js.org/docs/react/api/doc-block-useof) hook. | ||
*/} | ||
<ArgTypes /> | ||
<HtmlElementArgs /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
packages/design-system/src/components/Dialog/Dialog.test.interaction.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { test, expect } from '@playwright/test'; | ||
import themes from '../../../../../themes.json'; | ||
|
||
const sbID = 'components-dialog--default'; | ||
const storyUrl = `http://localhost:6006/iframe.html?viewMode=story&id=${sbID}`; | ||
|
||
function sleep(ms) { | ||
return new Promise((resolve) => setTimeout(resolve, ms)); | ||
} | ||
|
||
Object.keys(themes).forEach((theme) => { | ||
if (themes[theme].incomplete) return; | ||
|
||
test(`Dialog open: ${theme}`, async ({ page }) => { | ||
await page.goto(`${storyUrl}&globals=theme:${theme}`); | ||
const elem = page.getByRole('button'); | ||
await elem.click(); | ||
await sleep(100); | ||
await expect(page).toHaveScreenshot(`dialog--open--${theme}.png`, { fullPage: true }); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
packages/design-system/src/components/Drawer/Drawer.test.interaction.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { test, expect } from '@playwright/test'; | ||
import themes from '../../../../../themes.json'; | ||
|
||
const sbID = 'components-drawer--default'; | ||
const storyUrl = `http://localhost:6006/iframe.html?viewMode=story&id=${sbID}`; | ||
|
||
function sleep(ms) { | ||
return new Promise((resolve) => setTimeout(resolve, ms)); | ||
} | ||
|
||
Object.keys(themes).forEach((theme) => { | ||
if (themes[theme].incomplete) return; | ||
|
||
test(`Drawer open: ${theme}`, async ({ page }) => { | ||
await page.goto(`${storyUrl}&globals=theme:${theme}`); | ||
const elem = page.getByRole('button'); | ||
await elem.click(); | ||
await sleep(100); | ||
await expect(page).toHaveScreenshot(`drawer--open--${theme}.png`, { fullPage: true }); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 2 additions & 12 deletions
14
packages/design-system/src/components/IdleTimeout/IdleTimeout.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.