elbe-ui 0.2.5 → 0.2.14

package/dist/ui/components/button.d.ts

@@ -0,0 +1,23 @@
+import React from "preact/compat";
+import type { ElbeColorManners, ElbeColorStyles } from "../color_theme";
+import { type ElbeProps } from "./box";
+import type { IconChild } from "./icon_button";
+export type ButtonProps = ElbeProps & {
+    colorStyle?: ElbeColorStyles;
+    onTap?: () => void;
+} & ({
+    icon?: IconChild;
+    message: string;
+} | {
+    icon: IconChild;
+    message?: string;
+});
+export declare class Button extends React.Component<ButtonProps & {
+    colorManner: ElbeColorManners;
+}> {
+    static major: (p: ButtonProps) => React.JSX.Element;
+    static minor: (p: ButtonProps) => React.JSX.Element;
+    static action: (p: ButtonProps) => React.JSX.Element;
+    static integrated: (p: ButtonProps) => React.JSX.Element;
+    render(): React.JSX.Element;
+}

package/dist/ui/components/card.d.ts

@@ -0,0 +1,14 @@
+import type { ElbeColorManners, ElbeColorModes, ElbeColorStyles, ElbeColorThemes } from "../color_theme";
+import type { ElbeChildren } from "../util/util";
+import { type ElbeProps } from "./box";
+export declare function Card({ mode, colorScheme, colorStyle, colorManner, padding, margin, onTap, onLongTap, children, ...elbe }: {
+    mode?: ElbeColorModes;
+    colorScheme?: ElbeColorThemes;
+    colorStyle?: ElbeColorStyles;
+    colorManner?: ElbeColorManners;
+    padding?: number;
+    margin?: number;
+    onTap?: () => void;
+    onLongTap?: () => void;
+    children: ElbeChildren;
+} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/dialog.d.ts

@@ -0,0 +1,8 @@
+import type { ElbeChildren } from "../util/util";
+export declare function ElbeDialog({ title, open, onClose, children, _style, }: {
+    _style?: string;
+    title: string;
+    open: boolean;
+    onClose: () => void;
+    children: ElbeChildren;
+}): import("preact").JSX.Element;

package/dist/ui/components/flex.d.ts

@@ -0,0 +1,11 @@
+import { type ElbeProps } from "./box";
+export type FlexProps = {
+    children: any;
+    gap?: number;
+    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 declare function FlexSpace({}: {}): import("preact").JSX.Element;
+export declare function Column({ gap, main, cross, stretch, children, ...p }: FlexProps): import("preact").JSX.Element;
+export declare function Row({ gap, main, cross, stretch, children, ...p }: FlexProps): import("preact").JSX.Element;

package/dist/ui/components/icon_button.d.ts

@@ -0,0 +1,19 @@
+import React from "preact/compat";
+import type { ElbeColorManners, ElbeColorStyles } from "../color_theme";
+import type { ElbeChild } from "../util/util";
+import { type ElbeProps } from "./box";
+export type IconChild = ElbeChild | ((_: any) => ElbeChild);
+export type IconButtonProps = {
+    icon?: IconChild;
+    colorStyle?: ElbeColorStyles;
+    onTap?: () => void;
+} & ElbeProps;
+export declare class IconButton extends React.Component<IconButtonProps & {
+    colorManner?: ElbeColorManners;
+}> {
+    static major: (p: IconButtonProps) => React.JSX.Element;
+    static minor: (p: IconButtonProps) => React.JSX.Element;
+    static action: (p: IconButtonProps) => React.JSX.Element;
+    static integrated: (p: IconButtonProps) => React.JSX.Element;
+    render(): React.JSX.Element;
+}

package/dist/ui/components/input/checkbox.d.ts

@@ -0,0 +1,6 @@
+import { type ElbeProps } from "../box";
+export declare function Checkbox({ value, label, onChange, ...elbe }: {
+    value: boolean;
+    label?: string;
+    onChange?: ((checked: boolean) => void) | null;
+} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/input_field.d.ts

@@ -0,0 +1,22 @@
+import React from "preact/compat";
+import { 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 declare class Field extends React.Component<InputFieldProps & {
+    type?: "text" | "number" | "password" | "date" | "time" | "email";
+}> {
+    static text: (p: InputFieldProps) => React.JSX.Element;
+    static number: (p: InputFieldProps) => React.JSX.Element;
+    static password: (p: InputFieldProps) => React.JSX.Element;
+    static date: (p: InputFieldProps) => React.JSX.Element;
+    static time: (p: InputFieldProps) => React.JSX.Element;
+    static email: (p: InputFieldProps) => React.JSX.Element;
+    static multiLine: typeof _TextArea;
+    render(): React.JSX.Element;
+}

package/dist/ui/components/input/range.d.ts

@@ -0,0 +1,8 @@
+import { type ElbeProps } from "../box";
+export declare function Range({ value, onChange, min, max, step, ...elbe }: {
+    value: number;
+    min?: number;
+    step?: number;
+    max?: number;
+    onChange?: ((value: number) => void) | null;
+} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/select.d.ts

@@ -0,0 +1,10 @@
+import { type ElbeProps } from "../box";
+export declare function Select({ options, value, label, onChange, ...elbe }: {
+    options: {
+        key: string;
+        label: string;
+    }[];
+    value?: string;
+    label?: string;
+    onChange: (value: string) => any;
+} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/input/text_area.d.ts

@@ -0,0 +1,10 @@
+import { type ElbeProps } from "../box";
+export declare function _TextArea({ label, hint, readonly, rows, maxLength, value, onInput, ...elbe }: {
+    label?: string;
+    hint: string;
+    rows?: number;
+    maxLength?: number;
+    readonly?: boolean;
+    value: string | number;
+    onInput?: (value: string) => void;
+} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/padded.d.ts

@@ -0,0 +1,25 @@
+import React from "preact/compat";
+export type PaddedProps = {
+    children: any;
+};
+export declare 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;
+    });
+    static all: ({ amount, ...p }: PaddedProps & {
+        amount: number;
+    }) => React.JSX.Element;
+    static symmetric: ({ vertical, horizontal, ...p }: PaddedProps & {
+        vertical: number;
+        horizontal: number;
+    }) => React.JSX.Element;
+    render(): React.JSX.Element;
+}

package/dist/ui/components/text.d.ts

@@ -0,0 +1,33 @@
+import React from "preact/compat";
+import type { ElbeTypeStyles } from "../color_theme";
+import type { ElbeChildren } from "../util/util";
+import { 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 declare class Text extends React.Component<TextProps & {
+    typeStyle?: ElbeTypeStyles;
+}> {
+    static h1: (p: TextProps) => React.JSX.Element;
+    static h2: (p: TextProps) => React.JSX.Element;
+    static h3: (p: TextProps) => React.JSX.Element;
+    static h4: (p: TextProps) => React.JSX.Element;
+    static h5: (p: TextProps) => React.JSX.Element;
+    static h6: (p: TextProps) => React.JSX.Element;
+    static s: (p: TextProps) => React.JSX.Element;
+    static m: (p: TextProps) => React.JSX.Element;
+    static l: (p: TextProps) => React.JSX.Element;
+    static code: (p: TextProps) => React.JSX.Element;
+    constructor({ typeStyle, ...props }: TextProps & {
+        typeStyle?: ElbeTypeStyles;
+    });
+    render(): React.JSX.Element;
+}

package/dist/ui/components/toggle_button.d.ts

@@ -0,0 +1,12 @@
+import type { ElbeChild } from "../util/util";
+import type { ElbeProps } from "./box";
+export type ToggleButtonItem<T> = {
+    icon?: (_: any) => ElbeChild;
+    label: string;
+    key: T;
+};
+export declare function ToggleButton<T>({ items, onSelect, value, ...elbe }: {
+    items: ToggleButtonItem<T>[];
+    onSelect: ((value: T) => void) | null;
+    value: T;
+} & ElbeProps): import("preact").JSX.Element;

package/dist/ui/components/util.d.ts

@@ -0,0 +1,3 @@
+export declare function Spaced({ amount }: {
+    amount?: number | undefined;
+}): import("preact").JSX.Element;

package/dist/ui/util/confirm_dialog.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 declare function showConfirmDialog({ title, message, okay, }: {
+    message: string;
+    title: string;
+    okay?: boolean;
+}): Promise<boolean>;

package/dist/ui/util/error_view.d.ts

@@ -0,0 +1 @@
+export declare function _ElbeErr(msg: string): import("preact").JSX.Element;

package/dist/ui/util/toast.d.ts

@@ -0,0 +1,5 @@
+/**
+ * show a toast message at the bottom of the screen
+ * @param message the message to show
+ */
+export declare function showToast(message: string): void;

package/dist/ui/util/util.d.ts

@@ -0,0 +1,19 @@
+import type React from "preact/compat";
+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 declare function share(data: {
+    title: string;
+    text?: string;
+    url: string;
+}, toastMsg?: string): void;
+/**
+ * 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 declare function copyToClipboard(text: string, toastMsg?: string): void;

package/elbe.scss

@@ -4,7 +4,7 @@
 */
 
 @import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Calistoga&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");
 
@@ -30,7 +30,7 @@ $c-modes: (
     border: #ffffff14,
   ),
   secondary: (
-    back: inter($c-accent, #ffffff, 5%),
+    back: inter($c-accent, #ffffff, 7%),
     front: #222222,
     border: #22222214,
   ),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elbe-ui",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.2.14",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {
@@ -15,8 +15,11 @@
   ],
   "files": [
     "elbe.scss",
+    "style/*.scss",
     "dist/*.js",
-    "dist/*.d.ts"
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "dist/**/*.d.ts"
   ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/index.tsx

@@ -0,0 +1,24 @@
+import * as Lucide from "lucide-react";
+
+// exports
+export * from "./ui/color_theme";
+export * from "./ui/components/badge";
+export * from "./ui/components/box";
+export * from "./ui/components/button";
+export * from "./ui/components/card";
+export * from "./ui/components/dialog";
+export * from "./ui/components/flex";
+export * from "./ui/components/icon_button";
+export * from "./ui/components/input/checkbox";
+export * from "./ui/components/input/input_field";
+export * from "./ui/components/input/range";
+export * from "./ui/components/input/select";
+export * from "./ui/components/padded";
+export * from "./ui/components/text";
+export * from "./ui/components/toggle_button";
+export * from "./ui/components/util";
+export * from "./ui/util/confirm_dialog";
+export * from "./ui/util/toast";
+export * from "./ui/util/util";
+
+export const Icons = Lucide.icons;

package/src/ui/color_theme.ts

@@ -0,0 +1,24 @@
+export type ElbeColorStyles =
+  | "accent"
+  | "error"
+  | "warning"
+  | "success"
+  | "info";
+
+export type ElbeColorManners = "major" | "minor" | "action" | "integrated";
+
+export type ElbeColorThemes = "primary" | "secondary" | "inverse";
+
+export type ElbeColorModes = "light" | "dark";
+
+export type ElbeTypeStyles =
+  | "header-1"
+  | "header-2"
+  | "header-3"
+  | "header-4"
+  | "header-5"
+  | "header-6"
+  | "text-s"
+  | "text-m"
+  | "text-l"
+  | "code";

package/src/ui/components/badge.tsx

@@ -0,0 +1,78 @@
+import React from "preact/compat";
+import type { ElbeColorStyles } from "../color_theme";
+import type { ElbeChild, ElbeChildren } from "../util/util";
+import type { ElbeProps } from "./box";
+
+export type BadgeProps = {
+  count?: number;
+  message?: string;
+  child?: ElbeChild;
+  hidden?: boolean;
+  children?: ElbeChildren;
+} & ElbeProps;
+
+export function TestBadge(p: BadgeProps) {
+  return new Badge({ ...p, colorStyle: "accent" });
+}
+
+export class Badge extends React.Component<
+  BadgeProps & { colorStyle: ElbeColorStyles }
+> {
+  constructor(props: BadgeProps & { colorStyle: ElbeColorStyles }) {
+    super(props);
+  }
+
+  static accent(p: BadgeProps) {
+    return <Badge {...p} colorStyle="accent" />;
+  }
+
+  static error(p: BadgeProps) {
+    return <Badge {...p} colorStyle="error" />;
+  }
+
+  static warning(p: BadgeProps) {
+    return <Badge {...p} colorStyle="warning" />;
+  }
+
+  static success(p: BadgeProps) {
+    return <Badge {...p} colorStyle="success" />;
+  }
+
+  static info(p: BadgeProps) {
+    return <Badge {...p} colorStyle="info" />;
+  }
+
+  render() {
+    return (
+      <div
+        style={{
+          position: "relative",
+          display: "inline-block",
+        }}
+      >
+        {this.props.child}
+        {this.props.children}
+        <div
+          class={`b ${this.props.colorStyle} ${this.props.class ?? ""}`}
+          style={{
+            position: "absolute",
+            top: "-0.25rem",
+            right: "-0.25rem",
+            minWidth: "1.5rem",
+            minHeight: "1.5rem",
+            padding: "0rem .4rem",
+            borderRadius: "3rem",
+            fontWeight: "bold",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            visibility: this.props.hidden ? "hidden" : "visible",
+            ...this.props.style,
+          }}
+        >
+          {this.props.message ?? this.props.count}
+        </div>
+      </div>
+    );
+  }
+}

package/src/ui/components/box.tsx

@@ -0,0 +1,49 @@
+import { h } from "preact";
+import type { ElbeColorModes, ElbeColorThemes } from "../color_theme";
+import type { ElbeChildren } from "../util/util";
+
+export type ElbeProps = {
+  class?: string;
+  style?: React.CSSProperties;
+  tooltip?: string;
+};
+
+export function applyProps(
+  p: ElbeProps,
+  classes?: string | null | (string | false | null | undefined)[],
+  style?: React.CSSProperties
+) {
+  if (Array.isArray(classes)) {
+    classes = classes.filter((c) => c).join(" ");
+  }
+  return {
+    class: `${classes || ""} ${p.class || ""}`,
+    style: { ...(style ?? {}), ...(p.style ?? {}) },
+    ...(p.tooltip ? { ["data-tooltip"]: p.tooltip } : {}),
+  };
+}
+
+export function Box({
+  mode,
+  scheme = "primary",
+  padding = 0,
+  margin = 0,
+  children,
+  ...elbe
+}: {
+  mode?: ElbeColorModes;
+  scheme?: ElbeColorThemes;
+  padding?: number;
+  margin?: number;
+  children: ElbeChildren;
+} & ElbeProps) {
+  return h(
+    "div",
+    applyProps(elbe, [scheme, mode], {
+      padding: `${padding}rem`,
+      margin: `${margin}rem`,
+      ...elbe.style,
+    }),
+    children
+  );
+}

package/src/ui/components/button.tsx

@@ -0,0 +1,61 @@
+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; message: string }
+    | {
+        icon: IconChild;
+        message?: 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, message, ...elbe }: ButtonProps,
+  colorManner: ElbeColorManners
+) {
+  return message || icon ? (
+    <button
+      {...applyProps(
+        elbe,
+        [
+          "row",
+          "main-center",
+          "gap-half",
+          colorStyle ?? "accent",
+          colorManner,
+          !onTap && "disabled",
+        ],
+        {
+          border: "none",
+        }
+      )}
+      onClick={() => onTap && onTap()}
+    >
+      {typeof icon === "function" ? icon({}) : icon}
+      {message && <span>{message}</span>}
+    </button>
+  ) : (
+    _ElbeErr("Button requires either an icon or a message")
+  );
+}

package/src/ui/components/card.tsx

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

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