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

package/src/molecules/ParametersTable/ParametersTable.stories.tsx

@@ -1,173 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import * as React from 'react-remove-scroll'
-
-import { Flex } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-import { ParametersTable } from './index'
-
-import type { Meta, StoryObj } from '@storybook/react'
-import type { RunTimeParameter } from '@opentrons/shared-data'
-
-const runTimeParameters: RunTimeParameter[] = [
-  {
-    value: false,
-    displayName: 'Dry Run',
-    variableName: 'DRYRUN',
-    description: 'Is this a dry or wet run? Wet is true, dry is false',
-    type: 'bool',
-    default: false,
-  },
-  {
-    value: true,
-    displayName: 'Use Gripper',
-    variableName: 'USE_GRIPPER',
-    description: 'For using the gripper.',
-    type: 'bool',
-    default: true,
-  },
-  {
-    value: true,
-    displayName: 'Trash Tips',
-    variableName: 'TIP_TRASH',
-    description:
-      'to throw tip into the trash or to not throw tip into the trash',
-    type: 'bool',
-    default: true,
-  },
-  {
-    value: true,
-    displayName: 'Deactivate Temperatures',
-    variableName: 'DEACTIVATE_TEMP',
-    description: 'deactivate temperature on the module',
-    type: 'bool',
-    default: true,
-  },
-  {
-    value: 4,
-    displayName: 'Columns of Samples',
-    variableName: 'COLUMNS',
-    description: 'How many columns do you want?',
-    type: 'int',
-    min: 1,
-    max: 14,
-    default: 4,
-  },
-  {
-    value: 6,
-    displayName: 'PCR Cycles',
-    variableName: 'PCR_CYCLES',
-    description: 'number of PCR cycles on a thermocycler',
-    type: 'int',
-    min: 1,
-    max: 10,
-    default: 6,
-  },
-  {
-    value: 6.5,
-    displayName: 'EtoH Volume',
-    variableName: 'ETOH_VOLUME',
-    description: '70% ethanol volume',
-    type: 'float',
-    suffix: 'mL',
-    min: 1.5,
-    max: 10.0,
-    default: 6.5,
-  },
-  {
-    value: 'none',
-    displayName: 'Default Module Offsets',
-    variableName: 'DEFAULT_OFFSETS',
-    description: 'default module offsets for temp, H-S, and none',
-    type: 'str',
-    choices: [
-      {
-        displayName: 'No offsets',
-        value: 'none',
-      },
-      {
-        displayName: 'temp offset',
-        value: '1',
-      },
-      {
-        displayName: 'heater-shaker offset',
-        value: '2',
-      },
-    ],
-    default: 'none',
-  },
-  {
-    value: 'left',
-    displayName: 'pipette mount',
-    variableName: 'mont',
-    description: 'pipette mount',
-    type: 'str',
-    choices: [
-      {
-        displayName: 'Left',
-        value: 'left',
-      },
-      {
-        displayName: 'Right',
-        value: 'right',
-      },
-    ],
-    default: 'left',
-  },
-  {
-    value: 'flex',
-    displayName: 'short test case',
-    variableName: 'short 2 options',
-    description: 'this play 2 short options',
-    type: 'str',
-    choices: [
-      {
-        displayName: 'OT-2',
-        value: 'ot2',
-      },
-      {
-        displayName: 'Flex',
-        value: 'flex',
-      },
-    ],
-    default: 'flex',
-  },
-  {
-    value: 'flex',
-    displayName: 'long test case',
-    variableName: 'long 2 options',
-    description: 'this play 2 long options',
-    type: 'str',
-    choices: [
-      {
-        displayName: 'I am kind of long text version',
-        value: 'ot2',
-      },
-      {
-        displayName: 'I am kind of long text version. Today is 3/15',
-        value: 'flex',
-      },
-    ],
-    default: 'flex',
-  },
-]
-
-const meta: Meta<typeof ParametersTable> = {
-  title: 'Library/Molecules/ParametersTable',
-  component: ParametersTable,
-  decorators: [
-    Story => (
-      <Flex padding={SPACING.spacing16}>
-        <Story />
-      </Flex>
-    ),
-  ],
-}
-export default meta
-
-type Story = StoryObj<typeof ParametersTable>
-
-export const DefaultParameterTable: Story = {
-  args: {
-    runTimeParameters: runTimeParameters,
-  },
-}

