npm package: @korytsa/custom-components-lib
Description: A modern React component library built with TypeScript and CSS Modules
Author: Anni Korytko
Latest version: 1.0.0

# Custom Components Library

A modern React component library built with TypeScript, CSS Modules (SCSS), and comprehensive testing. This library provides a collection of reusable UI components following Material-UI design principles.

## Task

[Link to the task documentation]: https://drive.google.com/file/d/1C148FRnWfXVoRDslDWcYac3bEhebdIAV/view

## Features

- ✅ **TypeScript** - Full type safety and IntelliSense support
- ✅ **CSS Modules (SCSS)** - Scoped styling with SASS preprocessing
- ✅ **Storybook** - Interactive component documentation
- ✅ **Jest & React Testing Library** - 100% test coverage
- ✅ **ESLint & Prettier** - Code quality and formatting
- ✅ **Pre-commit hooks** - Automated linting and formatting before commits
- ✅ **Webpack** - Custom build configuration

## How to Run the App

### Prerequisites

- Node.js (v16 or higher)
- npm or yarn

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd custom-components-lib
```

2. Install dependencies:
```bash
npm install
```

### Available Scripts

#### Development

Start the development server:
```bash
npm run dev
```
Opens the application at `http://localhost:3000`

#### Storybook

Launch Storybook for component development and documentation:
```bash
npm run storybook
```
Opens Storybook at `http://localhost:6006`

Build Storybook for production:
```bash
npm run build-storybook
```

#### Testing

Run all tests:
```bash
npm test
```

Run tests in watch mode:
```bash
npm run test:watch
```

Run tests with coverage report:
```bash
npm run test:coverage
```

#### Code Quality

Lint the code:
```bash
npm run lint
```

Lint and auto-fix issues:
```bash
npm run lint:fix
```

Format code with Prettier:
```bash
npm run format
```

Check formatting:
```bash
npm run format:check
```

#### Build

Build the library for production:
```bash
npm run build
```

## Available Components

### Button
A customizable button component with multiple variants, colors, and sizes.

**Props:**
- `variant`: 'contained' | 'outlined' | 'text' (default: 'contained')
- `color`: 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' (default: 'primary')
- `size`: 'small' | 'medium' | 'large' (default: 'medium')
- `disabled`: boolean
- `onClick`: (event) => void
- `type`: 'button' | 'submit' | 'reset'
- `className`: string
- `children`: ReactNode

**Example:**
```tsx
import { Button } from 'custom-components-lib';

<Button variant="contained" color="primary" onClick={handleClick}>
  Click Me
</Button>
```

### TextField
An input field component with error states and validation support.

**Props:**
- All standard HTML input attributes
- `error`: boolean (default: false)

**Example:**
```tsx
import { TextField } from 'custom-components-lib';

<TextField
  type="email"
  placeholder="Enter your email"
  error={hasError}
  onChange={handleChange}
/>
```

### Select
A customizable select dropdown component.

**Props:**
- All standard HTML select attributes
- `error`: boolean (default: false)

**Example:**
```tsx
import { Select } from 'custom-components-lib';

<Select value={value} onChange={handleChange} error={hasError}>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>
```

### Checkbox
A checkbox component with label support.

**Props:**
- All standard HTML input checkbox attributes
- `label`: string

**Example:**
```tsx
import { Checkbox } from 'custom-components-lib';

<Checkbox
  label="Accept terms and conditions"
  checked={isChecked}
  onChange={handleChange}
/>
```

### Switch
A toggle switch component for on/off states.

**Props:**
- `checked`: boolean
- `onChange`: (event) => void
- `disabled`: boolean
- `label`: string
- All other standard HTML input attributes

**Example:**
```tsx
import { Switch } from 'custom-components-lib';

<Switch
  label="Enable notifications"
  checked={isEnabled}
  onChange={handleToggle}
/>
```

### Modal
A modal dialog component with backdrop, portal rendering, and keyboard support.

**Props:**
- `open`: boolean - Controls modal visibility
- `onClose`: () => void - Callback when modal should close
- `children`: ReactNode - Modal content
- `className`: string - Custom styles for modal content

**Features:**
- Portal rendering to `document.body`
- Closes on backdrop click
- Closes on Escape key press
- Body scroll lock when open
- Smooth animations

**Example:**
```tsx
import { Modal, Button } from 'custom-components-lib';

const [open, setOpen] = useState(false);

<>
  <Button onClick={() => setOpen(true)}>Open Modal</Button>
  <Modal open={open} onClose={() => setOpen(false)}>
    <h2>Modal Title</h2>
    <p>Modal content goes here</p>
    <Button onClick={() => setOpen(false)}>Close</Button>
  </Modal>
</>
```

## Project Structure

```
custom-components-lib/
├── .husky/                 # Git hooks configuration
├── .storybook/            # Storybook configuration
├── public/                # Static files
├── src/
│   ├── components/        # Component library
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.module.scss
│   │   │   ├── Button.test.tsx
│   │   │   └── Button.stories.tsx
│   │   ├── TextField/
│   │   ├── Select/
│   │   ├── Checkbox/
│   │   ├── Switch/
│   │   ├── Modal/
│   │   └── index.ts       # Component exports
│   ├── types/             # TypeScript type definitions
│   └── index.tsx          # Main entry point
├── .eslintrc.json         # ESLint configuration
├── .prettierrc.json       # Prettier configuration
├── jest.config.js         # Jest configuration
├── tsconfig.json          # TypeScript configuration
├── webpack.config.js      # Webpack configuration
└── package.json           # Dependencies and scripts
```

## Usage in Other Projects

Install the library in your project:

```bash
npm install custom-components-lib
```

Import and use components:

```tsx
import { Button, TextField, Modal } from 'custom-components-lib';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Click Me
      </Button>
      <TextField placeholder="Enter text" />
    </div>
  );
}
```