(PC-34679) chore(deps): Upgrade Storybook 6 -> 8

.storybook/main.js

@@ -2,7 +2,8 @@ const path = require('path')
 
 const appSrc = path.resolve('./src/')
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -33,12 +34,22 @@ module.exports = {
         modulesToTranspile: ['@ptomasroos/react-native-multi-slider'],
       },
     },
+    '@chromatic-com/storybook',
   ],
-  framework: '@storybook/react',
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
   webpackFinal: async (config) => {
     config.resolve.alias['react-query'] = require.resolve('./mocks/react-query.js')
     config.resolve.alias['firebase/compat/app'] = require.resolve('./mocks/firebase.js')
     config.resolve.alias['firebase/remote-config'] = require.resolve('./mocks/remote-config.js')
     return config
   },
+
+  docs: {
+    autodocs: true,
+  },
 }

.storybook/preview.js

@@ -6,7 +6,6 @@ import { theme } from 'theme'
 import { useQueryDecorator } from './mocks/react-query'
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -15,12 +14,7 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: [
-        'Design System',
-        'Fondations',
-        'ui',
-        'Features'
-      ],
+      order: ['Design System', 'Fondations', 'ui', 'Features'],
     },
   },
 }
@@ -38,7 +32,6 @@ export const decorators = [
       <Story />
     </SafeAreaProvider>
   ),
-  (Story) => useQueryDecorator(Story,
-    { parameters: { useQuery: { featureFlags: firestoreResponseMock }}}
-  ),
+  (Story) =>
+    useQueryDecorator(Story, { parameters: { useQuery: { featureFlags: firestoreResponseMock } } }),
 ]

.vscode/story-with-variants.code-snippets

@@ -1,41 +1,40 @@
 {
-    "React-Native Variants Component": {
-      "prefix": "story-with-variants",
-      "scope": "javascriptreact, typescriptreact",
-      "body": [
-        "import { ComponentMeta } from '@storybook/react'",
-        "import React from 'react'",
-        "",
-        "import { VariantsTemplate, type Variants, type VariantsStory } from 'ui/storybook/VariantsTemplate'",
-        "",
-        "import { ${1:ComponentName} } from './${1:ComponentName}'",
-        "",
-        "const meta: ComponentMeta<typeof ${1:ComponentName}> = {",
-        "  title: '${1:ComponentName}',",
-        "  component: ${1:ComponentName},",
-        "}",
-        "export default meta",
-        "",
-        "const variantConfig: Variants<typeof ${1:ComponentName}> = [",
-        "  {",
-        "    label: 'Variant label 1',",
-        "    props: { ${3:prop1}: '${4:value1}' },",
-        "  },",
-        "  {",
-        "    label: 'Variant label 2',",
-        "    props: { ${5:prop2}: '${6:value2}' },",
-        "  },",
-        "]",
-        "",
-        "const Template: VariantsStory<typeof ${1:ComponentName}> = (arg) => (",
-        "  <VariantsTemplate variants={variantConfig} Component={${1:ComponentName}} defaultProps={arg} />",
-        ")",
-        "",
-        "export const AllVariants = Template.bind({})",
-        "AllVariants.storyName = '${1:ComponentName}'",
-        ""
-      ],
-      "description": "Create a component story with VariantsTemplate component for Storybook"
-    }
-  }
-
+  "React-Native Variants Component": {
+    "prefix": "story-with-variants",
+    "scope": "javascriptreact, typescriptreact",
+    "body": [
+      "import { ComponentMeta } from '@storybook/react'",
+      "import React from 'react'",
+      "",
+      "import { VariantsTemplate, type Variants, type VariantsStory } from 'ui/storybook/VariantsTemplate'",
+      "",
+      "import { ${1:ComponentName} } from './${1:ComponentName}'",
+      "",
+      "const meta: ComponentMeta<typeof ${1:ComponentName}> = {",
+      "  title: '${1:ComponentName}',",
+      "  component: ${1:ComponentName},",
+      "}",
+      "export default meta",
+      "",
+      "const variantConfig: Variants<typeof ${1:ComponentName}> = [",
+      "  {",
+      "    label: 'Variant label 1',",
+      "    props: { ${3:prop1}: '${4:value1}' },",
+      "  },",
+      "  {",
+      "    label: 'Variant label 2',",
+      "    props: { ${5:prop2}: '${6:value2}' },",
+      "  },",
+      "]",
+      "",
+      "const Template: VariantsStory<typeof ${1:ComponentName}> = (arg) => (",
+      "  <VariantsTemplate variants={variantConfig} Component={${1:ComponentName}} defaultProps={arg} />",
+      ")",
+      "",
+      "export const AllVariants = Template.bind({})",
+      "AllVariants.name = '${1:ComponentName}'",
+      "",
+    ],
+    "description": "Create a component story with VariantsTemplate component for Storybook",
+  },
+}

