Chore update storybook v8

.storybook/main.ts

@@ -1,3 +1,4 @@
+import { dirname, join } from "path";
 import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
@@ -14,13 +15,14 @@ const config: StorybookConfig = {
   ],
 
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    'storybook-addon-pseudo-states',
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("storybook-addon-pseudo-states"),
+    '@chromatic-com/storybook'
   ],
 
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath("@storybook/react-vite"),
     options: {
       builder: {
         // Storybook would normally find the Vite config automatically.
@@ -32,9 +34,15 @@ const config: StorybookConfig = {
     },
   },
 
-  docs: {
-    autodocs: true,
-  },
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 }
 
 export default config
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/preview.tsx

@@ -66,7 +66,6 @@ export const customViewports = {
 }
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   viewport: { viewports: customViewports },
   options: {
     storySort: {
@@ -93,3 +92,4 @@ export const decorators = [
     </I18nextProvider>
   ),
 ]
+export const tags = ['autodocs'];

app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx

@@ -5,8 +5,8 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  LegacyStyledText,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -17,13 +17,13 @@ export default {
 } as Meta
 
 interface BorderRadiusStorybookProps {
-  borderRadius: string[]
+  borderRadius: Array<[string, string]>
 }
 
 const Template: Story<BorderRadiusStorybookProps> = args => {
   const targetBorderRadiuses = args.borderRadius
     .filter(s => s[0].includes('borderRadius'))
-    .sort((a, b) => {
+    .sort((a: [string, string], b: [string, string]) => {
       const aValue = parseInt(a[1])
       const bValue = parseInt(b[1])
       return aValue - bValue
@@ -45,9 +45,9 @@ const Template: Story<BorderRadiusStorybookProps> = args => {
           width="100%"
           height="6rem"
         >
-          <LegacyStyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightRegular}>
+          <StyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightRegular}>
             {`${br[0]}" ${br[1]}`}
-          </LegacyStyledText>
+          </StyledText>
           <Box
             width="10rem"
             height="4rem"

app/src/DesignTokens/Colors/Colors.stories.tsx

@@ -7,34 +7,40 @@
   DIRECTION_ROW,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
-  LegacyStyledText,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import type { Meta, Story } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
   title: 'Design Tokens/Colors',
 } as Meta
 
 interface ColorsStorybookProps {
-  colors: string[]
+  colors: Array<[string, string]>
 }
 
-const Template: Story<ColorsStorybookProps> = args => {
+const Template: StoryFn<ColorsStorybookProps> = args => {
   const targetColors = args.colors
-  const colorCategories = targetColors.reduce((acc, color) => {
-    const match = color[0].match(/[a-zA-Z]+/)
-    const category = match?.[0]
-    if (category) {
-      if (!acc[category]) {
-        acc[category] = []
+  const colorCategories: Record<
+    string,
+    Array<[string, string]>
+  > = targetColors.reduce(
+    (acc: Record<string, Array<[string, string]>>, color: [string, string]) => {
+      const match = color[0].match(/[a-zA-Z]+/)
+      const category = match?.[0]
+      if (category) {
+        if (!acc[category]) {
+          acc[category] = []
+        }
+        acc[category].push(color)
       }
-      acc[category].push(color)
-    }
-    return acc
-  }, {})
+      return acc
+    },
+    {} as Record<string, Array<[string, string]>>
+  )
 
   const invertColor = (hex: string): string => {
     if (hex.indexOf('#') === 0) {
@@ -58,44 +64,47 @@
 
   return (
     <Flex flexDirection={DIRECTION_ROW} padding={SPACING.spacing16}>
-      {Object.entries(colorCategories).map(([category, colors], index) => (
-        <Flex key={`category_${index}`} flexDirection={DIRECTION_COLUMN}>
-          {colors.map((color, colorIndex) => (
-            <Flex
-              className={`color_${colorIndex}`}
-              key={`color_${colorIndex}`}
-              flexDirection={DIRECTION_COLUMN}
-              alignItems={ALIGN_FLEX_START}
-              justifyContent={JUSTIFY_SPACE_BETWEEN}
-              backgroundColor={color[1]}
-              padding={SPACING.spacing40}
-              width="12rem"
-              height="12rem"
-              margin={SPACING.spacing2} // Add some margin between color rows
-              borderRadius={BORDERS.borderRadius4}
-              style={{
-                cursor: CURSOR_POINTER,
-                border: `1px solid ${COLORS.grey20}`,
-              }}
-            >
-              <LegacyStyledText
-                color={invertColor(color[1] as string)}
-                fontSize={TYPOGRAPHY.fontSizeP}
-                fontWeight={TYPOGRAPHY.fontWeightBold}
-              >
-                {color[0]}
-              </LegacyStyledText>
-              <LegacyStyledText
-                fontSize={TYPOGRAPHY.fontSizeP}
-                color={invertColor(color[1] as string)}
-                fontWeight={TYPOGRAPHY.fontWeightRegular}
+      {Object.keys(colorCategories).map((category, index) => {
+        const colors = colorCategories[category]
+        return (
+          <Flex key={`category_${index}`} flexDirection={DIRECTION_COLUMN}>
+            {colors.map((color: [string, string], colorIndex) => (
+              <Flex
+                className={`color_${colorIndex}`}
+                key={`color_${colorIndex}`}
+                flexDirection={DIRECTION_COLUMN}
+                alignItems={ALIGN_FLEX_START}
+                justifyContent={JUSTIFY_SPACE_BETWEEN}
+                backgroundColor={color[1]}
+                padding={SPACING.spacing40}
+                width="12rem"
+                height="12rem"
+                margin={SPACING.spacing2} // Add some margin between color rows
+                borderRadius={BORDERS.borderRadius4}
+                style={{
+                  cursor: CURSOR_POINTER,
+                  border: `1px solid ${COLORS.grey20}`,
+                }}
               >
-                {color[1]}
-              </LegacyStyledText>
-            </Flex>
-          ))}
-        </Flex>
-      ))}
+                <StyledText
+                  color={invertColor(color[1] as string)}
+                  fontSize={TYPOGRAPHY.fontSizeP}
+                  fontWeight={TYPOGRAPHY.fontWeightBold}
+                >
+                  {color[0]}
+                </StyledText>
+                <StyledText
+                  fontSize={TYPOGRAPHY.fontSizeP}
+                  color={invertColor(color[1] as string)}
+                  fontWeight={TYPOGRAPHY.fontWeightRegular}
+                >
+                  {color[1]}
+                </StyledText>
+              </Flex>
+            ))}
+          </Flex>
+        )
+      })}
     </Flex>
   )
 }

app/src/DesignTokens/Spacing/Spacing.stories.tsx

@@ -12,24 +12,28 @@ import {
   StyledText,
 } from '@opentrons/components'
 
-import type { Meta, Story } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
   title: 'Design Tokens/Spacing',
 } as Meta
 
 interface SpacingsStorybookProps {
-  spacings: string[]
+  spacings: Array<[string, string]>
 }
 
-const Template: Story<SpacingsStorybookProps> = args => {
-  const targetSpacings = args.spacings.filter(s => !s[1].includes('auto'))
+const Template: StoryFn<SpacingsStorybookProps> = args => {
+  const targetSpacings = args.spacings.filter(
+    (s: [string, string]) => !s[1].includes('auto')
+  )
   // sort by rem value
-  const sortedSpacing = targetSpacings.sort((a, b) => {
-    const aValue = parseFloat(a[1].replace('rem', ''))
-    const bValue = parseFloat(b[1].replace('rem', ''))
-    return aValue - bValue
-  })
+  const sortedSpacing = targetSpacings.sort(
+    (a: [string, string], b: [string, string]) => {
+      const aValue = parseFloat(a[1].replace('rem', ''))
+      const bValue = parseFloat(b[1].replace('rem', ''))
+      return aValue - bValue
+    }
+  )
 
   const convertToPx = (remFormat: string): string => {
     const pxVal = Number(remFormat.replace('rem', '')) * 16
@@ -42,7 +46,7 @@ const Template: Story<SpacingsStorybookProps> = args => {
       gridGap={SPACING.spacing8}
       padding={SPACING.spacing24}
     >
-      {sortedSpacing.map((spacing, index) => (
+      {sortedSpacing.map((spacing: [string, string], index) => (
         <Flex
           key={`spacing_${index}`}
           flexDirection={DIRECTION_COLUMN}

app/src/DesignTokens/Typography/Typography.stories.tsx

@@ -71,7 +71,7 @@
   title: 'Design Tokens/Typography',
   argTypes: {
     text: {
-      type: 'text',
+      type: 'string',
     },
     styles: {
       control: {
@@ -139,10 +139,17 @@
 
 const valueFromFlattenedInterp = (
   style: FlattenSimpleInterpolation,
-  valueName: str
+  valueName: string
 ): string => {
-  return style.reduce(
-    ([sawKey, value]: [boolean, null | string], el) => {
+  if (style == null) {
+    return ''
+  }
+  const styleArray = Array.isArray(style) ? style : [style]
+  const result = styleArray.reduce<[boolean, null | string]>(
+    ([sawKey, value], el) => {
+      if (el == null || typeof el !== 'string') {
+        return [sawKey, value]
+      }
       const thisEl = el.trim()
       if (sawKey && value == null) {
         return [sawKey, el]
@@ -157,6 +164,7 @@
     },
     [false, null]
   )[1]
+  return result ?? ''
 }
 
 const styleForPair = (
@@ -205,15 +213,15 @@
     >
       {fonts.map(([style, weight]) => (
         <Box key={`${style}_${weight}`} alignItems={ALIGN_CENTER}>
           <Text css={styleForPair(style, weight, args.styles)}>
             {`${style} ${weight} (${fontWeightForPair(
               style,
               weight,
               args.styles
             )}, ${fontSizeForPair(
               style,
               weight,
               args.styles
             )}, ${lineHeightForPair(style, weight, args.styles)}): ${
               args.text
             }`}

app/src/atoms/ProgressBar/ProgressBar.stories.tsx

@@ -11,15 +11,17 @@ import {
 
 import { ProgressBar } from './index'
 
-import type { Meta, Story } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
   title: 'App/Atoms/ProgressBar',
   component: ProgressBar,
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof ProgressBar>> = args => {
-  const [progress, setProgress] = React.useState<number>(args.percentComplete)
+const Template: StoryFn<React.ComponentProps<typeof ProgressBar>> = args => {
+  const initialProgress: number =
+    typeof args.percentComplete === 'number' ? args.percentComplete : 0
+  const [progress, setProgress] = React.useState<number>(initialProgress)
   React.useEffect(() => {
     if (progress < 100) {
       const interval = setInterval(() => {
@@ -39,7 +41,7 @@ const Template: Story<React.ComponentProps<typeof ProgressBar>> = args => {
       padding={SPACING.spacing16}
     >
       <LegacyStyledText>
-        {'Add 5% to the current progress every 0.2 sec'}
+        Add 5% to the current progress every 0.2 sec
       </LegacyStyledText>
       <ProgressBar percentComplete={progress} />
       <SecondaryButton
@@ -48,7 +50,7 @@ const Template: Story<React.ComponentProps<typeof ProgressBar>> = args => {
         }}
         width="5rem"
       >
-        {'reset'}
+        reset
       </SecondaryButton>
     </Flex>
   )

components/src/forms/RadioGroup.stories.tsx

@@ -22,7 +22,7 @@ const Template: Story<React.ComponentProps<typeof RadioGroupComponent>> = ({
   ...args
 }) => {
   const [controlledValue, setControlledValue] = React.useState<string>(
-    args?.options?.[0] != null ? args.options[0].value : ''
+    args?.options?.[0] != null ? (args.options[0].value as string) : ''
   )
   return (
     <Box width={SIZE_6}>

components/src/hardware-sim/Module/Module.stories.tsx

@@ -57,7 +57,7 @@ const Template: Story<{
   innerProps: {}
 }> = args => {
   // Add null check and default to first module model if undefined
-  const moduleModel = args.model || moduleModels[0]
+  const moduleModel = (args.model as ModuleModel) || moduleModels[0]
   const moduleDef = getModuleDef(moduleModel)
   const labwareDef = args.hasLabware
     ? (fixture96Plate as LabwareDefinition)

components/src/molecules/TextListTableContent/TextListTableContent.stories.tsx

@@ -17,7 +17,7 @@ export default {
       description: 'The text that appears above the table',
     },
     listTableHeaders: {
-      control: 'array',
+      control: { type: 'array' },
       description: 'Headers for the list table',
     },
     rowCount: {
@@ -59,7 +59,7 @@ const Template: Story<TextListTableContentStoryProps> = args => {
     return Array.from({ length: rowCount }, (_, i) => {
       return (
         // @ts-expect-error Works.
-        <tr key={`row-${i}`} css={rowStyle(numColumns)}>
+        <tr key={`row-${i}`} css={rowStyle(numColumns as number)}>
           {Array.from({ length: numColumns }, (_, j) => {
             const textIndex = (i + j) % loremIpsumSentences.length
             return (