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

package/lib/icons/icon-data.d.ts

@@ -0,0 +1,582 @@
+export declare const ICON_DATA_BY_NAME: {
+    add: {
+        path: string;
+        viewBox: string;
+    };
+    alert: {
+        path: string;
+        viewBox: string;
+    };
+    'alert-circle': {
+        path: string;
+        viewBox: string;
+    };
+    'arrow-down': {
+        path: string;
+        viewBox: string;
+    };
+    'arrow-left': {
+        path: string;
+        viewBox: string;
+    };
+    'arrow-right': {
+        path: string;
+        viewBox: string;
+    };
+    'arrow-up': {
+        path: string;
+        viewBox: string;
+    };
+    back: {
+        path: string;
+        viewBox: string;
+    };
+    'book-open-page-variant': {
+        path: string;
+        viewBox: string;
+    };
+    brightness: {
+        path: string;
+        viewBox: string;
+    };
+    build: {
+        path: string;
+        viewBox: string;
+    };
+    'caret-right': {
+        path: string;
+        viewBox: string;
+    };
+    check: {
+        path: string;
+        viewBox: string;
+    };
+    'check-circle': {
+        path: string;
+        viewBox: string;
+    };
+    'check-decagram': {
+        path: string;
+        viewBox: string;
+    };
+    'checkbox-blank-circle-outline': {
+        path: string;
+        viewBox: string;
+    };
+    'checkbox-blank-outline': {
+        path: string;
+        viewBox: string;
+    };
+    'checkbox-marked': {
+        path: string;
+        viewBox: string;
+    };
+    'checkbox-multiple-marked-outline': {
+        path: string;
+        viewBox: string;
+    };
+    'chevron-down': {
+        path: string;
+        viewBox: string;
+    };
+    'chevron-left': {
+        path: string;
+        viewBox: string;
+    };
+    'chevron-right': {
+        path: string;
+        viewBox: string;
+    };
+    'chevron-up': {
+        path: string;
+        viewBox: string;
+    };
+    circle: {
+        path: string;
+        viewBox: string;
+    };
+    'clockwise-arrow': {
+        path: string;
+        viewBox: string;
+    };
+    close: {
+        path: string;
+        viewBox: string;
+    };
+    'close-circle': {
+        path: string;
+        viewBox: string;
+    };
+    'close-icon': {
+        path: string;
+        viewBox: string;
+    };
+    'closed-locked': {
+        path: string;
+        viewBox: string;
+    };
+    comment: {
+        path: string;
+        viewBox: string;
+    };
+    'connection-status': {
+        path: string;
+        viewBox: string;
+    };
+    'content-copy': {
+        path: string;
+        viewBox: string;
+    };
+    'copy-text': {
+        path: string;
+        viewBox: string;
+    };
+    'counter-clockwise-arrow': {
+        path: string;
+        viewBox: string;
+    };
+    'cursor-move': {
+        path: string;
+        viewBox: string;
+    };
+    'deck-map': {
+        path: string;
+        viewBox: string;
+    };
+    delete: {
+        path: string;
+        viewBox: string;
+    };
+    'dots-horizontal': {
+        path: string;
+        viewBox: string;
+    };
+    'dots-vertical': {
+        path: string;
+        viewBox: string;
+    };
+    download: {
+        path: string;
+        viewBox: string;
+    };
+    ethernet: {
+        path: string;
+        viewBox: string;
+    };
+    eye: {
+        path: string;
+        viewBox: string;
+    };
+    'eye-slash': {
+        path: string;
+        viewBox: string;
+    };
+    'flask-outline': {
+        path: string;
+        viewBox: string;
+    };
+    'flex-robot': {
+        path: string;
+        viewBox: string;
+    };
+    'folder-open': {
+        path: string;
+        viewBox: string;
+    };
+    'gantry-homing': {
+        path: string;
+        viewBox: string;
+    };
+    gear: {
+        path: string;
+        viewBox: string;
+    };
+    'help-circle': {
+        path: string;
+        viewBox: string;
+    };
+    'reset-position': {
+        path: string;
+        viewBox: string;
+    };
+    'horizontal-plane': {
+        path: string;
+        viewBox: string;
+    };
+    info: {
+        viewBox: string;
+        path: string;
+    };
+    information: {
+        path: string;
+        viewBox: string;
+    };
+    'jump-size': {
+        path: string;
+        viewBox: string;
+    };
+    'latch-closed': {
+        path: string;
+        viewBox: string;
+    };
+    'latch-open': {
+        path: string;
+        viewBox: string;
+    };
+    light: {
+        path: string;
+        viewBox: string;
+    };
+    lock: {
+        path: string;
+        viewBox: string;
+    };
+    menu: {
+        path: string;
+        viewBox: string;
+    };
+    'menu-down': {
+        path: string;
+        viewBox: string;
+    };
+    minus: {
+        path: string;
+        viewBox: string;
+    };
+    'minus-box': {
+        path: string;
+        viewBox: string;
+    };
+    more: {
+        path: string;
+        viewBox: string;
+    };
+    'move-xy': {
+        path: string;
+        viewBox: string;
+    };
+    'move-xy-circle': {
+        viewBox: string;
+        path: string;
+    };
+    'open-in-new': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-alert': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-arrow-down': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-arrow-left': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-arrow-right': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-arrow-up': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-calibrate': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-check': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-checkbox': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-click-and-drag': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-close': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-close-thick': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-connect': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-consolidate': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-copy-text': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-design': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-distribute': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-file': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-flat-bottom': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-heater-shaker': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-hot-to-touch': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-logo': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-magnet': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-magnet-v2': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-mix': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-run': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-spinner': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-temperature': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-temperature-v2': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-thermocycler': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-toggle-field-off': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-toggle-field-on': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-toggle-input-off': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-toggle-input-on': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-toggle-switch-off': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-toggle-switch-on': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-transfer': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-u-bottom': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-v-bottom': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-water-outline': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-wifi-0': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-wifi-1': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-wifi-2': {
+        path: string;
+        viewBox: string;
+    };
+    'ot-wifi-3': {
+        path: string;
+        viewBox: string;
+    };
+    'overflow-btn-touchscreen': {
+        path: string;
+        viewBox: string;
+    };
+    pause: {
+        path: string;
+        viewBox: string;
+    };
+    'pause-circle': {
+        path: string;
+        viewBox: string;
+    };
+    'pause-icon': {
+        path: string;
+        viewBox: string;
+    };
+    pen: {
+        path: string;
+        viewBox: string;
+    };
+    pencil: {
+        path: string;
+        viewBox: string;
+    };
+    pin: {
+        path: string;
+        viewBox: string;
+    };
+    play: {
+        path: string;
+        viewBox: string;
+    };
+    'play-circle': {
+        path: string;
+        viewBox: string;
+    };
+    'play-icon': {
+        path: string;
+        viewBox: string;
+    };
+    'play-round-corners': {
+        path: string;
+        viewBox: string;
+    };
+    plus: {
+        path: string;
+        viewBox: string;
+    };
+    privacy: {
+        path: string;
+        viewBox: string;
+    };
+    'question-mark-circle': {
+        path: string;
+        viewBox: string;
+    };
+    'radiobox-blank': {
+        path: string;
+        viewBox: string;
+    };
+    'radiobox-marked': {
+        path: string;
+        viewBox: string;
+    };
+    refresh: {
+        path: string;
+        viewBox: string;
+    };
+    remove: {
+        path: string;
+        viewBox: string;
+    };
+    reset: {
+        path: string;
+        viewBox: string;
+    };
+    restart: {
+        path: string;
+        viewBox: string;
+    };
+    reticle: {
+        path: string;
+        viewBox: string;
+    };
+    settings: {
+        path: string;
+        viewBox: string;
+    };
+    sleep: {
+        path: string;
+        viewBox: string;
+    };
+    'swap-horizontal': {
+        path: string;
+        viewBox: string;
+    };
+    'text-size': {
+        path: string;
+        viewBox: string;
+    };
+    trash: {
+        path: string;
+        viewBox: string;
+    };
+    'unfold-less-horizontal': {
+        path: string;
+        viewBox: string;
+    };
+    'unfold-more-horizontal': {
+        path: string;
+        viewBox: string;
+    };
+    union: {
+        path: string;
+        viewBox: string;
+    };
+    update: {
+        path: string;
+        viewBox: string;
+    };
+    'update-channel': {
+        path: string;
+        viewBox: string;
+    };
+    upload: {
+        path: string;
+        viewBox: string;
+    };
+    usb: {
+        path: string;
+        viewBox: string;
+    };
+    'vertical-plane': {
+        path: string;
+        viewBox: string;
+    };
+    water: {
+        path: string;
+        viewBox: string;
+    };
+    wifi: {
+        path: string;
+        viewBox: string;
+    };
+};

