@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.20

package/src/forms/Select.stories.tsx

@@ -0,0 +1,117 @@
+import type * as React from 'react'
+
+import { Select } from './Select'
+import styles from './Select.module.css'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Forms/Select',
+  component: Select,
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof Select>> = args => (
+  <Select {...args} />
+)
+export const Basic = Template.bind({})
+Basic.parameters = {
+  docs: {
+    description: {
+      component:
+        'Thin wrapper around `react-select` to apply our Opentrons-specific styles. All props are passed directly to [`react-select`](https://react-select.com/props) except for `styles`, `components`, and `classNamePrefix`. The `className` prop appends to the `className` we pass `react-select`. Those props are not passed directly because they provide the base styling of the component',
+    },
+  },
+}
+Basic.args = {
+  options: [
+    { label: 'DNA', value: 'dna' },
+    { label: 'RNA', value: 'rna' },
+    { label: 'Protein', value: 'protein', isDisabled: true },
+  ],
+}
+
+export const GroupedOptions = Template.bind({})
+GroupedOptions.parameters = {
+  docs: {
+    description: {
+      component: 'You can also pass grouped options:',
+    },
+  },
+}
+GroupedOptions.args = {
+  options: [
+    {
+      label: 'Nucleic Acids',
+      options: [
+        { label: 'DNA', value: 'dna' },
+        { label: 'RNA', value: 'rna' },
+      ],
+    },
+    {
+      label: 'Polypeptides',
+      options: [
+        { label: 'Dipeptide', value: 'dipeptide' },
+        { label: 'Tripeptide', value: 'Tripeptide' },
+      ],
+    },
+  ],
+}
+
+export const Controlled = Template.bind({})
+Controlled.parameters = {
+  docs: {
+    description: {
+      component:
+        'Passing `value` controls the input. **Note that `value` has the same format as an entry in `options`**',
+    },
+  },
+}
+Controlled.args = {
+  value: { label: 'DNA', value: 'dna' },
+  options: [
+    { label: 'DNA', value: 'dna' },
+    { label: 'RNA', value: 'rna' },
+    { label: 'Protein', value: 'protein' },
+  ],
+}
+
+export const FormattedOptionLabel = Template.bind({})
+FormattedOptionLabel.parameters = {
+  docs: {
+    description: {
+      component:
+        'You can control the renders of individual options with the `formatOptionLabel` prop:',
+    },
+  },
+}
+FormattedOptionLabel.args = {
+  options: [
+    { label: 'DNA', value: 'dna' },
+    { label: 'RNA', value: 'rna' },
+    { label: 'Protein', value: 'protein' },
+  ],
+  formatOptionLabel: (option, { context }) =>
+    context === 'menu' && option.value === 'rna' ? (
+      <span style={{ color: 'green' }}>{option.label}</span>
+    ) : (
+      option.label
+    ),
+}
+
+export const StyleOverride = Template.bind({})
+StyleOverride.parameters = {
+  docs: {
+    description: {
+      component:
+        "To override any styling, we use [`react-select`'s BEM](https://react-select.com/styles#using-classnames) class names with our specific prefix, which is `ot_select`. See `SelectField` for a specific example, where the background color of the `Control` element is modified if the field has an error",
+    },
+  },
+}
+StyleOverride.args = {
+  className: styles.example_select_override,
+  options: [
+    { label: 'DNA', value: 'dna' },
+    { label: 'RNA', value: 'rna' },
+    { label: 'Protein', value: 'protein' },
+  ],
+}

package/src/forms/Select.tsx

