Skip to content

Commit 327fbf8

Browse files
TechQueryTechQuery
committed
[refactor] simplify Copilot's source codes
1 parent 8887963 commit 327fbf8

File tree

9 files changed

+261
-324
lines changed

9 files changed

+261
-324
lines changed

‎README.md‎

Lines changed: 102 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,32 @@
33
A **Pagination Table** & **Scroll List** component suite for [CRUD operation][1], which is based on [MobX RESTful][2], [React][3] & [Shadcn UI][4].
44

55
[![MobX compatibility](https://img.shields.io/badge/Compatible-1?logo=mobx&label=MobX%206%2F7)][5]
6+
[![NPM Dependency](https://img.shields.io/librariesio/github/idea2app/MobX-RESTful-Shadcn.svg)][6]
7+
[![CI & CD](https://github.com/idea2app/MobX-RESTful-Shadcn/actions/workflows/main.yml/badge.svg)][7]
68

79
## Components
810

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/)
11+
1. [Badge Bar](https://mobx-restful-shadcn.idea2.app/)
12+
2. [Badge Input](https://mobx-restful-shadcn.idea2.app/)
13+
3. [Image Preview](https://mobx-restful-shadcn.idea2.app/)
14+
4. [File Preview](https://mobx-restful-shadcn.idea2.app/)
15+
5. [File Picker](https://mobx-restful-shadcn.idea2.app/)
16+
6. [File Uploader](https://mobx-restful-shadcn.idea2.app/)
17+
7. [Form Field](https://mobx-restful-shadcn.idea2.app/)
18+
8. [Range Input](https://mobx-restful-shadcn.idea2.app/)
19+
9. [Array Field](https://mobx-restful-shadcn.idea2.app/)
20+
10. [REST Form](https://mobx-restful-shadcn.idea2.app/)
21+
11. [REST Form Modal](https://mobx-restful-shadcn.idea2.app/)
22+
12. [Pager](https://mobx-restful-shadcn.idea2.app/)
23+
13. [REST Table](https://mobx-restful-shadcn.idea2.app/)
24+
14. [Scroll Boundary](https://mobx-restful-shadcn.idea2.app/)
25+
15. [Scroll List](https://mobx-restful-shadcn.idea2.app/)
26+
16. [Searchable Input](https://mobx-restful-shadcn.idea2.app/)
2527

2628
## Installation
2729

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-
4230
```shell
43-
npx shadcn@latest add https://mobx-restful-shadcn.vercel.app/r/rest-table.json
31+
npx shadcn-helper add https://mobx-restful-shadcn.idea2.app/r/rest-table.json
4432
```
4533

4634
Replace `rest-table` with any component name from the list above.
@@ -53,17 +41,22 @@ Set up i18n translation model for UI text:
5341

5442
```typescript
5543
import { TranslationModel } from "mobx-i18n";
44+
import { IDType } from "mobx-restful";
5645

5746
export const i18n = new TranslationModel({
5847
en_US: {
48+
load_more: "Load more",
49+
no_more: "No more",
50+
create: "Create",
51+
view: "View",
5952
submit: "Submit",
6053
cancel: "Cancel",
61-
create: "Create",
6254
edit: "Edit",
6355
delete: "Delete",
64-
view: "View",
65-
total_x_rows: "Total {{totalCount}} rows",
66-
sure_to_delete_x: "Are you sure to delete {{keys}}?",
56+
total_x_rows: ({ totalCount }: { totalCount: number }) =>
57+
`Total ${totalCount} rows`,
58+
sure_to_delete_x: ({ keys }: { keys: IDType[] }) =>
59+
`Are you sure to delete ${keys.join(", ")}?`,
6760
},
6861
});
6962
```
@@ -96,95 +89,103 @@ export const repositoryStore = new RepositoryModel("idea2app");
9689
```tsx
9790
import { computed } from "mobx";
9891
import { observer } from "mobx-react";
92+
import { Component } from "react";
93+
9994
import { BadgeBar } from "@/components/ui/badge-bar";
10095
import { RestTable, Column } from "@/components/ui/rest-table";
10196
import repositoryStore, { Repository } from "@/models/Repository";
10297
import { i18n } from "@/models/Translation";
10398

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-
});
99+
@observer
100+
export class RepositoryTable extends Component {
101+
@computed
102+
get columns() {
103+
return [
104+
{
105+
key: "full_name",
106+
renderHead: "Repository Name",
107+
renderBody: ({ html_url, full_name }) => (
108+
<a target="_blank" href={html_url}>
109+
{full_name}
110+
</a>
111+
),
112+
required: true,
113+
minLength: 3,
114+
invalidMessage: "Input 3 characters at least",
115+
},
116+
{ key: "homepage", type: "url", renderHead: "Home Page" },
117+
{ key: "language", renderHead: "Programming Language" },
118+
{
119+
key: "topics",
120+
renderHead: "Topic",
121+
renderBody: ({ topics }) => (
122+
<BadgeBar
123+
list={(topics || []).map((text) => ({
124+
text,
125+
link: `https://github.com/topics/${text}`,
126+
}))}
127+
/>
128+
),
129+
},
130+
{ key: "stargazers_count", type: "number", renderHead: "Star Count" },
131+
{ key: "description", renderHead: "Description", rows: 3 },
132+
];
133+
}
134+
135+
render() {
136+
return (
137+
<RestTable
138+
editable
139+
deletable
140+
columns={this.columns}
141+
store={repositoryStore}
142+
translator={i18n}
143+
onCheck={console.log}
144+
/>
145+
);
146+
}
147+
}
151148
```
152149

153150
### Scroll List
154151

155152
```tsx
156153
import { observer } from "mobx-react";
154+
157155
import { ScrollList } from "@/components/ui/scroll-list";
158156
import repositoryStore from "@/models/Repository";
159157
import { i18n } from "@/models/Translation";
160158

161-
export default observer(() => (
159+
export const ScrollListExample = () => (
162160
<ScrollList
163161
translator={i18n}
164162
store={repositoryStore}
165163
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>
164+
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
165+
{allItems.map(({ id, name, description }) => (
166+
<li key={id} className="p-4 border rounded">
167+
<h3>{name}</h3>
168+
<p>{description}</p>
169+
</li>
172170
))}
173-
</div>
171+
</ul>
174172
)}
175173
/>
176-
));
174+
);
177175
```
178176

179177
### File Uploader
180178

181179
```tsx
182-
import { FileUploader } from "@/components/ui/file-uploader";
183-
import fileStore from "@/models/File";
180+
import { FileModel, FileUploader } from "@/components/ui/file-uploader";
181+
182+
class MyFileModel extends FileModel {}
183+
184+
const store = new MyFileModel();
184185

185186
export const EditorPage = () => (
186187
<FileUploader
187-
store={fileStore}
188+
store={store}
188189
accept="image/*"
189190
name="images"
190191
multiple
@@ -201,10 +202,10 @@ This is a custom component registry built with Next.js and compatible with the `
201202
### Getting Started
202203

203204
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`
205+
2. Install dependencies: `pnpm install`
206+
3. Run development server: `pnpm dev`
207+
4. Build registry: `pnpm registry:build`
208+
5. Build project: `pnpm build`
208209

209210
### Registry Structure
210211

@@ -216,11 +217,13 @@ This is a custom component registry built with Next.js and compatible with the `
216217
## Documentation
217218

218219
- [Shadcn UI Documentation](https://ui.shadcn.com/docs)
219-
- [MobX RESTful Documentation](https://github.com/idea2app/MobX-RESTful)
220220
- [Component Registry Documentation](https://ui.shadcn.com/docs/registry)
221+
- [MobX RESTful Documentation][2]
221222

222223
[1]: https://en.wikipedia.org/wiki/Create,_read,_update_and_delete
223224
[2]: https://github.com/idea2app/MobX-RESTful
224225
[3]: https://reactjs.org/
225226
[4]: https://ui.shadcn.com/
226227
[5]: https://mobx.js.org/
228+
[6]: https://libraries.io/npm/mobx-restful-shadcn
229+
[7]: https://github.com/idea2app/MobX-RESTful-Shadcn/actions/workflows/main.yml

‎components/example/form.tsx‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,37 @@
11
import { GitRepository } from "mobx-github";
22

33
import { i18n, topicStore } from "@/models/example";
4+
import { BadgeBar } from "@/registry/new-york/blocks/badge-bar/badge-bar";
45
import { Field } from "@/registry/new-york/blocks/rest-form/rest-form";
6+
import { Column } from "@/registry/new-york/blocks/rest-table/rest-table";
57
import { SearchableInput } from "@/registry/new-york/blocks/searchable-input/searchable-input";
68

7-
export const fields: Field<GitRepository>[] = [
9+
export const columns: Column<GitRepository>[] = [
810
{
911
key: "full_name",
10-
renderLabel: "Repository Name",
12+
renderHead: "Repository Name",
13+
renderBody: ({ html_url, full_name }) => (
14+
<a target="_blank" href={html_url} rel="noreferrer">
15+
{full_name}
16+
</a>
17+
),
1118
required: true,
1219
minLength: 3,
1320
invalidMessage: "Input 3 characters at least",
1421
},
15-
{ key: "homepage", type: "url", renderLabel: "Home Page" },
16-
{ key: "language", renderLabel: "Programming Language" },
22+
{ key: "homepage", type: "url", renderHead: "Home Page" },
23+
{ key: "language", renderHead: "Programming Language" },
1724
{
1825
key: "topics",
19-
renderLabel: "Topic",
26+
renderHead: "Topic",
27+
renderBody: ({ topics }) => (
28+
<BadgeBar
29+
list={(topics || []).map((text) => ({
30+
text,
31+
link: `https://github.com/topics/${text}`,
32+
}))}
33+
/>
34+
),
2035
renderInput: ({ topics }) => (
2136
<SearchableInput
2237
translator={i18n}
@@ -29,6 +44,13 @@ export const fields: Field<GitRepository>[] = [
2944
/>
3045
),
3146
},
32-
{ key: "stargazers_count", type: "number", renderLabel: "Star Count" },
33-
{ key: "description", renderLabel: "Description", rows: 3 },
47+
{ key: "stargazers_count", type: "number", renderHead: "Star Count" },
48+
{ key: "description", renderHead: "Description", rows: 3 },
3449
];
50+
51+
export const fields: Field<GitRepository>[] = columns.map(
52+
({ renderHead, renderBody, ...meta }) => ({
53+
...meta,
54+
renderLabel: renderHead,
55+
})
56+
);

0 commit comments

Comments
 (0)