@opentrons/components 0.1.6-alpha.6 → 0.1.6-alpha.8

package/Makefile

@@ -31,6 +31,10 @@ lib: export NODE_ENV := production
 lib:
 	yarn vite build
 
+.PHONY: build-ts
+build-ts:
+	yarn tsc --build --emitDeclarationOnly
+
 # development
 #####################################################################
 

package/lib/__tests__/utils.test.d.ts

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

package/lib/alerts/AlertItem.d.ts

@@ -0,0 +1,21 @@
+import type * as React 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: React.ReactNode;
+    /** Alert message body contents */
+    children?: React.ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** optional handler to show close button/clear alert  */
+    onCloseClick?: () => unknown;
+    /** Override the default Alert Icon */
+    icon?: IconProps;
+}
+/**
+ * @deprecated Use 'Banner' instead
+ */
+export declare function AlertItem(props: AlertItemProps): JSX.Element;

package/lib/alerts/index.d.ts

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

package/lib/atoms/Checkbox/__tests__/Checkbox.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/atoms/Checkbox/index.d.ts

@@ -0,0 +1,24 @@
+import type * as React from 'react';
+export interface CheckboxProps {
+    /** checkbox is checked if value is true */
+    isChecked: boolean;
+    /** label text that describes the option */
+    labelText: string;
+    /** callback click/tap handler */
+    onClick: React.MouseEventHandler;
+    /** html tabindex property */
+    tabIndex?: number;
+    /** if disabled is true, mouse events will not trigger onClick callback */
+    disabled?: boolean;
+    /** optional borderRadius type */
+    type?: 'round' | 'neutral';
+    /** optional width for helix */
+    width?: string;
+}
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
+interface CheckProps {
+    isChecked: boolean;
+    color?: string;
+}
+export declare function Check(props: CheckProps): JSX.Element;
+export {};

package/lib/atoms/CheckboxField/__tests__/CheckboxField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/atoms/CheckboxField/index.d.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+export interface CheckboxFieldProps {
+    /** change handler */
+    onChange: React.ChangeEventHandler;
+    /** checkbox is checked if value is true */
+    value?: boolean;
+    /** name of field in form */
+    name?: string;
+    /** label text for checkbox */
+    label?: React.ReactNode;
+    /** checkbox is disabled if value is true */
+    disabled?: boolean;
+    /** html tabindex property */
+    tabIndex?: number;
+    /** props passed into label div. TODO IMMEDIATELY what is the Flow type? */
+    labelProps?: React.ComponentProps<'div'>;
+    /** if true, render indeterminate icon */
+    isIndeterminate?: boolean;
+}
+export declare function CheckboxField(props: CheckboxFieldProps): JSX.Element;

package/lib/atoms/Chip/__tests__/Chip.test.d.ts

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

package/lib/atoms/Chip/index.d.ts

@@ -0,0 +1,20 @@
+import type { IconName } from '../../icons';
+import type { StyleProps } from '../../primitives';
+export type ChipType = 'error' | 'info' | 'neutral' | 'success' | 'warning';
+type ChipSize = 'medium' | 'small';
+interface ChipProps extends StyleProps {
+    /** Display background color? */
+    background?: boolean;
+    /** Chip icon */
+    iconName?: IconName;
+    /** Chip content */
+    text: string;
+    /** name constant of the text color and the icon color to display */
+    type: ChipType;
+    /** has icon */
+    hasIcon?: boolean;
+    /** Chip size medium is the default size */
+    chipSize?: ChipSize;
+}
+export declare function Chip(props: ChipProps): JSX.Element;
+export {};

package/lib/atoms/Divider/index.d.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+import { Box } from '../..';
+type Props = React.ComponentProps<typeof Box>;
+export declare function Divider(props: Props): JSX.Element;
+export {};

package/lib/atoms/InputField/__tests__/InputField.test.d.ts

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

