@true-tech-team/react-components 0.0.5 → 0.0.7

package/lib/components/dnd/KanbanBoard/KanbanBoard.d.ts

@@ -0,0 +1,126 @@
+import { ReactNode } from 'react';
+import { KanbanCardRenderProps } from './KanbanCard';
+import { BaseComponentProps, ComponentSize } from '../../../types/component.types';
+/**
+ * Card data type
+ */
+export interface KanbanCardData {
+    /**
+     * Unique identifier for the card
+     */
+    id: string;
+    /**
+     * Additional card data
+     */
+    [key: string]: unknown;
+}
+/**
+ * Column data type
+ */
+export interface KanbanColumnData {
+    /**
+     * Unique identifier for the column
+     */
+    id: string;
+    /**
+     * Column title
+     */
+    title: string;
+    /**
+     * Cards in this column
+     */
+    items: KanbanCardData[];
+    /**
+     * Additional column data
+     */
+    [key: string]: unknown;
+}
+export interface KanbanBoardProps<T extends KanbanCardData> extends Omit<BaseComponentProps, 'onChange' | 'children'> {
+    /**
+     * Columns configuration
+     */
+    columns: KanbanColumnData[];
+    /**
+     * Callback when a card is moved
+     */
+    onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, fromIndex: number, toIndex: number) => void;
+    /**
+     * Callback when columns are reordered
+     */
+    onColumnReorder?: (columns: KanbanColumnData[]) => void;
+    /**
+     * Render function for each card
+     */
+    renderCard: (card: T, props: KanbanCardRenderProps) => ReactNode;
+    /**
+     * Render function for column header
+     */
+    renderColumnHeader?: (column: KanbanColumnData) => ReactNode;
+    /**
+     * Gap between columns
+     * @default 'md'
+     */
+    columnGap?: ComponentSize | number;
+    /**
+     * Gap between cards within a column
+     * @default 'sm'
+     */
+    cardGap?: ComponentSize | number;
+    /**
+     * Column width
+     * @default 280
+     */
+    columnWidth?: number | 'auto' | 'equal';
+    /**
+     * Minimum column height
+     * @default 200
+     */
+    minColumnHeight?: number;
+    /**
+     * Whether columns can be reordered
+     * @default false
+     */
+    allowColumnReorder?: boolean;
+    /**
+     * Whether to use drag handles for cards
+     * @default false
+     */
+    useDragHandle?: boolean;
+    /**
+     * Whether the board is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Horizontal scroll behavior
+     * @default 'scroll'
+     */
+    overflowBehavior?: 'scroll' | 'wrap' | 'none';
+}
+/**
+ * KanbanBoard component for creating kanban-style boards
+ *
+ * @example
+ * ```tsx
+ * const [columns, setColumns] = useState([
+ *   { id: 'todo', title: 'To Do', items: [{ id: '1', title: 'Task 1' }] },
+ *   { id: 'doing', title: 'In Progress', items: [] },
+ *   { id: 'done', title: 'Done', items: [] },
+ * ]);
+ *
+ * <KanbanBoard
+ *   columns={columns}
+ *   onCardMove={(cardId, fromCol, toCol, fromIdx, toIdx) => {
+ *     // Update columns state
+ *   }}
+ *   renderCard={(card, { isDragging }) => (
+ *     <div data-dragging={isDragging}>{card.title}</div>
+ *   )}
+ * />
+ * ```
+ */
+export declare function KanbanBoard<T extends KanbanCardData>(props: KanbanBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace KanbanBoard {
+    var displayName: string;
+}
+export default KanbanBoard;

package/lib/components/dnd/KanbanBoard/KanbanBoardContext.d.ts

@@ -0,0 +1,62 @@
+/**
+ * KanbanBoard context for sharing state across kanban components
+ */
+/**
+ * Card move event data
+ */
+export interface CardMoveEvent {
+    cardId: string;
+    fromColumnId: string;
+    toColumnId: string;
+    fromIndex: number;
+    toIndex: number;
+}
+/**
+ * KanbanBoard context value
+ */
+export interface KanbanBoardContextValue {
+    /**
+     * Whether column reordering is allowed
+     */
+    allowColumnReorder: boolean;
+    /**
+     * Whether to use drag handles for cards
+     */
+    useDragHandle: boolean;
+    /**
+     * Whether the board is disabled
+     */
+    disabled: boolean;
+    /**
+     * Column width
+     */
+    columnWidth: number | 'auto' | 'equal';
+    /**
+     * Callback when a card is moved
+     */
+    onCardMove: (event: CardMoveEvent) => void;
+    /**
+     * Callback when columns are reordered
+     */
+    onColumnReorder: (fromIndex: number, toIndex: number) => void;
+    /**
+     * Get the ID of the currently dragged card
+     */
+    getActiveCardId: () => string | null;
+    /**
+     * Get the ID of the column being dragged over
+     */
+    getOverColumnId: () => string | null;
+}
+/**
+ * KanbanBoard context
+ */
+export declare const KanbanBoardContext: import('react').Context<KanbanBoardContextValue | null>;
+/**
+ * Hook to access KanbanBoard context (throws if not in provider)
+ */
+export declare function useKanbanBoardContext(): KanbanBoardContextValue;
+/**
+ * Hook to access KanbanBoard context (returns null if not in provider)
+ */
+export declare function useKanbanBoardContextOptional(): KanbanBoardContextValue | null;

package/lib/components/dnd/KanbanBoard/KanbanCard.d.ts

@@ -0,0 +1,76 @@
+import { default as React, ReactNode, DragEvent } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props passed to renderCard function
+ */
+export interface KanbanCardRenderProps {
+    /**
+     * Whether this card is being dragged
+     */
+    isDragging: boolean;
+    /**
+     * Whether another card is being dragged over this card
+     */
+    isOver: boolean;
+    /**
+     * Props to spread on a drag handle element
+     */
+    dragHandleProps?: {
+        draggable: boolean;
+        onDragStart: (event: DragEvent<HTMLElement>) => void;
+        onDragEnd: (event: DragEvent<HTMLElement>) => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+        role: string;
+        tabIndex: number;
+        'aria-grabbed': boolean;
+    };
+    /**
+     * Column ID this card belongs to
+     */
+    columnId: string;
+    /**
+     * Index of the card in the column
+     */
+    index: number;
+}
+export interface KanbanCardProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Unique identifier for this card
+     */
+    id: string;
+    /**
+     * ID of the column this card belongs to
+     */
+    columnId: string;
+    /**
+     * Index of this card in the column
+     */
+    index: number;
+    /**
+     * Whether this card is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional data associated with this card
+     */
+    data?: Record<string, unknown>;
+    /**
+     * Card content - can be a ReactNode or a render function
+     */
+    children?: ReactNode | ((props: KanbanCardRenderProps) => ReactNode);
+}
+/**
+ * KanbanCard component for use within KanbanColumn
+ *
+ * @example
+ * ```tsx
+ * <KanbanCard id="card-1" columnId="todo" index={0}>
+ *   {({ isDragging }) => (
+ *     <div data-dragging={isDragging}>Card content</div>
+ *   )}
+ * </KanbanCard>
+ * ```
+ */
+export declare const KanbanCard: React.ForwardRefExoticComponent<KanbanCardProps & React.RefAttributes<HTMLDivElement>>;
+export default KanbanCard;