@@ -0,0 +1,132 @@
+import ReactSelect, { components as reactSelectComponents } from 'react-select'
+
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import styles from './Select.module.css'
+import type {
+  DropdownIndicatorProps,
+  Props as ReactSelectProps,
+  MenuProps,
+  StylesConfig,
+  CSSObjectWithLabel,
+} from 'react-select'
+import type { POSITION_ABSOLUTE, POSITION_FIXED } from '../styles'
+
+export { reactSelectComponents }
+
+export const PLACEMENT_AUTO: 'auto' = 'auto'
+export const PLACEMENT_BOTTOM: 'bottom' = 'bottom'
+export const PLACEMENT_TOP: 'top' = 'top'
+
+export const CONTEXT_MENU: 'menu' = 'menu'
+export const CONTEXT_VALUE: 'value' = 'value'
+
+export const SELECT_CX_PREFIX = 'ot_select'
+
+export type ChangeAction =
+  | 'select-option'
+  | 'deselect-option'
+  | 'remove-value'
+  | 'pop-value'
+  | 'set-value'
+  | 'clear'
+  | 'create-option'
+
+export interface SelectOption {
+  value: string
+  label?: string
+  isDisabled?: boolean
+}
+
+export interface SelectOptionGroup {
+  options: SelectOption[]
+  label?: string
+}
+
+// deprecated this type shouldn't be directly needed as the types for react-select
+// combine options and groups for us now
+export type SelectOptionOrGroup = SelectOption | SelectOptionGroup
+
+export type SelectPlacement =
+  | typeof PLACEMENT_AUTO
+  | typeof PLACEMENT_BOTTOM
+  | typeof PLACEMENT_TOP
+
+export type SelectPosition = typeof POSITION_ABSOLUTE | typeof POSITION_FIXED
+
+export type SelectOptionContext = typeof CONTEXT_MENU | typeof CONTEXT_VALUE
+
+export type SelectProps = ReactSelectProps<SelectOption>
+
+const VOID_STYLE: unknown = undefined
+const NO_STYLE_FN = (): CSSObjectWithLabel => VOID_STYLE as CSSObjectWithLabel
+
+const CLEAR_STYLES: StylesConfig<SelectOption> = {
+  clearIndicator: NO_STYLE_FN,
+  container: NO_STYLE_FN,
+  control: NO_STYLE_FN,
+  dropdownIndicator: NO_STYLE_FN,
+  group: NO_STYLE_FN,
+  groupHeading: NO_STYLE_FN,
+  indicatorsContainer: NO_STYLE_FN,
+  indicatorSeparator: NO_STYLE_FN,
+  input: (styles: CSSObjectWithLabel) => ({
+    ...styles,
+    zIndex: 2,
+    position: 'absolute',
+  }),
+  loadingIndicator: NO_STYLE_FN,
+  loadingMessage: NO_STYLE_FN,
+  menu: NO_STYLE_FN,
+  menuList: NO_STYLE_FN,
+  multiValue: NO_STYLE_FN,
+  multiValueLabel: NO_STYLE_FN,
+  multiValueRemove: NO_STYLE_FN,
+  option: NO_STYLE_FN,
+  // the following should not be cleared to ensure proper positioning
+  // included as comments so we can see what we're not touching
+  // noOptionsMessage: NO_STYLE_FN,
+  // menuPortal: _ => _,
+  // placeholder: _ => _,
+  // singleValue: _ => _,
+  // valueContainer: _ => _,
+}
+
+export function Select(props: SelectProps): JSX.Element {
+  return (
+    <ReactSelect
+      {...props}
+      styles={CLEAR_STYLES}
+      classNamePrefix={SELECT_CX_PREFIX}
+      className={cx(styles.select, props.className)}
+      components={{ DropdownIndicator, Menu }}
+    />
+  )
+}
+
+function DropdownIndicator(
+  props: DropdownIndicatorProps<SelectOption>
+): JSX.Element {
+  return (
+    <reactSelectComponents.DropdownIndicator {...props}>
+      <div
+        className={cx(styles.dropdown_indicator, {
+          [styles.flipped]: props.selectProps.menuIsOpen,
+        })}
+      >
+        <Icon
+          name="menu-down-pd"
+          className={cx(styles.dropdown_indicator_icon)}
+        />
+      </div>
+    </reactSelectComponents.DropdownIndicator>
+  )
+}
+
+const Menu = (props: MenuProps<SelectOption>): JSX.Element => (
+  <reactSelectComponents.Menu {...props}>
+    <div className={styles.menu}>{props.children}</div>
+    <div className={styles.menu_control_bridge} />
+  </reactSelectComponents.Menu>
+)

package/src/forms/SelectField.tsx

