@opentrons/components 0.1.6-alpha.15 → 0.1.6-alpha.16

package/lib/instrument/InstrumentDiagram.d.ts

@@ -1,4 +1,4 @@
-import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { FlattenSimpleInterpolation } from '../patches';
 import type { PipetteV2Specs } from '@opentrons/shared-data';
 import type { Mount } from '../robot-types';
 import type { StyleProps } from '..';

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

@@ -35,7 +35,7 @@ export interface DropdownMenuProps {
     onBlur?: React.FocusEventHandler<HTMLButtonElement>;
     /** optional disabled */
     disabled?: boolean;
-    /** force direction for pd after release this will be fixed and remove */
-    forceDirection?: boolean;
+    /** optional placement of the menu */
+    menuPlacement?: 'auto' | 'top' | 'bottom';
 }
 export declare function DropdownMenu(props: DropdownMenuProps): JSX.Element;

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

@@ -1,6 +1,8 @@
 interface InfoScreenProps {
     content: string;
+    subContent?: string;
     backgroundColor?: string;
+    height?: string;
 }
-export declare function InfoScreen({ content, backgroundColor, }: InfoScreenProps): JSX.Element;
+export declare function InfoScreen({ content, subContent, backgroundColor, height, }: InfoScreenProps): JSX.Element;
 export {};

package/lib/organisms/Toolbox/index.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export interface ToolboxProps {
     title: JSX.Element;
     children: React.ReactNode;
@@ -12,6 +11,7 @@ export interface ToolboxProps {
     closeButton?: JSX.Element;
     side?: 'left' | 'right';
     horizontalSide?: 'top' | 'bottom';
+    titlePadding?: string;
     childrenPadding?: string;
     subHeader?: JSX.Element | null;
     secondaryHeaderButton?: JSX.Element;

package/lib/patches.d.ts

@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+export * from 'styled-components';
+declare const defaultStyled: typeof styled;
+export { defaultStyled as default };

package/lib/primitives/Btn.d.ts

@@ -1,4 +1,4 @@
-import type { StyledComponent } from 'styled-components';
+import type { StyledComponent } from '../patches';
 import type { StyleProps } from './types';
 export declare const BUTTON_TYPE_SUBMIT: 'submit';
 export declare const BUTTON_TYPE_RESET: 'reset';

package/lib/primitives/style-props.d.ts

@@ -1,4 +1,4 @@
 import type * as Types from './types';
-import type { CSSObject } from 'styled-components';
+import type { CSSObject } from '../patches';
 export declare const styleProps: (props: Types.StyleProps) => CSSObject;
 export declare const isntStyleProp: (prop: string | React.ReactText) => boolean;

package/lib/primitives/types.d.ts

@@ -1,4 +1,4 @@
-import type { StyledComponent, CSSProperties } from 'styled-components';
+import type { StyledComponent, CSSProperties } from '../patches';
 export interface ColorProps {
     color?: string;
     backgroundColor?: string;

package/lib/styles/typography.d.ts

@@ -1,4 +1,4 @@
-import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { FlattenSimpleInterpolation } from '../patches';
 export declare const FONT_SIZE_HUGE = "3rem";
 export declare const FONT_SIZE_BIG = "1.5rem";
 export declare const FONT_SIZE_HEADER = "1.125rem";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.6-alpha.15",
+  "version": "0.1.6-alpha.16",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
@@ -19,11 +19,10 @@
   "homepage": "https://github.com/Opentrons/opentrons#readme",
   "peerDependencies": {
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "styled-components": "5.3.6"
+    "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.15",
+    "@opentrons/shared-data": "0.1.6-alpha.16",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -38,7 +37,8 @@
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
     "react-select": "5.4.0",
-    "redux": "4.0.5"
+    "redux": "4.0.5",
+    "styled-components": "5.3.6"
   },
   "devDependencies": {
     "react-redux": "8.1.2"

package/tsconfig.json

@@ -9,8 +9,6 @@
     "composite": true,
     "rootDir": "src",
     "outDir": "lib",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
   },
   "include": ["typings", "src"],
   "exclude": ["**/*.stories.tsx"]

package/vite.config.mts

@@ -6,35 +6,18 @@ import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
 import postCssPresetEnv from 'postcss-preset-env'
 import lostCss from 'lost'
-import commonjs from '@rollup/plugin-commonjs' // Importing @rollup/plugin-commonjs to handle CJS to ESM conversion
 
 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 don't want to delete them
+    // do not delete the outdir, typescript types might live there and we dont want to delete them
     emptyOutDir: false,
-    lib: {
-      entry: 'src/index.ts',
-      formats: ['es', 'cjs'], // Generate both ES Module and CommonJS outputs
-      fileName: format => (format === 'es' ? 'index.mjs' : 'index.cjs'),
+    commonjsOptions: {
+      transformMixedEsModules: true,
+      esmExternals: true,
     },
-    rollupOptions: {
-      external: ['react', 'react-dom', 'styled-components'], // Ensure peer dependencies are not bundled
-      output: {
-        exports: 'named', // Use named exports for compatibility with styled-components in CJS
-        globals: {
-          'styled-components': 'styled', // Ensure styled-components maps correctly in UMD builds
-        },
-        plugins: [
-          commonjs({
-            include: /node_modules/, // Include node_modules for CommonJS conversion
-            transformMixedEsModules: true, // Ensure proper handling of mixed modules
-          }),
-        ],
-      },
-    },
-    target: 'es2017', // Transpile down to a compatible version for Next.js
   },
   plugins: [
     react({
@@ -49,7 +32,6 @@ export default defineConfig({
     esbuildOptions: {
       target: 'es2020',
     },
-    exclude: ['styled-components'], // Avoid pre-bundling styled-components
   },
   css: {
     postcss: {
@@ -64,7 +46,7 @@ export default defineConfig({
   },
   define: {
     'process.env': process.env,
-    global: 'globalThis', // Fix issues with globalThis in some environments
+    global: 'globalThis',
   },
   resolve: {
     alias: {
@@ -73,6 +55,5 @@ export default defineConfig({
         '../components/src/index.module.css'
       ),
     },
-    dedupe: ['styled-components'], // Prevent duplicate styled-components instances
   },
 })