@opentrons/components 0.1.5 → 0.1.6-alpha.2

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

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

package/lib/tooltips/DeprecatedTooltip.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { Popper } from 'react-popper';
-type PopperProps = React.ComponentProps<typeof Popper>;
-export interface DeprecatedTooltipProps {
-    /** show or hide the tooltip */
-    open?: boolean;
-    /** contents of the tooltip */
-    tooltipComponent: React.ReactNode;
-    /** optional portal to place the tooltipComponent inside */
-    portal?: React.ComponentType<any>;
-    /** <https://github.com/FezVrasta/react-popper#placement> */
-    placement?: PopperProps['placement'];
-    /** <https://github.com/FezVrasta/react-popper#positionfixed> */
-    positionFixed?: PopperProps['positionFixed'];
-    /** <https://github.com/FezVrasta/react-popper#modifiers> */
-    modifiers?: PopperProps['modifiers'];
-    /** render function for tooltip'd component */
-    children: (props?: React.PropsWithRef<any>) => JSX.Element | null;
-    /** extra props to pass to the children render function */
-    childProps?: React.PropsWithRef<any>;
-}
-/**
- *  Basic, fully controlled Tooltip component.
- *
- * `props.children` is a function that receives the following props object:
- * ```js
- * type TooltipChildProps = {
- *   ref: React.Ref<*>,
- * }
- * ```
- *
- * `props.childProps` can be used to add extra fields to the child props object
- *
- * @deprecated Use `Tooltip` and `useTooltip` instead
- */
-export declare function DeprecatedTooltip(props: DeprecatedTooltipProps): JSX.Element | null;
-export {};

package/lib/tooltips/HoverTooltip.d.ts

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import type { DeprecatedTooltipProps } from './DeprecatedTooltip';
-interface MouseHandlers {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-}
-export type HoverTooltipHandlers = React.PropsWithRef<MouseHandlers>;
-export type HoverTooltipProps = DeprecatedTooltipProps;
-interface HoverTooltipState {
-    isOpen: boolean;
-}
-/**
- * Tooltip component that triggers on `MouseEnter` and `MouseLeave`. See
- * `Tooltip` for full props list.
- *
- * `props.children` is a function that receives the following props object:
- * ```js
- * type HoverTooltipHandlers = {
- *   ref: React.Ref<*>,
- *   onMouseEnter: (React.MouseEvent) => void,
- *   onMouseLeave: (React.MouseEvent) => void,
- * }
- * ```
- *
- * @deprecated Use `Tooltip` and `useHoverTooltip` instead
- */
-export declare class HoverTooltip extends React.Component<HoverTooltipProps, HoverTooltipState> {
-    openTimeout: number | null;
-    closeTimeout: number | null;
-    constructor(props: HoverTooltipProps);
-    componentWillUnmount(): void;
-    delayedOpen: () => void;
-    delayedClose: () => void;
-    render(): JSX.Element;
-}
-export {};

