@arkyn/components 3.0.1-beta.99 → 3.0.3

package/dist/hooks/useAutomation.js

@@ -1,67 +0,0 @@
-import { useEffect } from "react";
-import { useModal } from "./useModal";
-import { useToast } from "./useToast";
-import { badResponses } from "../templates/badResponses";
-import { successResponses } from "../templates/successResponses";
-/**
- * Hook for automating actions based on form response data.
- *
- * This hook automates the closing of modals and the display of toast notifications
- * based on the properties provided in the form response data object.
- *
- * @param {Object} formResponseData - Object containing form response data for automation
- * @param {boolean} [formResponseData.closeModal] - If true, closes all open modals
- * @param {string} [formResponseData.message] - Message to be displayed in the toast notification
- * @param {string} [formResponseData.name] - Response name used to check against known error responses
- * @param {"success" | "danger"} [formResponseData.type] - Type of toast notification to be displayed
- *
- * @example
- * ```tsx
- * // Complete usage with success notification
- * const responseData = {
- *   closeModal: true,
- *   message: "Operation completed successfully!",
- *   type: "success"
- * };
- *
- * useAutomation(responseData);
- * ```
- *
- * @example
- * ```tsx
- * // Close modal only
- * useAutomation({ closeModal: true });
- * ```
- *
- * @example
- * ```tsx
- * // Display error notification
- * useAutomation({
- *   message: "Error processing request",
- *   type: "danger"
- * });
- * ```
- */
-function useAutomation(formResponseData) {
-    const { closeAll } = useModal();
-    const { showToast } = useToast();
-    const closeModal = formResponseData?.closeModal;
-    const message = formResponseData?.message;
-    const name = formResponseData?.name;
-    const type = formResponseData?.type;
-    useEffect(() => {
-        if (closeModal)
-            closeAll();
-        if (message) {
-            if (type === "success")
-                showToast({ message, type: "success" });
-            if (type === "danger")
-                showToast({ message, type: "danger" });
-            if (badResponses.includes(name))
-                showToast({ message, type: "danger" });
-            if (successResponses.includes(name))
-                showToast({ message, type: "success" });
-        }
-    }, [formResponseData]);
-}
-export { useAutomation };

package/dist/hooks/useDrawer.js

@@ -1,20 +0,0 @@
-import { useContext } from "react";
-import { drawerContext } from "../providers/drawerProvider";
-function useDrawer(key) {
-    const contextData = useContext(drawerContext);
-    if (Object.entries(contextData).length === 0) {
-        throw new Error("useDrawer must be used within a Provider");
-    }
-    if (key) {
-        const { drawerData: contextDrawerData, drawerIsOpen: contextDrawerIsOpen, openDrawer: contextOpenDrawer, closeDrawer: contextCloseDrawer, } = contextData;
-        const drawerIsOpen = contextDrawerIsOpen(key);
-        const drawerData = contextDrawerData(key);
-        const openDrawer = (data) => contextOpenDrawer(key, data);
-        const closeDrawer = () => contextCloseDrawer(key);
-        return { drawerIsOpen, drawerData, openDrawer, closeDrawer };
-    }
-    else {
-        return contextData;
-    }
-}
-export { useDrawer };

package/dist/hooks/useForm.js

@@ -1,52 +0,0 @@
-import { useContext } from "react";
-import { formContext } from "../providers/formProvider";
-/**
- * useForm hook - provides access to form context data including field errors
- *
- * @returns Form context object containing:
- * - `fieldErrors`: Object with field validation errors indexed by field name
- *
- * @example
- * ```tsx
- * // Basic usage in a component
- * function MyComponent() {
- *   const { fieldErrors } = useForm();
- *
- *   return (
- *     <Input
- *       name="email"
- *       errorMessage={fieldErrors?.email}
- *     />
- *   );
- * }
- *
- * // Usage with FormProvider
- * function App() {
- *   const errors = { email: "Invalid email format" };
- *
- *   return (
- *     <FormProvider fieldErrors={errors}>
- *       <MyForm />
- *     </FormProvider>
- *   );
- * }
- *
- * // Checking for specific field errors
- * function FormField() {
- *   const { fieldErrors } = useForm();
- *   const hasError = !!fieldErrors?.username;
- *
- *   return (
- *     <div>
- *       <Input name="username" />
- *       {hasError && <span>Error: {fieldErrors.username}</span>}
- *     </div>
- *   );
- * }
- * ```
- */
-function useForm() {
-    const context = useContext(formContext);
-    return context;
-}
-export { useForm };

