@opentrons/components 0.1.6-alpha.15 → 0.1.6-alpha.17

package/src/icons/index.ts

@@ -0,0 +1,6 @@
+// icons icons icons!
+
+export * from './Icon'
+export * from './NotificationIcon'
+export * from './ModuleIcon'
+export * from './icon-data'

package/src/images/index.ts

@@ -0,0 +1 @@
+export * from './labware'

package/src/images/labware/index.ts

@@ -0,0 +1 @@
+export * from './measurement-guide'

package/src/images/labware/measurement-guide/index.ts

@@ -0,0 +1,272 @@
+export interface DiagramProps {
+  guideType?: string
+  category?: string
+  insertCategory?: string
+  shape?: string
+  wellBottomShape?: string
+  guideVisible?: boolean
+  irregular?: boolean
+  isMultiRow?: boolean
+}
+
+type Diagrams = Record<string, string[]>
+
+const FOOTPRINT_IMAGE_RELATIVE_PATH = './images/dimensions/footprint@3x.png'
+const DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-plate-and-reservoir@3x.png'
+const DIMENSIONS_HEIGHT_TIP_RACK_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-tip-rack@3x.png'
+
+const DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-tube-rack@3x.png'
+
+const DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_IRREGULAR_RELATIVE_PATH =
+  './images/dimensions/height-tube-rack-irregular@3x.png'
+
+const HEIGHT_ALUM_BLOCK_TUBES_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-alum-block-tubes@3x.png'
+
+const HEIGHT_ALUM_BLOCK_PLATE_IMAGE_RELATIVE_PATH =
+  './images/dimensions/height-alum-block-plate@3x.png'
+
+const OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH =
+  './images/offset/offset-reservoir@3x.png'
+
+const SPACING_RESEVOIR_IMAGE_RELATIVE_PATH =
+  './images/spacing/spacing-reservoir@3x.png'
+
+const SPACING_RESEVOIR_MULTI_ROW_IMAGE_RELATIVE_PATH =
+  './images/spacing/spacing-reservoir-multi-row@3x.png'
+
+const OFFSET_WELL_CIRCULAR_IMAGE_RELATIVE_PATH =
+  './images/offset/offset-well-circular@3x.png'
+
+const SPACING_WELL_CIRCULAR_IMAGE_RELATIVE_PATH =
+  './images/spacing/spacing-well-circular@3x.png'
+
+const OFFSET_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH =
+  './images/offset/offset-well-rectangular@3x.png'
+
+const SPACING_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH =
+  './images/spacing/spacing-well-rectangular@3x.png'
+
+const DEPTH_LENGTH_TIP_RACK_IMAGE_RELATIVE_PATH =
+  './images/depth/length-tip-rack@3x.png'
+
+const SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH =
+  './images/shape/shape-circular@3x.png'
+
+const DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-plate-flat@3x.png'
+
+const SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH =
+  './images/shape/shape-rectangular@3x.png'
+
+const DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-plate-round@3x.png'
+
+const DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-plate-v@3x.png'
+
+const DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-reservoir-and-tubes-flat@3x.png'
+
+const DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-reservoir-and-tubes-round@3x.png'
+
+const DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH =
+  './images/depth/depth-reservoir-and-tubes-v@3x.png'
+
+const FOOTPRINT_DIAGRAMS: Diagrams = {
+  wellPlate: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  tipRack: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_TIP_RACK_IMAGE_RELATIVE_PATH, import.meta.url)
+      .href,
+  ],
+  tubeRack: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_RELATIVE_PATH, import.meta.url)
+      .href,
+  ],
+  reservoir: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  irregular: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(
+      DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_IRREGULAR_RELATIVE_PATH,
+      import.meta.url
+    ).href,
+  ],
+  adapter: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  lid: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+}
+
+const ALUM_BLOCK_FOOTPRINTS: Diagrams = {
+  tubeRack: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(HEIGHT_ALUM_BLOCK_TUBES_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  wellPlate: [
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(HEIGHT_ALUM_BLOCK_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+}
+
+const RESERVOIR_SPACING_DIAGRAMS: Diagrams = {
+  singleRow: [
+    new URL(OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  multiRow: [
+    new URL(OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_RESEVOIR_MULTI_ROW_IMAGE_RELATIVE_PATH, import.meta.url)
+      .href,
+  ],
+}
+
+const SPACING_DIAGRAMS: Diagrams = {
+  circular: [
+    new URL(OFFSET_WELL_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_WELL_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+  rectangular: [
+    new URL(OFFSET_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  ],
+}
+
+const TIPRACK_MEASUREMENT_DIAGRAMS: string[] = [
+  new URL(DEPTH_LENGTH_TIP_RACK_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+]
+
+type NestedDiagrams = Record<string, Record<string, string[]>>
+
+const PLATE_MEASUREMENT_DIAGRAMS: NestedDiagrams = {
+  flat: {
+    circular: [
+      new URL(DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+  u: {
+    circular: [
+      new URL(DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+  v: {
+    circular: [
+      new URL(DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+}
+const MEASUREMENT_DIAGRAMS: NestedDiagrams = {
+  flat: {
+    circular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+  u: {
+    circular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+  v: {
+    circular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+    rectangular: [
+      new URL(
+        DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH,
+        import.meta.url
+      ).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    ],
+  },
+}
+
+export function getFootprintDiagram(props: DiagramProps): string[] {
+  const { category, insertCategory, irregular } = props
+  if (category === 'aluminumBlock') {
+    return insertCategory ? ALUM_BLOCK_FOOTPRINTS[insertCategory] : []
+  } else if (category === 'tubeRack' && irregular) {
+    return FOOTPRINT_DIAGRAMS.irregular
+  }
+  return category ? FOOTPRINT_DIAGRAMS[category] : []
+}
+
+export function getSpacingDiagram(props: DiagramProps): string[] {
+  const { category, isMultiRow, shape } = props
+  if (category === 'reservoir') {
+    return isMultiRow
+      ? RESERVOIR_SPACING_DIAGRAMS.multiRow
+      : RESERVOIR_SPACING_DIAGRAMS.singleRow
+  }
+
+  return shape ? SPACING_DIAGRAMS[shape] : []
+}
+
+export function getMeasurementDiagram(props: DiagramProps): string[] {
+  const { category, wellBottomShape, shape } = props
+  if (category === 'tipRack') return TIPRACK_MEASUREMENT_DIAGRAMS
+  else if (category === 'wellPlate') {
+    return wellBottomShape && shape
+      ? PLATE_MEASUREMENT_DIAGRAMS[wellBottomShape][shape]
+      : []
+  }
+  return wellBottomShape && shape
+    ? MEASUREMENT_DIAGRAMS[wellBottomShape][shape]
+    : []
+}

package/src/index.module.css

@@ -0,0 +1,9 @@
+/* opentrons style library */
+
+@import './styles/colors.module.css';
+@import './styles/typography.module.css';
+@import './styles/borders.module.css';
+
+:global(*) {
+  box-sizing: border-box;
+}

package/src/index.ts

@@ -0,0 +1,41 @@
+// opentrons components library
+
+export * from './hooks'
+export * from './utils'
+
+// Components
+export * from './alerts'
+export * from './buttons'
+export * from './controls'
+export * from './hardware-sim'
+export * from './legacy-hardware-sim'
+export * from './forms'
+export * from './icons'
+export * from './images'
+export * from './instrument'
+export * from './interaction-enhancers'
+export * from './lists'
+export * from './modals'
+export * from './nav'
+export * from './primitives'
+export * from './slotmap'
+export * from './structure'
+export * from './tooltips'
+export * from './organisms'
+
+// styles
+export * from './styles'
+// new ui-overhaul style vars
+export * from './ui-style-constants'
+
+// helix design system
+export * from './helix-design-system'
+
+// Pure Types
+export * from './robot-types'
+
+//  Molecules
+export * from './molecules'
+
+// Atoms
+export * from './atoms'

package/src/instrument/InstrumentDiagram.stories.tsx

@@ -0,0 +1,42 @@
+import type * as React from 'react'
+import keyBy from 'lodash/keyBy'
+import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
+
+import { InstrumentDiagram as InstrumentDiagramComponent } from './InstrumentDiagram'
+
+import type { Story, Meta } from '@storybook/react'
+
+const allPipetteSpecsByDisplayNames = keyBy(
+  getAllPipetteNames().map(getPipetteNameSpecs),
+  'displayName'
+)
+
+export default {
+  title: 'Library/Organisms/Instrument Diagram',
+  argTypes: {
+    mount: {
+      control: {
+        type: 'select',
+        options: ['left', 'right'],
+      },
+      defaultValue: 'left',
+    },
+    pipetteSpecs: {
+      control: {
+        type: 'select',
+        options: Object.keys(allPipetteSpecsByDisplayNames),
+      },
+      defaultValue: Object.keys(allPipetteSpecsByDisplayNames)[0],
+    },
+  },
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof InstrumentDiagramComponent>
+> = ({ pipetteSpecs, ...args }) => (
+  <InstrumentDiagramComponent
+    {...args}
+    pipetteSpecs={allPipetteSpecsByDisplayNames[pipetteSpecs]}
+  />
+)
+export const InstrumentDiagram = Template.bind({})

package/src/instrument/InstrumentDiagram.tsx

@@ -0,0 +1,58 @@
+import { Flex } from '../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../styles'
+import singleSrc from './single_channel_GEN1_800px.png'
+import multiSrc from './multi-channel_GEN1_800px.png'
+import singleGEN2Src from './single-channel_GEN2_800px.png'
+import multiGEN2Src from './multi-channel_GEN2_800px.png'
+import singleFlexSrc from './single-channel-flex.png'
+import eightChannelFlexSrc from './eight-channel-flex.png'
+import ninetySixSrc from './ninety-six-channel-gen1.png'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { PipetteV2Specs } from '@opentrons/shared-data'
+import type { Mount } from '../robot-types'
+import type { StyleProps } from '..'
+
+export interface InstrumentDiagramProps extends StyleProps {
+  mount: Mount
+  pipetteSpecs?: Pick<PipetteV2Specs, 'displayCategory' | 'channels'> | null
+  className?: string
+  imageStyle?: FlattenSimpleInterpolation
+}
+
+export function InstrumentDiagram(props: InstrumentDiagramProps): JSX.Element {
+  const { mount, pipetteSpecs, className, imageStyle, ...styleProps } = props
+  const { displayCategory, channels } = pipetteSpecs || {}
+
+  let imgSrc
+  switch (displayCategory) {
+    case 'FLEX': {
+      imgSrc = channels === 1 ? singleFlexSrc : eightChannelFlexSrc
+      break
+    }
+    case 'GEN2': {
+      imgSrc = channels === 1 ? singleGEN2Src : multiGEN2Src
+      break
+    }
+    case 'GEN1':
+    default: {
+      imgSrc = channels === 1 ? singleSrc : multiSrc
+    }
+  }
+  return (
+    <Flex
+      className={className}
+      transform={mount === 'right' ? 'scaleX(-1)' : ''}
+      filter={mount === 'right' ? 'FlipH' : ''}
+      {...styleProps}
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_CENTER}
+    >
+      <img
+        src={channels === 96 ? ninetySixSrc : imgSrc}
+        css={imageStyle}
+        height="100%"
+      />
+    </Flex>
+  )
+}

package/src/instrument/InstrumentGroup.stories.tsx

@@ -0,0 +1,88 @@
+import type * as React from 'react'
+import reduce from 'lodash/reduce'
+import keyBy from 'lodash/keyBy'
+import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
+
+import { InstrumentGroup as InstrumentGroupComponent } from './InstrumentGroup'
+
+import type { Story, Meta } from '@storybook/react'
+
+const allPipetteSpecsByDisplayNames = keyBy(
+  getAllPipetteNames().map(getPipetteNameSpecs),
+  'displayName'
+)
+const leftPipettesByName = reduce(
+  allPipetteSpecsByDisplayNames,
+  (acc, pipetteSpecs, displayName) => {
+    return {
+      ...acc,
+      [displayName]: {
+        mount: 'left',
+        description: displayName,
+        pipetteSpecs,
+        isDisabled: false,
+      },
+    }
+  },
+  {}
+)
+const rightPipettesByName = reduce(
+  allPipetteSpecsByDisplayNames,
+  (acc, pipetteSpecs, displayName) => {
+    return {
+      ...acc,
+      [displayName]: {
+        mount: 'right',
+        description: displayName,
+        pipetteSpecs,
+        isDisabled: false,
+      },
+    }
+  },
+  {}
+)
+
+export default {
+  title: 'Library/Organisms/Instrument Group',
+  argTypes: {
+    left: {
+      control: {
+        type: 'select',
+        options: Object.keys(leftPipettesByName),
+      },
+      defaultValue: Object.keys(leftPipettesByName)[0],
+    },
+    right: {
+      control: {
+        type: 'select',
+        options: Object.keys(rightPipettesByName),
+      },
+      defaultValue: Object.keys(rightPipettesByName)[0],
+    },
+  },
+} as Meta
+
+const Template: Story<
+  React.ComponentProps<typeof InstrumentGroupComponent>
+> = ({ left, right, ...args }) => (
+  <InstrumentGroupComponent
+    {...args}
+    left={leftPipettesByName[left]}
+    right={rightPipettesByName[right]}
+  />
+)
+export const InstrumentGroup = Template.bind({})
+InstrumentGroup.args = {
+  left: {
+    mount: 'left',
+    description: 'p300 8-Channel',
+    pipetteSpecs: { channels: 8, displayCategory: 'GEN1' },
+    isDisabled: false,
+  },
+  right: {
+    mount: 'right',
+    description: 'p10 Single',
+    pipetteSpecs: { channels: 1, displayCategory: 'GEN2' },
+    isDisabled: true,
+  },
+}

package/src/instrument/InstrumentGroup.tsx

@@ -0,0 +1,35 @@
+import { InstrumentInfo } from './InstrumentInfo'
+import styles from './instrument.module.css'
+
+import type { InstrumentInfoProps } from './InstrumentInfo'
+
+export interface InstrumentGroupProps {
+  showMountLabel?: boolean | null | undefined
+  left?: InstrumentInfoProps | null | undefined
+  right?: InstrumentInfoProps | null | undefined
+}
+
+const EMPTY_INSTRUMENT_PROPS = {
+  description: 'None',
+  tiprackModel: 'N/A',
+  isDisabled: false,
+}
+
+/**
+ * Renders a left and right pipette diagram & info.
+ * Takes child `InstrumentInfo` props in `right` and `left` props.
+ */
+export function InstrumentGroup(props: InstrumentGroupProps): JSX.Element {
+  const { left, right, showMountLabel } = props
+
+  const leftProps = left || { ...EMPTY_INSTRUMENT_PROPS, mount: 'left' }
+  const rightProps = right || { ...EMPTY_INSTRUMENT_PROPS, mount: 'right' }
+  return (
+    <section className={styles.pipette_group}>
+      <InstrumentInfo {...leftProps} showMountLabel={showMountLabel} />
+      {leftProps.pipetteSpecs?.channels === 96 ? null : (
+        <InstrumentInfo {...rightProps} showMountLabel={showMountLabel} />
+      )}
+    </section>
+  )
+}