Web/style/elements/standalone drawer

web/.gitignore

@@ -122,3 +122,5 @@ storybook-static/
 .wireit
 
 custom-elements.json
+
+*storybook.log

web/eslint.config.mjs

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+// import storybook from "eslint-plugin-storybook";
+
 /**
  * @file ESLint Configuration
  *
@@ -55,7 +58,7 @@ const eslintConfig = defineConfig(
             "vars-on-top": "off",
         },
         files: ["**/*.d.ts"],
-    },
+    }
 );
 
 export default eslintConfig;

web/package.json

@@ -100,6 +100,7 @@
         "@fortawesome/fontawesome-free": "^7.2.0",
         "@goauthentik/api": "0.0.0",
         "@goauthentik/core": "^1.0.0",
+        "@goauthentik/elements": "^0.0.6",
         "@goauthentik/esbuild-plugin-live-reload": "^2.0.1",
         "@goauthentik/eslint-config": "^1.3.0",
         "@goauthentik/prettier-config": "^3.5.0",
@@ -148,6 +149,7 @@
         "esbuild": "^0.27.5",
         "eslint": "^9.39.3",
         "eslint-plugin-lit": "^2.2.1",
+        "eslint-plugin-storybook": "^10.3.5",
         "eslint-plugin-wc": "^3.1.0",
         "fuse.js": "^7.1.0",
         "globals": "^17.4.0",

web/packages/elements/.storybook/main.ts