package/dist/hooks/useHydrated.js

@@ -1,81 +0,0 @@
-import { useSyncExternalStore } from "react";
-function subscribe() {
-    return () => { };
-}
-/**
- * useHydrated hook - detects if the component is hydrated on the client side
- *
- * This hook is useful for preventing hydration mismatches when rendering different content
- * on server and client sides. It returns false during SSR and true after hydration.
- *
- * @returns Boolean indicating if the component is hydrated
- * - `true`: Component is hydrated on the client side
- * - `false`: Component is being rendered on the server side or before hydration
- *
- * @example
- * ```tsx
- * // Basic usage to prevent hydration mismatches
- * function ClientOnlyComponent() {
- *   const isHydrated = useHydrated();
- *
- *   if (!isHydrated) {
- *     return <div>Loading...</div>;
- *   }
- *
- *   return (
- *     <div>
- *       <p>This content is only rendered on the client</p>
- *       <p>Current time: {new Date().toLocaleString()}</p>
- *     </div>
- *   );
- * }
- *
- * // Conditional rendering based on hydration state
- * function ResponsiveComponent() {
- *   const isHydrated = useHydrated();
- *
- *   return (
- *     <div>
- *       <h1>My App</h1>
- *       {isHydrated ? (
- *         <InteractiveWidget />
- *       ) : (
- *         <StaticPlaceholder />
- *       )}
- *     </div>
- *   );
- * }
- *
- * // Using with client-only features
- * function LocationComponent() {
- *   const isHydrated = useHydrated();
- *   const [location, setLocation] = useState(null);
- *
- *   useEffect(() => {
- *     if (isHydrated && navigator.geolocation) {
- *       navigator.geolocation.getCurrentPosition((pos) => {
- *         setLocation(pos.coords);
- *       });
- *     }
- *   }, [isHydrated]);
- *
- *   if (!isHydrated) {
- *     return <div>Preparing location services...</div>;
- *   }
- *
- *   return (
- *     <div>
- *       {location ? (
- *         <p>Your location: {location.latitude}, {location.longitude}</p>
- *       ) : (
- *         <p>Getting your location...</p>
- *       )}
- *     </div>
- *   );
- * }
- * ```
- */
-function useHydrated() {
-    return useSyncExternalStore(subscribe, () => true, () => false);
-}
-export { useHydrated };

package/dist/hooks/useModal.js

@@ -1,20 +0,0 @@
-import { useContext } from "react";
-import { modalContext } from "../providers/modalProvider";
-function useModal(key) {
-    const contextData = useContext(modalContext);
-    if (Object.entries(contextData).length === 0) {
-        throw new Error("useModal must be used within a Provider");
-    }
-    if (key) {
-        const { modalData: contextModalData, modalIsOpen: contextModalIsOpen, openModal: contextOpenModal, closeModal: contextCloseModal, } = contextData;
-        const modalIsOpen = contextModalIsOpen(key);
-        const modalData = contextModalData(key);
-        const openModal = (data) => contextOpenModal(key, data);
-        const closeModal = () => contextCloseModal(key);
-        return { modalIsOpen, modalData, openModal, closeModal };
-    }
-    else {
-        return contextData;
-    }
-}
-export { useModal };

package/dist/hooks/useScopedParams.js

