Merge pull request #733 from objectstack-ai/copilot/build-schema-driven-framework

Author: hotlong

ROADMAP.md

@@ -323,14 +323,21 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Add Vitest tests (65 tests: useConfigDraft 10, ConfigFieldRenderer 22, ConfigPanelRenderer 21, DashboardConfigPanel 12)
 
 **Phase 2 — Widget-Level Configuration:**
-- [ ] Support click-to-select widget → sidebar switches to widget property editor (title, type, data binding, layout)
+- [x] Support click-to-select widget → sidebar switches to widget property editor (title, type, data binding, layout)
+- [x] Implement `WidgetConfigPanel` with schema-driven fields: general (title, description, type), data binding (object, categoryField, valueField, aggregate), layout (width, height), appearance (colorVariant, actionUrl)
+- [x] Add Vitest tests (14 tests for WidgetConfigPanel)
 
 **Phase 3 — Sub-Editor Integration:**
-- [ ] Integrate `FilterBuilder` for dashboard global filters
+- [x] Integrate `FilterBuilder` for dashboard global filters (ConfigFieldRenderer `filter` type now renders inline FilterBuilder)
+- [x] Integrate `SortBuilder` for sort configuration (ConfigFieldRenderer `sort` type now renders inline SortBuilder)
+- [x] Add `fields` prop to `ConfigField` type for filter/sort field definitions
 - [ ] Dropdown filter selector and action button sub-panel visual editing
 
 **Phase 4 — Composition & Storybook:**
-- [ ] Build `DashboardWithConfig` composite component (dashboard + config sidebar)
+- [x] Build `DashboardWithConfig` composite component (dashboard + config sidebar)
+- [x] Support widget selection → WidgetConfigPanel switch with back navigation
+- [x] Add Storybook stories for `WidgetConfigPanel`, `DashboardWithConfig`, and `DashboardWithConfigClosed`
+- [x] Add Vitest tests (9 tests for DashboardWithConfig)
 
 **Phase 5 — Type Definitions & Validation:**
 - [x] Add `DashboardConfig` types to `@object-ui/types`

packages/components/src/__tests__/config-field-renderer.test.tsx

