elbe-ui 0.2.26 → 0.2.30

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

@@ -1,23 +0,0 @@
-import React from "preact/compat";
-import type { ElbeColorManners, ElbeColorStyles } from "../color_theme";
-import { type ElbeProps } from "./box";
-import type { IconChild } from "./icon_button";
-export type ButtonProps = ElbeProps & {
-    colorStyle?: ElbeColorStyles;
-    onTap?: () => void;
-} & ({
-    icon?: IconChild;
-    label: string;
-} | {
-    icon: IconChild;
-    label?: string;
-});
-export declare class Button extends React.Component<ButtonProps & {
-    colorManner: ElbeColorManners;
-}> {
-    static major: (p: ButtonProps) => React.JSX.Element;
-    static minor: (p: ButtonProps) => React.JSX.Element;
-    static action: (p: ButtonProps) => React.JSX.Element;
-    static integrated: (p: ButtonProps) => React.JSX.Element;
-    render(): React.JSX.Element;
-}

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

@@ -1,14 +0,0 @@
-import type { ElbeColorManners, ElbeColorModes, ElbeColorStyles, ElbeColorThemes } from "../color_theme";
-import type { ElbeChildren } from "../util/util";
-import { type ElbeProps } from "./box";
-export declare function Card({ mode, colorScheme, colorStyle, colorManner, padding, margin, onTap, onLongTap, children, ...elbe }: {
-    mode?: ElbeColorModes;
-    colorScheme?: ElbeColorThemes;
-    colorStyle?: ElbeColorStyles;
-    colorManner?: ElbeColorManners;
-    padding?: number;
-    margin?: number;
-    onTap?: () => void;
-    onLongTap?: () => void;
-    children: ElbeChildren;
-} & ElbeProps): import("preact").JSX.Element;

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

@@ -1,8 +0,0 @@
-import type { ElbeChildren } from "../util/util";
-export declare function ElbeDialog({ title, open, onClose, children, _style, }: {
-    _style?: string;
-    title: string;
-    open: boolean;
-    onClose: () => void;
-    children: ElbeChildren;
-}): import("preact").JSX.Element;

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

@@ -1,15 +0,0 @@
-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/flex.d.ts

@@ -1,11 +0,0 @@
-import { type ElbeProps } from "./box";
-export type FlexProps = {
-    children: any;
-    gap?: number;
-    stretch?: boolean;
-    main?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
-    cross?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly";
-} & ElbeProps;
-export declare function FlexSpace({}: {}): import("preact").JSX.Element;
-export declare function Column({ gap, main, cross, stretch, children, ...p }: FlexProps): import("preact").JSX.Element;
-export declare function Row({ gap, main, cross, stretch, children, ...p }: FlexProps): import("preact").JSX.Element;

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

@@ -1,19 +0,0 @@
-import React from "preact/compat";
-import type { ElbeColorManners, ElbeColorStyles } from "../color_theme";
-import type { ElbeChild } from "../util/util";
-import { type ElbeProps } from "./box";
-export type IconChild = ElbeChild | ((_: any) => ElbeChild);
-export type IconButtonProps = {
-    icon?: IconChild;
-    colorStyle?: ElbeColorStyles;
-    onTap?: () => void;
-} & ElbeProps;
-export declare class IconButton extends React.Component<IconButtonProps & {
-    colorManner?: ElbeColorManners;
-}> {
-    static major: (p: IconButtonProps) => React.JSX.Element;
-    static minor: (p: IconButtonProps) => React.JSX.Element;
-    static action: (p: IconButtonProps) => React.JSX.Element;
-    static integrated: (p: IconButtonProps) => React.JSX.Element;
-    render(): React.JSX.Element;
-}

package/dist/ui/components/input/checkbox.d.ts

