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

package/src/organisms/CommandText/index.tsx

@@ -1,280 +0,0 @@
-import pick from 'lodash/pick'
-import { css } from 'styled-components'
-
-import { LegacyStyledText, StyledText } from '../../atoms'
-import { Flex } from '../../primitives'
-import { ALIGN_CENTER, DIRECTION_COLUMN } from '../../styles'
-import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-import { useCommandTextString } from './useCommandTextString'
-
-import type { ComponentProps } from 'react'
-import type {
-  LabwareDefinition,
-  RobotType,
-  RunTimeCommand,
-} from '@opentrons/shared-data'
-import type { StyleProps } from '../../primitives'
-import type { CommandTextData } from '../ProtocolTimelineScrubber/types'
-import type {
-  GetTCRunExtendedProfileCommandTextResult,
-  GetTCRunProfileCommandTextResult,
-} from './useCommandTextString'
-
-export * from './useCommandTextString'
-interface LegacySTProps {
-  as?: ComponentProps<typeof LegacyStyledText>['as']
-  modernStyledTextDefaults?: false
-}
-
-interface ModernSTProps {
-  desktopStyle?: ComponentProps<typeof StyledText>['desktopStyle']
-  oddStyle?: ComponentProps<typeof StyledText>['oddStyle']
-  modernStyledTextDefaults: true
-}
-
-type STProps = LegacySTProps | ModernSTProps
-
-interface BaseProps extends StyleProps {
-  command: RunTimeCommand
-  allRunDefs: LabwareDefinition[]
-  commandTextData: CommandTextData
-  robotType: RobotType
-  isOnDevice?: boolean
-  propagateCenter?: boolean
-  propagateTextLimit?: boolean
-}
-export function CommandText(props: BaseProps & STProps): JSX.Element | null {
-  const commandText = useCommandTextString({
-    ...props,
-  })
-
-  switch (commandText.kind) {
-    case 'thermocycler/runProfile': {
-      return (
-        <ThermocyclerRunProfile
-          {...props}
-          commandText={commandText.commandText}
-          stepTexts={commandText.stepTexts}
-        />
-      )
-    }
-    case 'thermocycler/runExtendedProfile': {
-      return (
-        <ThermocyclerRunExtendedProfile
-          {...props}
-          commandText={commandText.commandText}
-          profileElementTexts={commandText.profileElementTexts}
-        />
-      )
-    }
-    default: {
-      return (
-        <CommandStyledText {...props}>
-          {commandText.commandText}
-        </CommandStyledText>
-      )
-    }
-  }
-}
-
-const forwardSTProps = (props: STProps): STProps =>
-  pick(props, ['as', 'oddStyle', 'desktopStyle', 'modernStyledTextDefaults'])
-
-const isModernSTProps = (props: STProps): props is ModernSTProps =>
-  props.hasOwnProperty('desktopStyle') ||
-  props.hasOwnProperty('oddStyle') ||
-  !!props.modernStyledTextDefaults
-
-function CommandStyledText(
-  props: STProps & {
-    children: JSX.Element[] | JSX.Element | string
-  } & StyleProps
-): JSX.Element {
-  if (isModernSTProps(props)) {
-    return (
-      <StyledText
-        desktopStyle={props.desktopStyle ?? 'bodyDefaultRegular'}
-        oddStyle={props.oddStyle ?? 'bodyTextRegular'}
-        {...props}
-      >
-        {props.children}
-      </StyledText>
-    )
-  } else {
-    return (
-      <LegacyStyledText as={props.as ?? 'p'} {...props}>
-        {props.children}
-      </LegacyStyledText>
-    )
-  }
-}
-
-const shouldPropagateCenter = (
-  propagateCenter: boolean,
-  isOnDevice?: boolean
-): boolean => isOnDevice === true || propagateCenter
-const shouldPropagateTextLimit = (
-  propagateTextLimit: boolean,
-  isOnDevice?: boolean
-): boolean => isOnDevice === true || propagateTextLimit
-
-type ThermocyclerRunProfileProps = BaseProps &
-  STProps &
-  Omit<GetTCRunProfileCommandTextResult, 'kind'>
-
-function ThermocyclerRunProfile(
-  props: ThermocyclerRunProfileProps
-): JSX.Element {
-  const {
-    isOnDevice,
-    propagateCenter = false,
-    propagateTextLimit = false,
-    commandText,
-    stepTexts,
-    ...styleProps
-  } = props
-
-  // TODO(sfoster): Command sometimes wraps this in a cascaded display: -webkit-box
-  // to achieve multiline text clipping with an automatically inserted ellipsis, which works
-  // everywhere except for here where it overrides this property in the flex since this is
-  // the only place where CommandText uses a flex.
-  // The right way to handle this is probably to take the css that's in Command and make it
-  // live here instead, but that should be done in a followup since it would touch everything.
-  // See also the margin-left on the <li>s, which is needed to prevent their bullets from
-  // clipping if a container set overflow: hidden.
-  return (
-    <Flex
-      flexDirection={DIRECTION_COLUMN}
-      {...styleProps}
-      alignItems={
-        shouldPropagateCenter(propagateCenter, isOnDevice)
-          ? ALIGN_CENTER
-          : undefined
-      }
-      css={`
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-          display: flex !important;
-        } ;
-      `}
-    >
-      <CommandStyledText
-        {...forwardSTProps(props)}
-        marginBottom={SPACING.spacing4}
-        {...styleProps}
-      >
-        {commandText}
-      </CommandStyledText>
-      <CommandStyledText
-        {...forwardSTProps(props)}
-        marginLeft={SPACING.spacing16}
-      >
-        <ul>
-          {shouldPropagateTextLimit(propagateTextLimit, isOnDevice) ? (
-            <li css={LIST_STYLE}>{stepTexts[0]}</li>
-          ) : (
-            stepTexts.map((step: string, index: number) => (
-              <li css={LIST_STYLE} key={index}>
-                {' '}
-                {step}
-              </li>
-            ))
-          )}
-        </ul>
-      </CommandStyledText>
-    </Flex>
-  )
-}
-
-type ThermocyclerRunExtendedProfileProps = BaseProps &
-  STProps &
-  Omit<GetTCRunExtendedProfileCommandTextResult, 'kind'>
-
-function ThermocyclerRunExtendedProfile(
-  props: ThermocyclerRunExtendedProfileProps
-): JSX.Element {
-  const {
-    isOnDevice,
-    propagateCenter = false,
-    propagateTextLimit = false,
-    commandText,
-    profileElementTexts,
-    ...styleProps
-  } = props
-
-  // TODO(sfoster): Command sometimes wraps this in a cascaded display: -webkit-box
-  // to achieve multiline text clipping with an automatically inserted ellipsis, which works
-  // everywhere except for here where it overrides this property in the flex since this is
-  // the only place where CommandText uses a flex.
-  // The right way to handle this is probably to take the css that's in Command and make it
-  // live here instead, but that should be done in a followup since it would touch everything.
-  // See also the margin-left on the <li>s, which is needed to prevent their bullets from
-  // clipping if a container set overflow: hidden.
-  return (
-    <Flex
-      flexDirection={DIRECTION_COLUMN}
-      {...styleProps}
-      alignItems={
-        shouldPropagateCenter(propagateCenter, isOnDevice)
-          ? ALIGN_CENTER
-          : undefined
-      }
-      css={`
-        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-          display: flex !important;
-        } ;
-      `}
-    >
-      <CommandStyledText
-        {...forwardSTProps(props)}
-        marginBottom={SPACING.spacing4}
-        {...styleProps}
-      >
-        {commandText}
-      </CommandStyledText>
-      <CommandStyledText
-        {...forwardSTProps(props)}
-        marginLeft={SPACING.spacing16}
-      >
-        <ul>
-          {shouldPropagateTextLimit(propagateTextLimit, isOnDevice) ? (
-            <li css={LIST_STYLE}>
-              {profileElementTexts[0].kind === 'step'
-                ? profileElementTexts[0].stepText
-                : profileElementTexts[0].cycleText}
-            </li>
-          ) : (
-            profileElementTexts.map((element, index: number) =>
-              element.kind === 'step' ? (
-                <li css={LIST_STYLE} key={`tc-outer-step-${index}`}>
-                  {' '}
-                  {element.stepText}
-                </li>
-              ) : (
-                <li css={LIST_STYLE} key={`tc-outer-step-${index}`}>
-                  {element.cycleText}
-                  <ul>
-                    {element.stepTexts.map(
-                      ({ stepText }, stepIndex: number) => (
-                        <li
-                          css={LIST_STYLE}
-                          key={`tc-inner-step-${index}.${stepIndex}`}
-                        >
-                          {' '}
-                          {stepText}
-                        </li>
-                      )
-                    )}
-                  </ul>
-                </li>
-              )
-            )
-          )}
-        </ul>
-      </CommandStyledText>
-    </Flex>
-  )
-}
-
-const LIST_STYLE = css`
-  margin-left: ${SPACING.spacing4};
-`