@@ -0,0 +1,21 @@
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import type { StorybookConfig } from "@storybook/web-components-vite";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+
+function getAbsolutePath(value: string) {
+    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+
+const config: StorybookConfig = {
+    stories: ["../dist/**/*.mdx", "../dist/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [getAbsolutePath("@storybook/addon-a11y"), getAbsolutePath("@storybook/addon-docs")],
+    framework: getAbsolutePath("@storybook/web-components-vite"),
+};
+
+export default config;

web/packages/elements/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import "../dist/globals.css";
+
+import type { Preview } from "@storybook/web-components-vite";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

web/packages/elements/eslint.config.mjs

@@ -0,0 +1,64 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+// import storybook from "eslint-plugin-storybook";
+
+/**
+ * @file ESLint Configuration
+ *
+ * @import { Config } from "eslint/config";
+ */
+
+import { createESLintPackageConfig, DefaultIgnorePatterns } from "@goauthentik/eslint-config";
+
+import { defineConfig } from "eslint/config";
+
+// @ts-check
+
+/**
+ * ESLint configuration for authentik's monorepo.
+ * @type {Config[]}
+ */
+const eslintConfig = defineConfig(
+    createESLintPackageConfig({
+        parserOptions: {
+            tsconfigRootDir: import.meta.dirname,
+        },
+        ignorePatterns: [
+            // ---
+            ...DefaultIgnorePatterns,
+            "**/dist/**",
+            "**/out/**",
+            "**/vendored/**",
+            "**/.wireit/**",
+            "**/node_modules/",
+            "**/.storybook/*",
+            "coverage/",
+            "src/locale-codes.ts",
+            "playwright-report",
+            "storybook-static/",
+            "src/locales/",
+            "**/*.min.js",
+        ],
+    }),
+    {
+        rules: {
+            "no-console": "off",
+        },
+        files: ["packages/**/*"],
+    },
+    {
+        rules: {
+            "consistent-return": "off",
+            "no-div-regex": "off",
+            "no-empty-function": ["error", { allow: ["arrowFunctions"] }],
+            "no-param-reassign": "off",
+        },
+    },
+    {
+        rules: {
+            "vars-on-top": "off",
+        },
+        files: ["**/*.d.ts"],
+    }
+);
+
+export default eslintConfig;

web/packages/elements/package.json

@@ -0,0 +1,72 @@
+{
+    "name": "@goauthentik/elements",
+    "version": "0.0.6",
+    "description": "The Authentik open-source elements library",
+    "license": "MIT",
+    "author": "Authentik Security, Inc. <https://goauthentik.io>",
+    "repository": "goauthentik/elements.git",
+    "bugs": "https://github.com/goauthentik/elements/issues",
+    "homepage": "https://github.com/goauthentik/elements#readme",
+    "scripts": {
+        "build": "run-s clean:build-info clean:dist build:sources build:adjust-css-paths",
+        "build:adjust-css-paths": "node ./scripts/adjust-component-stylesheet-paths.mjs",
+        "build:build-stylesheets": "node ./scripts/build-stylesheets.mjs",
+        "build:components": "tsgo -p .",
+        "build:sources": "run-p build:components build:build-stylesheets",
+        "build:storybook": "storybook build",
+        "clean:build-info": "rm -f ./tsconfig.tsbuildinfo",
+        "clean:dist": "rimraf ./dist/",
+        "storybook": "storybook dev -p 6006"
+    },
+    "exports": {
+        "./*": "./dist/*"
+    },
+    "dependencies": {
+        "@custom-elements-manifest/analyzer": "^0.11.0",
+        "@goauthentik/eslint-config": "^1.3.0",
+        "@goauthentik/prettier-config": "^3.5.0",
+        "@goauthentik/tsconfig": "^1.0.9",
+        "@patternfly/patternfly": "^4.224.5",
+        "@typescript/native-preview": "^7.0.0-dev.20260401.1",
+        "baseline-browser-mapping": "^2.10.13",
+        "copyfiles": "^2.4.1",
+        "lint-staged": "^16.4.0",
+        "lit": "^3.3.2",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^3.8.1",
+        "rimraf": "^6.1.3",
+        "sass-alias": "^2.0.1",
+        "ts-lit-plugin": "^2.0.2",
+        "ts-pattern": "^5.9.0",
+        "typescript-plugin-css-modules": "^5.2.0"
+    },
+    "devDependencies": {
+        "@storybook/addon-a11y": "^10.3.4",
+        "@storybook/addon-docs": "^10.3.3",
+        "@storybook/addon-links": "^10.3.3",
+        "@storybook/web-components": "^10.3.3",
+        "@storybook/web-components-vite": "^10.3.3",
+        "eslint-plugin-storybook": "^10.3.5",
+        "sass": "^1.99.0",
+        "storybook": "^10.2.1"
+    },
+    "engines": {
+        "node": ">=24"
+    },
+    "prettier": "@goauthentik/prettier-config",
+    "eslintConfig": {
+        "extends": [
+            "plugin:storybook/recommended"
+        ]
+    },
+    "keywords": [
+        "authentik",
+        "design system",
+        "lit-element",
+        "web components"
+    ],
+    "browserslist": [
+        "baseline widely available"
+    ],
+    "customElements": "custom-elements.json"
+}

web/packages/elements/scripts/adjust-component-stylesheet-paths.mjs

@@ -0,0 +1,43 @@
+import fs from "node:fs";
+import path from "node:path";
+
+/* ------------ Config ------------------------------------------------------- */
+
+const buildDir = "./dist";
+
+/* Source code should always be from source; encapsulates which `glob` we use. */
+const globDist = (glob) => fs.globSync(glob, { cwd: buildDir });
+const readFile = (path) => fs.readFileSync(path, { encoding: "utf8" });
+const writeFile = (path, content) => fs.writeFileSync(path, content, { encoding: "utf8" });
+
+const componentFiles = globDist(["**/*.component.js"]).toSorted();
+
+const stylingLineRe = /^(import [^ ]* from "\.\/component)\.(scss|css)";/;
+
+/* ------------ Build Steps ------------------------------------------------- */
+
+function checkIsInPackageRoot() {
+    if (!fs.existsSync("./package.json")) {
+        console.log("This script must be run from the package root.");
+        process.exit();
+    }
+}
+
+function adjustPaths(componentFile) {
+    const componentPath = path.join(buildDir, componentFile);
+    const componentSource = readFile(componentPath);
+    const componentLines = componentSource.split(/\r?\n/);
+    const results = componentLines.map((l) =>
+        l.replace(stylingLineRe, (_, p1) => `${p1}.css.js";`)
+    );
+    writeFile(componentPath, results.join("\n"));
+}
+
+/* ------------ Main --------------------------------------------------------- */
+
+/* This script must be run from the project root folder */
+checkIsInPackageRoot();
+
+for (const source of componentFiles) {
+    adjustPaths(source);
+}