@shohojdhara/atomix 0.4.0 → 0.4.2

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

@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { hasClass, addClass, removeClass, toggleClass } from '../dom';
+
+describe('dom utils', () => {
+  let element: HTMLElement;
+
+  beforeEach(() => {
+    element = document.createElement('div');
+  });
+
+  describe('hasClass', () => {
+    it('should return true if element has class', () => {
+      element.className = 'test-class';
+      expect(hasClass(element, 'test-class')).toBe(true);
+    });
+
+    it('should return false if element does not have class', () => {
+      element.className = 'other-class';
+      expect(hasClass(element, 'test-class')).toBe(false);
+    });
+
+    it('should return false if element has no classes', () => {
+      expect(hasClass(element, 'test-class')).toBe(false);
+    });
+  });
+
+  describe('addClass', () => {
+    it('should add class if not present', () => {
+      addClass(element, 'new-class');
+      expect(element.classList.contains('new-class')).toBe(true);
+    });
+
+    it('should not add duplicate class', () => {
+      element.className = 'existing-class';
+      addClass(element, 'existing-class');
+      expect(element.className).toBe('existing-class');
+      expect(element.classList.length).toBe(1);
+    });
+
+    it('should preserve existing classes', () => {
+      element.className = 'existing-class';
+      addClass(element, 'new-class');
+      expect(element.classList.contains('existing-class')).toBe(true);
+      expect(element.classList.contains('new-class')).toBe(true);
+    });
+  });
+
+  describe('removeClass', () => {
+    it('should remove existing class', () => {
+      element.className = 'test-class';
+      removeClass(element, 'test-class');
+      expect(element.classList.contains('test-class')).toBe(false);
+    });
+
+    it('should do nothing if class does not exist', () => {
+      element.className = 'other-class';
+      removeClass(element, 'test-class');
+      expect(element.className).toBe('other-class');
+    });
+
+    it('should preserve other classes', () => {
+      element.className = 'keep-me remove-me';
+      removeClass(element, 'remove-me');
+      expect(element.classList.contains('keep-me')).toBe(true);
+      expect(element.classList.contains('remove-me')).toBe(false);
+    });
+  });
+
+  describe('toggleClass', () => {
+    it('should add class if not present', () => {
+      toggleClass(element, 'test-class');
+      expect(element.classList.contains('test-class')).toBe(true);
+    });
+
+    it('should remove class if present', () => {
+      element.className = 'test-class';
+      toggleClass(element, 'test-class');
+      expect(element.classList.contains('test-class')).toBe(false);
+    });
+
+    it('should add class if force is true', () => {
+      toggleClass(element, 'test-class', true);
+      expect(element.classList.contains('test-class')).toBe(true);
+
+      // Should stay added if already present
+      toggleClass(element, 'test-class', true);
+      expect(element.classList.contains('test-class')).toBe(true);
+    });
+
+    it('should remove class if force is false', () => {
+      element.className = 'test-class';
+      toggleClass(element, 'test-class', false);
+      expect(element.classList.contains('test-class')).toBe(false);
+
+      // Should stay removed if not present
+      toggleClass(element, 'test-class', false);
+      expect(element.classList.contains('test-class')).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest';
+import {
+  createFontPreloadLink,
+  preloadFonts,
+  generateFontPreloadTags,
+  type FontPreloadConfig,
+} from '../fontPreloader';
+
+describe('fontPreloader', () => {
+  describe('createFontPreloadLink', () => {
+    it('should create a link element with correct attributes', () => {
+      const config: FontPreloadConfig = {
+        family: 'Test Font',
+        path: '/fonts/test.woff2',
+        weight: 400,
+        style: 'normal',
+      };
+
+      const link = createFontPreloadLink(config);
+
+      expect(link).toBeInstanceOf(HTMLLinkElement);
+      expect(link.rel).toBe('preload');
+      expect(link.as).toBe('font');
+      expect(link.href).toContain('/fonts/test.woff2');
+      expect(link.type).toBe('font/woff2');
+      expect(link.crossOrigin).toBe('anonymous');
+    });
+
+    it('should use default values for optional properties', () => {
+      const config: FontPreloadConfig = {
+        family: 'Test Font',
+        path: '/fonts/test.woff2',
+      };
+
+      const link = createFontPreloadLink(config);
+
+      expect(link.type).toBe('font/woff2');
+      expect(link.crossOrigin).toBe('anonymous');
+    });
+
+    it('should respect custom format and crossorigin', () => {
+      const config: FontPreloadConfig = {
+        family: 'Test Font',
+        path: '/fonts/test.woff',
+        format: 'woff',
+        crossorigin: 'use-credentials',
+      };
+
+      const link = createFontPreloadLink(config);
+
+      expect(link.type).toBe('font/woff');
+      expect(link.crossOrigin).toBe('use-credentials');
+    });
+  });
+
+  describe('preloadFonts', () => {
+    it('should create multiple link elements', () => {
+      const configs: FontPreloadConfig[] = [
+        { family: 'Font 1', path: '/f1.woff2' },
+        { family: 'Font 2', path: '/f2.woff2' },
+      ];
+
+      const links = preloadFonts(configs);
+
+      expect(links).toHaveLength(2);
+      expect(links[0]).toBeInstanceOf(HTMLLinkElement);
+      expect(links[1]).toBeInstanceOf(HTMLLinkElement);
+      expect(links[0].href).toContain('/f1.woff2');
+      expect(links[1].href).toContain('/f2.woff2');
+    });
+  });
+
+  describe('generateFontPreloadTags', () => {
+    it('should generate HTML strings for preload links', () => {
+      const configs: FontPreloadConfig[] = [
+        { family: 'Font 1', path: '/f1.woff2' },
+      ];
+
+      const tags = generateFontPreloadTags(configs);
+
+      expect(tags).toHaveLength(1);
+      expect(tags[0]).toContain('<link rel="preload" as="font"');
+      expect(tags[0]).toContain('href="/f1.woff2"');
+      expect(tags[0]).toContain('type="font/woff2"');
+      expect(tags[0]).toContain('crossorigin="anonymous"');
+    });
+
+    it('should handle multiple configurations', () => {
+      const configs: FontPreloadConfig[] = [
+        { family: 'Font 1', path: '/f1.woff2' },
+        { family: 'Font 2', path: '/f2.woff', format: 'woff' },
+      ];
+
+      const tags = generateFontPreloadTags(configs);
+
+      expect(tags).toHaveLength(2);
+      expect(tags[0]).toContain('href="/f1.woff2"');
+      expect(tags[1]).toContain('href="/f2.woff"');
+      expect(tags[1]).toContain('type="font/woff"');
+    });
+  });
+});

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

@@ -0,0 +1,117 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { ThemeNaming } from '../themeNaming';
+
+describe('ThemeNaming', () => {
+  afterEach(() => {
+    // Reset prefix to default after each test
+    ThemeNaming.setPrefix('atomix');
+  });
+
+  describe('setPrefix / getPrefix', () => {
+    it('should have default prefix "atomix"', () => {
+      expect(ThemeNaming.getPrefix()).toBe('atomix');
+    });
+
+    it('should update prefix', () => {
+      ThemeNaming.setPrefix('custom');
+      expect(ThemeNaming.getPrefix()).toBe('custom');
+    });
+  });
+
+  describe('camelToKebab', () => {
+    it('should convert camelCase to kebab-case', () => {
+      expect(ThemeNaming.camelToKebab('camelCase')).toBe('camel-case');
+    });
+
+    it('should handle PascalCase', () => {
+      expect(ThemeNaming.camelToKebab('PascalCase')).toBe('pascal-case');
+    });
+
+    it('should handle simple strings', () => {
+      expect(ThemeNaming.camelToKebab('simple')).toBe('simple');
+    });
+
+    it('should handle empty string', () => {
+      expect(ThemeNaming.camelToKebab('')).toBe('');
+    });
+  });
+
+  describe('kebabToCamel', () => {
+    it('should convert kebab-case to camelCase', () => {
+      expect(ThemeNaming.kebabToCamel('kebab-case')).toBe('kebabCase');
+    });
+
+    it('should handle simple strings', () => {
+      expect(ThemeNaming.kebabToCamel('simple')).toBe('simple');
+    });
+
+    it('should handle empty string', () => {
+      expect(ThemeNaming.kebabToCamel('')).toBe('');
+    });
+  });
+
+  describe('cssVar', () => {
+    it('should create CSS variable with default prefix', () => {
+      expect(ThemeNaming.cssVar('tokenName')).toBe('--atomix-token-name');
+    });
+
+    it('should create CSS variable with custom prefix', () => {
+      ThemeNaming.setPrefix('custom');
+      expect(ThemeNaming.cssVar('tokenName')).toBe('--custom-token-name');
+    });
+  });
+
+  describe('bemClass', () => {
+    it('should create block class', () => {
+      expect(ThemeNaming.bemClass('block')).toBe('c-block');
+    });
+
+    it('should create block element class', () => {
+      expect(ThemeNaming.bemClass('block', 'element')).toBe('c-block__element');
+    });
+
+    it('should create block modifier class', () => {
+      expect(ThemeNaming.bemClass('block', undefined, 'mod')).toBe('c-block--mod');
+    });
+
+    it('should create block element modifier class', () => {
+      expect(ThemeNaming.bemClass('block', 'element', 'mod')).toBe('c-block__element--mod');
+    });
+  });
+
+  describe('variantClass', () => {
+    it('should create variant class', () => {
+      expect(ThemeNaming.variantClass('button', 'primary')).toBe('c-button--primary');
+    });
+  });
+
+  describe('sizeClass', () => {
+    it('should create size class', () => {
+      expect(ThemeNaming.sizeClass('button', 'lg')).toBe('c-button--lg');
+    });
+  });
+
+  describe('stateClass', () => {
+    it('should create state class', () => {
+      expect(ThemeNaming.stateClass('input', 'disabled')).toBe('c-input--disabled');
+    });
+  });
+
+  describe('utilityClass', () => {
+    it('should create utility class', () => {
+      expect(ThemeNaming.utilityClass('flex')).toBe('u-flex');
+    });
+  });
+
+  describe('layoutClass', () => {
+    it('should create layout class', () => {
+      expect(ThemeNaming.layoutClass('grid')).toBe('l-grid');
+    });
+  });
+
+  describe('objectClass', () => {
+    it('should create object class', () => {
+      expect(ThemeNaming.objectClass('container')).toBe('o-container');
+    });
+  });
+});

package/src/lib/utils/themeNaming.ts

@@ -28,7 +28,7 @@ export class ThemeNaming {
    * @param str - String to convert
    */
   static camelToKebab(str: string): string {
-    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
   }
 
   /**

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

@@ -83,7 +83,6 @@
   &__icon {
     color: var(--#{config.$prefix}accordion-icon-color);
     font-size: var(--#{config.$prefix}accordion-icon-size);
-    will-change: transform;
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
@@ -95,7 +94,6 @@
   &__panel {
     height: var(--panel-height);
     overflow: hidden;
-    will-change: height;
 
     @if accordion.$accordion-enable-smooth-scroll {
       scroll-behavior: smooth;

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

@@ -634,7 +634,6 @@
       text-rendering: optimizeLegibility;
       image-rendering: -webkit-optimize-contrast;
       image-rendering: crisp-edges;
-      will-change: contents;
       backface-visibility: hidden;
       transform: translateZ(0);
       opacity: 0;

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

@@ -99,7 +99,6 @@
     pointer-events: none;
 
     &:not(.is-glass) {
-      will-change: transform, opacity, visibility;
       transform: translateY(-15px) scale(0.95);
       transform-origin: top center;
     }

package/src/styles/06-components/_components.edge-panel.scss

@@ -39,7 +39,6 @@
     opacity: 0;
     z-index: map.get($z-layers, 1);
     transition: opacity var(--#{$prefix}edge-panel-animation-duration) ease;
-    will-change: opacity;
 
     &.is-animating {
       animation: fadeIn 0.3s ease forwards;
@@ -62,7 +61,6 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    will-change: transform, opacity;
 
     &.is-animating {
       animation: slideIn var(--#{$prefix}edge-panel-animation-duration)

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

@@ -77,7 +77,6 @@
   max-height: 100%;
   object-fit: contain;
   transform-origin: center center;
-  will-change: transform;
 
   // Enhanced image quality
   image-rendering: auto;

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

@@ -149,7 +149,6 @@
     max-width: none;
     @include square(100%);
     @include object-fit(cover);
-    will-change: transform;
   }
 
   // When the river has a background image, we need to adjust text colors for readability

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

@@ -43,8 +43,6 @@
     }
 
     .c-slider__wrapper {
-      will-change: transform;
-
       &.transitioning {
         transition: transform var(--#{config.$prefix}slider-speed)
           var(--#{config.$prefix}slider-easing);
@@ -85,7 +83,6 @@
   z-index: slider.$slider-z-index-base;
   display: flex;
   box-sizing: content-box;
-  will-change: transform;
 }
 
 .c-slider__slide {

package/src/styles/99-utilities/_utilities.glass-fixes.scss

@@ -14,7 +14,6 @@
   transform-style: flat !important;
   will-change: auto !important;
   transform: none !important;
-  z-index: unset;
 }
 
 // =============================================================================