@object-ui/plugin-charts 0.3.0 → 0.5.0

package/src/index.test.ts

@@ -1,3 +1,11 @@
+/**
+ * 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, beforeAll } from 'vitest';
 import { ComponentRegistry } from '@object-ui/core';
 
@@ -5,16 +13,16 @@ describe('Plugin Charts', () => {
   // Import all renderers to register them
   beforeAll(async () => {
     await import('./index');
-  });
+  }, 60000);
 
-  describe('chart-bar component', () => {
+  describe('bar-chart component', () => {
     it('should be registered in ComponentRegistry', () => {
-      const chartBarRenderer = ComponentRegistry.get('chart-bar');
+      const chartBarRenderer = ComponentRegistry.get('bar-chart');
       expect(chartBarRenderer).toBeDefined();
     });
 
     it('should have proper metadata', () => {
-      const config = ComponentRegistry.getConfig('chart-bar');
+      const config = ComponentRegistry.getConfig('bar-chart');
       expect(config).toBeDefined();
       expect(config?.label).toBe('Bar Chart');
       expect(config?.category).toBe('plugin');
@@ -23,7 +31,7 @@ describe('Plugin Charts', () => {
     });
 
     it('should have expected inputs', () => {
-      const config = ComponentRegistry.getConfig('chart-bar');
+      const config = ComponentRegistry.getConfig('bar-chart');
       const inputNames = config?.inputs?.map((input: any) => input.name) || [];
       
       expect(inputNames).toContain('data');
@@ -34,7 +42,7 @@ describe('Plugin Charts', () => {
     });
 
     it('should have data as required input', () => {
-      const config = ComponentRegistry.getConfig('chart-bar');
+      const config = ComponentRegistry.getConfig('bar-chart');
       const dataInput = config?.inputs?.find((input: any) => input.name === 'data');
       
       expect(dataInput).toBeDefined();
@@ -43,7 +51,7 @@ describe('Plugin Charts', () => {
     });
 
     it('should have sensible default props', () => {
-      const config = ComponentRegistry.getConfig('chart-bar');
+      const config = ComponentRegistry.getConfig('bar-chart');
       const defaults = config?.defaultProps;
       
       expect(defaults).toBeDefined();

package/src/index.tsx

@@ -1,52 +1,32 @@
-import React, { Suspense } from 'react';
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
-import { Skeleton } from '@object-ui/components';
+import { ChartBarRenderer, ChartRenderer } from './ChartRenderer';
+import './ObjectChart'; // Import for side-effects (registration of object-chart)
 
 // Export types for external use
 export type { BarChartSchema } from './types';
+export { ChartBarRenderer, ChartRenderer };
+export { ObjectChart } from './ObjectChart';
 
-// 🚀 Lazy load the implementation files
-// This ensures Recharts is only loaded when the component is actually rendered
-const LazyChart = React.lazy(() => import('./ChartImpl'));
-const LazyAdvancedChart = React.lazy(() => import('./AdvancedChartImpl'));
-
-export interface ChartBarRendererProps {
-  schema: {
-    type: string;
-    id?: string;
-    className?: string;
-    data?: Array<Record<string, any>>;
-    dataKey?: string;
-    xAxisKey?: string;
-    height?: number;
-    color?: string;
-  };
-}
-
-/**
- * ChartBarRenderer - The public API for the bar chart component
- * This wrapper handles lazy loading internally using React.Suspense
- */
-export const ChartBarRenderer: React.FC<ChartBarRendererProps> = ({ schema }) => {
-  return (
-    <Suspense fallback={<Skeleton className="w-full h-[400px]" />}>
-      <LazyChart
-        data={schema.data}
-        dataKey={schema.dataKey}
-        xAxisKey={schema.xAxisKey}
-        height={schema.height}
-        className={schema.className}
-        color={schema.color}
-      />
-    </Suspense>
-  );
+// Standard Export Protocol - for manual integration
+export const chartComponents = {
+  'bar-chart': ChartBarRenderer,
+  'chart': ChartRenderer,
 };
 
 // Register the component with the ComponentRegistry
 ComponentRegistry.register(
-  'chart-bar',
+  'bar-chart',
   ChartBarRenderer,
   {
+    namespace: 'plugin-charts',
     label: 'Bar Chart',
     category: 'plugin',
     inputs: [
@@ -72,86 +52,12 @@ ComponentRegistry.register(
   }
 );
 
-// Advanced Chart Renderer with multiple chart types
-export interface ChartRendererProps {
-  schema: {
-    type: string;
-    id?: string;
-    className?: string;
-    chartType?: 'bar' | 'line' | 'area';
-    data?: Array<Record<string, any>>;
-    config?: Record<string, any>;
-    xAxisKey?: string;
-    series?: Array<{ dataKey: string }>;
-  };
-}
-
-/**
- * ChartRenderer - The public API for the advanced chart component
- * Supports multiple chart types (bar, line, area) with full configuration
- */
-export const ChartRenderer: React.FC<ChartRendererProps> = ({ schema }) => {
-  // ⚡️ Adapter: Normalize JSON schema to Recharts Props
-  const props = React.useMemo(() => {
-    // 1. Defaults
-    let series = schema.series;
-    let xAxisKey = schema.xAxisKey;
-    let config = schema.config;
-
-    // 2. Adapt Tremor/Simple format (categories -> series, index -> xAxisKey)
-    if (!xAxisKey) {
-       if ((schema as any).index) xAxisKey = (schema as any).index;
-       else if ((schema as any).category) xAxisKey = (schema as any).category; // Support Pie/Donut category
-    }
-
-    if (!series) {
-       if ((schema as any).categories) {
-          series = (schema as any).categories.map((cat: string) => ({ dataKey: cat }));
-       } else if ((schema as any).value) {
-          // Single value adapter (for Pie/Simple charts)
-          series = [{ dataKey: (schema as any).value }];
-       }
-    }
-    
-    // 3. Auto-generate config/colors if missing
-    if (!config && series) {
-       const colors = (schema as any).colors || ['hsl(var(--chart-1))', 'hsl(var(--chart-2))', 'hsl(var(--chart-3))']; 
-       config = {};
-       series.forEach((s: any, idx: number) => {
-         config[s.dataKey] = { label: s.dataKey, color: colors[idx % colors.length] };
-       });
-    }
-
-    return {
-      chartType: schema.chartType,
-      data: schema.data,
-      config,
-      xAxisKey,
-      series,
-      className: schema.className
-    };
-  }, [schema]);
-
-  return (
-    <Suspense fallback={<Skeleton className="w-full h-[400px]" />}>
-      <LazyAdvancedChart
-        // Pass adapted props
-        chartType={props.chartType}
-        data={props.data}
-        config={props.config}
-        xAxisKey={props.xAxisKey}
-        series={props.series}
-        className={props.className}
-      />
-    </Suspense>
-  );
-};
-
 // Register the advanced chart component
 ComponentRegistry.register(
   'chart',
   ChartRenderer,
   {
+    namespace: 'plugin-charts',
     label: 'Chart',
     category: 'plugin',
     inputs: [
@@ -162,7 +68,11 @@ ComponentRegistry.register(
         enum: [
           { label: 'Bar', value: 'bar' },
           { label: 'Line', value: 'line' },
-          { label: 'Area', value: 'area' }
+          { label: 'Area', value: 'area' },
+          { label: 'Pie', value: 'pie' },
+          { label: 'Donut', value: 'donut' },
+          { label: 'Radar', value: 'radar' },
+          { label: 'Scatter', value: 'scatter' }
         ],
         defaultValue: 'bar'
       },
@@ -194,8 +104,58 @@ ComponentRegistry.register(
   }
 );
 
-// Standard Export Protocol - for manual integration
-export const chartComponents = {
-  'chart-bar': ChartBarRenderer,
-  'chart': ChartRenderer,
-};
+// Alias for CRM App compatibility
+ComponentRegistry.register(
+  'chart:bar',
+  ChartRenderer, 
+  {
+    namespace: 'plugin-charts',
+    label: 'Bar Chart (Alias)',
+    category: 'plugin',
+    defaultProps: { chartType: 'bar' }
+  }
+);
+
+ComponentRegistry.register(
+  'pie-chart',
+  ChartRenderer,
+  {
+    namespace: 'plugin-charts',
+    label: 'Pie Chart',
+    category: 'plugin',
+    defaultProps: { chartType: 'pie' }
+  }
+);
+
+ComponentRegistry.register(
+  'donut-chart',
+  ChartRenderer,
+  {
+    namespace: 'plugin-charts',
+    label: 'Donut Chart',
+    category: 'plugin',
+    defaultProps: { chartType: 'donut' }
+  }
+);
+
+ComponentRegistry.register(
+  'radar-chart',
+  ChartRenderer,
+  {
+    namespace: 'plugin-charts',
+    label: 'Radar Chart',
+    category: 'plugin',
+    defaultProps: { chartType: 'radar' }
+  }
+);
+
+ComponentRegistry.register(
+  'scatter-chart',
+  ChartRenderer,
+  {
+    namespace: 'plugin-charts',
+    label: 'Scatter Chart',
+    category: 'plugin',
+    defaultProps: { chartType: 'scatter' }
+  }
+);

package/src/registration.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('Plugin Charts Registration', () => {
+  beforeAll(async () => {
+    await import('./index');
+  }, 30000);
+
+  it('registers bar-chart component', () => {
+    const config = ComponentRegistry.get('bar-chart');
+    expect(config).toBeDefined();
+  });
+
+   it('registers chart component types', () => {
+    expect(ComponentRegistry.get('chart')).toBeDefined(); // Assuming base
+    // Verify aliases if they exist
+    expect(ComponentRegistry.get('pie-chart')).toBeDefined();
+    expect(ComponentRegistry.get('donut-chart')).toBeDefined();
+  });
+});

package/src/types.ts

@@ -1,3 +1,11 @@
+/**
+ * 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.
+ */
+
 /**
  * TypeScript type definitions for @object-ui/plugin-charts
  * 
@@ -16,7 +24,7 @@ import type { BaseSchema } from '@object-ui/types';
  * import type { BarChartSchema } from '@object-ui/plugin-charts';
  * 
  * const chartSchema: BarChartSchema = {
- *   type: 'chart-bar',
+ *   type: 'bar-chart',
  *   data: [
  *     { name: 'Jan', value: 400 },
  *     { name: 'Feb', value: 300 }
@@ -27,7 +35,7 @@ import type { BaseSchema } from '@object-ui/types';
  * ```
  */
 export interface BarChartSchema extends BaseSchema {
-  type: 'chart-bar';
+  type: 'bar-chart';
   
   /**
    * Array of data points to display in the chart.

package/vite.config.ts

@@ -1,3 +1,11 @@
+/**
+ * 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 { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
@@ -9,11 +17,20 @@ export default defineConfig({
     dts({
       insertTypesEntry: true,
       include: ['src'],
+      exclude: ['**/*.test.ts', '**/*.test.tsx', 'node_modules'],
+      skipDiagnostics: true,
     }),
   ],
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
+      '@object-ui/core': resolve(__dirname, '../core/src'),
+      '@object-ui/types': resolve(__dirname, '../types/src'),
+      '@object-ui/react': resolve(__dirname, '../react/src'),
+      '@object-ui/components': resolve(__dirname, '../components/src'),
+      '@object-ui/fields': resolve(__dirname, '../fields/src'),
+      '@object-ui/plugin-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
+      '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
     },
   },
   build: {
@@ -35,4 +52,10 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.tsx'],
+    passWithNoTests: true,
+  },
 });

package/vitest.config.ts

@@ -0,0 +1,13 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+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';