@rte-ds/core 1.2.1

package/scripts/design-tokens/tokens-generator.spec.ts

@@ -0,0 +1,184 @@
+import fs from "fs";
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { Collection, generateTokensScssFiles } from "./tokens-generator";
+import { ColorMode, generateThemeIndexScssFile } from "./tokens-generators/colors";
+
+vi.mock("fs");
+
+describe("tokens-generator", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("génère correctement un fichier SCSS de couleurs pour un mode", () => {
+    const colorTokens = [
+      {
+        collection: Collection.COLORS,
+        mode: ColorMode.BLEU_ICEBERG_LIGHT,
+        variables: {
+          background: {
+            default: { $type: "color", $scopes: [], $value: "Semantic.bleu-iceberg-light.bleu-100" },
+            hover: { $type: "color", $scopes: [], $value: "Semantic.bleu-iceberg-light.bleu-200" },
+          },
+          border: {
+            primary: { $type: "color", $scopes: [], $value: "Semantic.bleu-iceberg-light.rouge-500" },
+          },
+        },
+      },
+    ];
+    const writeSpy = vi.spyOn(fs, "writeFileSync");
+    generateTokensScssFiles(colorTokens);
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("bleu-iceberg-light.scss"),
+      expect.stringContaining('"background-default": $bleu-100,'),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("bleu-iceberg-light.scss"),
+      expect.stringContaining('"background-hover": $bleu-200,'),
+    );
+  });
+
+  it("génère correctement le fichier _main.scss pour les thèmes", () => {
+    const writeSpy = vi.spyOn(fs, "writeFileSync");
+    generateThemeIndexScssFile();
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("themes/_main.scss"),
+      expect.stringContaining('@forward "bleu-iceberg-light";'),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("themes/_main.scss"),
+      expect.stringContaining('@forward "vert-foret-dark";'),
+    );
+  });
+
+  it("génère correctement un fichier SCSS de typo", () => {
+    const typoTokens = [
+      {
+        collection: Collection.TYPOGRAPHY,
+        mode: "desktop",
+        variables: {
+          heading: {
+            xl: {
+              bold: {
+                main: { $type: "typography", $scopes: [], $value: "Type.desktop.heading.xl.bold.main" },
+              },
+            },
+          },
+        },
+      },
+    ];
+    const writeSpy = vi.spyOn(fs, "writeFileSync");
+    generateTokensScssFiles(typoTokens);
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_typography.scss"),
+      expect.stringContaining("$heading-xl-bold-main: $heading-xl-bold-main;"),
+    );
+  });
+
+  it("génère correctement un fichier SCSS d'opacité", () => {
+    const opacityTokens = [
+      {
+        collection: Collection.OPACITY,
+        mode: "",
+        variables: {
+          "80%": { $type: "opacity", $scopes: [], $value: 0.8 },
+          "50%": { $type: "opacity", $scopes: [], $value: 0.5 },
+        },
+      },
+    ];
+    const writeSpy = vi.spyOn(fs, "writeFileSync");
+    generateTokensScssFiles(opacityTokens);
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_opacity.scss"),
+      expect.stringContaining("$opacity-80: 80%;"),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_opacity.scss"),
+      expect.stringContaining("$opacity-50: 50%;"),
+    );
+  });
+
+  it("génère correctement un fichier SCSS de shadow", () => {
+    const shadowTokens = [
+      {
+        collection: Collection.SHADOWS,
+        mode: "",
+        variables: {
+          elevation: {
+            shadow1: { $type: "shadow", $scopes: [], $value: "0 1px 2px #00000033" },
+            shadow2: { $type: "shadow", $scopes: [], $value: "0 2px 4px #00000033" },
+          },
+        },
+      },
+    ];
+    const writeSpy = vi.spyOn(fs, "writeFileSync");
+    generateTokensScssFiles(shadowTokens);
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_shadows.scss"),
+      expect.stringContaining("$elevation-shadow1: 0 1px 2px #00000033;"),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_shadows.scss"),
+      expect.stringContaining("$elevation-shadow2: 0 2px 4px #00000033;"),
+    );
+  });
+
+  it("génère correctement un fichier SCSS de layout", () => {
+    const layoutTokens = [
+      {
+        collection: Collection.LAYOUT,
+        mode: "",
+        variables: {
+          spacing: {
+            sm: { $type: "layout", $scopes: [], $value: 8 },
+            md: { $type: "layout", $scopes: [], $value: 16 },
+          },
+          "column-number": {
+            default: { $type: "layout", $scopes: [], $value: 12 },
+          },
+        },
+      },
+    ];
+    const writeSpy = vi.spyOn(fs, "writeFileSync");
+    generateTokensScssFiles(layoutTokens);
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_layout.scss"),
+      expect.stringContaining("$spacing-sm: 8px;"),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_layout.scss"),
+      expect.stringContaining("$spacing-md: 16px;"),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_layout.scss"),
+      expect.stringContaining("$column-number-default: 12;"),
+    );
+  });
+
+  it("génère correctement un fichier SCSS pour le cas par défaut (DefaultToken)", () => {
+    const defaultTokens = [
+      {
+        collection: Collection.SPACING,
+        mode: "",
+        variables: {
+          space: {
+            sm: { $type: "spacing", $scopes: [], $value: 4 },
+            md: { $type: "spacing", $scopes: [], $value: 8 },
+          },
+        },
+      },
+    ];
+    const writeSpy = vi.spyOn(fs, "writeFileSync");
+    generateTokensScssFiles(defaultTokens);
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_spacing.scss"),
+      expect.stringContaining("$space-sm: 4px;"),
+    );
+    expect(writeSpy).toHaveBeenCalledWith(
+      expect.stringContaining("_spacing.scss"),
+      expect.stringContaining("$space-md: 8px;"),
+    );
+  });
+});

