@app-studio/web 0.8.96 → 0.9.0

package/dist/components/Flow/Flow/Flow.props.d.ts

@@ -0,0 +1,144 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { Size, Variant, FlowNode, NodeConnection, FlowComponentType, FlowViewport, NodePosition } from './Flow.type';
+/**
+ * Props for the Flow component
+ */
+export interface FlowProps extends Omit<ViewProps, 'position'> {
+    /**
+     * Child elements for compound component pattern
+     * Note: Flow component primarily uses `nodes` and `edges` props for data.
+     * Children could be used for custom overlays or context providers if needed.
+     */
+    children?: React.ReactNode;
+    /**
+     * Array of nodes in the flow
+     */
+    nodes?: FlowNode[];
+    /**
+     * Array of edges/connections between nodes
+     */
+    edges?: NodeConnection[];
+    /**
+     * Size of the flow nodes
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Visual variant of the flow nodes (affects node appearance)
+     * @default 'default'
+     */
+    variant?: Variant;
+    /**
+     * Direction of the flow layout (influences default new node placement)
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Whether to show the controls (zoom, etc.)
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * Whether to allow adding nodes
+     * @default true
+     */
+    allowAddingNodes?: boolean;
+    /**
+     * Whether to allow deleting nodes (functionality not fully implemented in this simplified version)
+     * @default true
+     */
+    allowDeletingNodes?: boolean;
+    /**
+     * Whether to allow connecting nodes (functionality not fully implemented in this simplified version)
+     * @default true
+     */
+    allowConnectingNodes?: boolean;
+    /**
+     * Whether to allow dragging nodes to reposition them
+     * @default true
+     */
+    allowDraggingNodes?: boolean;
+    /**
+     * Callback when nodes change (e.g., added, position changed)
+     */
+    onNodesChange?: (nodes: FlowNode[]) => void;
+    /**
+     * Callback when edges change (e.g., added)
+     */
+    onEdgesChange?: (edges: NodeConnection[]) => void;
+    /**
+     * Callback when a node is selected
+     */
+    onNodeSelect?: (nodeId: string) => void;
+    /**
+     * Callback when a node is added by user interaction
+     * The `newNode` passed will have an ID and default data, but its position
+     * will be determined by the `addNodeAfter` logic in `useFlowState`.
+     */
+    onNodeAdd?: (newNode: FlowNode) => void;
+    /**
+     * Callback when a node is deleted
+     */
+    onNodeDelete?: (nodeId: string) => void;
+    /**
+     * Callback when a connection is created
+     */
+    onConnect?: (connection: NodeConnection) => void;
+    /**
+     * Callback when a node drag starts
+     */
+    onNodeDragStart?: (nodeId: string, event: React.MouseEvent | React.TouchEvent) => void;
+    /**
+     * Callback when a node is being dragged
+     */
+    onNodeDrag?: (nodeId: string, position: NodePosition, event: MouseEvent | TouchEvent) => void;
+    /**
+     * Callback when a node drag ends
+     */
+    onNodeDragEnd?: (nodeId: string, position: NodePosition) => void;
+    /**
+     * ID of the selected node (controlled mode)
+     */
+    selectedNodeId?: string;
+    /**
+     * Initial viewport state (zoom, pan)
+     */
+    initialViewport?: FlowViewport;
+    /**
+     * Controlled viewport state
+     */
+    viewport?: FlowViewport;
+    /**
+     * Callback when viewport changes
+     */
+    onViewportChange?: (viewport: FlowViewport) => void;
+    /**
+     * Custom views for styling different parts of the component
+     */
+    views?: {
+        container?: ViewProps;
+        node?: {
+            container?: ViewProps;
+            content?: ViewProps;
+            icon?: ViewProps;
+        };
+        edge?: {
+            path?: ViewProps;
+            label?: ViewProps;
+        };
+        controls?: {
+            container?: ViewProps;
+            button?: ViewProps;
+        };
+        addButton?: {
+            container?: ViewProps;
+            icon?: ViewProps;
+        };
+        fixedControlsContainer?: ViewProps;
+    };
+}
+/**
+ * Type for the Flow component with sub-components
+ */
+export declare type FlowType = FlowComponentType<FlowProps>;

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

