Skip to content

Commit 9a8edad

Browse files
kojikoji
authored
Chore update storybook 7 to 8 (#20314)
* Chore update storybook 7 to 8
1 parent 60f9838 commit 9a8edad

File tree

13 files changed

+798
-3381
lines changed

13 files changed

+798
-3381
lines changed

‎.storybook/main.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { dirname, join } from 'path'
2+
13
import type { StorybookConfig } from '@storybook/react-vite'
24

35
const config: StorybookConfig = {
@@ -14,13 +16,14 @@ const config: StorybookConfig = {
1416
],
1517

1618
addons: [
17-
'@storybook/addon-links',
18-
'@storybook/addon-essentials',
19-
'storybook-addon-pseudo-states',
19+
getAbsolutePath('@storybook/addon-links'),
20+
getAbsolutePath('@storybook/addon-essentials'),
21+
getAbsolutePath('storybook-addon-pseudo-states'),
22+
'@chromatic-com/storybook',
2023
],
2124

2225
framework: {
23-
name: '@storybook/react-vite',
26+
name: getAbsolutePath('@storybook/react-vite'),
2427
options: {
2528
builder: {
2629
// Storybook would normally find the Vite config automatically.
@@ -32,9 +35,15 @@ const config: StorybookConfig = {
3235
},
3336
},
3437

35-
docs: {
36-
autodocs: true,
38+
docs: {},
39+
40+
typescript: {
41+
reactDocgen: 'react-docgen-typescript',
3742
},
3843
}
3944

4045
export default config
46+
47+
function getAbsolutePath(value: string): any {
48+
return dirname(require.resolve(join(value, 'package.json')))
49+
}

‎.storybook/preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ export const customViewports = {
6666
}
6767

6868
export const parameters = {
69-
actions: { argTypesRegex: '^on[A-Z].*' },
7069
viewport: { viewports: customViewports },
7170
options: {
7271
storySort: {
@@ -93,3 +92,4 @@ export const decorators = [
9392
</I18nextProvider>
9493
),
9594
]
95+
export const tags = ['autodocs']

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2+
import React from 'react'
3+
14
import {
25
ALIGN_FLEX_START,
36
BORDERS,
@@ -10,22 +13,25 @@ import {
1013
TYPOGRAPHY,
1114
} from '@opentrons/components'
1215

13-
import type { Meta, Story } from '@storybook/react'
16+
import type { Meta, StoryFn } from '@storybook/react'
1417

1518
export default {
1619
title: 'Design Tokens/BorderRadius',
1720
} as Meta
1821

1922
interface BorderRadiusStorybookProps {
20-
borderRadius: string[]
23+
borderRadius: Array<[string, string]>
2124
}
2225

23-
const Template: Story<BorderRadiusStorybookProps> = args => {
26+
const Template: StoryFn<BorderRadiusStorybookProps> = args => {
2427
const targetBorderRadiuses = args.borderRadius
25-
.filter(s => s[0].includes('borderRadius'))
28+
.filter(
29+
(s): s is [string, string] =>
30+
typeof s[0] === 'string' && s[0].includes('borderRadius')
31+
)
2632
.sort((a, b) => {
27-
const aValue = parseInt(a[1])
28-
const bValue = parseInt(b[1])
33+
const aValue = parseInt(String(a[1]), 10)
34+
const bValue = parseInt(String(b[1]), 10)
2935
return aValue - bValue
3036
})
3137

@@ -52,7 +58,7 @@ const Template: Story<BorderRadiusStorybookProps> = args => {
5258
width="10rem"
5359
height="4rem"
5460
backgroundColor={COLORS.blue50}
55-
borderRadius={br[1]}
61+
borderRadius={String(br[1])}
5662
/>
5763
</Flex>
5864
))}
@@ -61,7 +67,7 @@ const Template: Story<BorderRadiusStorybookProps> = args => {
6167
}
6268

6369
export const AllBorderRadiuses = Template.bind({})
64-
const allBorderRadiuses = Object.entries(BORDERS)
70+
const allBorderRadiuses = Object.entries(BORDERS) as Array<[string, string]>
6571
AllBorderRadiuses.args = {
6672
borderRadius: allBorderRadiuses,
6773
}

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2+
import React from 'react'
3+
14
import {
25
ALIGN_FLEX_START,
36
BORDERS,
@@ -12,19 +15,21 @@ import {
1215
TYPOGRAPHY,
1316
} from '@opentrons/components'
1417

15-
import type { Meta, Story } from '@storybook/react'
18+
import type { Meta, StoryFn } from '@storybook/react'
1619

1720
export default {
1821
title: 'Design Tokens/Colors',
1922
} as Meta
2023

2124
interface ColorsStorybookProps {
22-
colors: string[]
25+
colors: Array<[string, string]>
2326
}
2427

25-
const Template: Story<ColorsStorybookProps> = args => {
28+
const Template: StoryFn<ColorsStorybookProps> = args => {
2629
const targetColors = args.colors
27-
const colorCategories = targetColors.reduce((acc, color) => {
30+
const colorCategories = targetColors.reduce<
31+
Record<string, Array<[string, string]>>
32+
>((acc, color) => {
2833
const match = color[0].match(/[a-zA-Z]+/)
2934
const category = match?.[0]
3035
if (category) {
@@ -116,7 +121,7 @@ const order = [
116121

117122
const filteredColors = Object.entries(COLORS).filter(([key]) =>
118123
order.some(color => key.toLowerCase().includes(color))
119-
)
124+
) as Array<[string, string]>
120125

121126
const sortedColors = filteredColors.sort((a, b) => {
122127
const aOrder = order.findIndex(color => a[0].toLowerCase().includes(color))

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,25 @@ import {
1212
StyledText,
1313
} from '@opentrons/components'
1414

15-
import type { Meta, Story } from '@storybook/react'
15+
import type { Meta, StoryFn } from '@storybook/react'
1616

1717
export default {
1818
title: 'Design Tokens/Spacing',
1919
} as Meta
2020

2121
interface SpacingsStorybookProps {
22-
spacings: string[]
22+
spacings: Array<[string, string]>
2323
}
2424

25-
const Template: Story<SpacingsStorybookProps> = args => {
26-
const targetSpacings = args.spacings.filter(s => !s[1].includes('auto'))
25+
const Template: StoryFn<SpacingsStorybookProps> = args => {
26+
const targetSpacings = args.spacings.filter(
27+
(s): s is [string, string] =>
28+
typeof s[1] === 'string' && !s[1].includes('auto')
29+
)
2730
// sort by rem value
2831
const sortedSpacing = targetSpacings.sort((a, b) => {
29-
const aValue = parseFloat(a[1].replace('rem', ''))
30-
const bValue = parseFloat(b[1].replace('rem', ''))
32+
const aValue = parseFloat(String(a[1]).replace('rem', ''))
33+
const bValue = parseFloat(String(b[1]).replace('rem', ''))
3134
return aValue - bValue
3235
})
3336

@@ -53,9 +56,9 @@ const Template: Story<SpacingsStorybookProps> = args => {
5356
height="6rem"
5457
>
5558
<StyledText desktopStyle="bodyLargeSemiBold">
56-
{`${spacing[0]} - ${spacing[1]}: ${convertToPx(spacing[1])}`}
59+
{`${spacing[0]} - ${spacing[1]}: ${convertToPx(String(spacing[1]))}`}
5760
</StyledText>
58-
<Flex gridGap={spacing[1]} backgroundColor={COLORS.blue50}>
61+
<Flex gridGap={String(spacing[1])} backgroundColor={COLORS.blue50}>
5962
<StyledBox />
6063
<StyledBox />
6164
</Flex>
@@ -66,7 +69,7 @@ const Template: Story<SpacingsStorybookProps> = args => {
6669
}
6770

6871
export const AllSpacing = Template.bind({})
69-
const allSpacings = Object.entries(SPACING)
72+
const allSpacings = Object.entries(SPACING) as Array<[string, string]>
7073
AllSpacing.args = {
7174
spacings: allSpacings,
7275
}

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

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2+
import React from 'react'
13
import { css } from 'styled-components'
24

35
import {
@@ -11,7 +13,7 @@ import {
1113
TYPOGRAPHY,
1214
} from '@opentrons/components'
1315

14-
import type { Meta, Story } from '@storybook/react'
16+
import type { Meta, StoryFn } from '@storybook/react'
1517
import type { FlattenSimpleInterpolation } from 'styled-components'
1618

1719
const fontStyles = {
@@ -139,7 +141,7 @@ const fontWeightForPairForLegacy = (style: string, weight: string): string => {
139141

140142
const valueFromFlattenedInterp = (
141143
style: FlattenSimpleInterpolation,
142-
valueName: str
144+
valueName: string
143145
): string => {
144146
return style.reduce(
145147
([sawKey, value]: [boolean, null | string], el) => {
@@ -195,31 +197,35 @@ const fontWeightForPair = (
195197
? fontWeightForPairForHelix(style, weight)
196198
: fontWeightForPairForLegacy(style, weight)
197199

198-
const Template: Story<TypographyStorybookProps> = args => {
199-
const fonts = fontStyles[args.styles]
200+
const Template: StoryFn<TypographyStorybookProps> = args => {
201+
const fonts = fontStyles[args.styles] as Array<[string, string]>
200202
return (
201203
<Flex
202204
flexDirection={DIRECTION_COLUMN}
203205
gridGap={SPACING.spacing8}
204206
padding={SPACING.spacing24}
205207
>
206-
{fonts.map(([style, weight]) => (
207-
<Box key={`${style}_${weight}`} alignItems={ALIGN_CENTER}>
208-
<Text css={styleForPair(style, weight, args.styles)}>
209-
{`${style} ${weight} (${fontWeightForPair(
210-
style,
211-
weight,
212-
args.styles
213-
)}, ${fontSizeForPair(
214-
style,
215-
weight,
216-
args.styles
217-
)}, ${lineHeightForPair(style, weight, args.styles)}): ${
218-
args.text
219-
}`}
220-
</Text>
221-
</Box>
222-
))}
208+
{fonts.map(([style, weight]: [string, string]) => {
209+
const styleStr: string = String(style)
210+
const weightStr: string = String(weight)
211+
return (
212+
<Box key={`${styleStr}_${weightStr}`} alignItems={ALIGN_CENTER}>
213+
<Text css={styleForPair(styleStr, weightStr, args.styles)}>
214+
{`${styleStr} ${weightStr} (${fontWeightForPair(
215+
styleStr,
216+
weightStr,
217+
args.styles
218+
)}, ${fontSizeForPair(
219+
styleStr,
220+
weightStr,
221+
args.styles
222+
)}, ${lineHeightForPair(styleStr, weightStr, args.styles)}): ${
223+
args.text
224+
}`}
225+
</Text>
226+
</Box>
227+
)
228+
})}
223229
</Flex>
224230
)
225231
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,17 @@ import {
1111

1212
import { ProgressBar } from './index'
1313

14-
import type { Meta, Story } from '@storybook/react'
14+
import type { Meta, StoryFn } from '@storybook/react'
1515

1616
export default {
1717
title: 'App/Atoms/ProgressBar',
1818
component: ProgressBar,
1919
} as Meta
2020

21-
const Template: Story<React.ComponentProps<typeof ProgressBar>> = args => {
22-
const [progress, setProgress] = React.useState<number>(args.percentComplete)
21+
const Template: StoryFn<React.ComponentProps<typeof ProgressBar>> = args => {
22+
const initialProgress: number =
23+
typeof args.percentComplete === 'number' ? args.percentComplete : 0
24+
const [progress, setProgress] = React.useState<number>(initialProgress)
2325
React.useEffect(() => {
2426
if (progress < 100) {
2527
const interval = setInterval(() => {

‎components/src/forms/RadioGroup.stories.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Box, SIZE_6 } from '@opentrons/components'
44

55
import { RadioGroup as RadioGroupComponent } from './RadioGroup'
66

7-
import type { Meta, Story } from '@storybook/react'
7+
import type { Meta, StoryFn } from '@storybook/react'
88

99
export default {
1010
title: 'Library/Molecules/Forms/Radio Group',
@@ -16,14 +16,17 @@ const OPTIONS = [
1616
{ name: 'Ginger', value: 'ginger' },
1717
]
1818

19-
const Template: Story<React.ComponentProps<typeof RadioGroupComponent>> = ({
19+
const Template: StoryFn<React.ComponentProps<typeof RadioGroupComponent>> = ({
2020
value,
2121
onChange,
2222
...args
2323
}) => {
24-
const [controlledValue, setControlledValue] = React.useState<string>(
25-
args?.options?.[0] != null ? args.options[0].value : ''
26-
)
24+
const firstOptionValue: string =
25+
args.options != null && args.options.length > 0 && args.options[0] != null
26+
? args.options[0].value
27+
: ''
28+
const [controlledValue, setControlledValue] =
29+
React.useState<string>(firstOptionValue)
2730
return (
2831
<Box width={SIZE_6}>
2932
<RadioGroupComponent

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2+
import React from 'react'
3+
14
import {
25
ABSORBANCE_READER_V1,
36
fixture96Plate,
@@ -17,7 +20,7 @@ import { LabwareRender } from '../Labware'
1720
import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
1821
import { AlignLabwareToModule, Module as ModuleComponent } from './'
1922

20-
import type { Meta, Story } from '@storybook/react'
23+
import type { Meta, StoryFn } from '@storybook/react'
2124
import type { LabwareDefinition, ModuleModel } from '@opentrons/shared-data'
2225

2326
const moduleModels: ModuleModel[] = [
@@ -50,16 +53,16 @@ export default {
5053
title: 'Library/Molecules/Simulation/Module',
5154
} as Meta
5255

53-
const Template: Story<{
56+
const Template: StoryFn<{
5457
model: ModuleModel
5558
orientation: 'left' | 'right'
5659
hasLabware: boolean
57-
innerProps: {}
60+
innerProps: Record<string, unknown>
5861
}> = args => {
5962
// Add null check and default to first module model if undefined
60-
const moduleModel = args.model || moduleModels[0]
63+
const moduleModel: ModuleModel = args.model ?? moduleModels[0]
6164
const moduleDef = getModuleDef(moduleModel)
62-
const labwareDef = args.hasLabware
65+
const labwareDef: LabwareDefinition | null = args.hasLabware
6366
? (fixture96Plate as LabwareDefinition)
6467
: null
6568

0 commit comments

Comments
 (0)