package/src/molecules/ParametersTable/__tests__/ParametersTable.test.tsx

@@ -1,127 +0,0 @@
-import { screen } from '@testing-library/react'
-import { beforeEach, describe, it } from 'vitest'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { ParametersTable } from '../index'
-
-import type { ComponentProps } from 'react'
-import type { RunTimeParameter } from '@opentrons/shared-data'
-
-const tMock = (key: string) => key
-const mockRunTimeParameter: RunTimeParameter[] = [
-  {
-    displayName: 'Trash Tips',
-    variableName: 'TIP_TRASH',
-    description:
-      'to throw tip into the trash or to not throw tip into the trash',
-    type: 'bool',
-    default: true,
-    value: true,
-  },
-  {
-    displayName: 'EtoH Volume',
-    variableName: 'ETOH_VOLUME',
-    description: '70% ethanol volume',
-    type: 'float',
-    suffix: 'mL',
-    min: 1.5,
-    max: 10.0,
-    default: 6.5,
-    value: 6.5,
-  },
-  {
-    displayName: 'Default Module Offsets',
-    variableName: 'DEFAULT_OFFSETS',
-    description: 'default module offsets for temp, H-S, and none',
-    type: 'str',
-    value: 'none',
-    choices: [
-      {
-        displayName: 'No offsets',
-        value: 'none',
-      },
-      {
-        displayName: 'temp offset',
-        value: '1',
-      },
-      {
-        displayName: 'heater-shaker offset',
-        value: '2',
-      },
-    ],
-    default: 'none',
-  },
-  {
-    displayName: 'pipette mount',
-    variableName: 'mont',
-    description: 'pipette mount',
-    type: 'str',
-    value: 'left',
-    choices: [
-      {
-        displayName: 'Left',
-        value: 'left',
-      },
-      {
-        displayName: 'Right',
-        value: 'right',
-      },
-    ],
-    default: 'left',
-  },
-]
-
-const render = (props: ComponentProps<typeof ParametersTable>) => {
-  return renderWithProviders(<ParametersTable {...props} />)
-}
-
-describe('ParametersTable', () => {
-  let props: ComponentProps<typeof ParametersTable>
-
-  beforeEach(() => {
-    props = {
-      runTimeParameters: mockRunTimeParameter,
-    }
-  })
-
-  it('should render table header', () => {
-    render(props)
-    screen.getByText('Name')
-    screen.getByText('Default Value')
-    screen.getByText('Range')
-  })
-
-  it('should render parameters default information', () => {
-    render(props)
-    screen.getByText('Trash Tips')
-    screen.getByText('On')
-    screen.getByText('On, off')
-
-    screen.getByText('EtoH Volume')
-    screen.getByText('6.5 mL')
-    screen.getByText('1.5-10.0')
-
-    // more than 2 options
-    screen.getByText('Default Module Offsets')
-    screen.getByText('No offsets')
-    screen.getByText('3 options')
-
-    // 2 options
-    screen.getByText('pipette mount')
-    screen.getByText('Left')
-    screen.getByText('Left, Right')
-  })
-
-  it('should render the raw i18n values if a t prop is provided', () => {
-    props.t = tMock
-    render(props)
-    screen.getByText('name')
-    screen.getByText('default_value')
-    screen.getByText('range')
-  })
-
-  it('should render a description icon if description is provided', () => {
-    render(props)
-    screen.getByTestId('Icon_0')
-  })
-})

package/src/molecules/ParametersTable/index.tsx

