@envive-ai/react-toolkit-v3 0.3.5

package/src/components/CSSVariablesEditor/components/CSSVariablesEditor.tsx

@@ -0,0 +1,158 @@
+import { useMemo } from 'react';
+import { useGetCurrentMerchantColors } from '../hooks/useGetCurrentMerchantColors';
+import { useGetDefaultCssVariables } from '../hooks/useGetDefaultCssVariables';
+import { useHandleCssVariablesState } from '../hooks/useHandleCssVariablesState';
+import { hexToColorPicker } from '../utils/functions';
+
+type CSSVariablesEditorProps = {
+  selectedMerchantName: string;
+};
+export const CSSVariablesEditor = ({ selectedMerchantName }: CSSVariablesEditorProps) => {
+  const defaultMerchantColors = useGetCurrentMerchantColors(selectedMerchantName);
+
+  const defaultMerchantColorsKey = useMemo(
+    () => JSON.stringify(defaultMerchantColors),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [defaultMerchantColors, selectedMerchantName],
+  );
+
+  const stableDefaultMerchantColors = useMemo(
+    () => defaultMerchantColors,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [defaultMerchantColorsKey, selectedMerchantName],
+  );
+
+  const { cssVariables } = useGetDefaultCssVariables({
+    defaultMerchantColors: stableDefaultMerchantColors,
+  });
+
+  const { values, handleChange, handleReset, handleResetAll, groupedVariables } =
+    useHandleCssVariablesState(cssVariables);
+
+  return (
+    <section>
+      <div className="envive-tw-mb-6 envive-tw-flex envive-tw-items-center envive-tw-justify-between">
+        <div>
+          <h2 className="envive-tw-mb-2 envive-tw-text-2xl envive-tw-font-semibold envive-tw-text-gray-900">
+            CSS Variables Editor
+          </h2>
+          <p className="envive-tw-text-gray-700">
+            Edit CSS variable values in real-time. Changes are applied immediately to the document.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={handleResetAll}
+          className="envive-tw-rounded-lg envive-tw-border envive-tw-border-gray-300 envive-tw-bg-white envive-tw-px-4 envive-tw-py-2 envive-tw-text-sm envive-tw-font-medium envive-tw-text-gray-700 envive-tw-shadow-sm hover:envive-tw-bg-gray-50 focus:envive-tw-outline-none focus:envive-tw-ring-2 focus:envive-tw-ring-[#1f5f51] focus:envive-tw-ring-offset-2"
+        >
+          Reset All
+        </button>
+      </div>
+
+      <div className="envive-tw-space-y-8">
+        {Object.entries(groupedVariables).map(([category, variables]) => (
+          <div key={category}>
+            <h3 className="envive-tw-mb-4 envive-tw-text-lg envive-tw-font-medium envive-tw-text-gray-800">
+              {category}
+            </h3>
+            <div className="envive-tw-grid envive-tw-grid-cols-1 envive-tw-gap-4 md:envive-tw-grid-cols-2 lg:envive-tw-grid-cols-3">
+              {variables.map(({ key, name, variable, defaultValue, isColor, options }) => {
+                const currentValue = values[key] || '';
+                const colorPickerValue = isColor ? hexToColorPicker(currentValue) : '';
+                const hasOptions = Array.isArray(options) && options.length > 0;
+
+                return (
+                  <div
+                    key={key}
+                    className="envive-tw-rounded-lg envive-tw-border envive-tw-border-gray-200 envive-tw-bg-white envive-tw-p-4 envive-tw-shadow-sm"
+                  >
+                    <div className="envive-tw-mb-2">
+                      <label
+                        htmlFor={key}
+                        className="envive-tw-line-clamp-1 envive-tw-block envive-tw-text-sm envive-tw-font-medium envive-tw-text-gray-900"
+                        title={name}
+                      >
+                        {name}
+                      </label>
+                      <div
+                        className="envive-tw-font-mono envive-tw-mt-1 envive-tw-line-clamp-1 envive-tw-text-xs envive-tw-text-gray-500"
+                        title={variable}
+                      >
+                        --{variable}
+                      </div>
+                    </div>
+                    {hasOptions ? (
+                      <div className="envive-tw-flex envive-tw-gap-2">
+                        <select
+                          id={key}
+                          value={currentValue}
+                          onChange={e => handleChange(key, e.target.value)}
+                          className="envive-tw-rounded-md envive-tw-flex-1 envive-tw-border envive-tw-border-gray-300 envive-tw-bg-white envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm envive-tw-text-gray-900 envive-tw-shadow-sm focus:envive-tw-border-[#1f5f51] focus:envive-tw-outline-none focus:envive-tw-ring-1 focus:envive-tw-ring-[#1f5f51]"
+                        >
+                          {options?.map(option => (
+                            <option
+                              key={option.value}
+                              value={option.value}
+                            >
+                              {option.label}
+                            </option>
+                          ))}
+                        </select>
+                        <button
+                          type="button"
+                          onClick={() => handleReset(key, defaultValue)}
+                          className="envive-tw-rounded-md envive-tw-border envive-tw-border-gray-300 envive-tw-bg-white envive-tw-px-3 envive-tw-py-2 envive-tw-text-xs envive-tw-font-medium envive-tw-text-gray-700 envive-tw-shadow-sm hover:envive-tw-bg-gray-50 focus:envive-tw-outline-none focus:envive-tw-ring-2 focus:envive-tw-ring-[#1f5f51] focus:envive-tw-ring-offset-2"
+                          title="Reset to default"
+                        >
+                          Reset
+                        </button>
+                      </div>
+                    ) : (
+                      <div className="envive-tw-flex envive-tw-gap-2">
+                        {isColor && (
+                          <input
+                            type="color"
+                            aria-label="Color picker"
+                            value={colorPickerValue}
+                            onChange={e => handleChange(key, e.target.value)}
+                            className="envive-tw-rounded-md envive-tw-h-10 envive-tw-w-16 envive-tw-cursor-pointer envive-tw-border envive-tw-border-gray-300 envive-tw-shadow-sm focus:envive-tw-border-[#1f5f51] focus:envive-tw-outline-none focus:envive-tw-ring-1 focus:envive-tw-ring-[#1f5f51]"
+                            title="Color picker"
+                          />
+                        )}
+                        <input
+                          id={key}
+                          type="text"
+                          value={currentValue}
+                          onChange={e => handleChange(key, e.target.value)}
+                          className="envive-tw-rounded-md envive-tw-w-[128px] envive-tw-flex-1 envive-tw-border envive-tw-border-gray-300 envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm envive-tw-text-gray-900 envive-tw-shadow-sm focus:envive-tw-border-[#1f5f51] focus:envive-tw-outline-none focus:envive-tw-ring-1 focus:envive-tw-ring-[#1f5f51]"
+                          placeholder={defaultValue}
+                        />
+                        <button
+                          type="button"
+                          onClick={() => handleReset(key, defaultValue)}
+                          className="envive-tw-rounded-md envive-tw-border envive-tw-border-gray-300 envive-tw-bg-white envive-tw-px-3 envive-tw-py-2 envive-tw-text-xs envive-tw-font-medium envive-tw-text-gray-700 envive-tw-shadow-sm hover:envive-tw-bg-gray-50 focus:envive-tw-outline-none focus:envive-tw-ring-2 focus:envive-tw-ring-[#1f5f51] focus:envive-tw-ring-offset-2"
+                          title="Reset to default"
+                        >
+                          Reset
+                        </button>
+                      </div>
+                    )}
+                    <div className="envive-tw-mt-2 envive-tw-line-clamp-1 envive-tw-text-xs envive-tw-text-gray-500">
+                      {values[key] !== defaultValue ? (
+                        <>
+                          Default: <span className="envive-tw-font-mono">{defaultValue}</span>
+                        </>
+                      ) : (
+                        <span className="envive-tw-line-clamp-1 envive-tw-text-xs">&nbsp;</span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};

package/src/components/CSSVariablesEditor/components/Container.tsx

@@ -0,0 +1,11 @@
+type ContainerProps = {
+  header: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export const Container = ({ header, children }: ContainerProps) => (
+  <div className="envive-tw-min-h-screen envive-tw-bg-white envive-tw-p-8">
+    {header}
+    <div className="envive-tw-mx-auto envive-tw-max-w-6xl envive-tw-space-y-12">{children}</div>
+  </div>
+);

package/src/components/CSSVariablesEditor/components/Header.tsx

@@ -0,0 +1,7 @@
+export const Header = () => (
+  <section className="envive-tw-rounded-3xl envive-tw-mb-12 envive-tw-flex envive-tw-w-full envive-tw-flex-col envive-tw-items-center envive-tw-justify-center envive-tw-bg-[#1f5f51] envive-tw-py-16 envive-tw-text-center">
+    <h1 className="envive-tw-text-[2.25rem] envive-tw-font-bold envive-tw-uppercase envive-tw-tracking-tighter envive-tw-text-[#f9f6ea] lg:envive-tw-text-[3rem]">
+      CSS Variables Editor
+    </h1>
+  </section>
+);

package/src/components/CSSVariablesEditor/components/Purpose.tsx

@@ -0,0 +1,14 @@
+export const Purpose = () => (
+  <section>
+    <h2 className="envive-tw-mb-4 envive-tw-text-2xl envive-tw-font-semibold envive-tw-text-gray-900">
+      Purpose
+    </h2>
+    <p className="envive-tw-leading-relaxed envive-tw-text-gray-700">
+      The CSS Variables Editor allows you to customize design tokens in real-time. Modify colors,
+      typography, spacing, and other design system variables to see how changes affect components
+      instantly. This tool is perfect for exploring different design variations and understanding
+      how design tokens work together to create cohesive visual experiences. The idea is also to
+      simulate configuring the global parameters we will have in Envive Hub
+    </p>
+  </section>
+);

package/src/components/CSSVariablesEditor/components/index.ts

@@ -0,0 +1,11 @@
+import { Header } from './Header';
+import { Purpose } from './Purpose';
+import { CSSVariablesEditor } from './CSSVariablesEditor';
+import { Container } from './Container';
+
+export const CSSVariablesEditorComponents = {
+  Header,
+  Purpose,
+  CSSVariablesEditor,
+  Container,
+};

package/src/components/CSSVariablesEditor/hooks/useGetCssVariablesOptions.ts

@@ -0,0 +1,77 @@
+import { useMemo } from 'react';
+import { ColorsNamesVars } from 'tokens/colors/colors';
+import { Theme } from 'tokens/theme/theme';
+import { AspectRatio } from 'tokens/aspectRatio/aspectRatio';
+import { SelectOption } from '../types/types';
+
+export const useGetCssVariablesOptions = () => {
+  const aspectRatioOptions: SelectOption[] = useMemo(
+    () => [
+      { label: 'Square', value: AspectRatio.SQUARE },
+      { label: 'Portrait', value: AspectRatio.PORTRAIT },
+    ],
+    [],
+  );
+
+  const themeOptions: SelectOption[] = useMemo(
+    () => [
+      { label: 'Standard', value: Theme.STANDARD },
+      { label: 'Modern', value: Theme.MODERN },
+      { label: 'Minimal', value: Theme.MINIMAL },
+    ],
+    [],
+  );
+
+  const lightButtonBackgroundOptions: SelectOption[] = useMemo(
+    () => [
+      { label: 'Background Secondary', value: `var(--${ColorsNamesVars.BackgroundSecondary})` },
+      { label: 'Background Tertiary', value: `var(--${ColorsNamesVars.BackgroundTertiary})` },
+      { label: 'Background Light', value: `var(--${ColorsNamesVars.BackgroundLight})` },
+      { label: 'Background Primary', value: `var(--${ColorsNamesVars.BackgroundPrimary})` },
+    ],
+    [],
+  );
+
+  const lightButtonIconOptions: SelectOption[] = useMemo(
+    () => [
+      { label: 'Background Secondary', value: `var(--${ColorsNamesVars.BackgroundSecondary})` },
+      { label: 'Background Tertiary', value: `var(--${ColorsNamesVars.BackgroundTertiary})` },
+      { label: 'Background Light', value: `var(--${ColorsNamesVars.BackgroundLight})` },
+      { label: 'Background Dark', value: `var(--${ColorsNamesVars.BackgroundDark})` },
+      { label: 'Background Primary', value: `var(--${ColorsNamesVars.BackgroundPrimary})` },
+      { label: 'Accent Primary', value: `var(--${ColorsNamesVars.AccentPrimary})` },
+      { label: 'Accent Secondary', value: `var(--${ColorsNamesVars.AccentSecondary})` },
+    ],
+    [],
+  );
+
+  const darkButtonBackgroundOptions: SelectOption[] = useMemo(
+    () => [
+      { label: 'Background Dark', value: `var(--${ColorsNamesVars.BackgroundDark})` },
+      { label: 'Background Primary', value: `var(--${ColorsNamesVars.BackgroundPrimary})` },
+    ],
+    [],
+  );
+
+  const darkButtonIconOptions: SelectOption[] = useMemo(
+    () => [
+      { label: 'Background Secondary', value: `var(--${ColorsNamesVars.BackgroundSecondary})` },
+      { label: 'Background Tertiary', value: `var(--${ColorsNamesVars.BackgroundTertiary})` },
+      { label: 'Background Light', value: `var(--${ColorsNamesVars.BackgroundLight})` },
+      { label: 'Background Dark', value: `var(--${ColorsNamesVars.BackgroundDark})` },
+      { label: 'Background Primary', value: `var(--${ColorsNamesVars.BackgroundPrimary})` },
+      { label: 'Accent Primary', value: `var(--${ColorsNamesVars.AccentPrimary})` },
+      { label: 'Accent Secondary', value: `var(--${ColorsNamesVars.AccentSecondary})` },
+    ],
+    [],
+  );
+
+  return {
+    aspectRatioOptions,
+    themeOptions,
+    lightButtonBackgroundOptions,
+    lightButtonIconOptions,
+    darkButtonBackgroundOptions,
+    darkButtonIconOptions,
+  };
+};

package/src/components/CSSVariablesEditor/hooks/useGetCurrentMerchantColors.ts

@@ -0,0 +1,224 @@
+import { useEffect, useState } from 'react';
+import { ColorMapping, ColorNames } from 'src/models/colorsConfig';
+import { getCSSVariable } from 'src/components/DesignTokens/components/utils';
+
+export const defaultMerchantTest = {
+  devApiKey: '242fa4217b8b3db70e3a20f9740430afd87033d8f0b15e608ec8c42d5409094b',
+  domains: ['semantic-colors-test.com'],
+  name: 'semantic-colors-test',
+  prodApiKey: '242fa4217b8b3db70e3a20f9740430afd87033d8f0b15e608ec8c42d5409094b',
+};
+
+export const standardColors: ColorMapping = {
+  [ColorNames.TextPrimary]: '#021414',
+  [ColorNames.TextSecondary]: '#666666',
+  [ColorNames.TextAccent]: '#478D87',
+  [ColorNames.TextLink]: '#042E2C',
+  [ColorNames.TextLight]: '#FFFFFF',
+  [ColorNames.BackgroundPrimary]: '#1F5F51',
+  [ColorNames.BackgroundSecondary]: '#F9F6EA',
+  [ColorNames.BackgroundSecondaryDark]: '#EEECDD',
+  [ColorNames.BackgroundTertiary]: '#EEECDD',
+  [ColorNames.BackgroundDark]: '#021414',
+  [ColorNames.BackgroundLight]: '#FFFFFF',
+  [ColorNames.BackgroundSaturated]: '#FFFFFF',
+  [ColorNames.BorderLight]: '#E6E7E7',
+  [ColorNames.BorderMedium]: '#B3B8B8',
+  [ColorNames.BorderDark]: '#021414',
+  [ColorNames.AccentPrimary]: '#1F5F51',
+  [ColorNames.AccentSecondary]: '#AE8659',
+};
+
+const getSpiffyColors = (): ColorMapping => {
+  return {
+    [ColorNames.TextPrimary]:
+      getCSSVariable('--spiffy-colors-text-primary') ||
+      getCSSVariable('--envive-colors-text-primary'),
+    [ColorNames.TextSecondary]:
+      getCSSVariable('--spiffy-colors-text-secondary') ||
+      getCSSVariable('--envive-colors-text-secondary'),
+    [ColorNames.TextAccent]:
+      getCSSVariable('--spiffy-colors-text-accent') ||
+      getCSSVariable('--envive-colors-text-accent'),
+    [ColorNames.TextLink]:
+      getCSSVariable('--spiffy-colors-text-link') || getCSSVariable('--envive-colors-text-link'),
+    [ColorNames.TextLight]:
+      getCSSVariable('--spiffy-colors-text-light') || getCSSVariable('--envive-colors-text-light'),
+    [ColorNames.BackgroundPrimary]:
+      getCSSVariable('--spiffy-colors-background-primary') ||
+      getCSSVariable('--envive-colors-background-primary'),
+    [ColorNames.BackgroundSecondary]:
+      getCSSVariable('--spiffy-colors-background-secondary') ||
+      getCSSVariable('--envive-colors-background-secondary'),
+    [ColorNames.BackgroundSecondaryDark]:
+      getCSSVariable('--spiffy-colors-background-secondary-dark') ||
+      getCSSVariable('--envive-colors-background-secondary-dark'),
+    [ColorNames.BackgroundTertiary]:
+      getCSSVariable('--spiffy-colors-background-tertiary') ||
+      getCSSVariable('--envive-colors-background-tertiary'),
+    [ColorNames.BackgroundDark]:
+      getCSSVariable('--spiffy-colors-background-dark') ||
+      getCSSVariable('--envive-colors-background-dark'),
+    [ColorNames.BackgroundLight]:
+      getCSSVariable('--spiffy-colors-background-light') ||
+      getCSSVariable('--envive-colors-background-light'),
+    [ColorNames.BackgroundSaturated]:
+      getCSSVariable('--spiffy-colors-background-saturated') ||
+      getCSSVariable('--envive-colors-background-saturated'),
+    [ColorNames.BorderLight]:
+      getCSSVariable('--spiffy-colors-border-light') ||
+      getCSSVariable('--envive-colors-border-light'),
+    [ColorNames.BorderMedium]:
+      getCSSVariable('--spiffy-colors-border-medium') ||
+      getCSSVariable('--envive-colors-border-medium'),
+    [ColorNames.BorderDark]:
+      getCSSVariable('--spiffy-colors-border-dark') ||
+      getCSSVariable('--envive-colors-border-dark'),
+    [ColorNames.AccentPrimary]:
+      getCSSVariable('--spiffy-colors-accent-primary') ||
+      getCSSVariable('--envive-colors-accent-primary'),
+    [ColorNames.AccentSecondary]:
+      getCSSVariable('--spiffy-colors-accent-secondary') ||
+      getCSSVariable('--envive-colors-accent-secondary'),
+  };
+};
+
+const areColorMappingsEqual = (a: ColorMapping, b: ColorMapping): boolean => {
+  for (const key in ColorNames) {
+    if (Object.prototype.hasOwnProperty.call(ColorNames, key)) {
+      const colorKey = ColorNames[key as keyof typeof ColorNames];
+      if (a[colorKey] !== b[colorKey]) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+export const useGetCurrentMerchantColors = (selectedMerchant: string): ColorMapping => {
+  const [currentColors, setCurrentColors] = useState<ColorMapping>(() => {
+    if (selectedMerchant === defaultMerchantTest.name) return standardColors;
+    return getSpiffyColors();
+  });
+
+  useEffect(() => {
+    if (selectedMerchant === defaultMerchantTest.name) {
+      setCurrentColors(prev => {
+        if (areColorMappingsEqual(prev, standardColors)) return prev;
+        return standardColors;
+      });
+      return () => {};
+    }
+
+    const initialColors = getSpiffyColors();
+    let lastDetectedColors: ColorMapping = initialColors;
+    let stableColorCount = 0;
+    const requiredStableReads = 2;
+
+    const updateColors = () => {
+      const colors = getSpiffyColors();
+
+      if (areColorMappingsEqual(lastDetectedColors, colors)) {
+        stableColorCount += 1;
+
+        if (stableColorCount >= requiredStableReads) {
+          setCurrentColors(prev => {
+            if (areColorMappingsEqual(prev, colors)) return prev;
+            return colors;
+          });
+        }
+      } else {
+        lastDetectedColors = colors;
+        stableColorCount = 1;
+
+        if (!areColorMappingsEqual(initialColors, colors)) {
+          setCurrentColors(prev => {
+            if (areColorMappingsEqual(prev, colors)) return prev;
+            return colors;
+          });
+        }
+      }
+    };
+
+    let timeout2: NodeJS.Timeout;
+    let timeout3: NodeJS.Timeout;
+    let timeout4: NodeJS.Timeout;
+    let timeout5: NodeJS.Timeout;
+    let intervalId: NodeJS.Timeout | undefined;
+    let headObserver: MutationObserver | undefined;
+
+    const timeout1 = setTimeout(() => {
+      updateColors();
+      timeout2 = setTimeout(updateColors, 100);
+      timeout3 = setTimeout(updateColors, 300);
+      timeout4 = setTimeout(updateColors, 600);
+      timeout5 = setTimeout(updateColors, 1000);
+    }, 300);
+
+    const lateTimeout = setTimeout(updateColors, 1500);
+
+    const observer = new MutationObserver(() => {
+      requestAnimationFrame(() => {
+        setTimeout(updateColors, 10);
+      });
+    });
+
+    if (typeof document !== 'undefined') {
+      observer.observe(document.head, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style'],
+        characterData: true,
+      });
+
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['style', 'class'],
+        subtree: false,
+      });
+
+      const observeStyleElements = () => {
+        const styleElements = document.querySelectorAll('style');
+        styleElements.forEach(style => {
+          observer.observe(style, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+            attributes: true,
+          });
+        });
+      };
+
+      observeStyleElements();
+
+      headObserver = new MutationObserver(() => {
+        observeStyleElements();
+        updateColors();
+      });
+
+      headObserver.observe(document.head, {
+        childList: true,
+        subtree: false,
+      });
+
+      intervalId = setInterval(() => {
+        updateColors();
+      }, 300);
+    }
+
+    return () => {
+      if (timeout1) clearTimeout(timeout1);
+      if (timeout2) clearTimeout(timeout2);
+      if (timeout3) clearTimeout(timeout3);
+      if (timeout4) clearTimeout(timeout4);
+      if (timeout5) clearTimeout(timeout5);
+      clearTimeout(lateTimeout);
+      if (intervalId) clearInterval(intervalId);
+      observer.disconnect();
+      if (headObserver) headObserver.disconnect();
+    };
+  }, [selectedMerchant]);
+
+  return currentColors;
+};