@@ -0,0 +1,94 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import find from 'lodash/find'
+
+import { Select } from './Select'
+import styles from './SelectField.module.css'
+
+import type { SelectProps } from './Select'
+import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
+import type { SelectOption } from '.'
+
+export interface SelectFieldProps {
+  /** optional HTML id for container */
+  id?: SelectProps['id']
+  /** field name */
+  name: NonNullable<SelectProps['name']>
+  /** react-Select option, usually label, value */
+  options: NonNullable<SelectProps['options']>
+  /** currently selected value */
+  value?: string | null
+  /** disable the select */
+  disabled?: SelectProps['isDisabled']
+  /** optional placeholder  */
+  placeholder?: SelectProps['placeholder']
+  /** menuPosition prop to send to react-select */
+  menuPosition?: SelectProps['menuPosition']
+  /** render function for the option label passed to react-select */
+  formatOptionLabel?: SelectProps['formatOptionLabel']
+  /** optional className */
+  className?: string
+  /** optional caption. hidden when `error` is given */
+  caption?: React.ReactNode
+  /** if included, use error style and display error instead of caption */
+  error?: string | null
+  /** change handler called with (name, value) */
+  onValueChange?: (
+    name: string,
+    value: string,
+    actionMeta: ActionMeta<SelectOption>
+  ) => void
+  /** blur handler called with (name) */
+  onLoseFocus?: (name: string) => void
+}
+
+export function SelectField(props: SelectFieldProps): JSX.Element {
+  const {
+    id,
+    name,
+    options,
+    disabled,
+    placeholder,
+    menuPosition,
+    formatOptionLabel,
+    className,
+    error,
+    onValueChange,
+    onLoseFocus,
+  } = props
+  // @ts-expect-error(mc, 2021-03-19): resolve this error
+  const allOptions = options.flatMap(og => og.options || [og])
+  const value = find(allOptions, opt => opt.value === props.value) || null
+  const caption = error || props.caption
+  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
+  const captionCx = cx(styles.select_caption, { [styles.error]: error })
+  // @ts-expect-error(sa, 2021-6-23): cast value to boolean
+  const fieldCx = cx(styles.select_field, { [styles.error]: error }, className)
+
+  return (
+    <div>
+      <Select
+        className={fieldCx}
+        id={id}
+        name={name}
+        options={options}
+        value={value}
+        isDisabled={disabled}
+        placeholder={placeholder}
+        menuPosition={menuPosition}
+        formatOptionLabel={formatOptionLabel}
+        onChange={(
+          opt: SingleValue<SelectOption> | MultiValue<SelectOption>,
+          e: ActionMeta<SelectOption>
+        ) => {
+          const value = (opt as SelectOption).value
+          onValueChange?.(name, value, e)
+        }}
+        onBlur={() => {
+          if (onLoseFocus != null) onLoseFocus(name)
+        }}
+      />
+      {caption != null ? <p className={captionCx}>{caption}</p> : null}
+    </div>
+  )
+}

package/src/forms/ToggleField.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { ToggleField as ToggleFieldComponent } from './ToggleField'
+
+import type { Story, Meta } from '@storybook/react'
+
+const Template: Story<
+  React.ComponentProps<typeof ToggleFieldComponent>
+> = args => {
+  const [isOn, setIsOn] = React.useState<boolean>(false)
+  return (
+    <ToggleFieldComponent
+      {...args}
+      onChange={e => {
+        setIsOn(!isOn)
+        args.onChange(e)
+      }}
+      value={isOn}
+    />
+  )
+}
+
+export const ToggleField = Template.bind({})
+ToggleField.args = {
+  label: 'Toggle Me',
+}
+
+export default {
+  title: 'Library/Molecules/Forms/Toggle Field',
+  component: ToggleField,
+} as Meta

package/src/forms/ToggleField.tsx

@@ -0,0 +1,59 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import { Icon } from '../icons'
+
+import styles from './forms.module.css'
+
+export interface ToggleFieldProps {
+  /** change handler */
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown
+  /** checkbox is checked if value is true */
+  value?: boolean
+  /** classes to apply */
+  className?: string
+  /** classes to apply to inner label text div */
+  labelTextClassName?: string | null | undefined
+  /** name of field in form */
+  name?: string
+  /** label text for toggled off */
+  offLabel?: string
+  /** label text for toggled on */
+  onLabel?: string
+  /** checkbox is disabled if value is true */
+  disabled?: boolean
+  /** html tabindex property */
+  tabIndex?: number
+}
+
+export function ToggleField(props: ToggleFieldProps): JSX.Element {
+  const outerClassName = cx(styles.form_field, props.className, {
+    [styles.toggle_disabled]: props.disabled,
+  })
+
+  const innerDivClassName = cx(styles.toggle_icon, {
+    [styles.toggle_disabled]: props.disabled,
+  })
+
+  return (
+    <label className={outerClassName}>
+      <div className={innerDivClassName}>
+        <Icon
+          name={props.value ? 'ot-toggle-field-on' : 'ot-toggle-field-off'}
+          width="100%"
+        />
+      </div>
+      <input
+        className={cx(styles.input_field, styles.accessibly_hidden)}
+        type="checkbox"
+        name={props.name}
+        checked={props.value || false}
+        disabled={props.disabled}
+        onChange={props.onChange}
+        tabIndex={props.tabIndex}
+      />
+      <div className={cx(props.labelTextClassName, styles.label_text)}>
+        {props.value ? props.onLabel : props.offLabel}
+      </div>
+    </label>
+  )
+}

