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

package/src/tooltips/useHoverTooltip.ts

@@ -1,47 +0,0 @@
-import { useHover } from '../interaction-enhancers'
-import { useTooltip } from './useTooltip'
-
-import type { UseHoverTooltipOptions, UseHoverTooltipResult } from './types'
-
-const ENTER_DELAY_MS = 300
-const LEAVE_DELAY_MS = 0
-
-/**
- * Hook to position a tooltip component relative to a target component on hover.
- * Adds a default `enterDelay` of 300 ms before the tooltip will show
- *
- * @param {UseHoverTooltipOptions} [options={}] (change default options (see `useTooltip` and `useHover`))
- * @returns {UseHoverTooltipResult}
- * @example
- * ```js
- * import { useHoverTooltip, Tooltip } from '@opentrons/components'
- *
- * export function HelloWorld() {
- *   const [targetProps, tooltipProps] = useHoverTooltip()
- *
- *   return (
- *     <>
- *       <span {...targetProps}>Hello</span>
- *       <Tooltip {...tooltipProps}>World</Tooltip>
- *     </>
- *   )
- * }
- * ```
- */
-export function useHoverTooltip(
-  options: UseHoverTooltipOptions = {}
-): UseHoverTooltipResult {
-  const {
-    enterDelay = ENTER_DELAY_MS,
-    leaveDelay = LEAVE_DELAY_MS,
-    ...useTooltipOptions
-  } = options
-
-  const [targetProps, tooltipProps] = useTooltip(useTooltipOptions)
-  const [visible, hoverHandlers] = useHover({ enterDelay, leaveDelay })
-
-  return [
-    { ...targetProps, ...hoverHandlers },
-    { ...tooltipProps, visible },
-  ]
-}

package/src/tooltips/usePopper.ts

@@ -1,87 +0,0 @@
-import { useLayoutEffect, useRef } from 'react'
-import { createPopper } from '@popperjs/core'
-
-import type {
-  HandleStateUpdate,
-  PopperModifer,
-  PopperOptions,
-  UsePopperOptions,
-  UsePopperResult,
-} from './types'
-
-const DISABLED_APPLY_STYLES_MODIFIER = {
-  name: 'applyStyles',
-  enabled: false,
-}
-
-const makeUpdateStateModifier = (
-  handleStateUpdate: HandleStateUpdate
-): PopperModifer<{}> => ({
-  name: 'updateUsePopperState',
-  enabled: true,
-  phase: 'write',
-  fn: ({ state }) => {
-    handleStateUpdate(state.placement, state.styles)
-  },
-})
-
-const makeOffsetModifier = (offset: number): Partial<PopperModifer<{}>> => ({
-  name: 'offset',
-  options: { offset: [0, offset] },
-})
-
-const makeArrowModifier = (arrow: Element): Partial<PopperModifer<{}>> => ({
-  name: 'arrow',
-  options: { element: arrow },
-})
-
-export function usePopper(options: UsePopperOptions): UsePopperResult {
-  const {
-    target,
-    tooltip,
-    arrow,
-    placement,
-    strategy,
-    offset,
-    onStateUpdate,
-  } = options
-
-  const popperRef = useRef<UsePopperResult | null>(null)
-
-  // useLayoutEffect instead of useEffect to avoid positioning flash
-  useLayoutEffect(() => {
-    if (target && tooltip) {
-      const options: Partial<PopperOptions> &
-        Pick<PopperOptions, 'modifiers'> = {
-        modifiers: [
-          DISABLED_APPLY_STYLES_MODIFIER,
-          makeUpdateStateModifier(onStateUpdate),
-        ],
-      }
-
-      if (offset != null) {
-        options.modifiers.push(makeOffsetModifier(offset))
-      }
-
-      if (arrow) {
-        options.modifiers.push(makeArrowModifier(arrow))
-      }
-
-      if (placement != null) options.placement = placement
-      if (strategy != null) options.strategy = strategy
-
-      const popperInstance = createPopper(target, tooltip, options)
-
-      // immediately force a synchronous update to avoid positioning flash
-      popperInstance.forceUpdate()
-      popperRef.current = popperInstance
-
-      return () => {
-        popperInstance.destroy()
-        popperRef.current = null
-      }
-    }
-  }, [target, tooltip, arrow, placement, strategy, offset, onStateUpdate])
-
-  return popperRef.current
-}

