@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.0

package/src/instrument/InstrumentInfo.tsx

@@ -0,0 +1,106 @@
+import { LEFT, RIGHT } from '@opentrons/shared-data'
+import { Flex } from '../primitives'
+import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
+import { LegacyStyledText } from '../atoms'
+import { DIRECTION_COLUMN, JUSTIFY_CENTER } from '../styles'
+import { InstrumentDiagram } from './InstrumentDiagram'
+
+import type { ReactNode } from 'react'
+import type { Mount } from '../robot-types'
+import type { InstrumentDiagramProps } from './InstrumentDiagram'
+
+import styles from './instrument.module.css'
+
+export interface InstrumentInfoProps {
+  /** 'left' or 'right' */
+  mount: Mount
+  /** human-readable description, eg 'p300 Single-channel' */
+  description: string
+  /** specs of mounted pipette */
+  pipetteSpecs?: InstrumentDiagramProps['pipetteSpecs'] | null
+  /** paired tiprack models */
+  tiprackModels?: string[]
+  /** children to display under the info */
+  children?: ReactNode
+  /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
+  showMountLabel?: boolean | null
+}
+
+const MAX_WIDTH = '14rem'
+
+export function InstrumentInfo(props: InstrumentInfoProps): JSX.Element {
+  const {
+    mount,
+    showMountLabel,
+    description,
+    tiprackModels,
+    pipetteSpecs,
+    children,
+  } = props
+
+  const has96Channel = pipetteSpecs?.channels === 96
+  return (
+    <Flex justifyContent={JUSTIFY_CENTER} gridGap={SPACING.spacing16}>
+      {mount === RIGHT && pipetteSpecs ? (
+        <InstrumentDiagram
+          pipetteSpecs={pipetteSpecs}
+          className={styles.pipette_icon}
+          mount={mount}
+        />
+      ) : null}
+      {/* NOTE: the color is our legacy c-font-dark, which matches the other colors in this component **/}
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        color="#4a4a4a"
+        gridGap={SPACING.spacing8}
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <LegacyStyledText
+            as="h3"
+            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+            textTransform={TYPOGRAPHY.textTransformCapitalize}
+          >
+            {showMountLabel && !has96Channel ? `${mount} pipette` : 'pipette'}
+          </LegacyStyledText>
+          <LegacyStyledText as="p" width="max-content" maxWidth={MAX_WIDTH}>
+            {description}
+          </LegacyStyledText>
+        </Flex>
+
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <LegacyStyledText as="h3" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
+            {'Tip rack'}
+          </LegacyStyledText>
+          <ul>
+            {tiprackModels != null && tiprackModels.length > 0 ? (
+              tiprackModels.map((model, index) => (
+                <li key={`${model}_${index}`}>
+                  <LegacyStyledText
+                    as="p"
+                    width="max-content"
+                    maxWidth={MAX_WIDTH}
+                  >
+                    {model}
+                  </LegacyStyledText>
+                </li>
+              ))
+            ) : (
+              <LegacyStyledText as="p" width="max-content" maxWidth={MAX_WIDTH}>
+                {'None'}
+              </LegacyStyledText>
+            )}
+          </ul>
+        </Flex>
+      </Flex>
+
+      {children}
+      {mount === LEFT && pipetteSpecs ? (
+        <InstrumentDiagram
+          pipetteSpecs={pipetteSpecs}
+          className={styles.pipette_icon}
+          mount={mount}
+        />
+      ) : null}
+    </Flex>
+  )
+}

package/src/instrument/PipetteSelect.module.css

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

package/src/instrument/PipetteSelect.stories.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { PipetteSelect as PipetteSelectComponent } from './PipetteSelect'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Organisms/Pipette Select',
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof PipetteSelectComponent>> = ({
+  pipetteName,
+  ...args
+}) => {
+  const [pipetteNameControlled, setPipetteNameControlled] = React.useState(
+    pipetteName
+  )
+  const handleChange = (pipName: string): unknown => {
+    setPipetteNameControlled(pipName)
+  }
+  return (
+    <PipetteSelectComponent
+      {...args}
+      pipetteName={pipetteNameControlled}
+      onPipetteChange={handleChange}
+    />
+  )
+}
+export const PipetteSelect = Template.bind({})
+PipetteSelect.args = {
+  nameBlocklist: [
+    'p20_multi_gen2',
+    'p300_multi_gen2',
+    'p20_single_flex',
+    'p300_single_flex',
+    'p1000_single_flex',
+    'p1000_multi_flex',
+    'p50_multi_flex',
+  ],
+  enableNoneOption: true,
+}

package/src/instrument/PipetteSelect.tsx

