@homecode/ui 4.11.1

package/dist/esm/src/services/i18n.js

@@ -0,0 +1,68 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { nanoid } from 'nanoid';
+import { createStore, withStore } from 'justorm/react';
+import _i18n from 'roddeh-i18n';
+import LS from '../tools/localStorage.js';
+import { queryParams } from '../tools/queryParams.js';
+
+const DEFAULT_LANG = 'en';
+const modules = {};
+const queryLang = queryParams.lang;
+if (queryLang)
+    LS.set('lang', queryLang);
+const store = createStore('i18n', {
+    lang: LS.get('lang') ?? DEFAULT_LANG,
+    async changeLang(lang) {
+        // TODO: use WebWorker for requests?
+        const requests = modules[lang].map(loader => loader());
+        await Promise.all(requests);
+        modules[lang] = [];
+        this.lang = lang;
+        LS.set('lang', lang);
+    },
+});
+function init(config) {
+    const langs = Object.keys(config);
+    const texts = langs.reduce((acc, lang) => ({ ...acc, [lang]: _i18n.create({ values: {} }) }), {});
+    const _getText = (lang, key, props) => {
+        if (texts[lang]?.translator.data.values[key]) {
+            return texts[lang](key, ...props);
+        }
+        return null;
+    };
+    function getTrans(key, props = []) {
+        return _getText(store.lang, key, props) || key;
+    }
+    const storeName = `i18n-${nanoid()}`;
+    const componentStore = createStore(storeName, { _updated: '' });
+    const callLoader = async (loader, lang) => {
+        const values = typeof loader === 'function' ? (await loader()).default : loader;
+        texts[lang].translator.add({ values });
+        componentStore._updated = nanoid();
+    };
+    Object.entries(config).forEach(([lang, loader]) => {
+        if (!modules[lang])
+            modules[lang] = [];
+        if (lang === store.lang)
+            return callLoader(loader, lang);
+        modules[lang].push(() => callLoader(loader, lang));
+    });
+    // TODO: revert ability to register modules
+    return {
+        storeName,
+        componentStore,
+        // hook (update when componentStore._updated changed)
+        withI18N: Component => withStore(storeName)(Component),
+        i18n: (key, props) => getTrans(key, props),
+        I18N: memo(withStore({
+            i18n: ['lang'],
+            [storeName]: true,
+        })(function I18N({ id, children, props }) {
+            const key = id ?? children;
+            return jsx(Fragment, { children: getTrans(key, props) });
+        })),
+    };
+}
+
+export { init, store };

package/dist/esm/src/tools/array.js

@@ -0,0 +1,60 @@
+function indexWhere(arr, val, fieldName) {
+    if (!fieldName) {
+        return arr.indexOf(val);
+    }
+    const isValObj = typeof val === 'object';
+    let index = -1;
+    arr.some((d, i) => {
+        const dVal = isValObj ? val?.[fieldName] : val;
+        if (d?.[fieldName] === dVal) {
+            index = i;
+            return true;
+        }
+        return false;
+    });
+    return index;
+}
+function sliceWhere([...arr], val, fieldName) {
+    spliceWhere(arr, val, fieldName);
+    return arr;
+}
+function spliceWhere(arr, val, fieldName) {
+    const index = indexWhere(arr, val, fieldName);
+    if (index > -1)
+        arr.splice(index, 1);
+}
+function _addUniq({ arr, val, fieldName }, action) {
+    if (Array.isArray(val)) {
+        val.forEach(v => addUniq(arr, v, fieldName));
+        return;
+    }
+    const index = indexWhere(arr, val, fieldName);
+    if (index === -1)
+        action(val);
+}
+function addUniq(arr, val, fieldName) {
+    _addUniq({ arr, val, fieldName }, value => arr.push(value));
+}
+function unshiftUniq(arr, val, fieldName) {
+    _addUniq({ arr, val, fieldName }, value => arr.unshift(value));
+}
+function insert(baseArr, targetArr, startIndex) {
+    return [
+        ...baseArr.slice(0, startIndex),
+        ...targetArr,
+        ...baseArr.slice(startIndex + targetArr.length),
+    ];
+}
+function getIndexCircular(arr, index) {
+    const l = arr.length;
+    return arr[((index % l) + l) % l];
+}
+function circularSlice(arr, startIndex, count) {
+    const newArr = [];
+    for (let i = 0; i < count; i++) {
+        newArr.push(getIndexCircular(arr, startIndex + i));
+    }
+    return newArr;
+}
+
+export { addUniq, circularSlice, getIndexCircular, indexWhere, insert, sliceWhere, spliceWhere, unshiftUniq };

