@ttoss/forms 0.22.2 → 0.22.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.22.2",
+  "version": "0.22.4",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -10,41 +10,51 @@
     "url": "https://github.com/ttoss/ttoss.git",
     "directory": "packages/forms"
   },
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./multistep-form": {
+      "import": "./dist/esm/MultistepForm/index.js",
+      "require": "./dist/MultistepForm/index.js",
+      "types": "./dist/MultistepForm/index.d.ts"
+    }
+  },
   "files": [
     "dist",
     "src"
   ],
   "sideEffects": true,
-  "typings": "dist/index.d.ts",
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.3.4",
-    "react-hook-form": "^7.50.0",
+    "react-hook-form": "^7.50.1",
     "react-number-format": "^5.3.1",
     "yup": "^1.3.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^1.26.0",
-    "@ttoss/ui": "^4.1.1"
+    "@ttoss/ui": "^4.1.2",
+    "@ttoss/react-i18n": "^1.26.1"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.48",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.58",
     "jest": "^29.7.0",
     "react": "^18.2.0",
     "react-error-boundary": "^4.0.12",
-    "react-hook-form": "^7.50.0",
-    "theme-ui": "^0.16.1",
-    "tsup": "^8.0.1",
+    "react-hook-form": "^7.50.1",
+    "theme-ui": "^0.16.2",
+    "tsup": "^8.0.2",
     "yup": "^1.3.3",
-    "@ttoss/config": "^1.31.4",
-    "@ttoss/react-i18n": "^1.26.0",
-    "@ttoss/i18n-cli": "^0.7.5",
-    "@ttoss/ui": "^4.1.1",
-    "@ttoss/test-utils": "^2.1.0"
+    "@ttoss/config": "^1.31.5",
+    "@ttoss/react-i18n": "^1.26.1",
+    "@ttoss/i18n-cli": "^0.7.6",
+    "@ttoss/react-icons": "^0.3.1",
+    "@ttoss/test-utils": "^2.1.1",
+    "@ttoss/ui": "^4.1.2"
   },
   "publishConfig": {
     "access": "public",

package/src/ErrorMessage.tsx

@@ -1,6 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   FieldError,
-  FieldErrors,
   FieldName,
   FieldValues,
   useFormContext,
@@ -40,10 +40,13 @@ export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
         return (
           <HelpText negative disabled={disabled}>
             {(() => {
-              if (typeof message === 'string') return message;
+              if (typeof message === 'string') {
+                return message;
+              }
 
-              if (isMessageDescriptor(message))
+              if (isMessageDescriptor(message)) {
                 return <FormattedMessage {...message} />;
+              }
 
               return JSON.stringify(message);
             })()}

package/src/MultistepForm/MultistepFlowMessage.tsx

@@ -0,0 +1,14 @@
+import {
+  MultistepFlowMessageImageText,
+  MultistepFlowMessageImageTextProps,
+} from './MultistepFlowMessageImageText';
+
+export type MultistepFlowMessageProps = MultistepFlowMessageImageTextProps;
+
+export const MultistepFlowMessage = (props: MultistepFlowMessageProps) => {
+  if (props.variant === 'image-text') {
+    return <MultistepFlowMessageImageText {...props} />;
+  }
+
+  return null;
+};

package/src/MultistepForm/MultistepFlowMessageImageText.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Flex, Image, Text } from '@ttoss/ui';
+import { MultistepFlowMessageBase } from './types';
+
+export type MultistepFlowMessageImageTextProps = MultistepFlowMessageBase & {
+  variant: 'image-text';
+  src: string;
+  description: string | React.ReactNode;
+};
+
+export const MultistepFlowMessageImageText = ({
+  src,
+  description,
+}: MultistepFlowMessageImageTextProps) => {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        paddingY: 'xl',
+        paddingX: '2xl',
+        gap: 'xl',
+      }}
+    >
+      <Image
+        src={src}
+        sx={{
+          width: '184px',
+          height: '184px',
+          objectFit: 'cover',
+          alignSelf: 'center',
+        }}
+      />
+
+      <Text sx={{ textAlign: 'center' }}>{description}</Text>
+    </Flex>
+  );
+};

package/src/MultistepForm/MultistepFooter.tsx

@@ -0,0 +1,18 @@
+import { Flex, Text } from '@ttoss/ui';
+
+export const MultistepFooter = ({ footer }: { footer: string }) => {
+  return (
+    <Flex sx={{ display: 'flex', justifyContent: 'center' }}>
+      <Text
+        sx={{
+          textAlign: 'center',
+          marginTop: '4xl',
+          marginBottom: 'lg',
+          marginX: '2xl',
+        }}
+      >
+        {footer}
+      </Text>
+    </Flex>
+  );
+};