@@ -0,0 +1,95 @@
+/// <reference types="react" />
+import { FlowNode, NodeConnection, FlowViewport, NodePosition } from './Flow.type';
+interface UseFlowStateProps {
+    /**
+     * Initial nodes
+     */
+    initialNodes?: FlowNode[];
+    /**
+     * Initial edges/connections
+     */
+    initialEdges?: NodeConnection[];
+    /**
+     * Controlled nodes
+     */
+    nodes?: FlowNode[];
+    /**
+     * Controlled edges/connections
+     */
+    edges?: NodeConnection[];
+    /**
+     * Callback when nodes change
+     */
+    onNodesChange?: (nodes: FlowNode[]) => void;
+    /**
+     * Callback when edges change
+     */
+    onEdgesChange?: (edges: NodeConnection[]) => void;
+    /**
+     * Callback when a node is selected
+     */
+    onNodeSelect?: (nodeId: string) => void;
+    /**
+     * Controlled selected node ID
+     */
+    selectedNodeId?: string;
+    /**
+     * Direction of the flow
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Initial viewport state (zoom, pan)
+     */
+    initialViewport?: FlowViewport;
+    /**
+     * Controlled viewport state
+     */
+    viewport?: FlowViewport;
+    /**
+     * Callback when viewport changes
+     */
+    onViewportChange?: (viewport: FlowViewport) => void;
+    /**
+     * Whether to allow dragging nodes
+     */
+    allowDraggingNodes?: boolean;
+    /**
+     * Callback when a node drag starts
+     */
+    onNodeDragStart?: (nodeId: string, event: React.MouseEvent | React.TouchEvent) => void;
+    /**
+     * Callback when a node is being dragged
+     */
+    onNodeDrag?: (nodeId: string, position: NodePosition, event: MouseEvent | TouchEvent) => void;
+    /**
+     * Callback when a node drag ends
+     */
+    onNodeDragEnd?: (nodeId: string, position: NodePosition) => void;
+}
+/**
+ * Custom hook for managing Flow component state
+ */
+export declare const useFlowState: ({ initialNodes, initialEdges, nodes: controlledNodes, edges: controlledEdges, onNodesChange, onEdgesChange, onNodeSelect, selectedNodeId: controlledSelectedNodeId, direction, initialViewport, viewport: controlledViewport, onViewportChange, allowDraggingNodes, onNodeDragStart, onNodeDrag, onNodeDragEnd, }: UseFlowStateProps) => {
+    baseId: string;
+    nodes: FlowNode[];
+    edges: NodeConnection[];
+    selectedNodeId: string | undefined;
+    viewport: any;
+    updateNodes: (newNodes: FlowNode[]) => void;
+    updateEdges: (newEdges: NodeConnection[]) => void;
+    updateViewport: (newViewport: FlowViewport) => void;
+    selectNode: (nodeId: string) => void;
+    addNode: (node: FlowNode) => void;
+    addNodeAfter: (afterNodeId: string | null, newNodeData: Omit<FlowNode, 'position'>, position?: "top" | "bottom" | "right" | "left" | undefined) => FlowNode;
+    deleteNode: (nodeId: string) => void;
+    connectNodes: (connection: NodeConnection) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetViewport: () => void;
+    draggedNodeId: string | null;
+    startNodeDrag: (nodeId: string, event: React.MouseEvent | React.TouchEvent) => void;
+    updateNodeDrag: (event: MouseEvent | TouchEvent) => void;
+    endNodeDrag: () => void;
+    allowDraggingNodes: boolean;
+};
+export {};

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

@@ -0,0 +1,40 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant } from './Flow.type';
+/**
+ * Default styles for the Flow component
+ */
+export declare const DefaultFlowStyles: {
+    container: ViewProps;
+    node: ViewProps;
+    startNode: ViewProps;
+    selectedNode: ViewProps;
+    edge: ViewProps;
+    edgeArrow: ViewProps;
+    edgeLabel: ViewProps;
+    controls: ViewProps;
+    controlButton: ViewProps;
+    addNodeButton: ViewProps;
+    nodeContent: ViewProps;
+    nodeIcon: ViewProps;
+    nodeInfo: ViewProps;
+};
+/**
+ * Size variations for the FlowNodeView component
+ * These apply to the node's container.
+ */
+export declare const FlowNodeSizes: Record<Size, ViewProps>;
+/**
+ * Variant styles for the FlowNodeView component
+ * These apply to the node's container.
+ */
+export declare const FlowNodeVariants: Record<Variant, ViewProps>;
+/**
+ * Node states (applied to FlowNodeView container)
+ */
+export declare const FlowNodeStates: {
+    selected: ViewProps;
+    hover: {
+        borderColor: string;
+        boxShadow: string;
+    };
+};

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

