fix(components): fix storybook deck configurator (#14038)

* fix(components): fix storybook deck configurator
Opentrons · Dec 13, 2023 · 0832c04 · 0832c04
1 parent fcbe7f5
commit 0832c04
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 44 deletions.
diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.stories.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.stories.tsx
@@ -51,7 +51,7 @@ export const BaseDeck: Story = {
   args: {
     robotType: FLEX_ROBOT_TYPE,
     deckConfig: EXTENDED_DECK_CONFIG_FIXTURE,
-    labwareLocations: [
+    labwareOnDeck: [
       {
         labwareLocation: { slotName: 'C2' },
         definition: fixture_96_plate as LabwareDefinition2,
@@ -61,7 +61,7 @@ export const BaseDeck: Story = {
         definition: fixture_tiprack_1000_ul as LabwareDefinition2,
       },
     ],
-    moduleLocations: [
+    modulesOnDeck: [
       {
         moduleLocation: { slotName: 'B1' },
         moduleModel: THERMOCYCLER_MODULE_V2,

diff --git a/components/src/hardware-sim/DeckConfigurator/DeckConfigurator.stories.tsx b/components/src/hardware-sim/DeckConfigurator/DeckConfigurator.stories.tsx
@@ -1,17 +1,17 @@
 import * as React from 'react'
-import { v4 as uuidv4 } from 'uuid'
 
 import {
-  STAGING_AREA_LOAD_NAME,
-  STANDARD_SLOT_LOAD_NAME,
-  TRASH_BIN_LOAD_NAME,
-  WASTE_CHUTE_LOAD_NAME,
+  SINGLE_CENTER_SLOT_FIXTURE,
+  SINGLE_LEFT_SLOT_FIXTURE,
+  STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  TRASH_BIN_ADAPTER_FIXTURE,
+  WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
 } from '@opentrons/shared-data'
 
 import { DeckConfigurator } from '.'
 
 import type { Story, Meta } from '@storybook/react'
-import type { Fixture } from '@opentrons/shared-data'
+import type { CutoutConfig } from '@opentrons/shared-data'
 
 export default {
   title: 'Library/Molecules/Simulation/DeckConfigurator',
@@ -20,62 +20,68 @@ export default {
 const Template: Story<React.ComponentProps<typeof DeckConfigurator>> = args => (
   <DeckConfigurator {...args} />
 )
-const deckConfig: Fixture[] = [
+const deckConfig: CutoutConfig[] = [
   {
-    fixtureLocation: 'cutoutA1',
-    loadName: STANDARD_SLOT_LOAD_NAME,
-    fixtureId: uuidv4(),
+    cutoutId: 'cutoutA1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
   },
   {
-    fixtureLocation: 'cutoutB1',
-    loadName: STANDARD_SLOT_LOAD_NAME,
-    fixtureId: uuidv4(),
+    cutoutId: 'cutoutB1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
   },
   {
-    fixtureLocation: 'cutoutC1',
-    loadName: STANDARD_SLOT_LOAD_NAME,
-    fixtureId: uuidv4(),
+    cutoutId: 'cutoutC1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
   },
   {
-    fixtureLocation: 'cutoutD1',
-    loadName: STANDARD_SLOT_LOAD_NAME,
-    fixtureId: uuidv4(),
+    cutoutId: 'cutoutD1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
   },
   {
-    fixtureLocation: 'cutoutA3',
-    loadName: TRASH_BIN_LOAD_NAME,
-    fixtureId: uuidv4(),
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+    cutoutId: 'cutoutA2',
   },
   {
-    fixtureLocation: 'cutoutB3',
-    loadName: STANDARD_SLOT_LOAD_NAME,
-    fixtureId: uuidv4(),
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+    cutoutId: 'cutoutB2',
   },
   {
-    fixtureLocation: 'cutoutC3',
-    loadName: STAGING_AREA_LOAD_NAME,
-    fixtureId: uuidv4(),
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+    cutoutId: 'cutoutC2',
   },
   {
-    fixtureLocation: 'cutoutD3',
-    loadName: WASTE_CHUTE_LOAD_NAME,
-    fixtureId: uuidv4(),
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+    cutoutId: 'cutoutD2',
+  },
+  {
+    cutoutId: 'cutoutA3',
+    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD3',
+    cutoutFixtureId: WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
   },
 ]
 
 export const Default = Template.bind({})
 Default.args = {
   deckConfig,
-  handleClickAdd: fixtureLocation => console.log(`add at ${fixtureLocation}`),
-  handleClickRemove: fixtureLocation =>
-    console.log(`remove at ${fixtureLocation}`),
+  handleClickAdd: cutoutId => console.log(`add at ${cutoutId}`),
+  handleClickRemove: cutoutId => console.log(`remove at ${cutoutId}`),
 }
 
 export const ReadOnly = Template.bind({})
 ReadOnly.args = {
   deckConfig,
-  handleClickAdd: fixtureLocation => console.log(`add at ${fixtureLocation}`),
-  handleClickRemove: fixtureLocation =>
-    console.log(`remove at ${fixtureLocation}`),
+  handleClickAdd: cutoutId => console.log(`add at ${cutoutId}`),
+  handleClickRemove: cutoutId => console.log(`remove at ${cutoutId}`),
   readOnly: true,
 }
diff --git a/components/src/hooks/useSelectDeckLocation/SelectDeckLocation.stories.tsx b/components/src/hooks/useSelectDeckLocation/SelectDeckLocation.stories.tsx
@@ -3,33 +3,49 @@ import { DeckLocationSelect as DeckLocationSelectComponent } from './'
 import {
   FLEX_ROBOT_TYPE,
   getDeckDefFromRobotType,
+  OT2_ROBOT_TYPE,
 } from '@opentrons/shared-data'
 
 import type { Meta, StoryObj } from '@storybook/react'
+import type { RobotType } from '@opentrons/shared-data'
 
 const meta: Meta<React.ComponentProps<typeof DeckLocationSelectComponent>> = {
   component: DeckLocationSelectComponent,
   title: 'Library/Molecules/Simulation/SelectDeckLocation',
 } as Meta
 
 export default meta
-type Story = StoryObj<{ disabledSlotNames: string[] }>
+type Story = StoryObj<{ disabledSlotNames: string[]; robotType: RobotType }>
 
-export const DeckLocationSelect: Story = {
+export const FlexDeckLocationSelect: Story = {
   render: args => {
     return <Wrapper {...args} />
   },
   args: {
     disabledSlotNames: ['A2'],
+    robotType: FLEX_ROBOT_TYPE,
   },
 }
 
-function Wrapper(props: { disabledSlotNames: string[] }): JSX.Element {
+export const OT2DeckLocationSelect: Story = {
+  render: args => {
+    return <Wrapper {...args} />
+  },
+  args: {
+    disabledSlotNames: ['2'],
+    robotType: OT2_ROBOT_TYPE,
+  },
+}
+
+function Wrapper(props: {
+  disabledSlotNames: string[]
+  robotType: RobotType
+}): JSX.Element {
   const [selectedLocation, setSelectedLocation] = React.useState({
-    slotName: 'A1',
+    slotName: props.robotType === FLEX_ROBOT_TYPE ? 'A1' : '1',
   })
 
-  const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE)
+  const deckDef = getDeckDefFromRobotType(props.robotType)
   return (
     <DeckLocationSelectComponent
       {...{ selectedLocation, setSelectedLocation, deckDef }}