@21epub/create-storybook-react-library

CLI for easily bootstrapping ts react libraries and run demo using storybook

Usage no npm install needed!

<script type="module">
  import 21epubCreateStorybookReactLibrary from 'https://cdn.skypack.dev/@21epub/create-storybook-react-library';
</script>

README

create-storybook-react-library

CLI for creating reusable, modern React ts libraries using Rollup and storybook.

NPM Build Status JavaScript Style Guide

Intro

This package was a upgrade for @21epub/create-parcel-react-library

Implement storybook Component UI environment for npm library creating.

Features

  • Easy-to-use CLI
  • Handles all modern JS features
  • Bundles commonjs and es module formats
  • storybook for Component UI implementation
  • Rollup for bundling
  • Babel for transpiling
  • Jest + testing-library for react testing
  • Supports complicated peer-dependencies
  • Supports CSS modules ( Both less and Sass ) with Storybook
  • TypeScript Only
  • Sourcemap creation
  • lint-staged support
  • Conventional commit by git-cz
  • standard-version support by npm run release
  • Format on Save ( Vscode Editor )
  • Travis CI & Code coverage by custom configration

Install globally

This package requires node >= 10.

npm install -g @21epub/create-storybook-react-library

Usage with npx

No need to create an empty folder before running.

npx @21epub/create-storybook-react-library

Creating a New Module

create-storybook-react-library

Answer some basic prompts about your module, and then the CLI will perform the following steps:

  • copy over the template
  • install dependencies via yarn or npm
  • install peers vis yarn or npm (You have to do this since peers will not auto installed , dev start will cause error !)
  • initialize local git repo

At this point, your new module is ready and is all setup for local development.

Development (with Storybook)

There's only one thing to do your development is enjoy your coding in src/

npm start # start your Storybook ENV

Now, anytime you make a change to your library in src/ will live-reload your storybook dev so you can iterate on your component in real-time.

Get Start with Storybook and develop your Component, Reference docs

Update Peers Dependencies

After update peerDependencies in package.json or install new dependencies

npm run install-peers # reinstall peers after update

Commit

Commit Method Recommandation

npm run commit # lint before commit can save your time , and then conventional commit with git-cz

Publishing to npm

npm run release # Version and changelog
git push --follow-tags origin master
npm publish # The `prePublishOnly` hook will run before publish to build and test your package

This builds commonjs and es versions of your module to dist/ and then publishes your module to npm.

Make sure that any npm modules you want as peer dependencies are properly marked as peerDependencies in package.json. The rollup config will automatically recognize them as peers and not try to bundle them in your module.

License

MIT © 21epub