refactor: write stories in modern way

.github/workflows/continuous-deployment.yml

@@ -125,6 +125,18 @@ jobs:
         run: |
           pnpm run --if-present build
 
+      - name: "Continuous Integration: lint build"
+        env:
+          BASE_URL: "/utrecht/"
+        run: |
+          pnpm run --if-present lint-build
+
+      - name: "Continuous Integration: test build"
+        env:
+          BASE_URL: "/utrecht/"
+        run: |
+          pnpm run --if-present test-build
+
       - name: "Retain build artifact: storybook"
         uses: actions/upload-artifact@v3
         with:

.stylelintrc.json

@@ -2,156 +2,187 @@
   "extends": ["stylelint-config-standard-scss"],
   "plugins": ["stylelint-order"],
   "rules": {
-    "alpha-value-notation": ["percentage"],
-    "at-rule-empty-line-before": null,
-    "at-rule-name-case": null,
-    "at-rule-name-newline-after": null,
-    "at-rule-name-space-after": ["always"],
+    "order/order": ["custom-properties", "declarations"],
+    "order/properties-alphabetical-order": true,
+    "scss/at-mixin-pattern": "^[a-z][a-z0-9-_]*$",
+    "scss/at-rule-no-unknown": true,
+    "scss/dollar-variable-default": true,
+    "scss/dollar-variable-first-in-block": [true, { "ignore": ["comments", "imports"] }],
+    "scss/dollar-variable-pattern": "^(denhaag|example|nl|utrecht)-[a-z0-9-]+$",
+    "scss/percent-placeholder-pattern": "^(denhaag|example|nl|utrecht)-[a-z0-9-]+$",
+    "scss/operator-no-newline-after": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "custom-property-pattern": "^_?(denhaag|example|nl|utrecht)-[a-z0-9-]+$",
+    "selector-class-pattern": "^(denhaag|example|nl|utrecht)-[a-z0-9_-]+$",
+    "keyframes-name-pattern": "^(denhaag|example|nl|utrecht)-[a-z0-9-]+$",
     "at-rule-no-unknown": null,
-    "at-rule-semicolon-newline-after": null,
-    "at-rule-semicolon-space-before": ["never"],
-    "block-closing-brace-empty-line-before": null,
-    "block-closing-brace-newline-after": null,
-    "block-closing-brace-newline-before": null,
-    "block-closing-brace-space-after": null,
-    "block-closing-brace-space-before": null,
     "block-no-empty": [true],
-    "block-opening-brace-newline-after": null,
-    "block-opening-brace-newline-before": null,
-    "block-opening-brace-space-after": null,
-    "block-opening-brace-space-before": null,
-    "color-function-notation": ["modern"],
-    "color-hex-case": null,
     "color-no-invalid-hex": [true],
     "comment-no-empty": [true],
-    "custom-property-pattern": "^_?(example|nl|utrecht)-[a-z0-9-]+$",
-    "declaration-bang-space-after": ["never"],
-    "declaration-bang-space-before": ["always"],
-    "declaration-block-no-duplicate-properties": [true],
-    "declaration-block-no-redundant-longhand-properties": null,
+    "declaration-block-no-duplicate-properties": [true, { "ignore": ["consecutive-duplicates-with-different-values"] }],
     "declaration-block-no-shorthand-property-overrides": [true],
-    "declaration-block-semicolon-newline-after": null,
-    "declaration-block-semicolon-newline-before": null,
-    "declaration-block-semicolon-space-after": null,
-    "declaration-block-semicolon-space-before": null,
-    "declaration-block-trailing-semicolon": null,
-    "declaration-colon-newline-after": null,
-    "declaration-colon-space-after": null,
-    "declaration-colon-space-before": null,
-    "declaration-property-value-disallowed-list": [
-      {
-        "text-align": ["left", "right"]
-      }
-    ],
-    "font-family-name-quotes": ["always-unless-keyword"],
     "font-family-no-duplicate-names": [true],
     "font-family-no-missing-generic-family-keyword": [true],
-    "font-weight-notation": [
-      "numeric",
-      {
-        "ignore": ["relative"]
-      }
-    ],
     "function-calc-no-unspaced-operator": [true],
-    "function-comma-newline-after": null,
-    "function-comma-newline-before": null,
-    "function-comma-space-after": null,
-    "function-comma-space-before": null,
     "function-linear-gradient-no-nonstandard-direction": [true],
-    "function-max-empty-lines": null,
-    "function-parentheses-newline-inside": null,
-    "function-parentheses-space-inside": null,
-    "function-url-no-scheme-relative": [true],
-    "function-url-quotes": ["always"],
-    "hue-degree-notation": ["number"],
-    "indentation": null,
     "keyframe-declaration-no-important": [true],
-    "keyframes-name-pattern": "^(example|nl|utrecht)-[a-z0-9-]+$",
-    "length-zero-no-unit": [
-      true,
-      {
-        "ignore": ["custom-properties"]
-      }
-    ],
-    "linebreaks": null,
-    "max-empty-lines": null,
-    "max-line-length": null,
-    "media-feature-colon-space-after": ["always"],
-    "media-feature-colon-space-before": ["never"],
-    "media-feature-name-case": null,
     "media-feature-name-no-unknown": [true],
-    "media-feature-parentheses-space-inside": ["never"],
-    "media-query-list-comma-newline-after": null,
-    "media-query-list-comma-newline-before": null,
-    "media-query-list-comma-space-after": null,
-    "media-query-list-comma-space-before": null,
     "no-descending-specificity": [true],
     "no-duplicate-at-import-rules": [true],
     "no-duplicate-selectors": [true],
-    "no-empty-first-line": null,
     "no-empty-source": [true],
-    "no-eol-whitespace": null,
     "no-extra-semicolons": null,
     "no-invalid-double-slash-comments": [true],
-    "no-missing-end-of-source-newline": null,
+    "property-no-unknown": [true],
+    "selector-pseudo-class-no-unknown": [true],
+    "selector-pseudo-element-no-unknown": [true],
+    "string-no-newline": [true],
+    "unit-no-unknown": [true],
+    "alpha-value-notation": ["percentage"],
+    "hue-degree-notation": ["number"],
+    "color-function-notation": ["modern"],
+    "length-zero-no-unit": [
+      true,
+      {
+        "ignore": ["custom-properties"]
+      }
+    ],
+    "font-weight-notation": [
+      "numeric",
+      {
+        "ignore": ["relative"]
+      }
+    ],
+    "function-url-no-scheme-relative": [true],
+    "unit-disallowed-list": [["s"]],
+    "font-family-name-quotes": ["always-unless-keyword"],
+    "function-url-quotes": ["always"],
     "number-leading-zero": null,
     "number-no-trailing-zeros": null,
-    "order/order": ["custom-properties", "declarations"],
-    "order/properties-alphabetical-order": true,
-    "property-case": null,
+    "declaration-property-value-disallowed-list": [
+      {
+        "text-align": ["left", "right"]
+      }
+    ],
     "property-disallowed-list": [
       [
+        "border-bottom",
+        "border-bottom-color",
+        "border-bottom-left-radius",
+        "border-bottom-right-radius",
+        "border-bottom-style",
+        "border-bottom-width",
+        "border-left",
+        "border-left-color",
+        "border-left-style",
+        "border-left-width",
+        "border-right",
+        "border-right-color",
+        "border-right-style",
+        "border-right-width",
+        "border-top",
+        "border-top-color",
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "border-top-style",
+        "border-top-width",
+        "bottom",
+        "contain-intrinsic-height",
+        "contain-intrinsic-width",
+        "height",
+        "left",
         "margin",
         "margin-bottom",
         "margin-left",
         "margin-right",
         "margin-top",
+        "max-height",
+        "max-width",
+        "min-height",
+        "min-width",
         "padding",
         "padding-bottom",
         "padding-left",
         "padding-right",
-        "padding-top"
+        "padding-top",
+        "right",
+        "scroll-margin-bottom",
+        "scroll-margin-left",
+        "scroll-margin-right",
+        "scroll-margin-top",
+        "scroll-padding-bottom",
+        "scroll-padding-left",
+        "scroll-padding-right",
+        "scroll-padding-top",
+        "top",
+        "width"
       ]
     ],
-    "property-no-unknown": [true],
-    "property-no-vendor-prefix": null,
-    "rule-empty-line-before": null,
-    "scss/at-extend-no-missing-placeholder": null,
-    "scss/at-mixin-pattern": "^[a-z][a-z0-9-_]*$",
-    "scss/at-rule-no-unknown": true,
-    "scss/dollar-variable-default": true,
-    "scss/dollar-variable-first-in-block": [true, { "ignore": ["comments", "imports"] }],
-    "scss/dollar-variable-pattern": "^(example|nl|utrecht)-[a-z0-9-]+$",
-    "scss/operator-no-newline-after": null,
-    "scss/percent-placeholder-pattern": "^(example|nl|utrecht)-[a-z0-9-]+$",
-    "selector-attribute-brackets-space-inside": ["never"],
+    "selector-max-id": [0],
+    "indentation": null,
+    "linebreaks": null,
+    "max-line-length": null,
+    "function-comma-newline-after": null,
+    "function-comma-newline-before": null,
+    "function-comma-space-after": null,
+    "function-comma-space-before": null,
+    "function-max-empty-lines": null,
+    "function-parentheses-newline-inside": null,
+    "function-parentheses-space-inside": null,
+    "value-list-comma-newline-after": null,
+    "value-list-comma-newline-before": null,
+    "value-list-comma-space-after": null,
+    "value-list-comma-space-before": null,
+    "value-list-max-empty-lines": null,
+    "declaration-colon-newline-after": null,
+    "declaration-colon-space-after": null,
+    "declaration-colon-space-before": null,
+    "declaration-block-semicolon-newline-after": null,
+    "declaration-block-semicolon-newline-before": null,
+    "declaration-block-semicolon-space-after": null,
+    "declaration-block-semicolon-space-before": null,
+    "declaration-block-trailing-semicolon": null,
+    "block-closing-brace-empty-line-before": null,
+    "block-closing-brace-newline-after": null,
+    "block-closing-brace-newline-before": null,
+    "block-closing-brace-space-after": null,
+    "block-closing-brace-space-before": null,
+    "block-opening-brace-newline-after": null,
+    "block-opening-brace-newline-before": null,
+    "block-opening-brace-space-after": null,
+    "block-opening-brace-space-before": null,
     "selector-attribute-quotes": ["always"],
-    "selector-class-pattern": "^(example|nl|utrecht)-[a-z0-9_-]+$",
     "selector-combinator-space-after": null,
     "selector-combinator-space-before": null,
     "selector-descendant-combinator-no-non-space": null,
     "selector-list-comma-newline-after": null,
     "selector-list-comma-newline-before": null,
     "selector-list-comma-space-after": null,
     "selector-list-comma-space-before": null,
-    "selector-max-empty-lines": null,
-    "selector-max-id": [0],
+    "media-query-list-comma-newline-after": null,
+    "media-query-list-comma-newline-before": null,
+    "media-query-list-comma-space-after": null,
+    "media-query-list-comma-space-before": null,
+    "at-rule-empty-line-before": null,
+    "at-rule-name-newline-after": null,
+    "at-rule-semicolon-newline-after": null,
+    "max-empty-lines": null,
+    "no-eol-whitespace": null,
+    "no-missing-end-of-source-newline": null,
+    "no-empty-first-line": null,
+    "unicode-bom": null,
+    "rule-empty-line-before": null,
+    "color-hex-case": null,
+    "unit-case": null,
+    "property-case": null,
     "selector-pseudo-class-case": null,
-    "selector-pseudo-class-no-unknown": [true],
-    "selector-pseudo-class-parentheses-space-inside": ["never"],
     "selector-pseudo-element-case": null,
-    "selector-pseudo-element-no-unknown": [true],
-    "string-no-newline": [true],
+    "selector-max-empty-lines": null,
+    "media-feature-name-case": null,
+    "at-rule-name-case": null,
     "string-quotes": null,
-    "unicode-bom": null,
-    "unit-case": null,
-    "unit-disallowed-list": [["s"]],
-    "unit-no-unknown": [true],
+    "property-no-vendor-prefix": null,
     "value-keyword-case": ["lower", { "camelCaseSvgKeywords": true }],
-    "value-list-comma-newline-after": null,
-    "value-list-comma-newline-before": null,
-    "value-list-comma-space-after": null,
-    "value-list-comma-space-before": null,
-    "value-list-max-empty-lines": null
+    "declaration-block-no-redundant-longhand-properties": null
   }
 }

