npm package: @kishek95/malleable-ui-components
Description: React component library for Malibu UI — generated and maintained with Rovocraft
Latest version: 0.22.0

# @kishek95/malleable-ui-components

React component library for Malibu UI — generated and maintained with [Rovocraft](https://github.com/AkishoreSHEK/rovocraft).

## Installation

```bash
pnpm add @kishek95/malleable-ui-components
```

## Usage

```tsx
import { BarChart, FlipCard, Map } from '@kishek95/malleable-ui-components';
```

## Structure

```
src/
  components/
    <component-name>/
      <component-name>.tsx          # Component implementation
      <component-name>.test.tsx     # Colocated unit tests
      <component-name>.stories.tsx  # Ladle stories
      README.md                     # Component docs
  core/                             # Shared utilities
```

## Getting Started

### Prerequisites

- Node.js >= 20 (see `.nvmrc`)
- pnpm 9.15.0+

### Setup

```bash
pnpm install
```

## Scripts

| Command              | Description                         |
| -------------------- | ----------------------------------- |
| `pnpm build`         | Build the library with tsup         |
| `pnpm typecheck`     | TypeScript type checking            |
| `pnpm lint`          | Biome + ast-grep linting (autofix)  |
| `pnpm lint:check`    | Biome lint check (no autofix)       |
| `pnpm lint:ast`      | ast-grep architectural rules only   |
| `pnpm format`        | Format code with Biome              |
| `pnpm test`          | Run unit tests with Vitest          |
| `pnpm test:watch`    | Run tests in watch mode             |
| `pnpm test:coverage` | Run tests with coverage report      |
| `pnpm ladle`         | Start Ladle dev server (storybooks) |
| `pnpm ladle:build`   | Build Ladle stories for production  |

## Components

| Component | Description |
| --------- | ----------- |
| [AreaChart](src/components/area-chart/README.md) | Area chart for visualising trends over time with filled regions |
| [BarChart](src/components/bar-chart/README.md) | Vertical bar chart for comparing categorical data |
| [FlipCard](src/components/flip-card/README.md) | Interactive card with 3D flip animation for revealing content |
| [FunnelChart](src/components/funnel-chart/README.md) | Funnel chart for sequential conversion stages |
| [Graphic](src/components/graphic/README.md) | Curated illustration renderer for empty states and onboarding |
| [HorizontalTimeline](src/components/horizontal-timeline/README.md) | Horizontal timeline for chronological event sequences |
| [LineChart](src/components/line-chart/README.md) | Line chart for displaying continuous data trends |
| [Map](src/components/map/README.md) | 2D world map with location pins and zoom controls |
| [PieChart](src/components/pie-chart/README.md) | Pie/donut chart for part-of-whole relationships |
| [TextualFunnel](src/components/textual-funnel/README.md) | Non-numeric textual funnel for qualitative processes |

## LLM Documentation

This package includes an `llms.txt` file for LLM-friendly component documentation. Import it via the `./llms.txt` subpath export.

## Tech Stack

- **React 18** with TypeScript
- **Atlaskit Design System** for tokens, primitives, and icons
- **Recharts** for chart components
- **tsup** for library builds
- **Biome** for linting and formatting
- **ast-grep** for architectural lint rules
- **Vitest** + React Testing Library for unit tests
- **Playwright** for integration tests
- **Ladle** for component storybooks