package/dist/esm/src/tools/config.js

@@ -0,0 +1,9 @@
+const config = {
+    appRootId: 'app-root',
+    appOverlayId: 'app-modal',
+    configure(params) {
+        Object.assign(this, params);
+    },
+};
+
+export { config };

package/dist/esm/src/tools/debounce.js

@@ -0,0 +1,11 @@
+import Time from 'timen';
+
+function debounce(fn, ms) {
+    let unsubscribeFn;
+    return function debounced(...args) {
+        unsubscribeFn?.();
+        unsubscribeFn = Time.after(ms, () => fn.apply(this, args));
+    };
+}
+
+export { debounce as default };

package/dist/esm/src/tools/dom.js

@@ -0,0 +1,46 @@
+import { isBrowser } from './env.js';
+import 'nanoid';
+import 'timen';
+import 'compareq';
+import 'lodash.pick';
+import './queryParams.js';
+
+function getCoords(elem) {
+    const box = elem.getBoundingClientRect();
+    return {
+        top: box.top + window.pageYOffset,
+        left: box.left + window.pageXOffset,
+    };
+}
+function hasParent(elem, parentElem) {
+    const isEqual = elem === parentElem;
+    if (isEqual || elem.nodeName === 'HTML') {
+        return isEqual;
+    }
+    return hasParent(elem.parentNode, parentElem);
+}
+var INTERACTION_MODE;
+(function (INTERACTION_MODE) {
+    INTERACTION_MODE["POINTER"] = "pointer";
+    INTERACTION_MODE["KEYBOARD"] = "keyboard";
+})(INTERACTION_MODE || (INTERACTION_MODE = {}));
+let interactionMode = INTERACTION_MODE.POINTER;
+const getInteractionMode = () => interactionMode;
+function watchControllerFlag() {
+    const classes = document.body.classList;
+    const onPointerMove = () => {
+        classes.remove(INTERACTION_MODE.KEYBOARD);
+        classes.add(INTERACTION_MODE.POINTER);
+    };
+    ['pointerdown', 'pointermove'].forEach(event => {
+        document.addEventListener(event, onPointerMove, true);
+    });
+    document.addEventListener('keydown', () => {
+        classes.remove(INTERACTION_MODE.POINTER);
+        classes.add(INTERACTION_MODE.KEYBOARD);
+    });
+    classes.add(interactionMode);
+}
+const isTouch = () => isBrowser && 'ontouchstart' in window;
+
+export { INTERACTION_MODE, getCoords, getInteractionMode, hasParent, isTouch, watchControllerFlag };

package/dist/esm/src/tools/env.js

@@ -0,0 +1,3 @@
+const isBrowser = typeof window !== 'undefined';
+
+export { isBrowser };

package/dist/esm/src/tools/file.js

@@ -0,0 +1,11 @@
+function toBase64(file) {
+    return new Promise(resolve => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        // @ts-ignore
+        reader.onerror = error => resolve({ error });
+    });
+}
+
+export { toBase64 };

package/dist/esm/src/tools/localStorage.js

@@ -0,0 +1,31 @@
+import { isBrowser } from './env.js';
+
+const ls = isBrowser && window.localStorage;
+var LS = isBrowser
+    ? {
+        get(key) {
+            let result = ls.getItem(key);
+            try {
+                result = JSON.parse(result);
+            }
+            catch (e) { }
+            return result;
+        },
+        set(key, val) {
+            if (!val) {
+                this.remove(key);
+                return;
+            }
+            const item = typeof val === 'object' ? JSON.stringify(val) : val;
+            ls.setItem(key, item);
+        },
+        remove(key) {
+            ls.removeItem(key);
+        },
+        clear() {
+            ls.clear();
+        },
+    }
+    : { get() { }, set() { }, remove() { }, clear() { } };
+
+export { LS as default };

package/dist/esm/src/tools/number.js

