elbe-ui 0.2.30 → 0.2.34

package/dist/bit/bit.d.ts

@@ -0,0 +1,34 @@
+import { Signal } from "@preact/signals";
+import { type PreactContext } from "preact";
+export interface BitUseInterface<C, T> {
+    signal: Signal<BitState<T>>;
+    ctrl: C;
+    map: <D>(m: TriMap<T, D>) => D | preact.JSX.Element;
+    onData: (f: (d: T) => any) => any;
+}
+interface BitData<C, T> {
+    ctrl: C;
+    state: Signal<BitState<T>>;
+}
+export interface BitState<T> {
+    loading?: boolean;
+    error?: any;
+    data?: T;
+}
+export type BitContext<T, C> = PreactContext<BitData<T, C> | null>;
+export interface TriMap<T, D> {
+    onLoading?: () => D;
+    onError?: (e: string) => D;
+    onData?: (value: T) => D;
+}
+export interface TWParams<T> {
+    emit: (t: T) => void;
+    emitLoading: () => void;
+    emitError: (e: any) => void;
+    map: <D>(m: TriMap<T, D>) => D;
+    signal: Signal<BitState<T>>;
+}
+export declare function makeBit<C, T>(name: string): BitContext<C, T>;
+export declare function ProvideBit<I, C, T>(context: BitContext<C, T>, parameters: I, worker: (p: I, d: TWParams<T>, ctrl: C) => void, ctrl: (p: I, d: TWParams<T>) => C, children: any): import("preact").JSX.Element;
+export declare function useBit<C, T>(context: BitContext<C, T>): BitUseInterface<C, T>;
+export {};

package/dist/bit/bit.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeBit = makeBit;
+exports.ProvideBit = ProvideBit;
+exports.useBit = useBit;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const signals_1 = require("@preact/signals");
+const preact_1 = require("preact");
+const hooks_1 = require("preact/hooks");
+const error_view_1 = require("../ui/components/error_view");
+const spinner_1 = require("../ui/components/spinner");
+function makeBit(name) {
+    const c = (0, preact_1.createContext)(null);
+    c.displayName = name;
+    return c;
+}
+function ProvideBit(context, parameters, worker, ctrl, children) {
+    const s = (0, signals_1.useSignal)({ loading: true });
+    const _set = (n) => {
+        try {
+            if (JSON.stringify(n) === JSON.stringify(s.peek()))
+                return;
+        }
+        catch (e) { }
+        s.value = n;
+    };
+    const emit = (data) => _set({ data });
+    const emitLoading = () => _set({ loading: true });
+    const emitError = (error) => {
+        console.warn(`BIT: ${context.displayName} emitted ERROR`, error);
+        return _set({ error });
+    };
+    function map(m) {
+        const st = s.value;
+        if (st.loading)
+            return m.onLoading();
+        if (st.error)
+            return m.onError(st.error);
+        return m.onData(st.data ?? null);
+    }
+    const c = ctrl(parameters, { emit, emitLoading, emitError, map, signal: s });
+    worker(parameters, { emit, emitLoading, emitError, map, signal: s }, c);
+    return ((0, jsx_runtime_1.jsx)(context.Provider, { value: { ctrl: c, state: s }, children: children }));
+}
+function useBit(context) {
+    try {
+        const { ctrl, state } = (0, hooks_1.useContext)(context);
+        const v = state.value;
+        function map(m) {
+            if (v.loading)
+                return (m.onLoading || (() => (0, jsx_runtime_1.jsx)(spinner_1.Spinner, {})))();
+            if (v.error)
+                return (m.onError ||
+                    ((e) => (0, jsx_runtime_1.jsx)(error_view_1.ErrorView, { error: e, retry: ctrl.reload ?? null })))(v.error);
+            return m.onData(v.data ?? null);
+        }
+        return {
+            signal: state,
+            ctrl,
+            map,
+            /**
+             * this is a quality of life function that allows
+             * you to chain the map function with the onData function
+             * @param f the builder function
+             * @returns the built component
+             */
+            onData: (f) => map({ onData: f }),
+        };
+    }
+    catch (e) {
+        const err = `BIT ERROR: NO ${context.displayName} PROVIDED`;
+        console.error(err, e);
+        return {
+            map: (_) => (0, jsx_runtime_1.jsx)("div", { children: err }),
+            ctrl: null,
+            signal: null,
+            onData: () => (0, jsx_runtime_1.jsx)("div", { children: err }),
+        };
+    }
+}
+function BitSpinner({ name }) {
+    return (0, jsx_runtime_1.jsx)(spinner_1.Spinner, {});
+}

