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

package/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx

@@ -1,101 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { fixtureTiprack300ul as _fixtureTiprack300ul } from '@opentrons/shared-data'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { RobotCoordsForeignDiv } from '../../Deck/RobotCoordsForeignDiv'
-import {
-  MULTI_CHANNEL_PIPETTE_HEIGHT,
-  MULTI_CHANNEL_PIPETTE_WIDTH,
-  SINGLE_CHANNEL_PIPETTE_HEIGHT,
-  SINGLE_CHANNEL_PIPETTE_WIDTH,
-} from '../constants'
-import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
-import { EmanatingNozzle } from '../EmanatingNozzle'
-import { PipetteRender } from '../PipetteRender'
-
-import type { ComponentProps } from 'react'
-import type { LabwareDefinition } from '@opentrons/shared-data'
-
-vi.mock('../../Deck/RobotCoordsForeignDiv')
-vi.mock('../EmanatingNozzle')
-vi.mock('../EightEmanatingNozzles')
-
-const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition
-
-const render = (props: ComponentProps<typeof PipetteRender>) => {
-  return renderWithProviders(<PipetteRender {...props} />)[0]
-}
-
-describe('PipetteRender', () => {
-  let props: ComponentProps<typeof PipetteRender>
-  beforeEach(() => {
-    props = {
-      labwareDef: fixtureTiprack300Ul,
-      pipetteName: 'p1000_single',
-    }
-    vi.mocked(RobotCoordsForeignDiv).mockReturnValue(<div></div>)
-  })
-
-  describe('when the pipette is single channel', () => {
-    beforeEach(() => {
-      vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => (
-        <div>
-          {`rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`}{' '}
-          {children}
-        </div>
-      ))
-
-      vi.mocked(EmanatingNozzle).mockReturnValue(
-        <div>mock emanating nozzle</div>
-      )
-    })
-
-    it('should render a rectangle with the correct dimensions', () => {
-      render(props)
-      screen.getByText(
-        `rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`
-      )
-      vi.mocked(EmanatingNozzle).mockRestore()
-    })
-    it('should render a single emanating nozzle', () => {
-      render(props)
-      screen.getByText('mock emanating nozzle')
-      expect(EightEmanatingNozzles).not.toHaveBeenCalled()
-    })
-  })
-  describe('when the pipette is 8 channel', () => {
-    beforeEach(() => {
-      vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => (
-        <div>
-          {`rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`}{' '}
-          {children}
-        </div>
-      ))
-
-      vi.mocked(EightEmanatingNozzles).mockReturnValue(
-        <div>mock eight emanating nozzles</div>
-      )
-    })
-    it('should render a rectangle with the correct dimensions', () => {
-      props = {
-        ...props,
-        pipetteName: 'p10_multi',
-      }
-      render(props)
-      screen.getByText(
-        `rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`
-      )
-      vi.mocked(EightEmanatingNozzles).mockRestore()
-    })
-    it('should render eight emanating nozzles', () => {
-      props = {
-        ...props,
-        pipetteName: 'p10_multi',
-      }
-      render(props)
-      screen.getByText('mock eight emanating nozzles')
-    })
-  })
-})

package/src/hardware-sim/Pipette/constants.ts

@@ -1,10 +0,0 @@
-// These constants are used only in pipette render in LPC. The values do not necessarily reflect physical pipette dimensions.
-export const SINGLE_CHANNEL_PIPETTE_WIDTH = 18.7
-export const SINGLE_CHANNEL_PIPETTE_HEIGHT = 30.5
-
-export const MULTI_CHANNEL_PIPETTE_WIDTH = 18.7
-export const MULTI_CHANNEL_PIPETTE_HEIGHT = 90.3
-export const NINETY_SIX_CHANNEL_PIPETTE_WIDTH = 117.7
-
-export const MULTI_CHANNEL_CENTER_Y_NOZZLE = 13.3
-export const MULTI_CHANNEL_Y_OFFSET = -2.5

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

@@ -1 +0,0 @@
-export * from './PipetteRender'

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

