Merge pull request #8101 from opencrvs/render-fields

feat: FormWizard

packages/client/src/components/review/RejectRegistrationForm.tsx

@@ -160,7 +160,7 @@ class RejectRegistrationView extends React.Component<IFullProps, IState> {
               key="submit_archive"
               id="submit_archive"
               size="medium"
-              type="secondary_negative"
+              type="secondaryNegative"
               onClick={() => {
                 this.props.archiveDeclaration(
                   payload.id,

packages/client/src/v2-events/features/events/PublishEvent.tsx

@@ -15,15 +15,17 @@ import {
   Stack,
   Button,
   Icon,
-  Content
+  Content,
+  FormWizard
 } from '@opencrvs/components'
 import React from 'react'
 import { useEvent } from './useEvent'
 import { useParams } from 'react-router-dom'
+import { TextField, Paragraph, DateField } from './registered-fields'
 
 export function PublishEvent() {
   const { eventType } = useParams<{ eventType: string }>()
-  const { title, exit, saveAndExit, previous, next, finish } =
+  const { title, event, exit, saveAndExit, previous, next, page } =
     useEvent(eventType)
 
   return (
@@ -59,21 +61,18 @@ export function PublishEvent() {
         </Frame.SectionFormBackAction>
 
         <Frame.Section>
-          <Content
-            title={title}
-            bottomActionButtons={[
-              <Button
-                key="continue"
-                fullWidth
-                type="primary"
-                size="large"
-                onClick={next ?? finish}
-              >
-                Continue
-              </Button>
-            ]}
-          >
-            <b>This is where the form will be rendered</b>
+          <Content title={title}>
+            <FormWizard
+              currentPage={page}
+              pages={event.actions[0].forms[0].pages}
+              components={{
+                TEXT: TextField,
+                PARAGRAPH: Paragraph,
+                DATE: DateField
+              }}
+              onNextPage={next}
+              onSubmit={(values) => console.log(values)}
+            />
           </Content>
         </Frame.Section>
       </Frame.LayoutForm>

packages/client/src/v2-events/features/events/fixtures.ts

@@ -8,6 +8,8 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
+import { EventConfig } from '@opencrvs/commons/client'
+
 export const tennisClubMembershipEvent = {
   id: 'TENNIS_CLUB_MEMBERSHIP',
   label: {
@@ -77,6 +79,14 @@ export const tennisClubMembershipEvent = {
                     defaultMessage: "Applicant's date of birth",
                     description: 'This is the label for the field',
                     id: 'event.tennis-club-membership.action.declare.form.section.who.field.dob.label'
+                  },
+                  options: {
+                    notice: {
+                      id: 'event.tennis-club-membership.action.declare.form.section.who.field.dob.notice',
+                      defaultMessage:
+                        'This is the notice for the date of birth field',
+                      description: 'This is the description for the notice'
+                    }
                   }
                 }
               ]
@@ -126,4 +136,4 @@ export const tennisClubMembershipEvent = {
       ]
     }
   ]
-}
+} satisfies EventConfig

packages/client/src/v2-events/features/events/registered-fields/DateField.tsx

@@ -0,0 +1,35 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+import React from 'react'
+import {
+  InputField,
+  useFormContext,
+  DateField as DateFieldComponent
+} from '@opencrvs/components'
+import { FieldProps } from '@opencrvs/commons'
+import { useIntl } from 'react-intl'
+
+export const DateField = ({ id, options }: FieldProps<'DATE'>) => {
+  const intl = useIntl()
+  const { setValue, watch } = useFormContext()
+  const value = watch(id)
+
+  return (
+    <InputField id={id} touched={false}>
+      <DateFieldComponent
+        id={id}
+        notice={intl.formatMessage(options.notice)}
+        onChange={(val) => setValue(id, val)}
+        value={value}
+      />
+    </InputField>
+  )
+}

packages/client/src/v2-events/features/events/registered-fields/Paragraph.tsx

@@ -0,0 +1,19 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+import { FieldProps } from '@opencrvs/commons'
+import React from 'react'
+import { useIntl } from 'react-intl'
+
+export const Paragraph = ({ label }: FieldProps<'PARAGRAPH'>) => {
+  const intl = useIntl()
+
+  return <p>{intl.formatMessage(label)}</p>
+}

packages/client/src/v2-events/features/events/registered-fields/TextField.tsx

@@ -0,0 +1,25 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+import React from 'react'
+import { InputField, TextInput, useFormContext } from '@opencrvs/components'
+import { FieldProps } from '@opencrvs/commons'
+import { useIntl } from 'react-intl'
+
+export const TextField = ({ id, label }: FieldProps<'TEXT'>) => {
+  const intl = useIntl()
+  const { register } = useFormContext()
+
+  return (
+    <InputField id={id} touched={false} label={intl.formatMessage(label)}>
+      <TextInput type="text" {...register(id)} />
+    </InputField>
+  )
+}

packages/components/typings/css-animation.d.ts → packages/client/src/v2-events/features/events/registered-fields/index.ts

@@ -8,4 +8,6 @@
  *
  * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
  */
-declare module 'css-animation'
+export * from './TextField'
+export * from './DateField'
+export * from './Paragraph'

packages/client/src/v2-events/features/events/useEvent.ts

@@ -14,7 +14,9 @@ import { useIntl } from 'react-intl'
 import { usePagination } from './usePagination'
 import { FieldConfig } from '@opencrvs/commons/client'
 
-const eventTypes = { 'tennis-club-membership': tennisClubMembershipEvent }
+const eventTypes = {
+  'tennis-club-membership': tennisClubMembershipEvent
+}
 
 export function useEvent(anyEventType: string) {
   const intl = useIntl()
@@ -24,6 +26,7 @@ export function useEvent(anyEventType: string) {
   }
 
   const type = anyEventType as keyof typeof eventTypes
+  const event = eventTypes[type]
   const { pages, label } = eventTypes[type].actions[0].forms[0]
 
   const { next, previous, page } = usePagination(pages.length)
@@ -42,7 +45,8 @@ export function useEvent(anyEventType: string) {
     previous,
     next,
     finish,
+    page,
     form: pages,
-    fields: pages[page].fields as FieldConfig[]
+    event
   }
 }

packages/commons/src/events/FieldConfig.ts

@@ -11,39 +11,35 @@
 import { z } from 'zod'
 import { TranslationConfig } from './TranslationConfig'
 
-const BaseField = z.object({
-  id: z.string(),
-  required: z.boolean(),
-  label: TranslationConfig
-})
-
-const TextField = BaseField.describe('Text input').merge(
-  z.object({
+const TextField = z
+  .object({
     type: z.literal('TEXT'),
+    id: z.string(),
+    required: z.boolean(),
+    label: TranslationConfig,
     options: z
       .object({
         maxLength: z.number().describe('Maximum length of the text')
       })
       .optional()
   })
-)
+  .describe('Text input')
 
-const DateField = BaseField.describe('A single date input (dd-mm-YYYY)').merge(
-  z.object({
+const DateField = z
+  .object({
     type: z.literal('DATE'),
-    options: z
-      .object({
-        notice: TranslationConfig.describe(
-          'Text to display above the date input'
-        )
-      })
-      .optional()
+    id: z.string(),
+    required: z.boolean(),
+    label: TranslationConfig,
+    options: z.object({
+      notice: TranslationConfig.describe('Text to display above the date input')
+    })
   })
-)
+  .describe('A single date input (dd-mm-YYYY)')
 
-const Paragraph = BaseField.describe('A read-only HTML <p> paragraph').merge(
-  z.object({ type: z.literal('PARAGRAPH') })
-)
+const Paragraph = z
+  .object({ type: z.literal('PARAGRAPH'), label: TranslationConfig })
+  .describe('A read-only HTML <p> paragraph')
 
 export const FieldConfig = z.discriminatedUnion('type', [
   TextField,
@@ -52,3 +48,5 @@ export const FieldConfig = z.discriminatedUnion('type', [
 ])
 
 export type FieldConfig = z.infer<typeof FieldConfig>
+export type FieldType = FieldConfig['type']
+export type FieldProps<T extends FieldType> = Extract<FieldConfig, { type: T }>

packages/commons/src/fixtures/tennis-club-membership-event.ts

@@ -79,6 +79,13 @@ export const tennisClubMembershipEvent = defineConfig({
                     defaultMessage: "Applicant's date of birth",
                     description: 'This is the label for the field',
                     id: 'event.tennis-club-membership.action.declare.form.section.who.field.dob.label'
+                  },
+                  options: {
+                    notice: {
+                      id: 'event.tennis-club-membership.action.declare.form.section.who.field.dob.notice',
+                      defaultMessage: 'This is the notice for the field',
+                      description: 'This is the description for the notice'
+                    }
                   }
                 }
               ]

packages/components/package.json

@@ -7,16 +7,13 @@
   "private": true,
   "dependencies": {
     "@storybook/core-server": "^7.6.17",
-    "css-animation": "^2.0.4",
     "jest": "29.7.0",
-    "patch-package": "^6.1.2",
     "phosphor-react": "^1.4.1",
     "polished": "^4.2.2",
     "postinstall-postinstall": "^2.0.0",
-    "rc-menu": "^7.4.13",
-    "rc-progress": "^2.5.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-hook-form": "^7.53.2",
     "react-select": "^2.0.0",
     "react-stickynode": "^2.1.1",
     "react-tooltip": "^4.2.21",

packages/components/src/Button/Button.styles.ts

@@ -85,7 +85,7 @@ export const secondary = css`
   }
 `
 
-export const secondary_negative = css`
+export const secondaryNegative = css`
   border: 2px solid ${({ theme }) => theme.colors.negative};
   color: ${({ theme }) => theme.colors.negative};
 

packages/components/src/Button/Button.tsx

@@ -21,7 +21,7 @@ type ButtonType =
   | 'tertiary'
   | 'positive'
   | 'negative'
-  | 'secondary_negative'
+  | 'secondaryNegative'
   | 'icon'
   | 'iconPrimary'
 
@@ -60,7 +60,7 @@ const StyledButton = styled.button.withConfig({
   ${(props) => props.variant === 'primary' && styles.primary(props)}
   ${(props) => props.variant === 'secondary' && styles.secondary}
   ${(props) =>
-    props.variant === 'secondary_negative' && styles.secondary_negative}
+    props.variant === 'secondaryNegative' && styles.secondaryNegative}
 
   ${(props) => props.variant === 'tertiary' && styles.tertiary}
   ${(props) => props.variant === 'positive' && styles.positive}

packages/components/src/DateField/DateField.tsx

@@ -10,7 +10,7 @@
  */
 import React, { useState, useRef, useEffect } from 'react'
 import styled from 'styled-components'
-import { ITextInputProps, TextInput, IRef } from '../TextInput/TextInput'
+import { ITextInputProps, TextInput } from '../TextInput/TextInput'
 import { InputLabel } from '../InputField/InputLabel'
 
 const DateWrapper = styled.div`
@@ -55,9 +55,9 @@ export const DateField = ({
   ...props
 }: IDateFieldProps) => {
   const [date, setDate] = useState<IState>({ yyyy: '', mm: '', dd: '' })
-  const ddRef = useRef<IRef>(null)
-  const mmRef = useRef<IRef>(null)
-  const yyyyRef = useRef<IRef>(null)
+  const ddRef = useRef<HTMLInputElement>(null)
+  const mmRef = useRef<HTMLInputElement>(null)
+  const yyyyRef = useRef<HTMLInputElement>(null)
   const { dd, mm, yyyy } = date
 
   useEffect(() => {
@@ -82,15 +82,15 @@ export const DateField = ({
             return
           }
           if (val.length > 1 && mmRef.current) {
-            mmRef.current.focusField()
+            mmRef.current.focus()
           }
           break
         case 'mm':
           if (val.length > 2 || Number(val) > MAX_MONTH_NUMBER) {
             return
           }
           if (val.length > 1 && yyyyRef.current) {
-            yyyyRef.current.focusField()
+            yyyyRef.current.focus()
           }
           break
         case 'yyyy':