@@ -0,0 +1,27 @@
+const LABEL = ['', 'k', 'M', 'B'];
+function stringify(number) {
+    if (typeof number === 'string')
+        return number.match(/\d/g).join('');
+    return String(number);
+}
+const format = {
+    short(number, lv = 0) {
+        const numStr = stringify(number);
+        const level = Math.floor((numStr.length - 1) / 3);
+        if (level === 0)
+            return numStr;
+        const label = LABEL[level];
+        const num = numStr.slice(0, -level * 3);
+        return `${num}${label}`;
+    },
+    sections(number, splitter = ' ') {
+        const [whole, fractional] = stringify(number).split('.');
+        let result = whole.replace(/\B(?=(\d{3})+(?!\d))/g, splitter);
+        if (fractional !== undefined)
+            result = `${result}.${fractional}`;
+        return result;
+    },
+};
+const zero = num => num || 0;
+
+export { format, zero };

package/dist/esm/src/tools/object.js

@@ -0,0 +1,5 @@
+function clone(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+
+export { clone };

package/dist/esm/src/tools/queryParams.js

@@ -0,0 +1,20 @@
+import { isBrowser } from './env.js';
+
+const SSRQueryParams = {};
+function parseQueryParams(qs) {
+    const queryString = qs || isBrowser ? location?.search : '';
+    if (!queryString)
+        return {};
+    return [...new URLSearchParams(queryString).entries()].reduce((acc, [key, value]) => {
+        acc[key] = value;
+        return acc;
+    }, {});
+}
+const setSSRQueryParams = (params) => {
+    Object.assign(SSRQueryParams, params);
+};
+const queryParams = isBrowser
+    ? parseQueryParams()
+    : SSRQueryParams;
+
+export { parseQueryParams, queryParams, setSSRQueryParams };

package/dist/esm/src/tools/rangeMap.js

@@ -0,0 +1,3 @@
+var rangeMap = (value, x1, y1, x2, y2) => ((value - x1) * (y2 - x2)) / (y1 - x1) + x2;
+
+export { rangeMap as default };

package/dist/esm/src/tools/resizeObserver.js

@@ -0,0 +1,64 @@
+import Time from 'timen';
+import compare from 'compareq';
+import pick from 'lodash.pick';
+import { addUniq, spliceWhere } from './array.js';
+import { isBrowser } from './env.js';
+
+const ITEMS = new Map();
+const NATIVE_OBSERVERS = new Map();
+const IS_NATIVE = isBrowser && 'ResizeObserver' in window;
+const TIMEOUT = 500;
+const SIZE_FIELDS = ['offsetWidth', 'offsetHeight'];
+function check() {
+    ITEMS.forEach((item, elem) => {
+        const { sizes, listeners } = item;
+        const newSizes = pick(elem, SIZE_FIELDS);
+        if (!compare(newSizes, sizes)) {
+            item.sizes = newSizes;
+            listeners.forEach(cb => cb(newSizes, elem));
+        }
+    });
+    run();
+}
+function run() {
+    if (ITEMS.size > 0)
+        Time.after(TIMEOUT, check);
+}
+function observe(elem, cb) {
+    if (IS_NATIVE) {
+        const observer = new ResizeObserver(cb);
+        observer.observe(elem);
+        NATIVE_OBSERVERS.set(elem, observer);
+        return;
+    }
+    const data = ITEMS.get(elem);
+    if (data) {
+        addUniq(data.listeners, cb);
+        return;
+    }
+    ITEMS.set(elem, {
+        sizes: pick(elem, SIZE_FIELDS),
+        listeners: [cb],
+    });
+    if (ITEMS.size === 1)
+        run();
+}
+function unobserve(elem, cb) {
+    if (IS_NATIVE) {
+        const observer = NATIVE_OBSERVERS.get(elem);
+        if (!observer)
+            return;
+        observer.unobserve(elem);
+        NATIVE_OBSERVERS.delete(elem);
+        return;
+    }
+    const data = ITEMS.get(elem);
+    if (!cb || data?.listeners.indexOf(cb) === -1)
+        return;
+    if (data.listeners.length === 1)
+        ITEMS.delete(elem);
+    else
+        spliceWhere(data.listeners, cb);
+}
+
+export { observe, unobserve };

package/dist/esm/src/tools/scroll.js

@@ -0,0 +1,41 @@
+const METRICS_BY_AXIS = {
+    horizontal: {
+        size: 'offsetWidth',
+        scroll: 'scrollWidth',
+    },
+    vertical: {
+        size: 'offsetHeight',
+        scroll: 'scrollHeight',
+    },
+};
+function isScrollable(node, axis, threshold = 5) {
+    const m = METRICS_BY_AXIS[axis];
+    return node[m.scroll] - node[m.size] > threshold;
+}
+function getScrollParent(node, axis = 'vertical') {
+    if (node == null)
+        return null;
+    if (node.tagName === 'BODY' || isScrollable(node, axis))
+        return node;
+    return getScrollParent(node.parentNode, axis);
+}
+function scrollTo(elem, left, top) {
+    if ('scrollBehavior' in document.documentElement.style) {
+        elem.scrollTo({ left, top, behavior: 'smooth' });
+        return;
+    }
+    elem.scrollTo(left, top);
+}
+function scrollIntoView(elem, { horizontal } = { horizontal: false }) {
+    if (!elem)
+        return;
+    const scrollParent = getScrollParent(elem);
+    if (!scrollParent)
+        return;
+    const to = horizontal
+        ? elem.offsetLeft + elem.offsetWidth / 2 - scrollParent.clientWidth / 2
+        : elem.offsetTop + elem.offsetHeight / 2 - scrollParent.clientHeight / 2;
+    scrollTo(scrollParent, 0, Math.max(0, to));
+}
+
+export { getScrollParent, scrollIntoView, scrollTo };

package/dist/esm/src/tools/string.js

@@ -0,0 +1,7 @@
+function capitalize(str = '') {
+    if (typeof str !== 'string' || !str)
+        return str;
+    return `${str[0].toUpperCase()}${str.slice(1)}`;
+}
+
+export { capitalize };

package/dist/esm/src/tools/throttle.js

@@ -0,0 +1,30 @@
+import Time from 'timen';
+
+function throttle(fn, ms, { trailing, skipFirst } = {}) {
+    let isCooldown = skipFirst;
+    let isCalledAtCooldown = false;
+    function runNext(...args) {
+        Time.after(ms, () => {
+            isCooldown = false;
+            if (trailing && isCalledAtCooldown) {
+                fn.apply(this, args);
+                isCalledAtCooldown = false;
+            }
+        });
+    }
+    return function throttled(...args) {
+        if (isCooldown) {
+            if (!isCalledAtCooldown && skipFirst && trailing)
+                runNext.apply(this, args);
+            isCalledAtCooldown = true;
+        }
+        else {
+            isCooldown = true;
+            isCalledAtCooldown = false;
+            fn.apply(this, args);
+            runNext.apply(this, args);
+        }
+    };
+}
+
+export { throttle as default };

package/dist/esm/src/tools/uid.js

@@ -0,0 +1,7 @@
+import { nanoid } from 'nanoid';
+
+function generateUID() {
+    return nanoid().replace(/^\d+/g, '').replace(/-/g, '_');
+}
+
+export { generateUID };

package/dist/esm/types/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/dist/esm/types/src/components/AssistiveText/AssistiveText.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as T from './AssistiveText.types';
+export declare function AssistiveText(props: T.Props): JSX.Element;

package/dist/esm/types/src/components/AssistiveText/AssistiveText.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type Props = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    size?: 's' | 'm' | 'l';
+    variant?: 'default' | 'danger';
+    children: ReactNode;
+};

