@opentrons/components 0.1.6-alpha.15 → 0.1.6-alpha.17

package/src/hooks/useSelectDeckLocation/index.tsx

@@ -0,0 +1,331 @@
+import { useState, Fragment } from 'react'
+import isEqual from 'lodash/isEqual'
+import { useTranslation } from 'react-i18next'
+import {
+  FLEX_CUTOUT_BY_SLOT_ID,
+  FLEX_SINGLE_SLOT_BY_CUTOUT_ID,
+  FLEX_ROBOT_TYPE,
+  getDeckDefFromRobotType,
+  getPositionFromSlotId,
+  getFixtureDisplayName,
+  isAddressableAreaStandardSlot,
+  OT2_ROBOT_TYPE,
+} from '@opentrons/shared-data'
+import {
+  DeckFromLayers,
+  LegacyDeckSlotLocation,
+  OT2_FIXED_TRASH_X_DIMENSION,
+  OT2_FIXED_TRASH_Y_DIMENSION,
+  RobotCoordinateSpace,
+  RobotCoordsForeignDiv,
+  SingleSlotFixture,
+  SlotLabels,
+} from '../../hardware-sim'
+import { Icon } from '../../icons'
+import { Text } from '../../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+
+import type {
+  CutoutConfig,
+  AddressableArea,
+  CoordinateTuple,
+  CutoutFixtureId,
+  DeckDefinition,
+  ModuleLocation,
+  RobotType,
+} from '@opentrons/shared-data'
+
+export type DeckLocationSelectThemes = 'default' | 'grey'
+
+const X_CROP_MM = 0
+const X_ADJUSTMENT_FOR_TC = '-50'
+const Y_ADJUSTMENT_FOR_TC = '214'
+
+const OT2_DECK_LOCATION_SELECT_LAYER_BLOCK_LIST: string[] = [
+  'calibrationMarkings',
+  'fixedBase',
+  'doorStops',
+  'metalFrame',
+  'removalHandle',
+  'removableDeckOutline',
+  'screwHoles',
+  'slotNumbers',
+]
+
+export function useDeckLocationSelect(
+  robotType: RobotType,
+  theme?: DeckLocationSelectThemes
+): { DeckLocationSelect: JSX.Element; selectedLocation: ModuleLocation } {
+  const deckDef = getDeckDefFromRobotType(robotType)
+  const [selectedLocation, setSelectedLocation] = useState<ModuleLocation>({
+    slotName: deckDef.locations.addressableAreas[0].id,
+  })
+  return {
+    DeckLocationSelect: (
+      <DeckLocationSelect
+        {...{ deckDef, selectedLocation, setSelectedLocation, theme }}
+      />
+    ),
+    selectedLocation,
+  }
+}
+
+interface DeckLocationSelectProps {
+  deckDef: DeckDefinition
+  selectedLocation: ModuleLocation
+  theme?: DeckLocationSelectThemes
+  setSelectedLocation?: (loc: ModuleLocation) => void
+  availableSlotNames?: string[]
+  occupiedCutouts?: CutoutConfig[]
+  isThermocycler?: boolean
+  showTooltipOnDisabled?: boolean
+}
+
+export function DeckLocationSelect({
+  deckDef,
+  selectedLocation,
+  setSelectedLocation,
+  availableSlotNames,
+  occupiedCutouts = [],
+  theme = 'default',
+  isThermocycler = false,
+  showTooltipOnDisabled = false,
+}: DeckLocationSelectProps): JSX.Element {
+  const robotType = deckDef.robot.model
+
+  const { t } = useTranslation('module_wizard_flows')
+
+  const [hoveredData, setHoveredData] = useState<{
+    slot: AddressableArea
+    slotPosition: CoordinateTuple | null
+    isDisabled: boolean
+    disabledReason?: CutoutFixtureId | null
+  } | null>(null)
+
+  const handleMouseEnter = (
+    slot: AddressableArea,
+    slotPosition: CoordinateTuple | null,
+    isDisabled: boolean,
+    disabledReason?: CutoutFixtureId | null
+  ): void => {
+    if (isDisabled) {
+      setHoveredData({
+        slot,
+        slotPosition,
+        isDisabled,
+        disabledReason,
+      })
+    } else {
+      setHoveredData(null)
+    }
+  }
+
+  const handleMouseLeave = (): void => {
+    setHoveredData(null)
+  }
+
+  return (
+    <RobotCoordinateSpace
+      viewBox={`${deckDef.cornerOffsetFromOrigin[0] + X_CROP_MM} ${
+        deckDef.cornerOffsetFromOrigin[1]
+      } ${deckDef.dimensions[0] - X_CROP_MM * 2} ${deckDef.dimensions[1]}`}
+    >
+      {deckDef.locations.addressableAreas
+        // only render standard slot fixture components
+        .filter(
+          addressableArea =>
+            isAddressableAreaStandardSlot(addressableArea.id, deckDef) ||
+            // special case the OT-2 trash addressable area
+            addressableArea.id === 'fixedTrash'
+        )
+        .map(slot => {
+          const slotLocation = { slotName: slot.id }
+          const isDisabled =
+            availableSlotNames !== undefined
+              ? !availableSlotNames.some(slotName => slotName === slot.id)
+              : false
+
+          const disabledReason =
+            occupiedCutouts.find(
+              cutout =>
+                FLEX_SINGLE_SLOT_BY_CUTOUT_ID[cutout.cutoutId] === slot.id
+            )?.cutoutFixtureId ?? null
+          const isSelected = isEqual(selectedLocation, slotLocation)
+          let fill = theme === 'default' ? COLORS.purple35 : COLORS.grey35
+          if (isSelected)
+            fill = theme === 'default' ? COLORS.purple50 : COLORS.grey50
+          if (isDisabled) fill = COLORS.grey30
+          if (isSelected && slot.id === 'B1' && isThermocycler) {
+            return (
+              <g key="thermocyclerSelectionArea">
+                <path
+                  fill={fill}
+                  d="M-97.8,496.6h239c2.3,0,4.2-1.9,4.2-4.2v-282c0-2.3-1.9-4.2-4.2-4.2h-239c-2.3,0-4.2,1.9-4.2,4.2v282 C-102,494.7-100.1,496.6-97.8,496.6z"
+                />
+                <RobotCoordsForeignDiv
+                  x={X_ADJUSTMENT_FOR_TC}
+                  y={Y_ADJUSTMENT_FOR_TC}
+                  width={slot.boundingBox.xDimension}
+                  height="282"
+                  innerDivProps={INNER_DIV_PROPS}
+                >
+                  <Icon
+                    name="check-circle"
+                    size="1.5rem"
+                    color={COLORS.white}
+                  />
+                  <Text color={COLORS.white} fontSize="1.5rem">
+                    Selected
+                  </Text>
+                </RobotCoordsForeignDiv>
+              </g>
+            )
+          } else if (slot.id === 'A1' && isThermocycler) {
+            return null
+          }
+
+          const slotPosition = getPositionFromSlotId(slot.id, deckDef)
+          const cutoutId = FLEX_CUTOUT_BY_SLOT_ID[slot.id]
+
+          return (
+            <Fragment key={slot.id}>
+              {robotType === FLEX_ROBOT_TYPE ? (
+                <>
+                  <SingleSlotFixture
+                    cutoutId={cutoutId}
+                    fixtureBaseColor={fill}
+                    slotClipColor={COLORS.white}
+                    onClick={() => {
+                      if (!isDisabled && setSelectedLocation != null)
+                        setSelectedLocation(slotLocation)
+                    }}
+                    cursor={
+                      setSelectedLocation == null || isDisabled || isSelected
+                        ? 'default'
+                        : 'pointer'
+                    }
+                    deckDefinition={deckDef}
+                    onMouseEnter={() => {
+                      handleMouseEnter(
+                        slot,
+                        slotPosition,
+                        isDisabled,
+                        disabledReason
+                      )
+                    }}
+                    onMouseLeave={handleMouseLeave}
+                  />
+                </>
+              ) : (
+                <LegacyDeckSlotLocation
+                  robotType={robotType}
+                  slotBaseColor={fill}
+                  slotName={slot.id}
+                  slotClipColor={COLORS.white}
+                  onClick={() => {
+                    if (!isDisabled && setSelectedLocation != null)
+                      setSelectedLocation(slotLocation)
+                  }}
+                  cursor={
+                    setSelectedLocation == null || isDisabled || isSelected
+                      ? 'default'
+                      : 'pointer'
+                  }
+                />
+              )}
+              {isSelected && slotPosition != null ? (
+                <RobotCoordsForeignDiv
+                  x={slotPosition[0] - slot.offsetFromCutoutFixture[0]}
+                  y={slotPosition[1] - slot.offsetFromCutoutFixture[1]}
+                  width={
+                    slot.id === 'fixedTrash'
+                      ? OT2_FIXED_TRASH_X_DIMENSION
+                      : slot.boundingBox.xDimension
+                  }
+                  height={
+                    slot.id === 'fixedTrash'
+                      ? OT2_FIXED_TRASH_Y_DIMENSION
+                      : slot.boundingBox.yDimension
+                  }
+                  innerDivProps={INNER_DIV_PROPS}
+                >
+                  <Text
+                    color={COLORS.white}
+                    css={
+                      robotType === FLEX_ROBOT_TYPE
+                        ? TYPOGRAPHY.level4HeaderSemiBold
+                        : TYPOGRAPHY.bodyTextSemiBold
+                    }
+                  >
+                    Selected
+                  </Text>
+                </RobotCoordsForeignDiv>
+              ) : null}
+            </Fragment>
+          )
+        })}
+      {robotType === OT2_ROBOT_TYPE ? (
+        <DeckFromLayers
+          robotType={robotType}
+          layerBlocklist={OT2_DECK_LOCATION_SELECT_LAYER_BLOCK_LIST}
+        />
+      ) : null}
+      <SlotLabels robotType={robotType} color={COLORS.grey50} />
+      {hoveredData != null &&
+        hoveredData.isDisabled &&
+        hoveredData.slotPosition != null &&
+        showTooltipOnDisabled && (
+          <RobotCoordsForeignDiv
+            x={
+              hoveredData.slot.id === 'A3'
+                ? hoveredData.slotPosition[0] - 50
+                : hoveredData.slotPosition[0] - 20
+            }
+            y={
+              hoveredData.slotPosition[1] +
+              hoveredData.slot.boundingBox.yDimension +
+              10
+            }
+            innerDivProps={
+              hoveredData.slot.id[0] === 'A'
+                ? {
+                    maxWidth: '25rem',
+                    maxHeight: '10rem',
+                    width: 'fit-content',
+                  }
+                : {
+                    maxWidth: '20rem',
+                    width: 'fit-content',
+                  }
+            }
+          >
+            <Text
+              color={COLORS.white}
+              fontSize="1.5rem"
+              backgroundColor={COLORS.black90}
+              padding={SPACING.spacing8}
+              borderRadius="3px"
+            >
+              {hoveredData.disabledReason != null
+                ? t('location_occupied', {
+                    fixture: getFixtureDisplayName(
+                      hoveredData.disabledReason
+                    ).toLowerCase(),
+                  })
+                : 'Slot unavailable'}
+            </Text>
+          </RobotCoordsForeignDiv>
+        )}
+    </RobotCoordinateSpace>
+  )
+}
+
+const INNER_DIV_PROPS = {
+  display: 'flex',
+  alignItems: ALIGN_CENTER,
+  justifyContent: JUSTIFY_CENTER,
+  height: '100%',
+  gridGap: SPACING.spacing4,
+}

