elbe-ui 0.2.5 → 0.2.14

package/src/ui/components/flex.tsx

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

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

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

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

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

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

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

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

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

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

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

package/src/ui/util/confirm_dialog.ts

@@ -0,0 +1,53 @@
+/**
+ * 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

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

@@ -0,0 +1,14 @@
+/**
+ * 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

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