refactor(shared-data): port shared-data JS source to TypeScript (#7731)

.eslintignore

@@ -10,7 +10,9 @@ shared-data/python/**
 
 # flow
 flow-typed/npm/**
+discovery-client/flow-types/**
 components/flow-types/**
+shared-data/flow-types/**
 
 # typescript
 app-shell/lib/**

.eslintrc.js

@@ -66,6 +66,7 @@ module.exports = {
         '@typescript-eslint/prefer-nullish-coalescing': 'warn',
         '@typescript-eslint/prefer-optional-chain': 'warn',
         '@typescript-eslint/restrict-plus-operands': 'warn',
+        '@typescript-eslint/restrict-template-expressions': 'warn',
       },
     },
     {
@@ -87,6 +88,7 @@ module.exports = {
         'jest/no-disabled-tests': 'error',
         'jest/consistent-test-it': 'error',
         '@typescript-eslint/consistent-type-assertions': 'off',
+        '@typescript-eslint/no-var-requires': 'off',
 
         // TODO(mc, 2021-01-29): fix these and remove warning overrides
         'jest/no-deprecated-functions': 'warn',

.flowconfig

@@ -15,6 +15,7 @@
 ; read type signatures from node_modules but ignore flow errors within
 .*/node_modules/.*
 <PROJECT_ROOT>/components/flow-types/.*
+<PROJECT_ROOT>/shared-data/flow-types/.*
 
 [include]
 

app-shell/src/labware/__tests__/validation.test.ts

@@ -1,10 +1,15 @@
 import { validateLabwareFiles, validateNewLabwareFile } from '../validation'
 
-import validLabwareA from '@opentrons/shared-data/labware/fixtures/2/fixture_96_plate.json'
-import validLabwareB from '@opentrons/shared-data/labware/fixtures/2/fixture_12_trough.json'
+import uncheckedLabwareA from '@opentrons/shared-data/labware/fixtures/2/fixture_96_plate.json'
+import uncheckedLabwareB from '@opentrons/shared-data/labware/fixtures/2/fixture_12_trough.json'
 
 import type { CheckedLabwareFile } from '@opentrons/app/src/redux/custom-labware/types'
 
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const validLabwareA = uncheckedLabwareA as LabwareDefinition2
+const validLabwareB = uncheckedLabwareB as LabwareDefinition2
+
 describe('validateLabwareFiles', () => {
   it('handles unparseable and invalid labware files', () => {
     const files = [
@@ -28,8 +33,8 @@ describe('validateLabwareFiles', () => {
 
   it('handles valid labware files', () => {
     const files = [
-      { filename: 'a.json', data: validLabwareA, modified: Date.now() },
-      { filename: 'b.json', data: validLabwareB, modified: Date.now() },
+      { filename: 'a.json', data: uncheckedLabwareA, modified: Date.now() },
+      { filename: 'b.json', data: uncheckedLabwareB, modified: Date.now() },
     ]
 
     expect(validateLabwareFiles(files)).toEqual([
@@ -50,9 +55,9 @@ describe('validateLabwareFiles', () => {
 
   it('handles non-unique labware files', () => {
     const files = [
-      { filename: 'a.json', data: validLabwareA, modified: 3 },
-      { filename: 'b.json', data: validLabwareB, modified: 2 },
-      { filename: 'c.json', data: validLabwareA, modified: 1 },
+      { filename: 'a.json', data: uncheckedLabwareA, modified: 3 },
+      { filename: 'b.json', data: uncheckedLabwareB, modified: 2 },
+      { filename: 'c.json', data: uncheckedLabwareA, modified: 1 },
     ]
 
     expect(validateLabwareFiles(files)).toEqual([
@@ -100,7 +105,7 @@ describe('validateNewLabwareFile', () => {
     const existing: CheckedLabwareFile[] = []
     const newFile = {
       filename: 'a.json',
-      data: validLabwareA,
+      data: uncheckedLabwareA,
       modified: 42,
     }
 
@@ -123,7 +128,7 @@ describe('validateNewLabwareFile', () => {
     ]
     const newFile = {
       filename: 'a.json',
-      data: validLabwareA,
+      data: uncheckedLabwareA,
       modified: 21,
     }
 

app-shell/tsconfig.json

@@ -3,6 +3,9 @@
   "references": [
     {
       "path": "../discovery-client"
+    },
+    {
+      "path": "../shared-data"
     }
   ],
   "compilerOptions": {

app/src/redux/protocol/types.js

@@ -1,9 +1,6 @@
 // @flow
 // protocol type defs
-import type {
-  JsonProtocolFile,
-  ProtocolFileV1,
-} from '@opentrons/shared-data/protocol'
+import type { JsonProtocolFile, ProtocolFileV1 } from '@opentrons/shared-data'
 
 import typeof { TYPE_JSON, TYPE_PYTHON, TYPE_ZIP } from './constants'
 

babel.config.js

@@ -30,6 +30,7 @@ module.exports = {
         alias: {
           '^@opentrons/discovery-client$': `@opentrons/discovery-client/src/index.ts`,
           '^@opentrons/components$': `@opentrons/components/src/index.ts`,
+          '^@opentrons/shared-data$': `@opentrons/shared-data/js/index.ts`,
         },
       },
     ],

components/flow-types/deck/Module.js.flow

@@ -23,8 +23,8 @@ export type ModuleProps = {|
   slot: DeckSlot,
 
   /**
-    * USB port details of this module
-  */
+   * USB port detail of the connected module
+   */
   usbInfoString?: string,
 |};
 declare export function Module(props: ModuleProps): React$Node;

components/flow-types/instrument/InstrumentDiagram.js.flow

@@ -5,13 +5,10 @@
  * @flow
  */
 
-import type {
-  PipetteNameSpecs,
-  PipetteModelSpecs,
-} from "@opentrons/shared-data";
+import type { PipetteNameSpecs } from "@opentrons/shared-data";
 import type { Mount } from "../robot-types";
 export type InstrumentDiagramProps = {|
-  pipetteSpecs?: PipetteNameSpecs | PipetteModelSpecs | null,
+  pipetteSpecs?: Pick<PipetteNameSpecs, "displayCategory" | "channels"> | null,
   className?: string,
   mount: Mount,
 |};

components/flow-types/instrument/InstrumentInfo.js.flow

@@ -6,11 +6,8 @@
  */
 
 import * as React from "react";
-import type {
-  PipetteNameSpecs,
-  PipetteModelSpecs,
-} from "@opentrons/shared-data";
 import type { Mount } from "../robot-types";
+import type { InstrumentDiagramProps } from "./InstrumentDiagram";
 export type InstrumentInfoProps = {|
   /**
    * 'left' or 'right'
@@ -40,7 +37,10 @@ export type InstrumentInfoProps = {|
   /**
    * specs of mounted pipette
    */
-  pipetteSpecs?: PipetteModelSpecs | PipetteNameSpecs | null | void,
+  pipetteSpecs?: $PropertyType<
+    InstrumentDiagramProps,
+    "pipetteSpecs"
+  > | null | void,
 
   /**
    * classes to apply

components/flow-types/lists/CollapsibleItem.js.flow

@@ -8,8 +8,8 @@
 import * as React from "react";
 export type CollapsibleItemProps = {|
   /**
-    * header
-  */
+   * header
+   */
   header?: string,
 
   /**

components/flow-types/lists/ListItem.js.flow

@@ -77,19 +77,19 @@ declare type ListItemProps = {|
 declare export var ListItem: React.ForwardRefExoticComponent<
   Pick<
     ListItemProps,
+    | "exact"
     | "children"
     | "url"
-    | "activeClassName"
-    | "exact"
     | "className"
     | "aria-describedby"
     | "onClick"
     | "onMouseEnter"
     | "onMouseLeave"
     | "onPointerEnter"
     | "onPointerLeave"
-    | "isDisabled"
     | "iconName"
+    | "isDisabled"
+    | "activeClassName"
   > &
     React.RefAttributes<HTMLLIElement>
 >;

components/flow-types/robot-types.js.flow

@@ -5,5 +5,7 @@
  * @flow
  */
 
-export type Channels = 1 | 8;
-export type Mount = "left" | "right";
+declare export {
+  PipetteChannels as Channels,
+  PipetteMount as Mount,
+} from "@opentrons/shared-data";

components/src/deck/labwareInternals/StaticLabware.tsx

@@ -22,7 +22,9 @@ const TipDecoration = React.memo(function TipDecoration(props: {
   well: LabwareWell
 }) {
   const { well } = props
+  // @ts-expect-error(mc, 2021-04-27): refine well type before accessing `diameter`
   if (well.diameter) {
+    // @ts-expect-error(mc, 2021-04-27): refine well type before accessing `diameter`
     const radius = well.diameter / 2
     return (
       <circle className={styles.tip} cx={well.x} cy={well.y} r={radius - 1} />

components/src/instrument/InstrumentDiagram.tsx

@@ -1,19 +1,17 @@
 import * as React from 'react'
 import cx from 'classnames'
-import type {
-  PipetteNameSpecs,
-  PipetteModelSpecs,
-} from '@opentrons/shared-data'
 
-import type { Mount } from '../robot-types'
 import singleSrc from './pipetteSingle.png'
 import multiSrc from './pipetteMulti.png'
 import singleGEN2Src from './pipetteGEN2Single.png'
 import multiGEN2Src from './pipetteGEN2Multi.png'
 import styles from './instrument.css'
 
+import type { PipetteNameSpecs } from '@opentrons/shared-data'
+import type { Mount } from '../robot-types'
+
 export interface InstrumentDiagramProps {
-  pipetteSpecs?: PipetteNameSpecs | PipetteModelSpecs | null
+  pipetteSpecs?: Pick<PipetteNameSpecs, 'displayCategory' | 'channels'> | null
   className?: string
   mount: Mount
 }

components/src/instrument/InstrumentInfo.tsx

@@ -1,29 +1,26 @@
 import * as React from 'react'
 import cx from 'classnames'
-import type {
-  PipetteNameSpecs,
-  PipetteModelSpecs,
-} from '@opentrons/shared-data'
 
-import type { Mount } from '../robot-types'
 import { InfoItem } from './InfoItem'
 import { InstrumentDiagram } from './InstrumentDiagram'
-
 import styles from './instrument.css'
 
+import type { Mount } from '../robot-types'
+import type { InstrumentDiagramProps } from './InstrumentDiagram'
+
 export interface InstrumentInfoProps {
   /** 'left' or 'right' */
   mount: Mount
   /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
-  showMountLabel?: boolean | null | undefined
+  showMountLabel?: boolean | null
   /** human-readable description, eg 'p300 Single-channel' */
   description: string
   /** paired tiprack model */
   tiprackModel?: string
   /** if disabled, pipette & its info are grayed out */
   isDisabled: boolean
   /** specs of mounted pipette */
-  pipetteSpecs?: PipetteModelSpecs | PipetteNameSpecs | null | undefined
+  pipetteSpecs?: InstrumentDiagramProps['pipetteSpecs'] | null
   /** classes to apply */
   className?: string
   /** classes to apply to the info group child */

components/src/instrument/PipetteSelect.tsx

@@ -34,7 +34,9 @@ export interface PipetteSelectProps {
 const NONE = 'None'
 const OPTION_NONE = { value: '', label: NONE }
 
-const PIPETTE_SORT = ['maxVolume', 'channels']
+const PIPETTE_SORT = ['maxVolume', 'channels'] as const
+
+// @ts-expect-error(mc, 2021-04-27): use TS type guard for filter
 const allPipetteNameSpecs: PipetteNameSpecs[] = getAllPipetteNames(
   ...PIPETTE_SORT
 )

components/src/instrument/__tests__/PipetteSelect.test.tsx

@@ -46,7 +46,7 @@ describe('PipetteSelect', () => {
       'channels'
     )
       .map(getPipetteNameSpecs)
-      .filter(Boolean)
+      .filter((specs): specs is PipetteNameSpecs => specs !== null)
 
     const gen2Specs = pipetteSpecs.filter(s => s.displayCategory === GEN2)
     const gen1Specs = pipetteSpecs.filter(s => s.displayCategory === GEN1)
@@ -67,7 +67,7 @@ describe('PipetteSelect', () => {
       'channels'
     )
       .map(getPipetteNameSpecs)
-      .filter(Boolean)
+      .filter((specs): specs is PipetteNameSpecs => specs !== null)
 
     const gen2Specs = pipetteSpecs.filter(s => s.displayCategory === GEN2)
     const nameBlocklist = pipetteSpecs

components/src/robot-types.ts

@@ -1,3 +1,4 @@
-export type Channels = 1 | 8
-
-export type Mount = 'left' | 'right'
+export type {
+  PipetteChannels as Channels,
+  PipetteMount as Mount,
+} from '@opentrons/shared-data'

components/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "extends": "../tsconfig-base.json",
-  "references": [],
+  "references": [
+    {
+      "path": "../shared-data"
+    }
+  ],
   "compilerOptions": {
     "composite": true,
     "rootDir": "src",