rhaicode / react-library-starter

A library starter kit and bundler for your React projects, powered by Rollup. ⚡

react-library-starter

⚡ A library starter kit and bundler for your React projects, powered by Rollup.

Features

• React with TypeScript support
• Rollup for bundling (with a customizable bundler config file)
• Babel for transpiling
• Storybook for development and component explorer
• SVGR support
• Uses TailwindCSS 2.0
• Linting before commit support with ESLint, Husky and Lint Staged
• Supports CSS modules configurable with PostCSS
• styled-components support
• react-uuid for component key indexing
• Supports CJS, ESM and UMD formats
• Sourcemap creation

Development

Clone this repo and run the following commands to start development with Storybook.

npm install --production=false
npm run storybook

Go to localhost:6006 and you should see something like this.

Building

To build your project, run npm run build.

Publishing

npm publish

This builds commonjs, esm, and umd 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 © Rhaidzsal Ali

react-library-starter's Issues

Error on run storybook

Went through all your steps, and it didn't run

cloned
npm install --production=false
npm run storybook

$ npm run storybook

> [email protected] storybook /Users/aadams/Projects/test
> start-storybook -p 6006

/Users/aadams/Projects/test/node_modules/@storybook/core/node_modules/fs-extra/lib/mkdirs/make-dir.js:85
      } catch {
              ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/aadams/Projects/test/node_modules/@storybook/core/node_modules/fs-extra/lib/mkdirs/index.js:3:44)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] storybook: `start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/aadams/.npm/_logs/2020-12-12T18_48_53_379Z-debug.log

Error on build

cloned
npm install --production=false
npm run build

 $ npm run build

> [email protected] build /Users/aadams/Projects/test
> cross-env NODE_ENV=production && rm -rf dist && rollup -c

/Users/aadams/Projects/test/node_modules/rollup/dist/shared/loadConfigFile.js:488
        ? (await import(url.pathToFileURL(fileName).href)).default
                 ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/aadams/Projects/test/node_modules/rollup/dist/bin/rollup:21:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `cross-env NODE_ENV=production && rm -rf dist && rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/aadams/.npm/_logs/2020-12-12T18_55_07_592Z-debug.log