package/src/forms/index.ts

@@ -0,0 +1,8 @@
+export * from './DeprecatedCheckboxField'
+export * from './DropdownField'
+export * from './FormGroup'
+export * from './LegacyInputField'
+export * from './RadioGroup'
+export * from './Select'
+export * from './SelectField'
+export * from './ToggleField'

package/src/hardware-sim/BaseDeck/BaseDeck.stories.tsx

@@ -0,0 +1,94 @@
+import type * as React from 'react'
+import {
+  fixture96Plate,
+  fixtureTiprack1000ul,
+  FLEX_ROBOT_TYPE,
+  HEATERSHAKER_MODULE_V1,
+  MAGNETIC_BLOCK_V1,
+  TEMPERATURE_MODULE_V2,
+  THERMOCYCLER_MODULE_V2,
+} from '@opentrons/shared-data'
+
+import {
+  EXTENDED_DECK_CONFIG_FIXTURE,
+  STANDARD_SLOT_DECK_CONFIG_FIXTURE,
+  WASTE_CHUTE_DECK_CONFIG_FIXTURE,
+} from './__fixtures__'
+import { BaseDeck as BaseDeckComponent } from './BaseDeck'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type {
+  DeckConfiguration,
+  LabwareDefinition2,
+} from '@opentrons/shared-data'
+
+const meta: Meta<React.ComponentProps<typeof BaseDeckComponent>> = {
+  component: BaseDeckComponent,
+  title: 'Library/Molecules/Simulation/BaseDeck',
+  argTypes: {
+    deckConfig: {
+      options: ['single slot deck', 'staging area deck', 'waste chute deck'],
+      control: { type: 'radio' },
+    },
+  },
+} as Meta
+
+export default meta
+type Story = StoryObj<React.ComponentProps<typeof BaseDeckComponent>>
+
+const getDeckConfig = (args: any): DeckConfiguration => {
+  switch (args.deckConfig) {
+    case 'staging area deck':
+      return EXTENDED_DECK_CONFIG_FIXTURE
+    case 'waste chute deck':
+      return WASTE_CHUTE_DECK_CONFIG_FIXTURE
+    default:
+      return STANDARD_SLOT_DECK_CONFIG_FIXTURE
+  }
+}
+
+export const BaseDeck: Story = {
+  args: {
+    robotType: FLEX_ROBOT_TYPE,
+    deckConfig: EXTENDED_DECK_CONFIG_FIXTURE,
+    labwareOnDeck: [
+      {
+        labwareLocation: { slotName: 'C2' },
+        definition: fixture96Plate as LabwareDefinition2,
+      },
+      {
+        labwareLocation: { slotName: 'C3' },
+        definition: fixtureTiprack1000ul as LabwareDefinition2,
+      },
+    ],
+    modulesOnDeck: [
+      {
+        moduleLocation: { slotName: 'B1' },
+        moduleModel: THERMOCYCLER_MODULE_V2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+        innerProps: { lidMotorState: 'open' },
+      },
+      {
+        moduleLocation: { slotName: 'D1' },
+        moduleModel: TEMPERATURE_MODULE_V2,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+      },
+      {
+        moduleLocation: { slotName: 'B3' },
+        moduleModel: HEATERSHAKER_MODULE_V1,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+      },
+      {
+        moduleLocation: { slotName: 'D2' },
+        moduleModel: MAGNETIC_BLOCK_V1,
+        nestedLabwareDef: fixture96Plate as LabwareDefinition2,
+      },
+    ],
+    darkFill: 'rebeccapurple',
+    lightFill: 'lavender',
+  },
+  render: args => {
+    const deckConfig = getDeckConfig(args)
+    return <BaseDeckComponent {...args} deckConfig={deckConfig} />
+  },
+}