fix(tags): initialvalues and playground documentation form

Author: philibea

src/components/Form/__stories__/Playground.stories.tsx

@@ -4,10 +4,13 @@ import type { ChangeEvent } from 'react'
 import { useState } from 'react'
 import {
   CheckboxField,
+  DateField,
   Form,
+  RadioField,
   RichSelectField,
   Submit,
   SubmitErrorAlert,
+  TagsField,
   TextBoxField,
 } from '../..'
 import { emailRegex, mockErrors } from '../../../mocks/mockErrors'
@@ -17,7 +20,7 @@ export const Playground: ComponentStory<typeof Form> = args => {
 
   return (
     <Form {...args}>
-      <Stack gap={2}>
+      <Stack gap={3}>
         <Checkbox
           checked={state}
           onChange={(event: ChangeEvent<HTMLInputElement>) =>
@@ -42,6 +45,20 @@ export const Playground: ComponentStory<typeof Form> = args => {
           required
           regex={[emailRegex]}
         />
+        <Stack gap={2} direction="row">
+          <RadioField name="choice" value="1" required>
+            1
+          </RadioField>
+          <RadioField name="choice" value="2">
+            2
+          </RadioField>
+          <RadioField name="choice" value="3">
+            3
+          </RadioField>
+        </Stack>
+
+        <DateField name="date" label="birthday" />
+
         <RichSelectField
           multiple
           noTopLabel
@@ -55,6 +72,9 @@ export const Playground: ComponentStory<typeof Form> = args => {
             { label: 'Devops', value: 'devops' },
           ]}
         />
+
+        <TagsField name="tags" placeholder="Tags..." tags={[]} />
+
         <CheckboxField name="receiveEmailUpdates">
           I&apos;d like to receive news updates
         </CheckboxField>
@@ -67,5 +87,12 @@ export const Playground: ComponentStory<typeof Form> = args => {
 
 Playground.args = {
   errors: mockErrors,
-  initialValues: { receiveEmailUpdates: true },
+  initialValues: {
+    receiveEmailUpdates: true,
+    choice: '2',
+    tags: ['cloud', 'of', 'choice'],
+  },
+  onRawSubmit: values => {
+    console.log('Submit', values)
+  },
 }

src/components/TagsField/index.tsx

@@ -3,15 +3,22 @@ import type { ComponentProps } from 'react'
 import { useFormField } from '../../hooks'
 import type { BaseFieldProps } from '../../types'
 
-export type TagsFieldProps<T = unknown, K = string> = BaseFieldProps<T, K> &
+type TagsProp = ComponentProps<typeof Tags>['tags']
+
+export type TagsFieldProps<T = TagsProp, K = string> = BaseFieldProps<T, K> &
   Partial<
-    Pick<ComponentProps<typeof Tags>, 'tags' | 'variant' | 'onChange'>
+    Pick<
+      ComponentProps<typeof Tags>,
+      | 'tags'
+      | 'variant'
+      | 'onChange'
+      | 'placeholder'
+      | 'disabled'
+      | 'className'
+      | 'id'
+    >
   > & {
-    className?: string
-    disabled?: boolean
-    id?: string
     name: string
-    placeholder: string
     required?: boolean
   }
 
@@ -27,11 +34,12 @@ export const TagsField = ({
   validate,
   variant,
 }: TagsFieldProps): JSX.Element => {
-  const { input } = useFormField(name, {
+  const { input } = useFormField<TagsProp>(name, {
     disabled,
     required,
     type: 'text',
     validate,
+    value: tags,
   })
 
   return (
@@ -46,7 +54,7 @@ export const TagsField = ({
       }}
       placeholder={placeholder}
       variant={variant}
-      tags={tags}
+      tags={input.value}
     />
   )
 }