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

package/src/organisms/DeckLabelSet/DeckLabelSet.stories.tsx

@@ -1,48 +0,0 @@
-import { DeckLabelSet as DeckLabelSetComponent } from '.'
-import { BORDERS } from '../../helix-design-system'
-import { Flex } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const mockDeckLabels = [
-  {
-    isZoomed: false,
-    text: 'Label',
-    isSelected: false,
-    labelBorderRadius: BORDERS.borderRadius4,
-  },
-  {
-    isZoomed: false,
-    text: 'Label',
-    isSelected: false,
-    labelBorderRadius: BORDERS.borderRadius4,
-    isLast: true,
-  },
-]
-
-const meta: Meta<typeof DeckLabelSetComponent> = {
-  title: 'Helix/Organisms/DeckLabelSet',
-  component: DeckLabelSetComponent,
-  decorators: [
-    Story => (
-      <Flex padding={SPACING.spacing16} transform="scaleY(-1.0)">
-        <Story />
-      </Flex>
-    ),
-  ],
-}
-export default meta
-
-type Story = StoryObj<typeof DeckLabelSetComponent>
-
-export const DeckLabel: Story = {
-  args: {
-    // width and height from Figma
-    deckLabels: mockDeckLabels,
-    width: 31.9375 * 16,
-    height: 5.75 * 16,
-    x: 0,
-    y: 0,
-  },
-}

package/src/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.tsx