@@ -0,0 +1,170 @@
+import groupBy from 'lodash/groupBy'
+import {
+  getAllPipetteNames,
+  getPipetteNameSpecs,
+  GEN1,
+  GEN2,
+  FLEX,
+} from '@opentrons/shared-data'
+import { Flex } from '../primitives'
+import { Select, CONTEXT_VALUE } from '../forms'
+import styles from './PipetteSelect.module.css'
+import type { PipetteNameSpecs } from '@opentrons/shared-data'
+import type { ActionMeta, SingleValue, MultiValue } from 'react-select'
+import type { SelectOption } from '../forms'
+export interface PipetteSelectProps {
+  /** currently selected value, optional in case selecting triggers immediate action */
+  pipetteName?: string | null
+  /** react-select change handler */
+  onPipetteChange: (
+    pipetteName: string | null,
+    e: ActionMeta<SelectOption>
+  ) => void
+  /** list of pipette names to omit */
+  nameBlocklist?: string[]
+  /** whether or not "None" shows up as the default option */
+  enableNoneOption?: boolean
+  /** input tabIndex */
+  tabIndex?: string | number
+  /** classes to apply to the top-level component */
+  className?: string
+  /** custom id to be applied. likely to be used as a data test id for e2e testing */
+  id?: string
+  disabled?: boolean
+}
+
+// TODO(mc, 2019-10-14): i18n
+const NONE = 'None'
+const OPTION_NONE = { value: '', label: NONE }
+
+const PIPETTE_SORT = ['maxVolume', 'channels'] as const
+
+// @ts-expect-error(mc, 2021-04-27): use TS type guard for filter
+const allPipetteNameSpecs: PipetteNameSpecs[] = getAllPipetteNames(
+  ...PIPETTE_SORT
+)
+  .map(getPipetteNameSpecs)
+  .filter(Boolean)
+
+const specsByCategory = groupBy(allPipetteNameSpecs, 'displayCategory')
+
+const specToOption = ({
+  name,
+  displayName,
+}: PipetteNameSpecs): { value: string; label: string } => ({
+  value: name,
+  label: displayName,
+})
+
+export const PipetteSelect = (props: PipetteSelectProps): JSX.Element => {
+  const {
+    tabIndex,
+    className,
+    enableNoneOption,
+    id,
+    nameBlocklist = [],
+    disabled = false,
+  } = props
+  const allowlist = ({ value }: SelectOption): boolean => {
+    return !nameBlocklist.some(n => n === value)
+  }
+  const flexOptions = specsByCategory[FLEX].map(specToOption).filter(allowlist)
+  const gen2Options = specsByCategory[GEN2].map(specToOption).filter(allowlist)
+  const gen1Options = specsByCategory[GEN1].map(specToOption).filter(allowlist)
+  const groupedOptions = [
+    ...(enableNoneOption ? [OPTION_NONE] : []),
+    ...(flexOptions.length > 0 ? [{ options: flexOptions }] : []),
+    ...(gen2Options.length > 0 ? [{ options: gen2Options }] : []),
+    ...(gen1Options.length > 0 ? [{ options: gen1Options }] : []),
+  ]
+  const defaultValue = enableNoneOption ? OPTION_NONE : null
+  const value =
+    allPipetteNameSpecs
+      .filter(s => s.name === props.pipetteName)
+      .map(specToOption)[0] || defaultValue
+
+  return (
+    <Select
+      isSearchable={false}
+      menuPosition="fixed"
+      className={className}
+      options={groupedOptions}
+      value={value}
+      isDisabled={disabled}
+      defaultValue={defaultValue}
+      tabIndex={tabIndex as number}
+      id={id}
+      onChange={(
+        option: SingleValue<SelectOption> | MultiValue<SelectOption>,
+        e: ActionMeta<SelectOption>
+      ) => {
+        const value = (option as SelectOption).value
+          ? (option as SelectOption).value
+          : null
+        props.onPipetteChange(value, e)
+      }}
+      formatOptionLabel={(option, { context }) => {
+        const { value } = option
+        const label = option.label || value
+        const specs = allPipetteNameSpecs.find(s => s.name === value)
+
+        return context === CONTEXT_VALUE || value === '' || !specs ? (
+          label
+        ) : (
+          <PipetteNameItem {...specs} />
+        )
+      }}
+    />
+  )
+}
+
+const PipetteNameItem = (props: PipetteNameSpecs): JSX.Element => {
+  const { channels, name, displayCategory } = props
+  const volumeClassMaybeMatch = name && name.match(/p(\d+)/i)
+  const volumeClass = volumeClassMaybeMatch ? volumeClassMaybeMatch[1] : ''
+  let displayChannels = ''
+  if (channels === 1) {
+    displayChannels = 'Single-Channel'
+  } else if (channels === 8) {
+    displayChannels = '8-Channel'
+  } else if (channels === 96) {
+    displayChannels = '96-Channel'
+  }
+  return (
+    <Flex
+      data-test={dataIdFormat(
+        'PipetteNameItem',
+        volumeClass,
+        channels,
+        displayCategory
+      )}
+    >
+      <div className={styles.pipette_volume_class}>{volumeClass}</div>
+      <div className={styles.pipette_channels}>{displayChannels}</div>
+      <div className={styles.pipette_category}>
+        {channels === 96 ? 'FLEX' : displayCategory}
+      </div>
+    </Flex>
+  )
+}
+
+const dataIdFormat = (
+  componentName: string,
+  volumeClass: string,
+  channels: number,
+  displayCategory: string
+): string => {
+  let dataIdFormatChannels
+  if (channels === 1) {
+    dataIdFormatChannels = 'SingleChannel'
+  } else if (channels === 8) {
+    dataIdFormatChannels = 'MultiChannel'
+  } else {
+    dataIdFormatChannels = '96-Channel'
+  }
+  const dataIdFormatVolumeClass = volumeClass.toLowerCase()
+  const dataIdFormatDisplayCategory =
+    displayCategory.charAt(0) + displayCategory.slice(1).toLowerCase()
+
+  return `${componentName}_${dataIdFormatVolumeClass}${dataIdFormatChannels}${dataIdFormatDisplayCategory}`
+}

