|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Commands |
| 6 | + |
| 7 | +### Development |
| 8 | +```bash |
| 9 | +# Start development server (VitePress documentation site) |
| 10 | +npm run dev |
| 11 | + |
| 12 | +# Build documentation site |
| 13 | +npm run build |
| 14 | + |
| 15 | +# Build the Vue component library for production |
| 16 | +npm run build:production |
| 17 | +``` |
| 18 | + |
| 19 | +### Testing & Quality |
| 20 | +```bash |
| 21 | +# Run tests with Vitest |
| 22 | +npm run test |
| 23 | + |
| 24 | +# Run tests with coverage |
| 25 | +npm run coverage |
| 26 | + |
| 27 | +# Run linting |
| 28 | +npm run lint |
| 29 | + |
| 30 | +# Fix linting issues |
| 31 | +npm run lint-fix |
| 32 | + |
| 33 | +# Type checking |
| 34 | +npm run typecheck |
| 35 | +``` |
| 36 | + |
| 37 | +### Library Build |
| 38 | +```bash |
| 39 | +# Build the package for distribution |
| 40 | +npm run build:package |
| 41 | + |
| 42 | +# Build type declarations only |
| 43 | +npm run build:types |
| 44 | + |
| 45 | +# Full production build (package + types) |
| 46 | +npm run build:production |
| 47 | +``` |
| 48 | + |
| 49 | +## Architecture |
| 50 | + |
| 51 | +### Component Structure |
| 52 | +The project is a Vue 3 component library implementing Flowbite design system. Each component follows this structure: |
| 53 | +- `src/components/FwbComponentName/` - Component directory |
| 54 | + - `FwbComponentName.vue` - Main component implementation |
| 55 | + - `types.ts` - TypeScript type definitions for props and types |
| 56 | + - `composables/` - Vue composables for component logic (classes, state management) |
| 57 | + - `tests/` - Vitest test files (when present) |
| 58 | + |
| 59 | +### Key Patterns |
| 60 | +- **Class Generation**: Components use composables (e.g., `useComponentClasses.ts`) to generate Tailwind CSS classes based on props |
| 61 | +- **Type Safety**: All components have TypeScript definitions in separate `types.ts` files |
| 62 | +- **Composition API**: All components use Vue 3 Composition API with `<script setup>` |
| 63 | +- **Tailwind Integration**: Components use Tailwind CSS v4 with `tailwind-merge` for class management |
| 64 | +- **Component Prefix**: All components use `Fwb` prefix (Flowbite Web) |
| 65 | + |
| 66 | +### Import Aliases |
| 67 | +- `@/` maps to `./src/` directory for clean imports |
| 68 | + |
| 69 | +### Testing |
| 70 | +Tests use Vitest with Vue Test Utils. Test files are located in component-specific `tests/` folders and use the `.spec.ts` extension. |
| 71 | + |
| 72 | +### Documentation |
| 73 | +The project includes a VitePress documentation site in the `docs/` directory. Component examples and documentation are maintained as Markdown files. |
| 74 | + |
| 75 | +## Development Workflow |
| 76 | + |
| 77 | +When creating or modifying components: |
| 78 | +1. Component implementation goes in `src/components/FwbComponentName/` |
| 79 | +2. Use existing component patterns for consistency |
| 80 | +3. Create TypeScript types in a separate `types.ts` file |
| 81 | +4. Use composables for class generation logic |
| 82 | +5. Export the component from `src/index.ts` for library consumers |
| 83 | +6. Add documentation in `docs/components/` if creating a new component |
0 commit comments