aidos-ui 3.0.0

package/src/StaticCheckbox.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { BaseView } from "./BaseView";
+import { Icon } from "./Icon";
+import { JSStyle, Size, cssVar } from "./jss";
+import { IconType } from "./IconType";
+
+type StaticCheckboxProps = {
+  checked: boolean;
+  size: Size;
+  icon?: IconType;
+};
+
+const jsStyles: { [key: string]: JSStyle } = {
+  border: {
+    position: "absolute",
+    top: "var(--spacing-xs)",
+    bottom: "var(--spacing-xs)",
+    left: "var(--spacing-xs)",
+    right: "var(--spacing-xs)",
+    border: "1px solid var(--divider)",
+    borderRadius: "50%",
+  },
+  borderChecked: {
+    border: "none",
+    backgroundColor: "var(--highlight)",
+  },
+  icon: {
+    position: "absolute",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    top: "var(--spacing-xs)",
+    bottom: "var(--spacing-xs)",
+    left: "var(--spacing-xs)",
+    right: "var(--spacing-xs)",
+  },
+};
+
+export const sizes = {
+  xsmall: 20,
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 48,
+};
+
+export function StaticCheckbox({
+  checked,
+  size,
+  icon = "fa-check",
+}: StaticCheckboxProps) {
+  return (
+    <BaseView
+      jsStyle={{
+        position: "relative",
+        backgroundColor: cssVar("--primary-background"),
+        overflow: "hidden",
+        padding: cssVar("--spacing-xs"),
+        borderRadius: sizes[size] / 2,
+        height: sizes[size],
+        width: sizes[size],
+      }}
+    >
+      <BaseView
+        jsStyle={[jsStyles.border, checked && jsStyles.borderChecked]}
+      />
+      {checked && (
+        <BaseView jsStyle={jsStyles.icon}>
+          <Icon size={size} color="light" icon={icon} />
+        </BaseView>
+      )}
+    </BaseView>
+  );
+}

package/src/Storage.tsx

