@object-ui/components 3.3.0 → 3.3.1

package/src/renderers/complex/TIMELINE.md

@@ -1,353 +0,0 @@
-# Timeline Component
-
-A comprehensive, feature-rich timeline component for Object UI that supports three distinct variants: vertical, horizontal, and Gantt-style (Airtable-like) timelines.
-
-## Features
-
-- 🎯 **Three Variants**: Vertical, Horizontal, and Gantt/Airtable-style timelines
-- 🎨 **Color Variants**: Support for default, success, warning, danger, and info colors
-- 📅 **Date Formatting**: Configurable date formats (short, long, ISO)
-- ⏱️ **Time Scales**: Gantt view supports day, week, and month scales
-- 🔄 **Interactive**: Click handlers for timeline items
-- 🎭 **Icon Support**: Add custom icons or emojis to timeline markers
-- 📊 **Multi-track**: Gantt view supports multiple rows/tracks
-- 🔢 **Auto-calculated**: Automatic date range calculation for Gantt view
-- 💅 **Tailwind CSS**: Fully styled with Tailwind, customizable with className
-
-## Installation
-
-The timeline component is included in `@object-ui/components`.
-
-```bash
-npm install @object-ui/components @object-ui/react @object-ui/core
-```
-
-## Usage
-
-### Vertical Timeline
-
-Perfect for showing project milestones, history, or chronological events.
-
-```json
-{
-  "type": "timeline",
-  "variant": "vertical",
-  "dateFormat": "long",
-  "items": [
-    {
-      "time": "2024-01-15",
-      "title": "Project Kickoff",
-      "description": "Initial meeting with stakeholders and project planning",
-      "variant": "success",
-      "icon": "🚀"
-    },
-    {
-      "time": "2024-02-01",
-      "title": "Design Phase Complete",
-      "description": "UI/UX designs approved and ready for development",
-      "variant": "info",
-      "icon": "🎨"
-    },
-    {
-      "time": "2024-03-15",
-      "title": "Beta Release",
-      "description": "Internal testing phase begins",
-      "variant": "warning",
-      "icon": "⚡"
-    },
-    {
-      "time": "2024-04-01",
-      "title": "Official Launch",
-      "description": "Product goes live to all users",
-      "variant": "success",
-      "icon": "🎉"
-    }
-  ]
-}
-```
-
-### Horizontal Timeline
-
-Ideal for roadmaps, quarterly plans, or linear progressions.
-
-```json
-{
-  "type": "timeline",
-  "variant": "horizontal",
-  "dateFormat": "short",
-  "items": [
-    {
-      "time": "2024-01-01",
-      "title": "Q1 2024",
-      "description": "Planning & Design",
-      "variant": "success"
-    },
-    {
-      "time": "2024-04-01",
-      "title": "Q2 2024",
-      "description": "Development",
-      "variant": "info"
-    },
-    {
-      "time": "2024-07-01",
-      "title": "Q3 2024",
-      "description": "Testing & QA",
-      "variant": "warning"
-    },
-    {
-      "time": "2024-10-01",
-      "title": "Q4 2024",
-      "description": "Launch & Scale",
-      "variant": "success"
-    }
-  ]
-}
-```
-
-### Gantt Timeline (Airtable Style)
-
-Perfect for project management, resource planning, and multi-track timelines.
-
-```json
-{
-  "type": "timeline",
-  "variant": "gantt",
-  "dateFormat": "short",
-  "timeScale": "month",
-  "rowLabel": "Project Tasks",
-  "items": [
-    {
-      "label": "Backend Development",
-      "items": [
-        {
-          "title": "API Design",
-          "startDate": "2024-01-01",
-          "endDate": "2024-01-31",
-          "variant": "success"
-        },
-        {
-          "title": "Database Schema",
-          "startDate": "2024-01-15",
-          "endDate": "2024-02-15",
-          "variant": "info"
-        },
-        {
-          "title": "API Implementation",
-          "startDate": "2024-02-01",
-          "endDate": "2024-03-31",
-          "variant": "default"
-        }
-      ]
-    },
-    {
-      "label": "Frontend Development",
-      "items": [
-        {
-          "title": "UI Design",
-          "startDate": "2024-01-15",
-          "endDate": "2024-02-15",
-          "variant": "warning"
-        },
-        {
-          "title": "Component Library",
-          "startDate": "2024-02-01",
-          "endDate": "2024-03-15",
-          "variant": "info"
-        },
-        {
-          "title": "Integration",
-          "startDate": "2024-03-01",
-          "endDate": "2024-04-15",
-          "variant": "default"
-        }
-      ]
-    },
-    {
-      "label": "Testing & QA",
-      "items": [
-        {
-          "title": "Unit Tests",
-          "startDate": "2024-02-15",
-          "endDate": "2024-03-15",
-          "variant": "success"
-        },
-        {
-          "title": "Integration Tests",
-          "startDate": "2024-03-01",
-          "endDate": "2024-04-01",
-          "variant": "info"
-        },
-        {
-          "title": "User Acceptance Testing",
-          "startDate": "2024-04-01",
-          "endDate": "2024-04-30",
-          "variant": "danger"
-        }
-      ]
-    }
-  ]
-}
-```
-
-## Props
-
-### Common Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'vertical' \| 'horizontal' \| 'gantt'` | `'vertical'` | Timeline variant to render |
-| `dateFormat` | `'short' \| 'long' \| 'iso'` | `'short'` | Date formatting style |
-| `items` | `TimelineItem[]` | `[]` | Array of timeline items (structure varies by variant) |
-| `className` | `string` | - | Additional CSS classes |
-
-### Vertical/Horizontal Item Props
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `time` | `string` | ISO date string (e.g., "2024-01-15") |
-| `title` | `string` | Item title |
-| `description` | `string` | Item description |
-| `variant` | `'default' \| 'success' \| 'warning' \| 'danger' \| 'info'` | Color variant |
-| `icon` | `string` | Icon or emoji to display in marker |
-| `content` | `SchemaNode` | Custom content schema |
-| `className` | `string` | Additional CSS classes |
-
-### Gantt-Specific Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `timeScale` | `'day' \| 'week' \| 'month'` | `'month'` | Time scale for the timeline header |
-| `rowLabel` | `string` | `'Items'` | Label for the row header column |
-| `minDate` | `string` | Auto-calculated | Override minimum date (YYYY-MM-DD) |
-| `maxDate` | `string` | Auto-calculated | Override maximum date (YYYY-MM-DD) |
-
-### Gantt Item Structure
-
-```typescript
-{
-  label: string;          // Row label
-  items: Array<{
-    title: string;        // Bar label
-    startDate: string;    // ISO date string
-    endDate: string;      // ISO date string
-    variant?: string;     // Color variant
-  }>;
-}
-```
-
-## Color Variants
-
-The timeline component supports 5 color variants:
-
-- `default` - Blue (default color)
-- `success` - Green
-- `warning` - Yellow/Orange
-- `danger` - Red
-- `info` - Purple
-
-Each variant applies to markers (vertical/horizontal) or bars (Gantt).
-
-## Date Formats
-
-- `short` - MM/DD/YYYY (e.g., "1/15/2024")
-- `long` - Month DD, YYYY (e.g., "January 15, 2024")
-- `iso` - YYYY-MM-DD (e.g., "2024-01-15")
-
-## Time Scales (Gantt Only)
-
-- `day` - Daily granularity
-- `week` - Weekly granularity
-- `month` - Monthly granularity (default)
-
-## Advanced Usage
-
-### Custom Styling
-
-Use Tailwind CSS classes for custom styling:
-
-```json
-{
-  "type": "timeline",
-  "variant": "vertical",
-  "className": "max-w-3xl mx-auto",
-  "items": [
-    {
-      "time": "2024-01-15",
-      "title": "Custom Styled Item",
-      "className": "bg-blue-50 p-4 rounded-lg",
-      "variant": "info"
-    }
-  ]
-}
-```
-
-### With Custom Content
-
-You can add custom content schemas to vertical/horizontal timeline items:
-
-```json
-{
-  "type": "timeline",
-  "variant": "vertical",
-  "items": [
-    {
-      "time": "2024-01-15",
-      "title": "Custom Content",
-      "content": [
-        {
-          "type": "button",
-          "label": "View Details",
-          "className": "mt-2"
-        }
-      ]
-    }
-  ]
-}
-```
-
-### Interactive Items
-
-Handle item clicks in Gantt view:
-
-```typescript
-// In React component
-<SchemaRenderer 
-  schema={{
-    type: 'timeline',
-    variant: 'gantt',
-    onItemClick: (item, row, rowIndex, itemIndex) => {
-      console.log('Clicked:', item.title, 'in row:', row.label);
-    },
-    items: [...]
-  }}
-/>
-```
-
-## UI Components
-
-The timeline component is built using these base UI components:
-
-### Vertical/Horizontal
-- `Timeline` - Container
-- `TimelineItem` - Individual item
-- `TimelineMarker` - Marker/dot
-- `TimelineContent` - Content wrapper
-- `TimelineTitle` - Title heading
-- `TimelineTime` - Time display
-- `TimelineDescription` - Description text
-
-### Gantt
-- `TimelineGantt` - Container
-- `TimelineGanttHeader` - Header with time scale
-- `TimelineGanttRow` - Individual row
-- `TimelineGanttLabel` - Row label
-- `TimelineGanttBar` - Task bar
-- `TimelineGanttBarContent` - Bar content/text
-
-## Examples
-
-See the [prototype app](../../examples/prototype/src/App.tsx) for comprehensive examples of all three timeline variants in action.
-
-## License
-
-MIT

