@_tc/template-core 0.1.4 → 0.1.6

package/.skills/tc-component-usage-skills/reference/examples.md

@@ -0,0 +1,425 @@
+# Complete Examples
+
+Copy-paste starting points for common TC UI scenarios.
+
+---
+
+## Example 1: CRUD List Page
+
+```tsx
+import { useState, useEffect, useCallback } from 'react'
+import { DataTable, TableSearch, Button, Modal, SchemaForm, ConfirmDialog, message } from '@tc/ui/react'
+import type { TableColumnDef, TableSearchSchema } from '@tc/ui/react'
+
+interface Product {
+  id: number
+  name: string
+  price: number
+  status: 'active' | 'inactive'
+  createdAt: string
+}
+
+interface ProductSearch {
+  name?: string
+  status?: string
+}
+
+interface ProductForm {
+  name: string
+  price: number
+  status: 'active' | 'inactive'
+}
+
+export function ProductList() {
+  const [data, setData] = useState<Product[]>([])
+  const [loading, setLoading] = useState(false)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [editingId, setEditingId] = useState<number | null>(null)
+  const [deleteId, setDeleteId] = useState<number | null>(null)
+  const [form] = Form.useForm<ProductForm>()
+
+  const searchSchemas: TableSearchSchema<ProductSearch>[] = [
+    { key: 'name', label: 'Name', type: 'input', isPermanent: true },
+    { key: 'status', label: 'Status', type: 'select',
+      fieldProps: { options: [{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }] } },
+  ]
+
+  const columns: TableColumnDef<Product>[] = [
+    { key: 'id', title: 'ID', dataIndex: 'id', width: 80 },
+    { key: 'name', title: 'Name', dataIndex: 'name' },
+    { key: 'price', title: 'Price', dataIndex: 'price',
+      render: (value) => `¥${value}` },
+    { key: 'status', title: 'Status', dataIndex: 'status',
+      render: (value) => (
+        <span className={value === 'active' ? 'text-green-600' : 'text-gray-400'}>
+          {value}
+        </span>
+      ) },
+    { key: 'createdAt', title: 'Created', dataIndex: 'createdAt' },
+    { key: 'action', title: 'Actions', type: 'action',
+      actions: [
+        { key: 'edit', label: 'Edit', onClick: (record) => openEdit(record) },
+        { key: 'delete', label: 'Delete', danger: true, onClick: (record) => setDeleteId(record.id) },
+      ] },
+  ]
+
+  const fetchData = useCallback(async (search?: ProductSearch) => {
+    setLoading(true)
+    try {
+      const res = await api.getProducts(search)
+      setData(res)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const openCreate = () => {
+    setEditingId(null)
+    form.resetFields()
+    setModalOpen(true)
+  }
+
+  const openEdit = (record: Product) => {
+    setEditingId(record.id)
+    form.setFieldsValue(record)
+    setModalOpen(true)
+  }
+
+  const handleSubmit = async (values: ProductForm) => {
+    if (editingId !== null) {
+      await api.updateProduct(editingId, values)
+      message.success('Updated')
+    } else {
+      await api.createProduct(values)
+      message.success('Created')
+    }
+    setModalOpen(false)
+    fetchData()
+  }
+
+  const handleDelete = async () => {
+    if (deleteId === null) return
+    await api.deleteProduct(deleteId)
+    message.success('Deleted')
+    setDeleteId(null)
+    fetchData()
+  }
+
+  useEffect(() => { fetchData() }, [fetchData])
+
+  return (
+    <div>
+      <TableSearch<ProductSearch>
+        schemas={searchSchemas}
+        onSearch={fetchData}
+        onReset={() => fetchData()}
+        renderActionBtnArea={() => (
+          <Button variant="primary" onClick={openCreate}>Create Product</Button>
+        )}
+      />
+      <DataTable<Product>
+        columns={columns}
+        data={data}
+        rowKey="id"
+        loading={loading}
+      />
+
+      <Modal open={modalOpen} onClose={() => setModalOpen(false)}
+        title={editingId !== null ? 'Edit Product' : 'Create Product'}
+        footer={
+          <div className="flex justify-end gap-2">
+            <Button onClick={() => setModalOpen(false)}>Cancel</Button>
+            <Button variant="primary" onClick={() => form.submit()}>Save</Button>
+          </div>
+        }
+      >
+        <SchemaForm<ProductForm>
+          form={form}
+          schemas={[
+            { key: 'name', label: 'Name', type: 'input', required: true },
+            { key: 'price', label: 'Price', type: 'inputNumber',
+              fieldProps: { min: 0, precision: 2, allowStep: true } },
+            { key: 'status', label: 'Status', type: 'select',
+              fieldProps: { options: [{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }] } },
+          ]}
+          footerButtons={false}
+          onFinish={handleSubmit}
+        />
+      </Modal>
+
+      <ConfirmDialog
+        open={deleteId !== null}
+        title="Delete Product"
+        content="This action cannot be undone."
+        onOk={handleDelete}
+        onCancel={() => setDeleteId(null)}
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## Example 2: Detail Drawer
+
+```tsx
+import { Drawer, Button, Loading, Skeleton } from '@tc/ui/react'
+
+export function UserDetailDrawer({ userId, open, onClose }: {
+  userId: number | null
+  open: boolean
+  onClose: () => void
+}) {
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (userId && open) {
+      setLoading(true)
+      api.getUser(userId).then(setUser).finally(() => setLoading(false))
+    }
+  }, [userId, open])
+
+  return (
+    <Drawer open={open} onClose={onClose}
+      title="User Details" placement="right" width={520}
+    >
+      {loading ? (
+        <Skeleton mode="componentsloading" rows={6} showTitle />
+      ) : user ? (
+        <div className="space-y-4">
+          <Field label="Name" value={user.name} />
+          <Field label="Email" value={user.email} />
+          <Field label="Role" value={user.role} />
+          <Field label="Status" value={user.active ? 'Active' : 'Inactive'} />
+        </div>
+      ) : (
+        <p className="text-gray-400">No data</p>
+      )}
+    </Drawer>
+  )
+}
+```
+
+---
+
+## Example 3: App Shell with Sidebar Menu
+
+```tsx
+import { Layout, Menu, Breadcrumb } from '@tc/ui/react'
+import { useNavigate, useLocation } from 'react-router-dom'
+
+export function AppShell({ children }: { children: ReactNode }) {
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
+
+  return (
+    <Layout
+      sidebar={
+        <div className="flex flex-col h-full">
+          <div className="h-14 flex items-center px-4 font-bold text-lg">
+            My App
+          </div>
+          <Menu
+            mode="left"
+            selectedKey={pathname}
+            onSelect={(key) => navigate(key)}
+            items={[
+              { key: '/dashboard', label: 'Dashboard', icon: <DashboardIcon /> },
+              { key: '/products', label: 'Products', icon: <ProductIcon /> },
+              { key: '/users', label: 'Users', icon: <UserIcon />,
+                children: [
+                  { key: '/users/list', label: 'All Users' },
+                  { key: '/users/roles', label: 'Roles' },
+                ] },
+              { key: '/settings', label: 'Settings', icon: <SettingsIcon /> },
+            ]}
+          />
+        </div>
+      }
+    >
+      <div className="p-6">
+        <SimpleBreadcrumb />
+        {children}
+      </div>
+    </Layout>
+  )
+}
+```
+
+---
+
+## Example 4: Image Upload Form
+
+```tsx
+import { SchemaForm, ImageUpload } from '@tc/ui/react'
+
+interface BannerForm {
+  title: string
+  images: string[]
+}
+
+function BannerEditor() {
+  const [form] = Form.useForm<BannerForm>()
+
+  return (
+    <SchemaForm<BannerForm>
+      form={form}
+      schemas={[
+        { key: 'title', label: 'Title', type: 'input', required: true },
+        { key: 'images', label: 'Banner Images', type: 'input',
+          render: ({ value, onChange }) => (
+            <ImageUpload
+              value={value}
+              onChange={onChange}
+              maxCount={5}
+              accept=".jpg,.png,.webp"
+              beforeChange={(file) => {
+                if (file.size > 5 * 1024 * 1024) {
+                  message.warning('Max 5MB per image')
+                  return false
+                }
+              }}
+            />
+          ) },
+      ]}
+      onFinish={handleSubmit}
+    />
+  )
+}
+```
+
+---
+
+## Example 5: TreeSelect for Permissions
+
+```tsx
+import { TreeSelect } from '@tc/ui/react'
+
+function PermissionEditor() {
+  const [checked, setChecked] = useState<(string | number)[]>([])
+  const treeData = [
+    { id: '1', name: 'System', children: [
+      { id: '1-1', name: 'User Management' },
+      { id: '1-2', name: 'Role Management' },
+      { id: '1-3', name: 'Settings' },
+    ] },
+    { id: '2', name: 'Content', children: [
+      { id: '2-1', name: 'Articles' },
+      { id: '2-2', name: 'Comments' },
+    ] },
+  ]
+
+  return (
+    <TreeSelect
+      data={treeData}
+      value={checked}
+      onChange={({ checked: newChecked }) => setChecked(newChecked)}
+    />
+  )
+}
+```
+
+---
+
+## Example 6: DataTable with Row Selection (Batch Actions)
+
+```tsx
+import { DataTable, Button, message } from '@tc/ui/react'
+
+function BatchUserList() {
+  const [selectedKeys, setSelectedKeys] = useState<(string | number)[]>([])
+  const [users, setUsers] = useState<User[]>([])
+
+  const handleBatchDelete = async () => {
+    await api.batchDeleteUsers(selectedKeys as number[])
+    message.success(`Deleted ${selectedKeys.length} users`)
+    setSelectedKeys([])
+    fetchUsers()
+  }
+
+  return (
+    <div>
+      {selectedKeys.length > 0 && (
+        <div className="mb-4 flex gap-2 items-center">
+          <span>{selectedKeys.length} selected</span>
+          <Button state="danger" onClick={handleBatchDelete}>
+            Batch Delete
+          </Button>
+        </div>
+      )}
+      <DataTable<User>
+        columns={columns}
+        data={users}
+        rowKey="id"
+        rowSelection={{
+          selectedRowKeys: selectedKeys,
+          onChange: (keys) => setSelectedKeys(keys),
+        }}
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## Example 7: DatePicker Usage
+
+```tsx
+import { DatePicker } from '@tc/ui/react'
+
+// Single date
+<DatePicker
+  value={startDate}
+  onChange={(v) => setStartDate(v)}
+/>
+
+// Range with time
+<DatePicker
+  mode="range"
+  showTime
+  value={dateRange}
+  onChange={(v) => setDateRange(v)}
+  quickRanges={[
+    { label: 'This Month', range: [monthStart, new Date()] },
+  ]}
+/>
+
+// In SchemaForm
+{ key: 'birthday', label: 'Birthday', type: 'date' }
+{ key: 'period', label: 'Period', type: 'date',
+  fieldProps: { mode: 'range', showTime: true } }
+```
+
+---
+
+## Example 8: Tooltip & Popup
+
+```tsx
+import { Tooltip, Popup, Dropdown, Button } from '@tc/ui/react'
+
+// Simple tooltip
+<Tooltip content="Click to save changes">
+  <Button><SaveIcon /></Button>
+</Tooltip>
+
+// Dropdown menu
+<Dropdown items={[
+  { key: 'edit', label: 'Edit', onClick: handleEdit },
+  { key: 'share', label: 'Share', onClick: handleShare },
+  { key: 'delete', label: 'Delete', danger: true, onClick: handleDelete },
+]}>
+  <Button>Actions <ChevronDown /></Button>
+</Dropdown>
+
+// Custom popup
+<Popup
+  content={<UserCard user={user} />}
+  trigger="click"
+  onVisibleChange={(v) => console.log('popup:', v)}
+>
+  <span className="cursor-pointer underline">{user.name}</span>
+</Popup>
+```