npm package: @mkgalaxy/gen-next
Description: Shared components and utilities for Next.js and React.js applications
Latest version: 1.0.0

# @my-stack/gen-next

A comprehensive library of reusable React components, hooks, and utilities for Next.js and React.js applications.

## Installation

```bash
npm install @my-stack/gen-next
# or
yarn add @my-stack/gen-next
# or
pnpm add @my-stack/gen-next
```

## Features

- 🎨 **UI Components** - Pre-built, customizable React components
- 🪝 **Custom Hooks** - Powerful React hooks for common use cases
- 🛠️ **Utility Functions** - Type-safe helper functions
- 📦 **Tree-shakable** - Import only what you need
- 🔷 **TypeScript** - Full TypeScript support with type definitions
- ⚡ **Optimized** - Built with performance in mind

## Usage

### Components

```tsx
import { Button, Card, Input, Container } from '@my-stack/gen-next';
// or import from specific path
import { Button } from '@my-stack/gen-next/components';

function App() {
  return (
    <Container maxWidth="lg">
      <Card variant="elevated" padding="lg">
        <h1>Welcome</h1>
        <Input label="Email" type="email" placeholder="Enter your email" fullWidth />
        <Button variant="primary" size="md" fullWidth>
          Submit
        </Button>
      </Card>
    </Container>
  );
}
```

### Hooks

```tsx
import { useLocalStorage, useDebounce, useMediaQuery } from '@my-stack/gen-next';
// or import from specific path
import { useLocalStorage } from '@my-stack/gen-next/hooks';

function MyComponent() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearch = useDebounce(searchTerm, 500);
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <div>
      <p>Current theme: {theme}</p>
      <p>Device: {isMobile ? 'Mobile' : 'Desktop'}</p>
      <input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      <p>Debounced: {debouncedSearch}</p>
    </div>
  );
}
```

### Utilities

```tsx
import { formatDate, formatCurrency, isValidEmail, debounce, deepClone } from '@my-stack/gen-next';
// or import from specific path
import { formatDate } from '@my-stack/gen-next/utils';

// Format utilities
const formattedDate = formatDate(new Date(), 'en-US', { dateStyle: 'long' });
const price = formatCurrency(1234.56, 'USD');

// Validation
const isValid = isValidEmail('user@example.com');

// Object utilities
const cloned = deepClone({ a: 1, b: { c: 2 } });

// Async utilities
const debouncedFn = debounce(() => console.log('Hello'), 500);
```

## API Reference

### Components

#### Button

Versatile button component with multiple variants and sizes.

**Props:**

- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
- `size`: 'sm' | 'md' | 'lg'
- `disabled`: boolean
- `fullWidth`: boolean
- `isLoading`: boolean

#### Card

Flexible container for grouping content.

**Props:**

- `variant`: 'default' | 'bordered' | 'elevated'
- `padding`: 'none' | 'sm' | 'md' | 'lg'
- `hoverable`: boolean

#### Input

Text input with label, error, and helper text support.

**Props:**

- `label`: string
- `error`: string
- `helperText`: string
- `fullWidth`: boolean

#### Container

Centered container with max-width constraints.

**Props:**

- `maxWidth`: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
- `padding`: boolean

### Hooks

#### useLocalStorage

Manage state synchronized with localStorage.

```tsx
const [value, setValue] = useLocalStorage<T>(key: string, initialValue: T);
```

#### useDebounce

Debounce a value.

```tsx
const debouncedValue = useDebounce<T>(value: T, delay: number);
```

#### useWindowSize

Track window dimensions.

```tsx
const { width, height } = useWindowSize();
```

#### useMediaQuery

Responsive design with media queries.

```tsx
const matches = useMediaQuery(query: string);
```

#### useToggle

Boolean toggle state.

```tsx
const [value, toggle, setValue] = useToggle(initialValue?: boolean);
```

### Utilities

#### Format

- `formatDate(date, locale?, options?)` - Format dates
- `formatCurrency(amount, currency?, locale?)` - Format currency
- `formatNumber(num, locale?)` - Format numbers
- `truncateString(str, maxLength?, suffix?)` - Truncate strings
- `capitalize(str)` - Capitalize first letter
- `titleCase(str)` - Convert to title case

#### Validation

- `isValidEmail(email)` - Validate email addresses
- `isValidUrl(url)` - Validate URLs
- `isEmpty(str)` - Check if string is empty
- `isValidPhone(phone)` - Validate phone numbers

#### Object

- `deepClone<T>(obj)` - Deep clone objects
- `deepMerge<T>(target, source)` - Deep merge objects
- `pick<T, K>(obj, keys)` - Pick properties
- `omit<T, K>(obj, keys)` - Omit properties

#### Async

- `debounce(func, wait)` - Create debounced function
- `throttle(func, limit)` - Create throttled function
- `sleep(ms)` - Async sleep
- `retry(fn, maxRetries?, delay?)` - Retry with exponential backoff

## Development

### Build the library

```bash
npm run build
```

### Watch mode for development

```bash
npm run dev
```

### Type checking

```bash
npm run type-check
```

### Linting

```bash
npm run lint
```

## License

MIT