@opentrons/components 0.1.6-alpha.8 → 0.1.7-alpha.0

package/src/hardware-sim/ProtocolDeck/utils/getModulesInSlots.ts

@@ -0,0 +1,129 @@
+import {
+  SPAN7_8_10_11_SLOT,
+  getModuleDef2,
+  getLoadedLabwareDefinitionsByUri,
+} from '@opentrons/shared-data'
+import type {
+  CompletedProtocolAnalysis,
+  LoadLabwareRunTimeCommand,
+  ProtocolAnalysisOutput,
+  LoadModuleRunTimeCommand,
+  RunTimeCommand,
+  ModuleLocation,
+  ModuleModel,
+  LabwareDefinition2,
+} from '@opentrons/shared-data'
+import { getInitialLoadedLabwareByAdapter } from './getInitiallyLoadedLabwareByAdapter'
+
+interface ModuleInSlot {
+  moduleModel: ModuleModel
+  moduleLocation: ModuleLocation
+  nestedLabwareId: string | null
+  nestedLabwareDef: LabwareDefinition2 | null
+  nestedLabwareNickName: string | null
+}
+export const getModulesInSlots = (
+  protocolAnalysis: ProtocolAnalysisOutput | CompletedProtocolAnalysis
+): ModuleInSlot[] => {
+  if (protocolAnalysis != null && 'modules' in protocolAnalysis) {
+    const { commands, modules, labware } = protocolAnalysis
+    const initialLoadedLabwareByAdapter = getInitialLoadedLabwareByAdapter(
+      commands
+    )
+    return modules.reduce<ModuleInSlot[]>((acc, module) => {
+      const moduleDef = getModuleDef2(module.model)
+      const nestedLabwareId =
+        commands
+          .filter(
+            (command): command is LoadLabwareRunTimeCommand =>
+              command.commandType === 'loadLabware'
+          )
+          .find(
+            (command: LoadLabwareRunTimeCommand) =>
+              typeof command.params.location === 'object' &&
+              'moduleId' in command.params.location &&
+              command.params.location.moduleId === module.id
+          )?.result?.labwareId ?? null
+      const nestedLabware = labware.find(
+        item => nestedLabwareId != null && item.id === nestedLabwareId
+      )
+      const labwareDefinitionsByUri = getLoadedLabwareDefinitionsByUri(commands)
+      const nestedLabwareDef =
+        nestedLabware != null
+          ? labwareDefinitionsByUri[nestedLabware.definitionUri]
+          : null
+      const moduleInitialLoadInfo = getModuleInitialLoadInfo(
+        module.id,
+        commands
+      )
+      let slotName = moduleInitialLoadInfo.location.slotName
+      // Note: this is because PD for OT2 represents the slot the TC sits in as a made up slot. We want it to be rendered in slot 7
+      if (slotName === SPAN7_8_10_11_SLOT) {
+        slotName = '7'
+      }
+
+      const labwareInAdapterInMod =
+        nestedLabwareId != null
+          ? initialLoadedLabwareByAdapter[nestedLabwareId]
+          : null
+      //  NOTE: only rendering the labware on top most layer so
+      //  either the adapter or the labware are rendered but not both
+      const topLabwareDefinition =
+        labwareInAdapterInMod?.result?.definition ?? nestedLabwareDef
+      const topLabwareId =
+        labwareInAdapterInMod?.result?.labwareId ?? nestedLabwareId
+      const topLabwareDisplayName =
+        labwareInAdapterInMod != null
+          ? labwareInAdapterInMod.params.displayName?.toString() ?? null
+          : nestedLabware?.displayName?.toString() ?? null
+      return [
+        ...acc,
+        {
+          moduleModel: moduleDef.model,
+          moduleLocation: { slotName },
+          nestedLabwareId: topLabwareId,
+          nestedLabwareDef: topLabwareDefinition,
+          nestedLabwareNickName: topLabwareDisplayName,
+        },
+      ]
+    }, [])
+  }
+
+  return []
+}
+
+function getModuleInitialLoadInfo(
+  moduleId: string,
+  commands: RunTimeCommand[]
+): {
+  location: ModuleLocation
+  protocolLoadOrder: number
+} {
+  const moduleLoadIndex = commands.findIndex(
+    (command: RunTimeCommand): command is LoadModuleRunTimeCommand =>
+      command.commandType === 'loadModule' &&
+      command.result?.moduleId === moduleId
+  )
+
+  if (moduleLoadIndex === -1) {
+    throw new Error(
+      'expected to be able to find module location, but could not'
+    )
+  }
+
+  const protocolLoadOrder = commands
+    .slice(0, moduleLoadIndex)
+    .reduce(
+      (moduleLoadCount, command) =>
+        command.commandType === 'loadModule'
+          ? moduleLoadCount + 1
+          : moduleLoadCount,
+      0
+    )
+
+  return {
+    location: (commands[moduleLoadIndex] as LoadModuleRunTimeCommand).params
+      .location,
+    protocolLoadOrder,
+  }
+}

