@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.20

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/index.ts

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

package/src/interaction-enhancers/ClickOutside.ts

@@ -0,0 +1,57 @@
+import * as React from 'react'
+
+interface ClickOutsideChildParams {
+  ref: React.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 React.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,69 @@
+import * as React 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?: React.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 React.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/index.ts

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

package/src/interaction-enhancers/useHover.ts

@@ -0,0 +1,84 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+
+export interface UseHoverOptions {
+  enterDelay?: number
+  leaveDelay?: number
+}
+
+export interface HoverHandlers {
+  onPointerEnter: () => unknown
+  onPointerLeave: () => unknown
+}
+
+export type UseHoverResult = [boolean, HoverHandlers]
+
+/**
+ * Hook to track hover state of an element
+ *
+ * @param {UseHoverOptions} [options={}] (add an `enterDelay` or `leaveDelay` to the hover state change)
+ * @returns {UseHoverResult}
+ * @example
+ * ```js
+ * import { useHover } from '@opentrons/components'
+ *
+ * export function HoverComponent() {
+ *   const [hovered, hoverHandlers] = useHover({
+ *     enterDelay: 300,
+ *     leaveDelay: 100
+ *   })
+ *
+ *   return (
+ *     <span {...hoverHandlers}>
+ *       {hovered ? 'Hovered!' : 'Not hovered!'}
+ *     </span>
+ *   )
+ * }
+ * ```
+ */
+export function useHover(options: UseHoverOptions = {}): UseHoverResult {
+  const { enterDelay, leaveDelay } = options
+  const [hovered, setHovered] = useState(false)
+  const timeoutRef = useRef<number>()
+
+  const handleHoverChange = useCallback(
+    (value: boolean, delay: number | undefined) => {
+      clearTimeout(timeoutRef.current)
+      if (delay) {
+        timeoutRef.current = setTimeout(
+          // TODO(mc, 2021-03-08): use window.setTimeout or a separate const
+          // for the handler to tell TS that we're using DOM setTimeout, not Node.js
+          // eslint-disable-next-line @typescript-eslint/no-implied-eval
+          (() => {
+            setHovered(value)
+          }) as TimerHandler,
+          delay
+        )
+      } else {
+        setHovered(value)
+      }
+    },
+    []
+  )
+
+  const handlers = useMemo(
+    () => ({
+      onPointerEnter: () => {
+        handleHoverChange(true, enterDelay)
+      },
+      onPointerLeave: () => {
+        handleHoverChange(false, leaveDelay)
+      },
+    }),
+    [handleHoverChange, enterDelay, leaveDelay]
+  )
+
+  // cleanup timeout on unmount
+  useEffect(
+    () => () => {
+      clearTimeout(timeoutRef.current)
+    },
+    []
+  )
+
+  return [hovered, handlers]
+}

package/src/interaction-enhancers/useOnClickOutside.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react'
+
+import type { RefObject } from 'react'
+
+export interface UseOnClickOutsideOptions {
+  onClickOutside?: (e: MouseEvent) => unknown
+}
+
+export const useOnClickOutside = <E extends Element>(
+  options: UseOnClickOutsideOptions
+): RefObject<E> => {
+  const { onClickOutside } = options
+  const node = useRef<E>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent): void => {
+      const clickedElem = event.target
+
+      console.assert(
+        clickedElem instanceof Node,
+        'expected clicked element to be Node - something went wrong in onClickOutside hook'
+      )
+
+      if (
+        onClickOutside != null &&
+        node != null &&
+        node.current != null &&
+        node.current.contains != null &&
+        !node.current.contains(clickedElem as Node)
+      ) {
+        onClickOutside(event)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [onClickOutside])
+
+  return node
+}

package/src/legacy-hardware-sim/LabwareNameOverlay.tsx

@@ -0,0 +1,22 @@
+import cx from 'classnames'
+import styles from './LabwareNameOverlay.module.css'
+
+export interface LabwareNameOverlayProps {
+  title: string
+  subtitle?: string | null | undefined
+  className?: string
+}
+
+/** @deprecated use LabwareDisplayName or custom RobotCoordsForeignDiv */
+export function LabwareNameOverlay(
+  props: LabwareNameOverlayProps
+): JSX.Element {
+  const { title, subtitle, className } = props
+
+  return (
+    <div className={cx(styles.name_overlay, className)}>
+      <p className={styles.display_name}> {title} </p>
+      {subtitle && <p>{subtitle}</p>}
+    </div>
+  )
+}

package/src/legacy-hardware-sim/ModuleItem.tsx

@@ -0,0 +1,145 @@
+import cx from 'classnames'
+
+import {
+  getModuleDisplayName,
+  MAGNETIC_MODULE_V1,
+  MAGNETIC_MODULE_V2,
+  TEMPERATURE_MODULE_V1,
+  TEMPERATURE_MODULE_V2,
+  THERMOCYCLER_MODULE_V1,
+} from '@opentrons/shared-data'
+
+import { Icon } from '../icons'
+import { RobotCoordsForeignDiv } from '../hardware-sim/Deck'
+import styles from './ModuleItem.module.css'
+
+import type { IconName } from '../icons'
+import type { ModuleModel, DeckSlot } from '@opentrons/shared-data'
+
+const FLIPPED_SLOTS = ['3', '6', '9']
+export interface ModuleProps {
+  /** module model */
+  model: ModuleModel
+  /** display mode: 'default', 'present', 'missing', or 'info' */
+  mode: 'default' | 'present' | 'missing' | 'info'
+  /** slot details of the location of this module */
+  slot: DeckSlot
+  /** USB port detail of the connected module */
+  usbInfoString?: string
+}
+
+/**
+ * Legacy App-specific Module Rendering. Removable after Protocol Upload Revamp release
+ *
+ * @deprecated Use {@link Module}
+ */
+export function ModuleItem(props: ModuleProps): JSX.Element {
+  const { model, slot } = props
+  let x = 0
+  let y = 0
+  let { xDimension: width, yDimension: height } = slot.boundingBox
+  const shouldFlip = FLIPPED_SLOTS.includes(slot.id)
+
+  // TODO: BC 2019-7-23 get these from shared-data module defs, once available
+  switch (model) {
+    case MAGNETIC_MODULE_V1:
+    case MAGNETIC_MODULE_V2: {
+      width = 137
+      height = 91
+      x = -7
+      y = 4
+      break
+    }
+    case TEMPERATURE_MODULE_V1:
+    case TEMPERATURE_MODULE_V2: {
+      width = 196
+      height = 91
+      x = -66
+      y = 4
+      break
+    }
+    case THERMOCYCLER_MODULE_V1: {
+      // TODO: BC 2019-07-24 these are taken from snapshots of the cad file, they should
+      // be included in the module spec schema and added to the data
+      width = 172
+      height = 259.7
+      x = -22.125
+    }
+  }
+
+  return (
+    <RobotCoordsForeignDiv
+      width={width}
+      height={height}
+      x={x}
+      y={y - height}
+      transformWithSVG
+      extraTransform={`rotate(${shouldFlip ? 180 : 0}, ${
+        slot.boundingBox.xDimension / 2
+      }, ${slot.boundingBox.yDimension / -2})`}
+      innerDivProps={{
+        className: cx(styles.module, { [styles.flipped]: shouldFlip }),
+      }}
+    >
+      <ModuleItemContents {...props} shouldFlip={shouldFlip} />
+    </RobotCoordsForeignDiv>
+  )
+}
+
+interface ModuleItemContentsProps extends ModuleProps {
+  shouldFlip: boolean
+}
+
+function ModuleItemContents(props: ModuleItemContentsProps): JSX.Element {
+  const { mode, model, usbInfoString, shouldFlip } = props
+  const displayName = getModuleDisplayName(model)
+
+  const iconClassName = cx(styles.module_review_icon, {
+    [styles.module_review_icon_missing]: mode === 'missing',
+    [styles.module_review_icon_present]: mode === 'present',
+  })
+
+  const iconNameByMode: Record<string, IconName> = {
+    missing: 'alert-circle',
+    present: 'check-circle',
+    info: 'usb',
+    default: 'usb',
+  }
+
+  return (
+    <>
+      <div
+        className={
+          shouldFlip ? styles.flipped_module_wrapper : styles.module_wrapper
+        }
+      >
+        {mode !== 'missing' && usbInfoString && (
+          <p
+            key="usbPortInfo"
+            className={
+              usbInfoString.includes('N/A')
+                ? styles.module_port_text_na
+                : styles.module_port_text
+            }
+          >
+            {usbInfoString}
+          </p>
+        )}
+        <p key="displayName" className={styles.module_review_text}>
+          {displayName}
+        </p>
+        <div className={styles.module_connect_info_wrapper}>
+          <Icon
+            key="icon"
+            className={iconClassName}
+            x="8"
+            y="0"
+            svgWidth="12"
+            name={iconNameByMode[mode] || 'usb'}
+          />
+          <p>{mode === 'missing' ? 'Not connected' : 'Connected'}</p>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './LabwareNameOverlay'
+export * from './ModuleItem' // legacy App module rendering