Indico Storybook Component Library

A collection of customizable MUI-based React components with built-in theming and Storybook documentation.

Features

• 🎨 Pre-styled MUI Components - Ready-to-use Material-UI components with custom styling
• 🎭 Multiple Themes - Built-in theme configurations (light, dark, colorful)
• 📚 Storybook Documentation - Interactive component documentation
• 🔧 TypeScript Support - Full TypeScript type definitions
• 🎯 Tree Shakeable - Import only what you need
• 📱 Responsive Design - Mobile-first approach

Installation

npm install indico-storybook

Peer Dependencies

Make sure you have the following peer dependencies installed in your project:

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material react react-dom

For date picker components:

npm install @mui/x-date-pickers dayjs

For Roboto font (recommended):

npm install @fontsource/roboto

Quick Start

1. Import and Use Components

import { MuiButton } from 'indico-storybook';

function App() {
  return (
    <MuiButton 
      variant="contained" 
      color="primary"
      onClick={() => console.log('Button clicked!')}
    >
      Click Me
    </MuiButton>
  );
}

2. Using with Themes

import { MuiButton, createCustomTheme, themeConfigs } from 'indico-storybook';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// Import Roboto font
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

function App() {
  const theme = createCustomTheme(themeConfigs.light);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <MuiButton variant="contained" color="primary">
        Themed Button
      </MuiButton>
    </ThemeProvider>
  );

Available Exports

Components

• MuiButton - A customizable Material-UI button component

Theme Utilities

• themeConfigs - Array of predefined theme configurations
• createCustomTheme - Function to create a custom theme
• defaultTheme - Default theme configuration
• ThemeConfig - TypeScript type for theme configuration

Available Theme Configurations

The library includes several predefined themes:

import { themeConfigs } from 'indico-storybook';

// Available themes:
// - Default Blue
// - Purple Theme  
// - Green Theme
// - Dark Theme
// - Light Theme
// - Colorful Theme

// Use a specific theme
const theme = createCustomTheme(themeConfigs.find(t => t.name === 'Dark Theme'));

MuiButton

A customizable button component with enhanced styling and theming support.

Props:

• All standard MUI Button props
• Additional custom styling options
• Built-in icon support

Example:

import { MuiButton } from 'indico-storybook';

<MuiButton 
  variant="contained"
  color="primary"
  size="large"
  disabled={false}
>
  Button Text
</MuiButton>

Theming

The library comes with pre-built themes that you can use or customize:

Available Themes

import { themeConfigs } from 'indico-storybook';

## Development

This project is built with:
- **React 19** - Latest React with concurrent features
- **Material-UI v7** - Latest Material Design components
- **TypeScript** - Type safety and better DX
- **Vite** - Fast build tool and dev server
- **Storybook 9** - Component documentation and testing

### Building the Library

```bash
# Build for library distribution
npm run build:lib

# Build regular app
npm run build

# Build Storybook
npm run build-storybook

Running Storybook

npm run storybook

Project Structure

src/
├── components/
│   ├── MUI/           # Generic MUI-based components
│   └── AyoTani/       # Business-specific components
├── stories/           # Storybook stories
├── theme/            # Theme configurations
└── index.ts          # Main library exports

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © [Your Name]