@@ -0,0 +1,200 @@
+import React from "react";
+import {
+  useState,
+  useCallback,
+  useEffect,
+  createContext,
+  ReactNode,
+  useRef,
+} from "react";
+import { Callback, createEmitter } from "./Emitter";
+
+const VERSION = 1;
+
+export function createStorage<State>({
+  initialState,
+  name = "aidos-storage",
+}: {
+  initialState: State;
+  name?: string;
+}) {
+  const StorageContext = createContext<{
+    subscribe: <T>(selector: (state: State) => T) => () => void;
+    mutate: (mutator: (state: State) => State) => void;
+    persist: () => Promise<void>;
+  }>({
+    subscribe: () => {
+      throw new Error("Not implemented");
+    },
+    mutate: () => {
+      throw new Error("Not implemented");
+    },
+    persist: () => {
+      throw new Error("Not implemented");
+    },
+  });
+
+  const state = { current: initialState };
+
+  function Storage({ children }: { children: ReactNode }): JSX.Element {
+    const emitterRef = useRef(createEmitter<State>());
+
+    const subscribe = useCallback((callback: Callback<State>) => {
+      return emitterRef.current.subscribe(callback);
+    }, []);
+
+    const mutate = useCallback((mutator: (state: State) => State) => {
+      state.current = mutator(state.current);
+      emitterRef.current.emit(state.current);
+    }, []);
+
+    const persist = useCallback(async () => {
+      const s = JSON.stringify(state.current);
+      const bytes = new TextEncoder().encode(s);
+      const blob = new Blob([bytes], {
+        type: "application/json;charset=utf-8",
+      });
+      return saveBlob(blob);
+    }, []);
+
+    useEffect(() => {
+      getBlob().then((blob) => {
+        if (blob == null) {
+          return;
+        }
+
+        const fr = new FileReader();
+
+        fr.onload = (event) => {
+          const text = event.target.result.toString();
+          state.current = JSON.parse(text);
+          emitterRef.current.emit(state.current);
+        };
+
+        fr.onerror = (error) => {
+          // reject(error);
+        };
+
+        fr.readAsText(blob);
+      });
+    }, []);
+
+    return (
+      <StorageContext.Provider
+        value={{
+          subscribe,
+          mutate,
+          persist,
+        }}
+      >
+        {children}
+      </StorageContext.Provider>
+    );
+  }
+
+  function useStorage<T>(selector: (state: State) => T): T {
+    const [localState, setLocalState] = useState(() => selector(state.current));
+    const { subscribe } = React.useContext(StorageContext);
+
+    useEffect(() => {
+      return subscribe((newState) => {
+        const newLocalState = selector(newState);
+        if (newLocalState != localState) {
+          setLocalState(selector(newState));
+        }
+      });
+    }, []);
+
+    return localState;
+  }
+
+  function useMutation(): (mutator: (state: State) => State) => void {
+    const { mutate } = React.useContext(StorageContext);
+    return mutate;
+  }
+
+  function usePersist() {
+    const { persist } = React.useContext(StorageContext);
+    return persist;
+  }
+
+  const dbPromise: Promise<IDBDatabase> = new Promise((resolve, reject) => {
+    const request = window.indexedDB.open(name, VERSION);
+
+    request.onerror = (event) => {
+      reject(event);
+    };
+
+    request.onupgradeneeded = (event) => {
+      // @ts-ignore
+      const db: IDBDatabase = event.target.result;
+      const table = db.createObjectStore("blobs", {
+        keyPath: "key",
+      });
+      table.createIndex("key", "key", { unique: true });
+    };
+
+    request.onsuccess = (event) => {
+      // @ts-ignore
+      const db: IDBDatabase = event.target.result;
+      resolve(db);
+    };
+  });
+
+  const getBlob = async (): Promise<Blob | null> => {
+    const db = await dbPromise;
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction(["blobs"]);
+      const objectStore = transaction.objectStore("blobs");
+      const get: IDBRequest<Blob> = objectStore.get(1);
+
+      transaction.onerror = (event) => {
+        db.close();
+        reject(event);
+      };
+
+      get.onsuccess = (event) => {
+        // @ts-ignore
+        const result: DBStorage = event.target.result;
+
+        if (result && result.blob) {
+          resolve(result.blob);
+        } else {
+          resolve(null);
+        }
+        db.close();
+      };
+
+      get.onerror = (event) => {
+        reject(event);
+      };
+    });
+  };
+
+  const saveBlob = async (blob: Blob): Promise<void> => {
+    const db = await dbPromise;
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction(["blobs"], "readwrite");
+
+      transaction.oncomplete = () => {
+        db.close();
+        resolve();
+      };
+
+      transaction.onerror = (event) => {
+        db.close();
+        reject(event);
+      };
+
+      const objectStore = transaction.objectStore("blobs");
+      objectStore.put({ blob, key: 1 });
+    });
+  };
+
+  return {
+    Storage,
+    useStorage,
+    useMutation,
+    usePersist,
+  };
+}

package/src/Stream.tsx

@@ -0,0 +1,50 @@
+import { startTransition, useEffect, useRef, useState } from "react";
+
+export const useStream = ({
+  render,
+  bufferStart,
+  bufferEnd,
+  index,
+  debounce = 100,
+}) => {
+  const cache = useRef({
+    [index]: render(index),
+  });
+  const [frame, setFrame] = useState(cache.current[index]);
+  const timeout = useRef(null);
+
+  useEffect(() => {
+    clearTimeout(timeout.current);
+    const subscriptions = [];
+
+    timeout.current = setTimeout(() => {
+      for (let i = index - bufferStart; i < index + bufferEnd; i++) {
+        subscriptions.push(
+          requestIdleCallback(() => {
+            if (!(i in cache.current)) {
+              cache.current[i] = render(i);
+
+              if (i === index) {
+                setFrame(cache.current[index]);
+              }
+            }
+          })
+        );
+      }
+
+      startTransition(() => {
+        setFrame(cache.current[index]);
+      });
+    }, debounce);
+
+    return () => {
+      subscriptions.forEach((handle) => {
+        cancelIdleCallback(handle);
+      });
+    };
+  }, [index]);
+
+  return {
+    frame,
+  };
+};

package/src/Sublist.tsx

