bricks

Micro-modularized, fully independent, type-safe UI component library built with TypeScript and Tailwind CSS.

✨ Features

• 🔷 Fully TypeScript — strict mode, all props fully typed and exported
• 🎨 Tailwind CSS — utility-first, zero CSS-in-JS
• 📦 Dual ESM + CJS — works in any modern bundler (Vite, Webpack, Rollup, esbuild)
• 🌲 Tree-shakeable — sub-path imports (bricks/text-input)
• 📖 Storybook — interactive docs for every component and variant
• 🧪 Fully tested — Vitest + @testing-library/react (≥ 80% coverage)
• ♿ Accessible — ARIA attributes, roles, and keyboard support built-in
• 🔄 forwardRef — full DOM access on every component
• 🔒 Strict ESLint — typescript-eslint strict + react + jsx-a11y
• 📏 Prettier — consistent formatting enforced via pre-commit hook

📦 Installation

# npm
npm install bricks

# Or with yarn
yarn add bricks

# Or with pnpm
pnpm add bricks

Peer dependencies (must be installed by the consumer):

pnpm add react react-dom

🎨 Tailwind CSS Setup

This library ships Tailwind class names. You have two options:

Option A — Consumer runs Tailwind (recommended)

Add the library's source to your Tailwind content paths so Tailwind generates the required utilities:

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [
    './src/**/*.{ts,tsx}',
    // Add the library's dist path:
    './node_modules/bricks/dist/**/*.js',
  ],
} satisfies Config

Option B — Use the pre-built CSS

// In your entry file (e.g. main.tsx)
import 'bricks/styles.css'

🚀 Usage

Named import (full bundle)

import { TextInput } from 'bricks'

function App() {
  return (
    <TextInput
      label="Email address"
      placeholder="[email protected]"
      type="email"
      state="error"
      errorMessage="Please enter a valid email"
    />
  )
}

Sub-path import (tree-shakeable)

import { TextInput } from 'bricks/text-input'

📖 TextInput

Props

| Prop | Type | Default | Description | | --------------------- | -------------------------------------------------- | ----------- | ---------------------------------- | | label | string | — | Visible label above the input | | required | boolean | false | Shows a * on the label | | helperText | string | — | Help text below the input | | errorMessage | string | — | Shown when state="error" | | successMessage | string | — | Shown when state="success" | | warningMessage | string | — | Shown when state="warning" | | variant | 'default' \| 'filled' \| 'flushed' \| 'unstyled' | 'default' | Visual style | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Field size | | state | 'default' \| 'error' \| 'success' \| 'warning' | 'default' | Validation state | | fullWidth | boolean | true | Span container width | | leftElement | ReactNode | — | Inline icon/element on left | | rightElement | ReactNode | — | Inline icon/element on right | | prefix | ReactNode | — | Addon label attached outside-left | | suffix | ReactNode | — | Addon label attached outside-right | | wrapperClassName | string | — | Classes on the outer wrapper | | inputGroupClassName | string | — | Classes on the input group | | inputClassName | string | — | Classes on the <input> element | | labelClassName | string | — | Classes on the label | | helperClassName | string | — | Classes on the helper text |

All native <input> attributes (placeholder, name, value, onChange, onBlur, type, maxLength, autoComplete, ...) are supported via prop spread.

Exported Types

import type { TextInputProps, TextInputVariant, TextInputSize, TextInputState } from 'bricks'

Examples

// Variants
<TextInput variant="filled" label="Filled" placeholder="..." />
<TextInput variant="flushed" label="Flushed" placeholder="..." />

// Sizes
<TextInput size="xs" placeholder="Extra small" />
<TextInput size="xl" placeholder="Extra large" />

// Validation
<TextInput state="error" errorMessage="This field is required" />
<TextInput state="success" successMessage="Looks good!" />

// Icons
<TextInput leftElement={<SearchIcon />} placeholder="Search…" />

// Addons
<TextInput prefix="https://" suffix=".com" placeholder="yoursite" />

// Ref
const ref = useRef<HTMLInputElement>(null)
<TextInput ref={ref} placeholder="Focus me" />

🛠 Development

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Build
pnpm build

# Lint
pnpm lint

# Format
pnpm format

🔖 Versioning

This project uses Changesets for versioning and changelog generation.

# Create a changeset
pnpm changeset

# Version packages
pnpm changeset version

# Publish
pnpm changeset publish

📄 License

MIT © elaachiadmin