package/lib/components/dnd/KanbanBoard/KanbanColumn.d.ts

@@ -0,0 +1,43 @@
+import { default as React, ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+export interface KanbanColumnProps extends BaseComponentProps {
+    /**
+     * Unique identifier for this column
+     */
+    id: string;
+    /**
+     * Index of this column in the board
+     */
+    index: number;
+    /**
+     * Column title
+     */
+    title?: string;
+    /**
+     * Custom header content
+     */
+    header?: ReactNode;
+    /**
+     * Whether this column is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional data associated with this column
+     */
+    data?: Record<string, unknown>;
+}
+/**
+ * KanbanColumn component for use within KanbanBoard
+ *
+ * @example
+ * ```tsx
+ * <KanbanColumn id="todo" index={0} title="To Do">
+ *   <KanbanCard id="card-1" columnId="todo" index={0}>
+ *     Card content
+ *   </KanbanCard>
+ * </KanbanColumn>
+ * ```
+ */
+export declare const KanbanColumn: React.ForwardRefExoticComponent<KanbanColumnProps & React.RefAttributes<HTMLDivElement>>;
+export default KanbanColumn;

package/lib/components/dnd/KanbanBoard/index.d.ts

@@ -0,0 +1,5 @@
+export { KanbanBoard, type KanbanBoardProps, type KanbanCardData, type KanbanColumnData } from './KanbanBoard';
+export { KanbanColumn, type KanbanColumnProps } from './KanbanColumn';
+export { KanbanCard, type KanbanCardProps, type KanbanCardRenderProps } from './KanbanCard';
+export { KanbanBoardContext, useKanbanBoardContext, useKanbanBoardContextOptional, type KanbanBoardContextValue, type CardMoveEvent, } from './KanbanBoardContext';
+export { default } from './KanbanBoard';

package/lib/components/dnd/ResizablePanels/ResizablePanel.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+export interface ResizablePanelProps extends BaseComponentProps {
+    /**
+     * Unique panel ID
+     */
+    id?: string;
+    /**
+     * Minimum size as percentage
+     * @default 10
+     */
+    minSize?: number;
+    /**
+     * Maximum size as percentage
+     * @default 90
+     */
+    maxSize?: number;
+    /**
+     * Default size as percentage
+     */
+    defaultSize?: number;
+    /**
+     * Whether panel is collapsible
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Collapsed state (controlled)
+     */
+    collapsed?: boolean;
+    /**
+     * Callback when collapse state changes
+     */
+    onCollapse?: (collapsed: boolean) => void;
+}
+/**
+ * ResizablePanel component for use within ResizablePanels
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanels>
+ *   <ResizablePanel minSize={20} defaultSize={30}>
+ *     <Sidebar />
+ *   </ResizablePanel>
+ *   <ResizeHandle />
+ *   <ResizablePanel>
+ *     <MainContent />
+ *   </ResizablePanel>
+ * </ResizablePanels>
+ * ```
+ */
+export declare const ResizablePanel: React.ForwardRefExoticComponent<ResizablePanelProps & React.RefAttributes<HTMLDivElement>>;
+export default ResizablePanel;

package/lib/components/dnd/ResizablePanels/ResizablePanels.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+export interface ResizablePanelsProps extends BaseComponentProps {
+    /**
+     * Direction of panels
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Callback when panel sizes change
+     */
+    onResize?: (sizes: number[]) => void;
+    /**
+     * Controlled panel sizes (percentages)
+     */
+    sizes?: number[];
+    /**
+     * Default panel sizes (percentages)
+     */
+    defaultSizes?: number[];
+}
+/**
+ * ResizablePanels component for creating resizable split layouts
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanels direction="horizontal" onResize={setSizes}>
+ *   <ResizablePanel minSize={20} defaultSize={30}>
+ *     <Sidebar />
+ *   </ResizablePanel>
+ *   <ResizeHandle />
+ *   <ResizablePanel minSize={30}>
+ *     <MainContent />
+ *   </ResizablePanel>
+ *   <ResizeHandle />
+ *   <ResizablePanel minSize={20} collapsible>
+ *     <DetailPanel />
+ *   </ResizablePanel>
+ * </ResizablePanels>
+ * ```
+ */
+export declare const ResizablePanels: React.FC<ResizablePanelsProps>;
+export default ResizablePanels;

package/lib/components/dnd/ResizablePanels/ResizablePanelsContext.d.ts

@@ -0,0 +1,64 @@
+/**
+ * ResizablePanels context for sharing state across resizable components
+ */
+/**
+ * ResizablePanels context value
+ */
+export interface ResizablePanelsContextValue {
+    /**
+     * Direction of panels
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Current panel sizes (percentages)
+     */
+    sizes: number[];
+    /**
+     * Update panel sizes
+     */
+    setSizes: (sizes: number[]) => void;
+    /**
+     * Start resizing at a specific handle index
+     */
+    startResize: (handleIndex: number) => void;
+    /**
+     * Stop resizing
+     */
+    stopResize: () => void;
+    /**
+     * Currently active handle index (-1 if not resizing)
+     */
+    activeHandle: number;
+    /**
+     * Register a panel and return its index
+     */
+    registerPanel: (config: {
+        minSize: number;
+        maxSize: number;
+        collapsible: boolean;
+    }) => number;
+    /**
+     * Get panel config by index
+     */
+    getPanelConfig: (index: number) => {
+        minSize: number;
+        maxSize: number;
+        collapsible: boolean;
+    } | undefined;
+    /**
+     * Total number of panels
+     */
+    panelCount: number;
+}
+/**
+ * ResizablePanels context
+ */
+export declare const ResizablePanelsContext: import('react').Context<ResizablePanelsContextValue | null>;
+/**
+ * Hook to access ResizablePanels context (throws if not in provider)
+ */
+export declare function useResizablePanelsContext(): ResizablePanelsContextValue;
+/**
+ * Hook to access ResizablePanels context (returns null if not in provider)
+ */
+export declare function useResizablePanelsContextOptional(): ResizablePanelsContextValue | null;

package/lib/components/dnd/ResizablePanels/ResizeHandle.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+export interface ResizeHandleProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Visual style
+     * @default 'line'
+     */
+    variant?: 'line' | 'dots' | 'hidden';
+    /**
+     * Whether to show on hover only
+     * @default false
+     */
+    showOnHover?: boolean;
+}
+/**
+ * ResizeHandle component for use within ResizablePanels
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanels>
+ *   <ResizablePanel>Content 1</ResizablePanel>
+ *   <ResizeHandle variant="dots" />
+ *   <ResizablePanel>Content 2</ResizablePanel>
+ * </ResizablePanels>
+ * ```
+ */
+export declare const ResizeHandle: React.ForwardRefExoticComponent<ResizeHandleProps & React.RefAttributes<HTMLDivElement>>;
+export default ResizeHandle;