package/dist/esm/types/src/components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import * as T from './Button.types';
+export type ButtonProps = T.Props;
+export declare function Button(props: T.Props): JSX.Element;

package/dist/esm/types/src/components/Button/Button.helpers.d.ts

@@ -0,0 +1 @@
+export declare function focusOnClick(buttonElem: HTMLButtonElement | null): void;

package/dist/esm/types/src/components/Button/Button.types.d.ts

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { Size } from 'uilib/types';
+export type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+    className?: string;
+    children: ReactNode;
+    variant?: 'clear' | 'default' | 'outlined' | 'primary';
+    size?: Size;
+    loading?: boolean;
+    checked?: boolean;
+    square?: boolean;
+    prefixElem?: ReactNode;
+    postfixElem?: ReactNode;
+    onRef?: (ref: HTMLButtonElement) => void;
+};

package/dist/esm/types/src/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as T from './ButtonGroup.types';
+export declare function ButtonGroup(props: T.Props): JSX.Element;

package/dist/esm/types/src/components/ButtonGroup/ButtonGroup.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export type Props = HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    className?: string;
+};

package/dist/esm/types/src/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,18 @@
+import { Component } from 'react';
+import * as T from './Checkbox.types';
+export declare class Checkbox extends Component<T.Props> {
+    id: any;
+    store: any;
+    static defaultProps: {
+        size: string;
+        variant: string;
+        label: string;
+        checked: boolean;
+    };
+    constructor(props: any);
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+    onFocus: (e: any) => void;
+    onBlur: (e: any) => void;
+    render(): JSX.Element;
+}

