├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .storybook ├── addons.js ├── config.js └── webpack.config.js ├── .travis.yml ├── LICENSE.md ├── README.md ├── components ├── App │ ├── App.js │ └── App.scss └── index.js ├── docs ├── favicon.ico ├── iframe.html └── index.html ├── package.json ├── stories ├── App.story.js └── index.js ├── tests ├── config │ └── setup.js └── index.test.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"], 3 | "plugins": ["transform-object-rest-spread"] 4 | } 5 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib 2 | **/node_modules 3 | **/webpack.config.js 4 | examples/**/server.js -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["standard", "standard-react"], 3 | "env": { 4 | "browser": true, 5 | "node": true 6 | }, 7 | "rules": { 8 | "no-underscore-dangle": 0 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | dist 5 | lib 6 | coverage 7 | .idea 8 | examples/bundle.js 9 | examples/style.css 10 | npm-debug.log 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | src 4 | test 5 | examples 6 | coverage 7 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | import '@storybook/addon-knobs/register' 3 | import '@storybook/addon-options/register'; 4 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | function loadStories() { 4 | require('../stories'); 5 | } 6 | 7 | configure(loadStories, module); 8 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | // you can use this file to add your custom webpack plugins, loaders and anything you like. 2 | // This is just the basic way to add additional webpack configurations. 3 | // For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config 4 | 5 | // IMPORTANT 6 | // When you add this file, we won't add the default configurations which is similar 7 | // to "React Create App". This only has babel loader to load JavaScript. 8 | 9 | const path = require('path'); 10 | 11 | module.exports = { 12 | plugins: [ 13 | // your custom plugins 14 | ], 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.scss$/, 19 | use: [{ 20 | loader: "style-loader" // creates style nodes from JS strings 21 | }, { 22 | loader: "css-loader" // translates CSS into CommonJS 23 | }, { 24 | loader: "sass-loader" // compiles Sass to CSS 25 | }], 26 | include: path.resolve(__dirname, '../') 27 | }, 28 | { 29 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 30 | loader: "url-loader?limit=10000&mimetype=application/font-woff" 31 | }, 32 | { 33 | test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 34 | loader: "file-loader" 35 | } 36 | ], 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | cache: 4 | directories: 5 | - node_modules 6 | notifications: 7 | email: false 8 | node_js: 9 | - '6' 10 | before_install: 11 | - npm i -g npm@^3.0.0 12 | before_script: 13 | - npm prune 14 | script: 15 | - npm run test:cover 16 | after_success: 17 | - npm run test:report 18 | - npm run semantic-release 19 | branches: 20 | except: 21 | - "/^v\\d+\\.\\d+\\.\\d+$/" 22 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Ritesh Kumar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-component-boilerplate 2 | 3 | > A boilerplate to create React components using react-transform-hmr, Babel 6, webpack and SASS 4 | 5 | ## Features 6 | 7 | 1. [Babel 6](http://babeljs.io/) for ES6 and ES7 8 | 1. [style-loader](https://github.com/webpack/style-loader), [sass-loader](https://github.com/jtangelder/sass-loader) and [less-loader](https://github.com/webpack/less-loader) to allow import of stylesheets in plain css, sass and less, 9 | 1. [mocha](https://mochajs.org/) to allow writing unit tests for the project 10 | 1. [react-storybook](https://github.com/kadirahq/react-storybook) 11 | 1. [enzyme](http://airbnb.io/enzyme/index.html) for testing 12 | 1. [travis](https://travis-ci.org/) as CI 13 | 1. [istanbul](https://github.com/gotwarlost/istanbul) for code coverage (ES2015) 14 | 1. [codecov.io](https://codecov.io) for code-coverage reporting 15 | 1. Scripts written for building components(ES5) 16 | 1. [semantic-release](https://github.com/semantic-release/semantic-release) for automated releases following semantic versioning 17 | 1. [commitizen](https://github.com/commitizen/cz-cli) and [cz-conventional-changelog](https://github.com/commitizen/cz-conventional-changelog) for better commit messages. 18 | 19 | 20 | ## Getting started 21 | ``` 22 | cd react-component-boilerplate/ 23 | npm install 24 | npm run storybook 25 | ``` 26 | 27 | ### Scripts 28 | 29 | 1. `npm run lint` : Lint all js files 30 | 1. `npm run lintfix` : fix linting errors of all js files 31 | 1. `npm run semantic-release` : make a release. Leave it for CI to do. 32 | 1. `npm run storybook`: Start developing by using storybook 33 | 1. `npm run test` : Run tests. tests file should be written as `*.test.js` and using ES2015 34 | 1. `npm run test:watch` : Watch tests while writing 35 | 1. `npm run test:cover` : Show coverage report of your tests 36 | 1. `npm run test:report` : Report test coverage to codecov.io. Leave this for CI 37 | 1. `npm run build`: transpile all ES6 component files into ES5(commonjs) and put it in `dist` directory 38 | 1. `npm run docs`: create static build of storybook in `docs` directory that can be used for github pages 39 | 40 | Learn how to write stories [here](https://getstorybook.io/docs/basics/writing-stories) 41 | 42 | ### License 43 | MIT 44 | -------------------------------------------------------------------------------- /components/App/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import styles from './App.scss' 4 | 5 | export default function App (props) { 6 | return 7 | } 8 | 9 | App.propTypes = { 10 | onClick: PropTypes.func 11 | } 12 | 13 | App.defaultProps = { 14 | onClick () {} 15 | } 16 | -------------------------------------------------------------------------------- /components/App/App.scss: -------------------------------------------------------------------------------- 1 | .app{ 2 | background-color: blue; 3 | } -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | import App from './App/App' 2 | 3 | export default App 4 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritz078/react-component-boilerplate/0af7dca8e837a7241a78074495ef6c1f74e0796a/docs/favicon.ico -------------------------------------------------------------------------------- /docs/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 12 |