@object-ui/plugin-grid 3.3.0 → 3.3.2

package/src/ObjectGrid.EdgeCases.stories.tsx

@@ -1,147 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
-import type { BaseSchema } from '@object-ui/types';
-import { createStorybookDataSource } from '@storybook-config/datasource';
-
-const meta = {
-  title: 'Plugins/ObjectGrid/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 dataSource = createStorybookDataSource();
-
-const renderStory = (args: any) => (
-  <SchemaRendererProvider dataSource={dataSource}>
-    <SchemaRenderer schema={args as unknown as BaseSchema} />
-  </SchemaRendererProvider>
-);
-
-// ── Empty Data ────────────────────────────────────────────────
-
-export const EmptyData: Story = {
-  name: 'Empty – No Rows',
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Employee',
-    columns: [
-      { field: 'id', header: 'ID', width: 80 },
-      { field: 'name', header: 'Name' },
-      { field: 'email', header: 'Email' },
-      { field: 'department', header: 'Department' },
-    ],
-    data: [],
-    pagination: false,
-    className: 'w-full',
-  } as any,
-};
-
-// ── Single Row ────────────────────────────────────────────────
-
-export const SingleRow: Story = {
-  name: 'Single Row',
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Employee',
-    columns: [
-      { field: 'id', header: 'ID', width: 80 },
-      { field: 'name', header: 'Name', sortable: true },
-      { field: 'email', header: 'Email' },
-      { field: 'department', header: 'Department' },
-    ],
-    data: [
-      { id: 1, name: 'Alice Johnson', email: 'alice@example.com', department: 'Engineering' },
-    ],
-    pagination: false,
-    className: 'w-full',
-  } as any,
-};
-
-// ── Many Columns ──────────────────────────────────────────────
-
-export const ManyColumns: Story = {
-  name: 'Many Columns (15+)',
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'WideTable',
-    columns: Array.from({ length: 18 }, (_, i) => ({
-      field: `col${i + 1}`,
-      header: `Column ${i + 1}`,
-      sortable: i < 5,
-    })),
-    data: Array.from({ length: 5 }, (_, row) => {
-      const record: Record<string, any> = {};
-      for (let c = 1; c <= 18; c++) {
-        record[`col${c}`] = `R${row + 1}-C${c}`;
-      }
-      return record;
-    }),
-    pagination: false,
-    className: 'w-full',
-  } as any,
-};
-
-// ── Very Long Cell Values ─────────────────────────────────────
-
-const LONG_VALUE =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
-
-export const LongCellValues: Story = {
-  name: 'Very Long Cell Values',
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Article',
-    columns: [
-      { field: 'id', header: 'ID', width: 60 },
-      { field: 'title', header: 'Title' },
-      { field: 'abstract', header: 'Abstract' },
-      { field: 'author', header: 'Author' },
-    ],
-    data: [
-      { id: 1, title: LONG_VALUE, abstract: LONG_VALUE + ' ' + LONG_VALUE, author: 'Dr. Extremely Long Author Name The Third Junior' },
-      { id: 2, title: 'Short', abstract: 'Brief.', author: 'Bob' },
-      { id: 3, title: LONG_VALUE, abstract: LONG_VALUE, author: LONG_VALUE },
-    ],
-    pagination: false,
-    className: 'w-full',
-  } as any,
-};
-
-// ── Null / Undefined Values ───────────────────────────────────
-
-export const NullAndUndefinedValues: Story = {
-  name: 'Null / Undefined Cell Values',
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Sparse',
-    columns: [
-      { field: 'id', header: 'ID', width: 60 },
-      { field: 'name', header: 'Name' },
-      { field: 'email', header: 'Email' },
-      { field: 'phone', header: 'Phone' },
-      { field: 'notes', header: 'Notes' },
-    ],
-    data: [
-      { id: 1, name: 'Alice', email: null, phone: undefined, notes: '' },
-      { id: 2, name: null, email: 'bob@example.com', phone: null, notes: undefined },
-      { id: 3, name: undefined, email: undefined, phone: undefined, notes: null },
-      { id: 4, name: 'Dave', email: 'dave@example.com', phone: '+1-555-0100', notes: 'Complete record' },
-    ],
-    pagination: false,
-    className: 'w-full',
-  } as any,
-};

package/src/ObjectGrid.msw.test.tsx