@@ -237,16 +237,38 @@ describe('ConfigFieldRenderer', () => {
   });
 
   describe('filter/sort types', () => {
-    it('should render filter placeholder', () => {
-      const field: ConfigField = { key: 'filter', label: 'Filters', type: 'filter' };
-      render(<ConfigFieldRenderer field={field} value={null} onChange={vi.fn()} draft={defaultDraft} />);
+    it('should render filter with FilterBuilder', () => {
+      const field: ConfigField = {
+        key: 'filter',
+        label: 'Filters',
+        type: 'filter',
+        fields: [
+          { value: 'name', label: 'Name' },
+          { value: 'status', label: 'Status' },
+        ],
+      };
+      render(<ConfigFieldRenderer field={field} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
       expect(screen.getByText('Filters')).toBeDefined();
+      expect(screen.getByTestId('config-field-filter')).toBeDefined();
+      // FilterBuilder renders 'Where' label and 'Add filter' button
+      expect(screen.getByText('Add filter')).toBeDefined();
     });
 
-    it('should render sort placeholder', () => {
-      const field: ConfigField = { key: 'sort', label: 'Sorting', type: 'sort' };
-      render(<ConfigFieldRenderer field={field} value={null} onChange={vi.fn()} draft={defaultDraft} />);
+    it('should render sort with SortBuilder', () => {
+      const field: ConfigField = {
+        key: 'sort',
+        label: 'Sorting',
+        type: 'sort',
+        fields: [
+          { value: 'name', label: 'Name' },
+          { value: 'date', label: 'Date' },
+        ],
+      };
+      render(<ConfigFieldRenderer field={field} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
       expect(screen.getByText('Sorting')).toBeDefined();
+      expect(screen.getByTestId('config-field-sort')).toBeDefined();
+      // SortBuilder renders 'Add sort' button
+      expect(screen.getByText('Add sort')).toBeDefined();
     });
   });
 });

packages/components/src/custom/config-field-renderer.tsx

@@ -21,6 +21,8 @@ import {
 import { Button } from '../ui/button';
 import { cn } from '../lib/utils';
 import { ConfigRow } from './config-row';
+import { FilterBuilder } from './filter-builder';
+import { SortBuilder } from './sort-builder';
 import type { ConfigField } from '../types/config-panel';
 
 export interface ConfigFieldRendererProps {
@@ -191,14 +193,29 @@ export function ConfigFieldRenderer({
       );
 
     case 'filter':
+      return (
+        <div data-testid={`config-field-${field.key}`}>
+          <ConfigRow label={field.label} />
+          <FilterBuilder
+            fields={field.fields}
+            value={effectiveValue}
+            onChange={onChange}
+            className="px-1 pb-2"
+          />
+        </div>
+      );
+
     case 'sort':
-      // Complex sub-editors — consumers should use type='custom' to embed
-      // FilterBuilder / SortBuilder with full field binding.
       return (
-        <ConfigRow
-          label={field.label}
-          value={field.placeholder ?? `Configure ${field.type}…`}
-        />
+        <div data-testid={`config-field-${field.key}`}>
+          <ConfigRow label={field.label} />
+          <SortBuilder
+            fields={field.fields}
+            value={effectiveValue}
+            onChange={onChange}
+            className="px-1 pb-2"
+          />
+        </div>
       );
 
     case 'custom':

packages/components/src/types/config-panel.ts

@@ -59,6 +59,8 @@ export interface ConfigField {
   step?: number;
   /** Whether the field is disabled */
   disabled?: boolean;
+  /** Field definitions for filter/sort sub-editors */
+  fields?: Array<{ value: string; label: string; type?: string; options?: Array<{ value: string; label: string }> }>;
 }
 
 /** A group of related config fields */

packages/plugin-dashboard/src/DashboardConfigPanel.stories.tsx

@@ -0,0 +1,164 @@
+/**
+ * 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, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { WidgetConfigPanel } from './WidgetConfigPanel';
+import { DashboardWithConfig } from './DashboardWithConfig';
+import type { DashboardSchema } from '@object-ui/types';
+
+// ─── WidgetConfigPanel Stories ──────────────────────────────────────────────
+
+const widgetMeta = {
+  title: 'Plugins/DashboardConfigPanel',
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default widgetMeta;
+type Story = StoryObj<typeof widgetMeta>;
+
+// --- WidgetConfigPanel ---
+
+const widgetConfig = {
+  title: 'Revenue Chart',
+  description: 'Monthly revenue by region',
+  type: 'bar',
+  object: 'orders',
+  categoryField: 'region',
+  valueField: 'amount',
+  aggregate: 'sum',
+  colorVariant: 'blue',
+  actionUrl: '',
+  layoutW: 2,
+  layoutH: 1,
+};
+
+function WidgetConfigStory() {
+  const [config, setConfig] = useState(widgetConfig);
+  return (
+    <div style={{ position: 'relative', height: 600, width: 320, border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
+      <WidgetConfigPanel
+        open={true}
+        onClose={() => alert('Close clicked')}
+        config={config}
+        onSave={(newConfig) => {
+          setConfig(newConfig as typeof widgetConfig);
+          alert('Saved: ' + JSON.stringify(newConfig, null, 2));
+        }}
+      />
+    </div>
+  );
+}
+
+export const WidgetConfig: Story = {
+  render: () => <WidgetConfigStory />,
+};
+
+// --- DashboardWithConfig ---
+
+const dashboardSchema: DashboardSchema = {
+  type: 'dashboard',
+  title: 'Sales Dashboard',
+  columns: 3,
+  gap: 4,
+  widgets: [
+    {
+      id: 'mc-1',
+      component: {
+        type: 'metric-card',
+        title: 'Total Revenue',
+        value: '$128,430',
+        icon: 'DollarSign',
+        trend: 'up',
+        trendValue: '+14.2%',
+      },
+      layout: { x: 0, y: 0, w: 1, h: 1 },
+    },
+    {
+      id: 'mc-2',
+      component: {
+        type: 'metric-card',
+        title: 'Active Users',
+        value: '3,842',
+        icon: 'Users',
+        trend: 'up',
+        trendValue: '+8.1%',
+      },
+      layout: { x: 1, y: 0, w: 1, h: 1 },
+    },
+    {
+      id: 'mc-3',
+      component: {
+        type: 'metric-card',
+        title: 'Churn Rate',
+        value: '1.8%',
+        icon: 'TrendingDown',
+        trend: 'down',
+        trendValue: '-0.3%',
+      },
+      layout: { x: 2, y: 0, w: 1, h: 1 },
+    },
+  ],
+  header: {
+    showTitle: true,
+    showDescription: true,
+  },
+};
+
+const dashboardConfig = {
+  columns: 3,
+  gap: 4,
+  rowHeight: '120',
+  refreshInterval: '0',
+  title: 'Sales Dashboard',
+  showDescription: true,
+  theme: 'auto',
+};
+
+function DashboardWithConfigStory() {
+  const [config, setConfig] = useState(dashboardConfig);
+  return (
+    <div style={{ height: 600, width: '100%', border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
+      <DashboardWithConfig
+        schema={dashboardSchema}
+        config={config}
+        onConfigSave={(newConfig) => {
+          setConfig(newConfig as typeof dashboardConfig);
+        }}
+        defaultConfigOpen={true}
+      />
+    </div>
+  );
+}
+
+export const DashboardWithConfigPanel: Story = {
+  render: () => <DashboardWithConfigStory />,
+};
+
+function DashboardWithConfigClosedStory() {
+  const [config, setConfig] = useState(dashboardConfig);
+  return (
+    <div style={{ height: 600, width: '100%', border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
+      <DashboardWithConfig
+        schema={dashboardSchema}
+        config={config}
+        onConfigSave={(newConfig) => {
+          setConfig(newConfig as typeof dashboardConfig);
+        }}
+        defaultConfigOpen={false}
+      />
+    </div>
+  );
+}
+
+export const DashboardWithConfigClosed: Story = {
+  render: () => <DashboardWithConfigClosedStory />,
+};