@my-stack/gen-next

A comprehensive library of reusable React components, hooks, and utilities for Next.js and React.js applications.

Installation

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

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

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

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('[email protected]');

// 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.

const [value, setValue] = useLocalStorage<T>(key: string, initialValue: T);

useDebounce

Debounce a value.

const debouncedValue = useDebounce<T>(value: T, delay: number);

useWindowSize

Track window dimensions.

const { width, height } = useWindowSize();

useMediaQuery

Responsive design with media queries.

const matches = useMediaQuery(query: string);

useToggle

Boolean toggle state.

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

npm run build

Watch mode for development

npm run dev

Type checking

npm run type-check

Linting

npm run lint

License

MIT