package/dist/bit/ctrl_bit.d.ts

@@ -0,0 +1,30 @@
+import type { JSX } from "preact/jsx-runtime";
+import type { BitUseInterface, TWParams } from "./bit";
+declare abstract class BitControl<I, DT> {
+    p: I;
+    bit: TWParams<DT>;
+    constructor(p: I, bit: TWParams<DT>);
+    act(fn: (b: DT) => Promise<void>): void;
+    /**
+     * Clean up resources. This is called once
+     * the element is removed from the DOM.
+     */
+    dispose(): void;
+}
+export declare abstract class WorkerControl<I, DT> extends BitControl<I, DT> {
+    reload: (() => Promise<void>) | null;
+    abstract worker(): Promise<DT>;
+}
+export declare abstract class StreamControl<I, DT, Stream> extends BitControl<I, DT> {
+    protected stream: Stream | null;
+    abstract listen(): Stream;
+    dispose(): void;
+    abstract disposeStream(stream: Stream): void;
+}
+export declare function CtrlBit<I, DT, C extends BitControl<I, DT>>(ctrl: (p: I, d: TWParams<DT>) => C, name?: string): {
+    Provide: (props: I & {
+        children: React.ReactNode;
+    }) => JSX.Element;
+    use: () => BitUseInterface<C, DT>;
+};
+export {};

package/dist/bit/ctrl_bit.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamControl = exports.WorkerControl = void 0;
+exports.CtrlBit = CtrlBit;
+const hooks_1 = require("preact/hooks");
+const bit_1 = require("./bit");
+class BitControl {
+    p;
+    bit;
+    constructor(p, bit) {
+        this.bit = bit;
+        this.p = p;
+    }
+    act(fn) {
+        this.bit.map({
+            onData: async (d) => {
+                try {
+                    await fn(d);
+                }
+                catch (e) {
+                    if (e && e.code && e.message)
+                        console.error(`[BitERROR] act: ${e.code} (${e.message})`);
+                    else
+                        console.error("[BitERROR] act: ", e);
+                }
+            },
+        });
+    }
+    /**
+     * Clean up resources. This is called once
+     * the element is removed from the DOM.
+     */
+    dispose() { }
+}
+class WorkerControl extends BitControl {
+    reload = null;
+}
+exports.WorkerControl = WorkerControl;
+class StreamControl extends BitControl {
+    stream = null;
+    dispose() {
+        if (this.stream)
+            this.disposeStream(this.stream);
+    }
+}
+exports.StreamControl = StreamControl;
+function make(name) {
+    return (0, bit_1.makeBit)(name);
+}
+function use(b) {
+    return (0, bit_1.useBit)(b);
+}
+function CtrlBit(ctrl, name) {
+    const context = make((name || "Unknown") + "Bit");
+    function Provide({ children, ...p }) {
+        return (0, bit_1.ProvideBit)(context, p, async (p, b, c) => {
+            b.emitLoading();
+            try {
+                if (c instanceof WorkerControl) {
+                    if (c.reload)
+                        await c.reload();
+                }
+                if (c instanceof StreamControl) {
+                    c.stream = c.listen();
+                }
+            }
+            catch (e) {
+                b.emitError(e);
+            }
+        }, (p, b) => {
+            const c = ctrl(p, b);
+            // clean up on unmount
+            (0, hooks_1.useEffect)(() => () => c.dispose(), []);
+            if (c instanceof WorkerControl) {
+                c.reload = async () => {
+                    b.emitLoading();
+                    try {
+                        b.emit(await c.worker());
+                    }
+                    catch (e) {
+                        b.emitError(e);
+                    }
+                };
+            }
+            return c;
+        }, children);
+    }
+    return { Provide: Provide, use: () => use(context) };
+}

