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

package/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx

@@ -1,109 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { Flex } from '../../../primitives'
-import { CURSOR_POINTER } from '../../../styles'
-import { SPACING } from '../../../ui-style-constants'
-import { StyledText } from '../../StyledText'
-
-import type { ChangeEventHandler, MouseEvent } from 'react'
-import type { StyleProps } from '../../../primitives'
-
-interface ListButtonRadioButtonProps extends StyleProps {
-  buttonText: string
-  buttonValue: string | number
-  onChange: ChangeEventHandler<HTMLInputElement>
-  setNoHover?: () => void
-  setHovered?: () => void
-  disabled?: boolean
-  isSelected?: boolean
-  id?: string
-}
-
-//  used for helix and as a child button to ListButtonAccordion
-export function ListButtonRadioButton(
-  props: ListButtonRadioButtonProps
-): JSX.Element {
-  const {
-    buttonText,
-    buttonValue,
-    isSelected = false,
-    onChange,
-    disabled = false,
-    setHovered,
-    setNoHover,
-    id = buttonText,
-  } = props
-
-  return (
-    <Flex
-      width="100%"
-      margin={SPACING.spacing4}
-      onClick={(e: MouseEvent) => {
-        e.stopPropagation()
-      }}
-    >
-      <SettingButton
-        checked={isSelected}
-        id={id}
-        disabled={disabled}
-        onChange={onChange}
-        type="radio"
-        value={buttonValue}
-      />
-      <SettingButtonLabel
-        role="label"
-        isSelected={isSelected}
-        disabled={disabled}
-        htmlFor={id}
-        onMouseEnter={setHovered}
-        onMouseLeave={setNoHover}
-      >
-        <StyledText desktopStyle="bodyDefaultRegular">{buttonText}</StyledText>
-      </SettingButtonLabel>
-    </Flex>
-  )
-}
-
-const SettingButton = styled.input`
-  display: none;
-`
-
-const AVAILABLE_BUTTON_STYLE = css`
-  background: ${COLORS.white};
-  color: ${COLORS.black90};
-
-  &:hover {
-    background-color: ${COLORS.grey10};
-  }
-`
-
-const SELECTED_BUTTON_STYLE = css`
-  background: ${COLORS.blue50};
-  color: ${COLORS.white};
-
-  &:active {
-    background-color: ${COLORS.blue60};
-  }
-`
-
-const DISABLED_STYLE = css`
-  color: ${COLORS.grey40};
-  background-color: ${COLORS.grey10};
-`
-
-interface ButtonLabelProps {
-  isSelected: boolean
-  disabled: boolean
-}
-
-const SettingButtonLabel = styled.label<ButtonLabelProps>`
-  border-radius: ${BORDERS.borderRadius8};
-  cursor: ${CURSOR_POINTER};
-  padding: 14px ${SPACING.spacing12};
-  width: 100%;
-
-  ${({ isSelected }) =>
-    isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
-  ${({ disabled }) => disabled && DISABLED_STYLE}
-`

package/src/atoms/ListButton/__tests__/ListButtonRadioButton.test.tsx

@@ -1,28 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { ListButtonRadioButton } from '..'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof ListButtonRadioButton>) =>
-  renderWithProviders(<ListButtonRadioButton {...props} />)
-
-describe('ListButtonRadioButton', () => {
-  let props: ComponentProps<typeof ListButtonRadioButton>
-
-  beforeEach(() => {
-    props = {
-      buttonText: 'mock text',
-      buttonValue: 'mockValue',
-      onChange: vi.fn(),
-    }
-  })
-
-  it('should render non nested accordion', () => {
-    render(props)
-    fireEvent.click(screen.getByText('mock text'))
-    expect(props.onChange).toHaveBeenCalled()
-  })
-})

package/src/hardware-sim/utils.ts

@@ -1,18 +0,0 @@
-import type { AffineTransformMatrix } from '@opentrons/shared-data'
-
-export const IDENTITY_AFFINE_TRANSFORM: AffineTransformMatrix = [
-  [1, 0, 0, 0],
-  [0, 1, 0, 0],
-  [0, 0, 1, 0],
-  [0, 0, 0, 1],
-]
-
-// multiply two matrices together (dot product)
-export function multiplyMatrices(a: number[][], b: number[][]): number[][] {
-  const transposedB = b[0].map((_val, index) => b.map(row => row[index]))
-  return a.map(rowA =>
-    transposedB.map(rowB =>
-      rowA.reduce((acc, valA, colIndexA) => acc + valA * rowB[colIndexA], 0)
-    )
-  )
-}