package/src/hooks/useSwipe.ts

@@ -0,0 +1,86 @@
+import { useState, useEffect, useRef } from 'react'
+import interact from 'interactjs'
+import type { MutableRefObject, CSSProperties } from 'react'
+
+interface UseSwipeResult {
+  ref: MutableRefObject<null>
+  style: CSSProperties
+  isEnabled: boolean
+  setSwipeType: (value: string) => void
+  swipeType: string
+  enable: () => void
+  disable: () => void
+}
+
+export const useSwipe = (): UseSwipeResult => {
+  const [swipeType, setSwipeType] = useState<string>('')
+  const [isEnabled, setIsEnabled] = useState<boolean>(true)
+  const interactiveRef = useRef(null)
+  const THRESHOLD = 50
+  let startX = 0
+  let startY = 0
+
+  const enable = (): void => {
+    if (interactiveRef.current != null) {
+      interact(interactiveRef.current).draggable({
+        inertia: false,
+        modifiers: [],
+        autoScroll: false,
+        listeners: {
+          start(event) {
+            startX = event.clientX
+            startY = event.clientY
+          },
+          // Note (kk:07/11/2024) want to keep this for debugging
+          // move(event) {
+          //   console.log('Drag move:', event.clientX, event.clientY)
+          // },
+          end(event) {
+            const dx = event.clientX - startX
+            const dy = event.clientY - startY
+            const absX = Math.abs(dx)
+            const absY = Math.abs(dy)
+
+            if (absX > absY && absX > THRESHOLD) {
+              setSwipeType(dx > 0 ? 'swipe-right' : 'swipe-left')
+            } else if (absY > absX && absY > THRESHOLD) {
+              setSwipeType(dy > 0 ? 'swipe-down' : 'swipe-up')
+            }
+          },
+        },
+      })
+    }
+  }
+
+  const disable = (): void => {
+    if (interactiveRef.current != null) {
+      interact((interactiveRef.current as unknown) as HTMLElement).unset()
+    }
+  }
+
+  useEffect(() => {
+    if (isEnabled) {
+      enable()
+    } else {
+      disable()
+    }
+    return disable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEnabled])
+
+  return {
+    ref: interactiveRef,
+    style: {
+      touchAction: 'none',
+    },
+    isEnabled,
+    setSwipeType,
+    swipeType,
+    enable: () => {
+      setIsEnabled(true)
+    },
+    disable: () => {
+      setIsEnabled(false)
+    },
+  }
+}