package/src/MultistepForm/MultistepForm.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { Flex } from '@ttoss/ui';
+import { MultistepFlowMessageProps } from './MultistepFlowMessage';
+import { MultistepFooter } from './MultistepFooter';
+import {
+  MultistepFormStepper,
+  type MultistepFormStepperProps,
+} from './MultistepFormStepper';
+import { MultistepHeader, type MultistepHeaderProps } from './MultistepHeader';
+import { MultistepNavigation } from './MultistepNavigation';
+
+export type MultistepStep = {
+  question: string;
+  flowMessage: MultistepFlowMessageProps;
+  label: string;
+  fields: React.ReactNode | React.ReactNode[];
+  schema?: MultistepFormStepperProps['schema'];
+  defaultValues?: MultistepFormStepperProps['defaultValues'];
+};
+
+export type MultistepFormProps<FormValues = unknown> = {
+  header: MultistepHeaderProps;
+  steps: MultistepStep[];
+  footer?: string;
+  onSubmit: (data: FormValues) => void;
+  nextStepButtonLabel?: string;
+  submitButtonLabel?: string;
+};
+
+export const MultistepForm = ({
+  nextStepButtonLabel = 'Next',
+  submitButtonLabel = 'Send',
+  ...props
+}: MultistepFormProps) => {
+  const amountOfSteps = props.steps.length;
+  const [currentStep, setCurrentStep] = React.useState(1);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [form, setForm] = React.useState<any>({});
+
+  const nextStep = () => {
+    if (currentStep < amountOfSteps) {
+      setCurrentStep((step) => {
+        return step + 1;
+      });
+    }
+  };
+
+  const backStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep((step) => {
+        return step - 1;
+      });
+    }
+  };
+
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        maxWidth: '390px',
+        background: '#fff',
+      }}
+    >
+      <MultistepHeader {...props.header} />
+      {props.steps.map((step, stepIndex) => {
+        const isLastStep = stepIndex + 1 === amountOfSteps;
+        const isCurrentStep = stepIndex + 1 === currentStep;
+
+        return (
+          <Flex
+            sx={{
+              flexDirection: 'column',
+              display: isCurrentStep ? 'flex' : 'none',
+            }}
+            key={`form-step-${step.question}`}
+            aria-hidden={!isCurrentStep}
+          >
+            <MultistepFormStepper
+              {...step}
+              stepNumber={stepIndex + 1}
+              isLastStep={isLastStep}
+              // isCurrentStep={isCurrentStep}
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              onSubmit={(data: any) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const newValue = { ...form, ...data };
+
+                setForm(newValue);
+
+                if (isLastStep) {
+                  props.onSubmit(newValue);
+                } else {
+                  nextStep();
+                }
+              }}
+              submitLabel={isLastStep ? submitButtonLabel : nextStepButtonLabel}
+            />
+          </Flex>
+        );
+      })}
+
+      {currentStep > 1 && (
+        <MultistepNavigation
+          amountOfSteps={amountOfSteps}
+          currentStepNumber={currentStep}
+          onBack={backStep}
+          stepsLabel={props.steps.map((s) => {
+            return s.label;
+          })}
+        />
+      )}
+
+      {props.footer && <MultistepFooter footer={props.footer} />}
+    </Flex>
+  );
+};

