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

package/src/hooks/useLongPress.ts

@@ -0,0 +1,83 @@
+import { useState, useEffect, useRef } from 'react'
+import interact from 'interactjs'
+import type PointerEvent from 'interactjs'
+import type { CSSProperties, MutableRefObject } from 'react'
+
+const HOLD_DURATION_MS = 1000
+
+// Note kj 12/05/2022
+// ODD needs setIsLongPressed since when a user use long press, ODD app needs to show overflow menu.
+// Then if a user takes clicking outside action, the ODD app needs to reset the isLongPressed.
+// In terms of setIsTapped, if the ODD app doesn't need it, it will be removed.
+export interface UseLongPressResult {
+  ref: MutableRefObject<null>
+  style: CSSProperties
+  isEnabled: boolean
+  isLongPressed: boolean
+  isTapped: boolean
+  setIsLongPressed: (value: boolean) => void
+  setIsTapped: (value: boolean) => void
+  enable: () => void
+  disable: () => void
+}
+
+/**
+ * useLongPress provide two actions (tap and long press)
+ * useLongPress recognize 1 sec hold as long press: hold Duration
+ * interactjs recognize "hold" when an element is held down around 600ms(default)
+ * @returns {UseLongPressResult}
+ */
+export const useLongPress = (): UseLongPressResult => {
+  const [isLongPressed, setIsLongPressed] = useState<boolean>(false)
+  const [isTapped, setIsTapped] = useState<boolean>(false)
+  const [isEnabled, setIsEnabled] = useState<boolean>(true)
+  const interactiveRef = useRef(null)
+
+  const enable = (): void => {
+    if (interactiveRef?.current != null) {
+      interact((interactiveRef.current as unknown) as HTMLElement)
+        .pointerEvents({
+          holdDuration: HOLD_DURATION_MS,
+        })
+        .on('hold', (_event: PointerEvent) => {
+          setIsLongPressed(isLongPressed => !isLongPressed)
+        })
+        .on('tap', (_event: PointerEvent) => {
+          setIsTapped(isTapped => !isTapped)
+        })
+    }
+  }
+  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,
+    isLongPressed,
+    isTapped,
+    setIsLongPressed,
+    setIsTapped,
+    enable: () => {
+      setIsEnabled(true)
+    },
+    disable: () => {
+      setIsEnabled(false)
+    },
+  }
+}

package/src/hooks/useMenuHandleClickOutside.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { COLORS } from '../helix-design-system'
+import { Overlay } from '../modals'
+
+import type { Dispatch, MouseEventHandler, SetStateAction } from 'react'
+
+interface MenuHandleClickOutside {
+  menuOverlay: JSX.Element
+  handleOverflowClick: MouseEventHandler<HTMLButtonElement>
+  showOverflowMenu: boolean
+  setShowOverflowMenu: Dispatch<SetStateAction<boolean>>
+}
+
+export function useMenuHandleClickOutside(): MenuHandleClickOutside {
+  const [showOverflowMenu, setShowOverflowMenu] = useState<boolean>(false)
+
+  const handleOverflowClick: MouseEventHandler<HTMLButtonElement> = e => {
+    e.preventDefault()
+    e.stopPropagation()
+    setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
+  }
+
+  const handleClickOutside: MouseEventHandler<HTMLDivElement> = e => {
+    e.preventDefault()
+    e.stopPropagation()
+    setShowOverflowMenu(false)
+  }
+
+  const menuOverlay: JSX.Element = (
+    <>
+      {showOverflowMenu ? (
+        <Overlay
+          onClick={handleClickOutside}
+          backgroundColor={COLORS.transparent}
+        />
+      ) : null}
+    </>
+  )
+
+  return {
+    menuOverlay,
+    handleOverflowClick,
+    showOverflowMenu,
+    setShowOverflowMenu,
+  }
+}

