diff --git a/README.md b/README.md index 19f50ae6..a9444048 100755 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ ## Highlights -- **80+ components** — buttons, forms, data display, navigation, feedback, and more +- **86 documented component pages** — buttons, forms, data display, navigation, feedback, charts, icons, and more - **Visual Theme Editor** — 20+ built-in presets inspired by popular design systems; customise colours, typography, and spacing in real time without writing code - **Dark mode** — built-in light/dark themes with system preference detection and a `useTheme` hook - **TypeScript** — written in strict TypeScript with complete type definitions @@ -110,25 +110,29 @@ See the [Theming Guide](https://wangdicoder.github.io/tiny-design/theme/customis ## Packages -| Package | Description | -| ------- | ----------- | -| [@tiny-design/react](./packages/react) | Core component library | -| [@tiny-design/tokens](./packages/tokens) | V2 design tokens and theme runtime | -| [@tiny-design/icons](./packages/icons) | SVG icon components | -| [@tiny-design/cli](./packages/cli) | CLI for the Tiny Design component library | -| [@tiny-design/mcp](./packages/mcp) | MCP server for AI assistants to access the component library | +| Package | Description | +| ------------------------------------------ | ------------------------------------------------------------ | +| [@tiny-design/react](./packages/react) | Core component library | +| [@tiny-design/tokens](./packages/tokens) | V2 design tokens and theme runtime | +| [@tiny-design/icons](./packages/icons) | SVG icon components | +| [@tiny-design/charts](./packages/charts) | Theme-aware chart components built on Recharts | +| [@tiny-design/cli](./packages/cli) | CLI for the Tiny Design component library | +| [@tiny-design/mcp](./packages/mcp) | MCP server for AI assistants to access the component library | +| [@tiny-design/extract](./packages/extract) | Internal metadata extractor used by the CLI and MCP packages | ## Components -| Category | Count | Examples | -| -------- | :---: | -------- | -| Foundation | 5 | Button, Icon, Image, Link, Typography | -| Layout | 7 | Grid, Flex, Space, Split, Divider, Aspect Ratio | -| Navigation | 7 | Menu, Breadcrumb, Dropdown, Pagination, Steps, Anchor, SpeedDial | -| Data Display | 19 | Card, Carousel, Collapse, Tag, Tooltip, Tree, Table | -| Form | 22 | Input, Select, DatePicker, TimePicker, Checkbox, Radio, Slider | -| Feedback | 13 | Modal, Drawer, Overlay, Message, Notification, Alert, Skeleton | -| Miscellany | 5 | ConfigProvider, BackTop, Sticky, Keyboard, CopyToClipboard | +The documentation currently covers 86 component pages across React, Icons, and Charts. + +| Category | Count | Examples | +| ------------ | :---: | ------------------------------------------------------------------------ | +| Foundation | 5 | Button, Icon, Image, Link, Typography | +| Layout | 9 | AspectRatio, Divider, Flex, Grid, Layout, Space, Split, Waterfall | +| Navigation | 7 | Anchor, Breadcrumb, Dropdown, Menu, Pagination, QuickActions, Steps | +| Data Display | 23 | Avatar, Calendar, Card, Chart, Collapse, Table, Tooltip, Tree | +| Form | 23 | AutoComplete, Cascader, DatePicker, InputOTP, Select, TimePicker, Upload | +| Feedback | 14 | Alert, Drawer, Modal, Overlay, Message, Notification, Skeleton, Tour | +| Miscellany | 5 | ConfigProvider, BackTop, Sticky, Keyboard, CopyToClipboard | ## Internationalization @@ -140,16 +144,16 @@ import { ConfigProvider, zh_CN } from '@tiny-design/react'; ``` -| Locale | Language | -| ------ | -------- | +| Locale | Language | +| ------ | ----------------- | | en_US | English (default) | -| zh_CN | 简体中文 | +| zh_CN | 简体中文 | ## Browser Support | Edge
Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | -| --- | --- | --- | --- | -| last 2 versions | last 2 versions | last 2 versions | last 2 versions | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## Contributing @@ -158,6 +162,8 @@ pnpm install # install dependencies pnpm dev # start docs dev server pnpm build # build all packages pnpm test # run tests +pnpm test:accessibility # run Playwright + axe accessibility checks +pnpm test:visual # run Playwright visual regression checks pnpm lint # lint code ``` diff --git a/apps/docs/guides/cli.md b/apps/docs/guides/cli.md index ba2938cd..8a42e103 100644 --- a/apps/docs/guides/cli.md +++ b/apps/docs/guides/cli.md @@ -18,7 +18,7 @@ npm install -g @tiny-design/cli ## Quick Start ```bash -tiny-design list # List all 80+ components by category +tiny-design list # List React component metadata by category tiny-design info Button # Component props, types, defaults tiny-design doc Select # Full markdown documentation tiny-design demo Button Type # Runnable demo source code @@ -39,7 +39,7 @@ tiny-design usage ./src # Scan project for import stats | `tiny-design doc ` | Full markdown documentation for a component. | | `tiny-design demo [name]` | Demo source code (TSX). Lists available demos if no name is given. | | `tiny-design token [category]` | Design token values. Categories: colors, typography, spacing, breakpoints, shadows. | -| `tiny-design icon [search]` | List all 240+ icons or search by name. | +| `tiny-design icon [search]` | List all 243 icons or search by name. | ### Project Analysis diff --git a/apps/docs/guides/cli.zh_CN.md b/apps/docs/guides/cli.zh_CN.md index 4b6944eb..a81bbaef 100644 --- a/apps/docs/guides/cli.zh_CN.md +++ b/apps/docs/guides/cli.zh_CN.md @@ -18,7 +18,7 @@ npm install -g @tiny-design/cli ## 快速开始 ```bash -tiny-design list # 列出所有 80+ 个组件（按分类） +tiny-design list # 按分类列出 React 组件元数据 tiny-design info Button # 组件属性、类型、默认值 tiny-design doc Select # 完整的 Markdown 文档 tiny-design demo Button Type # 可运行的演示源代码 @@ -39,7 +39,7 @@ tiny-design usage ./src # 扫描项目中的导入统计 | `tiny-design doc ` | 组件的完整 Markdown 文档。 | | `tiny-design demo [name]` | 演示源代码（TSX）。未指定名称时列出可用演示。 | | `tiny-design token [category]` | 设计令牌值。分类：colors、typography、spacing、breakpoints、shadows。 | -| `tiny-design icon [search]` | 列出所有 240+ 个图标或按名称搜索。 | +| `tiny-design icon [search]` | 列出全部 243 个图标或按名称搜索。 | ### 项目分析 diff --git a/apps/docs/guides/mcp-server.md b/apps/docs/guides/mcp-server.md index 9cd4cc54..17d2c743 100644 --- a/apps/docs/guides/mcp-server.md +++ b/apps/docs/guides/mcp-server.md @@ -12,11 +12,11 @@ The Model Context Protocol (MCP) is an open standard that lets AI assistants con | Tool | Description | |------|-------------| -| `list_components` | List all 80+ components. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. | +| `list_components` | List extracted React component metadata. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. | | `get_component_props` | Get the full props interface for a component — types, required flags, descriptions. | | `get_component_example` | Get usage examples (demo code) for a component. | | `get_design_tokens` | Get v2 design tokens from the token registry — colors, typography, spacing, breakpoints, shadows. | -| `list_icons` | List all 240+ icon names. Filter by search term. | +| `list_icons` | List all 243 icon names. Filter by search term. | | `get_icon` | Get details and usage example for a specific icon. | ## Setup diff --git a/apps/docs/guides/mcp-server.zh_CN.md b/apps/docs/guides/mcp-server.zh_CN.md index db8bf359..2a438362 100644 --- a/apps/docs/guides/mcp-server.zh_CN.md +++ b/apps/docs/guides/mcp-server.zh_CN.md @@ -12,11 +12,11 @@ Model Context Protocol（MCP）是一个开放标准，允许 AI 助手连接外 | 工具 | 描述 | |------|------| -| `list_components` | 列出所有 80+ 个组件。可按分类筛选：基础、布局、导航、数据展示、表单、反馈、其他。 | +| `list_components` | 列出提取的 React 组件元数据。可按分类筛选：基础、布局、导航、数据展示、表单、反馈、其他。 | | `get_component_props` | 获取组件的完整属性接口——类型、是否必填、描述。 | | `get_component_example` | 获取组件的使用示例（演示代码）。 | | `get_design_tokens` | 获取设计令牌（SCSS 变量）——颜色、排版、间距、断点、阴影。 | -| `list_icons` | 列出所有 240+ 个图标名称。支持搜索过滤。 | +| `list_icons` | 列出全部 243 个图标名称。支持搜索过滤。 | | `get_icon` | 获取特定图标的详细信息和使用示例。 | ## 配置 diff --git a/apps/docs/public/llms.txt b/apps/docs/public/llms.txt index 1da838fc..df2b833a 100644 --- a/apps/docs/public/llms.txt +++ b/apps/docs/public/llms.txt @@ -2,7 +2,7 @@ > A friendly UI component set for React -Tiny Design (`@tiny-design/react`) is a comprehensive React UI component library with 80+ components, built with TypeScript, supporting theming via `ConfigProvider` and design tokens. +Tiny Design (`@tiny-design/react`) is a comprehensive React UI component library with 80+ exported React components, built with TypeScript, supporting theming via `ConfigProvider` and design tokens. - Docs: https://wangdicoder.github.io/tiny-design/ - GitHub: https://github.com/wangdicoder/tiny-design diff --git a/llms.txt b/llms.txt index a98fce60..3f673bdc 100644 --- a/llms.txt +++ b/llms.txt @@ -2,7 +2,7 @@ > A friendly UI component set for React -Tiny Design (`@tiny-design/react`) is a comprehensive React UI component library with 80+ components, built with TypeScript, supporting theming via `ConfigProvider` and design tokens. +Tiny Design (`@tiny-design/react`) is a comprehensive React UI component library with 80+ exported React components, built with TypeScript, supporting theming via `ConfigProvider` and design tokens. - Docs: https://wangdicoder.github.io/tiny-design/ - GitHub: https://github.com/wangdicoder/tiny-design diff --git a/packages/cli/README.md b/packages/cli/README.md index a41229fe..d3aaa627 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -11,7 +11,7 @@ npm install -g @tiny-design/cli ## Quick Start ```bash -tiny-design list # List all 80+ components by category +tiny-design list # List extracted React component metadata by category tiny-design info Button # Component props, types, defaults tiny-design doc Select # Full markdown documentation tiny-design demo Button Type # Runnable demo source code @@ -25,29 +25,29 @@ tiny-design usage ./src # Scan project for import stats ### Knowledge Query -| Command | Description | -|---------|-------------| -| `tiny-design list [category]` | List all components grouped by category | -| `tiny-design info ` | Props table with types, required flags, default values | -| `tiny-design doc ` | Full markdown documentation | -| `tiny-design demo [name]` | Demo source code (TSX) | -| `tiny-design token [category]` | Design token values (colors, typography, spacing, breakpoints, shadows) | -| `tiny-design icon [search]` | List all 240+ icons or search by name | +| Command | Description | +| ------------------------------------- | ----------------------------------------------------------------------- | +| `tiny-design list [category]` | List all components grouped by category | +| `tiny-design info ` | Props table with types, required flags, default values | +| `tiny-design doc ` | Full markdown documentation | +| `tiny-design demo [name]` | Demo source code (TSX) | +| `tiny-design token [category]` | Design token values (colors, typography, spacing, breakpoints, shadows) | +| `tiny-design icon [search]` | List all 243 icons or search by name | ### Project Analysis -| Command | Description | -|---------|-------------| -| `tiny-design doctor` | Diagnose project setup (React version, peer deps, duplicates) | -| `tiny-design usage [dir]` | Scan for `@tiny-design/react` import statistics | +| Command | Description | +| ------------------------- | ------------------------------------------------------------- | +| `tiny-design doctor` | Diagnose project setup (React version, peer deps, duplicates) | +| `tiny-design usage [dir]` | Scan for `@tiny-design/react` import statistics | ### Global Flags -| Flag | Description | Default | -|------|-------------|---------| -| `--format json\|text\|markdown` | Output format | `text` | -| `--lang en\|zh` | Output language | `en` | -| `--detail` | Include extended information | `false` | +| Flag | Description | Default | +| ------------------------------- | ---------------------------- | ------- | +| `--format json\|text\|markdown` | Output format | `text` | +| `--lang en\|zh` | Output language | `en` | +| `--detail` | Include extended information | `false` | ## Usage with AI Tools diff --git a/packages/icons/README.md b/packages/icons/README.md index ba40e4fc..c98c76ef 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -1,6 +1,6 @@ # @tiny-design/icons -SVG icon components for React, part of the Tiny Design system. Includes 242 icons auto-generated from the icon font. +SVG icon components for React, part of the Tiny Design system. Includes 243 icons auto-generated from the icon font. ## Install @@ -32,10 +32,10 @@ function App() { All icons accept the following props (plus any standard SVG attributes): -| Prop | Type | Default | Description | -| --- | --- | --- | --- | -| `size` | `string \| number` | `'1em'` | Width and height of the icon | -| `color` | `string` | `'currentColor'` | Fill color | +| Prop | Type | Default | Description | +| ------- | ------------------ | ---------------- | ---------------------------- | +| `size` | `string \| number` | `'1em'` | Width and height of the icon | +| `color` | `string` | `'currentColor'` | Fill color | ### Spinning Icons diff --git a/packages/mcp/README.md b/packages/mcp/README.md index 900d3e10..6783f567 100644 --- a/packages/mcp/README.md +++ b/packages/mcp/README.md @@ -50,14 +50,14 @@ Add to your MCP client config: ## Available Tools -| Tool | Description | -|------|-------------| -| `list_components` | List all 80+ components. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. | -| `get_component_props` | Get the full props interface for a component — types, required flags, descriptions. | -| `get_component_example` | Get usage examples (demo code) for a component. | -| `get_design_tokens` | Get v2 design tokens from the token registry — colors, typography, spacing, breakpoints, shadows. | -| `list_icons` | List all 240+ icon names. Filter by search term. | -| `get_icon` | Get details and usage example for a specific icon. | +| Tool | Description | +| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| `list_components` | List extracted React component metadata. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. | +| `get_component_props` | Get the full props interface for a component — types, required flags, descriptions. | +| `get_component_example` | Get usage examples (demo code) for a component. | +| `get_design_tokens` | Get v2 design tokens from the token registry — colors, typography, spacing, breakpoints, shadows. | +| `list_icons` | List all 243 icon names. Filter by search term. | +| `get_icon` | Get details and usage example for a specific icon. | ## Examples diff --git a/packages/react/README.md b/packages/react/README.md index 9b7c3157..dccecc2c 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -1,6 +1,6 @@ # @tiny-design/react -A friendly UI component library for React with 80+ components, theming, and i18n support. +A friendly UI component library for React with 80+ exported components, theming, and i18n support. ## Install @@ -31,22 +31,28 @@ function App() { ## Components ### Layout -Flex, Layout, Row, Col, Space, Divider, AspectRatio + +AspectRatio, Divider, Flex, Grid, Layout, Row, Col, Space, Split, Waterfall ### Navigation -Anchor, Breadcrumb, Menu, Link, Pagination, Steps, Tabs + +Anchor, Breadcrumb, Dropdown, Menu, Pagination, QuickActions, Steps ### Forms & Input -Input, InputNumber, InputPassword, Textarea, Button, Checkbox, Radio, Select, NativeSelect, AutoComplete, Cascader, DatePicker, TimePicker, ColorPicker, Slider, Switch, Rate, Segmented, Upload, Transfer, Form + +Form, AutoComplete, Cascader, Checkbox, ColorPicker, DatePicker, Input, InputNumber, InputPassword, InputOTP, NativeSelect, Radio, Rate, Segmented, Select, Slider, SplitButton, Switch, Tabs, Textarea, TimePicker, Transfer, Upload ### Data Display -Avatar, Badge, Card, Descriptions, Empty, Image, List, Table, Tag, Timeline, Tree, Typography, Progress, Statistic, Skeleton, Carousel + +Avatar, Badge, Calendar, Card, Carousel, Collapse, Countdown, Descriptions, Empty, Flip, List, Marquee, Popover, Progress, ScrollNumber, Statistic, Table, Tag, TextLoop, Timeline, Tooltip, Tree ### Feedback -Modal, Drawer, Alert, Tooltip, Popover, PopConfirm, Notification, Message, Result, Loader, LoadingBar -### Other -Dropdown, SplitButton, Overlay, Countdown, CopyToClipboard, Flip, BackTop, Sticky, QuickActions, Split, ScrollIndicator, StrengthIndicator, Transition +Alert, Drawer, Loader, LoadingBar, Message, Modal, Notification, Overlay, PopConfirm, Result, ScrollIndicator, Skeleton, StrengthIndicator, Tour + +### Foundation & Utilities + +Button, Image, Link, Typography, BackTop, ConfigProvider, CopyToClipboard, IntlProvider, Keyboard, Sticky, Transition ## Configuration @@ -55,21 +61,17 @@ Use `ConfigProvider` to set global defaults: ```tsx import { ConfigProvider, zh_CN } from '@tiny-design/react'; - + ``` -| Prop | Type | Default | Description | -| --- | --- | --- | --- | -| `theme` | `'light' \| 'dark' \| 'system' \| ThemeConfig` | `-` | Global theme mode or token config | -| `componentSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Global component size | -| `locale` | `Locale` | `-` | Locale for i18n | -| `prefixCls` | `string` | `'ty'` | CSS class prefix | +| Prop | Type | Default | Description | +| --------------- | ---------------------------------------------- | ------- | --------------------------------- | +| `theme` | `'light' \| 'dark' \| 'system' \| ThemeConfig` | `-` | Global theme mode or token config | +| `componentSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Global component size | +| `locale` | `Locale` | `-` | Locale for i18n | +| `prefixCls` | `string` | `'ty'` | CSS class prefix | ## Theming