@@ -1,130 +0,0 @@
-import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
-import { render, screen, waitFor, within } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { ObjectGrid } from './ObjectGrid';
-import { ObjectStackAdapter } from '@object-ui/data-objectstack';
-import { setupServer } from 'msw/node';
-import { http, HttpResponse } from 'msw';
-import { registerAllFields } from '@object-ui/fields';
-import React from 'react';
-import { ContactObject } from '../../../examples/crm/src/objects/contact.object';
-
-registerAllFields();
-
-const BASE_URL = process.env.OBJECTSTACK_API_URL || 'http://localhost';
-
-// --- Mock Data ---
-
-const mockSchema = ContactObject;
-
-const mockData = {
-  value: [
-    { id: '1', name: 'John Doe', email: 'john@example.com', company: 'Acme Inc' },
-    { id: '2', name: 'Jane Smith', email: 'jane@test.com', company: 'Globex' },
-    { id: '3', name: 'Bob Wilson', email: 'bob@test.com', company: 'Acme Inc' }
-  ],
-  count: 3,
-  '@odata.count': 3
-};
-
-// --- MSW Setup ---
-
-const handlers = [
-  // .well-known discovery endpoint (used by client.connect())
-  http.get(`${BASE_URL}/.well-known/objectstack`, () => {
-    return HttpResponse.json({
-      name: 'ObjectStack API',
-      version: '1.0',
-      endpoints: {
-        data: '/api/v1/data',
-        metadata: '/api/v1/meta'
-      },
-      capabilities: {
-        graphql: false,
-        search: false,
-        websockets: false,
-        files: true,
-        analytics: false,
-        hub: false
-      }
-    });
-  }),
-
-  // OPTIONS handler for CORS preflight
-  http.options(`${BASE_URL}/*`, () => {
-    return new HttpResponse(null, {
-      status: 200,
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'GET,HEAD,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH',
-        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-      },
-    });
-  }),
-  
-  // Health check / Connection check
-  http.get(`${BASE_URL}/api/v1`, () => {
-    return HttpResponse.json({ status: 'ok', version: '1.0.0' });
-  }),
-
-  // Schema: /api/v1/metadata/object/:name and /api/v1/meta/object/:name (client uses /meta)
-  http.get(`${BASE_URL}/api/v1/metadata/object/contact`, () => {
-    return HttpResponse.json(mockSchema);
-  }),
-  http.get(`${BASE_URL}/api/v1/meta/object/contact`, () => {
-    return HttpResponse.json(mockSchema);
-  }),
-
-  // Data Query: /api/v1/data/contact
-  http.get(`${BASE_URL}/api/v1/data/contact`, () => {
-    return HttpResponse.json(mockData);
-  })
-];
-
-const server = setupServer(...handlers);
-
-// --- Test Suite ---
-
-describe('ObjectGrid with ObjectStack/MSW', () => {
-    // Only start MSW if we are NOT using a real server
-    if (!process.env.OBJECTSTACK_API_URL) {
-        beforeAll(() => server.listen());
-        afterEach(() => server.resetHandlers());
-        afterAll(() => server.close());
-    }
-
-    const dataSource = new ObjectStackAdapter({
-        baseUrl: BASE_URL,
-    });
-
-    it('loads schema and data rows', async () => {
-        render(
-            <ObjectGrid
-                schema={{
-                    type: 'object-grid',
-                    objectName: 'contact',
-                    columns: ['name', 'email', 'company'] // Explicit columns or auto-derived
-                }}
-                dataSource={dataSource}
-            />
-        );
-
-        // Verify Column Headers (from schema or props)
-        await waitFor(() => {
-            // Changed from 'Full Name' to 'Name' to match CRM example schema
-            expect(screen.getByText('Name')).toBeInTheDocument();
-        });
-        expect(screen.getByText('Email')).toBeInTheDocument();
-        expect(screen.getByText('Company')).toBeInTheDocument();
-
-        // Verify Data Rows
-        await waitFor(() => {
-            expect(screen.getByText('John Doe')).toBeInTheDocument();
-        });
-        expect(screen.getByText('jane@test.com')).toBeInTheDocument();
-        expect(screen.getByText('Globex')).toBeInTheDocument();
-
-        // Check Row Count (if grid displays it)
-        // expect(screen.getByText(/3 records/i)).toBeInTheDocument();
-    });
-});

package/src/ObjectGrid.stories.tsx

