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

package/src/instrument/InstrumentInfo.tsx

@@ -0,0 +1,106 @@
+import { LEFT, RIGHT } from '@opentrons/shared-data'
+
+import { LegacyStyledText } from '../atoms'
+import { Flex } from '../primitives'
+import { DIRECTION_COLUMN, JUSTIFY_CENTER } from '../styles'
+import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
+import styles from './instrument.module.css'
+import { InstrumentDiagram } from './InstrumentDiagram'
+
+import type { ReactNode } from 'react'
+import type { Mount } from '../robot-types'
+import type { InstrumentDiagramProps } from './InstrumentDiagram'
+
+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/__tests__/InstrumentInfo.test.tsx

@@ -0,0 +1,58 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, it, vi } from 'vitest'
+
+import { fixtureP1000SingleV2Specs, LEFT, RIGHT } from '@opentrons/shared-data'
+
+import { renderWithProviders } from '../../testing/utils'
+import { InstrumentDiagram } from '../InstrumentDiagram'
+import { InstrumentInfo } from '../InstrumentInfo'
+
+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/index.ts

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

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,59 @@
+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,72 @@
+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,5 @@
+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'

package/src/interaction-enhancers/useHover.ts

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useMemo, useRef, useState } 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.module.css

@@ -0,0 +1,20 @@
+@import '../index.module.css';
+
+.name_overlay {
+  width: 100%;
+  font-size: 0.5rem;
+  color: var(--c-font-light);
+  background-color: color-mod(var(--c-black) alpha(0.75));
+  padding: 0.25rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.display_name {
+  font-weight: var(--fw-semibold);
+  color: var(--c-font-light);
+  overflow-wrap: break-word;
+}
+
+.deck_slot:active {
+  cursor: grabbing;
+}

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

@@ -0,0 +1,23 @@
+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.module.css

@@ -0,0 +1,98 @@
+@import '@opentrons/components/styles';
+
+.module {
+  color: var(--c-black);
+  background-color: var(--c-black);
+  opacity: 0.9;
+  border-radius: 6px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.module_review_icon {
+  color: var(--c-white);
+  margin: 0 0.25rem 0 0;
+  height: 12px;
+  width: 12px;
+}
+
+.module_review_icon_missing {
+  color: var(--c-red);
+}
+
+.module_review_icon_present {
+  color: var(--c-green);
+}
+
+.module_review_text {
+  fill: currentColor;
+  font-size: 0.55rem;
+  font-weight: var(--fw-semibold);
+  color: var(--c-white);
+  text-transform: capitalize;
+  white-space: pre;
+  margin-bottom: 0.75rem;
+}
+
+.module_name_overlay {
+  color: var(--c-black);
+  opacity: 0.7;
+}
+
+.module_connect_info_wrapper {
+  display: flex;
+  flex-direction: row;
+  font-size: 0.5rem;
+  color: var(--c-white);
+}
+
+.module_port_text {
+  fill: currentColor;
+  color: var(--c-white);
+  font-size: 0.65rem;
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+}
+
+.module_port_text_na {
+  fill: currentColor;
+  color: var(--c-med-gray);
+  font-size: 0.65rem;
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+}
+
+.module_wrapper {
+  display: flex;
+  width: 100%;
+  padding: 1.15rem;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.flipped_module_wrapper {
+  display: flex;
+  width: 100%;
+  padding: 1.15rem;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.module_name_text {
+  fill: currentColor;
+  color: var(--c-white);
+  font-size: 0.5rem;
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
+}
+
+.flipped {
+  transform: rotate(180deg);
+}
+
+.right_icon {
+  margin: 0 0 0 1rem;
+}