Migration to Storybook 8

Skyscanner · Jun 19, 2024 · 80f8051 · 80f8051
1 parent 45b087e
commit 80f8051
Show file tree

Hide file tree

Showing 11 changed files with 1,054 additions and 568 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -28,16 +28,17 @@ const config: StorybookConfig = {
     '@storybook/addon-docs',
     '@storybook/addon-interactions',
     '@storybook/addon-viewport',
+    '@storybook/addon-webpack5-compiler-babel'
   ],
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
   docs: {
-    autodocs: true,
-    defaultName: 'Documentation',
+    defaultName: 'Documentation'
   },
   typescript: {
+    reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldIncludePropTagMap: true,
       propFilter: (prop) => {        
@@ -48,8 +49,5 @@ const config: StorybookConfig = {
       },
     },
   },
-  features: {
-    storyStoreV7: false, // TODO: Remove this. Temporarily opt out of on-demand story loading as it blocks Percy from running tests
-  },
 };
 export default config;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { ArgsTable } from '@storybook/addon-docs';
-import { Title, PRIMARY_STORY } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/addon-docs';
+import { Title } from '@storybook/blocks';
 
 import '../packages/bpk-stylesheets';
 import '../packages/bpk-stylesheets/font';
@@ -64,6 +64,7 @@ const preview: Preview = {
         </div>
     )},
   ],
+
   parameters: {
     docs: {
       source: {
@@ -72,14 +73,17 @@ const preview: Preview = {
       page: () => (
         <>
           <Title />
-          <ArgsTable story={PRIMARY_STORY} />
+          <ArgTypes exclude={['zoomEnabled']}/>
         </>
       )
     },
   },
+
   args: {
     zoomEnabled: false,
-  }
+  },
+
+  tags: ['autodocs']
 };
 
 export default preview;
diff --git a/examples/bpk-component-aria-live/stories.tsx b/examples/bpk-component-aria-live/stories.tsx
@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { ArgsTable } from '@storybook/addon-docs';
-import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/addon-docs';
+import { Title, Markdown } from '@storybook/blocks';
 
 import BpkAriaLive from '../../packages/bpk-component-aria-live/src/BpkAriaLive';
 
@@ -31,7 +31,7 @@ export default {
       page: () => (
         <>
           <Title />
-          <ArgsTable of={PRIMARY_STORY} />
+          <ArgTypes exclude={['zoomEnabled']} />
           <Markdown>
             {`**Note:** \`aria-relevant\` and \`aria-atomic\` props can also be set.
             \`aria-relevant\` determines what sort of changes should be read out. By default it is \`text\` but can be \`additions\`, \`removals\` or \`all\`. [Read more about \`aria-relevant\` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant).

diff --git a/examples/bpk-component-autosuggest/stories.js b/examples/bpk-component-autosuggest/stories.js
@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import { ArgsTable } from '@storybook/addon-docs';
-import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks';
-import { userEvent, within } from '@storybook/testing-library';
+import { ArgTypes } from '@storybook/addon-docs';
+import { Title, Markdown } from '@storybook/blocks';
+import { userEvent, within } from '@storybook/test';
 
 import BpkAutosuggest from '../../packages/bpk-component-autosuggest/src/BpkAutosuggest';
 import BpkAutosuggestSuggestion from '../../packages/bpk-component-autosuggest/src/BpkAutosuggestSuggestion';
@@ -38,7 +38,7 @@ export default {
       page: () => (
         <>
           <Title />
-          <ArgsTable of={PRIMARY_STORY} />
+          <ArgTypes exclude={['zoomEnabled']} />
           <Markdown>
             {
             `**BpkAutosuggest:**

diff --git a/examples/bpk-component-image/stories.js b/examples/bpk-component-image/stories.js
@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { ArgsTable } from '@storybook/addon-docs';
-import { Title, PRIMARY_STORY, Markdown } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/addon-docs';
+import { Title, Markdown } from '@storybook/blocks';
 
 import BpkBackgroundImage from '../../packages/bpk-component-image/src/BpkBackgroundImage';
 import BpkImage from '../../packages/bpk-component-image/src/BpkImage';
@@ -44,7 +44,7 @@ export default {
       page: () => (
         <>
           <Title />
-          <ArgsTable of={PRIMARY_STORY} />
+          <ArgTypes exclude={['zoomEnabled']} />
           <Markdown>
             {`**Note:** All [standard img attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes) including \`srcSet\` are also supported.`}
           </Markdown>

diff --git a/examples/bpk-component-input/stories.js b/examples/bpk-component-input/stories.js
@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { ArgsTable } from '@storybook/addon-docs';
-import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/addon-docs';
+import { Title, Markdown } from '@storybook/blocks';
 
 import BpkInput from '../../packages/bpk-component-input/src/BpkInput';
 
@@ -50,7 +50,7 @@ export default {
       page: () => (
         <>
           <Title />
-          <ArgsTable of={PRIMARY_STORY} />
+          <ArgTypes exclude={['zoomEnabled']} />
           <Markdown>
             {
             `**Note:** Additionally, all native \`input\` attributes such as \`placeholder\` and \`onChange\` are supported.`

diff --git a/examples/bpk-component-slider/stories.js b/examples/bpk-component-slider/stories.js
@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { ArgsTable } from '@storybook/addon-docs';
-import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/addon-docs';
+import { Title, Markdown } from '@storybook/blocks';
 
 import BpkSlider from '../../packages/bpk-component-slider/src/BpkSlider';
 
@@ -38,7 +38,7 @@ export default {
       page: () => (
         <>
           <Title />
-          <ArgsTable of={PRIMARY_STORY} />
+          <ArgTypes exclude={['zoomEnabled']} />
           <Markdown>
             {`
               **Note**: minDistance and step props are multiplied to calculate the minimum distance allowed between thumbs

diff --git a/examples/bpk-component-switch/stories.js b/examples/bpk-component-switch/stories.js
@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { ArgsTable } from '@storybook/addon-docs';
-import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/addon-docs';
+import { Title, Markdown } from '@storybook/blocks';
 
 import BpkSwitch from '../../packages/bpk-component-switch/src/BpkSwitch';
 
@@ -31,7 +31,7 @@ export default {
       page: () => (
         <>
           <Title />
-          <ArgsTable of={PRIMARY_STORY} />
+          <ArgTypes exclude={['zoomEnabled']} />
           <Markdown>
             {
               `This component uses a hidden [\`input type=checkbox\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), so it supports all the same properties as it (for example \`checked\`).`

diff --git a/examples/bpk-scrim-utils/stories.tsx b/examples/bpk-scrim-utils/stories.tsx
@@ -17,8 +17,8 @@
  */
 
 
-import { ArgsTable } from '@storybook/addon-docs';
-import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks';
+import { ArgTypes } from '@storybook/addon-docs';
+import { Title, Markdown } from '@storybook/blocks';
 
 import BpkScrim from '../../packages/bpk-scrim-utils/src/BpkScrim';
 
@@ -37,7 +37,7 @@ export default {
       page: () => (
         <>
           <Title />
-          <ArgsTable of={PRIMARY_STORY} />
+          <ArgTypes exclude={['zoomEnabled']} />
           <Markdown>
           {`\`withScrim\` sends all props it receives down to the component, except \`getApplicationElement\` and \`padded\`. It also adds some props that are used for a11y and closing the modal:
           \`dialogRef\` should be set as the ref on the visible container on top of the scrim; it is used to set focus, \`onClose\` , \`isIphone\``}