feat(protocol-designer): stepForm skeleton (#16284)

closes AUTH-828

Author: jerader

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import get from 'lodash/get'
+import { useTranslation } from 'react-i18next'
+
+import {
+  ALIGN_CENTER,
+  Flex,
+  Icon,
+  PrimaryButton,
+  SPACING,
+  StyledText,
+  Toolbox,
+} from '@opentrons/components'
+import { stepIconsByType } from '../../../../form-types'
+import {
+  CommentTools,
+  HeaterShakerTools,
+  MagnetTools,
+  MixTools,
+  MoveLabwareTools,
+  MoveLiquidTools,
+  PauseTools,
+  TemperatureTools,
+  ThermocyclerTools,
+} from './StepTools'
+import type { StepFieldName } from '../../../../steplist/fieldLevel'
+import type { FormData, StepType } from '../../../../form-types'
+import type { FieldPropsByName, FocusHandlers, StepFormProps } from './types'
+
+type StepFormMap = {
+  [K in StepType]?: React.ComponentType<StepFormProps> | null
+}
+
+const STEP_FORM_MAP: StepFormMap = {
+  mix: MixTools,
+  pause: PauseTools,
+  moveLabware: MoveLabwareTools,
+  moveLiquid: MoveLiquidTools,
+  magnet: MagnetTools,
+  temperature: TemperatureTools,
+  thermocycler: ThermocyclerTools,
+  heaterShaker: HeaterShakerTools,
+  comment: CommentTools,
+}
+
+interface StepFormToolboxProps {
+  canSave: boolean
+  dirtyFields: string[]
+  focusHandlers: FocusHandlers
+  focusedField: StepFieldName | null
+  formData: FormData
+  propsForFields: FieldPropsByName
+  handleClose: () => void
+  // TODO: add abiltiy to delete step?
+  handleDelete: () => void
+  handleSave: () => void
+}
+
+export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
+  const {
+    formData,
+    focusHandlers,
+    canSave,
+    handleClose,
+    handleSave,
+    propsForFields,
+  } = props
+  const { t, i18n } = useTranslation(['application', 'shared'])
+  const icon = stepIconsByType[formData.stepType]
+
+  const Tools: typeof STEP_FORM_MAP[keyof typeof STEP_FORM_MAP] = get(
+    STEP_FORM_MAP,
+    formData.stepType
+  )
+
+  if (!Tools) {
+    // early-exit if step form doesn't exist, this is a good check for when new steps
+    // are added
+    return (
+      <div>
+        <div>Todo: support {formData && formData.stepType} step</div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {/* TODO: update alerts */}
+      {/* <Alerts
+        focusedField={focusedField}
+        dirtyFields={dirtyFields}
+        componentType="Form"
+      /> */}
+
+      <Toolbox
+        onCloseClick={handleClose}
+        closeButtonText={t('shared:cancel')}
+        confirmButton={
+          <PrimaryButton onClick={handleSave} disabled={!canSave} width="100%">
+            {t('shared:save')}
+          </PrimaryButton>
+        }
+        height="calc(100vh - 64px)"
+        title={
+          <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
+            <Icon size="1rem" name={icon} />
+            <StyledText desktopStyle="bodyLargeSemiBold">
+              {i18n.format(t(`stepType.${formData.stepType}`), 'capitalize')}
+            </StyledText>
+          </Flex>
+        }
+      >
+        <Tools {...{ formData, propsForFields, focusHandlers }} />
+      </Toolbox>
+    </>
+  )
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/CommentTools/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function CommentTools(): JSX.Element {
+  return <div>TODO: wire this up</div>
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function HeaterShakerTools(): JSX.Element {
+  return <div>TODO: wire this up</div>
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function MagnetTools(): JSX.Element {
+  return <div>TODO: wire this up</div>
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MixTools/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function MixTools(): JSX.Element {
+  return <div>TODO: wire this up</div>
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function MoveLabwareTools(): JSX.Element {
+  return <div>TODO: wire this up</div>
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function MoveLiquidTools(): JSX.Element {
+  return <div>TODO: wire this up</div>
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PauseTools/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function PauseTools(): JSX.Element {
+  return <div>TODO: wire this up</div>
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/TemperatureTools/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function TemperatureTools(): JSX.Element {
+  return <div>TODO: wire this up</div>
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function ThermocyclerTools(): JSX.Element {
+  return <div>TODO: wire this up</div>
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/index.ts

@@ -0,0 +1,9 @@
+export { CommentTools } from './CommentTools'
+export { HeaterShakerTools } from './HeaterShakerTools'
+export { MagnetTools } from './MagnetTools'
+export { MixTools } from './MixTools'
+export { MoveLabwareTools } from './MoveLabwareTools'
+export { MoveLiquidTools } from './MoveLiquidTools'
+export { PauseTools } from './PauseTools'
+export { TemperatureTools } from './TemperatureTools'
+export { ThermocyclerTools } from './ThermocyclerTools'