Skip to content

Commit ed921e5

Browse files
JReinholdJReinhold
authored
Merge pull request #32340 from storybookjs/kiro-steering-docs
Build: Add Kiro steering docs
2 parents fc1a9d5 + c208aaf commit ed921e5

File tree

3 files changed

+241
-0
lines changed

3 files changed

+241
-0
lines changed

‎.kiro/steering/product.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Product Overview
2+
3+
Storybook is a frontend workshop for building UI components and pages in isolation. It's a tool for UI development, testing, and documentation that supports multiple frameworks including React, Angular, Vue, Svelte, and many others.
4+
5+
## Core Purpose
6+
7+
- Build bulletproof UI components faster
8+
- Develop UI components in isolation
9+
- Create comprehensive documentation for components
10+
- Enable visual testing and interaction testing
11+
- Support component-driven development workflows
12+
13+
## Key Features
14+
15+
- Multi-framework support (React, Angular, Vue, Svelte, etc.)
16+
- Extensive addon ecosystem for enhanced functionality
17+
- Built-in documentation generation
18+
- Visual testing capabilities
19+
- Component story format (CSF) for organizing examples
20+
- Hot module reloading for fast development
21+
22+
## Target Users
23+
24+
- Frontend developers building component libraries
25+
- Design system teams
26+
- UI/UX designers collaborating with developers
27+
- QA teams performing visual testing
28+
- Documentation writers creating component guides

‎.kiro/steering/structure.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# Project Structure
2+
3+
## Repository Layout
4+
5+
This is a monorepo with the main codebase in the `code/` directory and supporting files at the root level.
6+
7+
```ascii
8+
storybook/
9+
├── code/ # Main codebase (Nx workspace)
10+
│ ├── addons/ # Storybook addons (a11y, docs, jest, etc.)
11+
│ ├── builders/ # Build system integrations
12+
│ ├── core/ # Core Storybook UI and API
13+
│ ├── frameworks/ # Framework-specific implementations
14+
│ ├── lib/ # CLI tools and utilities
15+
│ ├── presets/ # Configuration presets
16+
│ ├── renderers/ # Framework renderers
17+
│ └── sandbox/ # Development sandboxes
18+
├── docs/ # Documentation source files
19+
├── scripts/ # Build and automation scripts
20+
├── test-storybooks/ # Integration test projects
21+
└── sandbox/ # Generated sandbox environments
22+
```
23+
24+
## Code Organization
25+
26+
### Core Packages (`code/`)
27+
28+
- **`core/`**: Main Storybook application (manager UI, preview, server)
29+
- **`addons/`**: Official addons (a11y, docs, jest, links, etc.)
30+
- **`frameworks/`**: Framework-specific integrations (angular, nextjs, sveltekit), usually a combination of a renderer and a builder
31+
- **`renderers/`**: Pure framework renderers (react, vue3, svelte)
32+
- **`builders/`**: Build tool integrations (vite, webpack5)
33+
- **`lib/`**: Utilities and CLI tools (cli-sb, codemod, create-storybook)
34+
- **`presets/`**: Webpack configuration presets for popular setups
35+
36+
### Package Naming Conventions
37+
38+
- Renderer packages: `@storybook/{renderer}` (e.g., `@storybook/react`)
39+
- Framework + builder: `@storybook/{renderer}-{builder}` OR `@storybook/{framework}` (e.g., `@storybook/react-vite`, `@storybook/sveltekit`)
40+
- Addons: `@storybook/addon-{name}` (e.g., `@storybook/addon-docs`)
41+
- Builders: `@storybook/builder-{name}` (e.g., `@storybook/builder-vite`)
42+
- Presets: `@storybook/preset-{name}` (e.g., `@storybook/preset-create-react-app`)
43+
44+
## File Conventions
45+
46+
### TypeScript Configuration
47+
48+
- Strict TypeScript with `noImplicitAny: true`
49+
- Module resolution: `bundler` mode
50+
- Target: `ES2020`
51+
- JSX: `preserve` mode
52+
53+
### Code Style
54+
55+
- **Prettier**: 100 character line width, single quotes, trailing commas
56+
- **Import Order**: Node modules → testing → React → Storybook internal → third-party → relative
57+
- **File Extensions**: Prefer `.ts`/`.tsx` over `.js`/`.jsx`
58+
- **Naming**: Use kebab-case for files, PascalCase for components
59+
60+
### Testing Structure
61+
62+
- **Unit Tests**: `*.test.ts` files alongside source code
63+
- **E2E Tests**: `code/e2e-tests/` directory with Playwright
64+
- **Stories**: `*.stories.ts` files for component examples
65+
- **Mocks**: `__mocks__/` directories for test fixtures
66+
67+
### Documentation
68+
69+
- **API Docs**: JSDoc comments with TSDoc format
70+
- **README**: Each package should have comprehensive README
71+
- **Stories**: Use Component Story Format (CSF) 3.0
72+
- **Migration Guides**: Document breaking changes
73+
74+
## Development Patterns
75+
76+
### Monorepo Workflow
77+
78+
1. All development happens in `code/` directory
79+
2. Use `yarn build --watch` for active development
80+
3. Nx handles dependency graph and caching
81+
4. All packages are versioned and released together
82+
83+
### Package Dependencies
84+
85+
- **Internal**: Use `workspace:*` for internal package references
86+
- **Peer Dependencies**: Framework packages are peer dependencies
87+
- **Dev Dependencies**: Testing and build tools in root package.json
88+
89+
### Build Outputs
90+
91+
- **`dist/`**: Compiled JavaScript and type definitions
92+
- **`template/`**: Framework-specific template files
93+
- **`*.d.ts`**: TypeScript declaration files
94+
95+
### Sandbox Development
96+
97+
- Use `yarn start` for quick React TypeScript sandbox
98+
- Use `yarn task` for custom framework/template selection
99+
- Sandboxes are generated in `sandbox/` directory
100+
- Link mode connects to local packages for development