@@ -1,52 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { DeckLabelSet } from '..'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { DeckLabel } from '../../../molecules/DeckLabel'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-vi.mock('../../../molecules/DeckLabel')
-
-const mockDeckLabels = [
-  {
-    text: 'Label',
-    isSelected: false,
-    labelBorderRadius: BORDERS.borderRadius4,
-    isZoomed: true,
-  },
-  {
-    text: 'Label',
-    isSelected: false,
-    labelBorderRadius: BORDERS.borderRadius4,
-    isZoomed: true,
-  },
-]
-
-const render = (props: ComponentProps<typeof DeckLabelSet>) => {
-  return renderWithProviders(<DeckLabelSet {...props} />)
-}
-describe('DeckLabelSet', () => {
-  let props: ComponentProps<typeof DeckLabelSet>
-
-  beforeEach(() => {
-    props = {
-      x: 1,
-      y: 1,
-      width: 50,
-      height: 50,
-      deckLabels: mockDeckLabels,
-    }
-    vi.mocked(DeckLabel).mockReturnValue(<div>mock DeckLabels</div>)
-  })
-
-  it('should render blue border and DeckLabel', () => {
-    render(props)
-    expect(screen.getAllByText('mock DeckLabels').length).toBe(2)
-    const deckLabelSet = screen.getByTestId('DeckLabeSet')
-    expect(deckLabelSet).toHaveStyle(`border: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabelSet).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
-  })
-})

package/src/organisms/DeckLabelSet/index.tsx

@@ -1,126 +0,0 @@
-import { forwardRef } from 'react'
-import styled from 'styled-components'
-
-import { RobotCoordsForeignDiv } from '../../hardware-sim'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { DeckInfoLabel } from '../../molecules'
-import { DeckLabel } from '../../molecules/DeckLabel'
-import { Box } from '../../primitives'
-import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-
-import type { ForwardedRef } from 'react'
-import type { DeckLabelProps } from '../../molecules/DeckLabel'
-
-interface DeckLabelSetProps {
-  deckLabels: DeckLabelProps[]
-  x: number
-  y: number
-  width: number
-  height: number
-  invert?: boolean
-  showModuleIcon?: boolean
-}
-
-const DeckLabelSetComponent = (
-  props: DeckLabelSetProps,
-  ref: ForwardedRef<HTMLDivElement>
-): JSX.Element => {
-  const {
-    deckLabels,
-    x,
-    y,
-    width,
-    height,
-    invert = false,
-    showModuleIcon = false,
-  } = props
-
-  return (
-    <RobotCoordsForeignDiv
-      x={x}
-      y={y}
-      innerDivProps={{
-        style: {
-          transform: `rotate(180deg) scaleX(-1) scaleY(${invert ? '-1' : '1'})`,
-        },
-      }}
-    >
-      <Box position={POSITION_RELATIVE} width="100%" height="100%">
-        <StyledBox
-          width={width}
-          height={height}
-          isZoomed={deckLabels.length > 0 ? deckLabels[0].isZoomed : true}
-          data-testid="DeckLabeSet"
-        />
-        {showModuleIcon && (
-          <IconWrapper leftPosition={width - 16}>
-            <DeckInfoLabel
-              iconName="stacked"
-              highlight
-              transform="scale(0.75)"
-            />
-          </IconWrapper>
-        )}
-        <LabelContainer ref={ref}>
-          {deckLabels.length > 0
-            ? deckLabels.map((deckLabel, index) => (
-                <DeckLabel
-                  key={`DeckLabel_${index}`}
-                  maxWidth={`calc(${width}px - 8px)`}
-                  {...deckLabel}
-                  isLast={deckLabels.length - 1 === index}
-                />
-              ))
-            : null}
-        </LabelContainer>
-      </Box>
-    </RobotCoordsForeignDiv>
-  )
-}
-
-export const DeckLabelSet = forwardRef<HTMLDivElement, DeckLabelSetProps>(
-  DeckLabelSetComponent
-)
-
-interface StyledBoxProps {
-  isZoomed: boolean
-}
-
-const StyledBox = styled(Box)<StyledBoxProps>`
-  border-radius: ${BORDERS.borderRadius4};
-  border: ${({ isZoomed }) =>
-    isZoomed ? `1.5px solid ${COLORS.blue50}` : `3px solid ${COLORS.blue50}`};
-`
-
-const LabelContainer = styled.div`
-  padding-left: ${SPACING.spacing8};
-  & > *:not(:first-child):not(:last-child) {
-    border-bottom-right-radius: ${BORDERS.borderRadius4};
-    border-top-right-radius: ${BORDERS.borderRadius4};
-  }
-
-  & > *:first-child {
-    border-bottom-right-radius: ${BORDERS.borderRadius4};
-  }
-
-  & > *:not(:first-child) {
-    border-top-right-radius: ${BORDERS.borderRadius4};
-    border-bottom-right-radius: ${BORDERS.borderRadius4};
-  }
-
-  & > *:last-child {
-    border-bottom-left-radius: ${BORDERS.borderRadius4};
-  }
-`
-
-interface IconWrapperProps {
-  leftPosition: number
-}
-
-const IconWrapper = styled(Box)<IconWrapperProps>`
-  position: ${POSITION_ABSOLUTE};
-  top: -${SPACING.spacing8};
-  left: ${props => `${props.leftPosition}px`};
-  z-index: 3;
-`

package/src/organisms/FixtureOption/__tests__/FixtureOption.test.tsx

@@ -1,42 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { FixtureOption } from '../index'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof FixtureOption>) => {
-  return renderWithProviders(<FixtureOption {...props} />)
-}
-
-describe('FixtureOption', () => {
-  let props: ComponentProps<typeof FixtureOption>
-
-  it('should render text and buttons for desktop app', () => {
-    props = {
-      onClickHandler: vi.fn(),
-      optionName: 'mockOption',
-      buttonText: 'mockText',
-      isOnDevice: false,
-    }
-    render(props)
-    screen.getByText('mockOption')
-    screen.getByText('mockText')
-    fireEvent.click(screen.getByTestId('mockOption'))
-    expect(props.onClickHandler).toHaveBeenCalled()
-  })
-  it('should render text and buttons for odd', () => {
-    props = {
-      onClickHandler: vi.fn(),
-      optionName: 'mockOption',
-      buttonText: 'mockText',
-      isOnDevice: true,
-    }
-    render(props)
-    screen.getByText('mockOption')
-    screen.getByText('mockText')
-    fireEvent.click(screen.getByRole('button'))
-    expect(props.onClickHandler).toHaveBeenCalled()
-  })
-})

package/src/organisms/FixtureOption/index.tsx

@@ -1,92 +0,0 @@
-import styled from 'styled-components'
-
-import { TertiaryButton } from '../../atoms/buttons'
-import { StyledText } from '../../atoms/StyledText'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { Btn, Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  CURSOR_DEFAULT,
-  DIRECTION_ROW,
-  DISPLAY_FLEX,
-  JUSTIFY_SPACE_BETWEEN,
-} from '../../styles'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-import type { MouseEventHandler } from 'react'
-
-interface FixtureOptionProps {
-  onClickHandler: MouseEventHandler
-  optionName: string
-  buttonText: string
-  isOnDevice: boolean
-}
-export function FixtureOption(props: FixtureOptionProps): JSX.Element {
-  const { onClickHandler, optionName, buttonText, isOnDevice } = props
-  return isOnDevice ? (
-    <FixtureButtonODD onClick={onClickHandler}>
-      <StyledText
-        oddStyle="bodyTextRegular"
-        fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-      >
-        {optionName}
-      </StyledText>
-      <StyledText oddStyle="bodyTextRegular">{buttonText}</StyledText>
-    </FixtureButtonODD>
-  ) : (
-    <Flex
-      flexDirection={DIRECTION_ROW}
-      alignItems={ALIGN_CENTER}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
-      padding={`${SPACING.spacing8} ${SPACING.spacing16}`}
-      backgroundColor={COLORS.grey20}
-      borderRadius={BORDERS.borderRadius4}
-    >
-      <StyledText desktopStyle="bodyDefaultSemiBold">{optionName}</StyledText>
-      <TertiaryButton
-        buttonType="primary"
-        onClick={onClickHandler}
-        data-testid={optionName}
-      >
-        {buttonText}
-      </TertiaryButton>
-    </Flex>
-  )
-}
-
-export const FixtureButtonODD = styled(Btn)`
-  display: ${DISPLAY_FLEX};
-  background-color: ${COLORS.grey35};
-  justify-content: ${JUSTIFY_SPACE_BETWEEN};
-  flex-direction: ${DIRECTION_ROW};
-  align-items: ${ALIGN_CENTER};
-  cursor: ${CURSOR_DEFAULT};
-  border-radius: ${BORDERS.borderRadius16};
-  box-shadow: none;
-  padding: ${SPACING.spacing16} ${SPACING.spacing24};
-
-  &:focus {
-    background-color: ${COLORS.grey40};
-    box-shadow: none;
-  }
-
-  &:hover {
-    border: none;
-    box-shadow: none;
-    background-color: ${COLORS.grey35};
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 ${SPACING.spacing4} ${COLORS.blue50};
-    background-color: ${COLORS.grey35};
-  }
-
-  &:active {
-    background-color: ${COLORS.grey40};
-  }
-
-  &:disabled {
-    background-color: ${COLORS.grey35};
-    color: ${COLORS.grey50};
-  }
-`

package/src/organisms/ProtocolTimelineScrubber/CommandItem.tsx

@@ -1,115 +0,0 @@
-import { useState } from 'react'
-
-import { LegacyStyledText } from '../../atoms'
-import { COLORS } from '../../helix-design-system'
-import { Flex } from '../../primitives'
-import { ALIGN_FLEX_END, DIRECTION_COLUMN, OVERFLOW_SCROLL } from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-import { CommandText } from '../CommandText'
-import { COMMAND_WIDTH_PX } from './index'
-import { getCommandTextData } from './utils'
-
-import type {
-  CompletedProtocolAnalysis,
-  LabwareDefinition2,
-  ProtocolAnalysisOutput,
-  RobotType,
-  RunTimeCommand,
-} from '@opentrons/shared-data'
-
-interface CommandItemProps {
-  command: RunTimeCommand
-  index: number
-  currentCommandIndex: number
-  setCurrentCommandIndex: (index: number) => void
-  analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
-  robotType: RobotType
-  allRunDefs: LabwareDefinition2[]
-}
-export function CommandItem({
-  index,
-  command,
-  currentCommandIndex,
-  setCurrentCommandIndex,
-  analysis,
-  robotType,
-  allRunDefs,
-}: CommandItemProps): JSX.Element {
-  const [showDetails, setShowDetails] = useState(false)
-  const params: RunTimeCommand['params'] = command.params ?? {}
-  return (
-    <Flex
-      key={index}
-      backgroundColor={
-        index === currentCommandIndex
-          ? COLORS.blue35
-          : index < currentCommandIndex
-          ? '#00002222'
-          : COLORS.white
-      }
-      border={
-        index === currentCommandIndex
-          ? `1px solid ${COLORS.blue35}`
-          : '1px solid #000'
-      }
-      padding={SPACING.spacing4}
-      flexDirection={DIRECTION_COLUMN}
-      minWidth={`${COMMAND_WIDTH_PX}px`}
-      width={`${COMMAND_WIDTH_PX}px`}
-      height="6rem"
-      overflowX="hidden"
-      overflowY={OVERFLOW_SCROLL}
-      cursor="pointer"
-      onClick={() => {
-        setCurrentCommandIndex(index)
-      }}
-    >
-      <LegacyStyledText
-        onClick={() => {
-          setShowDetails(!showDetails)
-        }}
-        as="p"
-        alignSelf={ALIGN_FLEX_END}
-      >
-        {index + 1}
-      </LegacyStyledText>
-      <CommandText
-        command={command}
-        commandTextData={getCommandTextData(analysis)}
-        robotType={robotType}
-        allRunDefs={allRunDefs}
-      />
-      {showDetails
-        ? Object.entries(params).map(([key, value]) => (
-            <Flex
-              key={key}
-              flexDirection={DIRECTION_COLUMN}
-              marginBottom={SPACING.spacing2}
-              paddingLeft={SPACING.spacing2}
-            >
-              <LegacyStyledText as="label" marginRight={SPACING.spacing2}>
-                {key}:
-              </LegacyStyledText>
-              {value != null && typeof value === 'object' ? (
-                /*  eslint-disable @typescript-eslint/no-unsafe-argument */
-                Object.entries(value).map(([innerKey, innerValue]) => (
-                  <Flex key={innerKey}>
-                    <LegacyStyledText as="label" marginRight={SPACING.spacing2}>
-                      {key}:
-                    </LegacyStyledText>
-                    <LegacyStyledText as="p" title={String(innerValue)}>
-                      {String(innerValue)}
-                    </LegacyStyledText>
-                  </Flex>
-                ))
-              ) : (
-                <LegacyStyledText as="p" title={String(value)}>
-                  {String(value)}
-                </LegacyStyledText>
-              )}
-            </Flex>
-          ))
-        : null}
-    </Flex>
-  )
-}

package/src/organisms/ProtocolTimelineScrubber/PipetteVisuals.tsx

@@ -1,213 +0,0 @@
-import { useState } from 'react'
-
-import { LegacyStyledText } from '../../atoms'
-import { COLORS } from '../../helix-design-system'
-import { Box, Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  TEXT_TRANSFORM_UPPERCASE,
-} from '../../styles'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-
-import type {
-  CompletedProtocolAnalysis,
-  ProtocolAnalysisOutput,
-} from '@opentrons/shared-data'
-import type {
-  LocationLiquidState,
-  PipetteEntity,
-  TimelineFrame,
-} from '@opentrons/step-generation'
-
-interface PipetteMountVizProps {
-  pipetteId: string | null
-  pipetteEntity: PipetteEntity | null
-  mount: string
-  timelineFrame: TimelineFrame
-  analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
-}
-export function PipetteMountViz(
-  props: PipetteMountVizProps
-): JSX.Element | null {
-  const { mount, pipetteEntity, pipetteId, timelineFrame, analysis } = props
-  const [showPipetteDetails, setShowPipetteDetails] = useState(false)
-
-  return pipetteEntity == null ? null : (
-    <Flex
-      alignItems={ALIGN_CENTER}
-      flexDirection={DIRECTION_COLUMN}
-      maxWidth="4rem"
-    >
-      <LegacyStyledText
-        as="h1"
-        textTransform={TEXT_TRANSFORM_UPPERCASE}
-        cursor="pointer"
-        onClick={() => {
-          setShowPipetteDetails(!showPipetteDetails)
-        }}
-      >
-        {mount}
-      </LegacyStyledText>
-      {showPipetteDetails ? (
-        <LegacyStyledText
-          as="p"
-          fontSize={TYPOGRAPHY.fontSizeCaption}
-          marginY={SPACING.spacing8}
-        >
-          {pipetteEntity?.spec?.displayName ?? 'none'}
-        </LegacyStyledText>
-      ) : null}
-      {pipetteEntity != null && pipetteId != null ? (
-        <PipetteSideView
-          allNozzlesHaveTips={timelineFrame.tipState.pipettes[pipetteId]}
-          allNozzleTipContents={Object.values(
-            timelineFrame.liquidState.pipettes[pipetteId]
-          )}
-          maxVolume={
-            pipetteEntity != null
-              ? pipetteEntity.spec.liquids.default.maxVolume
-              : 0
-          }
-          analysis={analysis}
-        />
-      ) : (
-        <Box size="4rem" />
-      )}
-    </Flex>
-  )
-}
-
-interface SideViewProps {
-  allNozzleTipContents: LocationLiquidState[]
-  maxVolume: number
-  allNozzlesHaveTips: boolean
-  analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
-}
-export function PipetteSideView({
-  allNozzleTipContents,
-  maxVolume,
-  allNozzlesHaveTips,
-  analysis,
-}: SideViewProps): JSX.Element {
-  const channelCount = Math.min(Object.keys(allNozzleTipContents).length, 8)
-
-  return (
-    <svg width="4rem" height="16rem" viewBox="0 0 100 200">
-      {channelCount <= 1 ? (
-        <>
-          <rect x="30" y="0" height="80" width="40" stroke="#000" />
-          <rect x="45" y="80" height="50" width="10" stroke="#000" />
-          {allNozzlesHaveTips ? (
-            <TipSideView
-              x={45}
-              y={130}
-              tipContents={allNozzleTipContents[0]}
-              maxVolume={maxVolume}
-              analysis={analysis}
-            />
-          ) : (
-            <path
-              d="M47,130 L49,140 H51 L53,130 H47z"
-              stroke="#000"
-              fill="#000"
-            />
-          )}
-        </>
-      ) : (
-        <>
-          <rect x="30" y="0" height="40" width="40" stroke="#000" />
-          <path d="M30,40 L10,85 H90 L70,40 H30z" stroke="#000" />
-          <rect x="10" y="85" height="45" width="80" stroke="#000" />
-          {Object.values(allNozzleTipContents)
-            .slice(0, 8)
-            .map((tipContents, index) => {
-              const x = index * 10 + 10
-              return allNozzlesHaveTips ? (
-                <TipSideView
-                  x={x}
-                  y={130}
-                  key={index}
-                  tipContents={tipContents}
-                  maxVolume={maxVolume}
-                  analysis={analysis}
-                />
-              ) : (
-                <path
-                  d={`M${x + 2},130 L${x + 4},140 H${x + 6} L${x + 8},130 H${
-                    x + 2
-                  }z`}
-                  stroke="#000"
-                  fill="#000"
-                />
-              )
-            })}
-        </>
-      )}
-    </svg>
-  )
-}
-
-export interface TipSideViewProps {
-  tipContents: LocationLiquidState
-  maxVolume: number
-  x: number
-  y: number
-  analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
-}
-function TipSideView({
-  tipContents,
-  maxVolume,
-  x,
-  y,
-  analysis,
-}: TipSideViewProps): JSX.Element {
-  const emptyVolumeLeft =
-    maxVolume -
-    Object.entries(tipContents).reduce((acc, [liquidId, { volume }]) => {
-      if (liquidId === '__air__') return acc
-      return acc + volume
-    }, 0)
-  const yOfFirstLiquid = (emptyVolumeLeft / maxVolume) * 50
-
-  return (
-    <>
-      <rect
-        x={x}
-        y={y}
-        height={yOfFirstLiquid}
-        width="10"
-        fill={COLORS.white}
-      />
-      {Object.entries(tipContents).map(([liquidId, { volume }]) => {
-        if (liquidId === '__air__') return null
-        const displayColor = analysis.liquids.find(l => l.id === liquidId)
-          ?.displayColor
-        return (
-          <rect
-            key={liquidId}
-            x={x}
-            y={y + yOfFirstLiquid}
-            height={(volume / maxVolume) * 50}
-            width="10"
-            fill={displayColor ?? 'rebeccapurple'}
-          />
-        )
-      })}
-      <path
-        d={`M${x},130 V150 L${x + 2},170 L${x + 4},180 H${x + 6} L${
-          x + 8
-        },170 L${x + 10},150 V130 H${x}z`}
-        stroke="#000"
-        fill="none"
-      />
-      <path
-        d={`M${x - 1},129 V150 L${x + 2},170 L${x + 4},180 H${x + 6} L${
-          x + 8
-        },170 L${x + 10},150 V130 H${x + 11} V181 H${x - 1} V129z`}
-        fill={COLORS.white}
-        stroke="none"
-      />
-    </>
-  )
-}