@zanichelli/albe-web-components 17.2.0 → 17.3.0-RC1

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

@@ -107,7 +107,7 @@ export function getThemeTokenValue(themeClass, token) {
     const value = (_a = themeStyle.styleMap.get(token)) === null || _a === void 0 ? void 0 : _a[0];
     return value instanceof CSSVariableReferenceValue
         ? getComputedStyle(document.documentElement).getPropertyValue(value.variable)
-        : (_b = value === null || value === void 0 ? void 0 : value.toString()) !== null && _b !== void 0 ? _b : undefined;
+        : ((_b = value === null || value === void 0 ? void 0 : value.toString()) !== null && _b !== void 0 ? _b : undefined);
 }
 /**
  * Get a Storybook Arg config for Design System color tokens.

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":["/* eslint-disable @typescript-eslint/naming-convention */\nimport {OptionsConfig} from \"@storybook/blocks\";\nimport {Args} from \"@storybook/web-components\";\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 * 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 themes tokens.\n */\nexport function getThemesColorTokens(): `--color${string}`[] {\n  const colorTokens = getRootCssProperties().filter((token): token is `--color${string}` =>\n    token.startsWith(\"--color\")\n  );\n\n  // remove duplicates\n  return [...new Set(colorTokens)];\n}\n\n/**\n * Get the value of a token for a given theme.\n * @param themeClass CSS class name of the theme\n * @param token Token name to get the value of\n * @returns The value of the token for the given theme.\n */\nexport function getThemeTokenValue(themeClass: string, token: `--${string}`): string | undefined {\n  const themeStyle = Array.from(document.styleSheets)\n    .flatMap((sheet) => Array.from(sheet.cssRules))\n    .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule)\n    .find((rule) => rule.selectorText.includes(themeClass));\n\n  const value = themeStyle.styleMap.get(token)?.[0] as CSSStyleValue | undefined;\n\n  return value instanceof CSSVariableReferenceValue\n    ? getComputedStyle(document.documentElement).getPropertyValue(value.variable)\n    : value?.toString() ?? undefined;\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"]}
+{"version":3,"file":"storybook-utils.js","sourceRoot":"","sources":["../../../src/utils/storybook-utils.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport {OptionsConfig} from \"@storybook/blocks\";\nimport {Args} from \"@storybook/web-components\";\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 * 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 themes tokens.\n */\nexport function getThemesColorTokens(): `--color${string}`[] {\n  const colorTokens = getRootCssProperties().filter((token): token is `--color${string}` =>\n    token.startsWith(\"--color\")\n  );\n\n  // remove duplicates\n  return [...new Set(colorTokens)];\n}\n\n/**\n * Get the value of a token for a given theme.\n * @param themeClass CSS class name of the theme\n * @param token Token name to get the value of\n * @returns The value of the token for the given theme.\n */\nexport function getThemeTokenValue(themeClass: string, token: `--${string}`): string | undefined {\n  const themeStyle = Array.from(document.styleSheets)\n    .flatMap((sheet) => Array.from(sheet.cssRules))\n    .filter((rule): rule is CSSStyleRule => rule instanceof CSSStyleRule)\n    .find((rule) => rule.selectorText.includes(themeClass));\n\n  const value = themeStyle.styleMap.get(token)?.[0] as CSSStyleValue | undefined;\n\n  return value instanceof CSSVariableReferenceValue\n    ? getComputedStyle(document.documentElement).getPropertyValue(value.variable)\n    : (value?.toString() ?? undefined);\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"]}