@opentrons/components 0.1.0-beta.7 → 0.1.2-alpha.0

package/lib/hardware-sim/Pipette/__tests__/PipetteRender.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/hardware-sim/Pipette/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const SINGLE_CHANNEL_PIPETTE_WIDTH = 18.7;
+export declare const SINGLE_CHANNEL_PIPETTE_HEIGHT = 30.5;
+export declare const MULTI_CHANNEL_PIPETTE_WIDTH = 18.7;
+export declare const MULTI_CHANNEL_PIPETTE_HEIGHT = 90.3;
+export declare const NINETY_SIX_CHANNEL_PIPETTE_WIDTH = 117.7;
+export declare const MULTI_CHANNEL_CENTER_Y_NOZZLE = 13.3;
+export declare const MULTI_CHANNEL_Y_OFFSET = -2.5;

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

@@ -0,0 +1 @@
+export * from './PipetteRender';

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

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

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { BaseDeck } from '../BaseDeck';
+import type { CompletedProtocolAnalysis, ProtocolAnalysisOutput } from '@opentrons/shared-data';
+export * from './utils/getStandardDeckViewLayerBlockList';
+interface ProtocolDeckProps {
+    protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput | null;
+    /** defaults to false, when set labware nicknames will appear on top level labware. If no nickname specified in protocol, falls back to labware definition display name */
+    showLabwareInfo?: boolean;
+    /** extra props to pass through to BaseDeck component */
+    baseDeckProps?: Partial<React.ComponentProps<typeof BaseDeck>>;
+}
+export declare function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null;

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

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

package/lib/hardware-sim/ProtocolDeck/utils/__tests__/getLabwareInforByLiquidId.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+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

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

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,10 @@
+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

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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,2 @@
+export * from './getLabwareInSlots';
+export * from './getStandardDeckViewLayerBlockList';

package/lib/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Svg } from '../../primitives';
+interface RobotCoordinateSpaceProps extends React.ComponentProps<typeof Svg> {
+    animated?: boolean;
+}
+export declare function RobotCoordinateSpace(props: RobotCoordinateSpaceProps): JSX.Element;
+export {};

