@furystack/shades-common-components 11.0.0 → 12.0.0

package/esm/components/circular-progress.spec.js

@@ -0,0 +1,228 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ThemeProviderService } from '../services/theme-provider-service.js';
+import { CircularProgress } from './circular-progress.js';
+describe('CircularProgress', () => {
+    let originalAnimate;
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+        originalAnimate = Element.prototype.animate;
+        Element.prototype.animate = vi.fn((_keyframes, _options) => {
+            const mockAnimation = {
+                onfinish: null,
+                oncancel: null,
+                cancel: vi.fn(),
+                play: vi.fn(),
+                pause: vi.fn(),
+                finish: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+            };
+            return mockAnimation;
+        });
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+        Element.prototype.animate = originalAnimate;
+        vi.restoreAllMocks();
+    });
+    it('should render with shadow DOM', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CircularProgress, null),
+            });
+            await sleepAsync(50);
+            const el = document.querySelector('shade-circular-progress');
+            expect(el).not.toBeNull();
+        });
+    });
+    it('should render an SVG element', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CircularProgress, null),
+            });
+            await sleepAsync(50);
+            const svg = document.querySelector('shade-circular-progress svg');
+            expect(svg).not.toBeNull();
+        });
+    });
+    it('should render track and progress circles', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CircularProgress, null),
+            });
+            await sleepAsync(50);
+            const track = document.querySelector('shade-circular-progress .progress-track');
+            const circle = document.querySelector('shade-circular-progress .progress-circle');
+            expect(track).not.toBeNull();
+            expect(circle).not.toBeNull();
+        });
+    });
+    it('should set role="progressbar"', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(CircularProgress, null),
+            });
+            await sleepAsync(50);
+            const el = document.querySelector('shade-circular-progress');
+            expect(el.getAttribute('role')).toBe('progressbar');
+        });
+    });
+    describe('size', () => {
+        it('should use default size of 40px', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CircularProgress, null),
+                });
+                await sleepAsync(50);
+                const svg = document.querySelector('shade-circular-progress svg');
+                expect(svg.getAttribute('width')).toBe('40');
+                expect(svg.getAttribute('height')).toBe('40');
+            });
+        });
+        it('should accept custom size', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CircularProgress, { size: 60 }),
+                });
+                await sleepAsync(50);
+                const svg = document.querySelector('shade-circular-progress svg');
+                expect(svg.getAttribute('width')).toBe('60');
+                expect(svg.getAttribute('height')).toBe('60');
+            });
+        });
+    });
+    describe('determinate variant', () => {
+        it('should set aria-valuenow for determinate variant', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(50);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CircularProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-circular-progress');
+                expect(el.getAttribute('aria-valuenow')).toBe('50');
+                expect(el.getAttribute('aria-valuemin')).toBe('0');
+                expect(el.getAttribute('aria-valuemax')).toBe('100');
+            });
+        });
+        it('should clamp value to 0-100 range', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(150);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CircularProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-circular-progress');
+                expect(el.getAttribute('aria-valuenow')).toBe('100');
+            });
+        });
+        it('should update stroke-dashoffset when observable value changes', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(0);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CircularProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const circle = document.querySelector('shade-circular-progress .progress-circle');
+                const initialOffset = circle.style.strokeDashoffset;
+                value.setValue(75);
+                await sleepAsync(10);
+                const updatedOffset = circle.style.strokeDashoffset;
+                expect(updatedOffset).not.toBe(initialOffset);
+            });
+        });
+        it('should update aria-valuenow when observable value changes', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const value = new ObservableValue(20);
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CircularProgress, { variant: "determinate", value: value }),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-circular-progress');
+                expect(el.getAttribute('aria-valuenow')).toBe('20');
+                value.setValue(85);
+                await sleepAsync(10);
+                expect(el.getAttribute('aria-valuenow')).toBe('85');
+            });
+        });
+    });
+    describe('indeterminate variant', () => {
+        it('should default to indeterminate variant', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CircularProgress, null),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-circular-progress');
+                expect(el.hasAttribute('aria-valuenow')).toBe(false);
+            });
+        });
+    });
+    describe('theme integration', () => {
+        it('should set CSS color variable from theme', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CircularProgress, null),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-circular-progress');
+                const themeService = injector.getInstance(ThemeProviderService);
+                expect(el.style.getPropertyValue('--circular-progress-color')).toBe(themeService.theme.palette.primary.main);
+            });
+        });
+        it('should use custom color from color prop', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(CircularProgress, { color: "secondary" }),
+                });
+                await sleepAsync(50);
+                const el = document.querySelector('shade-circular-progress');
+                const themeService = injector.getInstance(ThemeProviderService);
+                expect(el.style.getPropertyValue('--circular-progress-color')).toBe(themeService.theme.palette.secondary.main);
+            });
+        });
+    });
+});
+//# sourceMappingURL=circular-progress.spec.js.map

package/esm/components/circular-progress.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress.spec.js","sourceRoot":"","sources":["../../src/components/circular-progress.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/command-palette/command-palette-input.d.ts

