@app-studio/web 0.8.96 → 0.8.97

package/dist/components/Tree/Tree/Tree.state.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { TreeNode } from './Tree.type';
+interface UseTreeStateProps {
+    defaultExpandedItems?: string[];
+    expandedItems?: string[];
+    onExpandedItemsChange?: (expandedItems: string[]) => void;
+    defaultSelectedItem?: string;
+    selectedItem?: string;
+    onItemSelect?: (itemId: string, itemData?: TreeNode) => void;
+    multiSelect?: boolean;
+    items?: TreeNode[];
+    allowDragAndDrop?: boolean;
+    onItemsReorder?: (items: TreeNode[]) => void;
+    onDragStart?: (itemId: string, event: React.DragEvent) => void;
+    onDragEnd?: (itemId: string) => void;
+}
+export declare const useTreeState: ({ defaultExpandedItems, expandedItems: controlledExpandedItems, onExpandedItemsChange, defaultSelectedItem, selectedItem: controlledSelectedItem, onItemSelect, multiSelect, items, allowDragAndDrop, onItemsReorder, onDragStart, onDragEnd, }: UseTreeStateProps) => {
+    baseId: string;
+    expandedItems: string[] | undefined;
+    toggleItem: (itemId: string) => void;
+    isItemExpanded: (itemId: string) => boolean | undefined;
+    selectedItem: any;
+    selectItem: (itemId: string) => void;
+    multiSelect: boolean;
+    allowDragAndDrop: boolean;
+    draggedItemId: string | null;
+    dropTarget: {
+        itemId: string;
+        position: 'before' | 'after' | 'inside';
+    } | null;
+    handleDragStart: (e: React.DragEvent, itemId: string) => void;
+    handleDragOver: (e: React.DragEvent, itemId: string) => void;
+    handleDrop: (e: React.DragEvent) => void;
+    handleDragEnd: (_: React.DragEvent) => void;
+    getDraggedItem: () => TreeNode | undefined;
+    items: TreeNode[] | undefined;
+};
+export {};

package/dist/components/Tree/Tree/Tree.style.d.ts

@@ -0,0 +1,41 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant } from './Tree.type';
+/**
+ * Default styles for the Tree component and its parts
+ */
+export declare const DefaultTreeStyles: {
+    container: ViewProps;
+    item: ViewProps;
+    itemLabel: ViewProps;
+    itemContent: ViewProps;
+    icon: ViewProps;
+    expandIcon: ViewProps;
+};
+/**
+ * Size variations for the Tree component (primarily affects TreeItemLabel padding and font size)
+ */
+export declare const TreeSizes: Record<Size, ViewProps>;
+/**
+ * Variant styles for the Tree component (applied to TreeItemLabel for visual feedback)
+ */
+export declare const TreeItemLabelVariants: Record<Variant, ViewProps>;
+/**
+ * States for tree items (typically applied to TreeItemLabel)
+ */
+export declare const TreeItemStates: {
+    selected: {
+        backgroundColor: string;
+        color: string;
+        fontWeight: string;
+    };
+    hover: {
+        backgroundColor: string;
+    };
+    disabled: {
+        opacity: number;
+        cursor: string;
+        _hover: {
+            backgroundColor: string;
+        };
+    };
+};

package/dist/components/Tree/Tree/Tree.type.d.ts

