@ttoss/forms 0.25.6 → 0.26.1

package/src/FormFieldNumericFormat.tsx

@@ -1,35 +0,0 @@
-import { FormField } from './FormField';
-import { Input } from '@ttoss/ui';
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
-
-export type FormFieldNumericFormatProps = {
-  label?: string;
-  name: string;
-} & NumericFormatProps;
-
-export const FormFieldNumericFormat = ({
-  label,
-  name,
-  ...numericFormatProps
-}: FormFieldNumericFormatProps) => {
-  return (
-    <FormField
-      label={label}
-      name={name}
-      render={({ field }) => {
-        return (
-          <NumericFormat
-            name={field.name}
-            value={field.value}
-            onBlur={field.onBlur}
-            onValueChange={(values) => {
-              field.onChange(values.floatValue);
-            }}
-            customInput={Input}
-            {...numericFormatProps}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/FormFieldPassword.tsx

@@ -1,43 +0,0 @@
-import { FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
-import { FormField, type FormFieldProps } from './FormField';
-import { InputPassword, type InputPasswordProps } from '@ttoss/ui';
-
-export type FormFieldPasswordProps<TName> = {
-  label?: string;
-  name: TName;
-} & InputPasswordProps &
-  FormFieldProps;
-
-export const FormFieldPassword = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  label,
-  name,
-  tooltip,
-  onTooltipClick,
-  sx,
-  defaultValue = '',
-  ...inputProps
-}: FormFieldPasswordProps<TName>) => {
-  return (
-    <FormField
-      name={name}
-      label={label}
-      disabled={inputProps.disabled}
-      tooltip={tooltip}
-      onTooltipClick={onTooltipClick}
-      sx={sx}
-      defaultValue={defaultValue as FieldPathValue<TFieldValues, TName>}
-      render={({ field, fieldState }) => {
-        return (
-          <InputPassword
-            {...inputProps}
-            {...field}
-            aria-invalid={fieldState.error ? 'true' : undefined}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/FormFieldPatternFormat.tsx

@@ -1,36 +0,0 @@
-import { FormField } from './FormField';
-import { Input } from '@ttoss/ui';
-import { PatternFormat, PatternFormatProps } from 'react-number-format';
-
-export type FormFieldPatternFormatProps = {
-  label?: string;
-  name: string;
-} & PatternFormatProps;
-
-export const FormFieldPatternFormat = ({
-  label,
-  name,
-  ...patternFormatProps
-}: FormFieldPatternFormatProps) => {
-  return (
-    <FormField
-      name={name}
-      label={label}
-      render={({ field, fieldState }) => {
-        return (
-          <PatternFormat
-            name={field.name}
-            value={field.value}
-            onBlur={field.onBlur}
-            onValueChange={(values) => {
-              field.onChange(values.value);
-            }}
-            customInput={Input}
-            aria-invalid={Boolean(fieldState.error).valueOf()}
-            {...patternFormatProps}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/FormFieldRadio.tsx

@@ -1,57 +0,0 @@
-import { Box, Flex, Label, Radio, type RadioProps } from '@ttoss/ui';
-import { FieldPath, FieldValues, useController } from 'react-hook-form';
-import { FormErrorMessage } from './FormErrorMessage';
-
-type FormRadioOption = {
-  value: string | number;
-  label: string;
-};
-
-export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
-  label,
-  name,
-  options,
-  sx,
-  ...radioProps
-}: {
-  label?: string;
-  name: FieldPath<TFieldValues>;
-  options: FormRadioOption[];
-} & RadioProps) => {
-  const {
-    field: { onChange, onBlur, value, ref },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } = useController<any>({
-    name,
-    defaultValue: '',
-  });
-
-  return (
-    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
-      {label && <Label sx={{ marginBottom: 'md' }}>{label}</Label>}
-      <Box>
-        {options.map((option: FormRadioOption) => {
-          const id = `form-field-radio-${name}-${option.value}`;
-
-          return (
-            <Label key={id} htmlFor={id}>
-              <Radio
-                ref={ref}
-                onChange={onChange}
-                onBlur={onBlur}
-                value={option.value}
-                checked={value === option.value}
-                name={name}
-                id={id}
-                {...radioProps}
-              />
-              {option.label}
-            </Label>
-          );
-        })}
-      </Box>
-
-      <FormErrorMessage name={name} />
-    </Flex>
-  );
-};

package/src/FormFieldSelect.tsx

@@ -1,47 +0,0 @@
-import { FieldPath, FieldValues } from 'react-hook-form';
-import { FormField, FormFieldProps } from './FormField';
-import { Select, type SelectProps } from '@ttoss/ui';
-
-type FormFieldSelectProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, TName>;
-
-export const FormFieldSelect = <
-  TFieldValues extends FieldValues = FieldValues,
->({
-  label,
-  name,
-  id,
-  defaultValue,
-  sx,
-  css,
-  disabled,
-  tooltip,
-  onTooltipClick,
-  ...selectProps
-}: FormFieldSelectProps<TFieldValues>) => {
-  return (
-    <FormField
-      name={name}
-      label={label}
-      id={id}
-      defaultValue={defaultValue}
-      disabled={disabled}
-      tooltip={tooltip}
-      onTooltipClick={onTooltipClick}
-      sx={sx}
-      css={css}
-      render={({ field, fieldState }) => {
-        return (
-          <Select
-            {...selectProps}
-            {...field}
-            isDisabled={disabled}
-            aria-invalid={fieldState.error ? 'true' : undefined}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/FormFieldTextarea.tsx

@@ -1,36 +0,0 @@
-import { FieldPath, FieldValues } from 'react-hook-form';
-import { FormField } from './FormField';
-import { Textarea, type TextareaProps } from '@ttoss/ui';
-
-export const FormFieldTextarea = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  label,
-  name,
-  sx,
-  ...textareaProps
-}: {
-  label?: string;
-  name: TName;
-} & TextareaProps) => {
-  const id = `form-field-textarea-${name}`;
-
-  return (
-    <FormField
-      label={label}
-      name={name}
-      id={id}
-      sx={sx}
-      render={({ field, fieldState }) => {
-        return (
-          <Textarea
-            {...field}
-            {...textareaProps}
-            aria-invalid={fieldState.error ? 'true' : undefined}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/FormGroup.tsx

@@ -1,136 +0,0 @@
-import * as React from 'react';
-import { Box, BoxProps, Flex, FlexProps, Text } from '@ttoss/ui';
-import { FormErrorMessage } from './FormErrorMessage';
-
-type FormGroupLevelsManagerContextType = {
-  levelsLength: number;
-  registerChild: (level: number) => void;
-};
-
-const FormGroupLevelsManagerContext =
-  React.createContext<FormGroupLevelsManagerContextType>({
-    levelsLength: 1,
-    registerChild: () => {
-      return null;
-    },
-  });
-
-const FormGroupLevelsManager = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  const [levelsLength, setLevelsLength] = React.useState(0);
-
-  const registerChild = React.useCallback(
-    (level: number) => {
-      if (level + 1 > levelsLength) {
-        setLevelsLength(level + 1);
-      }
-    },
-    [levelsLength]
-  );
-
-  return (
-    <FormGroupLevelsManagerContext.Provider
-      value={{ levelsLength, registerChild }}
-    >
-      {children}
-    </FormGroupLevelsManagerContext.Provider>
-  );
-};
-
-type FormGroupContextType = {
-  parentLevel?: number;
-};
-
-const FormGroupContext = React.createContext<FormGroupContextType>({});
-
-export const useFormGroup = () => {
-  const { parentLevel } = React.useContext(FormGroupContext);
-  const { levelsLength } = React.useContext(FormGroupLevelsManagerContext);
-
-  return {
-    level: parentLevel,
-    levelsLength,
-  };
-};
-
-type FormGroupProps = {
-  name?: string;
-  title?: string;
-  direction?: 'column' | 'row';
-} & BoxProps;
-
-const FormGroupWrapper = ({
-  title,
-  direction,
-  children,
-  name,
-  ...boxProps
-}: FormGroupProps) => {
-  const { level } = useFormGroup();
-
-  const { registerChild } = React.useContext(FormGroupLevelsManagerContext);
-
-  React.useEffect(() => {
-    /**
-     * We can't use if(level) because level can be 0 and we want to register
-     * it anyway.
-     */
-    if (typeof level === 'number') {
-      registerChild(level);
-    }
-  }, [level, registerChild]);
-
-  const childrenContainerSx: FlexProps['sx'] = {
-    flexDirection: direction || 'column',
-    gap: 'md',
-    width: '100%',
-  };
-
-  return (
-    <Box
-      aria-level={level}
-      {...boxProps}
-      sx={{
-        marginTop: level === 0 ? 'none' : 'lg',
-        marginBottom: 'lg',
-        ...boxProps.sx,
-      }}
-    >
-      {title && (
-        <Box sx={{ marginBottom: 'md' }}>
-          <Text
-            sx={{
-              fontSize: '2xl',
-              fontWeight: 'bold',
-            }}
-          >
-            {title}
-          </Text>
-        </Box>
-      )}
-      <Flex sx={childrenContainerSx}>{children}</Flex>
-      {name && <FormErrorMessage name={name} />}
-    </Box>
-  );
-};
-
-export const FormGroup = (props: FormGroupProps) => {
-  const { level } = useFormGroup();
-
-  const currentLevel = level === undefined ? 0 : level + 1;
-
-  return (
-    <FormGroupContext.Provider value={{ parentLevel: currentLevel }}>
-      {currentLevel === 0 ? (
-        <FormGroupLevelsManager>
-          <FormGroupWrapper {...props} />
-        </FormGroupLevelsManager>
-      ) : (
-        <FormGroupWrapper {...props} />
-      )}
-    </FormGroupContext.Provider>
-  );
-};

package/src/MultistepForm/MultistepFlowMessage.tsx

@@ -1,14 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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>
-  );
-};