elbe-ui 0.2.26 → 0.2.30

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

package/src/ui/components/button.tsx

@@ -1,61 +0,0 @@
-import React from "preact/compat";
-import type { ElbeColorManners, ElbeColorStyles } from "../color_theme";
-import { _ElbeErr } from "../util/error_view";
-import { applyProps, 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 class Button extends React.Component<
-  ButtonProps & {
-    colorManner: ElbeColorManners;
-  }
-> {
-  static major = (p: ButtonProps) => _btn(p, "major");
-  static minor = (p: ButtonProps) => _btn(p, "minor");
-  static action = (p: ButtonProps) => _btn(p, "action");
-  static integrated = (p: ButtonProps) => _btn(p, "integrated");
-
-  render() {
-    return _btn(this.props, this.props.colorManner);
-  }
-}
-
-function _btn(
-  { colorStyle, onTap, icon, label, ...elbe }: ButtonProps,
-  colorManner: ElbeColorManners
-) {
-  return label || icon ? (
-    <button
-      {...applyProps(
-        elbe,
-        [
-          "row",
-          "main-center",
-          "gap-half",
-          colorStyle ?? "accent",
-          colorManner,
-          !onTap && "disabled",
-        ],
-        {
-          border: "none",
-        }
-      )}
-      onClick={() => onTap && onTap()}
-    >
-      {typeof icon === "function" ? icon({}) : icon}
-      {label && <span>{label}</span>}
-    </button>
-  ) : (
-    _ElbeErr("Button requires either an icon or a message")
-  );
-}

package/src/ui/components/card.tsx

@@ -1,45 +0,0 @@
-import type {
-  ElbeColorManners,
-  ElbeColorModes,
-  ElbeColorStyles,
-  ElbeColorThemes,
-} from "../color_theme";
-import type { ElbeChildren } from "../util/util";
-import { applyProps, type ElbeProps } from "./box";
-
-export function Card({
-  mode,
-  colorScheme = "primary",
-  colorStyle,
-  colorManner,
-  padding = 1,
-  margin = 0,
-  onTap,
-  onLongTap,
-  children,
-  ...elbe
-}: {
-  mode?: ElbeColorModes;
-  colorScheme?: ElbeColorThemes;
-  colorStyle?: ElbeColorStyles;
-  colorManner?: ElbeColorManners;
-  padding?: number;
-  margin?: number;
-  onTap?: () => void;
-  onLongTap?: () => void;
-  children: ElbeChildren;
-} & ElbeProps) {
-  return (
-    <div
-      {...applyProps(
-        elbe,
-        ["card", colorScheme, colorStyle, colorManner, mode],
-        { padding: `${padding}rem`, margin: `${margin}rem` }
-      )}
-      onClick={onTap}
-      onContextMenu={onLongTap}
-    >
-      {children}
-    </div>
-  );
-}

package/src/ui/components/dialog.tsx

@@ -1,51 +0,0 @@
-import { X } from "lucide-react";
-import type { ElbeChildren } from "../util/util";
-import { Spaced } from "./util";
-
-export function ElbeDialog({
-  title,
-  open,
-  onClose,
-  children,
-  _style,
-}: {
-  _style?: string;
-  title: string;
-  open: boolean;
-  onClose: () => void;
-  children: ElbeChildren;
-}) {
-  return (
-    <dialog
-      onClick={(e) => e.stopPropagation()}
-      open={open}
-      style={"text-align: start" + (_style ?? "")}
-    >
-      <div
-        class=" card plain-opaque padding-none"
-        style="max-width: 40rem; min-width: 10rem"
-      >
-        <div class="row cross-start padded">
-          <div class="flex-1 b" style="margin-top: 0.6rem; font-size: 1.2rem">
-            {title}
-          </div>
-          <button
-            class="integrated"
-            style="width: 3rem"
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onClose();
-            }}
-          >
-            <X />
-          </button>
-        </div>
-        <Spaced amount={0.5} />
-        <div class="padded" style="max-height: 80vh; overflow: auto">
-          {children}
-        </div>
-      </div>
-    </dialog>
-  );
-}

