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

package/src/icons/icon.module.css

@@ -1,10 +0,0 @@
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.spin {
-  animation: spin 0.8s steps(8) infinite;
-  transform-origin: center;
-}

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,10 +0,0 @@
-/* opentrons style library */
-
-@import './styles/colors.module.css';
-@import './styles/typography.module.css';
-@import './styles/borders.module.css';
-@import './styles/global.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.tsx

@@ -1,57 +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}
-      {...styleProps}
-      alignItems={ALIGN_CENTER}
-      justifyContent={JUSTIFY_CENTER}
-    >
-      <img
-        src={channels === 96 ? ninetySixSrc : imgSrc}
-        css={imageStyle}
-        height="100%"
-      />
-    </Flex>
-  )
-}

package/src/instrument/PipetteSelect.module.css

@@ -1,14 +0,0 @@
-.pipette_volume_class {
-  min-width: 3.5rem;
-  cursor: default;
-}
-
-.pipette_channels {
-  min-width: 7rem;
-  cursor: default;
-}
-
-.pipette_category {
-  min-width: 2.5rem;
-  cursor: default;
-}

package/src/instrument/index.ts

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

package/src/interaction-enhancers/ClickOutside.ts

@@ -1,59 +0,0 @@
-import { Component } from 'react'
-
-import type { RefCallback } from 'react'
-
-interface ClickOutsideChildParams {
-  ref: RefCallback<Element>
-}
-export interface ClickOutsideProps {
-  onClickOutside: ((e: MouseEvent) => void) | undefined | null
-  children: (params: ClickOutsideChildParams) => JSX.Element
-}
-
-// TODO: BC: 2019-05-10 this would be much cleaner as a custom hook
-export class ClickOutside extends Component<ClickOutsideProps> {
-  // TODO(mc, 2019-04-19): switch to ref object
-  wrapperRef: Element | null
-
-  constructor(props: ClickOutsideProps) {
-    super(props)
-    this.wrapperRef = null
-  }
-
-  componentDidMount(): void {
-    document.addEventListener('mousedown', this.handleClickOutside)
-  }
-
-  componentWillUnmount(): void {
-    document.removeEventListener('mousedown', this.handleClickOutside)
-  }
-
-  setWrapperRef: (el: Element | null) => void = el => {
-    this.wrapperRef = el
-  }
-
-  handleClickOutside = (event: MouseEvent): void => {
-    const clickedElem = event.target
-
-    if (!(clickedElem instanceof Node)) {
-      // NOTE: this is some flow type checking funkiness
-      // TODO Ian 2018-05-24 use assert.
-      console.warn(
-        'expected clicked element to be Node - something went wrong in ClickOutside'
-      )
-      return
-    }
-
-    if (
-      this.props.onClickOutside &&
-      this.wrapperRef &&
-      !this.wrapperRef.contains(clickedElem)
-    ) {
-      this.props.onClickOutside(event)
-    }
-  }
-
-  render(): JSX.Element {
-    return this.props.children({ ref: this.setWrapperRef })
-  }
-}

package/src/interaction-enhancers/HandleKeypress.tsx

@@ -1,72 +0,0 @@
-import { Component } from 'react'
-
-import type { ReactNode } from 'react'
-
-export interface KeypressHandler {
-  key: string
-  shiftKey?: boolean | null | undefined
-  onPress: () => unknown
-}
-
-export interface HandleKeypressProps {
-  /** array of keypress handlers to attach to the window */
-  handlers: KeypressHandler[]
-  /** optionally call event.preventDefault if keypress is handled */
-  preventDefault?: boolean | null | undefined
-  /** wrapped children */
-  children?: ReactNode
-}
-
-const matchHandler = (e: KeyboardEvent) => (h: KeypressHandler) =>
-  h.key === e.key && (h.shiftKey == null || h.shiftKey === e.shiftKey)
-
-/**
- * Keypress handler wrapper component. Takes an array of keypress handlers
- * to call when a given key is pressed on the keyboard. Handler is called on
- * `keyup` event. `event.preventDefault` will be called if a key is handled
- * and `props.preventDefault` is true.
- */
-export class HandleKeypress extends Component<HandleKeypressProps> {
-  handlePressIfKey = (event: KeyboardEvent): void => {
-    const pressHandlers = this.props.handlers.filter(matchHandler(event))
-
-    // Check if any element is currently focused
-    const focusedElement = document.activeElement as HTMLElement
-
-    if (pressHandlers.length > 0) {
-      if (
-        focusedElement &&
-        event.key === 'Enter' &&
-        focusedElement.matches(':focus-visible')
-      ) {
-        focusedElement.click()
-      } else if (!focusedElement || !focusedElement.matches(':focus-visible')) {
-        pressHandlers.forEach(h => h.onPress())
-      }
-    }
-  }
-
-  preventDefaultIfKey = (event: KeyboardEvent): void => {
-    if (!this.props.preventDefault) return
-
-    const pressHandled = this.props.handlers.some(matchHandler(event))
-
-    if (pressHandled) event.preventDefault()
-  }
-
-  componentDidMount(): void {
-    window.addEventListener('keyup', this.handlePressIfKey)
-    window.addEventListener('keyup', this.preventDefaultIfKey)
-    window.addEventListener('keydown', this.preventDefaultIfKey)
-  }
-
-  componentWillUnmount(): void {
-    window.removeEventListener('keyup', this.handlePressIfKey)
-    window.removeEventListener('keyup', this.preventDefaultIfKey)
-    window.removeEventListener('keydown', this.preventDefaultIfKey)
-  }
-
-  render(): JSX.Element {
-    return <>{this.props.children}</>
-  }
-}

package/src/interaction-enhancers/__tests__/useHover.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('useHover hook', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/interaction-enhancers/index.ts

@@ -1,4 +0,0 @@
-export * from './ClickOutside'
-export * from './HandleKeypress'
-export * from './useOnClickOutside'
-export * from './useHover'