@@ -1,6 +0,0 @@
-import { type ElbeProps } from "../box";
-export declare function Checkbox({ value, label, onChange, ...elbe }: {
-    value: boolean;
-    label?: string;
-    onChange?: ((checked: boolean) => void) | null;
-} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/input_field.d.ts

@@ -1,22 +0,0 @@
-import React from "preact/compat";
-import { type ElbeProps } from "../box";
-import { _TextArea } from "./text_area";
-export type InputFieldProps = {
-    label?: string;
-    hint: string;
-    readonly?: boolean;
-    value: string | number;
-    onInput?: (value: string) => void;
-} & ElbeProps;
-export declare class Field extends React.Component<InputFieldProps & {
-    type?: "text" | "number" | "password" | "date" | "time" | "email";
-}> {
-    static text: (p: InputFieldProps) => React.JSX.Element;
-    static number: (p: InputFieldProps) => React.JSX.Element;
-    static password: (p: InputFieldProps) => React.JSX.Element;
-    static date: (p: InputFieldProps) => React.JSX.Element;
-    static time: (p: InputFieldProps) => React.JSX.Element;
-    static email: (p: InputFieldProps) => React.JSX.Element;
-    static multiLine: typeof _TextArea;
-    render(): React.JSX.Element;
-}

package/dist/ui/components/input/range.d.ts

@@ -1,8 +0,0 @@
-import { type ElbeProps } from "../box";
-export declare function Range({ value, onChange, min, max, step, ...elbe }: {
-    value: number;
-    min?: number;
-    step?: number;
-    max?: number;
-    onChange?: ((value: number) => void) | null;
-} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/select.d.ts

@@ -1,10 +0,0 @@
-import { type ElbeProps } from "../box";
-export declare function Select({ options, value, label, onChange, ...elbe }: {
-    options: {
-        key: string;
-        label: string;
-    }[];
-    value?: string;
-    label?: string;
-    onChange: (value: string) => any;
-} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/text_area.d.ts

@@ -1,10 +0,0 @@
-import { type ElbeProps } from "../box";
-export declare function _TextArea({ label, hint, readonly, rows, maxLength, value, onInput, ...elbe }: {
-    label?: string;
-    hint: string;
-    rows?: number;
-    maxLength?: number;
-    readonly?: boolean;
-    value: string | number;
-    onInput?: (value: string) => void;
-} & ElbeProps): import("preact").JSX.Element;

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

@@ -1,25 +0,0 @@
-import React from "preact/compat";
-export type PaddedProps = {
-    children: any;
-};
-export declare class Padded extends React.Component<PaddedProps & {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-}> {
-    constructor(props: PaddedProps & {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    });
-    static all: ({ amount, ...p }: PaddedProps & {
-        amount: number;
-    }) => React.JSX.Element;
-    static symmetric: ({ vertical, horizontal, ...p }: PaddedProps & {
-        vertical: number;
-        horizontal: number;
-    }) => React.JSX.Element;
-    render(): React.JSX.Element;
-}

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

@@ -1,23 +0,0 @@
-type HeaderParams = {
-    title?: string;
-    back: null | "close" | "back";
-    actions?: any;
-};
-/**
- * Header is a layout component that provides a header for a page.
- * It is used to create a consistent header for pages.
- * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
- * @param title - The title of the page.
- * @param actions - The actions to show on the right side of the header.
- */
-export declare function Header({ back, title, actions }: HeaderParams): import("preact/compat").JSX.Element;
-/**
- * Scaffold is a layout component that provides a header and a content area.
- * It is used to create a consistent layout for pages.
- */
-export declare function Scaffold({ children, limited, gap, ...header }: {
-    limited?: boolean;
-    children: any;
-    gap?: number;
-} & HeaderParams): import("preact/compat").JSX.Element;
-export {};

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

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

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

@@ -1,33 +0,0 @@
-import React from "preact/compat";
-import type { ElbeTypeStyles } from "../color_theme";
-import type { ElbeChildren } from "../util/util";
-import { type ElbeProps } from "./box";
-export type TextProps = {
-    align?: "start" | "center" | "end";
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-    striked?: boolean;
-    color?: string;
-    size?: number;
-    children?: ElbeChildren;
-    v?: string;
-} & ElbeProps;
-export declare class Text extends React.Component<TextProps & {
-    typeStyle?: ElbeTypeStyles;
-}> {
-    static h1: (p: TextProps) => React.JSX.Element;
-    static h2: (p: TextProps) => React.JSX.Element;
-    static h3: (p: TextProps) => React.JSX.Element;
-    static h4: (p: TextProps) => React.JSX.Element;
-    static h5: (p: TextProps) => React.JSX.Element;
-    static h6: (p: TextProps) => React.JSX.Element;
-    static s: (p: TextProps) => React.JSX.Element;
-    static m: (p: TextProps) => React.JSX.Element;
-    static l: (p: TextProps) => React.JSX.Element;
-    static code: (p: TextProps) => React.JSX.Element;
-    constructor({ typeStyle, ...props }: TextProps & {
-        typeStyle?: ElbeTypeStyles;
-    });
-    render(): React.JSX.Element;
-}

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

@@ -1,12 +0,0 @@
-import type { ElbeChild } from "../util/util";
-import type { ElbeProps } from "./box";
-export type ToggleButtonItem<T> = {
-    icon?: (_: any) => ElbeChild;
-    label: string;
-    key: T;
-};
-export declare function ToggleButton<T>({ items, onSelect, value, ...elbe }: {
-    items: ToggleButtonItem<T>[];
-    onSelect: ((value: T) => void) | null;
-    value: T;
-} & ElbeProps): import("preact").JSX.Element;

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

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

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

@@ -1,10 +0,0 @@
-/**
- * show a simple confirm dialog
- * @param param0 the title and message of the dialog
- * @returns a promise that resolves to true if the user clicks "yes" or "okay" and false if the user clicks "no"
- */
-export declare function showConfirmDialog({ title, message, okay, }: {
-    message: string;
-    title: string;
-    okay?: boolean;
-}): Promise<boolean>;

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

@@ -1 +0,0 @@
-export declare function _ElbeErr(msg: string): import("preact").JSX.Element;

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

@@ -1,5 +0,0 @@
-/**
- * show a toast message at the bottom of the screen
- * @param message the message to show
- */
-export declare function showToast(message: string): void;

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

@@ -1,19 +0,0 @@
-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

@@ -1,100 +0,0 @@
-/* BUILD CSS BY:
-- npm install -g sass
-- sass style/elbe.scss dist/elbe.css
-*/
-
-@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: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");
-
-// COPY OF THE FUNCTION IN COLOR_STYLE
-@function inter($colorA, $colorB: #888888, $weight: 50%) {
-  @return mix($colorA, $colorB, $weight);
-}
-
-$g-radius: 9px !default;
-$c-accent: #1a396f !default;
-$t-font-body: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif !default;
-$t-font-accent: Calistoga, $t-font-body !default;
-
-$c-modes: (
-  primary: (
-    back: #ffffff,
-    front: #222222,
-    border: #22222218,
-  ),
-  inverse: (
-    back: #222222,
-    front: #ffffff,
-    border: #ffffff14,
-  ),
-  secondary: (
-    back: inter($c-accent, #ffffff, 7%),
-    front: #222222,
-    border: #22222214,
-  ),
-) !default;
-
-$c-styles: (
-  accent: (
-    back: $c-accent,
-  ),
-  error: (
-    back: #f34343,
-  ),
-  warning: (
-    back: #ffbf00,
-    front: #222222,
-  ),
-  success: (
-    back: #29ac5e,
-  ),
-  info: (
-    back: #2463aa,
-  ),
-  //TODO: Button Styles
-  loud:
-    (
-      back: $c-accent,
-      border: transparent,
-    ),
-  action: (
-    back: transparent,
-    front: $c-accent,
-    border: transparent,
-  ),
-  integrated: (
-    back: transparent,
-    border: transparent,
-  ),
-) !default;
-
-$t-styles: (
-  "s": 0.7rem,
-  "m": 1rem,
-  "l": 1.2rem,
-  "huge": 4rem,
-) !default;
-
-$t-headers: (
-  "6": 1.1rem,
-  "5": 1.2rem,
-  "4": 1.4rem,
-  "3": 1.5rem,
-  "2": 1.8rem,
-  "1": 2rem,
-) !default;
-
-// CSS Variables
-:root {
-  --g-radius: #{$g-radius};
-  --c-accent: #{$c-accent};
-  --t-font-body: #{$t-font-body};
-  --t-font-accent: #{$t-font-accent};
-}
-
-@import "./style/root.scss";
-@import "./style/color_style.scss";
-@import "./style/type_style.scss";
-@import "./style/components.scss";

package/src/bit/bit.tsx

@@ -1,128 +0,0 @@
-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>) => {
-    try {
-      if (JSON.stringify(n) === JSON.stringify(s.peek())) return;
-    } catch (e) {}
-    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

@@ -1,112 +0,0 @@
-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) };
-}