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

package/src/icons/index.ts

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

package/src/images/index.ts

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

package/src/images/labware/index.ts

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

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

@@ -1,272 +0,0 @@
-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

@@ -1,9 +0,0 @@
-/* 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

@@ -1,41 +0,0 @@
-// 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

@@ -1,43 +0,0 @@
-import keyBy from 'lodash/keyBy'
-
-import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
-
-import { InstrumentDiagram as InstrumentDiagramComponent } from './InstrumentDiagram'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from '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

@@ -1,59 +0,0 @@
-import { Flex } from '../primitives'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../styles'
-
-import type { FlattenSimpleInterpolation } from 'styled-components'
-import type { PipetteV2Specs } from '@opentrons/shared-data'
-import type { StyleProps } from '..'
-import type { Mount } from '../robot-types'
-
-import eightChannelFlexSrc from './eight-channel-flex.png'
-import multiSrc from './multi-channel_GEN1_800px.png'
-import multiGEN2Src from './multi-channel_GEN2_800px.png'
-import ninetySixSrc from './ninety-six-channel-gen1.png'
-import singleSrc from './single_channel_GEN1_800px.png'
-import singleGEN2Src from './single-channel_GEN2_800px.png'
-import singleFlexSrc from './single-channel-flex.png'
-
-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

@@ -1,89 +0,0 @@
-import keyBy from 'lodash/keyBy'
-import reduce from 'lodash/reduce'
-
-import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
-
-import { InstrumentGroup as InstrumentGroupComponent } from './InstrumentGroup'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from '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

@@ -1,35 +0,0 @@
-import styles from './instrument.module.css'
-import { InstrumentInfo } from './InstrumentInfo'
-
-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>
-  )
-}