@agnos-ui/core 0.0.1-alpha.0

package/dist/lib/transitions/baseTransitions.js

@@ -0,0 +1,171 @@
+import { batch, computed, derived, writable } from '@amadeus-it-group/tansu';
+import { bindableDerived, createStoreDirective, directiveSubscribe, directiveUpdate, mergeDirectives, stateStores, writablesForProps, } from '../services';
+import { typeBoolean, typeFunction } from '../services/writables';
+const noop = () => { };
+const neverEndingPromise = new Promise(noop);
+export const noAnimation = async (element, direction) => {
+    element.style.display = direction === 'show' ? '' : 'none';
+};
+const defaultValues = {
+    animation: true,
+    animationOnInit: false,
+    initDone: null,
+    visible: true,
+    transition: noAnimation,
+    onShown: noop,
+    onHidden: noop,
+    onVisibleChange: noop,
+};
+const configValidator = {
+    animation: typeBoolean,
+    animationOnInit: typeBoolean,
+    visible: typeBoolean,
+    transition: typeFunction,
+    onShown: typeFunction,
+    onHidden: typeFunction,
+};
+const promiseWithResolve = () => {
+    let resolve;
+    const promise = new Promise((r) => {
+        resolve = r;
+    });
+    return { promise, resolve: resolve };
+};
+export const createTransition = (config) => {
+    const [{ animation$, initDone$, visible$: requestedVisible$, transition$, onShown$, onHidden$, onVisibleChange$, animationOnInit$ }, patch] = writablesForProps(defaultValues, config, configValidator);
+    const { element$, directive: storeDirective } = createStoreDirective();
+    const elementPresent$ = computed(() => !!element$());
+    const visible$ = bindableDerived(onVisibleChange$, [requestedVisible$], ([visible]) => visible);
+    const currentTransition$ = writable(null);
+    const transitioning$ = computed(() => !!currentTransition$());
+    const stop = () => {
+        let context;
+        currentTransition$.update((currentTransition) => {
+            currentTransition?.abort.abort();
+            context = currentTransition?.context;
+            return null;
+        });
+        return context;
+    };
+    const runTransition = (visible, animation, element, transitionFn) => batch(() => {
+        const abort = new AbortController();
+        const signal = abort.signal;
+        const context = stop() ?? {};
+        const { promise, resolve } = promiseWithResolve();
+        const currentTransition = {
+            abort,
+            animation,
+            visible,
+            context,
+            element,
+            transitionFn,
+            promise,
+        };
+        currentTransition$.set(currentTransition);
+        resolve((async () => {
+            try {
+                await transitionFn(element, visible ? 'show' : 'hide', animation, signal, context);
+            }
+            finally {
+                if (signal.aborted) {
+                    await neverEndingPromise;
+                }
+                else {
+                    currentTransition$.set(null);
+                    (visible ? onShown$ : onHidden$)()?.();
+                }
+            }
+        })());
+        return currentTransition;
+    });
+    const shown$ = computed(() => !transitioning$() && visible$() && elementPresent$());
+    const hidden$ = computed(() => !transitioning$() && !visible$());
+    const effectiveAnimation$ = computed(() => (initDone$() ? animation$() : animationOnInit$()));
+    const animationFromToggle$ = writable(null);
+    let previousElement;
+    let previousVisible = requestedVisible$();
+    let pendingTransition = null;
+    const visibleAction$ = derived([visible$, element$, effectiveAnimation$, animationFromToggle$, transition$, currentTransition$], ([visible, element, animation, animationFromToggle, transition, currentTransition]) => {
+        const elementChanged = previousElement !== element;
+        previousElement = element;
+        const visibleChanged = previousVisible !== visible;
+        previousVisible = visible;
+        if (element) {
+            if (initDone$() == null) {
+                initDone$.set(true);
+            }
+            const interruptAnimation = animationFromToggle != null && currentTransition && currentTransition.animation != animationFromToggle;
+            if (elementChanged || visibleChanged || interruptAnimation) {
+                if (visibleChanged || animationFromToggle != null) {
+                    pendingTransition = null;
+                }
+                const animate = animationFromToggle ?? pendingTransition?.animation ?? (elementChanged && !visible ? false : animation);
+                currentTransition = runTransition(visible, animate, element, transition);
+                pendingTransition?.resolve(currentTransition.promise);
+                pendingTransition = null;
+            }
+        }
+        else {
+            if (elementChanged) {
+                // just removed from the DOM: stop animation if any
+                stop();
+                currentTransition = null;
+            }
+            if (visibleChanged || (visible && pendingTransition?.animation !== animationFromToggle)) {
+                pendingTransition =
+                    visible && animationFromToggle != null
+                        ? {
+                            // toggle was called to display the element, but the element is not yet in the DOM
+                            // let's keep the animation setting from toggle and provide the promise for the end of toggle
+                            animation: animationFromToggle,
+                            ...promiseWithResolve(),
+                        }
+                        : null;
+            }
+        }
+        return pendingTransition?.promise ?? currentTransition?.promise;
+    });
+    let lastToggle = {};
+    const toggle = async (visible = !requestedVisible$(), animation = effectiveAnimation$()) => {
+        const currentToggle = {};
+        lastToggle = currentToggle;
+        try {
+            await batch(() => {
+                try {
+                    animationFromToggle$.set(animation);
+                    requestedVisible$.set(visible);
+                    return visibleAction$();
+                }
+                finally {
+                    animationFromToggle$.set(null);
+                }
+            });
+        }
+        finally {
+            if (lastToggle !== currentToggle) {
+                await neverEndingPromise;
+            }
+        }
+    };
+    const directive = mergeDirectives(storeDirective, directiveUpdate(patch), directiveSubscribe(visibleAction$));
+    return {
+        ...stateStores({
+            visible$,
+            element$,
+            elementPresent$,
+            transitioning$,
+            shown$,
+            hidden$,
+        }),
+        patch,
+        directives: {
+            directive,
+        },
+        actions: {},
+        api: {
+            show: toggle.bind(null, true),
+            hide: toggle.bind(null, false),
+            toggle,
+        },
+    };
+};

