elbe-ui 0.2.26 → 0.2.34

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/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/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/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) };
-}

package/src/index.tsx

@@ -1,29 +0,0 @@
-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";
-export * from "./ui/components/button";
-export * from "./ui/components/card";
-export * from "./ui/components/dialog";
-export * from "./ui/components/flex";
-export * from "./ui/components/icon_button";
-export * from "./ui/components/input/checkbox";
-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/scaffold";
-export * from "./ui/components/spinner";
-export * from "./ui/components/text";
-export * from "./ui/components/toggle_button";
-export * from "./ui/components/util";
-export * from "./ui/util/confirm_dialog";
-export * from "./ui/util/toast";
-export * from "./ui/util/util";
-
-export const Icons = Lucide.icons;

package/src/service/s_api.ts

@@ -1,102 +0,0 @@
-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/color_theme.ts

@@ -1,24 +0,0 @@
-export type ElbeColorStyles =
-  | "accent"
-  | "error"
-  | "warning"
-  | "success"
-  | "info";
-
-export type ElbeColorManners = "major" | "minor" | "action" | "integrated";
-
-export type ElbeColorThemes = "primary" | "secondary" | "inverse";
-
-export type ElbeColorModes = "light" | "dark";
-
-export type ElbeTypeStyles =
-  | "header-1"
-  | "header-2"
-  | "header-3"
-  | "header-4"
-  | "header-5"
-  | "header-6"
-  | "text-s"
-  | "text-m"
-  | "text-l"
-  | "code";

package/src/ui/components/badge.tsx

@@ -1,78 +0,0 @@
-import React from "preact/compat";
-import type { ElbeColorStyles } from "../color_theme";
-import type { ElbeChild, ElbeChildren } from "../util/util";
-import type { ElbeProps } from "./box";
-
-export type BadgeProps = {
-  count?: number;
-  message?: string;
-  child?: ElbeChild;
-  hidden?: boolean;
-  children?: ElbeChildren;
-} & ElbeProps;
-
-export function TestBadge(p: BadgeProps) {
-  return new Badge({ ...p, colorStyle: "accent" });
-}
-
-export class Badge extends React.Component<
-  BadgeProps & { colorStyle: ElbeColorStyles }
-> {
-  constructor(props: BadgeProps & { colorStyle: ElbeColorStyles }) {
-    super(props);
-  }
-
-  static accent(p: BadgeProps) {
-    return <Badge {...p} colorStyle="accent" />;
-  }
-
-  static error(p: BadgeProps) {
-    return <Badge {...p} colorStyle="error" />;
-  }
-
-  static warning(p: BadgeProps) {
-    return <Badge {...p} colorStyle="warning" />;
-  }
-
-  static success(p: BadgeProps) {
-    return <Badge {...p} colorStyle="success" />;
-  }
-
-  static info(p: BadgeProps) {
-    return <Badge {...p} colorStyle="info" />;
-  }
-
-  render() {
-    return (
-      <div
-        style={{
-          position: "relative",
-          display: "inline-block",
-        }}
-      >
-        {this.props.child}
-        {this.props.children}
-        <div
-          class={`b ${this.props.colorStyle} ${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,
-          }}
-        >
-          {this.props.message ?? this.props.count}
-        </div>
-      </div>
-    );
-  }
-}

package/src/ui/components/box.tsx

@@ -1,49 +0,0 @@
-import { h } from "preact";
-import type { ElbeColorModes, ElbeColorThemes } from "../color_theme";
-import type { ElbeChildren } from "../util/util";
-
-export type ElbeProps = {
-  class?: string;
-  style?: React.CSSProperties;
-  tooltip?: string;
-};
-
-export function applyProps(
-  p: ElbeProps,
-  classes?: string | null | (string | false | null | undefined)[],
-  style?: React.CSSProperties
-) {
-  if (Array.isArray(classes)) {
-    classes = classes.filter((c) => c).join(" ");
-  }
-  return {
-    class: `${classes || ""} ${p.class || ""}`,
-    style: { ...(style ?? {}), ...(p.style ?? {}) },
-    ...(p.tooltip ? { ["data-tooltip"]: p.tooltip } : {}),
-  };
-}
-
-export function Box({
-  mode,
-  scheme = "primary",
-  padding = 0,
-  margin = 0,
-  children,
-  ...elbe
-}: {
-  mode?: ElbeColorModes;
-  scheme?: ElbeColorThemes;
-  padding?: number;
-  margin?: number;
-  children: ElbeChildren;
-} & ElbeProps) {
-  return h(
-    "div",
-    applyProps(elbe, [scheme, mode], {
-      padding: `${padding}rem`,
-      margin: `${margin}rem`,
-      ...elbe.style,
-    }),
-    children
-  );
-}