Skip to content

README.md

Latest commit

 

History

History
278 lines (197 loc) · 8.96 KB

README.md

File metadata and controls

278 lines (197 loc) · 8.96 KB

React Rollup Boilerplate

License: MIT Node.js Version React TypeScript Rollup Storybook

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

Bundling

Development

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

Testing

Code Quality

📄 License

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

👤 Author

Kai Hotz

🤝 Contributing

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