package/dist/lib/transitions/bootstrap/collapse.d.ts

@@ -0,0 +1,2 @@
+export declare const collapseVerticalTransition: import("..").TransitionFn;
+export declare const collapseHorizontalTransition: import("..").TransitionFn;

package/dist/lib/transitions/bootstrap/collapse.js

@@ -0,0 +1,15 @@
+import { createCollapseTransition } from '../collapse';
+const verticalConfig = {
+    dimension: 'height',
+    hideClasses: ['collapse'],
+    showClasses: ['collapse', 'show'],
+    animationPendingClasses: ['collapsing'],
+};
+const horizontalConfig = {
+    dimension: 'width',
+    hideClasses: ['collapse', 'collapse-horizontal'],
+    showClasses: ['collapse', 'collapse-horizontal', 'show'],
+    animationPendingClasses: ['collapsing', 'collapse-horizontal'],
+};
+export const collapseVerticalTransition = createCollapseTransition(verticalConfig);
+export const collapseHorizontalTransition = createCollapseTransition(horizontalConfig);

package/dist/lib/transitions/bootstrap/fade.d.ts

@@ -0,0 +1 @@
+export declare const fadeTransition: import("..").TransitionFn;

package/dist/lib/transitions/bootstrap/fade.js

@@ -0,0 +1,7 @@
+import { createSimpleClassTransition } from '../simpleClassTransition';
+export const fadeTransition = createSimpleClassTransition({
+    animationPendingClasses: ['fade'],
+    animationPendingShowClasses: ['show'],
+    showClasses: ['show'],
+    hideClasses: ['d-none'],
+});

package/dist/lib/transitions/bootstrap/index.d.ts

