elbe-ui 0.2.11 → 0.2.19

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/ui/components/box.d.ts

@@ -12,6 +12,13 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         [x: string]: string | number | null | undefined;
         [x: number]: string | number | null | undefined;
         cssText?: string | null;
+        clipPath?: string | number | null | undefined;
+        filter?: string | number | null | undefined;
+        marker?: string | number | null | undefined;
+        mask?: string | number | null | undefined;
+        x?: string | number | null | undefined;
+        y?: string | number | null | undefined;
+        padding?: string | number | null | undefined;
         accentColor?: string | number | null | undefined;
         alignContent?: string | number | null | undefined;
         alignItems?: string | number | null | undefined;
@@ -118,7 +125,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         caretColor?: string | number | null | undefined;
         clear?: string | number | null | undefined;
         clip?: string | number | null | undefined;
-        clipPath?: string | number | null | undefined;
         clipRule?: string | number | null | undefined;
         color?: string | number | null | undefined;
         colorInterpolation?: string | number | null | undefined;
@@ -160,7 +166,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         fill?: string | number | null | undefined;
         fillOpacity?: string | number | null | undefined;
         fillRule?: string | number | null | undefined;
-        filter?: string | number | null | undefined;
         flex?: string | number | null | undefined;
         flexBasis?: string | number | null | undefined;
         flexDirection?: string | number | null | undefined;
@@ -252,11 +257,9 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         marginLeft?: string | number | null | undefined;
         marginRight?: string | number | null | undefined;
         marginTop?: string | number | null | undefined;
-        marker?: string | number | null | undefined;
         markerEnd?: string | number | null | undefined;
         markerMid?: string | number | null | undefined;
         markerStart?: string | number | null | undefined;
-        mask?: string | number | null | undefined;
         maskClip?: string | number | null | undefined;
         maskComposite?: string | number | null | undefined;
         maskImage?: string | number | null | undefined;
@@ -304,7 +307,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         overscrollBehaviorInline?: string | number | null | undefined;
         overscrollBehaviorX?: string | number | null | undefined;
         overscrollBehaviorY?: string | number | null | undefined;
-        padding?: string | number | null | undefined;
         paddingBlock?: string | number | null | undefined;
         paddingBlockEnd?: string | number | null | undefined;
         paddingBlockStart?: string | number | null | undefined;