@@ -0,0 +1,181 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+interface FlowPropsPlaceholder {
+}
+/**
+ * Size options for FlowNodeView
+ */
+export declare type Size = 'sm' | 'md' | 'lg';
+/**
+ * Variant options for FlowNodeView
+ */
+export declare type Variant = 'default' | 'outline' | 'filled';
+/**
+ * Position of a node in the flow
+ */
+export interface NodePosition {
+    x: number;
+    y: number;
+}
+/**
+ * Connection between nodes
+ */
+export interface NodeConnection {
+    /**
+     * Unique ID for the connection (edge)
+     * Recommended to be `edge-${sourceNodeId}-${targetNodeId}` or similar
+     */
+    id: string;
+    /**
+     * Source node ID
+     */
+    source: string;
+    /**
+     * Target node ID
+     */
+    target: string;
+    /**
+     * Optional label for the connection
+     */
+    label?: string;
+    /**
+     * Optional custom styling for the connection (applied to FlowEdgeView path)
+     */
+    style?: ViewProps;
+}
+/**
+ * Flow node data structure
+ */
+export interface FlowNode {
+    /**
+     * Unique identifier for the node
+     */
+    id: string;
+    /**
+     * Node type (used for rendering different node types)
+     */
+    type?: 'default' | 'start' | 'end' | 'decision' | 'process' | string;
+    /**
+     * Position of the node. Essential for layout in a full flow library.
+     */
+    position: NodePosition;
+    /**
+     * Data associated with the node
+     */
+    data?: {
+        /**
+         * Label text for the node
+         */
+        label?: string;
+        /**
+         * Subtitle text for the node
+         */
+        subtitle?: string;
+        /**
+         * Optional icon to display
+         */
+        icon?: React.ReactNode;
+        /**
+         * Optional number/index for the node
+         */
+        number?: number;
+        /**
+         * Any additional data
+         */
+        [key: string]: any;
+    };
+    /**
+     * Whether the node is selected (typically managed by state, not set directly on node data)
+     * This field can be used if nodes are passed with pre-selected state, but `selectedNodeId` prop is preferred.
+     */
+    selected?: boolean;
+    /**
+     * Whether the node is currently being dragged
+     */
+    isDragging?: boolean;
+    /**
+     * Whether the node can be dragged
+     */
+    draggable?: boolean;
+    /**
+     * Custom styling for the node (applied to FlowNodeView container)
+     */
+    style?: ViewProps;
+}
+/**
+ * Flow viewport state (relevant for pan and zoom, not used in simplified view)
+ */
+export interface FlowViewport {
+    zoom: number;
+    x: number;
+    y: number;
+}
+/**
+ * Props for the FlowNodeView component (individual node)
+ */
+export interface FlowNodeProps extends ViewProps {
+    node: FlowNode;
+    onSelect?: (nodeId: string) => void;
+    isSelected?: boolean;
+    isDragging?: boolean;
+    onDragStart?: (nodeId: string, event: React.MouseEvent | React.TouchEvent) => void;
+    onDrag?: (nodeId: string, position: NodePosition, event: MouseEvent | TouchEvent) => void;
+    onDragEnd?: (nodeId: string, position: NodePosition) => void;
+    size?: Size;
+    variant?: Variant;
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+        icon?: ViewProps;
+    };
+}
+/**
+ * Props for the FlowEdgeView component (connection line)
+ */
+export interface FlowEdgeProps extends ViewProps {
+    edge: NodeConnection;
+    sourceNode?: FlowNode;
+    targetNode?: FlowNode;
+    views?: {
+        path?: ViewProps;
+        label?: ViewProps;
+    };
+    nodeSize?: Size;
+}
+/**
+ * Props for the FlowControlsView component (zoom/pan buttons)
+ */
+export interface FlowControlsProps extends ViewProps {
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    onReset?: () => void;
+    views?: {
+        container?: ViewProps;
+        button?: ViewProps;
+    };
+}
+/**
+ * Props for the FlowAddNodeButtonView component (the small '+' button)
+ */
+export interface FlowAddNodeButtonProps extends Omit<ViewProps, 'position'> {
+    onClick?: () => void;
+    /**
+     * Visual position relative to the element it's attached to (for styling hints, not layout)
+     */
+    attachmentPosition?: 'top' | 'right' | 'bottom' | 'left';
+    views?: {
+        container?: ViewProps;
+        icon?: ViewProps;
+    };
+}
+/**
+ * Flow component type with sub-components.
+ * P represents the props of the main Flow component (e.g., FlowProps).
+ */
+export interface FlowComponentType<P = FlowPropsPlaceholder> extends React.FC<P> {
+    Node: React.FC<FlowNodeProps>;
+    Edge: React.FC<FlowEdgeProps>;
+    Controls: React.FC<FlowControlsProps>;
+    AddNodeButton: React.FC<FlowAddNodeButtonProps>;
+}
+export {};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { FlowNode as FlowNodeType, // Renamed to avoid conflict with component name
+NodeConnection, FlowNodeProps, FlowEdgeProps, FlowControlsProps, FlowAddNodeButtonProps, FlowViewport, NodePosition } from './Flow.type';
+import { FlowProps } from './Flow.props';
+export declare const FlowNodeView: React.FC<FlowNodeProps>;
+export declare const FlowEdgeView: React.FC<FlowEdgeProps>;
+export declare const FlowControlsView: React.FC<FlowControlsProps>;
+export declare const FlowAddNodeButtonView: React.FC<FlowAddNodeButtonProps>;
+interface InternalFlowViewProps extends Pick<FlowProps, 'size' | 'variant' | 'direction' | 'showControls' | 'allowAddingNodes' | 'allowDraggingNodes' | 'views'>, Omit<ViewProps, keyof Pick<FlowProps, 'size' | 'variant' | 'direction' | 'showControls' | 'allowAddingNodes' | 'allowDraggingNodes' | 'views'>> {
+    nodes: FlowNodeType[];
+    edges: NodeConnection[];
+    selectedNodeId?: string;
+    draggedNodeId?: string | null;
+    onNodeSelect: (nodeId: string) => void;
+    onAddNode: (afterNodeId: string, position?: 'top' | 'bottom' | 'right' | 'left') => void;
+    onNodeDragStart?: (nodeId: string, event: React.MouseEvent | React.TouchEvent) => void;
+    onNodeDrag?: (nodeId: string, position: NodePosition, event: MouseEvent | TouchEvent) => void;
+    onNodeDragEnd?: (nodeId: string, position: NodePosition) => void;
+    baseId: string;
+    viewport?: FlowViewport;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    onReset?: () => void;
+    onViewportChange?: (viewport: FlowViewport) => void;
+}
+export declare const FlowView: React.FC<InternalFlowViewProps>;
+export {};

