@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/lib/utils/__tests__/componentUtils.test.ts

@@ -0,0 +1,144 @@
+import { describe, it, expect } from 'vitest';
+import {
+  mergeClassNames,
+  applyPartStyles,
+  createCSSVarStyle,
+  mergeComponentProps,
+} from '../componentUtils';
+
+describe('componentUtils', () => {
+  describe('mergeClassNames', () => {
+    it('should merge multiple class names', () => {
+      const result = mergeClassNames('class1', 'class2', 'class3');
+      expect(result).toBe('class1 class2 class3');
+    });
+
+    it('should filter out falsy values', () => {
+      const result = mergeClassNames('class1', undefined, null, false, '', 'class2');
+      expect(result).toBe('class1 class2');
+    });
+
+    it('should handle empty input', () => {
+      const result = mergeClassNames();
+      expect(result).toBe('');
+    });
+
+    it('should handle all falsy values', () => {
+      const result = mergeClassNames(undefined, null, false, '');
+      expect(result).toBe('');
+    });
+  });
+
+  describe('applyPartStyles', () => {
+    it('should merge className', () => {
+      const baseProps = { className: 'base' };
+      const partStyles = { className: 'custom' };
+      const result = applyPartStyles(baseProps, partStyles);
+      expect(result.className).toBe('base custom');
+    });
+
+    it('should merge style objects', () => {
+      const baseProps = { style: { color: 'red' } };
+      const partStyles = { style: { fontSize: '16px' } };
+      const result = applyPartStyles(baseProps, partStyles);
+      expect(result.style).toEqual({ color: 'red', fontSize: '16px' });
+    });
+
+    it('should handle undefined partStyles', () => {
+      const baseProps = { className: 'base', style: { color: 'red' } };
+      const result = applyPartStyles(baseProps, undefined);
+      expect(result).toEqual(baseProps);
+    });
+
+    it('should preserve other props', () => {
+      const baseProps = { className: 'base', id: 'test', 'data-test': 'value' };
+      const partStyles = { className: 'custom' };
+      const result = applyPartStyles(baseProps, partStyles);
+      expect(result).toEqual({
+        className: 'base custom',
+        id: 'test',
+        'data-test': 'value',
+      });
+    });
+  });
+
+  describe('createCSSVarStyle', () => {
+    it('should create style object from CSS variables', () => {
+      const cssVars = {
+        '--atomix-button-bg': '#FF0000',
+        '--atomix-button-border-radius': '20px',
+      };
+      const result = createCSSVarStyle(cssVars);
+      expect(result).toEqual({
+        '--atomix-button-bg': '#FF0000',
+        '--atomix-button-border-radius': '20px',
+      });
+    });
+
+    it('should merge with base style', () => {
+      const cssVars = {
+        '--atomix-button-bg': '#FF0000',
+      };
+      const baseStyle = { marginTop: '10px' };
+      const result = createCSSVarStyle(cssVars, baseStyle);
+      expect(result).toEqual({
+        '--atomix-button-bg': '#FF0000',
+        marginTop: '10px',
+      });
+    });
+
+    it('should handle numeric values', () => {
+      const cssVars = {
+        '--atomix-button-padding-x': 16,
+        '--atomix-button-padding-y': 8,
+      };
+      const result = createCSSVarStyle(cssVars);
+      expect(result).toEqual({
+        '--atomix-button-padding-x': 16,
+        '--atomix-button-padding-y': 8,
+      });
+    });
+
+    it('should handle empty cssVars', () => {
+      const result = createCSSVarStyle(undefined);
+      expect(result).toEqual({});
+    });
+  });
+
+  describe('mergeComponentProps', () => {
+    it('should merge className', () => {
+      const baseProps = { className: 'base' };
+      const customization = { className: 'custom' };
+      const result = mergeComponentProps(baseProps, customization);
+      expect(result.className).toBe('base custom');
+    });
+
+    it('should merge style with CSS variables', () => {
+      const baseProps = { style: { color: 'red' } };
+      const customization = {
+        style: { fontSize: '16px' },
+        cssVars: { '--atomix-button-bg': '#FF0000' },
+      };
+      const result = mergeComponentProps(baseProps, customization);
+      expect(result.style).toEqual({
+        color: 'red',
+        fontSize: '16px',
+        '--atomix-button-bg': '#FF0000',
+      });
+    });
+
+    it('should preserve other props', () => {
+      const baseProps = { className: 'base', id: 'test', onClick: () => {} };
+      const customization = { className: 'custom' };
+      const result = mergeComponentProps(baseProps, customization);
+      expect(result.id).toBe('test');
+      expect(result.onClick).toBeDefined();
+    });
+
+    it('should handle empty customization', () => {
+      const baseProps = { className: 'base', style: { color: 'red' } };
+      const result = mergeComponentProps(baseProps, {});
+      expect(result).toEqual(baseProps);
+    });
+  });
+});

