Skip to content

Commit 533dcc0

Browse files
valentinpalkovicvalentinpalkovic
authored
Merge pull request storybookjs#34063 from storybookjs/introduce-serena
Build: Add Serena MCP server configuration
2 parents 2a44aa7 + 23471d3 commit 533dcc0

6 files changed

Lines changed: 260 additions & 0 deletions

File tree

‎.serena/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/cache
2+
/project.local.yml

‎.serena/memories/project_overview.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Storybook - Project Overview
2+
3+
## Purpose
4+
Storybook is an open-source UI development tool for building, testing, and documenting UI components in isolation.
5+
It supports multiple frontend frameworks (React, Vue, Angular, Svelte, Web Components, Preact, Ember, HTML, etc.)
6+
and integrates with various build tools (Vite, Webpack5).
7+
8+
## Version
9+
Current version: 10.2.x (as of March 2026)
10+
11+
## Tech Stack
12+
- **Language**: TypeScript (strict mode), targeting ES2020
13+
- **Package Manager**: Yarn 4.10.3 (with workspaces)
14+
- **Node.js**: 22.21.1 (specified in `.nvmrc`)
15+
- **Monorepo Tool**: NX (with `--no-cloud` flag required to avoid NX Cloud login issues)
16+
- **Test Runner**: Vitest (primary), Playwright (E2E)
17+
- **Linting**: ESLint 8
18+
- **Formatting**: Prettier 3.7+
19+
- **Bundlers**: Vite 7, Webpack 5, esbuild
20+
- **UI Libraries**: React 18, react-aria (use specific submodules, not root imports)
21+
- **Build System**: Custom build via `jiti ./scripts/build/build-package.ts`
22+
23+
## Repository Structure
24+
```
25+
storybook/
26+
├── code/ # Main codebase
27+
│ ├── core/ # Core package (UI, API, manager, preview, server, etc.)
28+
│ ├── addons/ # Official addons (docs, controls, a11y, interactions, vitest, etc.)
29+
│ ├── builders/ # Build integrations (vite, webpack5, manager)
30+
│ ├── frameworks/ # Framework integrations (react-vite, nextjs, angular, vue3-vite, etc.)
31+
│ ├── renderers/ # Framework renderers (react, vue3, svelte, html, etc.)
32+
│ ├── lib/ # Shared libraries (cli, codemod, csf-tools, etc.)
33+
│ ├── presets/ # Preset packages
34+
│ ├── e2e-tests/ # Playwright E2E tests
35+
│ └── .storybook/ # Internal Storybook config (dogfooding)
36+
├── scripts/ # Build/CI/task scripts
37+
├── docs/ # Documentation
38+
├── sandbox/ # Generated sandbox environments for testing
39+
└── test-storybooks/ # Test storybook configurations
40+
```
41+
42+
## Key Packages
43+
- `@storybook/core` - Core functionality (UI, API, server, preview, channels, etc.)
44+
- `@storybook/react`, `@storybook/vue3`, etc. - Framework renderers
45+
- `@storybook/react-vite`, `@storybook/nextjs`, etc. - Framework integrations
46+
- `@storybook/addon-docs`, `@storybook/addon-a11y`, etc. - Official addons
47+
- `storybook` - CLI package
48+
- `create-storybook` - Project scaffolding

‎.serena/memories/style_and_conventions.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Code Style & Conventions
2+
3+
## TypeScript
4+
- **Strict mode** enabled (`strict: true` in tsconfig)
5+
- Target: ES2020, Module: Preserve, ModuleResolution: bundler
6+
- `noImplicitAny: true`
7+
- JSX: preserve
8+
- No emit (handled by build tools, not tsc)
9+
10+
## Prettier Configuration
11+
- Print width: 100
12+
- Tab width: 2
13+
- Single quotes: yes
14+
- Trailing commas: es5
15+
- Arrow parens: always
16+
- Brace style: 1tbs (one true brace style)
17+
- Import order (via @trivago/prettier-plugin-sort-imports):
18+
1. `node:` builtins
19+
2. `vitest`, `@testing-library`
20+
3. `react`, `react-dom`
21+
4. `storybook/internal`
22+
5. `@storybook/[non-addon]`
23+
6. `@storybook/addon-*`
24+
7. Third-party modules
25+
8. Relative imports (`./`, `../`)
26+
- Import order separation: yes (blank lines between groups)
27+
- Import specifiers sorted: yes
28+
29+
## ESLint Rules (Notable)
30+
- `react-aria` and `react-stately`: must import from specific submodules (e.g., `@react-aria/overlays`), NOT root
31+
- `react-aria-components`: must use `react-aria-components/patched-dist/ComponentX` entrypoints for tree-shaking
32+
- `es-toolkit`: must use sub-exports (e.g., `es-toolkit/array`), NOT root import
33+
- `import-x/no-extraneous-dependencies`: off
34+
- `react/react-in-jsx-scope`: off
35+
- TypeScript `dot-notation` with `allowIndexSignaturePropertyAccess`
36+
- Custom local rules: `no-uncategorized-errors`, `storybook-monorepo-imports`, `no-duplicated-error-codes`
37+
38+
## Naming Conventions
39+
- Files: kebab-case for most files (e.g., `my-component.ts`)
40+
- Components: PascalCase for React components
41+
- Types/Interfaces: PascalCase
42+
- Variables/functions: camelCase
43+
- Constants: UPPER_SNAKE_CASE for true constants, camelCase otherwise
44+
45+
## Test Files
46+
- Pattern: `*.test.ts`, `*.test.tsx`, `*.spec.ts`, `*.spec.tsx`
47+
- Stories: `*.stories.ts`, `*.stories.tsx`
48+
- Test fixtures in `__testfixtures__/` directories
49+
- Tests in `__tests__/` directories or alongside source files
50+
51+
## Monorepo Import Rules
52+
- Internal packages use `workspace:*` for dependencies
53+
- Custom ESLint rule `storybook-monorepo-imports` enforces correct import patterns within the monorepo

