@_tc/template-core 0.1.4 → 0.1.6
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/.skills/tc-component-usage-skills/SKILL.md +110 -0
- package/.skills/tc-component-usage-skills/reference/component-api.md +774 -0
- package/.skills/tc-component-usage-skills/reference/examples.md +425 -0
- package/.skills/tc-component-usage-skills/reference/patterns.md +357 -0
- package/README.md +12 -5
- package/cjs/bundler/utils.js +1 -1
- package/esm/bundler/utils.js +34 -9
- package/fe/packages/ui/react/components/testPage/index.js +114 -19
- package/package.json +2 -2
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: tc-component-usage-skills
|
|
3
|
+
description: Use when building or modifying React UI in this TemplateCore project. Covers how to choose, compose, and correctly use components from `@tc/ui-react` (the `packages/ui/react/components/` library). Includes patterns for forms, tables, modals, drawers, menus, and all other TC UI components.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# TC Component Usage
|
|
7
|
+
|
|
8
|
+
Use this skill when writing React components that consume `@tc/ui-react`.
|
|
9
|
+
|
|
10
|
+
## Quick Decision Flow
|
|
11
|
+
|
|
12
|
+
1. **Displaying data?** → `DataTable` or `Card`
|
|
13
|
+
2. **Collecting input?** → `Form` / `SchemaForm` (built on `rc-field-form`) with `Input`, `Select`, `DatePicker`, `Switch`, `Textarea`, `InputNumber`, `Checkbox`, `Radio`, `TreeSelect`, `Upload`
|
|
14
|
+
3. **Page layout?** → `Layout`
|
|
15
|
+
4. **Overlays?** → `Modal` / `modalManager.confirm()` / `Drawer` / `Popup` / `Tooltip` / `ImagePreview`
|
|
16
|
+
5. **Navigation?** → `Menu` / `Breadcrumb` / `Tabs` / `Pagination`
|
|
17
|
+
6. **Feedback?** → `message.success()` / `Notification` / `Loading` / `Skeleton` / `ConfirmDialog`
|
|
18
|
+
7. **Search & filter?** → `TableSearch` / `Search`
|
|
19
|
+
|
|
20
|
+
## Core Patterns
|
|
21
|
+
|
|
22
|
+
### Controlled vs Uncontrolled
|
|
23
|
+
|
|
24
|
+
Every input-like component supports both modes. Check for `value !== undefined` → controlled mode, else uses `defaultValue` state internally.
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
// Controlled
|
|
28
|
+
<Input value={val} onChange={(v) => setVal(v)} />
|
|
29
|
+
|
|
30
|
+
// Uncontrolled
|
|
31
|
+
<Input defaultValue="hello" />
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Form Integration (rc-field-form)
|
|
35
|
+
|
|
36
|
+
`Form` / `FormItem` / `SchemaForm` wrap `rc-field-form`. `FormItem` auto-clones children to inject `value`/`onChange`. Prefer `SchemaForm` for data-driven forms:
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
const form = useForm<T>();
|
|
40
|
+
<SchemaForm form={form} schemas={[
|
|
41
|
+
{ key: 'name', label: 'Name', type: 'input', required: true },
|
|
42
|
+
{ key: 'status', label: 'Status', type: 'select', fieldProps: { options: [...] } },
|
|
43
|
+
]} onFinish={(vals) => ...} />
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Built-in `type` values: `input`, `inputNumber`, `select`, `textarea`, `switch`, `date`, `checkbox`.
|
|
47
|
+
Custom types are registered via `@tc/scalability/SchemaForm/data`.
|
|
48
|
+
|
|
49
|
+
### Modal (Declarative + Imperative)
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
// Declarative
|
|
53
|
+
<Modal open={open} onClose={() => setOpen(false)} title="Title">
|
|
54
|
+
<Content />
|
|
55
|
+
</Modal>
|
|
56
|
+
|
|
57
|
+
// Imperative (async ok supported)
|
|
58
|
+
modalManager.confirm({
|
|
59
|
+
title: 'Confirm',
|
|
60
|
+
content: 'Are you sure?',
|
|
61
|
+
onOk: async () => { await doSomething(); },
|
|
62
|
+
});
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### DataTable
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
<DataTable
|
|
69
|
+
columns={columns}
|
|
70
|
+
data={data}
|
|
71
|
+
rowKey="id"
|
|
72
|
+
loading={loading}
|
|
73
|
+
pagination={{ current, pageSize, total, onChange }}
|
|
74
|
+
rowSelection={{ selectedRowKeys, onChange }}
|
|
75
|
+
/>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## When to Use Each Overlay
|
|
79
|
+
|
|
80
|
+
| Component | Use Case |
|
|
81
|
+
|-----------|----------|
|
|
82
|
+
| `Modal` | Center-screen dialog, forms, confirmations |
|
|
83
|
+
| `Drawer` | Side panel for details, filters, settings |
|
|
84
|
+
| `Popup` | Dropdown menus, selects, hover cards |
|
|
85
|
+
| `Tooltip` | Brief hints on hover |
|
|
86
|
+
| `ImagePreview` | Full-screen image gallery with zoom/rotate |
|
|
87
|
+
| `Notification` | Passive corner notifications |
|
|
88
|
+
| `Message` | Transient top-center toasts |
|
|
89
|
+
|
|
90
|
+
## When You Need More Detail
|
|
91
|
+
|
|
92
|
+
Read the reference files (progressive disclosure):
|
|
93
|
+
|
|
94
|
+
- `reference/component-api.md` — Full props tables for every component
|
|
95
|
+
- `reference/patterns.md` — Deeper patterns: schema forms, table columns, action buttons, horizontal forms
|
|
96
|
+
- `reference/examples.md` — Copy-paste examples for common scenarios
|
|
97
|
+
|
|
98
|
+
## Validation
|
|
99
|
+
|
|
100
|
+
Before claiming work is done, verify:
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
pnpm type-check
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Component Import Convention
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import { Button, Form, FormItem, Input, DataTable, Modal } from '@tc/ui/react'
|
|
110
|
+
```
|