package.json

@@ -27,7 +27,6 @@
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-mdx": "2.2.0",
     "eslint-plugin-react": "7.33.2",
-    "html-validate": "8.7.3",
     "husky": "8.0.3",
     "lint-staged": "15.1.0",
     "markdownlint-cli": "0.37.0",
@@ -48,7 +47,6 @@
     "lint": "npm-run-all --continue-on-error lint:** lint-workspaces",
     "lint:css": "stylelint --allow-empty-input '**/*.{css,scss}'",
     "lint:js": "eslint --ext '.js,.json,.jsx,.mdx,.ts,.tsx' --report-unused-disable-directives .",
-    "lint:html": "find . -type d \\( -name coverage -or -name dist -or -name node_modules -or -name build -or -name tmp \\) -prune -false -o -name '*.html' -print0 | xargs -0 npx html-validate",
     "lint:md": "markdownlint '**/*.md'",
     "lint:package-json": "npmPkgJsonLint '**/package.json'",
     "lint:package-lock": "pnpm ls --recursive",
@@ -57,6 +55,7 @@
     "lint-fix:js": "eslint --ext '.js,.json,.jsx,.mdx,.ts,.tsx' --fix --report-unused-disable-directives .",
     "lint-fix:md": "markdownlint --fix '**/*.md'",
     "lint-workspaces": "lerna run --no-bail lint",
+    "lint-build": "lerna run --no-bail lint-build",
     "prepare": "husky install",
     "prettier": "prettier --write .",
     "publish": "lerna publish from-package --yes",