@@ -0,0 +1,133 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { TreeProps } from './Tree.props';
+interface TreePropsPlaceholder {
+}
+/**
+ * Size options for the Tree component (affects item padding/font)
+ */
+export declare type Size = 'sm' | 'md' | 'lg';
+/**
+ * Variant options for the Tree component (affects item appearance)
+ */
+export declare type Variant = 'default' | 'outline' | 'filled';
+/**
+ * Tree node data structure for data-driven approach
+ */
+export interface TreeNode {
+    /** Unique identifier for the node */
+    id: string;
+    /** Label text for the node */
+    label: string;
+    /** Optional icon to display next to the label */
+    icon?: React.ReactNode;
+    /** Child nodes for hierarchical structure */
+    children?: TreeNode[];
+    /** Whether the node is disabled (unclickable, deemphasized) */
+    disabled?: boolean;
+    /** Custom data to associate with the node (e.g., for onItemSelect callback) */
+    data?: any;
+    /** Optional custom styles for this specific node (applied to TreeItem) */
+    style?: ViewProps;
+    /** Whether the node is currently being dragged */
+    isDragging?: boolean;
+    /** Whether the node can be dragged */
+    draggable?: boolean;
+}
+/**
+ * Props for the TreeItem component (compound pattern)
+ */
+export interface TreeItemProps extends ViewProps {
+    /** Unique identifier for the item, used for expansion state and selection */
+    value: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Custom icon to display for this item */
+    icon?: React.ReactNode;
+    /** Children elements: typically TreeItemLabel and TreeItemContent */
+    children?: React.ReactNode;
+    /** Custom views for styling parts of this specific item */
+    views?: {
+        container?: ViewProps;
+        label?: ViewProps;
+        content?: ViewProps;
+        icon?: ViewProps;
+        expandIcon?: ViewProps;
+    };
+}
+/**
+ * Props for the TreeItemLabel component (compound pattern)
+ */
+export interface TreeItemLabelProps extends ViewProps {
+    /** Content of the label, typically text or other inline elements */
+    children?: React.ReactNode;
+    /** Custom views (rarely needed here, usually styled via TreeItem or global views) */
+    views?: {
+        container?: ViewProps;
+    };
+}
+/**
+ * Props for the TreeItemContent component (compound pattern)
+ */
+export interface TreeItemContentProps extends ViewProps {
+    /** Child elements, typically more TreeItem components for nesting */
+    children?: React.ReactNode;
+    /** Custom views (rarely needed here, usually styled via TreeItem or global views) */
+    views?: {
+        container?: ViewProps;
+    };
+}
+/**
+ * Context type for the Tree component, passed via React Context
+ */
+export interface TreeContextType {
+    /** List of expanded item IDs */
+    expandedItems: string[];
+    /** Function to toggle an item's expanded state */
+    toggleItem: (itemId: string) => void;
+    /** Function to check if an item is expanded */
+    isItemExpanded: (itemId: string) => boolean;
+    /** Base ID for generating accessible unique IDs for tree parts */
+    baseId: string;
+    /** Currently selected item ID */
+    selectedItem?: string;
+    /** Function to handle item selection */
+    selectItem: (itemId: string) => void;
+    /** Global size for tree items */
+    size: Size;
+    /** Global variant for tree items */
+    variant: Variant;
+    /** Global views configuration */
+    views?: TreeProps['views'];
+    /** Whether drag and drop is enabled */
+    allowDragAndDrop?: boolean;
+    /** Custom icon to use for the drag handle */
+    dragHandleIcon?: React.ReactNode;
+    /** Currently dragged item ID */
+    draggedItemId?: string | null;
+    /** Current drop target information */
+    dropTarget?: {
+        itemId: string;
+        position: 'before' | 'after' | 'inside';
+    } | null;
+    /** Function to handle drag start */
+    handleDragStart?: (e: React.DragEvent, itemId: string) => void;
+    /** Function to handle drag over */
+    handleDragOver?: (e: React.DragEvent, itemId: string) => void;
+    /** Function to handle drop */
+    handleDrop?: (e: React.DragEvent) => void;
+    /** Function to handle drag end */
+    handleDragEnd?: (e: React.DragEvent) => void;
+    /** Function to get the dragged item's data */
+    getDraggedItem?: () => TreeNode | undefined;
+}
+/**
+ * Tree component type with sub-components.
+ * P represents the props of the main Tree component (e.g., TreeProps).
+ */
+export interface TreeComponentType<P = TreePropsPlaceholder> extends React.FC<P> {
+    Item: React.FC<TreeItemProps>;
+    ItemLabel: React.FC<TreeItemLabelProps>;
+    ItemContent: React.FC<TreeItemContentProps>;
+}
+export {};

