|
| 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 | +This is `react-loqate`, a React component library for Loqate address search API integration. The main component is `AddressSearch` which provides an input field with dropdown suggestions that integrates with Loqate's address lookup services. |
| 8 | + |
| 9 | +## Development Commands |
| 10 | + |
| 11 | +### Building and Development |
| 12 | + |
| 13 | +- `pnpm build` - Build the library using tsup (ESM, CJS formats with TypeScript declarations) |
| 14 | +- `pnpm dev` - Start Storybook development server on port 6006 |
| 15 | +- `pnpm check` - Run linting and type checking (used by pre-commit hook) |
| 16 | + |
| 17 | +### Testing and Quality Assurance |
| 18 | + |
| 19 | +- `pnpm test` - Run tests with Vitest in watch mode |
| 20 | +- `pnpm test:ci` - Run tests once for CI |
| 21 | +- `pnpm lint` - Run ESLint and Prettier checks |
| 22 | +- `tsc` - Run TypeScript compiler for type checking |
| 23 | + |
| 24 | +### Publishing |
| 25 | + |
| 26 | +- `pnpm changeset` - Create a changeset for version management |
| 27 | +- `pnpm publish:ci` - Build and publish to npm (CI only) |
| 28 | + |
| 29 | +## Architecture |
| 30 | + |
| 31 | +### Main Component Structure |
| 32 | + |
| 33 | +- **Main Component**: `src/index.tsx` contains the `AddressSearch` component |
| 34 | +- **Default Components**: Located in `src/components/` - `DefaultInput`, `DefaultList`, `DefaultListItem` |
| 35 | +- **API Layer**: `src/utils/Loqate.ts` handles all API communication with Loqate services |
| 36 | +- **Custom Hooks**: `src/utils/useDebounceEffect.ts` for debouncing user input |
| 37 | + |
| 38 | +### Key Design Patterns |
| 39 | + |
| 40 | +- **Component Composition**: Supports custom components via `components` prop (Input, List, ListItem) |
| 41 | +- **Portal Rendering**: Uses MUI Base Portal for dropdown positioning (can be disabled with `inline` prop) |
| 42 | +- **Error Handling**: Two error types - `LoqateError` (API errors) and `ReactLoqateError` (client errors) |
| 43 | +- **Debouncing**: Built-in debounced API calls (default/configurable timeout) |
| 44 | + |
| 45 | +### API Integration |
| 46 | + |
| 47 | +The component integrates with two Loqate API endpoints: |
| 48 | + |
| 49 | +- **Find API**: Search for address suggestions based on text input |
| 50 | +- **Retrieve API**: Get full address details when user selects a suggestion |
| 51 | + |
| 52 | +### Dependencies |
| 53 | + |
| 54 | +- **Core**: React 18+, MUI Base (for Portal/ClickAwayListener), clsx for class management |
| 55 | +- **Build**: tsup for bundling, TypeScript for types |
| 56 | +- **Testing**: Vitest with jsdom, React Testing Library |
| 57 | +- **Development**: Storybook for component development, ESLint + Prettier for code quality |
| 58 | + |
| 59 | +## Testing |
| 60 | + |
| 61 | +Tests use Vitest with React Testing Library and jsdom environment. Test files are located in: |
| 62 | + |
| 63 | +- `src/index.test.tsx` - Main component tests |
| 64 | +- `src/utils/__tests__/` - Utility function tests |
| 65 | + |
| 66 | +Coverage is configured to include all TypeScript files in the `src/` directory. |
| 67 | + |
| 68 | +## Configuration Notes |
| 69 | + |
| 70 | +- **TypeScript**: Strict mode enabled with comprehensive type checking |
| 71 | +- **ESLint**: Uses recommended rules + TypeScript + Storybook plugins |
| 72 | +- **Prettier**: Configured for 80-character lines, semicolons, single quotes |
| 73 | +- **Husky**: Pre-commit hook runs `pnpm check` |
| 74 | +- **Package Manager**: Uses pnpm with lockfile |
| 75 | + |
| 76 | +## Release Management |
| 77 | + |
| 78 | +Uses Changesets for version management: |
| 79 | + |
| 80 | +1. Create feature branch with changes |
| 81 | +2. Add changeset with `pnpm changeset` |
| 82 | +3. Create PR to main |
| 83 | +4. GitHub Actions creates/updates release PR |
| 84 | +5. Merge release PR triggers automated publishing |
0 commit comments