@object-ui/plugin-kanban 3.3.0 → 3.3.2

package/src/index.tsx

@@ -1,327 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { Suspense } from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import { useSchemaContext } from '@object-ui/react';
-import { Skeleton } from '@object-ui/components';
-import { ObjectKanban } from './ObjectKanban';
-
-// Export types for external use
-export type { KanbanSchema, KanbanCard, KanbanColumn, CardTemplate, ColumnWidthConfig, InlineFieldDefinition } from './types';
-export { ObjectKanban };
-export type { ObjectKanbanProps } from './ObjectKanban';
-
-// Phase 13 L2/L3: New components and hooks
-export { InlineQuickAdd } from './InlineQuickAdd';
-export type { InlineQuickAddProps } from './InlineQuickAdd';
-export { CardTemplates } from './CardTemplates';
-export type { CardTemplatesProps } from './CardTemplates';
-export { useColumnWidths } from './useColumnWidths';
-export type { UseColumnWidthsOptions, UseColumnWidthsReturn } from './useColumnWidths';
-export { useCrossSwimlaneMove } from './useCrossSwimlaneMove';
-export type { Swimlane, CrossSwimlaneMoveEvent, UseCrossSwimlaneOptions, UseCrossSwimlaneMoveReturn } from './useCrossSwimlaneMove';
-export { useQuickAddReorder } from './useQuickAddReorder';
-export type { UseQuickAddReorderOptions, UseQuickAddReorderReturn } from './useQuickAddReorder';
-
-// 🚀 Lazy load the implementation files
-const LazyKanban = React.lazy(() => import('./KanbanImpl'));
-const LazyKanbanEnhanced = React.lazy(() => import('./KanbanEnhanced'));
-
-export interface KanbanRendererProps {
-  schema: {
-    type: string;
-    id?: string;
-    className?: string;
-    columns?: Array<any>;
-    data?: Array<any>;
-    groupBy?: string;
-    swimlaneField?: string;
-    onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void;
-    onCardClick?: (card: any) => void;
-    quickAdd?: boolean;
-    onQuickAdd?: (columnId: string, title: string) => void;
-    coverImageField?: string;
-    conditionalFormatting?: Array<{
-      field: string;
-      operator: 'equals' | 'not_equals' | 'contains' | 'in';
-      value: string | string[];
-      backgroundColor?: string;
-      borderColor?: string;
-    }>;
-  };
-}
-
-/**
- * KanbanRenderer - The public API for the kanban board component
- * This wrapper handles lazy loading internally using React.Suspense
- */
-export const KanbanRenderer: React.FC<KanbanRendererProps> = ({ schema }) => {
-  // ⚡️ Adapter: Map flat 'data' + 'groupBy' to nested 'cards' structure
-  const processedColumns = React.useMemo(() => {
-    const { columns = [], data, groupBy, coverImageField } = schema;
-    
-    // Helper to map cover image field onto cards
-    const mapCoverImage = (item: any) => {
-      if (!coverImageField) return item;
-      const imgValue = item[coverImageField];
-      if (!imgValue) return item;
-      const coverImage = typeof imgValue === 'string' ? imgValue : imgValue?.url;
-      return coverImage ? { ...item, coverImage } : item;
-    };
-    
-    // If we have flat data and a grouping key, distribute items into columns
-    if (data && groupBy && Array.isArray(data)) {
-      // Build label→id mapping so data values (labels like "In Progress")
-      // match column IDs (option values like "in_progress")
-      const labelToColumnId: Record<string, string> = {};
-      columns.forEach((col: any) => {
-        if (col.id) labelToColumnId[String(col.id).toLowerCase()] = col.id;
-        if (col.title) labelToColumnId[String(col.title).toLowerCase()] = col.id;
-      });
-
-      // 1. Group data by key, normalizing via label→id mapping
-      const groups = data.reduce((acc, item) => {
-        const rawKey = String(item[groupBy] ?? '');
-        const key = labelToColumnId[rawKey.toLowerCase()] ?? rawKey;
-        if (!acc[key]) acc[key] = [];
-        acc[key].push(mapCoverImage(item));
-        return acc;
-      }, {} as Record<string, any[]>);
-
-      // 2. Inject into columns
-      return columns.map((col: any) => ({
-        ...col,
-        cards: [
-           ...(col.cards || []).map(mapCoverImage),     // Preserve static cards
-           ...(groups[col.id] || []) // Add dynamic cards
-        ]
-      }));
-    }
-    
-    // Default: Return columns as-is, mapping cover images
-    return columns.map((col: any) => ({
-      ...col,
-      cards: (col.cards || []).map(mapCoverImage),
-    }));
-  }, [schema]);
-
-  return (
-    <Suspense fallback={<Skeleton className="w-full h-[600px]" />}>
-      <LazyKanban
-        columns={processedColumns}
-        onCardMove={schema.onCardMove}
-        onCardClick={schema.onCardClick}
-        className={schema.className}
-        quickAdd={schema.quickAdd}
-        onQuickAdd={schema.onQuickAdd}
-        coverImageField={schema.coverImageField}
-        conditionalFormatting={schema.conditionalFormatting}
-        swimlaneField={schema.swimlaneField}
-      />
-    </Suspense>
-  );
-};
-
-// Register the component with the ComponentRegistry
-ComponentRegistry.register(
-  'kanban-ui',
-  KanbanRenderer,
-  {
-    namespace: 'plugin-kanban',
-    label: 'Kanban Board',
-    icon: 'LayoutDashboard',
-    category: 'plugin',
-    inputs: [
-      { 
-        name: 'columns', 
-        type: 'array', 
-        label: 'Columns',
-        description: 'Array of { id, title, cards, limit, className }',
-        required: true
-      },
-      { 
-        name: 'onCardMove', 
-        type: 'code',
-        label: 'On Card Move',
-        description: 'Callback when a card is moved',
-        advanced: true
-      },
-      { 
-        name: 'className', 
-        type: 'string', 
-        label: 'CSS Class' 
-      }
-    ],
-    defaultProps: {
-      columns: [
-        {
-          id: 'todo',
-          title: 'To Do',
-          cards: [
-            {
-              id: 'card-1',
-              title: 'Task 1',
-              description: 'This is the first task',
-              badges: [
-                { label: 'High Priority', variant: 'destructive' },
-                { label: 'Feature', variant: 'default' }
-              ]
-            },
-            {
-              id: 'card-2',
-              title: 'Task 2',
-              description: 'This is the second task',
-              badges: [
-                { label: 'Bug', variant: 'destructive' }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'in-progress',
-          title: 'In Progress',
-          limit: 3,
-          cards: [
-            {
-              id: 'card-3',
-              title: 'Task 3',
-              description: 'Currently working on this',
-              badges: [
-                { label: 'In Progress', variant: 'default' }
-              ]
-            }
-          ]
-        },
-        {
-          id: 'done',
-          title: 'Done',
-          cards: [
-            {
-              id: 'card-4',
-              title: 'Task 4',
-              description: 'This task is completed',
-              badges: [
-                { label: 'Completed', variant: 'outline' }
-              ]
-            },
-            {
-              id: 'card-5',
-              title: 'Task 5',
-              description: 'Another completed task',
-              badges: [
-                { label: 'Completed', variant: 'outline' }
-              ]
-            }
-          ]
-        }
-      ],
-      className: 'w-full'
-    }
-  }
-);
-
-// Standard Export Protocol - for manual integration
-export const kanbanComponents = {
-  'kanban': KanbanRenderer,
-  'kanban-enhanced': LazyKanbanEnhanced,
-  'object-kanban': ObjectKanban,
-};
-
-// Register enhanced Kanban
-ComponentRegistry.register(
-  'kanban-enhanced',
-  ({ schema }: { schema: any }) => {
-    const processedColumns = React.useMemo(() => {
-      const { columns = [], data, groupBy } = schema;
-      if (data && groupBy && Array.isArray(data)) {
-        const groups = data.reduce((acc, item) => {
-          const key = item[groupBy];
-          if (!acc[key]) acc[key] = [];
-          acc[key].push(item);
-          return acc;
-        }, {} as Record<string, any[]>);
-        return columns.map((col: any) => ({
-          ...col,
-          cards: [...(col.cards || []), ...(groups[col.id] || [])]
-        }));
-      }
-      return columns;
-    }, [schema]);
-
-    return (
-      <Suspense fallback={<Skeleton className="w-full h-[600px]" />}>
-        <LazyKanbanEnhanced
-          columns={processedColumns}
-          onCardMove={schema.onCardMove}
-          onColumnToggle={schema.onColumnToggle}
-          enableVirtualScrolling={schema.enableVirtualScrolling}
-          virtualScrollThreshold={schema.virtualScrollThreshold}
-          className={schema.className}
-          quickAdd={schema.quickAdd}
-          onQuickAdd={schema.onQuickAdd}
-          conditionalFormatting={schema.conditionalFormatting}
-        />
-      </Suspense>
-    );
-  },
-  {
-    namespace: 'plugin-kanban',
-    label: 'Kanban Board (Enhanced)',
-    icon: 'LayoutGrid',
-    category: 'plugin',
-    inputs: [
-      { name: 'columns', type: 'array', label: 'Columns', required: true },
-      { name: 'enableVirtualScrolling', type: 'boolean', label: 'Virtual Scrolling', defaultValue: false },
-      { name: 'virtualScrollThreshold', type: 'number', label: 'Virtual Scroll Threshold', defaultValue: 50 },
-      { name: 'onCardMove', type: 'code', label: 'On Card Move', advanced: true },
-      { name: 'onColumnToggle', type: 'code', label: 'On Column Toggle', advanced: true },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      columns: [],
-      enableVirtualScrolling: false,
-      virtualScrollThreshold: 50,
-      className: 'w-full'
-    }
-  }
-);
-
-// Register object-kanban for ListView integration
-export const ObjectKanbanRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, ...props }) => {
-  const { dataSource } = useSchemaContext() || {};
-  return <ObjectKanban schema={schema} dataSource={dataSource} {...props} />;
-};
-
-ComponentRegistry.register(
-  'object-kanban',
-  ObjectKanbanRenderer,
-  {
-    namespace: 'plugin-kanban',
-    label: 'Object Kanban',
-    category: 'view',
-    inputs: [
-      { name: 'objectName', type: 'string', label: 'Object Name', required: true },
-      { name: 'columns', type: 'array', label: 'Columns' }
-    ]
-  }
-);
-
-ComponentRegistry.register(
-  'kanban',
-  ObjectKanbanRenderer,
-  {
-    namespace: 'view',
-    label: 'Kanban Board',
-    category: 'view',
-    inputs: [
-      { name: 'objectName', type: 'string', label: 'Object Name', required: true },
-      { name: 'columns', type: 'array', label: 'Columns' }
-    ]
-  }
-);

package/src/registration.test.tsx

@@ -1,26 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import { ObjectKanbanRenderer } from './index';
-
-// Mock dependencies
-vi.mock('@object-ui/react', () => ({
-  useSchemaContext: vi.fn(() => ({ dataSource: { type: 'mock-datasource' } })),
-}));
-
-// Mock the implementation
-vi.mock('./ObjectKanban', () => ({
-  ObjectKanban: ({ dataSource }: any) => (
-    <div data-testid="kanban-mock">
-        {dataSource ? `DataSource: ${dataSource.type}` : 'No DataSource'}
-    </div>
-  )
-}));
-
-describe('Plugin Kanban Registration', () => {
-  it('renderer passes dataSource from context', () => {
-    
-    render(<ObjectKanbanRenderer schema={{ type: 'object-kanban' }} />);
-    expect(screen.getByTestId('kanban-mock')).toHaveTextContent('DataSource: mock-datasource');
-  });
-});

package/src/types.ts

@@ -1,185 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import type { BaseSchema, GroupingConfig } from '@object-ui/types';
-
-/**
- * Kanban card interface.
- */
-export interface KanbanCard {
-  id: string;
-  title: string;
-  description?: string;
-  badges?: Array<{ label: string; variant?: "default" | "secondary" | "destructive" | "outline" }>;
-  [key: string]: any;
-}
-
-/**
- * Kanban column interface.
- */
-export interface KanbanColumn {
-  id: string;
-  title: string;
-  cards: KanbanCard[];
-  limit?: number;
-  className?: string;
-}
-
-/**
- * Kanban Board component schema.
- * Renders a drag-and-drop kanban board for task management.
- */
-export interface KanbanSchema extends BaseSchema {
-  type: 'kanban';
-  
-  /**
-   * Object name to fetch data from.
-   */
-  objectName?: string;
-
-  /**
-   * Field to group records by (maps to column IDs).
-   */
-  groupBy?: string;
-
-  /**
-   * Field for swimlane rows (2D grouping). When set, cards are grouped
-   * vertically by `groupBy` (columns) and horizontally by `swimlaneField` (rows).
-   */
-  swimlaneField?: string;
-
-  /**
-   * Field to use as the card title.
-   */
-  cardTitle?: string;
-
-  /**
-   * Fields to display on the card.
-   */
-  cardFields?: string[];
-
-  /**
-   * Static data or bound data.
-   */
-  data?: any[];
-
-  /**
-   * Array of columns to display in the kanban board.
-   * Each column contains an array of cards.
-   */
-  columns?: KanbanColumn[];
-  
-  /**
-   * Callback function when a card is moved between columns or reordered.
-   */
-  onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void;
-  
-  /**
-   * Optional CSS class name to apply custom styling.
-   */
-  className?: string;
-
-  /**
-   * Enable Quick Add button at the bottom of each column.
-   * When true, a "+" button appears allowing inline card creation.
-   * @default false
-   */
-  quickAdd?: boolean;
-
-  /**
-   * Callback when a new card is created via Quick Add.
-   */
-  onQuickAdd?: (columnId: string, title: string) => void;
-
-  /**
-   * Field name to use as cover image on cards.
-   * The field value should be a URL string or file object with a `url` property.
-   */
-  coverImageField?: string;
-
-  /**
-   * Allow columns to be collapsed/expanded.
-   * @default false
-   */
-  allowCollapse?: boolean;
-
-  /**
-   * Conditional formatting rules for card coloring.
-   */
-  conditionalFormatting?: Array<{
-    field: string;
-    operator: 'equals' | 'not_equals' | 'contains' | 'in';
-    value: string | string[];
-    backgroundColor?: string;
-    borderColor?: string;
-  }>;
-
-  /**
-   * Predefined card templates for quick-add.
-   * Each template pre-fills the quick-add form with default values.
-   */
-  cardTemplates?: CardTemplate[];
-
-  /**
-   * Custom column width configuration.
-   * Supports per-column overrides with min/max constraints.
-   */
-  columnWidths?: ColumnWidthConfig;
-
-  /**
-   * Grouping configuration from ListView.
-   * When set, the first grouping field is used as swimlaneField fallback.
-   */
-  grouping?: GroupingConfig;
-}
-
-/**
- * A predefined card template with pre-filled field values.
- */
-export interface CardTemplate {
-  /** Unique template identifier */
-  id: string;
-  /** Human-readable template name */
-  name: string;
-  /** Optional Lucide icon name */
-  icon?: string;
-  /** Pre-filled field values */
-  values: Record<string, any>;
-}
-
-/**
- * Configuration for custom column widths.
- */
-export interface ColumnWidthConfig {
-  /** Default column width in pixels */
-  defaultWidth?: number;
-  /** Minimum column width in pixels */
-  minWidth?: number;
-  /** Maximum column width in pixels */
-  maxWidth?: number;
-  /** Per-column width overrides keyed by column ID */
-  overrides?: Record<string, number>;
-}
-
-/**
- * Field definition for inline quick-add forms.
- */
-export interface InlineFieldDefinition {
-  /** Field name (key in the resulting values object) */
-  name: string;
-  /** Display label */
-  label?: string;
-  /** Field type */
-  type: 'text' | 'number' | 'select';
-  /** Placeholder text */
-  placeholder?: string;
-  /** Default value */
-  defaultValue?: any;
-  /** Options for select fields */
-  options?: Array<{ label: string; value: string }>;
-}

package/src/useColumnWidths.ts

@@ -1,125 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState, useCallback, useMemo } from "react"
-import type { KanbanColumn, ColumnWidthConfig } from "./types"
-
-const STORAGE_KEY = "objectui:kanban-column-widths"
-
-export interface UseColumnWidthsOptions {
-  /** Columns on the board */
-  columns: KanbanColumn[]
-  /** Default width in pixels applied to every column */
-  defaultWidth?: number
-  /** Minimum allowed column width in pixels */
-  minWidth?: number
-  /** Maximum allowed column width in pixels */
-  maxWidth?: number
-  /** Optional persistence key suffix (to scope per-board) */
-  storageKey?: string
-}
-
-export interface UseColumnWidthsReturn {
-  /** Get the current width for a column (in px) */
-  getColumnWidth: (columnId: string) => number
-  /** Set an override width for a column */
-  setColumnWidth: (columnId: string, width: number) => void
-  /** Reset all overrides back to default widths */
-  resetWidths: () => void
-  /** The full config (useful for serialization) */
-  config: ColumnWidthConfig
-}
-
-function loadPersistedWidths(key: string): Record<string, number> {
-  try {
-    const raw = localStorage.getItem(key)
-    if (raw) {
-      const parsed = JSON.parse(raw)
-      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
-        return parsed as Record<string, number>
-      }
-    }
-  } catch {
-    /* ignore corrupt data */
-  }
-  return {}
-}
-
-function persistWidths(key: string, overrides: Record<string, number>) {
-  try {
-    localStorage.setItem(key, JSON.stringify(overrides))
-  } catch {
-    /* quota exceeded */
-  }
-}
-
-/**
- * Hook for managing custom per-column widths with localStorage persistence.
- * Supports per-column overrides clamped between minWidth and maxWidth.
- */
-export function useColumnWidths({
-  columns: _columns,
-  defaultWidth = 320,
-  minWidth = 200,
-  maxWidth = 600,
-  storageKey,
-}: UseColumnWidthsOptions): UseColumnWidthsReturn {
-  const fullKey = storageKey ? `${STORAGE_KEY}:${storageKey}` : STORAGE_KEY
-
-  const [overrides, setOverrides] = useState<Record<string, number>>(() =>
-    loadPersistedWidths(fullKey),
-  )
-
-  const clamp = useCallback(
-    (value: number) => Math.max(minWidth, Math.min(maxWidth, value)),
-    [minWidth, maxWidth],
-  )
-
-  const getColumnWidth = useCallback(
-    (columnId: string): number => {
-      const override = overrides[columnId]
-      return override != null ? clamp(override) : defaultWidth
-    },
-    [overrides, defaultWidth, clamp],
-  )
-
-  const setColumnWidth = useCallback(
-    (columnId: string, width: number) => {
-      const clamped = clamp(width)
-      setOverrides(prev => {
-        const next = { ...prev, [columnId]: clamped }
-        persistWidths(fullKey, next)
-        return next
-      })
-    },
-    [clamp, fullKey],
-  )
-
-  const resetWidths = useCallback(() => {
-    setOverrides({})
-    try {
-      localStorage.removeItem(fullKey)
-    } catch {
-      /* ignore */
-    }
-  }, [fullKey])
-
-  const config: ColumnWidthConfig = useMemo(
-    () => ({
-      defaultWidth,
-      minWidth,
-      maxWidth,
-      overrides: { ...overrides },
-    }),
-    [defaultWidth, minWidth, maxWidth, overrides],
-  )
-
-  return { getColumnWidth, setColumnWidth, resetWidths, config }
-}
-
-export default useColumnWidths