@object-ui/plugin-charts 0.3.0

package/src/index.tsx

@@ -0,0 +1,201 @@
+import React, { Suspense } from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { Skeleton } from '@object-ui/components';
+
+// Export types for external use
+export type { BarChartSchema } from './types';
+
+// 🚀 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>
+  );
+};
+
+// Register the component with the ComponentRegistry
+ComponentRegistry.register(
+  'chart-bar',
+  ChartBarRenderer,
+  {
+    label: 'Bar Chart',
+    category: 'plugin',
+    inputs: [
+      { name: 'data', type: 'array', label: 'Data', required: true },
+      { name: 'dataKey', type: 'string', label: 'Data Key', defaultValue: 'value' },
+      { name: 'xAxisKey', type: 'string', label: 'X-Axis Key', defaultValue: 'name' },
+      { name: 'height', type: 'number', label: 'Height', defaultValue: 400 },
+      { name: 'color', type: 'color', label: 'Color', defaultValue: '#8884d8' },
+    ],
+    defaultProps: {
+      data: [
+        { name: 'Jan', value: 400 },
+        { name: 'Feb', value: 300 },
+        { name: 'Mar', value: 600 },
+        { name: 'Apr', value: 800 },
+        { name: 'May', value: 500 },
+      ],
+      dataKey: 'value',
+      xAxisKey: 'name',
+      height: 400,
+      color: '#8884d8',
+    },
+  }
+);
+
+// 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,
+  {
+    label: 'Chart',
+    category: 'plugin',
+    inputs: [
+      { 
+        name: 'chartType', 
+        type: 'enum', 
+        label: 'Chart Type',
+        enum: [
+          { label: 'Bar', value: 'bar' },
+          { label: 'Line', value: 'line' },
+          { label: 'Area', value: 'area' }
+        ],
+        defaultValue: 'bar'
+      },
+      { name: 'data', type: 'code', label: 'Data (JSON)', required: true },
+      { name: 'config', type: 'code', label: 'Config (JSON)' },
+      { name: 'xAxisKey', type: 'string', label: 'X Axis Key', defaultValue: 'name' },
+      { name: 'series', type: 'code', label: 'Series (JSON Array)', required: true },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      chartType: 'bar',
+      data: [
+        { name: 'Jan', sales: 400, revenue: 240 },
+        { name: 'Feb', sales: 300, revenue: 139 },
+        { name: 'Mar', sales: 600, revenue: 380 },
+        { name: 'Apr', sales: 800, revenue: 430 },
+        { name: 'May', sales: 500, revenue: 220 },
+      ],
+      config: {
+        sales: { label: 'Sales', color: '#8884d8' },
+        revenue: { label: 'Revenue', color: '#82ca9d' }
+      },
+      xAxisKey: 'name',
+      series: [
+        { dataKey: 'sales' },
+        { dataKey: 'revenue' }
+      ]
+    }
+  }
+);
+
+// Standard Export Protocol - for manual integration
+export const chartComponents = {
+  'chart-bar': ChartBarRenderer,
+  'chart': ChartRenderer,
+};

package/src/types.ts

@@ -0,0 +1,60 @@
+/**
+ * TypeScript type definitions for @object-ui/plugin-charts
+ * 
+ * These types can be imported by applications using this plugin
+ * to get full TypeScript support for chart schemas.
+ */
+
+import type { BaseSchema } from '@object-ui/types';
+
+/**
+ * Bar Chart component schema.
+ * Renders a bar chart using Recharts library.
+ * 
+ * @example
+ * ```typescript
+ * import type { BarChartSchema } from '@object-ui/plugin-charts';
+ * 
+ * const chartSchema: BarChartSchema = {
+ *   type: 'chart-bar',
+ *   data: [
+ *     { name: 'Jan', value: 400 },
+ *     { name: 'Feb', value: 300 }
+ *   ],
+ *   dataKey: 'value',
+ *   xAxisKey: 'name'
+ * }
+ * ```
+ */
+export interface BarChartSchema extends BaseSchema {
+  type: 'chart-bar';
+  
+  /**
+   * Array of data points to display in the chart.
+   */
+  data?: Array<Record<string, any>>;
+  
+  /**
+   * Key in the data object for the Y-axis values.
+   * @default 'value'
+   */
+  dataKey?: string;
+  
+  /**
+   * Key in the data object for the X-axis labels.
+   * @default 'name'
+   */
+  xAxisKey?: string;
+  
+  /**
+   * Height of the chart in pixels.
+   * @default 400
+   */
+  height?: number;
+  
+  /**
+   * Color of the bars.
+   * @default '#8884d8'
+   */
+  color?: string;
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "noImplicitAny": true,
+    "noEmit": false,
+    "declaration": true,
+    "composite": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginCharts',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@object-ui/components': 'ObjectUIComponents',
+          '@object-ui/core': 'ObjectUICore',
+          '@object-ui/react': 'ObjectUIReact',
+        },
+      },
+    },
+  },
+});