# Malachite

A modern React component library built with TypeScript, providing a comprehensive set of reusable UI components for building StackOne applications.

## 🚀 Installation

```bash
npm install malachite
# or
yarn add malachite
# or
pnpm add malachite
```

## 📦 What's Included

Malachite provides a set of components to be used in StackOne applications.

### Core Components
- **Button** - Flexible button component with multiple variants
- **Card** - Container component for content organization
- **Input** - Form input component with validation support
- **Typography** - Text components with consistent styling
- **Spacer** - Layout component for consistent spacing

### Layout & Structure
- **Flex** - Flexible layout component with alignment controls
- **Padded** - Container component with consistent padding
- **FooterLinks** - Pre-styled footer navigation component

### Interactive Components
- **Alert** - Notification and alert messages
- **Tooltip** - Contextual information on hover
- **ButtonList** - Group of related buttons
- **Form** - Form wrapper with validation support

### Content & Media
- **Markdown** - Render markdown content with styling
- **Spinner** - Loading indicators
- **CustomIcons** - Comprehensive icon library

### Theme System
- **ThemeProvider** - Theme context provider
- **useTheme** - Theme context hook

## 🎯 Quick Start

```tsx
import React from 'react';
import { 
  ThemeProvider, 
  Button, 
  Card, 
  Typography, 
  Flex 
} from 'malachite';

function App() {
  return (
    <ThemeProvider>
      <Card>
        <Flex direction="column" gap="md">
          <Typography variant="h1">Welcome to Malachite</Typography>
          <Typography variant="body">
            Build beautiful UIs with our component library
          </Typography>
          <Button variant="primary">
            Get Started
          </Button>
        </Flex>
      </Card>
    </ThemeProvider>
  );
}

export default App;
```

## 🎨 Theming

Malachite includes a powerful theming system that allows you to customize the look and feel of all components:

```tsx
import { ThemeProvider, useTheme } from 'malachite';

// Wrap your app with ThemeProvider
function App() {
  return (
    <ThemeProvider>
      <YourComponents />
    </ThemeProvider>
  );
}

// Use the theme in your components
function CustomComponent() {
  const theme = useTheme();
  // Access theme values
  return <div style={{ color: theme.colors.primary }}>Themed content</div>;
}
```

## 📚 Storybook

Explore all components and their variants in our interactive Storybook:

```bash
npm run storybook
```

This will launch Storybook where you can:
- Browse all available components
- See component variations and props
- Test component interactions
- Copy code examples

## 🛠️ Development

### Prerequisites
- Node.js 16+
- npm, yarn, or pnpm

### Setup

1. Clone the repository
```bash
git clone https://github.com/StackOneHQ/malachite.git
cd malachite
```

2. Install dependencies
```bash
npm install
```

3. Start development server
```bash
npm run dev
```

4. Run Storybook
```bash
npm run storybook
```

### Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run storybook` - Launch Storybook
- `npm run lint` - Run ESLint
- `npm run type-check` - Run TypeScript checks

## 📋 Component Reference

### Layout Components
| Component | Description | Key Props |
|-----------|-------------|-----------|
| `Flex` | Flexible layout container | `direction`, `justify`, `align`, `gap` |
| `Padded` | Container with consistent padding | `size`, `children` |
| `Spacer` | Adds consistent spacing | `size`, `direction` |

### UI Components
| Component | Description | Key Props |
|-----------|-------------|-----------|
| `Button` | Interactive button | `variant`, `size`, `disabled` |
| `Card` | Content container | `elevation`, `padding` |
| `Input` | Form input field | `type`, `placeholder`, `validation` |
| `Alert` | Notification messages | `type`, `message`, `dismissible` |

### Content Components
| Component | Description | Key Props |
|-----------|-------------|-----------|
| `Typography` | Text elements | `variant`, `color`, `weight` |
| `Markdown` | Rendered markdown | `content`, `sanitize` |
| `Tooltip` | Contextual help | `content`, `placement` |

## 📄 License

This project is licensed under the MIT License.
