@object-ui/plugin-kanban 3.3.0 → 3.3.1

package/src/ObjectKanban.EdgeCases.stories.tsx

@@ -1,168 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '@object-ui/react';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Plugins/ObjectKanban/Edge Cases',
-  component: SchemaRenderer,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } },
-  },
-} satisfies Meta<any>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
-
-// ── Empty Board ───────────────────────────────────────────────
-
-export const EmptyBoard: Story = {
-  name: 'Empty Board – No Columns',
-  render: renderStory,
-  args: {
-    type: 'kanban',
-    columns: [],
-    className: 'w-full',
-  } as any,
-};
-
-// ── Columns With No Cards ─────────────────────────────────────
-
-export const ColumnsWithNoCards: Story = {
-  name: 'Columns With No Cards',
-  render: renderStory,
-  args: {
-    type: 'kanban',
-    columns: [
-      { id: 'todo', title: 'To Do', cards: [] },
-      { id: 'in-progress', title: 'In Progress', cards: [] },
-      { id: 'done', title: 'Done', cards: [] },
-    ],
-    className: 'w-full',
-  } as any,
-};
-
-// ── Column At WIP Limit ───────────────────────────────────────
-
-export const ColumnAtWipLimit: Story = {
-  name: 'Column At WIP Limit',
-  render: renderStory,
-  args: {
-    type: 'kanban',
-    columns: [
-      {
-        id: 'todo',
-        title: 'To Do',
-        cards: [
-          { id: 'c-1', title: 'Plan sprint', badges: [{ label: 'Planning', variant: 'default' }] },
-        ],
-      },
-      {
-        id: 'wip',
-        title: 'In Progress (At Limit)',
-        limit: 3,
-        cards: [
-          { id: 'c-2', title: 'Build auth module', description: 'JWT implementation', badges: [{ label: 'Feature', variant: 'default' }] },
-          { id: 'c-3', title: 'Write unit tests', description: 'Coverage > 80%', badges: [{ label: 'Testing', variant: 'secondary' }] },
-          { id: 'c-4', title: 'Deploy staging', description: 'Push to staging env', badges: [{ label: 'DevOps', variant: 'secondary' }] },
-        ],
-      },
-      {
-        id: 'done',
-        title: 'Done',
-        cards: [
-          { id: 'c-5', title: 'Setup repo', badges: [{ label: 'Completed', variant: 'outline' }] },
-        ],
-      },
-    ],
-    className: 'w-full',
-  } as any,
-};
-
-// ── Cards With Very Long Titles ───────────────────────────────
-
-export const CardsWithLongTitles: Story = {
-  name: 'Cards With Very Long Titles',
-  render: renderStory,
-  args: {
-    type: 'kanban',
-    columns: [
-      {
-        id: 'backlog',
-        title: 'Backlog',
-        cards: [
-          {
-            id: 'long-1',
-            title: 'Investigate the root cause of the intermittent timeout errors occurring in the payment processing pipeline during peak traffic hours on weekends',
-            description: 'This card has an extremely long title to test text wrapping and overflow behaviour within kanban cards.',
-            badges: [
-              { label: 'Bug', variant: 'destructive' },
-              { label: 'P0 – Critical Production Incident', variant: 'destructive' },
-            ],
-          },
-          {
-            id: 'long-2',
-            title: 'Refactor the legacy monolithic authentication service into a set of microservices following domain-driven design principles and ensuring backward compatibility',
-            badges: [{ label: 'Tech Debt', variant: 'secondary' }],
-          },
-        ],
-      },
-      {
-        id: 'in-progress',
-        title: 'In Progress',
-        cards: [
-          {
-            id: 'long-3',
-            title: 'A short title for contrast',
-            description: 'Normal-length description.',
-          },
-        ],
-      },
-    ],
-    className: 'w-full',
-  } as any,
-};
-
-// ── Many Columns (10+) ───────────────────────────────────────
-
-export const ManyColumns: Story = {
-  name: 'Many Columns (10+)',
-  render: renderStory,
-  args: {
-    type: 'kanban',
-    columns: Array.from({ length: 12 }, (_, i) => ({
-      id: `col-${i + 1}`,
-      title: `Stage ${i + 1}`,
-      limit: i === 3 ? 2 : undefined,
-      cards: i % 3 === 0
-        ? [
-            {
-              id: `mc-${i}-1`,
-              title: `Task ${i * 2 + 1}`,
-              description: `Description for task in stage ${i + 1}`,
-              badges: [{ label: `S${i + 1}`, variant: 'default' as const }],
-            },
-            {
-              id: `mc-${i}-2`,
-              title: `Task ${i * 2 + 2}`,
-              badges: [{ label: 'Active', variant: 'secondary' as const }],
-            },
-          ]
-        : i % 3 === 1
-          ? [
-              {
-                id: `mc-${i}-1`,
-                title: `Task ${i * 2 + 1}`,
-                badges: [{ label: 'Review', variant: 'outline' as const }],
-              },
-            ]
-          : [],
-    })),
-    className: 'w-full',
-  } as any,
-};

