react-hook-form-next-ui 3.0.7

package/README.md

@@ -0,0 +1,124 @@
+# Configure your project
+
+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.
+
+
+## Demo
+[Storybook - Demo](https://storybook-rhfnextui.web.app)
+
+## Install the library
+
+```bash
+npm i react-hook-form-next-ui
+```
+
+## Update tailwind file *(tailwind.config.js)*
+
+
+It is important to import the styles from NextUI and this library.
+
+```js
+//tailwind.config.js
+import { heroui } from "@heroui/react";
+
+export default {
+  content: [
+    "./node_modules/react-hook-form-next-ui/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    heroui()
+  ]
+}
+```
+
+## Example 
+
+```js
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form"
+import { Button } from "@heroui/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
+```
+
+NPM TOKEN
+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

package/dist/index.d.ts

@@ -0,0 +1,240 @@
+import { AnyObject } from 'yup';
+import { AutocompleteItemProps } from '@heroui/react';
+import { AutocompleteProps } from '@heroui/react';
+import { ButtonProps } from '@heroui/react';
+import { CheckboxGroupProps } from '@heroui/react';
+import { CheckboxProps } from '@heroui/react';
+import { DatePickerProps } from '@heroui/react';
+import { DateValue } from '@heroui/react';
+import { default as default_2 } from 'react';
+import { InputOtpProps } from '@heroui/react';
+import { InputProps } from '@heroui/react';
+import { MixedSchema } from 'yup';
+import { ModalProps } from '@heroui/react';
+import { RadioGroupProps } from '@heroui/react';
+import { RadioProps } from '@heroui/react';
+import { ReactNode } from 'react';
+import { RegisterOptions } from 'react-hook-form';
+import { SelectItemProps } from '@heroui/react';
+import { SelectProps } from '@heroui/react';
+import { TableColumnProps } from '@heroui/react';
+import { TableProps } from '@heroui/react';
+import { TextAreaProps } from '@heroui/react';
+import { TimeInputProps } from '@heroui/react';
+import { TimeInputValue } from '@heroui/react';
+
+declare interface ColumnFormat {
+    value: string;
+    row: any;
+}
+
+export declare interface ColumnsTableProps extends Omit<TableColumnProps<any>, "children"> {
+    format?: ({ value, row }: ColumnFormat) => ReactNode;
+    dateFormat?: string;
+}
+
+export declare const DataTable: ({ hideFilterSearch, loading, isVirtualized, onSelect, selectionMode, inputSearch, hideRowsPerPageOptions, extraTopContent, cellClass, rows, columns, keyRow, itemsName, rowsPerPageOptions, ...props }: DataTableProps) => default_2.JSX.Element;
+
+export declare interface DataTableProps extends TableProps {
+    rows: any[];
+    keyRow?: string;
+    rowsPerPageOptions?: RowsPerPageTableProps;
+    hideRowsPerPageOptions?: boolean;
+    inputSearch?: InputProps;
+    hideFilterSearch?: boolean;
+    extraTopContent?: ReactNode;
+    columns: ColumnsTableProps[];
+    loading?: boolean;
+    onSelect?: (row: any) => void;
+    itemsName?: string;
+    cellClass?: string;
+}
+
+declare const dateMinMaxValidate: ({ minDate, maxDate }: DateMinMaxValueProps) => MixedSchema<DateValue | undefined, AnyObject, undefined, "">;
+
+declare interface DateMinMaxValueProps {
+    minDate?: string;
+    maxDate?: string;
+}
+
+declare const dualDateValidate: ({ endDate, startDate, range, type, maxEndDate, maxStartDate, minEndDate, minStartDate }: DualDateValidateProps) => {
+    startDateRule: MixedSchema<DateValue | undefined, AnyObject, undefined, "">;
+    endDateRule: MixedSchema<DateValue | undefined, AnyObject, undefined, "">;
+};
+
+declare interface DualDateValidateProps {
+    startDate: string;
+    endDate: string;
+    type?: TypeRangeDateValue;
+    range?: number;
+    maxStartDate?: string;
+    minStartDate?: string;
+    maxEndDate?: string;
+    minEndDate?: string;
+}
+
+declare const dualTimeValidate: ({ endTime, startTime, range, type }: DualTimeValidateProps) => {
+    startTimeRule: MixedSchema<TimeInputValue | undefined, AnyObject, undefined, "">;
+    endTimeRule: MixedSchema<TimeInputValue | undefined, AnyObject, undefined, "">;
+};
+
+declare interface DualTimeValidateProps {
+    startTime: string;
+    endTime: string;
+    range?: number;
+    type?: TypeRangeTimeValue;
+}
+
+declare type Icolor = "danger" | "default" | "primary" | "secondary" | "success" | "warning" | undefined;
+
+export declare const Layout: ({ children, title, color }: RHFNextUiLayoutProps) => default_2.JSX.Element;
+
+export declare function Modal({ display, onClose, children, title, cancelButton, acceptButton, ...props }: RHFNextUiModalProps): default_2.JSX.Element;
+
+export declare const Panel: ({ title, color, children, collapse }: RHFNextUiPanelProps) => default_2.JSX.Element;
+
+export declare const RHFAutocomplete: ({ onSelectionChange, defaultSelectedKey, name, data, rules, ...props }: RHFAutocompleteProps) => default_2.JSX.Element;
+
+declare interface RHFAutocompleteProps extends Omit<AutocompleteProps, "children" | "defaultItems" | "selectedKey" | "isInvalid" | "errorMessage"> {
+    name: string;
+    rules?: RegisterOptions;
+    data: AutocompleteItemProps[];
+}
+
+export declare const RHFCheckbox: ({ rules, name, ...props }: RHFCheckboxProps) => default_2.JSX.Element;
+
+export declare const RHFCheckboxGroup: ({ defaultValue, rules, name, data, ...props }: RHFCheckboxProps_2) => default_2.JSX.Element;
+
+declare interface RHFCheckboxProps extends Omit<CheckboxProps, "isSelected" | "isInvalid"> {
+    rules?: RegisterOptions;
+    name: string;
+}
+
+declare interface RHFCheckboxProps_2 extends Omit<CheckboxGroupProps, "children" | "isInvalid"> {
+    rules?: RegisterOptions;
+    name: string;
+    data: CheckboxProps[];
+}
+
+export declare const RHFDate: ({ name, rules, defaultValue, ...props }: RHFDateProps) => default_2.JSX.Element;
+
+declare interface RHFDateProps extends Omit<DatePickerProps, "value" | "errorMessage" | "isInvalid"> {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+export declare const RHFDualDate: ({ startDate, endDate }: RHFDualDateProps) => default_2.JSX.Element;
+
+declare interface RHFDualDateProps {
+    startDate: RHFNextUiDate;
+    endDate: RHFNextUiDate;
+}
+
+export declare const RHFDualTime: ({ startTime, endTime }: RHFDualTimeProps) => default_2.JSX.Element;
+
+declare interface RHFDualTimeProps {
+    startTime: RHFTimeProps_2;
+    endTime: RHFTimeProps_2;
+}
+
+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 Omit<InputProps, "errorMessage" | "isInvalid"> {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+declare interface RHFInputProps_2 extends Omit<InputOtpProps, "errorMessage" | "isInvalid"> {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+declare interface RHFNextUiDate extends Omit<DatePickerProps, "value" | "errorMessage" | "isInvalid"> {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+declare type RHFNextUiLayoutProps = {
+    children: ReactNode;
+    title: string;
+    color?: Icolor;
+};
+
+declare interface RHFNextUiModalProps extends Omit<ModalProps, "onOpenChange" | "isOpen"> {
+    display: boolean;
+    children: ReactNode;
+    title?: string;
+    onClose: () => void;
+    cancelButton?: ButtonProps;
+    acceptButton?: ButtonProps;
+}
+
+declare interface RHFNextUiPanelProps {
+    title: string;
+    children: ReactNode;
+    color?: Icolor;
+    collapse?: boolean;
+}
+
+export declare const RHFRadioGroup: ({ data, rules, name, defaultValue, ...props }: RHFRadioGroupProps) => default_2.JSX.Element;
+
+declare interface RHFRadioGroupProps extends Omit<RadioGroupProps, "isInvalid" | "errorMessage"> {
+    rules?: RegisterOptions;
+    data: RadioProps[];
+    name: string;
+}
+
+export declare const RHFSelect: ({ name, data, rules, defaultSelectedKeys, disabledKeys, renderValue, allOptions, allSelectText, onSelectionChange, selectionMode, ...props }: RHFSelectProps) => default_2.JSX.Element;
+
+declare interface RHFSelectProps extends Omit<SelectProps, "children" | "items" | "selectedKeys" | "errorMessage" | "isInvalid"> {
+    name: string;
+    rules?: RegisterOptions;
+    data: SelectItemProps[];
+    allOptions?: Omit<SelectItemProps, "key">;
+    allSelectText?: string;
+}
+
+export declare const RHFTextArea: ({ defaultValue, rules, name, classNames, ...props }: RHFTextAreaProps) => default_2.JSX.Element;
+
+declare interface RHFTextAreaProps extends Omit<TextAreaProps, "errorMessage" | "isInvalid"> {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+export declare const RHFTime: ({ name, rules, defaultValue, ...props }: RHFTimeProps) => default_2.JSX.Element;
+
+declare interface RHFTimeProps extends Omit<TimeInputProps, "value" | "errorMessage" | "isInvalid"> {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+declare interface RHFTimeProps_2 extends Omit<TimeInputProps, "value" | "errorMessage" | "isInvalid"> {
+    rules?: RegisterOptions;
+    name: string;
+}
+
+declare interface RowsPerPageTableProps {
+    default: number;
+    options: number[];
+}
+
+export declare interface SkeletonTableProps {
+    size?: number;
+    columns: ColumnsTableProps[];
+}
+
+declare type TypeRangeDateValue = "days" | "months" | "years";
+
+declare type TypeRangeTimeValue = "hours" | "minutes";
+
+export declare namespace validation {
+    export {
+        dualDateValidate,
+        dateMinMaxValidate,
+        dualTimeValidate
+    }
+}
+
+export { }