React Component Library

Modern React component library built with TypeScript, SCSS modules, and Storybook for documentation and development.

🚀 Features

• React 19 with full TypeScript support
• SCSS Modules for scoped styling with automatic CSS injection
• Storybook for component development and documentation
• Vite for fast builds and development
• ESLint for code quality
• Automated CI/CD with GitHub Actions
• NPM Publishing workflow
• GitHub Pages deployment for Storybook
• Bundle Size Analysis with automatic reports
• Usage Analytics with integrations for Google Analytics, Amplitude, Mixpanel

📦 Installation

npm install @u4aew/react-component-publishing-guide

🎯 Usage

import { Button } from '@u4aew/react-component-publishing-guide';

function App() {
  return (
    <Button 
      primary 
      size="medium" 
      label="Click me!" 
      onClick={() => console.log('Button clicked!')} 
    />
  );
}

🛠 Development

Prerequisites

• Node.js 20+
• npm

Setup

# Clone the repository
git clone https://github.com/u4aew/react-component-publishing-guide.git
cd react-component-lib

# Install dependencies
npm install

# Start Storybook development server
npm run storybook

Available Scripts

Command	Description
npm run storybook	Start Storybook development server
npm run build-storybook	Build Storybook for production
npm run build	Build library for production
npm run lint	Run ESLint
npm run preview	Preview production build
npm run analyze	Analyze bundle size and open report
npm run size-report	Generate detailed size report

📚 Components

Button

Primary UI component for user interaction.

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

Example:

<Button primary size="large" label="Primary Button" />

🏗 Architecture

src/
├── components/
│   └── ComponentName/
│       ├── ComponentName.tsx     # Component implementation
│       ├── ComponentName.module.scss # Component styles
│       └── __stories__/          # Storybook stories
│           └── ComponentName.stories.ts
└── index.ts                      # Main export file

📊 Analytics & Monitoring

Bundle Size Analysis

Automatic bundle size tracking with visual reports:

npm run analyze  # Opens detailed bundle analysis
npm run size-report  # Console and JSON report

🔄 CI/CD

The project includes automated workflows:

• CI: Runs on every push/PR (linting, building, bundle analysis)
• NPM Publishing: Triggered by releases or manual dispatch
• Storybook Deploy: Automatically deploys to GitHub Pages
• Bundle Reports: Automatic PR comments with size changes

📖 Documentation

View the live Storybook documentation: https://u4aew.github.io/react-component-publishing-guide

🤝 Contributing

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

u4aew

• GitHub: @u4aew

🙏 Acknowledgments

• Built with Storybook
• Powered by Vite
• Styled with SCSS