package/src/instrument/InstrumentDiagram.stories.tsx

@@ -1,43 +0,0 @@
-import keyBy from 'lodash/keyBy'
-
-import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
-
-import { InstrumentDiagram as InstrumentDiagramComponent } from './InstrumentDiagram'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-const allPipetteSpecsByDisplayNames = keyBy(
-  getAllPipetteNames().map(getPipetteNameSpecs),
-  'displayName'
-)
-
-export default {
-  title: 'Library/Organisms/Instrument Diagram',
-  argTypes: {
-    mount: {
-      control: {
-        type: 'select',
-        options: ['left', 'right'],
-      },
-      defaultValue: 'left',
-    },
-    pipetteSpecs: {
-      control: {
-        type: 'select',
-        options: Object.keys(allPipetteSpecsByDisplayNames),
-      },
-      defaultValue: Object.keys(allPipetteSpecsByDisplayNames)[0],
-    },
-  },
-} as Meta
-
-const Template: Story<
-  React.ComponentProps<typeof InstrumentDiagramComponent>
-> = ({ pipetteSpecs, ...args }) => (
-  <InstrumentDiagramComponent
-    {...args}
-    pipetteSpecs={allPipetteSpecsByDisplayNames[pipetteSpecs]}
-  />
-)
-export const InstrumentDiagram = Template.bind({})

package/src/instrument/InstrumentGroup.stories.tsx

@@ -1,89 +0,0 @@
-import keyBy from 'lodash/keyBy'
-import reduce from 'lodash/reduce'
-
-import { getAllPipetteNames, getPipetteNameSpecs } from '@opentrons/shared-data'
-
-import { InstrumentGroup as InstrumentGroupComponent } from './InstrumentGroup'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-const allPipetteSpecsByDisplayNames = keyBy(
-  getAllPipetteNames().map(getPipetteNameSpecs),
-  'displayName'
-)
-const leftPipettesByName = reduce(
-  allPipetteSpecsByDisplayNames,
-  (acc, pipetteSpecs, displayName) => {
-    return {
-      ...acc,
-      [displayName]: {
-        mount: 'left',
-        description: displayName,
-        pipetteSpecs,
-        isDisabled: false,
-      },
-    }
-  },
-  {}
-)
-const rightPipettesByName = reduce(
-  allPipetteSpecsByDisplayNames,
-  (acc, pipetteSpecs, displayName) => {
-    return {
-      ...acc,
-      [displayName]: {
-        mount: 'right',
-        description: displayName,
-        pipetteSpecs,
-        isDisabled: false,
-      },
-    }
-  },
-  {}
-)
-
-export default {
-  title: 'Library/Organisms/Instrument Group',
-  argTypes: {
-    left: {
-      control: {
-        type: 'select',
-        options: Object.keys(leftPipettesByName),
-      },
-      defaultValue: Object.keys(leftPipettesByName)[0],
-    },
-    right: {
-      control: {
-        type: 'select',
-        options: Object.keys(rightPipettesByName),
-      },
-      defaultValue: Object.keys(rightPipettesByName)[0],
-    },
-  },
-} as Meta
-
-const Template: Story<
-  React.ComponentProps<typeof InstrumentGroupComponent>
-> = ({ left, right, ...args }) => (
-  <InstrumentGroupComponent
-    {...args}
-    left={leftPipettesByName[left]}
-    right={rightPipettesByName[right]}
-  />
-)
-export const InstrumentGroup = Template.bind({})
-InstrumentGroup.args = {
-  left: {
-    mount: 'left',
-    description: 'p300 8-Channel',
-    pipetteSpecs: { channels: 8, displayCategory: 'GEN1' },
-    isDisabled: false,
-  },
-  right: {
-    mount: 'right',
-    description: 'p10 Single',
-    pipetteSpecs: { channels: 1, displayCategory: 'GEN2' },
-    isDisabled: true,
-  },
-}