package/scripts/design-tokens/tokens-generator.ts

@@ -0,0 +1,155 @@
+import fs from "fs";
+import path from "path";
+
+import {
+  buildScssFileName,
+  buildScssVariable,
+  generateScssFile,
+  PrivacyLevel,
+  tokensOutputDir,
+  TokenValue,
+  UNIT,
+} from "./common";
+import {
+  ColorMode,
+  ColorToken,
+  extractColors,
+  generateThemeIndexScssFile,
+  generateThemesFile,
+} from "./tokens-generators/colors";
+import { extractLayout, LayoutToken } from "./tokens-generators/layout";
+import { extractOpacity, OpacityToken } from "./tokens-generators/opacity";
+import { extractShadows, ShadowToken } from "./tokens-generators/shadows";
+import { extractTypography, TypographyToken } from "./tokens-generators/typography";
+import { generateZIndexTokensFile } from "./tokens-generators/zIndex";
+
+export enum Collection {
+  COLORS = "Semantic : Colors",
+  TYPOGRAPHY = "Semantic : Type",
+  SPACING = "Spacing",
+  BORDER = "Border",
+  SHADOWS = "Shadows",
+  LAYOUT = "Layout",
+  OPACITY = "Opacity",
+  SIZE = "Size",
+}
+
+export const TokenPrivacyLevel: Record<Collection, PrivacyLevel> = {
+  [Collection.COLORS]: PrivacyLevel.PUBLIC,
+  [Collection.TYPOGRAPHY]: PrivacyLevel.PUBLIC,
+  [Collection.SPACING]: PrivacyLevel.PUBLIC,
+  [Collection.BORDER]: PrivacyLevel.PUBLIC,
+  [Collection.SHADOWS]: PrivacyLevel.PRIVATE,
+  [Collection.LAYOUT]: PrivacyLevel.PUBLIC,
+  [Collection.OPACITY]: PrivacyLevel.PUBLIC,
+  [Collection.SIZE]: PrivacyLevel.PRIVATE,
+};
+
+export interface DefaultToken {
+  [category: string]: {
+    [subCategory: string]: TokenValue;
+  };
+}
+
+export type TokenVariables = TypographyToken | ShadowToken | LayoutToken | DefaultToken | OpacityToken | ColorToken;
+
+export interface TokenItem {
+  collection: Collection;
+  mode: string | ColorMode;
+  variables: TokenVariables;
+}
+
+if (!fs.existsSync(tokensOutputDir)) {
+  fs.mkdirSync(tokensOutputDir);
+}
+
+export function generateTokensScssFiles(json: TokenItem[]): void {
+  for (const tokenItem of json) {
+    let scss = `// This file is auto-generated. Do not edit directly.\n\n`;
+    let filename = "";
+    switch (tokenItem.collection) {
+      case Collection.COLORS:
+        {
+          const mode = tokenItem.mode as ColorMode;
+          filename = buildScssFileName(mode);
+          const filePath = path.join(tokensOutputDir, TokenPrivacyLevel[Collection.COLORS], "themes", "base", filename);
+          scss += extractColors(tokenItem.variables as ColorToken, mode);
+          generateScssFile(scss, filePath);
+        }
+        break;
+
+      case Collection.TYPOGRAPHY:
+        if (tokenItem.mode === "desktop") {
+          console.log(" ☑️ Typography");
+          filename = `_typography.scss`;
+          const filePath = path.join(tokensOutputDir, TokenPrivacyLevel[Collection.TYPOGRAPHY], filename);
+
+          scss += extractTypography(tokenItem.variables as TypographyToken);
+          generateScssFile(scss, filePath);
+        } else {
+          console.log(" 🚫 Skipping typography for mode " + tokenItem.mode);
+        }
+        break;
+
+      case Collection.OPACITY:
+        {
+          console.log(" ☑️ Opacity");
+          filename = buildScssFileName(tokenItem.collection);
+          const filePath = path.join(tokensOutputDir, TokenPrivacyLevel[Collection.OPACITY], filename);
+
+          scss += extractOpacity(tokenItem.variables as OpacityToken, tokenItem.collection);
+          generateScssFile(scss, filePath);
+        }
+        break;
+
+      case Collection.SHADOWS:
+        {
+          console.log(" ☑️ Shadows");
+          filename = buildScssFileName(tokenItem.collection);
+          const filePath = path.join(tokensOutputDir, TokenPrivacyLevel[Collection.SHADOWS], filename);
+
+          scss += extractShadows(tokenItem.variables as ShadowToken);
+          generateScssFile(scss, filePath);
+        }
+        break;
+
+      case Collection.LAYOUT:
+        {
+          console.log(" ☑️ Layout");
+          filename = buildScssFileName(tokenItem.collection);
+          const filePath = path.join(tokensOutputDir, TokenPrivacyLevel[Collection.LAYOUT], filename);
+
+          scss += extractLayout(tokenItem.variables as LayoutToken);
+          generateScssFile(scss, filePath);
+        }
+        break;
+
+      default:
+        {
+          console.log(` ☑️ ${tokenItem.collection}`);
+          filename = buildScssFileName(tokenItem.collection);
+          const filePath = path.join(tokensOutputDir, TokenPrivacyLevel[tokenItem.collection], filename);
+
+          scss += extractDefault(tokenItem.variables as DefaultToken);
+          generateScssFile(scss, filePath);
+        }
+        break;
+    }
+  }
+
+  generateZIndexTokensFile();
+  generateThemesFile();
+  generateThemeIndexScssFile();
+  console.log(" ☑️ Themes");
+}
+
+function extractDefault(variables: DefaultToken): string {
+  let scss = "";
+  for (const category in variables) {
+    for (const subCategory in variables[category]) {
+      const token = variables[category][subCategory];
+      scss += buildScssVariable([category, subCategory], `${token.$value}${UNIT}`);
+    }
+  }
+  return scss;
+}

