feat(protocol-designer): deprecate Formik, migrate to React-Hook-Form

.eslintrc.js

@@ -55,15 +55,7 @@ module.exports = {
  overrides: [
  {
  files: ['**/*.js'],
- extends: ['plugin:@typescript-eslint/disable-type-checked'],
- parserOptions: {
- project: require('path').join(__dirname, 'tsconfig-eslint.json'),
- },
- rules: {
- '@typescript-eslint/no-var-requires': 'off',
- '@typescript-eslint/explicit-function-return-type': 'warn',
- '@typescript-eslint/no-unused-vars': 'warn',
- },
+ parser: '@babel/eslint-parser',
  },
  {
  // TODO(mc, 2021-03-18): remove to default these rules back to errors
@@ -78,17 +70,6 @@ module.exports = {
  '@typescript-eslint/no-floating-promises': 'warn',
  '@typescript-eslint/no-unnecessary-type-assertion': 'warn',
  '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn',
- '@typescript-eslint/no-unsafe-argument': 'warn',
- '@typescript-eslint/consistent-type-imports': 'warn',
- '@typescript-eslint/consistent-indexed-object-style': 'warn',
- '@typescript-eslint/no-confusing-void-expression': 'warn',
- '@typescript-eslint/ban-types': 'warn',
- '@typescript-eslint/non-nullable-type-assertion-style': 'warn',
- '@typescript-eslint/await-thenable': 'warn',
- '@typescript-eslint/ban-ts-comment': 'warn',
- '@typescript-eslint/unbound-method': 'warn',
- '@typescript-eslint/consistent-generic-constructors': 'warn',
- '@typescript-eslint/no-misused-promises': 'warn',
  },
  },
  {
@@ -112,14 +93,11 @@ module.exports = {
  '@typescript-eslint/consistent-type-assertions': 'off',
  '@typescript-eslint/no-var-requires': 'off',
  '@typescript-eslint/explicit-function-return-type': 'off',
- '@typescript-eslint/no-confusing-void-expression': 'warn',
  'node/handle-callback-err': 'off',
  // TODO(mc, 2021-01-29): fix these and remove warning overrides
  'jest/no-deprecated-functions': 'warn',
  'jest/valid-title': 'warn',
  'jest/no-conditional-expect': 'warn',
- 'jest/no-alias-methods': 'warn',
- 'jest/valid-describe-callback': 'warn',
  },
  },
  {

app-shell/src/protocol-storage/index.ts

@@ -20,15 +20,13 @@ export const getUnixTimeFromAnalysisPath = (analysisPath: string): number =>
 
 export const getParsedAnalysisFromPath = (
  analysisPath: string
-): ProtocolAnalysisOutput | undefined => {
+): ProtocolAnalysisOutput => {
  try {
  return fse.readJsonSync(analysisPath)
  } catch (error) {
- const errorMessage =
- error instanceof Error && error?.message != null
- ? error.message
- : 'protocol analysis file cannot be parsed'
- return createFailedAnalysis(errorMessage)
+ return createFailedAnalysis(
+ error?.message ?? 'protocol analysis file cannot be parsed'
+ )
  }
 }
 
@@ -137,7 +135,7 @@ export const fetchProtocols = (
  }, null)
  const mostRecentAnalysis =
  mostRecentAnalysisFilePath != null
- ? getParsedAnalysisFromPath(mostRecentAnalysisFilePath) ?? null
+ ? getParsedAnalysisFromPath(mostRecentAnalysisFilePath)
  : null
 
  return {

app-shell/src/usb.ts

@@ -129,9 +129,7 @@ async function usbListener(
  statusText: response.statusText,
  }
  } catch (e) {
- if (e instanceof Error) {
- console.log(`axios request error ${e?.message ?? 'unknown'}`)
- }
+ console.log(`axios request error ${e?.message ?? 'unknown'}`)
  }
 }
 

app/src/redux/robot-admin/epic/__tests__/syncSystemTimeEpic.test.ts

@@ -93,7 +93,6 @@ describe('syncSystemTimeEpic', () => {
  )
 
  expect(
- // @ts-expect-error
  Math.abs(differenceInSeconds(new Date(), parseISO(updatedTime)))
  ).toBe(0)
  })

app/src/redux/robot-update/types.ts