package/src/instrument/InstrumentGroup.tsx

@@ -1,35 +0,0 @@
-import styles from './instrument.module.css'
-import { InstrumentInfo } from './InstrumentInfo'
-
-import type { InstrumentInfoProps } from './InstrumentInfo'
-
-export interface InstrumentGroupProps {
-  showMountLabel?: boolean | null | undefined
-  left?: InstrumentInfoProps | null | undefined
-  right?: InstrumentInfoProps | null | undefined
-}
-
-const EMPTY_INSTRUMENT_PROPS = {
-  description: 'None',
-  tiprackModel: 'N/A',
-  isDisabled: false,
-}
-
-/**
- * Renders a left and right pipette diagram & info.
- * Takes child `InstrumentInfo` props in `right` and `left` props.
- */
-export function InstrumentGroup(props: InstrumentGroupProps): JSX.Element {
-  const { left, right, showMountLabel } = props
-
-  const leftProps = left || { ...EMPTY_INSTRUMENT_PROPS, mount: 'left' }
-  const rightProps = right || { ...EMPTY_INSTRUMENT_PROPS, mount: 'right' }
-  return (
-    <section className={styles.pipette_group}>
-      <InstrumentInfo {...leftProps} showMountLabel={showMountLabel} />
-      {leftProps.pipetteSpecs?.channels === 96 ? null : (
-        <InstrumentInfo {...rightProps} showMountLabel={showMountLabel} />
-      )}
-    </section>
-  )
-}

package/src/instrument/InstrumentInfo.tsx

@@ -1,106 +0,0 @@
-import { LEFT, RIGHT } from '@opentrons/shared-data'
-
-import { LegacyStyledText } from '../atoms'
-import { Flex } from '../primitives'
-import { DIRECTION_COLUMN, JUSTIFY_CENTER } from '../styles'
-import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
-import styles from './instrument.module.css'
-import { InstrumentDiagram } from './InstrumentDiagram'
-
-import type { ReactNode } from 'react'
-import type { Mount } from '../robot-types'
-import type { InstrumentDiagramProps } from './InstrumentDiagram'
-
-export interface InstrumentInfoProps {
-  /** 'left' or 'right' */
-  mount: Mount
-  /** human-readable description, eg 'p300 Single-channel' */
-  description: string
-  /** specs of mounted pipette */
-  pipetteSpecs?: InstrumentDiagramProps['pipetteSpecs'] | null
-  /** paired tiprack models */
-  tiprackModels?: string[]
-  /** children to display under the info */
-  children?: ReactNode
-  /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
-  showMountLabel?: boolean | null
-}
-
-const MAX_WIDTH = '14rem'
-
-export function InstrumentInfo(props: InstrumentInfoProps): JSX.Element {
-  const {
-    mount,
-    showMountLabel,
-    description,
-    tiprackModels,
-    pipetteSpecs,
-    children,
-  } = props
-
-  const has96Channel = pipetteSpecs?.channels === 96
-  return (
-    <Flex justifyContent={JUSTIFY_CENTER} gridGap={SPACING.spacing16}>
-      {mount === RIGHT && pipetteSpecs ? (
-        <InstrumentDiagram
-          pipetteSpecs={pipetteSpecs}
-          className={styles.pipette_icon}
-          mount={mount}
-        />
-      ) : null}
-      {/* NOTE: the color is our legacy c-font-dark, which matches the other colors in this component **/}
-      <Flex
-        flexDirection={DIRECTION_COLUMN}
-        color="#4a4a4a"
-        gridGap={SPACING.spacing8}
-      >
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-          <LegacyStyledText
-            as="h3"
-            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-          >
-            {showMountLabel && !has96Channel ? `${mount} pipette` : 'pipette'}
-          </LegacyStyledText>
-          <LegacyStyledText as="p" width="max-content" maxWidth={MAX_WIDTH}>
-            {description}
-          </LegacyStyledText>
-        </Flex>
-
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-          <LegacyStyledText as="h3" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-            {'Tip rack'}
-          </LegacyStyledText>
-          <ul>
-            {tiprackModels != null && tiprackModels.length > 0 ? (
-              tiprackModels.map((model, index) => (
-                <li key={`${model}_${index}`}>
-                  <LegacyStyledText
-                    as="p"
-                    width="max-content"
-                    maxWidth={MAX_WIDTH}
-                  >
-                    {model}
-                  </LegacyStyledText>
-                </li>
-              ))
-            ) : (
-              <LegacyStyledText as="p" width="max-content" maxWidth={MAX_WIDTH}>
-                {'None'}
-              </LegacyStyledText>
-            )}
-          </ul>
-        </Flex>
-      </Flex>
-
-      {children}
-      {mount === LEFT && pipetteSpecs ? (
-        <InstrumentDiagram
-          pipetteSpecs={pipetteSpecs}
-          className={styles.pipette_icon}
-          mount={mount}
-        />
-      ) : null}
-    </Flex>
-  )
-}

