# shadcn

A modern Next.js project with shadcn/ui components, Storybook, TypeScript, and comprehensive tooling.

## Tech Stack

- **Framework**: [Next.js 15](https://nextjs.org/) with App Router
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
- **Component Development**: [Storybook](https://storybook.js.org/)
- **Testing**: [Jest](https://jestjs.io/) with [Testing Library](https://testing-library.com/)
- **Package Manager**: [Yarn](https://yarnpkg.com/)
- **Code Quality**:
  - [ESLint](https://eslint.org/) - Linting
  - [Prettier](https://prettier.io/) - Code formatting
  - [Husky](https://typicode.github.io/husky/) - Git hooks
  - [lint-staged](https://github.com/okonet/lint-staged) - Run linters on staged files
  - [commitlint](https://commitlint.js.org/) - Commit message linting

## Getting Started

### Prerequisites

- Node.js 18+
- Yarn

### Installation

```bash
# Install dependencies
yarn install

# Run the development server
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) to see your application.

## Available Scripts

- `yarn dev` - Start the development server
- `yarn build` - Build the production application
- `yarn start` - Start the production server
- `yarn lint` - Run ESLint
- `yarn format` - Format code with Prettier
- `yarn format:check` - Check code formatting
- `yarn test` - Run tests
- `yarn test:watch` - Run tests in watch mode
- `yarn storybook` - Start Storybook development server
- `yarn build-storybook` - Build Storybook for production

## Project Structure

```
shadcn/
├── .husky/              # Git hooks
├── .storybook/          # Storybook configuration
├── .vscode/             # VS Code settings (format on save enabled)
├── src/
│   ├── __tests__/       # Test files
│   ├── app/             # Next.js app directory
│   ├── components/      # React components
│   │   └── ui/          # shadcn/ui components
│   ├── lib/             # Utility functions
│   └── stories/         # Storybook stories
├── components.json      # shadcn/ui configuration
├── jest.config.ts       # Jest configuration
├── next.config.ts       # Next.js configuration
├── tailwind.config.ts   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration
```

## Code Quality

### Format on Save

This project is configured to format code on save in VS Code. Install the recommended extensions:

- Prettier - Code formatter
- ESLint
- Tailwind CSS IntelliSense

### Git Hooks

The project uses Husky to enforce code quality:

- **pre-commit**: Runs lint-staged to format and lint staged files
- **commit-msg**: Validates commit messages using conventional commits format

### Commit Message Format

Follow the [Conventional Commits](https://www.conventionalcommits.org/) specification:

```
<type>: <description>

[optional body]

[optional footer]
```

Types: `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`

Example:

```bash
git commit -m "feat: add button component"
```

## shadcn/ui Components

This project includes the shadcn/ui component library. Add new components using:

```bash
npx shadcn@latest add [component-name]
```

Note: Due to network restrictions, you may need to add components manually. The utility function for className merging is available at `src/lib/utils.ts`.

## Storybook

View and develop components in isolation:

```bash
yarn storybook
```

Open [http://localhost:6006](http://localhost:6006) to see Storybook.

## Testing

Run tests:

```bash
yarn test          # Run all tests
yarn test:watch    # Run tests in watch mode
```