‎.serena/memories/suggested_commands.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# Suggested Commands
2+
3+
## Installation
4+
```bash
5+
yarn install # Install all dependencies (from repo root)
6+
```
7+
8+
## Building
9+
```bash
10+
# Compile a single package (always use --no-cloud to avoid NX Cloud issues)
11+
yarn nx compile core --no-cloud
12+
yarn nx compile @storybook/react --no-cloud
13+
14+
# Compile all packages
15+
yarn nx run-many -t compile --no-cloud
16+
17+
# Production build of a package
18+
cd code && yarn build
19+
```
20+
21+
## Testing
22+
```bash
23+
# Run all unit tests (from repo root or code/)
24+
cd code && yarn test
25+
# or from root:
26+
yarn test
27+
28+
# Run tests in watch mode
29+
cd code && yarn test:watch
30+
31+
# Run specific test file
32+
cd code && yarn test:watch -- --project <project> <test-pattern>
33+
34+
# E2E tests (Playwright)
35+
cd code && npx playwright test
36+
```
37+
38+
## Linting & Formatting
39+
```bash
40+
# Run all linting
41+
cd code && yarn lint
42+
43+
# Lint JS/TS only
44+
cd code && yarn lint:js
45+
46+
# Format with Prettier
47+
cd code && yarn lint:prettier '**/*.{css,html,json,md,yml}'
48+
49+
# Run knip (unused code detection)
50+
cd code && yarn knip
51+
```
52+
53+
## Running the Internal Dev Storybook
54+
```bash
55+
# Must compile core first!
56+
yarn nx compile core --no-cloud
57+
58+
# Then start the dev server (from code/ dir)
59+
cd code && yarn storybook:ui
60+
61+
# Or with --ci flag (no interactive):
62+
cd code && yarn storybook:ui --ci
63+
64+
# Build static storybook
65+
cd code && yarn storybook:ui:build
66+
```
67+
68+
## Sandbox / Task System
69+
```bash
70+
# Start a sandbox with a specific template
71+
yarn start # defaults to react-vite/default-ts
72+
73+
# Run a task with a specific template
74+
yarn task --task dev --template react-vite/default-ts --start-from=install
75+
```
76+
77+
## NX Commands
78+
```bash
79+
# Always use --no-cloud flag!
80+
yarn nx compile <package> --no-cloud
81+
yarn nx run-many -t compile --no-cloud
82+
yarn nx show projects --affected
83+
```
84+
85+
## Git
86+
```bash
87+
git status
88+
git diff
89+
git log --oneline -10
90+
git checkout next # main branch is "next"
91+
```
92+
93+
## System Utilities (macOS/Darwin)
94+
```bash
95+
ls, cd, pwd, cat, head, tail
96+
grep, find, xargs
97+
curl, wget
98+
python3, node
99+
open <file> # open in default app
100+
pbcopy, pbpaste # clipboard
101+
```

‎.serena/memories/task_completion_checklist.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Task Completion Checklist
2+
3+
After completing a coding task, run through these steps:
4+
5+
## 1. TypeScript Compilation
6+
Ensure the modified package(s) compile without errors:
7+
```bash
8+
yarn nx compile <package-name> --no-cloud
9+
```
10+
11+
## 2. Linting
12+
Run lint on the changed files or the whole codebase:
13+
```bash
14+
cd code && yarn lint:js
15+
```
16+
17+
## 3. Formatting
18+
Ensure code is properly formatted:
19+
```bash
20+
cd code && yarn lint:prettier '<changed-files>'
21+
```
22+
23+
## 4. Unit Tests
24+
Run relevant tests:
25+
```bash
26+
cd code && yarn test <test-pattern>
27+
```
28+
29+
## 5. Pre-commit Checks
30+
The project uses husky + lint-staged for pre-commit hooks:
31+
- JS/TS files: ESLint with `--fix`
32+
- EJS files: ejslint
33+
- CSS/HTML/JSON/MD/YML: Prettier
34+
- package.json: lint:package
35+
36+
## Notes
37+
- The main branch is `next` (not `main` or `master`)
38+
- Always use `--no-cloud` with NX commands
39+
- Before starting the dev server, ensure core is compiled: `yarn nx compile core --no-cloud`

‎.serena/project.yml‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
project_name: "storybook"
2+
3+
languages:
4+
- typescript
5+
6+
encoding: "utf-8"
7+
8+
ignore_all_files_in_gitignore: true
9+
ignored_paths: []
10+
11+
read_only: false
12+
13+
excluded_tools: []
14+
included_optional_tools: []
15+
fixed_tools: []
16+
17+
read_only_memory_patterns: []

0 commit comments

Comments
 (0)