package/src/lib/utils/componentUtils.ts

@@ -0,0 +1,163 @@
+/**
+ * Component Utilities
+ * 
+ * Helper functions for component development with the new customization system
+ */
+
+import React from 'react';
+import type { PartStyleProps } from '../types/partProps';
+import { cssVarsToStyle } from '../theme/cssVariableMapper';
+
+/**
+ * Merge multiple class names
+ */
+export function mergeClassNames(...classes: Array<string | undefined | null | false>): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+/**
+ * Apply part styles to element props
+ */
+export function applyPartStyles<T extends { className?: string; style?: React.CSSProperties }>(
+  baseProps: T,
+  partStyles?: PartStyleProps
+): T {
+  if (!partStyles) return baseProps;
+
+  return {
+    ...baseProps,
+    className: mergeClassNames(baseProps.className, partStyles.className),
+    style: { ...baseProps.style, ...partStyles.style },
+  };
+}
+
+/**
+ * Create style object from CSS variables
+ */
+export function createCSSVarStyle(
+  cssVars?: Record<string, string | number>,
+  baseStyle?: React.CSSProperties
+): React.CSSProperties {
+  if (!cssVars) return baseStyle || {};
+  
+  const varStyle = cssVarsToStyle(cssVars);
+  return { ...varStyle, ...baseStyle };
+}
+
+/**
+ * Merge component props with customization
+ */
+export interface MergePropsOptions {
+  className?: string;
+  style?: React.CSSProperties;
+  cssVars?: Record<string, string | number>;
+  parts?: Record<string, PartStyleProps>;
+}
+
+export function mergeComponentProps<T extends { className?: string; style?: React.CSSProperties }>(
+  baseProps: T,
+  customization: MergePropsOptions
+): T {
+  const { className, style, cssVars, parts } = customization;
+
+  // Merge CSS variables into style
+  const cssVarStyle = cssVars ? cssVarsToStyle(cssVars) : {};
+
+  return {
+    ...baseProps,
+    className: mergeClassNames(baseProps.className, className),
+    style: {
+      ...cssVarStyle,
+      ...baseProps.style,
+      ...style,
+    },
+  };
+}
+
+/**
+ * Get part styles from parts object
+ */
+export function getPartStyles(
+  parts: Record<string, PartStyleProps> | undefined,
+  partName: string
+): PartStyleProps | undefined {
+  return parts?.[partName];
+}
+
+/**
+ * Create element props with part styles
+ */
+export function createPartProps<T extends { className?: string; style?: React.CSSProperties }>(
+  baseClassName: string,
+  partStyles?: PartStyleProps,
+  additionalProps?: Partial<T>
+): T {
+  return {
+    ...additionalProps,
+    className: mergeClassNames(baseClassName, partStyles?.className),
+    style: { ...partStyles?.style, ...(additionalProps as any)?.style },
+  } as T;
+}
+
+/**
+ * Check if component has customization
+ */
+export function hasCustomization(props: {
+  parts?: any;
+  cssVars?: any;
+  slots?: any;
+}): boolean {
+  return Boolean(props.parts || props.cssVars || props.slots);
+}
+
+/**
+ * Create data attributes for debugging
+ */
+export function createDebugAttrs(componentName: string, variant?: string): Record<string, string> {
+  if (process.env.NODE_ENV !== 'development') return {};
+  
+  return {
+    'data-component': componentName,
+    ...(variant && { 'data-variant': variant }),
+  };
+}
+
+/**
+ * Generate a UUID v4
+ */
+export function generateUUID(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * Check if a URL is a YouTube URL
+ */
+export function isYouTubeUrl(url: string): boolean {
+  const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/;
+  return youtubeRegex.test(url);
+}
+
+/**
+ * Extract YouTube video ID from URL
+ */
+export function extractYouTubeId(url: string): string | null {
+  if (!isYouTubeUrl(url)) return null;
+  
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    /youtube\.com\/.*[?&]v=([^&\n?#]+)/,
+  ];
+  
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match && match[1]) {
+      return match[1];
+    }
+  }
+  
+  return null;
+}