package/lib/tooltips/Tooltip.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import type { CSSProperties } from 'react';
-import type { Placement } from './types';
-import type { StyleProps } from '../primitives';
-export interface TooltipProps extends StyleProps {
-    /** Whether or not the tooltip should be rendered */
-    visible: boolean;
-    /** Contents of the tooltip */
-    children?: React.ReactNode;
-    /**
-     * Tooltip element ID (provided by useTooltip). Will match
-     * targetProps.aria-describedby
-     */
-    id: string;
-    /** Actual tooltip placement, if known (provided by useTooltip) */
-    placement: Placement | null;
-    /** 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>;
-    /** Inline styles to apply to arrow element (provided by useTooltip) */
-    arrowStyle: CSSProperties;
-}
-/**
- * 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 Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
-export interface ArrowProps {
-    placement: Placement | null;
-    arrowRef: React.RefCallback<HTMLElement>;
-    arrowStyle: CSSProperties;
-    backgroundColor: string;
-}
-export declare function Arrow(props: ArrowProps): JSX.Element;

package/lib/tooltips/constants.d.ts

@@ -1,17 +0,0 @@
-export declare const TOOLTIP_AUTO: 'auto';
-export declare const TOOLTIP_AUTO_START: 'auto-start';
-export declare const TOOLTIP_AUTO_END: 'auto-end';
-export declare const TOOLTIP_TOP: 'top';
-export declare const TOOLTIP_TOP_START: 'top-start';
-export declare const TOOLTIP_TOP_END: 'top-end';
-export declare const TOOLTIP_RIGHT: 'right';
-export declare const TOOLTIP_RIGHT_START: 'right-start';
-export declare const TOOLTIP_RIGHT_END: 'right-end';
-export declare const TOOLTIP_BOTTOM: 'bottom';
-export declare const TOOLTIP_BOTTOM_START: 'bottom-start';
-export declare const TOOLTIP_BOTTOM_END: 'bottom-end';
-export declare const TOOLTIP_LEFT: 'left';
-export declare const TOOLTIP_LEFT_START: 'left-start';
-export declare const TOOLTIP_LEFT_END: 'left-end';
-export declare const TOOLTIP_ABSOLUTE: 'absolute';
-export declare const TOOLTIP_FIXED: 'fixed';

package/lib/tooltips/index.d.ts

@@ -1,8 +0,0 @@
-export * from './DeprecatedTooltip';
-export * from './HoverTooltip';
-export * from './Tooltip';
-export * from './useTooltip';
-export * from './useHoverTooltip';
-export * from './usePopper';
-export * from './constants';
-export * from './types';

package/lib/tooltips/styles.d.ts

@@ -1,12 +0,0 @@
-export declare const INITIAL_TOOLTIP_STYLE: {
-    readonly position: "absolute";
-    readonly left: "0";
-    readonly top: "0";
-    readonly margin: "0";
-};
-export declare const INITIAL_ARROW_STYLE: {
-    readonly position: "absolute";
-};
-export declare const TOOLTIP_OFFSET_PX = 8;
-export declare const ARROW_OFFSET_PX = 4;
-export declare const ARROW_SIZE_PX: number;

package/lib/tooltips/types.d.ts

@@ -1,52 +0,0 @@
-import type { CSSProperties } from 'react';
-import type { Instance, Options, Modifier } from '@popperjs/core/lib/types';
-import type { UseHoverOptions, HoverHandlers } from '../interaction-enhancers';
-export type Placement = Options['placement'];
-export type Strategy = Options['strategy'];
-export type PopperInstance = Instance;
-export type PopperOptions = Options;
-export type PopperModifer<T> = Modifier<T>;
-export type HandleStateUpdate = (placement: Placement, styles: {
-    popper?: CSSProperties;
-    arrow?: CSSProperties;
-}) => void;
-export interface UsePopperOptions {
-    target: Element | null;
-    tooltip: HTMLElement | null;
-    arrow: HTMLElement | null;
-    onStateUpdate: HandleStateUpdate;
-    placement?: Placement | null;
-    strategy?: Strategy | null;
-    offset?: number;
-}
-export type UsePopperResult = Instance | null;
-export interface UseTooltipOptions {
-    placement?: Placement;
-    strategy?: Strategy;
-    offset?: number;
-}
-export interface UseTooltipResultTargetProps {
-    ref: React.RefCallback<Element | null>;
-    'aria-describedby': string;
-}
-export interface UseTooltipResultTooltipProps {
-    id: string;
-    ref: React.RefCallback<HTMLElement | null>;
-    placement: Placement | null;
-    style: CSSProperties;
-    arrowRef: React.RefCallback<HTMLElement | null>;
-    arrowStyle: CSSProperties;
-}
-export type UseTooltipResult = [
-    UseTooltipResultTargetProps,
-    UseTooltipResultTooltipProps
-];
-export type UseHoverTooltipOptions = Partial<UseTooltipOptions & UseHoverOptions>;
-export interface UseHoverTooltipTargetProps extends UseTooltipResultTargetProps, HoverHandlers {
-}
-export type UseHoverTooltipResult = [
-    UseHoverTooltipTargetProps,
-    UseTooltipResultTooltipProps & {
-        visible: boolean;
-    }
-];

package/lib/tooltips/useHoverTooltip.d.ts

@@ -1,24 +0,0 @@
-import type { UseHoverTooltipOptions, UseHoverTooltipResult } from './types';
-/**
- * Hook to position a tooltip component relative to a target component on hover.
- * Adds a default `enterDelay` of 300 ms before the tooltip will show
- *
- * @param {UseHoverTooltipOptions} [options={}] (change default options (see `useTooltip` and `useHover`))
- * @returns {UseHoverTooltipResult}
- * @example
- * ```js
- * import { useHoverTooltip, Tooltip } from '@opentrons/components'
- *
- * export function HelloWorld() {
- *   const [targetProps, tooltipProps] = useHoverTooltip()
- *
- *   return (
- *     <>
- *       <span {...targetProps}>Hello</span>
- *       <Tooltip {...tooltipProps}>World</Tooltip>
- *     </>
- *   )
- * }
- * ```
- */
-export declare function useHoverTooltip(options?: UseHoverTooltipOptions): UseHoverTooltipResult;

