@app-studio/web 0.9.34 → 0.9.36

package/docs/README.md

@@ -12,7 +12,8 @@ Welcome to the comprehensive documentation for the App Studio Web Component Libr
 
 ### Specialized Documentation
 - **[ADK Components](../README-ADK.md)** - Agent Development Kit integration
-- **[API Reference](./api-reference/README.md)** - Detailed component APIs
+- **[Compoments Reference](./components.md)** - Summary of all component APIs
+- **[Detailed Copoments](./components/)** - Detailed component APIs
 - **[Tutorials](./tutorials/README.md)** - Step-by-step guides
 - **[Contributing](./contributing/documentation.md)** - Contribution guidelines
 

package/docs/components/Calendar.mdx

@@ -88,49 +88,6 @@ export const MonthViewCalendar = () => {
 };
 ```
 
-### **Custom Event Rendering**
-Customize how events are displayed using the `renderEvent` prop.
-
-```tsx
-import React from 'react';
-import { Vertical, Horizontal } from 'app-studio';
-import { Calendar } from '../Calendar';
-import { CalendarEvent, CalendarRenderEventContext } from '../Calendar/Calendar.props';
-import { Text } from '../../Text/Text';
-
-export const CustomRenderCalendar = () => {
-  const events: CalendarEvent[] = [
-    {
-      id: 1,
-      title: 'High Priority Meeting',
-      start: new Date(2025, 9, 15, 10, 0),
-      metadata: { priority: 'high' },
-    },
-  ];
-
-  const renderEvent = (event: CalendarEvent, context: CalendarRenderEventContext) => {
-    const priority = event.metadata?.priority as string;
-    
-    return (
-      <Vertical
-        gap={8}
-        padding={12}
-        borderRadius={12}
-        backgroundColor="color.error.50"
-        borderWidth={1}
-        borderStyle="solid"
-        borderColor="color.error.200"
-      >
-        <Text fontWeight="600">{event.title}</Text>
-        <Text fontSize={12} color="color.error.600">{priority}</Text>
-      </Vertical>
-    );
-  };
-
-  return <Calendar events={events} renderEvent={renderEvent} />;
-};
-```
-
 ### **Week Starts On**
 Configure which day the week starts on (0 = Sunday, 1 = Monday, etc.).
 
@@ -146,78 +103,33 @@ export const WeekStartsOnMonday = () => {
 ### **Custom Styles**
 Customize the appearance of calendar elements using the `views` prop.
 
-```tsx
-import React from 'react';
-import { Calendar } from '../Calendar';
-
-export const CustomStyledCalendar = () => {
-  return (
-    <Calendar
-      views={{
-        container: {
-          backgroundColor: 'color.primary.50',
-          borderColor: 'color.primary.300',
-        },
-        headerTitle: {
-          color: 'color.primary.700',
-          fontSize: 24,
-        },
-        event: {
-          backgroundColor: 'color.primary.100',
-          borderColor: 'color.primary.400',
-        },
-      }}
-    />
-  );
-};
-```
-
-### **Fixed Height with Scrolling**
-Set a fixed height for the calendar with scrollable content areas.
-
-```tsx
-import React from 'react';
-import { Calendar } from '../Calendar';
-
-export const FixedHeightCalendar = () => {
-  const events = [
-    {
-      id: 1,
-      title: 'Team Meeting',
-      start: new Date(2025, 9, 15, 10, 0),
-      end: new Date(2025, 9, 15, 11, 0),
-    },
-    // ... more events
-  ];
-
-  return <Calendar events={events} height="600px" initialView="week" />;
-};
-```
-
 ## Props
 
-| Prop           | Type                    | Description                                                    | Default     |
-| -------------- | ----------------------- | -------------------------------------------------------------- | ----------- |
-| events         | CalendarEvent[]         | Array of events to display in the calendar.                   | []          |
-| initialDate    | Date \| string          | Starting date displayed in the calendar.                       | new Date()  |
-| initialView    | 'day' \| 'week' \| 'month' | Initial visible view.                                       | 'month'     |
-| weekStartsOn   | 0-6                     | First day of the week (0 = Sunday, 1 = Monday, etc.).         | 0           |
-| height         | string \| number        | Height of the calendar container (enables scrolling).          | '800px'     |
-| renderEvent    | function                | Custom render method for events.                               | -           |
-| onDateChange   | function                | Callback when the visible anchor date changes.                 | -           |
-| onViewChange   | function                | Callback when the active view changes.                         | -           |
-| views          | CalendarViews           | Customize styling of calendar areas.                           | -           |
+| Prop | Type | Description | Default |
+| --- | --- | --- | --- |
+| `events` | `CalendarEvent[]` | Array of events to display. | `[]` |
+| `initialDate` | `Date \| string` | Initial date to display (ISO string or Date object). | `new Date()` |
+| `initialView` | `'day' \| 'week' \| 'month'` | Initial view to display. | `'month'` |
+| `weekStartsOn` | `0-6` | Day the week starts on (0 = Sunday, 1 = Monday). | `0` |
+| `onEventDrop` | `(event: CalendarEvent) => void` | Callback when an event is moved to a new date. | - |
+| `onEventResize` | `(event: CalendarEvent) => void` | Callback when an event is resized. | - |
+| `onEventAdd` | `(start: string, end: string) => void` | Callback when a date is double-clicked to add an event. | - |
+| `onDateClick` | `(date: string) => void` | Callback when a date is clicked. | - |
+| `onDateChange` | `(date: Date) => void` | Callback when the visible date range changes. | - |
+| `onViewChange` | `(view: CalendarView) => void` | Callback when the active view changes. | - |
+| `views` | `CalendarViews` | Style overrides for various parts of the component. | `{}` |
 
 ## CalendarEvent Interface
 
-| Property    | Type                  | Description                                      |
-| ----------- | --------------------- | ------------------------------------------------ |
-| id          | string \| number      | Unique identifier for the event.                 |
-| title       | string                | Event title shown in the calendar cell.          |
-| start       | Date \| string        | Start date/time of the event.                    |
-| end         | Date \| string        | Optional end date/time of the event.             |
-| description | string                | Optional description or supporting information.  |
-| metadata    | Record<string, unknown> | Additional metadata for the event.             |
+| Property | Type | Description |
+| --- | --- | --- |
+| `id` | `string \| number` | Unique identifier for the event. |
+| `title` | `string` | Event title shown in the calendar. |
+| `start` | `string` | Start date/time in ISO format (`YYYY-MM-DD` or `YYYY-MM-DDTHH:MM`). |
+| `end` | `string` | End date/time in ISO format (`YYYY-MM-DD` or `YYYY-MM-DDTHH:MM`). |
+| `color` | `'blue' \| 'red' \| 'green' \| 'purple' \| 'orange'` | Color variant for the event. |
+| `description` | `string` | Optional description (used for tooltips or custom rendering). |
+| `metadata` | `Record<string, unknown>` | Additional metadata for custom logic. |
 
 ## CalendarViews Interface
 

package/docs/components/Flow.mdx

@@ -255,3 +255,4 @@ The Flow component implements the following accessibility features:
 - 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

@@ -0,0 +1,156 @@
+# 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.
+
+### **Import**
+  ```tsx
+  import { KanbanBoard } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React, { useState } from 'react';
+import { KanbanBoard } from '../KanbanBoard';
+import { KanbanBoardColumn } from '../KanbanBoard/KanbanBoard.props';
+
+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.
+
+```tsx
+import React, { useState } from 'react';
+import { KanbanBoard } from '../KanbanBoard';
+import { KanbanBoardColumn, KanbanBoardCard } from '../KanbanBoard/KanbanBoard.props';
+import { View, Text, Horizontal } from 'app-studio';
+
+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} />;
+};
+```
+
+## Props
+
+| Prop | Type | Description | Default |
+| --- | --- | --- | --- |
+| `columns` | `KanbanBoardColumn[]` | Array of columns to display. | `[]` |
+| `onChange` | `(columns: KanbanBoardColumn[]) => void` | Callback when columns or cards are 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. |