Upgrade Storybook to 8.4.7

- Update preview file for better typing, updating deprecated properties - Remove @storybook/testing-library and use @storybook/test - Fix types in various story files
Sage-Bionetworks · Jan 6, 2025 · 3f60423 · 3f60423
1 parent 375f244
commit 3f60423
Show file tree

Hide file tree

Showing 14 changed files with 567 additions and 2,974 deletions.
diff --git a/packages/synapse-react-client/.storybook/main.mts b/packages/synapse-react-client/.storybook/main.mts
@@ -1,5 +1,5 @@
-import { mergeConfig, defineConfig } from 'vite'
 import { StorybookConfig } from '@storybook/react-vite'
+import { defineConfig, mergeConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
@@ -26,18 +26,17 @@ const config: StorybookConfig = {
   },
 
   typescript: {
-    // These options are from https://storybook.js.org/blog/material-ui-in-storybook/
-    check: false,
-    checkOptions: {},
+    // These options are from https://storybook.js.org/recipes/@mui/material
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
-      // @ts-expect-error - speeds up storybook build time
-      allowSyntheticDefaultImports: false,
-      // speeds up storybook build time
-      esModuleInterop: false,
-      // makes union prop types like variant and size appear as select controls
+      // Speeds up Storybook build time
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      // Makes union prop types like variant and size appear as select controls
       shouldExtractLiteralValuesFromEnum: true,
-      // makes string and boolean types that can be undefined appear as inputs and switches
+      // Makes string and boolean types that can be undefined appear as inputs and switches
       shouldRemoveUndefinedFromOptional: true,
       // Filter out third-party props from node_modules except @mui packages
       propFilter: prop =>
@@ -49,7 +48,7 @@ const config: StorybookConfig = {
 
   staticDirs: ['../public'],
 
-  viteFinal(config, { configType }) {
+  async viteFinal(config, { configType }) {
     let base,
       plugins = undefined
     // Fix deployment to github pages

diff --git a/packages/synapse-react-client/.storybook/preview.tsx b/packages/synapse-react-client/.storybook/preview.tsx
@@ -1,15 +1,17 @@
-import * as React from 'react'
-import '../stories/DemoStyle.scss'
+import { faker } from '@faker-js/faker'
+import { ThemeProvider } from '@mui/material'
+import { createTheme } from '@mui/material/styles'
+import { withThemeFromJSXProvider } from '@storybook/addon-themes'
+import { Preview } from '@storybook/react'
 import whyDidYouRender from '@welldone-software/why-did-you-render'
 import { Buffer } from 'buffer'
-import { StorybookComponentWrapper } from '../src/components/StorybookComponentWrapper'
+import isChromatic from 'chromatic/isChromatic'
 import { initialize, mswLoader } from 'msw-storybook-addon'
+import '../stories/DemoStyle.scss'
+import * as React from 'react'
+import { StorybookComponentWrapper } from '../src/components/StorybookComponentWrapper'
 import { getHandlers } from '../src/mocks/msw/handlers'
-import { MOCK_REPO_ORIGIN } from '../src/utils/functions/getEndpoint'
-import isChromatic from 'chromatic/isChromatic'
-import { faker } from '@faker-js/faker'
-import { ThemeProvider } from '@mui/material'
-import { withThemeFromJSXProvider } from '@storybook/addon-themes'
+import defaultMuiThemeOptions from '../src/theme/DefaultTheme'
 import {
   adKnowledgePortalPalette,
   arkPortalPalette,
@@ -18,15 +20,13 @@ import {
   crcResearcherPortalPalette,
   digitalHealthPortalPalette,
   elPortalPalette,
+  geniePalette,
   mtbPalette,
   nfPortalPalette,
   sageBionetworksPalette,
   stopAdPortalPalette,
-  geniePalette,
 } from '../src/theme/palette/Palettes'
-import { createTheme } from '@mui/material/styles'
-import defaultMuiThemeOptions from '../src/theme/DefaultTheme'
-import { Decorator } from '@storybook/react'
+import { MOCK_REPO_ORIGIN } from '../src/utils/functions/getEndpoint'
 
 // KaTeX CSS is not included in the SRC style bundle since it includes many large font files.
 import 'katex/dist/katex.css'
@@ -51,57 +51,6 @@ if (process.env.NODE_ENV === 'development') {
   })
 }
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    expanded: true,
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  msw: {
-    handlers: [
-      // Only return mocked data when making requests to our mock stack
-      ...getHandlers(MOCK_REPO_ORIGIN),
-    ],
-  },
-}
-
-export const globalTypes = {
-  showReactQueryDevtools: {
-    name: 'React Query Devtools',
-    defaultValue: false,
-    toolbar: {
-      icon: 'wrench',
-      showName: true,
-      items: [
-        { value: false, title: 'Hide React Query Devtools' },
-        { value: true, title: 'Show React Query Devtools' },
-      ],
-    },
-  },
-  stack: {
-    name: 'Stack',
-    title: 'Stack Changer',
-    description:
-      'Choose the stack that Synapse should point to. You may need to re-authenticate after changing stacks.',
-    defaultValue: null,
-    toolbar: {
-      icon: 'database',
-      dynamicTitle: true,
-      showName: true,
-      items: [
-        { value: null, title: 'default (usually production)' },
-        { value: 'production', title: 'Production' },
-        { value: 'staging', title: 'Staging' },
-        { value: 'development', title: 'Development' },
-        { value: 'mock', title: 'Mocked Data' },
-      ],
-    },
-  },
-}
-
 // Initialize MSW
 initialize({
   onUnhandledRequest: 'bypass',
@@ -122,61 +71,111 @@ if (isChromatic() && document.fonts) {
   loaders.push(fontLoader)
 }
 
-export const decorators: Decorator[] = [
-  (Story, context) => {
-    return (
-      <StorybookComponentWrapper storybookContext={context}>
-        <Story />
-      </StorybookComponentWrapper>
-    )
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    msw: {
+      handlers: [
+        // Only return mocked data when making requests to our mock stack
+        ...getHandlers(MOCK_REPO_ORIGIN),
+      ],
+    },
   },
-  // Adds global styles and theme switching support.
-  withThemeFromJSXProvider({
-    Provider: ThemeProvider,
-    themes: {
-      ['Synapse']: createTheme(defaultMuiThemeOptions),
-      ['Sage Bionetworks']: createTheme(defaultMuiThemeOptions, {
-        palette: sageBionetworksPalette,
-      }),
-      ['MTB']: createTheme(defaultMuiThemeOptions, { palette: mtbPalette }),
-      ['ARK Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: arkPortalPalette,
-      }),
-      ['NF Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: nfPortalPalette,
-      }),
-      ['BSMN Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: bsmnPortalPalette,
-      }),
-      ['STOP AD Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: stopAdPortalPalette,
-      }),
-      ['dhealth Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: digitalHealthPortalPalette,
-      }),
-      ['CRC Researcher Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: crcResearcherPortalPalette,
-      }),
-      ['Cancer Complexity Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: cancerComplexityPortalPalette,
-      }),
-
-      ['AD Knowledge Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: adKnowledgePortalPalette,
-      }),
-      ['EL Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: elPortalPalette,
-      }),
-      ['GENIE Portal']: createTheme(defaultMuiThemeOptions, {
-        palette: geniePalette,
-      }),
+  decorators: [
+    (Story, context) => {
+      return (
+        <StorybookComponentWrapper storybookContext={context}>
+          <Story />
+        </StorybookComponentWrapper>
+      )
     },
-    defaultTheme: 'Synapse',
-  }),
-]
+    // Adds global styles and theme switching support.
+    withThemeFromJSXProvider({
+      Provider: ThemeProvider,
+      themes: {
+        ['Synapse']: createTheme(defaultMuiThemeOptions),
+        ['Sage Bionetworks']: createTheme(defaultMuiThemeOptions, {
+          palette: sageBionetworksPalette,
+        }),
+        ['MTB']: createTheme(defaultMuiThemeOptions, { palette: mtbPalette }),
+        ['ARK Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: arkPortalPalette,
+        }),
+        ['NF Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: nfPortalPalette,
+        }),
+        ['BSMN Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: bsmnPortalPalette,
+        }),
+        ['STOP AD Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: stopAdPortalPalette,
+        }),
+        ['dhealth Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: digitalHealthPortalPalette,
+        }),
+        ['CRC Researcher Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: crcResearcherPortalPalette,
+        }),
+        ['Cancer Complexity Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: cancerComplexityPortalPalette,
+        }),
 
