Skip to content

Commit 9512390

Browse files
committed
docs: Add CLAUDE.md for AI assistant guidance
Add project documentation file with essential information about the codebase architecture, development commands, and code conventions.
1 parent 055b1a0 commit 9512390

1 file changed

Lines changed: 110 additions & 0 deletions

File tree

CLAUDE.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
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 Overview
6+
7+
@seamapi/react is a React component library for Seam smart device management. It provides white-labeled UI components for device management, access codes, and thermostat controls. Components are available as React components and as native Web Components.
8+
9+
## Tech Stack
10+
11+
- **React 18+** with TypeScript
12+
- **Vite** for building elements bundle
13+
- **tsc/tsc-alias** for TypeScript compilation
14+
- **Vitest** with happy-dom for testing
15+
- **Storybook 7** for component development
16+
- **SCSS** for styling (compiled with Sass)
17+
- **@tanstack/react-query** for data fetching
18+
- **@seamapi/http** for Seam API communication
19+
- **@seamapi/react-query** for query hooks
20+
21+
## Essential Commands
22+
23+
```bash
24+
npm start # Start Storybook development (runs examples + storybook)
25+
npm run build # Build the library (JS + CSS + elements)
26+
npm test # Run tests with Vitest
27+
npm run test:watch # Run tests in watch mode
28+
npm run lint # Run ESLint + Prettier + Stylelint
29+
npm run format # Auto-fix linting issues
30+
npm run typecheck # Run TypeScript type checking
31+
npm run storybook # Run Storybook only
32+
npm run examples # Run example apps
33+
npm run generate # Generate icon components from SVGs in assets/icons
34+
```
35+
36+
## Project Structure
37+
38+
```
39+
src/
40+
├── index.ts # Main export entry point
41+
├── hooks.ts # Hooks-only entry point
42+
├── elements.ts # Web Components entry point
43+
├── index.scss # Main stylesheet
44+
└── lib/
45+
├── seam/
46+
│ ├── SeamProvider.tsx # Main context provider
47+
│ ├── components/ # UI components
48+
│ │ ├── AccessCodeDetails/
49+
│ │ ├── AccessCodeTable/
50+
│ │ ├── ConnectAccountButton/
51+
│ │ ├── CreateAccessCodeForm/
52+
│ │ ├── DeviceDetails/
53+
│ │ ├── DeviceTable/
54+
│ │ ├── EditAccessCodeForm/
55+
│ │ └── SupportedDeviceTable/
56+
│ ├── access-codes/ # Access code hooks
57+
│ ├── client-sessions/ # Session hooks
58+
│ ├── connected-accounts/ # Account hooks
59+
│ ├── devices/ # Device hooks
60+
│ └── thermostats/ # Thermostat hooks
61+
└── icons/ # Generated SVG icon components
62+
```
63+
64+
## Key Architecture Patterns
65+
66+
### Component Structure
67+
Each component typically has:
68+
- `ComponentName.tsx` - Main component implementation
69+
- `ComponentName.element.ts` - Web Component wrapper
70+
- `ComponentName.stories.tsx` - Storybook stories
71+
- `ComponentName.test.tsx` - Component tests (optional)
72+
73+
### Entry Points
74+
- `@seamapi/react` - Full library (components + hooks)
75+
- `@seamapi/react/hooks` - Hooks only (lighter bundle)
76+
- `@seamapi/react/elements` - Web Components bundle
77+
78+
### Path Aliases
79+
- `lib/*``./src/lib/*`
80+
- `fixtures/*``./test/fixtures/*`
81+
- `@seamapi/react``./src/index.ts`
82+
83+
## Code Style
84+
85+
- ESLint with standard-with-typescript config
86+
- Prettier for formatting
87+
- Stylelint for SCSS
88+
- Import sorting via eslint-plugin-simple-import-sort
89+
- Require `.js` extensions in imports (ES modules)
90+
- Use inline type imports: `import { type Foo } from 'bar.js'`
91+
- All CSS classes are prefixed with `seam-`
92+
93+
## Testing
94+
95+
Tests use Vitest with happy-dom environment. Test fixtures are in `test/fixtures/`.
96+
97+
```bash
98+
npm test # Run all tests
99+
npm run test:update # Update snapshots
100+
npm run test:ui # Open Vitest UI
101+
```
102+
103+
## Fake Seam Connect
104+
105+
The project uses @seamapi/fake-seam-connect for deterministic testing and Storybook development. Seed data is in `.storybook/seed-fake.js`.
106+
107+
## Publishing
108+
109+
- Automatic releases via semantic-release based on Angular commit message conventions
110+
- Manual releases via GitHub Actions workflow dispatch

0 commit comments

Comments
 (0)