package/lib/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithDOMCoords.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Svg } from '../../primitives';
+import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data';
+export interface RobotCoordinateSpaceWithDOMCoordsRenderProps {
+    deckSlotsById: {
+        [slotId: string]: DeckSlot;
+    };
+    getRobotCoordsFromDOMCoords: (domX: number, domY: number) => {
+        x: number;
+        y: number;
+    };
+}
+interface RobotCoordinateSpaceWithDOMCoordsProps extends React.ComponentProps<typeof Svg> {
+    viewBox?: string | null;
+    deckDef?: DeckDefinition;
+    children?: (props: RobotCoordinateSpaceWithDOMCoordsRenderProps) => React.ReactNode;
+}
+export declare function RobotCoordinateSpaceWithDOMCoords(props: RobotCoordinateSpaceWithDOMCoordsProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './RobotCoordinateSpaceWithDOMCoords';
+export * from './RobotCoordinateSpace';

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

@@ -0,0 +1,11 @@
+export * from './BaseDeck';
+export * from './BaseDeck/__fixtures__';
+export * from './ProtocolDeck';
+export * from './ProtocolDeck/utils';
+export * from './Deck';
+export * from './DeckConfigurator';
+export * from './DeckSlotLocation';
+export * from './Labware';
+export * from './Module';
+export * from './Pipette';
+export * from './RobotCoordinateSpace';

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

@@ -0,0 +1,3 @@
+import { AffineTransformMatrix } from '@opentrons/shared-data';
+export declare const IDENTITY_AFFINE_TRANSFORM: AffineTransformMatrix;
+export declare function multiplyMatrices(a: number[][], b: number[][]): number[][];

package/lib/helix-design-system/colors.d.ts

@@ -0,0 +1,75 @@
+/**
+ * green
+ */
+export declare const green60 = "#03683E";
+export declare const green50 = "#04AA65";
+export declare const green40 = "#91E2C0";
+export declare const green35 = "#AFEDD3";
+export declare const green30 = "#C4F6E0";
+export declare const green20 = "#E8F7ED";
+/**
+ * red
+ */
+export declare const red60 = "#941313";
+export declare const red55 = "#C71A1B";
+export declare const red50 = "#DE1B1B";
+export declare const red40 = "#F5B2B3";
+export declare const red35 = "#F8C8C9";
+export declare const red30 = "#FAD6D6";
+export declare const red20 = "#FCE9E9";
+/**
+ * yellow
+ */
+export declare const yellow60 = "#825512";
+export declare const yellow50 = "#F09D20";
+export declare const yellow40 = "#FCD48B";
+export declare const yellow35 = "#FFE1A4";
+export declare const yellow30 = "#FFE9BE";
+export declare const yellow20 = "#FDF3E2";
+/**
+ * purple
+ */
+export declare const purple60 = "#562566";
+export declare const purple55 = "#713187";
+export declare const purple50 = "#893BA4";
+export declare const purple40 = "#CEA4DF";
+export declare const purple35 = "#DBBCE7";
+export declare const purple30 = "#E6D5EC";
+export declare const purple20 = "#F1E8F5";
+/**
+ * blue
+ */
+export declare const blue60 = "#004196";
+export declare const blue55 = "#0056C8";
+export declare const blue40 = "#A9CEFD";
+export declare const blue35 = "#BFDCFD";
+export declare const blue30 = "#D0E6FE";
+export declare const blue20 = "#E1EFFF";
+export declare const blue10 = "#F1F8FF";
+/**
+ * grey
+ */
+export declare const grey60 = "#4A4C4E";
+export declare const grey55 = "#737578";
+export declare const grey50 = "#9C9C9C";
+export declare const grey40 = "#D0D0D0";
+export declare const grey35 = "#CBCCCC";
+export declare const grey30 = "#DEDEDE";
+export declare const grey20 = "#ECECEC";
+export declare const grey10 = "#F8F8F8";
+/**
+ * core
+ */
+export declare const black90 = "#16212D";
+export declare const black80 = "#24313F";
+export declare const black70 = "#39495B";
+export declare const white = "#FFFFFF";
+export declare const blue50 = "#006CFA";
+/**
+ * extras
+ */
+export declare const transparent = "transparent";
+export declare const opacity20HexCode = "33";
+export declare const opacity40HexCode = "66";
+export declare const opacity60HexCode = "99";
+export declare const opacity90HexCode = "E6";

package/lib/helix-design-system/index.d.ts

@@ -0,0 +1 @@
+export * as COLORS from './colors';

package/lib/hooks/__tests__/useDrag.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/hooks/__tests__/useIdle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/hooks/__tests__/useLongPress.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/hooks/__tests__/useScrolling.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/hooks/__tests__/useSwipe.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/hooks/index.d.ts

@@ -0,0 +1,12 @@
+export * from './useConditionalConfirm';
+export * from './useDrag';
+export * from './useIdle';
+export * from './useInterval';
+export * from './useLongPress';
+export * from './useMountEffect';
+export * from './usePrevious';
+export * from './useScrolling';
+export * from './useSelectDeckLocation';
+export * from './useSwipe';
+export * from './useTimeout';
+export * from './useToggle';

package/lib/hooks/useConditionalConfirm.d.ts

@@ -0,0 +1,40 @@
+/**
+ * useConditionalConfirm is intended for cases where we want to block and defer
+ * a particular user action until the user clicks "ok" in any kind of "are you sure?"
+ * confirmation UI. The arguments passed to the confirm function will be preserved and
+ * used to call handleContinue. Ex. a click event is being deferred by a modal. When the
+ * user confirms, the initial click event passed as an argument will be used as the argument in
+ * the callback.
+ * @param {() => unknown)} handleContinue (the action we may want to require confirmation for)
+ * @param {boolean} shouldBlock (if no confirmation is needed, we will avoid the modal and immediately call handleContinue)
+ * @example
+ * ```js
+ * import { useConditionalConfirm } from '@opentrons/components'
+ *
+ * const ExampleDangerForm = props => {
+ * const {
+ *   confirm,
+ *   showConfirmation,
+ *   cancel,
+ *  } = useConditionalConfirm(props.goAhead, props.dangerIsPresent)
+ *
+ *  return (
+ *   <>
+ *     {showConfirmation && (
+ *       <AreYouSureModal
+ *         handleCancel={cancel}
+ *         handleContinue={confirm}
+ *       />
+ *     )}
+ *     <DangerFormFields />
+ *     <DangerousSubmit onClick={confirm} />
+ *   </>
+ *  )
+ * }
+ * ```
+ */
+export declare const useConditionalConfirm: <T extends any[]>(handleContinue: (...args: T) => any, shouldBlock: boolean) => {
+    confirm: (...args: T) => void;
+    showConfirmation: boolean;
+    cancel: () => unknown;
+};

package/lib/hooks/useDrag.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, MutableRefObject } from 'react';
+export interface ElementPosition {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}
+export interface UseDragResult {
+    ref: MutableRefObject<null>;
+    style: CSSProperties;
+    position: ElementPosition;
+    isEnabled: boolean;
+    enable: () => void;
+    disable: () => void;
+}
+/**
+ * useDrag makes HTMLElement draggable for on-device app
+ * This hook should be used when isOnDevice is true
+ * @param {ElementPosition} (width, height, x, and y, they are HTMLElement's size and the initial position)
+ * @returns {UseDragResult}
+ */
+export declare const useDrag: (position: ElementPosition) => UseDragResult;

