@design-system-rte/core 1.2.1 → 1.2.2-rc1

package/components/toast/toast.utils.ts

@@ -1,33 +0,0 @@
-export const getToastPriority = (toast: {
-  hasActionButton: boolean;
-  type: "info" | "success" | "warning" | "error" | "neutral";
-}) => {
-  const { hasActionButton: hasButtonAction, type } = toast;
-  if (hasButtonAction) {
-    switch (type) {
-      case "error":
-        return 1;
-      case "warning":
-        return 3;
-      case "success":
-        return 5;
-      case "info":
-        return 6;
-      default:
-        return 7;
-    }
-  } else {
-    switch (type) {
-      case "error":
-        return 2;
-      case "warning":
-        return 4;
-      case "success":
-        return 8;
-      case "info":
-        return 9;
-      default:
-        return 10;
-    }
-  }
-};

package/components/tooltip/tooltip.utils.ts

@@ -1,5 +0,0 @@
-import { TOOLTIP_GAP, TOOLTIP_GAP_ARROW } from "@design-system-rte/core/components/tooltip/tooltip.constants";
-
-export function getTooltipGap(arrow: boolean, customGap: number = TOOLTIP_GAP): number {
-  return arrow ? TOOLTIP_GAP_ARROW + customGap : customGap;
-}

package/components/utils/auto-placement.ts

