Skip to content

Commit 301b219

Browse files
kojikoji
committed
fix some stories
1 parent 30cd239 commit 301b219

File tree

5 files changed

+140
-54
lines changed

5 files changed

+140
-54
lines changed

‎app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useRef, useState } from 'react'
2+
import { Provider } from 'react-redux'
3+
import { legacy_createStore } from 'redux'
24

35
import {
46
DIRECTION_COLUMN,
@@ -10,13 +12,35 @@ import {
1012
} from '@opentrons/components'
1113

1214
import { AlphanumericKeyboard } from '.'
15+
import { configReducer } from '/app/redux/config/reducer'
1316

1417
import type { Meta, StoryObj } from '@storybook/react'
1518

19+
const dummyConfig = {
20+
config: {
21+
isOnDevice: false,
22+
language: {
23+
appLanguage: 'en',
24+
systemLanguage: null,
25+
},
26+
},
27+
} as any
28+
const store: Store<any> = legacy_createStore(
29+
configReducer,
30+
dummyConfig as StoreEnhancer
31+
)
32+
1633
const meta: Meta<typeof AlphanumericKeyboard> = {
1734
title: 'ODD/Atoms/SoftwareKeyboard/AlphanumericKeyboard',
1835
component: AlphanumericKeyboard,
1936
parameters: VIEWPORT.touchScreenViewport,
37+
decorators: [
38+
Story => (
39+
<Provider store={store}>
40+
<Story />
41+
</Provider>
42+
),
43+
],
2044
}
2145

2246
export default meta

‎app/src/atoms/SoftwareKeyboard/FullKeyboard/FullKeyboard.stories.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useRef, useState } from 'react'
2+
import { Provider } from 'react-redux'
3+
import { legacy_createStore } from 'redux'
24