package/lib/hooks/useIdle.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React hook to check user events
+ *
+ * @param {number} idleTime (idle time)
+ * @param {object} options (events that the app need to check, initialState: initial state true => idle)
+ * @returns {boolean}
+ */
+export declare function useIdle(idleTime: number, options?: Partial<{
+    events: Array<keyof DocumentEventMap>;
+    initialState: boolean;
+}>): boolean;

package/lib/hooks/useInterval.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React hook to call a function on an interval; copied from:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ *
+ * @template T (type of the input value)
+ * @param {() => unknown} callback (function to call on an interval)
+ * @param {number | null} delay (interval delay, or null to stop interval)
+ * @param {boolean} [immediate=false] (trigger the callback immediately before starting the interval)
+ * @returns {void}
+ */
+export declare function useInterval(callback: () => unknown, delay: number | null, immediate?: boolean): void;

package/lib/hooks/useLongPress.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, MutableRefObject } from 'react';
+export interface UseLongPressResult {
+    ref: MutableRefObject<null>;
+    style: CSSProperties;
+    isEnabled: boolean;
+    isLongPressed: boolean;
+    isTapped: boolean;
+    setIsLongPressed: (value: boolean) => void;
+    setIsTapped: (value: boolean) => void;
+    enable: () => void;
+    disable: () => void;
+}
+/**
+ * useLongPress provide two actions (tap and long press)
+ * useLongPress recognize 1 sec hold as long press: hold Duration
+ * interactjs recognize "hold" when an element is held down around 600ms(default)
+ * @returns {UseLongPressResult}
+ */
+export declare const useLongPress: () => UseLongPressResult;

package/lib/hooks/useMountEffect.d.ts

@@ -0,0 +1,8 @@
+import type { EffectCallback } from 'react';
+/**
+ * React hook to call a function on component mount and unmount
+ *
+ * @param {EffectCallback} callback (function to call on mount that optionally returns a cleanup function to call on unmount)
+ * @returns {void}
+ */
+export declare function useMountEffect(callback: EffectCallback): void;

package/lib/hooks/usePrevious.d.ts

@@ -0,0 +1,9 @@
+/**
+ * React hook to keep track of the previous value of a parameter
+ * https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ *
+ * @template T (type of the input value)
+ * @param {T} value (value to keep track of)
+ * @returns {(T | void)} (previous value or undefined if first render)
+ */
+export declare function usePrevious<T>(value: T): T | undefined;

package/lib/hooks/useScrolling.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A custom hook that detects whether an HTMLElement is being scrolled.
+ *
+ * @param {RefObject<HTMLElement>} ref - A ref object containing the HTMLElement to monitor for scrolling.
+ * @returns {boolean} - A boolean indicating whether the HTMLElement is being scrolled.
+ */
+import { RefObject } from 'react';
+export declare function useScrolling(ref: RefObject<HTMLElement>): boolean;

package/lib/hooks/useSelectDeckLocation/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { DeckDefinition, ModuleLocation, RobotType } from '@opentrons/shared-data';
+export declare type DeckLocationSelectThemes = 'default' | 'grey';
+export declare function useDeckLocationSelect(robotType: RobotType, theme?: DeckLocationSelectThemes): {
+    DeckLocationSelect: JSX.Element;
+    selectedLocation: ModuleLocation;
+};
+interface DeckLocationSelectProps {
+    deckDef: DeckDefinition;
+    selectedLocation: ModuleLocation;
+    theme?: DeckLocationSelectThemes;
+    setSelectedLocation?: (loc: ModuleLocation) => void;
+    disabledLocations?: ModuleLocation[];
+    isThermocycler?: boolean;
+}
+export declare function DeckLocationSelect({ deckDef, selectedLocation, setSelectedLocation, disabledLocations, theme, isThermocycler, }: DeckLocationSelectProps): JSX.Element;
+export {};