package/src/hardware-sim/ProtocolDeck/utils/getStandardDeckViewLayerBlockList.ts

@@ -0,0 +1,29 @@
+import type { RobotType } from '@opentrons/shared-data'
+
+const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
+  'calibrationMarkings',
+  'fixedBase',
+  'doorStops',
+  'metalFrame',
+  'removalHandle',
+  'removableDeckOutline',
+  'screwHoles',
+]
+
+const OT3_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
+  'DECK_BASE',
+  'BARCODE_COVERS',
+]
+
+export const getStandardDeckViewLayerBlockList = (
+  robotType: RobotType
+): string[] => {
+  switch (robotType) {
+    case 'OT-2 Standard':
+      return OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST
+    case 'OT-3 Standard':
+      return OT3_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST
+    default:
+      return []
+  }
+}

package/src/hardware-sim/ProtocolDeck/utils/getWellFillFromLabwareId.ts

@@ -0,0 +1,30 @@
+import type { Liquid } from '@opentrons/shared-data'
+import type { WellFill } from '../../Labware'
+import type { LabwareByLiquidId } from '../types'
+
+export function getWellFillFromLabwareId(
+  labwareId: string,
+  liquidsInLoadOrder: Liquid[],
+  labwareByLiquidId: LabwareByLiquidId
+): WellFill {
+  let labwareWellFill: WellFill = {}
+  const liquidIds = Object.keys(labwareByLiquidId)
+  const labwareInfo = Object.values(labwareByLiquidId)
+
+  labwareInfo.forEach((labwareArray, index) => {
+    labwareArray.forEach(labware => {
+      if (labware.labwareId === labwareId) {
+        const liquidId = liquidIds[index]
+        const liquid = liquidsInLoadOrder.find(liquid => liquid.id === liquidId)
+        const wellFill: {
+          [well: string]: string
+        } = {}
+        Object.keys(labware.volumeByWell).forEach(key => {
+          wellFill[key] = liquid?.displayColor ?? ''
+        })
+        labwareWellFill = { ...labwareWellFill, ...wellFill }
+      }
+    })
+  })
+  return labwareWellFill
+}

package/src/hardware-sim/ProtocolDeck/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './getLabwareInSlots'
+export * from './getStandardDeckViewLayerBlockList'
+export * from './getLabwareInfoByLiquidId'
+export * from './getWellFillFromLabwareId'

package/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.tsx

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+import { animated } from '@react-spring/web'
+import { Svg } from '../../primitives'
+
+import type { ComponentProps } from 'react'
+
+interface RobotCoordinateSpaceProps extends ComponentProps<typeof Svg> {
+  animated?: boolean
+}
+export function RobotCoordinateSpace(
+  props: RobotCoordinateSpaceProps
+): JSX.Element {
+  const { animated = false, children, ...restProps } = props
+  const allPassThroughProps = {
+    transform: 'scale(1, -1)',
+    ...restProps,
+  }
+  return animated ? (
+    <AnimatedSvg {...allPassThroughProps}>{children}</AnimatedSvg>
+  ) : (
+    <Svg {...allPassThroughProps}>{children}</Svg>
+  )
+}
+
+/**
+ * These animated components needs to be split out because react-spring and styled-components don't play nice
+ * @see https://github.com/pmndrs/react-spring/issues/1515 */
+// @ts-expect-error Type instantiation is excessively deep and possibly infinite
+const AnimatedSvg = styled(animated.svg)<typeof animated.svg>``