package/dist/elbe.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../style/elbe.scss","../style/_base.scss","../style/_flex.scss","../style/_components.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAOQ;ACPR;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;AAEA;EACE;;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;;AAEF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;;AAKF;AAEA;EACE;;;AAGF;EAEE;EACA;EACA;;;AAGF;AAEA;AAAA;EAEE;;;AAEF;AAAA;AAAA;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;ACpJJ;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAEA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;AAEA;EACE;;;AAIA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAIJ;AAEA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;AAEA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;AAEA;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;;;AC/GF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;;AAoBJ;EACE;EACA;EACA;;;AAGF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAGE;EACA;EACA;EACA;;;AAGF;EAKE;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACC;EAGD;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAKD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;;AACA;EACE;EACA;;;AAMJ;EACE;EACA;;;AAGF;EACE;EACA;;;AH5PF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA","file":"elbe.css"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./elbe.css";
 export * from "./bit/bit";
 export * from "./bit/ctrl_bit";
 export * from "./service/s_api";

package/dist/index.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icons = void 0;
 const jsx_runtime_1 = require("preact/jsx-runtime");
 const Lucide = __importStar(require("lucide-react"));
+require("./elbe.css");
 // exports
 __exportStar(require("./bit/bit"), exports);
 __exportStar(require("./bit/ctrl_bit"), exports);

package/dist/service/s_api.d.ts

@@ -0,0 +1,30 @@
+export interface PostArgs {
+    path?: {
+        [key: string]: string | number | boolean | undefined;
+    };
+    query?: {
+        [key: string]: string | number | boolean | undefined;
+    };
+    body?: any;
+}
+/**
+ * ApiService is a simple wrapper around fetch that handles JSON serialization and error handling.
+ * to use it, you must first call `ApiService.init(apiURL)` with the base URL of your API.
+ */
+export declare class ApiService {
+    private apiURL;
+    private static _i;
+    static get i(): ApiService;
+    private constructor();
+    static init(apiURL: string): void;
+    private _fetch;
+    get(path: string, args?: PostArgs): Promise<any>;
+    post(path: string, args: PostArgs): Promise<any>;
+    delete(path: string, args: PostArgs): Promise<any>;
+}
+export interface ApiError {
+    code: number;
+    message: string;
+    data?: any;
+}
+export declare function ifApiError(e: any): ApiError | null;