.vscode/story.code-snippets

@@ -17,12 +17,12 @@
       "const Template: ComponentStory<typeof ${1:ComponentName}> = (props) => (",
       "  <${1:ComponentName} {...props} />",
       ")",
-      "export const ${3:StoryName1} = Template.bind({})",
-      "${3:StoryName1}.args = {",
+      "export const ${3:name1} = Template.bind({})",
+      "${3:name1}.args = {",
       "  ${0:args},",
       "}",
-      ""
+      "",
     ],
-    "description": "Create a component story for Storybook"
-  }
+    "description": "Create a component story for Storybook",
+  },
 }

package.json

@@ -29,7 +29,7 @@
     "build:staging": "yarn build --mode=staging",
     "build:testing": "yarn build --mode=testing",
     "build:perf": "yarn build --mode=perf",
-    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook --static-dir ./public",
+    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook build --static-dir ./public",
     "chromatic": "chromatic --exit-zero-on-changes --exit-once-uploaded",
     "fix:lint": "eslint . --ext .js,.ts,.tsx,.mjs --fix",
     "generate:api:client": "SWAGGER_CODEGEN_CLI_VERSION=3.0.32 ./scripts/generate_api_client.sh",
@@ -48,7 +48,7 @@
     "start:web:production": "yarn start:web --mode=production",
     "start:web:staging": "yarn start:web --mode=staging",
     "start:web:testing": "yarn start:web --mode=testing",
-    "storybook": "NODE_OPTIONS='--openssl-legacy-provider' TZ=UTC start-storybook --static-dir ./public -p 6006",
+    "storybook": "NODE_OPTIONS='--openssl-legacy-provider' TZ=UTC storybook dev ./public -p 6006",
     "test": "yarn test:lint && yarn test:types && yarn test:unit && yarn test:unit:web",
     "test:deadcode": "yarn knip --include-libs",
     "test:e2e:android:staging": "./scripts/run_e2e_tests.sh test android staging",
@@ -209,20 +209,23 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@bam.tech/eslint-plugin": "^1.0.1",
-    "@chanzuckerberg/axe-storybook-testing": "^8.0.2",
+    "@chanzuckerberg/axe-storybook-testing": "^8.2.2",
+    "@chromatic-com/storybook": "^3",
     "@google-cloud/local-auth": "^2.1.1",
     "@react-native/eslint-config": "0.73.2",
     "@react-native/metro-config": "0.73.5",
     "@sentry/vite-plugin": "^2.22.0",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-react-native-web": "^0.0.20",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-a11y": "^8.6.3",
+    "@storybook/addon-actions": "^8.6.3",
+    "@storybook/addon-docs": "latest",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
+    "@storybook/addon-links": "^8.6.3",
+    "@storybook/addon-react-native-web": "^0.0.27",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-vite": "^8.6.3",
+    "@storybook/react-webpack5": "^8.6.3",
+    "@storybook/test": "^8.6.3",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react": "^15.0.5",
@@ -318,6 +321,7 @@
     "resolve": "^1.20.0",
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "^11.0.1",
+    "storybook": "^8.6.3",
     "style-loader": "^2.0.0",
     "timezone-mock": "^1.2.1",
     "ts-node": "^10.8.0",

src/features/achievements/components/AchievementBanner.stories.tsx

@@ -1,14 +1,14 @@
 import { NavigationContainer } from '@react-navigation/native'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 
 import { AchievementBanner } from './AchievementBanner'
 
