@opentrons/components 0.1.6-alpha.5 → 0.1.6-alpha.7

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 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 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,11 @@
+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,12 @@
+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;

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

@@ -0,0 +1,586 @@
+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;
+    };
+    send: {
+        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,4 @@
+export * from './Icon';
+export * from './NotificationIcon';
+export * from './ModuleIcon';
+export * from './icon-data';

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[];