@app-studio/components 0.10.17

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.state.js

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+// This file defines the `useCookieConsentState` custom React hook, which centralizes the logic and state management for cookie consent. It handles the persistence of consent status in local storage, manages UI hover states, and provides functions for accepting or resetting user consent.
+export const useCookieConsentState = (cookieExpiration = 365) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [hasConsent, setHasConsent] = useState(null);
+    const COOKIE_CONSENT_KEY = 'app-studio-cookie-consent';
+    useEffect(() => {
+        const storedConsent = localStorage.getItem(COOKIE_CONSENT_KEY);
+        if (storedConsent !== null) {
+            setHasConsent(storedConsent === 'true');
+        }
+        else {
+            setHasConsent(false);
+        }
+    }, []);
+    const saveConsent = (consent) => {
+        localStorage.setItem(COOKIE_CONSENT_KEY, String(consent));
+        const expirationDate = new Date();
+        expirationDate.setDate(expirationDate.getDate() + cookieExpiration);
+        localStorage.setItem(`${COOKIE_CONSENT_KEY}-expires`, expirationDate.toISOString());
+        setHasConsent(consent);
+    };
+    const acceptCookies = () => {
+        saveConsent(true);
+    };
+    const resetConsent = () => {
+        localStorage.removeItem(COOKIE_CONSENT_KEY);
+        localStorage.removeItem(`${COOKIE_CONSENT_KEY}-expires`);
+        setHasConsent(false);
+    };
+    return {
+        isHovered,
+        setIsHovered,
+        hasConsent,
+        acceptCookies,
+        resetConsent,
+    };
+};
+//# sourceMappingURL=CookieConsent.state.js.map

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookieConsent.state.js","sourceRoot":"","sources":["../../../../../src/components/CookieConsent/CookieConsent/CookieConsent.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,gSAAgS;AAChS,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,mBAA2B,GAAG,EAAE,EAAE;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IACnE,MAAM,kBAAkB,GAAG,2BAA2B,CAAC;IACvD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAC/D,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;YAC3B,aAAa,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAE,EAAE;QACvC,YAAY,CAAC,OAAO,CAAC,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1D,MAAM,cAAc,GAAG,IAAI,IAAI,EAAE,CAAC;QAClC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,OAAO,EAAE,GAAG,gBAAgB,CAAC,CAAC;QACpE,YAAY,CAAC,OAAO,CAClB,GAAG,kBAAkB,UAAU,EAC/B,cAAc,CAAC,WAAW,EAAE,CAC7B,CAAC;QACF,aAAa,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,YAAY,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;QAC5C,YAAY,CAAC,UAAU,CAAC,GAAG,kBAAkB,UAAU,CAAC,CAAC;QACzD,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IACF,OAAO;QACL,SAAS;QACT,YAAY;QACZ,UAAU;QACV,aAAa;QACb,YAAY;KACb,CAAC;AACJ,CAAC,CAAC"}

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.style.d.ts

@@ -0,0 +1,65 @@
+export declare const getThemes: (themeMode: "light" | "dark") => {
+    default: {
+        container: {
+            backgroundColor: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        content: {
+            color: string;
+        };
+        acceptButton: {
+            backgroundColor: string;
+            color: string;
+            hoverBackgroundColor: string;
+        };
+        customizeButton: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hoverBackgroundColor: string;
+        };
+    };
+    info: {
+        container: {
+            backgroundColor: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        content: {
+            color: string;
+        };
+        acceptButton: {
+            backgroundColor: string;
+            color: string;
+            hoverBackgroundColor: string;
+        };
+        customizeButton: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hoverBackgroundColor: string;
+        };
+    };
+    primary: {
+        container: {
+            backgroundColor: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        content: {
+            color: string;
+        };
+        acceptButton: {
+            backgroundColor: string;
+            color: string;
+            hoverBackgroundColor: string;
+        };
+        customizeButton: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hoverBackgroundColor: string;
+        };
+    };
+};

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.style.js

