|
| 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 |
0 commit comments