elbe-ui 0.2.26 → 0.2.34

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

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

@@ -1,57 +0,0 @@
-import React from "preact/compat";
-import { applyProps, 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 class Field extends React.Component<
-  InputFieldProps & {
-    type?: "text" | "number" | "password" | "date" | "time" | "email";
-  }
-> {
-  static text = (p: InputFieldProps) => <Field {...p} type="text" />;
-  static number = (p: InputFieldProps) => <Field {...p} type="number" />;
-  static password = (p: InputFieldProps) => <Field {...p} type="password" />;
-  static date = (p: InputFieldProps) => <Field {...p} type="date" />;
-  static time = (p: InputFieldProps) => <Field {...p} type="time" />;
-  static email = (p: InputFieldProps) => <Field {...p} type="email" />;
-
-  static multiLine = _TextArea;
-
-  render() {
-    const { label, hint, readonly, type, value, onInput, ...elbe } = this.props;
-
-    return (
-      <div
-        style={{
-          width: "12rem !important",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "stretch",
-        }}
-        data-tooltip={this.props?.tooltip}
-      >
-        <input
-          type={this.props.type}
-          {...applyProps(this.props, null, {
-            width: "100%",
-          })}
-          size={5}
-          label={this.props.label}
-          placeholder={this.props.hint}
-          value={this.props.value}
-          onInput={(e) =>
-            this.props.onInput && this.props.onInput(e.currentTarget.value)
-          }
-          readonly={this.props.readonly}
-        />
-      </div>
-    );
-  }
-}

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

@@ -1,37 +0,0 @@
-import { _ElbeErr } from "../../util/error_view";
-import { applyProps, type ElbeProps } from "../box";
-
-export function Range({
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  ...elbe
-}: {
-  value: number;
-  min?: number;
-  step?: number;
-  max?: number;
-  onChange?: ((value: number) => void) | null;
-} & ElbeProps) {
-  return min > max ? (
-    _ElbeErr("Range: max is smaller than min")
-  ) : (
-    <input
-      type="range"
-      {...applyProps(elbe, null, {
-        filter: onChange ? "" : "grayscale(1)",
-        opacity: onChange ? "" : "0.5",
-        cursor: onChange ? "pointer" : "not-allowed",
-        width: "100%",
-      })}
-      min={min}
-      max={max}
-      step={step}
-      disabled={!onChange}
-      value={value}
-      onInput={(e) => onChange?.(Number(e.currentTarget.value))}
-    />
-  );
-}

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

@@ -1,29 +0,0 @@
-import { applyProps, type ElbeProps } from "../box";
-
-export function Select({
-  options,
-  value,
-  label,
-  onChange,
-  ...elbe
-}: {
-  options: { key: string; label: string }[];
-  value?: string;
-  label?: string;
-  onChange: (value: string) => any;
-} & ElbeProps) {
-  return (
-    <select
-      {...applyProps(elbe)}
-      value={value}
-      label={label}
-      onChange={(e) => onChange(e.currentTarget.value)}
-    >
-      {options.map(({ key, label }) => (
-        <option key={key} value={key}>
-          {label}
-        </option>
-      ))}
-    </select>
-  );
-}

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

@@ -1,45 +0,0 @@
-import { applyProps, type ElbeProps } from "../box";
-
-export function _TextArea({
-  label,
-  hint,
-  readonly,
-  rows = 4,
-  maxLength,
-  value,
-  onInput,
-  ...elbe
-}: {
-  label?: string;
-  hint: string;
-  rows?: number;
-  maxLength?: number;
-  readonly?: boolean;
-  value: string | number;
-  onInput?: (value: string) => void;
-} & ElbeProps) {
-  return (
-    <div
-      style={{
-        width: "12rem !important",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch",
-      }}
-      data-tooltip={elbe.tooltip}
-    >
-      <textarea
-        {...applyProps(elbe, null, { width: "100%" })}
-        label={label}
-        size={5}
-        cols={5}
-        placeholder={hint}
-        rows={rows}
-        maxLength={maxLength}
-        value={value}
-        onInput={(e) => onInput && onInput(e.currentTarget.value)}
-        readonly={readonly}
-      />
-    </div>
-  );
-}

package/src/ui/components/padded.tsx

@@ -1,62 +0,0 @@
-import React from "preact/compat";
-
-export type PaddedProps = {
-  children: any;
-};
-
-export 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;
-    }
-  ) {
-    super(props);
-  }
-
-  static all = ({ amount = 1, ...p }: PaddedProps & { amount: number }) => (
-    <Padded
-      {...{ ...p, top: amount, right: amount, bottom: amount, left: amount }}
-    />
-  );
-
-  static symmetric = ({
-    vertical = 0,
-    horizontal = 0,
-    ...p
-  }: PaddedProps & { vertical: number; horizontal: number }) => (
-    <Padded
-      {...{
-        ...p,
-        top: vertical,
-        bottom: vertical,
-        left: horizontal,
-        right: horizontal,
-      }}
-    />
-  );
-
-  render() {
-    return (
-      <div
-        style={{
-          paddingTop: `${this.props.top}rem`,
-          paddingRight: `${this.props.right}rem`,
-          paddingBottom: `${this.props.bottom}rem`,
-          paddingLeft: `${this.props.left}rem`,
-        }}
-      >
-        {this.props.children}
-      </div>
-    );
-  }
-}

package/src/ui/components/scaffold.tsx

@@ -1,79 +0,0 @@
-import { useEffect, useState } from "preact/compat";
-import { Column, IconButton, Icons, Row, Text } from "../..";
-
-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 function Header({ back, title, actions }: HeaderParams) {
-  if (history.length == 0) back = null;
-  const goBack = () => history.go(-1);
-
-  const [isScrolledTop, setIsScrolled] = useState(false);
-
-  useEffect(() => {
-    const _handle = () => setIsScrolled(window.scrollY > 0);
-    window.addEventListener("scroll", _handle);
-    return () => {
-      window.removeEventListener("scroll", _handle);
-    };
-  }, []);
-
-  return (
-    <div>
-      <div style="height: 4.5rem"></div>
-      <div
-        class="header"
-        style={isScrolledTop ? "" : "border-color: transparent"}
-      >
-        <div class="flex-1">
-          {back === "close" ? (
-            <IconButton.integrated icon={Icons.X} onTap={goBack} />
-          ) : back === "back" ? (
-            <IconButton.integrated icon={Icons.ArrowLeft} onTap={goBack} />
-          ) : null}
-        </div>
-        <Text.h4 v={title} />
-        <Row class="flex-1" gap={0.5} main="end">
-          {actions}
-        </Row>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Scaffold is a layout component that provides a header and a content area.
- * It is used to create a consistent layout for pages.
- */
-export function Scaffold({
-  children,
-  limited = false,
-  gap = 1,
-  ...header
-}: {
-  limited?: boolean;
-  children: any;
-  gap?: number;
-} & HeaderParams) {
-  return (
-    <Column cross="stretch" gap={0}>
-      <Header {...header} />
-
-      <div class={`padded ${limited ? "base-limited" : ""}`}>
-        <Column cross="stretch" gap={gap ?? 1}>
-          {children}
-        </Column>
-      </div>
-    </Column>
-  );
-}