@@ -0,0 +1,89 @@
+// Defines a utility function `getThemes` that provides a collection of theme-specific styles for the Cookie Consent component, adapting colors based on the `themeMode` parameter.
+export const getThemes = (themeMode) => {
+    // Determines if the current theme mode is 'dark', used to conditionally apply appropriate dark mode styles throughout the theme objects.
+    const isDark = themeMode === 'dark';
+    // Returns an object containing comprehensive style configurations for different theme types (e.g., default, info, primary), with styles for various component parts.
+    return {
+        // Defines the set of styles for the default theme of the Cookie Consent component.
+        default: {
+            // Specifies the structural styles for the main container of the default Cookie Consent banner, including background, border, and shadow.
+            container: {
+                backgroundColor: isDark ? 'color-gray-800' : 'color-white',
+                borderColor: isDark ? 'color-gray-700' : 'color-gray-200',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+            },
+            // Defines the text styling for the content area within the default Cookie Consent banner.
+            content: {
+                color: isDark ? 'color-gray-200' : 'color-gray-800',
+            },
+            // Configures the visual styles for the 'Accept' button in the default theme, including its background, text color, and hover state.
+            acceptButton: {
+                backgroundColor: 'color-blue-500',
+                color: 'color-white',
+                hoverBackgroundColor: 'color-blue-600',
+            },
+            // Sets the visual styles for the 'Customize' button in the default theme, encompassing background, text color, border, and hover effects.
+            customizeButton: {
+                backgroundColor: 'transparent',
+                color: isDark ? 'color-gray-200' : 'color-gray-600',
+                borderColor: isDark ? 'color-gray-600' : 'color-gray-300',
+                hoverBackgroundColor: isDark ? 'color-gray-700' : 'color-gray-100',
+            },
+        },
+        // Defines the set of styles for the 'info' theme of the Cookie Consent component, typically characterized by a blue color scheme.
+        info: {
+            // Specifies the structural styles for the main container of the 'info' Cookie Consent banner, including background, border, and shadow.
+            container: {
+                backgroundColor: isDark ? 'color-blue-900' : 'color-blue-50',
+                borderColor: isDark ? 'color-blue-800' : 'color-blue-200',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+            },
+            // Defines the text styling for the content area within the 'info' Cookie Consent banner.
+            content: {
+                color: isDark ? 'color-blue-200' : 'color-blue-800',
+            },
+            // Configures the visual styles for the 'Accept' button in the 'info' theme, including its background, text color, and hover state.
+            acceptButton: {
+                backgroundColor: 'color-blue-500',
+                color: 'color-white',
+                hoverBackgroundColor: 'color-blue-600',
+            },
+            // Sets the visual styles for the 'Customize' button in the 'info' theme, encompassing background, text color, border, and hover effects.
+            customizeButton: {
+                backgroundColor: 'transparent',
+                color: isDark ? 'color-blue-200' : 'color-blue-800',
+                borderColor: isDark ? 'color-blue-500' : 'color-blue-300',
+                hoverBackgroundColor: isDark ? 'color-blue-800' : 'color-blue-100',
+            },
+        },
+        // Defines the set of styles for the 'primary' theme of the Cookie Consent component, typically used for prominent actions with a light blue scheme.
+        primary: {
+            // Specifies the structural styles for the main container of the 'primary' Cookie Consent banner, including background, border, and shadow.
+            container: {
+                backgroundColor: isDark ? 'color-lightBlue-900' : 'color-lightBlue-50',
+                borderColor: isDark ? 'color-lightBlue-700' : 'color-lightBlue-200',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+            },
+            // Defines the text styling for the content area within the 'primary' Cookie Consent banner.
+            content: {
+                color: isDark ? 'color-lightBlue-200' : 'color-lightBlue-700',
+            },
+            // Configures the visual styles for the 'Accept' button in the 'primary' theme, including its background, text color, and hover state.
+            acceptButton: {
+                backgroundColor: 'color-lightBlue-500',
+                color: 'color-white',
+                hoverBackgroundColor: 'color-lightBlue-600',
+            },
+            // Sets the visual styles for the 'Customize' button in the 'primary' theme, encompassing background, text color, border, and hover effects.
+            customizeButton: {
+                backgroundColor: 'transparent',
+                color: isDark ? 'color-lightBlue-200' : 'color-lightBlue-700',
+                borderColor: isDark ? 'color-lightBlue-500' : 'color-lightBlue-300',
+                hoverBackgroundColor: isDark
+                    ? 'color-lightBlue-700'
+                    : 'color-lightBlue-100',
+            },
+        },
+    };
+};
+//# sourceMappingURL=CookieConsent.style.js.map

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookieConsent.style.js","sourceRoot":"","sources":["../../../../../src/components/CookieConsent/CookieConsent/CookieConsent.style.ts"],"names":[],"mappings":"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"}

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.type.d.ts

