Skip to content

Commit 82d2b30

Browse files
CopilotTechQuery
Copilot
and
TechQuery
committed
Add RestTable component with Shadcn UI and update README
Co-authored-by: TechQuery <[email protected]>
1 parent fc47133 commit 82d2b30

File tree

6 files changed

+848
-15
lines changed

6 files changed

+848
-15
lines changed

‎README.md‎

Lines changed: 212 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,226 @@
11
# MobX RESTful Shadcn
22

3-
A **Pagination Table** & **Scroll List** component suite for [CRUD operation][1], which is based on [MobX RESTful][2] & [React][3].
3+
A **Pagination Table** & **Scroll List** component suite for [CRUD operation][1], which is based on [MobX RESTful][2], [React][3] & [Shadcn UI][4].
44

5-
You can use the `shadcn` CLI to run your own component registry. Running your own
6-
component registry allows you to distribute your custom components, hooks, pages, and
7-
other files to any React project.
5+
[![MobX compatibility](https://img.shields.io/badge/Compatible-1?logo=mobx&label=MobX%206%2F7)][5]
86

9-
> [!IMPORTANT]
10-
> This template uses Tailwind v4. For Tailwind v3, see [registry-template-v3](https://github.com/shadcn-ui/registry-template-v3).
7+
## Components
118

12-
## Getting Started
9+
1. [Badge Bar](https://mobx-restful-shadcn.vercel.app/)
10+
2. [Badge Input](https://mobx-restful-shadcn.vercel.app/)
11+
3. [Image Preview](https://mobx-restful-shadcn.vercel.app/)
12+
4. [File Preview](https://mobx-restful-shadcn.vercel.app/)
13+
5. [File Picker](https://mobx-restful-shadcn.vercel.app/)
14+
6. [File Uploader](https://mobx-restful-shadcn.vercel.app/)
15+
7. [Form Field](https://mobx-restful-shadcn.vercel.app/)
16+
8. [Range Input](https://mobx-restful-shadcn.vercel.app/)
17+
9. [Array Field](https://mobx-restful-shadcn.vercel.app/)
18+
10. [REST Form](https://mobx-restful-shadcn.vercel.app/)
19+
11. [REST Form Modal](https://mobx-restful-shadcn.vercel.app/)
20+
12. [Pager](https://mobx-restful-shadcn.vercel.app/)
21+
13. [REST Table](https://mobx-restful-shadcn.vercel.app/)
22+
14. [Scroll Boundary](https://mobx-restful-shadcn.vercel.app/)
23+
15. [Scroll List](https://mobx-restful-shadcn.vercel.app/)
24+
16. [Searchable Input](https://mobx-restful-shadcn.vercel.app/)
1325

14-
This is a template for creating a custom registry using Next.js.
26+
## Installation
1527

16-
- The template uses a `registry.json` file to define components and their files.
17-
- The `shadcn build` command is used to build the registry.
18-
- The registry items are served as static files under `public/r/[name].json`.
19-
- The template also includes a route handler for serving registry items.
20-
- Every registry item are compatible with the `shadcn` CLI.
21-
- We have also added v0 integration using the `Open in v0` api.
28+
You can use the `shadcn` CLI to install components from this registry to your project.
29+
30+
### Prerequisites
31+
32+
```shell
33+
npm i react \
34+
mobx \
35+
mobx-react \
36+
mobx-i18n \
37+
mobx-restful
38+
```
39+
40+
### Install Components
41+
42+
```shell
43+
npx shadcn@latest add https://mobx-restful-shadcn.vercel.app/r/rest-table.json
44+
```
45+
46+
Replace `rest-table` with any component name from the list above.
47+
48+
## Configuration
49+
50+
### Internationalization
51+
52+
Set up i18n translation model for UI text:
53+
54+
```typescript
55+
import { TranslationModel } from "mobx-i18n";
56+
57+
export const i18n = new TranslationModel({
58+
en_US: {
59+
submit: "Submit",
60+
cancel: "Cancel",
61+
create: "Create",
62+
edit: "Edit",
63+
delete: "Delete",
64+
view: "View",
65+
total_x_rows: "Total {{totalCount}} rows",
66+
sure_to_delete_x: "Are you sure to delete {{keys}}?",
67+
},
68+
});
69+
```
70+
71+
### Data Source
72+
73+
Set up HTTP client and implement Model class:
74+
75+
```typescript
76+
import { githubClient, RepositoryModel } from "mobx-github";
77+
78+
const GITHUB_TOKEN = process.env.GITHUB_TOKEN;
79+
80+
githubClient.use(({ request }, next) => {
81+
if (GITHUB_TOKEN)
82+
request.headers = {
83+
...request.headers,
84+
Authorization: `Bearer ${GITHUB_TOKEN}`,
85+
};
86+
return next();
87+
});
88+
89+
export const repositoryStore = new RepositoryModel("idea2app");
90+
```
91+
92+
## Usage
93+
94+
### Pagination Table
95+
96+
```tsx
97+
import { computed } from "mobx";
98+
import { observer } from "mobx-react";
99+
import { BadgeBar } from "@/components/ui/badge-bar";
100+
import { RestTable, Column } from "@/components/ui/rest-table";
101+
import repositoryStore, { Repository } from "@/models/Repository";
102+
import { i18n } from "@/models/Translation";
103+
104+
export default observer(() => {
105+
const columns = computed<Column<Repository>[]>(() => [
106+
{
107+
key: "full_name",
108+
renderHead: "Repository Name",
109+
renderBody: ({ html_url, full_name }) => (
110+
<a target="_blank" href={html_url}>
111+
{full_name}
112+
</a>
113+
),
114+
required: true,
115+
minLength: 3,
116+
invalidMessage: "Input 3 characters at least",
117+
},
118+
{ key: "homepage", type: "url", renderHead: "Home Page" },
119+
{ key: "language", renderHead: "Programming Language" },
120+
{
121+
key: "topics",
122+
renderHead: "Topic",
123+
renderBody: ({ topics }) => (
124+
<BadgeBar
125+
list={(topics || []).map((text) => ({
126+
text,
127+
link: `https://github.com/topics/${text}`,
128+
}))}
129+
/>
130+
),
131+
},
132+
{ key: "stargazers_count", type: "number", renderHead: "Star Count" },
133+
{
134+
key: "description",
135+
renderHead: "Description",
136+
rows: 3,
137+
},
138+
]).get();
139+
140+
return (
141+
<RestTable
142+
editable
143+
deletable
144+
columns={columns}
145+
store={repositoryStore}
146+
translator={i18n}
147+
onCheck={console.log}
148+
/>
149+
);
150+
});
151+
```
152+
153+
### Scroll List
154+
155+
```tsx
156+
import { observer } from "mobx-react";
157+
import { ScrollList } from "@/components/ui/scroll-list";
158+
import repositoryStore from "@/models/Repository";
159+
import { i18n } from "@/models/Translation";
160+
161+
export default observer(() => (
162+
<ScrollList
163+
translator={i18n}
164+
store={repositoryStore}
165+
renderList={(allItems) => (
166+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
167+
{allItems.map((item) => (
168+
<div key={item.id} className="p-4 border rounded">
169+
<h3>{item.name}</h3>
170+
<p>{item.description}</p>
171+
</div>
172+
))}
173+
</div>
174+
)}
175+
/>
176+
));
177+
```
178+
179+
### File Uploader
180+
181+
```tsx
182+
import { FileUploader } from "@/components/ui/file-uploader";
183+
import fileStore from "@/models/File";
184+
185+
export const EditorPage = () => (
186+
<FileUploader
187+
store={fileStore}
188+
accept="image/*"
189+
name="images"
190+
multiple
191+
required
192+
onChange={console.log}
193+
/>
194+
);
195+
```
196+
197+
## Development
198+
199+
This is a custom component registry built with Next.js and compatible with the `shadcn` CLI.
200+
201+
### Getting Started
202+
203+
1. Clone the repository
204+
2. Install dependencies: `npm install`
205+
3. Run development server: `npm run dev`
206+
4. Build registry: `npm run registry:build`
207+
5. Build project: `npm run build`
208+
209+
### Registry Structure
210+
211+
- The `registry.json` file defines all components and their files
212+
- Components are located in `registry/new-york/blocks/`
213+
- Each component has its implementation and example files
214+
- The `shadcn build` command generates registry items in `public/r/`
22215

23216
## Documentation
24217

25-
Visit the [shadcn documentation](https://ui.shadcn.com/docs/registry) to view the full documentation.
218+
- [Shadcn UI Documentation](https://ui.shadcn.com/docs)
219+
- [MobX RESTful Documentation](https://github.com/idea2app/MobX-RESTful)
220+
- [Component Registry Documentation](https://ui.shadcn.com/docs/registry)
26221

27222
[1]: https://en.wikipedia.org/wiki/Create,_read,_update_and_delete
28223
[2]: https://github.com/idea2app/MobX-RESTful
29224
[3]: https://reactjs.org/
225+
[4]: https://ui.shadcn.com/
226+
[5]: https://mobx.js.org/

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"start": "next start"
1111
},
1212
"dependencies": {
13+
"@radix-ui/react-checkbox": "^1.3.3",
1314
"@radix-ui/react-dialog": "^1.1.15",
1415
"@radix-ui/react-label": "^2.1.8",
1516
"@radix-ui/react-slot": "^1.2.4",

‎pnpm-lock.yaml‎

Lines changed: 63 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎registry.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,37 @@
311311
"type": "registry:component"
312312
}
313313
]
314+
},
315+
{
316+
"name": "rest-table",
317+
"type": "registry:component",
318+
"title": "REST Table",
319+
"description": "A comprehensive pagination table component for CRUD operations with MobX RESTful integration, supporting sorting, filtering, and inline editing.",
320+
"registryDependencies": [
321+
"button",
322+
"checkbox",
323+
"table",
324+
"badge-bar",
325+
"file-preview",
326+
"pager",
327+
"rest-form",
328+
"rest-form-modal"
329+
],
330+
"dependencies": [
331+
"lodash.debounce",
332+
"mobx",
333+
"mobx-i18n",
334+
"mobx-react",
335+
"mobx-react-helper",
336+
"mobx-restful",
337+
"web-utility"
338+
],
339+
"files": [
340+
{
341+
"path": "registry/new-york/blocks/rest-table/rest-table.tsx",
342+
"type": "registry:component"
343+
}
344+
]
314345
}
315346
]
316347
}

0 commit comments

Comments
 (0)