package/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx

@@ -0,0 +1,51 @@
+import { useRef } from 'react'
+import { Svg } from '../../primitives'
+
+import type { ComponentProps, ReactNode } from 'react'
+import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
+
+export interface RobotCoordinateSpaceWithRefRenderProps {
+  deckSlotsById: { [slotId: string]: DeckSlot }
+}
+
+interface RobotCoordinateSpaceWithRefProps extends ComponentProps<typeof Svg> {
+  viewBox?: string | null
+  deckDef?: DeckDefinition
+  zoomed?: boolean
+  children?: (props: RobotCoordinateSpaceWithRefRenderProps) => ReactNode
+}
+
+export function RobotCoordinateSpaceWithRef(
+  props: RobotCoordinateSpaceWithRefProps
+): JSX.Element | null {
+  const { children, deckDef, viewBox, zoomed = false, ...restProps } = props
+  const wrapperRef = useRef<SVGSVGElement>(null)
+
+  if (deckDef == null && viewBox == null) return null
+
+  let wholeDeckViewBox
+  let deckSlotsById = {}
+  if (deckDef != null) {
+    const [viewBoxOriginX, viewBoxOriginY] = deckDef.cornerOffsetFromOrigin
+    const [deckXDimension, deckYDimension] = deckDef.dimensions
+
+    deckSlotsById = deckDef.locations.addressableAreas.reduce(
+      (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
+      {}
+    )
+    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+  }
+
+  return (
+    <Svg
+      viewBox={zoomed ? viewBox : wholeDeckViewBox}
+      ref={wrapperRef}
+      transform="scale(1, -1)"
+      width="100%"
+      height="100%"
+      {...restProps}
+    >
+      {children?.({ deckSlotsById })}
+    </Svg>
+  )
+}

package/src/hardware-sim/RobotCoordinateSpace/index.ts

@@ -0,0 +1,2 @@
+export * from './RobotCoordinateSpaceWithRef'
+export * from './RobotCoordinateSpace'

package/src/hardware-sim/index.ts

@@ -0,0 +1,11 @@
+export * from './BaseDeck'
+export * from './BaseDeck/__fixtures__'
+export * from './ProtocolDeck'
+export * from './ProtocolDeck/utils'
+export * from './Deck'
+export * from './DeckConfigurator'
+export * from './DeckSlotLocation'
+export * from './Labware'
+export * from './Module'
+export * from './Pipette'
+export * from './RobotCoordinateSpace'

package/src/hardware-sim/utils.ts

@@ -0,0 +1,18 @@
+import type { AffineTransformMatrix } from '@opentrons/shared-data'
+
+export const IDENTITY_AFFINE_TRANSFORM: AffineTransformMatrix = [
+  [1, 0, 0, 0],
+  [0, 1, 0, 0],
+  [0, 0, 1, 0],
+  [0, 0, 0, 1],
+]
+
+// multiply two matrices together (dot product)
+export function multiplyMatrices(a: number[][], b: number[][]): number[][] {
+  const transposedB = b[0].map((_val, index) => b.map(row => row[index]))
+  return a.map(rowA =>
+    transposedB.map(rowB =>
+      rowA.reduce((acc, valA, colIndexA) => acc + valA * rowB[colIndexA], 0)
+    )
+  )
+}

package/src/helix-design-system/borders.ts

@@ -0,0 +1,32 @@
+import { COLORS } from '.'
+
+/**
+ * Constants
+ */
+export const borderRadius2 = '2px' // WEB ONLY!
+export const borderRadius4 = '4px'
+export const borderRadius8 = '8px'
+export const borderRadius12 = '12px'
+export const borderRadius16 = '16px'
+export const borderRadius40 = '40px'
+export const borderRadiusFull = '200px'
+
+/**
+ * Styles
+ */
+export const styleSolid = 'solid'
+
+/**
+ * Special-case borders
+ */
+export const activeLineBorder = `1px ${styleSolid} ${COLORS.blue50}`
+export const lineBorder = `1px ${styleSolid} ${COLORS.grey30}`
+
+/**
+ * Shadows
+ */
+export const smallDropShadow = '0px 3px 6px rgba(0, 0, 0, 0.23)'
+export const tinyDropShadow = '0px 1px 3px 0px rgba(0, 0, 0, .33)'
+// touch screen
+export const shadowBig = '0px 3px 6px rgba(0,0,0,0.23)'
+export const shadowSmall = '0px 0px 40px rgba(0,0,0,0.4)'

package/src/helix-design-system/colors.ts

@@ -0,0 +1,100 @@
+// some colors are slightly adjusted for on-device display screen differences
+// isTouchscreen hex values are dev concerns only - designs will reflect the standard hex values
+import { isTouchscreen } from '../ui-style-constants/responsiveness'
+
+/**
+ * green
+ */
+export const green60 = '#03683E'
+export const green50 = isTouchscreen ? '#1CA850' : '#04AA65'
+export const green40 = isTouchscreen ? '#8EF3A8' : '#91E2C0'
+export const green35 = isTouchscreen ? '#8AFBAB' : '#AFEDD3'
+export const green30 = '#C4F6E0'
+export const green20 = '#E8F7ED'
+
+/**
+ * red
+ */
+export const red60 = '#941313'
+export const red55 = '#C71A1B'
+export const red50 = '#DE1B1B'
+export const red40 = '#F5B2B3'
+export const red35 = '#F8C8C9'
+export const red30 = '#FAD6D6'
+export const red20 = '#FCE9E9'
+
+/**
+ * yellow
+ */
+export const yellow60 = '#825512'
+export const yellow50 = '#F09D20'
+export const yellow40 = '#FCD48B'
+export const yellow35 = '#FFE1A4'
+export const yellow30 = '#FFE9BE'
+export const yellow20 = '#FDF3E2'
+
+/**
+ * purple
+ */
+export const purple60 = isTouchscreen ? '#612367' : '#562566'
+export const purple55 = isTouchscreen ? '#822E89' : '#713187'
+export const purple50 = isTouchscreen ? '#9E39A8' : '#893BA4'
+export const purple40 = isTouchscreen ? '#E2A9EA' : '#CEA4DF'
+export const purple35 = isTouchscreen ? '#ECC2F2' : '#DBBCE7'
+export const purple30 = isTouchscreen ? '#F4DEF7' : '#E6D5EC'
+export const purple20 = isTouchscreen ? '#FFF3FE' : '#F1E8F5'
+
+/**
+ * blue
+ */
+export const blue60 = '#004196'
+export const blue55 = '#0056C8'
+export const blue40 = '#A9CEFD'
+export const blue35 = '#BFDCFD'
+export const blue30 = '#D0E6FE'
+export const blue20 = '#E1EFFF'
+export const blue10 = '#F1F8FF'
+
+/**
+ * grey
+ */
+export const grey60 = '#4A4C4E'
+export const grey55 = '#626467'
+export const grey50 = '#737578'
+export const grey40 = '#B7B8B9'
+export const grey35 = '#CBCCCC'
+export const grey30 = '#DEDEDE'
+export const grey20 = '#E9E9E9'
+export const grey10 = '#F3F3F3'
+
+/**
+ * core
+ */
+export const black90 = '#16212D'
+export const black80 = '#24313F'
+export const black70 = '#39495B'
+export const white = '#FFFFFF'
+export const blue50 = '#006CFA'
+
+/**
+ * Semi-opaques
+ * */
+export const transparentWhite80 = `${white}CC`
+export const transparentWhite50 = `${white}80`
+export const transparentBlack80 = `${black90}80`
+
+/**
+ * flex
+ */
+export const flex55 = '#0297CC'
+export const flex50 = '#00BDFF'
+
+/**
+ * extras
+ */
+export const transparent = 'transparent'
+// opacity hex codes to append to 6-digit color hex codes
+export const opacity20HexCode = '33' // 20% opacity
+export const opacity40HexCode = '66' // 40% opacity
+export const opacity60HexCode = '99' // 60% opacity
+export const opacity90HexCode = 'E6' // 90% opacity

package/src/helix-design-system/index.ts

@@ -0,0 +1,4 @@
+export * as COLORS from './colors'
+export * as BORDERS from './borders'
+export * as PRODUCT from './product'
+export * as STYLE from './style'

package/src/helix-design-system/product/index.ts

@@ -0,0 +1 @@
+export * as TYPOGRAPHY from './typography'

package/src/helix-design-system/product/typography.ts

@@ -0,0 +1,151 @@
+/**
+ * Note: these values are only currently correct for desktop and should not be used on ODD.
+ */
+
+// Valid for most typography styles
+export const fontFamily = 'Public Sans'
+
+export const fontWeightRegular = '400'
+export const fontWeightSemiBold = '600'
+export const fontWeightBold = '700'
+
+// Display styles
+const fontFamilyDisplay = fontFamily
+const fontSizeDisplay = '2.4375rem' // 39px
+const lineHeightDisplay = '3rem' // 48px
+
+// Display-Bold
+export const fontSizeDisplayBold = fontSizeDisplay
+export const lineHeightDisplayBold = lineHeightDisplay
+export const fontFamilyDisplayBold = fontFamilyDisplay
+export const fontWeightDisplayBold = fontWeightBold
+export const fontStyleDisplayBold = `${fontWeightDisplayBold} ${fontSizeDisplayBold}/${lineHeightDisplayBold} ${fontFamilyDisplayBold}`
+
+// Heading-Large
+const fontSizeHeadingLarge = '1.625rem' // 26px
+const lineHeightHeadingLarge = '2rem' // 32px
+const fontFamilyHeadingLarge = fontFamily
+
+// Heading-Large-Regular
+export const fontFamilyHeadingLargeRegular = fontFamilyHeadingLarge
+export const fontSizeHeadingLargeRegular = fontSizeHeadingLarge
+export const lineHeightHeadingLargeRegular = lineHeightHeadingLarge
+export const fontWeightHeadingLargeRegular = fontWeightRegular
+export const fontStyleHeadingLargeRegular = `${fontWeightHeadingLargeRegular} ${fontSizeHeadingLargeRegular}/${lineHeightHeadingLargeRegular} ${fontFamilyHeadingLargeRegular}`
+
+// Heading-Large-Bold
+export const fontFamilyHeadingLargeBold = fontFamilyHeadingLarge
+export const fontSizeHeadingLargeBold = fontSizeHeadingLarge
+export const lineHeightHeadingLargeBold = lineHeightHeadingLarge
+export const fontWeightHeadingLargeBold = fontWeightBold
+export const fontStyleHeadingLargeBold = `${fontWeightHeadingLargeBold} ${fontSizeHeadingLargeBold}/${lineHeightHeadingLargeBold} ${fontFamilyHeadingLargeBold}`
+
+// Heading-Medium
+const fontSizeHeadingMedium = '1.4375rem' // 23px
+const lineHeightHeadingMedium = '1.75rem' // 28px
+const fontFamilyHeadingMedium = fontFamily
+
+// Heading-Medium-Regular
+export const fontSizeHeadingMediumSemiBold = fontSizeHeadingMedium
+export const lineHeightHeadingMediumSemiBold = lineHeightHeadingMedium
+
+export const fontFamilyHeadingMediumSemiBold = fontFamilyHeadingMedium
+export const fontWeightHeadingMediumSemiBold = fontWeightSemiBold
+export const fontStyleHeadingMediumSemiBold = `${fontWeightHeadingMediumSemiBold} ${fontSizeHeadingMediumSemiBold}/${lineHeightHeadingMediumSemiBold} ${fontFamilyHeadingMediumSemiBold}`
+export const fontStyleHeadingMediumBold = `${fontWeightBold} ${fontSizeHeadingMedium}/${lineHeightHeadingMediumSemiBold} ${fontFamilyHeadingMediumSemiBold}`
+
+// Heading-Small
+const fontSizeHeadingSmall = '1.125rem' // 18px
+const lineHeightHeadingSmall = '1.5rem' // 24px
+const fontFamilyHeadingSmall = fontFamily
+
+// Heading-Small-Regular
+export const fontSizeHeadingSmallRegular = fontSizeHeadingSmall
+export const lineHeightHeadingSmallRegular = lineHeightHeadingSmall
+export const fontFamilyHeadingSmallRegular = fontFamilyHeadingSmall
+export const fontWeightHeadingSmallRegular = '400'
+export const fontStyleHeadingSmallRegular = `${fontWeightHeadingSmallRegular} ${fontSizeHeadingSmallRegular}/${lineHeightHeadingSmallRegular} ${fontFamilyHeadingSmallRegular}`
+
+// Heading-Small-Bold
+export const fontSizeHeadingSmallBold = fontSizeHeadingSmall
+export const lineHeightHeadingSmallBold = lineHeightHeadingSmall
+export const fontFamilyHeadingSmallBold = fontFamilyHeadingSmall
+export const fontWeightHeadingSmallBold = fontWeightBold
+export const fontStyleHeadingSmallBold = `${fontWeightHeadingSmallBold} ${fontSizeHeadingSmallBold}/${lineHeightHeadingSmallBold} ${fontFamilyHeadingSmallBold}`
+export const fontStyleHeadingSmallSemiBold = `${fontWeightSemiBold} ${fontSizeHeadingSmallBold}/${lineHeightHeadingSmallBold} ${fontFamilyHeadingSmallBold}`
+
+// Body-Large
+const fontSizeBodyLarge = '1rem' // 16px
+const lineHeightBodyLarge = '1.5rem' // 24px
+const fontFamilyBodyLarge = fontFamily
+
+// Body-Large-Medium
+export const fontSizeBodyLargeSemiBold = fontSizeBodyLarge
+export const lineHeightBodyLargeSemiBold = lineHeightBodyLarge
+export const fontFamilyBodyLargeSemiBold = fontFamilyBodyLarge
+export const fontWeightBodyLargeSemiBold = fontWeightSemiBold
+export const fontStyleBodyLargeSemiBold = `${fontWeightBodyLargeSemiBold} ${fontSizeBodyLargeSemiBold}/${lineHeightBodyLargeSemiBold} ${fontFamilyBodyLargeSemiBold}`
+
+// Body-Large-Regular
+export const fontSizeBodyLargeRegular = fontSizeBodyLarge
+export const lineHeightBodyLargeRegular = lineHeightBodyLarge
+export const fontFamilyBodyLargeRegular = fontFamilyBodyLarge
+export const fontWeightBodyLargeRegular = fontWeightRegular
+export const fontStyleBodyLargeRegular = `${fontWeightBodyLargeRegular} ${fontSizeBodyLargeRegular}/${lineHeightBodyLargeRegular} ${fontFamilyBodyLargeRegular}`
+
+// Body-Default
+const fontSizeBodyDefault = '0.875rem' // 14px
+const lineHeightBodyDefault = '1.25rem' // 20px
+const fontFamilyBodyDefault = fontFamily
+
+// Body-Default-Medium
+export const fontSizeBodyDefaultSemiBold = fontSizeBodyDefault
+export const lineHeightBodyDefaultSemiBold = lineHeightBodyDefault
+export const fontFamilyBodyDefaultSemiBold = fontFamilyBodyDefault
+export const fontWeightBodyDefaultSemiBold = fontWeightSemiBold
+export const fontStyleBodyDefaultSemiBold = `${fontWeightBodyDefaultSemiBold} ${fontSizeBodyDefaultSemiBold}/${lineHeightBodyDefaultSemiBold} ${fontFamilyBodyDefaultSemiBold}`
+
+// Body-Default-Regular
+export const fontSizeBodyDefaultRegular = fontSizeBodyDefault
+export const lineHeightBodyDefaultRegular = lineHeightBodyDefault
+export const fontFamilyBodyDefaultRegular = fontFamilyBodyDefault
+export const fontWeightBodyDefaultRegular = fontWeightRegular
+export const fontStyleBodyDefaultRegular = `${fontWeightBodyDefaultRegular} ${fontSizeBodyDefaultRegular}/${lineHeightBodyDefaultRegular} ${fontFamilyBodyDefaultRegular}`
+
+// Caption
+const fontSizeCaption = '0.8125rem' // 13px
+const lineHeightCaption = '1rem' // 16px
+const fontFamilyCaption = fontFamily
+
+// Caption-Bold
+export const fontSizeCaptionBold = fontSizeCaption
+export const lineHeightCaptionBold = lineHeightCaption
+export const fontFamilyCaptionBold = fontFamilyCaption
+export const fontWeightCaptionBold = fontWeightBold
+export const fontStyleCaptionBold = `${fontWeightCaptionBold} ${fontSizeCaptionBold}/${lineHeightCaptionBold} ${fontFamilyCaptionBold}`
+
+// Caption-Medium
+export const fontSizeCaptionSemiBold = fontSizeCaption
+export const lineHeightCaptionSemiBold = lineHeightCaption
+export const fontFamilyCaptionSemiBold = fontFamilyCaption
+export const fontWeightCaptionSemiBold = fontWeightSemiBold
+export const fontStyleCaptionSemiBold = `${fontWeightCaptionSemiBold} ${fontSizeCaptionSemiBold}/${lineHeightCaptionSemiBold} ${fontFamilyCaptionSemiBold}`
+
+// Caption-Regular
+export const fontSizeCaptionRegular = fontSizeCaption
+export const lineHeightCaptionRegular = lineHeightCaption
+export const fontFamilyCaptionRegular = fontFamilyCaption
+export const fontWeightCaptionRegular = fontWeightRegular
+export const fontStyleCaptionRegular = `${fontWeightCaptionRegular} ${fontSizeCaptionRegular}/${lineHeightCaptionRegular} ${fontFamilyCaptionRegular}`
+
+// Code
+const fontSizeCode = '0.8125rem' // 12px
+const lineHeightCode = '1.25rem' // 20px
+const fontFamilyCode = 'Reddit Mono'
+
+// Code-Regular
+export const fontSizeCodeRegular = fontSizeCode
+export const lineHeightCodeRegular = lineHeightCode
+export const fontFamilyCodeRegular = fontFamilyCode
+export const fontWeightCodeRegular = fontWeightRegular
+export const fontStyleCodeRegular = `${fontWeightCodeRegular} ${fontSizeCodeRegular}/${lineHeightCodeRegular} ${fontFamilyCodeRegular}`

package/src/helix-design-system/style.ts

@@ -0,0 +1,2 @@
+export const floatDropShadow =
+  'box-shadow: 0px 0px 6px 6px rgba(22, 33, 45, 0.25);'

package/src/hooks/__tests__/useConditionalConfirm.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('useConditionalConfirm', () => {
+  it.todo('replace deprecated enzyme test')
+})

package/src/hooks/__tests__/useDrag.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+import { useDrag } from '../useDrag'
+import type { ElementPosition } from '../useDrag'
+
+const mockPosition: ElementPosition = {
+  width: 100,
+  height: 200,
+  x: 10,
+  y: 20,
+}
+
+describe('useDrag', () => {
+  it('useDrag returns UseDragResult', () => {
+    const { result } = renderHook(() => useDrag(mockPosition))
+
+    expect(result.current.position.width).toBe(mockPosition.width)
+    expect(result.current.position.height).toBe(mockPosition.height)
+    expect(result.current.position.x).toBe(mockPosition.x)
+    expect(result.current.position.y).toBe(mockPosition.y)
+    expect(result.current.style.width).toBe(`${mockPosition.width}px`)
+    expect(result.current.style.height).toBe(`${mockPosition.height}px`)
+    expect(result.current.style.touchAction).toBe('none')
+    expect(result.current.style.transform).toBe(
+      `translate3D(${mockPosition.x}px, ${mockPosition.y}px, 0)`
+    )
+    expect(result.current.style.position).toBe('absolute')
+    expect(typeof result.current.isEnabled).toBe('boolean')
+  })
+
+  it('When calling enable, isEnabled true', () => {
+    const { result } = renderHook(() => useDrag(mockPosition))
+    act(() => {
+      result.current.enable()
+    })
+    expect(result.current.isEnabled).toBe(true)
+  })
+
+  it('When calling disable, isEnabled false', () => {
+    const { result } = renderHook(() => useDrag(mockPosition))
+    act(() => {
+      result.current.disable()
+    })
+    expect(result.current.isEnabled).toBe(false)
+  })
+})

package/src/hooks/__tests__/useInterval.test.tsx

@@ -0,0 +1,5 @@
+import { describe, it } from 'vitest'
+
+describe('useInterval hook', () => {
+  it.todo('replace deprecated enzyme test')
+})