@mapples/form 1.0.1

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.
Files changed (74) hide show
  1. package/README.md +411 -0
  2. package/dist/components/Form.d.ts +37 -0
  3. package/dist/components/Form.d.ts.map +1 -0
  4. package/dist/components/Form.js +111 -0
  5. package/dist/components/Form.js.map +1 -0
  6. package/dist/components/index.d.ts +3 -0
  7. package/dist/components/index.d.ts.map +1 -0
  8. package/dist/components/index.js +3 -0
  9. package/dist/components/index.js.map +1 -0
  10. package/dist/context/FormContext.d.ts +19 -0
  11. package/dist/context/FormContext.d.ts.map +1 -0
  12. package/dist/context/FormContext.js +28 -0
  13. package/dist/context/FormContext.js.map +1 -0
  14. package/dist/context/index.d.ts +4 -0
  15. package/dist/context/index.d.ts.map +1 -0
  16. package/dist/context/index.js +4 -0
  17. package/dist/context/index.js.map +1 -0
  18. package/dist/hooks/index.d.ts +11 -0
  19. package/dist/hooks/index.d.ts.map +1 -0
  20. package/dist/hooks/index.js +11 -0
  21. package/dist/hooks/index.js.map +1 -0
  22. package/dist/hooks/useBindFormField.d.ts +43 -0
  23. package/dist/hooks/useBindFormField.d.ts.map +1 -0
  24. package/dist/hooks/useBindFormField.js +93 -0
  25. package/dist/hooks/useBindFormField.js.map +1 -0
  26. package/dist/hooks/useFormArrayField.d.ts +43 -0
  27. package/dist/hooks/useFormArrayField.d.ts.map +1 -0
  28. package/dist/hooks/useFormArrayField.js +88 -0
  29. package/dist/hooks/useFormArrayField.js.map +1 -0
  30. package/dist/hooks/useFormContext.d.ts +28 -0
  31. package/dist/hooks/useFormContext.d.ts.map +1 -0
  32. package/dist/hooks/useFormContext.js +32 -0
  33. package/dist/hooks/useFormContext.js.map +1 -0
  34. package/dist/hooks/useFormField.d.ts +42 -0
  35. package/dist/hooks/useFormField.d.ts.map +1 -0
  36. package/dist/hooks/useFormField.js +79 -0
  37. package/dist/hooks/useFormField.js.map +1 -0
  38. package/dist/hooks/useFormFieldToggle.d.ts +33 -0
  39. package/dist/hooks/useFormFieldToggle.d.ts.map +1 -0
  40. package/dist/hooks/useFormFieldToggle.js +49 -0
  41. package/dist/hooks/useFormFieldToggle.js.map +1 -0
  42. package/dist/hooks/useFormHistory.d.ts +30 -0
  43. package/dist/hooks/useFormHistory.d.ts.map +1 -0
  44. package/dist/hooks/useFormHistory.js +57 -0
  45. package/dist/hooks/useFormHistory.js.map +1 -0
  46. package/dist/hooks/useFormState.d.ts +34 -0
  47. package/dist/hooks/useFormState.d.ts.map +1 -0
  48. package/dist/hooks/useFormState.js +54 -0
  49. package/dist/hooks/useFormState.js.map +1 -0
  50. package/dist/hooks/useFormSubmit.d.ts +27 -0
  51. package/dist/hooks/useFormSubmit.d.ts.map +1 -0
  52. package/dist/hooks/useFormSubmit.js +31 -0
  53. package/dist/hooks/useFormSubmit.js.map +1 -0
  54. package/dist/hooks/useFormValue.d.ts +28 -0
  55. package/dist/hooks/useFormValue.d.ts.map +1 -0
  56. package/dist/hooks/useFormValue.js +43 -0
  57. package/dist/hooks/useFormValue.js.map +1 -0
  58. package/dist/index.d.ts +45 -0
  59. package/dist/index.d.ts.map +1 -0
  60. package/dist/index.js +49 -0
  61. package/dist/index.js.map +1 -0
  62. package/dist/state/index.d.ts +128 -0
  63. package/dist/state/index.d.ts.map +1 -0
  64. package/dist/state/index.js +249 -0
  65. package/dist/state/index.js.map +1 -0
  66. package/dist/types/index.d.ts +71 -0
  67. package/dist/types/index.d.ts.map +1 -0
  68. package/dist/types/index.js +1 -0
  69. package/dist/types/index.js.map +1 -0
  70. package/dist/utils/index.d.ts +40 -0
  71. package/dist/utils/index.d.ts.map +1 -0
  72. package/dist/utils/index.js +95 -0
  73. package/dist/utils/index.js.map +1 -0
  74. package/package.json +40 -0
