@object-ui/plugin-view 0.5.0 → 2.0.0

package/src/__tests__/SortUI.test.tsx

@@ -0,0 +1,380 @@
+/**
+ * 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 { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { SortUI } from '../SortUI';
+import type { SortUISchema } from '@object-ui/types';
+
+// ---------------------------------------------------------------------------
+// Mock @object-ui/components – provide lightweight stand-ins for Shadcn
+// primitives so tests render without a full component tree.
+// ---------------------------------------------------------------------------
+vi.mock('@object-ui/components', () => {
+  const cn = (...args: any[]) => args.filter(Boolean).join(' ');
+
+  const Button = ({ children, onClick, variant, ...rest }: any) => (
+    <button onClick={onClick} data-variant={variant} {...rest}>
+      {children}
+    </button>
+  );
+
+  const Select = ({ children, value, onValueChange }: any) => (
+    <div data-testid="select-root" data-value={value}>
+      {typeof children === 'function'
+        ? children({ value, onValueChange })
+        : children}
+    </div>
+  );
+
+  const SelectTrigger = ({ children, className }: any) => (
+    <button data-testid="select-trigger" className={className}>
+      {children}
+    </button>
+  );
+
+  const SelectValue = ({ placeholder }: any) => (
+    <span data-testid="select-value">{placeholder}</span>
+  );
+
+  const SelectContent = ({ children }: any) => (
+    <div data-testid="select-content">{children}</div>
+  );
+
+  const SelectItem = ({ children, value }: any) => (
+    <div data-testid="select-item" data-value={value}>
+      {children}
+    </div>
+  );
+
+  const SortBuilder = ({ fields, value, onChange }: any) => (
+    <div data-testid="sort-builder" data-fields={JSON.stringify(fields)} data-value={JSON.stringify(value)}>
+      <button
+        data-testid="sort-builder-change"
+        onClick={() =>
+          onChange?.([
+            { id: 'date-desc', field: 'date', order: 'desc' },
+          ])
+        }
+      >
+        Change Sort
+      </button>
+    </div>
+  );
+
+  return { cn, Button, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SortBuilder };
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const baseFields: SortUISchema['fields'] = [
+  { field: 'name', label: 'Name' },
+  { field: 'date', label: 'Date' },
+];
+
+const makeSchema = (overrides: Partial<SortUISchema> = {}): SortUISchema => ({
+  type: 'sort-ui',
+  fields: baseFields,
+  ...overrides,
+});
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('SortUI', () => {
+  // -------------------------------------------------------------------------
+  // 1. Renders with default (buttons) variant
+  // -------------------------------------------------------------------------
+  describe('buttons variant', () => {
+    it('renders sort buttons for each field', () => {
+      render(<SortUI schema={makeSchema({ variant: 'buttons' })} />);
+
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('Date')).toBeInTheDocument();
+    });
+
+    it('renders all fields as outline buttons when no sort is active', () => {
+      render(<SortUI schema={makeSchema({ variant: 'buttons' })} />);
+
+      const buttons = screen.getAllByRole('button');
+      expect(buttons).toHaveLength(2);
+      buttons.forEach(btn => {
+        expect(btn).toHaveAttribute('data-variant', 'outline');
+      });
+    });
+
+    it('highlights active sort field with secondary variant', () => {
+      render(
+        <SortUI
+          schema={makeSchema({
+            variant: 'buttons',
+            sort: [{ field: 'name', direction: 'asc' }],
+          })}
+        />,
+      );
+
+      const nameBtn = screen.getByText('Name').closest('button')!;
+      expect(nameBtn).toHaveAttribute('data-variant', 'secondary');
+
+      const dateBtn = screen.getByText('Date').closest('button')!;
+      expect(dateBtn).toHaveAttribute('data-variant', 'outline');
+    });
+
+    it('cycles through asc → desc → removed on repeated clicks', () => {
+      const onChange = vi.fn();
+      render(
+        <SortUI schema={makeSchema({ variant: 'buttons' })} onChange={onChange} />,
+      );
+
+      const nameBtn = screen.getByText('Name').closest('button')!;
+
+      // First click: activate asc
+      fireEvent.click(nameBtn);
+      expect(onChange).toHaveBeenCalledWith([{ field: 'name', direction: 'asc' }]);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 2. Renders with dropdown variant
+  // -------------------------------------------------------------------------
+  describe('dropdown variant', () => {
+    it('renders select elements for field and direction', () => {
+      render(<SortUI schema={makeSchema({ variant: 'dropdown' })} />);
+
+      const selectRoots = screen.getAllByTestId('select-root');
+      expect(selectRoots.length).toBe(2);
+    });
+
+    it('renders field options inside select', () => {
+      render(<SortUI schema={makeSchema({ variant: 'dropdown' })} />);
+
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('Date')).toBeInTheDocument();
+    });
+
+    it('renders direction options (Ascending / Descending)', () => {
+      render(<SortUI schema={makeSchema({ variant: 'dropdown' })} />);
+
+      expect(screen.getByText('Ascending')).toBeInTheDocument();
+      expect(screen.getByText('Descending')).toBeInTheDocument();
+    });
+
+    it('defaults to dropdown when variant is omitted', () => {
+      render(<SortUI schema={makeSchema()} />);
+
+      // dropdown renders select-root elements, not buttons
+      const selectRoots = screen.getAllByTestId('select-root');
+      expect(selectRoots.length).toBe(2);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 3. Renders with builder variant (multiple = true)
+  // -------------------------------------------------------------------------
+  describe('builder variant (multiple)', () => {
+    it('renders SortBuilder when multiple is true', () => {
+      render(
+        <SortUI
+          schema={makeSchema({ multiple: true })}
+        />,
+      );
+
+      expect(screen.getByTestId('sort-builder')).toBeInTheDocument();
+    });
+
+    it('passes fields and value to SortBuilder', () => {
+      render(
+        <SortUI
+          schema={makeSchema({
+            multiple: true,
+            sort: [{ field: 'name', direction: 'asc' }],
+          })}
+        />,
+      );
+
+      const builder = screen.getByTestId('sort-builder');
+      const fields = JSON.parse(builder.getAttribute('data-fields')!);
+      expect(fields).toEqual([
+        { value: 'name', label: 'Name' },
+        { value: 'date', label: 'Date' },
+      ]);
+
+      const value = JSON.parse(builder.getAttribute('data-value')!);
+      expect(value).toEqual([
+        { id: 'name-asc', field: 'name', order: 'asc' },
+      ]);
+    });
+
+    it('calls onChange when SortBuilder triggers a change', () => {
+      const onChange = vi.fn();
+      render(
+        <SortUI
+          schema={makeSchema({ multiple: true })}
+          onChange={onChange}
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId('sort-builder-change'));
+      expect(onChange).toHaveBeenCalledWith([{ field: 'date', direction: 'desc' }]);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 4. Initial sort configuration from schema
+  // -------------------------------------------------------------------------
+  describe('initial sort from schema', () => {
+    it('initialises state from schema.sort in buttons variant', () => {
+      render(
+        <SortUI
+          schema={makeSchema({
+            variant: 'buttons',
+            sort: [{ field: 'date', direction: 'desc' }],
+          })}
+        />,
+      );
+
+      const dateBtn = screen.getByText('Date').closest('button')!;
+      expect(dateBtn).toHaveAttribute('data-variant', 'secondary');
+    });
+
+    it('renders without error when schema.sort is undefined', () => {
+      render(<SortUI schema={makeSchema({ variant: 'buttons' })} />);
+
+      const buttons = screen.getAllByRole('button');
+      expect(buttons).toHaveLength(2);
+    });
+
+    it('renders without error when schema.sort is empty', () => {
+      render(
+        <SortUI schema={makeSchema({ variant: 'buttons', sort: [] })} />,
+      );
+
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(btn => {
+        expect(btn).toHaveAttribute('data-variant', 'outline');
+      });
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 5. onChange callback
+  // -------------------------------------------------------------------------
+  describe('onChange callback', () => {
+    it('fires onChange when a button sort is toggled', () => {
+      const onChange = vi.fn();
+      render(
+        <SortUI
+          schema={makeSchema({ variant: 'buttons' })}
+          onChange={onChange}
+        />,
+      );
+
+      fireEvent.click(screen.getByText('Name').closest('button')!);
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith([{ field: 'name', direction: 'asc' }]);
+    });
+
+    it('dispatches custom window event when schema.onChange is set', () => {
+      const spy = vi.fn();
+      window.addEventListener('sort:changed', spy);
+
+      render(
+        <SortUI
+          schema={makeSchema({ variant: 'buttons', onChange: 'sort:changed' })}
+        />,
+      );
+
+      fireEvent.click(screen.getByText('Name').closest('button')!);
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      const detail = (spy.mock.calls[0][0] as CustomEvent).detail;
+      expect(detail).toEqual({ sort: [{ field: 'name', direction: 'asc' }] });
+
+      window.removeEventListener('sort:changed', spy);
+    });
+
+    it('replaces active sort when multiple is false (buttons)', () => {
+      const onChange = vi.fn();
+      render(
+        <SortUI
+          schema={makeSchema({
+            variant: 'buttons',
+            sort: [{ field: 'name', direction: 'asc' }],
+          })}
+          onChange={onChange}
+        />,
+      );
+
+      // Click a different field — should replace, not append
+      fireEvent.click(screen.getByText('Date').closest('button')!);
+      expect(onChange).toHaveBeenCalledWith([{ field: 'date', direction: 'asc' }]);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 6. Helper functions (toSortEntries / toSortItems) – tested indirectly
+  // -------------------------------------------------------------------------
+  describe('helper functions (toSortEntries / toSortItems)', () => {
+    it('toSortEntries: maps schema.sort to internal state shown via button variant', () => {
+      render(
+        <SortUI
+          schema={makeSchema({
+            variant: 'buttons',
+            sort: [
+              { field: 'name', direction: 'asc' },
+              { field: 'date', direction: 'desc' },
+            ],
+            multiple: true,
+          })}
+        />,
+      );
+
+      // Both fields should be highlighted since both are in the sort config
+      const nameBtn = screen.getByText('Name').closest('button')!;
+      const dateBtn = screen.getByText('Date').closest('button')!;
+      expect(nameBtn).toHaveAttribute('data-variant', 'secondary');
+      expect(dateBtn).toHaveAttribute('data-variant', 'secondary');
+    });
+
+    it('toSortItems: maps sort entries to SortBuilder items', () => {
+      render(
+        <SortUI
+          schema={makeSchema({
+            multiple: true,
+            sort: [
+              { field: 'name', direction: 'asc' },
+              { field: 'date', direction: 'desc' },
+            ],
+          })}
+        />,
+      );
+
+      const builder = screen.getByTestId('sort-builder');
+      const value = JSON.parse(builder.getAttribute('data-value')!);
+      expect(value).toEqual([
+        { id: 'name-asc', field: 'name', order: 'asc' },
+        { id: 'date-desc', field: 'date', order: 'desc' },
+      ]);
+    });
+
+    it('toSortEntries: returns empty array when sort is undefined', () => {
+      render(
+        <SortUI
+          schema={makeSchema({ variant: 'buttons' })}
+        />,
+      );
+
+      // No button should have secondary variant
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(btn => {
+        expect(btn).toHaveAttribute('data-variant', 'outline');
+      });
+    });
+  });
+});

package/src/__tests__/registration.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { ObjectView, ViewSwitcher, FilterUI, SortUI } from '../index';
+
+describe('Plugin View Registration', () => {
+  it('exports ObjectView component', () => {
+    expect(ObjectView).toBeDefined();
+    expect(typeof ObjectView).toBe('function');
+  });
+
+  it('exports ViewSwitcher component', () => {
+    expect(ViewSwitcher).toBeDefined();
+    expect(typeof ViewSwitcher).toBe('function');
+  });
+
+  it('exports FilterUI component', () => {
+    expect(FilterUI).toBeDefined();
+    expect(typeof FilterUI).toBe('function');
+  });
+
+  it('exports SortUI component', () => {
+    expect(SortUI).toBeDefined();
+    expect(typeof SortUI).toBe('function');
+  });
+});

package/src/index.tsx

@@ -6,24 +6,166 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
 import { ObjectView } from './ObjectView';
+import { ViewSwitcher } from './ViewSwitcher';
+import { FilterUI } from './FilterUI';
+import { SortUI } from './SortUI';
 
-export { ObjectView };
+export { ObjectView, ViewSwitcher, FilterUI, SortUI };
 export type { ObjectViewProps } from './ObjectView';
+export type { ViewSwitcherProps } from './ViewSwitcher';
+export type { FilterUIProps } from './FilterUI';
+export type { SortUIProps } from './SortUI';
+
+/**
+ * SchemaRendererContext is created by @object-ui/react.
+ * We import it dynamically to avoid a circular dependency.
+ * The context value provides { dataSource }.
+ * A fallback context is created so hooks are never called conditionally.
+ */
+const FallbackContext = React.createContext<any>(null);
+let SchemaRendererContext: React.Context<any> = FallbackContext;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const mod = require('@object-ui/react');
+  // The context is re-exported from @object-ui/react
+  if (mod.SchemaRendererContext) {
+    SchemaRendererContext = mod.SchemaRendererContext;
+  }
+} catch {
+  // @object-ui/react not available — registry-based dataSource only
+}
 
 // Register object-view component
 const ObjectViewRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  return <ObjectView schema={schema} dataSource={null as any} />;
