npm package: @kishek95/horizon-components
Description: React components for micro applications using Atlassian Design System
Author: Abhi Kishore
Latest version: 0.0.11

# @kishek95/horizon-components

React component library for building micro applications using Atlassian Design System.

## Overview

A collection of 24 production-ready React components for data visualization, interactive widgets, and application layouts. Built with TypeScript, fully accessible (WCAG 2.1 AA), and optimized for tree-shaking.

## Installation

```bash
npm install @kishek95/horizon-components
```

## Quick Start

```tsx
import { BarChart, KanbanBoard, DataTable } from '@kishek95/horizon-components';

function Dashboard() {
  const data = [
    { label: 'Product A', value: 150 },
    { label: 'Product B', value: 230 },
  ];

  return (
    <>
      <BarChart data={data} height={300} />
      <KanbanBoard columns={[...]} />
      <DataTable rows={[...]} />
    </>
  );
}
```

## Features

-   **🎨 Atlassian Design System**: Built with @atlaskit components and design tokens
-   **📊 Data Visualization**: Charts (Bar, Line, Area, Donut, Radar, Combo), 3D Globe
-   **🔧 Interactive Widgets**: Kanban boards, data tables, filters, polls, voting
-   **📱 Responsive**: Mobile-first design with responsive layouts
-   **♿ Accessible**: WCAG 2.1 AA compliant with keyboard navigation and screen reader support
-   **🔒 Type Safe**: Full TypeScript support with exported prop types
-   **🌲 Tree-shakeable**: Optimized ESM modules for minimal bundle size

## Components

### Application Layout

-   **AppShell** - Application shell with navigation and header

### Data Visualization

-   **AreaChart** - Area chart for trends over time
-   **BarChart** - Vertical bar chart for categorical data
-   **ComboChart** - Combined chart types (bars, lines, areas)
-   **DonutChart** - Percentage breakdown with legend
-   **LineChart** - Continuous data trends
-   **RadarChart** - Multi-axis comparisons
-   **GlobeVisualization** - Interactive 3D globe

### Interactive Widgets

-   **Calculator** - Embedded calculator
-   **CommandPalette** - Quick search and commands
-   **FilterBar** - Multi-filter toolbar
-   **PollWidget** - Multi-option voting
-   **VotingWidget** - Upvote/downvote interface

### Data Display

-   **DataTable** - Sortable, filterable table with pagination
-   **InfiniteScroll** - Lazy-loaded lists
-   **TreeView** - Hierarchical data navigation

### Layout & Organization

-   **Carousel** - Image/content carousel
-   **DetailPanel** - Slide-in detail panel
-   **KanbanBoard** - Drag-and-drop Kanban
-   **MasonryGrid** - Pinterest-style layout

### Status & Progress

-   **RoadmapView** - Project roadmap with milestones
-   **StatusIndicator** - Visual status with color coding
-   **StatusTracker** - Multi-step progress
-   **Timeline** - Vertical event timeline

## Documentation

Each component has comprehensive documentation including:

-   Complete prop types and API reference
-   Multiple usage examples
-   Accessibility guidelines
-   Decision guidance (when to use / when NOT to use)

📖 **[Full Component Documentation (llms.txt)](https://unpkg.com/@kishek95/horizon-components/llms.txt)** - LLM-optimized documentation index

## Requirements

**Peer Dependencies:**

-   `react` ^18.0.0
-   `react-dom` ^18.0.0

**Included Dependencies:**

-   `@atlaskit/*` - Atlassian Design System
-   `recharts` - Chart components
-   `three` - 3D visualizations
-   `d3` - Advanced visualizations

## TypeScript Support

All components export their prop types:

```tsx
import type { BarChartProps, BarChartDataPoint } from '@kishek95/horizon-components';

const data: BarChartDataPoint[] = [...];
const props: BarChartProps = { data, height: 300 };
```

## Common Patterns

### Design Tokens

```tsx
import { token } from '@atlaskit/tokens';

const styles = {
    backgroundColor: token('elevation.surface'),
    padding: token('space.200'),
};
```

### Icons

```tsx
import { AddIcon } from '@atlaskit/icon/core/add';

<Button iconBefore={() => <AddIcon label="Add" />}>Add Item</Button>;
```

### Responsive Layouts

```tsx
import { Box, Stack } from '@atlaskit/primitives';

<Stack space="space.200">
    <Box padding="space.300">Content</Box>
</Stack>;
```

## License

MIT (update as needed)

## Support

For detailed component documentation, see individual component READMEs in the `src/` directory or consult the [llms.txt](https://unpkg.com/@kishek95/horizon-components/llms.txt) file.