package/src/hooks/useTimeout.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * React hook to call a function after a delay; adapted from: useInterval
+ *
+ * @template T (type of the input value)
+ * @param {() => unknown} callback (function to call after timeout)
+ * @param {number | null} delay (timeout delay, or null to disable the timeout)
+ * @returns {void}
+ */
+export function useTimeout(
+  callback: () => unknown,
+  delay: number | null
+): void {
+  const savedCallback = useRef<() => unknown>()
+
+  // remember the latest callback
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  // set up the timeout
+  useEffect(() => {
+    const currentCallback = (): unknown =>
+      savedCallback.current != null && savedCallback.current()
+    if (delay !== null) {
+      const id = setTimeout(currentCallback, delay)
+      return () => {
+        clearTimeout(id)
+      }
+    }
+  }, [delay])
+}

package/src/hooks/useToggle.ts

@@ -0,0 +1,27 @@
+import { useReducer } from 'react'
+
+export type UseToggleResult = [boolean, () => void]
+
+/**
+ * React hook to toggle a boolean value
+ *
+ * @param {boolean} [intialValue=false] (initial toggle value)
+ * @returns {[boolean, () => void]} (value and setValue tuple)
+ *
+ * @example
+ * import * as React from 'react'
+ * import { useToggle } from '@opentrons/components'
+ *
+ * export function ToggleButton() {
+ *   const [enabled, toggleEnabled] = useToggle(true)
+ *
+ *   return (
+ *     <button onClick={toggleEnabled}>
+ *       Setting is {enabled ? 'enabled' : 'disabled'}
+ *     </button>
+ *   )
+ * }
+ */
+export function useToggle(initialValue: boolean = false): UseToggleResult {
+  return useReducer(value => !value, initialValue)
+}