@@ -0,0 +1,62 @@
+import React, { ReactNode } from "react";
+import { ListButtonItem } from "./ListButtonItem";
+import { Icon } from "./Icon";
+import { Box } from "./Box";
+import { Row } from "./Row";
+import { JSStyle } from "./jss";
+
+export function Sublist({
+  children,
+  label,
+  initialState = { collapsed: false },
+  jsStyle,
+  secondaryAddOn,
+  bare,
+}: {
+  bare?: boolean;
+  children: React.ReactNode;
+  label: string;
+  initialState?: {
+    collapsed: boolean;
+  };
+  jsStyle?: JSStyle;
+  secondaryAddOn?: ReactNode;
+}) {
+  const [collapsed, setCollapsed] = React.useState(initialState.collapsed);
+
+  return (
+    <>
+      <ListButtonItem
+        bare={bare}
+        headline={label}
+        onClick={() => setCollapsed((x) => !x)}
+        jsStyle={jsStyle}
+        addOn={
+          <Row gap="medium" align="center">
+            {secondaryAddOn}
+            <Box
+              padding="medium"
+              jsStyle={[
+                {
+                  transition: "transform 0.15s ease-in",
+                },
+                !collapsed && {
+                  transform: "rotateZ(90deg)",
+                },
+              ]}
+            >
+              <Icon
+                color="primary"
+                size="medium"
+                icon="fa-solid:chevron-right"
+              />
+            </Box>
+          </Row>
+        }
+        addOnPosition="end"
+        color="secondary"
+      />
+      {collapsed ? null : children}
+    </>
+  );
+}

package/src/SubmitIconInput.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { BaseInput, BaseInputProps } from "./BaseInput";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { IconType } from "./IconType";
+
+interface SubmitIconInputProps extends BaseInputProps {
+  icon: IconType;
+  type?: "submit";
+}
+
+export function SubmitIconInput({ icon, ...otherProps }: SubmitIconInputProps) {
+  return (
+    <BaseInput
+      label={
+        <Box
+          jsStyle={{
+            cursor: "pointer",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            ":hover": {
+              backgroundColor: "var(--secondary-background)",
+              opacity: 0.8,
+            },
+            ":active": {
+              transform: "scale(0.92)",
+            },
+            height: 32,
+            width: 32,
+            borderRadius: 16,
+          }}
+        >
+          <Icon icon={icon} size="medium" color="primary" />
+        </Box>
+      }
+      {...otherProps}
+      type="submit"
+      jsStyle={{
+        visibility: "hidden",
+      }}
+      value=""
+    />
+  );
+}

package/src/Tabs.tsx

@@ -0,0 +1,103 @@
+import { BaseLink } from "./BaseLink";
+import { Row, RowProps } from "./Row";
+import { JSStyle, Padding, Size, cssVar, getPadding } from "./jss";
+import { useNavigation } from "./useNavigation";
+import { Text } from "./Text";
+import { ReactNode } from "react";
+
+export type Tab = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  selected?: boolean;
+  addOn?: ReactNode;
+  addOnPosition?: "start" | "end";
+};
+
+export interface TabsProps extends RowProps {
+  ["aria-controls"]: string;
+  tabs: Array<Tab>;
+  labelSize?: Size;
+  bare?: boolean;
+  tabPadding?: Padding;
+  tabJSStyle?: JSStyle;
+}
+
+export function Tabs({
+  tabs,
+  gap = "none",
+  padding = "none",
+  tabPadding = "medium",
+  labelSize = "large",
+  jsStyle,
+  tabJSStyle,
+  ["aria-controls"]: ariaControls,
+  ...otherProps
+}: TabsProps) {
+  const root = useNavigation();
+
+  return (
+    <Row
+      role="tablist"
+      jsStyle={jsStyle}
+      gap={gap}
+      padding={padding}
+      ref={root}
+      {...otherProps}
+    >
+      {tabs.map(
+        ({
+          label,
+          href,
+          onClick,
+          selected,
+          addOn,
+          addOnPosition = "start",
+        }) => (
+          <BaseLink
+            aria-controls={ariaControls}
+            role="tab"
+            aria-selected={selected ? "true" : undefined}
+            key={label}
+            bare
+            color={selected ? "positive" : "secondary"}
+            href={href}
+            onClick={onClick}
+            animateInteraction={false}
+            jsStyle={[
+              {
+                textDecoration: "none",
+                borderBottom: selected
+                  ? `3px solid ${cssVar("--highlight")}`
+                  : `3px solid transparent`,
+                ":active span": {
+                  transform: "scale(0.97)",
+                },
+                ":first-child": {
+                  borderTopLeftRadius: cssVar("--border-radius-m"),
+                },
+                ":last-child": {
+                  borderTopRightRadius: cssVar("--border-radius-m"),
+                },
+                ":hover": {
+                  backgroundColor: cssVar("--hovered-background"),
+                },
+                ":active:hover": {
+                  backgroundColor: cssVar("--pressed-background"),
+                },
+              },
+              getPadding(tabPadding),
+              tabJSStyle,
+            ]}
+          >
+            {addOnPosition === "start" && addOn}
+            <Text size={labelSize} color={selected ? "primary" : "secondary"}>
+              {label}
+            </Text>
+            {addOnPosition === "end" && addOn}
+          </BaseLink>
+        )
+      )}
+    </Row>
+  );
+}