@@ -0,0 +1,57 @@
1
+ import { useCallback, useContext, useEffect, useState } from 'react';
2
+ import FormContext from '../context';
3
+ /**
4
+ * Hook to manage form history for undo/redo functionality.
5
+ * This hook provides methods to navigate through form history and check availability of undo/redo operations.
6
+ *
7
+ * @returns Object containing history navigation methods and state
8
+ *
9
+ * @example
10
+ * ```tsx
11
+ * const HistoryControls = () => {
12
+ * const { prev, next, canPrev, canNext } = useFormHistory();
13
+ *
14
+ * return (
15
+ * <div>
16
+ * <button onClick={prev} disabled={!canPrev}>Undo</button>
17
+ * <button onClick={next} disabled={!canNext}>Redo</button>
18
+ * </div>
19
+ * );
20
+ * };
21
+ * ```
22
+ *
23
+ * @public
24
+ */
25
+ const useFormHistory = () => {
26
+ const { form } = useContext(FormContext);
27
+ const [state, setState] = useState({ canPrev: false, canNext: false });
28
+ useEffect(() => {
29
+ const unsubscribe = form?.subscribeOnChange(() => {
30
+ setState({
31
+ canPrev: form?.canPrev() || false,
32
+ canNext: form?.canNext() || false,
33
+ });
34
+ });
35
+ return () => {
36
+ unsubscribe?.();
37
+ };
38
+ }, [form]);
39
+ const prev = useCallback(() => {
40
+ if (!form)
41
+ return false;
42
+ return form.prev();
43
+ }, [form]);
44
+ const next = useCallback(() => {
45
+ if (!form)
46
+ return false;
47
+ return form.next();
48
+ }, [form]);
49
+ return {
50
+ prev,
51
+ next,
52
+ canPrev: state.canPrev,
53
+ canNext: state.canNext,
54
+ };
55
+ };
56
+ export default useFormHistory;
57
+ //# sourceMappingURL=useFormHistory.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormHistory.js","sourceRoot":"","sources":["../../src/hooks/useFormHistory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,WAAW,MAAM,YAAY,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,IAAI,EAAE,iBAAiB,CAAC,GAAG,EAAE;YAC/C,QAAQ,CAAC;gBACP,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,KAAK;gBACjC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,KAAK;aAClC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO;QACL,IAAI;QACJ,IAAI;QACJ,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,OAAO,EAAE,KAAK,CAAC,OAAO;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Hook to manage the entire form state with reactive values and control methods.
3
+ * This hook provides access to all form values and methods to update them.
4
+ *
5
+ * @template T - The type of the form data object
6
+ * @returns Object containing form values and control methods
7
+ *
8
+ * @example
9
+ * ```tsx
10
+ * const MyComponent = () => {
11
+ * const { values, setValues, getValues } = useFormState<UserForm>();
12
+ *
13
+ * const handleReset = () => {
14
+ * setValues({ name: '', email: '' });
15
+ * };
16
+ *
17
+ * return (
18
+ * <div>
19
+ * <p>Current values: {JSON.stringify(values)}</p>
20
+ * <button onClick={handleReset}>Reset Form</button>
21
+ * </div>
22
+ * );
23
+ * };
24
+ * ```
25
+ *
26
+ * @public
27
+ */
28
+ declare const useFormState: <T extends object>() => {
29
+ values: T | undefined;
30
+ setValues: (values: T) => void;
31
+ getValues: () => T | undefined;
32
+ };
33
+ export default useFormState;
34
+ //# sourceMappingURL=useFormState.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormState.d.ts","sourceRoot":"","sources":["../../src/hooks/useFormState.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,YAAY,GAAI,CAAC,SAAS,MAAM;;wBAezB,CAAC;qBAOkB,CAAC,GAAG,SAAS;CAQ5C,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,54 @@
1
+ import { useCallback, useContext, useEffect, useState } from 'react';
2
+ import FormContext from '../context';
3
+ /**
4
+ * Hook to manage the entire form state with reactive values and control methods.
5
+ * This hook provides access to all form values and methods to update them.
6
+ *
7
+ * @template T - The type of the form data object
8
+ * @returns Object containing form values and control methods
9
+ *
10
+ * @example
11
+ * ```tsx
12
+ * const MyComponent = () => {
13
+ * const { values, setValues, getValues } = useFormState<UserForm>();
14
+ *
15
+ * const handleReset = () => {
16
+ * setValues({ name: '', email: '' });
17
+ * };
18
+ *
19
+ * return (
20
+ * <div>
21
+ * <p>Current values: {JSON.stringify(values)}</p>
22
+ * <button onClick={handleReset}>Reset Form</button>
23
+ * </div>
24
+ * );
25
+ * };
26
+ * ```
27
+ *
28
+ * @public
29
+ */
30
+ const useFormState = () => {
31
+ const [values, setFormValues] = useState();
32
+ const { form } = useContext(FormContext);
33
+ useEffect(() => {
34
+ const unsubscribe = form?.subscribeOnChange((values) => {
35
+ setFormValues(values);
36
+ });
37
+ return () => {
38
+ unsubscribe?.();
39
+ };
40
+ }, [form]);
41
+ const setValues = useCallback((values) => {
42
+ form?.setValues(values);
43
+ }, [form]);
44
+ const getValues = useCallback(() => {
45
+ return form?.getValues();
46
+ }, [form]);
47
+ return {
48
+ values,
49
+ setValues,
50
+ getValues,
51
+ };
52
+ };
53
+ export default useFormState;
54
+ //# sourceMappingURL=useFormState.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormState.js","sourceRoot":"","sources":["../../src/hooks/useFormState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,WAAW,MAAM,YAAY,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,YAAY,GAAG,GAAqB,EAAE;IAC1C,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,QAAQ,EAAK,CAAC;IAE9C,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,IAAI,EAAE,iBAAiB,CAAI,CAAC,MAAM,EAAE,EAAE;YACxD,aAAa,CAAC,MAAM,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,MAAS,EAAE,EAAE;QACZ,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,OAAO,IAAI,EAAE,SAAS,EAAmB,CAAC;IAC5C,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO;QACL,MAAM;QACN,SAAS;QACT,SAAS;KACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,27 @@
1
+ /**
2
+ * Hook to access form submission state and submit function.
3
+ * This hook provides the current submission state and the submit function.
4
+ *
5
+ * @returns Object containing submission state and submit function
6
+ *
7
+ * @example
8
+ * ```tsx
9
+ * const SubmitButton = () => {
10
+ * const { submitting, submitForm } = useFormSubmit();
11
+ *
12
+ * return (
13
+ * <button onClick={submitForm} disabled={submitting}>
14
+ * {submitting ? 'Submitting...' : 'Submit'}
15
+ * </button>
16
+ * );
17
+ * };
18
+ * ```
19
+ *
20
+ * @public
21
+ */
22
+ declare const useFormSubmit: () => {
23
+ submitting: boolean;
24
+ submitForm: () => void;
25
+ };
26
+ export default useFormSubmit;
27
+ //# sourceMappingURL=useFormSubmit.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormSubmit.d.ts","sourceRoot":"","sources":["../../src/hooks/useFormSubmit.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,aAAa;;;CAOlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -0,0 +1,31 @@
1
+ import useFormContext from './useFormContext';
2
+ /**
3
+ * Hook to access form submission state and submit function.
4
+ * This hook provides the current submission state and the submit function.
5
+ *
6
+ * @returns Object containing submission state and submit function
7
+ *
8
+ * @example
9
+ * ```tsx
10
+ * const SubmitButton = () => {
11
+ * const { submitting, submitForm } = useFormSubmit();
12
+ *
13
+ * return (
14
+ * <button onClick={submitForm} disabled={submitting}>
15
+ * {submitting ? 'Submitting...' : 'Submit'}
16
+ * </button>
17
+ * );
18
+ * };
19
+ * ```
20
+ *
21
+ * @public
22
+ */
23
+ const useFormSubmit = () => {
24
+ const { submitting, submitForm } = useFormContext();
25
+ return {
26
+ submitting,
27
+ submitForm,
28
+ };
29
+ };
30
+ export default useFormSubmit;
31
+ //# sourceMappingURL=useFormSubmit.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormSubmit.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmit.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;IAEpD,OAAO;QACL,UAAU;QACV,UAAU;KACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -0,0 +1,28 @@
1
+ /**
2
+ * Hook to get a reactive value from the form state.
3
+ * This hook subscribes to value changes and returns the current value.
4
+ *
5
+ * @template T - The type of the value to retrieve
6
+ * @param fieldPath - Optional dot notation path to the field. If not provided, returns all form values
7
+ * @returns The current value at the specified path or all form values
8
+ *
9
+ * @example
10
+ * ```tsx
11
+ * const MyComponent = () => {
12
+ * const userName = useFormValue<string>('user.name');
13
+ * const allValues = useFormValue<UserForm>();
14
+ *
15
+ * return (
16
+ * <div>
17
+ * <p>User name: {userName}</p>
18
+ * <p>All values: {JSON.stringify(allValues)}</p>
19
+ * </div>
20
+ * );
21
+ * };
22
+ * ```
23
+ *
24
+ * @public
25
+ */
26
+ declare const useFormValue: <T>(fieldPath?: string) => T | undefined;
27
+ export default useFormValue;
28
+ //# sourceMappingURL=useFormValue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormValue.d.ts","sourceRoot":"","sources":["../../src/hooks/useFormValue.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,YAAY,GAAI,CAAC,EAAE,YAAY,MAAM,kBAkB1C,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,43 @@
1
+ import { useContext, useEffect, useState } from 'react';
2
+ import FormContext from '../context';
3
+ /**
4
+ * Hook to get a reactive value from the form state.
5
+ * This hook subscribes to value changes and returns the current value.
6
+ *
7
+ * @template T - The type of the value to retrieve
8
+ * @param fieldPath - Optional dot notation path to the field. If not provided, returns all form values
9
+ * @returns The current value at the specified path or all form values
10
+ *
11
+ * @example
12
+ * ```tsx
13
+ * const MyComponent = () => {
14
+ * const userName = useFormValue<string>('user.name');
15
+ * const allValues = useFormValue<UserForm>();
16
+ *
17
+ * return (
18
+ * <div>
19
+ * <p>User name: {userName}</p>
20
+ * <p>All values: {JSON.stringify(allValues)}</p>
21
+ * </div>
22
+ * );
23
+ * };
24
+ * ```
25
+ *
26
+ * @public
27
+ */
28
+ const useFormValue = (fieldPath) => {
29
+ const { form } = useContext(FormContext);
30
+ const [value, setValue] = useState();
31
+ useEffect(() => {
32
+ setValue(form?.getValue(fieldPath));
33
+ }, [fieldPath, form]);
34
+ useEffect(() => {
35
+ const unsubscribe = form?.subscribeOnChange(setValue, fieldPath);
36
+ return () => {
37
+ unsubscribe?.();
38
+ };
39
+ }, [fieldPath, form]);
40
+ return value;
41
+ };
42
+ export default useFormValue;
43
+ //# sourceMappingURL=useFormValue.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormValue.js","sourceRoot":"","sources":["../../src/hooks/useFormValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,WAAW,MAAM,YAAY,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,YAAY,GAAG,CAAI,SAAkB,EAAE,EAAE;IAC7C,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAK,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,IAAI,EAAE,iBAAiB,CAAI,QAAQ,EAAE,SAAS,CAAC,CAAC;QAEpE,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,45 @@
1
+ import FormState from './state';
2
+ /**
3
+ * @mapples/form - A comprehensive form management library for React and React Native
4
+ *
5
+ * This package provides a powerful and flexible form state management solution with:
6
+ * - Type-safe form handling with TypeScript support
7
+ * - Yup validation integration
8
+ * - Form history management (undo/redo functionality)
9
+ * - Reactive form state with subscription-based updates
10
+ * - Comprehensive hook-based API for form field management
11
+ * - Support for nested objects and arrays
12
+ * - Touch state tracking for better UX
13
+ *
14
+ * @example
15
+ * ```tsx
16
+ * import { Form, useFormField, useFormSubmit } from '@mapples/form';
17
+ * import * as yup from 'yup';
18
+ *
19
+ * const schema = yup.object({
20
+ * name: yup.string().required('Name is required'),
21
+ * email: yup.string().email().required('Email is required'),
22
+ * });
23
+ *
24
+ * const MyForm = () => (
25
+ * <Form
26
+ * initialValues={{ name: '', email: '' }}
27
+ * validationSchema={schema}
28
+ * onSubmit={async (values) => {
29
+ * console.log('Form submitted:', values);
30
+ * }}
31
+ * >
32
+ * <NameField />
33
+ * <EmailField />
34
+ * <SubmitButton />
35
+ * </Form>
36
+ * );
37
+ * ```
38
+ *
39
+ * @public
40
+ */
41
+ export * from './types';
42
+ export * from './components';
43
+ export * from './hooks';
44
+ export { FormState };
45
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,SAAS,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAGH,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,SAAS,EAAE,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,49 @@
1
+ import FormState from './state';
2
+ /**
3
+ * @mapples/form - A comprehensive form management library for React and React Native
4
+ *
5
+ * This package provides a powerful and flexible form state management solution with:
6
+ * - Type-safe form handling with TypeScript support
7
+ * - Yup validation integration
8
+ * - Form history management (undo/redo functionality)
9
+ * - Reactive form state with subscription-based updates
10
+ * - Comprehensive hook-based API for form field management
11
+ * - Support for nested objects and arrays
12
+ * - Touch state tracking for better UX
13
+ *
14
+ * @example
15
+ * ```tsx
16
+ * import { Form, useFormField, useFormSubmit } from '@mapples/form';
17
+ * import * as yup from 'yup';
18
+ *
19
+ * const schema = yup.object({
20
+ * name: yup.string().required('Name is required'),
21
+ * email: yup.string().email().required('Email is required'),
22
+ * });
23
+ *
24
+ * const MyForm = () => (
25
+ * <Form
26
+ * initialValues={{ name: '', email: '' }}
27
+ * validationSchema={schema}
28
+ * onSubmit={async (values) => {
29
+ * console.log('Form submitted:', values);
30
+ * }}
31
+ * >
32
+ * <NameField />
33
+ * <EmailField />
34
+ * <SubmitButton />
35
+ * </Form>
36
+ * );
37
+ * ```
38
+ *
39
+ * @public
40
+ */
41
+ // Export all types
42
+ export * from './types';
43
+ // Export all components
44
+ export * from './components';
45
+ // Export all hooks
46
+ export * from './hooks';
47
+ // Export FormState class for advanced usage
48
+ export { FormState };
49
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,SAAS,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,mBAAmB;AACnB,cAAc,SAAS,CAAC;AAExB,wBAAwB;AACxB,cAAc,cAAc,CAAC;AAE7B,mBAAmB;AACnB,cAAc,SAAS,CAAC;AAExB,4CAA4C;AAC5C,OAAO,EAAE,SAAS,EAAE,CAAC"}
@@ -0,0 +1,128 @@
1
+ import { ObjectSchema, ValidationError } from 'yup';
2
+ import type { SubscriptionCallBack } from '../types';
3
+ /**
4
+ * FormState manages the state of a form including values, validation, history, and subscriptions.
5
+ * It provides methods to get/set values, validate data, manage history for undo/redo functionality,
6
+ * and subscribe to value changes.
7
+ *
8
+ * @template T - The type of the form data object
9
+ * @public
10
+ */
11
+ declare class FormState<T extends object> {
12
+ private values;
13
+ private validationSchema?;
14
+ private subscriptions;
15
+ private formHistorySubscriptions;
16
+ private errors;
17
+ private history;
18
+ private historyIndex;
19
+ private readonly historyItems;
20
+ private readonly historyItemThrottle;
21
+ private saveCounter;
22
+ private readonly filterHistoryKeys;
23
+ /**
24
+ * Creates a new FormState instance.
25
+ *
26
+ * @param initialValues - The initial values for the form
27
+ * @param validationSchema - Optional Yup validation schema
28
+ * @param historyItems - Number of history items to keep for undo/redo (0 to disable)
29
+ * @param historyItemThrottle - Throttle for saving history items (every Nth change)
30
+ * @param filterHistoryKeys - Array of field paths to exclude from history tracking
31
+ */
32
+ constructor(initialValues: T, validationSchema?: ObjectSchema<T>, historyItems?: number, historyItemThrottle?: number, filterHistoryKeys?: string[]);
33
+ /**
34
+ * Gets a deep copy of all form values.
35
+ *
36
+ * @returns A deep copy of the current form values
37
+ */
38
+ getValues(): T;
39
+ /**
40
+ * Sets validation errors for the form.
41
+ *
42
+ * @param errors - Validation errors organized by field path
43
+ */
44
+ setErrors(errors: Record<string, ValidationError[]>): void;
45
+ /**
46
+ * Gets the current validation errors.
47
+ *
48
+ * @returns Current validation errors or null if no errors
49
+ */
50
+ getErrors(): Record<string, ValidationError[]> | null;
51
+ /**
52
+ * Sets all form values and triggers subscriptions.
53
+ *
54
+ * @param values - New values to set for the form
55
+ */
56
+ setValues(values: T): void;
57
+ /**
58
+ * Sets a value at a specific path and triggers subscriptions.
59
+ *
60
+ * @template V - The type of value being set
61
+ * @param path - Dot notation path to the field (e.g., 'user.name')
62
+ * @param value - The value to set at the specified path
63
+ */
64
+ setValue<V>(path: string, value?: V): void;
65
+ /**
66
+ * Subscribes to form value changes.
67
+ *
68
+ * @template V - The type of value being subscribed to
69
+ * @param cb - Callback function to execute when values change
70
+ * @param path - Optional path to subscribe to a specific field
71
+ * @returns Unsubscribe function to remove the subscription
72
+ */
73
+ subscribeOnChange<V>(cb: SubscriptionCallBack<V>, path?: string): () => boolean;
74
+ /**
75
+ * Subscribes to form history changes (undo/redo operations).
76
+ *
77
+ * @param cb - Callback function to execute when history changes
78
+ * @returns Unsubscribe function to remove the subscription
79
+ */
80
+ subscribeOnHistoryChange(cb: () => void): () => boolean;
81
+ /**
82
+ * Gets a value at a specific path or all values if no path is provided.
83
+ *
84
+ * @template V - The type of value to return
85
+ * @param path - Optional dot notation path to the field
86
+ * @returns The value at the specified path or all form values
87
+ */
88
+ getValue<V>(path?: string): V;
89
+ /**
90
+ * Validates the form using the provided validation schema.
91
+ *
92
+ * @throws {Record<string, ValidationError[]>} Throws validation errors if validation fails
93
+ */
94
+ validate(): Promise<void>;
95
+ private saveToHistory;
96
+ /**
97
+ * Moves to the previous state in the form history (undo operation).
98
+ *
99
+ * @returns True if the operation was successful, false if no previous state exists
100
+ */
101
+ prev(): boolean;
102
+ /**
103
+ * Moves to the next state in the form history (redo operation).
104
+ *
105
+ * @returns True if the operation was successful, false if no next state exists
106
+ */
107
+ next(): boolean;
108
+ /**
109
+ * Checks if there is a previous state available for undo operation.
110
+ *
111
+ * @returns True if undo operation is possible
112
+ */
113
+ canPrev(): boolean;
114
+ /**
115
+ * Checks if there is a next state available for redo operation.
116
+ *
117
+ * @returns True if redo operation is possible
118
+ */
119
+ canNext(): boolean;
120
+ private notifySubscriptions;
121
+ private notifyHistorySubscriptions;
122
+ private remapValidationError;
123
+ private unsubscribeOnChange;
124
+ private unsubscribeOnHistoryChange;
125
+ private generateListenerId;
126
+ }
127
+ export default FormState;
128
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAEpD,OAAO,KAAK,EAEV,oBAAoB,EAErB,MAAM,UAAU,CAAC;AAElB;;;;;;;GAOG;AACH,cAAM,SAAS,CAAC,CAAC,SAAS,MAAM;IAC9B,OAAO,CAAC,MAAM,CAAI;IAElB,OAAO,CAAC,gBAAgB,CAAC,CAAkB;IAC3C,OAAO,CAAC,aAAa,CAA6C;IAClE,OAAO,CAAC,wBAAwB,CAAsC;IACtE,OAAO,CAAC,MAAM,CAAkD;IAEhE,OAAO,CAAC,OAAO,CAAW;IAC1B,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAS;IACtC,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAS;IAC7C,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAW;IAE7C;;;;;;;;OAQG;gBAED,aAAa,EAAE,CAAC,EAChB,gBAAgB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAClC,YAAY,GAAE,MAAU,EACxB,mBAAmB,GAAE,MAAU,EAC/B,iBAAiB,GAAE,MAAM,EAAO;IAclC;;;;OAIG;IACH,SAAS;IAIT;;;;OAIG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC;IAInD;;;;OAIG;IACH,SAAS;IAIT;;;;OAIG;IACH,SAAS,CAAC,MAAM,EAAE,CAAC;IAYnB;;;;;;OAMG;IACH,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAmBnC;;;;;;;OAOG;IACH,iBAAiB,CAAC,CAAC,EAAE,EAAE,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM;IAW/D;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,EAAE,MAAM,IAAI;IAQvC;;;;;;OAMG;IACH,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC;IAI7B;;;;OAIG;IACG,QAAQ;IAYd,OAAO,CAAC,aAAa;IA4BrB;;;;OAIG;IACH,IAAI;IASJ;;;;OAIG;IACH,IAAI;IASJ;;;;OAIG;IACH,OAAO;IAIP;;;;OAIG;IACH,OAAO;IAIP,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,0BAA0B;IAMlC,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,0BAA0B;IAIlC,OAAO,CAAC,kBAAkB;CAM3B;AAED,eAAe,SAAS,CAAC"}