diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index bae79c9761..eff38c142f 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -139,7 +139,14 @@ module.exports = { typescript: true, }, }, - ignorePatterns: ["__generated__", "__mocks__", "dist", "docs"], + ignorePatterns: [ + "__generated__", + "__mocks__", + "dist", + "docs", + "!.storybook", + "storybook-static", + ], overrides: [ { extends: ["plugin:@typescript-eslint/disable-type-checked"], @@ -162,5 +169,18 @@ module.exports = { "@typescript-eslint/no-unsafe-call": "off", }, }, + { + files: [".storybook/**/*.tsx"], + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:import-x/recommended", + "plugin:storybook/recommended", + "prettier", + ], + parserOptions: { + project: [".storybook/tsconfig.json"], + }, + }, ], }; diff --git a/frontend/.storybook/blocks/ColorSwatch.tsx b/frontend/.storybook/blocks/ColorSwatch.tsx new file mode 100644 index 0000000000..bee23d0b80 --- /dev/null +++ b/frontend/.storybook/blocks/ColorSwatch.tsx @@ -0,0 +1,39 @@ +import React from "react"; + +export const ColorSwatch = ({ + color, + children, +}: { + color: string; + children: React.ReactNode; +}) => { + return ( + + {children} + + + ); +}; diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts index e2dac8ff62..5bb3470e03 100644 --- a/frontend/.storybook/main.ts +++ b/frontend/.storybook/main.ts @@ -1,6 +1,8 @@ import path from "path"; import type { StorybookConfig } from "@storybook/web-components-webpack5"; +import EslintWebpackPlugin from "eslint-webpack-plugin"; +import remarkGfm from "remark-gfm"; import type { WebpackConfiguration } from "webpack-dev-server"; import { @@ -15,6 +17,7 @@ const config: StorybookConfig = { from: shoelaceAssetsSrcPath, to: shoelaceAssetsPublicPath, }, + { from: "../src/assets/", to: "/assets" }, ], addons: [ "@storybook/addon-webpack5-compiler-swc", @@ -70,6 +73,16 @@ const config: StorybookConfig = { ], }, }, + { + name: "@storybook/addon-docs", + options: { + mdxPluginOptions: { + mdxCompileOptions: { + remarkPlugins: [remarkGfm], + }, + }, + }, + }, ], framework: { name: "@storybook/web-components-webpack5", @@ -77,10 +90,10 @@ const config: StorybookConfig = { }, webpackFinal: async (config) => { // Show eslint errors from Storybook files in Webpack overlay - const ESLintPlugin = require("eslint-webpack-plugin"); config.plugins?.push( - new ESLintPlugin({ + // @ts-expect-error something to do with different symbols - not totally sure, but doesn't seem to be a problem + new EslintWebpackPlugin({ files: ["**/stories/**/*.ts", "**/.storybook/*.ts"], }), ); @@ -98,6 +111,7 @@ const config: StorybookConfig = { parser: { syntax: "typescript", decorators: true, + jsx: true, }, // TODO Consolidate with tsconfig.json transform: { diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts index a156e9f6d5..d4fc17c56f 100644 --- a/frontend/.storybook/preview.ts +++ b/frontend/.storybook/preview.ts @@ -6,8 +6,11 @@ import { type Preview, } from "@storybook/web-components"; +// eslint-disable-next-line import-x/no-unresolved -- File is generated at build time import customElements from "@/__generated__/custom-elements.json"; +import "../src/theme.stylesheet.css"; + // Automatically document component properties setCustomElementsManifest(customElements); diff --git a/frontend/.storybook/tsconfig.json b/frontend/.storybook/tsconfig.json new file mode 100644 index 0000000000..0bb1cc20e4 --- /dev/null +++ b/frontend/.storybook/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "jsx": "react", + "resolveJsonModule": true, + "esModuleInterop": true, + }, + "include": ["**/*.ts", "**/*.tsx"], +} diff --git a/frontend/docs/docs/assets/fonts/Inter-Italic.var.woff2 b/frontend/docs/docs/assets/fonts/Inter-Italic.var.woff2 deleted file mode 100644 index 40a2c1dc22..0000000000 Binary files a/frontend/docs/docs/assets/fonts/Inter-Italic.var.woff2 and /dev/null differ diff --git a/frontend/docs/docs/assets/fonts/Inter.var.woff2 b/frontend/docs/docs/assets/fonts/Inter.var.woff2 deleted file mode 100644 index 0b74491a85..0000000000 Binary files a/frontend/docs/docs/assets/fonts/Inter.var.woff2 and /dev/null differ diff --git a/frontend/docs/docs/assets/fonts/Recursive_VF_1.084.woff2 b/frontend/docs/docs/assets/fonts/Recursive_VF_1.084.woff2 deleted file mode 100644 index 59b07c0521..0000000000 Binary files a/frontend/docs/docs/assets/fonts/Recursive_VF_1.084.woff2 and /dev/null differ diff --git a/frontend/docs/docs/develop/ui/design-action-menus.md b/frontend/docs/docs/develop/ui/design-action-menus.md deleted file mode 100644 index 84b2630b6e..0000000000 --- a/frontend/docs/docs/develop/ui/design-action-menus.md +++ /dev/null @@ -1,17 +0,0 @@ -# Action Menus - -While controls are always placed next to the most relevant content area, we expose most controls for an object in an _Actions_ dropdown menu to enable discovery of actions in a single place, and allow power-users to quickly accomplish tasks. - -We try to avoid surfacing navigation options in action menus as they are not tagged as navigation elements. Sometimes we expose links here for convenience, but navigating to another page should never only be possible through an actions menu. - -## Implementation - -Action menus should generally contain a consistent set of actions for a given object. Whereas new table rows symbolize horizontal separators, these actions should be ordered as follows: - -| Dropdown Action Order | -| ----------------------------------------------------------------------------------------------------------------------------------------- | -| • Actions related only to the current page (eg: remove archived item from collection) | -| • Actions related to editing the object (eg: edit workflow config, edit item metadata)
• Other actions related to the current object (eg: run crawl) | -| • Actions related to exporting/downloading (eg: download archived item) | -| • Copy information to clipboard (eg: copy share link)
• Copy IDs to clipboard (eg: copy item ID) | -| • Destructive actions (eg: delete item) | diff --git a/frontend/docs/docs/develop/ui/design-status-icons.md b/frontend/docs/docs/develop/ui/design-status-icons.md deleted file mode 100644 index cbf8cb48fd..0000000000 --- a/frontend/docs/docs/develop/ui/design-status-icons.md +++ /dev/null @@ -1,20 +0,0 @@ -# Status Icons - -Browsertrix uses a standard set of status icons to communicate success, neutral, and failure states throughout the app. Colors are used only to reinforce their distinct shapes which have been chosen so they remain accessible to those who may not be able to distinguish differences based on color alone. - -Status icons always use filled icon variants (when available), as opposed to buttons or actions which use strokes. - -When used without labels, status icons should include tooltips to provider further clarity as to what they indicate. - -## Implementation - -| Status | Description | -| ---- | ---- | -| :bootstrap-slash-circle-fill: Empty | Used for empty states where no data is present | -| :bootstrap-hourglass-split: Waiting | Used when a process is queued but has not started | -| :btrix-status-dot: Running | Used when a process is actively running, should always be animated | -| :bootstrap-check-circle-fill: Success | Used for positive / successful states | -| :bootstrap-dash-square-fill: Neutral | Used for ambiguous states, generally good but could be better | -| :bootstrap-exclamation-square-fill: Less Neutral | Same as neutral but with more caveats | -| :bootstrap-x-octagon-fill: Warning | Used for cautionary states and actions with caveats | -| :bootstrap-exclamation-triangle-fill: Severe | Used for serious errors and actions that should be taken with extreme care | diff --git a/frontend/docs/docs/develop/ui/storybook.md b/frontend/docs/docs/develop/ui/storybook.md index 1f8e3d5807..81d1a1b62b 100644 --- a/frontend/docs/docs/develop/ui/storybook.md +++ b/frontend/docs/docs/develop/ui/storybook.md @@ -1,6 +1,6 @@ # Using Storybook -[Storybook](https://storybook.js.org/) is a tool for documenting and building UI components in isolation. Component documentation is organized into ["stories"](https://storybook.js.org/docs/writing-stories) that show a variety of possible rendered states of a UI component. +[Storybook](https://storybook.js.org/) is a tool for documenting and building UI components and design systems in isolation. Component documentation is organized into ["stories"](https://storybook.js.org/docs/writing-stories) that show a variety of possible rendered states of a UI component. Browsertrix component stories live in `frontend/src/stories`. Component attributes that are public properties (i.e. defined with Lit `@property({ type: Type })`) or documented in a TSDoc comment will automatically appear in stories through the [Custom Elements Manifest](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/) file. diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/dash-square-fill.svg b/frontend/docs/docs/overrides/.icons/bootstrap/dash-square-fill.svg deleted file mode 100644 index dbe0db2e50..0000000000 --- a/frontend/docs/docs/overrides/.icons/bootstrap/dash-square-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-circle-fill.svg b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-circle-fill.svg index f7a7d17bf7..cdc8690b21 100644 --- a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-circle-fill.svg +++ b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-circle-fill.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond-fill.svg b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond-fill.svg index 5987fe7247..cb14aee9e3 100644 --- a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond-fill.svg +++ b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond-fill.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-square-fill.svg b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-square-fill.svg deleted file mode 100644 index d80a4e92ab..0000000000 --- a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-square-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-triangle-fill.svg b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-triangle-fill.svg deleted file mode 100644 index 50e17525ee..0000000000 --- a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-triangle-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-triangle.svg b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-triangle.svg deleted file mode 100644 index 18792386c8..0000000000 --- a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-triangle.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/frontend/docs/docs/stylesheets/extra.css b/frontend/docs/docs/stylesheets/extra.css index aa8543f309..264c0f2e87 100644 --- a/frontend/docs/docs/stylesheets/extra.css +++ b/frontend/docs/docs/stylesheets/extra.css @@ -1,29 +1,39 @@ +@import './theme.css'; /* Font style definitions */ @font-face { font-family: "Recursive"; - font-style: oblique 0deg 15deg; - font-weight: 300 1000; - src: url("../assets/fonts/Recursive_VF_1.084.woff2") format("woff2"); - font-feature-settings: "ss12"; + font-style: normal; + font-weight: 300 800; + font-display: swap; + src: url("https://cdn.webrecorder.net/fonts/recursive/recursive-latin.woff2") + format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, + U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Inter"; + font-family: "Inter Variable"; font-weight: 100 900; - font-display: swap; font-style: normal; - src: url("../assets/fonts/Inter.var.woff2") format("woff2"); - font-feature-settings: "ss03"; + font-named-instance: "Regular"; + font-feature-settings: "ss04"; + src: + local("Inter Variable"), + url("https://cdn.webrecorder.net/fonts/inter/InterVariable.woff2") + format("woff2"); } - @font-face { - font-family: "Inter"; + font-family: "Inter Variable"; font-weight: 100 900; - font-display: swap; font-style: italic; - src: url("../assets/fonts/Inter-Italic.var.woff2") format("woff2"); - font-feature-settings: "ss03"; + font-named-instance: "Italic"; + font-feature-settings: "ss04"; + src: + local("Inter Variable"), + url("https://cdn.webrecorder.net/fonts/inter/InterVariable-Italic.woff2") + format("woff2"); } @font-face { @@ -31,25 +41,25 @@ font-weight: 100 900; font-display: swap; font-style: normal; - src: url("https://wr-static.sfo3.cdn.digitaloceanspaces.com/fonts/konsole/Konsolev1.1-VF.woff2") + src: url("https://cdn.webrecorder.net/fonts/konsole/Konsolev1.1-VF.woff2") format("woff2"); } :root { --md-display-font: "Konsole", "Helvetica", sans-serif; --md-code-font: "Recursive", monospace; - --md-text-font: "Inter", "Helvetica", "Arial", sans-serif; - --wr-blue-primary: #088eaf; - --wr-orange-primary: #bb4a00; + --md-text-font: "Inter Variable", "Helvetica", "Arial", sans-serif; + --wr-blue-primary: var(--color-brand-blue); + --wr-orange-primary: var(--color-orange-500); } [data-md-color-scheme="webrecorder"] { - --md-primary-fg-color: #4d7c0f; - --md-primary-fg-color--light: #057894; - --md-primary-fg-color--dark: #035b71; + --md-primary-fg-color: var(--color-brand-green); + --md-primary-fg-color--light: var(--color-cyan-500); + --md-primary-fg-color--dark: var(--color-cyan-600); --md-typeset-color: black; - --md-accent-fg-color: #057894; - --md-typeset-a-color: #035b71; + --md-accent-fg-color: var(--color-cyan-500); + --md-typeset-a-color: var(--color-cyan-600); --md-code-bg-color: #f9fafb; } @@ -130,6 +140,10 @@ h3 { font-variation-settings: "OPSZ" 35; } +.md-typeset { + font-feature-settings: "ss04" off,"ss07" on,"ss08" on; +} + /* Custom badge classes, applies custom overrides to inline-code blocks */ .badge-blue { @@ -158,56 +172,112 @@ h3 { /* Status Styling */ -.status-empty { - font-family: var(--md-code-font); - font-weight: 500; +.status-neutral-400 { + font-weight: 600; white-space: nowrap; & svg { - color: rgb(119, 134, 145); + color: var(--sl-color-neutral-400); } } -.status-success { - font-family: var(--md-code-font); - font-weight: 500; +.status-neutral-500 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(142.1 76.2% 36.3%); + color: var(--sl-color-neutral-500); } } -.status-neutral { - font-family: var(--md-code-font); - font-weight: 500; +.status-neutral-600 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(32.1 94.6% 43.7%); + color: var(--sl-color-neutral-600); } } -.status-warning { - font-family: var(--md-code-font); - font-weight: 500; +.status-green-500 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(21, 90%, 48%); + color: var(--sl-color-green-500); } } -.status-danger { - font-family: var(--md-code-font); - font-weight: 500; +.status-green-600 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(0 72.2% 50.6%); + color: var(--sl-color-green-600); } } -.status-waiting { - font-family: var(--md-code-font); - font-weight: 500; +.status-amber-600 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-amber-600); + } +} + +.status-neutral-600 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-neutral-600); + } +} + +.status-amber-500 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-amber-500); + } +} + +.status-red-600 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-red-600); + } +} + +.status-orange-600 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(271.5 81.3% 55.9%); + color: var(--sl-color-orange-600); + } +} + +.status-violet-500 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-violet-500); + } +} + +.status-violet-600 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-violet-600); + } +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; } } diff --git a/frontend/docs/docs/stylesheets/theme.css b/frontend/docs/docs/stylesheets/theme.css new file mode 100644 index 0000000000..f647509eaa --- /dev/null +++ b/frontend/docs/docs/stylesheets/theme.css @@ -0,0 +1,380 @@ +:root { + /* Webrecorder colors */ + --color-black: #000000; + --color-white: #ffffff; + --color-transparent: rgba(0, 0, 0, 0); + --color-offWhite: #f0eee8; + + --color-gray-50: #eeeeee; + --color-gray-100: #d4d4d4; + --color-gray-200: #b9b9b9; + --color-gray-300: #9e9e9e; + --color-gray-400: #848484; + --color-gray-500: #707070; + --color-gray-600: #555555; + --color-gray-700: #3b3b3b; + --color-gray-800: #262626; + --color-gray-900: #111111; + + --color-earth-25: #fefcf7; + --color-earth-50: #f0eee8; + --color-earth-100: #d6d4cb; + --color-earth-200: #bdb8ad; + --color-earth-300: #a39d8f; + --color-earth-400: #8b8373; + --color-earth-500: #776f5f; + --color-earth-600: #5a5447; + --color-earth-700: #3f3a31; + --color-earth-800: #29251f; + --color-earth-900: #12110c; + + --color-stone-50: #edeff0; + --color-stone-100: #cfd5d8; + --color-stone-200: #b2bac0; + --color-stone-300: #949fa8; + --color-stone-400: #778691; + --color-stone-500: #62737e; + --color-stone-600: #4a565f; + --color-stone-700: #343c43; + --color-stone-800: #21262a; + --color-stone-900: #0f1113; + + --color-red-50: #fdebe8; + --color-red-100: #f7c9c2; + --color-red-200: #efa79c; + --color-red-300: #e48276; + --color-red-400: #cb4a43; + --color-red-500: #c0262b; + --color-red-600: #931614; + --color-red-700: #700907; + --color-red-800: #480403; + --color-red-900: #200101; + + --color-orange-50: #faece5; + --color-orange-100: #f1cdbd; + --color-orange-200: #e5ac94; + --color-orange-300: #d88b69; + --color-orange-400: #c9683b; + --color-orange-500: #bb4a00; + --color-orange-600: #8f3700; + --color-orange-700: #652400; + --color-orange-800: #421500; + --color-orange-900: #200600; + + --color-yellow-50: #fbefd4; + --color-yellow-100: #f9e6be; + --color-yellow-200: #f6d898; + --color-yellow-300: #f1c565; + --color-yellow-400: #e5af3a; + --color-yellow-500: #d29513; + --color-yellow-600: #6f4e00; + --color-yellow-700: #4e3600; + --color-yellow-800: #342200; + --color-yellow-900: #190e00; + + --color-lime-50: #eaf0e6; + --color-lime-100: #c9d9be; + --color-lime-200: #a8c094; + --color-lime-300: #86a86a; + --color-lime-400: #668f3f; + --color-lime-500: #4d7c0f; + --color-lime-600: #3a5f09; + --color-lime-700: #264104; + --color-lime-800: #172a02; + --color-lime-900: #081301; + + --color-cyan-50: #e4f1f5; + --color-cyan-100: #b9d9e5; + --color-cyan-200: #8bc1d4; + --color-cyan-300: #58a8c2; + --color-cyan-400: #088eaf; + --color-cyan-500: #057894; + --color-cyan-600: #035b71; + + --color-cyan-700: #013f50; + --color-cyan-700-deep: color(display-p3 0.0039 0.2471 0.3137); + --color-cyan-800: #012834; + --color-cyan-900: #001219; + + --color-blue-50: #e6eeff; + --color-blue-100: #c1d4ff; + --color-blue-200: #9ab8fe; + --color-blue-300: #739bfa; + --color-blue-400: #557ef0; + --color-blue-500: #3c67d5; + --color-blue-600: #314fa1; + --color-blue-700: #203673; + --color-blue-800: #13234d; + --color-blue-900: #060e27; + + --color-violet-50: #f5eaff; + --color-violet-100: #e5c9ff; + --color-violet-200: #d5a5ff; + --color-violet-300: #c47eff; + --color-violet-400: #b350fc; + --color-violet-500: #9338d3; + --color-violet-600: #7124a8; + --color-violet-700: #53187c; + --color-violet-800: #360c52; + --color-violet-900: #180327; + + --color-brand-blue: #088eaf; + --color-brand-green: #4d7c0f; + + /* Fallback Shoelace colors */ + --sl-color-gray-50: hsl(0 0% 97.5%); + --sl-color-gray-100: hsl(240 4.8% 95.9%); + --sl-color-gray-200: hsl(240 5.9% 90%); + --sl-color-gray-300: hsl(240 4.9% 83.9%); + --sl-color-gray-400: hsl(240 5% 64.9%); + --sl-color-gray-500: hsl(240 3.8% 46.1%); + --sl-color-gray-600: hsl(240 5.2% 33.9%); + --sl-color-gray-700: hsl(240 5.3% 26.1%); + --sl-color-gray-800: hsl(240 3.7% 15.9%); + --sl-color-gray-900: hsl(240 5.9% 10%); + --sl-color-gray-950: hsl(240 7.3% 8%); + --sl-color-red-50: hsl(0 85.7% 97.3%); + --sl-color-red-100: hsl(0 93.3% 94.1%); + --sl-color-red-200: hsl(0 96.3% 89.4%); + --sl-color-red-300: hsl(0 93.5% 81.8%); + --sl-color-red-400: hsl(0 90.6% 70.8%); + --sl-color-red-500: hsl(0 84.2% 60.2%); + --sl-color-red-600: hsl(0 72.2% 50.6%); + --sl-color-red-700: hsl(0 73.7% 41.8%); + --sl-color-red-800: hsl(0 70% 35.3%); + --sl-color-red-900: hsl(0 62.8% 30.6%); + --sl-color-red-950: hsl(0 60% 19.6%); + --sl-color-orange-50: hsl(33.3 100% 96.5%); + --sl-color-orange-100: hsl(34.3 100% 91.8%); + --sl-color-orange-200: hsl(32.1 97.7% 83.1%); + --sl-color-orange-300: hsl(30.7 97.2% 72.4%); + --sl-color-orange-400: hsl(27 96% 61%); + --sl-color-orange-500: hsl(24.6 95% 53.1%); + --sl-color-orange-600: hsl(20.5 90.2% 48.2%); + --sl-color-orange-700: hsl(17.5 88.3% 40.4%); + --sl-color-orange-800: hsl(15 79.1% 33.7%); + --sl-color-orange-900: hsl(15.3 74.6% 27.8%); + --sl-color-orange-950: hsl(15.2 69.1% 19%); + --sl-color-amber-50: hsl(48 100% 96.1%); + --sl-color-amber-100: hsl(48 96.5% 88.8%); + --sl-color-amber-200: hsl(48 96.6% 76.7%); + --sl-color-amber-300: hsl(45.9 96.7% 64.5%); + --sl-color-amber-400: hsl(43.3 96.4% 56.3%); + --sl-color-amber-500: hsl(37.7 92.1% 50.2%); + --sl-color-amber-600: hsl(32.1 94.6% 43.7%); + --sl-color-amber-700: hsl(26 90.5% 37.1%); + --sl-color-amber-800: hsl(22.7 82.5% 31.4%); + --sl-color-amber-900: hsl(21.7 77.8% 26.5%); + --sl-color-amber-950: hsl(22.9 74.1% 16.7%); + --sl-color-yellow-50: hsl(54.5 91.7% 95.3%); + --sl-color-yellow-100: hsl(54.9 96.7% 88%); + --sl-color-yellow-200: hsl(52.8 98.3% 76.9%); + --sl-color-yellow-300: hsl(50.4 97.8% 63.5%); + --sl-color-yellow-400: hsl(47.9 95.8% 53.1%); + --sl-color-yellow-500: hsl(45.4 93.4% 47.5%); + --sl-color-yellow-600: hsl(40.6 96.1% 40.4%); + --sl-color-yellow-700: hsl(35.5 91.7% 32.9%); + --sl-color-yellow-800: hsl(31.8 81% 28.8%); + --sl-color-yellow-900: hsl(28.4 72.5% 25.7%); + --sl-color-yellow-950: hsl(33.1 69% 13.9%); + --sl-color-lime-50: hsl(78.3 92% 95.1%); + --sl-color-lime-100: hsl(79.6 89.1% 89.2%); + --sl-color-lime-200: hsl(80.9 88.5% 79.6%); + --sl-color-lime-300: hsl(82 84.5% 67.1%); + --sl-color-lime-400: hsl(82.7 78% 55.5%); + --sl-color-lime-500: hsl(83.7 80.5% 44.3%); + --sl-color-lime-600: hsl(84.8 85.2% 34.5%); + --sl-color-lime-700: hsl(85.9 78.4% 27.3%); + --sl-color-lime-800: hsl(86.3 69% 22.7%); + --sl-color-lime-900: hsl(87.6 61.2% 20.2%); + --sl-color-lime-950: hsl(86.5 60.6% 13.9%); + --sl-color-green-50: hsl(138.5 76.5% 96.7%); + --sl-color-green-100: hsl(140.6 84.2% 92.5%); + --sl-color-green-200: hsl(141 78.9% 85.1%); + --sl-color-green-300: hsl(141.7 76.6% 73.1%); + --sl-color-green-400: hsl(141.9 69.2% 58%); + --sl-color-green-500: hsl(142.1 70.6% 45.3%); + --sl-color-green-600: hsl(142.1 76.2% 36.3%); + --sl-color-green-700: hsl(142.4 71.8% 29.2%); + --sl-color-green-800: hsl(142.8 64.2% 24.1%); + --sl-color-green-900: hsl(143.8 61.2% 20.2%); + --sl-color-green-950: hsl(144.3 60.7% 12%); + --sl-color-emerald-50: hsl(151.8 81% 95.9%); + --sl-color-emerald-100: hsl(149.3 80.4% 90%); + --sl-color-emerald-200: hsl(152.4 76% 80.4%); + --sl-color-emerald-300: hsl(156.2 71.6% 66.9%); + --sl-color-emerald-400: hsl(158.1 64.4% 51.6%); + --sl-color-emerald-500: hsl(160.1 84.1% 39.4%); + --sl-color-emerald-600: hsl(161.4 93.5% 30.4%); + --sl-color-emerald-700: hsl(162.9 93.5% 24.3%); + --sl-color-emerald-800: hsl(163.1 88.1% 19.8%); + --sl-color-emerald-900: hsl(164.2 85.7% 16.5%); + --sl-color-emerald-950: hsl(164.3 87.5% 9.4%); + --sl-color-teal-50: hsl(166.2 76.5% 96.7%); + --sl-color-teal-100: hsl(167.2 85.5% 89.2%); + --sl-color-teal-200: hsl(168.4 83.8% 78.2%); + --sl-color-teal-300: hsl(170.6 76.9% 64.3%); + --sl-color-teal-400: hsl(172.5 66% 50.4%); + --sl-color-teal-500: hsl(173.4 80.4% 40%); + --sl-color-teal-600: hsl(174.7 83.9% 31.6%); + --sl-color-teal-700: hsl(175.3 77.4% 26.1%); + --sl-color-teal-800: hsl(176.1 69.4% 21.8%); + --sl-color-teal-900: hsl(175.9 60.8% 19%); + --sl-color-teal-950: hsl(176.5 58.6% 11.4%); + --sl-color-cyan-50: hsl(183.2 100% 96.3%); + --sl-color-cyan-100: hsl(185.1 95.9% 90.4%); + --sl-color-cyan-200: hsl(186.2 93.5% 81.8%); + --sl-color-cyan-300: hsl(187 92.4% 69%); + --sl-color-cyan-400: hsl(187.9 85.7% 53.3%); + --sl-color-cyan-500: hsl(188.7 94.5% 42.7%); + --sl-color-cyan-600: hsl(191.6 91.4% 36.5%); + --sl-color-cyan-700: hsl(192.9 82.3% 31%); + --sl-color-cyan-800: hsl(194.4 69.6% 27.1%); + --sl-color-cyan-900: hsl(196.4 63.6% 23.7%); + --sl-color-cyan-950: hsl(196.8 61% 16.1%); + --sl-color-sky-50: hsl(204 100% 97.1%); + --sl-color-sky-100: hsl(204 93.8% 93.7%); + --sl-color-sky-200: hsl(200.6 94.4% 86.1%); + --sl-color-sky-300: hsl(199.4 95.5% 73.9%); + --sl-color-sky-400: hsl(198.4 93.2% 59.6%); + --sl-color-sky-500: hsl(198.6 88.7% 48.4%); + --sl-color-sky-600: hsl(200.4 98% 39.4%); + --sl-color-sky-700: hsl(201.3 96.3% 32.2%); + --sl-color-sky-800: hsl(201 90% 27.5%); + --sl-color-sky-900: hsl(202 80.3% 23.9%); + --sl-color-sky-950: hsl(202.3 73.8% 16.5%); + --sl-color-blue-50: hsl(213.8 100% 96.9%); + --sl-color-blue-100: hsl(214.3 94.6% 92.7%); + --sl-color-blue-200: hsl(213.3 96.9% 87.3%); + --sl-color-blue-300: hsl(211.7 96.4% 78.4%); + --sl-color-blue-400: hsl(213.1 93.9% 67.8%); + --sl-color-blue-500: hsl(217.2 91.2% 59.8%); + --sl-color-blue-600: hsl(221.2 83.2% 53.3%); + --sl-color-blue-700: hsl(224.3 76.3% 48%); + --sl-color-blue-800: hsl(225.9 70.7% 40.2%); + --sl-color-blue-900: hsl(224.4 64.3% 32.9%); + --sl-color-blue-950: hsl(226.2 55.3% 18.4%); + --sl-color-indigo-50: hsl(225.9 100% 96.7%); + --sl-color-indigo-100: hsl(226.5 100% 93.9%); + --sl-color-indigo-200: hsl(228 96.5% 88.8%); + --sl-color-indigo-300: hsl(229.7 93.5% 81.8%); + --sl-color-indigo-400: hsl(234.5 89.5% 73.9%); + --sl-color-indigo-500: hsl(238.7 83.5% 66.7%); + --sl-color-indigo-600: hsl(243.4 75.4% 58.6%); + --sl-color-indigo-700: hsl(244.5 57.9% 50.6%); + --sl-color-indigo-800: hsl(243.7 54.5% 41.4%); + --sl-color-indigo-900: hsl(242.2 47.4% 34.3%); + --sl-color-indigo-950: hsl(243.5 43.6% 22.9%); + --sl-color-violet-50: hsl(250 100% 97.6%); + --sl-color-violet-100: hsl(251.4 91.3% 95.5%); + --sl-color-violet-200: hsl(250.5 95.2% 91.8%); + --sl-color-violet-300: hsl(252.5 94.7% 85.1%); + --sl-color-violet-400: hsl(255.1 91.7% 76.3%); + --sl-color-violet-500: hsl(258.3 89.5% 66.3%); + --sl-color-violet-600: hsl(262.1 83.3% 57.8%); + --sl-color-violet-700: hsl(263.4 70% 50.4%); + --sl-color-violet-800: hsl(263.4 69.3% 42.2%); + --sl-color-violet-900: hsl(263.5 67.4% 34.9%); + --sl-color-violet-950: hsl(265.1 61.5% 21.4%); + --sl-color-purple-50: hsl(270 100% 98%); + --sl-color-purple-100: hsl(268.7 100% 95.5%); + --sl-color-purple-200: hsl(268.6 100% 91.8%); + --sl-color-purple-300: hsl(269.2 97.4% 85.1%); + --sl-color-purple-400: hsl(270 95.2% 75.3%); + --sl-color-purple-500: hsl(270.7 91% 65.1%); + --sl-color-purple-600: hsl(271.5 81.3% 55.9%); + --sl-color-purple-700: hsl(272.1 71.7% 47.1%); + --sl-color-purple-800: hsl(272.9 67.2% 39.4%); + --sl-color-purple-900: hsl(273.6 65.6% 32%); + --sl-color-purple-950: hsl(276 59.5% 16.5%); + --sl-color-fuchsia-50: hsl(289.1 100% 97.8%); + --sl-color-fuchsia-100: hsl(287 100% 95.5%); + --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%); + --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%); + --sl-color-fuchsia-400: hsl(292 91.4% 72.5%); + --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%); + --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%); + --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%); + --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%); + --sl-color-fuchsia-900: hsl(296.7 63.6% 28%); + --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%); + --sl-color-pink-50: hsl(327.3 73.3% 97.1%); + --sl-color-pink-100: hsl(325.7 77.8% 94.7%); + --sl-color-pink-200: hsl(325.9 84.6% 89.8%); + --sl-color-pink-300: hsl(327.4 87.1% 81.8%); + --sl-color-pink-400: hsl(328.6 85.5% 70.2%); + --sl-color-pink-500: hsl(330.4 81.2% 60.4%); + --sl-color-pink-600: hsl(333.3 71.4% 50.6%); + --sl-color-pink-700: hsl(335.1 77.6% 42%); + --sl-color-pink-800: hsl(335.8 74.4% 35.3%); + --sl-color-pink-900: hsl(335.9 69% 30.4%); + --sl-color-pink-950: hsl(336.2 65.4% 15.9%); + --sl-color-rose-50: hsl(355.7 100% 97.3%); + --sl-color-rose-100: hsl(355.6 100% 94.7%); + --sl-color-rose-200: hsl(352.7 96.1% 90%); + --sl-color-rose-300: hsl(352.6 95.7% 81.8%); + --sl-color-rose-400: hsl(351.3 94.5% 71.4%); + --sl-color-rose-500: hsl(349.7 89.2% 60.2%); + --sl-color-rose-600: hsl(346.8 77.2% 49.8%); + --sl-color-rose-700: hsl(345.3 82.7% 40.8%); + --sl-color-rose-800: hsl(343.4 79.7% 34.7%); + --sl-color-rose-900: hsl(341.5 75.5% 30.4%); + --sl-color-rose-950: hsl(341.3 70.1% 17.1%); + --sl-color-primary-50: var(--sl-color-sky-50); + --sl-color-primary-100: var(--sl-color-sky-100); + --sl-color-primary-200: var(--sl-color-sky-200); + --sl-color-primary-300: var(--sl-color-sky-300); + --sl-color-primary-400: var(--sl-color-sky-400); + --sl-color-primary-500: var(--sl-color-sky-500); + --sl-color-primary-600: var(--sl-color-sky-600); + --sl-color-primary-700: var(--sl-color-sky-700); + --sl-color-primary-800: var(--sl-color-sky-800); + --sl-color-primary-900: var(--sl-color-sky-900); + --sl-color-primary-950: var(--sl-color-sky-950); + --sl-color-success-50: var(--sl-color-green-50); + --sl-color-success-100: var(--sl-color-green-100); + --sl-color-success-200: var(--sl-color-green-200); + --sl-color-success-300: var(--sl-color-green-300); + --sl-color-success-400: var(--sl-color-green-400); + --sl-color-success-500: var(--sl-color-green-500); + --sl-color-success-600: var(--sl-color-green-600); + --sl-color-success-700: var(--sl-color-green-700); + --sl-color-success-800: var(--sl-color-green-800); + --sl-color-success-900: var(--sl-color-green-900); + --sl-color-success-950: var(--sl-color-green-950); + --sl-color-warning-50: var(--sl-color-amber-50); + --sl-color-warning-100: var(--sl-color-amber-100); + --sl-color-warning-200: var(--sl-color-amber-200); + --sl-color-warning-300: var(--sl-color-amber-300); + --sl-color-warning-400: var(--sl-color-amber-400); + --sl-color-warning-500: var(--sl-color-amber-500); + --sl-color-warning-600: var(--sl-color-amber-600); + --sl-color-warning-700: var(--sl-color-amber-700); + --sl-color-warning-800: var(--sl-color-amber-800); + --sl-color-warning-900: var(--sl-color-amber-900); + --sl-color-warning-950: var(--sl-color-amber-950); + --sl-color-danger-50: var(--sl-color-red-50); + --sl-color-danger-100: var(--sl-color-red-100); + --sl-color-danger-200: var(--sl-color-red-200); + --sl-color-danger-300: var(--sl-color-red-300); + --sl-color-danger-400: var(--sl-color-red-400); + --sl-color-danger-500: var(--sl-color-red-500); + --sl-color-danger-600: var(--sl-color-red-600); + --sl-color-danger-700: var(--sl-color-red-700); + --sl-color-danger-800: var(--sl-color-red-800); + --sl-color-danger-900: var(--sl-color-red-900); + --sl-color-danger-950: var(--sl-color-red-950); + --sl-color-neutral-50: var(--sl-color-gray-50); + --sl-color-neutral-100: var(--sl-color-gray-100); + --sl-color-neutral-200: var(--sl-color-gray-200); + --sl-color-neutral-300: var(--sl-color-gray-300); + --sl-color-neutral-400: var(--sl-color-gray-400); + --sl-color-neutral-500: var(--sl-color-gray-500); + --sl-color-neutral-600: var(--sl-color-gray-600); + --sl-color-neutral-700: var(--sl-color-gray-700); + --sl-color-neutral-800: var(--sl-color-gray-800); + --sl-color-neutral-900: var(--sl-color-gray-900); + --sl-color-neutral-950: var(--sl-color-gray-950); + --sl-color-neutral-0: hsl(0, 0%, 100%); + --sl-color-neutral-1000: hsl(0, 0%, 0%); +} diff --git a/frontend/docs/docs/user-guide/archived-items.md b/frontend/docs/docs/user-guide/archived-items.md index d69e5f24d9..eefe4288ff 100644 --- a/frontend/docs/docs/user-guide/archived-items.md +++ b/frontend/docs/docs/user-guide/archived-items.md @@ -16,9 +16,9 @@ The status of an archived item depends on its type. Uploads will always have the | :bootstrap-dash-square-fill: Stopped | The crawl workflow was _stopped_ gracefully by a user and data is saved. | | :bootstrap-exclamation-square-fill: Stopped: Reason | A workflow limit (listed as the reason) was reached and data is saved. | | :bootstrap-x-octagon-fill: Canceled | The crawl workflow was _canceled_ by a user, no data is saved. | -| :bootstrap-exclamation-triangle-fill: Failed | A serious error occurred while crawling, no data is saved.| +| :bootstrap-diamond-triangle-fill: Failed | A serious error occurred while crawling, no data is saved.| -Because :bootstrap-x-octagon-fill: Canceled and :bootstrap-exclamation-triangle-fill: Failed crawls do not contain data, they are omitted from the archived items list page and cannot be added to a collection. +Because :bootstrap-x-octagon-fill: Canceled and :bootstrap-exclamation-diamond-fill: Failed crawls do not contain data, they are omitted from the archived items list page and cannot be added to a collection. ## Archived Item Details diff --git a/frontend/docs/mkdocs.yml b/frontend/docs/mkdocs.yml index e2cac91003..4cac65c270 100644 --- a/frontend/docs/mkdocs.yml +++ b/frontend/docs/mkdocs.yml @@ -33,7 +33,7 @@ theme: tip: bootstrap/exclamation-circle-fill success: bootstrap/check-circle-fill question: bootstrap/question-circle-fill - warning: bootstrap/exclamation-triangle-fill + warning: bootstrap/exclamation-diamond-fill failure: bootstrap/x-octagon-fill danger: bootstrap/exclamation-diamond-fill bug: bootstrap/bug-fill diff --git a/frontend/package.json b/frontend/package.json index d26abd9cf8..9ef105b604 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -122,6 +122,7 @@ "devDependencies": { "@custom-elements-manifest/analyzer": "^0.10.4", "@lit/localize-tools": "^0.8.0", + "@storybook/addon-docs": "^8.6.12", "@storybook/addon-essentials": "^8.6.12", "@storybook/addon-styling-webpack": "^1.0.1", "@storybook/addon-webpack5-compiler-swc": "^3.0.0", @@ -137,6 +138,7 @@ "husky": "^8.0.3", "lint-staged": "^13.1.0", "prettier-plugin-tailwindcss": "^0.5.12", + "remark-gfm": "^4.0.1", "rollup-plugin-typescript-paths": "^1.4.0", "sinon": "^12.0.1", "storybook": "^8.6.12", @@ -148,6 +150,7 @@ "@esm-bundle/chai": "^4.3.4-fix.0", "@open-wc/testing": "^3.2.0", "@playwright/test": "1.49.0", + "@types/react": "^19.1.3", "@web/test-runner": "^0.13.22", "@web/test-runner-playwright": "^0.11.0", "http-proxy-middleware": "^2.0.7" diff --git a/frontend/prettier.config.js b/frontend/prettier.config.js index a8de50f9b1..6a19c4f62d 100644 --- a/frontend/prettier.config.js +++ b/frontend/prettier.config.js @@ -24,7 +24,7 @@ module.exports = { "^~assets/(.*)", "", ], - importOrderParserPlugins: ["typescript", "decorators-legacy"], + importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"], overrides: [ { files: "**/*.xlf", diff --git a/frontend/src/components/orgs-list.ts b/frontend/src/components/orgs-list.ts index 55a8fdbc89..5f5252f6c4 100644 --- a/frontend/src/components/orgs-list.ts +++ b/frontend/src/components/orgs-list.ts @@ -788,7 +788,7 @@ export class OrgsList extends BtrixElement { icon: html` `, @@ -993,7 +993,7 @@ export class OrgsList extends BtrixElement { subscription = { icon: html``, description: msg("Payment Failed"), diff --git a/frontend/src/components/ui/pw-strength-alert.ts b/frontend/src/components/ui/pw-strength-alert.ts index 459d5dc220..e599ee3935 100644 --- a/frontend/src/components/ui/pw-strength-alert.ts +++ b/frontend/src/components/ui/pw-strength-alert.ts @@ -93,14 +93,14 @@ export class PasswordStrengthAlert extends LitElement { label: string; variant: "primary" | "neutral" | "danger" | "success" | "warning"; } = { - icon: "exclamation-triangle", + icon: "x-octagon", label: msg("Very weak password"), variant: "danger", }; switch (score) { case 2: scoreProps = { - icon: "exclamation-circle", + icon: "exclamation-diamond", label: msg("Weak password"), variant: "warning", }; diff --git a/frontend/src/pages/invite/accept.ts b/frontend/src/pages/invite/accept.ts index fb2f8528f2..0ab90da04b 100644 --- a/frontend/src/pages/invite/accept.ts +++ b/frontend/src/pages/invite/accept.ts @@ -65,7 +65,6 @@ export class AcceptInvite extends BtrixElement { this.notify.toast({ message: msg("Please log in to accept this invite."), variant: "warning", - icon: "exclamation-triangle", }); this.navigate.to( diff --git a/frontend/src/pages/org/browser-profiles-detail.ts b/frontend/src/pages/org/browser-profiles-detail.ts index f207a8cb9b..68009361d8 100644 --- a/frontend/src/pages/org/browser-profiles-detail.ts +++ b/frontend/src/pages/org/browser-profiles-detail.ts @@ -626,7 +626,6 @@ export class BrowserProfilesDetail extends BtrixElement { >. Please remove browser profile from Workflow to continue.`, ), variant: "warning", - icon: "exclamation-triangle", duration: 15000, }); } else { diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts index 8640721355..0cf59cfcbf 100644 --- a/frontend/src/pages/org/browser-profiles-list.ts +++ b/frontend/src/pages/org/browser-profiles-list.ts @@ -398,7 +398,6 @@ export class BrowserProfilesList extends BtrixElement { >. Please remove browser profile from Workflow to continue.`, ), variant: "warning", - icon: "exclamation-triangle", duration: 15000, }); } else { diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts index 10fc0441d4..036c339a2a 100644 --- a/frontend/src/pages/org/dashboard.ts +++ b/frontend/src/pages/org/dashboard.ts @@ -5,6 +5,7 @@ import type { SlRadioGroup, SlSelectEvent, } from "@shoelace-style/shoelace"; +import clsx from "clsx"; import { html, nothing, type PropertyValues, type TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -76,11 +77,11 @@ export class Dashboard extends BtrixElement { cacheBust = 0; private readonly colors = { - default: "neutral", - crawls: "green", - uploads: "sky", - browserProfiles: "indigo", - runningTime: "blue", + default: tw`text-neutral-600`, + crawls: tw`text-green-600`, + uploads: tw`text-sky-600`, + browserProfiles: tw`text-indigo-600`, + runningTime: tw`text-blue-600`, }; private readonly collections = new Task(this, { @@ -253,7 +254,7 @@ export class Dashboard extends BtrixElement { pluralLabel: msg("Crawls"), iconProps: { name: "gear-wide-connected", - color: this.colors.crawls, + class: this.colors.crawls, }, })} ${this.renderStat({ @@ -263,7 +264,7 @@ export class Dashboard extends BtrixElement { : this.localize.bytes(metrics.storageUsedUploads), singleLabel: msg("Upload"), pluralLabel: msg("Uploads"), - iconProps: { name: "upload", color: this.colors.uploads }, + iconProps: { name: "upload", class: this.colors.uploads }, })} ${this.renderStat({ value: metrics.profileCount, @@ -274,7 +275,7 @@ export class Dashboard extends BtrixElement { pluralLabel: msg("Browser Profiles"), iconProps: { name: "window-fullscreen", - color: this.colors.browserProfiles, + class: this.colors.browserProfiles, }, })} `, @@ -567,10 +576,7 @@ export class Dashboard extends BtrixElement { isStorageFull, () => html`
- + ${msg("Storage is Full")}
`, @@ -788,10 +794,7 @@ export class Dashboard extends BtrixElement { isReached, () => html`
- + ${msg("Execution Minutes Quota Reached")}
`, @@ -914,18 +917,19 @@ export class Dashboard extends BtrixElement { secondaryValue?: number | string | TemplateResult; singleLabel: string; pluralLabel: string; - iconProps: { name: string; library?: string; color?: string }; + iconProps: { name: string; library?: string; class?: string }; }) { const { value, iconProps } = stat; return html`
${value === 1 ? stat.singleLabel : stat.pluralLabel} diff --git a/frontend/src/pages/org/workflows-list.ts b/frontend/src/pages/org/workflows-list.ts index 5f5ce071a8..89c259132c 100644 --- a/frontend/src/pages/org/workflows-list.ts +++ b/frontend/src/pages/org/workflows-list.ts @@ -804,7 +804,6 @@ export class WorkflowsList extends BtrixElement { str`Only first ${this.localize.number(SEEDS_MAX)} URLs were copied.`, ), variant: "warning", - icon: "exclamation-triangle", id: "workflow-copied-status", }); } else { diff --git a/frontend/src/stories/design/action-menus.mdx b/frontend/src/stories/design/action-menus.mdx new file mode 100644 index 0000000000..c7603a046b --- /dev/null +++ b/frontend/src/stories/design/action-menus.mdx @@ -0,0 +1,29 @@ +import { Meta } from "@storybook/blocks"; + + + +# Action Menus + +While controls are always placed next to the most relevant content area, we +expose most controls for an object in an _Actions_ dropdown menu to enable +discovery of actions in a single place, and allow power-users to quickly +accomplish tasks. + +We try to avoid surfacing navigation options in action menus as they are not +tagged as navigation elements. Sometimes we expose links here for convenience, +but navigating to another page should never only be possible through an actions +menu. + +## Implementation + +Action menus should generally contain a consistent set of actions for a given +object. Whereas new table rows symbolize horizontal separators, these actions +should be ordered as follows: + +| Dropdown Action Order | +| ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| Actions related only to the current page (eg: remove archived item from collection) | +| Actions related to editing the object (eg: edit workflow config, edit item metadata)
Other actions related to the current object (eg: run crawl) | +| Actions related to exporting/downloading (eg: download archived item) | +| Copy information to clipboard (eg: copy share link)
Copy IDs to clipboard (eg: copy item ID) | +| Destructive actions (eg: delete item) | diff --git a/frontend/src/stories/design/status-indicators.mdx b/frontend/src/stories/design/status-indicators.mdx new file mode 100644 index 0000000000..5400e852d0 --- /dev/null +++ b/frontend/src/stories/design/status-indicators.mdx @@ -0,0 +1,49 @@ +import { Meta } from "@storybook/blocks"; + +import { ColorSwatch } from "../../../.storybook/blocks/ColorSwatch"; + + + +# Status Indicators + +Browsertrix uses a standard set of status icons to communicate success, neutral, +and failure states throughout the app. Colors are used only to reinforce their +distinct shapes which have been chosen so they remain accessible to those who +may not be able to distinguish differences based on color alone. + +Status icons always use filled icon variants (when available), as opposed to +buttons or actions which use strokes. + +When used without labels, status icons should include tooltips to provider +further clarity as to what they indicate. + +## In Use (as of 2025-05-06) + +| Icon & Label | Color | Context | Description | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------- | +| 1 Crawl Running | Shoelace `--sl-color-success-600` | Dashboard | Count of crawls in "running" status when that count is non-zero | +| 0 Crawls Running | Shoelace Shoelace `--sl-color-neutral-600` | Dashboard | Count of crawls in "running" status when that count is zero | +| 1 Crawl Workflow Waiting | Shoelace `--sl-color-violet-600` | Dashboard | Count of crawls in "waiting" status | +| No Crawls Yet | Shoelace `--sl-color-neutral-400` | Crawl Workflows | Used to show that a workflow has no crawls | +| Complete | Shoelace `--sl-color-success-600` | Crawl Workflows | Used to show that a workflow's most recent crawl was completed | +| Stopped | Shoelace `--sl-color-warning-600` | Crawl Workflows | Used to show that a workflow's most recent crawl was stopped | +| Canceled | Shoelace `--sl-color-danger-600` | Crawl Workflows | Used to show that a workflow's most recent crawl was canceled | +| Starting | Shoelace `--sl-color-violet-600` | Crawl Workflows | Used to show that a crawl is starting | +| Running | Shoelace `--sl-color-success-600` | Crawl Workflows | Used to show that a crawl is running | +| Behavior timed out | Shoelace `--sl-color-warning-600` | Crawl Logs | Used to show a warning log from a behavior | +| Success | Shoelace `--sl-color-success-600` | Toasts | Used to show a success notification | +| Warning | Shoelace `--sl-color-warning-600` | Toasts | Used to show a warning notification | +| Danger | Shoelace `--sl-color-danger-600` | Toasts | Used to show an error notification | + +## Intended Implementation + +| Status | Color | Description | Icons | Examples | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Empty | Shoelace `--sl-color-neutral-400` | Used for empty states where no data is present | `slash-circle` | No Crawls Yet | +| Pending | Shoelace `--sl-color-violet-600` | Used when a process is queued or starting but is not yet running. Should be animated when indicating the status of a single object. | `hourglass-split`, or the icon of the next state being transitioned to (pulsing) | 1 Crawl Workflow Waiting
Starting
Resuming | +| Running | Shoelace `--sl-color-green-600` | Used when a process is actively running. Should be animated when indicating the status of a single object. | `dot` | Running | +| Paused | Shoelace `--sl-color-neutral-600` | Used for paused states | `pause-circle` or `play-circle` | Pause
Resume | +| Success | Shoelace `--sl-color-green-600` | Used for positive / successful states | `check-circle-fill` or `check2-circle` | Complete | +| Neutral | Shoelace `--sl-color-amber-600` | Used for ambiguous states, generally good but could be better | `dash-square-fill` | Stopped | +| Warning | Shoelace `--sl-color-amber-600` | Used for warning states, something is wrong but not critically | `exclamation-diamond-fill` or `exclamation-diamond` | Warning | +| Danger | Shoelace `--sl-color-orange-600` | Used for serious errors and actions that should be taken with extreme care | `x-octagon-fill` or `x-octagon` | Error | diff --git a/frontend/src/utils/notify.ts b/frontend/src/utils/notify.ts index e86e517b79..64bef96846 100644 --- a/frontend/src/utils/notify.ts +++ b/frontend/src/utils/notify.ts @@ -5,12 +5,20 @@ import { type NotifyEventDetail } from "@/controllers/notify"; const toastsWithIds = new Map(); +const iconMap = { + info: "info-circle", + primary: "info-circle", + success: "check2-circle", + warning: "exclamation-diamond", + danger: "x-octagon", +} as const; + export const toast = async (detail: NotifyEventDetail) => { const { title, message, variant = "primary", - icon = "info-circle", + icon = iconMap[variant], duration = 5000, id, } = detail; diff --git a/frontend/tsconfig.eslint.json b/frontend/tsconfig.eslint.json index c967c5e3e0..1074cb5686 100644 --- a/frontend/tsconfig.eslint.json +++ b/frontend/tsconfig.eslint.json @@ -4,5 +4,11 @@ "noEmit": true }, "extends": "./tsconfig.json", - "include": ["**/*.ts", "**/*.js", "*.mjs"] + "include": [ + "**/*.ts", + "**/*.js", + "*.mjs", + ".storybook/**/*.ts", + ".storybook/**/*.tsx" + ] } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 5b56925be8..5d7f100b8d 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1920,7 +1920,7 @@ dequal "^2.0.2" ts-dedent "^2.0.0" -"@storybook/addon-docs@8.6.12": +"@storybook/addon-docs@8.6.12", "@storybook/addon-docs@^8.6.12": version "8.6.12" resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-8.6.12.tgz#81ef50ae5cdc38ac3858f3a1322b0e38d3bf764f" integrity sha512-kEezQjAf/p3SpDzLABgg4fbT48B6dkT2LiZCKTRmCrJVtuReaAr4R9MMM6Jsph6XjbIj/SvOWf3CMeOPXOs9sg== @@ -2591,6 +2591,13 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa" integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ== +"@types/mdast@^4.0.0": + version "4.0.4" + resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.4.tgz#7ccf72edd2f1aa7dd3437e180c64373585804dd6" + integrity sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA== + dependencies: + "@types/unist" "*" + "@types/mdx@^2.0.0": version "2.0.13" resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.13.tgz#68f6877043d377092890ff5b298152b0a21671bd" @@ -2663,6 +2670,13 @@ resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== +"@types/react@^19.1.3": + version "19.1.3" + resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.3.tgz#c75a24b775a63280b02c66a55a3cfa04f4022cf7" + integrity sha512-dLWQ+Z0CkIvK1J8+wrDPwGxEYFA4RAyHoZPxHVGspYmFVnwGSNT24cGIhFJrtfRnWVuW8X7NO52gCXmhkVUWGQ== + dependencies: + csstype "^3.0.2" + "@types/resolve@1.17.1": version "1.17.1" resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz" @@ -2756,6 +2770,11 @@ resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311" integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g== +"@types/unist@*", "@types/unist@^3.0.0": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c" + integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q== + "@types/uuid@^9.0.1": version "9.0.8" resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba" @@ -4119,6 +4138,11 @@ axios@^0.22.0: dependencies: follow-redirects "^1.14.4" +bail@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d" + integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw== + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz" @@ -4440,6 +4464,11 @@ case-sensitive-paths-webpack-plugin@^2.4.0: resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4" integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw== +ccount@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5" + integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg== + chai-a11y-axe@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/chai-a11y-axe/-/chai-a11y-axe-1.5.0.tgz#aafa37f91f53baeafe98219768e5dee8776cf655" @@ -5004,7 +5033,7 @@ cssesc@^3.0.0: resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz" integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== -csstype@^3.1.0: +csstype@^3.0.2, csstype@^3.1.0: version "3.1.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== @@ -5210,7 +5239,7 @@ detect-node@^2.0.4: resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz" integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g== -devlop@^1.0.0: +devlop@^1.0.0, devlop@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018" integrity sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA== @@ -5631,6 +5660,11 @@ escape-string-regexp@^4.0.0: resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz" integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== +escape-string-regexp@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8" + integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw== + eslint-config-prettier@^9.1.0: version "9.1.0" resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f" @@ -5937,6 +5971,11 @@ express@^4.21.2: utils-merge "1.0.1" vary "~1.1.2" +extend@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" + integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== + extract-zip@2.0.1: version "2.0.1" resolved "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz" @@ -7071,6 +7110,11 @@ is-plain-obj@^3.0.0: resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz" integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA== +is-plain-obj@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0" + integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg== + is-plain-object@^2.0.4: version "2.0.4" resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz" @@ -7650,6 +7694,11 @@ log-update@^4.0.0: slice-ansi "^4.0.0" wrap-ansi "^6.2.0" +longest-streak@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4" + integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g== + loupe@^3.1.0, loupe@^3.1.1, loupe@^3.1.2: version "3.1.3" resolved "https://registry.yarnpkg.com/loupe/-/loupe-3.1.3.tgz#042a8f7986d77f3d0f98ef7990a2b2fef18b0fd2" @@ -7734,6 +7783,11 @@ map-or-similar@^1.5.0: resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08" integrity sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg== +markdown-table@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.4.tgz#fe44d6d410ff9d6f2ea1797a3f60aa4d2b631c2a" + integrity sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw== + marked@^4.0.10: version "4.3.0" resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3" @@ -7749,6 +7803,129 @@ math-intrinsics@^1.1.0: resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9" integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g== +mdast-util-find-and-replace@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz#70a3174c894e14df722abf43bc250cbae44b11df" + integrity sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg== + dependencies: + "@types/mdast" "^4.0.0" + escape-string-regexp "^5.0.0" + unist-util-is "^6.0.0" + unist-util-visit-parents "^6.0.0" + +mdast-util-from-markdown@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz#4850390ca7cf17413a9b9a0fbefcd1bc0eb4160a" + integrity sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA== + dependencies: + "@types/mdast" "^4.0.0" + "@types/unist" "^3.0.0" + decode-named-character-reference "^1.0.0" + devlop "^1.0.0" + mdast-util-to-string "^4.0.0" + micromark "^4.0.0" + micromark-util-decode-numeric-character-reference "^2.0.0" + micromark-util-decode-string "^2.0.0" + micromark-util-normalize-identifier "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + unist-util-stringify-position "^4.0.0" + +mdast-util-gfm-autolink-literal@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz#abd557630337bd30a6d5a4bd8252e1c2dc0875d5" + integrity sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ== + dependencies: + "@types/mdast" "^4.0.0" + ccount "^2.0.0" + devlop "^1.0.0" + mdast-util-find-and-replace "^3.0.0" + micromark-util-character "^2.0.0" + +mdast-util-gfm-footnote@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz#7778e9d9ca3df7238cc2bd3fa2b1bf6a65b19403" + integrity sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ== + dependencies: + "@types/mdast" "^4.0.0" + devlop "^1.1.0" + mdast-util-from-markdown "^2.0.0" + mdast-util-to-markdown "^2.0.0" + micromark-util-normalize-identifier "^2.0.0" + +mdast-util-gfm-strikethrough@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz#d44ef9e8ed283ac8c1165ab0d0dfd058c2764c16" + integrity sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg== + dependencies: + "@types/mdast" "^4.0.0" + mdast-util-from-markdown "^2.0.0" + mdast-util-to-markdown "^2.0.0" + +mdast-util-gfm-table@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz#7a435fb6223a72b0862b33afbd712b6dae878d38" + integrity sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg== + dependencies: + "@types/mdast" "^4.0.0" + devlop "^1.0.0" + markdown-table "^3.0.0" + mdast-util-from-markdown "^2.0.0" + mdast-util-to-markdown "^2.0.0" + +mdast-util-gfm-task-list-item@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz#e68095d2f8a4303ef24094ab642e1047b991a936" + integrity sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ== + dependencies: + "@types/mdast" "^4.0.0" + devlop "^1.0.0" + mdast-util-from-markdown "^2.0.0" + mdast-util-to-markdown "^2.0.0" + +mdast-util-gfm@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz#2cdf63b92c2a331406b0fb0db4c077c1b0331751" + integrity sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ== + dependencies: + mdast-util-from-markdown "^2.0.0" + mdast-util-gfm-autolink-literal "^2.0.0" + mdast-util-gfm-footnote "^2.0.0" + mdast-util-gfm-strikethrough "^2.0.0" + mdast-util-gfm-table "^2.0.0" + mdast-util-gfm-task-list-item "^2.0.0" + mdast-util-to-markdown "^2.0.0" + +mdast-util-phrasing@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz#7cc0a8dec30eaf04b7b1a9661a92adb3382aa6e3" + integrity sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w== + dependencies: + "@types/mdast" "^4.0.0" + unist-util-is "^6.0.0" + +mdast-util-to-markdown@^2.0.0: + version "2.1.2" + resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz#f910ffe60897f04bb4b7e7ee434486f76288361b" + integrity sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA== + dependencies: + "@types/mdast" "^4.0.0" + "@types/unist" "^3.0.0" + longest-streak "^3.0.0" + mdast-util-phrasing "^4.0.0" + mdast-util-to-string "^4.0.0" + micromark-util-classify-character "^2.0.0" + micromark-util-decode-string "^2.0.0" + unist-util-visit "^5.0.0" + zwitch "^2.0.0" + +mdast-util-to-string@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz#7a5121475556a04e7eddeb67b264aae79d312814" + integrity sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg== + dependencies: + "@types/mdast" "^4.0.0" + media-typer@0.3.0: version "0.3.0" resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz" @@ -7838,6 +8015,30 @@ micromark-core-commonmark@^2.0.0: micromark-util-symbol "^2.0.0" micromark-util-types "^2.0.0" +micromark-extension-gfm-autolink-literal@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz#6286aee9686c4462c1e3552a9d505feddceeb935" + integrity sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw== + dependencies: + micromark-util-character "^2.0.0" + micromark-util-sanitize-uri "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + +micromark-extension-gfm-footnote@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz#4dab56d4e398b9853f6fe4efac4fc9361f3e0750" + integrity sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw== + dependencies: + devlop "^1.0.0" + micromark-core-commonmark "^2.0.0" + micromark-factory-space "^2.0.0" + micromark-util-character "^2.0.0" + micromark-util-normalize-identifier "^2.0.0" + micromark-util-sanitize-uri "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + micromark-extension-gfm-strikethrough@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.0.0.tgz#6917db8e320da70e39ffbf97abdbff83e6783e61" @@ -7850,6 +8051,49 @@ micromark-extension-gfm-strikethrough@^2.0.0: micromark-util-symbol "^2.0.0" micromark-util-types "^2.0.0" +micromark-extension-gfm-table@^2.0.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz#fac70bcbf51fe65f5f44033118d39be8a9b5940b" + integrity sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg== + dependencies: + devlop "^1.0.0" + micromark-factory-space "^2.0.0" + micromark-util-character "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + +micromark-extension-gfm-tagfilter@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz#f26d8a7807b5985fba13cf61465b58ca5ff7dc57" + integrity sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg== + dependencies: + micromark-util-types "^2.0.0" + +micromark-extension-gfm-task-list-item@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz#bcc34d805639829990ec175c3eea12bb5b781f2c" + integrity sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw== + dependencies: + devlop "^1.0.0" + micromark-factory-space "^2.0.0" + micromark-util-character "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-types "^2.0.0" + +micromark-extension-gfm@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz#3e13376ab95dd7a5cfd0e29560dfe999657b3c5b" + integrity sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w== + dependencies: + micromark-extension-gfm-autolink-literal "^2.0.0" + micromark-extension-gfm-footnote "^2.0.0" + micromark-extension-gfm-strikethrough "^2.0.0" + micromark-extension-gfm-table "^2.0.0" + micromark-extension-gfm-tagfilter "^2.0.0" + micromark-extension-gfm-task-list-item "^2.0.0" + micromark-util-combine-extensions "^2.0.0" + micromark-util-types "^2.0.0" + micromark-factory-destination@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz#857c94debd2c873cba34e0445ab26b74f6a6ec07" @@ -7936,6 +8180,16 @@ micromark-util-decode-numeric-character-reference@^2.0.0: dependencies: micromark-util-symbol "^2.0.0" +micromark-util-decode-string@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz#6cb99582e5d271e84efca8e61a807994d7161eb2" + integrity sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ== + dependencies: + decode-named-character-reference "^1.0.0" + micromark-util-character "^2.0.0" + micromark-util-decode-numeric-character-reference "^2.0.0" + micromark-util-symbol "^2.0.0" + micromark-util-encode@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz#0921ac7953dc3f1fd281e3d1932decfdb9382ab1" @@ -9255,6 +9509,37 @@ relateurl@^0.2.7: resolved "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz" integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog== +remark-gfm@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-4.0.1.tgz#33227b2a74397670d357bf05c098eaf8513f0d6b" + integrity sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg== + dependencies: + "@types/mdast" "^4.0.0" + mdast-util-gfm "^3.0.0" + micromark-extension-gfm "^3.0.0" + remark-parse "^11.0.0" + remark-stringify "^11.0.0" + unified "^11.0.0" + +remark-parse@^11.0.0: + version "11.0.0" + resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-11.0.0.tgz#aa60743fcb37ebf6b069204eb4da304e40db45a1" + integrity sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA== + dependencies: + "@types/mdast" "^4.0.0" + mdast-util-from-markdown "^2.0.0" + micromark-util-types "^2.0.0" + unified "^11.0.0" + +remark-stringify@^11.0.0: + version "11.0.0" + resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-11.0.0.tgz#4c5b01dd711c269df1aaae11743eb7e2e7636fd3" + integrity sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw== + dependencies: + "@types/mdast" "^4.0.0" + mdast-util-to-markdown "^2.0.0" + unified "^11.0.0" + renderkid@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz" @@ -10435,6 +10720,11 @@ trim-newlines@^4.0.2: resolved "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.0.2.tgz" integrity sha512-GJtWyq9InR/2HRiLZgpIKv+ufIKrVrvjQWEj7PxAXNc5dwbNJkqhAUoAGgzRmULAnoOM5EIpveYd3J2VeSAIew== +trough@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/trough/-/trough-2.2.0.tgz#94a60bd6bd375c152c1df911a4b11d5b0256f50f" + integrity sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw== + ts-api-utils@^1.3.0: version "1.4.3" resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.3.tgz#bfc2215fe6528fecab2b0fba570a2e8a4263b064" @@ -10611,6 +10901,19 @@ unicorn-magic@^0.1.0: resolved "https://registry.yarnpkg.com/unicorn-magic/-/unicorn-magic-0.1.0.tgz#1bb9a51c823aaf9d73a8bfcd3d1a23dde94b0ce4" integrity sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ== +unified@^11.0.0: + version "11.0.5" + resolved "https://registry.yarnpkg.com/unified/-/unified-11.0.5.tgz#f66677610a5c0a9ee90cab2b8d4d66037026d9e1" + integrity sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA== + dependencies: + "@types/unist" "^3.0.0" + bail "^2.0.0" + devlop "^1.0.0" + extend "^3.0.0" + is-plain-obj "^4.0.0" + trough "^2.0.0" + vfile "^6.0.0" + unique-string@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-3.0.0.tgz#84a1c377aff5fd7a8bc6b55d8244b2bd90d75b9a" @@ -10618,6 +10921,37 @@ unique-string@^3.0.0: dependencies: crypto-random-string "^4.0.0" +unist-util-is@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-6.0.0.tgz#b775956486aff107a9ded971d996c173374be424" + integrity sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw== + dependencies: + "@types/unist" "^3.0.0" + +unist-util-stringify-position@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz#449c6e21a880e0855bf5aabadeb3a740314abac2" + integrity sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ== + dependencies: + "@types/unist" "^3.0.0" + +unist-util-visit-parents@^6.0.0: + version "6.0.1" + resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz#4d5f85755c3b8f0dc69e21eca5d6d82d22162815" + integrity sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw== + dependencies: + "@types/unist" "^3.0.0" + unist-util-is "^6.0.0" + +unist-util-visit@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-5.0.0.tgz#a7de1f31f72ffd3519ea71814cccf5fd6a9217d6" + integrity sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg== + dependencies: + "@types/unist" "^3.0.0" + unist-util-is "^6.0.0" + unist-util-visit-parents "^6.0.0" + universalify@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz" @@ -10757,6 +11091,22 @@ vary@^1.1.2, vary@~1.1.2: resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz" integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg== +vfile-message@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-4.0.2.tgz#c883c9f677c72c166362fd635f21fc165a7d1181" + integrity sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw== + dependencies: + "@types/unist" "^3.0.0" + unist-util-stringify-position "^4.0.0" + +vfile@^6.0.0: + version "6.0.3" + resolved "https://registry.yarnpkg.com/vfile/-/vfile-6.0.3.tgz#3652ab1c496531852bf55a6bac57af981ebc38ab" + integrity sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q== + dependencies: + "@types/unist" "^3.0.0" + vfile-message "^4.0.0" + vscode-css-languageservice@4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-4.3.0.tgz#40c797d664ab6188cace33cfbb19b037580a9318" @@ -11278,3 +11628,8 @@ zod@^3.23.8: version "3.23.8" resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d" integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g== + +zwitch@^2.0.0: + version "2.0.4" + resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7" + integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==