package/scripts/design-tokens/tokens-generators/colors.ts

@@ -0,0 +1,142 @@
+import path from "path";
+
+import { generateScssFile, INDENT, PrivacyLevel, tokensOutputDir } from "../common";
+
+export enum ColorTheme {
+  BLEU_ICEBERG = "bleu-iceberg",
+  VIOLET = "violet",
+  VERT_FORET = "vert-foret",
+}
+
+export enum ColorMode {
+  BLEU_ICEBERG_LIGHT = "bleu-iceberg-light",
+  BLEU_ICEBERG_DARK = "bleu-iceberg-dark",
+  VIOLET_LIGHT = "violet-light",
+  VIOLET_DARK = "violet-dark",
+  VERT_FORET_LIGHT = "vert-foret-light",
+  VERT_FORET_DARK = "vert-foret-dark",
+}
+
+export interface ColorTokenValue {
+  $type: string;
+  $scopes: string[];
+  $value: string;
+}
+
+export interface ColorToken {
+  [category: string]:
+    | {
+        [colorTokenName: string]: ColorTokenValue;
+      }
+    | ColorTokenValue;
+}
+
+const rawColorCategories = ["gradient", "elevation"];
+
+export function extractColors(variables: ColorToken, mode: ColorMode): string {
+  let scss = `@use '../../../../primitives/colors' as *;\n`;
+  scss += `@use '../../../../primitives/devColors' as *;\n\n`;
+  scss += `$${mode}: (\n`;
+  for (const category in variables) {
+    const categoryTokens = variables[category];
+    if ((categoryTokens as ColorTokenValue).$value) {
+      const sanitizedCategory = category.replace(/ /g, "-");
+      scss += extractTokenValue(categoryTokens as ColorTokenValue, mode, [sanitizedCategory]);
+    } else {
+      scss += processSubTokens(categoryTokens as Record<string, ColorTokenValue>, mode, category, [category]);
+    }
+  }
+  scss += addDevColors(mode);
+  scss += ");\n";
+  return scss;
+}
+
+export function generateThemeIndexScssFile() {
+  let scss = "";
+  Object.values(ColorMode).forEach((mode) => {
+    scss += `@forward "${mode}";\n`;
+  });
+  const pathFile = path.join(tokensOutputDir, PrivacyLevel.PUBLIC, "themes", "base", "_index.scss");
+  generateScssFile(scss, pathFile);
+}
+
+export function generateThemesFile() {
+  let scss = `// This file is auto-generated. Do not edit directly.\n\n`;
+  scss += `@use 'base' as *;\n\n`;
+  Object.values(ColorTheme).forEach((theme) => {
+    scss += `$${theme}: (\n`;
+    scss += `${INDENT.repeat(1)}"light": $${theme}-light,\n`;
+    scss += `${INDENT.repeat(1)}"dark": $${theme}-dark,\n`;
+    scss += `);\n`;
+  });
+
+  scss += `\n$themes: (\n`;
+  Object.values(ColorTheme).forEach((theme) => {
+    scss += `${INDENT.repeat(1)}"${theme.replace(/-/g, "_")}": $${theme},\n`;
+  });
+  scss += `);`;
+
+  const filePath = path.join(tokensOutputDir, PrivacyLevel.PUBLIC, "themes", "_index.scss");
+  generateScssFile(scss, filePath);
+}
+
+function extractTokenValue(token: ColorTokenValue, mode: ColorMode, path: string[]): string {
+  const tokenValue = buildColorsScssVariableValue(token.$value, mode);
+  if (rawColorCategories.includes(path[0])) {
+    return buildColorScssVariable(path, `${tokenValue}`);
+  } else {
+    return buildColorScssVariable(path, `$${tokenValue}`);
+  }
+}
+
+function processSubTokens(
+  tokens: Record<string, ColorTokenValue>,
+  mode: ColorMode,
+  category: string,
+  path: string[] = [],
+): string {
+  let scss = "";
+  for (const subCategory in tokens) {
+    const token = tokens[subCategory];
+    if (token.$value) {
+      scss += extractTokenValue(token, mode, [...path, subCategory]);
+    } else {
+      scss += processSubTokens(token as unknown as Record<string, ColorTokenValue>, mode, category, [
+        ...path,
+        subCategory,
+      ]);
+    }
+  }
+  return scss;
+}
+
+function buildColorScssVariable(variableName: string[], value: string): string {
+  return `${INDENT.repeat(1)}"${variableName.join("-")}": ${value},\n`.toLowerCase();
+}
+
+function buildColorsScssVariableValue(rawValue: string, mode: ColorMode): string {
+  const value = rawValue.split(`.${mode}.`)[1];
+  return value ? value.replace(/\./g, "-") : rawValue;
+}
+
+function addDevColors(mode: ColorMode): string {
+  const isLightMode = mode.includes("light");
+  let scss = "";
+  if (isLightMode) {
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-brand-hover-opacity-20": $${mode.replace("-light", "")}-700-opacity-20,\n`;
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-danger-hover-opacity-20": $rouge-indications-700-opacity-20,\n`;
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-hover-opacity-50": $greyscale-50-opacity-50,\n`;
+  } else {
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-brand-hover-opacity-20": $${mode.replace("-dark", "")}-200-opacity-20,\n`;
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-danger-hover-opacity-20": $rouge-indications-500-opacity-20,\n`;
+    scss += `${INDENT.repeat(1)}// TODO remove this color (not a real token)\n`;
+    scss += `${INDENT.repeat(1)}"background-hover-opacity-50": $greyscale-800-opacity-50,\n`;
+  }
+
+  return scss;
+}