package/dist/service/s_api.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiService = void 0;
+exports.ifApiError = ifApiError;
+const _noArgs = {};
+/**
+ * ApiService is a simple wrapper around fetch that handles JSON serialization and error handling.
+ * to use it, you must first call `ApiService.init(apiURL)` with the base URL of your API.
+ */
+class ApiService {
+    apiURL;
+    static _i = null;
+    static get i() {
+        if (!ApiService._i)
+            throw "ApiService not initialized. Call ApiService.init(apiURL)";
+        return ApiService._i;
+    }
+    constructor(apiURL) {
+        this.apiURL = apiURL;
+    }
+    static init(apiURL) {
+        if (ApiService._i)
+            throw "ApiService already initialized";
+        ApiService._i = new ApiService(apiURL);
+    }
+    async _fetch(p, method, { path, query, body }) {
+        try {
+            p = path
+                ? p.replace(/:([a-zA-Z0-9_]+)/g, (m, p1) => {
+                    const v = path[p1];
+                    if (v === undefined)
+                        throw { code: 400, message: `missing parameter ${p1}` };
+                    return v?.toString() ?? "";
+                })
+                : p;
+            const queryStr = query != null ? "?" + new URLSearchParams(query).toString() : "";
+            const response = await fetch(this.apiURL + p + queryStr, {
+                method,
+                credentials: "include",
+                headers: { "Content-Type": "application/json" },
+                body: body ? JSON.stringify(body) : undefined,
+            });
+            if (response.ok) {
+                try {
+                    return await response.json();
+                }
+                catch (e) {
+                    return null;
+                }
+            }
+            let data = null;
+            try {
+                data = await response.clone().json();
+            }
+            catch (e) {
+                data = await response.text();
+            }
+            throw {
+                code: response.status,
+                message: data.message ?? "undefined error",
+                data,
+            };
+        }
+        catch (e) {
+            rethrow(e, 0, "unknown error");
+        }
+    }
+    async get(path, args) {
+        return this._fetch(path, "GET", args || _noArgs);
+    }
+    async post(path, args) {
+        return this._fetch(path, "POST", args || _noArgs);
+    }
+    async delete(path, args) {
+        return this._fetch(path, "DELETE", args || _noArgs);
+    }
+}
+exports.ApiService = ApiService;
+function rethrow(e, code, message) {
+    // if e implements the apiError interface, rethrow it:
+    if (e && e.code !== null && e.message !== null)
+        throw e;
+    throw { code, message, data: e };
+}
+function ifApiError(e) {
+    if (e && e.code !== null && e.message !== null)
+        return e;
+    return null;
+}

package/dist/ui/components/badge.d.ts

@@ -0,0 +1,25 @@
+import React from "preact/compat";
+import type { ElbeColorKinds } from "../theme/colors";
+import type { ElbeChild, ElbeChildren } from "../util/util";
+import type { ElbeProps } from "./base/box";
+export type BadgeProps = {
+    count?: number;
+    label?: string;
+    child?: ElbeChild;
+    hidden?: boolean;
+    children?: ElbeChildren;
+} & ElbeProps;
+export declare function TestBadge(p: BadgeProps): Badge;
+export declare class Badge extends React.Component<BadgeProps & {
+    kind: ElbeColorKinds;
+}> {
+    constructor(props: BadgeProps & {
+        kind: ElbeColorKinds;
+    });
+    static accent(p: BadgeProps): React.JSX.Element;
+    static error(p: BadgeProps): React.JSX.Element;
+    static warning(p: BadgeProps): React.JSX.Element;
+    static success(p: BadgeProps): React.JSX.Element;
+    static info(p: BadgeProps): React.JSX.Element;
+    render(): React.JSX.Element;
+}

package/dist/ui/components/badge.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+exports.TestBadge = TestBadge;
+const jsx_runtime_1 = require("preact/jsx-runtime");
+const compat_1 = __importDefault(require("preact/compat"));
+function TestBadge(p) {
+    return new Badge({ ...p, kind: "accent" });
+}
+class Badge extends compat_1.default.Component {
+    constructor(props) {
+        super(props);
+    }
+    static accent(p) {
+        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "accent" });
+    }
+    static error(p) {
+        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "error" });
+    }
+    static warning(p) {
+        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "warning" });
+    }
+    static success(p) {
+        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "success" });
+    }
+    static info(p) {
+        return (0, jsx_runtime_1.jsx)(Badge, { ...p, kind: "info" });
+    }
+    render() {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                position: "relative",
+                display: "inline-block",
+            }, children: [this.props.child, this.props.children, (0, jsx_runtime_1.jsx)("div", { class: `b ${this.props.kind} major ${this.props.class ?? ""}`, style: {
+                        position: "absolute",
+                        top: "-0.25rem",
+                        right: "-0.25rem",
+                        minWidth: "1.5rem",
+                        minHeight: "1.5rem",
+                        padding: "0rem .4rem",
+                        borderRadius: "3rem",
+                        fontWeight: "bold",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        visibility: this.props.hidden ? "hidden" : "visible",
+                        ...this.props.style,
+                    }, children: this.props.label ?? this.props.count })] }));
+    }
+}
+exports.Badge = Badge;