elbe-ui 0.2.23 → 0.2.30

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

package/style/color_style.scss

@@ -1,149 +0,0 @@
-@use "sass:color";
-@function cPart($c, $part) {@return color.channel($c, $part, $space: rgb)}
-
-@function cHumanGray($c) {
-  @return calc(((cPart($c, "red") * 299) + (cPart($c,"green") * 587) + (cPart($c,"blue") * 114)) / 1000);
-}
-
-@function contrast($colorA, $colorB) {
-  $yiqA: cHumanGray($colorA);
-  $yiqB: cHumanGray($colorB);
-  @return abs($yiqA - $yiqB);
-}
-
-@function mg($map, $value) {
-  @return map-get($map, $value);
-}
-
-@function ifn($a, $b) {
-  @return if($a ==null, $b, $a);
-}
-
-@function inter($colorA, $colorB: #888888, $weight: 50%) {
-  @return mix($colorA, $colorB, $weight);
-}
-
-@mixin colored($back, $front, $border) {
-  color: $front;
-  background-color: $back;
-  border-color: $border;
-}
-
-@mixin blinking($length: 1s) {
-  animation: blinker $length linear infinite;
-}
-
-@keyframes blinker {
-  50% {
-    opacity: 0;
-  }
-}
-
-// SHOW WHEN THE STYLES ARE NOT BEING USED WITHIN A MODE
-@each $style, $s_colors in $c-styles {
-  .#{$style} {
-    @include blinking();
-    @include colored(rgb(255, 55, 0), white, transparent);
-  }
-}
-
-//COLORS
-
-@each $mode, $m_colors in $c-modes {
-  .#{$mode} {
-    $mode_back: mg($m_colors, back);
-    $mode_front: mg($m_colors, front);
-    $mode_border: mg($m_colors, border);
-    @include colored($mode_back, $mode_front, $mode_border);
-
-    .plain {
-      @include colored(transparent, $mode_front, $mode_border);
-    }
-
-    .plain-opaque {
-      @include colored($mode_back, $mode_front, $mode_border);
-    }
-
-    & {
-      --c-mode: #{$mode};
-    }
-
-    @each $style, $s_colors in $c-styles {
-      $back: mg($s_colors, back);
-      $border: ifn(mg($s_colors, border), $back);
-
-      $effectiveBack: ifn(
-        if(mg($s_colors, back) == transparent, $mode_back, mg($s_colors, back)),
-        $mode_back
-      );
-      $front: ifn(
-        mg($s_colors, front),
-        if(contrast($mode_front, $effectiveBack) > 128, $mode_front, $mode_back)
-      );
-
-      & {
-        --c-#{$style}: #{$back};
-      }
-
-      .#{$style} {
-        animation: none;
-
-        @include colored($back, $front, $border);
-
-        &.minor {
-          $mback: inter(mg($s_colors, back), mg($m_colors, back), 25%);
-          $mfront: mg($s_colors, back);
-          $mborder: ifn(mg($s_colors, border), $mfront);
-
-          @include colored($mback, $mfront, $mborder);
-
-          &.hovered {
-            $hback: inter($mback, $mfront, 90%);
-            @include colored($hback, $mfront, $mborder);
-          }
-
-          &.pressed {
-            $pback: inter($mback, $mfront, 75%);
-            @include colored($pback, $mfront, $mborder);
-          }
-
-          &.disabled {
-            $disback: grayscale($mback);
-            $disfront: grayscale($mfront);
-            $disborder: if($mborder ==null, null, grayscale($mborder));
-
-            @include colored($disback, $disfront, $disborder);
-          }
-        }
-
-        &.hovered {
-          $hback: inter($back, $front, 95%);
-          $hborder: if(
-            $border ==transparent,
-            transparent,
-            inter($border, $front, 95%)
-          );
-          @include colored($hback, $front, $hborder);
-        }
-
-        &.pressed {
-          $pback: inter($back, $front, 85%);
-          $pborder: if(
-            $border ==transparent,
-            transparent,
-            inter($border, $front, 85%)
-          );
-          @include colored($pback, $front, $pborder);
-        }
-
-        &.disabled {
-          @include colored(
-            grayscale($back),
-            grayscale($front),
-            grayscale($back)
-          );
-        }
-      }
-    }
-  }
-}