package/lib/tooltips/usePopper.d.ts

@@ -1,2 +0,0 @@
-import type { UsePopperOptions, UsePopperResult } from './types';
-export declare function usePopper(options: UsePopperOptions): UsePopperResult;

package/lib/tooltips/useTooltip.d.ts

@@ -1,31 +0,0 @@
-import type { UseTooltipOptions, UseTooltipResult } from './types';
-/**
- * Hook to position a tooltip component relative to a target component
- *
- * @param {UseTooltipOptions} [options={}] (change the default `position`, `strategy`, or `offset` of the tooltip)
- * @returns {UseTooltipResult}
- * @example
- * ```js
- * import {
- *   useTooltip,
- *   Tooltip,
- *   TOOLTIP_TOP,
- *   TOOLTIP_FIXED
- * } from '@opentrons/components'
- *
- * export function HelloWorld() {
- *   const [targetProps, tooltipProps] = useTooltip({
- *     position: TOOLTIP_TOP,
- *     strategy: TOOLTIP_FIXED
- *   })
- *
- *   return (
- *     <>
- *       <span {...targetProps}>Hello</span>
- *       <Tooltip visible={true} {...tooltipProps}>World</Tooltip>
- *     </>
- *   )
- * }
- * ```
- */
-export declare function useTooltip(options?: UseTooltipOptions): UseTooltipResult;

package/lib/ui-style-constants/borders.d.ts

@@ -1,18 +0,0 @@
-export declare const radiusSoftCorners = "4px";
-export declare const radiusRoundEdge = "20px";
-export declare const styleSolid = "solid";
-export declare const borderRadiusSize1 = "4px";
-export declare const borderRadiusSize2 = "8px";
-export declare const borderRadiusSize3 = "12px";
-export declare const borderRadiusSize4 = "16px";
-export declare const borderRadiusSize5 = "40px";
-export declare const borderRadiusSize6 = "60px";
-export declare const tabBorder: import("styled-components").FlattenSimpleInterpolation;
-export declare const activeLineBorder = "1px solid #006CFA";
-export declare const lineBorder = "1px solid #DEDEDE";
-export declare const transparentLineBorder = "1px solid transparent";
-export declare const cardOutlineBorder: import("styled-components").FlattenSimpleInterpolation;
-export declare const bigDropShadow = "0 3px 6px rgba(255, 0, 0, 1)";
-export declare const smallDropShadow = "0px 3px 6px rgba(0, 0, 0, 0.23)";
-export declare const shadowBig = "0px 3px 6px rgba(0,0,0,0.23)";
-export declare const shadowSmall = "0px 0px 40px rgba(0,0,0,0.4)";

package/lib/ui-style-constants/index.d.ts

@@ -1,4 +0,0 @@
-export * as BORDERS from './borders';
-export * as RESPONSIVENESS from './responsiveness';
-export * as TYPOGRAPHY from './typography';
-export * as SPACING from './spacing';

package/lib/ui-style-constants/responsiveness.d.ts

@@ -1,2 +0,0 @@
-export declare const touchscreenMediaQuerySpecs = "(height: 600px) and (width: 1024px)";
-export declare const isTouchscreen: boolean;

package/lib/ui-style-constants/spacing.d.ts

@@ -1,17 +0,0 @@
-export declare const spacing2: "0.125rem";
-export declare const spacing4: "0.25rem";
-export declare const spacing6: "0.375rem";
-export declare const spacing8: "0.5rem";
-export declare const spacing10: "0.625rem";
-export declare const spacing12: "0.75rem";
-export declare const spacing16: "1rem";
-export declare const spacing20: "1.25rem";
-export declare const spacing24: "1.5rem";
-export declare const spacing32: "2rem";
-export declare const spacing40: "2.5rem";
-export declare const spacing48: "3rem";
-export declare const spacing60: "3.75rem";
-export declare const spacing68: "4.25rem";
-export declare const spacing80: "5rem";
-export declare const spacing120: "7.5rem";
-export declare const spacingAuto: "auto";

package/lib/ui-style-constants/typography.d.ts

