wip

app/src/molecules/ReleaseNotes/styles.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .release_notes {
   width: 100%;

app/src/molecules/modals/styles.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .modal {
   @apply --modal;

app/src/organisms/CalibrateTipLength/styles.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .alert_modal_padding {
   padding: 4rem 1rem;

app/src/organisms/ConfigurePipette/styles.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .warning_title {
   @apply --font-body-2-dark;

components/src/forms/SelectField.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .select_field.error {
   & :global(.ot_select__control) {

components/src/hardware-sim/Deck/DeckFromLayers.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
 import parseHtml from 'html-react-parser'
 import { stringify } from 'svgson'
-
-import ot2DeckDefV3 from '@opentrons/shared-data/deck/definitions/3/ot2_standard.json'
-import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
+import { ot2StandardDeckV3, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import type { INode } from 'svgson'
 import type { RobotType } from '@opentrons/shared-data'
@@ -42,7 +40,7 @@ export function DeckFromLayers(props: DeckFromLayersProps): JSX.Element | null {
 
   // get layers from OT-2 deck definition v3
   const layerGroupNodes = filterLayerGroupNodes(
-    ot2DeckDefV3.layers,
+    ot2StandardDeckV3.layers,
     layerBlocklist
   )
 

components/src/hardware-sim/Deck/FlexTrash.tsx

@@ -3,16 +3,14 @@ import * as React from 'react'
 import {
   FLEX_ROBOT_TYPE,
   getDeckDefFromRobotType,
+  opentrons1Trash3200mlFixedV1 as trashDef,
 } from '@opentrons/shared-data'
-
 import { Icon } from '../../icons'
 import { Flex, Text } from '../../primitives'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
-import trashDef from '@opentrons/shared-data/labware/definitions/2/opentrons_1_trash_3200ml_fixed/1.json'
-
 import type { RobotType } from '@opentrons/shared-data'
 
 // only allow edge cutout locations (columns 1 and 3)

components/src/hardware-sim/Labware/labwareInternals/WellLabels.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .label_text {
   color: var(--c-font-dark);

components/src/instrument/InstrumentDiagram.tsx

@@ -2,13 +2,13 @@ import * as React from 'react'
 import { FlattenSimpleInterpolation } from 'styled-components'
 import { Flex } from '../primitives'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../styles'
-import singleSrc from '@opentrons/components/src/instrument/single_channel_GEN1_800px.png'
-import multiSrc from '@opentrons/components/src/instrument/multi-channel_GEN1_800px.png'
-import singleGEN2Src from '@opentrons/components/src/instrument/single-channel_GEN2_800px.png'
-import multiGEN2Src from '@opentrons/components/src/instrument/multi-channel_GEN2_800px.png'
-import singleFlexSrc from '@opentrons/components/src/instrument/single-channel-flex.png'
-import eightChannelFlexSrc from '@opentrons/components/src/instrument/eight-channel-flex.png'
-import ninetySixSrc from '@opentrons/components/src/instrument/ninety-six-channel-gen1.png'
+import singleSrc from './single_channel_GEN1_800px.png'
+import multiSrc from './multi-channel_GEN1_800px.png'
+import singleGEN2Src from './single-channel_GEN2_800px.png'
+import multiGEN2Src from './multi-channel_GEN2_800px.png'
+import singleFlexSrc from './single-channel-flex.png'
+import eightChannelFlexSrc from './eight-channel-flex.png'
+import ninetySixSrc from './ninety-six-channel-gen1.png'
 
 import type { PipetteNameSpecs } from '@opentrons/shared-data'
 import type { Mount } from '../robot-types'

components/src/instrument/instrument.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .pipette_group {
   margin: 0 auto;

components/src/legacy-hardware-sim/ModuleItem.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .module {
   color: var(--c-black);

components/src/legacy-hardware-sim/Well.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 /* Well fill contents, the "bottom layer" */
 

components/src/structure/Splash.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .splash {
   position: relative;

labware-library/src/components/App/styles.css

@@ -1,5 +1,5 @@
 /* app styles */
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../../styles/breakpoints.css';
 @import '../../styles/spacing.css';
 

labware-library/src/components/LabwareDetails/styles.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../../styles/breakpoints.css';
 @import '../../styles/spacing.css';
 

labware-library/src/components/LabwareList/styles.css

@@ -1,5 +1,5 @@
 /* LabwareList styles */
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../../styles/breakpoints.css';
 @import '../../styles/shadows.css';
 @import '../../styles/spacing.css';

labware-library/src/components/Nav/styles.css

@@ -1,5 +1,5 @@
 /* top navbar styles */
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../../styles/breakpoints.css';
 @import '../../styles/shadows.css';
 @import '../../styles/spacing.css';

labware-library/src/components/Sidebar/styles.css

@@ -1,5 +1,5 @@
 /* scoped styles for Sidebar */
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../../styles/breakpoints.css';
 @import '../../styles/spacing.css';
 

labware-library/src/components/labware-ui/styles.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../../styles/spacing.css';
 
 .gallery_main {

labware-library/src/components/ui/styles.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../../styles/breakpoints.css';
 @import '../../styles/spacing.css';
 

labware-library/src/components/website-navigation/styles.css

@@ -1,5 +1,5 @@
 /* branded website navbar styles */
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../../styles/breakpoints.css';
 @import '../../styles/shadows.css';
 @import '../../styles/spacing.css';

labware-library/src/labware-creator/components/ConditionalLabwareRender.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .error_text_wrapper {
   display: flex;

labware-library/src/labware-creator/components/Dropdown.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .option_row {
   display: flex;

labware-library/src/labware-creator/components/LabwareCreator.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../../styles/breakpoints.css';
 @import '../../styles/spacing.css';
 

labware-library/src/labware-creator/components/fieldStyles.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .disabled {
   color: var(--c-font-disabled);

labware-library/src/labware-creator/components/importLabware.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .upload_group {
   width: 75%;

labware-library/src/labware-creator/components/optionsWithImages/optionsWithImages.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .radio_image_label {
   text-anchor: middle;

labware-library/src/labware-creator/components/sections/SectionBody.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 
 .section_wrapper {
   margin: 1rem 0;

labware-library/src/labware-creator/styles.css

@@ -1,4 +1,4 @@
-@import '@opentrons/components';
+@import '@opentrons/components/styles';
 @import '../styles/breakpoints.css';
 @import '../styles/spacing.css';
 

package.json

@@ -27,7 +27,7 @@
   },
   "packageManager": "[email protected]",
   "engines": {
-    "node": "^16.9.0"
+    "node": "^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -127,12 +127,6 @@
     "ntee": "^2.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "portfinder": "^1.0.13",
-    "postcss": "^7.0.18",
-    "postcss-apply": "^0.12.0",
-    "postcss-color-mod-function": "^3.0.3",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
     "prettier": "2.2.1",
     "react": "17.0.1",
     "react-docgen-typescript": "^1.21.0",

protocol-designer/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name='viewport' content='width=device-width,initial-scale=1'>
+
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/index.tsx"></script>
+  </body>
+</html>

protocol-designer/package.json

@@ -8,6 +8,7 @@
     "email": "[email protected]"
   },
   "name": "protocol-designer",
+  "type": "module",
   "productName": "Opentrons Protocol Designer BETA",
   "private": true,
   "version": "0.0.0-dev",
@@ -20,12 +21,15 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@hot-loader/react-dom": "17.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "@opentrons/components": "link:../components",
     "@opentrons/step-generation": "link:../step-generation",
     "@opentrons/shared-data": "link:../shared-data",
     "@types/redux-actions": "2.6.1",
     "@types/ua-parser-js": "0.7.36",
     "@types/uuid": "8.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "ajv": "6.12.3",
     "classnames": "2.2.5",
     "cookie": "0.3.1",
@@ -50,6 +54,9 @@
     "reselect": "4.0.0",
     "ua-parser-js": "^0.7.23",
     "uuid": "3.3.2",
-    "yup": "0.26.6"
+    "vite": "5.0.5",
+    "yup": "0.26.6",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4"
   }
 }

protocol-designer/protocol-designer-vite-test/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

protocol-designer/protocol-designer-vite-test/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

protocol-designer/protocol-designer-vite-test/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

protocol-designer/protocol-designer-vite-test/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>