@@ -11,7 +11,6 @@ export interface RobotUpdateInfoPayload {
  version: string | null
  target: RobotUpdateTarget
  releaseNotes: string | null
- force?: boolean
 }
 
 export interface RobotUpdateInfo {

components/src/primitives/Btn.tsx

@@ -66,7 +66,7 @@ export const Btn: BtnComponent = styled.button
  *
  * @component
  */
-export const PrimaryBtn = styled(Btn)`
+export const PrimaryBtn: BtnComponent = styled(Btn)`
  ${BUTTON_VARIANT_STYLE}
  background-color: ${Styles.C_DARK_GRAY};
  color: ${Styles.C_WHITE};
@@ -96,7 +96,7 @@ export const PrimaryBtn = styled(Btn)`
  *
  * @component
  */
-export const SecondaryBtn = styled(Btn)`
+export const SecondaryBtn: BtnComponent = styled(Btn)`
  ${BUTTON_VARIANT_STYLE}
  background-color: ${Styles.C_WHITE};
  border-width: ${Styles.BORDER_WIDTH_DEFAULT};
@@ -125,7 +125,7 @@ export const SecondaryBtn = styled(Btn)`
  *
  * @component
  */
-export const NewPrimaryBtn = styled(PrimaryBtn)`
+export const NewPrimaryBtn: BtnComponent = styled(PrimaryBtn)`
  background-color: ${Styles.C_BLUE};
  color: ${Styles.C_WHITE};
 
@@ -155,7 +155,7 @@ export const NewPrimaryBtn = styled(PrimaryBtn)`
  *
  * @component
  */
-export const NewSecondaryBtn = styled(SecondaryBtn)`
+export const NewSecondaryBtn: BtnComponent = styled(SecondaryBtn)`
  background-color: ${Styles.C_WHITE};
  color: ${Styles.C_BLUE};
 
@@ -190,7 +190,7 @@ export const NewSecondaryBtn = styled(SecondaryBtn)`
  *
  * @component
  */
-export const NewAlertPrimaryBtn = styled(NewPrimaryBtn)`
+export const NewAlertPrimaryBtn: BtnComponent = styled(NewPrimaryBtn)`
  background-color: ${Styles.C_ERROR_DARK};
 
  &:hover,
@@ -210,7 +210,7 @@ export const NewAlertPrimaryBtn = styled(NewPrimaryBtn)`
  *
  * @component
  */
-export const NewAlertSecondaryBtn = styled(NewSecondaryBtn)`
+export const NewAlertSecondaryBtn: BtnComponent = styled(NewSecondaryBtn)`
  color: ${Styles.C_ERROR_DARK};
 
  &:hover,
@@ -230,7 +230,7 @@ export const NewAlertSecondaryBtn = styled(NewSecondaryBtn)`
  *
  * @component
  */
-export const LightSecondaryBtn = styled(SecondaryBtn)`
+export const LightSecondaryBtn: BtnComponent = styled(SecondaryBtn)`
  background-color: ${Styles.C_TRANSPARENT};
  color: ${Styles.C_WHITE};
 
@@ -257,6 +257,6 @@ export const LightSecondaryBtn = styled(SecondaryBtn)`
  *
  * @component
  */
-export const TertiaryBtn = styled(LightSecondaryBtn)`
+export const TertiaryBtn: BtnComponent = styled(LightSecondaryBtn)`
  border-width: 0;
 `

components/src/primitives/style-props.ts

@@ -3,7 +3,7 @@
 
 import pick from 'lodash/pick'
 
-import type * as Types from './types'
+import * as Types from './types'
 
 import type { CSSObject } from 'styled-components'
 
@@ -164,8 +164,8 @@ const layoutStyles = (props: Types.StyleProps): CSSObject => {
  const { size, ...styles } = pick(props, LAYOUT_PROPS) as CSSObject
 
  if (size != null) {
- styles.width = styles.width ?? ((size as unknown) as typeof styles.width)
- styles.height = styles.height ?? ((size as unknown) as typeof styles.height)
+ styles.width = styles.width ?? (size as typeof styles.width)
+ styles.height = styles.height ?? (size as typeof styles.height)
  }
 
  return styles

components/src/testing/utils/renderWithProviders.tsx

@@ -7,7 +7,7 @@ import { Provider } from 'react-redux'
 import { render, RenderResult } from '@testing-library/react'
 import { createStore } from 'redux'
 
-import type { PreloadedState, Store } from 'redux'
+import type { Store } from 'redux'
 import type { RenderOptions } from '@testing-library/react'
 
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
@@ -20,14 +20,11 @@ export function renderWithProviders<State>(
  options?: RenderWithProvidersOptions<State>
 ): [RenderResult, Store<State>] {
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
- const { initialState = {}, i18nInstance = null } = options || {}
+ const { initialState = {} as State, i18nInstance = null } = options || {}
 
- const store: Store<State> = createStore(
- jest.fn(),
- initialState as PreloadedState<State>
- )
+ const store: Store<State> = createStore(jest.fn(), initialState)
  store.dispatch = jest.fn()
- store.getState = jest.fn(() => initialState) as () => State
+ store.getState = jest.fn(() => initialState)
 
  const queryClient = new QueryClient()
 

labware-library/src/labware-creator/components/utils/wrapInFormik.tsx

@@ -10,5 +10,4 @@ import { Formik, FormikConfig } from 'formik'
 export const wrapInFormik = <Values,>(
  component: JSX.Element,
  formikConfig: FormikConfig<Values>
- // @ts-expect-error
 ): JSX.Element => <Formik {...formikConfig}>{() => component}</Formik>

labware-library/src/labware-creator/formLevelValidation.ts

@@ -93,11 +93,7 @@ const partialCast = <TKey extends keyof LabwareFields>(
  // ignore them. We can sniff if something is a Yup error by checking error.name.
  // See https://github.com/jquense/yup#validationerrorerrors-string--arraystring-value-any-path-string
  // and https://github.com/formium/formik/blob/2d613c11a67b1c1f5189e21b8d61a9dd8a2d0a2e/packages/formik/src/Formik.tsx
- if (
- error instanceof Error &&
- error.name !== 'ValidationError' &&
- error.name !== 'TypeError'
- ) {
+ if (error.name !== 'ValidationError' && error.name !== 'TypeError') {
  // TODO(IL, 2021-05-19): why are missing values for required fields giving TypeError instead of ValidationError?
  // Is this partial schema (from `pick`) not handing requireds correctly??
  throw error

labware-library/src/labware-creator/index.tsx

@@ -198,12 +198,10 @@ export const LabwareCreator = (): JSX.Element => {
  parsedLabwareDef = JSON.parse(result as string)
  } catch (error) {
  console.error(error)
- if (error instanceof Error) {
- setImportError({
- key: 'INVALID_JSON_FILE',
- messages: [error.message],
- })
- }
+ setImportError({
+ key: 'INVALID_JSON_FILE',
+ messages: [error.message],
+ })
  return
  }
 

package.json

@@ -28,9 +28,6 @@
  "engines": {
  "node": "^18.19.0"
  },
- "resolutions": {
- "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
- },
  "devDependencies": {
  "@babel/core": "^7.12.10",
  "@babel/eslint-parser": "^7.12.1",
@@ -70,8 +67,8 @@
  "@types/react-router-dom": "5.3.3",
  "@types/redux-mock-store": "^1.0.2",
  "@types/semver": "^7.3.6",
- "@typescript-eslint/eslint-plugin": "^6.20.0",
- "@typescript-eslint/parser": "^6.20.0",
+ "@typescript-eslint/eslint-plugin": "^4.18.0",
+ "@typescript-eslint/parser": "^4.18.0",
  "ajv": "6.12.3",
  "aws-sdk": "^2.493.0",
  "babel-jest": "^26.6.3",
@@ -91,18 +88,19 @@
  "download": "8.0.0",
  "electron": "27.0.0",
  "electron-builder": "24.0.0",
- "eslint": "^8.56.0",
+ "eslint": "^7.22.0",
  "eslint-config-prettier": "^8.1.0",
  "eslint-config-standard": "^16.0.2",
- "eslint-config-standard-with-typescript": "^43.0.1",
+ "eslint-config-standard-with-typescript": "^20.0.0",
  "eslint-plugin-cypress": "^2.11.2",
  "eslint-plugin-import": "^2.29.1",
  "eslint-plugin-jest": "^27.6.3",
  "eslint-plugin-json": "^3.1.0",
  "eslint-plugin-n": "^16.6.2",
+ "eslint-plugin-node": "^11.1.0",
  "eslint-plugin-promise": "^4.3.1",
  "eslint-plugin-react": "^7.22.0",
- "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-hooks": "^4.2.0",
  "eslint-plugin-standard": "^5.0.0",
  "eslint-plugin-testing-library": "^6.2.0",
  "express": "^4.16.4",
@@ -158,7 +156,7 @@
  "stylelint-config-styled-components": "0.1.1",
  "stylelint-processor-styled-components": "1.10.0",
  "terser-webpack-plugin": "^2.3.5",
- "typescript": "5.3.3",
+ "typescript": "4.1.3",
  "url-loader": "^2.1.0",
  "wait-on": "^4.0.2",
  "webpack": "^4.41.6",

protocol-designer/package.json

@@ -19,6 +19,7 @@
  "homepage": "https://github.com/Opentrons/opentrons",
  "license": "Apache-2.0",
  "dependencies": {
+ "@hookform/resolvers": "3.1.1",
  "@opentrons/components": "link:../components",
  "@opentrons/step-generation": "link:../step-generation",
  "@opentrons/shared-data": "link:../shared-data",
@@ -31,7 +32,6 @@
  "core-js": "3.2.1",
  "date-fns": "2.10.0",
  "file-saver": "2.0.1",
- "formik": "2.1.4",
  "i18next": "^19.8.3",
  "immer": "9.0.6",
  "lodash": "4.17.21",
@@ -41,6 +41,7 @@
  "react-dnd": "6.0.0",
  "react-dnd-mouse-backend": "0.1.2",
  "react-dom": "18.2.0",
+ "react-hook-form": "7.49.3",
  "react-i18next": "14.0.0",
  "react-redux": "8.1.2",
  "redux": "4.0.5",
@@ -49,6 +50,6 @@
  "reselect": "4.0.0",
  "ua-parser-js": "^0.7.23",
  "uuid": "3.3.2",
- "yup": "0.26.6"
+ "yup": "1.3.3"
  }
 }