@@ -0,0 +1,2 @@
+export * from './collapse';
+export * from './fade';

package/dist/lib/transitions/bootstrap/index.js

@@ -0,0 +1,2 @@
+export * from './collapse';
+export * from './fade';

package/dist/lib/transitions/collapse.d.ts

@@ -0,0 +1,29 @@
+export interface CollapseContext {
+    /**
+     * the maximum size of the collapseable content.
+     */
+    maxSize?: string;
+    /**
+     * the minimum size of the collapseable content
+     */
+    minSize?: string;
+}
+export interface CollapseConfig {
+    /**
+     * the direction in which the collapsing is performed
+     */
+    dimension?: 'width' | 'height';
+    /**
+     * the list of classes to add to the collapsable element when shown
+     */
+    showClasses?: string[];
+    /**
+     * the list of classes to add to the collapsable element when collapsed
+     */
+    hideClasses?: string[];
+    /**
+     * the list of classes to add to the collapsable element while transitioning
+     */
+    animationPendingClasses?: string[];
+}
+export declare const createCollapseTransition: ({ dimension, showClasses, hideClasses, animationPendingClasses }?: CollapseConfig) => import("./baseTransitions").TransitionFn;

package/dist/lib/transitions/collapse.js

@@ -0,0 +1,39 @@
+import { createCSSTransition } from './cssTransitions';
+import { addClasses, reflow, removeClasses } from './utils';
+export const createCollapseTransition = ({ dimension = 'height', showClasses, hideClasses, animationPendingClasses } = {}) => createCSSTransition((element, direction, animation, context) => {
+    if (animation) {
+        let { maxSize, minSize } = context;
+        if (!maxSize) {
+            // measure the element in its show state
+            removeClasses(element, animationPendingClasses);
+            removeClasses(element, hideClasses);
+            addClasses(element, showClasses);
+            maxSize = element.getBoundingClientRect()[dimension] + 'px';
+            context.maxSize = maxSize;
+        }
+        if (!minSize) {
+            // measure the element in its hide state
+            removeClasses(element, animationPendingClasses);
+            removeClasses(element, showClasses);
+            addClasses(element, hideClasses);
+            minSize = element.getBoundingClientRect()[dimension] + 'px';
+            context.minSize = minSize;
+        }
+        removeClasses(element, showClasses);
+        removeClasses(element, hideClasses);
+        const values = direction === 'show' ? [minSize, maxSize] : [maxSize, minSize];
+        element.style[dimension] = values[0];
+        reflow(element); // explicitly applies the initial state
+        addClasses(element, animationPendingClasses);
+        reflow(element);
+        element.style[dimension] = values[1];
+    }
+    else {
+        removeClasses(element, direction === 'show' ? hideClasses : showClasses);
+    }
+    return () => {
+        removeClasses(element, animationPendingClasses);
+        addClasses(element, direction === 'show' ? showClasses : hideClasses);
+        element.style[dimension] = '';
+    };
+});

package/dist/lib/transitions/cssTransitions.d.ts

@@ -0,0 +1,15 @@
+import type { TransitionFn } from './baseTransitions';
+/**
+ * Check if the provided html element has a transition
+ * @param element - the html element
+ * @returns true if the element has a transition
+ */
+export declare function hasTransition(element: HTMLElement): boolean;
+/**
+ * Retrieve the transition duration of the provided html element in milli seconds
+ * @param element - the html element
+ * @returns transition duration in milli seconds
+ */
+export declare function getTransitionDurationMs(element: HTMLElement): number;
+export type CSSTransitionFn = (element: HTMLElement, direction: 'show' | 'hide', animation: boolean, context: object) => void | (() => void);
+export declare const createCSSTransition: (start: CSSTransitionFn) => TransitionFn;

package/dist/lib/transitions/cssTransitions.js

