Skip to content

Commit f4a0add

Browse files
kojikoji
committed
fix lint errors
1 parent 0d895b5 commit f4a0add

File tree

4 files changed

+70
-59
lines changed

4 files changed

+70
-59
lines changed

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

Lines changed: 60 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,40 @@ import {
77
DIRECTION_ROW,
88
Flex,
99
JUSTIFY_SPACE_BETWEEN,
10-
LegacyStyledText,
1110
SPACING,
11+
StyledText,
1212
TYPOGRAPHY,
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/Colors',
1919
} as Meta
2020

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

25-
const Template: Story<ColorsStorybookProps> = args => {
25+
const Template: StoryFn<ColorsStorybookProps> = args => {
2626
const targetColors = args.colors
27-
const colorCategories = targetColors.reduce((acc, color) => {
28-
const match = color[0].match(/[a-zA-Z]+/)
29-
const category = match?.[0]
30-
if (category) {
31-
if (!acc[category]) {
32-
acc[category] = []
27+
const colorCategories: Record<
28+
string,
29+
Array<[string, string]>
30+
> = targetColors.reduce(
31+
(acc: Record<string, Array<[string, string]>>, color: [string, string]) => {
32+
const match = color[0].match(/[a-zA-Z]+/)
33+
const category = match?.[0]
34+
if (category) {
35+
if (!acc[category]) {
36+
acc[category] = []
37+
}
38+
acc[category].push(color)
3339
}
34-
acc[category].push(color)
35-
}
36-
return acc
37-
}, {})
40+
return acc
41+
},
42+
{} as Record<string, Array<[string, string]>>
43+
)
3844

3945
const invertColor = (hex: string): string => {
4046
if (hex.indexOf('#') === 0) {
@@ -58,44 +64,47 @@ const Template: Story<ColorsStorybookProps> = args => {
5864

5965
return (
6066
<Flex flexDirection={DIRECTION_ROW} padding={SPACING.spacing16}>
61-
{Object.entries(colorCategories).map(([category, colors], index) => (
62-
<Flex key={`category_${index}`} flexDirection={DIRECTION_COLUMN}>
63-
{colors.map((color, colorIndex) => (
64-
<Flex
65-
className={`color_${colorIndex}`}
66-
key={`color_${colorIndex}`}
67-
flexDirection={DIRECTION_COLUMN}
68-
alignItems={ALIGN_FLEX_START}
69-
justifyContent={JUSTIFY_SPACE_BETWEEN}
70-
backgroundColor={color[1]}
71-
padding={SPACING.spacing40}
72-
width="12rem"
73-
height="12rem"
74-
margin={SPACING.spacing2} // Add some margin between color rows
75-
borderRadius={BORDERS.borderRadius4}
76-
style={{
77-
cursor: CURSOR_POINTER,
78-
border: `1px solid ${COLORS.grey20}`,
79-
}}
80-
>
81-
<LegacyStyledText
82-
color={invertColor(color[1] as string)}
83-
fontSize={TYPOGRAPHY.fontSizeP}
84-
fontWeight={TYPOGRAPHY.fontWeightBold}
85-
>
86-
{color[0]}
87-
</LegacyStyledText>
88-
<LegacyStyledText
89-
fontSize={TYPOGRAPHY.fontSizeP}
90-
color={invertColor(color[1] as string)}
91-
fontWeight={TYPOGRAPHY.fontWeightRegular}
67+
{Object.keys(colorCategories).map((category, index) => {
68+
const colors = colorCategories[category]
69+
return (
70+
<Flex key={`category_${index}`} flexDirection={DIRECTION_COLUMN}>
71+
{colors.map((color: [string, string], colorIndex) => (
72+
<Flex
73+
className={`color_${colorIndex}`}
74+
key={`color_${colorIndex}`}
75+
flexDirection={DIRECTION_COLUMN}
76+
alignItems={ALIGN_FLEX_START}
77+
justifyContent={JUSTIFY_SPACE_BETWEEN}
78+
backgroundColor={color[1]}
79+
padding={SPACING.spacing40}
80+
width="12rem"
81+
height="12rem"
82+
margin={SPACING.spacing2} // Add some margin between color rows
83+
borderRadius={BORDERS.borderRadius4}
84+
style={{
85+
cursor: CURSOR_POINTER,
86+
border: `1px solid ${COLORS.grey20}`,
87+
}}
9288
>
93-
{color[1]}
94-
</LegacyStyledText>
95-
</Flex>
96-
))}
97-
</Flex>
98-
))}
89+
<StyledText
90+
color={invertColor(color[1] as string)}
91+
fontSize={TYPOGRAPHY.fontSizeP}
92+
fontWeight={TYPOGRAPHY.fontWeightBold}
93+
>
94+
{color[0]}
95+
</StyledText>
96+
<StyledText
97+
fontSize={TYPOGRAPHY.fontSizeP}
98+
color={invertColor(color[1] as string)}
99+
fontWeight={TYPOGRAPHY.fontWeightRegular}
100+
>
101+
{color[1]}
102+
</StyledText>
103+
</Flex>
104+
))}
105+
</Flex>
106+
)
107+
})}
99108
</Flex>
100109
)
101110
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ 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',
@@ -22,7 +22,7 @@ interface SpacingsStorybookProps {
2222
spacings: Array<[string, string]>
2323
}
2424

25-
const Template: Story<SpacingsStorybookProps> = args => {
25+
const Template: StoryFn<SpacingsStorybookProps> = args => {
2626
const targetSpacings = args.spacings.filter(
2727
(s: [string, string]) => !s[1].includes('auto')
2828
)

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

Lines changed: 7 additions & 5 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(() => {
@@ -39,7 +41,7 @@ const Template: Story<React.ComponentProps<typeof ProgressBar>> = args => {
3941
padding={SPACING.spacing16}
4042
>
4143
<LegacyStyledText>
42-
{'Add 5% to the current progress every 0.2 sec'}
44+
Add 5% to the current progress every 0.2 sec
4345
</LegacyStyledText>
4446
<ProgressBar percentComplete={progress} />
4547
<SecondaryButton
@@ -48,7 +50,7 @@ const Template: Story<React.ComponentProps<typeof ProgressBar>> = args => {
4850
}}
4951
width="5rem"
5052
>
51-
{'reset'}
53+
reset
5254
</SecondaryButton>
5355
</Flex>
5456
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const Template: Story<{
5757
innerProps: {}
5858
}> = args => {
5959
// Add null check and default to first module model if undefined
60-
const moduleModel = args.model || moduleModels[0]
60+
const moduleModel = (args.model as ModuleModel) || moduleModels[0]
6161
const moduleDef = getModuleDef(moduleModel)
6262
const labwareDef = args.hasLabware
6363
? (fixture96Plate as LabwareDefinition)

0 commit comments

Comments
 (0)