EVAA UI Library - Storybook Components

A modern React component library built with Vite, Storybook, Bootstrap, and Anima integration for seamless Figma-to-code workflow.

🚀 Features

• React + TypeScript: Modern development stack
• Storybook: Interactive component documentation
• Bootstrap Integration: Responsive design system
• Design Tokens: Consistent styling across components
• Anima Integration: Import designs directly from Figma
• Automatic Deployment: GitHub Actions CI/CD pipeline

📦 Installation

# Install as a dependency in your project
npm install evaa-ui-library
# or
yarn add evaa-ui-library

# For development of the library itself
npm install

💻 Usage

import { Accordion, Chips, CustomButton } from 'evaa-ui-library';
import 'evaa-ui-library/dist/styles.css'; // Import styles

// Using Accordion
const MyComponent = () => {
  const items = [
    {
      id: '1',
      title: 'Section 1',
      content: 'Content for section 1'
    }
  ];

  return <Accordion items={items} />;
};

// Using Chips
const MyChips = () => {
  return <Chips labelText="Category" selected={true} />;
};

// Using CustomButton
const MyButton = () => {
  return <CustomButton buttonLabel="Click Me" state="default" />;
};

💻 Usage

import { Accordion, Chips, CustomButton } from 'evaa-ui-library';
import 'evaa-ui-library/dist/styles.css'; // Import styles

// Using Accordion
const MyComponent = () => {
  const items = [
    {
      id: '1',
      title: 'Section 1',
      content: 'Content for section 1'
    }
  ];

  return <Accordion items={items} />;
};

// Using Chips
const MyChips = () => {
  return <Chips labelText="Category" selected={true} />;
};

// Using CustomButton
const MyButton = () => {
  return <CustomButton buttonLabel="Click Me" state="default" />;
};

🛠️ Development

# Start development server
npm run dev

# Start Storybook
npm run storybook

# Build for production
npm run build

# Build Storybook
npm run build-storybook

🌐 GitHub Pages Setup

To enable automatic Storybook deployment:

1. Enable GitHub Pages:

   • Go to your repository settings
   • Navigate to "Pages" section
   • Under "Source", select "GitHub Actions"

2. Configure Repository Permissions:

   • Go to Settings → Actions → General
   • Under "Workflow permissions", select "Read and write permissions"
   • Check "Allow GitHub Actions to create and approve pull requests"

3. Push Changes:

   git add .
   git commit -m "Initial commit with Storybook setup"
   git push -u origin main

🎨 Anima Integration

Updating Designs from Figma

1. In Figma:

   • Use the Anima plugin to export your designs
   • Generate design tokens and components

2. Update Design Tokens:

   • Replace content in design-tokens.json with new tokens from Anima
   • Update SCSS variables in src/styles/main.scss if needed

3. Update Components:

   • Import new components from Anima into src/components/
   • Create corresponding .stories.ts files for Storybook

4. Deploy Changes:

   git add .
   git commit -m "Update designs from Figma"
   git push

📁 Project Structure

src/
├── components/          # React components
│   ├── CustomButton.tsx
│   ├── CustomButton.scss
│   └── CustomButton.stories.ts
├── styles/             # Global styles
│   └── main.scss
└── stories/            # Default Storybook stories

.storybook/             # Storybook configuration
├── main.ts
├── preview.ts
└── vitest.setup.ts

.github/workflows/      # GitHub Actions
└── deploy-storybook.yml

design-tokens.json      # Design system tokens

🔄 Automatic Deployment

Every push to the main branch will:

1. Build the Storybook
2. Deploy to GitHub Pages
3. Update your live component library

Your Storybook will be available at: https://rahulp-firstinsight.github.io/evaa-ui-library---btn-btn-primary-buttondefault-statedefault-colordefault/

🎯 Design Token System

The project uses a design token system that allows you to:

• Maintain consistent styling across components
• Easily update themes and colors
• Integrate seamlessly with Anima exports

Tokens are defined in design-tokens.json and used throughout the SCSS files.

📚 Adding New Components

1. Create component file: src/components/YourComponent.tsx
2. Create styles: src/components/YourComponent.scss
3. Create stories: src/components/YourComponent.stories.ts
4. Export from Anima or build manually
5. Commit and push to deploy

🤝 Contributing

1. Create a feature branch
2. Make your changes
3. Test in Storybook
4. Create a pull request
5. Merge to main for automatic deployment

Built with ❤️ using Anima, Storybook, and modern web technologies