package/src/MultistepForm/MultistepFormStepper.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Button } from '@ttoss/ui';
+import { Form, useForm, yup, yupResolver } from '../';
+import {
+  MultistepFlowMessage,
+  MultistepFlowMessageProps,
+} from './MultistepFlowMessage';
+import { MultistepQuestion } from './MultistepQuestion';
+
+export type MultistepFormStepperProps = {
+  flowMessage: MultistepFlowMessageProps;
+  onSubmit: (data: unknown) => void;
+  question: string;
+  isLastStep: boolean;
+  fields: React.ReactNode | React.ReactNode[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  schema?: yup.ObjectSchema<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultValues?: any;
+  submitLabel: string;
+  stepNumber: number;
+  // isCurrentStep: boolean;
+};
+
+export const MultistepFormStepper = ({
+  flowMessage,
+  fields,
+  onSubmit,
+  question,
+  submitLabel,
+  schema,
+  isLastStep,
+  defaultValues,
+  stepNumber,
+  // isCurrentStep,
+}: MultistepFormStepperProps) => {
+  const formMethods = useForm({
+    resolver: schema ? yupResolver(schema) : undefined,
+    defaultValues,
+  });
+
+  return (
+    <Form
+      {...formMethods}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+      onSubmit={onSubmit}
+    >
+      <MultistepFlowMessage {...flowMessage} />
+
+      <MultistepQuestion fields={fields} question={question} />
+
+      <Button
+        sx={{
+          justifyContent: 'center',
+          marginTop: '2xl',
+          marginBottom: 'xl',
+          marginX: '2xl',
+        }}
+        rightIcon={isLastStep ? undefined : 'nav-right'}
+        aria-label={`btn-step-${stepNumber}`}
+        type="submit"
+      >
+        {submitLabel}
+      </Button>
+    </Form>
+  );
+};

package/src/MultistepForm/MultistepHeader.tsx

@@ -0,0 +1,78 @@
+import { CloseButton, Flex, Image, Text } from '@ttoss/ui';
+import { Icon, type IconType } from '@ttoss/react-icons';
+
+type MultistepHeaderTitledProps = {
+  variant: 'titled';
+  title: string;
+  leftIcon: IconType;
+  rightIcon: IconType;
+  onLeftIconClick: () => void;
+  onRightIconClick: () => void;
+};
+
+const MultistepHeaderTitled = ({
+  title,
+  leftIcon,
+  onLeftIconClick,
+  rightIcon,
+  onRightIconClick,
+}: MultistepHeaderTitledProps) => {
+  return (
+    <Flex
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        paddingX: 'xl',
+        paddingY: 'lg',
+        alignItems: 'center',
+      }}
+    >
+      <Icon icon={leftIcon} onClick={onLeftIconClick} />
+      <Text sx={{ fontWeight: 'bold', fontSize: 'lg' }}>{title}</Text>
+      <Icon icon={rightIcon} onClick={onRightIconClick} />
+    </Flex>
+  );
+};
+
+type MultistepHeaderLogoProps = {
+  variant: 'logo';
+  src: string;
+  onClose?: () => void;
+};
+
+const MultistepHeaderLogo = ({ onClose, src }: MultistepHeaderLogoProps) => {
+  return (
+    <Flex
+      sx={{
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingX: 'xl',
+        paddingY: 'lg',
+      }}
+    >
+      <Image
+        width={115}
+        height={32}
+        sx={{ objectFit: 'cover', width: 115, height: 32 }}
+        src={src}
+      />
+      {onClose && <CloseButton onClick={onClose} />}
+    </Flex>
+  );
+};
+
+export type MultistepHeaderProps =
+  | MultistepHeaderLogoProps
+  | MultistepHeaderTitledProps;
+
+export const MultistepHeader = (props: MultistepHeaderProps) => {
+  if (props.variant === 'logo') {
+    return <MultistepHeaderLogo {...props} />;
+  }
+
+  if (props.variant === 'titled') {
+    return <MultistepHeaderTitled {...props} />;
+  }
+
+  return null;
+};

package/src/MultistepForm/MultistepNavigation.tsx

@@ -0,0 +1,38 @@
+import { Flex, Text } from '@ttoss/ui';
+import { Icon } from '@ttoss/react-icons';
+
+export type MultistepNavigationProps = {
+  amountOfSteps: number;
+  currentStepNumber: number;
+  onBack: () => void;
+  stepsLabel: string[];
+};
+
+export const MultistepNavigation = ({
+  amountOfSteps,
+  currentStepNumber,
+  onBack,
+  stepsLabel,
+}: MultistepNavigationProps) => {
+  return (
+    <Flex
+      sx={{
+        justifyContent: 'space-between',
+        marginX: '2xl',
+      }}
+    >
+      <Flex onClick={onBack} sx={{ alignItems: 'center', cursor: 'pointer' }}>
+        <Text sx={{ color: '#ACADB7', display: 'flex' }}>
+          <Icon icon="nav-left" />
+        </Text>
+        <Text sx={{ color: '#ACADB7' }}>
+          {stepsLabel[currentStepNumber - 2]}
+        </Text>
+      </Flex>
+
+      <Text sx={{ alignItems: 'center', color: '#ACADB7' }}>
+        {currentStepNumber}/{amountOfSteps}
+      </Text>
+    </Flex>
+  );
+};

package/src/MultistepForm/MultistepQuestion.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Flex, Text } from '@ttoss/ui';
+
+type MultistepQuestionProps = {
+  question: string;
+  fields: React.ReactNode | React.ReactNode[];
+};
+
+export const MultistepQuestion = ({
+  fields,
+  question,
+}: MultistepQuestionProps) => {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        paddingTop: 'xl',
+        paddingX: '2xl',
+      }}
+    >
+      <Text sx={{ textAlign: 'center', fontSize: 'lg', marginBottom: 'xl' }}>
+        {question}
+      </Text>
+
+      <Flex sx={{ flexDirection: 'column', gap: 'xl' }}>{fields}</Flex>
+    </Flex>
+  );
+};

package/src/MultistepForm/index.ts

@@ -0,0 +1 @@
+export { MultistepForm, type MultistepFormProps } from './MultistepForm';

package/src/MultistepForm/types.ts

@@ -0,0 +1,7 @@
+export type MultistepFlowMessageVariant =
+  | 'image-text'
+  | 'heading-and-subheading';
+
+export type MultistepFlowMessageBase = {
+  variant: MultistepFlowMessageVariant;
+};

package/src/index.ts

@@ -2,6 +2,7 @@ import './i18n';
 
 export { yupResolver } from '@hookform/resolvers/yup';
 export * from 'react-hook-form';
+export { useForm } from 'react-hook-form';
 export * as yup from 'yup';
 
 export { Form } from './Form';