@@ -1,139 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
-import type { BaseSchema } from '@object-ui/types';
-import { createStorybookDataSource } from '@storybook-config/datasource';
-
-const meta = {
-  title: 'Plugins/ObjectGrid',
-  component: SchemaRenderer,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } },
-  },
-} satisfies Meta<any>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const dataSource = createStorybookDataSource();
-
-const renderStory = (args: any) => (
-  <SchemaRendererProvider dataSource={dataSource}>
-    <SchemaRenderer schema={args as unknown as BaseSchema} />
-  </SchemaRendererProvider>
-);
-
-export const Default: Story = {
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Employee',
-    columns: [
-      { field: 'id', header: 'ID', width: 80 },
-      { field: 'name', header: 'Name', sortable: true, filterable: true },
-      { field: 'email', header: 'Email', sortable: true, filterable: true },
-      { field: 'department', header: 'Department', sortable: true },
-      { field: 'status', header: 'Status', sortable: true },
-    ],
-    data: [
-      { id: 1, name: 'Alice Johnson', email: 'alice@example.com', department: 'Engineering', status: 'Active' },
-      { id: 2, name: 'Bob Smith', email: 'bob@example.com', department: 'Marketing', status: 'Active' },
-      { id: 3, name: 'Carol White', email: 'carol@example.com', department: 'Sales', status: 'Inactive' },
-      { id: 4, name: 'Dave Brown', email: 'dave@example.com', department: 'Engineering', status: 'Active' },
-      { id: 5, name: 'Eve Davis', email: 'eve@example.com', department: 'HR', status: 'Active' },
-    ],
-    pagination: true,
-    pageSize: 10,
-    className: 'w-full',
-  } as any,
-};
-
-export const WithRowActions: Story = {
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Task',
-    columns: [
-      { field: 'id', header: 'ID', width: 80 },
-      { field: 'title', header: 'Title', sortable: true, filterable: true },
-      { field: 'assignee', header: 'Assignee', sortable: true },
-      { field: 'priority', header: 'Priority', sortable: true },
-      { field: 'status', header: 'Status', sortable: true },
-    ],
-    actions: [
-      { label: 'View', action: 'view' },
-      { label: 'Edit', action: 'edit' },
-      { label: 'Delete', action: 'delete', variant: 'destructive' },
-    ],
-    data: [
-      { id: 1, title: 'Fix login bug', assignee: 'Alice', priority: 'High', status: 'In Progress' },
-      { id: 2, title: 'Add dark mode', assignee: 'Bob', priority: 'Medium', status: 'To Do' },
-      { id: 3, title: 'Update docs', assignee: 'Carol', priority: 'Low', status: 'Done' },
-    ],
-    pagination: true,
-    pageSize: 10,
-    className: 'w-full',
-  } as any,
-};
-
-/**
- * CRM Deals Pipeline — demonstrates professional data formatting:
- * - Currency with thousand separators (Amount column, right-aligned)
- * - Percentage with progress bar (Probability column, right-aligned)
- * - Formatted dates (Close Date column)
- * - Colored badges for stage/status (Stage column)
- * - Bold clickable name as primary link (Name column)
- * - Empty value placeholder (Account column)
- */
-export const CRMDeals: Story = {
-  name: 'CRM Deals Pipeline',
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Deal',
-    columns: [
-      { field: 'name', label: 'Name', link: true, sortable: true },
-      { field: 'account', label: 'Account' },
-      { field: 'stage', label: 'Stage', type: 'select', sortable: true },
-      { field: 'amount', label: 'Amount', type: 'currency', sortable: true },
-      { field: 'probability', label: 'Probability', type: 'percent', sortable: true },
-      { field: 'close_date', label: 'Close Date', type: 'date', sortable: true },
-    ],
-    data: [
-      { id: '1', name: 'ObjectStack Enterprise License', account: '', stage: 'Closed Won', amount: 150000, probability: 100, close_date: '2024-01-15T00:00:00.000Z' },
-      { id: '2', name: 'Cloud Migration Project', account: 'Acme Corp', stage: 'Negotiation', amount: 85000, probability: 60, close_date: '2024-03-20T00:00:00.000Z' },
-      { id: '3', name: 'Annual Support Renewal', account: '', stage: 'Proposal', amount: 42000, probability: 80, close_date: '2024-02-28T00:00:00.000Z' },
-      { id: '4', name: 'Custom Integration Development', account: 'TechFlow Inc', stage: 'Qualification', amount: 230000, probability: 30, close_date: '2024-06-15T00:00:00.000Z' },
-      { id: '5', name: 'Data Analytics Platform', account: '', stage: 'Closed Lost', amount: 95000, probability: 0, close_date: '2024-01-10T00:00:00.000Z' },
-      { id: '6', name: 'Security Audit Contract', account: 'SecureNet', stage: 'Closed Won', amount: 67500, probability: 100, close_date: '2024-02-01T00:00:00.000Z' },
-      { id: '7', name: 'Mobile App Development', account: '', stage: 'Discovery', amount: 180000, probability: 15, close_date: '2024-08-30T00:00:00.000Z' },
-    ],
-    pagination: false,
-    className: 'w-full',
-  } as any,
-};
-
-export const EditableGrid: Story = {
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Product',
-    columns: [
-      { field: 'sku', header: 'SKU', width: 100, editable: false },
-      { field: 'name', header: 'Name', sortable: true },
-      { field: 'price', header: 'Price', sortable: true },
-      { field: 'stock', header: 'Stock', sortable: true },
-    ],
-    data: [
-      { sku: 'SKU-001', name: 'Widget A', price: '$19.99', stock: 50 },
-      { sku: 'SKU-002', name: 'Widget B', price: '$29.99', stock: 30 },
-      { sku: 'SKU-003', name: 'Widget C', price: '$9.99', stock: 120 },
-    ],
-    editable: true,
-    pagination: false,
-    className: 'w-full',
-  } as any,
-};