@@ -0,0 +1,10 @@
+export type CookieConsentPosition = 'bottom' | 'top';
+export type CookieConsentVariant = 'default' | 'info' | 'primary';
+export type CookieConsentStyles = {
+    container?: any;
+    title?: any;
+    description?: any;
+    buttonGroup?: any;
+    acceptButton?: any;
+    customizeButton?: any;
+};

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CookieConsent.type.js.map

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookieConsent.type.js","sourceRoot":"","sources":["../../../../../src/components/CookieConsent/CookieConsent/CookieConsent.type.ts"],"names":[],"mappings":""}

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.view.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CookieConsentProps } from './CookieConsent.props';
+export declare const CookieConsentView: React.FC<CookieConsentProps>;

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.view.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Horizontal, Vertical, Text, useTheme } from 'app-studio';
+import { Button } from '../../Button/Button';
+import { useCookieConsentState } from './CookieConsent.state';
+import { getThemes } from './CookieConsent.style';
+// Defines the main functional component for displaying the cookie consent banner, accepting various props to customize its appearance and behavior.
+export const CookieConsentView = ({ title = 'Nous utilisons des cookies', description = 'Ce site utilise des cookies pour améliorer votre expérience. En continuant à naviguer sur ce site, vous acceptez notre utilisation des cookies conformément à notre politique de confidentialité.', acceptButtonText = 'Accepter', customizeButtonText = 'Personnaliser', position = 'bottom', variant = 'default', onAccept, onCustomize, views, showCustomizeButton = true, cookieExpiration = 365, themeMode: propThemeMode, ...props }) => {
+    // Extracts the current theme mode from the application's theme context using the `useTheme` hook.
+    const { themeMode: contextThemeMode } = useTheme();
+    // Determines the active theme mode, prioritizing a theme mode passed via props, then the context theme mode, and defaulting to 'light' if neither is provided.
+    const themeMode = propThemeMode || contextThemeMode || 'light';
+    // Initializes the cookie consent state using the `useCookieConsentState` hook, providing `hasConsent` to check current consent status and `acceptCookies` to set consent. The `cookieExpiration` prop determines the cookie's lifespan.
+    const { hasConsent, acceptCookies } = useCookieConsentState(cookieExpiration);
+    // Retrieves the appropriate theme styles based on the determined `themeMode` from the `getThemes` utility function.
+    const themes = getThemes(themeMode);
+    // Selects the specific style variations from the loaded themes based on the `variant` prop for the current component.
+    const themeStyles = themes[variant];
+    if (hasConsent) {
+        return null;
+    }
+    // Defines the handler function executed when the 'Accept' button is clicked. It calls `acceptCookies` to record consent and then triggers the optional `onAccept` callback.
+    const handleAccept = () => {
+        acceptCookies();
+        if (onAccept) {
+            onAccept();
+        }
+    };
+    // Defines the handler function executed when the 'Customize' button is clicked, triggering the `onCustomize` callback if it has been provided as a prop.
+    const handleCustomize = () => {
+        if (onCustomize) {
+            onCustomize();
+        }
+    };
+    return (<View style={{
+            position: 'fixed',
+            left: 16,
+            right: 16,
+            zIndex: 1000,
+            ...(position === 'bottom' ? { bottom: 16 } : { top: 16 }),
+        }} padding={16} borderWidth="1px" borderStyle="solid" borderRadius={8} maxWidth="800px" marginLeft="auto" marginRight="auto" transition="opacity 0.3s ease, transform 0.3s ease" {...themeStyles.container} {...views?.container} {...props}>
+      <Vertical gap={12} maxWidth={1200} marginLeft="auto" marginRight="auto">
+        {title && (<Text fontWeight="bold" fontSize={18} color="color-black" {...views?.title}>
+            {title}
+          </Text>)}
+        {description && (<Text fontSize={14} color="color-black" {...views?.description}>
+            {typeof description === 'string' ? description : description}
+          </Text>)}
+        <Horizontal gap={12} justifyContent="flex-end" marginTop={8} {...views?.buttonGroup}>
+          {showCustomizeButton && (<Button variant="outline" onClick={handleCustomize} size="sm" {...views?.customizeButton}>
+              {customizeButtonText}
+            </Button>)}
+          <Button variant="primary" onClick={handleAccept} size="sm" {...views?.acceptButton}>
+            {acceptButtonText}
+          </Button>
+        </Horizontal>
+      </Vertical>
+    </View>);
+};
+//# sourceMappingURL=CookieConsent.view.js.map

