Fix chart component naming from chart-bar to bar-chart

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

docs/plugins/plugin-charts.md

@@ -18,7 +18,7 @@ import '@object-ui/plugin-charts'
 
 // Use in schemas
 const schema = {
-  type: 'chart-bar',
+  type: 'bar-chart',
   data: [
     { name: 'Jan', value: 400 },
     { name: 'Feb', value: 300 },
@@ -41,7 +41,7 @@ const schema = {
 
 ```typescript
 {
-  type: 'chart-bar',
+  type: 'bar-chart',
   data?: Array<Record<string, any>>,  // Chart data
   dataKey?: string,                    // Y-axis data key
   xAxisKey?: string,                   // X-axis label key
@@ -68,7 +68,7 @@ const schema = {
 
 ```tsx
 const schema = {
-  type: 'chart-bar',
+  type: 'bar-chart',
   data: [
     { month: 'Jan', sales: 400 },
     { month: 'Feb', sales: 300 },
@@ -134,7 +134,7 @@ const schema = {
 
 ```tsx
 const revenueChart = {
-  type: 'chart-bar',
+  type: 'bar-chart',
   data: [
     { quarter: 'Q1 2024', revenue: 45000, target: 50000 },
     { quarter: 'Q2 2024', revenue: 52000, target: 50000 },
@@ -182,7 +182,7 @@ Without lazy loading, this would add 541 KB to your main bundle. With lazy loadi
 
 ```tsx
 const schema = {
-  type: 'chart-bar',
+  type: 'bar-chart',
   data: salesData,
   color: '#f59e0b', // Amber color
   className: 'bg-white p-4 rounded-lg'
@@ -206,7 +206,7 @@ const schema = {
 import type { BarChartSchema } from '@object-ui/plugin-charts'
 
 const chartSchema: BarChartSchema = {
-  type: 'chart-bar',
+  type: 'bar-chart',
   data: [
     { name: 'Product A', value: 400 },
     { name: 'Product B', value: 300 }

packages/plugin-charts/README.md

@@ -5,7 +5,7 @@ A lazy-loaded charting component for Object UI based on Recharts.
 ## Features
 
 - **Internal Lazy Loading**: Recharts is loaded on-demand using `React.lazy()` and `Suspense`
-- **Zero Configuration**: Just import the package and use `type: 'chart-bar'` in your schema
+- **Zero Configuration**: Just import the package and use `type: 'bar-chart'` in your schema
 - **Automatic Registration**: Components auto-register with the ComponentRegistry
 - **Skeleton Loading**: Shows a skeleton while Recharts loads
 
@@ -25,7 +25,7 @@ import '@object-ui/plugin-charts';
 
 // Now you can use chart-bar type in your schemas
 const schema = {
-  type: 'chart-bar',
+  type: 'bar-chart',
   data: [
     { name: 'Jan', value: 400 },
     { name: 'Feb', value: 300 },
@@ -57,7 +57,7 @@ The plugin exports TypeScript types for full type safety:
 import type { BarChartSchema } from '@object-ui/plugin-charts';
 
 const schema: BarChartSchema = {
-  type: 'chart-bar',
+  type: 'bar-chart',
   data: [
     { name: 'Jan', value: 400 },
     { name: 'Feb', value: 300 }
@@ -72,7 +72,7 @@ const schema: BarChartSchema = {
 
 ```typescript
 {
-  type: 'chart-bar',
+  type: 'bar-chart',
   data?: Array<Record<string, any>>,  // Chart data
   dataKey?: string,                    // Y-axis data key (default: 'value')
   xAxisKey?: string,                   // X-axis label key (default: 'name')

packages/plugin-charts/src/index.test.ts

@@ -7,14 +7,14 @@ describe('Plugin Charts', () => {
     await import('./index');
   });
 
-  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 +23,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 +34,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 +43,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();

packages/plugin-charts/src/index.tsx

@@ -44,7 +44,7 @@ export const ChartBarRenderer: React.FC<ChartBarRendererProps> = ({ schema }) =>
 
 // Register the component with the ComponentRegistry
 ComponentRegistry.register(
-  'chart-bar',
+  'bar-chart',
   ChartBarRenderer,
   {
     label: 'Bar Chart',
@@ -196,6 +196,6 @@ ComponentRegistry.register(
 
 // Standard Export Protocol - for manual integration
 export const chartComponents = {
-  'chart-bar': ChartBarRenderer,
+  'bar-chart': ChartBarRenderer,
   'chart': ChartRenderer,
 };

packages/plugin-charts/src/types.ts

@@ -16,7 +16,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 +27,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.