diff --git a/README.md b/README.md index 1be28bb..6f6cac9 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ ## Support + If you like the project and want to support my work, you can buy me a coffee :) [![paypal](https://img.shields.io/badge/donate-paypal-blue.svg)](https://paypal.me/kaihotz) @@ -16,6 +17,7 @@ yarn install ``` #### Not Familiar with Git? + Click [here](https://github.com/KaiHotz/react-rollup-boilerplate/archive/master.zip) to download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and: ``` @@ -31,13 +33,15 @@ To start the developing run : yarn start ``` -This will build a version of your library, run the watcher and also run the Styleguide. -To open the Styleguide manualy open your Browser and navigate to [http://localhost:6060](http://localhost:6060). -Start developing your components in `src/components` folder and update the `src/index.js` file acordingly. -Always provide an `YourComponent.examples.md` file, so your component will show up in the Styleguide. -You can refer to example `Button` component, but i think you'll get the idea. +This will build a version of your library, run the watcher and also run Storybook. +To open Storybook manually open your Browser and navigate to [http://localhost:6060](http://localhost:6060). +Start developing your components in `src/components` folder and update the `src/index.js` file accordingly. +Always provide an `YourComponent.story.tsx` file, so your component will show up in Storybook. + +You can refer to example `Button` component, but I think you'll get the idea. ### Proposals (Babel) + For smoother development some Babel plugin are included - [class-properties](https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-class-properties) - [object-rest-spread](https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-object-rest-spread) @@ -45,8 +49,8 @@ For smoother development some Babel plugin are included ## Styling your components -`SCSS` and `CSS` are supported out of the box just import your styles into your component like you normaly would do. -For the use of `CSS Modules` refere to [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss) +`SCSS` and `CSS` are supported out of the box just import your styles into your component like you normally would do. +For the use of `CSS Modules` refer to [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss) ## Testing @@ -69,25 +73,26 @@ You can modify linting rules by overriding them in the `.eslintrc.json` file. ``` yarn lint ``` -or (for for automatic fixing if possible) +or (if automatic fixing is possible) ``` yarn lint:fix ``` ## Publishing your library to NPM -To release your library to NPM or your private Registry, make sure you have an active account at [NPM](https://www.npmjs.com/), your `.npmrc` file is correctly setup and the repository url in `package.json` file is set to your repoitory url, then: +To release your library to NPM or your private Registry, make sure you have an active account at [NPM](https://www.npmjs.com/), your `.npmrc` file is correctly setup and the repository url in `package.json` file is set to your repository url, then: ``` yarn release ``` -## Styleguide +## Storybook + +For custom layouts, styling and more information about Storybook, please refer to [Storybook](https://storybook.js.org/basics/writing-stories/) documentation. -For custom layouts, styleing and more information about the Styleguide please refer to [React Styleguidist](https://react-styleguidist.js.org/) documentation. +#### Deploy Storybook to GitHub Pages -#### Deploy the Styleguide to GitHub Pages -Make sure the repository url in `package.json` file is set to your repoitory url, then: +Make sure the repository url in `package.json` file is set to your repository url, then: ``` yarn deploy @@ -95,17 +100,17 @@ yarn deploy ## Scripts -- `yarn start` : Only serves the Styleguide. -- `yarn build` : Builds your library (build can be faound in `dist` folder). -- `yarn styleguide:build` : Builds the static Styleguide in case you want to deploy it. +- `yarn start` : Only serves Storybook. +- `yarn build` : Builds your library (build can be found in `dist` folder). +- `yarn storybook:build` : Builds the static Storybook in case you want to deploy it. - `yarn test` : Runs the tests. - `yarn test:coverage`: Runs the test and shows the coverage. -- `yarn lint` : Runs the linter, typescipt typecheck and stylelint. -- `yarn lint:fix` : Runs the linter, typescipt typecheck and stylelint and fixes automatic fixable issues. -- `yarn eslint`: Runs only the javascipt linter. -- `yarn eslint:fix`: Runs only the javascipt linter and fixes automatic fixable issues. -- `yarn stylelint`: Runs only the sytle linter. -- `yarn stylelint:fix`: Runs only the sytle linter and fixes automatic fixable issues. +- `yarn lint` : Runs the linter, Typescript typecheck and stylelint. +- `yarn lint:fix` : Runs the linter, Typescript typecheck and stylelint and fixes automatic fixable issues. +- `yarn eslint`: Runs only the JavaScript linter. +- `yarn eslint:fix`: Runs only the JavaScript linter and fixes automatic fixable issues. +- `yarn stylelint`: Runs only the style linter. +- `yarn stylelint:fix`: Runs only the style linter and fixes automatic fixable issues. - `yarn check-types`: Runs typescript type checker. - `yarn release` : Publishes your Library on NPM or your private Registry (depending on your config in your `.npmrc` file). - `yarn deploy`: Deploys the Styleguide to GitHub Pages. @@ -119,8 +124,8 @@ yarn deploy ### Code Formatter - [Prettier](https://prettier.io/) -### Styleguide -- [React Styleguidist](https://react-styleguidist.js.org/) +### Storybook +- [Storybook](https://storybook.js.org/) ### Testing - [Enzyme](http://airbnb.io/enzyme/)