@@ -1,107 +0,0 @@
-/**
- * Utility function to manage URL search parameters with optional scoping.
- * Provides functionality to get parameters and generate updated search strings
- * while maintaining existing parameters.
- *
- * @param searchString - The current URL search parameters string (e.g., "page=1&filter=active")
- * @param scope - Optional scope prefix for parameters. When provided, parameters will be prefixed with "scope:". Default: ""
- *
- * @returns Object containing parameter management functions:
- * @returns getParam - Function to get a parameter value by key (considers scope if provided)
- * @returns getScopedSearch - Function to generate search string with updated parameters while preserving existing ones
- *
- * @example
- * ```tsx
- * // Basic usage without scope
- * const searchString = "page=1&filter=active";
- * const { getParam, getScopedSearch } = useScopedParams(searchString);
- *
- * // Get a parameter value
- * const page = getParam('page'); // Returns "1"
- * const filter = getParam('filter'); // Returns "active"
- *
- * // Generate search string with new/updated parameters
- * const newSearch = getScopedSearch({ page: 2, sort: 'name' });
- * // Result: "?page=2&filter=active&sort=name"
- * ```
- *
- * @example
- * ```tsx
- * // Usage with scope
- * const searchString = "filters:status=active&filters:category=tech&page=1";
- * const { getParam, getScopedSearch } = useScopedParams(searchString, 'filters');
- *
- * // Get a scoped parameter value
- * const status = getParam('status'); // Gets 'filters:status' from URL, returns "active"
- * const category = getParam('category'); // Gets 'filters:category' from URL, returns "tech"
- *
- * // Generate search string with scoped parameters
- * const newSearch = getScopedSearch({
- *   status: 'inactive',
- *   category: 'sports',
- *   price: 100,
- *   discount: undefined // This will remove 'filters:discount' from URL if it exists
- * });
- * // Result: "?filters:status=inactive&filters:category=sports&filters:price=100&page=1"
- * ```
- *
- * @example
- * ```tsx
- * // Real-world usage with React Router
- * import { useLocation, useNavigate } from 'react-router-dom';
- *
- * function ProductFilter() {
- *   const location = useLocation();
- *   const navigate = useNavigate();
- *   const { getParam, getScopedSearch } = useScopedParams(location.search, 'product');
- *
- *   const handleFilterChange = (newFilters: Record<string, any>) => {
- *     const searchString = getScopedSearch(newFilters);
- *     navigate({ search: searchString });
- *   };
- *
- *   const currentCategory = getParam('category');
- *   const currentPrice = getParam('price');
- *
- *   return (
- *     <div>
- *       <p>Current category: {currentCategory || 'All'}</p>
- *       <p>Current price filter: {currentPrice || 'None'}</p>
- *
- *       <button onClick={() => handleFilterChange({ category: 'electronics' })}>
- *         Electronics
- *       </button>
- *
- *       <button onClick={() => handleFilterChange({ category: undefined, price: undefined })}>
- *         Clear Filters
- *       </button>
- *     </div>
- *   );
- * }
- * ```
- */
-function useScopedParams(searchString, scope = "") {
-    const searchParams = new URLSearchParams(searchString);
-    const prefix = scope ? `${scope}:` : "";
-    const updateSearchParams = (params) => {
-        Object.entries(params).forEach(([key, value]) => {
-            if (value === undefined) {
-                searchParams.delete(`${prefix}${key}`);
-            }
-            else {
-                searchParams.set(`${prefix}${key}`, String(value));
-            }
-        });
-    };
-    return {
-        getParam: (key) => searchParams.get(`${prefix}${key}`),
-        getScopedSearch: (params) => {
-            updateSearchParams(params);
-            let search = searchParams.toString();
-            if (search)
-                search = "?" + search;
-            return search;
-        },
-    };
-}
-export { useScopedParams };

package/dist/hooks/useScrollLock.js