package/src/ui/components/error_view.tsx

@@ -1,72 +0,0 @@
-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/flex.tsx

@@ -1,64 +0,0 @@
-import { applyProps, type ElbeProps } from "./box";
-
-export type FlexProps = {
-  children: any;
-  gap?: number;
-  // shorthand for cross="stretch"
-  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 function FlexSpace({}) {
-  return <div style="flex:1"></div>;
-}
-
-export function Column({
-  gap = 1,
-  main = "start",
-  cross = "stretch",
-  stretch = false,
-  children,
-  ...p
-}: FlexProps) {
-  return _Flex(false, { gap, main, cross, stretch, children }, p);
-}
-
-export function Row({
-  gap = 1,
-  main = "start",
-  cross,
-  stretch = false,
-  children,
-  ...p
-}: FlexProps) {
-  return _Flex(true, { gap, main, cross, stretch, children }, p);
-}
-
-function _Flex(row: boolean, p: FlexProps, elbe: ElbeProps) {
-  return (
-    <div
-      {...applyProps(elbe, row ? "row" : "column", {
-        justifyContent: p.main,
-        alignItems: p.cross || (p.stretch ? "stretch" : "center"),
-        gap: `${p.gap}rem`,
-      })}
-    >
-      {p.children}
-    </div>
-  );
-}

package/src/ui/components/icon_button.tsx

@@ -1,56 +0,0 @@
-import React from "preact/compat";
-import type { ElbeColorManners, ElbeColorStyles } from "../color_theme";
-import type { ElbeChild } from "../util/util";
-import { applyProps, type ElbeProps } from "./box";
-
-export type IconChild = ElbeChild | ((_: any) => ElbeChild);
-
-export type IconButtonProps = {
-  icon?: IconChild;
-  colorStyle?: ElbeColorStyles;
-
-  onTap?: () => void;
-} & ElbeProps;
-
-export class IconButton extends React.Component<
-  IconButtonProps & { colorManner?: ElbeColorManners }
-> {
-  static major = (p: IconButtonProps) => _btn(p, "major");
-  static minor = (p: IconButtonProps) => _btn(p, "minor");
-  static action = (p: IconButtonProps) => _btn(p, "action");
-  static integrated = (p: IconButtonProps) => _btn(p, "integrated");
-
-  render() {
-    return _btn(this.props, this.props.colorManner);
-  }
-}
-
-function _btn(
-  { icon, onTap, ...elbe }: IconButtonProps,
-  colorManner: ElbeColorManners = "major"
-) {
-  return (
-    <button
-      {...applyProps(
-        elbe,
-        [
-          "row",
-          "main-center",
-          "gap-half",
-          elbe.colorStyle,
-          colorManner,
-          !onTap && "disabled",
-        ],
-        {
-          border: "none",
-          borderRadius: "3rem",
-          height: "3rem",
-          width: "3rem",
-        }
-      )}
-      onClick={() => onTap && onTap()}
-    >
-      {typeof icon === "function" ? icon({}) : icon}
-    </button>
-  );
-}

package/src/ui/components/input/checkbox.tsx

@@ -1,32 +0,0 @@
-import { applyProps, type ElbeProps } from "../box";
-
-export function Checkbox({
-  value,
-  label,
-  onChange,
-  ...elbe
-}: {
-  value: boolean;
-  label?: string;
-  onChange?: ((checked: boolean) => void) | null;
-} & ElbeProps) {
-  return (
-    <div
-      class={`row ${onChange ? "" : "disabled"}`}
-      style={{
-        gap: ".75rem",
-        filter: onChange ? "" : "grayscale(1)",
-        opacity: onChange ? "" : "0.5",
-      }}
-    >
-      <input
-        type="checkbox"
-        {...applyProps(elbe)}
-        disabled={!onChange}
-        checked={value}
-        onChange={(e) => onChange?.(e.currentTarget.checked)}
-      />
-      {label && <div style="margin-top: -.25rem">{label}</div>}
-    </div>
-  );
-}