package/lib/components/dnd/ResizablePanels/index.d.ts

@@ -0,0 +1,5 @@
+export { ResizablePanels, type ResizablePanelsProps } from './ResizablePanels';
+export { ResizablePanel, type ResizablePanelProps } from './ResizablePanel';
+export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
+export { ResizablePanelsContext, useResizablePanelsContext, useResizablePanelsContextOptional, type ResizablePanelsContextValue, } from './ResizablePanelsContext';
+export { default } from './ResizablePanels';

package/lib/components/dnd/SortableGrid/SortableGrid.d.ts

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { SortableGridItemRenderProps } from './SortableGridItem';
+import { BaseComponentProps, ComponentSize } from '../../../types/component.types';
+/**
+ * Item type for SortableGrid
+ */
+export interface SortableGridItemData {
+    /**
+     * Unique identifier for the item
+     */
+    id: string;
+    /**
+     * Additional item data
+     */
+    [key: string]: unknown;
+}
+export interface SortableGridProps<T extends SortableGridItemData> extends Omit<BaseComponentProps, 'onChange' | 'children'> {
+    /**
+     * Items to render
+     */
+    items: T[];
+    /**
+     * Callback when items are reordered
+     */
+    onReorder?: (items: T[]) => void;
+    /**
+     * Render function for each item
+     */
+    renderItem: (item: T, props: SortableGridItemRenderProps) => ReactNode;
+    /**
+     * Number of columns
+     * @default 'auto'
+     */
+    columns?: number | 'auto';
+    /**
+     * Minimum item width (for auto columns)
+     * @default 150
+     */
+    minItemWidth?: number;
+    /**
+     * Gap between items
+     * @default 'md'
+     */
+    gap?: ComponentSize | number;
+    /**
+     * Whether the grid is disabled
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * SortableGrid component for creating reorderable grid layouts
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState([
+ *   { id: '1', image: '/img1.jpg' },
+ *   { id: '2', image: '/img2.jpg' },
+ *   { id: '3', image: '/img3.jpg' },
+ * ]);
+ *
+ * <SortableGrid
+ *   items={items}
+ *   onReorder={setItems}
+ *   columns={3}
+ *   renderItem={(item, { isDragging }) => (
+ *     <img src={item.image} data-dragging={isDragging} />
+ *   )}
+ * />
+ * ```
+ */
+export declare function SortableGrid<T extends SortableGridItemData>({ items, onReorder, renderItem, columns, minItemWidth, gap, disabled, className, 'data-testid': dataTestId, 'aria-label': ariaLabel, style, }: SortableGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SortableGrid {
+    var displayName: string;
+}
+export default SortableGrid;

package/lib/components/dnd/SortableGrid/SortableGridItem.d.ts

@@ -0,0 +1,47 @@
+import { default as React, ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props passed to renderItem function
+ */
+export interface SortableGridItemRenderProps {
+    /**
+     * Whether this item is being dragged
+     */
+    isDragging: boolean;
+    /**
+     * Whether another item is being dragged over this item
+     */
+    isOver: boolean;
+    /**
+     * Index of the item in the grid
+     */
+    index: number;
+}
+export interface SortableGridItemProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Unique identifier for this item
+     */
+    id: string;
+    /**
+     * Index of this item in the grid
+     */
+    index: number;
+    /**
+     * Whether this item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Data associated with this item
+     */
+    data?: Record<string, unknown>;
+    /**
+     * Content to render - can be a ReactNode or a render function
+     */
+    children?: ReactNode | ((props: SortableGridItemRenderProps) => ReactNode);
+}
+/**
+ * SortableGridItem component for use within SortableGrid
+ */
+export declare const SortableGridItem: React.ForwardRefExoticComponent<SortableGridItemProps & React.RefAttributes<HTMLDivElement>>;
+export default SortableGridItem;

package/lib/components/dnd/SortableGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { SortableGrid, type SortableGridProps, type SortableGridItemData } from './SortableGrid';
+export { SortableGridItem as SortableGridItemComponent, type SortableGridItemProps, type SortableGridItemRenderProps, } from './SortableGridItem';
+export { default } from './SortableGrid';