package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookieConsent.view.js","sourceRoot":"","sources":["../../../../../src/components/CookieConsent/CookieConsent/CookieConsent.view.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/CookieConsent/CookieConsent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CookieConsentProps } from './CookieConsent/CookieConsent.props';
+export declare const CookieConsent: React.FC<CookieConsentProps>;

package/dist/native/components/CookieConsent/CookieConsent.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CookieConsentView } from './CookieConsent/CookieConsent.view';
+// This file exports the main `CookieConsent` component, which serves as a simple container that renders the `CookieConsentView` component, passing along all received properties to handle the UI and logic for cookie consent management.
+const CookieConsentComponent = (props) => {
+    return <CookieConsentView {...props}/>;
+};
+export const CookieConsent = CookieConsentComponent;
+//# sourceMappingURL=CookieConsent.js.map

package/dist/native/components/CookieConsent/CookieConsent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookieConsent.js","sourceRoot":"","sources":["../../../../src/components/CookieConsent/CookieConsent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,2OAA2O;AAC3O,MAAM,sBAAsB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACrE,OAAO,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC1C,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,sBAAsB,CAAC"}

package/dist/native/components/DragAndDrop/DragAndDrop/DragAndDrop.props.d.ts

@@ -0,0 +1,18 @@
+import { ViewProps } from 'app-studio';
+export interface DragAndDropProps {
+    items: any[];
+    onChange?: (items: any[]) => void;
+    renderItem?: (item: any, index: number) => React.ReactNode;
+    containerProps?: ViewProps;
+    itemProps?: ViewProps;
+}
+export interface DragAndDropViewProps extends DragAndDropProps, Omit<ViewProps, 'onChange'> {
+    draggedIndex: number | null;
+    itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    renderItem?: (item: any, index: number) => React.ReactNode;
+    handleDragStart: (e: React.MouseEvent | React.TouchEvent, index: number) => void;
+    views?: {
+        container?: ViewProps;
+        item?: ViewProps;
+    };
+}

package/dist/native/components/DragAndDrop/DragAndDrop/DragAndDrop.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DragAndDrop.props.js.map

package/dist/native/components/DragAndDrop/DragAndDrop/DragAndDrop.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDrop.props.js","sourceRoot":"","sources":["../../../../../src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts"],"names":[],"mappings":""}

package/dist/native/components/DragAndDrop/DragAndDrop/DragAndDrop.state.d.ts

@@ -0,0 +1,8 @@
+import { DragAndDropProps } from './DragAndDrop.props';
+export declare const useDragAndDropState: ({ items: initialItems, onChange, }: DragAndDropProps) => {
+    items: any[];
+    draggedItem: any;
+    draggedIndex: number | null;
+    itemRefs: import("react").RefObject<(HTMLDivElement | null)[]>;
+    handleDragStart: (e: React.MouseEvent | React.TouchEvent, index: number) => void;
+};

package/dist/native/components/DragAndDrop/DragAndDrop/DragAndDrop.state.js

