|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project |
| 6 | + |
| 7 | +`@mll-lab/react-components` — shared React component library built on Ant Design 4, styled-components 6, and TypeScript 5. |
| 8 | +Published to npm with dual ESM/CJS output via Rollup. |
| 9 | + |
| 10 | +Repository: https://github.com/mll-lab/react-components |
| 11 | + |
| 12 | +## Commands |
| 13 | + |
| 14 | +Run `yarn` before other commands to install dependencies and ensure they are up to date. |
| 15 | + |
| 16 | +```bash |
| 17 | +yarn run test # Run all tests (Jest) |
| 18 | +yarn run test src/DatePicker/index.test.tsx # Run a single test file |
| 19 | +yarn run test --testPathPattern=DatePicker # Run tests matching a pattern |
| 20 | +yarn run lint # ESLint |
| 21 | +yarn run fix # ESLint with --fix |
| 22 | +yarn run typecheck # TypeScript check (no emit) |
| 23 | +yarn run build # Full build: clean + Rollup + TS declarations |
| 24 | +yarn run storybook # Dev server on port 6006 |
| 25 | +yarn run validate # lint + typecheck + test + test:storybook |
| 26 | +``` |
| 27 | + |
| 28 | +## Architecture |
| 29 | + |
| 30 | +### Component Pattern |
| 31 | + |
| 32 | +Each component lives in `src/<ComponentName>/` with an `index.tsx` entry. |
| 33 | +Many components are thin wrappers around Ant Design, re-exporting with consistent types: |
| 34 | + |
| 35 | +```tsx |
| 36 | +export const Alert: typeof AntdAlert = AntdAlert; |
| 37 | +export type AlertProps = AntdAlertProps; |
| 38 | +``` |
| 39 | + |
| 40 | +All public exports go through `src/index.ts` — named exports only, no default exports. |
| 41 | + |
| 42 | +### Styling |
| 43 | + |
| 44 | +- **`src/theme.ts`** defines `PALETTE` (raw colors) and `THEME` (semantic mapping like `successColor`, `errorColor`) |
| 45 | +- `<Provider>` wraps apps with ThemeProvider; components access theme via `useTheme()` |
| 46 | +- Ant Design Less overrides in `src/antd.less` |
| 47 | + |
| 48 | +### Storybook |
| 49 | + |
| 50 | +`yarn run storybook` starts the dev server on port 6006. |
| 51 | +`yarn run test:storybook` runs visual tests via Playwright against the running Storybook dev server. |
| 52 | +Playwright browsers must be installed first via `yarn playwright install`. |
| 53 | + |
| 54 | +### Testing |
| 55 | + |
| 56 | +- Test ID attribute is `id` (not `data-testid`) |
| 57 | + |
| 58 | +## Releases and Pre-releases |
| 59 | + |
| 60 | +Releases are fully automated via semantic-release. |
| 61 | +The release workflow is triggered by pushes to `master`, `alpha`, and `beta` branches. |
| 62 | + |
| 63 | +- **`master`** — stable releases (e.g. `20.4.0`) |
| 64 | +- **`alpha`** — alpha pre-releases (e.g. `19.16.0-alpha.1`), published on the `alpha` npm dist-tag |
| 65 | +- **`beta`** — beta pre-releases, published on the `beta` npm dist-tag |
| 66 | + |
| 67 | +### Pre-release workflow |
| 68 | + |
| 69 | +To test breaking or experimental changes before a stable release: |
| 70 | + |
| 71 | +1. Create/update the `alpha` branch (branch off `master` or merge into existing `alpha`) |
| 72 | +2. Push commits with conventional commit messages to `alpha` |
| 73 | +3. semantic-release automatically publishes a version like `X.Y.Z-alpha.N` to npm |
| 74 | +4. Consumers install with `yarn add @mll-lab/react-components@alpha` |
| 75 | +5. When ready, merge `alpha` into `master` for a stable release |
| 76 | + |
| 77 | +The `alpha` and `beta` branches are **long-lived** — do not delete them after merging. |
| 78 | +Conventional commits determine the version bump (feat = minor, fix = patch, BREAKING CHANGE = major) on all branches equally. |
| 79 | + |
| 80 | +## Conventions |
| 81 | + |
| 82 | +- Component types follow the pattern `ComponentNameProps` and `ComponentNameRef` |
0 commit comments