package/scripts/design-tokens/tokens-generators/layout.ts

@@ -0,0 +1,22 @@
+import { buildScssVariable, TokenValue, UNIT } from "../common";
+
+export interface LayoutToken {
+  [category: string]: {
+    [size: string]: TokenValue;
+  };
+}
+
+export function extractLayout(variables: LayoutToken): string {
+  let scss = "";
+  for (const category in variables) {
+    for (const size in variables[category]) {
+      const layoutToken = variables[category][size];
+      if (category === "column-number") {
+        scss += buildScssVariable([category, size], String(layoutToken.$value));
+      } else {
+        scss += buildScssVariable([category, size], `${layoutToken.$value}${UNIT}`);
+      }
+    }
+  }
+  return scss;
+}

package/scripts/design-tokens/tokens-generators/opacity.ts

@@ -0,0 +1,14 @@
+import { buildScssVariable, TokenValue } from "../common";
+
+export interface OpacityToken {
+  [percentage: string]: TokenValue;
+}
+
+export function extractOpacity(variables: OpacityToken, collection: string): string {
+  let scss = "";
+  for (const percentage in variables) {
+    const value = percentage.replace(/%$/, "");
+    scss += buildScssVariable([collection, value], percentage);
+  }
+  return scss;
+}

package/scripts/design-tokens/tokens-generators/shadows.ts