35
import {
46
DIRECTION_COLUMN,
@@ -9,14 +11,38 @@ import {
911
VIEWPORT,
1012
} from '@opentrons/components'
1113

14+
import { configReducer } from '/app/redux/config/reducer'
15+
1216
import { FullKeyboard } from '.'
1317

1418
import type { Meta, StoryObj } from '@storybook/react'
19+
import type { Store, StoreEnhancer } from 'redux'
20+
21+
const dummyConfig = {
22+
config: {
23+
isOnDevice: false,
24+
language: {
25+
appLanguage: 'en',
26+
systemLanguage: null,
27+
},
28+
},
29+
} as any
30+
const store: Store<any> = legacy_createStore(
31+
configReducer,
32+
dummyConfig as StoreEnhancer
33+
)
1534

1635
const meta: Meta<typeof FullKeyboard> = {
1736
title: 'ODD/Atoms/SoftwareKeyboard/FullKeyboard',
1837
component: FullKeyboard,
1938
parameters: VIEWPORT.touchScreenViewport,
39+
decorators: [
40+
Story => (
41+
<Provider store={store}>
42+
<Story />
43+
</Provider>
44+
),
45+
],
2046
}
2147
export default meta
2248

‎app/src/molecules/CardButton/CardButton.stories.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import {
2-
Flex,
3-
ICON_DATA_BY_NAME,
4-
SPACING,
5-
VIEWPORT,
6-
} from '@opentrons/components'
1+
import { MemoryRouter } from 'react-router-dom'
2+
3+
import { ICON_DATA_BY_NAME, SPACING, VIEWPORT } from '@opentrons/components'
74

85
import { CardButton as CardButtonComponent } from './index'
96

@@ -23,9 +20,17 @@ const meta: Meta<typeof CardButtonComponent> = {
2320
},
2421
decorators: [
2522
Story => (
26-
<Flex marginTop={SPACING.spacing16} width="15.375rem" height="17rem">
27-
<Story />
28-
</Flex>
23+
<MemoryRouter>
24+
<div
25+
style={{
26+
padding: SPACING.spacing16,
27+
width: '15.375rem',
28+
height: '17rem',
29+
}}
30+
>
31+
<Story />
32+
</div>
33+
</MemoryRouter>
2934
),
3035
],
3136
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,23 +65,23 @@ export const BaseDeck: Story = {
6565
{
6666
moduleLocation: { slotName: 'B1' },
6767
moduleModel: THERMOCYCLER_MODULE_V2,
68-
nestedLabwareDef: fixture96Plate as LabwareDefinition,
68+
nestedLabwareDefsBottomToTop: fixture96Plate as LabwareDefinition,
6969
innerProps: { lidMotorState: 'open' },
7070
},
7171
{
7272
moduleLocation: { slotName: 'D1' },
7373
moduleModel: TEMPERATURE_MODULE_V2,
74-
nestedLabwareDef: fixture96Plate as LabwareDefinition,
74+
nestedLabwareDefsBottomToTop: fixture96Plate as LabwareDefinition,
7575
},
7676
{
7777
moduleLocation: { slotName: 'B3' },
7878
moduleModel: HEATERSHAKER_MODULE_V1,
79-
nestedLabwareDef: fixture96Plate as LabwareDefinition,
79+
nestedLabwareDefsBottomToTop: fixture96Plate as LabwareDefinition,
8080
},
8181
{
8282
moduleLocation: { slotName: 'D2' },
8383
moduleModel: MAGNETIC_BLOCK_V1,
84-
nestedLabwareDef: fixture96Plate as LabwareDefinition,
84+
nestedLabwareDefsBottomToTop: fixture96Plate as LabwareDefinition,
8585
},
8686
],
8787
darkFill: 'rebeccapurple',

‎components/src/hardware-sim/Pipette/PipetteRender.stories.tsx‎

Lines changed: 72 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,40 @@ import { getAllDefinitions, getAllPipetteNames } from '@opentrons/shared-data'
44

55
import { RobotWorkSpace } from '../Deck'
66
import { LabwareRender } from '../Labware'
7-
import { PipetteRender } from './'
7+
import { PipetteRender as PipetteRenderComponent } from './'
88

9-
import type { Meta, Story } from '@storybook/react'
9+
import type { Meta, StoryObj } from '@storybook/react'
1010
import type { LabwareDefinition, PipetteName } from '@opentrons/shared-data'
1111

1212
const DECK_MAP_VIEWBOX = '0 -140 230 230'
1313

14-
const opentrons300UlTiprack = getAllDefinitions().opentrons96Tiprack300UlV1
15-
const opentrons10UlTiprack = getAllDefinitions().opentrons96Tiprack10UlV1
16-
const nest12Reservoir15ml = getAllDefinitions().nest12Reservoir15MlV1
17-
const axygenReservoir90ml = getAllDefinitions().axygen1Reservoir90MlV1
14+
const allDefinitions = getAllDefinitions()
15+
16+
// Find labware definitions by loadName
17+
const findLabwareByLoadName = (
18+
loadName: string
19+
): LabwareDefinition | undefined => {
20+
const definitions = Object.values(allDefinitions) as LabwareDefinition[]
21+
return definitions.find(def => def.parameters.loadName === loadName)
22+
}
23+
24+
const allDefsArray = Object.values(allDefinitions) as LabwareDefinition[]
25+
const defaultDef = allDefsArray[0]
26+
27+
if (defaultDef == null) {
28+
throw new Error('No labware definitions found')
29+
}
30+
31+
const opentrons300UlTiprack =
32+
findLabwareByLoadName('opentrons_96_tiprack_300ul') ?? defaultDef
33+
const opentrons10UlTiprack =
34+
findLabwareByLoadName('opentrons_96_tiprack_10ul') ?? defaultDef
35+
const nest12Reservoir15ml =
36+
findLabwareByLoadName('nest_12_reservoir_15ml') ?? defaultDef
37+
const axygenReservoir90ml =
38+
findLabwareByLoadName('axygen_1_reservoir_90ml') ?? defaultDef
1839
const opentrons6TuberackNest50mlConical =
19-
getAllDefinitions().opentrons6TuberackNest50MlConicalV1
40+
findLabwareByLoadName('opentrons_6_tuberack_nest_50ml_conical') ?? defaultDef
2041

2142
const labwareDefMap: Record<string, LabwareDefinition> = {
2243
[opentrons300UlTiprack.metadata.displayName]: opentrons300UlTiprack,
@@ -27,47 +48,57 @@ const labwareDefMap: Record<string, LabwareDefinition> = {
2748
opentrons6TuberackNest50mlConical,
2849
}
2950
const pipetteNames = Object.keys(getAllPipetteNames()) as PipetteName[]
51+
const labwareDisplayNames = Object.keys(labwareDefMap)
3052

31-
export default {
32-
title: 'Library/Molecules/Simulation/Pipette/PipetteRender',
33-
} as Meta
34-
35-
const Template: Story<{
53+
interface StoryArgs {
3654
labwareName: string
3755
pipetteName: PipetteName
38-
}> = args => {
39-
const labwareDef = labwareDefMap[args.labwareName]
40-
return (
41-
<RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
42-
{() => (
43-
<Fragment>
44-
<LabwareRender definition={labwareDef} />
45-
<PipetteRender
46-
labwareDef={labwareDef}
47-
pipetteName={args.pipetteName}
48-
/>
49-
</Fragment>
50-
)}
51-
</RobotWorkSpace>
52-
)
5356
}
54-
export const Pipette = Template.bind({})
5557

56-
Pipette.argTypes = {
57-
labwareName: {
58-
control: {
59-
type: 'select',
60-
options: Object.keys(labwareDefMap).map(
61-
d => labwareDefMap[d].metadata.displayName
62-
),
58+
const meta: Meta<StoryArgs> = {
59+
title: 'Library/Molecules/Simulation/Pipette/PipetteRender',
60+
argTypes: {
61+
labwareName: {
62+
control: {
63+
type: 'select',
64+
},
65+
options: labwareDisplayNames,
6366
},
64-
defaultValue: opentrons300UlTiprack.metadata.displayName,
65-
},
66-
pipetteName: {
67-
control: {
68-
type: 'select',
67+
pipetteName: {
68+
control: {
69+
type: 'select',
70+
},
6971
options: pipetteNames,
7072
},
71-
defaultValue: pipetteNames[0],
73+
},
74+
decorators: [
75+
Story => (
76+
<RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
77+
{() => <Story />}
78+
</RobotWorkSpace>
79+
),
80+
],
81+
}
82+
83+
export default meta
84+
85+
type Story = StoryObj<StoryArgs>
86+
87+
export const PipetteRender: Story = {
88+
args: {
89+
labwareName: opentrons300UlTiprack.metadata.displayName,
90+
pipetteName: pipetteNames[0],
91+
},
92+
render: args => {
93+
const labwareDef = labwareDefMap[args.labwareName] ?? opentrons300UlTiprack
94+
return (
95+
<Fragment>
96+
<LabwareRender definition={labwareDef} positioningMode="passThrough" />
97+
<PipetteRenderComponent
98+
labwareDef={labwareDef}
99+
pipetteName={args.pipetteName}
100+
/>
101+
</Fragment>
102+
)
72103
},
73104
}

0 commit comments

Comments
 (0)