@@ -1,7 +1,10 @@
+import type { RefObject } from '@furystack/shades';
 import type { CommandPaletteManager } from './command-palette-manager.js';
 export declare const CommandPaletteInput: (props: {
     manager: CommandPaletteManager;
 } & Omit<Partial<HTMLElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: RefObject<Element>;
 }, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
 //# sourceMappingURL=command-palette-input.d.ts.map

package/esm/components/command-palette/command-palette-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette-input.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette-input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAA;AAwBzE,eAAO,MAAM,mBAAmB;aAAoB,qBAAqB;;;sEA2BvE,CAAA"}
+{"version":3,"file":"command-palette-input.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAIlD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAA;AA6BzE,eAAO,MAAM,mBAAmB;aAAoB,qBAAqB;;;;;sEAqCvE,CAAA"}

package/esm/components/command-palette/command-palette-input.js

@@ -1,12 +1,13 @@
 import { Shade, createComponent } from '@furystack/shades';
 import { cssVariableTheme } from '../../services/css-variable-theme.js';
 import { promisifyAnimation } from '../../utils/promisify-animation.js';
-const updateComponent = async (element, isOpened) => {
-    const input = element.firstChild;
-    if (input) {
+const animateOpenState = async (wrapperRef, inputRef, isOpened) => {
+    const wrapper = wrapperRef.current;
+    const input = inputRef.current;
+    if (wrapper && input) {
         if (isOpened) {
             input.value = '';
-            await promisifyAnimation(element, [{ width: '0%' }, { width: '100%' }], {
+            await promisifyAnimation(wrapper, [{ width: '0%' }, { width: '100%' }], {
                 duration: 300,
                 fill: 'forwards',
                 easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
@@ -14,7 +15,7 @@ const updateComponent = async (element, isOpened) => {
             input.focus();
         }
         else {
-            await promisifyAnimation(element, [{ width: '100%' }, { width: '0%' }], {
+            await promisifyAnimation(wrapper, [{ width: '100%' }, { width: '0%' }], {
                 duration: 300,
                 fill: 'forwards',
                 easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
@@ -26,7 +27,11 @@ const updateComponent = async (element, isOpened) => {
 export const CommandPaletteInput = Shade({
     shadowDomName: 'shades-command-palette-input',
     css: {
+        width: '0%',
         overflow: 'hidden',
+        '&[data-opened]': {
+            width: '100%',
+        },
         '& input': {
             color: cssVariableTheme.text.primary,
             outline: 'none',
@@ -40,13 +45,16 @@ export const CommandPaletteInput = Shade({
             letterSpacing: '0.01em',
         },
     },
-    render: ({ element, props, useObservable }) => {
+    render: ({ props, useObservable, useRef, useHostProps }) => {
         const { manager } = props;
+        const wrapperRef = useRef('wrapper');
+        const inputRef = useRef('input');
         const [isCurrentlyOpened] = useObservable('isOpened', manager.isOpened, {
-            onChange: (newValue) => void updateComponent(element, newValue),
+            onChange: (newValue) => void animateOpenState(wrapperRef, inputRef, newValue),
         });
-        element.style.width = isCurrentlyOpened ? '100%' : '0%';
-        return createComponent("input", { autofocus: true, placeholder: "Type to search commands..." });
+        useHostProps({ ...(isCurrentlyOpened ? { 'data-opened': '' } : {}) });
+        return (createComponent("div", { ref: wrapperRef, style: { width: isCurrentlyOpened ? '100%' : '0%', overflow: 'hidden' } },
+            createComponent("input", { ref: inputRef, autofocus: true, placeholder: "Type to search commands..." })));
     },
 });
 //# sourceMappingURL=command-palette-input.js.map

package/esm/components/command-palette/command-palette-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette-input.js","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAGvE,MAAM,eAAe,GAAG,KAAK,EAAE,OAAoB,EAAE,QAAiB,EAAE,EAAE;IACxE,MAAM,KAAK,GAAG,OAAO,CAAC,UAAqC,CAAA;IAC3D,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,QAAQ,EAAE,CAAC;YACb,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;YAChB,MAAM,kBAAkB,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE;gBACtE,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,0CAA0C;aACnD,CAAC,CAAA;YACF,KAAK,CAAC,KAAK,EAAE,CAAA;QACf,CAAC;aAAM,CAAC;YACN,MAAM,kBAAkB,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;gBACtE,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,0CAA0C;aACnD,CAAC,CAAA;YACF,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;QAClB,CAAC;IACH,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAqC;IAC3E,aAAa,EAAE,8BAA8B;IAC7C,GAAG,EAAE;QACH,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE;YACT,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,OAAO;YACpC,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,eAAe;YACxB,UAAU,EAAE,aAAa;YACzB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,aAAa;YACtB,KAAK,EAAE,kBAAkB;YACzB,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,QAAQ;SACxB;KACF;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE;QAC5C,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;QAEzB,MAAM,CAAC,iBAAiB,CAAC,GAAG,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,QAAQ,EAAE;YACtE,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAK,eAAe,CAAC,OAAO,EAAE,QAAQ,CAAC;SAChE,CAAC,CAAA;QACF,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;QAEvD,OAAO,2BAAO,SAAS,QAAC,WAAW,EAAC,4BAA4B,GAAG,CAAA;IACrE,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"command-palette-input.js","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette-input.tsx"],"names":[],"mappings":"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"}