Files
authentik/web/package.json
Ken Sternberg 349a97b1df web/elements: P5 Drawer component with all capabilities (#21545)
* .

* Did I miss something?

* That was a stupid spelling error.

* ## What

Extend ak-drawer to comply with the full specification; port ak-drawer to use Patternfly 5; vendor the Patternfly 5 subsystems directly responsible for the Drawer into the CSS.

## Why

To meet the requirements of the Drawer, of the LightDOM project, and of the Patternfly 5 vendoring port.

## Details

The Drawer’s internal CSS is now entirely within the Lit framework; the controlling CSS is namespaced to `ak-v2-c--drawer` and placed into the global CSS. Every bit of the drawer has a `part` name, so it can be customized to your heart’s content.

Added stylelint to make sure I’m doing this correctly.

* TSC (!) had opinions.

* Re-arranged to avoid having a 'devDependencies' block.

* Nobody liked this choice.

* Extend ak-drawer to comply with the full specification; port ak-drawer to use Patternfly 5; vendor the Patternfly 5 subsystems directly responsible for the Drawer into the CSS.

This drawer is completely independent of Patternfly 4; it brings everything in-house, everything is under `ak-v2-c-drawer`, and we read our variables from `ak-v2-global` entries as part of the style folder.

The contents of the folder are slotted, so they’re part of the parent DOM and parent CSS context, and can be controlled from there without having to do any magic on the Drawer.

To comply with the standards of the HTML disclosure pattern, the drawer uses `expanded` instead of `open`; it listens for an event to trigger open/close; it emits a `toggle` event when completed. Shortcoming: to completely comply with the disclosure pattern, it should emit a `beforeToggle` to let other clients intercept the request and prevent it from happening, but we don’t do that yet.

Unlike the previous drawer, this one has `resizable`, `position`, `inline/static`, and responsive width breakpoints, all features of the Patternfly 5 React web-component. The resizable variant gives you a visible handle, and even responds to keyborad controls.

Along with the native control through CSS Custom Properties, every part of the component has a `part` declaration, so if you *really* want to customize the thing that’s now possible.

Unlike the Patternfly 5 React version, we impose **no** structure on the internals of the component; no padding, no margin, no header/main/footer segmentation. That pattern is universal, and doesn’t need to be specified for each and every component. If you need that, build it into whatever element you put into the unnamed “main” or `panel` slots.

There is a comprehensive Storybook story page for the component.

To meet the requirements of the Drawer, of the LightDOM project, and of the Patternfly 5 vendoring port.

* Prettier has opinions, as usual.

* UV lockfile update required.

* Restoring from main.

* Merge screwed up the library resolveds again.

* A hail-mary pass.

* Still trying to get this past lint.
2026-05-12 10:47:23 -07:00

362 lines
12 KiB
JSON

{
"name": "@goauthentik/web",
"version": "2026.8.0-rc1",
"license": "MIT",
"private": true,
"scripts": {
"build": "wireit",
"build:sfe": "npm run build -w @goauthentik/web-sfe",
"build-locales": "node scripts/build-locales.mjs",
"build-proxy": "wireit",
"bundler:watch": "node scripts/build-web.mjs --watch",
"extract-locales": "lit-localize extract",
"format": "wireit",
"lint": "eslint --fix .",
"lint:imports": "knip --config scripts/knip.config.ts",
"lint:lockfile": "wireit",
"lint:types": "wireit",
"lint-check": "eslint --max-warnings 0 .",
"lit-analyse": "wireit",
"precommit": "wireit",
"prettier": "prettier --cache --write -u .",
"prettier-check": "prettier --cache --check -u .",
"pseudolocalize": "node ./scripts/pseudolocalize.mjs",
"storybook": "storybook dev -p 6006",
"storybook:build": "wireit",
"test": "vitest",
"test:e2e": "playwright test",
"tsc": "wireit",
"watch": "run-s build-locales bundler:watch"
},
"type": "module",
"exports": {
"./package.json": "./package.json",
"./styles/*": "./src/styles/*",
"./elements/*": "./src/elements/*",
"./common/*": "./src/common/*",
"./components/*": "./src/components/*",
"./flow/*": "./src/flow/*",
"./locales/*": "./src/locales/*",
"./user/*": "./src/user/*",
"./admin/*": "./src/admin/*",
"./*/browser": {
"types": "./out/*/browser.d.ts",
"import": "./*/browser.js"
},
"./*/node": {
"types": "./out/*/node.d.ts",
"import": "./*/node.js"
},
"./*": {
"types": "./out/*/index.d.ts",
"import": "./*/index.js"
}
},
"imports": {
"#fonts/*.css": "./fonts/*.css",
"#styles/*.css": "./src/styles/*.css",
"#styles/*": "./src/styles/*.js",
"#common/*": "./src/common/*.js",
"#elements/dialogs": "./src/elements/dialogs/index.js",
"#elements/*.css": "./src/elements/*.css",
"#elements/*": "./src/elements/*.js",
"#components/*.css": "./src/components/*.css",
"#components/*": "./src/components/*.js",
"#user/*.css": "./src/user/*.css",
"#user/*": "./src/user/*.js",
"#admin/*.css": "./src/admin/*.css",
"#admin/*": "./src/admin/*.js",
"#flow/*.css": "./src/flow/*.css",
"#flow/*": "./src/flow/*.js",
"#locales/*": "./src/locales/*.js",
"#stories/*": "./src/stories/*.js",
"#tests/*": "./tests/*.js",
"#e2e": "./e2e/index.ts",
"#e2e/*": "./e2e/*.ts",
"#types/*": "./types/*/index.d.ts",
"#*/browser": {
"types": "./out/*/browser.d.ts",
"import": "./*/browser.js"
},
"#*/node": {
"types": "./out/*/node.d.ts",
"import": "./*/node.js"
},
"#*": {
"types": "./out/*/index.d.ts",
"import": "./*/index.js"
}
},
"dependencies": {
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.11",
"@codemirror/lang-javascript": "^6.2.5",
"@codemirror/lang-python": "^6.2.1",
"@codemirror/lang-xml": "^6.1.0",
"@codemirror/legacy-modes": "^6.5.2",
"@codemirror/theme-one-dark": "^6.1.3",
"@eslint/js": "^9.39.3",
"@floating-ui/dom": "^1.7.6",
"@formatjs/intl-listformat": "^8.3.5",
"@fortawesome/fontawesome-free": "^7.2.0",
"@goauthentik/api": "0.0.0",
"@goauthentik/core": "^1.0.0",
"@goauthentik/esbuild-plugin-live-reload": "^2.0.1",
"@goauthentik/eslint-config": "^1.3.0",
"@goauthentik/prettier-config": "^3.5.0",
"@goauthentik/tsconfig": "^1.0.9",
"@hcaptcha/types": "^1.1.0",
"@lit/context": "^1.1.6",
"@lit/localize": "^0.12.2",
"@lit/localize-tools": "^0.8.1",
"@lit/reactive-element": "^2.1.2",
"@lit/task": "^1.0.3",
"@mdx-js/mdx": "^3.1.1",
"@mrmarble/djangoql-completion": "^0.8.3",
"@open-wc/lit-helpers": "^0.7.0",
"@openlayers-elements/core": "^0.4.0",
"@openlayers-elements/maps": "^0.4.0",
"@patternfly/elements": "^4.4.0",
"@patternfly/patternfly": "^4.224.2",
"@playwright/test": "^1.59.1",
"@sentry/browser": "^10.51.0",
"@storybook/addon-docs": "^10.3.6",
"@storybook/addon-links": "^10.3.6",
"@storybook/web-components": "^10.3.6",
"@storybook/web-components-vite": "^10.3.6",
"@types/codemirror": "^5.60.17",
"@types/grecaptcha": "^3.0.9",
"@types/guacamole-common-js": "^1.5.5",
"@types/node": "^25.6.2",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@typescript-eslint/eslint-plugin": "^8.57.2",
"@typescript-eslint/parser": "^8.57.2",
"@typescript-eslint/utils": "^8.57.2",
"@typescript/native-preview": "^7.0.0-dev.20260421.2",
"@vitest/browser": "^4.1.6",
"@vitest/browser-playwright": "^4.1.6",
"@webcomponents/webcomponentsjs": "^2.8.0",
"base64-js": "^1.5.1",
"change-case": "^5.4.4",
"chart.js": "^4.5.1",
"chartjs-adapter-date-fns": "^3.0.0",
"codemirror": "^6.0.2",
"core-js": "^3.49.0",
"country-flag-icons": "^1.6.17",
"date-fns": "^4.1.0",
"deepmerge-ts": "^7.1.5",
"dompurify": "^3.4.2",
"esbuild": "^0.28.0",
"eslint": "^9.39.3",
"eslint-plugin-lit": "^2.2.1",
"eslint-plugin-wc": "^3.1.0",
"fuse.js": "^7.3.0",
"globals": "^17.6.0",
"guacamole-common-js": "^1.5.0",
"hastscript": "^9.0.1",
"knip": "^6.11.0",
"lex": "^2025.11.0",
"lit": "^3.3.2",
"lit-analyzer": "^2.0.3",
"lit-element": "^4.2.2",
"lit-html": "^3.3.2",
"md-front-matter": "^1.0.4",
"mermaid": "^11.15.0",
"node-domexception": "^2025.11.0",
"npm-run-all": "^4.1.5",
"pino": "^10.3.1",
"pino-pretty": "^13.1.2",
"playwright": "^1.60.0",
"prettier": "^3.8.3",
"prettier-plugin-packagejson": "^3.0.2",
"pseudolocale": "^2.2.0",
"rapidoc": "^9.3.8",
"react": "^19.2.6",
"react-dom": "^19.2.6",
"rehype-highlight": "^7.0.2",
"rehype-mermaid": "^3.0.0",
"rehype-parse": "^9.0.1",
"rehype-stringify": "^10.0.1",
"remark-directive": "^4.0.0",
"remark-frontmatter": "^5.0.0",
"remark-gfm": "^4.0.1",
"remark-mdx-frontmatter": "^5.2.0",
"storybook": "^10.2.1",
"style-mod": "^4.1.3",
"stylelint": "^17.11.0",
"trusted-types": "^2.0.0",
"ts-pattern": "^5.9.0",
"turnstile-types": "^1.2.3",
"type-fest": "^5.6.0",
"typescript": "^6.0.3",
"typescript-eslint": "^8.57.2",
"unist-util-visit": "^5.1.0",
"vite": "^8.0.12",
"vitest": "^4.1.6",
"webcomponent-qr-code": "^1.3.0",
"wireit": "^0.14.12",
"yaml": "^2.8.4"
},
"optionalDependencies": {
"@esbuild/darwin-arm64": "^0.28.0",
"@esbuild/linux-arm64": "^0.28.0",
"@esbuild/linux-x64": "^0.28.0",
"@rollup/rollup-darwin-arm64": "^4.57.1",
"@rollup/rollup-linux-arm64-gnu": "^4.57.1",
"@rollup/rollup-linux-x64-gnu": "^4.57.1"
},
"workspaces": [
"./packages/*"
],
"wireit": {
"build": {
"#comment": [
"`npm run build` and `npm run watch` are the most common ",
"commands you should be using when working on the front end",
"The files and output spec here expect you to use `npm run build --watch` ",
"instead of `npm run watch`. The former is more comprehensive, but ",
"the latter is faster."
],
"command": "${NODE_RUNNER} scripts/build-web.mjs",
"files": [
"src/**/*.{css,jpg,png,ts,js,json}",
"!src/**/*.stories.ts",
"!src/**/*.tests.ts",
"!src/locales/*.ts",
"!src/locale-codes.ts",
"icons/**/*"
],
"output": [
"./dist/admin/**",
"./dist/user/**",
"./dist/flow/**",
"./dist/standalone/api-browser/**",
"./dist/standalone/loading/**",
"./dist/enterprise/**",
"./dist/poly-*.js",
"./dist/poly-*.js.map",
"./dist/styles/**"
],
"dependencies": [
"build-locales"
],
"env": {
"NODE_RUNNER": {
"external": true,
"default": "node"
}
}
},
"build-proxy": {
"command": "node scripts/build-web.mjs --styles-only",
"dependencies": [
"build-locales"
]
},
"locales:repair": {
"command": "prettier --write ./src/locale-codes.ts"
},
"lint:components": {
"command": "lit-analyzer src"
},
"lint:types": {
"command": "tsgo -p .",
"dependencies": [
"build-locales"
]
},
"lint:lockfile": {
"__comment": "The lockfile-lint package does not have an option to ensure resolved hashes are set everywhere",
"shell": true,
"command": "sh ./scripts/lint-lockfile.sh package-lock.json"
},
"lit-analyse": {
"command": "lit-analyzer src"
},
"precommit": {
"command": "prettier --write .",
"dependencies": [
"lint",
"lint:types",
"lint:components",
"lint:lockfile"
]
},
"storybook:build": {
"command": "storybook build",
"env": {
"NODE_OPTIONS": "--max_old_space_size=8192"
}
},
"tsc": {
"command": "tsgo -p .",
"dependencies": [
"build-locales"
]
}
},
"engines": {
"node": ">=24",
"npm": ">=11.6.2"
},
"devEngines": {
"runtime": {
"name": "node",
"onFail": "warn",
"version": ">=24"
},
"packageManager": {
"name": "npm",
"version": "11.10.1",
"onFail": "warn"
}
},
"prettier": "@goauthentik/prettier-config",
"overrides": {
"@goauthentik/esbuild-plugin-live-reload": {
"esbuild": "$esbuild",
"typescript": "$typescript"
},
"@goauthentik/eslint-config": {
"typescript": "$typescript"
},
"@goauthentik/prettier-config": {
"prettier": "$prettier",
"prettier-plugin-packagejson": "$prettier-plugin-packagejson",
"typescript": "$typescript"
},
"@mrmarble/djangoql-completion": {
"lex": "$lex",
"lodash": "^4.18.1"
},
"@typescript-eslint/eslint-plugin": {
"typescript": "$typescript"
},
"@typescript-eslint/parser": {
"typescript": "$typescript"
},
"@typescript-eslint/typescript-estree": {
"typescript": "$typescript"
},
"@typescript-eslint/utils": {
"typescript": "$typescript"
},
"format-imports": {
"eslint": "$eslint"
},
"node-fetch-commonjs": {
"node-domexception": "$node-domexception"
},
"rapidoc": {
"@apitools/openapi-parser": "0.0.37"
},
"typescript-eslint": {
"typescript": "$typescript"
},
"wireit": {
"brace-expansion": "^1.1.14"
}
}
}