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

package/lib/tooltips/HoverTooltip.d.ts

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

@@ -0,0 +1,35 @@
+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/__tests__/Tooltip.test.d.ts

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

package/lib/tooltips/__tests__/useHoverTooltip.test.d.ts

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

package/lib/tooltips/__tests__/usePopper.test.d.ts

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

package/lib/tooltips/__tests__/useTooltip.test.d.ts

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

package/lib/tooltips/constants.d.ts

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

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

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

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

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

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

package/lib/tooltips/useTooltip.d.ts

@@ -0,0 +1,31 @@
+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/index.d.ts

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

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

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

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

@@ -0,0 +1,18 @@
+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 spacing44: "2.75rem";
+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

@@ -0,0 +1,70 @@
+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/ui-style-constants/viewport.d.ts

@@ -0,0 +1,15 @@
+export declare const touchScreenViewport: {
+    viewport: {
+        viewports: {
+            onDeviceDisplay: {
+                name: string;
+                type: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+        defaultViewport: string;
+    };
+};

package/lib/utils.d.ts

@@ -0,0 +1,15 @@
+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/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.6-alpha.5",
+  "version": "0.1.6-alpha.7",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
   "style": "src/index.module.css",
-  "main": "lib/opentrons-components.js",
+  "main": "lib/index.mjs",
   "module": "src/index.ts",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "@types/react-router-dom": "5.3.3"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.5",
+    "@opentrons/shared-data": "0.1.6-alpha.7",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -35,8 +35,10 @@
     "classnames": "2.2.5",
     "interactjs": "^1.10.17",
     "lodash": "4.17.21",
+    "react-i18next": "13.5.0",
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
+    "react-router-dom": "5.3.4",
     "react-select": "5.4.0",
     "redux": "4.0.5",
     "styled-components": "5.3.6"

package/vite.config.ts

@@ -12,6 +12,8 @@ export default defineConfig({
     // Relative to the root
     ssr: 'src/index.ts',
     outDir: 'lib',
+    // do not delete the outdir, typescript types might live there and we dont want to delete them
+    emptyOutDir: false,
     commonjsOptions: {
       transformMixedEsModules: true,
       esmExternals: true,