-export default {
-  parameters,
-  decorators,
+        ['AD Knowledge Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: adKnowledgePortalPalette,
+        }),
+        ['EL Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: elPortalPalette,
+        }),
+        ['GENIE Portal']: createTheme(defaultMuiThemeOptions, {
+          palette: geniePalette,
+        }),
+      },
+      defaultTheme: 'Synapse',
+    }),
+  ],
   loaders,
+  globalTypes: {
+    showReactQueryDevtools: {
+      name: 'React Query Devtools',
+      toolbar: {
+        icon: 'wrench',
+        showName: true,
+        items: [
+          { value: false, title: 'Hide React Query Devtools' },
+          { value: true, title: 'Show React Query Devtools' },
+        ],
+      },
+    },
+    stack: {
+      name: 'Stack',
+      title: 'Stack Changer',
+      description:
+        'Choose the stack that Synapse should point to. You may need to re-authenticate after changing stacks.',
+      toolbar: {
+        icon: 'database',
+        dynamicTitle: true,
+        showName: true,
+        items: [
+          { value: null, title: 'default (usually production)' },
+          { value: 'production', title: 'Production' },
+          { value: 'staging', title: 'Staging' },
+          { value: 'development', title: 'Development' },
+          { value: 'mock', title: 'Mocked Data' },
+        ],
+      },
+    },
+  },
+  initialGlobals: {
+    showReactQueryDevtools: false,
+    stack: null,
+  },
 }