package/src/instrument/__tests__/InstrumentInfo.test.tsx

@@ -1,58 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, it, vi } from 'vitest'
-
-import { fixtureP1000SingleV2Specs, LEFT, RIGHT } from '@opentrons/shared-data'
-
-import { renderWithProviders } from '../../testing/utils'
-import { InstrumentDiagram } from '../InstrumentDiagram'
-import { InstrumentInfo } from '../InstrumentInfo'
-
-import type { ComponentProps } from 'react'
-
-vi.mock('../InstrumentDiagram')
-
-const render = (props: ComponentProps<typeof InstrumentInfo>) => {
-  return renderWithProviders(<InstrumentInfo {...props} />)[0]
-}
-
-describe('InstrumentInfo', () => {
-  let props: ComponentProps<typeof InstrumentInfo>
-
-  beforeEach(() => {
-    props = {
-      mount: LEFT,
-      description: 'mock description',
-      pipetteSpecs: fixtureP1000SingleV2Specs,
-      tiprackModels: ['mock1', 'mock2'],
-      showMountLabel: true,
-    }
-    vi.mocked(InstrumentDiagram).mockReturnValue(
-      <div>mock instrumentDiagram</div>
-    )
-  })
-  it('renders a p1000 pipette with 2 tiprack models for left mount', () => {
-    render(props)
-    screen.getByText('mock instrumentDiagram')
-    screen.getByText('left pipette')
-    screen.getByText('mock description')
-    screen.getByText('Tip rack')
-    screen.getByText('mock1')
-    screen.getByText('mock2')
-  })
-  it('renders a p1000 pipette with 1 tiprack model for right mount', () => {
-    props.mount = RIGHT
-    props.tiprackModels = ['mock1']
-    render(props)
-    screen.getByText('mock instrumentDiagram')
-    screen.getByText('right pipette')
-    screen.getByText('mock description')
-    screen.getByText('Tip rack')
-    screen.getByText('mock1')
-  })
-  it('renders none for pip and tiprack if none are selected', () => {
-    props.pipetteSpecs = undefined
-    props.tiprackModels = undefined
-    render(props)
-    screen.getByText('None')
-  })
-})

package/src/instrument/instrument.module.css

@@ -1,45 +0,0 @@
-@import '@opentrons/components/styles';
-
-.pipette_group {
-  margin: 0 auto;
-  max-width: 46rem;
-  padding-bottom: 2rem;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-areas: 'left right';
-}
-
-.right {
-  grid-area: right;
-  grid-template-columns: 40% 80%;
-  grid-template-areas: 'img info';
-}
-
-.pipette_info {
-  grid-area: info;
-  min-height: 8rem;
-}
-
-.flipped_image {
-  transform: scaleX(-1);
-  filter: FlipH;
-}
-
-.pipette_icon {
-  grid-area: img;
-  text-align: center;
-}
-
-.title {
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  color: var(--c-font-dark);
-  text-transform: capitalize;
-  margin: 2rem 0 0.25rem;
-}
-
-.value {
-  font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-}

package/src/legacy-hardware-sim/ModuleItem.tsx