@@ -0,0 +1,79 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+// Manages the state and logic for the DragAndDrop component, including handling drag operations, item reordering, and state updates.
+export const useDragAndDropState = ({ items: initialItems, onChange, }) => {
+    const [items, setItems] = useState(initialItems);
+    const [draggedItem, setDraggedItem] = useState(null);
+    const [draggedIndex, setDraggedIndex] = useState(null);
+    const dragStartPosRef = useRef({ x: 0, y: 0 });
+    const itemRefs = useRef([]);
+    const handleDragStart = useCallback((e, index) => {
+        e.preventDefault();
+        document.body.style.cursor = 'grabbing';
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        dragStartPosRef.current = { x: clientX, y: clientY };
+        setDraggedIndex(index);
+        setDraggedItem(items[index]);
+    }, [items]);
+    const handleDragMove = useCallback((e) => {
+        if (draggedIndex === null)
+            return;
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const draggedElement = itemRefs.current[draggedIndex];
+        if (!draggedElement)
+            return;
+        const offsetX = clientX - dragStartPosRef.current.x;
+        const offsetY = clientY - dragStartPosRef.current.y;
+        draggedElement.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+        draggedElement.style.zIndex = '1000';
+        const hoveredIndex = itemRefs.current.findIndex((itemRef, index) => {
+            if (!itemRef || index === draggedIndex)
+                return false;
+            const rect = itemRef.getBoundingClientRect();
+            return clientY >= rect.top && clientY <= rect.bottom;
+        });
+        if (hoveredIndex !== -1 && hoveredIndex !== draggedIndex) {
+            const newItems = [...items];
+            const [removed] = newItems.splice(draggedIndex, 1);
+            newItems.splice(hoveredIndex, 0, removed);
+            setItems(newItems);
+            setDraggedIndex(hoveredIndex);
+            onChange?.(newItems);
+            dragStartPosRef.current = { x: clientX, y: clientY };
+        }
+    }, [draggedIndex, items, onChange]);
+    const handleDragEnd = useCallback(() => {
+        document.body.style.cursor = '';
+        itemRefs.current.forEach((el) => {
+            if (el) {
+                el.style.transform = '';
+                el.style.zIndex = '';
+            }
+        });
+        setDraggedIndex(null);
+        setDraggedItem(null);
+    }, [draggedIndex]);
+    useEffect(() => {
+        if (draggedIndex !== null) {
+            window.addEventListener('mousemove', handleDragMove);
+            window.addEventListener('touchmove', handleDragMove);
+            window.addEventListener('mouseup', handleDragEnd);
+            window.addEventListener('touchend', handleDragEnd);
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleDragMove);
+            window.removeEventListener('touchmove', handleDragMove);
+            window.removeEventListener('mouseup', handleDragEnd);
+            window.removeEventListener('touchend', handleDragEnd);
+        };
+    }, [draggedIndex, handleDragMove, handleDragEnd]);
+    return {
+        items,
+        draggedItem,
+        draggedIndex,
+        itemRefs,
+        handleDragStart,
+    };
+};
+//# sourceMappingURL=DragAndDrop.state.js.map

package/dist/native/components/DragAndDrop/DragAndDrop/DragAndDrop.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDrop.state.js","sourceRoot":"","sources":["../../../../../src/components/DragAndDrop/DragAndDrop/DragAndDrop.state.ts"],"names":[],"mappings":"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"}

package/dist/native/components/DragAndDrop/DragAndDrop/DragAndDrop.view.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DragAndDropViewProps } from './DragAndDrop.props';
+export declare const DragAndDropView: React.FC<DragAndDropViewProps>;

package/dist/native/components/DragAndDrop/DragAndDrop/DragAndDrop.view.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View } from 'app-studio';
+// Defines the `DragAndDropView` functional component, responsible for rendering a list of draggable items and handling basic drag interactions.
+export const DragAndDropView = ({ items, renderItem, containerProps, itemProps, draggedIndex, itemRefs, handleDragStart, views, themeMode: elementMode, }) => (<View overflow="hidden" position="relative" {...containerProps} {...views?.container}>
+    {items.map((item, index) => (<View key={index} ref={(el) => {
+            itemRefs.current[index] = el;
+        }} onMouseDown={(e) => handleDragStart(e, index)} onTouchStart={(e) => handleDragStart(e, index)} position="relative" cursor="grab" transition="transform 0.2s" {...itemProps} {...views?.item}>
+        {renderItem ? renderItem(item, index) : item}
+      </View>))}
+  </View>);
+//# sourceMappingURL=DragAndDrop.view.js.map

