diff --git a/app/javascript/.storybook/main.js b/app/javascript/.storybook/main.js index 3cc842a2e..2dd90bbf9 100644 --- a/app/javascript/.storybook/main.js +++ b/app/javascript/.storybook/main.js @@ -5,7 +5,8 @@ const renderer = new marked.Renderer(); const prettierConfig = require('../../../.prettierrc.json'); module.exports = { - stories: ['../**/__stories__/*.stories.(mdx|jsx)'], + // https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs + stories: ['../**/__stories__/*.stories.@(mdx|jsx)'], addons: [ '@storybook/addon-knobs', '@storybook/addon-actions', diff --git a/bin/generate-css-utility-classes-docs.js b/bin/generate-css-utility-classes-docs.js index 1ddbd04e6..1e59847c9 100755 --- a/bin/generate-css-utility-classes-docs.js +++ b/bin/generate-css-utility-classes-docs.js @@ -1,14 +1,13 @@ #!/usr/bin/env node /* eslint-env node */ -/* eslint-disable no-console */ const fs = require('fs'); const path = require('path'); const util = require('util'); const folderExists = util.promisify(fs.exists); const mkdir = util.promisify(fs.mkdir); -const sass = require('node-sass'); +const sass = require('sass'); const CSSOM = require('cssom'); const prettier = require('prettier'); const renderCss = util.promisify(sass.render); @@ -145,17 +144,23 @@ async function generateUtilityClassesDocumentation( styleSheet, fileWriter = file.writeFile, ) { - // eslint-disable-next-line no-console - console.log('Grouping stylesheet rules by CSS property'); + if (!process.env.CI) { + // eslint-disable-next-line no-console + console.log('Grouping stylesheet rules by CSS property'); + } + const rulesForStorybook = groupCssRulesByCssProperty(styleSheet.cssRules); for (const [cssProperty, cssRules] of Object.entries(rulesForStorybook)) { const storybookContent = generateUtilityClassStories(cssProperty, cssRules); - // eslint-disable-next-line no-console - console.log( - `Persisting Storybook stories for CSS utility classes related to the ${cssProperty} property.`, - ); + if (!process.env.CI) { + // eslint-disable-next-line no-console + console.log( + `Persisting Storybook stories for CSS utility classes related to the ${cssProperty} property.`, + ); + } + await fileWriter( path.join( GENERATED_STORIES_FOLDER, @@ -167,14 +172,19 @@ async function generateUtilityClassesDocumentation( } async function generateDocumentation() { - // eslint-disable-next-line no-console - console.log('Ensuring the auto-generated Storybook folder exists.'); + if (!process.env.CI) { + // eslint-disable-next-line no-console + console.log('Ensuring the auto-generated Storybook folder exists.'); + } if (!(await folderExists(GENERATED_STORIES_FOLDER))) { - // eslint-disable-next-line no-console - console.log( - 'The auto-generated Storybook folder does not exist. Creating it.', - ); + if (!process.env.CI) { + // eslint-disable-next-line no-console + console.log( + 'The auto-generated Storybook folder does not exist. Creating it.', + ); + } + await mkdir(GENERATED_STORIES_FOLDER, { recursive: true }); } @@ -183,8 +193,10 @@ async function generateDocumentation() { 'config/_generator.scss', ); - // eslint-disable-next-line no-console - console.log(`Generating the style sheet for ${utilityClassesFilename}`); + if (!process.env.CI) { + // eslint-disable-next-line no-console + console.log(`Generating the style sheet for ${utilityClassesFilename}`); + } try { const styleSheet = await getStyleSheet(utilityClassesFilename); diff --git a/docs/frontend/readme.md b/docs/frontend/readme.md index fb30038fc..69abf5251 100644 --- a/docs/frontend/readme.md +++ b/docs/frontend/readme.md @@ -1,18 +1,17 @@ --- +items: + - plain-js.md + - webpacker.md + - preact.md + - instant-click.md + - dynamic-imports.md + - styles.md + - linting-formatting.md + - liquid-tags.md + - debugging.md + - tracking.md + - accessibility.md + - tips.md +--- -title: Frontend Guide items: - -- plain-js.md -- webpacker.md -- preact.md -- instant-click.md -- dynamic-imports.md -- styles.md -- linting-formatting.md -- liquid-tags.md -- debugging.md -- tracking.md -- accessibility.md -- tips.md - # Frontend Guide diff --git a/package.json b/package.json index 5caab3fa9..6b038134f 100644 --- a/package.json +++ b/package.json @@ -15,13 +15,13 @@ "scripts": { "api-docs:lint": "spectral lint -F hint -v docs/api_v0.yml && lint-openapi -e docs/api_v0.yml", "api-docs:serve": "redoc-cli serve docs/api_v0.yml --options.pathInMiddlePanel --options.jsonSampleExpandLevel=all --options.menuToggle -t docs/api_template.hbs --watch", - "storybook-prerequisites": "node-sass app/assets/stylesheets/themes -o app/javascript/storybook-static/themes && bin/generate-css-utility-classes-docs.js", + "storybook-prerequisites": "sass -q app/assets/stylesheets/themes:app/javascript/storybook-static/themes && bin/generate-css-utility-classes-docs.js", "prebuild-storybook": "npm run storybook-prerequisites", "build-storybook": "build-storybook -c app/javascript/.storybook -s app/assets -o app/javascript/storybook-static --quiet", "prestorybook": "npm run storybook-prerequisites", "storybook": "start-storybook -p 6006 -c app/javascript/.storybook -s app/assets,app/javascript/storybook-static", "lint:frontend": "eslint app/assets/javascripts/**/*.js app/javascript/**/*.jsx app/javascript/**/*.js", - "pretest": "npm run lint:frontend", + "pretest": "yarn run lint:frontend", "test": "jest app/javascript/ bin/ --coverage", "test:watch": "jest app/javascript/ bin/ --watch", "postcss": "postcss public/assets/*.css -d public/assets 2> postcss_error.log", @@ -129,9 +129,9 @@ "jsdom": "^16.4.0", "lint-staged": "^10.5.3", "markdown-loader": "^6.0.0", - "node-sass": "^5.0.0", "prettier": "^2.2.1", "redoc-cli": "0.10.1", + "sass": "1.30.0", "sass-loader": "^10.1.0", "style-loader": "^2.0.0", "svgo": "1.3.2", diff --git a/yarn.lock b/yarn.lock index cc4fce34e..001cadd08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6364,6 +6364,21 @@ check-more-types@^2.24.0: resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600" integrity sha1-FCD/sQ/URNz8ebQ4kbv//TKoRgA= +"chokidar@>=2.0.0 <4.0.0", chokidar@^3.3.0, chokidar@^3.4.1: + version "3.4.3" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" + integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.5.0" + optionalDependencies: + fsevents "~2.1.2" + chokidar@^2.0.3, chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -6383,21 +6398,6 @@ chokidar@^2.0.3, chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.3.0, chokidar@^3.4.1: - version "3.4.3" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" - integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== - dependencies: - anymatch "~3.1.1" - braces "~3.0.2" - glob-parent "~5.1.0" - is-binary-path "~2.1.0" - is-glob "~4.0.1" - normalize-path "~3.0.0" - readdirp "~3.5.0" - optionalDependencies: - fsevents "~2.1.2" - chownr@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" @@ -7131,7 +7131,7 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5: shebang-command "^1.2.0" which "^1.2.9" -cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3: +cross-spawn@^7.0.0, cross-spawn@^7.0.2: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w== @@ -8244,11 +8244,6 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5" integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w== -env-paths@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43" - integrity sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA== - eol@0.9.1: version "0.9.1" resolved "https://registry.yarnpkg.com/eol/-/eol-0.9.1.tgz#f701912f504074be35c6117a5c4ade49cd547acd" @@ -9878,7 +9873,7 @@ got@^9.6.0: to-readable-stream "^1.0.0" url-parse-lax "^3.0.0" -graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.3, graceful-fs@^4.2.4: +graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.4: version "4.2.4" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb" integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw== @@ -13306,22 +13301,6 @@ node-gyp@^3.8.0: tar "^2.0.0" which "1" -node-gyp@^7.1.0: - version "7.1.2" - resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-7.1.2.tgz#21a810aebb187120251c3bcec979af1587b188ae" - integrity sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ== - dependencies: - env-paths "^2.2.0" - glob "^7.1.4" - graceful-fs "^4.2.3" - nopt "^5.0.0" - npmlog "^4.1.2" - request "^2.88.2" - rimraf "^3.0.2" - semver "^7.3.2" - tar "^6.0.2" - which "^2.0.2" - node-int64@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b" @@ -13424,28 +13403,6 @@ node-sass@^4.14.1: stdout-stream "^1.4.0" "true-case-path" "^1.0.2" -node-sass@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-5.0.0.tgz#4e8f39fbef3bac8d2dc72ebe3b539711883a78d2" - integrity sha512-opNgmlu83ZCF792U281Ry7tak9IbVC+AKnXGovcQ8LG8wFaJv6cLnRlc6DIHlmNxWEexB5bZxi9SZ9JyUuOYjw== - dependencies: - async-foreach "^0.1.3" - chalk "^1.1.1" - cross-spawn "^7.0.3" - gaze "^1.0.0" - get-stdin "^4.0.1" - glob "^7.0.3" - lodash "^4.17.15" - meow "^3.7.0" - mkdirp "^0.5.1" - nan "^2.13.2" - node-gyp "^7.1.0" - npmlog "^4.0.0" - request "^2.88.0" - sass-graph "2.2.5" - stdout-stream "^1.4.0" - "true-case-path" "^1.0.2" - "nopt@2 || 3": version "3.0.6" resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9" @@ -13461,13 +13418,6 @@ nopt@^4.0.1: abbrev "1" osenv "^0.1.4" -nopt@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88" - integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ== - dependencies: - abbrev "1" - nopt@~1.0.10: version "1.0.10" resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee" @@ -17177,6 +17127,13 @@ sass-loader@^8.0.2: schema-utils "^2.6.1" semver "^6.3.0" +sass@1.30.0: + version "1.30.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.30.0.tgz#60bbbbaf76ba10117e61c6c24f00161c3d60610e" + integrity sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw== + dependencies: + chokidar ">=2.0.0 <4.0.0" + sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"