build(components, shared-data): fix components and shared-data npm deploy actions

.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

.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:

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
 #####################################################################
 

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"

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(

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,
     ],
   },
 }

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,

shared-data/Makefile

@@ -30,7 +30,9 @@ lib-js: export NODE_ENV := production
 lib-js:
 	NODE_OPTIONS=--openssl-legacy-provider yarn vite build
 
-
+.PHONY: build-ts
+build-ts:
+	yarn tsc --build --emitDeclarationOnly
 
 # Python targets
 

shared-data/package.json

@@ -10,7 +10,7 @@
   "license": "Apache-2.0",
   "source": "js/index.ts",
   "types": "lib/js/index.d.ts",
-  "main": "lib/opentrons-shared-data.js",
+  "main": "lib/index.mjs",
   "module": "js/index.ts",
   "dependencies": {
     "ajv": "^6.12.3",