@opentrons/components 0.1.6-alpha.8 → 0.1.7-alpha.0

package/lib/organisms/CommandText/useCommandTextString/utils/getLabwareLocation.d.ts

@@ -0,0 +1,37 @@
+import type { LabwareDefinition2, LabwareLocation, ModuleModel, RobotType, LabwareLocationSequence } from '@opentrons/shared-data';
+import type { LoadedLabwares, LoadedModules } from './types';
+export interface LocationResult {
+    slotName: string;
+    moduleModel?: ModuleModel;
+    adapterName?: string;
+}
+interface BaseParams {
+    location: LabwareLocation | null;
+    loadedModules: LoadedModules;
+    loadedLabwares: LoadedLabwares;
+    robotType: RobotType;
+}
+interface SequenceBaseParams {
+    locationSequence: LabwareLocationSequence;
+    loadedModules: LoadedModules;
+    loadedLabwares: LoadedLabwares;
+}
+export interface LocationSlotOnlyParams extends BaseParams {
+    detailLevel: 'slot-only';
+}
+export interface SequenceSlotOnlyParams extends SequenceBaseParams {
+    detailLevel: 'slot-only';
+}
+export interface LocationFullParams extends BaseParams {
+    allRunDefs: LabwareDefinition2[];
+    detailLevel?: 'full';
+}
+export interface SequenceFullParams extends SequenceBaseParams {
+    allRunDefs: LabwareDefinition2[];
+    detailLevel?: 'full';
+}
+export type GetLabwareLocationParams = LocationSlotOnlyParams | LocationFullParams;
+export type GetLabwareLocationFromSequenceParams = SequenceSlotOnlyParams | SequenceFullParams;
+export declare function getLabwareLocationFromSequence(params: GetLabwareLocationFromSequenceParams): LocationResult;
+export declare function getLabwareLocation(params: GetLabwareLocationParams): LocationResult | null;
+export {};

package/lib/organisms/CommandText/useCommandTextString/utils/getLabwareName.d.ts

@@ -0,0 +1,8 @@
+import type { LabwareDefinition2 } from '@opentrons/shared-data';
+import type { LoadedLabwares } from './types';
+export interface GetLabwareNameParams {
+    allRunDefs: LabwareDefinition2[];
+    loadedLabwares: LoadedLabwares;
+    labwareId: string;
+}
+export declare function getLabwareName({ allRunDefs, loadedLabwares, labwareId, }: GetLabwareNameParams): string;

package/lib/organisms/CommandText/useCommandTextString/utils/getLiquidDisplayName.d.ts

@@ -0,0 +1,2 @@
+import type { Liquid } from '@opentrons/shared-data';
+export declare function getLiquidDisplayName(liquids: Liquid[], liquidId: string): string;

package/lib/organisms/CommandText/useCommandTextString/utils/getLoadedLabware.d.ts

@@ -0,0 +1,3 @@
+import type { LoadedLabware } from '@opentrons/shared-data';
+import type { LoadedLabwares } from './types';
+export declare function getLoadedLabware(loadedLabware: LoadedLabwares, labwareId: string): LoadedLabware | undefined;

package/lib/organisms/CommandText/useCommandTextString/utils/getLoadedModule.d.ts

@@ -0,0 +1,3 @@
+import type { LoadedModule } from '@opentrons/shared-data';
+import type { LoadedModules } from './types';
+export declare function getLoadedModule(loadedModules: LoadedModules, moduleId: string): LoadedModule | undefined;

package/lib/organisms/CommandText/useCommandTextString/utils/getModuleDisplayLocation.d.ts

@@ -0,0 +1,2 @@
+import type { LoadedModules } from './types';
+export declare function getModuleDisplayLocation(loadedModules: LoadedModules, moduleId: string): string;

package/lib/organisms/CommandText/useCommandTextString/utils/getModuleModel.d.ts

@@ -0,0 +1,3 @@
+import type { ModuleModel } from '@opentrons/shared-data';
+import type { LoadedModules } from './types';
+export declare function getModuleModel(loadedModules: LoadedModules, moduleId: string): ModuleModel | null;

package/lib/organisms/CommandText/useCommandTextString/utils/getPipetteNameOnMount.d.ts

@@ -0,0 +1,4 @@
+import type { LoadedPipette, PipetteName } from '@opentrons/shared-data';
+import type { LoadedPipettes } from './types';
+export declare function getLoadedPipette(loadedPipettes: LoadedPipettes, mount: string): LoadedPipette | undefined;
+export declare function getPipetteNameOnMount(loadedPipettes: LoadedPipettes, mount: string): PipetteName | null;

package/lib/organisms/CommandText/useCommandTextString/utils/getWellRange.d.ts

