@zanichelli/albe-web-components 19.6.0 → 20.0.0-RC1

package/dist/collection/utils/storybook-utils.js

@@ -31,16 +31,16 @@ function mapStyle(cssText) {
  * Get Design System color tokens.
  * Can be used in components stories controls as follows:
  * @example ```
- * argTypes={{
+ * argTypes: {
  *  "--z-component--background-color": {
  *    control: {type: "select"},
  *    options: getColorTokens(),
  *  }
- * }}```
+ * }```
  *
  * and then in the component tag
  *
- * ```<z-component style="--z-component--background-color: var(${args["--z-component--background-color"]})" />```
+ * ```<z-component style={{"--z-component--background-color": `var(${args["--z-component--background-color"]})`}} />```
  */
 export function getColorTokens() {
     const tokenGroups = [...Object.values(PALETTES), "color"];
@@ -59,16 +59,16 @@ export function getPalettes() {
 /**
  * Get Design System color tokens wrapped with CSS `var()`.
  * @example ```
- * argTypes={{
+ * argTypes: {
  *  "--z-component--background-color": {
  *    control: {type: "select"},
  *    options: getColorTokens(),
  *  }
- * }}```
+ * }```
  *
  * and then in the component tag
  *
- * ```<z-component style="--z-component--background-color: ${args["--z-component--background-color"]}" />```
+ * ```<z-component style={{"--z-component--background-color": `var(${args["--z-component--background-color"]})`}} />```
  */
 export function getColorVars() {
     return getColorTokens().map((token) => `var(${token})`);
@@ -77,7 +77,7 @@ export function getColorVars() {
  * Get Design System color tokens as readable labels for `control` configuration.
  * It assumes you set the options using the `getColorTokens()` function, so expected options are something like `var(--color-token)`.
  * @example ```
- * argTypes={{
+ * argTypes: {
  *  "--z-component--background-color": {
  *    options: getColorTokens(),
  *    control: {
@@ -85,13 +85,13 @@ export function getColorVars() {
  *      labels: getColorVarsLabels(),
  *    },
  *  }
- * }}```
+ * }```
  */
 export function getColorVarsLabels() {
     return getColorVars().reduce((acc, tokenVar) => {
         const tokenLabel = tokenVar.replace(/^var\(--(.*)\)/, "$1");
         return Object.assign(Object.assign({}, acc), { [tokenVar]: tokenLabel });
-    }, { null: "default" });
+    }, {});
 }
 /**
  * Get Design System theme's color tokens.
@@ -126,22 +126,35 @@ export function getThemeColorTokens(name, variant = undefined) {
 }
 /**
  * Get a Storybook Arg config for Design System color tokens.
- * Useful to configure a control for the stories.
- * @param nullable - If true, it will add a `null` option to the list of options, with a label of "-" to allow the user to deselect a color value.
+ * Useful to configure an `arg` of the stories.
+ * @param additionalOptions - Additional options to include in the list of options.
+ * Can be a string for a simple value or an object with `label` and `value` properties if you need custom labels.
+ * The additional options will be added at the beginning of the list of options.
  * @example ```
- *  "--z-component--background-color": getColorTokenArgConfig()
+ * argTypes: {
+ *   "--z-component--background-color": getColorTokenArgConfig()
+ * }
  * ```
  */
-export function getColorTokenArgConfig(nullable = false) {
-    const colorTokens = getColorVars();
-    if (nullable) {
-        colorTokens.unshift(null);
+export function getColorTokenArgConfig(additionalOptions) {
+    const options = getColorVars();
+    const labels = getColorVarsLabels();
+    if (additionalOptions === null || additionalOptions === void 0 ? void 0 : additionalOptions.length) {
+        additionalOptions.forEach((option) => {
+            if (typeof option === "string") {
+                options.unshift(option);
+            }
+            else if (option.value) {
+                options.unshift(option.value);
+                labels[option.value] = option.label;
+            }
+        });
     }
     return {
-        options: colorTokens,
+        options,
         control: {
             type: "select",
-            labels: getColorVarsLabels(),
+            labels,
         },
     };
 }

package/dist/collection/utils/storybook-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"storybook-utils.js","sourceRoot":"","sources":["../../src/utils/storybook-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import type {OptionsConfig} from \"@storybook/addon-docs/blocks\";\nimport type {Args} from \"storybook/internal/csf\";\n\ntype CSSCustomProp = `--${string}`;\ntype EnsurePrefix<T extends string, P extends string> = T extends `${P}${string}` ? T : `${P}${T}`;\n\nexport type CSSVarsArguments<T extends string = string> = {[x in EnsurePrefix<T, \"--\">]: string};\n\nenum PALETTES {\n  RED = \"red\",\n  GREEN = \"green\",\n  BLUE = \"blue\",\n  YELLOW = \"yellow\",\n  GRAY = \"gray\",\n  AVATAR = \"avatar\",\n  SUBJECT = \"subject\",\n}\n\n/**\n * Get all root CSS properties.\n */\nfunction getRootCssProperties(): string[] {\n  return Array.from(document.styleSheets)\n    .flatMap((sheet) => Array.from(sheet.cssRules))\n    .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule && rule.selectorText?.includes(\":root\"))\n    .flatMap((rule) => Object.values(rule.style || {}))\n    .filter(Boolean);\n}\n\n/**\n * Transform a `cssText` string, with the content of a rule, to an object.\n */\nfunction mapStyle(cssText: string): Record<string, string> {\n  return Object.fromEntries(\n    cssText\n      .split(\";\")\n      .filter(Boolean)\n      .map((declaration) => declaration.trim().split(\": \"))\n  );\n}\n\n/**\n * Get Design System color tokens.\n * Can be used in components stories controls as follows:\n * @example ```\n * argTypes={{\n *  \"--z-component--background-color\": {\n *    control: {type: \"select\"},\n *    options: getColorTokens(),\n *  }\n * }}```\n *\n * and then in the component tag\n *\n * ```<z-component style=\"--z-component--background-color: var(${args[\"--z-component--background-color\"]})\" />```\n */\nexport function getColorTokens(): CSSCustomProp[] {\n  const tokenGroups = [...Object.values(PALETTES), \"color\"];\n  const colorTokens = getRootCssProperties().filter((token): token is CSSCustomProp =>\n    tokenGroups.some((group) => token.startsWith(`--${group}`))\n  );\n\n  return [...new Set(colorTokens)].sort();\n}\n\n/**\n * Get Design System color palettes.\n */\nexport function getPalettes(): Record<keyof typeof PALETTES, CSSCustomProp[]> {\n  return Object.values(PALETTES).reduce(\n    (acc, paletteName) => {\n      const tokens = getRootCssProperties().filter((token): token is CSSCustomProp =>\n        token.startsWith(`--${paletteName}`)\n      );\n\n      return {\n        ...acc,\n        [paletteName]: tokens.sort((a, b) => +a.replace(/\\D/g, \"\") - +b.replace(/\\D/g, \"\")),\n      };\n    },\n    {} as Record<keyof typeof PALETTES, CSSCustomProp[]>\n  );\n}\n\n/**\n * Get Design System color tokens wrapped with CSS `var()`.\n * @example ```\n * argTypes={{\n *  \"--z-component--background-color\": {\n *    control: {type: \"select\"},\n *    options: getColorTokens(),\n *  }\n * }}```\n *\n * and then in the component tag\n *\n * ```<z-component style=\"--z-component--background-color: ${args[\"--z-component--background-color\"]}\" />```\n */\nexport function getColorVars(): `var(${CSSCustomProp})`[] {\n  return getColorTokens().map((token) => `var(${token})` as const);\n}\n\n/**\n * Get Design System color tokens as readable labels for `control` configuration.\n * It assumes you set the options using the `getColorTokens()` function, so expected options are something like `var(--color-token)`.\n * @example ```\n * argTypes={{\n *  \"--z-component--background-color\": {\n *    options: getColorTokens(),\n *    control: {\n *      type: \"select\",\n *      labels: getColorVarsLabels(),\n *    },\n *  }\n * }}```\n */\nexport function getColorVarsLabels(): OptionsConfig[\"labels\"] {\n  return getColorVars().reduce(\n    (acc, tokenVar) => {\n      const tokenLabel = tokenVar.replace(/^var\\(--(.*)\\)/, \"$1\");\n\n      return {\n        ...acc,\n        [tokenVar]: tokenLabel,\n      };\n    },\n    {null: \"default\"}\n  );\n}\n\n/**\n * Get Design System theme's color tokens.\n * @param name Name of the theme, like `theme-black`.\n * @param variant Variant of the theme, like `theme-black--red`.\n */\nexport function getThemeColorTokens(\n  name: string,\n  variant: string | undefined = undefined\n): Record<CSSCustomProp, CSSCustomProp> {\n  const themeClass = name.startsWith(\".\") ? name : `.${name}`;\n  const themeVariantClass = variant ? (variant.startsWith(\".\") ? variant : `.${variant}`) : undefined;\n  const theme = Array.from(document.styleSheets)\n    .flatMap((sheet) => Array.from(sheet.cssRules))\n    .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule)\n    .filter((rule) => {\n      const selectorTargets = rule.selectorText.split(\",\").map((selector) => selector.trim());\n\n      return selectorTargets.includes(themeClass) || selectorTargets.includes(themeClass + (themeVariantClass ?? \"\"));\n    })\n    .reduce((store, rule) => {\n      const styleObj = mapStyle(rule.style.cssText);\n      // remove all non-color properties\n      for (const key of Object.keys(styleObj)) {\n        if (!key.startsWith(\"--color\")) {\n          delete styleObj[key];\n        } else {\n          // remove `var()` call from the value\n          styleObj[key] = styleObj[key].replace(/^var\\((.+)\\)/, \"$1\");\n        }\n      }\n\n      return {...store, ...styleObj};\n    }, {});\n\n  return theme;\n}\n\n/**\n * Get a Storybook Arg config for Design System color tokens.\n * Useful to configure a control for the stories.\n * @param nullable - If true, it will add a `null` option to the list of options, with a label of \"-\" to allow the user to deselect a color value.\n * @example ```\n *  \"--z-component--background-color\": getColorTokenArgConfig()\n * ```\n */\nexport function getColorTokenArgConfig(nullable = false): Args {\n  const colorTokens = getColorVars();\n  if (nullable) {\n    colorTokens.unshift(null);\n  }\n\n  return {\n    options: colorTokens,\n    control: {\n      type: \"select\",\n      labels: getColorVarsLabels(),\n    },\n  } satisfies Args;\n}\n\n/**\n * Extract CSS variables from an object.\n * Returns only the entries with keys starting with `--`.\n */\nexport function extractCSSVars(args: Args): CSSVarsArguments {\n  return Object.fromEntries(Object.entries(args).filter(([key]) => key.startsWith(\"--\")));\n}\n"]}
+{"version":3,"file":"storybook-utils.js","sourceRoot":"","sources":["../../src/utils/storybook-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import type {OptionsConfig} from \"@storybook/addon-docs/blocks\";\nimport type {Args} from \"storybook/internal/csf\";\n\ntype CSSCustomProp = `--${string}`;\ntype EnsurePrefix<T extends string, P extends string> = T extends `${P}${string}` ? T : `${P}${T}`;\n\nexport type CSSVarsArguments<T extends string = string> = {[x in EnsurePrefix<T, \"--\">]: string};\n\nenum PALETTES {\n  RED = \"red\",\n  GREEN = \"green\",\n  BLUE = \"blue\",\n  YELLOW = \"yellow\",\n  GRAY = \"gray\",\n  AVATAR = \"avatar\",\n  SUBJECT = \"subject\",\n}\n\n/**\n * Get all root CSS properties.\n */\nfunction getRootCssProperties(): string[] {\n  return Array.from(document.styleSheets)\n    .flatMap((sheet) => Array.from(sheet.cssRules))\n    .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule && rule.selectorText?.includes(\":root\"))\n    .flatMap((rule) => Object.values(rule.style || {}))\n    .filter(Boolean);\n}\n\n/**\n * Transform a `cssText` string, with the content of a rule, to an object.\n */\nfunction mapStyle(cssText: string): Record<string, string> {\n  return Object.fromEntries(\n    cssText\n      .split(\";\")\n      .filter(Boolean)\n      .map((declaration) => declaration.trim().split(\": \"))\n  );\n}\n\n/**\n * Get Design System color tokens.\n * Can be used in components stories controls as follows:\n * @example ```\n * argTypes: {\n *  \"--z-component--background-color\": {\n *    control: {type: \"select\"},\n *    options: getColorTokens(),\n *  }\n * }```\n *\n * and then in the component tag\n *\n * ```<z-component style={{\"--z-component--background-color\": `var(${args[\"--z-component--background-color\"]})`}} />```\n */\nexport function getColorTokens(): CSSCustomProp[] {\n  const tokenGroups = [...Object.values(PALETTES), \"color\"];\n  const colorTokens = getRootCssProperties().filter((token): token is CSSCustomProp =>\n    tokenGroups.some((group) => token.startsWith(`--${group}`))\n  );\n\n  return [...new Set(colorTokens)].sort();\n}\n\n/**\n * Get Design System color palettes.\n */\nexport function getPalettes(): Record<keyof typeof PALETTES, CSSCustomProp[]> {\n  return Object.values(PALETTES).reduce(\n    (acc, paletteName) => {\n      const tokens = getRootCssProperties().filter((token): token is CSSCustomProp =>\n        token.startsWith(`--${paletteName}`)\n      );\n\n      return {\n        ...acc,\n        [paletteName]: tokens.sort((a, b) => +a.replace(/\\D/g, \"\") - +b.replace(/\\D/g, \"\")),\n      };\n    },\n    {} as Record<keyof typeof PALETTES, CSSCustomProp[]>\n  );\n}\n\n/**\n * Get Design System color tokens wrapped with CSS `var()`.\n * @example ```\n * argTypes: {\n *  \"--z-component--background-color\": {\n *    control: {type: \"select\"},\n *    options: getColorTokens(),\n *  }\n * }```\n *\n * and then in the component tag\n *\n * ```<z-component style={{\"--z-component--background-color\": `var(${args[\"--z-component--background-color\"]})`}} />```\n */\nexport function getColorVars(): `var(${CSSCustomProp})`[] {\n  return getColorTokens().map((token) => `var(${token})` as const);\n}\n\n/**\n * Get Design System color tokens as readable labels for `control` configuration.\n * It assumes you set the options using the `getColorTokens()` function, so expected options are something like `var(--color-token)`.\n * @example ```\n * argTypes: {\n *  \"--z-component--background-color\": {\n *    options: getColorTokens(),\n *    control: {\n *      type: \"select\",\n *      labels: getColorVarsLabels(),\n *    },\n *  }\n * }```\n */\nexport function getColorVarsLabels(): OptionsConfig[\"labels\"] {\n  return getColorVars().reduce((acc, tokenVar) => {\n    const tokenLabel = tokenVar.replace(/^var\\(--(.*)\\)/, \"$1\");\n\n    return {\n      ...acc,\n      [tokenVar]: tokenLabel,\n    };\n  }, {});\n}\n\n/**\n * Get Design System theme's color tokens.\n * @param name Name of the theme, like `theme-black`.\n * @param variant Variant of the theme, like `theme-black--red`.\n */\nexport function getThemeColorTokens(\n  name: string,\n  variant: string | undefined = undefined\n): Record<CSSCustomProp, CSSCustomProp> {\n  const themeClass = name.startsWith(\".\") ? name : `.${name}`;\n  const themeVariantClass = variant ? (variant.startsWith(\".\") ? variant : `.${variant}`) : undefined;\n  const theme = Array.from(document.styleSheets)\n    .flatMap((sheet) => Array.from(sheet.cssRules))\n    .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule)\n    .filter((rule) => {\n      const selectorTargets = rule.selectorText.split(\",\").map((selector) => selector.trim());\n\n      return selectorTargets.includes(themeClass) || selectorTargets.includes(themeClass + (themeVariantClass ?? \"\"));\n    })\n    .reduce((store, rule) => {\n      const styleObj = mapStyle(rule.style.cssText);\n      // remove all non-color properties\n      for (const key of Object.keys(styleObj)) {\n        if (!key.startsWith(\"--color\")) {\n          delete styleObj[key];\n        } else {\n          // remove `var()` call from the value\n          styleObj[key] = styleObj[key].replace(/^var\\((.+)\\)/, \"$1\");\n        }\n      }\n\n      return {...store, ...styleObj};\n    }, {});\n\n  return theme;\n}\n\n/**\n * Get a Storybook Arg config for Design System color tokens.\n * Useful to configure an `arg` of the stories.\n * @param additionalOptions - Additional options to include in the list of options.\n * Can be a string for a simple value or an object with `label` and `value` properties if you need custom labels.\n * The additional options will be added at the beginning of the list of options.\n * @example ```\n * argTypes: {\n *   \"--z-component--background-color\": getColorTokenArgConfig()\n * }\n * ```\n */\nexport function getColorTokenArgConfig(additionalOptions?: (string | {label: string; value: string})[]): Args {\n  const options: (string | ReturnType<typeof getColorVars>[number])[] = getColorVars();\n  const labels = getColorVarsLabels();\n\n  if (additionalOptions?.length) {\n    additionalOptions.forEach((option) => {\n      if (typeof option === \"string\") {\n        options.unshift(option);\n      } else if (option.value) {\n        options.unshift(option.value);\n        labels[option.value] = option.label;\n      }\n    });\n  }\n\n  return {\n    options,\n    control: {\n      type: \"select\",\n      labels,\n    },\n  } satisfies Args;\n}\n\n/**\n * Extract CSS variables from an object.\n * Returns only the entries with keys starting with `--`.\n */\nexport function extractCSSVars(args: Args): CSSVarsArguments {\n  return Object.fromEntries(Object.entries(args).filter(([key]) => key.startsWith(\"--\")));\n}\n"]}