package/dist/esm/types/src/components/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { Size, ComponentType } from '../../types';
+export type Props = HTMLAttributes<HTMLInputElement> & ComponentType & {
+    label?: ReactNode;
+    checked?: boolean;
+    disabled?: boolean;
+    error?: string | boolean;
+    size?: Size;
+    variant?: 'default' | 'outlined';
+};

package/dist/esm/types/src/components/Container/Container.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as T from './Container.types';
+export declare function Container(props: T.Props): JSX.Element;

package/dist/esm/types/src/components/Container/Container.types.d.ts

@@ -0,0 +1,13 @@
+export type Props = {
+    className?: string;
+    size?: 's' | 'm' | 'l' | 'xl';
+    children: any;
+    alignItemsCenter?: boolean;
+    justifyContentCenter?: boolean;
+    vertical?: boolean;
+    fullHeight?: boolean | string;
+    fullWidth?: boolean | string;
+    scrolledX?: boolean;
+    scrolledY?: boolean;
+    style?: Partial<CSSStyleDeclaration>;
+};

package/dist/esm/types/src/components/DateTime/DateTime.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as T from './DateTime.types';
+export declare function formatDate({ value, format, locale }: {
+    value: any;
+    format: any;
+    locale?: string;
+}): any;
+export declare function DateTime({ value, format, locale }: T.Props): JSX.Element;

package/dist/esm/types/src/components/DateTime/DateTime.types.d.ts

@@ -0,0 +1,6 @@
+import type { Moment } from 'moment';
+export type Props = {
+    value?: Date | Moment | string;
+    format?: string;
+    locale?: string;
+};

package/dist/esm/types/src/components/Draggable/Draggable.d.ts

@@ -0,0 +1,24 @@
+import { Component } from 'react';
+import * as T from './Draggable.types';
+export declare class Draggable extends Component<T.Props> {
+    store: any;
+    startPos: any;
+    draggingElem: any;
+    draggingElemBounds: any;
+    dragStartFired: boolean;
+    timers: any;
+    constructor(props: any);
+    componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    onPointerDown: (e: any) => void;
+    onPointerMove: (e: any) => void;
+    checkUnderElem: any;
+    onPointerOut: ({ target }: {
+        target: any;
+    }) => void;
+    onPointerUp: (e: any) => void;
+    selectInner: (elem: any) => any;
+    transformInner(elem: any, str?: any): void;
+    dropUnder(): void;
+    render(): JSX.Element;
+}

package/dist/esm/types/src/components/Draggable/Draggable.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type Props = {
+    items: string[];
+    className?: string;
+    itemClassName?: string;
+    renderItem: (id: string, isActive: boolean) => ReactNode;
+    onDragStart?: (id: string) => void;
+    onDragEnd?: (id: string) => void;
+    onChange: (items: string[]) => void;
+    children?: ReactNode;
+};

package/dist/esm/types/src/components/Expand/Expand.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as T from './Expand.types';
+export declare function Expand(props: T.Props): JSX.Element;

package/dist/esm/types/src/components/Expand/Expand.types.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Size } from 'uilib/types';
+type ContentProps = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+};
+export type Props = {
+    className?: string;
+    size?: Size;
+    isOpen: boolean;
+    header: ReactNode;
+    headerClassName?: string;
+    content: (props: ContentProps) => ReactNode | ReactNode;
+    contentProps?: ContentProps;
+    onChange?: (isOpen: boolean) => void;
+};
+export {};