@@ -506,8 +508,6 @@ export declare function applyProps(p: ElbeProps, classes?: string | null | (stri
         wordSpacing?: string | number | null | undefined;
         wordWrap?: string | number | null | undefined;
         writingMode?: string | number | null | undefined;
-        x?: string | number | null | undefined;
-        y?: string | number | null | undefined;
         zIndex?: string | number | null | undefined;
         zoom?: string | number | null | undefined;
     };
@@ -525,6 +525,13 @@ export declare function Box({ mode, scheme, padding, margin, children, ...elbe }
         [x: string]: string | number | null | undefined;
         [x: number]: string | number | null | undefined;
         cssText?: string | null;
+        clipPath?: string | number | null | undefined;
+        filter?: string | number | null | undefined;
+        marker?: string | number | null | undefined;
+        mask?: string | number | null | undefined;
+        x?: string | number | null | undefined;
+        y?: string | number | null | undefined;
+        padding?: string | number | null | undefined;
         accentColor?: string | number | null | undefined;
         alignContent?: string | number | null | undefined;
         alignItems?: string | number | null | undefined;
@@ -631,7 +638,6 @@ export declare function Box({ mode, scheme, padding, margin, children, ...elbe }
         caretColor?: string | number | null | undefined;
         clear?: string | number | null | undefined;
         clip?: string | number | null | undefined;
-        clipPath?: string | number | null | undefined;
         clipRule?: string | number | null | undefined;
         color?: string | number | null | undefined;
         colorInterpolation?: string | number | null | undefined;
@@ -673,7 +679,6 @@ export declare function Box({ mode, scheme, padding, margin, children, ...elbe }
         fill?: string | number | null | undefined;
         fillOpacity?: string | number | null | undefined;
         fillRule?: string | number | null | undefined;
-        filter?: string | number | null | undefined;
         flex?: string | number | null | undefined;
         flexBasis?: string | number | null | undefined;
         flexDirection?: string | number | null | undefined;
@@ -765,11 +770,9 @@ export declare function Box({ mode, scheme, padding, margin, children, ...elbe }
         marginLeft?: string | number | null | undefined;
         marginRight?: string | number | null | undefined;
         marginTop?: string | number | null | undefined;
-        marker?: string | number | null | undefined;
         markerEnd?: string | number | null | undefined;
         markerMid?: string | number | null | undefined;
         markerStart?: string | number | null | undefined;
-        mask?: string | number | null | undefined;
         maskClip?: string | number | null | undefined;
         maskComposite?: string | number | null | undefined;
         maskImage?: string | number | null | undefined;
@@ -817,7 +820,6 @@ export declare function Box({ mode, scheme, padding, margin, children, ...elbe }
         overscrollBehaviorInline?: string | number | null | undefined;
         overscrollBehaviorX?: string | number | null | undefined;
         overscrollBehaviorY?: string | number | null | undefined;
-        padding?: string | number | null | undefined;
         paddingBlock?: string | number | null | undefined;
         paddingBlockEnd?: string | number | null | undefined;
         paddingBlockStart?: string | number | null | undefined;
@@ -1019,8 +1021,6 @@ export declare function Box({ mode, scheme, padding, margin, children, ...elbe }
         wordSpacing?: string | number | null | undefined;
         wordWrap?: string | number | null | undefined;
         writingMode?: string | number | null | undefined;
-        x?: string | number | null | undefined;
-        y?: string | number | null | undefined;
         zIndex?: string | number | null | undefined;
         zoom?: string | number | null | undefined;
     };

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

@@ -0,0 +1,15 @@
+import { type ApiError } from "../../service/s_api";
+export declare function ErrorView({ error, retry, debug, }: {
+    error: any;
+    retry?: () => any;
+    debug?: boolean;
+}): import("preact").JSX.Element;
+export declare function PrettyErrorView({ apiError, retry, labels, }: {
+    apiError: ApiError;
+    retry?: () => any;
+    labels?: {
+        retry?: string;
+        home?: string;
+        details?: string;
+    };
+}): import("preact").JSX.Element;

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

@@ -0,0 +1,3 @@
+export declare function Spinner({ padding }: {
+    padding?: number;
+}): import("preact").JSX.Element;

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

@@ -1,5 +1,5 @@
-import { type ElbeProps } from "../..";
 import type { ElbeChild } from "../util/util";
+import type { ElbeProps } from "./box";
 export type ToggleButtonItem<T> = {
     icon?: (_: any) => ElbeChild;
     label: string;

package/dist/ui/util/util.d.ts

@@ -1,3 +1,19 @@
 import type React from "preact/compat";
 export type ElbeChild = React.ReactNode;
 export type ElbeChildren = ElbeChild[] | ElbeChild;
+/**
+ * use the web share api if available, otherwise copy the data to the clipboard
+ * @param data the data you want to share
+ * @param toastMsg the message to show in the toast if the share api is not available
+ */
+export declare function share(data: {
+    title: string;
+    text?: string;
+    url: string;
+}, toastMsg?: string): void;
+/**
+ * copy the text to the clipboard
+ * @param text the text to copy to the clipboard
+ * @param toastMsg the message to show in the toast
+ */
+export declare function copyToClipboard(text: string, toastMsg?: string): void;

package/elbe.scss

@@ -4,7 +4,7 @@
 */
 
 @import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Calistoga&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");
 
@@ -30,7 +30,7 @@ $c-modes: (
     border: #ffffff14,
   ),
   secondary: (
-    back: inter($c-accent, #ffffff, 5%),
+    back: inter($c-accent, #ffffff, 7%),
     front: #222222,
     border: #22222214,
   ),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elbe-ui",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.19",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "build": "rm -r ./dist ; bun build --target=node src/index.tsx --outdir=dist && bun run build:declaration",
     "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json"
   },
-  "module": "src/index.ts",
+  "module": "src/index.tsx",
   "devDependencies": {
     "@types/bun": "latest"
   },
@@ -35,7 +35,9 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
+    "@preact/signals": "^1.3.0",
     "lucide-react": "^0.438.0",
-    "preact": "^10.23.2"
+    "preact": "^10.23.2",
+    "preact-router": "^4.1.2"
   }
 }

package/src/bit/bit.tsx

@@ -0,0 +1,126 @@
+import { Signal, useSignal } from "@preact/signals";
+import { type PreactContext, createContext } from "preact";
+import { useContext } from "preact/hooks";
+import { ErrorView } from "../ui/components/error_view";
+import { Spinner } from "../ui/components/spinner";
+
+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 function makeBit<C, T>(name: string): BitContext<C, T> {
+  const c = createContext<BitData<C, T> | null>(null);
+  c.displayName = name;
+  return c;
+}
+
+export 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
+) {
+  const s = useSignal<BitState<T>>({ loading: true });
+
+  const _set = (n: BitState<T>) => {
+    if (JSON.stringify(n) === JSON.stringify(s.peek())) return;
+    s.value = n;
+  };
+
+  const emit = (data: T) => _set({ data });
+  const emitLoading = () => _set({ loading: true });
+  const emitError = (error: any) => {
+    console.warn(`BIT: ${context.displayName} emitted ERROR`, error);
+    return _set({ error });
+  };
+
+  function map<D>(m: TriMap<T, D>) {
+    const st = s.value;
+    if (st.loading) return m.onLoading!();
+    if (st.error) return m.onError!(st.error);
+    return m.onData!(st.data ?? (null as any));
+  }
+
+  const c = ctrl(parameters, { emit, emitLoading, emitError, map, signal: s });
+  worker(parameters, { emit, emitLoading, emitError, map, signal: s }, c);
+
+  return (
+    <context.Provider value={{ ctrl: c, state: s }}>
+      {children}
+    </context.Provider>
+  );
+}
+
+export function useBit<C, T>(context: BitContext<C, T>): BitUseInterface<C, T> {
+  try {
+    const { ctrl, state } = useContext(context)!;
+    const v = state.value;
+
+    function map<D>(m: TriMap<T, D>) {
+      if (v.loading) return (m.onLoading || (() => <Spinner />))();
+      if (v.error)
+        return (
+          m.onError ||
+          ((e) => <ErrorView error={e} retry={(ctrl as any).reload ?? null} />)
+        )(v.error);
+      return m.onData!(v.data ?? (null as any));
+    }
+
+    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: (d: T) => void) => map({ onData: f }),
+    };
+  } catch (e) {
+    const err = `BIT ERROR: NO ${context.displayName} PROVIDED`;
+    console.error(err, e);
+    return {
+      map: (_: any) => <div>{err}</div>,
+      ctrl: null as any,
+      signal: null as any,
+      onData: () => <div>{err}</div>,
+    };
+  }
+}
+
+function BitSpinner({ name }: { name: string }) {
+  return <Spinner />;
+}

package/src/bit/ctrl_bit.tsx

@@ -0,0 +1,112 @@
+import { useEffect } from "preact/hooks";
+import type { JSX } from "preact/jsx-runtime";
+import type { BitContext, BitUseInterface, TWParams } from "./bit";
+import { makeBit as mb, ProvideBit, useBit } from "./bit";
+
+abstract class BitControl<I, DT> {
+  p: I;
+  bit: TWParams<DT>;
+
+  constructor(p: I, bit: TWParams<DT>) {
+    this.bit = bit;
+    this.p = p;
+  }
+
+  act(fn: (b: DT) => Promise<void>) {
+    this.bit.map({
+      onData: async (d) => {
+        try {
+          await fn(d);
+        } catch (e: any) {
+          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() {}
+}
+
+export abstract class WorkerControl<I, DT> extends BitControl<I, DT> {
+  reload: (() => Promise<void>) | null = null;
+
+  abstract worker(): Promise<DT>;
+}
+
+export abstract class StreamControl<I, DT, Stream> extends BitControl<I, DT> {
+  protected stream: Stream | null = null;
+  abstract listen(): Stream;
+
+  dispose(): void {
+    if (this.stream) this.disposeStream(this.stream);
+  }
+  abstract disposeStream(stream: Stream): void;
+}
+
+function make<I, DT, C extends BitControl<I, DT>>(
+  name: string
+): BitContext<C, DT> {
+  return mb<C, DT>(name);
+}
+
+function use<I, DT, C extends BitControl<I, DT>>(
+  b: BitContext<C, DT>
+): BitUseInterface<C, DT> {
+  return useBit<C, DT>(b);
+}
+
+export 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>;
+} {
+  const context = make<I, DT, C>((name || "Unknown") + "Bit");
+
+  function Provide({ children, ...p }: { children: React.ReactNode } & I) {
+    return 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 as any).stream = c.listen();
+          }
+        } catch (e) {
+          b.emitError(e);
+        }
+      },
+
+      (p, b) => {
+        const c = ctrl(p as I, b);
+        // clean up on unmount
+        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<I, DT, C>(context) };
+}

package/src/{index.ts → index.tsx}

@@ -1,6 +1,9 @@
 import * as Lucide from "lucide-react";
 
 // exports
+export * from "./bit/bit";
+export * from "./bit/ctrl_bit";
+export * from "./service/s_api";
 export * from "./ui/color_theme";
 export * from "./ui/components/badge";
 export * from "./ui/components/box";
@@ -14,6 +17,7 @@ export * from "./ui/components/input/input_field";
 export * from "./ui/components/input/range";
 export * from "./ui/components/input/select";
 export * from "./ui/components/padded";
+export * from "./ui/components/spinner";
 export * from "./ui/components/text";
 export * from "./ui/components/toggle_button";
 export * from "./ui/components/util";

package/src/service/s_api.ts

@@ -0,0 +1,102 @@
+export interface PostArgs {
+  path?: { [key: string]: string | number | boolean | undefined };
+  query?: { [key: string]: string | number | boolean | undefined };
+  body?: any;
+}
+
+const _noArgs: PostArgs = {};
+
+/**
+ * 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 class ApiService {
+  private static _i: ApiService | null = null;
+  public static get i(): ApiService {
+    if (!ApiService._i) throw "ApiService not initialized. Call ApiService.init(apiURL)";
+    return ApiService._i;
+  }
+
+  private constructor(private apiURL: string) {}
+
+  static init(apiURL: string) {
+    if (ApiService._i) throw "ApiService already initialized";
+    ApiService._i = new ApiService(apiURL);
+  }
+
+  private async _fetch(
+    p: string,
+    method: "GET" | "POST" | "DELETE",
+    { path, query, body }: PostArgs
+  ): Promise<any> {
+    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 as any).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,
+      } as ApiError;
+    } catch (e) {
+      rethrow(e, 0, "unknown error");
+    }
+  }
+
+  async get(path: string, args?: PostArgs): Promise<any> {
+    return this._fetch(path, "GET", args || _noArgs);
+  }
+
+  async post(path: string, args: PostArgs): Promise<any> {
+    return this._fetch(path, "POST", args || _noArgs);
+  }
+
+  async delete(path: string, args: PostArgs): Promise<any> {
+    return this._fetch(path, "DELETE", args || _noArgs);
+  }
+}
+
+function rethrow(e: any, code: number, message: string): ApiError {
+  // if e implements the apiError interface, rethrow it:
+  if (e && e.code !== null && e.message !== null) throw e;
+  throw { code, message, data: e };
+}
+
+export interface ApiError {
+  code: number;
+  message: string;
+  data?: any;
+}
+
+export function ifApiError(e: any): ApiError | null {
+  if (e && e.code !== null && e.message !== null) return e;
+  return null;
+}

package/src/ui/components/error_view.tsx

@@ -0,0 +1,72 @@
+import { useSignal } from "@preact/signals";
+import { route } from "preact-router";
+import { ElbeDialog, Icons } from "../..";
+import { ifApiError, type ApiError } from "../../service/s_api";
+
+export function ErrorView({
+  error,
+  retry,
+  debug,
+}: {
+  error: any;
+  retry?: () => any;
+  debug?: boolean;
+}) {
+  const apiError: ApiError = ifApiError(error) ?? {
+    code: 0,
+    message: "unknown error",
+    data: error,
+  };
+  return !debug ? (
+    <PrettyErrorView apiError={apiError} retry={retry} />
+  ) : (
+    <div class="column padded card inverse cross-stretch">
+      <h3 style="margin: 0">ERROR: {apiError.code}</h3>
+      <p>{apiError.message}</p>
+      <pre>{JSON.stringify(apiError.data, null, 2)}</pre>
+    </div>
+  );
+}
+
+export function PrettyErrorView({
+  apiError,
+  retry,
+  labels = {
+    retry: "retry",
+    home: "go home",
+    details: "error details",
+  },
+}: {
+  apiError: ApiError;
+  retry?: () => any;
+  labels?: { retry?: string; home?: string; details?: string };
+}) {
+  const openSig = useSignal(false);
+  return (
+    <div class="column padded cross-center" style="margin: 1rem 0">
+      <Icons.OctagonAlert />
+      <h3 style="margin: 0">{apiError.code}</h3>
+      <span class="pointer" onClick={() => (openSig.value = true)}>
+        {apiError.message}
+      </span>
+      {retry && (
+        <button class="action" onClick={() => retry()}>
+          <Icons.RotateCcw /> {labels.retry ?? "retry"}
+        </button>
+      )}
+      {apiError.code === 404 && (
+        <button class="action" onClick={() => route("/")}>
+          <Icons.House />
+          {labels.home ?? "go home"}
+        </button>
+      )}
+      <ElbeDialog
+        title={labels.details ?? "error details"}
+        open={openSig.value}
+        onClose={() => (openSig.value = false)}
+      >
+        <pre class="card inverse">{JSON.stringify(apiError.data, null, 2)}</pre>
+      </ElbeDialog>
+    </div>
+  );
+}

package/src/ui/components/icon_button.tsx

@@ -29,7 +29,6 @@ function _btn(
   { icon, onTap, ...elbe }: IconButtonProps,
   colorManner: ElbeColorManners = "major"
 ) {
-  console.log("icon", icon);
   return (
     <button
       {...applyProps(