@@ -0,0 +1,8 @@
+import type { PipetteName, RunTimeCommand } from '@opentrons/shared-data';
+/**
+ * @param pipetteName name of pipette being used
+ * @param commands list of commands to search within
+ * @param wellName the target well for pickup tip
+ * @returns WellRange string of wells pipette will pickup tips from
+ */
+export declare function getWellRange(pipetteId: string, commands: RunTimeCommand[], wellName: string, pipetteName?: PipetteName): string;

package/lib/organisms/CommandText/useCommandTextString/utils/helpers.d.ts

@@ -0,0 +1 @@
+export declare const findLastAt: <T, U extends T = T>(arr: readonly T[], pred: ((el: T) => boolean) | ((el: T) => el is U)) => [U, number] | [undefined, -1];

package/lib/organisms/CommandText/useCommandTextString/utils/index.d.ts

@@ -0,0 +1,10 @@
+export * from './commandText';
+export * from './formatDuration';
+export * from './getLabwareDisplayLocation';
+export * from './getLabwareLocation';
+export * from './getLiquidDisplayName';
+export * from './getLoadedLabware';
+export * from './getLoadedModule';
+export * from './getModuleDisplayLocation';
+export * from './getLabwareDefinitionsFromCommands';
+export * from './types';

package/lib/organisms/CommandText/useCommandTextString/utils/types.d.ts

@@ -0,0 +1,8 @@
+import type { LoadedLabware, LoadedModule, LoadedPipette, RunTimeCommand } from '@opentrons/shared-data';
+import type { GetCommandText, UseCommandTextStringParams } from '..';
+export type HandlesCommands<T extends RunTimeCommand> = Omit<GetCommandText, 'command'> & UseCommandTextStringParams & {
+    command: T;
+};
+export type LoadedPipettes = LoadedPipette[] | Record<string, LoadedPipette>;
+export type LoadedLabwares = LoadedLabware[] | Record<string, LoadedLabware>;
+export type LoadedModules = LoadedModule[] | Record<string, LoadedModule>;

