@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/lib/tooltips/DeprecatedTooltip.d.ts

@@ -1,13 +1,13 @@
-import type * as React from 'react';
 import { Popper } from 'react-popper';
-type PopperProps = React.ComponentProps<typeof Popper>;
+import type { ComponentProps, ComponentType, PropsWithRef, ReactNode } from 'react';
+type PopperProps = ComponentProps<typeof Popper>;
 export interface DeprecatedTooltipProps {
     /** show or hide the tooltip */
     open?: boolean;
     /** contents of the tooltip */
-    tooltipComponent: React.ReactNode;
+    tooltipComponent: ReactNode;
     /** optional portal to place the tooltipComponent inside */
-    portal?: React.ComponentType<any>;
+    portal?: ComponentType<any>;
     /** <https://github.com/FezVrasta/react-popper#placement> */
     placement?: PopperProps['placement'];
     /** <https://github.com/FezVrasta/react-popper#positionfixed> */
@@ -15,9 +15,9 @@ export interface DeprecatedTooltipProps {
     /** <https://github.com/FezVrasta/react-popper#modifiers> */
     modifiers?: PopperProps['modifiers'];
     /** render function for tooltip'd component */
-    children: (props?: React.PropsWithRef<any>) => JSX.Element | null;
+    children: (props?: PropsWithRef<any>) => JSX.Element | null;
     /** extra props to pass to the children render function */
-    childProps?: React.PropsWithRef<any>;
+    childProps?: PropsWithRef<any>;
 }
 /**
  *  Basic, fully controlled Tooltip component.

package/lib/tooltips/HoverTooltip.d.ts

@@ -1,10 +1,11 @@
-import * as React from 'react';
+import { Component } from 'react';
+import type { PropsWithRef } from 'react';
 import type { DeprecatedTooltipProps } from './DeprecatedTooltip';
 interface MouseHandlers {
     onMouseEnter: () => void;
     onMouseLeave: () => void;
 }
-export type HoverTooltipHandlers = React.PropsWithRef<MouseHandlers>;
+export type HoverTooltipHandlers = PropsWithRef<MouseHandlers>;
 export type HoverTooltipProps = DeprecatedTooltipProps;
 interface HoverTooltipState {
     isOpen: boolean;
@@ -24,7 +25,7 @@ interface HoverTooltipState {
  *
  * @deprecated Use `Tooltip` and `useHoverTooltip` instead
  */
-export declare class HoverTooltip extends React.Component<HoverTooltipProps, HoverTooltipState> {
+export declare class HoverTooltip extends Component<HoverTooltipProps, HoverTooltipState> {
     openTimeout: number | null;
     closeTimeout: number | null;
     constructor(props: HoverTooltipProps);

package/lib/tooltips/LegacyTooltip.d.ts

@@ -1,12 +1,11 @@
-import * as React from 'react';
-import type { CSSProperties } from 'react';
-import type { Placement } from './types';
+import type { CSSProperties, ReactNode, RefCallback } from 'react';
 import type { StyleProps } from '../primitives';
+import type { Placement } from './types';
 export interface LegacyTooltipProps extends StyleProps {
     /** Whether or not the tooltip should be rendered */
     visible: boolean;
     /** Contents of the tooltip */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Tooltip element ID (provided by useTooltip). Will match
      * targetProps.aria-describedby
@@ -17,7 +16,7 @@ export interface LegacyTooltipProps extends StyleProps {
     /** Inline styles to apply to the tooltip element (provided by useTooltip) */
     style: CSSProperties;
     /** React function ref for tooltip's arrow element (provided by useTooltip) */
-    arrowRef: React.RefCallback<HTMLElement | null>;
+    arrowRef: RefCallback<HTMLElement | null>;
     /** Inline styles to apply to arrow element (provided by useTooltip) */
     arrowStyle: CSSProperties;
 }
@@ -25,10 +24,10 @@ export interface LegacyTooltipProps extends StyleProps {
  * Tooltip component that renders based on its `visible` prop. For use with the
  * `useTooltip` and `useHoverTooltip` hooks. See examples in `Tooltip.md`.
  */
-export declare const LegacyTooltip: React.ForwardRefExoticComponent<LegacyTooltipProps & React.RefAttributes<HTMLDivElement>>;
+export declare const LegacyTooltip: import("react").ForwardRefExoticComponent<LegacyTooltipProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface ArrowProps {
     placement: Placement | null;
-    arrowRef: React.RefCallback<HTMLElement>;
+    arrowRef: RefCallback<HTMLElement>;
     arrowStyle: CSSProperties;
     backgroundColor: string;
 }

package/lib/tooltips/types.d.ts

@@ -1,6 +1,6 @@
-import type { CSSProperties } from 'react';
-import type { Instance, Options, Modifier } from '@popperjs/core/lib/types';
-import type { UseHoverOptions, HoverHandlers } from '../interaction-enhancers';
+import type { Instance, Modifier, Options } from '@popperjs/core/lib/types';
+import type { CSSProperties, RefCallback } from 'react';
+import type { HoverHandlers, UseHoverOptions } from '../interaction-enhancers';
 export type Placement = Options['placement'];
 export type Strategy = Options['strategy'];
 export type PopperInstance = Instance;
@@ -26,15 +26,15 @@ export interface UseTooltipOptions {
     offset?: number;
 }
 export interface UseTooltipResultTargetProps {
-    ref: React.RefCallback<Element | null>;
+    ref: RefCallback<Element | null>;
     'aria-describedby': string;
 }
 export interface UseTooltipResultTooltipProps {
     id: string;
-    ref: React.RefCallback<HTMLElement | null>;
+    ref: RefCallback<HTMLElement | null>;
     placement: Placement | null;
     style: CSSProperties;
-    arrowRef: React.RefCallback<HTMLElement | null>;
+    arrowRef: RefCallback<HTMLElement | null>;
     arrowStyle: CSSProperties;
 }
 export type UseTooltipResult = [

package/lib/ui-style-constants/animation.d.ts

@@ -0,0 +1 @@
+export declare const easeInDefault: "all 150ms ease-in";

package/lib/ui-style-constants/index.d.ts

@@ -2,3 +2,4 @@ export * as RESPONSIVENESS from './responsiveness';
 export * as SPACING from './spacing';
 export * as TYPOGRAPHY from './typography';
 export * as VIEWPORT from './viewport';
+export * as ANIMATION from './animation';

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.6-alpha.9",
+  "version": "0.1.7-alpha.1",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
   "style": "src/index.module.css",
-  "main": "lib/index.mjs",
+  "main": "src/index.ts",
   "module": "src/index.ts",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.9",
+    "@opentrons/shared-data": "0.1.7-alpha.1",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -32,11 +32,14 @@
     "@types/webpack-env": "^1.16.0",
     "classnames": "2.2.5",
     "interactjs": "^1.10.27",
+    "i18next": "^19.8.3",
     "lodash": "4.17.21",
     "react-i18next": "14.0.0",
+    "react-markdown": "9.0.3",
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
     "react-select": "5.4.0",
+    "react-viewport-list": "6.3.0",
     "redux": "4.0.5",
     "styled-components": "5.3.6"
   },

package/src/Components.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Helix/AboutHelix" />
+
+# About Helix
+
+Helix is a design system for building user interfaces for Opentrons.
+Currently, it is used by the Desktop app, Touchscreen app, Protocol Designer, and Opentrons AI client.
+
+Figma: <a href="https://www.figma.com/design/1ot18My22DALIcjdLl5LJh/Helix-Design-System?node-id=302-1785&m=dev" target="_blank">Helix Design System</a>
+
+Contents will be added soon.

package/src/__mocks__/file.js

@@ -0,0 +1,10 @@
+// File transformer for Jest
+// Makes asset filenames appear in snapshots
+// see https://facebook.github.io/jest/docs/en/webpack.html
+const path = require('path')
+
+module.exports = {
+  process(src, filename, config, options) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename))
+  },
+}

package/src/__tests__/utils.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+
+import { truncateString } from '../utils'
+
+describe('truncateString', () => {
+  it('when an input string less than max length, return the original input', () => {
+    // Note (kj:05/03/2023) the max length and breakPoints are the same as what we use for the Desktop app
+    const str = 'opentrons-dev'
+    const result = truncateString(str, 80, 65)
+    expect(result).toEqual(str)
+  })
+
+  it('when an input string is more than 80 characters, return the truncated string', () => {
+    const str = `Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.Py`
+    const result = truncateString(str, 80, 65)
+    const truncatedStr =
+      'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting ...imen Book.Py'
+    expect(result).toEqual(truncatedStr)
+  })
+
+  it('when an input string is more than 80 characters without specifying the break point, return the truncated string', () => {
+    const str = `Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.Py`
+    const result = truncateString(str, 80)
+    const truncatedStr =
+      'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lo...'
+    expect(result).toEqual(truncatedStr)
+  })
+})

package/src/alerts/AlertItem.stories.tsx

@@ -0,0 +1,49 @@
+import { AlertItem } from './AlertItem'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
+
+export default {
+  title: 'Library/Molecules/AlertItem',
+  component: AlertItem,
+  argTypes: { onCloseClick: { action: 'clicked' } },
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof AlertItem>> = args => (
+  <AlertItem {...args} />
+)
+
+export const Basic = Template.bind({})
+Basic.args = {
+  type: 'success',
+  title: 'good job!',
+}
+
+export const OverriddenIcon = Template.bind({})
+OverriddenIcon.args = {
+  type: 'info',
+  title: 'Alert with overridden icon',
+  icon: { name: 'pause-circle' },
+}
+
+export const Stackable: Story<
+  React.ComponentProps<typeof AlertItem>
+> = args => (
+  <div>
+    <Template {...args} type="warning" title={'Warning with close button'} />
+    <Template
+      {...args}
+      onCloseClick={undefined}
+      type="warning"
+      title={'Warning with no close button'}
+    />
+    <Template {...args} type="warning" title={'Warning with no children'} />
+    <Template
+      {...args}
+      type="warning"
+      title={'Warning with React Node children'}
+    >
+      <p>Some additional info</p>
+    </Template>
+  </div>
+)

package/src/alerts/AlertItem.tsx

@@ -0,0 +1,86 @@
+import cx from 'classnames'
+
+import { IconButton } from '../buttons'
+import { Icon } from '../icons'
+import styles from './alerts.module.css'
+
+import type { ReactNode } from 'react'
+import type { IconProps } from '../icons'
+
+export type AlertType = 'success' | 'warning' | 'error' | 'info'
+
+export interface AlertItemProps {
+  /** name constant of the icon to display */
+  type: AlertType
+  /** title/main message of colored alert bar */
+  title: ReactNode
+  /** Alert message body contents */
+  children?: ReactNode
+  /** Additional class name */
+  className?: string
+  /** optional handler to show close button/clear alert  */
+  onCloseClick?: () => unknown
+  /** Override the default Alert Icon */
+  icon?: IconProps
+}
+
+/**
+ * Alert overlay,
+ * change style and icon by using type 'success' 'warning' 'error'
+ */
+
+const ALERT_PROPS_BY_TYPE: Record<
+  AlertType,
+  { icon: IconProps; className: string }
+> = {
+  success: {
+    icon: { name: 'check-circle' },
+    className: styles.success,
+  },
+  error: {
+    icon: { name: 'alert-circle' },
+    className: styles.error,
+  },
+  warning: {
+    icon: { name: 'alert-circle' },
+    className: styles.warning,
+  },
+  info: {
+    icon: { name: 'information' },
+    className: styles.info,
+  },
+}
+
+/**
+ * @deprecated Use 'Banner' instead
+ */
+
+export function AlertItem(props: AlertItemProps): JSX.Element {
+  const alertProps = ALERT_PROPS_BY_TYPE[props.type]
+  const icon = props.icon ? props.icon : alertProps.icon
+  const className = cx(styles.alert, alertProps.className, props.className)
+
+  const iconProps = {
+    ...icon,
+    className: styles.icon,
+  }
+
+  return (
+    <div className={className}>
+      <div className={styles.title_bar}>
+        <Icon {...iconProps} />
+        <span className={styles.title} data-testid="alert_item_title">
+          {props.title}
+        </span>
+        {props.onCloseClick && (
+          <IconButton
+            name="close"
+            onClick={props.onCloseClick}
+            className={styles.close}
+          />
+        )}
+      </div>
+      {props.children && <div className={styles.message}>{props.children}</div>}
+    </div>
+  )
+}

package/src/alerts/alerts.module.css

@@ -0,0 +1,103 @@
+@import '../index.module.css';
+
+.alert {
+  font-size: var(--fs-body-2);
+  font-weight: var(--fw-regular);
+}
+
+.alert:not(:first-of-type) {
+  border-top: none;
+}
+
+.title_bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  font-weight: var(--fw-semibold);
+}
+
+.title {
+  width: 100%;
+}
+
+.success {
+  border: 1px solid var(--c-success);
+
+  & > .title_bar {
+    background-color: var(--c-bg-success);
+    color: var(--c-success);
+
+    & svg {
+      color: var(--c-success);
+    }
+  }
+}
+
+.info {
+  border: 1px solid var(--c-highlight);
+
+  & > .title_bar {
+    background-color: var(--c-bg-selected);
+    color: var(--c-selected-dark);
+
+    & svg {
+      color: var(--c-highlight);
+    }
+  }
+}
+
+.warning {
+  border: 1px solid var(--c-warning);
+
+  & > .title_bar {
+    background-color: var(--c-warning-light);
+    color: var(--c-warning-dark);
+
+    & svg {
+      fill: var(--c-warning);
+    }
+  }
+}
+
+.error {
+  border: 1px solid var(--c-error);
+
+  & > .title_bar {
+    background-color: var(--c-error-light);
+    color: var(--c-error-dark);
+
+    & svg {
+      fill: var(--c-error);
+    }
+  }
+}
+
+.message {
+  padding: 1rem 3rem;
+  background-color: white;
+
+  & a {
+    text-decoration: underline;
+    color: inherit;
+  }
+
+  &:empty {
+    padding: 0;
+  }
+}
+
+.icon {
+  width: 1.5rem;
+  margin-right: 0.5rem;
+}
+
+.close {
+  width: 2rem;
+  padding: 0.125rem;
+
+  &:hover {
+    background-color: rgba(100, 100, 100, 0.1);
+  }
+}

package/src/alerts/index.ts

@@ -0,0 +1,3 @@
+// alert components
+
+export * from './AlertItem'

package/src/assets/localization/en/index.ts

@@ -0,0 +1,8 @@
+import protocol_command_text from './protocol_command_text.json'
+
+// i18n files needed for unit testing. this is the quick fix for now until we figure out
+// one source of truth for sharing the protocol_command_text
+// translation across multiple projects
+export const en = {
+  protocol_command_text,
+}

package/src/assets/localization/en/protocol_command_text.json

@@ -0,0 +1,116 @@
+{
+  "absorbance_reader_close_lid": "Closing Absorbance Reader lid",
+  "absorbance_reader_initialize": "Initializing Absorbance Reader to perform {{mode}} measurement at {{wavelengths}}",
+  "absorbance_reader_open_lid": "Opening Absorbance Reader lid",
+  "absorbance_reader_read": "Reading plate in Absorbance Reader",
+  "adapter_in_mod_in_slot": "{{adapter}} on {{module}} in Slot {{slot}}",
+  "adapter_in_slot": "{{adapter}} in Slot {{slot}}",
+  "air_gap_in_place": "Air gapping {{volume}} µL",
+  "all_nozzles": "all nozzles",
+  "aspirate": "Aspirating {{volume}} µL from well {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} µL/sec",
+  "aspirate_in_place": "Aspirating {{volume}} µL in place at {{flow_rate}} µL/sec ",
+  "blowout": "Blowing out at well {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} µL/sec",
+  "blowout_in_place": "Blowing out in place at {{flow_rate}} µL/sec",
+  "closing_tc_lid": "Closing Thermocycler lid",
+  "column_layout": "column layout",
+  "comment": "Comment",
+  "configure_for_volume": "Configure {{pipette}} to aspirate {{volume}} µL",
+  "configure_nozzle_layout": "Configure {{pipette}} to use {{layout}}",
+  "confirm_and_resume": "Confirm and resume",
+  "deactivate_hs_shake": "Deactivating shaker",
+  "deactivate_temperature_module": "Deactivating Temperature Module",
+  "deactivating_hs_heater": "Deactivating heater",
+  "deactivating_tc_block": "Deactivating Thermocycler block",
+  "deactivating_tc_lid": "Deactivating Thermocycler lid",
+  "degrees_c": "{{temp}}°C",
+  "detect_liquid_presence": "Detecting liquid presence in well {{well_name}} of {{labware}} in {{labware_location}}",
+  "disengaging_magnetic_module": "Disengaging Magnetic Module",
+  "dispense": "Dispensing {{volume}} µL into well {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} µL/sec",
+  "dispense_in_place": "Dispensing {{volume}} µL in place at {{flow_rate}} µL/sec",
+  "dispense_push_out": "Dispensing {{volume}} µL into well {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} µL/sec and pushing out {{push_out_volume}} µL",
+  "drop_tip": "Dropping tip in {{well_name}} of {{labware}}",
+  "drop_tip_in_place": "Dropping tip in place",
+  "dropping_tip_in_trash": "Dropping tip in {{trash}}",
+  "engaging_magnetic_module": "Engaging Magnetic Module",
+  "extension_mount": "extension mount",
+  "extension_z": "extension Z",
+  "extension_jaw": "extension jaw",
+  "fixed_trash": "Fixed Trash",
+  "get_next_tip": "Calculating position of the next available tip",
+  "home_gantry": "Homing all gantry, pipette, and plunger axes",
+  "in_location": "in {{location}}",
+  "latching_hs_latch": "Latching labware on Heater-Shaker",
+  "left": "Left",
+  "left_mount": "left mount",
+  "left_plunger": "left plunger",
+  "left_z": "left Z",
+  "load_labware_to_display_location": "Load {{labware}} {{display_location}}",
+  "load_liquid_class": "Loading {{liquidClassDisplayName}} Liquid Class",
+  "load_liquids_info_protocol_setup": "Load {{liquid}} into {{labware}}",
+  "load_module_protocol_setup": "Load {{module}} in Slot {{slot_name}}",
+  "load_pipette_protocol_setup": "Load {{pipette_name}} in {{mount_name}} Mount",
+  "module_in_slot": "{{module}} in Slot {{slot_name}}",
+  "module_in_slot_plural": "{{module}}",
+  "move_labware": "Move Labware",
+  "move_labware_manually": "Manually move {{labware}} from {{old_location}} to {{new_location}}",
+  "move_labware_on": "Move labware on {{robot_name}}",
+  "move_labware_using_gripper": "Moving {{labware}} using gripper from {{old_location}} to {{new_location}}",
+  "move_relative": "Moving {{distance}} mm along {{axis}} axis",
+  "move_to_addressable_area": "Moving to {{addressable_area}}",
+  "move_to_addressable_area_drop_tip": "Moving to {{addressable_area}}",
+  "move_to_coordinates": "Moving to (X: {{x}}, Y: {{y}}, Z: {{z}})",
+  "move_to_slot": "Moving to Slot {{slot_name}}",
+  "move_to_well": "Moving to well {{well_name}} of {{labware}} in {{labware_location}}",
+  "multiple": "multiple",
+  "notes": "notes",
+  "off_deck": "off deck",
+  "offdeck": "offdeck",
+  "on_location": "on {{location}}",
+  "opening_tc_lid": "Opening Thermocycler lid",
+  "pause": "Pause",
+  "pause_on": "Pause on {{robot_name}}",
+  "partial_layout": "partial layout",
+  "pickup_tip": "Picking up tip(s) from {{well_range}} of {{labware}} in {{labware_location}}",
+  "prepare_to_aspirate": "Preparing {{pipette}} to aspirate",
+  "reloading_labware": "Reloading {{labware}}",
+  "return_tip": "Returning tip to {{well_name}} of {{labware}} in {{labware_location}}",
+  "right": "Right",
+  "right_mount": "right mount",
+  "right_plunger": "right plunger",
+  "right_z": "right Z",
+  "robot_close_gripper_jaw": "Closing robot gripper jaw",
+  "robot_move_to": "Moving {{mount}} to (X: {{x}}, Y: {{y}}, Z: {{z}})",
+  "robot_move_axes_relative": "Moving robot by {{displacement}}",
+  "robot_move_axes_to": "Moving robot to {{position}}",
+  "robot_open_gripper_jaw": "Opening robot gripper jaw",
+  "row_layout": "row layout",
+  "save_position": "Saving position",
+  "set_and_await_hs_shake": "Setting Heater-Shaker to shake at {{rpm}} rpm and waiting until reached",
+  "setting_hs_temp": "Setting Target Temperature of Heater-Shaker to {{temp}}",
+  "setting_temperature_module_temp": "Setting Temperature Module to {{temp}} (rounded to nearest integer)",
+  "setting_thermocycler_block_temp": "Setting Thermocycler block temperature to {{temp}} with hold time of {{hold_time_seconds}} seconds after target reached",
+  "setting_thermocycler_lid_temp": "Setting Thermocycler lid temperature to {{temp}}",
+  "single": "single",
+  "single_nozzle_layout": "single nozzle layout",
+  "slot": "Slot {{slot_name}}",
+  "target_temperature": "target temperature",
+  "tc_awaiting_for_duration": "Waiting for Thermocycler profile to complete",
+  "tc_run_profile_steps": "Temperature: {{celsius}}°C, hold time: {{duration}}",
+  "tc_starting_extended_profile": "Running thermocycler profile with {{elementCount}} total steps and cycles:",
+  "tc_starting_extended_profile_cycle": "{{repetitions}} repetitions of the following steps:",
+  "tc_starting_profile": "Running thermocycler profile with {{stepCount}} steps:",
+  "touch_tip": "Touching tip",
+  "trash_bin": "Trash Bin",
+  "trash_bin_in_slot": "Trash Bin in {{slot_name}}",
+  "turning_rail_lights_off": "Turning rail lights off",
+  "turning_rail_lights_on": "Turning rail lights on",
+  "unlatching_hs_latch": "Unlatching labware on Heater-Shaker",
+  "wait_for_duration": "Pausing for {{seconds}} seconds. {{message}}",
+  "wait_for_resume": "Pausing protocol",
+  "waiting_for_hs_to_reach": "Waiting for Heater-Shaker to reach target temperature",
+  "waiting_for_tc_block_to_reach": "Waiting for Thermocycler block to reach target temperature and holding for specified time",
+  "waiting_for_tc_lid_to_reach": "Waiting for Thermocycler lid to reach target temperature",
+  "waiting_to_reach_temp_module": "Waiting for Temperature Module to reach {{temp}}",
+  "waste_chute": "Waste Chute",
+  "with_reference_of": "with reference of {{wavelength}} nm"
+}

package/src/assets/localization/index.ts

@@ -0,0 +1,7 @@
+import { en } from './en'
+import { zh } from './zh'
+
+export const resources = {
+  en,
+  zh,
+}

package/src/assets/localization/zh/index.ts

@@ -0,0 +1,8 @@
+import protocol_command_text from './protocol_command_text.json'
+
+// i18n files needed for unit testing. this is the quick fix for now until we figure out
+// one source of truth for sharing the protocol_command_text
+// translation across multiple projects
+export const zh = {
+  protocol_command_text,
+}