package/src/hooks/useMountEffect.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+import type { EffectCallback } from 'react'
+/**
+ * React hook to call a function on component mount and unmount
+ *
+ * @param {EffectCallback} callback (function to call on mount that optionally returns a cleanup function to call on unmount)
+ * @returns {void}
+ */
+export function useMountEffect(callback: EffectCallback): void {
+  // call useEffect with an empty dependency list so it's only called on mount
+  useEffect(callback, [])
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * React hook to keep track of the previous value of a parameter
+ * https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ *
+ * @template T (type of the input value)
+ * @param {T} value (value to keep track of)
+ * @returns {(T | void)} (previous value or undefined if first render)
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const prevRef = useRef<T | undefined>()
+
+  useEffect(() => {
+    prevRef.current = value
+  }, [value])
+
+  return prevRef.current
+}

package/src/hooks/useScrolling.ts

@@ -0,0 +1,33 @@
+/**
+ * A custom hook that detects whether an HTMLElement is being scrolled.
+ *
+ * @param {HTMLElement | null} node - HTMLElement to monitor for scrolling.
+ * @returns {boolean} - A boolean indicating whether the HTMLElement is being scrolled.
+ */
+import { useState, useEffect, useRef } from 'react'
+
+export const useScrolling = (node: HTMLElement | null): boolean => {
+  const [isScrolling, setIsScrolling] = useState<boolean>(false)
+  const scrollTimeout = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (node != null) {
+      const handleScroll = (): void => {
+        setIsScrolling(true)
+        if (scrollTimeout.current != null) clearTimeout(scrollTimeout.current)
+        scrollTimeout.current = setTimeout(() => {
+          setIsScrolling(false)
+        }, 200)
+      }
+
+      node?.addEventListener('scroll', handleScroll)
+
+      return () => {
+        if (scrollTimeout.current != null) clearTimeout(scrollTimeout.current)
+        node?.removeEventListener('scroll', handleScroll)
+      }
+    }
+  }, [node])
+
+  return isScrolling
+}

package/src/hooks/useSelectDeckLocation/SelectDeckLocation.stories.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { DeckLocationSelect as DeckLocationSelectComponent } from './'
+import {
+  FLEX_ROBOT_TYPE,
+  getDeckDefFromRobotType,
+  OT2_ROBOT_TYPE,
+} from '@opentrons/shared-data'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type { RobotType } from '@opentrons/shared-data'
+
+const meta: Meta<React.ComponentProps<typeof DeckLocationSelectComponent>> = {
+  component: DeckLocationSelectComponent,
+  title: 'Library/Molecules/Simulation/SelectDeckLocation',
+} as Meta
+
+export default meta
+type Story = StoryObj<{ disabledSlotNames: string[]; robotType: RobotType }>
+
+export const FlexDeckLocationSelect: Story = {
+  render: args => {
+    return <Wrapper {...args} />
+  },
+  args: {
+    disabledSlotNames: ['A2'],
+    robotType: FLEX_ROBOT_TYPE,
+  },
+}
+
+export const OT2DeckLocationSelect: Story = {
+  render: args => {
+    return <Wrapper {...args} />
+  },
+  args: {
+    disabledSlotNames: ['2'],
+    robotType: OT2_ROBOT_TYPE,
+  },
+}
+
+function Wrapper(props: {
+  disabledSlotNames: string[]
+  robotType: RobotType
+}): JSX.Element {
+  const [selectedLocation, setSelectedLocation] = React.useState({
+    slotName: props.robotType === FLEX_ROBOT_TYPE ? 'A1' : '1',
+  })
+
+  const deckDef = getDeckDefFromRobotType(props.robotType)
+  return (
+    <DeckLocationSelectComponent
+      {...{ selectedLocation, setSelectedLocation, deckDef }}
+      disabledLocations={props.disabledSlotNames.map(s => ({ slotName: s }))}
+    />
+  )
+}

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])
+}