From a89347ee93fab8014eab8b83d3736e98506ff7e0 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Wed, 16 Aug 2023 17:14:22 -0500 Subject: [PATCH 1/5] chore: upgrade to storybook 7.x - remove extraneous / outdated storybook plugins - upgrade packages to the latest available for storybook - amend documentation pages to support MDX2 format - fix remaining bugs - update test files to support latest story-utils and other dependencies - liberally use `act()` around test setup actions --- .babelrc.json | 18 + .../Docs/GettingStarted.stories.mdx | 2 + .../Guidelines/CodeGuidelines.stories.mdx | 35 +- .../Docs/Guidelines/Components.stories.mdx | 2 + .../Docs/Guidelines/Icons.stories.mdx | 2 + .../Docs/Guidelines/Layout.stories.mdx | 5 +- .../Docs/Guidelines/Theming.stories.mdx | 2 + .../Docs/Guidelines/Tokens.stories.mdx | 2 + .../Docs/Guidelines/Typography.stories.mdx | 2 + .storybook/main.js | 19 +- package.json | 38 +- src/components/Accordion/Accordion.test.tsx | 40 +- src/components/Button/Button.test.tsx | 5 +- .../ButtonGroup/ButtonGroup.test.ts | 5 +- src/components/Card/Card.test.ts | 3 +- src/components/Checkbox/Checkbox.stories.tsx | 26 +- src/components/Checkbox/Checkbox.test.tsx | 3 +- src/components/DataBar/DataBar.test.tsx | 20 +- src/components/DragDrop/DragDrop.test.ts | 3 +- src/components/Drawer/Drawer.test.tsx | 6 +- src/components/FieldNote/FieldNote.test.ts | 4 +- src/components/Fieldset/Fieldset.test.ts | 5 +- .../FiltersDrawer/FiltersDrawer.test.tsx | 9 +- .../FiltersPopover/FiltersPopover.test.tsx | 48 +- src/components/Heading/Heading.test.tsx | 9 +- .../HorizontalStepper.test.tsx | 3 +- src/components/Icon/Icon.stories.tsx | 21 +- src/components/Icon/Icon.test.ts | 5 +- .../InlineNotification.test.ts | 3 +- .../InputField/InputField.stories.tsx | 31 +- src/components/InputField/InputField.test.ts | 5 +- src/components/InputLabel/InputLabel.test.ts | 3 +- src/components/Label/Label.test.ts | 5 +- src/components/Layout/Layout.test.ts | 5 +- .../LayoutContainer/LayoutContainer.test.ts | 3 +- src/components/Link/Link.test.tsx | 5 +- src/components/Menu/Menu.test.tsx | 30 +- src/components/Modal/Modal.test.tsx | 29 +- src/components/NumberIcon/NumberIcon.test.ts | 3 +- .../PageLevelBanner/PageLevelBanner.test.ts | 4 +- src/components/Popover/Popover.test.tsx | 15 +- .../PopoverListItem/PopoverListItem.test.ts | 3 +- .../ProgressBar/ProgressBar.test.ts | 3 +- src/components/Radio/Radio.stories.tsx | 19 +- src/components/Radio/Radio.test.tsx | 9 +- src/components/Score/Score.test.ts | 3 +- src/components/SearchBar/SearchBar.test.ts | 3 +- src/components/Select/Select.test.tsx | 11 +- src/components/Slider/Slider.stories.tsx | 45 +- src/components/Slider/Slider.test.tsx | 3 +- src/components/Table/Table.test.ts | 3 +- src/components/Tabs/Tabs.test.tsx | 33 +- src/components/Tag/Tag.test.ts | 4 +- src/components/Text/Text.test.tsx | 5 +- .../TextareaField/TextareaField.stories.tsx | 25 +- .../TextareaField/TextareaField.test.tsx | 3 +- .../TimelineNav/TimelineNav.test.ts | 4 +- src/components/Toast/Toast.test.ts | 5 +- src/components/Toggle/Toggle.test.ts | 3 +- yarn.lock | 11250 +++++++--------- 60 files changed, 5046 insertions(+), 6871 deletions(-) create mode 100644 .babelrc.json diff --git a/.babelrc.json b/.babelrc.json new file mode 100644 index 000000000..9164ce7ce --- /dev/null +++ b/.babelrc.json @@ -0,0 +1,18 @@ +{ + "sourceType": "unambiguous", + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "chrome": 100, + "safari": 15, + "firefox": 91 + } + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ], + "plugins": [] +} diff --git a/.storybook/components/Docs/GettingStarted.stories.mdx b/.storybook/components/Docs/GettingStarted.stories.mdx index 67b015605..18cd5cf34 100644 --- a/.storybook/components/Docs/GettingStarted.stories.mdx +++ b/.storybook/components/Docs/GettingStarted.stories.mdx @@ -1,3 +1,5 @@ +import { Canvas, Meta } from '@storybook/blocks'; + # Welcome to EDS diff --git a/.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx b/.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx index 6b4ed9d54..e095a3741 100644 --- a/.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx +++ b/.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx @@ -1,3 +1,5 @@ +import { Canvas, Meta } from '@storybook/blocks'; + # Code Guidelines @@ -281,7 +283,7 @@ Use: Instead of: -```tsx +``` import { EdsThemeColorUtilitySuccessForeground } from 'src/tokens-dist/ts/colors'; ; @@ -351,10 +353,9 @@ The framework follows a specific ordering/clustering for importing modules into Here's an example: ```js -import React, { ReactNode } from 'react'; // 1 -import styles from './Tags.module.css'; // 2 -import { Icon } from '../Icon/Icon'; // 3 -// 4 +import React, { ReactNode } from 'react'; +import styles from './Tags.module.css'; +import { Icon } from '../Icon/Icon'; ``` 1. Import utility/library dependencies first, in alphabetical order of the library name @@ -385,7 +386,7 @@ The comment should begin with an import example, include a general description o Example: -````tsx +```tsx /** * `import {ButtonGroup} from "@chanzuckerberg/eds";` * @@ -393,7 +394,7 @@ Example: * * Example usage: * - * ```tsx + * ``` * * ``` */ - export const ButtonGroup = ({ -```` + export const ButtonGroup = ({ ... }) +``` Do not use [jsdoc tags](https://devhints.io/jsdoc) (e.g. `@example`) if possible because these will break the documentation in storybook and cause all following text to not be shown on the page. For important jsdoc tags that we really want to include, place them at the end of the comment to avoid hiding comment content. For example, we use the `@deprecated` tag so Visual Studio Code will indicate a component is deprecated for developers, but we place that at the end of a component's docstring to avoid disrupting any of the other text. Example: -````tsx +```tsx /** * The Banner component is deprecated and will be removed in an upcoming release. * @@ -434,7 +435,7 @@ Example: * * @deprecated */ -```` +``` ### Export module @@ -455,13 +456,13 @@ The `src/components/{componentFolder}/index.ts` file should should import and re i.e. in `src/components/{componentFolder}/index.ts` -```ts +```tsx export { ComponentName as default } from './ComponentName'; ``` and in `src/index.ts` -```ts +```tsx ... export { default as ComponentName } from './components/ComponentName'; ... @@ -542,7 +543,7 @@ By default, we err towards more centralized control over the component architect - Compound components never have an associated `.stories.tsx` file as they rely on the parent component's stories to render properly. - Compound components should be exported as subcomponents from their parent component file for easier usage. For example, at the bottom of `Card.tsx`, add the lines: -```tsx +```ts // This demonstrates how bound subcomponents are attached Card.Header = CardHeader; Card.Footer = CardFooter; @@ -550,7 +551,7 @@ Card.Footer = CardFooter; ### Prop Naming conventions -- \*_camelCase for multi-word props_ - \* +- _camelCase for multi-word props_ - **All props declared at top of `render` method** - this defines all the props available to a component in one place and keeps the rest of the component code cleaner (you don't have to repeat `this.props.[thing]` everywhere). - Don't use ternaries for most things, especially blocks of JSX. - Update aria attribute prop names to native HTML names (`aria-label`, `aria-describedby`, `aria-labelledby`) @@ -596,11 +597,11 @@ The default option should be the one most commonly used in order to reduce frict ID attributes used for accessibility (e.g. associating `