package/lib/hooks/useSwipe.d.ts

@@ -0,0 +1,12 @@
+import { MutableRefObject, CSSProperties } from 'react';
+interface UseSwipeResult {
+    ref: MutableRefObject<null>;
+    style: CSSProperties;
+    isEnabled: boolean;
+    setSwipeType: (value: string) => void;
+    swipeType: string;
+    enable: () => void;
+    disable: () => void;
+}
+export declare const useSwipe: () => UseSwipeResult;
+export {};

package/lib/hooks/useTimeout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * React hook to call a function after a delay; adapted from: useInterval
+ *
+ * @template T (type of the input value)
+ * @param {() => unknown} callback (function to call after timeout)
+ * @param {number | null} delay (timeout delay, or null to disable the timeout)
+ * @returns {void}
+ */
+export declare function useTimeout(callback: () => unknown, delay: number | null): void;

package/lib/hooks/useToggle.d.ts

@@ -0,0 +1,22 @@
+export declare type UseToggleResult = [boolean, () => void];
+/**
+ * React hook to toggle a boolean value
+ *
+ * @param {boolean} [intialValue=false] (initial toggle value)
+ * @returns {[boolean, () => void]} (value and setValue tuple)
+ *
+ * @example
+ * import * as React from 'react'
+ * import { useToggle } from '@opentrons/components'
+ *
+ * export function ToggleButton() {
+ *   const [enabled, toggleEnabled] = useToggle(true)
+ *
+ *   return (
+ *     <button onClick={toggleEnabled}>
+ *       Setting is {enabled ? 'enabled' : 'disabled'}
+ *     </button>
+ *   )
+ * }
+ */
+export declare function useToggle(initialValue?: boolean): UseToggleResult;

package/lib/icons/Icon.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ICON_DATA_BY_NAME } from './icon-data';
+import type { SvgProps } from '../primitives';
+export declare type IconName = keyof typeof ICON_DATA_BY_NAME;
+export interface IconProps extends SvgProps {
+    /** name constant of the icon to display */
+    name: IconName;
+    /** classes to apply */
+    className?: string;
+    /** spin the icon with a CSS animation */
+    spin?: boolean;
+    /** x attribute as a number or string (for nesting inside another SVG) */
+    x?: number | string;
+    /** y attribute as a number or string (for nesting inside another SVG) */
+    y?: number | string;
+    /** width as a number or string (for nesting inside another SVG) */
+    svgHeight?: number | string;
+    /** height as a number or string (for nesting inside another SVG) */
+    svgWidth?: number | string;
+    /** inline style passed into the icon svg */
+    style?: Record<string, string | number>;
+    /** optional children */
+    children?: React.ReactNode;
+    id?: string;
+}
+/**
+ * Inline SVG icon component
+ *
+ * If you need access to the IconName type, you can:
+ * ```js
+ * import type { IconName } from '@opentrons/components'
+ * ```
+ */
+export declare function Icon(props: IconProps): JSX.Element | null;

package/lib/icons/ModuleIcon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconName } from './Icon';
+import type { ModuleType } from '@opentrons/shared-data';
+import type { StyleProps } from '../primitives/types';
+export declare const MODULE_ICON_NAME_BY_TYPE: {
+    [type in ModuleType]: IconName;
+};
+interface ModuleIconProps extends StyleProps {
+    moduleType: ModuleType;
+}
+export declare function ModuleIcon(props: ModuleIconProps): JSX.Element;
+export {};

package/lib/icons/NotificationIcon.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { IconProps, IconName } from './Icon';
+export interface NotificationIconProps extends IconProps {
+    /** name constant of the optional notifcation icon to display */
+    childName: IconName | null;
+    /** color to apply to notification icon (defaults to COLOR_WARNING) */
+    childColor?: string;
+}
+/**
+ * Inline SVG icon component with additional nested notification icon. Takes
+ * all the same props as Icon in addition to the ones listed above.
+ */
+export declare function NotificationIcon(props: NotificationIconProps): JSX.Element;