package/lib/icons/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Icon';
+export * from './NotificationIcon';
+export * from './ModuleIcon';

package/lib/images/index.d.ts

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

package/lib/images/labware/index.d.ts

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

package/lib/images/labware/measurement-guide/index.d.ts

@@ -0,0 +1,13 @@
+export interface DiagramProps {
+    guideType?: string;
+    category?: string;
+    insertCategory?: string;
+    shape?: string;
+    wellBottomShape?: string;
+    guideVisible?: boolean;
+    irregular?: boolean;
+    isMultiRow?: boolean;
+}
+export declare function getFootprintDiagram(props: DiagramProps): string[];
+export declare function getSpacingDiagram(props: DiagramProps): string[];
+export declare function getMeasurementDiagram(props: DiagramProps): string[];

package/lib/index.d.ts

@@ -0,0 +1,28 @@
+export * from './hooks';
+export * from './utils';
+export * from './alerts';
+export * from './buttons';
+export * from './controls';
+export * from './hardware-sim';
+export * from './legacy-hardware-sim';
+export * from './forms';
+export * from './icons';
+export * from './images';
+export * from './instrument';
+export * from './interaction-enhancers';
+export * from './lists';
+export * from './modals';
+export * from './nav';
+export * from './primitives';
+export * from './tabbedNav';
+export * from './slotmap';
+export * from './structure';
+export * from './tooltips';
+export * from './styles';
+export * from './ui-style-constants';
+export * from './helix-design-system';
+export * from './helix-design-system';
+export * from './robot-types';
+export * from './testing/utils';
+export * from './molecules';
+export * from './atoms';

