@app-studio/web 0.9.34 → 0.9.35

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/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. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.34",
+  "version": "0.9.35",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [

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

@@ -1,51 +0,0 @@
-import { ViewProps } from 'app-studio';
-export interface CalendarWeekEvent {
-    /** Unique identifier for the event */
-    id: string;
-    /** Event title/label */
-    title: string;
-    /** Start date in ISO format (YYYY-MM-DD) */
-    start: string;
-    /** End date in ISO format (YYYY-MM-DD) */
-    end: string;
-    /** Color variant for the event */
-    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange';
-}
-export interface CalendarWeekViews {
-    /** Style overrides for the main container */
-    container?: ViewProps;
-    /** Style overrides for the week grid */
-    weekGrid?: ViewProps;
-    /** Style overrides for individual day columns */
-    dayColumn?: ViewProps;
-    /** Style overrides for day column headers */
-    dayHeader?: ViewProps;
-    /** Style overrides for day names (e.g., "Mon", "Tue") */
-    dayName?: ViewProps;
-    /** Style overrides for day dates (the circular number) */
-    dayDate?: ViewProps;
-    /** Style overrides for the events area */
-    eventsArea?: ViewProps;
-    /** Style overrides for individual events */
-    event?: ViewProps;
-}
-export interface CalendarWeekProps {
-    /** Start date of the week in ISO format (YYYY-MM-DD) */
-    startDate: string;
-    /** Array of events to display */
-    events?: CalendarWeekEvent[];
-    /** Today's date in ISO format (defaults to current date) */
-    today?: string;
-    /** Callback when an event is dragged to a new position */
-    onEventDrop?: (event: CalendarWeekEvent) => void;
-    /** Callback when an event is resized */
-    onEventResize?: (event: CalendarWeekEvent) => void;
-    /** Callback when a date is clicked */
-    onDateClick?: (date: string) => void;
-    /** Style overrides for various parts of the component */
-    views?: CalendarWeekViews;
-    /** Width of the calendar (default: '100%') */
-    width?: number | string;
-    /** Maximum width of the calendar (default: 1200) */
-    maxWidth?: number | string;
-}

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

@@ -1,90 +0,0 @@
-/// <reference types="react" />
-import { ViewProps } from 'app-studio';
-/**
- * Event color configurations
- */
-export declare const EVENT_COLORS: {
-    readonly blue: {
-        readonly background: "color.blue.50";
-        readonly border: "color.blue.500";
-        readonly text: "color.blue.700";
-    };
-    readonly red: {
-        readonly background: "color.red.50";
-        readonly border: "color.red.500";
-        readonly text: "color.red.700";
-    };
-    readonly green: {
-        readonly background: "color.green.50";
-        readonly border: "color.green.500";
-        readonly text: "color.green.700";
-    };
-    readonly purple: {
-        readonly background: "color.purple.50";
-        readonly border: "color.purple.500";
-        readonly text: "color.purple.700";
-    };
-    readonly orange: {
-        readonly background: "color.orange.50";
-        readonly border: "color.orange.500";
-        readonly text: "color.orange.700";
-    };
-};
-/**
- * Base styles for the calendar container
- */
-export declare const containerStyles: ViewProps;
-/**
- * Week grid styles (7 columns)
- */
-export declare const weekGridStyles: ViewProps;
-/**
- * Individual day column styles
- */
-export declare const dayColumnStyles: ViewProps;
-/**
- * Day header styles
- */
-export declare const dayHeaderStyles: ViewProps;
-/**
- * Day name styles (e.g., "Mon", "Tue")
- */
-export declare const dayNameStyles: ViewProps;
-/**
- * Day date styles (the circular number)
- */
-export declare const dayDateStyles: ViewProps;
-/**
- * Today date styles
- */
-export declare const todayDateStyles: ViewProps;
-/**
- * Selected date styles
- */
-export declare const selectedDateStyles: ViewProps;
-/**
- * Events area styles
- */
-export declare const eventsAreaStyles: ViewProps;
-/**
- * Events layer styles (absolute positioned over the grid)
- */
-export declare const eventsLayerStyles: ViewProps;
-/**
- * Base event styles
- */
-export declare const eventStyles: ViewProps;
-/**
- * Drop target indicator styles
- */
-export declare const dropTargetStyles: ViewProps;
-/**
- * Calculate event position styles
- */
-export declare const getEventPositionStyles: (startDay: number, duration: number, row: number) => React.CSSProperties;
-/**
- * Resize handle styles
- */
-export declare const resizeHandleStyles: React.CSSProperties;
-export declare const leftResizeHandleStyles: React.CSSProperties;
-export declare const rightResizeHandleStyles: React.CSSProperties;

package/dist/components/CalendarWeek/CalendarWeek/CalendarWeek.utils.d.ts

@@ -1,51 +0,0 @@
-import { CalendarWeekEvent } from './CalendarWeek.props';
-export interface PositionedEvent extends CalendarWeekEvent {
-    /** Starting day index (0-6) within the week */
-    startDay: number;
-    /** Ending day index (0-6) within the week */
-    endDay: number;
-    /** Number of days the event spans */
-    duration: number;
-    /** Row index for vertical positioning (to avoid overlaps) */
-    row: number;
-}
-/**
- * Convert an ISO date string to a UTC Date object
- */
-export declare const dateUTC: (iso: string) => Date;
-/**
- * Calculate the number of days between two ISO date strings
- */
-export declare const daysBetweenUTC: (a: string, b: string) => number;
-/**
- * Add a number of days to an ISO date string
- */
-export declare const addDateDays: (dateISO: string, days: number) => string;
-/**
- * Get the day of the week (0-6) from an ISO date string
- */
-export declare const getDayOfWeek: (dateISO: string) => number;
-/**
- * Get the date number (1-31) from an ISO date string
- */
-export declare const getDateNumber: (dateISO: string) => number;
-/**
- * Layout events with proper positioning to avoid overlaps
- * Returns positioned events and the total number of rows needed
- */
-export declare const layoutEvents: (events: CalendarWeekEvent[], weekStart: string) => {
-    items: PositionedEvent[];
-    rowCount: number;
-};
-/**
- * Day names array (Sunday to Saturday)
- */
-export declare const DAY_NAMES: string[];
-/**
- * Get the date ISO string for a specific day in the week
- */
-export declare const getDateForDay: (weekStart: string, dayIndex: number) => string;
-/**
- * Get the day index (0-6) from a clientX position within a week grid element
- */
-export declare const getDayFromX: (x: number, weekGridRect: DOMRect) => number;

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

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CalendarWeekProps } from './CalendarWeek.props';
-export declare const CalendarWeek: React.FC<CalendarWeekProps>;

package/dist/components/CalendarWeek/CalendarWeek.d.ts

@@ -1 +0,0 @@
-export { CalendarWeek } from './CalendarWeek/CalendarWeek.view';