From 6be2dcbacc0a0016a5d4305a56b6009408e01394 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Tue, 7 Jul 2020 14:45:26 +0200 Subject: [PATCH] Lint markdown files to enforce consistent writing and reading experience --- .editorconfig | 3 - .markdownlintrc | 8 +++ LICENSE.md | 2 +- README.md | 40 +++++++---- package-lock.json | 168 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 4 +- 6 files changed, 207 insertions(+), 18 deletions(-) create mode 100644 .markdownlintrc diff --git a/.editorconfig b/.editorconfig index e38c36c8..1e5be680 100644 --- a/.editorconfig +++ b/.editorconfig @@ -11,6 +11,3 @@ indent_size = 2 indent_style = space insert_final_newline = true trim_trailing_whitespace = true - -[*.md] -trim_trailing_whitespace = false \ No newline at end of file diff --git a/.markdownlintrc b/.markdownlintrc new file mode 100644 index 00000000..74118c04 --- /dev/null +++ b/.markdownlintrc @@ -0,0 +1,8 @@ +{ + "comment": "All rules, see https://github.com/DavidAnson/markdownlint#rules--aliases", + + "default": true, + "MD013": { + "line_length": 100 + } +} diff --git a/LICENSE.md b/LICENSE.md index 97c347c8..f31f0737 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,4 +1,4 @@ -MIT License +# MIT License Copyright (c) 2019 @react-ui-org diff --git a/README.md b/README.md index 210fbab8..033acf1f 100644 --- a/README.md +++ b/README.md @@ -22,27 +22,35 @@ To use React UI in your app: 2. Install `react-ui` with `$ npm install --save @react-ui-org/react-ui`. 3. First import the **theme layer** to the topmost level of your React app. Either use the bundled theme as is: + ```js // app.jsx import '@react-ui-org/react-ui/src/lib/theme.scss'; ``` + or use it as a foundation to create your custom theme (see Theming for more): + ```js // app.jsx import './my-custom-theme.scss'; ``` - ⚠️ As of now, you will need **working SASS pipeline** for this to work. - This is to be changed to ready-to-use CSS in the future. - ℹ️ Technically it is possible to import the theme layer anywhere later in the app. - But it's a nice habit to declare variables before using them and that's what we are doing here. + ⚠️ As of now, you will need **working SASS pipeline** for this to work. This is to be changed + to ready-to-use CSS in the future. + + ℹ️ Technically it is possible to import the theme layer anywhere later in the app. But it's a + nice habit to declare variables before using them and that's what we are doing here. + 4. Add React UI **foundation styles**, the ground-zero CSS for React UI components: + ```js // app.jsx import '@react-ui-org/react-ui/src/lib/theme.scss'; import '@react-ui-org/react-ui/src/lib/foundation.scss'; ``` + 5. Optionally add the **helper and utility classes** bundles: + ```js // app.jsx import '@react-ui-org/react-ui/src/lib/theme.scss'; @@ -50,7 +58,9 @@ To use React UI in your app: import '@react-ui-org/react-ui/src/lib/helpers.scss'; import '@react-ui-org/react-ui/src/lib/utilities.scss'; ``` + 6. Finally, use React UI **components** just like you are used to: + ```js // MyDashboardScreen.jsx import React from 'react'; @@ -74,13 +84,15 @@ See the [default theme](src/lib/theme.scss) for the full list of available setti [cannot be used within media queries](https://www.w3.org/TR/css-variables-1/#using-variables) (because media query is not a CSS property). -ℹ️ Please note that CSS custom properties are only supported by modern browsers. -Refer to [caniuse.com](https://caniuse.com/#feat=css-variables) for compatibility overview. +ℹ️ Please note that CSS custom properties are only supported by modern browsers. Refer to +[caniuse.com](https://caniuse.com/#feat=css-variables) for compatibility overview. ### Theming Options + With output size in mind, we recommend to choose from these theming options: -- use the default theme and override just selected settings in your app — useful for tiny adjustments +- use the default theme and override just selected settings in your app — useful for tiny + adjustments - copy the default theme to your app and change whatever is needed — useful for major visual changes ## Extending @@ -93,8 +105,8 @@ that require icons allow to them to be passed in via props. ## Translations -Structure of translations can be found in file `src/lib/translation/TranslationContext.jsx`. -You can use `TranslationProvider` component and pass translated structure from this file into +Structure of translations can be found in file `src/lib/translation/TranslationContext.jsx`. You +can use `TranslationProvider` component and pass translated structure from this file into `TranslationProvider` as `translations` props to overwrite default translations. Second option is to overwrite translations locally using `translations` props of specific component. @@ -121,15 +133,17 @@ To publish the new version: ### Package linking -The best option for development of React UI is to link `react-ui` into your application with `npm link`. +The best option for development of React UI is to link `react-ui` into your application with +`npm link`. -1. In React UI repository run `npm link` +1. In React UI repository run `npm link` 2. In your application run `npm link @react-ui-org/react-ui` -To prevent [Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) +To prevent +[Invalid Hook Call Warning](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) when React UI is linked, add following code to Webpack configuration of your client: -``` +```js const path = require('path'); resolve: { diff --git a/package-lock.json b/package-lock.json index b761521a..e9bac7a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4222,6 +4222,12 @@ "regexp.prototype.flags": "^1.2.0" } }, + "deep-extend": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz", + "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", + "dev": true + }, "deep-is": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", @@ -6256,6 +6262,12 @@ "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==", "dev": true }, + "graceful-readlink": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz", + "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=", + "dev": true + }, "growly": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", @@ -9098,6 +9110,12 @@ "minimist": "^1.2.5" } }, + "jsonc-parser": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.2.1.tgz", + "integrity": "sha512-o6/yDBYccGvTz1+QFevz6l6OBZ2+fMVu2JZ9CIhzsYRX4mjaK5IyX9eldUdCmga16zlgQxyrj5pt9kzuj2C02w==", + "dev": true + }, "jsonfile": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", @@ -9241,6 +9259,15 @@ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "dev": true }, + "linkify-it": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", + "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", + "dev": true, + "requires": { + "uc.micro": "^1.0.1" + } + }, "load-json-file": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", @@ -9305,12 +9332,24 @@ "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "dev": true }, + "lodash.differencewith": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.differencewith/-/lodash.differencewith-4.5.0.tgz", + "integrity": "sha1-uvr7yRi1UVTheRdqALsK76rIVLc=", + "dev": true + }, "lodash.escape": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz", "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=", "dev": true }, + "lodash.flatten": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz", + "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=", + "dev": true + }, "lodash.flattendeep": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", @@ -9482,6 +9521,27 @@ "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==", "dev": true }, + "markdown-it": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz", + "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "entities": "~2.0.0", + "linkify-it": "^2.0.0", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + }, + "dependencies": { + "entities": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz", + "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==", + "dev": true + } + } + }, "markdown-table": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz", @@ -9491,6 +9551,76 @@ "repeat-string": "^1.0.0" } }, + "markdownlint": { + "version": "0.20.4", + "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.20.4.tgz", + "integrity": "sha512-jpfaPgjT0OpeBbemjYNZbzGG3hCLcAIvrm/pEY3+q/szDScG6ZonDacqySVRJAv9glbo8y4wBPJ0wgW17+9GGA==", + "dev": true, + "requires": { + "markdown-it": "10.0.0" + } + }, + "markdownlint-cli": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/markdownlint-cli/-/markdownlint-cli-0.23.2.tgz", + "integrity": "sha512-OSl5OZ8xzGN6z355cqRkiq67zPi3reJimklaF72p0554q85Dng5ToOjjSB9tDKZebSt85jX8cp+ruoQlPqOsPA==", + "dev": true, + "requires": { + "commander": "~2.9.0", + "deep-extend": "~0.5.1", + "get-stdin": "~5.0.1", + "glob": "~7.1.2", + "ignore": "~5.1.4", + "js-yaml": "~3.13.1", + "jsonc-parser": "~2.2.0", + "lodash.differencewith": "~4.5.0", + "lodash.flatten": "~4.4.0", + "markdownlint": "~0.20.4", + "markdownlint-rule-helpers": "~0.11.0", + "minimatch": "~3.0.4", + "minimist": "~1.2.5", + "rc": "~1.2.7" + }, + "dependencies": { + "commander": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz", + "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=", + "dev": true, + "requires": { + "graceful-readlink": ">= 1.0.0" + } + }, + "get-stdin": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz", + "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=", + "dev": true + }, + "ignore": { + "version": "5.1.8", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz", + "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==", + "dev": true + }, + "js-yaml": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", + "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + } + } + } + }, + "markdownlint-rule-helpers": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/markdownlint-rule-helpers/-/markdownlint-rule-helpers-0.11.0.tgz", + "integrity": "sha512-PhGii9dOiDJDXxiRMpK8N0FM9powprvRPsXALgkjlSPTwLh6ymH+iF3iUe3nq8KGu26tclFBlLL5xAGy/zb7FA==", + "dev": true + }, "mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -9517,6 +9647,12 @@ "unist-util-visit": "^2.0.0" } }, + "mdurl": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", + "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=", + "dev": true + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -11400,6 +11536,32 @@ } } }, + "rc": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", + "dev": true, + "requires": { + "deep-extend": "^0.6.0", + "ini": "~1.3.0", + "minimist": "^1.2.0", + "strip-json-comments": "~2.0.1" + }, + "dependencies": { + "deep-extend": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", + "dev": true + }, + "strip-json-comments": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", + "dev": true + } + } + }, "react": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", @@ -14049,6 +14211,12 @@ "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==", "dev": true }, + "uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==", + "dev": true + }, "unherit": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz", diff --git a/package.json b/package.json index e14a39ac..96c1f0cd 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "eslint-plugin-react-hooks": "^4.0.0", "identity-obj-proxy": "^3.0.0", "jest": "^26.0.1", + "markdownlint-cli": "~0.23.2", "node-sass": "^4.14.1", "postcss-loader": "^3.0.0", "sass-loader": "^8.0.2", @@ -71,8 +72,9 @@ "demo:test": "eslint --ext js,jsx src/demo", "lib:build": "webpack --mode development --config webpack.config.lib.js && webpack --mode production --config webpack.config.lib.js", "lib:test": "stylelint \"src/lib/**/*.scss\" --config stylelint.config.js && eslint --ext js,jsx src/lib && jest -w", + "lint-markdown": "markdownlint **/*.md --ignore dist --ignore node_modules", "prepublishOnly": "npm run lib:build", "start": "npm run demo:start", - "test": "npm run lib:test && npm run demo:test" + "test": "npm run lint-markdown && npm run lib:test && npm run demo:test" } }