package/dist/native/components/DragAndDrop/DragAndDrop/DragAndDrop.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDrop.view.js","sourceRoot":"","sources":["../../../../../src/components/DragAndDrop/DragAndDrop/DragAndDrop.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,gJAAgJ;AAChJ,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,KAAK,EACL,UAAU,EACV,cAAc,EACd,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EAAE,WAAW,GACvB,EAAE,EAAE,CAAC,CACJ,CAAC,IAAI,CACH,QAAQ,CAAC,QAAQ,CACjB,QAAQ,CAAC,UAAU,CACnB,IAAI,cAAc,CAAC,CACnB,IAAI,KAAK,EAAE,SAAS,CAAC,CAErB;IAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,GAAG,CAAC,CAAC,CAAC,EAAsB,EAAE,EAAE;YAC9B,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAA2B,CAAC;QACxD,CAAC,CAAC,CACF,WAAW,CAAC,CAAC,CAAC,CAAmB,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAChE,YAAY,CAAC,CAAC,CAAC,CAAmB,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CACjE,QAAQ,CAAC,UAAU,CACnB,MAAM,CAAC,MAAM,CACb,UAAU,CAAC,gBAAgB,CAC3B,IAAI,SAAS,CAAC,CACd,IAAI,KAAK,EAAE,IAAI,CAAC,CAEhB;QAAA,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAC9C;MAAA,EAAE,IAAI,CAAC,CACR,CAAC,CACJ;EAAA,EAAE,IAAI,CAAC,CACR,CAAC"}

package/dist/native/components/DragAndDrop/DragAndDrop.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DragAndDropProps } from './DragAndDrop/DragAndDrop.props';
+export declare const DragAndDropComponent: React.FC<DragAndDropProps>;
+export declare const DragAndDrop: React.FC<DragAndDropProps>;

package/dist/native/components/DragAndDrop/DragAndDrop.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useDragAndDropState } from './DragAndDrop/DragAndDrop.state';
+import { DragAndDropView } from './DragAndDrop/DragAndDrop.view';
+// Defines the main `DragAndDrop` React functional component, which orchestrates the state and view logic to create an interactive drag-and-drop experience.
+export const DragAndDropComponent = (props) => {
+    const { items, draggedIndex, itemRefs, handleDragStart } = useDragAndDropState(props);
+    return (<DragAndDropView {...props} items={items} draggedIndex={draggedIndex} itemRefs={itemRefs} handleDragStart={handleDragStart}/>);
+};
+export const DragAndDrop = DragAndDropComponent;
+//# sourceMappingURL=DragAndDrop.js.map

package/dist/native/components/DragAndDrop/DragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../../src/components/DragAndDrop/DragAndDrop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,4JAA4J;AAC5J,MAAM,CAAC,MAAM,oBAAoB,GAA+B,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,GACtD,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO,CACL,CAAC,eAAe,CACd,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,eAAe,CAAC,CAAC,eAAe,CAAC,EACjC,CACH,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,WAAW,GAAG,oBAAoB,CAAC"}

package/dist/native/components/Drawer/Drawer/Drawer.layout.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DrawerLayoutProps } from './Drawer.props';
+export declare const DrawerLayout: ({ drawers: availableDrawers, onShow, onHide, }: DrawerLayoutProps) => React.JSX.Element | null;

package/dist/native/components/Drawer/Drawer/Drawer.layout.js