package/lib/instrument/InfoItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface InfoItemProps {
+    title: string;
+    value: string;
+    className?: string;
+}
+/**
+ * Used by `InstrumentInfo` for its titled values.
+ * But if you're using this, you probably want `LabeledValue` instead.
+ */
+export declare function InfoItem(props: InfoItemProps): JSX.Element;

package/lib/instrument/InstrumentDiagram.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FlattenSimpleInterpolation } from 'styled-components';
+import type { PipetteNameSpecs } from '@opentrons/shared-data';
+import type { Mount } from '../robot-types';
+import type { StyleProps } from '..';
+export interface InstrumentDiagramProps extends StyleProps {
+    mount: Mount;
+    pipetteSpecs?: Pick<PipetteNameSpecs, 'displayCategory' | 'channels'> | null;
+    className?: string;
+    imageStyle?: FlattenSimpleInterpolation;
+}
+export declare function InstrumentDiagram(props: InstrumentDiagramProps): JSX.Element;

package/lib/instrument/InstrumentGroup.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { InstrumentInfoProps } from './InstrumentInfo';
+export interface InstrumentGroupProps {
+    showMountLabel?: boolean | null | undefined;
+    left?: InstrumentInfoProps | null | undefined;
+    right?: InstrumentInfoProps | null | undefined;
+}
+/**
+ * Renders a left and right pipette diagram & info.
+ * Takes child `InstrumentInfo` props in `right` and `left` props.
+ */
+export declare function InstrumentGroup(props: InstrumentGroupProps): JSX.Element;

package/lib/instrument/InstrumentInfo.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { Mount } from '../robot-types';
+import type { InstrumentDiagramProps } from './InstrumentDiagram';
+export interface InstrumentInfoProps {
+    /** 'left' or 'right' */
+    mount: Mount;
+    /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
+    showMountLabel?: boolean | null;
+    /** human-readable description, eg 'p300 Single-channel' */
+    description: string;
+    /** paired tiprack model */
+    tiprackModel?: string;
+    /** if disabled, pipette & its info are grayed out */
+    isDisabled: boolean;
+    /** specs of mounted pipette */
+    pipetteSpecs?: InstrumentDiagramProps['pipetteSpecs'] | null;
+    /** classes to apply */
+    className?: string;
+    /** classes to apply to the info group child */
+    infoClassName?: string;
+    /** children to display under the info */
+    children?: React.ReactNode;
+}
+export declare function InstrumentInfo(props: InstrumentInfoProps): JSX.Element;

package/lib/instrument/PipetteSelect.d.ts

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