build(components, shared-data): fix components and shared-data npm de…

…ploy actions (#15180) Closes AUTH-331 Co-authored-by: Seth Foster <[email protected]>
Opentrons · May 28, 2024 · 84e83ec · 84e83ec
1 parent 15343db
commit 84e83ec
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 87 deletions.
diff --git a/.github/workflows/components-test-build-deploy.yaml b/.github/workflows/components-test-build-deploy.yaml
@@ -190,9 +190,9 @@ jobs:
           npm config set cache ./.npm-cache
           yarn config set cache-folder ./.yarn-cache
           make setup-js
-      - name: 'build typescript'
-        run: make build-ts
-      - name: 'build library'
+      - name: 'build typescript types'
+        run: make -C components build-ts
+      - name: 'build js bundle'
         run: |
           make -C components lib
       # replace package.json stub version number with version from tag

diff --git a/.github/workflows/shared-data-test-lint-deploy.yaml b/.github/workflows/shared-data-test-lint-deploy.yaml
@@ -234,6 +234,11 @@ jobs:
         with:
           node-version: '18.19.0'
           registry-url: 'https://registry.npmjs.org'
+      - name: 'install udev for usb-detection'
+        run: |
+          # WORKAROUND: Remove microsoft debian repo due to https://github.com/microsoft/linux-package-repositories/issues/130. Remove line below after it is resolved
+          sudo rm -f /etc/apt/sources.list.d/microsoft-prod.list
+          sudo apt-get update && sudo apt-get install libudev-dev
       - name: 'cache yarn cache'
         uses: actions/cache@v3
         with:

diff --git a/components/Makefile b/components/Makefile
@@ -31,6 +31,10 @@ lib: export NODE_ENV := production
 lib:
 	yarn vite build
 
+.PHONY: build-ts
+build-ts:
+	yarn tsc --build --emitDeclarationOnly
+
 # development
 #####################################################################
 

diff --git a/components/package.json b/components/package.json
@@ -5,7 +5,7 @@
   "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",
@@ -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"

diff --git a/components/src/hardware-sim/DeckSlotLocation/index.tsx b/components/src/hardware-sim/DeckSlotLocation/index.tsx
@@ -20,6 +20,8 @@ interface LegacyDeckSlotLocationProps extends React.SVGProps<SVGGElement> {
   slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
 }
 
+type AddressableAreaFromDeckDef = typeof ot2DeckDefV5.locations.addressableAreas[number]
+
 // dimensions of the OT-2 fixed trash, not in deck definition
 export const OT2_FIXED_TRASH_X_DIMENSION = 172.86
 export const OT2_FIXED_TRASH_Y_DIMENSION = 165.86
@@ -41,7 +43,7 @@ export function LegacyDeckSlotLocation(
   if (robotType !== OT2_ROBOT_TYPE) return null
 
   const slotDef = ot2DeckDefV5.locations.addressableAreas.find(
-    s => s.id === slotName
+    (s: AddressableAreaFromDeckDef) => s.id === slotName
   )
   if (slotDef == null) {
     console.warn(

diff --git a/components/src/images/labware/measurement-guide/index.ts b/components/src/images/labware/measurement-guide/index.ts
@@ -11,178 +11,224 @@ export interface DiagramProps {
 
 type Diagrams = Record<string, string[]>
 
+const FOOTPRINT_IMAGE_RELATIVE_PATH = './images/dimensions/[email protected]'
+const DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH =
+  './images/dimensions/[email protected]'
+const DIMENSIONS_HEIGHT_TIP_RACK_IMAGE_RELATIVE_PATH =
+  './images/dimensions/[email protected]'
+
+const DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_RELATIVE_PATH =
+  './images/dimensions/[email protected]'
+
+const DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_IRREGULAR_RELATIVE_PATH =
+  './images/dimensions/[email protected]'
+
+const HEIGHT_ALUM_BLOCK_TUBES_IMAGE_RELATIVE_PATH =
+  './images/dimensions/[email protected]'
+
+const HEIGHT_ALUM_BLOCK_PLATE_IMAGE_RELATIVE_PATH =
+  './images/dimensions/[email protected]'
+
+const OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH =
+  './images/offset/[email protected]'
+
+const SPACING_RESEVOIR_IMAGE_RELATIVE_PATH =
+  './images/spacing/[email protected]'
+
+const SPACING_RESEVOIR_MULTI_ROW_IMAGE_RELATIVE_PATH =
+  './images/spacing/[email protected]'
+
+const OFFSET_WELL_CIRCULAR_IMAGE_RELATIVE_PATH =
+  './images/offset/[email protected]'
+
+const SPACING_WELL_CIRCULAR_IMAGE_RELATIVE_PATH =
+  './images/spacing/[email protected]'
+
+const OFFSET_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH =
+  './images/offset/[email protected]'
+
+const SPACING_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH =
+  './images/spacing/[email protected]'
+
+const DEPTH_LENGTH_TIP_RACK_IMAGE_RELATIVE_PATH =
+  './images/depth/[email protected]'
+
+const SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH =
+  './images/shape/[email protected]'
+
+const DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH =
+  './images/depth/[email protected]'
+
+const SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH =
+  './images/shape/[email protected]'
+
+const DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH =
+  './images/depth/[email protected]'
+
+const DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH =
+  './images/depth/[email protected]'
+
+const DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH =
+  './images/depth/[email protected]'
+
+const DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH =
+  './images/depth/[email protected]'
+
+const DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH =
+  './images/depth/[email protected]'
+
 const FOOTPRINT_DIAGRAMS: Diagrams = {
   wellPlate: [
-    new URL('./images/dimensions/[email protected]', import.meta.url).href,
-    new URL(
-      './images/dimensions/[email protected]',
-      import.meta.url
-    ).href,
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
   ],
   tipRack: [
-    new URL('./images/dimensions/[email protected]', import.meta.url).href,
-    new URL('./images/dimensions/[email protected]', import.meta.url).href,
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_TIP_RACK_IMAGE_RELATIVE_PATH, import.meta.url)
+      .href,
   ],
   tubeRack: [
-    new URL('./images/dimensions/[email protected]', import.meta.url).href,
-    new URL('./images/dimensions/[email protected]', import.meta.url)
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_RELATIVE_PATH, import.meta.url)
       .href,
   ],
   reservoir: [
-    new URL('./images/dimensions/[email protected]', import.meta.url).href,
-    new URL(
-      './images/dimensions/[email protected]',
-      import.meta.url
-    ).href,
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
   ],
   irregular: [
-    new URL('./images/dimensions/[email protected]', import.meta.url).href,
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
     new URL(
-      './images/dimensions/[email protected]',
+      DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_IRREGULAR_RELATIVE_PATH,
       import.meta.url
     ).href,
   ],
   adapter: [
-    new URL('./images/dimensions/[email protected]', import.meta.url).href,
-    new URL(
-      './images/dimensions/[email protected]',
-      import.meta.url
-    ).href,
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
   ],
 }
 
 const ALUM_BLOCK_FOOTPRINTS: Diagrams = {
   tubeRack: [
-    new URL('./images/dimensions/[email protected]', import.meta.url).href,
-    new URL(
-      './images/dimensions/[email protected]',
-      import.meta.url
-    ).href,
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(HEIGHT_ALUM_BLOCK_TUBES_IMAGE_RELATIVE_PATH, import.meta.url).href,
   ],
   wellPlate: [
-    new URL('./images/dimensions/[email protected]', import.meta.url).href,
-    new URL(
-      './images/dimensions/[email protected]',
-      import.meta.url
-    ).href,
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(HEIGHT_ALUM_BLOCK_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href,
   ],
 }
 
 const RESERVOIR_SPACING_DIAGRAMS: Diagrams = {
   singleRow: [
-    new URL('./images/offset/[email protected]', import.meta.url).href,
-    new URL('./images/spacing/[email protected]', import.meta.url).href,
+    new URL(OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
   ],
   multiRow: [
-    new URL('./images/offset/[email protected]', import.meta.url).href,
-    new URL(
-      './images/spacing/[email protected]',
-      import.meta.url
-    ).href,
+    new URL(OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_RESEVOIR_MULTI_ROW_IMAGE_RELATIVE_PATH, import.meta.url)
+      .href,
   ],
 }
 
 const SPACING_DIAGRAMS: Diagrams = {
   circular: [
-    new URL('./images/offset/[email protected]', import.meta.url)
-      .href,
-    new URL('./images/spacing/[email protected]', import.meta.url)
-      .href,
+    new URL(OFFSET_WELL_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_WELL_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
   ],
   rectangular: [
-    new URL('./images/offset/[email protected]', import.meta.url)
-      .href,
-    new URL('./images/spacing/[email protected]', import.meta.url)
-      .href,
+    new URL(OFFSET_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
   ],
 }
 
 const TIPRACK_MEASUREMENT_DIAGRAMS: string[] = [
-  new URL('./images/depth/[email protected]', import.meta.url).href,
-  new URL('./images/shape/[email protected]', import.meta.url).href,
+  new URL(DEPTH_LENGTH_TIP_RACK_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
 ]
 
 type NestedDiagrams = Record<string, Record<string, string[]>>
 
 const PLATE_MEASUREMENT_DIAGRAMS: NestedDiagrams = {
   flat: {
     circular: [
-      new URL('./images/depth/[email protected]', import.meta.url).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
     rectangular: [
-      new URL('./images/depth/[email protected]', import.meta.url).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
   },
   u: {
     circular: [
-      new URL('./images/depth/[email protected]', import.meta.url).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
     rectangular: [
-      new URL('./images/depth/[email protected]', import.meta.url).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
   },
   v: {
     circular: [
-      new URL('./images/depth/[email protected]', import.meta.url).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
     rectangular: [
-      new URL('./images/depth/[email protected]', import.meta.url).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
   },
 }
 const MEASUREMENT_DIAGRAMS: NestedDiagrams = {
   flat: {
     circular: [
       new URL(
-        './images/depth/[email protected]',
+        DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
     rectangular: [
       new URL(
-        './images/depth/[email protected]',
+        DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
   },
   u: {
     circular: [
       new URL(
-        './images/depth/[email protected]',
+        DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
     rectangular: [
       new URL(
-        './images/depth/[email protected]',
+        DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
   },
   v: {
     circular: [
       new URL(
-        './images/depth/[email protected]',
+        DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
     rectangular: [
       new URL(
-        './images/depth/[email protected]',
+        DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL('./images/shape/[email protected]', import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
     ],
   },
 }

diff --git a/components/vite.config.ts b/components/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,