package/lib/atoms/InputField/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { TYPOGRAPHY } from '../../ui-style-constants';
+import type { IconName } from '../../icons';
+export declare const INPUT_TYPE_NUMBER: "number";
+export declare const LEGACY_INPUT_TYPE_TEXT: "text";
+export declare const LEGACY_INPUT_TYPE_PASSWORD: "password";
+export interface InputFieldProps {
+    /** field is disabled if value is true */
+    disabled?: boolean;
+    /** change handler */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** name of field in form */
+    name?: string;
+    /** optional ID of <input> element */
+    id?: string;
+    /** placeholder text */
+    placeholder?: string;
+    /** optional suffix component, appears to the right of input text */
+    units?: React.ReactNode;
+    /** current value of text in box, defaults to '' */
+    value?: string | number | null;
+    /** if included, InputField will use error style and display error instead of caption */
+    error?: string | null;
+    /** optional title */
+    title?: string | null;
+    /** optional text for tooltip */
+    tooltipText?: string;
+    /** optional caption. hidden when `error` is given */
+    caption?: string | null;
+    /** optional input type (default "text") */
+    type?: typeof LEGACY_INPUT_TYPE_TEXT | typeof LEGACY_INPUT_TYPE_PASSWORD | typeof INPUT_TYPE_NUMBER;
+    /** mouse click handler */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown;
+    /** focus handler */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    /** blur handler */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    /** makes input field read-only */
+    readOnly?: boolean;
+    /** html tabindex property */
+    tabIndex?: number;
+    /** automatically focus field on renders */
+    autoFocus?: boolean;
+    /** if true, clear out value and add '-' placeholder */
+    isIndeterminate?: boolean;
+    /** if input type is number, these are the min and max values */
+    max?: number;
+    min?: number;
+    /** horizontal text alignment for title, input, and (sub)captions */
+    textAlign?: typeof TYPOGRAPHY.textAlignLeft | typeof TYPOGRAPHY.textAlignCenter;
+    /** small or medium input field height, relevant only */
+    size?: 'medium' | 'small';
+    /** react useRef to control input field instead of react event */
+    ref?: React.MutableRefObject<HTMLInputElement | null>;
+    /** optional IconName to display icon aligned to left of input field */
+    leftIcon?: IconName;
+    /** if true, show delete icon aligned to right of input field */
+    showDeleteIcon?: boolean;
+    /** callback passed to optional delete icon onClick */
+    onDelete?: () => void;
+    /** if true, style the background of input field to error state */
+    hasBackgroundError?: boolean;
+    /** optional prop to override input field border radius */
+    borderRadius?: string;
+    /** optional prop to override input field padding */
+    padding?: string;
+}
+export declare const InputField: React.ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/lib/atoms/ListButton/ListButtonChildren/ListButtonAccordion.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+interface ListButtonAccordionProps {
+    children: React.ReactNode;
+    isExpanded?: boolean;
+    isNested?: boolean;
+    mainHeadline?: string;
+    headline?: string;
+}
+export declare function ListButtonAccordion(props: ListButtonAccordionProps): JSX.Element;
+export {};

package/lib/atoms/ListButton/ListButtonChildren/ListButtonAccordionContainer.d.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react';
+interface ListButtonAccordionContainerProps {
+    children: React.ReactNode;
+    id: string;
+}
+export declare function ListButtonAccordionContainer(props: ListButtonAccordionContainerProps): JSX.Element;
+export {};

package/lib/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.d.ts

@@ -0,0 +1,14 @@
+import type { ChangeEventHandler } from 'react';
+import type { StyleProps } from '../../../primitives';
+interface ListButtonRadioButtonProps extends StyleProps {
+    buttonText: string;
+    buttonValue: string | number;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    setNoHover?: () => void;
+    setHovered?: () => void;
+    disabled?: boolean;
+    isSelected?: boolean;
+    id?: string;
+}
+export declare function ListButtonRadioButton(props: ListButtonRadioButtonProps): JSX.Element;
+export {};