package/dist/components/Flow/Flow.d.ts

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

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

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

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

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

package/dist/components/Flow/examples/flowchart.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './default';
+export * from './flowchart';

package/dist/components/Flow/examples/list.d.ts

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

package/dist/components/Flow/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Flow';
+export * from './examples/DragAndDrop';

package/dist/components/Icon/Icon.d.ts

@@ -7,6 +7,7 @@ export interface IconProps extends ViewProps {
 }
 export declare const UserIcon: React.FC<IconProps>;
 export declare const HelpIcon: React.FC<IconProps>;
+export declare const FolderIcon: React.FC<IconProps>;
 export declare const ChevronIcon: React.FC<IconProps>;
 export declare const DragHandleIcon: React.FC<IconProps>;
 export declare const FileIcon: React.FC<IconProps>;
@@ -65,7 +66,14 @@ export declare const UnlockIcon: React.FC<IconProps>;
 export declare const WifiIcon: React.FC<IconProps>;
 export declare const UploadIcon: React.FC<IconProps>;
 export declare const SearchIcon: React.FC<IconProps>;
+export declare const StopIcon: React.FC<IconProps>;
+export declare const SendIcon: React.FC<IconProps>;
+export declare const LoadingSpinnerIcon: React.FC<IconProps>;
+export declare const DragHandleLinesIcon: React.FC<IconProps>;
+export declare const ChevronDownIcon: React.FC<IconProps>;
+export declare const ChevronRightIcon: React.FC<IconProps>;
 export declare const CloseEyeIcon: React.FC<IconProps>;