package/src/tooltips/useTooltip.ts

@@ -1,101 +0,0 @@
-import { useCallback, useRef, useState } from 'react'
-import uniqueId from 'lodash/uniqueId'
-
-import * as Styles from './styles'
-import { usePopper } from './usePopper'
-
-import type { CSSProperties } from 'react'
-import type { Placement, UseTooltipOptions, UseTooltipResult } from './types'
-
-interface TooltipState {
-  placement: Placement | null
-  tooltipStyle: CSSProperties
-  arrowStyle: CSSProperties
-}
-
-const TOOLTIP_ID_PREFIX = 'Tooltip__'
-
-/**
- * Hook to position a tooltip component relative to a target component
- *
- * @param {UseTooltipOptions} [options={}] (change the default `position`, `strategy`, or `offset` of the tooltip)
- * @returns {UseTooltipResult}
- * @example
- * ```js
- * import {
- *   useTooltip,
- *   Tooltip,
- *   TOOLTIP_TOP,
- *   TOOLTIP_FIXED
- * } from '@opentrons/components'
- *
- * export function HelloWorld() {
- *   const [targetProps, tooltipProps] = useTooltip({
- *     position: TOOLTIP_TOP,
- *     strategy: TOOLTIP_FIXED
- *   })
- *
- *   return (
- *     <>
- *       <span {...targetProps}>Hello</span>
- *       <Tooltip visible={true} {...tooltipProps}>World</Tooltip>
- *     </>
- *   )
- * }
- * ```
- */
-export function useTooltip(options: UseTooltipOptions = {}): UseTooltipResult {
-  const { placement, strategy, offset = Styles.TOOLTIP_OFFSET_PX } = options
-  const tooltipId = useRef(uniqueId(TOOLTIP_ID_PREFIX)).current
-  const [target, targetRef] = useState<Element | null>(null)
-  const [tooltip, tooltipRef] = useState<HTMLElement | null>(null)
-  const [arrow, arrowRef] = useState<HTMLElement | null>(null)
-  const [tooltipState, setTooltipState] = useState<TooltipState>({
-    placement: null,
-    tooltipStyle: Styles.INITIAL_TOOLTIP_STYLE,
-    arrowStyle: Styles.INITIAL_ARROW_STYLE,
-  })
-
-  const onStateUpdate = useCallback(
-    (
-      placement: Placement | null,
-      styles: {
-        popper?: CSSProperties
-        arrow?: CSSProperties
-      }
-    ) => {
-      setTooltipState({
-        placement,
-        tooltipStyle: styles.popper ?? Styles.INITIAL_TOOLTIP_STYLE,
-        arrowStyle: styles.arrow ?? Styles.INITIAL_ARROW_STYLE,
-      })
-    },
-    []
-  )
-
-  usePopper({
-    target,
-    tooltip,
-    arrow,
-    placement,
-    strategy,
-    offset,
-    onStateUpdate,
-  })
-
-  const targetProps = {
-    ref: targetRef,
-    'aria-describedby': tooltipId,
-  }
-
-  const tooltipProps = {
-    id: tooltipId,
-    ref: tooltipRef,
-    style: tooltipState.tooltipStyle,
-    arrowStyle: tooltipState.arrowStyle,
-    placement: tooltipState.placement,
-    arrowRef,
-  }
-
-  return [targetProps, tooltipProps]
-}

package/src/ui-style-constants/animation.ts

@@ -1 +0,0 @@
-export const easeInDefault = 'all 150ms ease-in' as const

package/src/ui-style-constants/index.ts

@@ -1,5 +0,0 @@
-export * as RESPONSIVENESS from './responsiveness'
-export * as SPACING from './spacing'
-export * as TYPOGRAPHY from './typography'
-export * as VIEWPORT from './viewport'
-export * as ANIMATION from './animation'

package/src/ui-style-constants/responsiveness.ts

@@ -1,15 +0,0 @@
-// TODO(BC, 2023-04-20): this is media not sufficient to determine that we are on the
-// touch-only On Device Display of the flex. For development purposes, we are omitting
-// the (hover: none) to allow for off device testing. The hover rule should be reintroduced
-// before the release of this code to prevent Funny desktop app behavior when the viewport
-// is precisely 600x1024
-export const touchscreenMediaQuerySpecs = '(height: 600px) and (width: 1024px)'
-
-// This needs to be recalculated on-render to work with storybook viewport settings, so
-// if you need to support both media types in js use the function
-export const isTouchscreenDynamic = (): boolean =>
-  typeof window === 'object' && window.matchMedia != null
-    ? window.matchMedia(touchscreenMediaQuerySpecs).matches
-    : false
-
-export const isTouchscreen = isTouchscreenDynamic()

