react-restyle-components 0.4.23 → 0.4.24

package/lib/src/core-components/src/components/DynamicGrid/DynamicGrid.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Children, forwardRef, useMemo, useRef, useState, useCallback, createContext, useContext, } from 'react';
+import { cn } from '../../utils';
+import s from '../../tc.module.css';
+import { GridWrapper, GridContainer, GridItem, SkeletonItem, EmptyState, ScrollArrow, ScrollDots, ScrollDot, } from './elements';
+import { gapSizeValues, } from './types';
+import { calcColumns, getGapValue, getResponsiveColumns, useWindowWidth, useElementResize, useScrollToKeyboardFocus, useScrollNavigation, getItemCount, } from './utils';
+// Grid context for nested components
+const GridContext = createContext(null);
+export const useGridContext = () => useContext(GridContext);
+// Arrow icons
+const ChevronLeftIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }));
+const ChevronRightIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }));
+// Empty icon
+const EmptyIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" })] }));
+// Default empty state
+const DefaultEmptyState = () => (_jsxs(EmptyState, { children: [_jsx(EmptyIcon, {}), _jsx("p", { className: cn(s['text-gray-500'], s['text-sm']), children: "No items to display" })] }));
+// Default skeleton renderer
+const DefaultSkeleton = ({ aspectRatio }) => (_jsx(SkeletonItem, { "$aspectRatio": aspectRatio }));
+export const DynamicGrid = forwardRef(function DynamicGridComponent(props, fRef) {
+    const { children, 
+    // Layout
+    minWidth = 10, maxWidth, columns: fixedColumns, responsiveColumns, maxColumns = Infinity, maxRows, autoFit = false, modulo = 1, 
+    // Spacing
+    gap = 'md', rowGap, columnGap, 
+    // Styling
+    variant = 'default', alignItems, justifyItems, alignContent, justifyContent, 
+    // Scroll
+    scroll, scrollEnabled, 
+    // Animation
+    animation, 
+    // Item config
+    itemConfig, 
+    // Accessibility
+    role = 'none', elementRole, ariaLabel, 
+    // State
+    isLoading = false, skeletonCount = 6, renderSkeleton, emptyState, 
+    // Events
+    onLayoutChange, onScrollChange, 
+    // Styling
+    className, style, containerClassName, itemClassName, ...rest } = props;
+    const innerRef = useRef(null);
+    const gridRef = useRef(null);
+    const [elementWidth, setElementWidth] = useState(0);
+    const windowWidth = useWindowWidth();
+    // Merge scroll config
+    const scrollConfig = useMemo(() => scroll?.enabled || scrollEnabled
+        ? {
+            enabled: true,
+            scrollHint: scroll?.scrollHint ?? 0.5,
+            hideScrollbar: scroll?.hideScrollbar ?? false,
+            scrollSnapAlign: scroll?.scrollSnapAlign ?? 'start',
+            smoothScroll: scroll?.smoothScroll ?? true,
+            showArrows: scroll?.showArrows ?? true,
+            showDots: scroll?.showDots ?? false,
+            ...scroll,
+        }
+        : undefined, [scroll, scrollEnabled]);
+    // Handle element resize
+    const handleResize = useCallback((width) => {
+        setElementWidth(width);
+    }, []);
+    useElementResize(innerRef, handleResize);
+    // Calculate columns
+    const calculatedColumns = useMemo(() => {
+        // Use fixed columns if provided
+        if (fixedColumns)
+            return fixedColumns;
+        // Use responsive columns if provided
+        if (responsiveColumns) {
+            return getResponsiveColumns(responsiveColumns, windowWidth);
+        }
+        // Calculate based on container width
+        const gapValue = getGapValue(gap);
+        return calcColumns({
+            minWidth,
+            elementWidth,
+            gap: gapValue,
+            modulo,
+            maxColumns,
+            scrollHint: scrollConfig?.scrollHint,
+        });
+    }, [
+        fixedColumns,
+        responsiveColumns,
+        windowWidth,
+        minWidth,
+        elementWidth,
+        gap,
+        modulo,
+        maxColumns,
+        scrollConfig?.scrollHint,
+    ]);
+    // Handle keyboard focus scroll
+    useScrollToKeyboardFocus(gridRef, scrollConfig);
+    // Scroll navigation
+    const itemCount = getItemCount(children);
+    const scrollNav = useScrollNavigation(gridRef, itemCount, calculatedColumns);
+    // Notify layout changes
+    React.useEffect(() => {
+        if (onLayoutChange) {
+            const rows = Math.ceil(itemCount / calculatedColumns);
+            onLayoutChange(calculatedColumns, rows);
+        }
+    }, [calculatedColumns, itemCount, onLayoutChange]);
+    // Get gap values
+    const gapValue = getGapValue(gap);
+    const rowGapValue = rowGap ? gapSizeValues[rowGap] : undefined;
+    const columnGapValue = columnGap ? gapSizeValues[columnGap] : undefined;
+    // Process children
+    const processedChildren = useMemo(() => {
+        const childArray = Children.toArray(children);
+        return childArray.map((child, index) => (_jsx(GridItem, { "$animation": animation, "$animationIndex": index, "$borderRadius": itemConfig?.borderRadius, "$padding": itemConfig?.padding, "$aspectRatio": itemConfig?.aspectRatio, className: itemClassName, children: child }, index)));
+    }, [children, animation, itemConfig, itemClassName]);
+    // Render as list items if role is list
+    const gridRole = role || elementRole || 'none';
+    const renderChildren = useMemo(() => {
+        if (gridRole === 'list') {
+            return processedChildren.map((child, index) => (_jsx("li", { style: { display: 'contents' }, children: child }, index)));
+        }
+        return processedChildren;
+    }, [processedChildren, gridRole]);
+    // Render skeletons
+    const skeletons = useMemo(() => {
+        if (!isLoading)
+            return null;
+        return Array.from({ length: skeletonCount }, (_, index) => (_jsx(GridItem, { "$animation": { enabled: true, type: 'fade', duration: 200 }, "$animationIndex": index, "$borderRadius": itemConfig?.borderRadius, "$aspectRatio": itemConfig?.aspectRatio, children: renderSkeleton ? (renderSkeleton()) : (_jsx(DefaultSkeleton, { aspectRatio: itemConfig?.aspectRatio })) }, `skeleton-${index}`)));
+    }, [isLoading, skeletonCount, renderSkeleton, itemConfig]);
+    // Check if empty
+    const isEmpty = !isLoading && itemCount === 0;
+    // Grid context value
+    const contextValue = useMemo(() => ({
+        columns: calculatedColumns,
+        gap: gapValue,
+        variant,
+        itemConfig,
+    }), [calculatedColumns, gapValue, variant, itemConfig]);
+    return (_jsx(GridContext.Provider, { value: contextValue, children: _jsxs(GridWrapper, { ref: innerRef, "$variant": variant, className: cn(containerClassName, className), style: style, "data-aui": "dynamic-grid", ...rest, children: [_jsx(GridContainer, { ref: gridRef, as: gridRole === 'list' ? 'ul' : 'div', role: gridRole === 'grid' ? 'grid' : undefined, "aria-label": ariaLabel, "$columns": calculatedColumns, "$minWidth": minWidth, "$maxWidth": maxWidth, "$gap": gapValue, "$rowGap": rowGapValue, "$columnGap": columnGapValue, "$autoFit": autoFit, "$maxRows": maxRows, "$alignItems": alignItems, "$justifyItems": justifyItems, "$alignContent": alignContent, "$justifyContent": justifyContent, "$scroll": scrollConfig, "$animation": animation, "$variant": variant, children: isLoading ? skeletons : isEmpty ? null : renderChildren }), isEmpty && (emptyState || _jsx(DefaultEmptyState, {})), scrollConfig?.enabled && scrollConfig.showArrows && !isEmpty && (_jsxs(_Fragment, { children: [_jsx(ScrollArrow, { "$direction": "left", "$visible": scrollNav.canScrollLeft, onClick: scrollNav.scrollLeft, "aria-label": "Scroll left", disabled: !scrollNav.canScrollLeft, children: _jsx(ChevronLeftIcon, {}) }), _jsx(ScrollArrow, { "$direction": "right", "$visible": scrollNav.canScrollRight, onClick: scrollNav.scrollRight, "aria-label": "Scroll right", disabled: !scrollNav.canScrollRight, children: _jsx(ChevronRightIcon, {}) })] })), scrollConfig?.enabled && scrollConfig.showDots && !isEmpty && (_jsx(ScrollDots, { children: Array.from({ length: scrollNav.totalPages }, (_, index) => (_jsx(ScrollDot, { "$active": index === scrollNav.currentPage, onClick: () => scrollNav.scrollTo(index), "aria-label": `Go to page ${index + 1}` }, index))) }))] }) }));
+});
+// Grid Item component for advanced usage
+export const DynamicGridItem = forwardRef(function DynamicGridItemComponent({ children, colSpan, rowSpan, order, alignSelf, justifySelf, className, ...rest }, ref) {
+    const gridContext = useGridContext();
+    return (_jsx(GridItem, { ref: ref, "$colSpan": colSpan, "$rowSpan": rowSpan, "$order": order, "$alignSelf": alignSelf, "$justifySelf": justifySelf, "$borderRadius": gridContext?.itemConfig?.borderRadius, "$padding": gridContext?.itemConfig?.padding, className: className, ...rest, children: children }));
+});
+DynamicGrid.displayName = 'DynamicGrid';
+DynamicGridItem.displayName = 'DynamicGridItem';

