@ultraviolet/form 4.0.0-beta.16 → 4.0.0-beta.18

package/README.md

@@ -21,18 +21,206 @@ import { Form, TextInputField } from '@ultraviolet/form'
 import { theme } from '@ultraviolet/ui'
 import { useForm } from '@ultraviolet/form'
 
+// Here are the input types of your form
+type FormValues = {
+  firstName: string
+  lastName: string
+}
+
+// We define the initial values of the form
+const INITIAL_VALUES: FormValues = {
+  firstName: 'Marc',
+  lastName: 'Scout',
+} as const
+
+export default function App() {
+  const methods = useForm<FormValues>({
+    defaultValues: INITIAL_VALUES,
+    mode: 'onChange',
+  })
+  
+  const formErrors = {
+    required: () => 'This field is required',
+    // Add more error messages as needed for min, max, etc.
+  }
+  
+  const onSubmit = async ({
+    firstName,
+    lastName,
+  }: FormValues) => {
+    // Add your form submission logic here
+    console.log('Form submitted with values:', { firstName, lastName })
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Form methods={methods} errors={formErrors} onSubmit={onSubmit}>
+        <TextInputField name="firstName" />
+        <TextInputField name="lastName" />
+      </Form>
+    </ThemeProvider>
+  )
+}
+```
+
+###  `useWatch` Hook
+
+You can use the `useWatch` hook from `@ultraviolet/form` to watch specific fields in your form thus subscribing to their changes.
+It can be useful for displaying real-time updates or triggering actions based on field values.
+
+```tsx
+// FirstNameWatched is a component that needs to watch the firstName field
+function FirstNameWatched({ control }: { control: Control<FormInputs> }) {
+  const firstName = useWatch({
+    control,
+    name: "firstName",
+  })
+
+  return <p>Watch: {firstName}</p>
+}
+
 export default function App() {
-  const methods = useForm()
+  ... // same setup as before
+  
   return (
     <ThemeProvider theme={theme}>
-      <Form methods={methods}>
-        <TextInputField name="example" />
+      <Form methods={methods} errors={formErrors} onSubmit={onSubmit}>
+        <TextInputField name="firstName" />
+        <TextInputField name="lastName" />
+        
+        <FirstNameWatched control={control} />
       </Form>
     </ThemeProvider>
   )
 }
 ```
 
+### Form Validation
+
+You can validate each fields passing either `regex` or `validate` to any field that support it. Not all field supports `regex` for instance but all fields support `validate`.
+In addition many field support `required`, `minLength`, `maxLength`, `min`, and `max` validation.
+
+#### Native Validation
+
+```tsx
+<TextInputField 
+  name="firstName" 
+  required
+  minLength={2}
+  maxLength={30}
+/>
+```
+
+#### With Validate
+
+```tsx
+const EXISTING_IPS = ['192.168.1.1']
+
+<TextInputField 
+  name="ip" 
+  validate={{
+  ipAlreadyExists: (ip: string) =>
+    EXISTING_IPS.includes(ip) ? 'This ip is already in use' : undefined,
+  }}
+/>
+```
+
+#### With Regex
+
+```tsx
+<TextInputField 
+  name="email"
+  regex={[/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/]}
+/>
+```
+
+We all know regex can be tricky, so to help you with that we made [Scaleway Regex](https://github.com/scaleway/scaleway-lib/tree/main/packages/regex) library that contains a lot of useful regexes that you can use in your forms.
+You can easily install it with:
+
+```sh
+pnpm add @scaleway/regex
+```
+
+You can then use it like this:
+
+```tsx
+import { email } from '@scaleway/regex'
+
+<TextInputField 
+  name="email"
+  regex={[email]}
+/>
+```
+
+Check all the available regexes in the [Scaleway Regex file](https://github.com/scaleway/scaleway-lib/blob/main/packages/regex/src/index.ts)
+
+### Resolvers | Zod
+
+You can use [Zod](https://zod.dev/) for validation by integrating it with `@ultraviolet/form`. First you will need to install Zod and the Zod resolver for React Hook Form:
+
+```sh
+pnpm add zod @hookform/resolvers
+```
+
+
+Here's how you can do it:
+
+```tsx
+import { ThemeProvider } from '@emotion/react'
+import { Form, TextInputField } from '@ultraviolet/form'
+import { theme } from '@ultraviolet/ui'
+import { useForm } from '@ultraviolet/form'
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+
+// Define your Zod schema for validation
+const schema = z.object({
+  firstName: z.string(),
+  lastName: z.string(),
+})
+
+// Types are inferred from the Zod schema
+type FormValues = z.infer<typeof schema>
+
+// We define the initial values of the form
+const INITIAL_VALUES: FormValues = {
+  firstName: 'Marc',
+  lastName: 'Scout',
+} as const
+
+export default function App() {
+  const methods = useForm<FormValues>({
+    defaultValues: INITIAL_VALUES,
+    resolver: zodResolver(schema),
+    mode: 'onChange',
+  })
+  
+  const formErrors = {
+    required: () => 'This field is required',
+    // Add more error messages as needed for min, max, etc.
+  }
+  
+  const onSubmit = async ({
+    firstName,
+    lastName,
+  }: FormValues) => {
+    // Add your form submission logic here
+    console.log('Form submitted with values:', { firstName, lastName })
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Form methods={methods} errors={formErrors} onSubmit={onSubmit}>
+        <TextInputField name="firstName" />
+        <TextInputField name="lastName" />
+      </Form>
+    </ThemeProvider>
+  )
+}
+```
+
+If you need more examples with other resolvers we invite you to check [React Hook Form Resolvers Documentation](https://github.com/react-hook-form/resolvers#quickstart)
+
 ## Documentation
 
 Checkout our [documentation website](https://storybook.ultraviolet.scaleway.com/).

package/dist/components/RadioField/index.d.ts

@@ -1,5 +1,5 @@
 import { Radio } from '@ultraviolet/ui';
-import { type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 type RadioFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof Radio>, 'value' | 'onChange'>;

package/dist/components/SelectInputField/index.d.ts

@@ -1,5 +1,5 @@
 import { SelectInput } from '@ultraviolet/ui';
-import { type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 type SelectInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof SelectInput>, 'value' | 'onChange'>;

package/dist/components/SliderField/index.d.ts

@@ -1,5 +1,5 @@
 import { Slider } from '@ultraviolet/ui';
-import { type ComponentProps, type ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 type SliderFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof Slider>, 'value' | 'onChange'> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-beta.18",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -52,29 +52,29 @@
   ],
   "peerDependencies": {
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x",
-    "@ultraviolet/ui": "2.0.0-beta.15"
+    "@ultraviolet/ui": "2.0.0-beta.17"
   },
   "devDependencies": {
-    "@babel/core": "7.27.4",
+    "@babel/core": "7.27.7",
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@types/final-form-focus": "1.1.7",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "@ultraviolet/ui": "2.0.0-beta.15",
+    "@ultraviolet/ui": "2.0.0-beta.17",
     "@utils/test": "0.0.1"
   },
   "dependencies": {
     "@babel/runtime": "7.27.6",
-    "react-hook-form": "7.55.0",
+    "react-hook-form": "7.56.3",
     "react-select": "5.10.0",
-    "@ultraviolet/icons": "4.0.0-beta.7",
-    "@ultraviolet/themes": "2.0.0-beta.2"
+    "@ultraviolet/icons": "4.0.0-beta.8",
+    "@ultraviolet/themes": "2.0.0-beta.3"
   },
   "scripts": {
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",