@delightui/components 0.1.160 → 0.1.162-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/atoms/Checkbox/Checkbox.d.ts +1 -1
- package/dist/cjs/components/atoms/Checkbox/Checkbox.presenter.d.ts +1 -1
- package/dist/cjs/components/atoms/CheckboxItem/CheckboxItem.d.ts +1 -1
- package/dist/cjs/components/atoms/CheckboxItem/CheckboxItem.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/CustomToggle/CustomToggle.d.ts +1 -1
- package/dist/cjs/components/atoms/Input/Input.d.ts +1 -1
- package/dist/cjs/components/atoms/Input/Input.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/Password/Password.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/RadioButton/RadioButton.d.ts +1 -1
- package/dist/cjs/components/atoms/RadioButtonItem/RadioButtonItem.d.ts +1 -1
- package/dist/cjs/components/atoms/RadioButtonItem/RadioButtonItem.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/TextArea/TextArea.d.ts +1 -1
- package/dist/cjs/components/atoms/TextArea/TextArea.presenter.d.ts +1 -1
- package/dist/cjs/components/atoms/Toggle/Toggle.d.ts +1 -1
- package/dist/cjs/components/atoms/Toggle/Toggle.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/ToggleButton/ToggleButton.d.ts +1 -1
- package/dist/cjs/components/molecules/FormField/FormField.d.ts +28 -2
- package/dist/cjs/components/molecules/FormField/FormField.presenter.d.ts +14 -8
- package/dist/cjs/components/molecules/FormField/FormField.types.d.ts +85 -52
- package/dist/cjs/components/molecules/FormField/FormField.utils.d.ts +8 -11
- package/dist/cjs/components/molecules/FormField/index.d.ts +1 -2
- package/dist/cjs/components/molecules/FormField/useSafeController.d.ts +14 -0
- package/dist/cjs/components/molecules/FormField/useSafeFormContext.d.ts +8 -0
- package/dist/cjs/components/molecules/Modal/DemoModal.d.ts +1 -0
- package/dist/cjs/components/molecules/Modal/ModalContext/ModalContext.types.d.ts +24 -1
- package/dist/cjs/components/molecules/Search/Search.d.ts +1 -1
- package/dist/cjs/components/molecules/Search/Search.presenter.d.ts +2 -2
- package/dist/cjs/components/molecules/Select/Select.presenter.d.ts +4 -4
- package/dist/cjs/components/organisms/Form/Form.d.ts +22 -1
- package/dist/cjs/components/organisms/Form/Form.presenter.d.ts +21 -0
- package/dist/cjs/components/organisms/Form/Form.types.d.ts +27 -131
- package/dist/cjs/components/organisms/Form/examples/DropzoneFormExample.d.ts +6 -0
- package/dist/cjs/components/organisms/Form/examples/UpdatedFormExample.d.ts +2 -0
- package/dist/cjs/components/organisms/Form/{UseFormExample.d.ts → examples/UseFormExample.d.ts} +0 -3
- package/dist/cjs/components/organisms/Form/index.d.ts +4 -4
- package/dist/cjs/components/organisms/Form/useAutosave.d.ts +10 -0
- package/dist/cjs/library.js +3 -3
- package/dist/cjs/library.js.map +1 -1
- package/dist/esm/components/atoms/Checkbox/Checkbox.d.ts +1 -1
- package/dist/esm/components/atoms/Checkbox/Checkbox.presenter.d.ts +1 -1
- package/dist/esm/components/atoms/CheckboxItem/CheckboxItem.d.ts +1 -1
- package/dist/esm/components/atoms/CheckboxItem/CheckboxItem.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/CustomToggle/CustomToggle.d.ts +1 -1
- package/dist/esm/components/atoms/Input/Input.d.ts +1 -1
- package/dist/esm/components/atoms/Input/Input.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/Password/Password.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/RadioButton/RadioButton.d.ts +1 -1
- package/dist/esm/components/atoms/RadioButtonItem/RadioButtonItem.d.ts +1 -1
- package/dist/esm/components/atoms/RadioButtonItem/RadioButtonItem.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/TextArea/TextArea.d.ts +1 -1
- package/dist/esm/components/atoms/TextArea/TextArea.presenter.d.ts +1 -1
- package/dist/esm/components/atoms/Toggle/Toggle.d.ts +1 -1
- package/dist/esm/components/atoms/Toggle/Toggle.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/ToggleButton/ToggleButton.d.ts +1 -1
- package/dist/esm/components/molecules/FormField/FormField.d.ts +28 -2
- package/dist/esm/components/molecules/FormField/FormField.presenter.d.ts +14 -8
- package/dist/esm/components/molecules/FormField/FormField.types.d.ts +85 -52
- package/dist/esm/components/molecules/FormField/FormField.utils.d.ts +8 -11
- package/dist/esm/components/molecules/FormField/index.d.ts +1 -2
- package/dist/esm/components/molecules/FormField/useSafeController.d.ts +14 -0
- package/dist/esm/components/molecules/FormField/useSafeFormContext.d.ts +8 -0
- package/dist/esm/components/molecules/Modal/DemoModal.d.ts +1 -0
- package/dist/esm/components/molecules/Modal/ModalContext/ModalContext.types.d.ts +24 -1
- package/dist/esm/components/molecules/Search/Search.d.ts +1 -1
- package/dist/esm/components/molecules/Search/Search.presenter.d.ts +2 -2
- package/dist/esm/components/molecules/Select/Select.presenter.d.ts +4 -4
- package/dist/esm/components/organisms/Form/Form.d.ts +22 -1
- package/dist/esm/components/organisms/Form/Form.presenter.d.ts +21 -0
- package/dist/esm/components/organisms/Form/Form.types.d.ts +27 -131
- package/dist/esm/components/organisms/Form/examples/DropzoneFormExample.d.ts +6 -0
- package/dist/esm/components/organisms/Form/examples/UpdatedFormExample.d.ts +2 -0
- package/dist/esm/components/organisms/Form/{UseFormExample.d.ts → examples/UseFormExample.d.ts} +0 -3
- package/dist/esm/components/organisms/Form/index.d.ts +4 -4
- package/dist/esm/components/organisms/Form/useAutosave.d.ts +10 -0
- package/dist/esm/library.js +3 -3
- package/dist/esm/library.js.map +1 -1
- package/dist/index.d.ts +172 -232
- package/docs/FORM_MIGRATION_GUIDE.md +631 -0
- package/docs/components/molecules/FormField.md +129 -34
- package/docs/components/organisms/Form.md +858 -162
- package/package.json +4 -1
- package/dist/cjs/components/organisms/Form/DropzoneFormExample.d.ts +0 -6
- package/dist/cjs/components/organisms/Form/Form.utils.d.ts +0 -2
- package/dist/cjs/components/organisms/Form/FormContext.d.ts +0 -5
- package/dist/cjs/components/organisms/Form/UpdatedFormExample.d.ts +0 -23
- package/dist/cjs/components/organisms/Form/useForm.d.ts +0 -50
- package/dist/esm/components/organisms/Form/DropzoneFormExample.d.ts +0 -6
- package/dist/esm/components/organisms/Form/Form.utils.d.ts +0 -2
- package/dist/esm/components/organisms/Form/FormContext.d.ts +0 -5
- package/dist/esm/components/organisms/Form/UpdatedFormExample.d.ts +0 -23
- package/dist/esm/components/organisms/Form/useForm.d.ts +0 -50
- /package/dist/cjs/components/organisms/Form/{AutosaveFormExample.d.ts → examples/AutosaveFormExample.d.ts} +0 -0
- /package/dist/esm/components/organisms/Form/{AutosaveFormExample.d.ts → examples/AutosaveFormExample.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@delightui/components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.162-alpha.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "vite",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"react-dom": "^18.3.1",
|
|
25
25
|
"react-dropzone": "^14.3.5",
|
|
26
26
|
"react-flatpickr": "^3.10.13",
|
|
27
|
+
"react-hook-form": "^7.53.0",
|
|
27
28
|
"react-overlays": "^5.2.1",
|
|
28
29
|
"react-transition-group": "^4.4.5"
|
|
29
30
|
},
|
|
@@ -64,6 +65,7 @@
|
|
|
64
65
|
"eslint-plugin-prettier": "^5.1.3",
|
|
65
66
|
"eslint-plugin-react": "^7.34.2",
|
|
66
67
|
"eslint-plugin-react-hooks": "^4.6.2",
|
|
68
|
+
"eslint-plugin-react-refresh": "^0.4.24",
|
|
67
69
|
"eslint-plugin-storybook": "^0.8.0",
|
|
68
70
|
"jsdom": "^24.1.0",
|
|
69
71
|
"postcss-import": "^16.1.0",
|
|
@@ -87,6 +89,7 @@
|
|
|
87
89
|
"classnames": "^2.5.1",
|
|
88
90
|
"react": "^18.3.1",
|
|
89
91
|
"react-dom": "^18.3.1",
|
|
92
|
+
"react-hook-form": "^7.53.0",
|
|
90
93
|
"react-overlays": "^5.2.1",
|
|
91
94
|
"react-router-dom": "^6.23.1"
|
|
92
95
|
},
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
declare const DropzoneFileModeExample: () => import("react/jsx-runtime").JSX.Element;
|
|
2
|
-
declare const DropzoneURLModeExample: () => import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
declare const DropzoneURLModeWithMetadataExample: () => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
declare const DropzoneFormExample: () => import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
export default DropzoneFormExample;
|
|
6
|
-
export { DropzoneFileModeExample, DropzoneURLModeExample, DropzoneURLModeWithMetadataExample };
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { FormContextValues, FormProviderProps, FormState, FieldValue } from './Form.types';
|
|
3
|
-
declare const FormContext: React.Context<FormContextValues<Partial<Record<string, FieldValue>>> | undefined>;
|
|
4
|
-
export declare const FormProvider: <T extends FormState>(props: FormProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
export default FormContext;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export type ProfileFormValues = {
|
|
2
|
-
name: string;
|
|
3
|
-
email: string;
|
|
4
|
-
address: string;
|
|
5
|
-
password: string;
|
|
6
|
-
termsAccepted: boolean;
|
|
7
|
-
gender: string;
|
|
8
|
-
interests: boolean;
|
|
9
|
-
skillLevel: number;
|
|
10
|
-
experienceRange: [number, number];
|
|
11
|
-
favoriteFramework: string[];
|
|
12
|
-
skills: string[];
|
|
13
|
-
birthdate: string | Date;
|
|
14
|
-
availableForWork: boolean;
|
|
15
|
-
wantsNewsletter: boolean;
|
|
16
|
-
promotionalEmails: boolean;
|
|
17
|
-
darkMode: boolean;
|
|
18
|
-
notifications: boolean;
|
|
19
|
-
preferredContactMethod: string;
|
|
20
|
-
acceptedGuidelines: boolean;
|
|
21
|
-
};
|
|
22
|
-
declare const ProfileForm: () => import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
export default ProfileForm;
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import type { FormContextValues, FormState } from './Form.types';
|
|
2
|
-
/**
|
|
3
|
-
* Custom hook to access form context values.
|
|
4
|
-
* Provides direct access to all form state management functions and values.
|
|
5
|
-
*
|
|
6
|
-
* @throws {Error} If used outside of a Form component
|
|
7
|
-
* @returns {FormContextValues} Object containing form state and control functions
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```tsx
|
|
11
|
-
* const MyCustomField = () => {
|
|
12
|
-
* const {
|
|
13
|
-
* formState,
|
|
14
|
-
* formErrors,
|
|
15
|
-
* updateFieldValue,
|
|
16
|
-
* resetForm
|
|
17
|
-
* } = useForm();
|
|
18
|
-
*
|
|
19
|
-
* return (
|
|
20
|
-
* <div>
|
|
21
|
-
* <input
|
|
22
|
-
* value={formState.myField || ''}
|
|
23
|
-
* onChange={(e) => updateFieldValue('myField', e.target.value)}
|
|
24
|
-
* />
|
|
25
|
-
* {formErrors.myField && <span>{formErrors.myField}</span>}
|
|
26
|
-
* </div>
|
|
27
|
-
* );
|
|
28
|
-
* };
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export declare const useForm: <T extends FormState = Partial<Record<string, import("./Form.types").FieldValue>>>() => FormContextValues<T>;
|
|
32
|
-
/**
|
|
33
|
-
* Type-safe version of useForm that returns properly typed form context
|
|
34
|
-
*
|
|
35
|
-
* @example
|
|
36
|
-
* ```tsx
|
|
37
|
-
* interface MyFormData {
|
|
38
|
-
* name: string;
|
|
39
|
-
* email: string;
|
|
40
|
-
* age: number;
|
|
41
|
-
* }
|
|
42
|
-
*
|
|
43
|
-
* const MyComponent = () => {
|
|
44
|
-
* const form = useFormTyped<MyFormData>();
|
|
45
|
-
* // form.formState is now typed as MyFormData
|
|
46
|
-
* // form.formErrors is now typed as FormErrors<MyFormData>
|
|
47
|
-
* };
|
|
48
|
-
* ```
|
|
49
|
-
*/
|
|
50
|
-
export declare const useFormTyped: <T extends FormState>() => FormContextValues<T>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
declare const DropzoneFileModeExample: () => import("react/jsx-runtime").JSX.Element;
|
|
2
|
-
declare const DropzoneURLModeExample: () => import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
declare const DropzoneURLModeWithMetadataExample: () => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
declare const DropzoneFormExample: () => import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
export default DropzoneFormExample;
|
|
6
|
-
export { DropzoneFileModeExample, DropzoneURLModeExample, DropzoneURLModeWithMetadataExample };
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { FormContextValues, FormProviderProps, FormState, FieldValue } from './Form.types';
|
|
3
|
-
declare const FormContext: React.Context<FormContextValues<Partial<Record<string, FieldValue>>> | undefined>;
|
|
4
|
-
export declare const FormProvider: <T extends FormState>(props: FormProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
export default FormContext;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export type ProfileFormValues = {
|
|
2
|
-
name: string;
|
|
3
|
-
email: string;
|
|
4
|
-
address: string;
|
|
5
|
-
password: string;
|
|
6
|
-
termsAccepted: boolean;
|
|
7
|
-
gender: string;
|
|
8
|
-
interests: boolean;
|
|
9
|
-
skillLevel: number;
|
|
10
|
-
experienceRange: [number, number];
|
|
11
|
-
favoriteFramework: string[];
|
|
12
|
-
skills: string[];
|
|
13
|
-
birthdate: string | Date;
|
|
14
|
-
availableForWork: boolean;
|
|
15
|
-
wantsNewsletter: boolean;
|
|
16
|
-
promotionalEmails: boolean;
|
|
17
|
-
darkMode: boolean;
|
|
18
|
-
notifications: boolean;
|
|
19
|
-
preferredContactMethod: string;
|
|
20
|
-
acceptedGuidelines: boolean;
|
|
21
|
-
};
|
|
22
|
-
declare const ProfileForm: () => import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
export default ProfileForm;
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import type { FormContextValues, FormState } from './Form.types';
|
|
2
|
-
/**
|
|
3
|
-
* Custom hook to access form context values.
|
|
4
|
-
* Provides direct access to all form state management functions and values.
|
|
5
|
-
*
|
|
6
|
-
* @throws {Error} If used outside of a Form component
|
|
7
|
-
* @returns {FormContextValues} Object containing form state and control functions
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```tsx
|
|
11
|
-
* const MyCustomField = () => {
|
|
12
|
-
* const {
|
|
13
|
-
* formState,
|
|
14
|
-
* formErrors,
|
|
15
|
-
* updateFieldValue,
|
|
16
|
-
* resetForm
|
|
17
|
-
* } = useForm();
|
|
18
|
-
*
|
|
19
|
-
* return (
|
|
20
|
-
* <div>
|
|
21
|
-
* <input
|
|
22
|
-
* value={formState.myField || ''}
|
|
23
|
-
* onChange={(e) => updateFieldValue('myField', e.target.value)}
|
|
24
|
-
* />
|
|
25
|
-
* {formErrors.myField && <span>{formErrors.myField}</span>}
|
|
26
|
-
* </div>
|
|
27
|
-
* );
|
|
28
|
-
* };
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export declare const useForm: <T extends FormState = Partial<Record<string, import("./Form.types").FieldValue>>>() => FormContextValues<T>;
|
|
32
|
-
/**
|
|
33
|
-
* Type-safe version of useForm that returns properly typed form context
|
|
34
|
-
*
|
|
35
|
-
* @example
|
|
36
|
-
* ```tsx
|
|
37
|
-
* interface MyFormData {
|
|
38
|
-
* name: string;
|
|
39
|
-
* email: string;
|
|
40
|
-
* age: number;
|
|
41
|
-
* }
|
|
42
|
-
*
|
|
43
|
-
* const MyComponent = () => {
|
|
44
|
-
* const form = useFormTyped<MyFormData>();
|
|
45
|
-
* // form.formState is now typed as MyFormData
|
|
46
|
-
* // form.formErrors is now typed as FormErrors<MyFormData>
|
|
47
|
-
* };
|
|
48
|
-
* ```
|
|
49
|
-
*/
|
|
50
|
-
export declare const useFormTyped: <T extends FormState>() => FormContextValues<T>;
|
|
File without changes
|
|
File without changes
|