shadcn-data-views 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +122 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# shadcn-data-views
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Description
|
|
6
|
+
|
|
7
|
+
`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.
|
|
8
|
+
|
|
9
|
+
## Advantages
|
|
10
|
+
|
|
11
|
+
- **Schema-Driven**: Define your data structure once in JSON (fields, types, options) and the UI adapts automatically.
|
|
12
|
+
- **Multi-View Support**: Comes with 5 built-in views:
|
|
13
|
+
- **Grid**: classic spreadsheet-like table.
|
|
14
|
+
- **Kanban**: drag-and-drop board for status management.
|
|
15
|
+
- **Gallery**: card-based visual layout.
|
|
16
|
+
- **Calendar**: date-based schedule view.
|
|
17
|
+
- **Form**: auto-generated input forms.
|
|
18
|
+
- **Backend Agnostic**: You provide the `dbClient` implementation. It works with any data source: REST APIs, Supabase, Firebase, or even LocalStorage.
|
|
19
|
+
- **Beautiful Design**: Built with modern design principles (shadcn-like), featuring smooth transitions and a clean aesthetic.
|
|
20
|
+
- **Type-Safe**: Written in TypeScript with comprehensive type definitions.
|
|
21
|
+
|
|
22
|
+
## Use Cases
|
|
23
|
+
|
|
24
|
+
- **Admin Dashboards**: Quickly build CRUD interfaces for internal tools.
|
|
25
|
+
- **Project Management Tools**: Implement task tracking with Kanban and List views in minutes.
|
|
26
|
+
- **SaaS Applications**: Add "Airtable-like" or "Notion-like" database features to your customer-facing app.
|
|
27
|
+
- **Rapid Prototyping**: Visualize data structures immediately without writing custom UI code for each entity.
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
### Installation
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install shadcn-data-views
|
|
35
|
+
# or
|
|
36
|
+
pnpm add shadcn-data-views
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Setup
|
|
40
|
+
|
|
41
|
+
The package includes its own styles. Import the CSS file in your root layout or main entry file:
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import 'shadcn-data-views/styles.css';
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Basic Example
|
|
48
|
+
|
|
49
|
+
To use the `DataViews` component, you likely need just three steps:
|
|
50
|
+
1. Define the **Schema** (`TableSchema`).
|
|
51
|
+
2. Implement the **Client** (`IDataViewsClient`).
|
|
52
|
+
3. Render the **Component**.
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { DataViews, TableSchema, IDataViewsClient, IRecord } from 'shadcn-data-views';
|
|
56
|
+
|
|
57
|
+
// 1. Define Schema
|
|
58
|
+
const mySchema: TableSchema = {
|
|
59
|
+
id: 'tasks',
|
|
60
|
+
name: 'Tasks',
|
|
61
|
+
icon: '📋',
|
|
62
|
+
fields: [
|
|
63
|
+
{ id: 'title', name: 'Title', type: 'text', isPrimary: true },
|
|
64
|
+
{ id: 'status', name: 'Status', type: 'select', options: [{ id: 'todo', name: 'To Do' }, { id: 'done', name: 'Done' }] },
|
|
65
|
+
{ id: 'dueDate', name: 'Due Date', type: 'date' },
|
|
66
|
+
],
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
// 2. Implement Client (Connecting to your API)
|
|
70
|
+
class MyDbClient implements IDataViewsClient {
|
|
71
|
+
async getRecords(): Promise<IRecord[]> {
|
|
72
|
+
return await fetch('/api/tasks').then(res => res.json());
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
async createRecord(record: Partial<IRecord>): Promise<IRecord> {
|
|
76
|
+
return await fetch('/api/tasks', { method: 'POST', body: JSON.stringify(record) }).then(res => res.json());
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
async updateRecord(id: string, record: Partial<IRecord>): Promise<IRecord> {
|
|
80
|
+
return await fetch(`/api/tasks/${id}`, { method: 'PATCH', body: JSON.stringify(record) }).then(res => res.json());
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
async deleteRecord(id: string): Promise<void> {
|
|
84
|
+
await fetch(`/api/tasks/${id}`, { method: 'DELETE' });
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
const dbClient = new MyDbClient();
|
|
89
|
+
|
|
90
|
+
// 3. Render Component
|
|
91
|
+
export default function App() {
|
|
92
|
+
return (
|
|
93
|
+
<div style={{ height: '100vh', width: '100%' }}>
|
|
94
|
+
<DataViews
|
|
95
|
+
schema={mySchema}
|
|
96
|
+
dbClient={dbClient}
|
|
97
|
+
config={{ defaultView: 'grid' }}
|
|
98
|
+
/>
|
|
99
|
+
</div>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Configuration
|
|
105
|
+
|
|
106
|
+
You can customize the component via the `config` prop:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
<DataViews
|
|
110
|
+
schema={mySchema}
|
|
111
|
+
dbClient={dbClient}
|
|
112
|
+
config={{
|
|
113
|
+
defaultView: 'kanban'
|
|
114
|
+
}}
|
|
115
|
+
/>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## License
|
|
121
|
+
|
|
122
|
+
MIT
|
package/package.json
CHANGED