+  // Resolve dataSource from SchemaRendererProvider context
+  const ctx = useContext(SchemaRendererContext);
+  const dataSource = ctx?.dataSource ?? null;
+
+  return <ObjectView schema={schema} dataSource={dataSource} />;
 };
 
 ComponentRegistry.register('object-view', ObjectViewRenderer, {
-  namespace: 'plugin-view'
+  namespace: 'plugin-view',
+  label: 'Object View',
+  category: 'view',
+  icon: 'LayoutDashboard',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'title', type: 'string', label: 'Title' },
+    { name: 'description', type: 'string', label: 'Description' },
+    { name: 'layout', type: 'enum', label: 'Form Layout', enum: ['drawer', 'modal', 'page'] },
+    { name: 'defaultViewType', type: 'enum', label: 'Default View Type', enum: ['grid', 'kanban', 'gallery', 'calendar', 'timeline', 'gantt', 'map'] },
+    { name: 'defaultListView', type: 'string', label: 'Default Named View' },
+    { name: 'showSearch', type: 'boolean', label: 'Show Search' },
+    { name: 'showFilters', type: 'boolean', label: 'Show Filters' },
+    { name: 'showCreate', type: 'boolean', label: 'Show Create Button' },
+    { name: 'showRefresh', type: 'boolean', label: 'Show Refresh Button' },
+    { name: 'showViewSwitcher', type: 'boolean', label: 'Show View Switcher' },
+    { name: 'listViews', type: 'object', label: 'Named List Views' },
+    { name: 'navigation', type: 'object', label: 'Navigation Config' },
+    { name: 'searchableFields', type: 'array', label: 'Searchable Fields' },
+    { name: 'filterableFields', type: 'array', label: 'Filterable Fields' },
+  ],
+  defaultProps: {
+    layout: 'drawer',
+    defaultViewType: 'grid',
+    showSearch: true,
+    showFilters: true,
+    showCreate: true,
+    showRefresh: true,
+    showViewSwitcher: true,
+  },
+});
+
+// Register alias 'view' → same renderer
+ComponentRegistry.register('view', ObjectViewRenderer, {
+  namespace: 'plugin-view',
+  label: 'View',
+  category: 'view',
+});
+
+ComponentRegistry.register('view-switcher', ViewSwitcher, {
+  namespace: 'view',
+  label: 'View Switcher',
+  category: 'view',
+  icon: 'LayoutGrid',
+  inputs: [
+    { name: 'views', type: 'array', label: 'Views', required: true },
+    { name: 'defaultView', type: 'string', label: 'Default View' },
+    { name: 'activeView', type: 'string', label: 'Active View' },
+    { name: 'variant', type: 'enum', label: 'Variant', enum: ['tabs', 'buttons', 'dropdown'] },
+    { name: 'position', type: 'enum', label: 'Position', enum: ['top', 'bottom', 'left', 'right'] },
+    { name: 'persistPreference', type: 'boolean', label: 'Persist Preference' },
+    { name: 'storageKey', type: 'string', label: 'Storage Key' },
+    { name: 'onViewChange', type: 'string', label: 'On View Change Event' },
+  ],
+  defaultProps: {
+    variant: 'tabs',
+    position: 'top',
+    defaultView: 'grid',
+    views: [
+      { type: 'grid', label: 'Grid', schema: { type: 'text', content: 'Grid view' } },
+      { type: 'list', label: 'List', schema: { type: 'text', content: 'List view' } },
+    ],
+  },
+});
+
+ComponentRegistry.register('filter-ui', FilterUI, {
+  namespace: 'view',
+  label: 'Filter UI',
+  category: 'view',
+  icon: 'SlidersHorizontal',
+  inputs: [
+    { name: 'filters', type: 'array', label: 'Filters', required: true },
+    { name: 'values', type: 'object', label: 'Values' },
+    { name: 'onChange', type: 'string', label: 'On Change Event' },
+    { name: 'showClear', type: 'boolean', label: 'Show Clear Button' },
+    { name: 'showApply', type: 'boolean', label: 'Show Apply Button' },
+    { name: 'layout', type: 'enum', label: 'Layout', enum: ['inline', 'popover', 'drawer'] },
+  ],
+  defaultProps: {
+    layout: 'inline',
+    showApply: false,
+    showClear: true,
+    filters: [
+      { field: 'name', label: 'Name', type: 'text', placeholder: 'Search name' },
+      { field: 'status', label: 'Status', type: 'select', options: [
+        { label: 'Open', value: 'open' },
+        { label: 'Closed', value: 'closed' },
+      ] },
+      { field: 'created_at', label: 'Created', type: 'date' },
+    ],
+  },
+});
+
+ComponentRegistry.register('sort-ui', SortUI, {
+  namespace: 'view',
+  label: 'Sort UI',
+  category: 'view',
+  icon: 'ArrowUpDown',
+  inputs: [
+    { name: 'fields', type: 'array', label: 'Fields', required: true },
+    { name: 'sort', type: 'array', label: 'Sort' },
+    { name: 'onChange', type: 'string', label: 'On Change Event' },
+    { name: 'multiple', type: 'boolean', label: 'Allow Multiple' },
+    { name: 'variant', type: 'enum', label: 'Variant', enum: ['dropdown', 'buttons'] },
+  ],
+  defaultProps: {
+    variant: 'dropdown',
+    multiple: true,
+    fields: [
+      { field: 'name', label: 'Name' },
+      { field: 'created_at', label: 'Created At' },
+    ],
+    sort: [{ field: 'name', direction: 'asc' }],
+  },
 });
 
 // Simple View Renderer (Container)
-const SimpleViewRenderer: React.FC<any> = ({ schema, className, children, ...props }) => {
+const SimpleViewRenderer: React.FC<any> = ({ schema, className, children, dataSource, ...props }) => {
   // If columns prop is present, use grid layout
   const style = schema.props?.columns 
     ? { display: 'grid', gridTemplateColumns: `repeat(${schema.props.columns}, 1fr)`, gap: '1rem' }

package/vitest.config.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';