elbe-ui 0.2.26 → 0.2.34

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