@@ -1,145 +0,0 @@
-import cx from 'classnames'
-
-import {
-  getModuleDisplayName,
-  MAGNETIC_MODULE_V1,
-  MAGNETIC_MODULE_V2,
-  TEMPERATURE_MODULE_V1,
-  TEMPERATURE_MODULE_V2,
-  THERMOCYCLER_MODULE_V1,
-} from '@opentrons/shared-data'
-
-import { RobotCoordsForeignDiv } from '../hardware-sim/Deck'
-import { Icon } from '../icons'
-import styles from './ModuleItem.module.css'
-
-import type { DeckSlot, ModuleModel } from '@opentrons/shared-data'
-import type { IconName } from '../icons'
-
-const FLIPPED_SLOTS = ['3', '6', '9']
-export interface ModuleProps {
-  /** module model */
-  model: ModuleModel
-  /** display mode: 'default', 'present', 'missing', or 'info' */
-  mode: 'default' | 'present' | 'missing' | 'info'
-  /** slot details of the location of this module */
-  slot: DeckSlot
-  /** USB port detail of the connected module */
-  usbInfoString?: string
-}
-
-/**
- * Legacy App-specific Module Rendering. Removable after Protocol Upload Revamp release
- *
- * @deprecated Use {@link Module}
- */
-export function ModuleItem(props: ModuleProps): JSX.Element {
-  const { model, slot } = props
-  let x = 0
-  let y = 0
-  let { xDimension: width, yDimension: height } = slot.boundingBox
-  const shouldFlip = FLIPPED_SLOTS.includes(slot.id)
-
-  // TODO: BC 2019-7-23 get these from shared-data module defs, once available
-  switch (model) {
-    case MAGNETIC_MODULE_V1:
-    case MAGNETIC_MODULE_V2: {
-      width = 137
-      height = 91
-      x = -7
-      y = 4
-      break
-    }
-    case TEMPERATURE_MODULE_V1:
-    case TEMPERATURE_MODULE_V2: {
-      width = 196
-      height = 91
-      x = -66
-      y = 4
-      break
-    }
-    case THERMOCYCLER_MODULE_V1: {
-      // TODO: BC 2019-07-24 these are taken from snapshots of the cad file, they should
-      // be included in the module spec schema and added to the data
-      width = 172
-      height = 259.7
-      x = -22.125
-    }
-  }
-
-  return (
-    <RobotCoordsForeignDiv
-      width={width}
-      height={height}
-      x={x}
-      y={y - height}
-      transformWithSVG
-      extraTransform={`rotate(${shouldFlip ? 180 : 0}, ${
-        slot.boundingBox.xDimension / 2
-      }, ${slot.boundingBox.yDimension / -2})`}
-      innerDivProps={{
-        className: cx(styles.module, { [styles.flipped]: shouldFlip }),
-      }}
-    >
-      <ModuleItemContents {...props} shouldFlip={shouldFlip} />
-    </RobotCoordsForeignDiv>
-  )
-}
-
-interface ModuleItemContentsProps extends ModuleProps {
-  shouldFlip: boolean
-}
-
-function ModuleItemContents(props: ModuleItemContentsProps): JSX.Element {
-  const { mode, model, usbInfoString, shouldFlip } = props
-  const displayName = getModuleDisplayName(model)
-
-  const iconClassName = cx(styles.module_review_icon, {
-    [styles.module_review_icon_missing]: mode === 'missing',
-    [styles.module_review_icon_present]: mode === 'present',
-  })
-
-  const iconNameByMode: Record<string, IconName> = {
-    missing: 'alert-circle',
-    present: 'check-circle',
-    info: 'usb',
-    default: 'usb',
-  }
-
-  return (
-    <>
-      <div
-        className={
-          shouldFlip ? styles.flipped_module_wrapper : styles.module_wrapper
-        }
-      >
-        {mode !== 'missing' && usbInfoString && (
-          <p
-            key="usbPortInfo"
-            className={
-              usbInfoString.includes('N/A')
-                ? styles.module_port_text_na
-                : styles.module_port_text
-            }
-          >
-            {usbInfoString}
-          </p>
-        )}
-        <p key="displayName" className={styles.module_review_text}>
-          {displayName}
-        </p>
-        <div className={styles.module_connect_info_wrapper}>
-          <Icon
-            key="icon"
-            className={iconClassName}
-            x="8"
-            y="0"
-            svgWidth="12"
-            name={iconNameByMode[mode] || 'usb'}
-          />
-          <p>{mode === 'missing' ? 'Not connected' : 'Connected'}</p>
-        </div>
-      </div>
-    </>
-  )
-}