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

package/lib/styles/cursor.d.ts

@@ -0,0 +1,10 @@
+export declare const CURSOR_AUTO = "auto";
+export declare const CURSOR_CROSSHAIR = "crosshair";
+export declare const CURSOR_DEFAULT = "default";
+export declare const CURSOR_GRAB = "grab";
+export declare const CURSOR_GRABBING = "grabbing";
+export declare const CURSOR_HELP = "help";
+export declare const CURSOR_NOT_ALLOWED = "not-allowed";
+export declare const CURSOR_POINTER = "pointer";
+export declare const CURSOR_ZOOM_IN = "zoom-in";
+export declare const CURSOR_WAIT = "wait";

package/lib/styles/flexbox.d.ts

@@ -27,3 +27,8 @@ export declare const DIRECTION_COLUMN_REVERSE = "column-reverse";
 export declare const WRAP = "wrap";
 export declare const NO_WRAP = "nowrap";
 export declare const WRAP_REVERSE = "wrap-reverse";
+export declare const WHITE_SPACE_NORMAL = "normal";
+export declare const WHITE_SPACE_PRE = "pre";
+export declare const WHITE_SPACE_PRE_WRAP = "pre-wrap";
+export declare const WHITE_SPACE_PRE_LINE = "pre-line";
+export declare const WHITE_SPACE_BREAK_SPACES = "break-spaces";

package/lib/styles/index.d.ts

@@ -1,5 +1,6 @@
 export * from './borders';
 export * from './colors';
+export * from './cursor';
 export * from './flexbox';
 export * from './layout';
 export * from './position';

package/lib/styles/layout.d.ts

@@ -6,6 +6,7 @@ export declare const DISPLAY_FLEX = "flex";
 export declare const DISPLAY_TABLE = "table";
 export declare const DISPLAY_TABLE_ROW = "table-row";
 export declare const DISPLAY_TABLE_CELL = "table-cell";
+export declare const DISPLAY_GRID = "grid";
 export declare const SIZE_AUTO = "auto";
 export declare const SIZE_1 = "1rem";
 export declare const SIZE_2 = "2rem";

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

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { I18nextProvider } from 'react-i18next';
-import { RenderResult } from '@testing-library/react';
+import type { RenderResult, RenderOptions } 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'];