@@ -0,0 +1,51 @@
+import React, { Fragment, Suspense, useEffect } from 'react';
+import { hideDrawer, useDrawerStore } from './Drawer.store';
+import { DrawerOverlay, DrawerContainer } from './Drawer.view';
+// Defines the main layout component responsible for rendering multiple drawer instances dynamically.
+export const DrawerLayout = ({ 
+// Specifies a map or object containing all available drawer components by their names, allowing the layout to find and render them.
+drawers: availableDrawers, 
+// Callback function that is invoked when a drawer is shown. This hook allows external side effects or state updates.
+onShow, 
+// Callback function that is invoked when a drawer is hidden. This hook allows external side effects or state updates.
+onHide, }) => {
+    // Retrieves the currently active drawers from the global drawer store, which determines which drawers should be rendered.
+    const activeDrawers = useDrawerStore((state) => state.drawers);
+    // Synchronizes the 'onShow' callback with the global drawer store's state, ensuring it's available for other parts of the drawer system.
+    useEffect(() => {
+        if (onShow) {
+            useDrawerStore.getState().setOnShow(onShow);
+        }
+    }, [onShow]);
+    // Synchronizes the 'onHide' callback with the global drawer store's state, making it accessible for managing drawer visibility.
+    useEffect(() => {
+        if (onHide) {
+            useDrawerStore.getState().setOnHide(onHide);
+        }
+    }, [onHide]);
+    // Conditionally renders nothing if there are no active drawers, preventing the rendering of an empty layout.
+    if (activeDrawers.length === 0) {
+        return null;
+    }
+    return (<Fragment>
+      {activeDrawers.map((drawer, index) => {
+            const DrawerComponent = availableDrawers[drawer.name];
+            if (!DrawerComponent) {
+                console.error(`${drawer.name} drawer doesn't exist`);
+                return null;
+            }
+            const { placement, size, isClosePrevented, blur, containerProps, ...contentProps } = drawer.props || {};
+            return (<DrawerOverlay key={index} isOpen={drawer.props.isOpen} onClose={() => hideDrawer(drawer.name)} isClosePrevented={isClosePrevented} blur={blur} {...drawer.overlayProps} style={{
+                    zIndex: 1000 + index,
+                    ...(drawer.overlayProps?.style || {}),
+                }}>
+            <DrawerContainer placement={placement} size={size} isOpen={drawer.props.isOpen} {...(containerProps || {})}>
+              <Suspense fallback={null}>
+                <DrawerComponent {...contentProps}/>
+              </Suspense>
+            </DrawerContainer>
+          </DrawerOverlay>);
+        })}
+    </Fragment>);
+};
+//# sourceMappingURL=Drawer.layout.js.map

package/dist/native/components/Drawer/Drawer/Drawer.layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.layout.js","sourceRoot":"","sources":["../../../../../src/components/Drawer/Drawer/Drawer.layout.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/Drawer/Drawer/Drawer.props.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { Placement, Size, CloseButtonPosition } from './Drawer.type';
+export interface DrawerProps extends ViewProps {
+    placement?: Placement;
+    side?: string;
+    size?: Size;
+    isOpen: boolean;
+    onClose: () => void;
+    isClosePrevented?: boolean;
+    children?: React.ReactNode;
+}
+export interface DrawerLayoutProps extends ViewProps {
+    drawers: {
+        [key: string]: React.ComponentType<any>;
+    };
+    onShow?: (name: string, props?: any) => void;
+    onHide?: (name?: string) => void;
+}
+export interface DrawerType extends React.FC<DrawerProps> {
+    Overlay: React.FC<DrawerOverlayProps>;
+    Container: React.FC<DrawerContainerProps>;
+    Header: React.FC<DrawerHeaderProps>;
+    Body: React.FC<DrawerBodyProps>;
+    Footer: React.FC<DrawerFooterProps>;
+    Layout: React.FC<DrawerLayoutProps>;
+}
+export interface DrawerOverlayProps extends ViewProps {
+    isOpen: boolean;
+    onClose: () => void;
+    isClosePrevented?: boolean;
+    blur?: number;
+    children?: React.ReactNode;
+}
+export interface DrawerContainerProps extends ViewProps {
+    placement?: Placement;
+    size?: Size;
+    isOpen?: boolean;
+    children?: React.ReactNode;
+}
+export interface DrawerHeaderProps extends ViewProps {
+    onClose?: () => void;
+    buttonPosition?: CloseButtonPosition;
+    children?: React.ReactNode;
+}
+export interface DrawerBodyProps extends ViewProps {
+    children?: React.ReactNode;
+}
+export interface DrawerFooterProps extends ViewProps {
+    children?: React.ReactNode;
+}

package/dist/native/components/Drawer/Drawer/Drawer.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Drawer.props.js.map

package/dist/native/components/Drawer/Drawer/Drawer.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.props.js","sourceRoot":"","sources":["../../../../../src/components/Drawer/Drawer/Drawer.props.ts"],"names":[],"mappings":""}