@envive-ai/react-toolkit-v3 0.3.5

package/src/components/utils/CustomIcon.tsx

@@ -0,0 +1,45 @@
+import { cloneElement, useId } from 'react';
+
+export const CustomIcon = ({
+  IconComponent,
+  style,
+  className,
+  fill,
+  stroke,
+}: {
+  IconComponent: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+  className?: string;
+  fill?: string;
+  stroke?: string;
+  style?: React.CSSProperties;
+}) => {
+  const baseId = useId().replace(/:/g, '-');
+  const iconId = `widget-icon-${baseId}`;
+  const iconElement = IconComponent as React.ReactElement<React.SVGProps<SVGSVGElement>>;
+
+  const cssRules: string[] = [];
+  if (fill) {
+    cssRules.push(`#${iconId} path { fill: ${fill} !important; }`);
+  }
+  if (stroke) {
+    cssRules.push(`#${iconId} path { stroke: ${stroke} !important; }`);
+  }
+
+  const clonedIcon = cloneElement(iconElement, {
+    id: iconId,
+    className,
+    style,
+  } as React.SVGProps<SVGSVGElement>);
+
+  return (
+    <>
+      {cssRules.length > 0 && (
+        <style
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: cssRules.join('\n') }}
+        />
+      )}
+      {clonedIcon}
+    </>
+  );
+};

package/src/components/utils/resolveTheme.ts

@@ -0,0 +1,15 @@
+import { Theme, ThemeCSSVar } from '../../../tokens/theme/theme';
+import { getComputedCSSVariable } from '../DesignTokens/components/utils';
+
+export const resolveTheme = (theme: Theme) => {
+  const globalCustomTheme = getComputedCSSVariable(`var(--${ThemeCSSVar.GlobalCustom})`) as Theme;
+
+  if (
+    globalCustomTheme &&
+    (theme === Theme.GLOBAL_CUSTOM || theme === ('var(--envive-colors-global-custom)' as Theme))
+  ) {
+    return globalCustomTheme as Theme;
+  }
+
+  return theme as Theme;
+};

package/src/components/utils/useCheckIsMobile.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { Breakpoint, screensBreakpointsVariables } from '../../../tokens/breakpoints/breakpoints';
+
+export const useCheckIsMobile = (breakpoint: Breakpoint = 'sm') => {
+  const [viewportWidth, setViewportWidth] = useState<number | undefined>(() =>
+    typeof window !== 'undefined' ? window.innerWidth : undefined,
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    const handleResize = () => {
+      setViewportWidth(window.innerWidth);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const isMobile =
+    viewportWidth !== undefined && viewportWidth < screensBreakpointsVariables[breakpoint || 'sm'];
+
+  return { isMobile, viewportWidth };
+};

package/src/components/utils/useGetContentSize.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useGetContentSize = ({
+  widthDefault,
+  heightDefault,
+}: {
+  widthDefault?: number;
+  heightDefault?: number;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [contentWidth, setContentWidth] = useState<number | undefined>(widthDefault);
+  const [contentHeight, setContentHeight] = useState<number | undefined>(heightDefault);
+
+  useEffect(() => {
+    const updateHeight = () => {
+      if (ref.current) {
+        const height = ref.current.offsetHeight;
+        if (height > 0) {
+          setContentHeight(height);
+        }
+      }
+    };
+
+    const updateWidth = () => {
+      if (ref.current) {
+        const width = ref.current.offsetWidth;
+        if (width > 0) {
+          setContentWidth(width);
+        }
+      }
+    };
+
+    updateHeight();
+    updateWidth();
+
+    const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(updateHeight);
+      requestAnimationFrame(updateWidth);
+    });
+
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return {
+    width: contentWidth,
+    height: contentHeight,
+    ref,
+  };
+};

package/src/components/utils/useHorizontalWheelScroll.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Hook to enable horizontal scrolling with mouse wheel on a container
+ */
+export const useHorizontalWheelScroll = (isEnabled: boolean = true) => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isEnabled) {
+      return undefined;
+    }
+
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return undefined;
+    }
+
+    const handleWheel = (e: WheelEvent) => {
+      // Only handle vertical wheel events (deltaY) and convert to horizontal scroll
+      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+        e.preventDefault();
+        container.scrollLeft += e.deltaY;
+      }
+    };
+
+    container.addEventListener('wheel', handleWheel, { passive: false });
+
+    return () => {
+      container.removeEventListener('wheel', handleWheel);
+    };
+  }, [isEnabled]);
+
+  return scrollContainerRef;
+};

package/src/components/utils/useResponsiveValue.ts

