@opentrons/components 0.2.0-alpha.0 → 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,124 +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={{
-        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,40 +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',
-    }
-    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',
-    }
-    render(props)
-    screen.getByText('mockOption')
-    screen.getByText('mockText')
-    fireEvent.click(screen.getByRole('button'))
-    expect(props.onClickHandler).toHaveBeenCalled()
-  })
-})

package/src/organisms/FixtureOption/index.tsx

@@ -1,63 +0,0 @@
-import { TertiaryButton } from '../../atoms/buttons'
-import { ListItem } from '../../atoms/ListItem/index'
-import { StyledText } from '../../atoms/StyledText'
-import { Flex } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  JUSTIFY_FLEX_END,
-  JUSTIFY_SPACE_BETWEEN,
-} from '../../styles'
-import { SPACING } from '../../ui-style-constants'
-
-import type { MouseEventHandler } from 'react'
-
-interface FixtureOptionProps {
-  onClickHandler: MouseEventHandler
-  secondaryOnClickHandler?: MouseEventHandler
-  optionName: string
-  secondaryButtonText?: string
-  buttonText: string
-}
-export function FixtureOption(props: FixtureOptionProps): JSX.Element {
-  const {
-    onClickHandler,
-    optionName,
-    buttonText,
-    secondaryOnClickHandler,
-    secondaryButtonText,
-  } = props
-  return (
-    <ListItem
-      type="default"
-      padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-      alignItems={ALIGN_CENTER}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
-    >
-      <StyledText
-        desktopStyle="bodyDefaultSemiBold"
-        oddStyle="bodyTextSemiBold"
-      >
-        {optionName}
-      </StyledText>
-      <Flex gridGap={SPACING.spacing4} justifyContent={JUSTIFY_FLEX_END}>
-        {secondaryOnClickHandler !== null &&
-        secondaryButtonText !== undefined ? (
-          <TertiaryButton
-            buttonType="secondary"
-            onClick={secondaryOnClickHandler}
-            data-testid={optionName}
-          >
-            {secondaryButtonText}
-          </TertiaryButton>
-        ) : null}
-        <TertiaryButton
-          buttonType="primary"
-          onClick={onClickHandler}
-          data-testid={optionName}
-        >
-          {buttonText}
-        </TertiaryButton>
-      </Flex>
-    </ListItem>
-  )
-}

package/src/organisms/ProtocolDeck/index.tsx

@@ -1,118 +0,0 @@
-import { useMemo } from 'react'
-
-import {
-  FLEX_ROBOT_TYPE,
-  getLabwareDefinitionsByURIForProtocol,
-  getLabwareInfoByLiquidId,
-  getLabwareOnDeck,
-  getSimplestDeckConfigForProtocol,
-  getStackedItemsOnStartingDeck,
-  getStacksOnModules,
-  getStandardDeckViewLayerBlockList,
-  getTopLabwareFromStack,
-  getWellFillFromLabwareId,
-} from '@opentrons/shared-data'
-
-import { BaseDeck } from '../../hardware-sim/BaseDeck'
-
-import type { ComponentProps } from 'react'
-import type {
-  CompletedProtocolAnalysis,
-  ProtocolAnalysisOutput,
-} from '@opentrons/shared-data'
-import type { LabwareOnDeck } from '../../hardware-sim/BaseDeck'
-
-interface ProtocolDeckProps {
-  protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput | null
-  /** extra props to pass through to BaseDeck component */
-  baseDeckProps?: Partial<ComponentProps<typeof BaseDeck>>
-}
-
-export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
-  const { protocolAnalysis, baseDeckProps } = props
-  const startingDeck = useMemo(
-    () =>
-      getStackedItemsOnStartingDeck(
-        protocolAnalysis?.commands ?? [],
-        protocolAnalysis?.labware ?? [],
-        protocolAnalysis?.modules ?? []
-      ),
-    [protocolAnalysis]
-  )
-  const labwareDefinitionsByURI = useMemo(
-    () =>
-      getLabwareDefinitionsByURIForProtocol(protocolAnalysis?.commands ?? []),
-    [protocolAnalysis]
-  )
-  if (protocolAnalysis == null || (protocolAnalysis?.errors ?? []).length > 0)
-    return null
-
-  const robotType = protocolAnalysis.robotType ?? FLEX_ROBOT_TYPE
-  const deckConfig = getSimplestDeckConfigForProtocol(protocolAnalysis)
-  const labwareByLiquidId = getLabwareInfoByLiquidId(protocolAnalysis.commands)
-
-  const modulesOnDeck = Object.entries(getStacksOnModules(startingDeck)).map(
-    ([slotName, { allItemsInStack: stackedItems, moduleInStack: module }]) => {
-      const topLabwareInfo = getTopLabwareFromStack(stackedItems)
-      const topLabwareDefinition =
-        topLabwareInfo != null
-          ? labwareDefinitionsByURI[topLabwareInfo.definitionUri]
-          : null
-
-      return {
-        moduleModel: module.moduleModel,
-        moduleLocation: { slotName: module.moduleSlotName },
-        nestedLabwareDef: topLabwareDefinition,
-        nestedLabwareWellFill:
-          topLabwareInfo != null
-            ? getWellFillFromLabwareId(
-                topLabwareInfo.labwareId,
-                protocolAnalysis.liquids,
-                labwareByLiquidId
-              )
-            : undefined,
-      }
-    }
-  )
-
-  const labwareOnDeck: Array<LabwareOnDeck | null> = Object.entries(
-    getLabwareOnDeck(startingDeck)
-  ).map(([slotName, stackedItems]) => {
-    const topLabwareInfo = getTopLabwareFromStack(stackedItems)
-    const topLabwareDefinition =
-      topLabwareInfo != null
-        ? labwareDefinitionsByURI[topLabwareInfo.definitionUri]
-        : null
-    return topLabwareDefinition != null && topLabwareInfo != null
-      ? {
-          definition: topLabwareDefinition,
-          labwareLocation: { slotName },
-          wellFill: getWellFillFromLabwareId(
-            topLabwareInfo.labwareId,
-            protocolAnalysis.liquids,
-            labwareByLiquidId
-          ),
-        }
-      : null
-  })
-  const labwareOnDeckFiltered: LabwareOnDeck[] = labwareOnDeck.filter(
-    (labware): labware is LabwareOnDeck => labware != null
-  )
-
-  return (
-    <BaseDeck
-      deckConfig={deckConfig}
-      deckLayerBlocklist={getStandardDeckViewLayerBlockList(robotType)}
-      robotType={robotType}
-      labwareOnDeck={labwareOnDeckFiltered}
-      modulesOnDeck={modulesOnDeck}
-      {...{
-        svgProps: {
-          'aria-label': 'protocol deck map',
-          ...(baseDeckProps?.svgProps ?? {}),
-        },
-        ...baseDeckProps,
-      }}
-    />
-  )
-}

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,
-  LabwareDefinition,
-  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: LabwareDefinition[]
-}
-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>
-  )
-}