@rte-ds/core 1.2.1 → 1.2.2

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

@@ -1,184 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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