shadcn-data-views 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,133 @@
+# shadcn-data-views
+
+A powerful, schema-driven data view component for React, built with modern aesthetics and flexibility in mind. Instantly spin up Grid, Kanban, Gallery, Calendar, and Form views for your data.
+
+## Description
+
+`shadcn-data-views` allows developers to render complex data interfaces by simply defining a JSON schema and providing a data client. It abstracts away the complexity of building multiple view types (tables, boards, galleries) while providing a premium, polished UI out of the box.
+
+## Advantages
+
+- **Schema-Driven**: Define your data structure once in JSON (fields, types, options) and the UI adapts automatically.
+- **Multi-View Support**: Comes with 5 built-in views:
+  - **Grid**: classic spreadsheet-like table.
+  - **Kanban**: drag-and-drop board for status management.
+  - **Gallery**: card-based visual layout.
+  - **Calendar**: date-based schedule view.
+  - **Form**: auto-generated input forms.
+- **Backend Agnostic**: You provide the `dbClient` implementation. It works with any data source: REST APIs, Supabase, Firebase, or even LocalStorage.
+- **Beautiful Design**: Built with modern design principles (shadcn-like), featuring smooth transitions and a clean aesthetic.
+- **Type-Safe**: Written in TypeScript with comprehensive type definitions.
+
+## Use Cases
+
+- **Admin Dashboards**: Quickly build CRUD interfaces for internal tools.
+- **Project Management Tools**: Implement task tracking with Kanban and List views in minutes.
+- **SaaS Applications**: Add "Airtable-like" or "Notion-like" database features to your customer-facing app.
+- **Rapid Prototyping**: Visualize data structures immediately without writing custom UI code for each entity.
+
+## Usage
+
+### Installation
+
+```bash
+npm install shadcn-data-views
+# or
+pnpm add shadcn-data-views
+```
+
+### Setup
+
+The package now injects its own styles automatically. You do NOT need to import a CSS file.
+
+**Important**: This package uses `next-themes` for dark mode support. You **must** wrap your application (or the component) in a `ThemeProvider` to enable theme switching.
+
+```tsx
+// Example in a Next.js app (providers.tsx)
+import { ThemeProvider } from 'next-themes';
+
+export function Providers({ children }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+### Basic Example
+
+To use the `DataViews` component, you likely need just three steps:
+1. Define the **Schema** (`TableSchema`).
+2. Implement the **Client** (`IDataViewsClient`).
+3. Render the **Component**.
+
+```tsx
+import { DataViews, TableSchema, IDataViewsClient, IRecord } from 'shadcn-data-views';
+
+// 1. Define Schema
+const mySchema: TableSchema = {
+  id: 'tasks',
+  name: 'Tasks',
+  icon: '📋',
+  fields: [
+    { id: 'title', name: 'Title', type: 'text', isPrimary: true },
+    { id: 'status', name: 'Status', type: 'select', options: [{ id: 'todo', name: 'To Do' }, { id: 'done', name: 'Done' }] },
+    { id: 'dueDate', name: 'Due Date', type: 'date' },
+  ],
+};
+
+// 2. Implement Client (Connecting to your API)
+class MyDbClient implements IDataViewsClient {
+  async getRecords(): Promise<IRecord[]> {
+    return await fetch('/api/tasks').then(res => res.json());
+  }
+
+  async createRecord(record: Partial<IRecord>): Promise<IRecord> {
+    return await fetch('/api/tasks', { method: 'POST', body: JSON.stringify(record) }).then(res => res.json());
+  }
+
+  async updateRecord(id: string, record: Partial<IRecord>): Promise<IRecord> {
+    return await fetch(`/api/tasks/${id}`, { method: 'PATCH', body: JSON.stringify(record) }).then(res => res.json());
+  }
+
+  async deleteRecord(id: string): Promise<void> {
+    await fetch(`/api/tasks/${id}`, { method: 'DELETE' });
+  }
+}
+
+const dbClient = new MyDbClient();
+
+// 3. Render Component
+export default function App() {
+  return (
+    <div style={{ height: '100vh', width: '100%' }}>
+      <DataViews 
+        schema={mySchema} 
+        dbClient={dbClient} 
+        config={{ defaultView: 'grid' }}
+      />
+    </div>
+  );
+}
+```
+
+### Configuration
+
+You can customize the component via the `config` prop:
+
+```tsx
+<DataViews 
+  schema={mySchema} 
+  dbClient={dbClient}
+  config={{ 
+    defaultView: 'kanban' 
+  }}
+/>
+```
+
+---
+
+## License
+
+MIT