@@ -0,0 +1,38 @@
+import { promiseFromEvent, promiseFromTimeout } from './utils';
+/**
+ * Check if the provided html element has a transition
+ * @param element - the html element
+ * @returns true if the element has a transition
+ */
+export function hasTransition(element) {
+    return window.getComputedStyle(element).transitionProperty !== 'none';
+}
+/**
+ * Retrieve the transition duration of the provided html element in milli seconds
+ * @param element - the html element
+ * @returns transition duration in milli seconds
+ */
+export function getTransitionDurationMs(element) {
+    const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
+    const transitionDelaySec = parseFloat(transitionDelay);
+    const transitionDurationSec = parseFloat(transitionDuration);
+    return (transitionDelaySec + transitionDurationSec) * 1000;
+}
+const noop = () => {
+    /* do nothing */
+};
+export const createCSSTransition = (start) => async (element, direction, animation, signal, context) => {
+    const endFn = start(element, direction, animation, context) ?? noop;
+    if (animation && hasTransition(element)) {
+        const abort = promiseFromEvent(signal, 'abort');
+        const transitionEnd = promiseFromEvent(element, 'transitionend');
+        const timer = promiseFromTimeout(getTransitionDurationMs(element));
+        await Promise.race([abort.promise, transitionEnd.promise, timer.promise]);
+        abort.unsubscribe();
+        transitionEnd.unsubscribe();
+        timer.unsubscribe();
+    }
+    if (!signal.aborted) {
+        endFn();
+    }
+};

package/dist/lib/transitions/index.d.ts

@@ -0,0 +1,5 @@
+export * from './baseTransitions';
+export * from './cssTransitions';
+export * from './simpleClassTransition';
+import * as bootstrap from './bootstrap';
+export { bootstrap };

package/dist/lib/transitions/index.js

@@ -0,0 +1,5 @@
+export * from './baseTransitions';
+export * from './cssTransitions';
+export * from './simpleClassTransition';
+import * as bootstrap from './bootstrap';
+export { bootstrap };

package/dist/lib/transitions/simpleClassTransition.d.ts

@@ -0,0 +1,29 @@
+export interface SimpleClassTransitionConfig {
+    /**
+     * a list of classes to add to the collapsable element while transitioning
+     */
+    animationPendingClasses?: string[];
+    /**
+     * a list of classes to add to the collapsable element while transitioning towards the show state
+     */
+    animationPendingShowClasses?: string[];
+    /**
+     * a list of classes to add to the collapsable element while transitioning towards the hide state
+     */
+    animationPendingHideClasses?: string[];
+    /**
+     * the list of classes to add to the element when shown
+     */
+    showClasses?: string[];
+    /**
+     * the list of classes to add to the element when hidden
+     */
+    hideClasses?: string[];
+}
+export interface SimpleClassTransitionContext {
+    /**
+     * `true` is the transition has started
+     */
+    started?: boolean;
+}
+export declare const createSimpleClassTransition: ({ animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses, }: SimpleClassTransitionConfig) => import("./baseTransitions").TransitionFn;

package/dist/lib/transitions/simpleClassTransition.js

@@ -0,0 +1,28 @@
+import { createCSSTransition } from './cssTransitions';
+import { addClasses, reflow, removeClasses } from './utils';
+export const createSimpleClassTransition = ({ animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses, }) => createCSSTransition((element, direction, animation, context) => {
+    removeClasses(element, showClasses);
+    removeClasses(element, hideClasses);
+    if (animation) {
+        removeClasses(element, direction === 'show' ? animationPendingHideClasses : animationPendingShowClasses);
+        if (!context.started) {
+            context.started = true;
+            // if the animation is starting, explicitly sets the initial state (reverse of the direction)
+            // so that it is not impacted by another reflow done somewhere else before we had time to put
+            // the right classes:
+            const classes = direction === 'show' ? hideClasses : showClasses;
+            addClasses(element, classes);
+            reflow(element);
+            removeClasses(element, classes);
+        }
+        addClasses(element, animationPendingClasses);
+        reflow(element);
+        addClasses(element, direction === 'show' ? animationPendingShowClasses : animationPendingHideClasses);
+    }
+    return () => {
+        removeClasses(element, animationPendingClasses);
+        removeClasses(element, animationPendingShowClasses);
+        removeClasses(element, animationPendingHideClasses);
+        addClasses(element, direction === 'show' ? showClasses : hideClasses);
+    };
+});