package/lib/atoms/ListButton/ListButtonChildren/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ListButtonAccordion';
+export * from './ListButtonAccordionContainer';
+export * from './ListButtonRadioButton';

package/lib/atoms/ListButton/__tests__/ListButton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/atoms/ListButton/__tests__/ListButtonAccordion.test.d.ts

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

package/lib/atoms/ListButton/__tests__/ListButtonRadioButton.test.d.ts

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

package/lib/atoms/ListButton/index.d.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+import type { StyleProps } from '../../primitives';
+export * from './ListButtonChildren/index';
+export type ListButtonType = 'noActive' | 'connected' | 'notConnected';
+interface ListButtonProps extends StyleProps {
+    type: ListButtonType;
+    children: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export declare function ListButton(props: ListButtonProps): JSX.Element;

package/lib/atoms/ListItem/ListItemChildren/ListItemCustomize.d.ts

@@ -0,0 +1,15 @@
+import type { DropdownMenuProps } from '../../../molecules/DropdownMenu';
+import type { TagProps } from '../../Tag/index';
+interface ListItemCustomizeProps {
+    header: string;
+    leftHeaderItem?: JSX.Element;
+    onClick?: () => void;
+    linkText?: string;
+    label?: string;
+    dropdown?: DropdownMenuProps;
+    tag?: TagProps;
+    /** temporary prop for dropdown menu  */
+    forceDirection?: boolean;
+}
+export declare function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element;
+export {};

package/lib/atoms/ListItem/ListItemChildren/ListItemDescriptor.d.ts

@@ -0,0 +1,7 @@
+interface ListItemDescriptorProps {
+    type: 'default' | 'large';
+    description: JSX.Element;
+    content: JSX.Element;
+}
+export declare const ListItemDescriptor: (props: ListItemDescriptorProps) => JSX.Element;
+export {};

package/lib/atoms/ListItem/ListItemChildren/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ListItemCustomize';
+export * from './ListItemDescriptor';

package/lib/atoms/ListItem/__tests__/ListItem.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/atoms/ListItem/index.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { StyleProps } from '../../primitives';
+export * from './ListItemChildren';
+export type ListItemType = 'error' | 'noActive' | 'success' | 'warning';
+interface ListItemProps extends StyleProps {
+    /** ListItem state type */
+    type: ListItemType;
+    /** ListItem contents */
+    children: React.ReactNode;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export declare function ListItem(props: ListItemProps): JSX.Element;

package/lib/atoms/MenuList/MenuItem.d.ts

@@ -0,0 +1,7 @@
+import type { StyleProps } from '../../primitives';
+interface ButtonProps extends StyleProps {
+    /** optional isAlert boolean to turn the background red, only seen in ODD */
+    isAlert?: boolean;
+}
+export declare const MenuItem: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export {};

package/lib/atoms/MenuList/OverflowBtn.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Btn } from '../../primitives';
+interface OverflowBtnProps extends React.ComponentProps<typeof Btn> {
+    fillColor?: string;
+}
+export declare const OverflowBtn: (props: OverflowBtnProps, ref: React.ForwardedRef<HTMLInputElement>) => React.ReactNode;
+export {};

package/lib/atoms/MenuList/__tests__/MenuItem.test.d.ts

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

package/lib/atoms/MenuList/__tests__/MenuList.test.d.ts

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

package/lib/atoms/MenuList/__tests__/OverflowBtn.test.d.ts

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

package/lib/atoms/MenuList/index.d.ts

@@ -0,0 +1,8 @@
+import type * as React from 'react';
+interface MenuListProps {
+    children: React.ReactNode;
+    isOnDevice?: boolean;
+    onClick?: React.MouseEventHandler;
+}
+export declare const MenuList: (props: MenuListProps) => JSX.Element | null;
+export {};

package/lib/atoms/Snackbar/__tests__/Snackbar.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/atoms/Snackbar/index.d.ts

@@ -0,0 +1,7 @@
+import type { StyleProps } from '../../primitives';
+export interface SnackbarProps extends StyleProps {
+    message: string;
+    onClose?: () => void;
+    duration?: number;
+}
+export declare function Snackbar(props: SnackbarProps): JSX.Element;

package/lib/atoms/StepMeter/index.d.ts

@@ -0,0 +1,7 @@
+import type { StyleProps } from '../../primitives';
+interface StepMeterProps extends StyleProps {
+    totalSteps: number;
+    currentStep: number | null;
+}
+export declare const StepMeter: (props: StepMeterProps) => JSX.Element;
+export {};

package/lib/atoms/StyledText/LegacyStyledText.d.ts

@@ -0,0 +1,6 @@
+import { Text } from '../../primitives';
+import type * as React from 'react';
+export interface LegacyProps extends React.ComponentProps<typeof Text> {
+    children?: React.ReactNode;
+}
+export declare const LegacyStyledText: (props: LegacyProps) => JSX.Element;

package/lib/atoms/StyledText/StyledText.d.ts

@@ -0,0 +1,154 @@
+import { Text } from '../../primitives';
+import type * as React from 'react';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+declare const helixProductStyleMap: {
+    readonly displayBold: {
+        readonly as: "h1";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly headingLargeRegular: {
+        readonly as: "h2";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly headingLargeBold: {
+        readonly as: "h2";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly headingMediumBold: {
+        readonly as: "h3";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly headingMediumSemiBold: {
+        readonly as: "h3";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly headingSmallRegular: {
+        readonly as: "h4";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly headingSmallBold: {
+        readonly as: "h4";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly headingSmallSemiBold: {
+        readonly as: "h4";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly bodyLargeSemiBold: {
+        readonly as: "p";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly bodyLargeRegular: {
+        readonly as: "p";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly bodyDefaultSemiBold: {
+        readonly as: "p";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly bodyDefaultRegular: {
+        readonly as: "p";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly captionSemiBold: {
+        readonly as: "label";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly captionBold: {
+        readonly as: "label";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly captionRegular: {
+        readonly as: "label";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly codeRegular: {
+        readonly as: "p";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly hidden: {
+        readonly as: "none";
+        readonly style: FlattenSimpleInterpolation;
+    };
+};
+declare const ODDStyleMap: {
+    readonly level1Header: {
+        readonly as: "h1";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly level2HeaderRegular: {
+        readonly as: "h2";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly level2HeaderSemiBold: {
+        readonly as: "h2";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly level2HeaderBold: {
+        readonly as: "h2";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly level3HeaderRegular: {
+        readonly as: "h3";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly level3HeaderSemiBold: {
+        readonly as: "h3";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly level3HeaderBold: {
+        readonly as: "h3";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly level4HeaderRegular: {
+        readonly as: "h4";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly level4HeaderSemiBold: {
+        readonly as: "h4";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly level4HeaderBold: {
+        readonly as: "h4";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly bodyTextRegular: {
+        readonly as: "p";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly bodyTextSemiBold: {
+        readonly as: "p";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly bodyTextBold: {
+        readonly as: "p";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly smallBodyTextRegular: {
+        readonly as: "label";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly smallBodyTextSemiBold: {
+        readonly as: "label";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly smallBodyTextBold: {
+        readonly as: "label";
+        readonly style: FlattenSimpleInterpolation;
+    };
+    readonly hidden: {
+        readonly as: "none";
+        readonly style: FlattenSimpleInterpolation;
+    };
+};
+export interface Props extends React.ComponentProps<typeof Text> {
+    oddStyle?: ODDStyles;
+    desktopStyle?: HelixStyles;
+    children?: React.ReactNode;
+}
+export declare const ODD_STYLES: string[];
+export declare const HELIX_STYLES: string[];
+export type HelixStyles = keyof typeof helixProductStyleMap;
+export type ODDStyles = keyof typeof ODDStyleMap;
+export declare const StyledText: (props: Props) => JSX.Element;
+export {};

package/lib/atoms/StyledText/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StyledText';
+export * from './LegacyStyledText';

package/lib/atoms/Tag/__tests__/Tag.test.d.ts

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

package/lib/atoms/Tag/index.d.ts

@@ -0,0 +1,13 @@
+import type { IconName } from '../../icons';
+export type TagType = 'default' | 'interactive' | 'branded';
+export interface TagProps {
+    /** Tag content */
+    text: string;
+    /** name constant of the text color and the icon color to display */
+    type: TagType;
+    /** iconLocation */
+    iconPosition?: 'left' | 'right';
+    /** Tagicon */
+    iconName?: IconName;
+}
+export declare function Tag(props: TagProps): JSX.Element;

package/lib/atoms/Toast/__tests__/ODDToast.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/atoms/Toast/__tests__/Toast.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/atoms/Toast/index.d.ts

@@ -0,0 +1,25 @@
+import type { StyleProps } from '../../primitives';
+import type { IconProps } from '../../icons';
+export declare const SUCCESS_TOAST: 'success';
+export declare const WARNING_TOAST: 'warning';
+export declare const ERROR_TOAST: 'error';
+export declare const INFO_TOAST: 'info';
+export type ToastType = typeof SUCCESS_TOAST | typeof WARNING_TOAST | typeof ERROR_TOAST | typeof INFO_TOAST;
+export interface ToastProps extends StyleProps {
+    id: string;
+    message: string;
+    type: ToastType;
+    icon?: IconProps;
+    closeButton?: boolean;
+    buttonText?: string;
+    onClose?: () => void;
+    disableTimeout?: boolean;
+    duration?: number;
+    heading?: string;
+    displayType?: 'desktop' | 'odd';
+    exitNow?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+}
+export declare const TOAST_ANIMATION_DURATION = 500;
+export declare function Toast(props: ToastProps): JSX.Element;

package/lib/atoms/ToggleGroup/__tests__/ToggleGroup.test.d.ts

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

package/lib/atoms/ToggleGroup/index.d.ts

@@ -0,0 +1,9 @@
+interface ToggleGroupProps {
+    leftText: string;
+    rightText: string;
+    leftClick: () => void;
+    rightClick: () => void;
+    selectedValue: string;
+}
+export declare const ToggleGroup: (props: ToggleGroupProps) => JSX.Element;
+export {};

package/lib/atoms/Tooltip/__tests__/Tooltip.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/atoms/Tooltip/index.d.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+import type { UseTooltipResultTooltipProps } from '../../tooltips';
+import type { StyleProps } from '../../primitives';
+export interface TooltipProps extends StyleProps {
+    children: React.ReactNode;
+    tooltipProps: UseTooltipResultTooltipProps & {
+        visible: boolean;
+    };
+    key?: string;
+}
+export declare function Tooltip(props: TooltipProps): JSX.Element;

package/lib/atoms/buttons/AlertPrimaryButton.d.ts

@@ -0,0 +1 @@
+export declare const AlertPrimaryButton: import("styled-components").StyledComponent<"button", any, import("../../primitives").StyleProps, any>;

package/lib/atoms/buttons/AltPrimaryButton.d.ts

@@ -0,0 +1 @@
+export declare const AltPrimaryButton: import("styled-components").StyledComponent<"button", any, import("../..").StyleProps, any>;

package/lib/atoms/buttons/EmptySelectorButton.d.ts

@@ -0,0 +1,10 @@
+import type { IconName } from '../../index';
+interface EmptySelectorButtonProps {
+    onClick: () => void;
+    text: string;
+    textAlignment: 'left' | 'middle';
+    iconName?: IconName;
+    disabled?: boolean;
+}
+export declare function EmptySelectorButton(props: EmptySelectorButtonProps): JSX.Element;
+export {};