@object-ui/plugin-charts 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# @object-ui/plugin-charts
+
+## 0.3.0
+
+### Minor Changes
+
+- Unified version across all packages to 0.3.0 for consistent versioning
+
+## 0.2.2
+
+### Patch Changes
+
+- New plugin-object and ObjectQL SDK updates
+
+  **Added:**
+  - New Plugin: @object-ui/plugin-object - ObjectQL plugin for automatic table and form generation
+    - ObjectTable: Auto-generates tables from ObjectQL object schemas
+    - ObjectForm: Auto-generates forms from ObjectQL object schemas with create/edit/view modes
+    - Full TypeScript support with comprehensive type definitions
+  - Type Definitions: Added ObjectTableSchema and ObjectFormSchema to @object-ui/types
+  - ObjectQL Integration: Enhanced ObjectQLDataSource with getObjectSchema() method using MetadataApiClient
+
+  **Changed:**
+  - Updated @objectql/sdk from ^1.8.3 to ^1.9.1
+  - Updated @objectql/types from ^1.8.3 to ^1.9.1
+
+- Updated dependencies
+  - @object-ui/types@0.3.0
+  - @object-ui/core@0.2.2
+  - @object-ui/react@0.2.2
+  - @object-ui/components@0.2.2
+
+## 0.2.1
+
+### Patch Changes
+
+- Patch release: Add automated changeset workflow and CI/CD improvements
+
+  This release includes infrastructure improvements:
+  - Added changeset-based version management
+  - Enhanced CI/CD workflows with GitHub Actions
+  - Improved documentation for contributing and releasing
+
+- Updated dependencies
+  - @object-ui/types@0.2.1
+  - @object-ui/core@0.2.1
+  - @object-ui/react@0.2.1
+  - @object-ui/components@0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+# Plugin Charts - Lazy-Loaded Recharts Components
+
+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
+- **Automatic Registration**: Components auto-register with the ComponentRegistry
+- **Skeleton Loading**: Shows a skeleton while Recharts loads
+
+## Installation
+
+```bash
+pnpm add @object-ui/plugin-charts
+```
+
+## Usage
+
+### Automatic Registration (Side-Effect Import)
+
+```typescript
+// In your app entry point (e.g., App.tsx or main.tsx)
+import '@object-ui/plugin-charts';
+
+// Now you can use chart-bar type in your schemas
+const schema = {
+  type: 'chart-bar',
+  data: [
+    { name: 'Jan', value: 400 },
+    { name: 'Feb', value: 300 },
+    { name: 'Mar', value: 600 }
+  ],
+  dataKey: 'value',
+  xAxisKey: 'name',
+  height: 400
+};
+```
+
+### Manual Integration
+
+```typescript
+import { chartComponents } from '@object-ui/plugin-charts';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Manually register if needed
+Object.entries(chartComponents).forEach(([type, component]) => {
+  ComponentRegistry.register(type, component);
+});
+```
+
+### TypeScript Support
+
+The plugin exports TypeScript types for full type safety:
+
+```typescript
+import type { BarChartSchema } from '@object-ui/plugin-charts';
+
+const schema: BarChartSchema = {
+  type: 'chart-bar',
+  data: [
+    { name: 'Jan', value: 400 },
+    { name: 'Feb', value: 300 }
+  ],
+  dataKey: 'value',
+  xAxisKey: 'name',
+  height: 400
+};
+```
+
+## Schema API
+
+```typescript
+{
+  type: 'chart-bar',
+  data?: Array<Record<string, any>>,  // Chart data
+  dataKey?: string,                    // Y-axis data key (default: 'value')
+  xAxisKey?: string,                   // X-axis label key (default: 'name')
+  height?: number,                     // Chart height in pixels (default: 400)
+  color?: string,                      // Bar color (default: '#8884d8')
+  className?: string                   // Tailwind classes
+}
+```
+
+## Lazy Loading Architecture
+
+The plugin uses a two-file pattern for optimal code splitting:
+
+1. **`ChartImpl.tsx`**: Contains the actual Recharts import (heavy ~541 KB)
+2. **`index.tsx`**: Entry point with `React.lazy()` wrapper (light)
+
+When bundled, Vite automatically creates separate chunks:
+- `index.js` (~200 bytes) - The entry point
+- `ChartImpl-xxx.js` (~541 KB minified, ~136 KB gzipped) - The lazy-loaded implementation
+
+The Recharts library is only downloaded when a `chart-bar` component is actually rendered, not on initial page load.
+
+## Build Output Example
+
+```
+dist/index.js                 0.19 kB  # Entry point
+dist/ChartImpl-BJBP1UnW.js  541.17 kB  # Lazy chunk (loaded on demand)
+dist/index.umd.cjs          393.20 kB  # UMD bundle
+```
+
+## Development
+
+```bash
+# Build the plugin
+pnpm build
+
+# The package will generate proper ESM and UMD builds with lazy loading preserved
+```
+
+## Bundle Size Impact
+
+By using lazy loading, the main application bundle stays lean:
+- Without lazy loading: +541 KB on initial load
+- With lazy loading: +0.19 KB on initial load, +541 KB only when chart is rendered
+
+This results in significantly faster initial page loads for applications that don't use charts on every page.