package/dist/lib/transitions/utils.d.ts

@@ -0,0 +1,20 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+export declare const promiseFromStore: <T>(store: ReadableSignal<T>, condition?: (value: T) => boolean) => {
+    promise: Promise<T>;
+    unsubscribe(): void;
+};
+export declare const promiseFromEvent: (element: EventTarget, event: string) => {
+    promise: Promise<Event>;
+    unsubscribe(): void;
+};
+export declare const promiseFromTimeout: (delay: number) => {
+    promise: Promise<void>;
+    unsubscribe(): void;
+};
+/**
+ * Launch a reflow using a call to the provided html element getBoudingClientRect
+ * @param element the html element
+ */
+export declare function reflow(element?: HTMLElement): void;
+export declare const addClasses: (element: HTMLElement, classes?: string[]) => void;
+export declare const removeClasses: (element: HTMLElement, classes?: string[]) => void;

package/dist/lib/transitions/utils.js

@@ -0,0 +1,83 @@
+const noop = () => {
+    /* nothing to do*/
+};
+const truthyValue = (value) => !!value;
+export const promiseFromStore = (store, condition = truthyValue) => {
+    let resolve;
+    const promise = new Promise((r) => (resolve = r));
+    let unsubscribe = () => {
+        storeUnsubscribe();
+        unsubscribe = noop;
+    };
+    let storeUnsubscribe = noop;
+    storeUnsubscribe = store.subscribe((value) => {
+        if (condition(value)) {
+            resolve(value);
+            unsubscribe();
+        }
+    });
+    if (unsubscribe === noop) {
+        storeUnsubscribe();
+    }
+    return {
+        promise,
+        unsubscribe() {
+            unsubscribe();
+        },
+    };
+};
+export const promiseFromEvent = (element, event) => {
+    let resolve;
+    const promise = new Promise((r) => (resolve = r));
+    let unsubscribe = () => {
+        element.removeEventListener(event, eventListener);
+        unsubscribe = noop;
+    };
+    const eventListener = (event) => {
+        if (event.target === element) {
+            resolve(event);
+            unsubscribe();
+        }
+    };
+    element.addEventListener(event, eventListener);
+    return {
+        promise,
+        unsubscribe() {
+            unsubscribe();
+        },
+    };
+};
+export const promiseFromTimeout = (delay) => {
+    let timeout;
+    return {
+        promise: new Promise((r) => {
+            timeout = setTimeout(() => {
+                timeout = undefined;
+                r();
+            }, delay);
+        }),
+        unsubscribe() {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = undefined;
+            }
+        },
+    };
+};
+/**
+ * Launch a reflow using a call to the provided html element getBoudingClientRect
+ * @param element the html element
+ */
+export function reflow(element = document.body) {
+    element.getBoundingClientRect();
+}
+export const addClasses = (element, classes) => {
+    if (classes && classes.length > 0) {
+        element.classList.add(...classes);
+    }
+};
+export const removeClasses = (element, classes) => {
+    if (classes && classes.length > 0) {
+        element.classList.remove(...classes);
+    }
+};

package/dist/lib/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.36.4"
+    }
+  ]
+}

package/dist/lib/types.d.ts

