feat(builder/1): add initial field preview (only SectionField) when editing field in form builder

frontend/package.json

@@ -15,6 +15,7 @@
     "dayjs": "^1.10.7",
     "focus-visible": "^5.2.0",
     "framer-motion": "^5.4.5",
+    "immer": "^9.0.6",
     "jszip": "^3.7.1",
     "libphonenumber-js": "^1.9.44",
     "lodash": "^4.17.21",
@@ -28,14 +29,17 @@
     "react-router-dom": "^6.0.2",
     "react-table": "^7.7.0",
     "react-textarea-autosize": "^8.3.3",
+    "react-use": "^17.3.1",
     "react-waypoint": "^10.1.0",
     "remark-gfm": "^3.0.1",
     "simplur": "^3.0.1",
     "type-fest": "^2.8.0",
     "typescript": "^4.5.3",
+    "use-debounce": "^7.0.1",
     "use-draggable-scroll": "^0.1.0",
     "validator": "^13.7.0",
-    "web-vitals": "^2.1.2"
+    "web-vitals": "^2.1.2",
+    "zustand": "^3.6.5"
   },
   "scriptComments": {
     "build": [

frontend/src/features/admin-form-builder/BuilderContent.tsx

@@ -43,7 +43,7 @@ export const BuilderFields = () => {
   return (
     <>
       {data.form_fields.map((f) => (
-        <FieldRowContainer isActive={false} field={f} />
+        <FieldRowContainer key={f._id} field={f} />
       ))}
     </>
   )

frontend/src/features/admin-form-builder/BuilderDrawer.tsx

@@ -3,6 +3,7 @@ import { AnimatePresence } from 'framer-motion'
 
 import { MotionBox } from '~components/motion'
 
+import { EditFieldDrawer } from './EditFieldDrawer/EditFieldDrawer'
 import { useBuilderDrawer } from './BuilderDrawerContext'
 
 const DRAWER_MOTION_PROPS = {
@@ -39,7 +40,7 @@ export const BuilderDrawer = (): JSX.Element => {
           {...DRAWER_MOTION_PROPS}
         >
           <Box w="100%" h="100%" minW="max-content">
-            Drawer stuff
+            <EditFieldDrawer />
           </Box>
         </MotionBox>
       )}

frontend/src/features/admin-form-builder/BuilderDrawerContext.tsx

@@ -3,10 +3,17 @@ import {
   FC,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react'
 
+import {
+  activeFieldSelector,
+  clearActiveFieldSelector,
+  useEditFieldStore,
+} from './editFieldStore'
+
 export enum DrawerTabs {
   Builder,
   Design,
@@ -55,13 +62,29 @@ export const useBuilderDrawer = (): BuilderDrawerContextProps => {
 
 const useProvideDrawerContext = (): BuilderDrawerContextProps => {
   const [activeTab, setActiveTab] = useState<DrawerTabs | null>(null)
+  const activeField = useEditFieldStore(activeFieldSelector)
+  const hasActiveField = useEditFieldStore(
+    useCallback((state) => !!state.activeField, []),
+  )
+  const clearActiveField = useEditFieldStore(clearActiveFieldSelector)
+
+  useEffect(() => {
+    if (activeField) {
+      setActiveTab(DrawerTabs.Builder)
+    }
+  }, [activeField])
 
   const isShowDrawer = useMemo(
     () => activeTab !== null && activeTab !== DrawerTabs.Logic,
     [activeTab],
   )
 
-  const handleClose = useCallback(() => setActiveTab(null), [])
+  const handleClose = useCallback(() => {
+    if (hasActiveField) {
+      clearActiveField()
+    }
+    setActiveTab(null)
+  }, [clearActiveField, hasActiveField])
 
   const handleBuilderClick = () => setActiveTab(DrawerTabs.Builder)
   const handleDesignClick = () => setActiveTab(DrawerTabs.Design)

frontend/src/features/admin-form-builder/EditFieldDrawer/EditFieldDrawer.tsx

@@ -0,0 +1,67 @@
+import { memo, useMemo } from 'react'
+import { BiLeftArrowAlt } from 'react-icons/bi'
+import { Box, Flex } from '@chakra-ui/react'
+
+import { BasicField, FormFieldDto } from '~shared/types/field'
+
+import IconButton from '~components/IconButton'
+
+import {
+  activeFieldSelector,
+  clearActiveFieldSelector,
+  useEditFieldStore,
+} from '../editFieldStore'
+import { BuilderDrawerCloseButton } from '../FieldRow/BuilderDrawerCloseButton'
+import { transformBasicFieldToText } from '../utils'
+
+import { EditHeader } from './EditHeader'
+
+export const EditFieldDrawer = (): JSX.Element | null => {
+  const clearActiveField = useEditFieldStore(clearActiveFieldSelector)
+  const activeField = useEditFieldStore(activeFieldSelector)
+
+  const basicFieldText = useMemo(
+    () => transformBasicFieldToText(activeField?.fieldType),
+    [activeField?.fieldType],
+  )
+
+  if (!activeField) return null
+
+  return (
+    <Box>
+      <Flex
+        pos="sticky"
+        top={0}
+        px="1.5rem"
+        py="1rem"
+        align="center"
+        borderBottom="1px solid var(--chakra-colors-neutral-300)"
+        bg="white"
+      >
+        <IconButton
+          minH="1.5rem"
+          minW="1.5rem"
+          aria-label="Back to field selection"
+          variant="clear"
+          colorScheme="secondary"
+          onClick={clearActiveField}
+          icon={<BiLeftArrowAlt />}
+        />
+        <Box m="auto">Edit {basicFieldText} field</Box>
+        <BuilderDrawerCloseButton />
+      </Flex>
+      <Flex flexDir="column" py="2rem" px="1.5rem">
+        <MemoFieldDrawerContent field={activeField} />
+      </Flex>
+    </Box>
+  )
+}
+
+const MemoFieldDrawerContent = memo(({ field }: { field: FormFieldDto }) => {
+  switch (field.fieldType) {
+    case BasicField.Section:
+      return <EditHeader field={field} />
+    default:
+      return <div>TODO: Insert field options here</div>
+  }
+})

frontend/src/features/admin-form-builder/EditFieldDrawer/EditHeader.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from 'react'
+import { useForm } from 'react-hook-form'
+import { useDebounce } from 'react-use'
+import { Divider, FormControl, Stack } from '@chakra-ui/react'
+import { extend } from 'lodash'
+
+import { createBaseValidationRules } from '~utils/fieldValidation'
+import FormErrorMessage from '~components/FormControl/FormErrorMessage'
+import FormLabel from '~components/FormControl/FormLabel'
+import Input from '~components/Input'
+import Textarea from '~components/Textarea'
+import { SectionFieldSchema } from '~templates/Field/Section/SectionFieldContainer'
+
+import { useEditFieldStore } from '../editFieldStore'
+import { useMutateFormFields } from '../mutations'
+
+import { FormFieldDrawerActions } from './FormFieldDrawerActions'
+
+export interface EditHeaderProps {
+  field: SectionFieldSchema
+}
+
+interface EditHeaderInputs {
+  title: string
+  description: string
+}
+
+export const EditHeader = ({ field }: EditHeaderProps): JSX.Element => {
+  const { updateActiveField, clearActiveField } = useEditFieldStore()
+
+  const {
+    handleSubmit,
+    reset,
+    watch,
+    register,
+    formState: { errors, isDirty },
+  } = useForm<EditHeaderInputs>({
+    defaultValues: {
+      title: field.title,
+      description: field.description,
+    },
+  })
+
+  const watchedInputs = watch()
+
+  useDebounce(() => updateActiveField(watchedInputs), 300, [
+    watchedInputs.description,
+    watchedInputs.title,
+  ])
+
+  const { mutateFormField } = useMutateFormFields()
+
+  const handleUpdateField = handleSubmit((inputs) => {
+    const updatedFormField: SectionFieldSchema = extend({}, field, inputs)
+    return mutateFormField.mutate(updatedFormField, {
+      onSuccess: () => reset(inputs),
+    })
+  })
+
+  const requiredValidationRule = useMemo(
+    () => createBaseValidationRules({ required: true }),
+    [],
+  )
+
+  return (
+    <Stack spacing="2rem" divider={<Divider />}>
+      <FormControl
+        isRequired
+        isReadOnly={mutateFormField.isLoading}
+        isInvalid={!!errors.title}
+      >
+        <FormLabel>Section header title</FormLabel>
+        <Input autoFocus {...register('title', requiredValidationRule)} />
+        <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
+      </FormControl>
+      <FormControl
+        isRequired
+        isReadOnly={mutateFormField.isLoading}
+        isInvalid={!!errors.description}
+      >
+        <FormLabel>Description</FormLabel>
+        <Textarea {...register('description')} />
+        <FormErrorMessage>{errors?.description?.message}</FormErrorMessage>
+      </FormControl>
+      <FormFieldDrawerActions
+        isLoading={mutateFormField.isLoading}
+        isDirty={isDirty}
+        handleClick={handleUpdateField}
+        handleCancel={clearActiveField}
+      />
+    </Stack>
+  )
+}

frontend/src/features/admin-form-builder/EditFieldDrawer/FormFieldDrawerActions.tsx

@@ -0,0 +1,34 @@
+import { FieldValues, UseFormHandleSubmit } from 'react-hook-form'
+import { ButtonGroup } from '@chakra-ui/button'
+
+import Button from '~components/Button'
+
+interface FormFieldDrawerActionsProps {
+  isLoading: boolean
+  isDirty: boolean
+  handleClick: ReturnType<UseFormHandleSubmit<FieldValues>>
+  handleCancel: () => void
+}
+
+export const FormFieldDrawerActions = ({
+  isLoading,
+  isDirty,
+  handleClick,
+  handleCancel,
+}: FormFieldDrawerActionsProps): JSX.Element => {
+  return (
+    <ButtonGroup justifyContent="end" isDisabled={isLoading}>
+      <Button variant="outline" onClick={handleCancel}>
+        Cancel
+      </Button>
+      <Button
+        minW="8rem"
+        isDisabled={!isDirty}
+        isLoading={isLoading}
+        onClick={handleClick}
+      >
+        Save
+      </Button>
+    </ButtonGroup>
+  )
+}

frontend/src/features/admin-form-builder/FieldRow/BuilderDrawerCloseButton.tsx

@@ -0,0 +1,21 @@
+import { BiX } from 'react-icons/bi'
+import { CloseButton } from '@chakra-ui/react'
+
+import { useBuilderDrawer } from '../BuilderDrawerContext'
+
+export const BuilderDrawerCloseButton = (): JSX.Element => {
+  const { handleClose } = useBuilderDrawer()
+
+  return (
+    <CloseButton
+      zIndex={1}
+      fontSize="1.5rem"
+      w="1.5rem"
+      h="1.5rem"
+      variant="clear"
+      colorScheme="neutral"
+      children={<BiX />}
+      onClick={handleClose}
+    />
+  )
+}