React Rollup Boilerplate

A modern, production-ready boilerplate for building React component libraries. This project provides a complete development environment with Rollup bundling, TypeScript support, Storybook for component documentation, and comprehensive testing setup.

✨ Features

• ⚛️ React 19.2 - Built with the latest React version
• 📦 Rollup Bundler - Optimized ES modules output for tree-shaking
• 🔷 TypeScript - Full TypeScript support with type declarations
• 📚 Storybook 10 - Interactive component documentation and development
• 🧪 Vitest - Fast unit testing with React Testing Library
• 🎨 SCSS Support - Styling with SCSS and CSS modules
• ✅ ESLint & Prettier - Code linting and formatting
• 🎯 Stylelint - CSS/SCSS linting with BEM methodology
• 📱 Accessibility - JSX a11y plugin for accessibility best practices

📁 Project Structure

react-rollup-boilerplate/
├── src/
│   ├── components/          # React components
│   │   ├── Button/          # Example Button component
│   │   │   ├── Button.tsx
│   │   │   ├── Button.scss
│   │   │   ├── Button.test.tsx
│   │   │   ├── Button.stories.tsx
│   │   │   └── index.ts
│   │   ├── Tabs/            # Example Tabs component
│   │   │   ├── Tabs.tsx
│   │   │   ├── Tab.tsx
│   │   │   ├── TabPanel.tsx
│   │   │   ├── TabsList.tsx
│   │   │   ├── context.ts
│   │   │   ├── *.scss
│   │   │   ├── Tabs.stories.tsx
│   │   │   └── index.ts
│   │   └── index.ts         # Component exports
│   └── index.ts             # Main library entry point
├── dist/                    # Built library output
├── storybook-static/        # Built Storybook for deployment
├── rollup.config.mjs        # Rollup bundler configuration
├── tsconfig.json            # TypeScript configuration
├── vitest.config.ts         # Vitest test configuration
├── eslint.config.js         # ESLint configuration
└── .stylelintrc.cjs         # Stylelint configuration

🚀 Getting Started

Prerequisites

• Node.js >= 18
• Yarn package manager

Installation

Clone the repository

git clone git@github.com:KaiHotz/react-rollup-boilerplate.git
cd react-rollup-boilerplate
yarn install

Or download directly

Download the .zip file, extract it, then:

cd react-rollup-boilerplate
yarn install

💻 Development

Start the development environment with Storybook:

yarn start

This launches Storybook at http://localhost:6006, where you can:

• View and interact with your components
• Test different props and states
• Document component usage

Creating Components

1. Create a new folder in src/components/ with your component name
2. Add your component files:
   • YourComponent.tsx - Component implementation
   • YourComponent.scss - Component styles
   • YourComponent.test.tsx - Unit tests
   • YourComponent.stories.tsx - Storybook stories
   • index.ts - Component export
3. Export your component from src/components/index.ts

Refer to the Button and Tabs components as examples.

🎨 Styling

SCSS & CSS Support

Import styles directly into your components:

import './YourComponent.scss';

CSS Modules

For CSS Modules support, refer to rollup-plugin-postcss.

Style Linting

SCSS and CSS are linted using Stylelint with BEM methodology:

yarn stylelint        # Check styles
yarn stylelint:fix    # Auto-fix style issues

🔍 Linting & Formatting

TypeScript/JavaScript

Code quality is enforced via ESLint and Prettier:

yarn lint         # Run all linters (ESLint, Stylelint, TypeScript)
yarn lint:fix     # Auto-fix all linting issues
yarn eslint       # Run ESLint only
yarn eslint:fix   # Auto-fix ESLint issues
yarn check-types  # Run TypeScript type checker

Customize rules in eslint.config.js.

🧪 Testing

Testing is powered by Vitest and React Testing Library:

yarn test              # Run tests in watch mode
yarn test:coverage     # Run tests with coverage report

See Button.test.tsx for example test patterns.

📦 Building

Build your library for production:

yarn build

Output is generated in the dist/ folder with:

• ES modules for modern bundlers
• TypeScript type declarations

🚢 Publishing

To NPM or Private Registry

1. Ensure you have an active NPM account
2. Configure your .npmrc file
3. Update publishConfig.registry in package.json
4. Run:

yarn release

This runs linting, tests, builds, and publishes your library.

📚 Storybook

Development

yarn storybook

Build Static Storybook

yarn storybook:build

Output is generated in storybook-static/.

Deploy to GitHub Pages

Update the homepage URL in package.json, then:

yarn storybook:deploy

For more information, see the Storybook documentation.

📜 Available Scripts

Script	Description
yarn start	Start Storybook development server
yarn build	Build library to dist/ folder
yarn test	Run tests in watch mode
yarn test:coverage	Run tests with coverage report
yarn lint	Run all linters (ESLint, Stylelint, TypeScript)
yarn lint:fix	Auto-fix all linting issues
yarn eslint	Run ESLint only
yarn eslint:fix	Auto-fix ESLint issues
yarn stylelint	Run Stylelint only
yarn stylelint:fix	Auto-fix Stylelint issues
yarn check-types	Run TypeScript type checker
yarn ci	Run linting and tests (for CI/CD)
yarn release	Lint, test, build, and publish to NPM
yarn storybook	Start Storybook
yarn storybook:build	Build static Storybook
yarn storybook:deploy	Deploy Storybook to GitHub Pages

🛠️ Tech Stack

Core

• React 19 - UI library
• TypeScript - Type-safe JavaScript

Bundling

• Rollup.js - Module bundler
• rollup-plugin-postcss - CSS/SCSS processing

Development

• Storybook 10 - Component development environment
• Vite - Development server for Storybook

Testing

• Vitest - Unit test framework
• React Testing Library - React component testing
• jest-dom - Custom DOM matchers
• Playwright - Browser testing

Code Quality

• ESLint - JavaScript/TypeScript linting
• Prettier - Code formatting
• Stylelint - CSS/SCSS linting
• eslint-plugin-react - React-specific linting
• eslint-plugin-jsx-a11y - Accessibility linting

📄 License

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

👤 Author

Kai Hotz

• GitHub: @KaiHotz

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.