package/src/ui-style-constants/spacing.ts

@@ -1,18 +0,0 @@
-export const spacing2 = '0.125rem' as const // 2px
-export const spacing4 = '0.25rem' as const // 4px
-export const spacing6 = '0.375rem' as const // 6px
-export const spacing8 = '0.5rem' as const // 8px
-export const spacing10 = '0.625rem' as const // 10px
-export const spacing12 = '0.75rem' as const // 12px
-export const spacing16 = '1rem' as const // 16px
-export const spacing20 = '1.25rem' as const // 20px
-export const spacing24 = '1.5rem' as const // 24px
-export const spacing32 = '2rem' as const // 32px
-export const spacing40 = '2.5rem' as const // 40px
-export const spacing44 = '2.75rem' as const // 44px
-export const spacing48 = '3rem' as const // 48px
-export const spacing60 = '3.75rem' as const // 60px
-export const spacing68 = '4.25rem' as const // 68px
-export const spacing80 = '5rem' as const // 80px
-export const spacing120 = '7.5rem' as const // 120px
-export const spacingAuto = 'auto' as const // auto

package/src/ui-style-constants/typography.ts

@@ -1,259 +0,0 @@
-import { css } from 'styled-components'
-
-import { COLORS } from '../helix-design-system'
-
-// Font Sizes
-export const fontSize80 = '5rem' // 80px
-export const fontSize38 = '2.375rem' // 38px
-export const fontSize32 = '2rem' // 32px
-export const fontSize28 = '1.75rem' // 28px
-export const fontSize22 = '1.375rem' // 22px
-export const fontSize20 = '1.25rem' // 20px
-export const fontSizeH1 = '1.188rem' // 19px
-export const fontSizeH2 = '0.9375rem' // 15px
-export const fontSizeH3 = '0.875rem' // 14px
-export const fontSizeH4 = '0.813rem' //  13px
-export const fontSizeH6 = '0.563rem' // 9px
-export const fontSizeP = '0.8125rem' // 13px
-export const fontSizeLabel = '0.6875rem' // 11px
-export const fontSizeCaption = '0.625rem' // 10px
-
-// Font Weights
-export const fontWeightBold = 700
-export const fontWeightSemiBold = 600
-export const fontWeightRegular = 400
-export const fontWeightLight = 300
-
-// Line Heights
-export const lineHeight96 = '6rem' // 96px
-export const lineHeight48 = '3rem' // 48px
-export const lineHeight42 = '2.625rem' // 42px
-export const lineHeight36 = '2.25rem' // 36px
-export const lineHeight28 = '1.75rem' // 28px
-export const lineHeight24 = '1.5rem' // 24px
-export const lineHeight20 = '1.25rem' // 20px
-export const lineHeight18 = '1.125rem' // 18px
-export const lineHeight16 = '1rem' // 16px
-export const lineHeight12 = '0.75rem' // 12px
-export const lineHeightNormal = 'normal' // normal
-
-// font styles
-export const fontStyleNormal = 'normal'
-export const fontStyleItalic = 'italic'
-
-// text transforms
-export const textTransformNone = 'none'
-export const textTransformCapitalize = 'capitalize'
-export const textTransformUppercase = 'uppercase'
-export const textTransformLowercase = 'lowercase'
-
-export const textAlignLeft = 'left'
-export const textAlignRight = 'right'
-export const textAlignCenter = 'center'
-export const textAlignJustify = 'justify'
-
-// text decoration
-export const textDecorationUnderline = 'underline'
-
-// Default font styles, color agnostic for first pass
-export const h1Default = css`
-  font-size: ${fontSizeH1};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight24};
-`
-
-export const h2Regular = css`
-  font-size: ${fontSizeH2};
-  font-weight: ${fontWeightRegular};
-  line-height: ${lineHeight20};
-`
-
-export const h2SemiBold = css`
-  font-size: ${fontSizeH2};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight20};
-`
-export const h3Regular = css`
-  font-size: ${fontSizeH3};
-  font-weight: ${fontWeightRegular};
-  line-height: ${lineHeight20};
-`
-
-export const h3SemiBold = css`
-  font-size: ${fontSizeH3};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight20};
-`
-
-export const h6Default = css`
-  font-size: ${fontSizeH6};
-  font-weight: ${fontWeightRegular};
-  line-height: ${lineHeight12};
-  text-transform: ${textTransformUppercase};
-`
-
-export const h6SemiBold = css`
-  font-size: ${fontSizeH6};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight12};
-`
-
-export const pRegular = css`
-  font-size: ${fontSizeP};
-  font-weight: ${fontWeightRegular};
-  line-height: ${lineHeight20};
-`
-
-export const pSemiBold = css`
-  font-size: ${fontSizeP};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight20};
-`
-
-export const labelRegular = css`
-  font-size: ${fontSizeLabel};
-  font-weight: ${fontWeightRegular};
-  line-height: ${lineHeight12};
-`
-
-export const labelSemiBold = css`
-  font-size: ${fontSizeLabel};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight12};
-`
-
-export const linkPSemiBold = css`
-  font-size: ${fontSizeP};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight20};
-  color: ${COLORS.blue50};
-
-  &:hover {
-    color: ${COLORS.blue55};
-  }
-`
-
-// font styles for touchscreen
-export const level1Header = css`
-  font-size: ${fontSize80};
-  font-weight: ${fontWeightBold};
-  line-height: ${lineHeight96};
-`
-
-export const level2HeaderBold = css`
-  font-size: ${fontSize38};
-  line-height: ${lineHeight48};
-  font-weight: ${fontWeightBold};
-`
-
-export const level2HeaderSemiBold = css`
-  font-size: ${fontSize38};
-  line-height: ${lineHeight48};
-  font-weight: ${fontWeightSemiBold};
-`
-
-export const level2HeaderRegular = css`
-  font-size: ${fontSize38};
-  line-height: ${lineHeight48};
-  font-weight: ${fontWeightRegular};
-`
-
-export const level3HeaderBold = css`
-  font-size: ${fontSize32};
-  line-height: ${lineHeight42};
-  font-weight: ${fontWeightBold};
-`
-
-export const level3HeaderSemiBold = css`
-  font-size: ${fontSize32};
-  line-height: ${lineHeight42};
-  font-weight: ${fontWeightSemiBold};
-`
-
-export const level3HeaderRegular = css`
-  font-size: ${fontSize32};
-  line-height: ${lineHeight42};
-  font-weight: ${fontWeightRegular};
-`
-
-export const level4HeaderBold = css`
-  font-size: ${fontSize28};
-  line-height: ${lineHeight36};
-  font-weight: ${fontWeightBold};
-`
-
-export const level4HeaderSemiBold = css`
-  font-size: ${fontSize28};
-  line-height: ${lineHeight36};
-  font-weight: ${fontWeightSemiBold};
-`
-
-export const level4HeaderRegular = css`
-  font-size: ${fontSize28};
-  line-height: ${lineHeight36};
-  font-weight: ${fontWeightRegular};
-`
-
-export const bodyTextBold = css`
-  font-size: ${fontSize22};
-  line-height: ${lineHeight28};
-  font-weight: ${fontWeightBold};
-`
-
-export const bodyTextSemiBold = css`
-  font-size: ${fontSize22};
-  line-height: ${lineHeight28};
-  font-weight: ${fontWeightSemiBold};
-`
-
-export const bodyTextRegular = css`
-  font-size: ${fontSize22};
-  line-height: ${lineHeight28};
-  font-weight: ${fontWeightRegular};
-`
-
-export const smallBodyTextBold = css`
-  font-size: ${fontSize20};
-  line-height: ${lineHeight24};
-  font-weight: ${fontWeightBold};
-`
-
-export const smallBodyTextSemiBold = css`
-  font-size: ${fontSize20};
-  line-height: ${lineHeight24};
-  font-weight: ${fontWeightSemiBold};
-`
-
-export const smallBodyTextRegular = css`
-  font-size: ${fontSize20};
-  line-height: ${lineHeight24};
-  font-weight: ${fontWeightRegular};
-`
-
-export const darkLinkH4SemiBold = css`
-  font-size: ${fontSizeH4};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight20};
-  color: ${COLORS.grey50};
-  &:hover {
-    color: ${COLORS.black90};
-  }
-`
-
-export const darkLinkLabelSemiBold = css`
-  font-size: ${fontSizeLabel};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight20};
-  color: ${COLORS.grey60};
-  &:hover {
-    color: ${COLORS.black90};
-  }
-`
-
-export const darkLinkLabelSemiBoldDisabled = css`
-  font-size: ${fontSizeLabel};
-  font-weight: ${fontWeightSemiBold};
-  line-height: ${lineHeight20};
-  color: ${COLORS.grey60};
-  cursor: not-allowed;
-`

