@app-studio/web 0.9.45 → 0.9.46

package/docs/components/Flow.mdx

@@ -1,258 +0,0 @@
-# Flow
-
-A component for creating interactive workflow diagrams and flowcharts with support for node connections, drag-and-drop functionality, and viewport controls.
-
-### **Import**
-  ```tsx
-  import { Flow } from '@app-studio/web';
-  ```
-
-### **Basic Usage**
-```tsx
-import React, { useState } from 'react';
-import { Flow } from '@app-studio/web';
-import { View } from '@app-studio/web';
-
-export const BasicFlow = () => {
-  // Initial nodes and edges
-  const [nodes, setNodes] = useState([
-    {
-      id: 'node-1',
-      position: { x: 50, y: 50 },
-      data: { 
-        label: 'Start Node', 
-        subtitle: 'Begin here' 
-      },
-    },
-    {
-      id: 'node-2',
-      position: { x: 50, y: 200 },
-      data: { 
-        label: 'Process Node', 
-        subtitle: 'Do something' 
-      },
-    },
-  ]);
-
-  const [edges, setEdges] = useState([
-    { id: 'edge-1-2', source: 'node-1', target: 'node-2' },
-  ]);
-
-  return (
-    <View height="400px" border="1px solid" borderColor="color.gray.200" borderRadius={8}>
-      <Flow
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={setNodes}
-        onEdgesChange={setEdges}
-      />
-    </View>
-  );
-};
-```
-
-### **With Node Addition**
-```tsx
-import React, { useState } from 'react';
-import { Flow } from '@app-studio/web';
-import { View } from '@app-studio/web';
-import { FlowNode } from '@app-studio/web';
-
-export const FlowWithNodeAddition = () => {
-  const [nodes, setNodes] = useState([
-    {
-      id: 'node-1',
-      position: { x: 50, y: 50 },
-      data: { label: 'Start', subtitle: 'Begin workflow' },
-    },
-    {
-      id: 'node-2',
-      position: { x: 50, y: 200 },
-      data: { label: 'Process', subtitle: 'Do something' },
-    },
-  ]);
-
-  const [edges, setEdges] = useState([
-    { id: 'edge-1-2', source: 'node-1', target: 'node-2' },
-  ]);
-
-  const [selectedNodeId, setSelectedNodeId] = useState(null);
-
-  return (
-    <View height="400px" border="1px solid" borderColor="color.gray.200" borderRadius={8}>
-      <Flow
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={setNodes}
-        onEdgesChange={setEdges}
-        selectedNodeId={selectedNodeId}
-        onNodeSelect={setSelectedNodeId}
-        allowAddingNodes={true}
-        onNodeAdd={(newNode: FlowNode) => {
-          setNodes((prevNodes) => [...prevNodes, newNode]);
-        }}
-      />
-    </View>
-  );
-};
-```
-
-### **With Drag and Drop**
-```tsx
-import React, { useState } from 'react';
-import { Flow } from '@app-studio/web';
-import { View } from '@app-studio/web';
-import { FlowNode } from '@app-studio/web';
-
-export const FlowWithDragAndDrop = () => {
-  const [nodes, setNodes] = useState([
-    {
-      id: 'node-1',
-      position: { x: 250, y: 100 },
-      data: { label: 'Menu Item 1', subtitle: 'Drag to reorder' },
-      draggable: true,
-    },
-    {
-      id: 'node-2',
-      position: { x: 250, y: 250 },
-      data: { label: 'Menu Item 2', subtitle: 'Drag to reorder' },
-      draggable: true,
-    },
-  ]);
-
-  const [edges, setEdges] = useState([]);
-
-  return (
-    <View height="400px" border="1px solid" borderColor="color.gray.200" borderRadius={8}>
-      <Flow
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={setNodes}
-        onEdgesChange={setEdges}
-        allowDraggingNodes={true}
-        onNodeDragStart={(nodeId) => console.log(`Started dragging: ${nodeId}`)}
-        onNodeDragEnd={(nodeId, position) => console.log(`Finished dragging: ${nodeId}`)}
-      />
-    </View>
-  );
-};
-```
-
-### **Props**
-
-| Prop | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
-| nodes | FlowNode[] | [] | Array of nodes in the flow |
-| edges | NodeConnection[] | [] | Array of edges/connections between nodes |
-| size | 'sm' \| 'md' \| 'lg' | 'md' | Size of the flow nodes |
-| variant | 'default' \| 'outline' \| 'filled' | 'default' | Visual variant of the flow nodes |
-| direction | 'horizontal' \| 'vertical' | 'vertical' | Direction of the flow layout |
-| showControls | boolean | true | Whether to show viewport controls (zoom in/out, reset) |
-| allowAddingNodes | boolean | true | Whether to allow adding new nodes |
-| allowDraggingNodes | boolean | true | Whether to allow dragging nodes |
-| selectedNodeId | string | undefined | ID of the currently selected node |
-| onNodeSelect | (nodeId: string \| null) => void | undefined | Callback when a node is selected |
-| onNodesChange | (nodes: FlowNode[]) => void | undefined | Callback when nodes change |
-| onEdgesChange | (edges: NodeConnection[]) => void | undefined | Callback when edges change |
-| onNodeAdd | (node: FlowNode) => void | undefined | Callback when a node is added |
-| onNodeDragStart | (nodeId: string) => void | undefined | Callback when node dragging starts |
-| onNodeDrag | (nodeId: string, position: NodePosition) => void | undefined | Callback during node dragging |
-| onNodeDragEnd | (nodeId: string, position: NodePosition) => void | undefined | Callback when node dragging ends |
-| viewport | FlowViewport | { zoom: 1, x: 0, y: 0 } | Current viewport state (zoom level and position) |
-| onViewportChange | (viewport: FlowViewport) => void | undefined | Callback when viewport changes |
-| views | object | {} | Custom styling for different parts of the component |
-
-### **Node Structure**
-
-The `FlowNode` interface defines the structure of nodes in the Flow component:
-
-```tsx
-interface FlowNode {
-  id: string;
-  type?: 'default' | 'start' | 'end' | 'decision' | 'process' | string;
-  position: { x: number; y: number };
-  data?: {
-    label?: string;
-    subtitle?: string;
-    icon?: React.ReactNode;
-    number?: number;
-    [key: string]: any;
-  };
-  selected?: boolean;
-  isDragging?: boolean;
-  draggable?: boolean;
-  style?: ViewProps;
-}
-```
-
-### **Edge Structure**
-
-The `NodeConnection` interface defines the structure of edges in the Flow component:
-
-```tsx
-interface NodeConnection {
-  id: string;
-  source: string;
-  target: string;
-  label?: string;
-  style?: ViewProps;
-}
-```
-
-### **Compound Components**
-
-The Flow component uses a compound component pattern with the following sub-components:
-
-```tsx
-// These are primarily for potential direct use or a more componentized future version
-Flow.Node       // Renders a single node
-Flow.Edge       // Renders a connection between nodes
-Flow.Controls   // Renders viewport controls
-Flow.AddNodeButton // Renders a button to add a new node
-```
-
-### **Customization**
-
-The Flow component can be customized using the `views` prop:
-
-```tsx
-<Flow
-  // ...other props
-  views={{
-    container: { /* styles for the main flow container */ },
-    node: {
-      container: { /* styles for the node's root View */ },
-      content: { /* styles for the content wrapper inside the node */ },
-      icon: { /* styles for the node's icon View */ },
-    },
-    edge: {
-      path: { /* styles for the SVG path */ },
-      label: { /* styles for the edge label */ },
-    },
-    controls: {
-      container: { /* styles for the controls container */ },
-      button: { /* styles for individual control buttons */ },
-    },
-    addNodeButton: { /* styles for the add node button */ },
-  }}
-/>
-```
-
-### **Accessibility**
-
-The Flow component implements the following accessibility features:
-
-- Keyboard navigation for selecting nodes
-- ARIA attributes for interactive elements
-- Focus management for controls and nodes
-- Proper contrast for node and edge colors
-
-### **Best Practices**
-
-- Provide clear labels and subtitles for nodes to improve understanding
-- Use consistent node types and styling for similar functionality
-- Implement proper error handling for node and edge operations
-- Consider viewport size when determining initial node positions
-- Use the `onNodeAdd` callback to validate new node positions
-- Implement undo/redo functionality for node operations when needed
-

