@opentrons/components 0.2.0-alpha.0 → 0.2.0-alpha.1

package/src/hardware-sim/BaseDeck/__fixtures__/index.ts

@@ -1,165 +0,0 @@
-import {
-  SINGLE_CENTER_SLOT_FIXTURE,
-  SINGLE_LEFT_SLOT_FIXTURE,
-  SINGLE_RIGHT_SLOT_FIXTURE,
-  STAGING_AREA_RIGHT_SLOT_FIXTURE,
-  TRASH_BIN_ADAPTER_FIXTURE,
-  WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
-} from '@opentrons/shared-data'
-
-import type { DeckConfiguration } from '@opentrons/shared-data'
-
-export const STANDARD_SLOT_DECK_CONFIG_FIXTURE: DeckConfiguration = [
-  {
-    cutoutId: 'cutoutA1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutA2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutA3',
-    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB3',
-    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC3',
-    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD3',
-    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
-  },
-]
-
-// contains staging area fixtures
-export const EXTENDED_DECK_CONFIG_FIXTURE: DeckConfiguration = [
-  {
-    cutoutId: 'cutoutA1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutA2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    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: STAGING_AREA_RIGHT_SLOT_FIXTURE,
-  },
-]
-
-// contains waste chute fixture
-export const WASTE_CHUTE_DECK_CONFIG_FIXTURE: DeckConfiguration = [
-  {
-    cutoutId: 'cutoutA1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC1',
-    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutA2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutA3',
-    cutoutFixtureId: SINGLE_RIGHT_SLOT_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,
-  },
-]

package/src/hardware-sim/BaseDeck/basedeck.module.css

@@ -1,20 +0,0 @@
-.waste_chute_copy_container {
-  display: flex;
-  text-align: center;
-}
-
-.waste_chute_fixture_container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  gap: var(--spacing-4);
-  padding-inline: var(--spacing-8);
-}
-
-.waste_chute_fixture_container_highlight {
-  border: 3px solid var(--blue-50);
-}

package/src/hardware-sim/BaseDeck/index.ts

@@ -1,5 +0,0 @@
-export * from './BaseDeck'
-export * from './SingleSlotFixture'
-export * from './StagingAreaFixture'
-export * from './WasteChuteFixture'
-export * from './WasteChuteStagingAreaFixture'

package/src/hardware-sim/Deck/DeckFromLayers.tsx

@@ -1,61 +0,0 @@
-import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
-
-import { ALL_OT2_DECK_LAYERS } from './constants'
-import {
-  CalibrationMarkings,
-  DoorStops,
-  FixedBase,
-  FixedTrash,
-  MetalFrame,
-  RemovableDeckOutline,
-  RemovalHandle,
-  ScrewHoles,
-  SlotNumbers,
-  SlotRidges,
-} from './OT2Layers'
-
-import type { RobotType } from '@opentrons/shared-data'
-
-export * from './OT2Layers'
-
-export interface DeckFromLayersProps {
-  robotType: RobotType
-  layerBlocklist: string[]
-}
-
-const OT2_LAYER_MAP: {
-  [layer in typeof ALL_OT2_DECK_LAYERS[number]]: () => JSX.Element
-} = {
-  fixedBase: () => <FixedBase />,
-  fixedTrash: () => <FixedTrash />,
-  doorStops: () => <DoorStops />,
-  metalFrame: () => <MetalFrame />,
-  removableDeckOutline: () => <RemovableDeckOutline />,
-  slotRidges: () => <SlotRidges />,
-  slotNumbers: () => <SlotNumbers />,
-  calibrationMarkings: () => <CalibrationMarkings />,
-  removalHandle: () => <RemovalHandle />,
-  screwHoles: () => <ScrewHoles />,
-}
-
-/**
- * a component that renders an OT-2 deck from the V3 deck definition layers property
- * takes a robot type prop to protect against an attempted Flex render
- */
-export function DeckFromLayers(props: DeckFromLayersProps): JSX.Element | null {
-  const { robotType, layerBlocklist = [] } = props
-
-  // early return null if not OT-2
-  if (robotType !== OT2_ROBOT_TYPE) return null
-
-  return (
-    <g id="deckLayers">
-      {ALL_OT2_DECK_LAYERS.filter(layer => !layerBlocklist.includes(layer)).map(
-        layer => {
-          const LayerComponent = OT2_LAYER_MAP[layer]
-          return <LayerComponent key={layer} />
-        }
-      )}
-    </g>
-  )
-}

