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

package/src/instrument/InstrumentInfo.tsx

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

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

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

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

package/src/instrument/instrument.module.css

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

@@ -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'

package/src/interaction-enhancers/useHover.ts

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

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

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

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

@@ -1,98 +0,0 @@
-@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;
-}