package/src/instrument/__tests__/InstrumentInfo.test.tsx

@@ -0,0 +1,56 @@
+import { screen } from '@testing-library/react'
+import { describe, beforeEach, it, vi } from 'vitest'
+import { LEFT, RIGHT, fixtureP1000SingleV2Specs } from '@opentrons/shared-data'
+import { renderWithProviders } from '../../testing/utils'
+import { InstrumentInfo } from '../InstrumentInfo'
+import { InstrumentDiagram } from '../InstrumentDiagram'
+
+import type { ComponentProps } from 'react'
+
+vi.mock('../InstrumentDiagram')
+
+const render = (props: ComponentProps<typeof InstrumentInfo>) => {
+  return renderWithProviders(<InstrumentInfo {...props} />)[0]
+}
+
+describe('InstrumentInfo', () => {
+  let props: ComponentProps<typeof InstrumentInfo>
+
+  beforeEach(() => {
+    props = {
+      mount: LEFT,
+      description: 'mock description',
+      pipetteSpecs: fixtureP1000SingleV2Specs,
+      tiprackModels: ['mock1', 'mock2'],
+      showMountLabel: true,
+    }
+    vi.mocked(InstrumentDiagram).mockReturnValue(
+      <div>mock instrumentDiagram</div>
+    )
+  })
+  it('renders a p1000 pipette with 2 tiprack models for left mount', () => {
+    render(props)
+    screen.getByText('mock instrumentDiagram')
+    screen.getByText('left pipette')
+    screen.getByText('mock description')
+    screen.getByText('Tip rack')
+    screen.getByText('mock1')
+    screen.getByText('mock2')
+  })
+  it('renders a p1000 pipette with 1 tiprack model for right mount', () => {
+    props.mount = RIGHT
+    props.tiprackModels = ['mock1']
+    render(props)
+    screen.getByText('mock instrumentDiagram')
+    screen.getByText('right pipette')
+    screen.getByText('mock description')
+    screen.getByText('Tip rack')
+    screen.getByText('mock1')
+  })
+  it('renders none for pip and tiprack if none are selected', () => {
+    props.pipetteSpecs = undefined
+    props.tiprackModels = undefined
+    render(props)
+    screen.getByText('None')
+  })
+})

package/src/instrument/__tests__/PipetteSelect.test.tsx

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

package/src/instrument/index.ts

@@ -0,0 +1,4 @@
+export * from './InstrumentDiagram'
+export * from './InstrumentGroup'
+export * from './InstrumentInfo'
+export * from './PipetteSelect'

package/src/instrument/instrument.module.css

@@ -0,0 +1,45 @@
+@import '@opentrons/components/styles';
+
+.pipette_group {
+  margin: 0 auto;
+  max-width: 46rem;
+  padding-bottom: 2rem;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-areas: 'left right';
+}
+
+.right {
+  grid-area: right;
+  grid-template-columns: 40% 80%;
+  grid-template-areas: 'img info';
+}
+
+.pipette_info {
+  grid-area: info;
+  min-height: 8rem;
+}
+
+.flipped_image {
+  transform: scaleX(-1);
+  filter: FlipH;
+}
+
+.pipette_icon {
+  grid-area: img;
+  text-align: center;
+}
+
+.title {
+  font-size: var(--fs-body-2);
+  font-weight: var(--fw-semibold);
+  color: var(--c-font-dark);
+  text-transform: capitalize;
+  margin: 2rem 0 0.25rem;
+}
+
+.value {
+  font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+}

package/src/interaction-enhancers/ClickOutside.ts

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

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

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

package/src/interaction-enhancers/index.ts

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