@ttoss/forms 0.26.0 → 0.26.2

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.26.0",
+  "version": "0.26.2",
+  "license": "MIT",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -26,8 +27,7 @@
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "sideEffects": true,
   "dependencies": {
@@ -39,8 +39,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^2.0.3",
-    "@ttoss/ui": "^5.0.7"
+    "@ttoss/react-i18n": "^2.0.4",
+    "@ttoss/ui": "^5.0.9"
   },
   "devDependencies": {
     "@types/jest": "^29.5.13",
@@ -50,12 +50,12 @@
     "react-error-boundary": "^4.0.13",
     "tsup": "^8.3.0",
     "yup": "^1.4.0",
-    "@ttoss/config": "^1.34.0",
-    "@ttoss/i18n-cli": "^0.7.21",
-    "@ttoss/react-i18n": "^2.0.3",
-    "@ttoss/react-icons": "^0.4.3",
-    "@ttoss/test-utils": "^2.1.16",
-    "@ttoss/ui": "^5.0.7"
+    "@ttoss/config": "^1.34.1",
+    "@ttoss/i18n-cli": "^0.7.22",
+    "@ttoss/react-i18n": "^2.0.4",
+    "@ttoss/react-icons": "^0.4.4",
+    "@ttoss/test-utils": "^2.1.17",
+    "@ttoss/ui": "^5.0.9"
   },
   "publishConfig": {
     "access": "public",

package/src/Brazil/FormFieldCEP.tsx

@@ -1,25 +0,0 @@
-import {
-  FormFieldPatternFormat,
-  FormFieldPatternFormatProps,
-} from '../FormFieldPatternFormat';
-
-export type FormFieldCEPProps = {
-  label: string;
-  name: string;
-} & Partial<FormFieldPatternFormatProps>;
-
-export const FormFieldCEP = ({
-  label,
-  name,
-  ...formFieldPatternFormatProps
-}: FormFieldCEPProps) => {
-  return (
-    <FormFieldPatternFormat
-      name={name}
-      label={label}
-      format="#####-###"
-      placeholder="12345-678"
-      {...formFieldPatternFormatProps}
-    />
-  );
-};

package/src/Brazil/FormFieldCNPJ.tsx

@@ -1,93 +0,0 @@
-import { FormField } from '..';
-import { Input } from '@ttoss/ui';
-import { PatternFormat, PatternFormatProps } from 'react-number-format';
-
-export type FormFieldCNPJProps = {
-  label: string;
-  name: string;
-} & Partial<PatternFormatProps>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isCnpjValid = (cnpj: any) => {
-  if (cnpj?.length != 14) {
-    return false;
-  }
-
-  if (
-    cnpj == '00000000000000' ||
-    cnpj == '11111111111111' ||
-    cnpj == '22222222222222' ||
-    cnpj == '33333333333333' ||
-    cnpj == '44444444444444' ||
-    cnpj == '55555555555555' ||
-    cnpj == '66666666666666' ||
-    cnpj == '77777777777777' ||
-    cnpj == '88888888888888' ||
-    cnpj == '99999999999999'
-  ) {
-    return false;
-  }
-
-  // Valida DVs
-  let size = cnpj.length - 2;
-  let numbers = cnpj.substring(0, size);
-  const digits = cnpj.substring(size);
-  let soma = 0;
-  let pos = size - 7;
-  for (let i = size; i >= 1; i--) {
-    soma += numbers.charAt(size - i) * pos--;
-    if (pos < 2) {
-      pos = 9;
-    }
-  }
-  let result = soma % 11 < 2 ? 0 : 11 - (soma % 11);
-  if (result != digits.charAt(0)) {
-    return false;
-  }
-
-  size = size + 1;
-  numbers = cnpj.substring(0, size);
-  soma = 0;
-  pos = size - 7;
-  for (let i = size; i >= 1; i--) {
-    soma += numbers.charAt(size - i) * pos--;
-    if (pos < 2) {
-      pos = 9;
-    }
-  }
-  result = soma % 11 < 2 ? 0 : 11 - (soma % 11);
-  if (result != digits.charAt(1)) {
-    return false;
-  }
-
-  return true;
-};
-
-export const FormFieldCNPJ = ({
-  label,
-  name,
-  ...patternFormatProps
-}: FormFieldCNPJProps) => {
-  return (
-    <FormField
-      name={name}
-      label={label}
-      render={({ field }) => {
-        return (
-          <PatternFormat
-            name={field.name}
-            value={field.value}
-            onBlur={field.onBlur}
-            onValueChange={(values) => {
-              field.onChange(values.value);
-            }}
-            format={'##.###.###/####-##'}
-            customInput={Input}
-            placeholder="12.345.678/0000-00"
-            {...patternFormatProps}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/Brazil/FormFieldPhone.tsx

@@ -1,41 +0,0 @@
-import { FormField } from '../FormField';
-import { Input } from '@ttoss/ui';
-
-import { PatternFormat, PatternFormatProps } from 'react-number-format';
-
-export type FormFieldPhoneProps = {
-  label: string;
-  name: string;
-} & Partial<PatternFormatProps>;
-
-export const FormFieldPhone = ({
-  label,
-  name,
-  ...patternFormatProps
-}: FormFieldPhoneProps) => {
-  return (
-    <FormField
-      name={name}
-      label={label}
-      render={({ field }) => {
-        const format =
-          field.value?.length > 10 ? '(##) #####-####' : '(##) ####-#####';
-
-        return (
-          <PatternFormat
-            name={field.name}
-            value={field.value}
-            onBlur={field.onBlur}
-            onValueChange={(values) => {
-              field.onChange(values.value);
-            }}
-            format={format}
-            customInput={Input}
-            placeholder="(11) 91234-1234"
-            {...patternFormatProps}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/Brazil/index.ts

@@ -1,4 +0,0 @@
-export { FormFieldCNPJ } from './FormFieldCNPJ';
-export { FormFieldPhone } from './FormFieldPhone';
-export { FormFieldCEP } from './FormFieldCEP';
-export { isCnpjValid } from './FormFieldCNPJ';

package/src/Form.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { Box, BoxProps } from '@ttoss/ui';
-import { FieldValues, FormProvider, FormProviderProps } from 'react-hook-form';
-
-export const Form = <TFieldValues extends FieldValues = FieldValues>({
-  children,
-  onSubmit,
-  sx,
-  ...formMethods
-}: {
-  children?: React.ReactNode;
-  onSubmit?: (data: TFieldValues) => Promise<void> | void;
-  sx?: BoxProps['sx'];
-} & FormProviderProps<TFieldValues>) => {
-  return (
-    <FormProvider {...formMethods}>
-      <Box
-        as="form"
-        variant="forms.form"
-        onSubmit={formMethods.handleSubmit((data) => {
-          return onSubmit?.(data);
-        })}
-        sx={sx}
-      >
-        {children}
-      </Box>
-    </FormProvider>
-  );
-};

package/src/FormErrorMessage.tsx

@@ -1,60 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { ErrorMessage } from '@hookform/error-message';
-import {
-  FieldError,
-  FieldName,
-  FieldValues,
-  useFormContext,
-} from 'react-hook-form';
-import { FormattedMessage, MessageDescriptor } from '@ttoss/react-i18n';
-import { HelpText } from '@ttoss/ui';
-
-type ModifiedDescriptor = MessageDescriptor & { values?: any };
-
-const isMessageDescriptor = (
-  possibleMessageDescriptor: unknown
-): possibleMessageDescriptor is ModifiedDescriptor => {
-  return (
-    possibleMessageDescriptor !== undefined &&
-    (possibleMessageDescriptor as ModifiedDescriptor).defaultMessage !==
-      undefined
-  );
-};
-
-export const FormErrorMessage = <
-  TFieldValues extends FieldValues = FieldValues,
->({
-  name,
-  disabled,
-}: {
-  name: FieldName<TFieldValues>;
-  disabled?: boolean;
-}) => {
-  const {
-    formState: { errors },
-  } = useFormContext<TFieldValues>();
-
-  return (
-    <ErrorMessage
-      name={name as any}
-      errors={errors}
-      render={({ message }: { message: FieldError | string }) => {
-        return (
-          <HelpText negative disabled={disabled}>
-            {(() => {
-              if (typeof message === 'string') {
-                return message;
-              }
-
-              if (isMessageDescriptor(message)) {
-                return <FormattedMessage {...message} />;
-              }
-
-              return JSON.stringify(message);
-            })()}
-          </HelpText>
-        );
-      }}
-    />
-  );
-};

package/src/FormField.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import {
-  FieldPath,
-  FieldPathValue,
-  FieldValues,
-  UseControllerReturn,
-  useController,
-} from 'react-hook-form';
-import { Flex, Label, type SxProp } from '@ttoss/ui';
-import { FormErrorMessage } from './FormErrorMessage';
-
-export type FormFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  label?: string;
-  id?: string;
-  name: TName;
-  defaultValue?: FieldPathValue<TFieldValues, TName>;
-  disabled?: boolean;
-  tooltip?: boolean;
-  onTooltipClick?: () => void;
-} & SxProp;
-
-type FormFieldCompleteProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  render: (
-    props: UseControllerReturn<TFieldValues, TName>
-  ) => React.ReactElement;
-} & FormFieldProps<TFieldValues, TName>;
-
-export const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  label,
-  id: idProp,
-  name,
-  defaultValue,
-  disabled,
-  tooltip,
-  onTooltipClick,
-  sx,
-  css,
-  render,
-}: FormFieldCompleteProps<TFieldValues, TName>) => {
-  const controllerReturn = useController<TFieldValues, TName>({
-    name,
-    defaultValue,
-  });
-
-  const id = idProp || `form-field-${name}`;
-
-  const memoizedRender = React.useMemo(() => {
-    return React.Children.map(render(controllerReturn), (child) => {
-      return (
-        <>
-          {label && (
-            <Label
-              aria-disabled={disabled}
-              htmlFor={id}
-              tooltip={tooltip}
-              onTooltipClick={onTooltipClick}
-            >
-              {label}
-            </Label>
-          )}
-
-          {React.createElement(child.type, { id, ...child.props })}
-        </>
-      );
-    });
-  }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
-
-  return (
-    <Flex
-      sx={{ flexDirection: 'column', width: '100%', gap: 'md', ...sx }}
-      css={css}
-    >
-      {memoizedRender}
-      <FormErrorMessage name={name} />
-    </Flex>
-  );
-};

package/src/FormFieldCheckbox.tsx

@@ -1,49 +0,0 @@
-import { Checkbox, type CheckboxProps, Flex, Label } from '@ttoss/ui';
-import { FieldPath, FieldValues, useController } from 'react-hook-form';
-import { FormErrorMessage } from './FormErrorMessage';
-
-export const FormFieldCheckbox = <
-  TFieldValues extends FieldValues = FieldValues,
->({
-  label,
-  name,
-  sx,
-  ...checkboxProps
-}: {
-  label?: string;
-  name: FieldPath<TFieldValues>;
-} & CheckboxProps) => {
-  const {
-    field: { onChange, onBlur, value, ref },
-    formState: { errors },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } = useController<any>({
-    name,
-    defaultValue: false,
-  });
-
-  const id = `form-field-checkbox-${name}`;
-
-  const error = !!errors[name]?.message;
-
-  return (
-    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
-      <Flex sx={{ alignItems: 'center' }}>
-        <Label aria-disabled={checkboxProps.disabled} htmlFor={id}>
-          <Checkbox
-            id={id}
-            ref={ref}
-            checked={value}
-            onChange={onChange}
-            onBlur={onBlur}
-            name={name}
-            aria-invalid={error ? 'true' : 'false'}
-            {...checkboxProps}
-          />
-          {label}
-        </Label>
-      </Flex>
-      <FormErrorMessage name={name} />
-    </Flex>
-  );
-};

package/src/FormFieldCreditCardNumber.tsx

@@ -1,25 +0,0 @@
-import {
-  FormFieldPatternFormat,
-  FormFieldPatternFormatProps,
-} from './FormFieldPatternFormat';
-
-export type FormFieldCreditCardNumberProps = {
-  label: string;
-  name: string;
-} & Partial<FormFieldPatternFormatProps>;
-
-export const FormFieldCreditCardNumber = ({
-  label,
-  name,
-  ...formFieldPatternFormatProps
-}: FormFieldCreditCardNumberProps) => {
-  return (
-    <FormFieldPatternFormat
-      name={name}
-      label={label}
-      format="#### #### #### ####"
-      placeholder="1234 1234 1234 1234"
-      {...formFieldPatternFormatProps}
-    />
-  );
-};

package/src/FormFieldCurrencyInput.tsx

@@ -1,36 +0,0 @@
-import {
-  FormFieldNumericFormat,
-  FormFieldNumericFormatProps,
-} from './FormFieldNumericFormat';
-
-export type FormFieldCurrencyInputProps = {
-  label?: string;
-  name: string;
-  prefix: string;
-  decimalSeparator: string;
-  thousandSeparator: string;
-} & FormFieldNumericFormatProps;
-
-export const FormFieldCurrencyInput = ({
-  label,
-  name,
-  prefix,
-  decimalSeparator,
-  thousandSeparator,
-  ...formFieldNumericFormatProps
-}: FormFieldCurrencyInputProps) => {
-  return (
-    <FormFieldNumericFormat
-      name={name}
-      label={label}
-      fixedDecimalScale
-      decimalScale={2}
-      prefix={prefix}
-      decimalSeparator={decimalSeparator}
-      thousandSeparator={thousandSeparator}
-      placeholder={`${prefix} 0${decimalSeparator}00`}
-      allowNegative={false}
-      {...formFieldNumericFormatProps}
-    />
-  );
-};

package/src/FormFieldInput.tsx

@@ -1,43 +0,0 @@
-import { FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
-import { FormField, type FormFieldProps } from './FormField';
-import { Input, type InputProps } from '@ttoss/ui';
-
-export type FormFieldInputProps<TName> = {
-  label?: string;
-  name: TName;
-} & InputProps &
-  FormFieldProps;
-
-export const FormFieldInput = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  label,
-  name,
-  tooltip,
-  onTooltipClick,
-  sx,
-  defaultValue = '',
-  ...inputProps
-}: FormFieldInputProps<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 (
-          <Input
-            {...inputProps}
-            {...field}
-            aria-invalid={fieldState.error ? 'true' : undefined}
-          />
-        );
-      }}
-    />
-  );
-};

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