@rango-dev/widget-embedded 0.23.1-next.16 → 0.23.1-next.18

package/src/utils/colors.ts

@@ -1,68 +1,113 @@
 import type { WidgetColors, WidgetColorsKeys } from '../types';
 
-export const colorShade = (col: string, amt: number) => {
-  const RANGE = 255;
-  const COL = 3;
-  const RADIX = 16;
-
-  col = col.replace(/^#/, '');
-  if (col.length === COL) {
-    col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
-  }
-  let [r, g, b]: any = col.match(/.{2}/g);
-  [r, g, b] = [
-    parseInt(r, RADIX) + amt,
-    parseInt(g, RADIX) + amt,
-    parseInt(b, RADIX) + amt,
-  ];
-
-  r = Math.max(Math.min(RANGE, r), 0).toString(RADIX);
-  g = Math.max(Math.min(RANGE, g), 0).toString(RADIX);
-  b = Math.max(Math.min(RANGE, b), 0).toString(RADIX);
-
-  const rr = (r.length < 2 ? '0' : '') + r;
-  const gg = (g.length < 2 ? '0' : '') + g;
-  const bb = (b.length < 2 ? '0' : '') + b;
-
-  return `#${rr}${gg}${bb}`;
-};
+export function generateShades(
+  baseColor: string,
+  prefix: string,
+  reverse?: boolean
+): { [key: string]: string } {
+  const BASE_SHADE_INDEX = 100;
+  const NUMBER_OF_COLORS = 9;
+  const SHADING_INCREMENT_MAX = 10; // For bright colors
+  const SHADING_INCREMENT_MIN = 6; // For dark colors
 
-export const generateRangeColors = (name: string, color: string) => {
-  const NUMBER_OF_COLORS = 10;
-  const HALF_NUMBER_OF_COLORS = 5;
-  const COLOR_SUFFIX = 100;
-  const AMT = 25;
-
-  let colors = { [name]: color };
-  for (let i = 1; i < NUMBER_OF_COLORS; i++) {
-    if (i < HALF_NUMBER_OF_COLORS) {
-      colors = {
-        ...colors,
-        [name + i * COLOR_SUFFIX]: colorShade(
-          color,
-          (HALF_NUMBER_OF_COLORS - i) * AMT
-        ),
-      };
-    }
-    if (i === HALF_NUMBER_OF_COLORS) {
-      colors = {
-        ...colors,
-        [name + i * COLOR_SUFFIX]: color,
-      };
-    }
-    if (i > HALF_NUMBER_OF_COLORS) {
-      colors = {
-        ...colors,
-        [name + i * COLOR_SUFFIX]: colorShade(
-          color,
-          -((i - HALF_NUMBER_OF_COLORS) * AMT)
-        ),
-      };
+  const HALF_NUMBER_OF_COLORS = 4;
+
+  const shadeIncrements: number[] = [];
+  let increment = 90;
+  for (let i = 0; i < NUMBER_OF_COLORS; i++) {
+    shadeIncrements.push(increment);
+    if (i + 1 === HALF_NUMBER_OF_COLORS) {
+      increment = 0;
+    } else {
+      increment -=
+        i >= HALF_NUMBER_OF_COLORS
+          ? SHADING_INCREMENT_MIN
+          : SHADING_INCREMENT_MAX;
     }
   }
 
-  return colors;
-};
+  // If 'reverse' is true, that means the color should be from dark to light
+  const decrementAmounts = reverse
+    ? shadeIncrements.slice().reverse()
+    : shadeIncrements;
+
+  const shades: { [key: string]: string } = {};
+
+  // Generate shades
+  for (let i = 0; i < NUMBER_OF_COLORS; i++) {
+    const shadeIndex = BASE_SHADE_INDEX + i * BASE_SHADE_INDEX;
+    const decrementAmount = decrementAmounts[i];
+
+    const shade: { [key: string]: string } = {
+      [`${prefix}${shadeIndex}`]: generateShade(baseColor, decrementAmount),
+    };
+    Object.assign(shades, shade);
+  }
+
+  return { ...shades, [prefix]: baseColor };
+}
+
+export function generateShade(
+  baseColor: string,
+  decrementAmount: number
+): string {
+  const [r, g, b] = convertToRGB(baseColor);
+  return `#${clamp(r + decrementAmount)}${clamp(g + decrementAmount)}${clamp(
+    b + decrementAmount
+  )}`;
+}
+
+export function convertToRGB(baseColor: string): number[] {
+  const COLOR_SLICE_START = 1;
+  const COLOR_SLICE_END = 3;
+  const BASE_COLOR_LENGTH = 7;
+
+  // Convert the base color to RGB components
+  const r: number = parseInt(
+    baseColor.slice(COLOR_SLICE_START, COLOR_SLICE_END),
+    16
+  );
+  const g: number = parseInt(
+    baseColor.slice(COLOR_SLICE_END, COLOR_SLICE_END + 2),
+    16
+  );
+  const b: number = parseInt(
+    baseColor.slice(COLOR_SLICE_END + 2, BASE_COLOR_LENGTH),
+    16
+  );
+
+  return [r, g, b];
+}
+
+// Function to clamp color component to valid range [0, 255] and convert to hex
+function clamp(color: number): string {
+  const MAX_COLOR_VALUE = 255;
+  const HEX_BASE = 16;
+  const HEX_LENGTH = -2;
+  return (
+    '0' + Math.max(0, Math.min(MAX_COLOR_VALUE, color)).toString(HEX_BASE)
+  )
+    .slice(HEX_LENGTH)
+    .toUpperCase();
+}
+
+export function isBright(baseColor: string) {
+  const BRIGHTNESS_THRESHOLD = 188;
+  const RED_COEFFICIENT = 299;
+  const GREEN_COEFFICIENT = 587;
+  const BLUE_COEFFICIENT = 114;
+  const BRIGHTNESS_DIVISOR = 1000;
+
+  const [r, g, b] = convertToRGB(baseColor);
+  const brightness =
+    (r * RED_COEFFICIENT + g * GREEN_COEFFICIENT + b * BLUE_COEFFICIENT) /
+    BRIGHTNESS_DIVISOR;
+  if (brightness > BRIGHTNESS_THRESHOLD) {
+    return true;
+  }
+  return false;
+}
+
 export const generateColors = (
   mainColors: { [x: string]: string },
   reverseNeutralRange: boolean,
@@ -83,25 +128,11 @@ export const generateColors = (
           ...listOfColors,
           [colorKey]: color,
         };
-      } else if (colorKey === 'neutral' && reverseNeutralRange) {
-        const range = generateRangeColors(colorKey, color);
-        listOfColors = {
-          ...listOfColors,
-          // Reverse the neutral shade
-          [`${colorKey}100`]: range[`${colorKey}900`],
-          [`${colorKey}200`]: range[`${colorKey}800`],
-          [`${colorKey}300`]: range[`${colorKey}700`],
-          [`${colorKey}400`]: range[`${colorKey}600`],
-          [`${colorKey}500`]: range[`${colorKey}500`],
-          [`${colorKey}600`]: range[`${colorKey}400`],
-          [`${colorKey}700`]: range[`${colorKey}300`],
-          [`${colorKey}800`]: range[`${colorKey}200`],
-          [`${colorKey}900`]: range[`${colorKey}100`],
-        };
       } else {
+        const reverse = colorKey === 'neutral' && reverseNeutralRange;
         listOfColors = {
           ...listOfColors,
-          ...generateRangeColors(colorKey, color),
+          ...generateShades(color, colorKey, reverse),
         };
       }
     }

package/src/utils/ui.ts

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
-import type React from 'react';
 
 import {
   theme as baseThemeTokens,
   darkColors as defaultDarkColors,
 } from '@rango-dev/ui';
+import React from 'react';
 
 import { generateColors } from '../utils/colors';
 import { toHash } from '../utils/hash';
@@ -73,18 +73,20 @@ export function customizedThemeTokens(
 }
 
 export function joinList(
-  list: React.JSX.Element[],
+  list: { element: React.JSX.Element; key: string }[],
   divider: React.JSX.Element
 ) {
   if (list.length <= 1) {
-    return list;
+    return list.map(({ element, key }) => React.cloneElement(element, { key }));
   }
 
   const output: React.JSX.Element[] = [];
   list.forEach((item, index) => {
-    output.push(item);
+    const { element, key } = item;
+    output.push(React.cloneElement(element, { key }));
     if (index < list.length - 1) {
-      output.push(divider);
+      const key = `divider-${index}`;
+      output.push(React.cloneElement(divider, { key }));
     }
   });