@@ -1,220 +0,0 @@
-import { Alignment, Position } from "../common/common-types";
-
-export const getAutoPlacement = (
-  hostElement: HTMLElement,
-  castedElement: Element,
-  defaultPosition: Exclude<Position, "auto">,
-  offset: number = 0,
-  hasParent: boolean = false,
-): Exclude<Position, "auto"> => {
-  let sides: Record<Exclude<Position, "auto">, boolean>;
-  const triggerRect = hostElement.getBoundingClientRect();
-  if (hasParent) {
-    const triggerParent = hostElement.parentElement;
-    if (!triggerParent) {
-      return defaultPosition;
-    }
-
-    const maxWidth = parseInt(getComputedStyle(castedElement).getPropertyValue("max-width"));
-    const maxHeight = parseInt(getComputedStyle(castedElement).getPropertyValue("max-height"));
-    const parentRect = triggerParent.getBoundingClientRect();
-    sides = {
-      top: triggerRect.top - parentRect.top > maxHeight + offset,
-      right: parentRect.right - triggerRect.right > maxWidth + offset,
-      bottom: parentRect.bottom - triggerRect.bottom >= maxHeight + offset,
-      left: triggerRect.left - parentRect.left > maxWidth + offset,
-    } as const;
-  } else {
-    const elementRect = castedElement.getBoundingClientRect();
-    sides = {
-      top: elementRect.height + offset < triggerRect.top,
-      right: elementRect.width + offset < window.innerWidth - triggerRect.right,
-      bottom: elementRect.height + offset < window.innerHeight - triggerRect.bottom,
-      left: elementRect.width + offset < triggerRect.left,
-    } as const;
-  }
-
-  if (sides.top) return "top";
-  if (sides.bottom) return "bottom";
-  if (sides.left) return "left";
-  if (sides.right) return "right";
-
-  return defaultPosition;
-};
-
-export const getAutoPlacementDropdown = (
-  hostElement: HTMLElement,
-  castedElement: Element,
-  defaultPosition: Exclude<Position, "auto">,
-  offset: number = 0,
-  hasDropdownParent: boolean = false,
-): Exclude<Position, "auto"> => {
-  const triggerRect = hostElement.getBoundingClientRect();
-  const elementRect = castedElement.getBoundingClientRect();
-  const sides = {
-    top: elementRect.height + offset < triggerRect.top,
-    right: elementRect.width + offset < window.innerWidth - triggerRect.right,
-    bottom: elementRect.height + offset < window.innerHeight - triggerRect.bottom,
-    left: elementRect.width + offset < triggerRect.left,
-  } as const;
-
-  if (hasDropdownParent) {
-    return getAutoPlacementDropdownWithParent(sides, defaultPosition);
-  }
-
-  return getAutoPlacementDropdownWithoutParent(sides, defaultPosition);
-};
-
-const getAutoPlacementDropdownWithParent = (
-  sides: Record<Exclude<Position, "auto">, boolean>,
-  defaultPosition: Exclude<Position, "auto">,
-) => {
-  if (sides.right) return "right";
-  if (sides.left) return "left";
-  if (sides.bottom) return "bottom";
-  if (sides.top) return "top";
-
-  return defaultPosition;
-};
-
-const getAutoPlacementDropdownWithoutParent = (
-  sides: Record<Exclude<Position, "auto">, boolean>,
-  defaultPosition: Exclude<Position, "auto">,
-) => {
-  if (sides.bottom) return "bottom";
-  if (sides.right) return "right";
-  if (sides.left) return "left";
-  if (sides.top) return "top";
-
-  return defaultPosition;
-};
-
-export const getAutoAlignment = (
-  hostElement: HTMLElement,
-  castedElement: Element,
-  position: Exclude<Position, "auto">,
-) => {
-  const defaultPosition = "center";
-  const triggerParent = hostElement.parentElement;
-  if (!triggerParent) {
-    return defaultPosition;
-  }
-  const triggerRect = hostElement.getBoundingClientRect();
-  const castedRect = castedElement.getBoundingClientRect();
-
-  const alignments = {
-    end:
-      position === "top" || position === "bottom"
-        ? triggerRect.right >= castedRect.width
-        : window.innerHeight - triggerRect.bottom >= castedRect.height,
-    start:
-      position === "top" || position === "bottom"
-        ? window.innerWidth - triggerRect.left >= castedRect.width
-        : window.innerHeight - triggerRect.top >= castedRect.height,
-  } as const;
-  if (alignments.start) return "start";
-  if (alignments.end) return "end";
-  return defaultPosition;
-};
-
-export const getCoordinates = (
-  position: Exclude<Position, "auto">,
-  triggerElement: HTMLElement,
-  castedElement: HTMLElement,
-  offset: number = 0,
-  alignment: Alignment = "center",
-) => {
-  const triggerElementRect = triggerElement.getBoundingClientRect();
-  const castedElementRect = castedElement.getBoundingClientRect();
-
-  if (position === "bottom") {
-    return handleBottomPosition(triggerElementRect, castedElementRect, offset, alignment);
-  } else if (position === "left") {
-    return handleLeftPosition(triggerElementRect, castedElementRect, offset, alignment);
-  } else if (position === "right") {
-    return handleRightPosition(triggerElementRect, castedElementRect, offset, alignment);
-  } else {
-    return handleTopPosition(triggerElementRect, castedElementRect, offset, alignment);
-  }
-};
-
-const handleBottomPosition = (
-  triggerElementRect: DOMRect,
-  castedElementRect: DOMRect,
-  offset: number,
-  alignment: Alignment,
-) => {
-  const top = triggerElementRect.bottom + offset + window.scrollY;
-  let left = 0;
-
-  if (alignment === "start") {
-    left = triggerElementRect.left + window.scrollX;
-  } else if (alignment === "end") {
-    left = triggerElementRect.right - castedElementRect.width + window.scrollX;
-  } else {
-    left = triggerElementRect.left + triggerElementRect.width / 2 - castedElementRect.width / 2 + window.scrollX;
-  }
-
-  return { top, left };
-};
-
-const handleLeftPosition = (
-  triggerElementRect: DOMRect,
-  castedElementRect: DOMRect,
-  offset: number,
-  alignment: Alignment,
-) => {
-  const left = triggerElementRect.left - castedElementRect.width - offset + window.scrollX;
-  let top = 0;
-
-  if (alignment === "start") {
-    top = triggerElementRect.top + window.scrollY;
-  } else if (alignment === "end") {
-    top = triggerElementRect.bottom - castedElementRect.height + window.scrollY;
-  } else {
-    top = triggerElementRect.top + triggerElementRect.height / 2 - castedElementRect.height / 2 + window.scrollY;
-  }
-
-  return { top, left };
-};
-
-const handleRightPosition = (
-  triggerElementRect: DOMRect,
-  castedElementRect: DOMRect,
-  offset: number,
-  alignment: Alignment,
-) => {
-  const left = triggerElementRect.right + offset + window.scrollX;
-  let top = 0;
-
-  if (alignment === "start") {
-    top = triggerElementRect.top + window.scrollY;
-  } else if (alignment === "end") {
-    top = triggerElementRect.bottom - castedElementRect.height + window.scrollY;
-  } else {
-    top = triggerElementRect.top + triggerElementRect.height / 2 - castedElementRect.height / 2 + window.scrollY;
-  }
-
-  return { top, left };
-};
-
-const handleTopPosition = (
-  triggerElementRect: DOMRect,
-  castedElementRect: DOMRect,
-  offset: number,
-  alignment: Alignment,
-) => {
-  const top = triggerElementRect.top - castedElementRect.height - offset + window.scrollY;
-
-  let left = 0;
-
-  if (alignment === "start") {
-    left = triggerElementRect.left + window.scrollX;
-  } else if (alignment === "end") {
-    left = triggerElementRect.right - castedElementRect.width + window.scrollX;
-  } else {
-    left = triggerElementRect.left + triggerElementRect.width / 2 - castedElementRect.width / 2 + window.scrollX;
-  }
-
-  return { top, left };
-};