package/src/lib/utils/index.ts

@@ -1,61 +1,21 @@
-// Export DOM utilities
-export * from './dom';
-
-// Export other utilities as needed
-
-// Export icon utilities
-export * from './icons';
-
-import classNames from 'classnames';
-
 /**
- * Class name utility function to conditionally join classNames together.
- * This is a wrapper around the 'classnames' library and supports all its features:
- * - Strings and numbers
- * - Arrays (including nested arrays)
- * - Objects (keys are class names, values are truthy/falsy conditions)
- * - Mixed types
- *
- * @example
- * cn('foo', 'bar'); // 'foo bar'
- * cn('foo', { bar: true }); // 'foo bar'
- * cn({ 'foo-bar': true }); // 'foo-bar'
- * cn(['foo', { bar: true }]); // 'foo bar'
+ * Utility Functions Exports
  */
-export function cn(...args: any[]): string {
-  return classNames(...args);
-}
 
-/**
- * Generate a UUID v4 compatible string without relying on Node.js crypto
- * This is a browser-compatible alternative to the uuid package
- * @returns A UUID v4 compatible string
- */
-export function generateUUID(): string {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-    const r = (Math.random() * 16) | 0;
-    const v = c === 'x' ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-}
+export {
+  mergeClassNames,
+  applyPartStyles,
+  createCSSVarStyle,
+  mergeComponentProps,
+  getPartStyles,
+  createPartProps,
+  hasCustomization,
+  createDebugAttrs,
+  generateUUID,
+  isYouTubeUrl,
+  extractYouTubeId,
+} from './componentUtils';
 
-/**
- * Extract YouTube video ID from various YouTube URL formats
- * @param url - YouTube URL
- * @returns YouTube video ID or null if not found
- */
-export function extractYouTubeId(url: string): string | null {
-  const regex =
-    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
-  const match = url.match(regex);
-  return match ? (match[1] as string) : null;
-}
-
-/**
- * Check if a URL is a YouTube URL
- * @param url - URL to check
- * @returns True if the URL is a YouTube URL
- */
-export function isYouTubeUrl(url: string): boolean {
-  return /(?:youtube\.com|youtu\.be)/.test(url);
-}
+export type {
+  MergePropsOptions,
+} from './componentUtils';

package/src/styles/01-settings/_settings.badge.scss

@@ -15,4 +15,4 @@ $badge-border-radius: radius.$border-radius-pill !default;
 
 $badge-icon-size: map.get($spacing-sizes, 4) !default; //16px
 
-$badge-inner-items-gap: map.get($spacing-sizes, 1.5) !default; //6px
+$badge-inner-items-gap: map.get($spacing-sizes, 'px-6') !default; //6px

package/src/styles/01-settings/_settings.callout.scss