+
+export default preview
diff --git a/packages/synapse-react-client/package.json b/packages/synapse-react-client/package.json
@@ -148,18 +148,17 @@
     "@jest/reporters": "^29.7.0",
     "@juggle/resize-observer": "^3.4.0",
     "@open-draft/deferred-promise": "^2.2.0",
-    "@storybook/addon-actions": "^8.2.4",
-    "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/addon-themes": "^8.2.4",
-    "@storybook/manager-api": "^8.2.4",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-vite": "^8.2.4",
-    "@storybook/test": "^8.2.4",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.2.4",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-designs": "^8.0.4",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
     "@svgr/plugin-jsx": "^8.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -226,7 +225,7 @@
     "react-dom": "^18.2.0",
     "react-select-event": "^5.5.1",
     "react-test-renderer": "^18.2.0",
-    "storybook": "^8.2.4",
+    "storybook": "^8.4.7",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",

diff --git a/...s/synapse-react-client/src/components/ChallengeTeamWizard/ChallengeTeamWizard.stories.tsx b/...s/synapse-react-client/src/components/ChallengeTeamWizard/ChallengeTeamWizard.stories.tsx
@@ -1,9 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react'
-import ChallengeTeamWizard from './ChallengeTeamWizard'
-import mockProject from '../../mocks/entity/mockProject'
 import { fn } from '@storybook/test'
+import mockProject from '../../mocks/entity/mockProject'
+import ChallengeTeamWizard, {
+  ChallengeTeamWizardProps,
+} from './ChallengeTeamWizard'
 
-const meta = {
+const meta: Meta<ChallengeTeamWizardProps & { isAuthenticated?: boolean }> = {
   title: 'Synapse/Challenge/ChallengeTeamWizard',
   component: ChallengeTeamWizard,
   argTypes: {

diff --git a/packages/synapse-react-client/src/components/EntityFinder/EntityFinderModal.stories.ts b/packages/synapse-react-client/src/components/EntityFinder/EntityFinderModal.stories.ts
@@ -1,26 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { EntityFinderModal } from './EntityFinderModal'
+import { fn } from '@storybook/test'
 import {
-  SinglePane as EntityFinderSinglePane,
   DualPane as EntityFinderDualPane,
+  SinglePane as EntityFinderSinglePane,
 } from './EntityFinder.stories'
-import { fn } from '@storybook/test'
+import { EntityFinderModal } from './EntityFinderModal'
 
-const meta = {
+const meta: Meta<typeof EntityFinderModal> = {
   title: 'Synapse/EntityFinderModal',
   component: EntityFinderModal,
   args: {
     onConfirm: fn(),
     onCancel: fn(),
   },
-  argTypes: {
-    versionSelection: {
-      options: ['REQUIRED', 'DISABLED', 'TRACKED', 'UNTRACKED'],
-      control: {
-        type: 'select',
-      },
-    },
-  },
 } satisfies Meta
 export default meta
 type Story = StoryObj<typeof meta>