package/constants/dom/dom.constants.ts

@@ -1,13 +0,0 @@
-export const FOCUSABLE_ELEMENTS = [
-  "button",
-  "a[href]",
-  "input",
-  "select",
-  "textarea",
-  "details",
-  '[tabindex]:not([tabindex="-1"])',
-];
-
-export const FOCUSABLE_ELEMENTS_QUERY = FOCUSABLE_ELEMENTS.map(
-  (element) => element + ":not([disabled]):not([aria-hidden])",
-).join(",");

package/css-font-generator.ts

@@ -1,51 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-import sass from "sass";
-
-const outputDir = path.resolve(__dirname, "css");
-
-if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir);
-}
-
-const fontFile = `
-    @font-face {
-  font-display: swap;
-  font-family: 'Nunito';
-  font-style: normal;
-  font-weight: 300;
-  src: url('@design-system-rte/core/assets/fonts/nunito-light-300.woff2') format('woff2');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Nunito';
-  font-style: normal;
-  font-weight: 400;
-  src: url('@design-system-rte/core/assets/fonts/nunito-regular-400.woff2') format('woff2');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Nunito';
-  font-style: normal;
-  font-weight: 600;
-  src: url('@design-system-rte/core/assets/fonts/nunito-semi-bold-600.woff2') format('woff2');
-}
-
-@font-face {
-  font-display: swap;
-  font-family: 'Nunito';
-  font-style: normal;
-  font-weight: 700;
-  src: url('@design-system-rte/core/assets/fonts/nunito-bold-700.woff2') format('woff2');
-}
-`;
-
-const fontResult = sass.compileString(fontFile, {
-  loadPaths: [path.resolve(__dirname)],
-  style: "compressed",
-});
-
-fs.writeFileSync(path.join(outputDir, "rte-fonts.css"), fontResult.css);

package/eslint.config.js

@@ -1 +0,0 @@
-export { default } from "../../eslint.config.js";

package/scripts/design-tokens/common.ts

@@ -1,35 +0,0 @@
-import fs from "fs";
-import path, { resolve } from "path";
-
-export interface TokenValue {
-  $type: string;
-  $scopes: string[];
-  $value: string | number;
-}
-
-export const UNIT = "px";
-export const INDENT = " ".repeat(2);
-
-export enum PrivacyLevel {
-  PUBLIC = "public",
-  PRIVATE = "private",
-}
-
-const rootDir = path.join(resolve(__dirname), "../../design-tokens");
-const tokensDir = "tokens";
-const primitivesDir = "primitives";
-
-export const tokensOutputDir = path.join(rootDir, tokensDir);
-export const primitivesOutputDir = path.join(rootDir, primitivesDir);
-
-export function buildScssVariable(variableName: string[], value: string): string {
-  return `$${variableName.join("-")}: ${value};\n`.toLowerCase();
-}
-
-export function generateScssFile(scss: string, filePath: string) {
-  fs.writeFileSync(filePath, scss);
-}
-
-export function buildScssFileName(collection: string): string {
-  return `_${collection.toLowerCase()}.scss`;
-}

package/scripts/design-tokens/generator.ts

@@ -1,24 +0,0 @@
-import fs from "fs";
-import { resolve } from "path";
-
-import { generatePrimitivesScssFiles } from "./primitives-generator";
-import { generateTokensScssFiles, TokenItem } from "./tokens-generator";
-
-console.log("🔧 Generating design tokens...\n");
-
-const currentDir = resolve(__dirname);
-
-const inputPrimitivesSource = resolve(currentDir, "sourceFiles/primitives.json");
-const inputTokensSource = resolve(currentDir, "sourceFiles/tokens.json");
-
-const rawPrimitives = JSON.parse(fs.readFileSync(inputPrimitivesSource, "utf8"));
-console.log("📦 Generating primitives... ");
-generatePrimitivesScssFiles(rawPrimitives);
-console.log("✅ Primitives generated successfully.\n");
-
-const rawTokens: TokenItem[] = JSON.parse(fs.readFileSync(inputTokensSource, "utf8"));
-console.log("📦 Generating tokens... ");
-generateTokensScssFiles(rawTokens);
-console.log("✅ Tokens generated successfully.\n");
-
-console.log("✅ All design tokens generated successfully. ");

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