@@ -1,31 +0,0 @@
-import { animated } from '@react-spring/web'
-
-import styles from './robotcoordinatespace.module.css'
-
-import type { ComponentType, ReactNode, SVGProps } from 'react'
-
-interface RobotCoordinateSpaceProps {
-  animated?: boolean
-  children?: ReactNode
-  height?: string
-  viewBox?: string
-}
-
-const AnimatedSvg = animated.svg as ComponentType<SVGProps<SVGSVGElement>>
-
-export function RobotCoordinateSpace(
-  props: RobotCoordinateSpaceProps
-): JSX.Element {
-  const { animated: isAnimated = false, children, ...restProps } = props
-
-  const allPassThroughProps = {
-    className: styles.svg,
-    ...restProps,
-  }
-
-  return isAnimated ? (
-    <AnimatedSvg {...allPassThroughProps}>{children}</AnimatedSvg>
-  ) : (
-    <svg {...allPassThroughProps}>{children}</svg>
-  )
-}

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

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

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

package/src/hardware-sim/RobotCoordinateSpace/robotcoordinatespace.module.css

@@ -1,3 +0,0 @@
-.svg {
-  transform: scale(1, -1);
-}

package/src/hardware-sim/index.ts

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

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

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

@@ -1,101 +0,0 @@
-// 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 flex40 = '#aae3fc'
-export const flex55 = '#0297CC'
-export const flex50 = '#00BDFF'
-
-/**
- * extras
- */
-export const transparent = '#00000000'
-// 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

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

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

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

@@ -1,151 +0,0 @@
-/**
- * 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

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

package/src/hocs/withStyleProps.ts

@@ -1,53 +0,0 @@
-import { createElement } from 'react'
-
-import { styleProps } from '../primitives'
-
-import type { ComponentProps, ComponentType } from 'react'
-import type { StyleProps } from '../primitives'
-
-/**
- * A Higher-Order Component (HOC) that enhances a component by enabling it to
- * accept `StyleProps`.
- *
- * This function wraps a component, processes any provided `StyleProps` into a
- * React style object, and merges it with the component's existing `style` prop.
- * Styles from the passed `style` prop will override any generated styles from `StyleProps`
- * in case of conflict.
- *
- * @template T - The type of the React component being wrapped.
- * @param Component The React component to enhance with `StyleProps`.
- * @returns A new component that accepts the original component's props plus `StyleProps`.
- *
- * @example
- * ```tsx
- * <Icon
- *  name="wifi"
- *  size="1.25rem"
- *  color={COLORS.green50}
- *  style={{ marginLeft: SPACING.spacing8 }}
- *  />
- * ```
- */
-
-export function withStyleProps<T extends ComponentType<any>>(
-  Component: T
-): T & ComponentType<ComponentProps<T> & StyleProps> {
-  const ComponentWithStyleProps = ({
-    style,
-    ...props
-  }: ComponentProps<T> & StyleProps): JSX.Element => {
-    const stylePropsStyles = styleProps(props)
-    const combinedStyles = { ...stylePropsStyles, ...style }
-
-    return createElement(Component, {
-      ...props,
-      style: combinedStyles,
-    })
-  }
-
-  ComponentWithStyleProps.displayName = `withStyleProps(${
-    Component.displayName ?? Component.name
-  })`
-
-  return ComponentWithStyleProps as any
-}

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

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

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

@@ -1,48 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-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

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

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

@@ -1,26 +0,0 @@
-import { act, renderHook, waitFor } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { useLongPress } from '../useLongPress'
-
-describe('useLongPress', () => {
-  it('useLongPress returns typeof UseLongPressResult', () => {
-    const { result } = renderHook(() => useLongPress())
-    expect(result.current.style.touchAction).toBe('none')
-    expect(result.current.isEnabled).toBe(true)
-    expect(result.current.isLongPressed).toBe(false)
-    expect(result.current.isTapped).toBe(false)
-  })
-
-  it('when callling disable, isEnabled true', () => {
-    const { result } = renderHook(() => useLongPress())
-    act(() => result.current.enable())
-    waitFor(() => expect(result.current.isEnabled).toBe(true))
-  })
-
-  it('when callling disable, isEnabled false', () => {
-    const { result } = renderHook(() => useLongPress())
-    act(() => result.current.disable())
-    waitFor(() => expect(result.current.isEnabled).toBe(false))
-  })
-})

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

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

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

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