‎.kiro/steering/tech.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# Technology Stack
2+
3+
## Build System & Package Management
4+
5+
- **Monorepo**: Managed with Nx for build orchestration and caching
6+
- **Package Manager**: Yarn 4 with workspaces
7+
- **Node.js**: Version 22+ (specified in .nvmrc)
8+
- **Build Tool**: Custom build scripts with esbuild and Vite integration
9+
10+
## Core Technologies
11+
12+
- **TypeScript**: Primary language with strict configuration
13+
- **React**: Main UI framework for Storybook's own interface
14+
- **Vite**: Build tool and dev server for modern frameworks
15+
- **Webpack 5**: Alternative bundler support
16+
- **ESBuild**: Fast JavaScript bundler and minifier
17+
18+
## Testing & Quality
19+
20+
- **Vitest**: Primary test runner with coverage via Istanbul
21+
- **Playwright**: End-to-end testing framework
22+
- **ESLint**: Code linting with extensive custom rules
23+
- **Prettier**: Code formatting with custom plugins
24+
- **Chromatic**: Visual testing and review
25+
26+
## Development Workflow
27+
28+
- **Hot Module Reloading**: Fast development feedback
29+
- **Watch Mode**: Automatic rebuilds during development
30+
- **Parallel Builds**: Nx orchestrates parallel package builds
31+
- **Caching**: Aggressive build and test caching via Nx
32+
33+
## Common Commands
34+
35+
### Development
36+
37+
```bash
38+
# Start development environment with React TypeScript sandbox
39+
yarn start
40+
41+
# Start with custom template selection
42+
yarn task
43+
44+
# Build specific packages in watch mode
45+
cd code && yarn build --watch <package-names>
46+
47+
# Run Storybook UI development server
48+
yarn storybook:ui
49+
50+
# Create a standalone sandbox to develop against a specific framework
51+
yarn task --task sandbox
52+
```
53+
54+
### Testing
55+
56+
```bash
57+
# Run all tests
58+
yarn test
59+
60+
# Run tests in watch mode
61+
yarn test:watch
62+
63+
# Run specific package tests
64+
yarn nx test <package-name>
65+
66+
# Run E2E tests
67+
yarn playwright test
68+
```
69+
70+
### Building
71+
72+
```bash
73+
# Build all packages
74+
yarn build
75+
76+
# Build in production mode (required for Angular)
77+
yarn build --prod
78+
79+
# Build with watch mode
80+
yarn build --watch
81+
82+
# Build specific packages
83+
yarn build <package-1> <package-2>
84+
```
85+
86+
### Linting & Formatting
87+
88+
```bash
89+
# Lint JavaScript/TypeScript
90+
yarn lint:js
91+
92+
# Lint markdown and code samples
93+
yarn lint:md
94+
95+
# Auto-fix linting issues
96+
yarn lint:js --fix
97+
98+
# Format code with Prettier
99+
yarn lint:prettier
100+
```
101+
102+
## Framework Support
103+
104+
Storybook supports multiple frontend frameworks through dedicated packages:
105+
106+
- React (react, react-vite, react-webpack5)
107+
- Angular (angular)
108+
- Vue (vue3, vue3-vite)
109+
- Svelte (svelte, svelte-vite, sveltekit)
110+
- Web Components (web-components, web-components-vite)
111+
- HTML (html, html-vite)
112+
- Preact (preact, preact-vite)
113+
- Next.js (nextjs, nextjs-vite)

0 commit comments

Comments
 (0)