@@ -1,84 +0,0 @@
-import fs from "fs";
-
-import { describe, it, expect, vi, beforeEach } from "vitest";
-
-import { Collection, generatePrimitivesScssFiles } from "./primitives-generator";
-
-vi.mock("fs");
-
-describe("primitives-generator", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("génère correctement les variables SCSS pour les couleurs", () => {
-    const colorCollection = [
-      {
-        collection: Collection.COLORS,
-        variables: {
-          bleu: {
-            100: { $value: "#abcdef" },
-            200: { $value: "#123456" },
-          },
-          rouge: {
-            500: { $value: "#ff0000" },
-          },
-        },
-      },
-    ];
-
-    const writeSpy = vi.spyOn(fs, "writeFileSync");
-
-    vi.spyOn(fs, "existsSync").mockReturnValue(true);
-
-    vi.spyOn(fs, "readFileSync").mockReturnValue(colorCollection.toString());
-
-    generatePrimitivesScssFiles(colorCollection);
-
-    expect(writeSpy).toHaveBeenCalledWith(
-      expect.stringContaining("_colors.scss"),
-      expect.stringContaining("$bleu-100: #abcdef;"),
-    );
-    expect(writeSpy).toHaveBeenCalledWith(
-      expect.stringContaining("_colors.scss"),
-      expect.stringContaining("$rouge-500: #ff0000;"),
-    );
-  });
-
-  it("génère correctement les variables SCSS pour la typo", () => {
-    const typoCollection = [
-      {
-        collection: Collection.TYPOGRAPHY,
-        variables: {
-          "font-weight": {
-            bold: { $value: "700" },
-          },
-          "font-family": {
-            main: { $value: "Nunito" },
-          },
-          "font-size": {
-            small: { $value: "12" },
-          },
-        },
-      },
-    ];
-
-    const writeSpy = vi.spyOn(fs, "writeFileSync");
-    vi.spyOn(fs, "existsSync").mockReturnValue(true);
-
-    generatePrimitivesScssFiles(typoCollection);
-
-    expect(writeSpy).toHaveBeenCalledWith(
-      expect.stringContaining("_typography.scss"),
-      expect.stringContaining("$font-weight-bold: 700;"),
-    );
-    expect(writeSpy).toHaveBeenCalledWith(
-      expect.stringContaining("_typography.scss"),
-      expect.stringContaining('$font-family-main: "Nunito";'),
-    );
-    expect(writeSpy).toHaveBeenCalledWith(
-      expect.stringContaining("_typography.scss"),
-      expect.stringContaining("$font-size-small: 12px;"),
-    );
-  });
-});

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

@@ -1,66 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-import { generateScssFile, primitivesOutputDir, UNIT } from "./common";
-
-export enum Collection {
-  COLORS = "Primitive : Colors",
-  TYPOGRAPHY = "Primitive : Type",
-}
-
-interface CollectionItem {
-  collection: Collection;
-  variables: Record<string, Record<string, { $value: string }>>;
-}
-
-if (!fs.existsSync(primitivesOutputDir)) {
-  fs.mkdirSync(primitivesOutputDir);
-}
-
-export function generatePrimitivesScssFiles(json: CollectionItem[]) {
-  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:
-        filename = "_colors.scss";
-        scss += extractColors(tokenItem);
-        generateScssFile(scss, path.join(primitivesOutputDir, filename));
-        break;
-
-      case Collection.TYPOGRAPHY:
-        filename = "_typography.scss";
-        scss += extractTypography(tokenItem);
-        generateScssFile(scss, path.join(primitivesOutputDir, filename));
-        break;
-    }
-  }
-}
-
-function extractColors(colorCollection: CollectionItem): string {
-  let scss = "";
-  for (const color in colorCollection.variables) {
-    for (const colorValue in colorCollection.variables[color]) {
-      const colorVariable = colorCollection.variables[color][colorValue];
-      scss += `$${color}-${colorValue}: ${colorVariable.$value};\n`.toLowerCase();
-    }
-  }
-  return scss;
-}
-
-function extractTypography(typographyCollection: CollectionItem): string {
-  let scss = "";
-  for (const category in typographyCollection.variables) {
-    for (const subCategory in typographyCollection.variables[category]) {
-      const typographyVariable = typographyCollection.variables[category][subCategory];
-      if (category === "font-weight") {
-        scss += `$${category}-${subCategory}: ${typographyVariable.$value};\n`.toLowerCase();
-      } else if (category === "font-family") {
-        scss += `$${category}-${subCategory}: "${typographyVariable.$value}";\n`;
-      } else {
-        scss += `$${category}-${subCategory}: ${typographyVariable.$value}${UNIT};\n`.toLowerCase();
-      }
-    }
-  }
-  return scss;
-}