diff --git a/.all-contributorsrc b/.all-contributorsrc new file mode 100644 index 0000000..ceb131e --- /dev/null +++ b/.all-contributorsrc @@ -0,0 +1,48 @@ +{ + "projectName": "react-typescript", + "projectOwner": "FDiskas", + "files": [ + "README.md" + ], + "imageSize": 100, + "commit": true, + "contributors": [ + { + "login": "FDiskas", + "name": "Vytenis", + "avatar_url": "https://avatars2.githubusercontent.com/u/468006?v=4", + "profile": "https://github.com/FDiskas", + "contributions": [ + "bug", + "code", + "doc", + "eventOrganizing", + "example", + "ideas", + "infra", + "review", + "tool" + ] + }, + { + "login": "gennbo", + "name": "Genadij Bojev", + "avatar_url": "https://avatars3.githubusercontent.com/u/12097258?v=4", + "profile": "https://github.com/gennbo", + "contributions": [ + "bug", + "code" + ] + }, + { + "login": "aivaras-b", + "name": "Aivaras", + "avatar_url": "https://avatars0.githubusercontent.com/u/17545646?v=4", + "profile": "https://github.com/aivaras-b", + "contributions": [ + "review" + ] + } + ], + "repoType": "github" +} diff --git a/.babelrc b/.babelrc index 47e563b..c21f6fd 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,5 @@ { - "presets": ["es2015", "react", "stage-0"], - "plugins": ["react-hot-loader/babel"] + "presets": [ + "react-app" + ] } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1361d52..3abf63d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,8 +1,21 @@ -submitting## Thanks +## Thanks Thanks for reading this. If you do so - you are probably ready to be an contributor. So lets follow basics setup of development environment. -## IDE +## Table of contents + + + + + - [IDE](#ide) + - [Installation](#installation) + - [Git Commit Guidelines](#git-commit-guidelines) + - [Merge requests](#merge-requests) +- [Available commands](#available-commands) + + + +### IDE > IF you are using the modern IDE please configure it properly @@ -21,10 +34,33 @@ Thanks for reading this. If you do so - you are probably ready to be an contribu We are using yarn so respect this. Just type `yarn` and you are ready to go +### Git Commit Guidelines + +We have very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. But also, +we use the git commit messages to **generate the our change log**. + +The commit message formatting can be added using a typical git workflow or through the use of a CLI +wizard ([Commitizen](https://github.com/commitizen/cz-cli)). To use the wizard, run `yarn cm` +in your terminal after staging your changes in git. + +A detailed explanation borrowed from angular and can be found in this [document](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#). + ### Merge requests 1. Code should be formated using [prettier](https://github.com/prettier/prettier) -1. All tests should pass before pushing +1. All tests should pass before pushing (respect git hooks) After submitting a merge request you can access a feature demo website available at "deploy/netlify" by clicking on "Details" link ![deploy/netlify](https://i.imgur.com/ni1tq8h.png) + +## Available commands +| Command | Description | +|---------------------: |----------------------------------------| +| `yarn dev` | Start development environment | +| `yarn start` | Start production environment | +| `yarn start:storybook`| Start storybook | +| `yarn lint` | Lint typescript files | +| `yarn lint:css` | Lint scss/css files | +| `yarn test` | Start test enviroiment for development | +| `yarn test:coverage` | Display tests coverage | +| `yarn start:server` | Test SSR locally | diff --git a/README.md b/README.md index a4b4f39..73ab626 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,8 @@ -# React & typescript boilerplate [![Build is passing?](https://travis-ci.org/nfq-eta/react-typescript.svg?branch=master)](https://travis-ci.org/nfq-eta/react-typescript) [![Coverage Status](https://coveralls.io/repos/github/nfq-eta/react-typescript/badge.svg)](https://coveralls.io/github/nfq-eta/react-typescript) [![Maintainability](https://api.codeclimate.com/v1/badges/7f1962ba5828c6273d14/maintainability)](https://codeclimate.com/github/nfq-eta/react-typescript/maintainability) [![Waffle.io](https://badge.waffle.io/nfq-eta/react-typescript.svg?columns=Backlog,In%20Progress,Done)](https://waffle.io/nfq-eta/react-typescript) +# React & typescript boilerplate [![Build is passing?](https://travis-ci.org/nfq-eta/react-typescript.svg?branch=master)](https://travis-ci.org/nfq-eta/react-typescript) +[![Coverage Status](https://coveralls.io/repos/github/nfq-eta/react-typescript/badge.svg)](https://coveralls.io/github/nfq-eta/react-typescript) +[![Waffle.io](https://badge.waffle.io/nfq-eta/react-typescript.svg?columns=Backlog,In%20Progress,Done)](https://waffle.io/nfq-eta/react-typescript) +[![Maintainability](https://api.codeclimate.com/v1/badges/7f1962ba5828c6273d14/maintainability)](https://codeclimate.com/github/nfq-eta/react-typescript/maintainability) +[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors) ## Why? Make it fast as possible. Current development environment starts in <10s @@ -6,6 +10,19 @@ Build time as fast as possible ~35s. Bundle size should be minimum as possible ![performance](https://i.imgur.com/t3AS08T.png) +## Table of contents + + + + + - [How to start](#how-to-start) + - [What's inside](#whats-inside) +- [Browser support](#browser-support) + - [Todo](#todo) +- [Contributors](#contributors) + + + ### How to start 1. `yarn` Install dependencies 1. Copy `.env.example` to `.env` @@ -56,41 +73,35 @@ Bundle size should be minimum as possible * [settings](https://github.com/nfq-eta/react-typescript/tree/master/.vscode) for [Visual Studio Code](https://code.visualstudio.com/Download) * Storybook [Demo](https://nfq-eta.github.io/react-typescript/docs) * With actions - * Addons - -## Available commands -| Command | Description | -|---------------------: |----------------------------------------| -| `yarn dev` | Start development environment | -| `yarn start` | Start production environment | -| `yarn start:storybook`| Start storybook | -| `yarn lint` | Lint typescript files | -| `yarn lint:css` | Lint scss/css files | -| `yarn test` | Start test enviroiment for development | -| `yarn test:coverage` | Display tests coverage | -| `yarn start:server` | Test SSR locally | - -## Contribute -## Git Commit Guidelines + * With knobs + * With options + +## Browser support +* Chrome: >= 49 +* Firefox: >= 38 +* Safari: >= 10 +* Edge: >= 12 +* Opera: >= 36 -We have very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. But also, -we use the git commit messages to **generate the our change log**. - -The commit message formatting can be added using a typical git workflow or through the use of a CLI -wizard ([Commitizen](https://github.com/commitizen/cz-cli)). To use the wizard, run `yarn run cm` -in your terminal after staging your changes in git. - -A detailed explanation borrowed from angular and can be found in this [document][commit-message-format]. - -## Todo +#### Todo * [x] Automate Changelist.md * [ ] E2E Tests * [ ] i18n * [ ] Red box for react errors? * [x] Server side rendering -* [ ] Use redux-observable instead saga +* [ ] ~~Use redux-observable instead saga~~ * [ ] Assets (css, js) caching * [x] HMR route v4 * [ ] PWA -[commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit# +## Contributors + +Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): + + + +| [
Vytenis](https://github.com/FDiskas)
[🐛](https://github.com/FDiskas/react-typescript/issues?q=author%3AFDiskas "Bug reports") [💻](https://github.com/FDiskas/react-typescript/commits?author=FDiskas "Code") [📖](https://github.com/FDiskas/react-typescript/commits?author=FDiskas "Documentation") [📋](#eventOrganizing-FDiskas "Event Organizing") [💡](#example-FDiskas "Examples") [🤔](#ideas-FDiskas "Ideas, Planning, & Feedback") [🚇](#infra-FDiskas "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-FDiskas "Reviewed Pull Requests") [🔧](#tool-FDiskas "Tools") | [
Genadij Bojev](https://github.com/gennbo)
[🐛](https://github.com/FDiskas/react-typescript/issues?q=author%3Agennbo "Bug reports") [💻](https://github.com/FDiskas/react-typescript/commits?author=gennbo "Code") | [
Aivaras](https://github.com/aivaras-b)
[👀](#review-aivaras-b "Reviewed Pull Requests") | +| :---: | :---: | :---: | + + +This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome! diff --git a/config/webpack.common.ts b/config/webpack.common.ts index 6af0564..3362179 100644 --- a/config/webpack.common.ts +++ b/config/webpack.common.ts @@ -3,8 +3,8 @@ import * as webpack from 'webpack'; export const webpackCommon = { entry: { - vendors: Object.keys(require(path.resolve('package.json')).dependencies), app: ['./src/client/index.tsx'], + vendors: Object.keys(require(path.resolve('package.json')).dependencies), }, output: { diff --git a/package.json b/package.json index c51d7d4..52448c9 100644 --- a/package.json +++ b/package.json @@ -1,223 +1,217 @@ { - "name": "react-typescript", - "version": "1.5.1", - "license": "MIT", - "description": "React & typescript boilerplate", - "repository": "https://github.com/nfq-eta/react-typescript", - "homepage": "https://github.com/nfq-eta/react-typescript", - "main": "src/client/index.tsx", - "scripts": { - "cm": "git-cz", - "predev": "tcm -p src/client/**/*.{css,scss}", - "prebuild": "tcm -p src/client/**/*.{css,scss} && rimraf ./dist ./coverage", - "cleanup": "yarn prebuild", - "build:server": "cross-env NODE_ENV=production webpack --env=server --display-error-details", - "build": "cross-env NODE_ENV=production webpack -p --env=prod --display-error-details && yarn build:server", - "prebuild:start": "yarn build", - "postbuild": "yarn build-storybook", - "build:start": "serve -s -o -C -n dist", - "lint": "tslint -c ./tslint.json -p ./tsconfig.json -t stylish", - "lint:css": "stylelint './src/client/**/*.{css,scss}'", - "test": "jest --watch --no-cache", - "test:ci": "jest --env=jsdom --no-cache --maxWorkers=2", - "test:coverage": "cross-env NODE_ENV=test jest --env=jsdom --no-cache --coverage", - "prepush": "yarn test:ci --notify && yarn lint && yarn lint:css", - "dev": "cross-env NODE_ENV=development webpack-dev-server --open --env=dev", - "start": "node ./dist/server.js", - "start:storybook": "start-storybook -p 6006 -c config/storybook", - "build-storybook": "build-storybook -c config/storybook -o ./dist/docs", - "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md", - "precommit": "lint-staged" + "name": "react-typescript", + "version": "1.5.1", + "license": "MIT", + "description": "React & typescript boilerplate", + "repository": "https://github.com/nfq-eta/react-typescript.git", + "homepage": "https://github.com/nfq-eta/react-typescript", + "main": "src/client/index.tsx", + "scripts": { + "cm": "git-cz", + "predev": "tcm -p src/client/**/*.{css,scss}", + "prebuild": "tcm -p src/client/**/*.{css,scss} && rimraf ./dist ./coverage", + "cleanup": "yarn prebuild", + "build:server": "cross-env NODE_ENV=production webpack --env=server --display-error-details--progress", + "build:client": "cross-env NODE_ENV=production webpack -p --env=prod --display-error-details --progress", + "build": "yarn build:client && yarn build:server", + "prebuild:start": "yarn build", + "postbuild": "yarn build-storybook", + "build:start": "serve -s -o -C -n dist", + "lint": "tslint -c ./tslint.json -p ./tsconfig.json -t stylish", + "lint:ts": "tsc --noEmit", + "lint:css": "stylelint './src/client/**/*.{css,scss}'", + "test": "jest --watch --no-cache", + "test:ci": "jest --env=jsdom --no-cache --maxWorkers=2", + "test:coverage": "cross-env NODE_ENV=test jest --env=jsdom --no-cache --coverage", + "prepush": "yarn test:ci --notify && yarn lint && yarn lint:css", + "dev": "cross-env NODE_ENV=development webpack-dev-server --open --env=dev", + "start": "node ./dist/server.js", + "start:storybook": "start-storybook -p 6006 -c config/storybook", + "build-storybook": "build-storybook -c config/storybook -o ./dist/docs", + "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md", + "precommit": "yarn lint:ts && lint-staged", + "contributors:add": "all-contributors add", + "contributors:generate": "all-contributors generate", + "doctoc": "doctoc --github" + }, + "devDependencies": { + "@storybook/addon-actions": "3.2.17", + "@storybook/addon-info": "3.2.17", + "@storybook/addon-knobs": "3.2.17", + "@storybook/addon-links": "3.2.17", + "@storybook/addon-options": "3.2.17", + "@storybook/react": "3.2.17", + "@types/compression": "0.0.35", + "@types/enzyme": "3.1.5", + "@types/enzyme-to-json": "1.5.0", + "@types/express": "4.11.0", + "@types/extract-text-webpack-plugin": "3.0.0", + "@types/get-port": "^3.2.0", + "@types/history": "4.6.2", + "@types/html-webpack-plugin": "2.30.1", + "@types/jest": "21.1.8", + "@types/node": "8.0.57", + "@types/optimize-css-assets-webpack-plugin": "1.3.1", + "@types/package-json": "4.0.1", + "@types/react": "16.0.25", + "@types/react-dom": "16.0.3", + "@types/react-hot-loader": "3.0.5", + "@types/react-router-dom": "4.2.3", + "@types/react-test-renderer": "16.0.0", + "@types/storybook__addon-actions": "3.0.1", + "@types/storybook__addon-info": "3.2.1", + "@types/storybook__addon-knobs": "3.2.1", + "@types/storybook__addon-options": "3.2.0", + "@types/storybook__react": "3.0.5", + "@types/webpack": "3.8.1", + "@types/webpack-dotenv-plugin": "2.0.0", + "@types/webpack-env": "1.13.3", + "@types/webpack-merge": "4.1.1", + "all-contributors-cli": "^4.3.0", + "babel-polyfill": "6.26.0", + "babel-preset-react-app": "3.1.1", + "color-convert": "1.9.1", + "commitizen": "2.9.6", + "compression": "1.7.2", + "conventional-changelog-cli": "1.3.21", + "cross-env": "5.1.4", + "css-hot-loader": "1.3.9", + "css-loader": "0.28.11", + "cz-conventional-changelog": "2.1.0", + "doctoc": "1.3.1", + "enzyme": "3.3.0", + "enzyme-adapter-react-16": "1.1.1", + "enzyme-to-json": "3.3.3", + "express": "4.16.2", + "extract-text-webpack-plugin": "3.0.2", + "file-loader": "1.1.11", + "get-port": "3.2.0", + "history": "4.7.2", + "html-webpack-plugin": "2.30.1", + "http-status-enum": "1.0.2", + "husky": "0.14.3", + "identity-obj-proxy": "3.0.0", + "jest": "22.1.4", + "jest-css-modules": "1.1.0", + "jest-css-modules-transform": "1.0.5", + "json-d-ts": "1.0.1", + "lint-staged": "6.1.1", + "mkdirp": "0.5.1", + "node-sass": "4.7.2", + "optimize-css-assets-webpack-plugin": "3.2.0", + "prettier": "1.11.1", + "raf": "3.4.0", + "react-docgen-typescript-webpack-plugin": "1.1.0", + "react-hot-loader": "3.1.3", + "react-router-dom": "4.2.2", + "react-test-renderer": "16.1.1", + "resolve-url-loader": "2.2.1", + "rimraf": "2.6.2", + "sass-loader": "6.0.6", + "serve": "6.5.3", + "source-map-loader": "0.2.3", + "style-loader": "0.19.0", + "stylelint": "9.0.0", + "stylelint-config-css-modules": "1.2.0", + "stylelint-config-sass-guidelines": "4.1.0", + "stylelint-order": "0.8.1", + "stylelint-scss": "2.3.0", + "ts-jest": "22.0.4", + "ts-loader": "3.5.0", + "ts-node": "4.1.0", + "tslib": "1.9.0", + "tslint": "5.9.1", + "tslint-config-airbnb": "5.8.0", + "tslint-plugin-prettier": "1.3.0", + "tslint-react": "3.5.1", + "tsutils": "2.21.1", + "typed-css-modules": "0.3.1", + "typescript": "2.8.1", + "typescript-babel-jest": "1.0.5", + "typings-for-css-modules-loader": "1.7.0", + "url-loader": "0.6.2", + "webpack": "3.10.0", + "webpack-dashboard": "0.4.0", + "webpack-dev-middleware": "1.12.2", + "webpack-dev-server": "2.9.7", + "webpack-dotenv-plugin": "2.0.2", + "webpack-hot-middleware": "2.21.0", + "webpack-merge": "4.1.1" + }, + "dependencies": { + "react": "^16.1.1", + "react-dom": "^16.1.1", + "react-easy-state": "5.0.0", + "react-router4-with-layouts": "1.2.6" + }, + "lint-staged": { + "src/client/**/*.{ts,tsx}": [ + "yarn lint --fix", + "git add" + ], + "src/client/**/*.{css,scss}": [ + "yarn lint:css --fix", + "git add" + ], + "{README,CONTRIBUTING}.md": [ + "yarn doctoc", + "git add" + ] + }, + "jest": { + "globals": { + "ts-jest": {} }, - "devDependencies": { - "@storybook/addon-actions": "3.2.17", - "@storybook/addon-info": "3.2.17", - "@storybook/addon-knobs": "3.2.17", - "@storybook/addon-links": "3.2.17", - "@storybook/addon-options": "3.2.17", - "@storybook/react": "3.2.17", - "@types/compression": "0.0.35", - "@types/enzyme": "3.1.5", - "@types/enzyme-to-json": "1.5.0", - "@types/express": "4.11.0", - "@types/extract-text-webpack-plugin": "3.0.0", - "@types/get-port": "^3.2.0", - "@types/history": "4.6.2", - "@types/html-webpack-plugin": "2.30.1", - "@types/jest": "21.1.8", - "@types/node": "8.0.57", - "@types/optimize-css-assets-webpack-plugin": "1.3.1", - "@types/package-json": "4.0.1", - "@types/react": "16.0.25", - "@types/react-dom": "16.0.3", - "@types/react-hot-loader": "3.0.5", - "@types/react-redux": "5.0.13", - "@types/react-router-dom": "4.2.3", - "@types/react-router-redux": "5.0.10", - "@types/react-test-renderer": "16.0.0", - "@types/redux-actions": "2.2.3", - "@types/redux-logger": "3.0.5", - "@types/redux-mock-store": "0.0.12", - "@types/storybook__addon-actions": "3.0.1", - "@types/storybook__addon-info": "3.2.1", - "@types/storybook__addon-knobs": "3.2.1", - "@types/storybook__addon-options": "3.2.0", - "@types/storybook__react": "3.0.5", - "@types/uniqid": "4.1.2", - "@types/webpack": "3.8.1", - "@types/webpack-dotenv-plugin": "2.0.0", - "@types/webpack-env": "1.13.3", - "@types/webpack-merge": "4.1.1", - "babel-core": "6.26.0", - "babel-loader": "7.1.2", - "babel-polyfill": "6.26.0", - "babel-preset-es2015": "6.24.1", - "babel-preset-react": "6.24.1", - "babel-preset-stage-0": "6.24.1", - "babel-runtime": "6.26.0", - "color-convert": "1.9.1", - "commitizen": "2.9.6", - "compression": "1.7.1", - "conventional-changelog-cli": "1.3.5", - "cross-env": "5.1.1", - "css-hot-loader": "1.3.4", - "css-loader": "0.28.7", - "cz-conventional-changelog": "2.1.0", - "enzyme": "3.2.0", - "enzyme-adapter-react-16": "1.1.0", - "enzyme-to-json": "3.2.2", - "express": "4.16.2", - "extract-text-webpack-plugin": "3.0.2", - "file-loader": "1.1.5", - "get-port": "3.2.0", - "history": "4.7.2", - "html-webpack-plugin": "2.30.1", - "http-status-enum": "1.0.2", - "husky": "0.14.3", - "identity-obj-proxy": "3.0.0", - "jest": "22.3.0", - "json-d-ts": "1.0.1", - "lint-staged": "6.1.1", - "mkdirp": "0.5.1", - "node-sass": "4.7.2", - "optimize-css-assets-webpack-plugin": "3.2.0", - "prettier": "1.10.2", - "raf": "3.4.0", - "react-docgen-typescript-webpack-plugin": "1.1.0", - "react-hot-loader": "3.1.3", - "react-router-dom": "4.2.2", - "react-router-redux": "4.0.8", - "react-test-renderer": "16.1.1", - "redux-actions": "2.2.1", - "redux-devtools-extension": "2.13.2", - "redux-logger": "3.0.6", - "redux-mock-store": "1.3.0", - "redux-observable": "0.17.0", - "resolve-url-loader": "2.2.1", - "rimraf": "2.6.2", - "sass-loader": "6.0.6", - "serve": "6.4.1", - "source-map-loader": "0.2.3", - "style-loader": "0.19.0", - "stylelint": "9.0.0", - "stylelint-config-css-modules": "1.2.0", - "stylelint-config-sass-guidelines": "4.1.0", - "stylelint-order": "0.8.1", - "stylelint-scss": "2.3.0", - "ts-jest": "22.0.4", - "ts-loader": "3.5.0", - "ts-node": "4.1.0", - "tslib": "1.9.0", - "tslint": "5.9.1", - "tslint-config-airbnb": "5.8.0", - "tslint-plugin-prettier": "1.3.0", - "tslint-react": "3.5.1", - "tsutils": "2.21.1", - "typed-css-modules": "0.3.1", - "typescript": "2.8.1", - "typescript-babel-jest": "1.0.5", - "typings-for-css-modules-loader": "1.7.0", - "uniqid": "4.1.1", - "url-loader": "0.6.2", - "webpack": "3.10.0", - "webpack-dashboard": "0.4.0", - "webpack-dev-middleware": "1.12.2", - "webpack-dev-server": "2.9.7", - "webpack-dotenv-plugin": "2.0.2", - "webpack-hot-middleware": "2.21.0", - "webpack-merge": "4.1.1" + "setupFiles": [ + "./config/jest/bootstrap.js" + ], + "snapshotSerializers": [ + "enzyme-to-json/serializer" + ], + "transform": { + "^.+\\.tsx?$": "./node_modules/ts-jest/preprocessor.js", + "^.+\\.s?css$": "./node_modules/jest-css-modules-transform" }, - "dependencies": { - "react": "^16.1.1", - "react-dom": "^16.1.1", - "react-redux": "5.0.6", - "react-router4-with-layouts": "1.2.6", - "redux": "3.7.2" - }, - "lint-staged": { - "src/**/*.{js,jsx,ts,tsx,json,css,scss}": [ - "prettier --write", - "git add" - ] - }, - "jest": { - "globals": { - "ts-jest": { - "skipBabel": true - } - }, - "setupFiles": [ - "/config/jest/bootstrap.js" - ], - "snapshotSerializers": [ - "enzyme-to-json/serializer" - ], - "transform": { - "^.+\\.tsx?$": "/node_modules/ts-jest/preprocessor.js" - }, - "testRegex": "^.+\\.test\\.tsx?$", - "collectCoverageFrom": [ - "src/**/*.tsx", - "!src/client/index.tsx", - "!/node_modules/", - "!src/**/*.story.tsx" - ], - "moduleFileExtensions": [ - "js", - "jsx", - "json", - "ts", - "tsx" - ], - "moduleNameMapper": { - "^.+\\.s?css$": "identity-obj-proxy" - }, - "mapCoverage": true, - "coverageDirectory": "./coverage/" - }, - "stylelint": { - "extends": [ - "stylelint-config-sass-guidelines", - "stylelint-config-css-modules" - ], - "rules": { - "indentation": 4, - "number-leading-zero": null, - "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$", - "order/properties-alphabetical-order": null, - "max-nesting-depth": [ - 3 - ], - "selector-max-compound-selectors": 4 - } - }, - "config": { - "commitizen": { - "path": "node_modules/cz-conventional-changelog" - } - }, - "engines": { - "node": ">= 8.9", - "yarn": ">= 1.3.2" + "testRegex": "^.+\\.test\\.tsx?$", + "collectCoverageFrom": [ + "src/client/**/*.tsx", + "!src/client/index.tsx", + "!/node_modules/", + "!src/**/*.story.tsx" + ], + "moduleFileExtensions": [ + "js", + "jsx", + "json", + "ts", + "tsx", + "node" + ], + "coverageDirectory": "./coverage/" + }, + "stylelint": { + "extends": [ + "stylelint-config-sass-guidelines", + "stylelint-config-css-modules" + ], + "rules": { + "indentation": 2, + "number-leading-zero": null, + "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$", + "order/properties-alphabetical-order": null, + "max-nesting-depth": [ + 3 + ], + "selector-max-compound-selectors": 4 + } + }, + "config": { + "commitizen": { + "path": "node_modules/cz-conventional-changelog" } + }, + "engines": { + "node": ">= 8.9", + "yarn": ">= 1.3.2" + } } diff --git a/src/client/components/checkbox/CheckBoxComponent.css b/src/client/components/checkbox/CheckBoxComponent.css deleted file mode 100644 index 2bc8526..0000000 --- a/src/client/components/checkbox/CheckBoxComponent.css +++ /dev/null @@ -1,8 +0,0 @@ -.checkBox { - cursor: pointer; -} - -.checkBoxSelected { - composes: checkBox; - color: #ff1323; -} diff --git a/src/client/components/checkbox/CheckBoxComponent.scss b/src/client/components/checkbox/CheckBoxComponent.scss new file mode 100644 index 0000000..0ad79e6 --- /dev/null +++ b/src/client/components/checkbox/CheckBoxComponent.scss @@ -0,0 +1,8 @@ +.checkBox { + cursor: pointer; +} + +.checkBoxSelected { + composes: checkBox; + color: #ff1323; +} diff --git a/src/client/components/checkbox/CheckBoxComponent.tsx b/src/client/components/checkbox/CheckBoxComponent.tsx index db91e99..ad4e3b4 100644 --- a/src/client/components/checkbox/CheckBoxComponent.tsx +++ b/src/client/components/checkbox/CheckBoxComponent.tsx @@ -1,17 +1,18 @@ import * as React from 'react'; -import * as styles from './CheckBoxComponent.css'; + +import * as styles from './CheckBoxComponent.scss'; export interface IItem { id: string | number; value: string | number; - label: string; + label: string | number; } export interface IProps { /** Checkbox item */ item: IItem; /** Handle Action called when checked */ - handleClick: (item: IItem, checked: boolean) => void; + handleClick?: (item: IItem, checked: boolean) => void; /** Is it active by default? */ checked?: boolean; } @@ -45,9 +46,10 @@ export class CheckBox extends React.Component { handleClick = (e: React.ChangeEvent | ITestEvent) => { const checked = e.target.checked; + const { handleClick } = this.props; this.setState({ checked }); - this.props.handleClick(this.props.item, checked); + handleClick && handleClick(this.props.item, checked); }; render() { diff --git a/src/client/components/checkbox/tests/__snapshots__/CheckBoxComponent.test.tsx.snap b/src/client/components/checkbox/tests/__snapshots__/CheckBoxComponent.test.tsx.snap index 25dda68..1ecdb6d 100644 --- a/src/client/components/checkbox/tests/__snapshots__/CheckBoxComponent.test.tsx.snap +++ b/src/client/components/checkbox/tests/__snapshots__/CheckBoxComponent.test.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CheckBox.js matches snapshot 1`] = ` -