@arkyn/components 3.0.1-beta.143 → 3.0.1-beta.145
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/bundle.js +1 -1
- package/dist/components/alert/alertContainer/index.d.ts +27 -43
- package/dist/components/alert/alertContainer/index.d.ts.map +1 -1
- package/dist/components/alert/alertContainer/index.js +20 -40
- package/dist/components/alert/alertContent/index.d.ts +11 -36
- package/dist/components/alert/alertContent/index.d.ts.map +1 -1
- package/dist/components/alert/alertContent/index.js +11 -31
- package/dist/components/alert/alertDescription/index.d.ts +10 -38
- package/dist/components/alert/alertDescription/index.d.ts.map +1 -1
- package/dist/components/alert/alertDescription/index.js +10 -33
- package/dist/components/alert/alertIcon/index.d.ts +14 -38
- package/dist/components/alert/alertIcon/index.d.ts.map +1 -1
- package/dist/components/alert/alertIcon/index.js +14 -32
- package/dist/components/alert/alertTitle/index.d.ts +12 -35
- package/dist/components/alert/alertTitle/index.d.ts.map +1 -1
- package/dist/components/alert/alertTitle/index.js +12 -27
- package/dist/components/audioPlayer/index.d.ts +24 -32
- package/dist/components/audioPlayer/index.d.ts.map +1 -1
- package/dist/components/audioPlayer/index.js +15 -18
- package/dist/components/audioUpload/index.d.ts +37 -48
- package/dist/components/audioUpload/index.d.ts.map +1 -1
- package/dist/components/audioUpload/index.js +23 -48
- package/dist/components/badge/index.d.ts +31 -22
- package/dist/components/badge/index.d.ts.map +1 -1
- package/dist/components/badge/index.js +14 -22
- package/dist/components/button/index.d.ts +38 -28
- package/dist/components/button/index.d.ts.map +1 -1
- package/dist/components/button/index.js +18 -28
- package/dist/components/cardTab/cardTabButton/index.d.ts +14 -52
- package/dist/components/cardTab/cardTabButton/index.d.ts.map +1 -1
- package/dist/components/cardTab/cardTabButton/index.js +12 -52
- package/dist/components/cardTab/cardTabContainer/index.d.ts +16 -58
- package/dist/components/cardTab/cardTabContainer/index.d.ts.map +1 -1
- package/dist/components/cardTab/cardTabContainer/index.js +12 -58
- package/dist/components/checkbox/index.d.ts +38 -37
- package/dist/components/checkbox/index.d.ts.map +1 -1
- package/dist/components/checkbox/index.js +21 -37
- package/dist/components/clientOnly.d.ts +13 -66
- package/dist/components/clientOnly.d.ts.map +1 -1
- package/dist/components/clientOnly.js +11 -66
- package/dist/components/currencyInput/index.d.ts +67 -50
- package/dist/components/currencyInput/index.d.ts.map +1 -1
- package/dist/components/currencyInput/index.js +28 -50
- package/dist/components/divider/index.d.ts +12 -25
- package/dist/components/divider/index.d.ts.map +1 -1
- package/dist/components/divider/index.js +8 -25
- package/dist/components/drawer/drawerContainer/index.d.ts +16 -50
- package/dist/components/drawer/drawerContainer/index.d.ts.map +1 -1
- package/dist/components/drawer/drawerContainer/index.js +13 -50
- package/dist/components/drawer/drawerHeader/index.d.ts +9 -33
- package/dist/components/drawer/drawerHeader/index.d.ts.map +1 -1
- package/dist/components/drawer/drawerHeader/index.js +8 -33
- package/dist/components/facebookPixel/index.d.ts +47 -0
- package/dist/components/facebookPixel/index.d.ts.map +1 -1
- package/dist/components/facebookPixel/index.js +35 -0
- package/dist/components/fieldError/index.d.ts +4 -11
- package/dist/components/fieldError/index.d.ts.map +1 -1
- package/dist/components/fieldError/index.js +4 -11
- package/dist/components/fieldLabel/index.d.ts +6 -21
- package/dist/components/fieldLabel/index.d.ts.map +1 -1
- package/dist/components/fieldLabel/index.js +5 -21
- package/dist/components/fieldWrapper/index.d.ts +12 -22
- package/dist/components/fieldWrapper/index.d.ts.map +1 -1
- package/dist/components/fieldWrapper/index.js +7 -22
- package/dist/components/fileUpload/index.d.ts +36 -61
- package/dist/components/fileUpload/index.d.ts.map +1 -1
- package/dist/components/fileUpload/index.js +23 -61
- package/dist/components/googleAnalytics/index.d.ts +11 -7
- package/dist/components/googleAnalytics/index.d.ts.map +1 -1
- package/dist/components/googleAnalytics/index.js +9 -7
- package/dist/components/googleTagManager/index.d.ts +27 -21
- package/dist/components/googleTagManager/index.d.ts.map +1 -1
- package/dist/components/googleTagManager/index.js +20 -21
- package/dist/components/iconButton/index.d.ts +31 -15
- package/dist/components/iconButton/index.d.ts.map +1 -1
- package/dist/components/iconButton/index.js +12 -15
- package/dist/components/imageUpload/index.d.ts +47 -75
- package/dist/components/imageUpload/index.d.ts.map +1 -1
- package/dist/components/imageUpload/index.js +27 -75
- package/dist/components/input/index.d.ts +51 -44
- package/dist/components/input/index.d.ts.map +1 -1
- package/dist/components/input/index.js +24 -44
- package/dist/components/mapView/index.d.ts +44 -0
- package/dist/components/mapView/index.d.ts.map +1 -1
- package/dist/components/mapView/index.js +35 -0
- package/dist/components/maskedInput/index.d.ts +66 -51
- package/dist/components/maskedInput/index.d.ts.map +1 -1
- package/dist/components/maskedInput/index.js +28 -51
- package/dist/components/modal/modalContainer/index.d.ts +17 -57
- package/dist/components/modal/modalContainer/index.d.ts.map +1 -1
- package/dist/components/modal/modalContainer/index.js +15 -57
- package/dist/components/modal/modalFooter/index.d.ts +17 -50
- package/dist/components/modal/modalFooter/index.d.ts.map +1 -1
- package/dist/components/modal/modalFooter/index.js +10 -50
- package/dist/components/modal/modalHeader/index.d.ts +13 -47
- package/dist/components/modal/modalHeader/index.d.ts.map +1 -1
- package/dist/components/modal/modalHeader/index.js +12 -47
- package/dist/components/multiSelect/index.d.ts +67 -62
- package/dist/components/multiSelect/index.d.ts.map +1 -1
- package/dist/components/multiSelect/index.js +28 -62
- package/dist/components/pagination/index.d.ts +18 -9
- package/dist/components/pagination/index.d.ts.map +1 -1
- package/dist/components/pagination/index.js +18 -9
- package/dist/components/phoneInput/index.d.ts +65 -30
- package/dist/components/phoneInput/index.d.ts.map +1 -1
- package/dist/components/phoneInput/index.js +36 -31
- package/dist/components/popover/index.d.ts +34 -114
- package/dist/components/popover/index.d.ts.map +1 -1
- package/dist/components/popover/index.js +25 -114
- package/dist/components/radio/radioBox/index.d.ts +17 -65
- package/dist/components/radio/radioBox/index.d.ts.map +1 -1
- package/dist/components/radio/radioBox/index.js +14 -65
- package/dist/components/radio/radioGroup/index.d.ts +36 -67
- package/dist/components/radio/radioGroup/index.d.ts.map +1 -1
- package/dist/components/radio/radioGroup/index.js +25 -67
- package/dist/components/richText/index.d.ts +33 -47
- package/dist/components/richText/index.d.ts.map +1 -1
- package/dist/components/richText/index.js +30 -44
- package/dist/components/searchPlaces.d.ts +52 -50
- package/dist/components/searchPlaces.d.ts.map +1 -1
- package/dist/components/searchPlaces.js +23 -30
- package/dist/components/select/index.d.ts +68 -63
- package/dist/components/select/index.d.ts.map +1 -1
- package/dist/components/select/index.js +29 -63
- package/dist/components/slider/index.d.ts +20 -34
- package/dist/components/slider/index.d.ts.map +1 -1
- package/dist/components/slider/index.js +15 -33
- package/dist/components/switch/index.d.ts +42 -58
- package/dist/components/switch/index.d.ts.map +1 -1
- package/dist/components/switch/index.js +24 -58
- package/dist/components/tab/tabButton/index.d.ts +14 -52
- package/dist/components/tab/tabButton/index.d.ts.map +1 -1
- package/dist/components/tab/tabButton/index.js +12 -52
- package/dist/components/tab/tabContainer/index.d.ts +16 -58
- package/dist/components/tab/tabContainer/index.d.ts.map +1 -1
- package/dist/components/tab/tabContainer/index.js +12 -58
- package/dist/components/table/tableBody/index.d.ts +13 -47
- package/dist/components/table/tableBody/index.d.ts.map +1 -1
- package/dist/components/table/tableBody/index.js +12 -47
- package/dist/components/table/tableCaption/index.d.ts +6 -46
- package/dist/components/table/tableCaption/index.d.ts.map +1 -1
- package/dist/components/table/tableCaption/index.js +6 -46
- package/dist/components/table/tableContainer/index.d.ts +12 -41
- package/dist/components/table/tableContainer/index.d.ts.map +1 -1
- package/dist/components/table/tableContainer/index.js +12 -41
- package/dist/components/table/tableFooter/index.d.ts +5 -29
- package/dist/components/table/tableFooter/index.d.ts.map +1 -1
- package/dist/components/table/tableFooter/index.js +5 -29
- package/dist/components/table/tableHeader/index.d.ts +4 -25
- package/dist/components/table/tableHeader/index.d.ts.map +1 -1
- package/dist/components/table/tableHeader/index.js +4 -25
- package/dist/components/textarea/index.d.ts +32 -64
- package/dist/components/textarea/index.d.ts.map +1 -1
- package/dist/components/textarea/index.js +16 -64
- package/dist/components/tooltip/index.d.ts +27 -55
- package/dist/components/tooltip/index.d.ts.map +1 -1
- package/dist/components/tooltip/index.js +16 -55
- package/dist/hooks/useAutomation.d.ts +18 -26
- package/dist/hooks/useAutomation.d.ts.map +1 -1
- package/dist/hooks/useAutomation.js +18 -26
- package/dist/hooks/useDrawer.d.ts +19 -64
- package/dist/hooks/useDrawer.d.ts.map +1 -1
- package/dist/hooks/useForm.d.ts +12 -29
- package/dist/hooks/useForm.d.ts.map +1 -1
- package/dist/hooks/useForm.js +12 -29
- package/dist/hooks/useHydrated.d.ts +8 -63
- package/dist/hooks/useHydrated.d.ts.map +1 -1
- package/dist/hooks/useHydrated.js +8 -63
- package/dist/hooks/useModal.d.ts +19 -59
- package/dist/hooks/useModal.d.ts.map +1 -1
- package/dist/hooks/useScopedParams.d.ts +17 -69
- package/dist/hooks/useScopedParams.d.ts.map +1 -1
- package/dist/hooks/useScopedParams.js +17 -69
- package/dist/hooks/useScrollLock.d.ts +11 -27
- package/dist/hooks/useScrollLock.d.ts.map +1 -1
- package/dist/hooks/useScrollLock.js +11 -33
- package/dist/hooks/useSearchAutomation.d.ts +16 -34
- package/dist/hooks/useSearchAutomation.d.ts.map +1 -1
- package/dist/hooks/useSearchAutomation.js +16 -34
- package/dist/hooks/useSlider.d.ts +5 -19
- package/dist/hooks/useSlider.d.ts.map +1 -1
- package/dist/hooks/useSlider.js +5 -19
- package/dist/hooks/useToast.d.ts +8 -52
- package/dist/hooks/useToast.d.ts.map +1 -1
- package/dist/hooks/useToast.js +8 -52
- package/dist/providers/drawerProvider.d.ts +15 -81
- package/dist/providers/drawerProvider.d.ts.map +1 -1
- package/dist/providers/drawerProvider.js +15 -81
- package/dist/providers/formProvider.d.ts +17 -53
- package/dist/providers/formProvider.d.ts.map +1 -1
- package/dist/providers/formProvider.js +17 -53
- package/dist/providers/modalProvider.d.ts +16 -77
- package/dist/providers/modalProvider.d.ts.map +1 -1
- package/dist/providers/modalProvider.js +16 -77
- package/dist/providers/placesProvider.d.ts +16 -11
- package/dist/providers/placesProvider.d.ts.map +1 -1
- package/dist/providers/placesProvider.js +16 -11
- package/dist/providers/toastProvider.d.ts +10 -21
- package/dist/providers/toastProvider.d.ts.map +1 -1
- package/dist/providers/toastProvider.js +10 -21
- package/dist/services/toHtml.d.ts +11 -10
- package/dist/services/toHtml.d.ts.map +1 -1
- package/dist/services/toHtml.js +11 -10
- package/dist/services/toRichTextValue.d.ts +11 -17
- package/dist/services/toRichTextValue.d.ts.map +1 -1
- package/dist/services/toRichTextValue.js +11 -17
- package/package.json +1 -1
package/dist/hooks/useToast.js
CHANGED
|
@@ -1,65 +1,21 @@
|
|
|
1
1
|
import { toastContext } from "../providers/toastProvider";
|
|
2
2
|
import { useContext } from "react";
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* useToast — reads `ToastProvider` context to display toast notifications.
|
|
5
5
|
*
|
|
6
|
-
* @returns
|
|
7
|
-
* @returns {function} showToast - Function to display toast notifications
|
|
6
|
+
* @returns Context containing `showToast(options)`.
|
|
8
7
|
*
|
|
9
|
-
* @throws
|
|
8
|
+
* @throws If called outside a `ToastProvider`.
|
|
10
9
|
*
|
|
11
10
|
* @example
|
|
12
|
-
* Basic usage:
|
|
13
11
|
* ```tsx
|
|
14
|
-
*
|
|
15
|
-
* const { showToast } = useToast();
|
|
12
|
+
* const { showToast } = useToast();
|
|
16
13
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* message: 'Operation completed successfully!',
|
|
20
|
-
* type: 'success'
|
|
21
|
-
* });
|
|
22
|
-
* };
|
|
14
|
+
* // After a successful save
|
|
15
|
+
* showToast({ message: "Changes saved!", type: "success" });
|
|
23
16
|
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* message: 'Something went wrong!',
|
|
27
|
-
* type: 'danger'
|
|
28
|
-
* });
|
|
29
|
-
* };
|
|
30
|
-
*
|
|
31
|
-
* return (
|
|
32
|
-
* <div>
|
|
33
|
-
* <button onClick={handleSuccess}>Success Toast</button>
|
|
34
|
-
* <button onClick={handleError}>Error Toast</button>
|
|
35
|
-
* </div>
|
|
36
|
-
* );
|
|
37
|
-
* }
|
|
38
|
-
* ```
|
|
39
|
-
*
|
|
40
|
-
* @example
|
|
41
|
-
* Using in async operations:
|
|
42
|
-
* ```tsx
|
|
43
|
-
* function FormComponent() {
|
|
44
|
-
* const { showToast } = useToast();
|
|
45
|
-
*
|
|
46
|
-
* const handleSubmit = async (data) => {
|
|
47
|
-
* try {
|
|
48
|
-
* await submitForm(data);
|
|
49
|
-
* showToast({
|
|
50
|
-
* message: 'Form submitted successfully!',
|
|
51
|
-
* type: 'success'
|
|
52
|
-
* });
|
|
53
|
-
* } catch (error) {
|
|
54
|
-
* showToast({
|
|
55
|
-
* message: 'Failed to submit form',
|
|
56
|
-
* type: 'danger'
|
|
57
|
-
* });
|
|
58
|
-
* }
|
|
59
|
-
* };
|
|
60
|
-
*
|
|
61
|
-
* return <form onSubmit={handleSubmit}>...</form>;
|
|
62
|
-
* }
|
|
17
|
+
* // After a failed request
|
|
18
|
+
* showToast({ message: "Failed to save changes.", type: "danger" });
|
|
63
19
|
* ```
|
|
64
20
|
*/
|
|
65
21
|
function useToast() {
|
|
@@ -11,94 +11,28 @@ type DrawerProviderProps = {
|
|
|
11
11
|
};
|
|
12
12
|
declare const drawerContext: import("react").Context<DrawerContextProps<any>>;
|
|
13
13
|
/**
|
|
14
|
-
* DrawerProvider
|
|
14
|
+
* DrawerProvider — context provider that manages open/close state and data for named drawers.
|
|
15
15
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* @param props.enableDrawerAutomation - Optional flag to enable drawer automation features
|
|
16
|
+
* Wrap your app (or a subtree) with this once. Any component in the tree can then call
|
|
17
|
+
* `useDrawer(key)` to open, close, or read data for a specific drawer.
|
|
19
18
|
*
|
|
20
|
-
* @
|
|
19
|
+
* @param props.children - Components that will have access to drawer context.
|
|
20
|
+
*
|
|
21
|
+
* @returns DrawerProvider JSX element.
|
|
21
22
|
*
|
|
22
23
|
* @example
|
|
23
24
|
* ```tsx
|
|
24
|
-
* //
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* <NavigationDrawer />
|
|
29
|
-
* <FilterDrawer />
|
|
30
|
-
* <SettingsDrawer />
|
|
31
|
-
* <MainContent />
|
|
32
|
-
* </DrawerProvider>
|
|
33
|
-
* );
|
|
34
|
-
* }
|
|
35
|
-
*
|
|
36
|
-
* // Drawer provider with automation enabled
|
|
37
|
-
* function AppWithAutomation() {
|
|
38
|
-
* return (
|
|
39
|
-
* <DrawerProvider enableDrawerAutomation={true}>
|
|
40
|
-
* <Dashboard />
|
|
41
|
-
* <SidePanel />
|
|
42
|
-
* <NotificationDrawer />
|
|
43
|
-
* </DrawerProvider>
|
|
44
|
-
* );
|
|
45
|
-
* }
|
|
46
|
-
*
|
|
47
|
-
* // Using with multiple drawers
|
|
48
|
-
* function MultiDrawerApp() {
|
|
49
|
-
* return (
|
|
50
|
-
* <DrawerProvider>
|
|
51
|
-
* <Header />
|
|
52
|
-
* <NavigationDrawer key="navigation" />
|
|
53
|
-
* <FilterDrawer key="filters" />
|
|
54
|
-
* <CartDrawer key="shopping-cart" />
|
|
55
|
-
* <MainContent />
|
|
56
|
-
* </DrawerProvider>
|
|
57
|
-
* );
|
|
58
|
-
* }
|
|
59
|
-
*
|
|
60
|
-
* // Component using drawer context
|
|
61
|
-
* function DrawerController() {
|
|
62
|
-
* const { openDrawer, closeDrawer } = useDrawer();
|
|
63
|
-
*
|
|
64
|
-
* const handleOpenNavigation = () => {
|
|
65
|
-
* openDrawer('navigation', { section: 'main-menu' });
|
|
66
|
-
* };
|
|
67
|
-
*
|
|
68
|
-
* const handleOpenFilters = () => {
|
|
69
|
-
* openDrawer('filters', { category: 'electronics', priceRange: [0, 1000] });
|
|
70
|
-
* };
|
|
71
|
-
*
|
|
72
|
-
* return (
|
|
73
|
-
* <div>
|
|
74
|
-
* <button onClick={handleOpenNavigation}>
|
|
75
|
-
* Open Navigation
|
|
76
|
-
* </button>
|
|
77
|
-
* <button onClick={handleOpenFilters}>
|
|
78
|
-
* Open Filters
|
|
79
|
-
* </button>
|
|
80
|
-
* </div>
|
|
81
|
-
* );
|
|
82
|
-
* }
|
|
83
|
-
*
|
|
84
|
-
* // Drawer component consuming context
|
|
85
|
-
* function NavigationDrawer() {
|
|
86
|
-
* const { drawerIsOpen, drawerData, closeDrawer } = useDrawer('navigation');
|
|
25
|
+
* // In your root layout
|
|
26
|
+
* <DrawerProvider>
|
|
27
|
+
* <App />
|
|
28
|
+
* </DrawerProvider>
|
|
87
29
|
*
|
|
88
|
-
*
|
|
30
|
+
* // Opening a drawer from anywhere in the tree
|
|
31
|
+
* const { openDrawer } = useDrawer();
|
|
32
|
+
* openDrawer('filters', { category: 'electronics' });
|
|
89
33
|
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
* <h2>Navigation</h2>
|
|
93
|
-
* <p>Current section: {drawerData?.section}</p>
|
|
94
|
-
* <nav>
|
|
95
|
-
* <a href="/home">Home</a>
|
|
96
|
-
* <a href="/products">Products</a>
|
|
97
|
-
* <a href="/about">About</a>
|
|
98
|
-
* </nav>
|
|
99
|
-
* </Drawer>
|
|
100
|
-
* );
|
|
101
|
-
* }
|
|
34
|
+
* // Consuming in the drawer component
|
|
35
|
+
* const { drawerIsOpen, drawerData, closeDrawer } = useDrawer<{ category: string }>('filters');
|
|
102
36
|
* ```
|
|
103
37
|
*/
|
|
104
38
|
declare function DrawerProvider(args: DrawerProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawerProvider.d.ts","sourceRoot":"","sources":["../../src/providers/drawerProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAE3D,KAAK,kBAAkB,CAAC,CAAC,GAAG,GAAG,IAAI;IACjC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC3B,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAOF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,aAAa,kDAA0C,CAAC;AAE9D
|
|
1
|
+
{"version":3,"file":"drawerProvider.d.ts","sourceRoot":"","sources":["../../src/providers/drawerProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAE3D,KAAK,kBAAkB,CAAC,CAAC,GAAG,GAAG,IAAI;IACjC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC3B,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAOF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,aAAa,kDAA0C,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,iBAAS,cAAc,CAAC,IAAI,EAAE,mBAAmB,2CAiChD;AAED,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,CAAC"}
|
|
@@ -2,94 +2,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { createContext, useState } from "react";
|
|
3
3
|
const drawerContext = createContext({});
|
|
4
4
|
/**
|
|
5
|
-
* DrawerProvider
|
|
5
|
+
* DrawerProvider — context provider that manages open/close state and data for named drawers.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* @param props.enableDrawerAutomation - Optional flag to enable drawer automation features
|
|
7
|
+
* Wrap your app (or a subtree) with this once. Any component in the tree can then call
|
|
8
|
+
* `useDrawer(key)` to open, close, or read data for a specific drawer.
|
|
10
9
|
*
|
|
11
|
-
* @
|
|
10
|
+
* @param props.children - Components that will have access to drawer context.
|
|
11
|
+
*
|
|
12
|
+
* @returns DrawerProvider JSX element.
|
|
12
13
|
*
|
|
13
14
|
* @example
|
|
14
15
|
* ```tsx
|
|
15
|
-
* //
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* <NavigationDrawer />
|
|
20
|
-
* <FilterDrawer />
|
|
21
|
-
* <SettingsDrawer />
|
|
22
|
-
* <MainContent />
|
|
23
|
-
* </DrawerProvider>
|
|
24
|
-
* );
|
|
25
|
-
* }
|
|
26
|
-
*
|
|
27
|
-
* // Drawer provider with automation enabled
|
|
28
|
-
* function AppWithAutomation() {
|
|
29
|
-
* return (
|
|
30
|
-
* <DrawerProvider enableDrawerAutomation={true}>
|
|
31
|
-
* <Dashboard />
|
|
32
|
-
* <SidePanel />
|
|
33
|
-
* <NotificationDrawer />
|
|
34
|
-
* </DrawerProvider>
|
|
35
|
-
* );
|
|
36
|
-
* }
|
|
37
|
-
*
|
|
38
|
-
* // Using with multiple drawers
|
|
39
|
-
* function MultiDrawerApp() {
|
|
40
|
-
* return (
|
|
41
|
-
* <DrawerProvider>
|
|
42
|
-
* <Header />
|
|
43
|
-
* <NavigationDrawer key="navigation" />
|
|
44
|
-
* <FilterDrawer key="filters" />
|
|
45
|
-
* <CartDrawer key="shopping-cart" />
|
|
46
|
-
* <MainContent />
|
|
47
|
-
* </DrawerProvider>
|
|
48
|
-
* );
|
|
49
|
-
* }
|
|
50
|
-
*
|
|
51
|
-
* // Component using drawer context
|
|
52
|
-
* function DrawerController() {
|
|
53
|
-
* const { openDrawer, closeDrawer } = useDrawer();
|
|
54
|
-
*
|
|
55
|
-
* const handleOpenNavigation = () => {
|
|
56
|
-
* openDrawer('navigation', { section: 'main-menu' });
|
|
57
|
-
* };
|
|
58
|
-
*
|
|
59
|
-
* const handleOpenFilters = () => {
|
|
60
|
-
* openDrawer('filters', { category: 'electronics', priceRange: [0, 1000] });
|
|
61
|
-
* };
|
|
62
|
-
*
|
|
63
|
-
* return (
|
|
64
|
-
* <div>
|
|
65
|
-
* <button onClick={handleOpenNavigation}>
|
|
66
|
-
* Open Navigation
|
|
67
|
-
* </button>
|
|
68
|
-
* <button onClick={handleOpenFilters}>
|
|
69
|
-
* Open Filters
|
|
70
|
-
* </button>
|
|
71
|
-
* </div>
|
|
72
|
-
* );
|
|
73
|
-
* }
|
|
74
|
-
*
|
|
75
|
-
* // Drawer component consuming context
|
|
76
|
-
* function NavigationDrawer() {
|
|
77
|
-
* const { drawerIsOpen, drawerData, closeDrawer } = useDrawer('navigation');
|
|
16
|
+
* // In your root layout
|
|
17
|
+
* <DrawerProvider>
|
|
18
|
+
* <App />
|
|
19
|
+
* </DrawerProvider>
|
|
78
20
|
*
|
|
79
|
-
*
|
|
21
|
+
* // Opening a drawer from anywhere in the tree
|
|
22
|
+
* const { openDrawer } = useDrawer();
|
|
23
|
+
* openDrawer('filters', { category: 'electronics' });
|
|
80
24
|
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
* <h2>Navigation</h2>
|
|
84
|
-
* <p>Current section: {drawerData?.section}</p>
|
|
85
|
-
* <nav>
|
|
86
|
-
* <a href="/home">Home</a>
|
|
87
|
-
* <a href="/products">Products</a>
|
|
88
|
-
* <a href="/about">About</a>
|
|
89
|
-
* </nav>
|
|
90
|
-
* </Drawer>
|
|
91
|
-
* );
|
|
92
|
-
* }
|
|
25
|
+
* // Consuming in the drawer component
|
|
26
|
+
* const { drawerIsOpen, drawerData, closeDrawer } = useDrawer<{ category: string }>('filters');
|
|
93
27
|
* ```
|
|
94
28
|
*/
|
|
95
29
|
function DrawerProvider(args) {
|
|
@@ -11,64 +11,28 @@ type FormProviderProps = {
|
|
|
11
11
|
};
|
|
12
12
|
declare const formContext: import("react").Context<FormContextProps>;
|
|
13
13
|
/**
|
|
14
|
-
* FormProvider
|
|
14
|
+
* FormProvider — distributes field-level validation errors to all form input components in its subtree.
|
|
15
15
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* @param props.form - Optional form element to wrap the children with
|
|
16
|
+
* All inputs (`Input`, `Select`, `Checkbox`, etc.) read `fieldErrors[name]` automatically,
|
|
17
|
+
* so you don't need to pass errors manually to each field. Use the `form` prop to also wrap
|
|
18
|
+
* children in a `<form>` element (e.g. for Remix `<Form />`).
|
|
20
19
|
*
|
|
21
|
-
* @
|
|
20
|
+
* @param props.children - Form fields and other components.
|
|
21
|
+
* @param props.fieldErrors - Map of field name → error message (e.g. from Zod / server validation).
|
|
22
|
+
* @param props.form - Optional `<form>` element to wrap children in (cloned with `children`).
|
|
23
|
+
*
|
|
24
|
+
* @returns FormProvider JSX element.
|
|
22
25
|
*
|
|
23
26
|
* @example
|
|
24
27
|
* ```tsx
|
|
25
|
-
* //
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* <FormProvider fieldErrors={errors}>
|
|
34
|
-
* <Input name="email" label="Email" />
|
|
35
|
-
* <Input name="password" label="Password" type="password" />
|
|
36
|
-
* </FormProvider>
|
|
37
|
-
* );
|
|
38
|
-
* }
|
|
39
|
-
*
|
|
40
|
-
* // Form provider with custom form element
|
|
41
|
-
* function FormWithValidation() {
|
|
42
|
-
* const [errors, setErrors] = useState({});
|
|
43
|
-
*
|
|
44
|
-
* const handleSubmit = (e) => {
|
|
45
|
-
* e.preventDefault();
|
|
46
|
-
* // validation logic
|
|
47
|
-
* };
|
|
48
|
-
*
|
|
49
|
-
* return (
|
|
50
|
-
* <FormProvider
|
|
51
|
-
* fieldErrors={errors}
|
|
52
|
-
* form={<form onSubmit={handleSubmit} />}
|
|
53
|
-
* >
|
|
54
|
-
* <Input name="username" label="Username" />
|
|
55
|
-
* <Button type="submit">Submit</Button>
|
|
56
|
-
* </FormProvider>
|
|
57
|
-
* );
|
|
58
|
-
* }
|
|
59
|
-
*
|
|
60
|
-
* // Using with useForm hook
|
|
61
|
-
* function FormField() {
|
|
62
|
-
* const { fieldErrors } = useForm();
|
|
63
|
-
*
|
|
64
|
-
* return (
|
|
65
|
-
* <Input
|
|
66
|
-
* name="email"
|
|
67
|
-
* label="Email"
|
|
68
|
-
* errorMessage={fieldErrors?.email}
|
|
69
|
-
* />
|
|
70
|
-
* );
|
|
71
|
-
* }
|
|
28
|
+
* // With Remix action errors
|
|
29
|
+
* const actionData = useActionData<typeof action>();
|
|
30
|
+
*
|
|
31
|
+
* <FormProvider fieldErrors={actionData?.fieldErrors}>
|
|
32
|
+
* <Input name="email" label="Email" />
|
|
33
|
+
* <Input name="password" label="Password" type="password" />
|
|
34
|
+
* <Button type="submit">Login</Button>
|
|
35
|
+
* </FormProvider>
|
|
72
36
|
* ```
|
|
73
37
|
*/
|
|
74
38
|
declare function FormProvider(props: FormProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formProvider.d.ts","sourceRoot":"","sources":["../../src/providers/formProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+C,MAAM,OAAO,CAAC;AAE/E,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CACnC,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAE1D
|
|
1
|
+
{"version":3,"file":"formProvider.d.ts","sourceRoot":"","sources":["../../src/providers/formProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+C,MAAM,OAAO,CAAC;AAE/E,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CACnC,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAc7C;AAED,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -2,64 +2,28 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { createContext, cloneElement } from "react";
|
|
3
3
|
const formContext = createContext({});
|
|
4
4
|
/**
|
|
5
|
-
* FormProvider
|
|
5
|
+
* FormProvider — distributes field-level validation errors to all form input components in its subtree.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* @param props.form - Optional form element to wrap the children with
|
|
7
|
+
* All inputs (`Input`, `Select`, `Checkbox`, etc.) read `fieldErrors[name]` automatically,
|
|
8
|
+
* so you don't need to pass errors manually to each field. Use the `form` prop to also wrap
|
|
9
|
+
* children in a `<form>` element (e.g. for Remix `<Form />`).
|
|
11
10
|
*
|
|
12
|
-
* @
|
|
11
|
+
* @param props.children - Form fields and other components.
|
|
12
|
+
* @param props.fieldErrors - Map of field name → error message (e.g. from Zod / server validation).
|
|
13
|
+
* @param props.form - Optional `<form>` element to wrap children in (cloned with `children`).
|
|
14
|
+
*
|
|
15
|
+
* @returns FormProvider JSX element.
|
|
13
16
|
*
|
|
14
17
|
* @example
|
|
15
18
|
* ```tsx
|
|
16
|
-
* //
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
* <FormProvider fieldErrors={errors}>
|
|
25
|
-
* <Input name="email" label="Email" />
|
|
26
|
-
* <Input name="password" label="Password" type="password" />
|
|
27
|
-
* </FormProvider>
|
|
28
|
-
* );
|
|
29
|
-
* }
|
|
30
|
-
*
|
|
31
|
-
* // Form provider with custom form element
|
|
32
|
-
* function FormWithValidation() {
|
|
33
|
-
* const [errors, setErrors] = useState({});
|
|
34
|
-
*
|
|
35
|
-
* const handleSubmit = (e) => {
|
|
36
|
-
* e.preventDefault();
|
|
37
|
-
* // validation logic
|
|
38
|
-
* };
|
|
39
|
-
*
|
|
40
|
-
* return (
|
|
41
|
-
* <FormProvider
|
|
42
|
-
* fieldErrors={errors}
|
|
43
|
-
* form={<form onSubmit={handleSubmit} />}
|
|
44
|
-
* >
|
|
45
|
-
* <Input name="username" label="Username" />
|
|
46
|
-
* <Button type="submit">Submit</Button>
|
|
47
|
-
* </FormProvider>
|
|
48
|
-
* );
|
|
49
|
-
* }
|
|
50
|
-
*
|
|
51
|
-
* // Using with useForm hook
|
|
52
|
-
* function FormField() {
|
|
53
|
-
* const { fieldErrors } = useForm();
|
|
54
|
-
*
|
|
55
|
-
* return (
|
|
56
|
-
* <Input
|
|
57
|
-
* name="email"
|
|
58
|
-
* label="Email"
|
|
59
|
-
* errorMessage={fieldErrors?.email}
|
|
60
|
-
* />
|
|
61
|
-
* );
|
|
62
|
-
* }
|
|
19
|
+
* // With Remix action errors
|
|
20
|
+
* const actionData = useActionData<typeof action>();
|
|
21
|
+
*
|
|
22
|
+
* <FormProvider fieldErrors={actionData?.fieldErrors}>
|
|
23
|
+
* <Input name="email" label="Email" />
|
|
24
|
+
* <Input name="password" label="Password" type="password" />
|
|
25
|
+
* <Button type="submit">Login</Button>
|
|
26
|
+
* </FormProvider>
|
|
63
27
|
* ```
|
|
64
28
|
*/
|
|
65
29
|
function FormProvider(props) {
|
|
@@ -12,90 +12,29 @@ type ModalProviderProps = {
|
|
|
12
12
|
};
|
|
13
13
|
declare const modalContext: import("react").Context<ModalContextProps<any>>;
|
|
14
14
|
/**
|
|
15
|
-
* ModalProvider
|
|
15
|
+
* ModalProvider — context provider that manages open/close state and data for named modals.
|
|
16
16
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
17
|
+
* Wrap your app (or a subtree) with this once. Any component in the tree can then call
|
|
18
|
+
* `useModal(key)` to open, close, or read data for a specific modal. `closeAll()` is also
|
|
19
|
+
* available (used by `useAutomation` to close all modals after a successful form action).
|
|
20
20
|
*
|
|
21
|
-
* @
|
|
21
|
+
* @param props.children - Components that will have access to modal context.
|
|
22
|
+
*
|
|
23
|
+
* @returns ModalProvider JSX element.
|
|
22
24
|
*
|
|
23
25
|
* @example
|
|
24
26
|
* ```tsx
|
|
25
|
-
* //
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
* <UserModal />
|
|
30
|
-
* <ConfirmModal />
|
|
31
|
-
* <ImagePreviewModal />
|
|
32
|
-
* <MainContent />
|
|
33
|
-
* </ModalProvider>
|
|
34
|
-
* );
|
|
35
|
-
* }
|
|
36
|
-
*
|
|
37
|
-
* // Modal provider with automation enabled
|
|
38
|
-
* function AppWithAutomation() {
|
|
39
|
-
* return (
|
|
40
|
-
* <ModalProvider enableModalAutomation={true}>
|
|
41
|
-
* <Dashboard />
|
|
42
|
-
* <SettingsModal />
|
|
43
|
-
* <NotificationModal />
|
|
44
|
-
* </ModalProvider>
|
|
45
|
-
* );
|
|
46
|
-
* }
|
|
47
|
-
*
|
|
48
|
-
* // Using with multiple modals
|
|
49
|
-
* function MultiModalApp() {
|
|
50
|
-
* return (
|
|
51
|
-
* <ModalProvider>
|
|
52
|
-
* <Header />
|
|
53
|
-
* <Modal key="user-profile" />
|
|
54
|
-
* <Modal key="edit-settings" />
|
|
55
|
-
* <Modal key="confirm-delete" />
|
|
56
|
-
* <MainContent />
|
|
57
|
-
* </ModalProvider>
|
|
58
|
-
* );
|
|
59
|
-
* }
|
|
60
|
-
*
|
|
61
|
-
* // Component using modal context
|
|
62
|
-
* function ModalTrigger() {
|
|
63
|
-
* const { openModal, closeAll } = useModal();
|
|
64
|
-
*
|
|
65
|
-
* const handleOpenUserModal = () => {
|
|
66
|
-
* openModal('user-details', { userId: 123, mode: 'edit' });
|
|
67
|
-
* };
|
|
68
|
-
*
|
|
69
|
-
* const handleCloseAllModals = () => {
|
|
70
|
-
* closeAll();
|
|
71
|
-
* };
|
|
72
|
-
*
|
|
73
|
-
* return (
|
|
74
|
-
* <div>
|
|
75
|
-
* <button onClick={handleOpenUserModal}>
|
|
76
|
-
* Open User Modal
|
|
77
|
-
* </button>
|
|
78
|
-
* <button onClick={handleCloseAllModals}>
|
|
79
|
-
* Close All Modals
|
|
80
|
-
* </button>
|
|
81
|
-
* </div>
|
|
82
|
-
* );
|
|
83
|
-
* }
|
|
84
|
-
*
|
|
85
|
-
* // Modal component consuming context
|
|
86
|
-
* function UserDetailsModal() {
|
|
87
|
-
* const { modalIsOpen, modalData, closeModal } = useModal('user-details');
|
|
27
|
+
* // In your root layout
|
|
28
|
+
* <ModalProvider>
|
|
29
|
+
* <App />
|
|
30
|
+
* </ModalProvider>
|
|
88
31
|
*
|
|
89
|
-
*
|
|
32
|
+
* // Opening a modal from anywhere in the tree
|
|
33
|
+
* const { openModal } = useModal();
|
|
34
|
+
* openModal('confirm-delete', { id: user.id });
|
|
90
35
|
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
* <h2>User Details</h2>
|
|
94
|
-
* <p>User ID: {modalData?.userId}</p>
|
|
95
|
-
* <p>Mode: {modalData?.mode}</p>
|
|
96
|
-
* </Modal>
|
|
97
|
-
* );
|
|
98
|
-
* }
|
|
36
|
+
* // Consuming in the modal component
|
|
37
|
+
* const { modalIsOpen, modalData, closeModal } = useModal<{ id: number }>('confirm-delete');
|
|
99
38
|
* ```
|
|
100
39
|
*/
|
|
101
40
|
declare function ModalProvider(args: ModalProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modalProvider.d.ts","sourceRoot":"","sources":["../../src/providers/modalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAE3D,KAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,IAAI,IAAI,CAAC;CAClB,CAAC;AAOF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,YAAY,iDAAyC,CAAC;AAE5D
|
|
1
|
+
{"version":3,"file":"modalProvider.d.ts","sourceRoot":"","sources":["../../src/providers/modalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAE3D,KAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,IAAI,IAAI,CAAC;CAClB,CAAC;AAOF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,YAAY,iDAAyC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,iBAAS,aAAa,CAAC,IAAI,EAAE,kBAAkB,2CAqC9C;AAED,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,CAAC"}
|