elbe-ui 0.2.26 → 0.2.30

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

package/src/ui/components/spinner.tsx

@@ -1,11 +0,0 @@
-import { Icons } from "../..";
-
-export function Spinner({ padding = 2 }: { padding?: number }) {
-  return (
-    <div style={{ padding: `${padding}rem` }} class="centered">
-      <div class="rotate-box">
-        <Icons.LoaderCircle />
-      </div>
-    </div>
-  );
-}

package/src/ui/components/text.tsx

@@ -1,78 +0,0 @@
-import React from "preact/compat";
-import type { ElbeTypeStyles } from "../color_theme";
-import type { ElbeChildren } from "../util/util";
-import { applyProps, 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 class Text extends React.Component<
-  TextProps & { typeStyle?: ElbeTypeStyles }
-> {
-  static h1 = (p: TextProps) => <Text {...p} typeStyle="header-1" />;
-  static h2 = (p: TextProps) => <Text {...p} typeStyle="header-2" />;
-  static h3 = (p: TextProps) => <Text {...p} typeStyle="header-3" />;
-  static h4 = (p: TextProps) => <Text {...p} typeStyle="header-4" />;
-  static h5 = (p: TextProps) => <Text {...p} typeStyle="header-5" />;
-  static h6 = (p: TextProps) => <Text {...p} typeStyle="header-6" />;
-  static s = (p: TextProps) => <Text {...p} typeStyle="text-s" />;
-  static m = (p: TextProps) => <Text {...p} typeStyle="text-m" />;
-  static l = (p: TextProps) => <Text {...p} typeStyle="text-l" />;
-  static code = (p: TextProps) => <Text {...p} typeStyle="code" />;
-
-  constructor({
-    typeStyle = "text-m",
-    ...props
-  }: TextProps & { typeStyle?: ElbeTypeStyles }) {
-    super({ ...props, typeStyle });
-  }
-
-  render() {
-    const {
-      align,
-      bold,
-      italic,
-      underline,
-      striked,
-      color,
-      size,
-      children,
-      typeStyle,
-      v,
-      ...elbe
-    } = this.props;
-    return (
-      <span
-        {...applyProps(
-          elbe,
-          [
-            "text",
-            align,
-            bold && "b",
-            italic && "i",
-            underline && "underline",
-            striked && "striked",
-            color,
-            typeStyle,
-          ],
-          {
-            fontSize: size ? `${size}rem` : "",
-            color: color || "",
-          }
-        )}
-      >
-        {v}
-        {children}
-      </span>
-    );
-  }
-}

package/src/ui/components/toggle_button.tsx

@@ -1,52 +0,0 @@
-import { Icons, applyProps } from "../..";
-import { _ElbeErr } from "../util/error_view";
-import type { ElbeChild } from "../util/util";
-import type { ElbeProps } from "./box";
-import { Card } from "./card";
-import { Column, FlexSpace } from "./flex";
-
-export type ToggleButtonItem<T> = {
-  icon?: (_: any) => ElbeChild;
-  label: string;
-  key: T;
-};
-
-export function ToggleButton<T>({
-  items,
-  onSelect,
-  value,
-  ...elbe
-}: {
-  items: ToggleButtonItem<T>[];
-
-  onSelect: ((value: T) => void) | null;
-  value: T;
-} & ElbeProps) {
-  return items.length < 1 ? (
-    _ElbeErr("ToggleButton requires at least one item")
-  ) : (
-    <Card
-      mode="light"
-      colorScheme="primary"
-      padding={0}
-      {...applyProps(elbe, null, { overflow: "hidden", width: "100%" })}
-    >
-      <Column stretch gap={0}>
-        {items.map((item) => (
-          <Card
-            onTap={onSelect ? () => onSelect(item.key) : undefined}
-            class={`row b ${onSelect ? "pointer" : "disabled"}`}
-            style={{ border: "none", borderRadius: 0, gap: ".75rem" }}
-            colorStyle="accent"
-            colorManner={value === item.key ? "minor" : "action"}
-          >
-            {item.icon?.({})}
-            {item.label}
-            <FlexSpace />
-            {value === item.key && <Icons.Check />}
-          </Card>
-        ))}
-      </Column>
-    </Card>
-  );
-}

package/src/ui/components/util.tsx

@@ -1,3 +0,0 @@
-export function Spaced({ amount = 1 }) {
-  return <div style={{ width: amount + "rem", height: amount + "rem" }}></div>;
-}

package/src/ui/util/confirm_dialog.ts

@@ -1,53 +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 function showConfirmDialog({
-  title,
-  message,
-  okay = false,
-}: {
-  message: string;
-  title: string;
-  okay?: boolean;
-}): Promise<boolean> {
-  return new Promise((resolve, reject) => {
-    const dialog = document.createElement("div");
-    dialog.classList.add("dialog");
-    dialog.innerHTML = `<dialog open>
-        <div
-          class=" card plain-opaque"
-          style="max-width: 30rem; min-width: 10rem"
-        >
-          <div class="row cross-start">
-            <div class="flex-1 b" style="margin-top: 0.47rem; font-size: 1.2rem">
-            ${title}
-            </div>
-            <button class="integrated" style="width: 3rem" onclick="conf_resolve(false)">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x "><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
-            </button>
-          </div>
-         <div style="margin-top: 1rem; margin-bottom: 1rem">
-          ${message}
-          </div>
-          <div class="row main-end gap">
-  
-        ${
-          okay
-            ? '<button class="loud" style="padding-left:1rem; padding-right:1rem" onclick="conf_resolve(true)">okay</button>'
-            : '<button class="loud minor" style="padding-left:1rem; padding-right:1rem" onclick="conf_resolve(false)">no</button>' +
-              '<button class="loud" style="padding-left:1rem; padding-right:1rem" onclick="conf_resolve(true)">yes</button>'
-        }
-      </div>
-  
-        </div>
-      </dialog>
-    `;
-    document.body.appendChild(dialog);
-    (window as any)["conf_resolve"] = (v: any) => {
-      document.body.removeChild(dialog);
-      resolve(v);
-    };
-  });
-}

package/src/ui/util/error_view.tsx

@@ -1,16 +0,0 @@
-import { Icons } from "../..";
-
-export function _ElbeErr(msg: string) {
-  return (
-    <div
-      class="row text-s gap-half"
-      style="background: #ee0044; color: white; border-radius: 4px; text-align: left; padding: .5rem"
-    >
-      <Icons.CircleX />
-      <div class="column gap-none cross-stretch">
-        <b class="text-s">elbe error</b>
-        <span style="margin-top: -.125rem">{msg}</span>
-      </div>
-    </div>
-  );
-}

package/src/ui/util/toast.ts

@@ -1,14 +0,0 @@
-/**
- * show a toast message at the bottom of the screen
- * @param message the message to show
- */
-
-export function showToast(message: string) {
-  const toast = document.createElement("div");
-  toast.classList.add("toast");
-  toast.innerText = message;
-  document.body.appendChild(toast);
-  setTimeout(() => {
-    toast.remove();
-  }, 3000);
-}

package/src/ui/util/util.ts

@@ -1,36 +0,0 @@
-import type React from "preact/compat";
-import { showToast } from "./toast";
-
-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 function share(
-  data: { title: string; text?: string; url: string },
-  toastMsg = "copied to clipboard. Share it with others."
-) {
-  const msg = `${data.title}\n${data.text ?? ""}\n\n${data.url}`;
-
-  if (navigator.share) {
-    navigator.share(data).catch(() => copyToClipboard(msg, toastMsg));
-  } else {
-    copyToClipboard(msg, toastMsg);
-  }
-}
-
-/**
- * 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 function copyToClipboard(
-  text: string,
-  toastMsg = "copied to clipboard"
-) {
-  navigator.clipboard.writeText(text);
-  if (toastMsg) showToast(toastMsg);
-}