@@ -1,68 +0,0 @@
-import { useEffect } from "react";
-/**
- * Calculates the width of the scrollbar
- * @returns The scrollbar width in pixels
- */
-function getScrollbarWidth() {
-    // Check if we're in a browser environment
-    if (typeof window === "undefined")
-        return 0;
-    // Calculate the difference between window width and document width
-    return window.innerWidth - document.documentElement.clientWidth;
-}
-/**
- * useScrollLock hook - manages body scroll blocking for overlays
- *
- * @param isLocked - Whether the body scroll should be locked
- *
- * @example
- * ```tsx
- * // Basic usage
- * const [isModalOpen, setIsModalOpen] = useState(false);
- * useScrollLock(isModalOpen);
- *
- * // In a modal component
- * function Modal({ isVisible }) {
- *   useScrollLock(isVisible);
- *
- *   return isVisible ? (
- *     <div className="modal">
- *       <div className="modal-content">
- *         Modal content
- *       </div>
- *     </div>
- *   ) : null;
- * }
- *
- * // In a drawer component
- * function Drawer({ isOpen }) {
- *   useScrollLock(isOpen);
- *
- *   return (
- *     <aside className={`drawer ${isOpen ? 'open' : 'closed'}`}>
- *       Drawer content
- *     </aside>
- *   );
- * }
- * ```
- */
-function useScrollLock(isLocked) {
-    useEffect(() => {
-        if (isLocked) {
-            const originalOverflow = document.body.style.overflow;
-            const originalPaddingRight = document.body.style.paddingRight;
-            const scrollbarWidth = getScrollbarWidth();
-            if (scrollbarWidth > 0) {
-                const computedStyle = window.getComputedStyle(document.body);
-                const existingPaddingRight = parseInt(computedStyle.paddingRight) || 0;
-                document.body.style.paddingRight = `${existingPaddingRight + scrollbarWidth}px`;
-            }
-            document.body.style.overflow = "hidden";
-            return () => {
-                document.body.style.overflow = originalOverflow;
-                document.body.style.paddingRight = originalPaddingRight;
-            };
-        }
-    }, [isLocked]);
-}
-export { useScrollLock };

package/dist/hooks/useSlider.js

@@ -1,49 +0,0 @@
-import { useState } from "react";
-/**
- * useSlider hook - manages slider value state with boundary validation
- *
- * @param defaultValue - Initial value for the slider (0-100). Default: 0
- *
- * @returns Array containing current slider value and setter function
- * - [0]: Current slider value (number between 0-100)
- * - [1]: Function to update slider value with boundary validation
- *
- * @example
- * ```tsx
- * // Basic usage
- * const [value, setValue] = useSlider();
- *
- * // With default value
- * const [value, setValue] = useSlider(50);
- *
- * // Usage in component
- * function SliderComponent() {
- *   const [sliderValue, changeSliderValue] = useSlider(25);
- *
- *   return (
- *     <Slider value={sliderValue} onChange={changeSliderValue} />
- *   );
- * }
- * ```
- */
-function useSlider(defaultValue) {
-    function getDefaultValue() {
-        if (!defaultValue)
-            return 0;
-        if (defaultValue <= 0)
-            return 0;
-        if (defaultValue >= 100)
-            return 100;
-        return defaultValue;
-    }
-    const [sliderValue, setSliderValue] = useState(getDefaultValue());
-    function changeSliderValue(value) {
-        if (value <= 0)
-            return setSliderValue(0);
-        if (value >= 100)
-            return setSliderValue(100);
-        return setSliderValue(value);
-    }
-    return [sliderValue, changeSliderValue];
-}
-export { useSlider };

package/dist/hooks/useToast.js

@@ -1,72 +0,0 @@
-import { toastContext } from "../providers/toastProvider";
-import { useContext } from "react";
-/**
- * Custom hook to access toast functionality from ToastProvider context
- *
- * @returns Object containing toast methods and state
- * @returns {function} showToast - Function to display toast notifications
- *
- * @throws {Error} Throws an error if used outside of ToastProvider
- *
- * @example
- * Basic usage:
- * ```tsx
- * function MyComponent() {
- *   const { showToast } = useToast();
- *
- *   const handleSuccess = () => {
- *     showToast({
- *       message: 'Operation completed successfully!',
- *       type: 'success'
- *     });
- *   };
- *
- *   const handleError = () => {
- *     showToast({
- *       message: 'Something went wrong!',
- *       type: 'danger'
- *     });
- *   };
- *
- *   return (
- *     <div>
- *       <button onClick={handleSuccess}>Success Toast</button>
- *       <button onClick={handleError}>Error Toast</button>
- *     </div>
- *   );
- * }
- * ```
- *
- * @example
- * Using in async operations:
- * ```tsx
- * function FormComponent() {
- *   const { showToast } = useToast();
- *
- *   const handleSubmit = async (data) => {
- *     try {
- *       await submitForm(data);
- *       showToast({
- *         message: 'Form submitted successfully!',
- *         type: 'success'
- *       });
- *     } catch (error) {
- *       showToast({
- *         message: 'Failed to submit form',
- *         type: 'danger'
- *       });
- *     }
- *   };
- *
- *   return <form onSubmit={handleSubmit}>...</form>;
- * }
- * ```
- */
-function useToast() {
-    const contextData = useContext(toastContext);
-    if (Object.entries(contextData).length === 0) {
-        throw new Error("useToast must be used within a Provider");
-    }
-    return contextData;
-}
-export { useToast };