package/src/renderers/complex/__tests__/data-table-airtable-ux.test.tsx

@@ -1,239 +0,0 @@
-/**
- * Data Table - Airtable UX Enhancements Tests
- *
- * Tests for row hover expand button, column header context menu,
- * and hide column functionality.
- */
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-import { SchemaRenderer } from '@object-ui/react';
-
-// Import data-table to ensure it's registered
-import '../data-table';
-
-const baseSchema = {
-  type: 'data-table',
-  columns: [
-    { header: 'Name', accessorKey: 'name' },
-    { header: 'Email', accessorKey: 'email' },
-    { header: 'Role', accessorKey: 'role' },
-  ],
-  data: [
-    { id: 1, name: 'Alice', email: 'alice@test.com', role: 'Admin' },
-    { id: 2, name: 'Bob', email: 'bob@test.com', role: 'User' },
-  ],
-  pagination: false,
-  searchable: false,
-  showRowNumbers: true,
-};
-
-// =========================================================================
-// 1. Row hover expand button
-// =========================================================================
-describe('Row hover expand button', () => {
-  it('should render expand buttons on rows when onRowClick is configured', async () => {
-    const onRowClick = vi.fn();
-    render(
-      <SchemaRenderer
-        schema={{ ...baseSchema, onRowClick }}
-      />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice')).toBeInTheDocument();
-    });
-
-    // Expand buttons should exist (hidden via CSS, visible on hover)
-    const expandButtons = screen.getAllByTestId('row-expand-button');
-    expect(expandButtons.length).toBe(2);
-  });
-
-  it('should not render expand buttons when onRowClick is not configured', async () => {
-    render(<SchemaRenderer schema={baseSchema} />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice')).toBeInTheDocument();
-    });
-
-    expect(screen.queryAllByTestId('row-expand-button')).toHaveLength(0);
-  });
-
-  it('should call onRowClick when expand button is clicked', async () => {
-    const onRowClick = vi.fn();
-    render(
-      <SchemaRenderer
-        schema={{ ...baseSchema, onRowClick }}
-      />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice')).toBeInTheDocument();
-    });
-
-    const expandButtons = screen.getAllByTestId('row-expand-button');
-    fireEvent.click(expandButtons[0]);
-
-    expect(onRowClick).toHaveBeenCalledTimes(1);
-    expect(onRowClick).toHaveBeenCalledWith(
-      expect.objectContaining({ name: 'Alice' })
-    );
-  });
-});
-
-// =========================================================================
-// 2. Column header context menu
-// =========================================================================
-describe('Column header context menu', () => {
-  it('should show context menu on right-click of column header', async () => {
-    render(<SchemaRenderer schema={baseSchema} />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    // Right-click on the "Name" column header
-    const nameHeader = screen.getByText('Name').closest('th');
-    expect(nameHeader).toBeTruthy();
-    fireEvent.contextMenu(nameHeader!);
-
-    // Context menu should appear
-    await waitFor(() => {
-      expect(screen.getByTestId('column-context-menu')).toBeInTheDocument();
-    });
-
-    // Should contain Sort and Hide options
-    expect(screen.getByText('Sort ascending')).toBeInTheDocument();
-    expect(screen.getByText('Sort descending')).toBeInTheDocument();
-    expect(screen.getByText('Hide column')).toBeInTheDocument();
-  });
-
-  it('should hide column when "Hide column" is clicked', async () => {
-    render(<SchemaRenderer schema={baseSchema} />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Email')).toBeInTheDocument();
-    });
-
-    // Right-click on the "Email" column header
-    const emailHeader = screen.getByText('Email').closest('th');
-    fireEvent.contextMenu(emailHeader!);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('column-context-menu')).toBeInTheDocument();
-    });
-
-    // Click "Hide column"
-    fireEvent.click(screen.getByText('Hide column'));
-
-    // The "Email" column should no longer be visible
-    await waitFor(() => {
-      expect(screen.queryByText('Email')).not.toBeInTheDocument();
-    });
-
-    // Other columns should still be visible
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Role')).toBeInTheDocument();
-  });
-
-  it('should sort ascending when "Sort ascending" is clicked from context menu', async () => {
-    render(
-      <SchemaRenderer
-        schema={{
-          ...baseSchema,
-          sortable: true,
-        }}
-      />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    // Right-click on the "Name" column header
-    const nameHeader = screen.getByText('Name').closest('th');
-    fireEvent.contextMenu(nameHeader!);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('column-context-menu')).toBeInTheDocument();
-    });
-
-    // Click "Sort ascending"
-    fireEvent.click(screen.getByText('Sort ascending'));
-
-    // Context menu should close
-    await waitFor(() => {
-      expect(screen.queryByTestId('column-context-menu')).not.toBeInTheDocument();
-    });
-  });
-});
-
-// =========================================================================
-// 3. Group/row hover styling
-// =========================================================================
-describe('Row group hover class', () => {
-  it('should apply group/row hover class to table rows', async () => {
-    render(<SchemaRenderer schema={baseSchema} />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice')).toBeInTheDocument();
-    });
-
-    // Data rows should have group/row class for hover effects
-    const aliceRow = screen.getByText('Alice').closest('tr');
-    expect(aliceRow).toHaveClass('group/row');
-  });
-});
-
-// =========================================================================
-// 5. Filler rows behavior
-// =========================================================================
-describe('Filler rows', () => {
-  it('should not render filler rows when pagination is disabled', async () => {
-    // pagination: false with pageSize: 10 and only 2 data rows
-    // should NOT produce empty filler rows
-    render(
-      <SchemaRenderer
-        schema={{ ...baseSchema, pagination: false, pageSize: 10 }}
-      />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice')).toBeInTheDocument();
-    });
-
-    const table = screen.getByRole('table');
-    const tbody = table.querySelector('tbody');
-    const allRows = tbody!.querySelectorAll('tr');
-
-    // Should only have data rows (2) + add-record row if any, no filler rows
-    // With 2 data items and no add-record, expect exactly 2 rows
-    const fillerRows = Array.from(allRows).filter(
-      (row) => row.querySelector('td[class*="p-0"]') && row.textContent === ''
-    );
-    expect(fillerRows).toHaveLength(0);
-  });
-
-  it('should render filler rows when pagination is enabled and page is not full', async () => {
-    render(
-      <SchemaRenderer
-        schema={{ ...baseSchema, pagination: true, pageSize: 5, searchable: false }}
-      />
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice')).toBeInTheDocument();
-    });
-
-    const table = screen.getByRole('table');
-    const tbody = table.querySelector('tbody');
-    const allRows = tbody!.querySelectorAll('tr');
-
-    // With 2 data rows and pageSize 5, expect 3 filler rows (5 - 2 = 3)
-    const fillerRows = Array.from(allRows).filter(
-      (row) => row.querySelector('td[class*="p-0"]') && row.textContent === ''
-    );
-    expect(fillerRows).toHaveLength(3);
-  });
-});