@app-studio/components 0.10.17

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

@@ -0,0 +1,16 @@
+import { Orientation, PanelInfo, ResizableStorage } from './Resizable.type';
+export declare const useResizableState: (orientation: Orientation, defaultSizes?: (number | string)[], onSizesChange?: (sizes: number[]) => void, defaultMinSize?: number, defaultMaxSize?: number, collapsible?: boolean, autoSaveId?: string, storage?: ResizableStorage, keyboardResizeBy?: number) => {
+    isResizing: boolean;
+    setIsResizing: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    panels: PanelInfo[];
+    registerPanel: (id: string, initialSize: number, minSize?: number, maxSize?: number, panelCollapsible?: boolean) => void;
+    unregisterPanel: (id: string) => void;
+    getPanelSize: (id: string) => number;
+    setPanelSize: (id: string, size: number) => void;
+    isPanelCollapsed: (id: string) => boolean;
+    togglePanelCollapse: (id: string) => void;
+    startResize: (handleId: string, clientPosition: number) => void;
+    onResize: (clientPosition: number) => void;
+    endResize: () => void;
+};

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

@@ -0,0 +1,318 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+const createDefaultStorage = () => ({
+    getItem: (id) => {
+        try {
+            return localStorage.getItem(`resizable-${id}`);
+        }
+        catch (e) {
+            console.warn('Failed to access localStorage:', e);
+            return null;
+        }
+    },
+    setItem: (id, value) => {
+        try {
+            localStorage.setItem(`resizable-${id}`, value);
+        }
+        catch (e) {
+            console.warn('Failed to write to localStorage:', e);
+        }
+    },
+});
+// This file encapsulates the state management logic for the Resizable component, providing a custom hook (`useResizableState`) to manage panel sizes, resizing operations, collapse states, and optional persistence of settings.
+export const useResizableState = (orientation, defaultSizes, onSizesChange, defaultMinSize = 50, defaultMaxSize = Infinity, collapsible = false, autoSaveId, storage, keyboardResizeBy = 10) => {
+    const [isResizing, setIsResizing] = useState(false);
+    const [panels, setPanels] = useState([]);
+    const containerRef = useRef(null);
+    const activeHandleRef = useRef(null);
+    const startPositionRef = useRef(0);
+    const startSizesRef = useRef([]);
+    const storageRef = useRef(storage || (typeof window !== 'undefined' ? createDefaultStorage() : null));
+    const getTotalSize = useCallback(() => {
+        if (!containerRef.current)
+            return 0;
+        return orientation === 'horizontal'
+            ? containerRef.current.offsetWidth
+            : containerRef.current.offsetHeight;
+    }, [orientation]);
+    const loadSavedSizes = useCallback(() => {
+        if (!autoSaveId || !storageRef.current)
+            return null;
+        const savedData = storageRef.current.getItem(autoSaveId);
+        if (!savedData)
+            return null;
+        try {
+            const parsed = JSON.parse(savedData);
+            if (Array.isArray(parsed.sizes)) {
+                return parsed.sizes;
+            }
+            return null;
+        }
+        catch (e) {
+            console.warn('Failed to parse saved panel sizes:', e);
+            return null;
+        }
+    }, [autoSaveId]);
+    const savePanelSizes = useCallback(() => {
+        if (!autoSaveId || !storageRef.current || panels.length === 0)
+            return;
+        const sizes = panels.map((panel) => ({
+            id: panel.id,
+            size: panel.size,
+            collapsed: panel.collapsed || false,
+        }));
+        storageRef.current.setItem(autoSaveId, JSON.stringify({ sizes }));
+    }, [autoSaveId, panels]);
+    const registerPanel = useCallback((id, initialSize, minSize, maxSize, panelCollapsible) => {
+        setPanels((prevPanels) => {
+            if (prevPanels.some((panel) => panel.id === id)) {
+                return prevPanels;
+            }
+            return [
+                ...prevPanels,
+                {
+                    id,
+                    size: initialSize,
+                    minSize: minSize ?? defaultMinSize,
+                    maxSize: maxSize ?? defaultMaxSize,
+                    collapsible: panelCollapsible ?? collapsible,
+                    collapsed: false,
+                },
+            ];
+        });
+    }, [defaultMinSize, defaultMaxSize, collapsible]);
+    const unregisterPanel = useCallback((id) => {
+        setPanels((prevPanels) => prevPanels.filter((panel) => panel.id !== id));
+    }, []);
+    const getPanelSize = useCallback((id) => {
+        const panel = panels.find((p) => p.id === id);
+        return panel ? panel.size : 0;
+    }, [panels]);
+    const setPanelSize = useCallback((id, size) => {
+        setPanels((prevPanels) => prevPanels.map((panel) => (panel.id === id ? { ...panel, size } : panel)));
+    }, []);
+    const isPanelCollapsed = useCallback((id) => {
+        const panel = panels.find((p) => p.id === id);
+        return panel ? !!panel.collapsed : false;
+    }, [panels]);
+    const togglePanelCollapse = useCallback((id) => {
+        setPanels((prevPanels) => {
+            const panelIndex = prevPanels.findIndex((p) => p.id === id);
+            if (panelIndex === -1)
+                return prevPanels;
+            const panel = prevPanels[panelIndex];
+            if (!panel.collapsible)
+                return prevPanels;
+            const updatedPanel = {
+                ...panel,
+                collapsed: !panel.collapsed,
+            };
+            const newPanels = [...prevPanels];
+            newPanels[panelIndex] = updatedPanel;
+            return newPanels;
+        });
+    }, []);
+    const startResize = useCallback((handleId, clientPosition) => {
+        activeHandleRef.current = handleId;
+        startPositionRef.current = clientPosition;
+        startSizesRef.current = panels.map((panel) => panel.size);
+        setIsResizing(true);
+    }, [panels]);
+    const onResize = useCallback((clientPosition) => {
+        if (!isResizing || !activeHandleRef.current)
+            return;
+        const handleId = activeHandleRef.current;
+        const delta = clientPosition - startPositionRef.current;
+        let handleIndex = -1;
+        const handleNumMatch = handleId.match(/\d+$/);
+        if (handleNumMatch) {
+            handleIndex = parseInt(handleNumMatch[0], 10) - 1;
+        }
+        if (handleIndex === -1 && panels.length >= 2) {
+            handleIndex = 0;
+        }
+        if (handleIndex < 0 || handleIndex >= panels.length - 1)
+            return;
+        const currentPanel = panels[handleIndex];
+        const nextPanel = panels[handleIndex + 1];
+        if (currentPanel.collapsed || nextPanel.collapsed)
+            return;
+        let newCurrentSize = startSizesRef.current[handleIndex] +
+            (orientation === 'horizontal' ? delta : delta);
+        let newNextSize = startSizesRef.current[handleIndex + 1] -
+            (orientation === 'horizontal' ? delta : delta);
+        newCurrentSize = Math.max(currentPanel.minSize ?? defaultMinSize, Math.min(currentPanel.maxSize ?? defaultMaxSize, newCurrentSize));
+        newNextSize = Math.max(nextPanel.minSize ?? defaultMinSize, Math.min(nextPanel.maxSize ?? defaultMaxSize, newNextSize));
+        setPanels((prevPanels) => prevPanels.map((panel, index) => {
+            if (index === handleIndex) {
+                return { ...panel, size: newCurrentSize };
+            }
+            if (index === handleIndex + 1) {
+                return { ...panel, size: newNextSize };
+            }
+            return panel;
+        }));
+    }, [isResizing, panels, orientation, defaultMinSize, defaultMaxSize]);
+    const endResize = useCallback(() => {
+        if (isResizing && onSizesChange) {
+            onSizesChange(panels.map((panel) => panel.size));
+        }
+        activeHandleRef.current = null;
+        setIsResizing(false);
+        if (autoSaveId) {
+            savePanelSizes();
+        }
+    }, [isResizing, panels, onSizesChange, autoSaveId, savePanelSizes]);
+    const handleKeyDown = useCallback((e) => {
+        if (!isResizing || !activeHandleRef.current)
+            return;
+        const handleId = activeHandleRef.current;
+        let handleIndex = -1;
+        const handleNumMatch = handleId.match(/\d+$/);
+        if (handleNumMatch) {
+            handleIndex = parseInt(handleNumMatch[0], 10) - 1;
+        }
+        if (handleIndex === -1 && panels.length >= 2) {
+            handleIndex = 0;
+        }
+        if (handleIndex < 0 || handleIndex >= panels.length - 1)
+            return;
+        let delta = 0;
+        if (orientation === 'horizontal') {
+            if (e.key === 'ArrowLeft')
+                delta = -keyboardResizeBy;
+            if (e.key === 'ArrowRight')
+                delta = keyboardResizeBy;
+            if (e.key === 'Home')
+                delta = -100;
+            if (e.key === 'End')
+                delta = 100;
+        }
+        else {
+            if (e.key === 'ArrowUp')
+                delta = -keyboardResizeBy;
+            if (e.key === 'ArrowDown')
+                delta = keyboardResizeBy;
+            if (e.key === 'Home')
+                delta = -100;
+            if (e.key === 'End')
+                delta = 100;
+        }
+        if (delta !== 0) {
+            e.preventDefault();
+            onResize(startPositionRef.current + delta);
+        }
+        if (e.key === 'Escape') {
+            setPanels((prevPanels) => prevPanels.map((panel, index) => ({
+                ...panel,
+                size: startSizesRef.current[index],
+            })));
+            endResize();
+        }
+    }, [isResizing, panels, orientation, onResize, endResize, keyboardResizeBy]);
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (!isResizing)
+                return;
+            const position = orientation === 'horizontal' ? e.clientX : e.clientY;
+            onResize(position);
+        };
+        const handleTouchMove = (e) => {
+            if (!isResizing || e.touches.length === 0)
+                return;
+            const touch = e.touches[0];
+            const position = orientation === 'horizontal' ? touch.clientX : touch.clientY;
+            onResize(position);
+        };
+        const handleMouseUp = () => {
+            if (isResizing) {
+                endResize();
+            }
+        };
+        if (isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('touchmove', handleTouchMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            document.addEventListener('touchend', handleMouseUp);
+            document.addEventListener('keydown', handleKeyDown);
+            document.body.style.cursor =
+                orientation === 'horizontal' ? 'col-resize' : 'row-resize';
+            document.body.style.userSelect = 'none';
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('touchmove', handleTouchMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('touchend', handleMouseUp);
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [isResizing, orientation, onResize, endResize, handleKeyDown]);
+    useEffect(() => {
+        if (panels.length === 0)
+            return;
+        if (autoSaveId) {
+            const savedSizes = loadSavedSizes();
+            if (savedSizes) {
+                setPanels((prevPanels) => {
+                    return prevPanels.map((panel) => {
+                        const savedPanel = savedSizes.find((s) => s.id === panel.id);
+                        if (savedPanel) {
+                            return {
+                                ...panel,
+                                size: savedPanel.size,
+                                collapsed: savedPanel.collapsed || false,
+                            };
+                        }
+                        return panel;
+                    });
+                });
+                return;
+            }
+        }
+        if (!defaultSizes) {
+            const totalSize = getTotalSize();
+            const equalSize = totalSize / panels.length;
+            setPanels((prevPanels) => prevPanels.map((panel) => ({
+                ...panel,
+                size: equalSize,
+            })));
+        }
+    }, [panels.length, defaultSizes, getTotalSize, autoSaveId, loadSavedSizes]);
+    useEffect(() => {
+        if (!defaultSizes || defaultSizes.length === 0 || panels.length === 0)
+            return;
+        const totalSize = getTotalSize();
+        const newSizes = defaultSizes.map((size) => {
+            if (typeof size === 'string' && size.endsWith('%')) {
+                return (parseFloat(size) / 100) * totalSize;
+            }
+            return typeof size === 'number' ? size : parseFloat(size);
+        });
+        setPanels((prevPanels) => prevPanels.map((panel, index) => ({
+            ...panel,
+            size: index < newSizes.length ? newSizes[index] : panel.size,
+        })));
+    }, [defaultSizes, panels.length, getTotalSize]);
+    useEffect(() => {
+        if (panels.length > 0 && autoSaveId && !isResizing) {
+            savePanelSizes();
+        }
+    }, [panels, autoSaveId, isResizing, savePanelSizes]);
+    return {
+        isResizing,
+        setIsResizing,
+        containerRef,
+        panels,
+        registerPanel,
+        unregisterPanel,
+        getPanelSize,
+        setPanelSize,
+        isPanelCollapsed,
+        togglePanelCollapse,
+        startResize,
+        onResize,
+        endResize,
+    };
+};
+//# sourceMappingURL=Resizable.state.js.map

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

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

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

@@ -0,0 +1,7 @@
+import { ViewProps } from 'app-studio';
+import { Orientation, Size, Variant } from './Resizable.type';
+export declare const ResizableOrientations: Record<Orientation, ViewProps>;
+export declare const getHandleSizeStyles: (size: Size, orientation: Orientation) => ViewProps;
+export declare const getHandle: (themeMode: string) => Record<Variant, ViewProps>;
+export declare const HandleVariants: Record<Variant, ViewProps>;
+export declare const HandleIconStyles: Record<Orientation, ViewProps>;

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

@@ -0,0 +1,81 @@
+// Defines the CSS flex direction for the resizable container based on the specified orientation.
+export const ResizableOrientations = {
+    horizontal: {
+        flexDirection: 'row',
+    },
+    vertical: {
+        flexDirection: 'column',
+    },
+};
+// Calculates and returns the appropriate width and height styles for the resizable handle based on the provided size and orientation.
+export const getHandleSizeStyles = (
+// Parameter: Specifies the desired size (e.g., 'sm', 'md', 'lg') for the handle.
+size, 
+// Parameter: Determines if the component is arranged 'horizontal' or 'vertical', affecting handle dimensions.
+orientation) => {
+    const sizes = {
+        sm: {
+            width: orientation === 'horizontal' ? '4px' : '100%',
+            height: orientation === 'vertical' ? '4px' : '100%',
+        },
+        md: {
+            width: orientation === 'horizontal' ? '6px' : '100%',
+            height: orientation === 'vertical' ? '6px' : '100%',
+        },
+        lg: {
+            width: orientation === 'horizontal' ? '8px' : '100%',
+            height: orientation === 'vertical' ? '8px' : '100%',
+        },
+    };
+    return sizes[size];
+};
+// Parameter: The current theme mode (e.g., 'light', 'dark') which might influence the returned styles.
+export const getHandle = (themeMode) => {
+    return {
+        default: {
+            backgroundColor: 'transparent',
+            _hover: {
+                backgroundColor: 'color-gray-200',
+            },
+            _active: {
+                backgroundColor: 'color-gray-300',
+            },
+        },
+        subtle: {
+            backgroundColor: 'transparent',
+            _hover: {
+                backgroundColor: 'color-gray-100',
+            },
+            _active: {
+                backgroundColor: 'color-gray-200',
+            },
+        },
+        prominent: {
+            backgroundColor: 'color-gray-100',
+            _hover: {
+                backgroundColor: 'color-gray-200',
+            },
+            _active: {
+                backgroundColor: 'color-gray-300',
+            },
+        },
+    };
+};
+// Initializes `HandleVariants` by calling `getHandle` with 'light' theme mode, providing a set of default handle styles.
+export const HandleVariants = getHandle('light');
+// Defines the static styles for the icon element within the resizable handle, varying based on the component's orientation.
+export const HandleIconStyles = {
+    horizontal: {
+        width: '2px',
+        height: '20px',
+        backgroundColor: 'color-gray-400',
+        margin: '0 1px',
+    },
+    vertical: {
+        width: '20px',
+        height: '2px',
+        backgroundColor: 'color-gray-400',
+        margin: '1px 0',
+    },
+};
+//# sourceMappingURL=Resizable.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.style.js","sourceRoot":"","sources":["../../../../../src/components/Resizable/Resizable/Resizable.style.ts"],"names":[],"mappings":"AAEA,iGAAiG;AACjG,MAAM,CAAC,MAAM,qBAAqB,GAAmC;IACnE,UAAU,EAAE;QACV,aAAa,EAAE,KAAK;KACrB;IACD,QAAQ,EAAE;QACR,aAAa,EAAE,QAAQ;KACxB;CACF,CAAC;AACF,sIAAsI;AACtI,MAAM,CAAC,MAAM,mBAAmB,GAAG;AACjC,iFAAiF;AACjF,IAAU;AACV,8GAA8G;AAC9G,WAAwB,EACb,EAAE;IACb,MAAM,KAAK,GAAG;QACZ,EAAE,EAAE;YACF,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YACpD,MAAM,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;SACpD;QACD,EAAE,EAAE;YACF,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YACpD,MAAM,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;SACpD;QACD,EAAE,EAAE;YACF,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YACpD,MAAM,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;SACpD;KACF,CAAC;IACF,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC;AACrB,CAAC,CAAC;AACF,uGAAuG;AACvG,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,SAAiB,EAA8B,EAAE;IACzE,OAAO;QACL,OAAO,EAAE;YACP,eAAe,EAAE,aAAa;YAC9B,MAAM,EAAE;gBACN,eAAe,EAAE,gBAAgB;aAClC;YACD,OAAO,EAAE;gBACP,eAAe,EAAE,gBAAgB;aAClC;SACF;QACD,MAAM,EAAE;YACN,eAAe,EAAE,aAAa;YAC9B,MAAM,EAAE;gBACN,eAAe,EAAE,gBAAgB;aAClC;YACD,OAAO,EAAE;gBACP,eAAe,EAAE,gBAAgB;aAClC;SACF;QACD,SAAS,EAAE;YACT,eAAe,EAAE,gBAAgB;YACjC,MAAM,EAAE;gBACN,eAAe,EAAE,gBAAgB;aAClC;YACD,OAAO,EAAE;gBACP,eAAe,EAAE,gBAAgB;aAClC;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AACF,yHAAyH;AACzH,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AACjD,4HAA4H;AAC5H,MAAM,CAAC,MAAM,gBAAgB,GAAmC;IAC9D,UAAU,EAAE;QACV,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,gBAAgB;QACjC,MAAM,EAAE,OAAO;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,KAAK;QACb,eAAe,EAAE,gBAAgB;QACjC,MAAM,EAAE,OAAO;KAChB;CACF,CAAC"}

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

@@ -0,0 +1,44 @@
+import { ViewProps } from 'app-studio';
+export type Orientation = 'horizontal' | 'vertical';
+export type HandlePosition = 'start' | 'end' | 'both';
+export type Size = 'sm' | 'md' | 'lg';
+export type Variant = 'default' | 'subtle' | 'prominent';
+export interface ResizableStorage {
+    getItem: (id: string) => string | null;
+    setItem: (id: string, value: string) => void;
+}
+export interface PanelInfo {
+    id: string;
+    size: number;
+    minSize?: number;
+    maxSize?: number;
+    collapsible?: boolean;
+    collapsed?: boolean;
+}
+export interface ResizableContextType {
+    orientation: Orientation;
+    size: Size;
+    variant: Variant;
+    isResizing: boolean;
+    setIsResizing: (isResizing: boolean) => void;
+    registerPanel: (id: string, initialSize: number, minSize?: number, maxSize?: number, collapsible?: boolean) => void;
+    unregisterPanel: (id: string) => void;
+    getPanelSize: (id: string) => number;
+    setPanelSize: (id: string, size: number) => void;
+    isPanelCollapsed: (id: string) => boolean;
+    togglePanelCollapse: (id: string) => void;
+    startResize: (handleId: string, clientPosition: number) => void;
+    onResize: (clientPosition: number) => void;
+    endResize: () => void;
+}
+export interface ResizableStyles {
+    container?: ViewProps;
+    panel?: ViewProps;
+    collapsedPanel?: ViewProps;
+    handle?: ViewProps & {
+        _hover?: ViewProps;
+        _active?: ViewProps;
+    };
+    handleIcon?: ViewProps;
+    collapseIcon?: ViewProps;
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ResizableProps, ResizablePanelProps, ResizableHandleProps } from './Resizable.props';
+import { ResizableContextType } from './Resizable.type';
+export declare const useResizableContext: () => ResizableContextType;
+export declare const ResizableProvider: React.FC<{
+    value: ResizableContextType;
+    children: React.ReactNode;
+}>;
+export declare const ResizablePanel: React.FC<ResizablePanelProps>;
+export declare const ResizableHandle: React.FC<ResizableHandleProps>;
+export declare const ResizableView: React.FC<ResizableProps & {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+}>;