@@ -29,7 +29,7 @@ $callout-title-font-size: map.get($spacing-sizes, 4) !default; //16px
 $callout-title-font-weight: 600 !default;
 $callout-title-color: var(--#{config.$prefix}body-color) !default;
 
-$callout-text-font-size: map.get($spacing-sizes, 3.5) !default; //14px
+$callout-text-font-size: map.get($spacing-sizes, 'px-14') !default; //14px
 $callout-text-font-weight: 400 !default;
 $callout-text-color: var(--#{config.$prefix}body-color) !default;
 

package/src/styles/01-settings/_settings.card.scss

@@ -30,7 +30,7 @@ $card-bg: var(--#{config.$prefix}primary-bg-subtle) !default;
 $card-bg-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;
 
 $card-icon-size: map.get($spacing-sizes, 5) !default; //20px
-$card-icon-padding: map.get($spacing-sizes, 1.5) !default; //10px
+$card-icon-padding: map.get($spacing-sizes, 'px-10') !default; //10px
 $card-icon-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
 $card-icon-color: var(--#{config.$prefix}brand-text-emphasis) !default;
 

package/src/styles/01-settings/_settings.colors.scss

@@ -12,16 +12,16 @@ $color-contrast-dark: #000000 !default;
 $color-contrast-light: #ffffff !default;
 
 // Primitives Primary Colors
-$primary-1: #f2e8fd !default;
-$primary-2: #e4d0fa !default;
-$primary-3: #d0b2f5 !default;
-$primary-4: #b88cef !default;
-$primary-5: #9c63e9 !default;
-$primary-6: #7c3aed !default; // Balanced primary purple
-$primary-7: #6425ca !default;
-$primary-8: #501ba6 !default;
-$primary-9: #3c1583 !default;
-$primary-10: #2a0e60 !default;
+$primary-1: #fff9e6 !default;
+$primary-2: #fff4cc !default; 
+$primary-3: #ffe699 !default; 
+$primary-4: #ffd966 !default; 
+$primary-5: #ffcc33 !default; 
+$primary-6: #ffb800 !default; // Balanced primary - main brand color (WCAG AA compliant)
+$primary-7: #e6a600 !default; 
+$primary-8: #cc9400 !default; 
+$primary-9: #b38200 !default; 
+$primary-10: #997000 !default; 
 
 // Primitives Red Colors
 $red-1: #fef2f2 !default;

package/src/styles/01-settings/_settings.input.scss

@@ -16,7 +16,7 @@ $input-line-height-sm: 20px !default;
 $input-line-height-lg: 24px !default;
 
 $input-padding-x: map.get($spacing-sizes, 3) !default; //12px
-$input-padding-y: map.get($spacing-sizes, 2.5) !default; //10px
+$input-padding-y: map.get($spacing-sizes, 'px-10') !default; //10px
 $input-padding-x-sm: map.get($spacing-sizes, 3) !default; //12px
 $input-padding-y-sm: map.get($spacing-sizes, 1.5) !default; //6px
 $input-padding-x-lg: map.get($spacing-sizes, 3) !default; //12px

package/src/styles/01-settings/_settings.navbar.scss

@@ -18,7 +18,7 @@ $navbar-border-color: var(--#{$prefix}primary-border-subtle) !default;
 $navbar-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
 
 // Brand/logo
-$navbar-brand-margin-end: map.get($spacing-sizes, 7.5) !default; //30px
+$navbar-brand-margin-end: map.get($spacing-sizes, 'px-30') !default; //30px
 $navbar-brand-font-size: $font-size-lg !default;
 $navbar-brand-font-weight: $font-weight-bold !default;
 $navbar-brand-color: var(--#{$prefix}body-color) !default;

package/src/styles/01-settings/_settings.tooltip.scss

@@ -11,7 +11,7 @@ $tooltip-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
 
 $tooltip-font-size: typography.$font-size-xs !default;
 $tooltip-font-weight: typography.$font-weight-normal !default;
-$tooltip-color: var(--#{config.$prefix}invert-text) !default;
+$tooltip-color: var(--#{config.$prefix}body-bg) !default;
 
 $tooltip-border-radius: borderRadius.$border-radius !default;
 $tooltip-border-width: null !default;

package/src/styles/01-settings/_settings.upload.scss

@@ -64,7 +64,7 @@ $upload-loader-text-color: var(--#{config.$prefix}tertiary-text-emphasis) !defau
 $upload-loader-text-font-size: typography.$font-size-sm !default;
 $upload-loader-text-margin-top: 5px !default;
 $upload-loader-bar-height: 10px !default;
-$upload-loader-bar-margin-top: map.get($spacing-sizes, 2.5) !default; //10px
+$upload-loader-bar-margin-top: map.get($spacing-sizes, 'px-10') !default; //10px
 $upload-loader-control-icon-size: map.get($spacing-sizes, 5) !default; //20px
 $upload-loader-contorl-color: var(--#{config.$prefix}body-color) !default;
 

package/src/styles/06-components/_components.chart.scss

@@ -313,7 +313,7 @@
     transition: all $chart-transition-duration $chart-transition-timing;
     position: relative;
     overflow: hidden;
-    font-size: map.get($spacing-sizes, 3.5);
+    font-size: map.get($spacing-sizes, 'px-14');
 
     &::before {
       content: '';
@@ -492,7 +492,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: map.get($spacing-sizes, 1.5) 0;
+      padding: map.get($spacing-sizes, 'px-6') 0;
       gap: map.get($spacing-sizes, 3);
 
       &--info {

package/src/styles/06-components/_components.tooltip.scss

@@ -3,6 +3,7 @@
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.size' as *;
 @use '../02-tools/tools.background' as *;
+@use '../01-settings/settings.z-layers' as *;
 
 .c-tooltip {
   $root: &;
@@ -20,59 +21,14 @@
   --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow};
   --#{$prefix}tooltip-arrow-size: #{rem($tooltip-arrow-size)};
   --#{$prefix}tooltip-offset: #{rem($tooltip-arrow-size)}; // Default offset
+  --#{$prefix}z-index-tooltip: #{$z-index-tooltip};
 
   position: absolute;
   width: max-content;
   height: max-content;
   max-width: var(--#{$prefix}tooltip-max-width);
   pointer-events: none; // Wrapper shouldn't block clicks, but content might
-  z-index: 1000;
-
-  // Base positioning logic
-  &--top,
-  &--top-left,
-  &--top-right {
-    bottom: calc(100% + var(--#{$prefix}tooltip-offset));
-    transform-origin: bottom center;
-  }
-
-  &--bottom,
-  &--bottom-left,
-  &--bottom-right {
-    top: calc(100% + var(--#{$prefix}tooltip-offset));
-    transform-origin: top center;
-  }
-
-  &--left {
-    right: calc(100% + var(--#{$prefix}tooltip-offset));
-    top: 50%;
-    transform: translateY(-50%);
-    transform-origin: right center;
-  }
-
-  &--right {
-    left: calc(100% + var(--#{$prefix}tooltip-offset));
-    top: 50%;
-    transform: translateY(-50%);
-    transform-origin: left center;
-  }
-
-  // Horizontal alignment for top/bottom
-  &--top,
-  &--bottom {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &--top-left,
-  &--bottom-left {
-    left: 0;
-  }
-
-  &--top-right,
-  &--bottom-right {
-    right: 0;
-  }
+  z-index: var(--#{$prefix}z-index-tooltip);
 
   &__content {
     position: relative;
@@ -106,50 +62,44 @@
     position: absolute;
     width: var(--#{$prefix}tooltip-arrow-size);
     height: var(--#{$prefix}tooltip-arrow-size);
+    border-radius: calc(
+      (var(--#{$prefix}tooltip-arrow-size) - var(--#{$prefix}tooltip-border-radius)) / 2
+    );
     @include dynamic-background(var(--#{$prefix}tooltip-bg));
     z-index: 1;
     transform: rotate(45deg);
   }
 
-  // Arrow positioning
-  &--top &__arrow,
-  &--top-left &__arrow,
-  &--top-right &__arrow {
-    bottom: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-  }
-
-  &--bottom &__arrow,
-  &--bottom-left &__arrow,
-  &--bottom-right &__arrow {
-    top: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-  }
-
-  &--left &__arrow {
-    right: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-    top: 50%;
-    transform: translateY(-50%) rotate(45deg);
-  }
-
+  &--left &__arrow,
   &--right &__arrow {
-    left: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-    top: 50%;
-    transform: translateY(-50%) rotate(45deg);
+    transform: rotate(45deg);
   }
 
-  // Arrow horizontal alignment
-  &--top &__arrow,
-  &--bottom &__arrow {
-    left: 50%;
-    transform: translateX(-50%) rotate(45deg);
+  &--top &__arrow {
+    transform: rotate(45deg);
   }
 
-  &--top-left &__arrow,
-  &--bottom-left &__arrow {
-    left: var(--#{$prefix}tooltip-arrow-size);
+  &--bottom &__arrow {
+    transform: rotate(225deg);
   }
 
-  &--top-right &__arrow,
-  &--bottom-right &__arrow {
-    right: var(--#{$prefix}tooltip-arrow-size);
+  &--glass {
+    z-index: unset;
+    #{$root}__content {
+      @include dynamic-background(
+        var(--#{$prefix}tooltip-bg),
+        $background-transparency-enable: true,
+        $transparency: 0.4
+      );
+    }
+    #{$root}__arrow {
+      @include dynamic-background(
+        var(--#{$prefix}tooltip-bg),
+        $background-transparency-enable: true,
+        $transparency: 0.4
+      );
+      clip-path: polygon(0 100%, 100% 100%, 100% 0);
+      backdrop-filter: var(--atomix-glass-container-backdrop);
+    }
   }
-}
+}