@ttoss/forms 0.22.2 → 0.22.4

package/README.md

@@ -9,6 +9,8 @@ pnpm i @ttoss/forms @ttoss/react-i18n @ttoss/ui @emotion/react
 pnpm i --save-dev @ttoss/i18n-cli
 ```
 
+Check the [@ttoss/react-i18n](https://ttoss.dev/docs/modules/packages/react-i18n/) docs to see how to configure the i18n.
+
 ## Quickstart
 
 ```tsx
@@ -154,7 +156,7 @@ const RenderForm = () => {
 };
 ```
 
-## Yup Validation
+### Yup Validation
 
 You can also use yup and all of API from react-hook-form importing `import { yup, useForm } from @ttoss/forms`
 
@@ -222,3 +224,111 @@ const ComponentForm = () => {
   // ...
 };
 ```
+
+## @ttoss/forms/multistep-form
+
+The `@ttoss/forms/multistep-form` module from the **@ttoss/forms** library provides an efficient and flexible way to create multistep forms in React. This component is ideal for scenarios where filling out a lengthy form needs to be divided into several smaller steps, improving user experience. With support for integrated validations and style customizations, this tool offers everything you need to implement robust multistep forms in your React applications.
+
+### How to Use
+
+To use the `MultistepForm`, you first need to define the steps of the form, each with its own fields, validations, and messages. Here's a basic example of assembling a multistep form:
+
+```tsx
+import * as React from 'react';
+import { FormFieldInput, yup } from '@ttoss/forms';
+import { MultistepForm } from '@ttoss/forms/multistep-form';
+
+// Define your steps
+const steps = [
+  {
+    label: 'Step 1',
+    question: 'What is your name?',
+    fields: <FormFieldInput name="name" label="Name" />,
+    schema: yup.object({
+      name: yup.string().required('Name is required'),
+    }),
+  },
+  {
+    label: 'Step 2',
+    question: 'How old are you?',
+    fields: <FormFieldInput type="number" name="age" label="Age" />,
+    defaultValues: {
+      age: 18,
+    },
+    schema: yup.object({
+      age: yup
+        .number()
+        .min(18, 'Min required age is 18')
+        .required('Age is required'),
+    }),
+  },
+  // Add more steps as needed
+];
+
+const MyMultistepForm = () => {
+  return (
+    <MultistepForm
+      // ...other props
+      steps={steps}
+      // submit the full form on submit
+      onSubmit={(data) => console.log(data)}
+    />
+  );
+};
+```
+
+#### Props
+
+The `MultistepForm` component accepts the following props:
+
+- `steps`: An array of objects representing each step of the form.
+- `onSubmit`: A function that is called when the form is completely filled and submitted.
+- `footer`: An string with the text to show on form's footer.
+- `header`: [Header Props](#header-props)
+
+Each step can have the following properties:
+
+- `label`: The label of the step (used for navigation).
+- `question`: The question or instruction presented to the user at this step.
+- `fields`: The form fields for this step.
+- `schema`: A `yup` schema for validating the fields at this step.
+- `defaultValues`: An optional object with default values to this step.
+
+#### Header-Props
+
+- **For Logo Header (`MultistepFormHeaderLogoProps`):**
+
+  - `variant`: Set to `'logo'`.
+  - `src`: The source URL for the logo image.
+  - `onClose`: A function to handle the close button click event.
+
+- **For Titled Header (`MultistepFormTitledProps`):**
+  - `variant`: Set to `'titled'`.
+  - `title`: The title text.
+  - `leftIcon` and `rightIcon`: Icon types for left and right icons.
+  - `onLeftIconClick` and `onRightIconClick`: Functions to handle clicks on left and right icons.
+
+#### Customizing Headers
+
+1. **Logo Header:**
+
+```tsx
+const logoHeaderProps = {
+  variant: 'logo',
+  src: 'path-to-your-logo-image',
+  onClose: () => console.log('Close button clicked'),
+};
+```
+
+2. **Titled Header:**
+
+```tsx
+const titledHeaderProps = {
+  variant: 'titled',
+  title: 'Your Title',
+  leftIcon: 'icon-type',
+  rightIcon: 'icon-type',
+  onLeftIconClick: () => console.log('Left icon clicked'),
+  onRightIconClick: () => console.log('Right icon clicked'),
+};
+```

package/dist/MultistepForm/index.d.mts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as yup from 'yup';
+import { IconType } from '@ttoss/react-icons';
+
+type MultistepFlowMessageVariant = 'image-text' | 'heading-and-subheading';
+type MultistepFlowMessageBase = {
+    variant: MultistepFlowMessageVariant;
+};
+
+type MultistepFlowMessageImageTextProps = MultistepFlowMessageBase & {
+    variant: 'image-text';
+    src: string;
+    description: string | React.ReactNode;
+};
+
+type MultistepFlowMessageProps = MultistepFlowMessageImageTextProps;
+
+type MultistepFormStepperProps = {
+    flowMessage: MultistepFlowMessageProps;
+    onSubmit: (data: unknown) => void;
+    question: string;
+    isLastStep: boolean;
+    fields: React.ReactNode | React.ReactNode[];
+    schema?: yup.ObjectSchema<any>;
+    defaultValues?: any;
+    submitLabel: string;
+    stepNumber: number;
+};
+
+type MultistepHeaderTitledProps = {
+    variant: 'titled';
+    title: string;
+    leftIcon: IconType;
+    rightIcon: IconType;
+    onLeftIconClick: () => void;
+    onRightIconClick: () => void;
+};
+type MultistepHeaderLogoProps = {
+    variant: 'logo';
+    src: string;
+    onClose?: () => void;
+};
+type MultistepHeaderProps = MultistepHeaderLogoProps | MultistepHeaderTitledProps;
+
+type MultistepStep = {
+    question: string;
+    flowMessage: MultistepFlowMessageProps;
+    label: string;
+    fields: React.ReactNode | React.ReactNode[];
+    schema?: MultistepFormStepperProps['schema'];
+    defaultValues?: MultistepFormStepperProps['defaultValues'];
+};
+type MultistepFormProps<FormValues = unknown> = {
+    header: MultistepHeaderProps;
+    steps: MultistepStep[];
+    footer?: string;
+    onSubmit: (data: FormValues) => void;
+    nextStepButtonLabel?: string;
+    submitButtonLabel?: string;
+};
+declare const MultistepForm: ({ nextStepButtonLabel, submitButtonLabel, ...props }: MultistepFormProps) => react_jsx_runtime.JSX.Element;
+
+export { MultistepForm, type MultistepFormProps };

package/dist/MultistepForm/index.d.ts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as yup from 'yup';
+import { IconType } from '@ttoss/react-icons';
+
+type MultistepFlowMessageVariant = 'image-text' | 'heading-and-subheading';
+type MultistepFlowMessageBase = {
+    variant: MultistepFlowMessageVariant;
+};
+
+type MultistepFlowMessageImageTextProps = MultistepFlowMessageBase & {
+    variant: 'image-text';
+    src: string;
+    description: string | React.ReactNode;
+};
+
+type MultistepFlowMessageProps = MultistepFlowMessageImageTextProps;
+
+type MultistepFormStepperProps = {
+    flowMessage: MultistepFlowMessageProps;
+    onSubmit: (data: unknown) => void;
+    question: string;
+    isLastStep: boolean;
+    fields: React.ReactNode | React.ReactNode[];
+    schema?: yup.ObjectSchema<any>;
+    defaultValues?: any;
+    submitLabel: string;
+    stepNumber: number;
+};
+
+type MultistepHeaderTitledProps = {
+    variant: 'titled';
+    title: string;
+    leftIcon: IconType;
+    rightIcon: IconType;
+    onLeftIconClick: () => void;
+    onRightIconClick: () => void;
+};
+type MultistepHeaderLogoProps = {
+    variant: 'logo';
+    src: string;
+    onClose?: () => void;
+};
+type MultistepHeaderProps = MultistepHeaderLogoProps | MultistepHeaderTitledProps;
+
+type MultistepStep = {
+    question: string;
+    flowMessage: MultistepFlowMessageProps;
+    label: string;
+    fields: React.ReactNode | React.ReactNode[];
+    schema?: MultistepFormStepperProps['schema'];
+    defaultValues?: MultistepFormStepperProps['defaultValues'];
+};
+type MultistepFormProps<FormValues = unknown> = {
+    header: MultistepHeaderProps;
+    steps: MultistepStep[];
+    footer?: string;
+    onSubmit: (data: FormValues) => void;
+    nextStepButtonLabel?: string;
+    submitButtonLabel?: string;
+};
+declare const MultistepForm: ({ nextStepButtonLabel, submitButtonLabel, ...props }: MultistepFormProps) => react_jsx_runtime.JSX.Element;
+
+export { MultistepForm, type MultistepFormProps };