@ttoss/forms 0.26.0 → 0.26.1

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>
-  );
-};

package/src/MultistepForm/MultistepHeader.tsx

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

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

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

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

package/src/MultistepForm/types.ts

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