@donglegeyu/company-ui 1.2.5 → 1.2.6

package/dist/cjs/shared-components/AccessibilityChecker/index.d.ts

@@ -0,0 +1,7 @@
+import './index.scss';
+interface AccessibilityCheckerProps {
+    tokenName: string;
+    color: string;
+}
+export default function AccessibilityChecker({ tokenName, color }: AccessibilityCheckerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/shared-components/AccessibilityChecker/index.js

@@ -0,0 +1,171 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/shared-components/AccessibilityChecker/index.tsx
+var AccessibilityChecker_exports = {};
+__export(AccessibilityChecker_exports, {
+  default: () => AccessibilityChecker
+});
+module.exports = __toCommonJS(AccessibilityChecker_exports);
+var import_react = require("react");
+var import_basic_components = require("../../basic-components");
+var import_index = require("./index.scss");
+var import_jsx_runtime = require("react/jsx-runtime");
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+function getLuminance(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    c = c / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getContrastRatio(color1, color2) {
+  const rgb1 = hexToRgb(color1);
+  const rgb2 = hexToRgb(color2);
+  if (!rgb1 || !rgb2)
+    return 0;
+  const l1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
+  const l2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function getWcagLevel(ratio) {
+  if (ratio >= 7)
+    return "AAA";
+  if (ratio >= 4.5)
+    return "AA";
+  if (ratio >= 3)
+    return "AA (large & UI)";
+  return "Fail";
+}
+function sRGBtoY(sRGB) {
+  if (sRGB <= 0.04045)
+    return sRGB / 12.92;
+  return Math.pow((sRGB + 0.055) / 1.055, 2.4);
+}
+function getLuminanceApca(r, g, b) {
+  const rY = sRGBtoY(r / 255) * 0.2126729;
+  const gY = sRGBtoY(g / 255) * 0.7151522;
+  const bY = sRGBtoY(b / 255) * 0.072175;
+  return rY + gY + bY;
+}
+function getApcaContrast(txtColor, bgColor) {
+  const txtRgb = hexToRgb(txtColor);
+  const bgRgb = hexToRgb(bgColor);
+  if (!txtRgb || !bgRgb)
+    return 0;
+  const txtY = getLuminanceApca(txtRgb.r, txtRgb.g, txtRgb.b);
+  const bgY = getLuminanceApca(bgRgb.r, bgRgb.g, bgRgb.b);
+  const normBG = Math.pow(bgY, 0.56);
+  const normTXT = Math.pow(txtY, 0.57);
+  if (bgY > txtY)
+    return (normBG - normTXT) * 1.14 * 100;
+  else
+    return (normTXT - normBG) * 1.14 * 100 * -1;
+}
+function getApcaLevel(value) {
+  const absValue = Math.abs(value);
+  if (absValue >= 90)
+    return "Ok for text";
+  if (absValue >= 75)
+    return "Ok for large text";
+  if (absValue >= 60)
+    return "Ok for UI";
+  return "Not recommended";
+}
+function getResultStyle(level) {
+  if (level === "Fail" || level === "Not recommended") {
+    return { backgroundColor: "#FFF2F0" };
+  }
+  return { backgroundColor: "#F6FFED" };
+}
+function AccessibilityChecker({ tokenName, color }) {
+  const [compareColor, setCompareColor] = (0, import_react.useState)("white");
+  const colorMap = {
+    white: "#ffffff",
+    black: "#000000"
+  };
+  const results = (0, import_react.useMemo)(() => {
+    if (!color)
+      return null;
+    const bgColor = colorMap[compareColor] || "#ffffff";
+    const textOnWhite = getApcaContrast(color, bgColor);
+    const bgOnWhite = getApcaContrast(bgColor, color);
+    const wcagRatio = getContrastRatio(color, bgColor);
+    return {
+      textOnWhite: { value: textOnWhite, level: getApcaLevel(textOnWhite) },
+      bgOnWhite: { value: bgOnWhite, level: getApcaLevel(bgOnWhite) },
+      wcag: { value: wcagRatio, level: getWcagLevel(wcagRatio) }
+    };
+  }, [color, compareColor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "accessibility-checker", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "checker-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "checker-label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: tokenName }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "vs-text", children: "vs." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_basic_components.CompanySelect,
+        {
+          value: compareColor,
+          onChange: setCompareColor,
+          style: { width: 160 },
+          options: [
+            { label: "--color-white", value: "white" },
+            { label: "--color-black", value: "black" }
+          ]
+        }
+      )
+    ] }) }),
+    results && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "checker-results", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "checker-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "checker-box", style: { backgroundColor: "#ffffff", color }, children: "APCA" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "checker-result", style: getResultStyle(results.textOnWhite.level), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "value", children: results.textOnWhite.value.toFixed(0) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "separator", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "level", children: results.textOnWhite.level })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "checker-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "checker-box", style: { backgroundColor: color, color: "#ffffff" }, children: "APCA" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "checker-result", style: getResultStyle(results.bgOnWhite.level), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "value", children: results.bgOnWhite.value.toFixed(0) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "separator", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "level", children: results.bgOnWhite.level })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "checker-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "checker-box", style: { backgroundColor: "#ffffff", color }, children: "WCAG" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "checker-result", style: getResultStyle(results.wcag.level), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "value", children: [
+            results.wcag.value.toFixed(2),
+            ":1"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "separator", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "level", children: results.wcag.level })
+        ] })
+      ] })
+    ] })
+  ] });
+}

package/dist/cjs/shared-components/AccessibilityChecker/index.scss

@@ -0,0 +1,60 @@
+.accessibility-checker {
+  width: 100%;
+}
+
+.checker-row {
+  margin-bottom: 12px;
+}
+
+.checker-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: #1D2129;
+
+  .vs-text {
+    margin: 0 8px;
+    color: #1D2129;
+  }
+}
+
+.checker-results {
+  display: flex;
+  gap: 10px;
+  width: 560px;
+}
+
+.checker-item {
+  flex: 1;
+}
+
+.checker-box {
+  width: 100%;
+  height: 138px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  border-radius: 6px;
+  border: 1px solid #f0f0f0;
+}
+
+.checker-result {
+  height: 69px;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  margin-top: 8px;
+  font-size: 13px;
+
+  .value {
+    font-weight: 600;
+  }
+
+  .separator {
+    margin: 0 4px;
+  }
+}

package/dist/cjs/shared-components/ColorScale/index.d.ts

@@ -0,0 +1,21 @@
+import './index.scss';
+interface ColorScaleProps {
+    label?: string;
+    baseColor?: string;
+    colors?: string[];
+    customColors?: (string | undefined)[];
+    highlightIndex?: number;
+    tokenPrefix?: string;
+    selectedIndex?: number | null;
+    selectedGroupKey?: string;
+    hideHeader?: boolean;
+    hideBase?: boolean;
+    onSelect?: (payload: {
+        index: number;
+        color: string;
+        tokenName: string;
+        groupKey: string;
+    }) => void;
+}
+export default function ColorScale({ label, baseColor, colors, customColors, highlightIndex, tokenPrefix, selectedIndex, selectedGroupKey, hideHeader, hideBase, onSelect, }: ColorScaleProps): import("react/jsx-runtime").JSX.Element;
+export {};