web: update storybook, storybook a few things, fix a few things

After examining how people like Adobe and Salesforce do things, I have updated the storybook configuration to provide run-time configuration of light/dark mode (although right now nothing happens), inject the correct styling into the page, and update the preview handling so that we can see the components better. We'll see how this pans out. I have provided stories for the AggregateCard, AggregatePromiseCard, and a new QuickActionsCard. I also fixed a bug in AggregatePromiseCard where it would fail to report a fetch error. It will only report that "the operation falied," but it will give the full error into the console. **As an experiment**, I have changed the interpreter for `lint:precommit` and `build:watch` to use [Bun](https://bun.sh/) instead of NodeJS. We have observed significant speed-ups and much better memory management with Bun for these two operations. Those are both developer-facing operations, the behavior of the system undur current CI/CD should not change. And finally, I've switched the QuickActionsCard view in Admin-Overview to use the new component. Looks the same. Reads *way* easier. :-)
2024-05-14 14:17:15 -07:00
parent 09803fee11
commit 99f8802122
15 changed files with 504 additions and 79 deletions
--- a/web/scripts/eslint.mjs
+++ b/web/scripts/eslint.mjs
@ -0,0 +1,63 @@
+#!/usr/bin/env node --max_old_space_size=65536
+import { execFileSync } from "child_process";
+import { ESLint } from "eslint";
+import path from "path";
+import process from "process";
+
+// Code assumes this script is in the './web/scripts' folder.
+const projectRoot = execFileSync("git", ["rev-parse", "--show-toplevel"], {
+    encoding: "utf8",
+}).replace("\n", "");
+process.chdir(path.join(projectRoot, "./web"));
+
+const eslintConfig = {
+    fix: true,
+    overrideConfig: {
+        env: {
+            browser: true,
+            es2021: true,
+        },
+        extends: [
+            "eslint:recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:lit/recommended",
+            "plugin:custom-elements/recommended",
+            "plugin:storybook/recommended",
+        ],
+        parser: "@typescript-eslint/parser",
+        parserOptions: {
+            ecmaVersion: 12,
+            sourceType: "module",
+            project: true,
+        },
+        plugins: ["@typescript-eslint", "lit", "custom-elements"],
+        ignorePatterns: ["authentik-live-tests/**"],
+        rules: {
+            "indent": "off",
+            "linebreak-style": ["error", "unix"],
+            "quotes": ["error", "double", { avoidEscape: true }],
+            "semi": ["error", "always"],
+            "@typescript-eslint/ban-ts-comment": "off",
+            "no-unused-vars": "off",
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    argsIgnorePattern: "^_",
+                    varsIgnorePattern: "^_",
+                    caughtErrorsIgnorePattern: "^_",
+                },
+            ],
+            "no-console": ["error", { allow: ["debug", "warn", "error"] }],
+        },
+    },
+};
+
+const eslint = new ESLint(eslintConfig);
+const results = await eslint.lintFiles(".");
+const formatter = await eslint.loadFormatter("stylish");
+const resultText = formatter.format(results);
+const errors = results.reduce((acc, result) => acc + result.errorCount, 0);
+
+// eslint-disable-next-line no-console
+console.log(resultText);
+process.exit(errors > 1 ? 1 : 0);