package/dist/components/Tree/Tree/Tree.view.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { TreeContextType, TreeNode, Size, Variant, TreeItemProps, TreeItemLabelProps, TreeItemContentProps } from './Tree.type';
+import { TreeProps } from './Tree.props';
+export declare const TreeProvider: React.FC<{
+    value: TreeContextType;
+    children: React.ReactNode;
+}>;
+export declare const useTreeContext: () => TreeContextType;
+interface TreeViewProps extends Pick<TreeProps, 'size' | 'variant' | 'views' | 'children'>, Omit<ViewProps, keyof Pick<TreeProps, 'size' | 'variant' | 'views' | 'children'>> {
+    baseId: string;
+}
+export declare const TreeView: React.FC<TreeViewProps>;
+export declare const TreeItem: React.FC<TreeItemProps>;
+interface InternalTreeItemLabelProps extends TreeItemLabelProps {
+    onClick?: (e: React.MouseEvent) => void;
+    onToggleExpand?: (e: React.MouseEvent) => void;
+    hasChildren?: boolean;
+    expanded?: boolean;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    isSelected?: boolean;
+    isDragging?: boolean;
+    size?: Size;
+    variant?: Variant;
+    views?: TreeProps['views'];
+}
+export declare const TreeItemLabel: React.FC<InternalTreeItemLabelProps>;
+interface InternalTreeItemContentProps extends TreeItemContentProps {
+    views?: TreeProps['views'];
+}
+export declare const TreeItemContent: React.FC<InternalTreeItemContentProps>;
+export declare const DataDrivenTreeView: React.FC<{
+    items: TreeNode[];
+}>;
+export {};

package/dist/components/Tree/Tree.d.ts

@@ -0,0 +1,2 @@
+import { TreeType } from './Tree/Tree.props';
+export declare const Tree: TreeType;

package/dist/components/Tree/examples/DragAndDrop.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TreeDragAndDrop: () => React.JSX.Element;

package/dist/components/Tree/examples/controlled.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ControlledTree: () => React.JSX.Element;

package/dist/components/Tree/examples/custom-styling.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomStyledTree: () => React.JSX.Element;

package/dist/components/Tree/examples/data-driven.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DataDrivenTree: () => React.JSX.Element;

package/dist/components/Tree/examples/default.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DefaultTree: () => React.JSX.Element;

package/dist/components/Tree/examples/index.d.ts

@@ -0,0 +1,6 @@
+export * from './default';
+export * from './data-driven';
+export * from './controlled';
+export * from './variants';
+export * from './custom-styling';
+export * from './DragAndDrop';

package/dist/components/Tree/examples/variants.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TreeVariants: () => React.JSX.Element;

package/dist/components/index.d.ts

@@ -48,6 +48,9 @@ export * from './Resizable/Resizable';
 export * from './Toast/Toast';
 export * from './Command/Command';
 export * from './Tooltip/Tooltip';
+export * from './Tree/Tree';
+export * from './Flow/Flow';
+export * from './ChatInput/ChatInput';
 export * from './Accordion/Accordion/Accordion.props';
 export * from './Alert/Alert/Alert.props';
 export * from './AspectRatio/AspectRatio/AspectRatio.props';
@@ -92,3 +95,6 @@ export * from './Resizable/Resizable/Resizable.props';
 export * from './Toast/Toast/Toast.props';
 export * from './Command/Command/Command.props';
 export * from './Tooltip/Tooltip/Tooltip.props';
+export * from './Tree/Tree/Tree.props';
+export * from './Flow/Flow/Flow.props';
+export * from './ChatInput/ChatInput/ChatInput.props';

package/dist/pages/chat.page.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const AIChatPage: React.FC;
-export default AIChatPage;
+declare const ChatInputDemo: () => React.JSX.Element;
+export default ChatInputDemo;

package/dist/pages/flow.page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FlowPage: () => React.JSX.Element;
+export default FlowPage;

package/dist/pages/tree.page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TreePage: () => React.JSX.Element;
+export default TreePage;