@furystack/shades-common-components 10.0.35 → 11.0.0

package/esm/services/theme-provider-service.spec.js

@@ -0,0 +1,166 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { RgbColor, ThemeProviderService } from './theme-provider-service.js';
+describe('theme-provider-service', () => {
+    describe('RgbColor', () => {
+        describe('constructor', () => {
+            it('should create RgbColor with r, g, b values', () => {
+                const color = new RgbColor(255, 128, 64);
+                expect(color.r).toBe(255);
+                expect(color.g).toBe(128);
+                expect(color.b).toBe(64);
+                expect(color.a).toBe(1);
+            });
+            it('should create RgbColor with alpha value', () => {
+                const color = new RgbColor(255, 128, 64, 0.5);
+                expect(color.r).toBe(255);
+                expect(color.g).toBe(128);
+                expect(color.b).toBe(64);
+                expect(color.a).toBe(0.5);
+            });
+            it('should default alpha to 1', () => {
+                const color = new RgbColor(100, 100, 100);
+                expect(color.a).toBe(1);
+            });
+        });
+        describe('update', () => {
+            it('should update r value and return self', () => {
+                const color = new RgbColor(100, 100, 100);
+                const result = color.update('r', 200);
+                expect(result).toBe(color);
+                expect(color.r).toBe(200);
+            });
+            it('should update g value', () => {
+                const color = new RgbColor(100, 100, 100);
+                color.update('g', 150);
+                expect(color.g).toBe(150);
+            });
+            it('should update b value', () => {
+                const color = new RgbColor(100, 100, 100);
+                color.update('b', 50);
+                expect(color.b).toBe(50);
+            });
+            it('should update a value', () => {
+                const color = new RgbColor(100, 100, 100, 1);
+                color.update('a', 0.7);
+                expect(color.a).toBe(0.7);
+            });
+            it('should allow chained updates', () => {
+                const color = new RgbColor(0, 0, 0);
+                color.update('r', 255).update('g', 128).update('b', 64);
+                expect(color.r).toBe(255);
+                expect(color.g).toBe(128);
+                expect(color.b).toBe(64);
+            });
+        });
+        describe('toString', () => {
+            it('should return rgba format string', () => {
+                const color = new RgbColor(255, 128, 64, 0.5);
+                expect(color.toString()).toBe('rgba(255,128,64,0.5)');
+            });
+            it('should handle full opacity', () => {
+                const color = new RgbColor(0, 0, 0, 1);
+                expect(color.toString()).toBe('rgba(0,0,0,1)');
+            });
+            it('should handle zero alpha', () => {
+                const color = new RgbColor(255, 255, 255, 0);
+                expect(color.toString()).toBe('rgba(255,255,255,0)');
+            });
+        });
+    });
+    describe('ThemeProviderService', () => {
+        let service;
+        beforeEach(() => {
+            service = new ThemeProviderService();
+        });
+        describe('getRgbFromColorString', () => {
+            it('should parse 6-digit hex color', () => {
+                const result = service.getRgbFromColorString('#ff8040');
+                expect(result.r).toBe(255);
+                expect(result.g).toBe(128);
+                expect(result.b).toBe(64);
+            });
+            it('should parse 6-digit hex color with lowercase', () => {
+                const result = service.getRgbFromColorString('#3f51b5');
+                expect(result.r).toBe(63);
+                expect(result.g).toBe(81);
+                expect(result.b).toBe(181);
+            });
+            it('should parse 6-digit hex color with uppercase', () => {
+                const result = service.getRgbFromColorString('#FF0000');
+                expect(result.r).toBe(255);
+                expect(result.g).toBe(0);
+                expect(result.b).toBe(0);
+            });
+            it('should parse 3-digit hex color', () => {
+                const result = service.getRgbFromColorString('#f80');
+                expect(result.r).toBe(255);
+                expect(result.g).toBe(136);
+                expect(result.b).toBe(0);
+            });
+            it('should parse 3-digit hex white', () => {
+                const result = service.getRgbFromColorString('#fff');
+                expect(result.r).toBe(255);
+                expect(result.g).toBe(255);
+                expect(result.b).toBe(255);
+            });
+            it('should parse 3-digit hex black', () => {
+                const result = service.getRgbFromColorString('#000');
+                expect(result.r).toBe(0);
+                expect(result.g).toBe(0);
+                expect(result.b).toBe(0);
+            });
+            it('should parse rgba color', () => {
+                const result = service.getRgbFromColorString('rgba(255,128,64,0.5)');
+                expect(result.r).toBe(255);
+                expect(result.g).toBe(128);
+                expect(result.b).toBe(64);
+                expect(result.a).toBe(0);
+            });
+            it('should parse rgba color with spaces', () => {
+                const result = service.getRgbFromColorString('rgba(100, 150, 200, 1)');
+                expect(result.r).toBe(100);
+                expect(result.g).toBe(150);
+                expect(result.b).toBe(200);
+                expect(result.a).toBe(1);
+            });
+            it('should throw error for unsupported color format', () => {
+                expect(() => service.getRgbFromColorString('red')).toThrow("Color format 'red' is not supported.'");
+            });
+            it('should throw error for rgb format without alpha', () => {
+                expect(() => service.getRgbFromColorString('rgb(255, 0, 0)')).toThrow();
+            });
+            it('should throw error for invalid hex length', () => {
+                expect(() => service.getRgbFromColorString('#12345')).toThrow();
+            });
+        });
+        describe('getTextColor', () => {
+            it('should return dark text for light background', () => {
+                const result = service.getTextColor('#ffffff');
+                expect(result).toBe('#000000');
+            });
+            it('should return light text for dark background', () => {
+                const result = service.getTextColor('#000000');
+                expect(result).toBe('#FFFFFF');
+            });
+            it('should return custom bright color for light background', () => {
+                const result = service.getTextColor('#ffffff', '#333333', '#eeeeee');
+                expect(result).toBe('#333333');
+            });
+            it('should return custom dark color for dark background', () => {
+                const result = service.getTextColor('#000000', '#333333', '#eeeeee');
+                expect(result).toBe('#eeeeee');
+            });
+        });
+        describe('theme management', () => {
+            it('should have initial theme assigned', () => {
+                expect(service.getAssignedTheme()).toBeDefined();
+                expect(service.getAssignedTheme().name).toBe('css-variable-theme');
+            });
+            it('should expose cssVariableTheme as theme property', () => {
+                expect(service.theme).toBeDefined();
+                expect(service.theme.name).toBe('css-variable-theme');
+            });
+        });
+    });
+});
+//# sourceMappingURL=theme-provider-service.spec.js.map