package/lib/src/core-components/src/components/DynamicGrid/GridContainer.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ScrollProps } from './types';
+declare const GridContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $autoFit: boolean | undefined;
+    $columns: number;
+    $gap: string;
+    $minWidth: number;
+    $maxRows: number | undefined;
+    $scroll: ScrollProps;
+}>> & string;
+export default GridContainer;
+//# sourceMappingURL=GridContainer.d.ts.map

package/lib/src/core-components/src/components/DynamicGrid/GridContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/DynamicGrid/GridContainer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,aAAa;cACP,OAAO,GAAG,SAAS;cACnB,MAAM;UACV,MAAM;eACD,MAAM;cACP,MAAM,GAAG,SAAS;aACnB,WAAW;YA2FrB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/src/core-components/src/components/DynamicGrid/GridContainer.js

@@ -0,0 +1,89 @@
+import { styled, css } from 'styled-components';
+const GridContainer = styled.div `
+  display: grid;
+  gap: ${({ $gap }) => $gap};
+
+  & > li {
+    display: flex;
+    box-sizing: border-box;
+
+    & > * {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  ${({ $autoFit, $columns, $gap }) => $autoFit &&
+    css `
+      & > *:only-child {
+        width: 100%;
+        max-width: calc((100% - ${$columns - 1} * ${$gap}) / ${$columns});
+      }
+    `}
+
+  ${({ $minWidth, $columns, $autoFit }) => css `
+      grid-template-columns: repeat(
+        ${$autoFit ? 'auto-fit' : $columns},
+        minmax(${$minWidth}rem, 1fr)
+      );
+    `};
+
+  ${({ $maxRows, $columns, $scroll }) => $maxRows &&
+    !$scroll &&
+    css `
+      & > *:nth-child(n + ${$columns * $maxRows + 1}) {
+        display: none;
+      }
+    `}
+
+  ${({ $scroll, $minWidth, $columns, $gap, $maxRows }) => $scroll &&
+    css `
+      &&& {
+        scroll-behavior: smooth;
+        overflow-x: scroll;
+        scroll-snap-type: x mandatory;
+        grid-auto-flow: column;
+        -webkit-overflow-scrolling: touch;
+
+        /* prevent overflow from hiding the focus outline */
+        & > *:focus,
+        & > li > *:focus {
+          outline-offset: -2px;
+        }
+
+        ${$scroll.hideScrollbar &&
+        css `
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          &::-webkit-scrollbar {
+            display: none;
+            height: 0;
+            background: transparent;
+          }
+        `}
+
+        grid-template-columns: unset;
+        grid-template-rows: repeat(${$maxRows || 1}, max-content);
+        grid-auto-columns: max(
+          calc(
+            (100% - ${$columns + ($scroll.scrollHint || 0) - 1} * ${$gap}) /
+              ${$columns + ($scroll.scrollHint || 0)}
+          ),
+          ${$minWidth}rem
+        );
+      }
+
+      &&& > * {
+        scroll-snap-align: ${$scroll.scrollSnapAlign || 'start'};
+      }
+
+      &&& > *:first-child {
+        scroll-snap-align: start;
+      }
+
+      &&& > *:last-child {
+        scroll-snap-align: end;
+      }
+    `}
+`;
+export default GridContainer;