package/lib/organisms/DeckLabelSet/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import type { DeckLabelProps } from '../../molecules/DeckLabel';
 interface DeckLabelSetProps {
     deckLabels: DeckLabelProps[];
@@ -6,6 +6,7 @@ interface DeckLabelSetProps {
     y: number;
     width: number;
     height: number;
+    invert?: boolean;
 }
-export declare const DeckLabelSet: React.ForwardRefExoticComponent<DeckLabelSetProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DeckLabelSet: import("react").ForwardRefExoticComponent<DeckLabelSetProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/organisms/ProtocolTimelineScrubber/CommandItem.d.ts

@@ -0,0 +1,12 @@
+import type { CompletedProtocolAnalysis, LabwareDefinition2, ProtocolAnalysisOutput, RobotType, RunTimeCommand } from '@opentrons/shared-data';
+interface CommandItemProps {
+    command: RunTimeCommand;
+    index: number;
+    currentCommandIndex: number;
+    setCurrentCommandIndex: (index: number) => void;
+    analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput;
+    robotType: RobotType;
+    allRunDefs: LabwareDefinition2[];
+}
+export declare function CommandItem({ index, command, currentCommandIndex, setCurrentCommandIndex, analysis, robotType, allRunDefs, }: CommandItemProps): JSX.Element;
+export {};

package/lib/organisms/ProtocolTimelineScrubber/PipetteVisuals.d.ts

@@ -0,0 +1,25 @@
+import type { CompletedProtocolAnalysis, ProtocolAnalysisOutput } from '@opentrons/shared-data';
+import type { LocationLiquidState, PipetteEntity, TimelineFrame } from '@opentrons/step-generation';
+interface PipetteMountVizProps {
+    pipetteId: string | null;
+    pipetteEntity: PipetteEntity | null;
+    mount: string;
+    timelineFrame: TimelineFrame;
+    analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput;
+}
+export declare function PipetteMountViz(props: PipetteMountVizProps): JSX.Element | null;
+interface SideViewProps {
+    allNozzleTipContents: LocationLiquidState[];
+    maxVolume: number;
+    allNozzlesHaveTips: boolean;
+    analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput;
+}
+export declare function PipetteSideView({ allNozzleTipContents, maxVolume, allNozzlesHaveTips, analysis, }: SideViewProps): JSX.Element;
+export interface TipSideViewProps {
+    tipContents: LocationLiquidState;
+    maxVolume: number;
+    x: number;
+    y: number;
+    analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput;
+}
+export {};

package/lib/organisms/ProtocolTimelineScrubber/index.d.ts

@@ -0,0 +1,10 @@
+import type { CompletedProtocolAnalysis, ProtocolAnalysisOutput } from '@opentrons/shared-data';
+export * from './types';
+export * from './utils';
+export declare const COMMAND_WIDTH_PX = 240;
+interface ProtocolTimelineScrubberProps {
+    analysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput;
+    height?: string;
+}
+export declare const DECK_LAYER_BLOCKLIST: string[];
+export declare function ProtocolTimelineScrubber(props: ProtocolTimelineScrubberProps): JSX.Element;

package/lib/organisms/ProtocolTimelineScrubber/types.d.ts

@@ -0,0 +1,2 @@
+import type { CompletedProtocolAnalysis } from '@opentrons/shared-data';
+export type CommandTextData = Pick<CompletedProtocolAnalysis, 'pipettes' | 'labware' | 'modules' | 'liquids' | 'commands'>;

package/lib/organisms/ProtocolTimelineScrubber/utils.d.ts

@@ -0,0 +1,23 @@
+import type { WellFill } from '../../hardware-sim';
+import type { CompletedProtocolAnalysis, LabwareDefinition2, ProtocolAnalysisOutput, RunTimeCommand } from '@opentrons/shared-data';
+import type { LabwareEntities, LocationLiquidState, SingleLabwareLiquidState, TimelineFrame } from '@opentrons/step-generation';
+import type { CommandTextData } from './types';
+export interface WellContents {
+    groupIds: string[];
+    ingreds: LocationLiquidState;
+    highlighted?: boolean;
+    selected?: boolean;
+    maxVolume?: number;
+    wellName?: string;
+}
+interface WellContentsByLabware {
+    [labwareId: string]: ContentsByWell;
+}
+export type ContentsByWell = {
+    [wellName: string]: WellContents;
+} | null;
+export declare function _wellContentsForLabware(labwareLiquids: SingleLabwareLiquidState, labwareDef: LabwareDefinition2): ContentsByWell;
+export declare const wellFillFromWellContents: (wellContents: ContentsByWell, displayColors: string[]) => WellFill;
+export declare function getAllWellContentsForActiveItem(labwareEntities: LabwareEntities, robotState: TimelineFrame): WellContentsByLabware | null;
+export declare function getCommandTextData(protocolData: CompletedProtocolAnalysis | ProtocolAnalysisOutput, protocolCommands?: RunTimeCommand[]): CommandTextData;
+export {};

package/lib/organisms/Toolbox/index.d.ts

@@ -1,20 +1,17 @@
-import * as React from 'react';
-export interface ToolboxProps {
+import type { ReactNode } from 'react';
+import type { StyleProps } from '../../primitives';
+export interface ToolboxProps extends StyleProps {
     title: JSX.Element;
-    children: React.ReactNode;
+    children: ReactNode;
     disableCloseButton?: boolean;
-    width?: string;
-    height?: string;
     confirmButtonText?: string;
     onConfirmClick?: () => void;
     confirmButton?: JSX.Element;
     onCloseClick?: () => void;
     closeButton?: JSX.Element;
-    side?: 'left' | 'right';
-    horizontalSide?: 'top' | 'bottom';
+    titlePadding?: string;
     childrenPadding?: string;
     subHeader?: JSX.Element | null;
     secondaryHeaderButton?: JSX.Element;
-    position?: string;
 }
 export declare function Toolbox(props: ToolboxProps): JSX.Element;

package/lib/organisms/index.d.ts

@@ -1,3 +1,4 @@
 export * from './DeckLabelSet';
-export * from './EndUserAgreementFooter';
 export * from './Toolbox';
+export * from './ProtocolTimelineScrubber';
+export * from './CommandText';

package/lib/primitives/style-props.d.ts

@@ -1,4 +1,7 @@
 import type * as Types from './types';
 import type { CSSObject } from 'styled-components';
+type Text = string | number;
+export declare const STYLE_PROPS: ("left" | "right" | "filter" | "overflow" | "overflowX" | "overflowY" | "cursor" | "transformOrigin" | "bottom" | "top" | "color" | "backgroundColor" | "opacity" | "fontSize" | "fontWeight" | "fontStyle" | "lineHeight" | "textAlign" | "textTransform" | "textDecoration" | "margin" | "marginX" | "marginY" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "padding" | "paddingX" | "paddingY" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderRadius" | "borderWidth" | "borderColor" | "boxShadow" | "flex" | "alignItems" | "alignSelf" | "justifyContent" | "flexDirection" | "flexWrap" | "whiteSpace" | "columnGap" | "gridGap" | "gridTemplateAreas" | "gridTemplateRows" | "gridTemplateColumns" | "gridArea" | "gridRow" | "gridColumn" | "display" | "size" | "width" | "minWidth" | "maxWidth" | "height" | "minHeight" | "maxHeight" | "wordSpacing" | "overflowWrap" | "position" | "zIndex" | "transform" | "textOverflow" | "flexGrow" | "gap" | "transition")[];
 export declare const styleProps: (props: Types.StyleProps) => CSSObject;
-export declare const isntStyleProp: (prop: string | React.ReactText) => boolean;
+export declare const isntStyleProp: (prop: string | Text) => boolean;
+export {};

package/lib/primitives/types.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentType } from 'react';
 import type { StyledComponent, CSSProperties } from 'styled-components';
 export interface ColorProps {
     color?: string;
@@ -92,4 +93,4 @@ export interface TransitionProps {
 export interface StyleProps extends ColorProps, TypographyProps, SpacingProps, BorderProps, FlexboxProps, GridProps, LayoutProps, PositionProps, TransitionProps {
     className?: string;
 }
-export type PrimitiveComponent<Instance extends keyof JSX.IntrinsicElements | React.ComponentType<any>, Props extends StyleProps = StyleProps> = StyledComponent<Instance, any, Props, any>;
+export type PrimitiveComponent<Instance extends keyof JSX.IntrinsicElements | ComponentType<any>, Props extends StyleProps = StyleProps> = StyledComponent<Instance, any, Props, any>;

package/lib/structure/Card.d.ts

@@ -1,10 +1,10 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 import type { StyleProps } from '../primitives';
 export interface CardProps extends StyleProps {
     /** Title for card, all cards should receive a title. */
-    title?: React.ReactNode;
+    title?: ReactNode;
     /** Card contents */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** If card can not be used, gray it out and remove pointer events */
     disabled?: boolean;
     /** Additional class names */

package/lib/structure/LabeledValue.d.ts

@@ -1,9 +1,9 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 export interface LabeledValueProps {
     /** Label */
-    label: React.ReactNode;
+    label: ReactNode;
     /** Value */
-    value: React.ReactNode;
+    value: ReactNode;
     /** Additional className */
     className?: string;
     /** Additional value className */

package/lib/structure/Pill.d.ts

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 import type { UseHoverTooltipTargetProps } from '../tooltips';
 export interface PillProps {
     /** background color of pill (any CSS color string) */
@@ -8,7 +8,7 @@ export interface PillProps {
     /** additional class name */
     className?: string;
     /** contents of the pill */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** handlers for HoverTooltipComponent */
     hoverTooltipHandlers?: UseHoverTooltipTargetProps | null | undefined;
 }

package/lib/structure/TitleBar.d.ts

@@ -1,11 +1,11 @@
-import type * as React from 'react';
+import type { ReactNode } from 'react';
 import type { ButtonProps } from '../buttons';
 export interface TitleBarProps {
     id?: string;
-    title: React.ReactNode;
-    subtitle?: React.ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
     back?: ButtonProps;
-    rightNode?: React.ReactNode;
+    rightNode?: ReactNode;
     className?: string;
     onBackClick?: () => unknown;
     backClickDisabled?: boolean;

package/lib/testing/utils/renderWithProviders.d.ts

@@ -1,9 +1,9 @@
-import type * as React from 'react';
 import { I18nextProvider } from 'react-i18next';
+import type { ComponentProps, ReactElement } from 'react';
 import type { RenderResult, RenderOptions } from '@testing-library/react';
 import type { Store } from 'redux';
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
     initialState?: State;
-    i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n'];
+    i18nInstance: ComponentProps<typeof I18nextProvider>['i18n'];
 }
-export declare function renderWithProviders<State>(Component: React.ReactElement, options?: RenderWithProvidersOptions<State>): [RenderResult, Store<State>];
+export declare function renderWithProviders<State>(Component: ReactElement, options?: RenderWithProvidersOptions<State>): [RenderResult, Store<State>];

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 { CSSProperties, ReactNode, RefCallback } from 'react';
 import type { Placement } from './types';
 import type { StyleProps } from '../primitives';
 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,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, RefCallback } from 'react';
 import type { Instance, Options, Modifier } from '@popperjs/core/lib/types';
 import type { UseHoverOptions, HoverHandlers } from '../interaction-enhancers';
 export type Placement = Options['placement'];
@@ -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.8",
+  "version": "0.1.7-alpha.0",
   "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",
@@ -19,11 +19,11 @@
   "homepage": "https://github.com/Opentrons/opentrons#readme",
   "peerDependencies": {
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "styled-components": "5.3.6"
+    "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.8",
+    "@opentrons/shared-data": "0.1.7-alpha.0",
+    "@opentrons/step-generation": "link:../step-generation",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -33,11 +33,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/__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,27 @@
+import { describe, it, expect } 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 type * as React from 'react'
+import { AlertItem } from './AlertItem'
+
+import type { Story, Meta } from '@storybook/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>
+)