npm package: @marufmihal43/demoui
Description: A modern, accessible React component library built with TypeScript and Storybook.
Author: marufmihal43
Latest version: 1.0.2

# DemoUI - React UI Component Library

A modern, accessible React component library built with TypeScript and Storybook.

## Installation

```bash
npm install demoui
```

## Usage

### Import Components

```tsx
// Import individual components
import { Button, Header, Navbar, Sidebar, Page } from 'demoui';

// Or import with default exports
import { ButtonDefault as Button } from 'demoui';

// Import styles (if not already imported with components)
import 'demoui/styles';
```

### Basic Example

```tsx
import React from 'react';
import { Button, Header, Navbar, Sidebar } from 'demoui';

function App() {
  return (
    <div className="app">
      <Header 
        user={{ name: 'John Doe' }}
        onLogin={() => console.log('Login clicked')}
        onLogout={() => console.log('Logout clicked')}
        onCreateAccount={() => console.log('Create account clicked')}
      />
      
      <div className="main-content">
        <Sidebar />
        <div className="content">
          <Navbar userName="John Doe" />
          <Button 
            primary 
            label="Click me!" 
            onClick={() => alert('Button clicked!')}
          />
        </div>
      </div>
    </div>
  );
}

export default App;
```

## Components

### Button

A versatile button component with multiple variants and sizes.

```tsx
import { Button } from 'demoui';

// Primary button
<Button primary label="Primary Button" />

// Secondary button with custom size
<Button size="large" label="Large Button" />

// Button with custom background color
<Button 
  backgroundColor="#ff6b6b" 
  label="Custom Color" 
  onClick={() => console.log('Clicked!')}
/>
```

**Props:**
- `primary?: boolean` - Is this the principal call to action on the page?
- `backgroundColor?: string` - What background color to use
- `size?: 'small' | 'medium' | 'large'` - How large should the button be?
- `label: string` - Button contents
- `onClick?: () => void` - Optional click handler

### Header

A header component with user authentication states.

```tsx
import { Header } from 'demoui';

// Header with logged-in user
<Header 
  user={{ name: 'John Doe' }}
  onLogout={() => handleLogout()}
/>

// Header for logged-out user
<Header 
  onLogin={() => handleLogin()}
  onCreateAccount={() => handleCreateAccount()}
/>
```

**Props:**
- `user?: User` - User object with name property
- `onLogin?: () => void` - Login handler
- `onLogout?: () => void` - Logout handler
- `onCreateAccount?: () => void` - Create account handler

### Navbar

A navigation bar component with user welcome message and action buttons.

```tsx
import { Navbar } from 'demoui';

<Navbar 
  userName="John Doe"
  onNotificationClick={() => handleNotifications()}
  onFullscreenClick={() => handleFullscreen()}
/>
```

**Props:**
- `userName?: string` - Name to display in welcome message
- `onNotificationClick?: () => void` - Notification button handler
- `onFullscreenClick?: () => void` - Fullscreen button handler
- `className?: string` - Additional CSS classes

### Sidebar

A responsive sidebar navigation component.

```tsx
import { Sidebar } from 'demoui';

// Using default navigation items
<Sidebar />

// Custom navigation items
const customItems = [
  {
    id: 'dashboard',
    label: 'Dashboard',
    icon: <FiHome />,
    href: '/dashboard',
  },
  // ... more items
];

<Sidebar 
  items={customItems}
  logoIcon="M"
  logoText="MyApp"
/>
```

**Props:**
- `items?: SidebarItem[]` - Navigation items array
- `logoIcon?: string` - Logo icon/text
- `logoText?: string` - Logo text
- `className?: string` - Additional CSS classes

**SidebarItem interface:**
```tsx
interface SidebarItem {
  id: string;
  label: string;
  icon: React.ReactNode;
  href?: string;
  onClick?: () => void;
}
```

### Page

A complete page component that demonstrates component composition.

```tsx
import { Page } from 'demoui';

<Page />
```

## Styling

The library includes built-in CSS styles that are automatically imported when you import components. If you need to import styles separately:

```tsx
import 'demoui/styles';
```

## TypeScript Support

All components are fully typed with TypeScript. You can import type definitions:

```tsx
import type { ButtonProps, HeaderProps, NavbarProps, SidebarProps, PageProps } from 'demoui';
```

## Development

### Prerequisites

- Node.js 16+
- npm or yarn

### Setup

```bash
# Clone the repository
git clone <repository-url>
cd demoui

# Install dependencies
npm install

# Start Storybook for development
npm run storybook

# Build the library
npm run build
```

### Storybook

Run Storybook to see all components in action:

```bash
npm run storybook
```

This will open Storybook at `http://localhost:6006`

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

## License

MIT License - see LICENSE file for details.