+export declare const TrashIcon: React.FC<IconProps>;
 export declare const ExternalLinkIcon: React.FC<IconProps>;
 export declare const PlusIcon: React.FC<IconProps>;
 export declare const TickIcon: React.FC<IconProps>;

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,22 @@
+/**
+ * TextArea Component
+ *
+ * A simple textarea component with styling.
+ */
+import React from 'react';
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Number of rows to display
+     */
+    rows?: number;
+    /**
+     * Whether the textarea is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the textarea has an error
+     */
+    hasError?: boolean;
+}
+export declare const TextArea: React.FC<TextAreaProps>;
+export default TextArea;

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

@@ -0,0 +1,106 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { Size, Variant, TreeNode, TreeComponentType } from './Tree.type';
+/**
+ * Props for the Tree component
+ */
+export interface TreeProps extends ViewProps {
+    /**
+     * Child elements for compound component pattern (e.g., <Tree.Item />).
+     * Used if `items` prop is not provided.
+     */
+    children?: React.ReactNode;
+    /**
+     * Data-driven approach: array of tree nodes.
+     * If provided, `children` will be ignored for rendering tree items.
+     */
+    items?: TreeNode[];
+    /**
+     * Size of the tree items (affects padding and font size primarily).
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Visual variant of the tree items (affects background, borders).
+     * @default 'default'
+     */
+    variant?: Variant;
+    /**
+     * IDs of initially expanded items (uncontrolled mode).
+     */
+    defaultExpandedItems?: string[];
+    /**
+     * IDs of expanded items (controlled mode).
+     * If provided, component is controlled; `onExpandedItemsChange` must be used to update.
+     */
+    expandedItems?: string[];
+    /**
+     * Callback when expanded items change.
+     * Receives an array of currently expanded item IDs.
+     */
+    onExpandedItemsChange?: (expandedItems: string[]) => void;
+    /**
+     * Callback when an item is selected (clicked).
+     * Receives the `itemId` and the full `TreeNode` object if available (from data-driven mode).
+     */
+    onItemSelect?: (itemId: string, item?: TreeNode) => void;
+    /**
+     * ID of the currently selected item (controlled mode).
+     */
+    selectedItem?: string;
+    /**
+     * ID of the initially selected item (uncontrolled mode).
+     */
+    defaultSelectedItem?: string;
+    /**
+     * Whether to allow multiple selection.
+     * Note: Multi-select state management (tracking multiple selected items) is not fully implemented in `useTreeState` provided.
+     * This prop is a placeholder for future enhancement.
+     * @default false
+     */
+    multiSelect?: boolean;
+    /**
+     * Whether to enable drag and drop functionality for tree items.
+     * @default false
+     */
+    allowDragAndDrop?: boolean;
+    /**
+     * Custom icon to use for the drag handle.
+     * If not provided, a default drag handle icon will be used.
+     */
+    dragHandleIcon?: React.ReactNode;
+    /**
+     * Callback when items are reordered via drag and drop.
+     * Receives the updated array of tree nodes.
+     */
+    onItemsReorder?: (items: TreeNode[]) => void;
+    /**
+     * Callback when drag starts on an item.
+     * Receives the item ID and the event.
+     */
+    onDragStart?: (itemId: string, event: React.DragEvent) => void;
+    /**
+     * Callback when drag ends.
+     * Receives the item ID.
+     */
+    onDragEnd?: (itemId: string) => void;
+    /**
+     * Custom views for styling different parts of the component.
+     * Allows overriding default styles for sub-components.
+     */
+    views?: {
+        container?: ViewProps;
+        item?: ViewProps;
+        itemLabel?: ViewProps;
+        itemContent?: ViewProps;
+        icon?: ViewProps;
+        expandIcon?: ViewProps;
+        draggedItem?: ViewProps;
+        dragHandle?: ViewProps;
+    };
+}
+/**
+ * Type for the Tree component with sub-components.
+ * Makes `Tree.Item`, `Tree.ItemLabel`, `Tree.ItemContent` available.
+ */
+export declare type TreeType = TreeComponentType<TreeProps>;