react-hook-form-next-ui 1.3.30 → 2.1.1

package/README.md

@@ -1,50 +1,119 @@
-# React + TypeScript + Vite
+# Configure your project
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This library is based on NextUI and React-hook-form. Here you will find form components where we combine these two libraries for easier and faster use. There is also refactoring of components (currently modal and table) for faster and more complete use of all functions.
 
-Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Demo
+[Storybook - Demo](https://storybook-rhfnextui.web.app)
 
-## Expanding the ESLint configuration
+## Install the library
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+```bash
+npm i react-hook-form-next-ui
+```
+
+## Update tailwind file *(tailwind.config.js)*
 
-- Configure the top-level `parserOptions` property like this:
+
+It is important to import the styles from NextUI and this library.
 
 ```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
+export default {
+  content: [
+    "./node_modules/react-hook-form-next-ui/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
   },
-})
+  plugins: [
+    nextui()
+  ]
+}
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+## Example 
 
 ```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form"
+import { Button } from "@nextui-org/react";
+import RHFInput from "../components/RHFInput";
+import schema from "../static/schema";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { IForm } from "../types/app";
+
+const App = () => {
+  const methods = useForm<IForm>({
+    resolver: yupResolver(schema),
+  });
+
+  const onSubmit: SubmitHandler<IForm> = async data => {
+    console.log("🚀 ~ Event ~ data:", data)
+  }
+
+  return (
+    <FormProvider {...methods}>
+      <Panel title="Contact Form" collapse>
+        <form onSubmit={methods.handleSubmit(onSubmit)}>
+          <RHFInput name="user" label="User Name" color="primary" />
+          <Button type="submit">Submit</Button>
+        </form>
+      </Panel>
+    </FormProvider>
+  )
+}
+```
+
+# Yup Schema Helpers (Helper)
+
+This documentation provides an overview of custom helpers for validating dates and times, as well as their integration with `yup`.
+
+## Summary
+
+This set of utilities includes:
+
+- **`dateMinMaxValidate`**: Validates a date within a minimum and maximum range.
+- **`dualDateValidate`**: Generates rules to validate date pairs (start and end) with range restrictions.
+- **`dualTimeValidate`**: Validates time pairs (start and end) with range restrictions.
+
+## Example
+
+```js
+import * as yup  from "yup";
+import { dateMinMaxValidate, dualDateValidate, dualTimeValidate } from "../helpers/yup/dates";
+
+const { endDateRule, startDateRule } = dualDateValidate({
+  startDate: "date1",
+  endDate: "date2",
+  range: 2,
+  type: "months",
+  maxEndDate: "2024-09-28",
+  minEndDate: "2024-09-01",
+  maxStartDate: "2024-09-28",
+  minStartDate: "2024-09-01"
+});
+
+const { endTimeRule, startTimeRule } = dualTimeValidate({
+  endTime: "dualtime2",
+  startTime: "dualtime1",
+  range: 1,
+  type: "hours",
+})
+
+const rangeValue = dateMinMaxValidate({
+  maxDate: "2024-09-05",
+  minDate: "2024-09-02"
 })
+
+const schema = yup
+  .object({
+    date: rangeValue.required(),
+    date1: startDateRule.required(),
+    date2: endDateRule.required(),
+    dualtime1: startTimeRule.required(),
+    dualtime2: endTimeRule.required(),
+  }).required();
+
+export default schema
 ```
+

package/dist/index.d.ts

@@ -1,17 +1,21 @@
 import { AnyObject } from 'yup';
+import { AutocompleteItemProps } from '@nextui-org/react';
 import { AutocompleteProps } from '@nextui-org/react';
 import { ButtonProps } from '@nextui-org/react';
+import { CheckboxGroupProps } from '@nextui-org/react';
+import { CheckboxProps } from '@nextui-org/react';
 import { DatePickerProps } from '@nextui-org/react';
 import { DateValue } from '@nextui-org/react';
 import { default as default_2 } from 'react';
+import { InputOtpProps } from '@nextui-org/react';
 import { InputProps } from '@nextui-org/react';
-import { LocaleObject } from 'yup';
 import { MixedSchema } from 'yup';
 import { ModalProps } from '@nextui-org/react';
 import { RadioGroupProps } from '@nextui-org/react';
 import { RadioProps } from '@nextui-org/react';
 import { ReactNode } from 'react';
 import { RegisterOptions } from 'react-hook-form';
+import { SelectItemProps } from '@nextui-org/react';
 import { SelectProps } from '@nextui-org/react';
 import { TableColumnProps } from '@nextui-org/react';
 import { TableProps } from '@nextui-org/react';
@@ -19,51 +23,38 @@ import { TextAreaProps } from '@nextui-org/react';
 import { TimeInputProps } from '@nextui-org/react';
 import { TimeInputValue } from '@nextui-org/react';
 
-declare const array: LocaleObject['array'];
-
-declare const boolean: LocaleObject['boolean'];
-
-declare interface ButtonModalFooter extends Omit<ButtonProps, "onClick"> {
+declare interface AcceptButton extends Omit<ButtonProps, "onClick"> {
     onClick: () => void | Promise<void>;
 }
 
-export declare interface ColumnsTableProps extends Omit<TableColumnProps<any>, "children"> {
-    export?: boolean;
-    dateFormat?: IdateFormats;
-    renderRow?: ({ value, row }: ReturnRowTable) => ReactNode;
-}
-
-declare interface DataOptionsRHFAutocomplete {
-    key: string;
-    label: string;
+declare interface ColumnFormat {
+    value: string;
+    row: any;
 }
 
-declare interface DataOptionsRHFSelect {
-    key: string;
-    label: string;
+export declare interface ColumnsTableProps extends Omit<TableColumnProps<any>, "children"> {
+    format?: ({ value, row }: ColumnFormat) => ReactNode;
+    dateFormat?: string;
 }
 
-export declare const DataTable: ({ rows, columns, showFilter, loading, keyRow, buttonExcelExport, exportName, skeletonSize, selectionMode, inputSearch, showHandlePaginate, defaultSelectedKeys, onSelect, defaultPaginateNumber, cellClass, excelExport, ...props }: DataTableProps) => default_2.JSX.Element;
+export declare const DataTable: ({ rows, columns, showFilter, loading, keyRow, defaultSelectedKeys, itemsName, selectionMode, inputSearch, showHandlePaginate, extraTopContent, cellClass, onSelect, defaultPaginateNumber, optionsPaginateNumber, ...props }: DataTableProps) => default_2.JSX.Element;
 
-declare interface DataTableProps extends TableProps {
-    buttonExcelExport?: Omit<ButtonProps, "onClick">;
+export declare interface DataTableProps extends TableProps {
     inputSearch?: InputProps;
-    excelExport?: boolean;
-    exportName?: string;
+    extraTopContent?: ReactNode;
     rows: any[];
     columns: ColumnsTableProps[];
     loading?: boolean;
     showFilter?: boolean;
-    showHandlePaginate?: boolean;
     onSelect?: (row: any) => void;
-    defaultPaginateNumber?: 5 | 10 | 15;
+    showHandlePaginate?: boolean;
+    defaultPaginateNumber?: number;
+    optionsPaginateNumber?: number[];
+    itemsName?: string;
     cellClass?: string;
-    skeletonSize?: number;
     keyRow?: string;
 }
 
-declare const date: LocaleObject['date'];
-
 declare const dateMinMaxValidate: ({ minDate, maxDate }: DateMinMaxValueProps) => MixedSchema<DateValue | undefined, AnyObject, undefined, "">;
 
 declare interface DateMinMaxValueProps {
@@ -101,32 +92,33 @@ declare interface DualTimeValidateProps {
 
 declare type Icolor = "danger" | "default" | "primary" | "secondary" | "success" | "warning" | undefined;
 
-declare type IdateFormats = "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD-MM-YYYY hh:mm" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY hh:mm";
-
 export declare const Layout: ({ children, title, color }: RHFNextUiLayoutProps) => default_2.JSX.Element;
 
-declare const mixed: LocaleObject['mixed'];
-
 export declare function Modal({ display, children, title, onCancel, cancelButton, acceptButton, ...props }: RHFNextUiModalProps): default_2.JSX.Element;
 
-declare const number: LocaleObject['number'];
+export declare const Panel: ({ title, color, children, collapse }: RHFNextUiPanelProps) => default_2.JSX.Element;
 
-declare const object: LocaleObject['object'];
+export declare const RHFAutocomplete: ({ onSelectionChange, defaultSelectedKey, name, data, rules, ...props }: RHFAutocompleteProps) => default_2.JSX.Element;
 
-export declare const Panel: ({ title, color, children }: RHFNextUiPanelProps) => default_2.JSX.Element;
-
-declare interface ReturnRowTable {
-    value: string;
-    row: any;
+declare interface RHFAutocompleteProps extends Omit<AutocompleteProps, "children"> {
+    name: string;
+    rules?: RegisterOptions;
+    data: AutocompleteItemProps[];
 }
 
-export declare const RHFAutocomplete: ({ onSelectionChange, defaultValue, name, data, rules, ...props }: RHFAutocompleteProps) => default_2.JSX.Element;
+export declare const RHFCheckbox: ({ rules, name, ...props }: RHFCheckboxProps) => default_2.JSX.Element;
 
-declare interface RHFAutocompleteProps extends Omit<AutocompleteProps, "children"> {
+export declare const RHFCheckboxGroup: ({ defaultValue, rules, name, data, ...props }: RHFCheckboxProps_2) => default_2.JSX.Element;
+
+declare interface RHFCheckboxProps extends CheckboxProps {
+    rules?: RegisterOptions;
     name: string;
+}
+
+declare interface RHFCheckboxProps_2 extends CheckboxGroupProps {
     rules?: RegisterOptions;
-    data: DataOptionsRHFAutocomplete[];
-    defaultValue?: string;
+    name: string;
+    data: CheckboxProps[];
 }
 
 export declare const RHFDate: ({ name, rules, defaultValue, ...props }: RHFDateProps) => default_2.JSX.Element;
@@ -152,11 +144,18 @@ declare interface RHFDualTimeProps {
 
 export declare const RHFInput: ({ defaultValue, rules, name, classNames, ...props }: RHFInputProps) => default_2.JSX.Element;
 
+export declare const RHFInputOtp: ({ defaultValue, rules, name, classNames, ...props }: RHFInputProps_2) => default_2.JSX.Element;
+
 declare interface RHFInputProps extends InputProps {
     name: string;
     rules?: RegisterOptions;
 }
 
+declare interface RHFInputProps_2 extends InputOtpProps {
+    name: string;
+    rules?: RegisterOptions;
+}
+
 declare interface RHFNextUiDate extends DatePickerProps {
     name: string;
     rules?: RegisterOptions;
@@ -172,37 +171,34 @@ declare interface RHFNextUiModalProps extends ModalProps {
     display: boolean;
     onCancel: () => void;
     title?: string;
-    cancelButton?: Omit<ButtonModalFooter, "onClick">;
-    acceptButton?: ButtonModalFooter;
+    cancelButton?: ButtonProps;
+    acceptButton?: AcceptButton;
+    children: ReactNode;
 }
 
 declare interface RHFNextUiPanelProps {
     title: string;
     children: ReactNode;
     color?: Icolor;
+    collapse?: boolean;
 }
 
-export declare const RHFRadioGroup: ({ radio, data, rules, name, defaultValue, ...props }: RHFRadioGroupProps) => default_2.JSX.Element;
-
-declare interface RHFRadioGroupDataProps {
-    key: string;
-    label: string;
-}
+export declare const RHFRadioGroup: ({ data, rules, name, defaultValue, ...props }: RHFRadioGroupProps) => default_2.JSX.Element;
 
 declare interface RHFRadioGroupProps extends RadioGroupProps {
     rules?: RegisterOptions;
-    radio?: RadioProps;
-    data: RHFRadioGroupDataProps[];
+    data: RadioProps[];
     name: string;
 }
 
-export declare const RHFSelect: ({ name, data, rules, defaultOptions, ...props }: RHFSelectProps) => default_2.JSX.Element;
+export declare const RHFSelect: ({ name, data, rules, defaultSelectedKeys, allOptions, allSelectText, onSelectionChange, ...props }: RHFSelectProps) => default_2.JSX.Element;
 
 declare interface RHFSelectProps extends Omit<SelectProps, "children"> {
-    data: DataOptionsRHFSelect[];
     name: string;
     rules?: RegisterOptions;
-    defaultOptions?: string;
+    data: SelectItemProps[];
+    allOptions?: Omit<SelectItemProps, "key">;
+    allSelectText?: string;
 }
 
 export declare const RHFTextArea: ({ defaultValue, rules, name, classNames, ...props }: RHFTextAreaProps) => default_2.JSX.Element;
@@ -224,7 +220,10 @@ declare interface RHFTimeProps_2 extends TimeInputProps {
     name: string;
 }
 
-declare const string: LocaleObject['string'];
+export declare interface SkeletonTableProps {
+    size?: number;
+    columns: ColumnsTableProps[];
+}
 
 declare type TypeRangeDateValue = "days" | "months" | "years";
 
@@ -238,16 +237,4 @@ export declare namespace validation {
     }
 }
 
-export declare namespace yupEs {
-    export {
-        mixed,
-        string,
-        number,
-        date,
-        boolean,
-        object,
-        array
-    }
-}
-
 export { }