package/src/organisms/CommandText/useCommandTextString/index.ts

@@ -1,338 +0,0 @@
-import { useTranslation } from 'react-i18next'
-
-import * as utils from './utils'
-
-import type { TFunction } from 'i18next'
-import type {
-  LabwareDefinition,
-  RobotType,
-  RunTimeCommand,
-} from '@opentrons/shared-data'
-import type { CommandTextData } from '../../ProtocolTimelineScrubber/types'
-import type {
-  GetDirectTranslationCommandText,
-  TCProfileCycleText,
-  TCProfileStepText,
-} from './utils'
-
-export * from './utils'
-
-export interface UseCommandTextStringParams {
-  command: RunTimeCommand | null
-  allRunDefs: LabwareDefinition[]
-  commandTextData: CommandTextData | null
-  robotType: RobotType
-}
-
-export type GetCommandText = UseCommandTextStringParams & { t: TFunction }
-export interface GetGenericCommandTextResult {
-  kind: 'generic'
-  /* The actual command text. Ex "Homing all gantry, pipette, and plunger axes" */
-  commandText: string
-}
-export interface GetTCRunProfileCommandTextResult {
-  kind: 'thermocycler/runProfile'
-  commandText: string
-  /* The TC run profile steps.  */
-  stepTexts: string[]
-}
-export interface GetTCRunExtendedProfileCommandTextResult {
-  kind: 'thermocycler/runExtendedProfile'
-  commandText: string
-  profileElementTexts: Array<TCProfileStepText | TCProfileCycleText>
-}
-export type GetCommandTextResult =
-  | GetGenericCommandTextResult
-  | GetTCRunProfileCommandTextResult
-  | GetTCRunExtendedProfileCommandTextResult
-
-// TODO(jh, 07-18-24): Move the testing that covers this from CommandText to a new file, and verify that all commands are
-// properly tested.
-
-// Get the full user-facing command text string from a given command.
-export function useCommandTextString(
-  params: UseCommandTextStringParams
-): GetCommandTextResult {
-  const { command } = params
-  const { t } = useTranslation(['protocol_command_text', 'branded'])
-
-  const fullParams = { ...params, t }
-
-  switch (command?.commandType) {
-    case 'touchTip':
-    case 'home':
-    case 'savePosition':
-    case 'magneticModule/engage':
-    case 'magneticModule/disengage':
-    case 'temperatureModule/deactivate':
-    case 'thermocycler/waitForBlockTemperature':
-    case 'thermocycler/waitForLidTemperature':
-    case 'thermocycler/openLid':
-    case 'thermocycler/closeLid':
-    case 'thermocycler/deactivateBlock':
-    case 'thermocycler/deactivateLid':
-    case 'thermocycler/awaitProfileComplete':
-    case 'heaterShaker/deactivateHeater':
-    case 'heaterShaker/openLabwareLatch':
-    case 'heaterShaker/closeLabwareLatch':
-    case 'heaterShaker/deactivateShaker':
-    case 'heaterShaker/waitForTemperature':
-      return {
-        kind: 'generic',
-        commandText: utils.getDirectTranslationCommandText(
-          fullParams as GetDirectTranslationCommandText
-        ),
-      }
-
-    case 'aspirate':
-    case 'aspirateInPlace':
-    case 'dispense':
-    case 'dispenseInPlace':
-    case 'blowout':
-    case 'blowOutInPlace':
-    case 'dropTip':
-    case 'dropTipInPlace':
-    case 'pickUpTip':
-    case 'airGapInPlace':
-    case 'sealPipetteToTip':
-    case 'unsealPipetteFromTip':
-    case 'pressureDispense':
-      return {
-        kind: 'generic',
-        commandText: utils.getPipettingCommandText(fullParams),
-      }
-
-    case 'loadLabware':
-    case 'reloadLabware':
-    case 'loadLid':
-    case 'loadLidStack':
-    case 'loadPipette':
-    case 'loadModule':
-    case 'loadLiquid':
-    case 'loadLiquidClass':
-      return {
-        kind: 'generic',
-        commandText: utils.getLoadCommandText(fullParams),
-      }
-
-    case 'liquidProbe':
-    case 'tryLiquidProbe':
-      return {
-        kind: 'generic',
-        commandText: utils.getLiquidProbeCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'temperatureModule/setTargetTemperature':
-    case 'temperatureModule/waitForTemperature':
-    case 'thermocycler/setTargetBlockTemperature':
-    case 'thermocycler/setTargetLidTemperature':
-    case 'heaterShaker/setTargetTemperature':
-      return {
-        kind: 'generic',
-        commandText: utils.getTemperatureCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-    case 'absorbanceReader/openLid':
-    case 'absorbanceReader/closeLid':
-    case 'absorbanceReader/initialize':
-    case 'absorbanceReader/read':
-      return {
-        kind: 'generic',
-        commandText: utils.getAbsorbanceReaderCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-    case 'flexStacker/retrieve':
-    case 'flexStacker/store':
-    case 'flexStacker/setStoredLabware':
-    case 'flexStacker/empty':
-    case 'flexStacker/fill':
-      return {
-        kind: 'generic',
-        commandText: utils.getFlexStackerCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-    case 'thermocycler/runProfile':
-      return utils.getTCRunProfileCommandText({ ...fullParams, command })
-
-    case 'thermocycler/runExtendedProfile':
-      return utils.getTCRunExtendedProfileCommandText({
-        ...fullParams,
-        command,
-      })
-
-    case 'heaterShaker/setAndWaitForShakeSpeed':
-      return {
-        kind: 'generic',
-        commandText: utils.getHSShakeSpeedCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'moveToSlot':
-      return {
-        kind: 'generic',
-        commandText: utils.getMoveToSlotCommandText({ ...fullParams, command }),
-      }
-
-    case 'moveRelative':
-      return {
-        kind: 'generic',
-        commandText: utils.getMoveRelativeCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'moveToCoordinates':
-      return {
-        kind: 'generic',
-        commandText: utils.getMoveToCoordinatesCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'moveToWell':
-      return {
-        kind: 'generic',
-        commandText: utils.getMoveToWellCommandText({ ...fullParams, command }),
-      }
-
-    case 'moveLabware':
-      return {
-        kind: 'generic',
-        commandText: utils.getMoveLabwareCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'configureForVolume':
-      return {
-        kind: 'generic',
-        commandText: utils.getConfigureForVolumeCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'configureNozzleLayout':
-      return {
-        kind: 'generic',
-        commandText: utils.getConfigureNozzleLayoutCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'prepareToAspirate':
-      return {
-        kind: 'generic',
-        commandText: utils.getPrepareToAspirateCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'getNextTip':
-      return {
-        kind: 'generic',
-        commandText: t('get_next_tip'),
-      }
-
-    case 'moveToAddressableArea':
-      return {
-        kind: 'generic',
-        commandText: utils.getMoveToAddressableAreaCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'moveToAddressableAreaForDropTip':
-      return {
-        kind: 'generic',
-        commandText: utils.getMoveToAddressableAreaForDropTipCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'waitForDuration':
-      return {
-        kind: 'generic',
-        commandText: utils.getWaitForDurationCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'pause': // legacy pause command
-    case 'waitForResume':
-      return {
-        kind: 'generic',
-        commandText: utils.getWaitForResumeCommandText({
-          ...fullParams,
-          command,
-        }),
-      }
-
-    case 'delay':
-      return {
-        kind: 'generic',
-        commandText: utils.getDelayCommandText({ ...fullParams, command }),
-      }
-
-    case 'comment':
-      return {
-        kind: 'generic',
-        commandText: utils.getCommentCommandText({ ...fullParams, command }),
-      }
-
-    case 'custom':
-      return {
-        kind: 'generic',
-        commandText: utils.getCustomCommandText({ ...fullParams, command }),
-      }
-
-    case 'setRailLights':
-      return {
-        kind: 'generic',
-        commandText: utils.getRailLightsCommandText({ ...fullParams, command }),
-      }
-
-    case 'robot/moveTo':
-    case 'robot/moveAxesTo':
-    case 'robot/moveAxesRelative':
-    case 'robot/openGripperJaw':
-    case 'robot/closeGripperJaw':
-      return {
-        kind: 'generic',
-        commandText: utils.getRobotCommandText({ ...fullParams, command }),
-      }
-
-    case undefined:
-    case null:
-      return { kind: 'generic', commandText: '' }
-
-    default:
-      console.warn(
-        'CommandText encountered a command with an unrecognized commandType: ',
-        command
-      )
-      return {
-        kind: 'generic',
-        commandText: utils.getUnknownCommandText({ ...fullParams, command }),
-      }
-  }
-}

package/src/organisms/CommandText/useCommandTextString/utils/__tests__/formatDuration.test.tsx

@@ -1,93 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { formatDuration, formatDurationLabeled } from '../formatDuration'
-
-describe('formatDuration', () => {
-  it('should format a duration', () => {
-    const duration = {
-      hours: 2,
-      minutes: 40,
-      seconds: 2,
-    }
-
-    const expected = '02:40:02'
-
-    expect(formatDuration(duration)).toEqual(expected)
-  })
-
-  it('should format a short duration with plenty of zeroes', () => {
-    const duration = {
-      seconds: 2,
-    }
-
-    const expected = '00:00:02'
-
-    expect(formatDuration(duration)).toEqual(expected)
-  })
-
-  it('should format a longer duration', () => {
-    const duration = {
-      days: 3,
-      hours: 2,
-      minutes: 40,
-      seconds: 2,
-    }
-
-    const expected = '74:40:02'
-
-    expect(formatDuration(duration)).toEqual(expected)
-  })
-
-  it('should format a non-normalized duration', () => {
-    const duration = {
-      seconds: 360002,
-    }
-    const expected = '100:00:02'
-    expect(formatDuration(duration)).toEqual(expected)
-  })
-})
-
-describe('formatDurationLabeled', () => {
-  it('should format a duration', () => {
-    const duration = {
-      hours: 2,
-      minutes: 40,
-      seconds: 2,
-    }
-
-    const expected = '2h 40m 02s'
-
-    expect(formatDurationLabeled(duration)).toEqual(expected)
-  })
-
-  it('should format a short duration with plenty of zeroes', () => {
-    const duration = {
-      seconds: 2,
-    }
-
-    const expected = '0h 00m 02s'
-
-    expect(formatDurationLabeled(duration)).toEqual(expected)
-  })
-
-  it('should format a longer duration', () => {
-    const duration = {
-      days: 3,
-      hours: 2,
-      minutes: 40,
-      seconds: 2,
-    }
-
-    const expected = '74h 40m 02s'
-
-    expect(formatDurationLabeled(duration)).toEqual(expected)
-  })
-
-  it('should format a non-normalized duration', () => {
-    const duration = {
-      seconds: 360002,
-    }
-    const expected = '100h 00m 02s'
-    expect(formatDurationLabeled(duration)).toEqual(expected)
-  })
-})