package/src/hardware-sim/Deck/FlexTrash.tsx

@@ -1,168 +0,0 @@
-import clsx from 'clsx'
-
-import {
-  FLEX_ROBOT_TYPE,
-  getDeckDefFromRobotType,
-  getSchema2CornerOffsetFromSlot,
-  getSchema2Dimensions,
-  opentrons1Trash3200MlFixedV1 as trashLabwareDef,
-} from '@opentrons/shared-data'
-
-import { PlaceholderStyledText } from '../../atoms'
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { DeckLabelSet } from '../../organisms'
-import styles from './deck.module.css'
-import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
-
-import type { RobotType } from '@opentrons/shared-data'
-import type { DeckLabelProps } from '../../molecules'
-
-// only allow edge cutout locations (columns 1 and 3)
-export type TrashCutoutId =
-  | 'cutoutA1'
-  | 'cutoutB1'
-  | 'cutoutC1'
-  | 'cutoutD1'
-  | 'cutoutA3'
-  | 'cutoutB3'
-  | 'cutoutC3'
-  | 'cutoutD3'
-
-const HEIGHT_OF_TAG = 28
-interface FlexTrashProps {
-  robotType: RobotType
-  trashIconColor: string
-  backgroundColor: string
-  trashCutoutId?: TrashCutoutId
-  /** optional prop to highlight the border of the trashBin */
-  showHighlight?: boolean
-  /** optional tag info to display a tag below the trash */
-  tagInfo?: DeckLabelProps[]
-  onClick?: () => void
-  onMouseEnter?: () => void
-  onMouseLeave?: () => void
-}
-
-/**
- * Component to render Opentrons Flex trash
- * For use as a RobotWorkspace child component
- */
-
-export const FlexTrash = ({
-  robotType,
-  trashIconColor,
-  backgroundColor,
-  trashCutoutId,
-  showHighlight,
-  tagInfo,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-}: FlexTrashProps): JSX.Element | null => {
-  // be sure we don't try to render for an OT-2
-  if (robotType !== FLEX_ROBOT_TYPE) return null
-
-  const deckDefinition = getDeckDefFromRobotType(robotType)
-
-  const trashCutout = deckDefinition.locations.cutouts.find(
-    cutout => cutout.id === trashCutoutId
-  )
-
-  // retrieve slot x,y positions and dimensions from deck definition for the given trash cutout location
-  const [x = 0, y = 0] = trashCutout?.position ?? []
-
-  // a standard addressable area slot bounding box dimension
-  const {
-    xDimension: slotXDimension = 0,
-    yDimension: slotYDimension = 0,
-  } = deckDefinition.locations.addressableAreas[0].boundingBox
-
-  // adjust for dimensions from trash definition
-  const { x: xAdjustment, y: yAdjustment } = getSchema2CornerOffsetFromSlot(
-    trashLabwareDef
-  )
-  const { xDimension, yDimension } = getSchema2Dimensions(trashLabwareDef)
-
-  // rotate trash 180 degrees in column 1
-  const rotateDegrees =
-    trashCutoutId === 'cutoutA1' ||
-    trashCutoutId === 'cutoutB1' ||
-    trashCutoutId === 'cutoutC1' ||
-    trashCutoutId === 'cutoutD1'
-      ? '180'
-      : '0'
-
-  // rotate trash around x,y midpoint of standard slot bounding box
-  const rotateXCoord = x + slotXDimension / 2
-  const rotateYCoord = y + slotYDimension / 2
-
-  return x != null && y != null && xDimension != null && yDimension != null ? (
-    <g transform={`rotate(${rotateDegrees}, ${rotateXCoord}, ${rotateYCoord})`}>
-      <RobotCoordsForeignObject
-        width={xDimension}
-        height={yDimension}
-        x={x + xAdjustment}
-        y={y + yAdjustment}
-        flexProps={{
-          flex: '1',
-        }}
-        flexEvents={{
-          onClick: onClick,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-        }}
-        foreignObjectProps={{
-          flex: '1',
-          cursor: onClick != null ? 'pointer' : 'default',
-        }}
-      >
-        <div
-          className={clsx(styles.trash_container, {
-            [styles.trash_container_highlight]: showHighlight,
-          })}
-          style={{ backgroundColor }}
-        >
-          {rotateDegrees === '180' ? (
-            <div
-              className={styles.trash_container_rotate_copy}
-              style={{ transform: `rotate(${rotateDegrees}deg)` }}
-            >
-              <PlaceholderStyledText
-                color={COLORS.white}
-                desktopStyle="bodyDefaultSemiBold"
-              >
-                Trash bin
-              </PlaceholderStyledText>
-            </div>
-          ) : null}
-          <Icon
-            name="trash"
-            color={trashIconColor}
-            height="2rem"
-            // rotate icon back 180 degrees
-            transform={`rotate(${rotateDegrees}deg)`}
-            transformOrigin="center"
-          />
-          {rotateDegrees === '0' ? (
-            <PlaceholderStyledText
-              color={COLORS.white}
-              desktopStyle="bodyDefaultSemiBold"
-            >
-              Trash bin
-            </PlaceholderStyledText>
-          ) : null}
-        </div>
-      </RobotCoordsForeignObject>
-      {tagInfo != null && tagInfo.length > 0 ? (
-        <DeckLabelSet
-          width={xDimension}
-          height={yDimension}
-          x={x + xAdjustment}
-          y={y + yAdjustment - HEIGHT_OF_TAG}
-          deckLabels={tagInfo}
-        />
-      ) : null}
-    </g>
-  ) : null
-}

