@object-ui/plugin-kanban 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# @object-ui/plugin-kanban
+
+## 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,170 @@
+# Plugin Kanban - Lazy-Loaded Kanban Board
+
+A lazy-loaded kanban board component for Object UI based on @dnd-kit for drag-and-drop functionality.
+
+## Features
+
+- **Internal Lazy Loading**: @dnd-kit libraries are loaded on-demand using `React.lazy()` and `Suspense`
+- **Zero Configuration**: Just import the package and use `type: 'kanban'` in your schema
+- **Automatic Registration**: Components auto-register with the ComponentRegistry
+- **Skeleton Loading**: Shows a skeleton while @dnd-kit loads
+- **Drag and Drop**: Full drag-and-drop support for cards between columns
+- **Column Limits**: Set maximum card limits per column
+- **Customizable**: Badge support, custom styling, and callbacks
+
+## Installation
+
+```bash
+pnpm add @object-ui/plugin-kanban
+```
+
+## Usage
+
+### Automatic Registration (Side-Effect Import)
+
+```typescript
+// In your app entry point (e.g., App.tsx or main.tsx)
+import '@object-ui/plugin-kanban';
+
+// Now you can use kanban type in your schemas
+const schema = {
+  type: 'kanban',
+  columns: [
+    {
+      id: 'todo',
+      title: 'To Do',
+      cards: [
+        { id: '1', title: 'Task 1', description: 'Description' }
+      ]
+    },
+    {
+      id: 'done',
+      title: 'Done',
+      cards: []
+    }
+  ]
+};
+```
+
+### Manual Integration
+
+```typescript
+import { kanbanComponents } from '@object-ui/plugin-kanban';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Manually register if needed
+Object.entries(kanbanComponents).forEach(([type, component]) => {
+  ComponentRegistry.register(type, component);
+});
+```
+
+### TypeScript Support
+
+The plugin exports TypeScript types for full type safety:
+
+```typescript
+import type { KanbanSchema, KanbanCard, KanbanColumn } from '@object-ui/plugin-kanban';
+
+const card: KanbanCard = {
+  id: 'task-1',
+  title: 'My Task',
+  description: 'Task description',
+  badges: [
+    { label: 'High Priority', variant: 'destructive' }
+  ]
+};
+
+const column: KanbanColumn = {
+  id: 'todo',
+  title: 'To Do',
+  cards: [card],
+  limit: 5
+};
+
+const schema: KanbanSchema = {
+  type: 'kanban',
+  columns: [column]
+};
+```
+
+## Schema API
+
+```typescript
+{
+  type: 'kanban',
+  columns?: KanbanColumn[],           // Array of columns
+  onCardMove?: (cardId, fromColumnId, toColumnId, newIndex) => void,
+  className?: string                  // Tailwind classes
+}
+
+// Column structure
+interface KanbanColumn {
+  id: string;
+  title: string;
+  cards: KanbanCard[];
+  limit?: number;                     // Maximum cards allowed
+  className?: string;
+}
+
+// Card structure
+interface KanbanCard {
+  id: string;
+  title: string;
+  description?: string;
+  badges?: Array<{
+    label: string;
+    variant?: 'default' | 'secondary' | 'destructive' | 'outline';
+  }>;
+}
+```
+
+## Features
+
+- **Drag and Drop**: Drag cards between columns or reorder within a column
+- **Column Limits**: Set maximum card limits and get visual feedback when full
+- **Card Badges**: Add colored badges to cards for status/priority
+- **Responsive**: Horizontal scrolling for many columns
+- **Accessible**: Built on @dnd-kit with keyboard navigation support
+
+## Lazy Loading Architecture
+
+The plugin uses a two-file pattern for optimal code splitting:
+
+1. **`KanbanImpl.tsx`**: Contains the actual @dnd-kit imports (heavy ~100-150 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
+- `KanbanImpl-xxx.js` (~100-150 KB) - The lazy-loaded implementation
+
+The @dnd-kit libraries are only downloaded when a `kanban` component is actually rendered, not on initial page load.
+
+## Bundle Size Impact
+
+By using lazy loading, the main application bundle stays lean:
+- Without lazy loading: +100-150 KB on initial load
+- With lazy loading: +0.19 KB on initial load, +100-150 KB only when kanban is rendered
+
+This results in significantly faster initial page loads for applications that don't use kanban on every page.
+
+## Development
+
+```bash
+# Build the plugin
+pnpm build
+
+# The package will generate proper ESM and UMD builds with lazy loading preserved
+```
+
+## Example with Callbacks
+
+```typescript
+const schema = {
+  type: 'kanban',
+  columns: [...],
+  onCardMove: (cardId, fromColumnId, toColumnId, newIndex) => {
+    console.log(`Card ${cardId} moved from ${fromColumnId} to ${toColumnId} at index ${newIndex}`);
+    // Update your backend or state here
+  }
+};
+```