package/src/ObjectKanban.msw.test.tsx

@@ -1,95 +0,0 @@
-import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { ObjectKanban } from './ObjectKanban';
-import { ObjectStackAdapter } from '@object-ui/data-objectstack';
-import { setupServer } from 'msw/node';
-import { http, HttpResponse } from 'msw';
-import React from 'react';
-
-// Register layout components (if needed by cards)
-// registerLayout();
-
-const BASE_URL = 'http://localhost';
-
-// --- Mock Data ---
-
-const mockTasks = {
-  value: [
-    { id: '1', title: 'Task 1', status: 'todo', description: 'Description 1' },
-    { id: '2', title: 'Task 2', status: 'done', description: 'Description 2' },
-    { id: '3', title: 'Task 3', status: 'todo', description: 'Description 3' }
-  ]
-};
-
-// --- MSW Setup ---
-
-const handlers = [
-  // OPTIONS handler for CORS preflight checks
-  http.options('*', () => {
-    return new HttpResponse(null, { status: 200 });
-  }),
-
-  // Health check / discovery
-  http.get(`${BASE_URL}/api/v1`, () => {
-    return HttpResponse.json({ status: 'ok', version: '1.0.0' });
-  }),
-
-  http.get(`${BASE_URL}/api/v1/discovery`, () => {
-    return HttpResponse.json({ status: 'ok', version: '1.0.0' });
-  }),
-
-  // Data Query: GET /api/v1/data/tasks
-  http.get(`${BASE_URL}/api/v1/data/tasks`, () => {
-    return HttpResponse.json(mockTasks);
-  })
-];
-
-const server = setupServer(...handlers);
-
-// --- Test Suite ---
-
-describe('ObjectKanban with MSW', () => {
-  if (!process.env.OBJECTSTACK_API_URL) {
-    beforeAll(() => server.listen());
-    afterEach(() => server.resetHandlers());
-    afterAll(() => server.close());
-  }
-
-  const dataSource = new ObjectStackAdapter({
-    baseUrl: BASE_URL,
-  });
-
-  it('fetches tasks and renders them in columns based on groupBy', async () => {
-    render(
-      <ObjectKanban
-        schema={{
-          type: 'kanban',
-          objectName: 'tasks',
-          groupBy: 'status',
-          columns: [
-            { id: 'todo', title: 'To Do', cards: [] },
-            { id: 'done', title: 'Done', cards: [] }
-          ]
-        }}
-        dataSource={dataSource}
-      />
-    );
-
-    // Initial state might show Skeleton, wait for data
-    await waitFor(() => {
-        expect(screen.getByText('Task 1')).toBeInTheDocument();
-    }, { timeout: 10000 });
-
-    // Check classification
-    // Task 1 (todo) and Task 3 (todo) should be in To Do column.
-    // Task 2 (done) should be in Done column.
-    
-    // We can verify "Task 1" is present.
-    expect(screen.getByText('Task 2')).toBeInTheDocument();
-    expect(screen.getByText('Task 3')).toBeInTheDocument();
-    
-    // Check descriptions
-    expect(screen.getByText('Description 1')).toBeInTheDocument();
-  });
-});

package/src/ObjectKanban.stories.tsx