package/src/ui-style-constants/viewport.ts

@@ -1,18 +0,0 @@
-// Note (kk:08/29/2023) Needed this in this ts file to avoid check-js errors on CI
-const customViewports = {
-  onDeviceDisplay: {
-    name: 'Touchscreen',
-    type: 'tablet',
-    styles: {
-      width: '1024px',
-      height: '600px',
-    },
-  },
-}
-
-export const touchScreenViewport = {
-  viewport: {
-    viewports: customViewports,
-    defaultViewport: 'onDeviceDisplay',
-  },
-}

package/src/utils.ts

@@ -1,56 +0,0 @@
-export const humanizeLabwareType = (labwareType: string): string => {
-  return labwareType.replace(/-|_/g, ' ')
-}
-
-export const wellNameSplit = (wellName: string): [string, string] => {
-  // Eg B9 => ['B', '9']
-  const raw = wellName.split(/(\D+)(\d+)/)
-
-  if (raw.length !== 4) {
-    throw Error('expected /\\D+\\d+/ regexp to split wellName, got ' + wellName)
-  }
-
-  const letters = raw[1]
-
-  if (letters.length !== 1) {
-    throw Error(
-      'expected 1 letter in wellName, got ' +
-        letters +
-        ' in wellName: ' +
-        wellName
-    )
-  }
-
-  const numbers = raw[2]
-
-  return [letters, numbers]
-}
-
-/**
- * Truncate a long string to display it
- * @example
- * truncateString('Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up, Amplify Tagmlo1234567ted', 88, 66);
- * Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up...fy Tagmlo1234567ted
- *
- * @param {string} text - A string param
- * @param {number} maxLength - A maximum length of display
- * @param {number} breakPoint - Optional A point to insert three dots
- *
- * @returns {string} Returns the truncated string
- */
-export function truncateString(
-  text: string,
-  maxLength: number,
-  breakPoint?: number
-): string {
-  const dots = '...'
-  if (text.length > maxLength)
-    if (breakPoint != null) {
-      return `${text.substring(0, breakPoint)}${dots}${text.slice(
-        breakPoint - maxLength + dots.length
-      )}`
-    } else {
-      return `${text.slice(0, maxLength - dots.length)}${dots}`
-    }
-  else return text
-}