package/src/Text.tsx

@@ -0,0 +1,102 @@
+import React, { ReactNode } from "react";
+import { JSStyle, Size, TextColor, getTextColor, jss } from "./jss";
+
+const fontSize = {
+  xsmall: "0.75rem",
+  small: "1rem",
+  medium: "1.25rem",
+  large: "1.5rem",
+  xlarge: "2rem",
+};
+
+export type Display = "inline" | "block";
+
+export interface TextProps {
+  children: ReactNode;
+  color?: TextColor;
+  size?: Size;
+  bold?: boolean;
+  ellipsis?: boolean | "default";
+  align?: "center" | "none";
+  type?: TextType;
+  grow?: boolean;
+  jsStyle?: JSStyle;
+  id?: string;
+  htmlFor?: string;
+}
+
+export type TextType =
+  | "label"
+  | "span"
+  | "p"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "li";
+
+export function Text({
+  children,
+  color = "primary",
+  size = "medium",
+  align = "none",
+  bold = false,
+  ellipsis = "default",
+  grow,
+  type: Type = "span",
+  jsStyle,
+  id,
+  htmlFor,
+}: TextProps) {
+  if (ellipsis === "default") {
+    ellipsis = Type === "span" || Type === "label";
+  }
+
+  const className = jss([
+    getTextColor(color),
+    { fontSize: fontSize[size], padding: 0, margin: 0 },
+    bold && { fontWeight: "bold" },
+    align === "center" && { textAlign: "center" },
+    ellipsis && {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
+    grow && { flexGrow: 1 },
+    jsStyle,
+  ]);
+
+  return (
+    <Type id={id} className={className} htmlFor={htmlFor}>
+      {children}
+    </Type>
+  );
+}
+
+export function Label({ size = "small", type = "label", ...rest }: TextProps) {
+  return <Text size={size} type={type} {...rest} />;
+}
+
+export function Span({ size = "small", type = "span", ...rest }: TextProps) {
+  return <Text size={size} type={type} {...rest} />;
+}
+
+export function P({ size = "small", type = "p", ...rest }: TextProps) {
+  return <Text size={size} type={type} {...rest} />;
+}
+
+export function H1({ size = "xlarge", type = "h1", ...rest }: TextProps) {
+  return <Text size={size} type={type} {...rest} />;
+}
+
+export function H2({ size = "large", type = "h2", ...rest }: TextProps) {
+  return <Text size={size} type={type} {...rest} />;
+}
+
+export function H3({ size = "medium", type = "h3", ...rest }: TextProps) {
+  return <Text size={size} type={type} {...rest} />;
+}
+
+export function Li({ size = "small", type = "li", ...rest }: TextProps) {
+  return <Text size={size} type={type} {...rest} />;
+}

package/src/TextArea.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { JSStyle, jss } from "./jss";
+
+export interface TextAreaProps
+  extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+  jsStyle?: JSStyle;
+  onValueChange?: (value: string) => void;
+  value?: string;
+  className?: undefined;
+  size?: undefined;
+}
+
+export const TextArea = React.forwardRef(
+  (
+    { jsStyle, onValueChange, value, onChange, ...otherProps }: TextAreaProps,
+    ref?: React.Ref<HTMLTextAreaElement>
+  ) => {
+    return (
+      <textarea
+        {...otherProps}
+        ref={ref}
+        className={jss([
+          {
+            padding: "var(--spacing-m)",
+            flexGrow: 1,
+            backgroundColor: "var(--primary-background)",
+            color: "var(--primary-text)",
+            outline: "none",
+            border: "none",
+            fontSize: 20,
+            lineHeight: 24 / 20,
+            "::placeholder": {
+              color: "var(--secondary-text);",
+            },
+          },
+          jsStyle,
+        ])}
+        value={value}
+        onChange={
+          onValueChange ? (e) => onValueChange(e.target.value) : undefined
+        }
+      />
+    );
+  }
+);