@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.18

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.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,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.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;
+}

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

package/src/lists/SidePanelGroup.tsx

@@ -0,0 +1,48 @@
+// SidePanelGroup component
+import type * as React from 'react'
+import cx from 'classnames'
+
+import styles from './lists.module.css'
+import { Icon } from '../icons'
+
+import type { IconName } from '../icons'
+
+// TODO(bc, 2021-03-31): this component is only used in one place
+// reconsider whether it belongs in components library
+export interface SidePanelGroupProps {
+  /** text of title */
+  title?: string
+  /** optional icon left of the title */
+  iconName?: IconName
+  /** children, most likely one or more TitledList */
+  children?: React.ReactNode
+  /** additional classnames */
+  className?: string
+  /** disables the whole SidePanelGroup if true */
+  disabled?: boolean
+}
+
+/**
+ * A component for grouping and titling multiple lists
+ */
+export function SidePanelGroup(props: SidePanelGroupProps): JSX.Element {
+  const { iconName, disabled } = props
+
+  const className = cx(styles.panel_group, props.className, {
+    [styles.disabled]: disabled,
+  })
+
+  return (
+    <div className={className}>
+      {props.title && (
+        <div className={styles.title_bar}>
+          {iconName && (
+            <Icon className={styles.title_bar_icon} name={iconName} />
+          )}
+          <h2 className={styles.title}>{props.title}</h2>
+        </div>
+      )}
+      {props.children}
+    </div>
+  )
+}

package/src/lists/TitledList.tsx

@@ -0,0 +1,155 @@
+// TitledList component
+import * as React from 'react'
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import { LegacyStyledText } from '../atoms'
+import { COLORS } from '../helix-design-system'
+import type { IconName, IconProps } from '../icons'
+
+import styles from './lists.module.css'
+
+// TODO(bc, 2021-03-31): reconsider whether this belongs in components library
+// it is bloated with application specific functionality
+
+export interface TitledListProps {
+  /** id attribute */
+  id?: string
+  /** text of title */
+  title: string
+  /** optional icon left of the title */
+  iconName?: IconName | null | undefined
+  /** props passed down to icon (`className` and `name` are ignored) */
+  iconProps?: Omit<IconProps, 'name'>
+  /** optional data test id for the container */
+  'data-test'?: string
+  // TODO(mc, 2018-01-25): enforce <li> children requirement with flow
+  /** children must all be `<li>` */
+  children?: React.ReactNode
+  /** additional classnames */
+  className?: string
+  /** component with descriptive text about the list */
+  description?: React.ReactNode
+  /** optional click action (on title div, not children) */
+  onClick?: (event: React.MouseEvent) => unknown
+  /** optional right click action (on wrapping div) */
+  onContextMenu?: (event: React.MouseEvent) => unknown
+  /** optional mouseEnter action */
+  onMouseEnter?: (event: React.MouseEvent) => unknown
+  /** optional mouseLeave action */
+  onMouseLeave?: (event: React.MouseEvent) => unknown
+  /** caret click action; if defined, list is expandable and carat is visible */
+  onCollapseToggle?: (event: React.MouseEvent) => unknown
+  /** collapse the list if true (false by default) */
+  collapsed?: boolean
+  /** set to true when TitledList is selected (eg, user clicked it) */
+  selected?: boolean
+  /** set to true when TitledList is hovered (but not when its contents are hovered) */
+  hovered?: boolean
+  /** disables the whole TitledList if true */
+  disabled?: boolean
+  /** appear disabled, but preserve collapsibility */
+  inert?: boolean
+}
+
+/**
+ * An ordered list with optional title, icon, and description.
+ */
+export function TitledList(props: TitledListProps): JSX.Element {
+  const {
+    id,
+    iconName,
+    disabled,
+    inert,
+    'data-test': dataTest,
+    onCollapseToggle,
+    iconProps,
+    onMouseEnter,
+    onMouseLeave,
+    onContextMenu,
+  } = props
+  const collapsible = onCollapseToggle != null
+
+  const onClick = !disabled ? props.onClick : undefined
+
+  // clicking on the carat will not call props.onClick,
+  // so prevent bubbling up if there is an onCollapseToggle fn
+  const handleCollapseToggle = (e: React.MouseEvent): void => {
+    if (onCollapseToggle && !disabled) {
+      e.stopPropagation()
+      onCollapseToggle(e)
+    }
+  }
+
+  const hasValidChildren = React.Children.toArray(props.children).some(
+    child => child
+  )
+
+  const className = cx(styles.titled_list, props.className, {
+    [styles.disabled]: disabled || inert,
+    [styles.titled_list_selected]: !disabled && props.selected,
+    [styles.hover_border]: !disabled && props.hovered,
+  })
+  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
+  const titleBarClass = cx(styles.titled_list_title_bar, {
+    [styles.clickable]: props.onClick,
+  })
+
+  const iconClass = cx(
+    styles.title_bar_icon,
+    styles.icon_left_of_title,
+    iconProps && iconProps.className
+  )
+
+  let textColor = ''
+  if (disabled) {
+    //  the below hex code is for our legacy --c-font-disabled to match other text colors
+    textColor = '#9c9c9c'
+  } else if (props.selected && !disabled) {
+    //  the below hex code is for our legacy --c-highlight to match other text colors
+    textColor = '#5fd8ee'
+  }
+
+  return (
+    <div
+      id={id}
+      className={className}
+      data-test={dataTest}
+      {...{ onMouseEnter, onMouseLeave, onContextMenu }}
+    >
+      <div onClick={onClick} className={titleBarClass}>
+        {iconName && (
+          <Icon {...iconProps} className={iconClass} name={iconName} />
+        )}
+        <LegacyStyledText
+          as="h3"
+          backgroundColor={COLORS.white}
+          color={textColor}
+        >
+          {props.title}
+        </LegacyStyledText>
+        {collapsible && (
+          <div
+            onClick={handleCollapseToggle}
+            className={styles.title_bar_carat}
+          >
+            <Icon
+              className={styles.title_bar_icon}
+              name={
+                props.selected
+                  ? 'chevron-right'
+                  : props.collapsed
+                  ? 'chevron-down'
+                  : 'chevron-up'
+              }
+            />
+          </div>
+        )}
+      </div>
+      {!props.collapsed && props.description}
+      {!props.collapsed && hasValidChildren && (
+        <ol className={styles.list}>{props.children}</ol>
+      )}
+    </div>
+  )
+}

package/src/lists/index.ts

@@ -0,0 +1,3 @@
+// list and list item components
+export * from './SidePanelGroup'
+export * from './TitledList'