@merchant/ui

Hoson 统一 UI 组件库，基于 shadcn/ui + TanStack Table 的二次封装。

安装

# 配置 GitLab npm registry（一次性）
echo "@hoson:registry=https://git.hoson.com/api/v4/packages/npm/" >> .npmrc

# 安装
pnpm add @merchant/ui

使用

import { Button, DataTable, DataTableColumnHeader, cn } from "@merchant/ui"

DataTable 示例

import { DataTable, DataTableColumnHeader } from "@merchant/ui"
import type { ColumnDef } from "@tanstack/react-table"

interface Product {
  id: string
  name: string
  price: number
  status: "draft" | "published"
}

const columns: ColumnDef<Product>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => <DataTableColumnHeader column={column} title="产品" />,
  },
  {
    accessorKey: "price",
    header: ({ column }) => <DataTableColumnHeader column={column} title="价格" />,
  },
]

export function ProductTable({ data }: { data: Product[] }) {
  return (
    <DataTable
      columns={columns}
      data={data}
      searchableColumns={[{ id: "name", placeholder: "搜索产品..." }]}
    />
  )
}

Peer Dependencies

使用前需确保项目中已安装：

• react >= 18
• react-dom >= 18
• tailwind-merge >= 2
• lucide-react >= 0.400
• @tanstack/react-table >= 8（使用 DataTable 时）

Tailwind CSS 配置

在消费项目的 Tailwind 配置中包含组件库的路径：

// tailwind.config.ts 或 CSS 中
@source "../node_modules/@merchant/ui/dist";

包含组件

基础 UI

Button, Badge, Input, Label, Card, Dialog, DropdownMenu, Select, Checkbox, Table, Skeleton, Tooltip, Popover, Command, Sheet, Separator, Breadcrumb, Avatar, Sidebar...

业务组件

• DataTable - 统一表格（排序/筛选/分页/行选择/空状态/加载态）
• DataTableColumnHeader - 可排序列头
• DataTablePagination - 分页控制
• DataTableToolbar - 工具栏（搜索/筛选/列显隐）
• DataTableFacetedFilter - 分面筛选
• DataTableViewOptions - 列显隐切换

开发

pnpm install
pnpm dev    # 监听模式构建
pnpm build  # 生产构建