diff --git a/.eslintrc.js b/.eslintrc.js index 22ca2f2d3409..ac22968e51be 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { root: true, - extends: ['eslint:recommended', 'plugin:react/recommended'], + extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'], parser: '@babel/eslint-parser', env: { browser: true, diff --git a/.markdownlint.json b/.markdownlint.json index 382a427c61a9..076470ed892d 100644 --- a/.markdownlint.json +++ b/.markdownlint.json @@ -2,7 +2,7 @@ "default": true, "MD002": false, "MD004": { "style": "dash" }, - "MD007": { "indent": 4 }, + "MD007": { "indent": 2 }, "MD013": { "line_length": 600 }, "MD026": false, "MD029": { "style": "ordered" }, @@ -11,6 +11,5 @@ "MD036": false, "MD041": false, "no-hard-tabs": false, - "whitespace": false, - "emphasis-style": { "style": "_" } + "whitespace": false } diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/.vale/proselint/meta.json b/.vale/proselint/meta.json index e3c65800b86a..7cebe88521b1 100644 --- a/.vale/proselint/meta.json +++ b/.vale/proselint/meta.json @@ -8,9 +8,7 @@ "issues": "https://github.com/errata-ai/proselint/issues/new", "license": "BSD-3-Clause", "name": "proselint", - "sources": [ - "https://github.com/amperser/proselint" - ], + "sources": ["https://github.com/amperser/proselint"], "vale_version": ">=1.0.0", "coverage": 0.0, "version": "0.1.0" diff --git a/cypress/integration/scroll_spec.js b/cypress/integration/scroll_spec.js index ae2ee063b181..e083f6e42f83 100644 --- a/cypress/integration/scroll_spec.js +++ b/cypress/integration/scroll_spec.js @@ -1,6 +1,6 @@ const sizes = ['iphone-6', 'macbook-15']; describe('Scroll Test', () => { - sizes.forEach(size => { + sizes.forEach((size) => { it(`scroll to top when accessing new page on ${size}`, () => { cy.viewport(size); cy.visit('/guides/getting-started'); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 8c9c82e98a83..c55e724ae3bc 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -1,5 +1,5 @@ -Cypress.Commands.add('isNotInViewport', element => { - cy.get(element).then($el => { +Cypress.Commands.add('isNotInViewport', (element) => { + cy.get(element).then(($el) => { // we won't have horizontal scollbar const rect = $el[0].getBoundingClientRect(); if (rect.top < 0) { @@ -10,8 +10,8 @@ Cypress.Commands.add('isNotInViewport', element => { }); }); -Cypress.Commands.add('isInViewport', element => { - cy.get(element).then($el => { +Cypress.Commands.add('isInViewport', (element) => { + cy.get(element).then(($el) => { const rect = $el[0].getBoundingClientRect(); expect(rect.top).to.be.at.least(0); diff --git a/package.json b/package.json index 07b5751592c3..65962b43f539 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "lint:js": "npm run lint-js .", "lint-js": "eslint --cache --cache-location .cache/.eslintcache", "lint:markdown": "npm run lint-markdown *.md ./src/content/**/*.md", - "lint-markdown": "markdownlint --rules markdownlint-rule-emphasis-style --config ./.markdownlint.json --ignore './src/content/**/_*.md' --ignore '.vale/**/*.md' --ignore '.github/**/*.md'", + "lint-markdown": "markdownlint --config ./.markdownlint.json --ignore './src/content/**/_*.md' --ignore '.vale/**/*.md' --ignore '.github/**/*.md'", "lint:social": "alex . -q", "lint:prose": "vale --config='.vale.ini' src/content", "lint:links": "hyperlink -c 8 --root dist -r dist/index.html --canonicalroot https://webpack.js.org/ --internal --skip /plugins/extract-text-webpack-plugin/ --skip /printable --skip https:// --skip http:// --skip sw.js > internal-links.tap; cat internal-links.tap | tap-spot", @@ -55,7 +55,8 @@ "jest": "jest", "cypress:open": "cypress open", "cypress:run": "cypress run", - "cypress:ci": "start-server-and-test build-test http://localhost:4200 cypress:run" + "cypress:ci": "start-server-and-test build-test http://localhost:4200 cypress:run", + "prettier": "prettier --write 'src/**/*.{js,jsx,css,scss,md,mdx}' '**/*.{js,json}'" }, "husky": { "hooks": { @@ -68,6 +69,9 @@ ], "*.md": [ "npm run lint-markdown" + ], + "*.{js,jsx,css,scss,md,mdx,json}": [ + "prettier --write" ] }, "devDependencies": { @@ -92,6 +96,7 @@ "directory-tree-webpack-plugin": "^1.0.2", "duplexer": "^0.1.1", "eslint": "^7.19.0", + "eslint-config-prettier": "^7.2.0", "eslint-plugin-cypress": "^2.11.2", "eslint-plugin-markdown": "^2.0.0-rc.2", "eslint-plugin-react": "^7.22.0", @@ -106,7 +111,6 @@ "lodash": "^4.17.19", "markdownlint": "^0.22.0", "markdownlint-cli": "^0.26.0", - "markdownlint-rule-emphasis-style": "^1.0.0", "mini-css-extract-plugin": "^1.3.5", "mkdirp": "^1.0.4", "modularscale-sass": "^3.0.3", @@ -114,6 +118,7 @@ "npm-run-all": "^4.1.1", "postcss": "^8.2.4", "postcss-loader": "^5.0.0", + "prettier": "^2.2.1", "react-refresh": "^0.9.0", "redirect-webpack-plugin": "^1.0.0", "remark": "^13.0.0", diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 000000000000..ca047dca8597 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,5 @@ +module.exports = { + singleQuote: true, + semi: true, + trailingComma: 'es5', +}; diff --git a/sitemap-ignore.json b/sitemap-ignore.json index 2ff6d832dcb9..a3987d3fda09 100644 --- a/sitemap-ignore.json +++ b/sitemap-ignore.json @@ -1,5 +1,5 @@ [ - "app-shell/index.html", + "app-shell/index.html", "appcache/manifest.html", "printable/index.html", "api/printable/index.html", diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx index 56391a3828d4..3d689c7f36b0 100644 --- a/src/components/Configuration/Configuration.jsx +++ b/src/components/Configuration/Configuration.jsx @@ -1,15 +1,71 @@ import { Children, isValidElement } from 'react'; import { Details } from './components'; -const detailComponentsList = ['link', 'mode', 'entry', 'path', 'filename', 'publicPath', 'library', 'libraryType', 'libraryName', 'advancedLibrary', 'advancedOutput', 'expertOutput', 'expertOutputB', 'expert', 'advancedConditions', 'moduleType', 'advancedActions', 'advancedModule', 'modules', 'alias', 'advancedResolve', 'expertResolve', 'hints', 'devtool', 'target', 'externals', 'externalsType', 'externalsPresets', 'ignoreWarnings', 'stats', 'preset', 'advancedGlobal', 'advancedAssets', 'advancedChunkGroups', 'advancedChunks', 'advancedModules', 'expertModules', 'advancedStatsOptimization', 'advancedOptimization', 'cacheGroupAdvancedSelectors', 'cacheGroupAdvancedEffects', 'advancedSelectors', 'advancedEffects', 'fallbackCacheGroup', 'advanced', 'advancedCaching', 'advancedBuild']; -export const Pre = props => { +const detailComponentsList = [ + 'link', + 'mode', + 'entry', + 'path', + 'filename', + 'publicPath', + 'library', + 'libraryType', + 'libraryName', + 'advancedLibrary', + 'advancedOutput', + 'expertOutput', + 'expertOutputB', + 'expert', + 'advancedConditions', + 'moduleType', + 'advancedActions', + 'advancedModule', + 'modules', + 'alias', + 'advancedResolve', + 'expertResolve', + 'hints', + 'devtool', + 'target', + 'externals', + 'externalsType', + 'externalsPresets', + 'ignoreWarnings', + 'stats', + 'preset', + 'advancedGlobal', + 'advancedAssets', + 'advancedChunkGroups', + 'advancedChunks', + 'advancedModules', + 'expertModules', + 'advancedStatsOptimization', + 'advancedOptimization', + 'cacheGroupAdvancedSelectors', + 'cacheGroupAdvancedEffects', + 'advancedSelectors', + 'advancedEffects', + 'fallbackCacheGroup', + 'advanced', + 'advancedCaching', + 'advancedBuild', +]; +export const Pre = (props) => { // eslint-disable-next-line - const newChildren = Children.map(props.children.props.children, child => { + const newChildren = Children.map(props.children.props.children, (child) => { if (isValidElement(child)) { if (child.props.className.includes('keyword')) { - if (!detailComponentsList.includes(child.props.componentname)) return child; - // eslint-disable-next-line - return
; + if (!detailComponentsList.includes(child.props.componentname)) + return child; + return ( +
+ ); } } @@ -17,7 +73,7 @@ export const Pre = props => { }); const newProps = { - children: newChildren + children: newChildren, }; return ( @@ -26,6 +82,4 @@ export const Pre = props => { ); }; -Pre.propTypes = { - -}; +Pre.propTypes = {}; diff --git a/src/components/Configuration/components.js b/src/components/Configuration/components.js index 0df48954afdb..40a9c0f13737 100644 --- a/src/components/Configuration/components.js +++ b/src/components/Configuration/components.js @@ -5,9 +5,9 @@ import PropTypes from 'prop-types'; const DEFAULT_CHILDREN_SIZE = 4; -const isFirstChild = child => typeof child === 'string' && child !== ' '; +const isFirstChild = (child) => typeof child === 'string' && child !== ' '; -const removeSpaces = child => (isFirstChild(child) ? child.trim() : child); +const removeSpaces = (child) => (isFirstChild(child) ? child.trim() : child); const addLink = (child, i, url) => { return isFirstChild(child) ? ( @@ -28,17 +28,17 @@ const Card = ({ body }) => { ); }; Card.propTypes = { - body: PropTypes.node + body: PropTypes.node, }; export class Details extends Component { static propTypes = { url: PropTypes.string, - children: PropTypes.arrayOf(PropTypes.node) - } + myChilds: PropTypes.arrayOf(PropTypes.node), + }; constructor(props) { super(props); this.state = { - open: false + open: false, }; } @@ -51,10 +51,10 @@ export class Details extends Component { }; render() { - const { children, url } = this.props; + const { myChilds, url } = this.props; // Find the index of - const closeDefaultTagIndex = children.findIndex(child => { + const closeDefaultTagIndex = myChilds.findIndex((child) => { if (isValidElement(child)) { return ( child.props.className.includes('tag') && @@ -63,7 +63,7 @@ export class Details extends Component { } }); - const content = children.slice(); + const content = myChilds.slice(); // Summary is the part of the snippet that would be shown in the code snippet, // to get it we need to cut the enclosing tags @@ -85,7 +85,7 @@ export class Details extends Component { content={} > {summary} diff --git a/src/components/Container/Container.jsx b/src/components/Container/Container.jsx index 0d59ec55a89d..fbd77ca8aee8 100644 --- a/src/components/Container/Container.jsx +++ b/src/components/Container/Container.jsx @@ -2,14 +2,10 @@ import './Container.scss'; import PropTypes from 'prop-types'; Container.propTypes = { className: PropTypes.string, - children: PropTypes.node + children: PropTypes.node, }; -export default function Container (props = {}) { +export default function Container(props = {}) { let { className = '' } = props; - return ( -
- { props.children } -
- ); + return
{props.children}
; } diff --git a/src/components/Contributors/Contributors.jsx b/src/components/Contributors/Contributors.jsx index 19e014c55ca5..b332caad1fc0 100644 --- a/src/components/Contributors/Contributors.jsx +++ b/src/components/Contributors/Contributors.jsx @@ -6,18 +6,18 @@ import PropTypes from 'prop-types'; export default class Contributors extends Component { static propTypes = { - contributors: PropTypes.array - } + contributors: PropTypes.array, + }; state = { - inView: false - } + inView: false, + }; handleInView = (inView) => { if (!inView) { return; } this.setState({ inView }); - } + }; render() { const { inView } = this.state; @@ -28,23 +28,31 @@ export default class Contributors extends Component { } return ( - + intervalDelay={300} + onChange={this.handleInView} + >
- { - contributors.map(contributor => ( - - { - {contributor} - - )) - } + {contributors.map((contributor) => ( + + {contributor} + {contributor} + + ))}
diff --git a/src/components/Cube/Cube.jsx b/src/components/Cube/Cube.jsx index 9f4177ab9813..e3864063fbf5 100644 --- a/src/components/Cube/Cube.jsx +++ b/src/components/Cube/Cube.jsx @@ -12,7 +12,7 @@ export default class Cube extends Component { depth: PropTypes.number, repeatDelay: PropTypes.number, className: PropTypes.string, - continuous: PropTypes.bool + continuous: PropTypes.bool, }; static defaultProps = { @@ -27,7 +27,7 @@ export default class Cube extends Component { y: 0, z: 0, iteration: 0, - } + }; render() { let { x, y, z } = this.state; @@ -35,46 +35,50 @@ export default class Cube extends Component { return (
- this.container = ref } - className={ `cube cube--${theme}` } + className={`cube__container ${className}`} style={{ - width: `${depth}px`, - paddingBottom: `${depth * 0.5}px` - }}> -
+ (this.container = ref)} + className={`cube cube--${theme}`} style={{ width: `${depth}px`, - height: `${depth}px`, - transform: `translateX(-50%) + paddingBottom: `${depth * 0.5}px`, + }} + > +
- { this._getFaces('outer') } -
-
+ {this._getFaces('outer')} +
+
- { this._getFaces('inner') } -
- + rotateZ(${-z}deg)`, + }} + > + {this._getFaces('inner')} +
+
); } @@ -85,7 +89,6 @@ export default class Cube extends Component { if (hover) { this.container.addEventListener('mouseenter', this._spin); this.container.addEventListener('mouseleave', this._reset); - } else if (continuous) { let degrees = 0; let axis = 'y'; @@ -93,11 +96,15 @@ export default class Cube extends Component { let animation = () => { let obj = {}; obj[axis] = degrees += 90; - this.setState({ ...obj, iteration: (this.state.iteration + 1) % 4 }); + this.setState({ + ...obj, + iteration: (this.state.iteration + 1) % 4, + }); tick(); }; - let tick = () => setTimeout(() => requestAnimationFrame(animation), repeatDelay); + let tick = () => + setTimeout(() => requestAnimationFrame(animation), repeatDelay); this._timeout = tick(); } @@ -109,7 +116,6 @@ export default class Cube extends Component { if (hover) { this.container.removeEventListener('mouseenter', this._spin); this.container.removeEventListener('mouseleave', this._reset); - } else if (continuous) { clearTimeout(this._timeout); } @@ -162,7 +168,7 @@ export default class Cube extends Component { right: [1, 1, 6, 1], top: [1, 1, 1, 1], bottom: [1, 6, 6, 1], - } + }, }; return [ @@ -171,23 +177,27 @@ export default class Cube extends Component { 'rotateX(90deg)', 'rotateY(-90deg)', 'rotateY(90deg)', - 'rotateY(180deg)' + 'rotateY(180deg)', ].map((rotation, i) => { - const borderStyles = type === 'outer' ? { - borderTopWidth: borderWidthMap[i].top[iteration], - borderRightWidth: borderWidthMap[i].right[iteration], - borderBottomWidth: borderWidthMap[i].bottom[iteration], - borderLeftWidth: borderWidthMap[i].left[iteration], - } : {}; + const borderStyles = + type === 'outer' + ? { + borderTopWidth: borderWidthMap[i].top[iteration], + borderRightWidth: borderWidthMap[i].right[iteration], + borderBottomWidth: borderWidthMap[i].bottom[iteration], + borderLeftWidth: borderWidthMap[i].left[iteration], + } + : {}; return (
+ }} + /> ); }); } @@ -200,7 +210,7 @@ export default class Cube extends Component { _getRandomAxis() { let axes = Object.keys(this.state); - return axes[ Math.floor(Math.random() * axes.length) ]; + return axes[Math.floor(Math.random() * axes.length)]; } /** @@ -216,7 +226,7 @@ export default class Cube extends Component { obj[axis] = sign * 90; this.setState(obj); - } + }; /** * Rotate the cubes back to their original position @@ -227,7 +237,7 @@ export default class Cube extends Component { this.setState({ x: 0, y: 0, - z: 0 + z: 0, }); - } + }; } diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx index b842572a4500..06fea1cdef6d 100644 --- a/src/components/Dropdown/Dropdown.jsx +++ b/src/components/Dropdown/Dropdown.jsx @@ -6,21 +6,33 @@ import PropTypes from 'prop-types'; export default class Dropdown extends Component { static propTypes = { className: PropTypes.string, - items: PropTypes.array - } + items: PropTypes.array, + }; state = { - active: false + active: false, }; componentDidMount() { - document.addEventListener('keyup', this._closeDropdownOnEsc.bind(this), true); - document.addEventListener('focus', this._closeDropdownIfFocusLost.bind(this), true); - document.addEventListener('click', this._closeDropdownIfFocusLost.bind(this), true); + document.addEventListener( + 'keyup', + this._closeDropdownOnEsc.bind(this), + true + ); + document.addEventListener( + 'focus', + this._closeDropdownIfFocusLost.bind(this), + true + ); + document.addEventListener( + 'click', + this._closeDropdownIfFocusLost.bind(this), + true + ); } _closeDropdownOnEsc(e) { if (e.key === 'Escape' && this.state.active) { - this.setState({ active: false}, () => { + this.setState({ active: false }, () => { this.dropdownButton.focus(); }); } @@ -38,42 +50,48 @@ export default class Dropdown extends Component { return (