package/src/hardware-sim/Deck/MoveLabwareOnDeck.stories.tsx

@@ -1,98 +0,0 @@
-import {
-  fixture96Plate,
-  FLEX_ROBOT_TYPE,
-  SINGLE_CENTER_SLOT_FIXTURE,
-  SINGLE_LEFT_SLOT_FIXTURE,
-  SINGLE_RIGHT_SLOT_FIXTURE,
-  STAGING_AREA_RIGHT_SLOT_FIXTURE,
-} from '@opentrons/shared-data'
-
-import { MoveLabwareOnDeck as MoveLabwareOnDeckComponent } from './MoveLabwareOnDeck'
-
-import type { Meta, StoryObj } from '@storybook/react'
-import type * as React from 'react'
-import type {
-  DeckConfiguration,
-  LabwareDefinition,
-} from '@opentrons/shared-data'
-
-const meta: Meta<React.ComponentProps<typeof MoveLabwareOnDeckComponent>> = {
-  component: MoveLabwareOnDeckComponent,
-  title: 'Library/Molecules/Simulation/MoveLabwareOnDeck',
-} as Meta
-
-export default meta
-type Story = StoryObj<React.ComponentProps<typeof MoveLabwareOnDeckComponent>>
-
-const FLEX_SIMPLEST_DECK_CONFIG: DeckConfiguration = [
-  {
-    cutoutId: 'cutoutA1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD1',
-    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutA2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD2',
-    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutA3',
-    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutB3',
-    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutC3',
-    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
-  },
-  {
-    cutoutId: 'cutoutD3',
-    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
-  },
-]
-
-export const MoveLabwareOnDeck: Story = {
-  render: args => (
-    <MoveLabwareOnDeckComponent
-      movedLabwareDef={fixture96Plate as LabwareDefinition}
-      initialLabwareLocation={args.initialLabwareLocation}
-      finalLabwareLocation={args.finalLabwareLocation}
-      loadedModules={[]}
-      loadedLabware={[]}
-      robotType={args.robotType}
-      deckConfig={
-        args.robotType === FLEX_ROBOT_TYPE ? FLEX_SIMPLEST_DECK_CONFIG : []
-      }
-      height="400px"
-    />
-  ),
-  args: {
-    initialLabwareLocation: { slotName: 'A1' },
-    finalLabwareLocation: 'offDeck',
-    robotType: FLEX_ROBOT_TYPE,
-  },
-}