@@ -0,0 +1,107 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Breakpoint,
+  screensBreakpointsOrder,
+  screensBreakpointsVariables,
+} from '../../../tokens/breakpoints/breakpoints';
+
+export type ResponsiveValue<T> = T | Array<T | undefined> | Partial<Record<Breakpoint, T>>;
+
+const getActiveBreakpoint = (width?: number): Breakpoint => {
+  if (width === undefined) return 'base';
+
+  let active: Breakpoint = 'base';
+
+  for (const breakpoint of screensBreakpointsOrder) {
+    if (width >= screensBreakpointsVariables[breakpoint]) {
+      active = breakpoint;
+    }
+  }
+
+  return active;
+};
+
+const resolveFromRecord = <T>(
+  values: Partial<Record<Breakpoint, T>>,
+  activeBreakpoint: Breakpoint,
+  fallback: T,
+) => {
+  const activeIndex = screensBreakpointsOrder.indexOf(activeBreakpoint);
+
+  for (let index = activeIndex; index >= 0; index -= 1) {
+    const breakpoint = screensBreakpointsOrder[index];
+    const value = values[breakpoint];
+
+    if (value !== undefined) return value;
+  }
+
+  return fallback;
+};
+
+const resolveFromArray = <T>(
+  values: Array<T | undefined>,
+  activeBreakpoint: Breakpoint,
+  fallback: T,
+) => {
+  const activeIndex = screensBreakpointsOrder.indexOf(activeBreakpoint);
+
+  for (let index = activeIndex; index >= 0; index -= 1) {
+    const value = values[index];
+
+    if (value !== undefined) return value;
+  }
+
+  const firstDefined = values.find((value): value is T => value !== undefined);
+
+  return firstDefined ?? fallback;
+};
+
+const resolveResponsiveValue = <T>(
+  responsiveValue: ResponsiveValue<T> | undefined,
+  fallback: T,
+  viewportWidth?: number,
+): T => {
+  if (responsiveValue === undefined) return fallback;
+
+  if (typeof responsiveValue !== 'object') return responsiveValue;
+
+  const activeBreakpoint = getActiveBreakpoint(viewportWidth);
+
+  if (Array.isArray(responsiveValue))
+    return resolveFromArray(responsiveValue, activeBreakpoint, fallback);
+
+  return resolveFromRecord(responsiveValue, activeBreakpoint, fallback);
+};
+
+export const useResponsiveValue = <T>({
+  value,
+  fallback,
+}: {
+  value?: ResponsiveValue<T>;
+  fallback: T;
+}): T => {
+  const [viewportWidth, setViewportWidth] = useState<number | undefined>(() =>
+    typeof window !== 'undefined' ? window.innerWidth : undefined,
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+
+    const handleResize = () => {
+      setViewportWidth(window.innerWidth);
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return useMemo(
+    () => resolveResponsiveValue(value, fallback, viewportWidth),
+    [value, fallback, viewportWidth],
+  );
+};

package/src/logging/logger.ts

@@ -0,0 +1,21 @@
+/* eslint-disable no-console */
+
+class Logger {
+  static logInfo(message: string, ...args: unknown[]): void {
+    console.info(`INFO: ${message}`, ...args);
+  }
+
+  static logDebug(message: string, ...args: unknown[]): void {
+    console.debug(`DEBUG: ${message}`, ...args);
+  }
+
+  static logError(message: string, error: unknown | undefined, ...args: unknown[]): void {
+    console.error(`ERROR: ${message} error=${error}`, args);
+  }
+
+  static logWarn(message: string, error: unknown | undefined, ...args: unknown[]): void {
+    console.warn(`WARN: ${message} error=${error}`, args);
+  }
+}
+
+export default Logger;

package/src/models/colorsConfig.ts

@@ -0,0 +1,28 @@
+enum ColorNames {
+  TextPrimary = 'text-primary',
+  TextSecondary = 'text-secondary',
+  TextAccent = 'text-accent',
+  TextLink = 'text-link',
+  TextLight = 'text-light',
+  BackgroundPrimary = 'background-primary',
+  BackgroundSecondary = 'background-secondary',
+  BackgroundSecondaryDark = 'background-secondary-dark',
+  BackgroundTertiary = 'background-tertiary',
+  BackgroundDark = 'background-dark',
+  BackgroundLight = 'background-light',
+  BackgroundSaturated = 'background-saturated',
+  BorderLight = 'border-light',
+  BorderMedium = 'border-medium',
+  BorderDark = 'border-dark',
+  AccentPrimary = 'accent-primary',
+  AccentSecondary = 'accent-secondary',
+}
+
+type ColorMapping = {
+  [key in ColorNames]: string;
+};
+
+const colorVar = (color: ColorNames): string => `var(--spiffy-colors-${color})`;
+const enviveColorVar = (color: ColorNames): string => `var(--envive-colors-${color})`;
+export { ColorNames, colorVar, enviveColorVar };
+export type { ColorMapping };

package/src/test/setup.ts

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom';
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// Mock scrollTo for HTMLDivElement (jsdom compatibility)
+Object.defineProperty(HTMLDivElement.prototype, 'scrollTo', {
+  value: vi.fn(),
+  writable: true,
+  configurable: true,
+});
+
+// Mock ResizeObserver (jsdom compatibility)
+global.ResizeObserver = class ResizeObserver {
+  observe() {
+    // Mock implementation
+  }
+
+  unobserve() {
+    // Mock implementation
+  }
+
+  disconnect() {
+    // Mock implementation
+  }
+} as typeof ResizeObserver;
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});

package/src/test/types.ts

@@ -0,0 +1,3 @@
+export interface TestProps {
+  dataTestId?: string;
+}