package/lib/tooltips/DeprecatedTooltip.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { Popper } from 'react-popper';
 type PopperProps = React.ComponentProps<typeof Popper>;
 export interface DeprecatedTooltipProps {

package/lib/tooltips/{Tooltip.d.ts → LegacyTooltip.d.ts}

@@ -2,7 +2,7 @@ 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 {
+export interface LegacyTooltipProps extends StyleProps {
     /** Whether or not the tooltip should be rendered */
     visible: boolean;
     /** Contents of the tooltip */
@@ -25,7 +25,7 @@ export interface TooltipProps extends StyleProps {
  * 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 declare const LegacyTooltip: React.ForwardRefExoticComponent<LegacyTooltipProps & React.RefAttributes<HTMLDivElement>>;
 export interface ArrowProps {
     placement: Placement | null;
     arrowRef: React.RefCallback<HTMLElement>;

package/lib/tooltips/index.d.ts

@@ -1,6 +1,6 @@
 export * from './DeprecatedTooltip';
 export * from './HoverTooltip';
-export * from './Tooltip';
+export * from './LegacyTooltip';
 export * from './useTooltip';
 export * from './useHoverTooltip';
 export * from './usePopper';

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

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

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

@@ -26,6 +26,7 @@ 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 lineHeightNormal = "normal";
 export declare const fontStyleNormal = "normal";
 export declare const fontStyleItalic = "italic";
 export declare const textTransformNone = "none";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.6-alpha.7",
+  "version": "0.1.6-alpha.8",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
@@ -20,11 +20,10 @@
   "peerDependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "5.3.4",
-    "@types/react-router-dom": "5.3.3"
+    "styled-components": "5.3.6"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.7",
+    "@opentrons/shared-data": "0.1.6-alpha.8",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -33,12 +32,11 @@
     "@types/styled-components": "^5.1.26",
     "@types/webpack-env": "^1.16.0",
     "classnames": "2.2.5",
-    "interactjs": "^1.10.17",
+    "interactjs": "^1.10.27",
     "lodash": "4.17.21",
-    "react-i18next": "13.5.0",
+    "react-i18next": "14.0.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/tsconfig.json

@@ -9,7 +9,10 @@
     "composite": true,
     "rootDir": "src",
     "outDir": "lib",
+    "declarationDir": "lib",
+    "noEmit": false,
+    "jsx": "preserve"           
   },
   "include": ["typings", "src"],
-  "exclude": ["**/*.stories.tsx"]
-}
+  "exclude": ["**/*.stories.tsx", "dist"]
+}

package/{vite.config.ts → vite.config.mts}

@@ -9,11 +9,21 @@ import lostCss from 'lost'
 
 export default defineConfig({
   build: {
-    // 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,
+    emptyOutDir: false, // Keep the outDir to avoid removing TS types
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es', 'cjs'],
+      fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.cjs'),
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'styled-components'], // Avoid bundling dependencies
+      output: {
+        assetFileNames: '[name].[ext]', // Ensure asset names are kept clean
+        entryFileNames: '[name].js', // Ensure only compiled JS is output
+      },
+    },
     commonjsOptions: {
       transformMixedEsModules: true,
       esmExternals: true,
@@ -23,7 +33,6 @@ export default defineConfig({
     react({
       include: '**/*.tsx',
       babel: {
-        // Use babel.config.js files
         configFile: true,
       },
     }),
@@ -32,6 +41,7 @@ export default defineConfig({
     esbuildOptions: {
       target: 'es2020',
     },
+    exclude: ['styled-components'],
   },
   css: {
     postcss: {
@@ -45,8 +55,11 @@ export default defineConfig({
     },
   },
   define: {
-    'process.env': process.env,
-    global: 'globalThis',
+    'process.env': {
+      NODE_ENV: process.env.NODE_ENV,
+      OPENTRONS_PROJECT: process.env.OPENTRONS_PROJECT,
+    },
+    global: 'globalThis', // Ensure compatibility with global variables
   },
   resolve: {
     alias: {

package/lib/lists/ListItem.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import type { IconName } from '../icons';
-interface ListItemProps {
-    /** click handler */
-    onClick?: (event: React.SyntheticEvent) => unknown;
-    /** mouse enter handler */
-    onMouseEnter?: (event: React.MouseEvent) => unknown;
-    /** mouse leave handler */
-    onMouseLeave?: (event: React.MouseEvent) => unknown;
-    /** mouse enter handler */
-    onPointerEnter?: (event: React.PointerEvent) => unknown;
-    /** mouse leave handler */
-    onPointerLeave?: (event: React.PointerEvent) => unknown;
-    /** if URL is specified, ListItem is wrapped in a React Router NavLink */
-    url?: string | null;
-    /** if URL is specified NavLink can receive an active class name */
-    activeClassName?: string;
-    /** if URL is specified NavLink can receive an exact property for matching routes */
-    exact?: boolean;
-    /** Additional class name */
-    className?: string;
-    /** if disabled, the onClick handler will be disabled */
-    isDisabled?: boolean;
-    /** name constant of the icon to display */
-    iconName?: IconName;
-    'aria-describedby'?: string;
-    ref?: {
-        current: Element | null;
-    } | ((current: Element | null) => unknown);
-    children?: React.ReactNode;
-}
-/**
- * A styled `<li>` with an optional icon, and an optional url for a React Router `NavLink`
- *
- */
-export declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
-export {};

package/lib/modals/BaseModal.d.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import type { StyleProps } from '../primitives';
-export interface BaseModalProps extends StyleProps {
-    /** Overlay color, defaults to `OVERLAY_GRAY_90` */
-    overlayColor?: string;
-    /** Optional close on outside click **/
-    onOutsideClick?: React.MouseEventHandler;
-    /** Optional sticky header */
-    header?: React.ReactNode;
-    /** Option to turn off headerStyles */
-    noHeaderStyles?: boolean;
-    /** Optional sticky footer */
-    footer?: React.ReactNode;
-    /** Modal content */
-    children?: React.ReactNode;
-}
-/**
- * A BaseModal is a layout component for building more specific modals.
- *
- * It includes:
- * - An overlay, customizable with the `overlayColor` prop
- * - A content area, with `overflow-y: auto` and customizable with style props
- * - An optional sticky header
- * - An optional sticky footer
- */
-export declare function BaseModal(props: BaseModalProps): JSX.Element;

package/lib/modals/ModalPage.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { Box } from '../primitives';
-import type { TitleBarProps } from '../structure';
-export interface ModalPageProps {
-    /** Props for title bar at top of modal page */
-    titleBar: TitleBarProps;
-    contentsClassName?: string;
-    heading?: React.ReactNode;
-    children?: React.ReactNode;
-    innerProps?: React.ComponentProps<typeof Box>;
-    outerProps?: React.ComponentProps<typeof Box>;
-}
-/**
- * @deprecated Use `Interstitial` instead
- */
-export declare function ModalPage(props: ModalPageProps): JSX.Element;

package/lib/molecules/LocationIcon/index.d.ts

@@ -1,15 +0,0 @@
-import type { IconName } from '../../icons';
-import type { StyleProps } from '../../primitives';
-interface SlotLocationProps extends StyleProps {
-    /** name constant of the slot to display */
-    slotName: string;
-    iconName?: undefined;
-}
-interface HardwareIconProps extends StyleProps {
-    /** hardware icon name */
-    iconName: IconName;
-    slotName?: undefined;
-}
-type LocationIconProps = SlotLocationProps | HardwareIconProps;
-export declare function LocationIcon({ slotName, iconName, color, ...styleProps }: LocationIconProps): JSX.Element;
-export {};

package/lib/molecules/ParametersTable/InfoScreen.d.ts

@@ -1,6 +0,0 @@
-interface InfoScreenProps {
-    contentType: 'parameters' | 'moduleControls' | 'runNotStarted' | 'labware';
-    t?: any;
-}
-export declare function InfoScreen({ contentType, t }: InfoScreenProps): JSX.Element;
-export {};

package/lib/molecules/RoundTab.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Btn } from '../primitives';
-interface RoundTabProps extends React.ComponentProps<typeof Btn> {
-    isCurrent: boolean;
-    disabled?: boolean;
-}
-export declare function RoundTab({ isCurrent, children, disabled, ...restProps }: RoundTabProps): JSX.Element;
-export {};

package/lib/structure/PageTabs.d.ts

@@ -1,11 +0,0 @@
-interface TabProps {
-    title: string;
-    href: string;
-    isActive: boolean;
-    isDisabled: boolean;
-}
-export interface PageTabProps {
-    pages: TabProps[];
-}
-export declare function PageTabs(props: PageTabProps): JSX.Element;
-export {};

package/lib/tabbedNav/NavTab.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import type { IconName } from '../icons';
-export interface NavTabProps {
-    /** optional click event for nav button */
-    onClick?: React.MouseEventHandler;
-    /** optional url for nav button route */
-    url?: string;
-    /** position a single button on the bottom of the page */
-    isBottom?: boolean;
-    /** classes to apply */
-    className?: string;
-    /** id */
-    id?: string;
-    /** disabled attribute (setting disabled removes onClick) */
-    disabled?: boolean;
-    /** optional title to display below the icon */
-    title?: string;
-    /** Icon name for button's icon */
-    iconName: IconName;
-    /** Display a notification dot */
-    notification?: boolean;
-    /** selected styling (can also use react-router & `activeClassName`) */
-    selected?: boolean;
-}
-export declare function NavTab(props: NavTabProps): JSX.Element;

package/lib/tabbedNav/OutsideLinkTab.d.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import type { IconName } from '../icons';
-export interface OutsideLinkTabProps {
-    /** optional click event for nav button */
-    onClick?: React.MouseEventHandler;
-    /** link to outside URL */
-    to: string;
-    /** position a single button on the bottom of the page */
-    isBottom?: boolean;
-    /** classes to apply */
-    className?: string;
-    /** disabled attribute (setting disabled removes onClick) */
-    disabled?: boolean;
-    /** optional title to display below the icon */
-    title?: string;
-    /** Icon name for button's icon */
-    iconName: IconName;
-    /** Display a notification dot */
-    notification?: boolean;
-    /** selected styling (can also use react-router & `activeClassName`) */
-    selected?: boolean;
-}
-/** Very much like NavTab, but used for opening external links in a new tab/window */
-export declare function OutsideLinkTab(props: OutsideLinkTabProps): JSX.Element;

package/lib/tabbedNav/TabbedNavBar.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface TabbedNavBarProps {
-    className?: string;
-    topChildren?: React.ReactNode;
-    bottomChildren?: React.ReactNode;
-}
-export declare function TabbedNavBar(props: TabbedNavBarProps): JSX.Element;

package/lib/tabbedNav/index.d.ts

@@ -1,3 +0,0 @@
-export * from './TabbedNavBar';
-export * from './NavTab';
-export * from './OutsideLinkTab';