@@ -1,152 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '@object-ui/react';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Plugins/ObjectKanban',
-  component: SchemaRenderer,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } },
-  },
-} satisfies Meta<any>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
-
-export const Default: Story = {
-  render: renderStory,
-  args: {
-    type: 'kanban',
-    columns: [
-      {
-        id: 'todo',
-        title: 'To Do',
-        cards: [
-          {
-            id: 'card-1',
-            title: 'Design homepage',
-            description: 'Create wireframes and mockups',
-            badges: [{ label: 'Design', variant: 'default' }],
-          },
-          {
-            id: 'card-2',
-            title: 'Setup CI pipeline',
-            description: 'Configure GitHub Actions',
-            badges: [{ label: 'DevOps', variant: 'secondary' }],
-          },
-        ],
-      },
-      {
-        id: 'in-progress',
-        title: 'In Progress',
-        limit: 3,
-        cards: [
-          {
-            id: 'card-3',
-            title: 'Implement auth',
-            description: 'JWT-based authentication flow',
-            badges: [
-              { label: 'Feature', variant: 'default' },
-              { label: 'High Priority', variant: 'destructive' },
-            ],
-          },
-        ],
-      },
-      {
-        id: 'done',
-        title: 'Done',
-        cards: [
-          {
-            id: 'card-4',
-            title: 'Project scaffolding',
-            description: 'Initial project setup completed',
-            badges: [{ label: 'Completed', variant: 'outline' }],
-          },
-        ],
-      },
-    ],
-    className: 'w-full',
-  } as any,
-};
-
-export const SprintBoard: Story = {
-  render: renderStory,
-  args: {
-    type: 'kanban',
-    columns: [
-      {
-        id: 'backlog',
-        title: 'Backlog',
-        cards: [
-          { id: 's-1', title: 'Refactor API layer', description: 'Improve error handling', badges: [{ label: 'Tech Debt', variant: 'secondary' }] },
-          { id: 's-2', title: 'Add unit tests', description: 'Increase coverage to 80%', badges: [{ label: 'Testing', variant: 'default' }] },
-        ],
-      },
-      {
-        id: 'in-progress',
-        title: 'In Progress',
-        limit: 2,
-        cards: [
-          { id: 's-3', title: 'User dashboard', description: 'Build analytics dashboard', badges: [{ label: 'Feature', variant: 'default' }, { label: 'P1', variant: 'destructive' }] },
-        ],
-      },
-      {
-        id: 'review',
-        title: 'In Review',
-        cards: [
-          { id: 's-4', title: 'Search functionality', description: 'Full-text search implementation', badges: [{ label: 'Feature', variant: 'default' }] },
-        ],
-      },
-      {
-        id: 'done',
-        title: 'Done',
-        cards: [
-          { id: 's-5', title: 'Login page', badges: [{ label: 'Done', variant: 'outline' }] },
-          { id: 's-6', title: 'Database schema', badges: [{ label: 'Done', variant: 'outline' }] },
-        ],
-      },
-    ],
-    className: 'w-full',
-  } as any,
-};
-
-export const WithColumnLimits: Story = {
-  render: renderStory,
-  args: {
-    type: 'kanban',
-    columns: [
-      {
-        id: 'todo',
-        title: 'To Do',
-        cards: [
-          { id: 'l-1', title: 'Task A', badges: [{ label: 'P1', variant: 'destructive' }] },
-          { id: 'l-2', title: 'Task B', badges: [{ label: 'P2', variant: 'default' }] },
-        ],
-      },
-      {
-        id: 'wip',
-        title: 'WIP (Over Limit)',
-        limit: 2,
-        cards: [
-          { id: 'l-3', title: 'Task C', description: 'Almost done' },
-          { id: 'l-4', title: 'Task D', description: 'In review' },
-          { id: 'l-5', title: 'Task E', description: 'Blocked', badges: [{ label: 'Blocked', variant: 'destructive' }] },
-        ],
-      },
-      {
-        id: 'done',
-        title: 'Done',
-        cards: [
-          { id: 'l-6', title: 'Task F', badges: [{ label: 'Completed', variant: 'outline' }] },
-        ],
-      },
-    ],
-    className: 'w-full',
-  } as any,
-};

package/src/ObjectKanban.tsx