@@ -0,0 +1,18 @@
+import { buildScssVariable, TokenValue, UNIT } from "../common";
+
+export interface ShadowToken {
+  [category: string]: {
+    [shadowTokenName: string]: TokenValue;
+  };
+}
+
+export function extractShadows(variables: ShadowToken): string {
+  let scss = "";
+  for (const category in variables) {
+    for (const shadowTokenName in variables[category]) {
+      const shadowToken = variables[category][shadowTokenName];
+      scss += buildScssVariable([category, shadowTokenName], `${String(shadowToken.$value)}${UNIT}`);
+    }
+  }
+  return scss;
+}

package/scripts/design-tokens/tokens-generators/typography.ts

@@ -0,0 +1,58 @@
+import { buildScssVariable, TokenValue } from "../common";
+
+export interface TypographyToken {
+  [category: string]: {
+    [size: string]: {
+      [weight: string]: {
+        [typographyTokenName: string]: TokenValue;
+      };
+    };
+  };
+}
+
+export function extractTypography(variables: TypographyToken): string {
+  let scss = "";
+  scss += `@use '../../primitives/typography' as *;\n\n`;
+  for (const category in variables) {
+    scss += extractFromTypographyCategory(category, variables[category]);
+  }
+  return scss;
+}
+
+function extractFromTypographyCategory(category: string, categoryObj: TypographyToken[string]): string {
+  let scss = "";
+  for (const size in categoryObj) {
+    scss += extractFromTypographySize(category, size, categoryObj[size]);
+  }
+  return scss;
+}
+
+function extractFromTypographySize(category: string, size: string, sizeObj: TypographyToken[string][string]): string {
+  let scss = "";
+  for (const weight in sizeObj) {
+    scss += extractFromTypographyWeight(category, size, weight, sizeObj[weight]);
+  }
+  return scss;
+}
+
+function extractFromTypographyWeight(
+  category: string,
+  size: string,
+  weight: string,
+  weightObj: TypographyToken[string][string][string],
+): string {
+  let scss = "";
+  for (const typographyTokenName in weightObj) {
+    const typographyToken = weightObj[typographyTokenName];
+    const rawTypographyTokenValue =
+      typeof typographyToken.$value === "string"
+        ? typographyToken.$value.split("Type.desktop.")[1]
+        : typographyToken.$value;
+    const typographyTokenValue =
+      typeof rawTypographyTokenValue === "string"
+        ? rawTypographyTokenValue.replace(/\./g, "-")
+        : rawTypographyTokenValue;
+    scss += buildScssVariable([category, size, weight, typographyTokenName], `$${typographyTokenValue}`);
+  }
+  return scss;
+}

package/scripts/design-tokens/tokens-generators/zIndex.ts

@@ -0,0 +1,18 @@
+import path from "path";
+
+import { buildScssFileName, generateScssFile, PrivacyLevel, tokensOutputDir } from "../common";
+
+export function generateZIndexTokensFile() {
+  let scss = `// This file is auto-generated. Do not edit directly.\n\n`;
+
+  scss += `$level-0: 0;\n`;
+  scss += `$level-1: 10;\n`;
+  scss += `$level-2: 100;\n`;
+
+  const filename = buildScssFileName("zIndex");
+
+  const filePath = path.join(tokensOutputDir, PrivacyLevel.PRIVATE, filename);
+
+  generateScssFile(scss, filePath);
+  console.log(" ☑️ Z-Index");
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "jsx": "react",
+      "target": "es2019",
+      "module": "commonjs",
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true,
+      "strict": true
+    },
+    "exclude": ["node_modules"]
+}