@@ -1,70 +0,0 @@
-export declare const fontSize80 = "5rem";
-export declare const fontSize38 = "2.375rem";
-export declare const fontSize32 = "2rem";
-export declare const fontSize28 = "1.75rem";
-export declare const fontSize22 = "1.375rem";
-export declare const fontSize20 = "1.25rem";
-export declare const fontSizeH1 = "1.188rem";
-export declare const fontSizeH2 = "0.9375rem";
-export declare const fontSizeH3 = "0.875rem";
-export declare const fontSizeH4 = "0.813rem";
-export declare const fontSizeH6 = "0.563rem";
-export declare const fontSizeP = "0.8125rem";
-export declare const fontSizeLabel = "0.6875rem";
-export declare const fontSizeCaption = "0.625rem";
-export declare const fontWeightBold = 700;
-export declare const fontWeightSemiBold = 600;
-export declare const fontWeightRegular = 400;
-export declare const fontWeightLight = 300;
-export declare const lineHeight96 = "6rem";
-export declare const lineHeight48 = "3rem";
-export declare const lineHeight42 = "2.625rem";
-export declare const lineHeight36 = "2.25rem";
-export declare const lineHeight28 = "1.75rem";
-export declare const lineHeight24 = "1.5rem";
-export declare const lineHeight20 = "1.25rem";
-export declare const lineHeight18 = "1.125rem";
-export declare const lineHeight16 = "1rem";
-export declare const lineHeight12 = "0.75rem";
-export declare const fontStyleNormal = "normal";
-export declare const fontStyleItalic = "italic";
-export declare const textTransformNone = "none";
-export declare const textTransformCapitalize = "capitalize";
-export declare const textTransformUppercase = "uppercase";
-export declare const textTransformLowercase = "lowercase";
-export declare const textAlignLeft = "left";
-export declare const textAlignRight = "right";
-export declare const textAlignCenter = "center";
-export declare const textAlignJustify = "justify";
-export declare const textDecorationUnderline = "underline";
-export declare const h1Default: import("styled-components").FlattenSimpleInterpolation;
-export declare const h2Regular: import("styled-components").FlattenSimpleInterpolation;
-export declare const h2SemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const h3Regular: import("styled-components").FlattenSimpleInterpolation;
-export declare const h3SemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const h6Default: import("styled-components").FlattenSimpleInterpolation;
-export declare const h6SemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const pRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const pSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const labelRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const labelSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const linkPSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level1Header: import("styled-components").FlattenSimpleInterpolation;
-export declare const level2HeaderBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level2HeaderSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level2HeaderRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const level3HeaderBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level3HeaderSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level3HeaderRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const level4HeaderBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level4HeaderSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const level4HeaderRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const bodyTextBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const bodyTextSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const bodyTextRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const smallBodyTextBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const smallBodyTextSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const smallBodyTextRegular: import("styled-components").FlattenSimpleInterpolation;
-export declare const darkLinkH4SemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const darkLinkLabelSemiBold: import("styled-components").FlattenSimpleInterpolation;
-export declare const darkLinkLabelSemiBoldDisabled: import("styled-components").FlattenSimpleInterpolation;

package/lib/utils.d.ts

@@ -1,15 +0,0 @@
-export declare const humanizeLabwareType: (labwareType: string) => string;
-export declare const wellNameSplit: (wellName: string) => [string, string];
-/**
- * Truncate a long string to display it
- * @example
- * truncateString('Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up, Amplify Tagmlo1234567ted', 88, 66);
- * Illumina DNA Prep with Enrichment: Part 1 - Tagmentation, Clean Up...fy Tagmlo1234567ted
- *
- * @param {string} text - A string param
- * @param {number} maxLength - A maximum length of display
- * @param {number} breakPoint - Optional A point to insert three dots
- *
- * @returns {string} Returns the truncated string
- */
-export declare function truncateString(text: string, maxLength: number, breakPoint?: number): string;

package/webpack.config.js

@@ -1,38 +0,0 @@
-'use strict'
-
-const path = require('path')
-const { rules } = require('@opentrons/webpack-config')
-
-const ENTRY_INDEX = path.join(__dirname, 'src/barrel.ts')
-const OUTPUT_PATH = path.join(__dirname, 'lib')
-
-module.exports = {
-  target: 'web',
-  entry: { index: ENTRY_INDEX },
-  output: {
-    path: OUTPUT_PATH,
-    filename: 'opentrons-components.js',
-    library: '@opentrons/components',
-    libraryTarget: 'umd',
-    globalObject: 'this',
-  },
-  mode: 'production',
-  module: { rules: [rules.js] },
-  resolve: {
-    extensions: ['.wasm', '.mjs', '.js', '.ts', '.tsx', '.json'],
-  },
-  externals: {
-    react: {
-      root: 'React',
-      commonjs2: 'react',
-      commonjs: 'react',
-      amd: 'react',
-    },
-    'react-dom': {
-      root: 'ReactDOM',
-      commonjs2: 'react-dom',
-      commonjs: 'react-dom',
-      amd: 'react-dom',
-    },
-  },
-}