@@ -1,200 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import {
-  formatRunTimeParameterDefaultValue,
-  formatRunTimeParameterMinMax,
-  orderRuntimeParameterRangeOptions,
-} from '@opentrons/shared-data'
-
-import { Chip } from '../../atoms/Chip'
-import { StyledText } from '../../atoms/StyledText'
-import { BORDERS, COLORS } from '../../helix-design-system'
-import { TYPOGRAPHY } from '../../helix-design-system/product'
-import { Icon } from '../../icons'
-import { Flex } from '../../primitives'
-import { DISPLAY_INLINE, FLEX_MAX_CONTENT } from '../../styles'
-import { LegacyTooltip, useHoverTooltip } from '../../tooltips'
-import {
-  TYPOGRAPHY as LEGACY_TYPOGERAPHY,
-  SPACING,
-} from '../../ui-style-constants/index'
-
-import type { RunTimeParameter } from '@opentrons/shared-data'
-
-interface ProtocolParameterItemsProps {
-  runTimeParameters: RunTimeParameter[]
-  t?: any
-}
-
-/** used in both the desktop app and Protocol Library
- * to display the run time parameters table
- */
-export function ParametersTable({
-  runTimeParameters,
-  t,
-}: ProtocolParameterItemsProps): JSX.Element {
-  const formatRange = (runTimeParameter: RunTimeParameter): string => {
-    const { type } = runTimeParameter
-    const minMax = formatRunTimeParameterMinMax(runTimeParameter)
-    const choices =
-      'choices' in runTimeParameter ? runTimeParameter.choices : []
-    const count = choices.length
-
-    if (count > 0) {
-      return count > 2
-        ? t != null
-          ? t('num_options', { num: count })
-          : `${count} options`
-        : orderRuntimeParameterRangeOptions(choices)
-    }
-
-    switch (type) {
-      case 'int':
-      case 'float':
-        return minMax
-      case 'bool':
-        return t != null ? t('on_off') : 'On, off'
-      default:
-        return ''
-    }
-  }
-
-  return (
-    <StyledTable>
-      <thead>
-        <StyledTableHeader>{t != null ? t('name') : 'Name'}</StyledTableHeader>
-        <StyledTableHeader>
-          {t != null ? t('default_value') : 'Default Value'}
-        </StyledTableHeader>
-        <StyledTableHeader>
-          {t != null ? t('range') : 'Range'}
-        </StyledTableHeader>
-      </thead>
-      <tbody>
-        {runTimeParameters
-          .sort((a, b) =>
-            a.type === 'csv_file' && b.type !== 'csv_file' ? -1 : 0
-          )
-          .map((parameter: RunTimeParameter, index: number) => {
-            const isLast = index === runTimeParameters.length - 1
-            return (
-              <StyledTableRow isLast={isLast} key={`runTimeParameter-${index}`}>
-                <ParameterName
-                  displayName={parameter.displayName}
-                  description={parameter.description}
-                  isLast={isLast}
-                  index={index}
-                />
-                <StyledTableCell isLast={isLast}>
-                  {parameter.type === 'csv_file' ? (
-                    <Chip
-                      text={t('protocol_details:requires_upload')}
-                      type="warning"
-                      hasIcon={false}
-                      width={FLEX_MAX_CONTENT}
-                    />
-                  ) : (
-                    <StyledText desktopStyle="bodyDefaultRegular">
-                      {formatRunTimeParameterDefaultValue(parameter, t)}
-                    </StyledText>
-                  )}
-                </StyledTableCell>
-                <StyledTableCell isLast={isLast} paddingRight="0">
-                  <StyledText desktopStyle="bodyDefaultRegular">
-                    {parameter.type === 'csv_file'
-                      ? t('n_a')
-                      : formatRange(parameter)}
-                  </StyledText>
-                </StyledTableCell>
-              </StyledTableRow>
-            )
-          })}
-      </tbody>
-    </StyledTable>
-  )
-}
-
-interface ParameterNameProps {
-  displayName: string
-  description: string | null
-  isLast: boolean
-  index: number
-}
-
-const ParameterName = (props: ParameterNameProps): JSX.Element => {
-  const { displayName, description, isLast, index } = props
-  const [targetProps, tooltipProps] = useHoverTooltip()
-
-  return (
-    <StyledTableCell display="span" isLast={isLast}>
-      <StyledText
-        desktopStyle="bodyDefaultRegular"
-        css={css`
-          display: ${DISPLAY_INLINE};
-          padding-right: ${SPACING.spacing8};
-        `}
-      >
-        {displayName}
-      </StyledText>
-      {description != null ? (
-        <>
-          <Flex display={DISPLAY_INLINE} {...targetProps}>
-            <Icon
-              name="information"
-              size="1rem"
-              color={COLORS.grey60}
-              data-testid={`Icon_${index}`}
-              paddingTop={SPACING.spacing4}
-            />
-          </Flex>
-          <LegacyTooltip
-            {...tooltipProps}
-            backgroundColor={COLORS.black90}
-            css={LEGACY_TYPOGERAPHY.labelRegular}
-            width="8.75rem"
-          >
-            {description}
-          </LegacyTooltip>
-        </>
-      ) : null}
-    </StyledTableCell>
-  )
-}
-
-const StyledTable = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-  text-align: left;
-`
-
-const StyledTableHeader = styled.th`
-  font: ${TYPOGRAPHY.fontStyleBodyDefaultRegular};
-  color: ${COLORS.grey60};
-  grid-gap: ${SPACING.spacing16};
-  padding-bottom: ${SPACING.spacing8};
-  border-bottom: ${BORDERS.lineBorder};
-`
-
-interface StyledTableRowProps {
-  isLast: boolean
-}
-
-const StyledTableRow = styled.tr<StyledTableRowProps>`
-  grid-gap: ${SPACING.spacing16};
-  border-bottom: ${props => (props.isLast ? 'none' : BORDERS.lineBorder)};
-`
-
-interface StyledTableCellProps {
-  isLast: boolean
-  paddingRight?: string
-  display?: string
-}
-
-const StyledTableCell = styled.td<StyledTableCellProps>`
-  width: 33%;
-  display: ${props => (props.display != null ? props.display : 'table-cell')};
-  padding-top: ${SPACING.spacing12};
-  padding-bottom: ${props => (props.isLast ? 0 : SPACING.spacing12)};
-  padding-right: ${props =>
-    props.paddingRight != null ? props.paddingRight : SPACING.spacing16};
-`

package/src/molecules/ReleaseNotes/index.tsx

@@ -1,70 +0,0 @@
-import Markdown from 'react-markdown'
-
-import { LegacyStyledText } from '../../atoms'
-import { COLORS } from '../../helix-design-system'
-import { Box } from '../../primitives'
-import { SPACING } from '../../ui-style-constants'
-import styles from './styles.module.css'
-
-export interface ReleaseNotesProps {
-  isOEMMode: boolean
-  source?: string | null
-}
-
-const DEFAULT_RELEASE_NOTES = 'We recommend upgrading to the latest version.'
-
-export function ReleaseNotes(props: ReleaseNotesProps): JSX.Element {
-  const { source, isOEMMode } = props
-
-  return (
-    <div className={styles.release_notes}>
-      {source != null && !isOEMMode ? (
-        <Markdown
-          components={{
-            div: undefined,
-            ul: UnnumberedListText,
-            h2: HeaderText,
-            li: ListItemText,
-            p: ParagraphText,
-            a: ExternalLink,
-            hr: HorizontalRule,
-          }}
-        >
-          {source}
-        </Markdown>
-      ) : (
-        <p>{DEFAULT_RELEASE_NOTES}</p>
-      )}
-    </div>
-  )
-}
-
-function ExternalLink(props: JSX.IntrinsicAttributes): JSX.Element {
-  return <a {...props} target="_blank" rel="noopener noreferrer" />
-}
-
-function ParagraphText(props: JSX.IntrinsicAttributes): JSX.Element {
-  return <LegacyStyledText {...props} as="p" />
-}
-
-function HeaderText(props: JSX.IntrinsicAttributes): JSX.Element {
-  return <LegacyStyledText {...props} as="h3" />
-}
-
-function ListItemText(props: JSX.IntrinsicAttributes): JSX.Element {
-  return <LegacyStyledText {...props} as="li" />
-}
-
-function UnnumberedListText(props: JSX.IntrinsicAttributes): JSX.Element {
-  return <LegacyStyledText {...props} as="ul" />
-}
-
-function HorizontalRule(): JSX.Element {
-  return (
-    <Box
-      borderBottom={`1px solid ${COLORS.grey30}`}
-      marginY={SPACING.spacing16}
-      data-testid="divider"
-    />
-  )
-}

package/src/molecules/ReleaseNotes/styles.module.css

@@ -1,66 +0,0 @@
-@import '../../index.module.css';
-
-.release_notes {
-  width: 100%;
-  max-height: 100%;
-  padding: 0 0.5rem;
-
-  & > h1 {
-    margin-bottom: 1rem;
-    color: var(--c-font-dark); /* from legacy --font-header-dark */
-    font-size: var(--fs-header); /* from legacy --font-header-dark */
-    font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
-  }
-
-  & > h2 {
-    margin-top: 1rem;
-    margin-bottom: 0.75rem;
-    color: var(--c-font-dark); /* from legacy --font-header-dark */
-    font-size: var(--fs-header); /* from legacy --font-header-dark */
-    font-weight: var(--fw-regular);
-  }
-
-  & > h3 {
-    margin-top: 0.75rem;
-    margin-bottom: 0.5rem;
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-    font-weight: var(--fw-semibold);
-  }
-
-  & ul,
-  & ol {
-    margin-bottom: 0.25rem;
-    margin-left: 1.25rem;
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    font-size: var(--fs-body-2);
-  }
-
-  & li {
-    margin: 0.25rem 0;
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    font-size: var(--fs-body-2);
-  }
-
-  & code {
-    color: var(--c-font-dark);
-    font-family: monospace;
-  }
-
-  & pre {
-    padding: 0.5rem 0.75rem;
-    margin: 0.5rem 0;
-    background-color: var(--c-font-dark);
-
-    & code {
-      color: var(--c-font-light);
-    }
-  }
-
-  & p {
-    margin-bottom: 1rem;
-    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-    font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
-  }
-}

package/src/molecules/Tabs/Tabs.stories.tsx

@@ -1,76 +0,0 @@
-import { useArgs } from '@storybook/preview-api'
-
-import { Tabs as TabsComponent } from '.'
-import { VIEWPORT } from '../../ui-style-constants'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta<typeof TabsComponent> = {
-  title: 'Helix/Molecules/Tabs',
-  component: TabsComponent,
-  parameters: VIEWPORT.touchScreenViewport,
-  argTypes: {
-    tabs: {
-      control: {
-        type: 'array',
-      },
-    },
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof TabsComponent>
-
-export const Tabs: Story = {
-  args: {
-    tabs: [
-      {
-        text: 'Setup',
-        isActive: true,
-        disabled: false,
-        onClick: () => {},
-      },
-      {
-        text: 'Parameters',
-        isActive: false,
-        disabled: false,
-        onClick: () => {},
-      },
-      {
-        text: 'Module Controls',
-        isActive: false,
-        disabled: false,
-        onClick: () => {},
-      },
-      {
-        text: 'Run Preview',
-        isActive: false,
-        disabled: false,
-        onClick: () => {},
-      },
-    ],
-  },
-  render: function TabsStory() {
-    const [args, setArgs] = useArgs<
-      React.ComponentProps<typeof TabsComponent>
-    >()
-
-    const modifiedTabs = args.tabs.map((tab, index) => {
-      const modifiedTabs = {
-        ...tab,
-        onClick: () => {
-          const updatedButtons = args.tabs.map((btn, i) => ({
-            ...btn,
-            isActive: i === index,
-          }))
-          setArgs({ ...args, tabs: updatedButtons })
-          tab.onClick()
-        },
-      }
-      return modifiedTabs
-    })
-
-    return <TabsComponent tabs={modifiedTabs} />
-  },
-}