package/esm/services/theme-provider-service.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider-service.spec.js","sourceRoot":"","sources":["../../src/services/theme-provider-service.spec.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "10.0.35",
+  "version": "11.0.0",
   "description": "Common UI components for FuryStack Shades",
   "type": "module",
   "scripts": {
@@ -46,7 +46,7 @@
   "dependencies": {
     "@furystack/core": "^15.0.34",
     "@furystack/inject": "^12.0.28",
-    "@furystack/shades": "^11.0.35",
+    "@furystack/shades": "^11.1.0",
     "@furystack/utils": "^8.1.9",
     "path-to-regexp": "^8.3.0",
     "semaphore-async-await": "^1.5.1"

package/src/components/animations.spec.ts

@@ -0,0 +1,299 @@
+import { sleepAsync } from '@furystack/utils'
+import { describe, expect, it, vi } from 'vitest'
+import { collapse, expand, fadeIn, fadeOut, hideSlide, showParallax, showSlide } from './animations.js'
+
+const createMockElement = (scrollHeight = 100) => {
+  const el = document.createElement('div')
+  const onfinish = vi.fn<() => void>()
+  const oncancel = vi.fn<() => void>()
+  const animate = vi.fn(() => {
+    const animation = {
+      onfinish,
+      oncancel,
+    }
+    void sleepAsync(10).then(() => {
+      animation.onfinish()
+    })
+    return animation
+  })
+  Object.defineProperty(el, 'animate', { value: animate, writable: true })
+  Object.defineProperty(el, 'scrollHeight', { value: scrollHeight, writable: true })
+  return { el, animate, onfinish, oncancel }
+}
+
+describe('animations', () => {
+  describe('showSlide', () => {
+    it('should animate element with slide-in keyframes', async () => {
+      const { el, animate } = createMockElement()
+
+      await showSlide(el)
+
+      expect(animate).toHaveBeenCalledWith(
+        [
+          { transform: 'translate(-350px, 0)scale(0)', opacity: 0 },
+          { transform: 'translate(0, 0)scale(1)', opacity: 1 },
+        ],
+        expect.objectContaining({
+          duration: 500,
+          easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+          fill: 'forwards',
+        }),
+      )
+    })
+
+    it('should merge custom options', async () => {
+      const { el, animate } = createMockElement()
+
+      await showSlide(el, { duration: 1000, delay: 200 })
+
+      expect(animate).toHaveBeenCalledWith(
+        expect.any(Array),
+        expect.objectContaining({
+          duration: 1000,
+          delay: 200,
+          easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+          fill: 'forwards',
+        }),
+      )
+    })
+
+    it('should reject when element is null', async () => {
+      await expect(showSlide(null)).rejects.toThrow('No element provided')
+    })
+
+    it('should reject when element is undefined', async () => {
+      await expect(showSlide(undefined)).rejects.toThrow('No element provided')
+    })
+  })
+
+  describe('hideSlide', () => {
+    it('should animate element with slide-out keyframes', async () => {
+      const { el, animate } = createMockElement()
+
+      await hideSlide(el)
+
+      expect(animate).toHaveBeenCalledWith(
+        [
+          { transform: 'translate(0, 0)scale(1)', opacity: 1 },
+          { transform: 'translate(-350px, 0)scale(0)', opacity: 0 },
+        ],
+        expect.objectContaining({
+          duration: 500,
+          easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+          fill: 'forwards',
+        }),
+      )
+    })
+
+    it('should merge custom options', async () => {
+      const { el, animate } = createMockElement()
+
+      await hideSlide(el, { duration: 300 })
+
+      expect(animate).toHaveBeenCalledWith(
+        expect.any(Array),
+        expect.objectContaining({
+          duration: 300,
+        }),
+      )
+    })
+
+    it('should reject when element is null', async () => {
+      await expect(hideSlide(null)).rejects.toThrow('No element provided')
+    })
+  })
+
+  describe('fadeOut', () => {
+    it('should animate element with fade-out keyframes', async () => {
+      const { el, animate } = createMockElement()
+
+      await fadeOut(el)
+
+      expect(animate).toHaveBeenCalledWith(
+        [{ opacity: 1 }, { opacity: 0 }],
+        expect.objectContaining({
+          duration: 500,
+          easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
+        }),
+      )
+    })
+
+    it('should merge custom options', async () => {
+      const { el, animate } = createMockElement()
+
+      await fadeOut(el, { duration: 200, fill: 'both' })
+
+      expect(animate).toHaveBeenCalledWith(
+        expect.any(Array),
+        expect.objectContaining({
+          duration: 200,
+          fill: 'both',
+        }),
+      )
+    })
+
+    it('should reject when element is null', async () => {
+      await expect(fadeOut(null)).rejects.toThrow('No element provided')
+    })
+  })
+
+  describe('fadeIn', () => {
+    it('should animate element with fade-in keyframes', async () => {
+      const { el, animate } = createMockElement()
+
+      await fadeIn(el)
+
+      expect(animate).toHaveBeenCalledWith(
+        [{ opacity: 0 }, { opacity: 1 }],
+        expect.objectContaining({
+          duration: 500,
+          easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
+        }),
+      )
+    })
+
+    it('should merge custom options', async () => {
+      const { el, animate } = createMockElement()
+
+      await fadeIn(el, { duration: 800, easing: 'linear' })
+
+      expect(animate).toHaveBeenCalledWith(
+        expect.any(Array),
+        expect.objectContaining({
+          duration: 800,
+          easing: 'linear',
+        }),
+      )
+    })
+
+    it('should reject when element is null', async () => {
+      await expect(fadeIn(null)).rejects.toThrow('No element provided')
+    })
+  })
+
+  describe('showParallax', () => {
+    it('should animate element with parallax keyframes', async () => {
+      const { el, animate } = createMockElement()
+
+      await showParallax(el)
+
+      expect(animate).toHaveBeenCalledWith(
+        [
+          { transform: 'translate(50px, 0)', opacity: 0 },
+          { transform: 'translate(0, 0)', opacity: 1 },
+        ],
+        expect.objectContaining({
+          duration: 900,
+          easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+          fill: 'forwards',
+        }),
+      )
+    })
+
+    it('should merge custom options', async () => {
+      const { el, animate } = createMockElement()
+
+      await showParallax(el, { duration: 1200 })
+
+      expect(animate).toHaveBeenCalledWith(
+        expect.any(Array),
+        expect.objectContaining({
+          duration: 1200,
+        }),
+      )
+    })
+
+    it('should reject when element is null', async () => {
+      await expect(showParallax(null)).rejects.toThrow('No element provided')
+    })
+  })
+
+  describe('collapse', () => {
+    it('should animate element with collapse keyframes using scrollHeight', async () => {
+      const { el, animate } = createMockElement(150)
+
+      await collapse(el)
+
+      expect(animate).toHaveBeenCalledWith(
+        [
+          { height: '150px', opacity: 1 },
+          { height: '0px', opacity: 0 },
+        ],
+        expect.objectContaining({
+          duration: 500,
+          easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+          fill: 'forwards',
+        }),
+      )
+    })
+
+    it('should merge custom options', async () => {
+      const { el, animate } = createMockElement()
+
+      await collapse(el, { duration: 250 })
+
+      expect(animate).toHaveBeenCalledWith(
+        expect.any(Array),
+        expect.objectContaining({
+          duration: 250,
+        }),
+      )
+    })
+
+    it('should reject when element is null', async () => {
+      await expect(collapse(null)).rejects.toThrow('No element provided')
+    })
+
+    it('should handle zero scrollHeight', async () => {
+      const { el, animate } = createMockElement(0)
+
+      await collapse(el)
+
+      expect(animate).toHaveBeenCalledWith(
+        [
+          { height: '0px', opacity: 1 },
+          { height: '0px', opacity: 0 },
+        ],
+        expect.any(Object),
+      )
+    })
+  })
+
+  describe('expand', () => {
+    it('should animate element with expand keyframes using scrollHeight', async () => {
+      const { el, animate } = createMockElement(200)
+
+      await expand(el)
+
+      expect(animate).toHaveBeenCalledWith(
+        [
+          { height: '0px', opacity: 0 },
+          { height: '200px', opacity: 1 },
+        ],
+        expect.objectContaining({
+          duration: 500,
+          easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+          fill: 'forwards',
+        }),
+      )
+    })
+
+    it('should merge custom options', async () => {
+      const { el, animate } = createMockElement()
+
+      await expand(el, { duration: 400, fill: 'both' })
+
+      expect(animate).toHaveBeenCalledWith(
+        expect.any(Array),
+        expect.objectContaining({
+          duration: 400,
+          fill: 'both',
+        }),
+      )
+    })
+
+    it('should reject when element is null', async () => {
+      await expect(expand(null)).rejects.toThrow('No element provided')
+    })
+  })
+})