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

package/vite.config.mts

@@ -12,12 +12,16 @@ export default defineConfig({
     // Relative to the root
     ssr: 'src/index.ts',
     outDir: 'lib',
-    // do not delete the outdir, typescript types might live there and we dont want to delete them
+    // Do not delete the outdir, typescript types might live there and we don't want to delete them
     emptyOutDir: false,
     commonjsOptions: {
       transformMixedEsModules: true,
       esmExternals: true,
     },
+    rollupOptions: {
+      // Only @opentrons/shared-data is external; step-generation will be bundled!
+      external: ['@opentrons/shared-data'],
+    },
   },
   plugins: [
     react({

package/lib/controls/LabeledToggle.d.ts

@@ -1,11 +0,0 @@
-import type { ReactNode } from 'react';
-export interface LabeledToggleProps {
-    label: string;
-    toggledOn: boolean;
-    disabled?: boolean;
-    children?: ReactNode;
-    onClick: () => unknown;
-    /** optional data test id for the container */
-    'data-test'?: string;
-}
-export declare function LabeledToggle(props: LabeledToggleProps): JSX.Element;

package/lib/hardware-sim/Labware/LabwareStackRender.d.ts

@@ -1,20 +0,0 @@
-import type { RefObject } from 'react';
-import type { LabwareDefinition2 } from '@opentrons/shared-data';
-import type { HighlightedWellLabels } from './labwareInternals/types';
-import type { WellLabelOption } from '../..';
-export interface LabwareStackRenderProps {
-    /** Labware definitions in stack to render */
-    definitionTop: LabwareDefinition2;
-    /** option to highlight well labels with specified color */
-    highlightedWellLabels?: HighlightedWellLabels;
-    /** highlight top labware */
-    highlightTop: boolean;
-    /** highlight bottom labware if it exists */
-    highlightBottom: boolean;
-    gRef?: RefObject<SVGGElement>;
-    definitionBottom?: LabwareDefinition2 | null;
-    shouldRotateAdapterOrientation?: boolean;
-    /** option to show well labels inside or outside of labware outline */
-    wellLabelOption?: WellLabelOption;
-}
-export declare const LabwareStackRender: (props: LabwareStackRenderProps) => JSX.Element;

package/lib/hardware-sim/ProtocolDeck/LabwareInfo.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-import type { LabwareDefinition2 } from '@opentrons/shared-data';
-export declare function LabwareInfo(props: {
-    def: LabwareDefinition2;
-    children: ReactNode;
-}): JSX.Element;

package/lib/hardware-sim/ProtocolDeck/index.d.ts

@@ -1,11 +0,0 @@
-import { BaseDeck } from '../BaseDeck';
-import type { ComponentProps } from 'react';
-import type { CompletedProtocolAnalysis, ProtocolAnalysisOutput } from '@opentrons/shared-data';
-export * from './utils/getStandardDeckViewLayerBlockList';
-export * from './types';
-interface ProtocolDeckProps {
-    protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput | null;
-    /** extra props to pass through to BaseDeck component */
-    baseDeckProps?: Partial<ComponentProps<typeof BaseDeck>>;
-}
-export declare function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null;

package/lib/hardware-sim/ProtocolDeck/types.d.ts

@@ -1,8 +0,0 @@
-export interface LabwareByLiquidId {
-    [liquidId: string]: Array<{
-        labwareId: string;
-        volumeByWell: {
-            [well: string]: number;
-        };
-    }>;
-}

package/lib/hardware-sim/ProtocolDeck/utils/getInitiallyLoadedLabwareByAdapter.d.ts

@@ -1,5 +0,0 @@
-import type { LoadLabwareRunTimeCommand, RunTimeCommand } from '@opentrons/shared-data';
-export interface LoadedLabwareByAdapter {
-    [labwareId: string]: LoadLabwareRunTimeCommand;
-}
-export declare function getInitialLoadedLabwareByAdapter(commands: RunTimeCommand[]): LoadedLabwareByAdapter;

package/lib/hardware-sim/ProtocolDeck/utils/getLabwareInSlots.d.ts

@@ -1,12 +0,0 @@
-import type { CompletedProtocolAnalysis, ProtocolAnalysisOutput, LabwareDefinition2 } from '@opentrons/shared-data';
-interface LabwareInSlot {
-    labwareId: string;
-    labwareDef: LabwareDefinition2;
-    labwareNickName: string | null;
-    location: {
-        slotName: string;
-    };
-}
-export declare const getInitialAndMovedLabwareInSlots: (protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput) => LabwareInSlot[];
-export declare const getTopMostLabwareInSlots: (protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput) => LabwareInSlot[];
-export {};

package/lib/hardware-sim/ProtocolDeck/utils/getLabwareInfoByLiquidId.d.ts

@@ -1,3 +0,0 @@
-import type { RunTimeCommand } from '@opentrons/shared-data';
-import type { LabwareByLiquidId } from '../types';
-export declare function getLabwareInfoByLiquidId(commands: RunTimeCommand[]): LabwareByLiquidId;

package/lib/hardware-sim/ProtocolDeck/utils/getModulesInSlots.d.ts

@@ -1,10 +0,0 @@
-import type { CompletedProtocolAnalysis, ProtocolAnalysisOutput, ModuleLocation, ModuleModel, LabwareDefinition2 } from '@opentrons/shared-data';
-interface ModuleInSlot {
-    moduleModel: ModuleModel;
-    moduleLocation: ModuleLocation;
-    nestedLabwareId: string | null;
-    nestedLabwareDef: LabwareDefinition2 | null;
-    nestedLabwareNickName: string | null;
-}
-export declare const getModulesInSlots: (protocolAnalysis: ProtocolAnalysisOutput | CompletedProtocolAnalysis) => ModuleInSlot[];
-export {};

package/lib/hardware-sim/ProtocolDeck/utils/getStandardDeckViewLayerBlockList.d.ts

@@ -1,2 +0,0 @@
-import type { RobotType } from '@opentrons/shared-data';
-export declare const getStandardDeckViewLayerBlockList: (robotType: RobotType) => string[];

package/lib/hardware-sim/ProtocolDeck/utils/getWellFillFromLabwareId.d.ts

@@ -1,4 +0,0 @@
-import type { Liquid } from '@opentrons/shared-data';
-import type { WellFill } from '../../Labware';
-import type { LabwareByLiquidId } from '../types';
-export declare function getWellFillFromLabwareId(labwareId: string, liquidsInLoadOrder: Liquid[], labwareByLiquidId: LabwareByLiquidId): WellFill;

package/lib/hardware-sim/ProtocolDeck/utils/index.d.ts

@@ -1,4 +0,0 @@
-export * from './getLabwareInSlots';
-export * from './getStandardDeckViewLayerBlockList';
-export * from './getLabwareInfoByLiquidId';
-export * from './getWellFillFromLabwareId';

package/lib/instrument/PipetteSelect.d.ts

@@ -1,20 +0,0 @@
-import type { ActionMeta } from 'react-select';
-import type { SelectOption } from '../forms';
-export interface PipetteSelectProps {
-    /** currently selected value, optional in case selecting triggers immediate action */
-    pipetteName?: string | null;
-    /** react-select change handler */
-    onPipetteChange: (pipetteName: string | null, e: ActionMeta<SelectOption>) => void;
-    /** list of pipette names to omit */
-    nameBlocklist?: string[];
-    /** whether or not "None" shows up as the default option */
-    enableNoneOption?: boolean;
-    /** input tabIndex */
-    tabIndex?: string | number;
-    /** classes to apply to the top-level component */
-    className?: string;
-    /** custom id to be applied. likely to be used as a data test id for e2e testing */
-    id?: string;
-    disabled?: boolean;
-}
-export declare const PipetteSelect: (props: PipetteSelectProps) => JSX.Element;

package/src/controls/LabeledToggle.tsx

@@ -1,35 +0,0 @@
-import { LabeledControl } from './LabeledControl'
-import { ToggleButton } from './ToggleButton'
-import styles from './styles.module.css'
-
-import type { ReactNode } from 'react'
-
-export interface LabeledToggleProps {
-  label: string
-  toggledOn: boolean
-  disabled?: boolean
-  children?: ReactNode
-  onClick: () => unknown
-  /** optional data test id for the container */
-  'data-test'?: string
-}
-
-export function LabeledToggle(props: LabeledToggleProps): JSX.Element {
-  const { label, toggledOn, disabled, onClick } = props
-
-  return (
-    <LabeledControl
-      label={label}
-      control={
-        <ToggleButton
-          className={styles.labeled_toggle_button}
-          toggledOn={toggledOn}
-          disabled={disabled}
-          onClick={onClick}
-        />
-      }
-    >
-      {props.children}
-    </LabeledControl>
-  )
-}

package/src/hardware-sim/Labware/LabwareStackRender.tsx

@@ -1,273 +0,0 @@
-import { WellLabels, StaticLabware } from './labwareInternals'
-import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
-import { COLORS } from '../../helix-design-system'
-import { Svg } from '../..'
-
-import type { RefObject } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-import type { HighlightedWellLabels } from './labwareInternals/types'
-import type { LabwareAdapterLoadName } from './LabwareAdapter'
-import type { WellLabelOption } from '../..'
-
-const HIGHLIGHT_COLOR = COLORS.blue30
-const STROKE_WIDTH = 1
-const SKEW_ANGLE_DEGREES = 30
-const ROTATE_ANGLE_DEGREES = 30
-const SKEW_ANGLE_RADIANS = (SKEW_ANGLE_DEGREES * Math.PI) / 180
-const ROTATE_ANGLE_RADIANS = (ROTATE_ANGLE_DEGREES * Math.PI) / 180
-const COSINE_SKEW_ANGLE = Math.cos(SKEW_ANGLE_RADIANS)
-const STACK_SEPARATION_MM = 20
-
-export interface LabwareStackRenderProps {
-  /** Labware definitions in stack to render */
-  definitionTop: LabwareDefinition2
-  /** option to highlight well labels with specified color */
-  highlightedWellLabels?: HighlightedWellLabels
-  /** highlight top labware */
-  highlightTop: boolean
-  /** highlight bottom labware if it exists */
-  highlightBottom: boolean
-  gRef?: RefObject<SVGGElement>
-  definitionBottom?: LabwareDefinition2 | null
-  shouldRotateAdapterOrientation?: boolean
-  /** option to show well labels inside or outside of labware outline */
-  wellLabelOption?: WellLabelOption
-}
-
-// calculate overall height for viewbox
-const getLabwareFaceHeightIso = (definition: LabwareDefinition2): number => {
-  const { xDimension, yDimension } = definition.dimensions
-  return Math.round(
-    xDimension * Math.sin(SKEW_ANGLE_RADIANS) +
-      (yDimension / Math.cos(SKEW_ANGLE_RADIANS)) *
-        Math.cos(SKEW_ANGLE_RADIANS + ROTATE_ANGLE_RADIANS)
-  )
-}
-
-const getLabwareHeightIso = (definition: LabwareDefinition2): number => {
-  const { zDimension } = definition.dimensions
-  return Math.round(getLabwareFaceHeightIso(definition) + zDimension)
-}
-
-const getXMinForViewbox = (definition: LabwareDefinition2): number => {
-  const { yDimension } = definition.dimensions
-  return Math.round(
-    (yDimension / Math.cos(SKEW_ANGLE_RADIANS)) *
-      Math.cos(Math.PI / 2 - (SKEW_ANGLE_RADIANS + ROTATE_ANGLE_RADIANS))
-  )
-}
-
-const getLabwareWidthIso = (definition: LabwareDefinition2): number => {
-  const { xDimension } = definition.dimensions
-  return (
-    getXMinForViewbox(definition) + xDimension * Math.cos(ROTATE_ANGLE_RADIANS)
-  )
-}
-
-export const LabwareStackRender = (
-  props: LabwareStackRenderProps
-): JSX.Element => {
-  const {
-    gRef,
-    definitionTop,
-    definitionBottom,
-    highlightTop,
-    wellLabelOption,
-    shouldRotateAdapterOrientation,
-    highlightBottom = false,
-  } = props
-
-  const labwareLoadNameTop = definitionTop.parameters.loadName
-  const fillColorTop = highlightTop ? HIGHLIGHT_COLOR : COLORS.white
-  const fillColorBottom = highlightBottom ? HIGHLIGHT_COLOR : COLORS.white
-
-  // only one labware (top)
-  if (
-    definitionBottom == null ||
-    definitionBottom.parameters.loadName === 'opentrons_flex_96_tiprack_adapter'
-  ) {
-    const { xDimension, yDimension } = definitionTop.dimensions
-    const isTopAdapter = labwareAdapterLoadNames.includes(
-      definitionTop.parameters.loadName
-    )
-
-    return isTopAdapter ? (
-      // adapter render
-      <Svg
-        viewBox={`0 0 ${xDimension} ${yDimension}`}
-        transform={
-          shouldRotateAdapterOrientation
-            ? `rotate(180, ${xDimension / 2}, ${yDimension / 2})`
-            : 'rotate(0, 0, 0)'
-        }
-        maxWidth="100%"
-        maxHeight="100%"
-      >
-        <LabwareAdapter
-          labwareLoadName={labwareLoadNameTop as LabwareAdapterLoadName}
-        />
-      </Svg>
-    ) : (
-      // isometric view of labware
-      <Svg
-        viewBox={`-${getXMinForViewbox(definitionTop)} -${
-          definitionTop.dimensions.zDimension
-        } ${getLabwareWidthIso(definitionTop)} ${
-          getLabwareFaceHeightIso(definitionTop) +
-          definitionTop.dimensions.zDimension
-        }`}
-        transform="scale(1, -1)"
-        maxWidth="100%"
-        maxHeight="100%"
-      >
-        <g
-          transform={`rotate(${SKEW_ANGLE_DEGREES}) skewX(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-          ref={gRef}
-          fill={fillColorTop}
-        >
-          <StaticLabware
-            definition={definitionTop}
-            fill={fillColorTop}
-            showRadius={false}
-          />
-          {wellLabelOption != null &&
-          definitionTop.metadata.displayCategory !== 'adapter' ? (
-            <WellLabels
-              definition={definitionTop}
-              wellLabelOption={wellLabelOption}
-              wellLabelColor={fillColorTop}
-              highlightedWellLabels={props.highlightedWellLabels}
-            />
-          ) : null}
-        </g>
-        <rect
-          width={definitionTop.dimensions.yDimension - STROKE_WIDTH}
-          height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
-          transform={`rotate(180) skewY(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-          strokeWidth={STROKE_WIDTH}
-          stroke={COLORS.black90}
-          fill={fillColorTop}
-        />
-        <rect
-          width={definitionTop.dimensions.xDimension - STROKE_WIDTH}
-          height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
-          transform={`skewY(${SKEW_ANGLE_DEGREES}) scale(${
-            COSINE_SKEW_ANGLE ** 2
-          }, -${COSINE_SKEW_ANGLE}) `}
-          strokeWidth={STROKE_WIDTH}
-          stroke={COLORS.black90}
-          fill={fillColorTop}
-        />
-      </Svg>
-    )
-  }
-
-  const xMinForViewbox = Math.min(
-    ...[definitionTop, definitionBottom].map(def => getXMinForViewbox(def))
-  )
-
-  const totalAssemblyHeight =
-    getLabwareHeightIso(definitionTop) +
-    STACK_SEPARATION_MM +
-    definitionBottom.dimensions.zDimension
-
-  return (
-    <Svg
-      viewBox={`-${xMinForViewbox} -${
-        definitionBottom.dimensions.zDimension
-      } ${getLabwareWidthIso(definitionTop)} ${totalAssemblyHeight}`}
-      transform="scale(1, -1)"
-      maxWidth="100%"
-      maxHeight="100%"
-    >
-      {/* bottom labware/adapter */}
-      {definitionBottom.parameters.loadName ===
-      'opentrons_flex_96_tiprack_adapter' ? null : (
-        <>
-          <g
-            transform={`rotate(${SKEW_ANGLE_DEGREES}) skewX(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-            ref={gRef}
-            fill={fillColorBottom}
-          >
-            <StaticLabware
-              definition={definitionBottom}
-              fill={fillColorBottom}
-              showRadius={false}
-            />
-            {wellLabelOption != null &&
-            definitionBottom.metadata.displayCategory !== 'adapter' ? (
-              <WellLabels
-                definition={definitionTop}
-                wellLabelOption={wellLabelOption}
-                wellLabelColor={fillColorBottom}
-                highlightedWellLabels={props.highlightedWellLabels}
-              />
-            ) : null}
-          </g>
-          <rect
-            width={definitionBottom.dimensions.yDimension - STROKE_WIDTH}
-            height={definitionBottom.dimensions.zDimension - STROKE_WIDTH}
-            transform={`rotate(180) skewY(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-            strokeWidth={STROKE_WIDTH}
-            stroke={COLORS.black90}
-            fill={fillColorBottom}
-          />
-          <rect
-            width={definitionBottom.dimensions.xDimension - STROKE_WIDTH}
-            height={definitionBottom.dimensions.zDimension - STROKE_WIDTH}
-            transform={`skewY(${SKEW_ANGLE_DEGREES}) scale(${
-              COSINE_SKEW_ANGLE ** 2
-            }, -${COSINE_SKEW_ANGLE}) `}
-            strokeWidth={STROKE_WIDTH}
-            stroke={COLORS.black90}
-            fill={fillColorBottom}
-          />
-        </>
-      )}
-      {/* top labware/adapter */}
-      <g
-        transform={`translate(0, ${
-          definitionTop.dimensions.zDimension + STACK_SEPARATION_MM
-        }) rotate(${SKEW_ANGLE_DEGREES}) skewX(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-        ref={gRef}
-      >
-        <StaticLabware
-          definition={definitionTop}
-          fill={fillColorTop}
-          showRadius={false}
-        />
-        {wellLabelOption != null &&
-        definitionTop.metadata.displayCategory !== 'adapter' ? (
-          <WellLabels
-            definition={definitionTop}
-            wellLabelOption={wellLabelOption}
-            wellLabelColor={fillColorTop}
-            highlightedWellLabels={props.highlightedWellLabels}
-          />
-        ) : null}
-      </g>
-      <rect
-        width={definitionTop.dimensions.yDimension - STROKE_WIDTH}
-        height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
-        transform={`translate(0, ${
-          definitionTop.dimensions.zDimension + STACK_SEPARATION_MM
-        }) rotate(180) skewY(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
-        strokeWidth={STROKE_WIDTH}
-        stroke={COLORS.black90}
-        fill={fillColorTop}
-      />
-      <rect
-        width={definitionTop.dimensions.xDimension - STROKE_WIDTH}
-        height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
-        transform={`translate(0, ${
-          definitionTop.dimensions.zDimension + STACK_SEPARATION_MM
-        }) skewY(${SKEW_ANGLE_DEGREES}) scale(${
-          COSINE_SKEW_ANGLE ** 2
-        } , -${COSINE_SKEW_ANGLE}) `}
-        strokeWidth={STROKE_WIDTH}
-        stroke={COLORS.black90}
-        fill={fillColorTop}
-      />
-    </Svg>
-  )
-}

package/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx

@@ -1,69 +0,0 @@
-import { css } from 'styled-components'
-
-import { RobotCoordsForeignDiv } from '../Deck'
-import {
-  DISPLAY_FLEX,
-  DIRECTION_COLUMN,
-  DIRECTION_ROW,
-  JUSTIFY_FLEX_END,
-  JUSTIFY_SPACE_BETWEEN,
-  ALIGN_FLEX_START,
-} from '../../styles'
-import { Box, Flex, Text } from '../../primitives'
-import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
-
-import type { ReactNode } from 'react'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-
-const labwareDisplayNameStyle = css`
-  ${TYPOGRAPHY.labelSemiBold}
-  overflow: hidden;
-  white-space: initial;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-`
-export function LabwareInfo(props: {
-  def: LabwareDefinition2
-  children: ReactNode
-}): JSX.Element {
-  const width = props.def.dimensions.xDimension
-  const height = props.def.dimensions.yDimension
-  return (
-    <RobotCoordsForeignDiv
-      x={0}
-      y={0}
-      {...{ width, height }}
-      innerDivProps={{
-        display: DISPLAY_FLEX,
-        flexDirection: DIRECTION_COLUMN,
-        justifyContent: JUSTIFY_FLEX_END,
-      }}
-    >
-      <Box
-        backgroundColor="#000000B3"
-        borderRadius="0 0 0.4rem 0.4rem"
-        fontSize={TYPOGRAPHY.fontSizeCaption}
-        padding={SPACING.spacing4}
-        color={COLORS.white}
-      >
-        <Flex
-          flexDirection={DIRECTION_ROW}
-          justifyContent={JUSTIFY_SPACE_BETWEEN}
-          alignItems={ALIGN_FLEX_START}
-          gridGap={SPACING.spacing4}
-        >
-          <Text
-            as="h6"
-            lineHeight={TYPOGRAPHY.fontSizeCaption}
-            css={labwareDisplayNameStyle}
-          >
-            {props.children}
-          </Text>
-        </Flex>
-      </Box>
-    </RobotCoordsForeignDiv>
-  )
-}

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

@@ -1,25 +0,0 @@
-import type * as React from 'react'
-import analysisFileFixture from './__fixtures__/analysis_QIAseqFX24xv4_8.json'
-
-import { ProtocolDeck as ProtocolDeckComponent } from './'
-
-import type { Meta, StoryObj } from '@storybook/react'
-import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
-
-const meta: Meta<React.ComponentProps<typeof ProtocolDeckComponent>> = {
-  component: ProtocolDeckComponent,
-  title: 'Library/Molecules/Simulation/ProtocolDeck',
-} as Meta
-
-export default meta
-type Story = StoryObj<React.ComponentProps<typeof ProtocolDeckComponent>>
-
-export const ProtocolDeck: Story = {
-  args: {
-    // @ts-expect-error typescript can't import JSON as const
-    protocolAnalysis: analysisFileFixture as ProtocolAnalysisOutput,
-  },
-  render: args => {
-    return <ProtocolDeckComponent {...args} />
-  },
-}