@qiiqa/bob-ui-react-layout 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,185 @@
+import React, { ReactNode } from 'react';
+
+interface BobResponsivenessConfig {
+    small: {
+        page: number;
+        group: number;
+    };
+    medium: {
+        page: number;
+        group: number;
+    };
+    large: {
+        page: number;
+        group: number;
+    };
+    extraLarge: {
+        page: number;
+        group: number;
+    };
+}
+declare const DEFAULT_RESPONSIVENESS_CONFIG: BobResponsivenessConfig;
+type LayoutStateDictionary = Record<string, string[]>;
+interface LayoutContextState {
+    designMode: boolean;
+    designTabs: boolean;
+    designGroups: boolean;
+    designFields: boolean;
+    layoutState: LayoutStateDictionary;
+    selectedItemIds: string[];
+    isDraggingActive: boolean;
+    dragOverId: string | null;
+    dragSide: 'left' | 'right' | 'top' | 'bottom' | null;
+    pageCols: number;
+    groupCols: number;
+    setLayoutState: React.Dispatch<React.SetStateAction<LayoutStateDictionary>>;
+    toggleItemSelection: (id: string, multi: boolean) => void;
+    clearItemSelection: () => void;
+    setDraggingActive: (active: boolean) => void;
+    setDragOverState: (id: string | null, side: 'left' | 'right' | 'top' | 'bottom' | null) => void;
+    loadLayoutState: (state: LayoutStateDictionary) => void;
+    reorderItemWithinContainer: (containerId: string, activeId: string, overId: string, fallbackItems?: string[], insertAfter?: boolean) => void;
+    moveItemBetweenContainers: (sourceContainerId: string, destContainerId: string, activeId: string, overId: string, fallbackItems?: string[], insertAfter?: boolean) => void;
+    setDesignMode: (mode: boolean) => void;
+    setDesignTabs: (mode: boolean) => void;
+    setDesignGroups: (mode: boolean) => void;
+    setDesignFields: (mode: boolean) => void;
+    setPageCols: (cols: number) => void;
+    setGroupCols: (cols: number) => void;
+    responsivenessConfig: BobResponsivenessConfig;
+    setResponsivenessConfig: (config: BobResponsivenessConfig) => void;
+    currentBreakpoint: string;
+}
+declare function useLayoutContext(): LayoutContextState;
+declare const LayoutProvider: React.FC<{
+    children: ReactNode;
+    initialDesignMode?: boolean;
+    initialDesignTabs?: boolean;
+    initialDesignGroups?: boolean;
+    initialDesignFields?: boolean;
+    initialLayoutState?: LayoutStateDictionary;
+    initialPageCols?: number;
+    initialGroupCols?: number;
+    initialResponsivenessConfig?: BobResponsivenessConfig;
+    onLayoutChange?: (state: LayoutStateDictionary) => void;
+    onPageColsChange?: (cols: number) => void;
+    onGroupColsChange?: (cols: number) => void;
+    onResponsivenessConfigChange?: (config: BobResponsivenessConfig) => void;
+}>;
+
+interface BobFormProps {
+    children: ReactNode;
+    className?: string;
+    designMode?: boolean;
+    designTabs?: boolean;
+    designGroups?: boolean;
+    designFields?: boolean;
+    layoutState?: Record<string, string[]>;
+    pageCols?: number;
+    groupCols?: number;
+    initialResponsivenessConfig?: any;
+    onLayoutChange?: (state: any) => void;
+    onPageColsChange?: (cols: number) => void;
+    onGroupColsChange?: (cols: number) => void;
+    onResponsivenessConfigChange?: (config: any) => void;
+}
+declare const BobForm: React.FC<BobFormProps>;
+
+interface BobTabStripProps {
+    id: string;
+    children?: ReactNode;
+    className?: string;
+}
+declare const BobTabStrip: React.FC<BobTabStripProps>;
+
+interface BobTabProps {
+    id: string;
+    label: string | ReactNode;
+    isActive?: boolean;
+    onClick?: (id: string) => void;
+    className?: string;
+}
+declare const BobTab: React.FC<BobTabProps>;
+
+interface BobPageProps {
+    id: string;
+    children?: ReactNode;
+    columns?: number;
+    className?: string;
+}
+declare const BobPage: React.FC<BobPageProps>;
+
+interface BobTabPageProps {
+    id?: string;
+    children?: ReactNode;
+    isActive?: boolean;
+    columns?: number;
+    className?: string;
+    pageClassName?: string;
+}
+declare const BobTabPage: React.FC<BobTabPageProps>;
+
+interface BobPanelProps {
+    id: string;
+    children?: ReactNode;
+    colSpan?: number;
+    rowSpan?: number;
+    columns?: number;
+    className?: string;
+    caption?: string;
+    newline?: boolean;
+    onRowResize?: (delta: number) => void;
+    style?: React.CSSProperties;
+}
+declare const BobPanel: React.FC<BobPanelProps>;
+
+interface BobItemProps {
+    id: string;
+    children?: ReactNode;
+    colSpan?: number;
+    rowSpan?: number;
+    className?: string;
+    expandVertical?: boolean;
+    caption?: string;
+    hideCaption?: boolean;
+    newline?: boolean;
+    onRowResize?: (delta: number) => void;
+    style?: React.CSSProperties;
+    horizontal?: boolean;
+    labelWidth?: string;
+}
+declare const BobItem: React.FC<BobItemProps>;
+
+interface BobResponsivenessProps {
+    className?: string;
+}
+/**
+ * BobResponsiveness component acts as a UI for viewing the current breakpoint
+ * and modifying the global responsiveness configuration in LayoutContext.
+ */
+declare const BobResponsiveness: React.FC<BobResponsivenessProps>;
+
+/**
+ * A GapDropZone represents the empty space between two BobItems (or before the first / after the last).
+ * It renders as a 20px invisible hit-target that highlights when dragged over
+ * and contains the +/- column span control for the *preceding* item.
+ *
+ * `containerId`       – the BobPanel this gap belongs to
+ * `insertAfterItemId` – if set, the new item is inserted AFTER this id; if undefined, insert at START
+ * `colSpan`           – current colSpan of the preceding item (for display)
+ * `onResize`          – called with delta (+1 / -1)
+ * `position`          – 'start' | 'between' | 'end'
+ */
+interface GapDropZoneProps {
+    id: string;
+    containerId: string;
+    insertAfterItemId?: string;
+    colSpan?: number;
+    newline?: boolean;
+    onResize?: (delta: number) => void;
+    onToggleNewline?: () => void;
+    position: 'start' | 'between' | 'end';
+}
+declare const GapDropZone: React.FC<GapDropZoneProps>;
+
+export { BobForm, type BobFormProps, BobItem, type BobItemProps, BobPage, type BobPageProps, BobPanel, type BobPanelProps, BobResponsiveness, type BobResponsivenessConfig, type BobResponsivenessProps, BobTab, BobTabPage, type BobTabPageProps, type BobTabProps, BobTabStrip, type BobTabStripProps, DEFAULT_RESPONSIVENESS_CONFIG, GapDropZone, type GapDropZoneProps, type LayoutContextState, LayoutProvider, type LayoutStateDictionary, useLayoutContext };