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

package/src/hooks/useSelectDeckLocation/index.tsx

@@ -1,333 +0,0 @@
-import { Fragment, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import isEqual from 'lodash/isEqual'
-
-import {
-  FLEX_CUTOUT_BY_SLOT_ID,
-  FLEX_ROBOT_TYPE,
-  FLEX_SINGLE_SLOT_BY_CUTOUT_ID,
-  getDeckDefFromRobotType,
-  getFixtureDisplayName,
-  getPositionFromSlotId,
-  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 { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { Text } from '../../primitives'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-import type {
-  AddressableArea,
-  CoordinateTuple,
-  CutoutConfig,
-  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

@@ -1,87 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import interact from 'interactjs'
-
-import type { CSSProperties, MutableRefObject } 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

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

@@ -1,27 +0,0 @@
-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/i18n.ts

@@ -1,63 +0,0 @@
-import { initReactI18next } from 'react-i18next'
-import i18n from 'i18next'
-import capitalize from 'lodash/capitalize'
-import startCase from 'lodash/startCase'
-
-import { titleCase } from '@opentrons/shared-data'
-
-import { resources } from './assets/localization'
-
-import type { InitOptions } from 'i18next'
-
-export const US_ENGLISH = 'en-US'
-export const SIMPLIFIED_CHINESE = 'zh-CN'
-
-// these strings will not be translated so should not be localized
-export const US_ENGLISH_DISPLAY_NAME = 'English (US)'
-export const SIMPLIFIED_CHINESE_DISPLAY_NAME = '中文'
-
-export type Language = typeof US_ENGLISH | typeof SIMPLIFIED_CHINESE
-
-export const LANGUAGES: Array<{ name: string; value: Language }> = [
-  { name: US_ENGLISH_DISPLAY_NAME, value: US_ENGLISH },
-  { name: SIMPLIFIED_CHINESE_DISPLAY_NAME, value: SIMPLIFIED_CHINESE },
-]
-
-const i18nConfig: InitOptions = {
-  resources,
-  lng: 'en',
-  fallbackLng: 'en',
-  debug: process.env.NODE_ENV === 'development',
-  defaultNS: 'shared',
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value: string, format, lng) {
-      if (format === 'upperCase') return value.toUpperCase()
-      if (format === 'lowerCase') return value.toLowerCase()
-      if (format === 'capitalize') return capitalize(value)
-      if (format === 'sentenceCase') return startCase(value)
-      if (format === 'titleCase') return titleCase(value)
-      return value
-    },
-  },
-  keySeparator: false, // use namespaces and context instead
-  saveMissing: true,
-  missingKeyHandler: (lng, ns, key) => {
-    process.env.NODE_ENV === 'test'
-      ? console.error(`Missing ${lng} Translation: key={${key}} ns={${ns}}`)
-      : console.warn(`Missing ${lng} Translation: key={${key}} ns={${ns}}`)
-  },
-}
-
-const i18nCb = (err?: Error): void => {
-  if (err != null) {
-    console.error(
-      'Internationalization was not initialized properly. error: ',
-      err
-    )
-  }
-}
-
-void i18n.use(initReactI18next).init(i18nConfig, i18nCb)
-
-export { i18n, i18nCb, i18nConfig }

package/src/icons/Icon.stories.tsx

@@ -1,45 +0,0 @@
-import { Flex, STYLE_PROPS } from '../primitives'
-import { SPACING } from '../ui-style-constants'
-import { Icon as IconComponent } from './Icon'
-import { ICON_DATA_BY_NAME } from './icon-data'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof IconComponent> = {
-  title: 'Library/Atoms/Icon',
-  component: IconComponent,
-  argTypes: {
-    // Disable all StyleProps
-    ...Object.fromEntries(
-      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
-        prop,
-        { table: { disable: true } },
-      ])
-    ),
-    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

@@ -1,88 +0,0 @@
-import clsx from 'clsx'
-
-import { withStyleProps } from '../hocs/withStyleProps'
-import { ICON_DATA_BY_NAME } from './icon-data'
-import styles from './icon.module.css'
-
-import type { ReactNode, SVGProps } from 'react'
-
-export type IconName = keyof typeof ICON_DATA_BY_NAME
-
-export interface IconProps extends SVGProps<SVGSVGElement> {
-  /** name constant of the icon to display */
-  name: IconName
-  /** spin the icon with a CSS animation */
-  spin?: boolean
-  /** override default size */
-  size?: string | number
-  /** 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?: ReactNode
-}
-
-/**
- * Inline SVG icon component
- *
- * If you need access to the IconName type, you can:
- * ```js
- * import type { IconName } from '@opentrons/components'
- * ```
- */
-function IconComponent(props: IconProps): JSX.Element | null {
-  const {
-    name,
-    className,
-    spin,
-    size,
-    height: rawHeight,
-    width: rawWidth,
-    color,
-    transform,
-    opacity,
-    ...svgProps
-  } = props
-
-  const height = size ?? rawHeight
-  const width = size ?? rawWidth
-  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]
-
-  const style = Object.fromEntries(
-    Object.entries({
-      color,
-      height,
-      width,
-      transform,
-      //  filter undefined props
-    }).filter(([_, value]) => value != null)
-  )
-
-  return (
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      viewBox={viewBox}
-      className={clsx(className, { [styles.spin]: spin })}
-      style={{ ...style }}
-      {...svgProps}
-    >
-      <path aria-roledescription={name} fillRule="evenodd" d={path} />
-      {props.children}
-    </svg>
-  )
-}
-
-export const Icon = withStyleProps(IconComponent)