cherry-studio/packages/ui/stories
MyPrototypeWhat db4fcac768 feat: enhance Selector component with SearchableSelector and update exports
- Introduced a new SearchableSelector component for improved item selection with search functionality.
- Updated the Selector component to streamline item selection and added type exports for better type safety.
- Refactored the preferenceSchemas to use the new MathEngine type for better clarity.
- Added comprehensive README documentation for the Selector component detailing usage and features.
- Updated various components and stories to utilize the new Selector and SearchableSelector components.
2025-09-30 14:59:33 +08:00
..
components feat: enhance Selector component with SearchableSelector and update exports 2025-09-30 14:59:33 +08:00
hero.ts feat: update UI package with Storybook integration and Tailwind CSS v4 configuration 2025-09-15 19:26:23 +08:00
README.md feat: update UI package with Storybook integration and Tailwind CSS v4 configuration 2025-09-15 19:26:23 +08:00
tailwind.css feat: update UI package with Storybook integration and Tailwind CSS v4 configuration 2025-09-15 19:26:23 +08:00

Stories 文档

这里存放所有组件的 Storybook stories 文件,与源码分离以保持项目结构清晰。

目录结构

stories/
├── components/
│   ├── base/           # 基础组件 stories
│   ├── display/        # 展示组件 stories
│   ├── interactive/    # 交互组件 stories
│   ├── icons/          # 图标组件 stories
│   ├── layout/         # 布局组件 stories
│   └── composite/      # 复合组件 stories
└── README.md          # 本说明文件

命名约定

  • 文件名格式:ComponentName.stories.tsx
  • Story 标题格式:分类/组件名,如 Base/CustomTag
  • 导入路径:使用相对路径导入源码组件,如 ../../../src/components/base/ComponentName

编写指南

每个 stories 文件应该包含:

  1. Default - 基本用法示例
  2. Variants - 不同变体/状态
  3. Interactive - 交互行为演示(如果适用)
  4. Use Cases - 实际使用场景

启动 Storybook

cd packages/ui
yarn storybook

访问 http://localhost:6006 查看组件文档。