package/lib/src/core-components/src/components/DynamicGrid/elements.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { GridVariant, ScrollConfig, AnimationConfig } from './types';
+export declare const GridWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $variant: GridVariant;
+}>> & string;
+export declare const GridContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $columns: number;
+    $minWidth: number;
+    $maxWidth?: number | undefined;
+    $gap: string;
+    $rowGap?: string | undefined;
+    $columnGap?: string | undefined;
+    $autoFit: boolean;
+    $maxRows?: number | undefined;
+    $alignItems?: "center" | "start" | "end" | "stretch" | undefined;
+    $justifyItems?: "center" | "start" | "end" | "stretch" | undefined;
+    $alignContent?: "center" | "start" | "end" | "stretch" | undefined;
+    $justifyContent?: "center" | "start" | "end" | "space-around" | "space-between" | "space-evenly" | undefined;
+    $scroll?: ScrollConfig | undefined;
+    $animation?: AnimationConfig | undefined;
+    $variant: GridVariant;
+}>> & string;
+export declare const GridItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $colSpan?: number | undefined;
+    $rowSpan?: number | undefined;
+    $order?: number | undefined;
+    $alignSelf?: "center" | "start" | "end" | "stretch" | undefined;
+    $justifySelf?: "center" | "start" | "end" | "stretch" | undefined;
+    $animation?: AnimationConfig | undefined;
+    $animationIndex?: number | undefined;
+    $borderRadius?: string | undefined;
+    $padding?: string | undefined;
+    $aspectRatio?: string | undefined;
+}>> & string;
+export declare const SkeletonItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $aspectRatio?: string | undefined;
+    $borderRadius?: string | undefined;
+}>> & string;
+export declare const EmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ScrollArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $direction: 'left' | 'right';
+    $visible: boolean;
+}>> & string;
+export declare const ScrollDots: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ScrollDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $active: boolean;
+}>> & string;
+export declare const LoadingOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+//# sourceMappingURL=elements.d.ts.map

package/lib/src/core-components/src/components/DynamicGrid/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/DynamicGrid/elements.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,WAAW,EAGX,YAAY,EACZ,eAAe,EAGhB,MAAM,SAAS,CAAC;AAgEjB,eAAO,MAAM,WAAW;cACZ,WAAW;YA6BtB,CAAC;AAGF,eAAO,MAAM,aAAa;cACd,MAAM;eACL,MAAM;;UAEX,MAAM;;;cAGF,OAAO;;;;;;;;cAQP,WAAW;YAsJtB,CAAC;AAGF,eAAO,MAAM,QAAQ;;;;;;;;;;;YA+EpB,CAAC;AAGF,eAAO,MAAM,YAAY;;;YAoBxB,CAAC;AAGF,eAAO,MAAM,UAAU,6NAgBtB,CAAC;AAGF,eAAO,MAAM,WAAW;gBACV,MAAM,GAAG,OAAO;cAClB,OAAO;YA2ClB,CAAC;AAGF,eAAO,MAAM,UAAU,6NAKtB,CAAC;AAEF,eAAO,MAAM,SAAS;aACX,OAAO;YAqBjB,CAAC;AAGF,eAAO,MAAM,cAAc,6NAS1B,CAAC"}