package/docs/components/KanbanBoard.mdx

@@ -1,286 +0,0 @@
-# KanbanBoard
-
-A flexible Kanban board component for managing tasks and workflows. Features drag-and-drop functionality for cards between columns, customizable card and column rendering, and comprehensive styling options.
-
-## When to use
-Use the Kanban Board component to:
-- Visualize a workflow or process.
-- Manage tasks or items as they move through different stages.
-- Allow users to reorder and re-categorize items using drag-and-drop.
-- Build project management tools, task trackers, or any workflow-based UI.
-
-### **Import**
-  ```tsx
-  import { KanbanBoard } from '@app-studio/web';
-  ```
-
-### **Default**
-A basic Kanban board with three columns and some cards.
-
-![Default Kanban Board](https://placehold.co/800x450)
-
-```tsx
-import React, { useState } from 'react';
-import { KanbanBoard } from '@app-studio/web';
-import { KanbanBoardColumn } from '@app-studio/web';
-
-export const DefaultKanbanBoard = () => {
-  const [columns, setColumns] = useState<KanbanBoardColumn[]>([
-    {
-      id: 'todo',
-      title: 'To Do',
-      cards: [
-        { id: '1', title: 'Design System', description: 'Create a new design system.' },
-        { id: '2', title: 'API Integration', description: 'Integrate with the new API.' },
-      ],
-    },
-    {
-      id: 'inprogress',
-      title: 'In Progress',
-      cards: [
-        { id: '3', title: 'User Dashboard', description: 'Develop the main user dashboard.' },
-      ],
-    },
-    {
-      id: 'done',
-      title: 'Done',
-      cards: [
-        { id: '4', title: 'Project Setup', description: 'Initial project setup and configuration.' },
-      ],
-    },
-  ]);
-
-  return <KanbanBoard columns={columns} onChange={setColumns} />;
-};
-```
-
-### **Custom Card Rendering**
-Customize how cards are displayed using the `renderCard` prop. This is useful for adding priority indicators, avatars, or other custom elements to your cards.
-
-![Kanban Board with custom cards](https://placehold.co/800x500)
-
-```tsx
-import React, { useState } from 'react';
-import { KanbanBoard } from '@app-studio/web';
-import { KanbanBoardColumn, KanbanBoardCard } from '@app-studio/web';
-import { View, Text, Horizontal } from '@app-studio/web';
-
-export const CustomRenderKanbanBoard = () => {
-  const [columns, setColumns] = useState<KanbanBoardColumn[]>([
-        {
-      id: 'todo',
-      title: 'To Do',
-      cards: [
-        { id: '1', title: 'Design System', description: 'Create a new design system.', metadata: { priority: 'high' } },
-        { id: '2', title: 'API Integration', description: 'Integrate with the new API.', metadata: { priority: 'low' } },
-      ],
-    },
-    {
-      id: 'inprogress',
-      title: 'In Progress',
-      cards: [
-        { id: '3', title: 'User Dashboard', description: 'Develop the main user dashboard.', metadata: { priority: 'medium' } },
-      ],
-    },
-    {
-      id: 'done',
-      title: 'Done',
-      cards: [
-        { id: '4', title: 'Project Setup', description: 'Initial project setup and configuration.', metadata: { priority: 'low' } },
-      ],
-    },
-  ]);
-
-  const renderCard = (card: KanbanBoardCard, column: KanbanBoardColumn) => {
-    const priority = card.metadata?.priority as string;
-    const priorityColors = {
-      low: 'color.green.500',
-      medium: 'color.yellow.500',
-      high: 'color.red.500',
-    };
-
-    return (
-      <View>
-        <Horizontal alignItems="center" marginBottom={8}>
-          <View
-            width={8}
-            height={8}
-            borderRadius="50%"
-            backgroundColor={priorityColors[priority]}
-            marginRight={8}
-          />
-          <Text fontWeight="semibold">{card.title}</Text>
-        </Horizontal>
-        <Text fontSize={14} color="color.gray.600">
-          {card.description}
-        </Text>
-      </View>
-    );
-  };
-
-  return <KanbanBoard columns={columns} onChange={setColumns} renderCard={renderCard} />;
-};
-```
-
-### **Custom Column Header and Adding Cards**
-Use `renderColumnHeader` to create a custom header, for example to add an "Add Card" button. The `onCardCreate` prop can then be used to handle the creation of new cards.
-
-![Kanban Board with custom column header](https://placehold.co/800x450)
-
-```tsx
-import React, { useState } from 'react';
-import { KanbanBoard } from '@app-studio/web';
-import { Button } from '@app-studio/web';
-import { KanbanBoardColumn, KanbanBoardCard } from '@app-studio/web';
-import { View, Text, Horizontal } from '@app-studio/web';
-
-export const CustomHeaderKanbanBoard = () => {
-  const [columns, setColumns] = useState<KanbanBoardColumn[]>([
-    { id: 'todo', title: 'To Do', cards: [] },
-  ]);
-
-  const handleCardCreate = (card, column) => {
-    const newCard = {
-      id: `${Date.now()}`,
-      title: 'New Card',
-      description: 'A new card was added.',
-    };
-    const newColumns = columns.map(col => {
-      if (col.id === column.id) {
-        return { ...col, cards: [...col.cards, newCard] };
-      }
-      return col;
-    });
-    setColumns(newColumns);
-  };
-
-  const renderColumnHeader = (column: KanbanBoardColumn) => {
-    return (
-      <Horizontal justifyContent="space-between" alignItems="center">
-        <Text fontWeight="bold">{column.title}</Text>
-        <Button size="sm" onClick={() => handleCardCreate(null, column)}>+ Add</Button>
-      </Horizontal>
-    );
-  };
-
-  return <KanbanBoard columns={columns} onChange={setColumns} onCardCreate={handleCardCreate} renderColumnHeader={renderColumnHeader} />;
-};
-```
-
-### **Inline Editing**
-You can implement inline editing of card titles by using the `onCardTitleChange` prop and a custom `renderCard` function that displays an input field on double click.
-
-![Kanban Board with inline editing](https://placehold.co/800x450)
-
-```tsx
-import React, { useState } from 'react';
-import { KanbanBoard } from '@app-studio/web';
-import { KanbanBoardColumn, KanbanBoardCard } from '@app-studio/web';
-import { Input, Text } from '@app-studio/web';
-
-export const EditableKanbanBoard = () => {
-  const [columns, setColumns] = useState<KanbanBoardColumn[]>([
-    {
-      id: 'todo',
-      title: 'To Do',
-      cards: [{ id: '1', title: 'Editable Card' }],
-    },
-  ]);
-  const [editingCardId, setEditingCardId] = useState<string | null>(null);
-
-  const handleTitleChange = (card, column, newTitle) => {
-    const newColumns = columns.map(col => {
-      if (col.id === column.id) {
-        const newCards = col.cards.map(c => c.id === card.id ? { ...c, title: newTitle } : c);
-        return { ...col, cards: newCards };
-      }
-      return col;
-    });
-    setColumns(newColumns);
-    setEditingCardId(null);
-  };
-
-  const renderCard = (card, column) => {
-    if (editingCardId === card.id) {
-      return (
-        <Input
-          autoFocus
-          defaultValue={card.title}
-          onBlur={(e) => handleTitleChange(card, column, e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              handleTitleChange(card, column, e.currentTarget.value);
-            }
-          }}
-        />
-      );
-    }
-    return <Text onDoubleClick={() => setEditingCardId(card.id)}>{card.title}</Text>;
-  };
-
-  return (
-    <KanbanBoard
-      columns={columns}
-      onChange={setColumns}
-      onCardTitleChange={handleTitleChange}
-      renderCard={renderCard}
-    />
-  );
-};
-```
-
-## Live Demo
-A live demo of the Kanban Board component with all its features is available [here](https://app-studio-web.vercel.app/components/kanban-board).
-
-## Props
-
-| Prop | Type | Description | Default |
-| --- | --- | --- | --- |
-| `columns` | `KanbanBoardColumn[]` | Array of columns to display. | `[]` |
-| `onChange` | `(columns: KanbanBoardColumn[]) => void` | Callback when columns or cards are changed (e.g., after drag-and-drop). | - |
-| `onCardMove` | `(card: KanbanBoardCard, fromColumn: KanbanBoardColumn, toColumn: KanbanBoardColumn) => void` | Callback when a card is moved to a different column. | - |
-| `onCardCreate` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => void` | Callback when a card is created. | - |
-| `onCardDelete` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => void` | Callback when a card is deleted. | - |
-| `onCardClick` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => void` | Callback when a card is clicked. | - |
-| `onCardDoubleClick` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => void` | Callback when a card is double-clicked. | - |
-| `onCardTitleChange` | `(card: KanbanBoardCard, column: KanbanBoardColumn, newTitle: string) => void` | Callback when a card's title is changed. | - |
-| `onCardDescriptionChange` | `(card: KanbanBoardCard, column: KanbanBoardColumn, newDescription: string) => void` | Callback when a card's description is changed. | - |
-| `renderCard` | `(card: KanbanBoardCard, column: KanbanBoardColumn) => React.ReactNode` | Custom render method for cards. | - |
-| `renderColumnHeader` | `(column: KanbanBoardColumn) => React.ReactNode` | Custom render method for column headers. | - |
-| `renderEmptyState` | `(column: KanbanBoardColumn) => React.ReactNode` | Custom render method for empty column state. | - |
-| `views` | `KanbanBoardViews` | Style overrides for various parts of the component. | `{}` |
-
-## KanbanBoardColumn Interface
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `id` | `string` | Unique identifier for the column. |
-| `title` | `string` | Column title shown in the header. |
-| `cards` | `KanbanBoardCard[]` | Array of cards within the column. |
-| `footer` | `React.ReactNode` | Optional footer content for the column. |
-| `metadata` | `Record<string, unknown>` | Additional metadata for the column. |
-
-## KanbanBoardCard Interface
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `id` | `string` | Unique identifier for the card. |
-| `title` | `string` | Card title. |
-| `description` | `string` | Optional card description. |
-| `metadata` | `Record<string, unknown>` | Additional metadata for the card. |
-
-## KanbanBoardViews Interface
-
-Customize the appearance of different Kanban board elements.
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `board` | `ViewProps` | Main board container. |
-| `column` | `ViewProps` | Individual column container. |
-| `columnHeader` | `ViewProps` | Column header container. |
-| `columnTitle` | `TextProps` | Column title text. |
-| `columnBody` | `ViewProps` | Column body container (wraps cards). |
-| `columnFooter` | `ViewProps` | Column footer container. |
-| `card` | `ViewProps` | Individual card container. |
-| `cardContent` | `ViewProps` | Content wrapper inside the card. |
-| `emptyState` | `ViewProps` | Empty state container in a column. |