aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
91 lines • 3.38 kB
TypeScript
import React from 'react';
export interface ComponentDefinition {
id: string;
type: string;
name: string;
icon: string;
category: 'layout' | 'content' | 'media' | 'interactive' | 'advanced';
defaultProps: Record<string, any>;
editableProps: {
[key: string]: {
type: 'text' | 'number' | 'color' | 'boolean' | 'select' | 'image' | 'range';
label: string;
options?: string[];
min?: number;
max?: number;
step?: number;
};
};
allowChildren?: boolean;
maxChildren?: number;
acceptsTypes?: string[];
}
export interface PageComponent {
id: string;
type: string;
props: Record<string, any>;
children: PageComponent[];
parent?: string;
order: number;
locked?: boolean;
}
export interface DragDropState {
isDragging: boolean;
draggedItem?: ComponentDefinition | PageComponent;
draggedType: 'component' | 'element' | null;
dropTarget?: string;
dropPosition?: 'before' | 'after' | 'inside';
previewPosition?: {
x: number;
y: number;
};
}
export interface PageBuilderState {
components: PageComponent[];
selectedComponent?: string;
clipboardComponent?: PageComponent;
history: PageComponent[][];
historyIndex: number;
previewMode: boolean;
activeBreakpoint: 'desktop' | 'tablet' | 'mobile';
showGrid: boolean;
snapToGrid: boolean;
}
interface DragDropContextValue {
pageState: PageBuilderState;
componentLibrary: ComponentDefinition[];
dragDropState: DragDropState;
onDragStart: (item: ComponentDefinition | PageComponent, type: 'component' | 'element') => void;
onDragEnd: () => void;
onDragOver: (targetId: string, position: 'before' | 'after' | 'inside') => void;
onDrop: (targetId?: string, position?: 'before' | 'after' | 'inside') => void;
addComponent: (definition: ComponentDefinition, targetId?: string, position?: 'before' | 'after' | 'inside') => void;
updateComponent: (id: string, props: Partial<Record<string, any>>) => void;
deleteComponent: (id: string) => void;
duplicateComponent: (id: string) => void;
moveComponent: (id: string, targetId: string, position: 'before' | 'after' | 'inside') => void;
selectComponent: (id?: string) => void;
getSelectedComponent: () => PageComponent | undefined;
getComponentById: (id: string) => PageComponent | undefined;
undo: () => void;
redo: () => void;
canUndo: () => boolean;
canRedo: () => boolean;
saveToHistory: () => void;
copyComponent: (id: string) => void;
pasteComponent: (targetId?: string) => void;
clearPage: () => void;
exportPage: () => any;
importPage: (data: any) => void;
togglePreviewMode: () => void;
setActiveBreakpoint: (breakpoint: 'desktop' | 'tablet' | 'mobile') => void;
toggleGrid: () => void;
toggleSnapToGrid: () => void;
}
export interface GlassDragDropProviderProps extends React.HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
}
export declare const DragDropProvider: React.ForwardRefExoticComponent<GlassDragDropProviderProps & React.RefAttributes<HTMLDivElement>>;
export { DragDropProvider as GlassDragDropProvider };
export declare const useDragDrop: () => DragDropContextValue;
//# sourceMappingURL=GlassDragDropProvider.d.ts.map