-const meta: ComponentMeta<typeof AchievementBanner> = {
+const meta: Meta<typeof AchievementBanner> = {
   title: 'features/profile/achievements/AchievementBanner',
   component: AchievementBanner,
   decorators: [
-    (Story) => (
+    (Story: React.ComponentType) => (
       <NavigationContainer>
         <Story />
       </NavigationContainer>
@@ -17,8 +17,9 @@ const meta: ComponentMeta<typeof AchievementBanner> = {
 }
 export default meta
 
-const Template: ComponentStory<typeof AchievementBanner> = (props) => (
-  <AchievementBanner {...props} />
-)
-export const Default = Template.bind({})
-Default.storyName = 'AchievementBanner'
+type Story = StoryObj<typeof AchievementBanner>
+
+export const Default: Story = {
+  render: (props) => <AchievementBanner {...props} />,
+}
+Default.name = 'AchievementBanner'

src/features/auth/components/AuthenticationButton/AuthenticationButton.stories.tsx

@@ -1,12 +1,12 @@
 import { NavigationContainer } from '@react-navigation/native'
-import { ComponentMeta } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 
-import { VariantsTemplate, type Variants, type VariantsStory } from 'ui/storybook/VariantsTemplate'
+import { VariantsTemplate, type Variants } from 'ui/storybook/VariantsTemplate'
 
 import { AuthenticationButton } from './AuthenticationButton'
 
-const meta: ComponentMeta<typeof AuthenticationButton> = {
+const meta: Meta<typeof AuthenticationButton> = {
   title: 'Features/auth/AuthenticationButton',
   component: AuthenticationButton,
   decorators: [
@@ -30,9 +30,13 @@ const variantConfig: Variants<typeof AuthenticationButton> = [
   },
 ]
 
-const Template: VariantsStory<typeof AuthenticationButton> = (args) => (
+type Story = StoryObj<typeof AuthenticationButton>
+
+const Template = (args: React.ComponentProps<typeof AuthenticationButton>) => (
   <VariantsTemplate variants={variantConfig} Component={AuthenticationButton} defaultProps={args} />
 )
 
-export const AllVariants = Template.bind({})
-AllVariants.storyName = 'AuthenticationButton'
+export const AllVariants: Story = {
+  render: Template,
+}
+AllVariants.name = 'AuthenticationButton'

src/features/auth/components/ProgressBar/ProgressBar.stories.tsx

@@ -1,11 +1,11 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 
 import { ProgressBar } from './ProgressBar'
 
 const ANIMATION_DURATION_IN_S = 1000
 
-const meta: ComponentMeta<typeof ProgressBar> = {
+const meta: Meta<typeof ProgressBar> = {
   title: 'features/auth/ProgressBar',
   component: ProgressBar,
   parameters: {
@@ -15,24 +15,31 @@ const meta: ComponentMeta<typeof ProgressBar> = {
 }
 export default meta
 
-const Template: ComponentStory<typeof ProgressBar> = (props) => <ProgressBar {...props} />
-//TODO(PC-28526): Fix this stories
-const FirstStep = Template.bind({})
-FirstStep.args = {
-  totalStep: 5,
-  currentStep: 0,
+type Story = StoryObj<typeof ProgressBar>
+
+// TODO(PC-28526): Fix this stories
+export const FirstStep: Story = {
+  render: (props) => <ProgressBar {...props} />,
+  args: {
+    totalStep: 5,
+    currentStep: 0,
+  },
 }
 
-//TODO(PC-28526): Fix this stories
-const SecondStep = Template.bind({})
-SecondStep.args = {
-  totalStep: 5,
-  currentStep: 1,
+// TODO(PC-28526): Fix this stories
+export const SecondStep: Story = {
+  render: (props) => <ProgressBar {...props} />,
+  args: {
+    totalStep: 5,
+    currentStep: 1,
+  },
 }
 
-//TODO(PC-28526): Fix this stories
-const LastStep = Template.bind({})
-LastStep.args = {
-  totalStep: 5,
-  currentStep: 5,
+// TODO(PC-28526): Fix this stories
+export const LastStep: Story = {
+  render: (props) => <ProgressBar {...props} />,
+  args: {
+    totalStep: 5,
+    currentStep: 5,
+  },
 }