package/tsconfig-data.json

@@ -1,13 +0,0 @@
-{
-    "extends": "../tsconfig-base.json",
-    "references": [],
-    "compilerOptions": {
-      "composite": true,
-      "emitDeclarationOnly": false,
-      "rootDir": "src",
-      "outDir": "lib"
-    },
-    "include": ["src/**/*.json", "vite.config.ts"],
-    "exclude": ["**/*.ts", "**/*.tsx"]
-  }
-  

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "extends": "../tsconfig-base.json",
-  "references": [
-    {
-      "path": "./tsconfig-data.json"
-    },
-    {
-      "path": "../shared-data"
-    },
-    {
-      "path": "../step-generation"
-    }
-  ],
-  "compilerOptions": {
-    "composite": true,
-    "rootDir": "src",
-    "outDir": "lib",
-  },
-  "include": ["typings", "src"],
-  "exclude": ["**/*.stories.tsx"]
-}

package/typings/css-module.d.ts

@@ -1,5 +0,0 @@
-declare module '*.css' {
-  const styles: { [key: string]: string }
-  // eslint-disable-next-line import/no-default-export
-  export default styles
-}

package/typings/global.d.ts

@@ -1 +0,0 @@
-import 'styled-components/cssprop'

package/typings/images.d.ts

@@ -1,10 +0,0 @@
-declare module '*.png' {
-  const image: string
-  // eslint-disable-next-line import/no-default-export
-  export default image
-}
-declare module '*.svg' {
-  const image: string
-  // eslint-disable-next-line import/no-default-export
-  export default image
-}