package/dist/providers/drawerProvider.js

@@ -1,120 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
-const drawerContext = createContext({});
-/**
- * DrawerProvider component - provides drawer context for managing multiple drawers state and data
- *
- * @param props - DrawerProvider component properties
- * @param props.children - React elements that will have access to the drawer context
- * @param props.enableDrawerAutomation - Optional flag to enable drawer automation features
- *
- * @returns DrawerProvider JSX element that wraps children with drawer context
- *
- * @example
- * ```tsx
- * // Basic drawer provider setup
- * function App() {
- *   return (
- *     <DrawerProvider>
- *       <NavigationDrawer />
- *       <FilterDrawer />
- *       <SettingsDrawer />
- *       <MainContent />
- *     </DrawerProvider>
- *   );
- * }
- *
- * // Drawer provider with automation enabled
- * function AppWithAutomation() {
- *   return (
- *     <DrawerProvider enableDrawerAutomation={true}>
- *       <Dashboard />
- *       <SidePanel />
- *       <NotificationDrawer />
- *     </DrawerProvider>
- *   );
- * }
- *
- * // Using with multiple drawers
- * function MultiDrawerApp() {
- *   return (
- *     <DrawerProvider>
- *       <Header />
- *       <NavigationDrawer key="navigation" />
- *       <FilterDrawer key="filters" />
- *       <CartDrawer key="shopping-cart" />
- *       <MainContent />
- *     </DrawerProvider>
- *   );
- * }
- *
- * // Component using drawer context
- * function DrawerController() {
- *   const { openDrawer, closeDrawer } = useDrawer();
- *
- *   const handleOpenNavigation = () => {
- *     openDrawer('navigation', { section: 'main-menu' });
- *   };
- *
- *   const handleOpenFilters = () => {
- *     openDrawer('filters', { category: 'electronics', priceRange: [0, 1000] });
- *   };
- *
- *   return (
- *     <div>
- *       <button onClick={handleOpenNavigation}>
- *         Open Navigation
- *       </button>
- *       <button onClick={handleOpenFilters}>
- *         Open Filters
- *       </button>
- *     </div>
- *   );
- * }
- *
- * // Drawer component consuming context
- * function NavigationDrawer() {
- *   const { drawerIsOpen, drawerData, closeDrawer } = useDrawer('navigation');
- *
- *   if (!drawerIsOpen) return null;
- *
- *   return (
- *     <Drawer position="left" onClose={() => closeDrawer('navigation')}>
- *       <h2>Navigation</h2>
- *       <p>Current section: {drawerData?.section}</p>
- *       <nav>
- *         <a href="/home">Home</a>
- *         <a href="/products">Products</a>
- *         <a href="/about">About</a>
- *       </nav>
- *     </Drawer>
- *   );
- * }
- * ```
- */
-function DrawerProvider(args) {
-    const { children = false } = args;
-    const [openedDrawers, setOpenedDrawers] = useState([]);
-    function drawerIsOpen(key) {
-        return !!openedDrawers.some((drawer) => drawer.key === key);
-    }
-    function drawerData(key) {
-        return openedDrawers.find((drawer) => drawer.key === key)?.data;
-    }
-    function openDrawer(key, data) {
-        const alreadyExist = drawerIsOpen(key);
-        if (alreadyExist) {
-            setOpenedDrawers((old) => {
-                const filtered = old.filter((drawer) => drawer.key !== key);
-                return [...filtered, { key, data }];
-            });
-        }
-        else
-            setOpenedDrawers([...openedDrawers, { key, data }]);
-    }
-    function closeDrawer(key) {
-        setOpenedDrawers(openedDrawers.filter((drawer) => drawer.key !== key));
-    }
-    return (_jsx(drawerContext.Provider, { value: { drawerIsOpen, drawerData, openDrawer, closeDrawer }, children: children }));
-}
-export { drawerContext, DrawerProvider };