├── .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 | React Storybook 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Storybook 8 | 37 | 38 | 39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-component-boilerplate", 3 | "description": "A boilerplate to create React components using react-transform-hmr, Babel 6, webpack and SASS", 4 | "main": "dist/index.js", 5 | "jsnext:main": "components/index.js", 6 | "module": "components/index.js", 7 | "files": [ 8 | "src", 9 | "dist", 10 | "README" 11 | ], 12 | "scripts": { 13 | "lint": "eslint components/** tests/**", 14 | "lintfix": "eslint --fix components/** tests/**", 15 | "prepublish": "npm run lint && npm run build", 16 | "semantic-release": "semantic-release pre && npm publish && semantic-release post", 17 | "storybook": "start-storybook -p 6006", 18 | "test": "mocha --require tests/config/setup 'tests/**/*.test.js'", 19 | "test:watch": "mocha --require tests/config/setup 'tests/**/*.test.js' --watch", 20 | "test:cover": "istanbul cover -x *.test.js _mocha -- -R spec --require tests/config/setup 'tests/**/*.test.js'", 21 | "test:report": "cat ./coverage/lcov.info | codecov && rm -rf ./coverage", 22 | "build": "babel components --out-dir dist", 23 | "docs": "build-storybook -o docs", 24 | "commit": "git cz" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/ritz078/react-component-boilerplate.git" 29 | }, 30 | "keywords": [ 31 | "react-component-keywords" 32 | ], 33 | "author": "Ritesh Kumar", 34 | "license": "MIT", 35 | "bugs": { 36 | "url": "https://github.com/ritz078/react-component-boilerplate/issues" 37 | }, 38 | "homepage": "https://github.com/ritz078/react-component-boilerplate", 39 | "devDependencies": { 40 | "@storybook/addon-knobs": "^3.1.2", 41 | "@storybook/addon-options": "^3.1.2", 42 | "@storybook/cli": "^3.1.4", 43 | "@storybook/react": "^3.1.3", 44 | "autoprefixer": "^7.1.1", 45 | "babel-cli": "^6.24.1", 46 | "babel-core": "^6.24.1", 47 | "babel-plugin-transform-object-rest-spread": "^6.23.0", 48 | "babel-preset-es2015": "^6.24.1", 49 | "babel-preset-react": "^6.24.1", 50 | "chai": "^4.0.1", 51 | "chai-enzyme": "^0.7.1", 52 | "codecov.io": "^0.1.6", 53 | "commitizen": "^2.9.6", 54 | "css-loader": "^0.28.4", 55 | "cz-conventional-changelog": "^2.0.0", 56 | "enzyme": "^2.8.2", 57 | "eslint": "^3.19.0", 58 | "eslint-config-standard": "^10.2.1", 59 | "eslint-config-standard-react": "^5.0.0", 60 | "eslint-plugin-import": "^2.3.0", 61 | "eslint-plugin-node": "^5.0.0", 62 | "eslint-plugin-promise": "^3.5.0", 63 | "eslint-plugin-react": "^7.0.1", 64 | "eslint-plugin-standard": "^3.0.1", 65 | "eventsource-polyfill": "^0.9.6", 66 | "extract-text-webpack-plugin": "^2.1.0", 67 | "isparta": "^4.0.0", 68 | "istanbul": "^1.1.0-alpha.1", 69 | "jsdom": "^9.12.0", 70 | "mocha": "^3.4.2", 71 | "node-sass": "^4.5.3", 72 | "react-addons-test-utils": "^15.5.1", 73 | "rimraf": "^2.6.1", 74 | "sass-loader": "^6.0.6", 75 | "semantic-release": "^6.3.6", 76 | "sinon": "^2.3.2", 77 | "style-loader": "^0.18.2", 78 | "webpack": "^3.0.0" 79 | }, 80 | "dependencies": { 81 | "@kadira/storybook-deployer": "^1.0.0", 82 | "classnames": "^2.2.3", 83 | "invariant": "^2.2.2", 84 | "prop-types": "^15.5.10", 85 | "react": "^15.5.4", 86 | "react-dom": "^15.5.4" 87 | }, 88 | "config": { 89 | "commitizen": { 90 | "path": "node_modules/cz-conventional-changelog" 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /stories/App.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { action } from '@storybook/addon-actions' 4 | 5 | import App from '../components'; 6 | 7 | storiesOf('App', module) 8 | .add('default', () => ( 9 | 10 | )); 11 | -------------------------------------------------------------------------------- /stories/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ 2 | 3 | import './App.story' 4 | -------------------------------------------------------------------------------- /tests/config/setup.js: -------------------------------------------------------------------------------- 1 | require('babel-core/register') 2 | const path = require('path') 3 | const jsdom = require('jsdom').jsdom 4 | 5 | const exposedProperties = ['window', 'navigator', 'document'] 6 | 7 | global.document = jsdom('') 8 | global.window = document.defaultView 9 | Object.keys(document.defaultView).forEach((property) => { 10 | if (typeof global[property] === 'undefined') { 11 | exposedProperties.push(property) 12 | global[property] = document.defaultView[property] 13 | } 14 | }) 15 | 16 | global.navigator = { 17 | userAgent: 'node.js' 18 | } 19 | global.__base = `${path.resolve()}/` 20 | -------------------------------------------------------------------------------- /tests/index.test.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritz078/react-component-boilerplate/0af7dca8e837a7241a78074495ef6c1f74e0796a/tests/index.test.js --------------------------------------------------------------------------------