@@ -1,276 +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, { useEffect, useState, useMemo } from 'react';
-import type { DataSource } from '@object-ui/types';
-import { useDataScope, useNavigationOverlay } from '@object-ui/react';
-import { NavigationOverlay } from '@object-ui/components';
-import { extractRecords, buildExpandFields } from '@object-ui/core';
-import { KanbanRenderer } from './index';
-import { KanbanSchema } from './types';
-
-export interface ObjectKanbanProps {
-  schema: KanbanSchema;
-  dataSource?: DataSource;
-  className?: string; // Allow override
-  /** Pre-fetched records passed by a parent (e.g. ListView). When provided, skips internal data fetching. */
-  data?: any[];
-  /** Loading state propagated from a parent. Respected only when `data` is also provided. */
-  loading?: boolean;
-  onRowClick?: (record: any) => void;
-  onCardClick?: (record: any) => void;
-}
-
-export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
-  schema,
-  dataSource,
-  className,
-  data: externalData,
-  loading: externalLoading,
-  onRowClick,
-  onCardClick,
-  ...props
-}) => {
-  // When a parent (e.g. ListView) pre-fetches data and passes it via the `data` prop,
-  // we must not trigger a second fetch. Detect external data by checking if externalData
-  // is an array (undefined when not provided by parent).
-  const hasExternalData = Array.isArray(externalData);
-
-  const [fetchedData, setFetchedData] = useState<any[]>([]);
-  const [objectDef, setObjectDef] = useState<any>(null);
-  // loading state
-  const [loading, setLoading] = useState(hasExternalData ? (externalLoading ?? false) : false);
-  const [error, setError] = useState<Error | null>(null);
-  const [refreshKey, setRefreshKey] = useState(0);
-
-  // Resolve bound data if 'bind' property exists
-  const boundData = useDataScope(schema.bind);
-
-  // P2: Auto-subscribe to DataSource mutation events (standalone mode only).
-  // When rendered as a child of ListView, data is managed externally and this is skipped.
-  useEffect(() => {
-    if (hasExternalData) return; // Parent handles refresh
-    if (!dataSource?.onMutation || !schema.objectName) return;
-    const unsub = dataSource.onMutation((event: any) => {
-      if (event.resource === schema.objectName) {
-        setRefreshKey(k => k + 1);
-      }
-    });
-    return unsub;
-  }, [dataSource, schema.objectName, hasExternalData]);
-
-  // Sync external data changes from parent (e.g. ListView re-fetches after filter change)
-  useEffect(() => {
-    if (hasExternalData && externalLoading !== undefined) {
-      setLoading(externalLoading);
-    }
-  }, [externalLoading, hasExternalData]);
-
-  // Fetch object definition for metadata (labels, options)
-  useEffect(() => {
-    let isMounted = true;
-    const fetchMeta = async () => {
-        if (!dataSource || !schema.objectName) return;
-        try {
-            const def = await dataSource.getObjectSchema(schema.objectName);
-            if (isMounted) setObjectDef(def);
-        } catch (e) {
-            console.warn("Failed to fetch object def", e);
-        }
-    };
-    fetchMeta();
-    return () => { isMounted = false; };
-  }, [schema.objectName, dataSource]);
-
-  useEffect(() => {
-    // Skip internal fetch when data is managed by a parent component
-    if (hasExternalData) return;
-
-    let isMounted = true;
-    const fetchData = async () => {
-        if (!dataSource || typeof dataSource.find !== 'function' || !schema.objectName) return;
-        if (isMounted) setLoading(true);
-        try {
-            // Auto-inject $expand for lookup/master_detail fields
-            const expand = buildExpandFields(objectDef?.fields);
-            const results = await dataSource.find(schema.objectName, {
-                options: { $top: 100 },
-                $filter: schema.filter,
-                ...(expand.length > 0 ? { $expand: expand } : {}),
-            });
-            
-            // Handle { value: [] } OData shape or { data: [] } shape or direct array
-            const data = extractRecords(results);
-
-            if (isMounted) {
-                setFetchedData(data);
-            }
-        } catch (e) {
-            console.error('[ObjectKanban] Fetch error:', e);
-            if (isMounted) setError(e as Error);
-        } finally {
-            if (isMounted) setLoading(false);
-        }
-    };
-
-    // Trigger fetch if we have an objectName AND verify no inline/bound data overrides it
-    if (schema.objectName && !boundData && !schema.data) {
-        fetchData();
-    }
-    return () => { isMounted = false; };
-  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, hasExternalData, objectDef, refreshKey]);
-
-  // Determine which data to use: external -> bound -> inline -> fetched
-  const rawData = (hasExternalData ? externalData : undefined) || boundData || schema.data || fetchedData;
-
-  // Enhance data with title mapping and ensure IDs
-  const effectiveData = useMemo(() => {
-    if (!Array.isArray(rawData)) return [];
-    
-    // Support cardTitle property from schema (passed by ObjectView)
-    // Fallback to legacy titleField for backwards compatibility
-    let titleField = schema.cardTitle || (schema as any).titleField;
-
-    // Fallback: Try to infer from object definition
-    if (!titleField && objectDef) {
-       // 1. Check for titleFormat like "{subject}" first (Higher priority for Cards)
-       if (objectDef.titleFormat) {
-           const match = /\{(.+?)\}/.exec(objectDef.titleFormat);
-           if (match) titleField = match[1];
-       }
-       // 2. Check for standard NAME_FIELD_KEY
-       if (!titleField && objectDef.NAME_FIELD_KEY) {
-           titleField = objectDef.NAME_FIELD_KEY;
-       } 
-    }
-
-    // Common title field names to try as fallback
-    const TITLE_FALLBACK_FIELDS = ['name', 'title', 'subject', 'label', 'display_name'];
-
-    return rawData.map(item => {
-      // If a specific title field was configured, try it first
-      let resolvedTitle = titleField ? item[titleField] : undefined;
-
-      // Fallback: try common field names
-      if (!resolvedTitle) {
-        for (const field of TITLE_FALLBACK_FIELDS) {
-          if (item[field]) {
-            resolvedTitle = item[field];
-            break;
-          }
-        }
-      }
-
-      return {
-        ...item,
-        // Ensure id exists
-        id: item.id || item._id,
-        // Map title
-        title: resolvedTitle || 'Untitled',
-      };
-    });
-  }, [rawData, schema, objectDef]);
-
-  // Generate columns if missing but groupBy is present
-  const effectiveColumns = useMemo(() => {
-    // If columns exist, returns them (normalized)
-    if (schema.columns && schema.columns.length > 0) {
-        // If columns is array of strings, normalize to objects
-        if (typeof schema.columns[0] === 'string') {
-             // If grouping is active, assume string columns are meant for data display, not lanes
-             if (!schema.groupBy) {
-                 return (schema.columns as unknown as string[]).map(val => ({
-                     id: val,
-                     title: val
-                 }));
-             }
-        } else {
-             return schema.columns;
-        }
-    }
-
-    // Try to get options from metadata
-    if (schema.groupBy && objectDef?.fields?.[schema.groupBy]?.options) {
-        return objectDef.fields[schema.groupBy].options.map((opt: any) => ({
-            id: opt.value,
-            title: opt.label
-        }));
-    }
-
-    // If no columns, but we have groupBy and data, generate from data
-    if (schema.groupBy && effectiveData.length > 0) {
-        const groups = new Set(effectiveData.map(item => item[schema.groupBy!]));
-        return Array.from(groups).map(g => ({
-            id: String(g),
-            title: String(g)
-        }));
-    }
-
-    return [];
-  }, [schema.columns, schema.groupBy, effectiveData, objectDef]);
-
-  // Clone schema to inject data and className
-  // Use grouping.fields[0].field as swimlaneField fallback when no explicit swimlaneField
-  const effectiveSwimlaneField = schema.swimlaneField
-    || (schema.grouping?.fields?.[0]?.field);
-
-  const effectiveSchema = {
-      ...schema,
-      data: effectiveData,
-      columns: effectiveColumns,
-      className: className || schema.className,
-      ...(effectiveSwimlaneField ? { swimlaneField: effectiveSwimlaneField } : {}),
-  };
-
-  const navigation = useNavigationOverlay({
-    navigation: (schema as any).navigation,
-    objectName: schema.objectName,
-    onRowClick: onRowClick ?? onCardClick,
-  });
-
-  if (error) {
-      return (
-        <div className="p-4 border border-destructive/50 rounded bg-destructive/10 text-destructive">
-            Error loading kanban data: {error.message}
-        </div>
-      );
-  }
-
-  // Pass through to the renderer
-  const detailTitle = schema.objectName
-    ? `${schema.objectName.charAt(0).toUpperCase() + schema.objectName.slice(1).replace(/_/g, ' ')} Detail`
-    : 'Card Details';
-
-  return (
-    <>
-      <KanbanRenderer schema={{
-        ...effectiveSchema,
-        onCardClick: (card: any) => {
-          navigation.handleClick(card);
-          onCardClick?.(card);
-        },
-      }} />
-      {navigation.isOverlay && (
-        <NavigationOverlay {...navigation} title={detailTitle}>
-          {(record) => (
-            <div className="space-y-3">
-              {Object.entries(record).map(([key, value]) => (
-                <div key={key} className="flex flex-col">
-                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-                    {key.replace(/_/g, ' ')}
-                  </span>
-                  <span className="text-sm">{String(value ?? '—')}</span>
-                </div>
-              ))}
-            </div>
-          )}
-        </NavigationOverlay>
-      )}
-    </>
-  );
-}