@@ -0,0 +1,58 @@
+import type { ReadableSignal, SubscribableStore } from '@amadeus-it-group/tansu';
+import type { PropsConfig } from './services';
+export interface Widget<Props extends object = object, State extends object = object, Api extends object = object, Actions extends object = object, Directives extends object = object> {
+    /**
+     * the reactive state of the widget, combining all the values served by the stores
+     */
+    state$: ReadableSignal<State>;
+    /**
+     * the different stores of the widget, all reactive
+     */
+    stores: {
+        [K in keyof State as `${K & string}$`]: ReadableSignal<State[K]>;
+    };
+    /**
+     * Modify the parameter values, and recalculate the stores accordingly
+     */
+    patch(parameters: Partial<Props>): void;
+    /**
+     * directives to be used on html elements in the template of the widget or in the slots
+     */
+    directives: Directives;
+    /**
+     * all the handlers that should be connected to user interactions i.e. click, keyboard and touch interactions.
+     * typically, the handlers are event listeners that call api functions to affect the widget state
+     */
+    actions: Actions;
+    /**
+     * all the api functions to interact with the widget
+     */
+    api: Api;
+}
+export interface WidgetSlotContext<W extends Widget> {
+    /**
+     * the state of the widget
+     */
+    state: WidgetState<W>;
+    /**
+     * the widget
+     */
+    widget: Pick<W, 'actions' | 'api' | 'directives' | 'state$' | 'stores'>;
+}
+export declare const toSlotContextWidget: <W extends Widget<object, object, object, object, object>>(w: W) => Pick<W, "actions" | "api" | "directives" | "state$" | "stores">;
+export type WidgetState<T extends {
+    state$: SubscribableStore<any>;
+}> = T extends {
+    state$: SubscribableStore<infer U extends object>;
+} ? U : never;
+export type WidgetProps<T extends {
+    patch: (arg: any) => void;
+}> = T extends {
+    patch: (arg: Partial<infer U extends object>) => void;
+} ? U : never;
+export type WidgetFactory<W extends Widget> = (props?: PropsConfig<WidgetProps<W>>) => W;
+export type Directive<T = void> = (node: HTMLElement, args: T) => void | {
+    update?: (args: T) => void;
+    destroy?: () => void;
+};
+export type SlotContent<Props extends object = object> = undefined | null | string | ((props: Props) => string);

package/dist/lib/types.js

@@ -0,0 +1,7 @@
+export const toSlotContextWidget = (w) => ({
+    actions: w.actions,
+    api: w.api,
+    directives: w.directives,
+    state$: w.state$,
+    stores: w.stores,
+});

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const noop: () => void;
+export declare const identity: <T>(x: T) => T;

package/dist/lib/utils.js

@@ -0,0 +1,2 @@
+export const noop = () => { };
+export const identity = (x) => x;

package/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "@agnos-ui/core",
+	"description": "Framework-agnostic headless widget library.",
+	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
+	"keywords": [
+		"headless",
+		"agnostic",
+		"components",
+		"widgets",
+		"alert",
+		"modal",
+		"pagination",
+		"rating"
+	],
+	"type": "module",
+	"main": "./dist/lib/index.js",
+	"module": "./dist/lib/index.js",
+	"types": "./dist/lib/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/lib/index.d.ts",
+			"default": "./dist/lib/index.js"
+		}
+	},
+	"scripts": {
+		"build": "npm run build:lib && npm run build:tsc && npm run build:api-extractor",
+		"build:lib": "node ../scripts/rm.js dist/lib && tsc -p tsconfig.lib.json",
+		"build:tsc": "tsc",
+		"build:api-extractor": "api-extractor run",
+		"test": "vitest run",
+		"tdd": "vitest",
+		"tdd:ui": "vitest --ui",
+		"test:coverage": "vitest run --coverage"
+	},
+	"dependencies": {
+		"@amadeus-it-group/tansu": "0.0.22"
+	},
+	"files": [
+		"dist/lib"
+	],
+	"license": "MIT",
+	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/AmadeusITGroup/AgnosUI.git",
+		"directory": "core"
+	},
+	"devDependencies": {
+		"eslint-plugin-jsdoc": "^46.4.6"
+	},
+	"version": "0.0.1-alpha.0"
+}