package/src/icons/Icon.stories.tsx

@@ -0,0 +1,37 @@
+import { Flex } from '../primitives'
+import { SPACING } from '../ui-style-constants'
+import { ICON_DATA_BY_NAME } from './icon-data'
+import { Icon as IconComponent } from './Icon'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof IconComponent> = {
+  title: 'Library/Atoms/Icon',
+  component: IconComponent,
+  argTypes: {
+    name: {
+      options: Object.keys(ICON_DATA_BY_NAME),
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof IconComponent>
+
+export const Icon: Story = {
+  args: {
+    name: 'alert',
+    spin: false,
+    size: '4rem',
+  },
+}

package/src/icons/Icon.tsx

@@ -0,0 +1,79 @@
+import type * as React from 'react'
+import { css, keyframes } from 'styled-components'
+import cx from 'classnames'
+
+import { Svg } from '../primitives'
+import { ICON_DATA_BY_NAME } from './icon-data'
+
+import type { SvgProps } from '../primitives'
+
+export type IconName = keyof typeof ICON_DATA_BY_NAME
+
+export interface IconProps extends SvgProps {
+  /** name constant of the icon to display */
+  name: IconName
+  /** classes to apply */
+  className?: string
+  /** spin the icon with a CSS animation */
+  spin?: boolean
+  /** x attribute as a number or string (for nesting inside another SVG) */
+  x?: number | string
+  /** y attribute as a number or string (for nesting inside another SVG) */
+  y?: number | string
+  /** width as a number or string (for nesting inside another SVG) */
+  svgHeight?: number | string
+  /** height as a number or string (for nesting inside another SVG) */
+  svgWidth?: number | string
+  /** inline style passed into the icon svg */
+  style?: Record<string, string | number>
+  /** optional children */
+  children?: React.ReactNode
+  id?: string
+}
+
+const spinAnimation = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`
+
+const spinStyle = css`
+  &.spin {
+    animation: ${spinAnimation} 0.8s steps(8) infinite;
+    transform-origin: center;
+  }
+`
+
+/**
+ * Inline SVG icon component
+ *
+ * If you need access to the IconName type, you can:
+ * ```js
+ * import type { IconName } from '@opentrons/components'
+ * ```
+ */
+export function Icon(props: IconProps): JSX.Element | null {
+  const { name, children, className, spin, id, ...svgProps } = props
+
+  if (!(name in ICON_DATA_BY_NAME)) {
+    console.error(`"${name}" is not a valid Icon name`)
+    return null
+  }
+
+  const { viewBox, path } = ICON_DATA_BY_NAME[name]
+
+  return (
+    <Svg
+      aria-hidden="true"
+      fill="currentColor"
+      viewBox={viewBox}
+      className={cx(className, { spin })}
+      css={spinStyle}
+      {...svgProps}
+      id={id}
+    >
+      <path aria-roledescription={name} fillRule="evenodd" d={path} />
+      {props.children}
+    </Svg>
+  )
+}

package/src/icons/IconList.stories.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+
+import {
+  Text,
+  Flex,
+  DIRECTION_COLUMN,
+  WRAP,
+  TYPOGRAPHY,
+  ALIGN_CENTER,
+  COLORS,
+  SPACING,
+  BORDERS,
+} from '@opentrons/components'
+import { ICON_DATA_BY_NAME } from './icon-data'
+import { Icon as IconComponent } from './Icon'
+
+import type { Story, Meta } from '@storybook/react'
+import type { IconName } from './Icon'
+
+export default {
+  title: 'Library/Atoms/IconList',
+  decorators: [Story => <Story />],
+} as Meta
+
+interface IconState {
+  name: IconName
+  showText: boolean
+}
+
+const Template: Story<React.ComponentProps<typeof IconComponent>> = args => {
+  // const { backgroundColor } = args
+  const [icons, setIcons] = React.useState<IconState[]>(() =>
+    Object.keys(ICON_DATA_BY_NAME).map(name => ({
+      name: name as IconName,
+      showText: false,
+    }))
+  )
+  const [selectedIcon, setSelectedIcon] = React.useState<IconName | null>(null)
+
+  // copy icon name
+  const handleCopy = async (
+    iconName: IconName,
+    index: number
+  ): Promise<void> => {
+    await navigator.clipboard.writeText(iconName)
+    setIcons(prevIcons =>
+      prevIcons.map((icon, i) => {
+        if (i === index) {
+          return { ...icon, showText: true }
+        } else {
+          return icon
+        }
+      })
+    )
+    setSelectedIcon(iconName)
+  }
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setIcons(prevIcons =>
+        prevIcons.map(icon => ({ ...icon, showText: false }))
+      )
+      setSelectedIcon(null)
+    }, 2000)
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [icons])
+
+  return (
+    <Flex flexWrap={WRAP}>
+      {icons.map(({ name, showText }, index) => (
+        <Flex
+          key={`icon_${name}`}
+          width="8.75rem"
+          flexDirection={DIRECTION_COLUMN}
+          alignItems={ALIGN_CENTER}
+          borderRadius={BORDERS.borderRadius12}
+          marginRight={SPACING.spacing8}
+          marginBottom={SPACING.spacing8}
+          padding={SPACING.spacing16}
+          onClick={() => handleCopy(name, index)}
+          border={
+            selectedIcon === name
+              ? `2px solid ${COLORS.blue50}`
+              : `2px solid ${COLORS.black90}`
+          }
+        >
+          <IconComponent name={name as IconName} size="4rem" />
+          <Text
+            textAlign={TYPOGRAPHY.textAlignCenter}
+            marginTop={SPACING.spacing8}
+            fontSize={TYPOGRAPHY.fontSizeP}
+          >
+            {name}
+          </Text>
+          <Flex height="1.5rem">
+            {showText ? <Text color={COLORS.blue50}> {'copied'}</Text> : null}
+          </Flex>
+        </Flex>
+      ))}
+    </Flex>
+  )
+}
+export const IconList = Template.bind({})
+IconList.args = {
+  backgroundColor: COLORS.blue50,
+}