@app-studio/web 0.9.44 → 0.9.46

package/docs/components/Calendar.mdx

@@ -1,189 +0,0 @@
-# Calendar
-
-A flexible calendar component with day, week, and month views for displaying and managing events. Features intelligent navigation (day-by-day, week-by-week, month-by-month), interactive hover cards for events and days, custom event rendering, and comprehensive styling customization.
-
-### **Import**
-  ```tsx
-  import { Calendar } from '@app-studio/web';
-  ```
-
-### **Default**
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const DefaultCalendar = () => {
-  return <Calendar />;
-};
-```
-
-### **With Events**
-Display events in the calendar with customizable event objects. Hover over events to see detailed information in a popup card, and hover over day cells to see a summary of the day's events.
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-import { CalendarEvent } from '@app-studio/web';
-
-export const CalendarWithEvents = () => {
-  const events: CalendarEvent[] = [
-    {
-      id: 1,
-      title: 'Team Meeting',
-      start: new Date(2025, 9, 15, 10, 0),
-      end: new Date(2025, 9, 15, 11, 0),
-      description: 'Weekly team sync-up',
-    },
-    {
-      id: 2,
-      title: 'Project Deadline',
-      start: new Date(2025, 9, 18, 17, 0),
-      description: 'Submit final deliverables',
-    },
-  ];
-
-  return <Calendar events={events} />;
-};
-```
-
-**Interactive Features:**
-- **Event Hover Cards**: Hover over any event to see full details including title, date, time, and description
-- **Smart Navigation**: Navigation buttons automatically adapt to the current view (Previous/Next Day, Week, or Month)
-- **Fixed Cell Dimensions**: All day cells maintain consistent width (minimum 180px) and height for uniform layout
-- **Scrollable Content**: Events within each day cell scroll independently while maintaining cell dimensions
-
-### **Day View**
-Show a single day with all events for that day.
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const DayViewCalendar = () => {
-  return <Calendar initialView="day" />;
-};
-```
-
-### **Week View**
-Display a full week with events across all days.
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const WeekViewCalendar = () => {
-  return <Calendar initialView="week" />;
-};
-```
-
-### **Month View**
-Show the entire month with events distributed across days.
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const MonthViewCalendar = () => {
-  return <Calendar initialView="month" />;
-};
-```
-
-### **Week Starts On**
-Configure which day the week starts on (0 = Sunday, 1 = Monday, etc.).
-
-```tsx
-import React from 'react';
-import { Calendar } from '@app-studio/web';
-
-export const WeekStartsOnMonday = () => {
-  return <Calendar weekStartsOn={1} />;
-};
-```
-
-### **Custom Styles**
-Customize the appearance of calendar elements using the `views` prop.
-
-## Props
-
-| 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. | - |
-| `onEventTitleChange` | `(event: CalendarEvent, newTitle: string) => void` | Callback when an event's title is changed. | - |
-| `onEventDescriptionChange` | `(event: CalendarEvent, newDescription: string) => void` | Callback when an event's description is changed. | - |
-| `onEventDelete` | `(event: CalendarEvent) => void` | Callback when an event is deleted. | - |
-| `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. |
-| `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
-
-Customize the appearance of different calendar elements. All elements support the `views` prop for complete customization:
-
-### Container & Layout
-- `container` - Main calendar container (ViewProps)
-- `header` - Header section (ViewProps)
-- `grid` - Calendar grid container (ViewProps)
-
-### Header Elements
-- `headerTitle` - Title text in header (TextProps)
-- `navigation` - Navigation buttons container (ViewProps)
-- `navigationButton` - Navigation button props (ButtonProps)
-- `viewSwitcher` - View switcher buttons container (ViewProps)
-- `viewButton` - View button props (ButtonProps)
-
-### Weekday Header
-- `weekdayRow` - Weekday row container (ViewProps)
-- `weekdayHeader` - Individual weekday header cell (ViewProps)
-- `weekdayLabel` - Weekday label text (TextProps)
-
-### Week & Day Structure
-- `weekRow` - Week row container (ViewProps)
-- `dayColumn` - Individual day column/cell (ViewProps)
-- `dayHeader` - Day header within cell (ViewProps)
-- `dayNumber` - Day number text (TextProps)
-- `dayMeta` - Day metadata text (TextProps)
-
-### Events
-- `events` - Events container within day (ViewProps)
-- `event` - Individual event container (ViewProps)
-- `eventTitle` - Event title text (TextProps)
-- `eventTime` - Event time text (TextProps)
-- `emptyState` - Empty state text when no events (TextProps)
-
-### Example: Complete Customization
-
-```tsx
-<Calendar
-  events={events}
-  views={{
-    container: { backgroundColor: 'color.gray.50', padding: 32 },
-    headerTitle: { fontSize: 24, color: 'color.primary.700' },
-    weekdayRow: { backgroundColor: 'color.primary.50', borderRadius: 8 },
-    weekdayLabel: { fontSize: 16, fontWeight: '700' },
-    dayColumn: { padding: 20, borderRadius: 16, borderWidth: 2 },
-    dayNumber: { fontSize: 20, color: 'color.primary.700' },
-    event: { padding: 16, backgroundColor: 'color.primary.100' },
-    eventTitle: { fontSize: 16, fontWeight: '700' },
-  }}
-/>
-```
-

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
-