aidos-ui 4.0.4 → 4.0.5

package/src/RootView.tsx

@@ -1,55 +0,0 @@
-import React, { ReactNode, useRef, useCallback } from "react";
-
-import { Column } from "./Column";
-import { useIsTopOfStack } from "./StackContext";
-import { queryFocusables } from "./aria";
-import { cssVar } from "./jss";
-
-export function RootView({
-  children,
-  focusOnlyOnFirstMount = true,
-}: {
-  children: ReactNode;
-  focusOnlyOnFirstMount?: boolean;
-}) {
-  const isTopOfStack = useIsTopOfStack();
-  const firstMountRef = useRef(true);
-  const refCallback = useCallback(
-    (element) => {
-      if (!element) {
-        return;
-      }
-
-      if (!isTopOfStack) {
-        return;
-      }
-
-      if (focusOnlyOnFirstMount && !firstMountRef.current) {
-        return;
-      }
-
-      const focusables = queryFocusables(element);
-      const firstFocusable = focusables[0];
-      firstMountRef.current = false;
-      firstFocusable && firstFocusable.focus();
-    },
-    [isTopOfStack, focusOnlyOnFirstMount]
-  );
-
-  return (
-    <Column
-      ref={refCallback}
-      jss={{
-        marginBottom: 0,
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: "0%",
-        overflow: "auto",
-        backgroundColor: cssVar("--secondary-background"),
-        minHeight: "600px",
-      }}
-    >
-      {children}
-    </Column>
-  );
-}

package/src/Row.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { FlexLayout, FlexLayoutProps } from "./FlexLayout";
-
-export interface RowProps extends FlexLayoutProps {
-  direction?: "row";
-}
-
-export const Row = React.forwardRef(
-  (props: RowProps, ref?: React.Ref<HTMLElement>) => {
-    return <FlexLayout ref={ref} direction="row" {...props} />;
-  }
-);

package/src/Select.tsx

@@ -1,39 +0,0 @@
-import { forwardRef } from "react";
-import { JSS, cssVar, toClassnames } from "./jss";
-
-export interface SelectProps extends React.HTMLAttributes<HTMLSelectElement> {
-  value: string;
-  onValueChange: (value: string) => void;
-  jss?: JSS;
-  ref?: React.Ref<HTMLSelectElement>;
-  className?: undefined;
-}
-
-export const Select = forwardRef(
-  (
-    { jss, children, onValueChange, value, ...otherProps }: SelectProps,
-    ref?: React.Ref<HTMLSelectElement>
-  ) => {
-    return (
-      <select
-        ref={ref}
-        className={toClassnames([
-          {
-            fontSize: 20,
-            border: `1px solid ${cssVar("--divider")}`,
-            backgroundColor: cssVar("--overlay-background"),
-            borderRadius: cssVar("--border-radius-m"),
-          },
-          jss,
-        ])}
-        value={value}
-        onChange={(e) => {
-          onValueChange(e.target.value);
-        }}
-        {...otherProps}
-      >
-        {children}
-      </select>
-    );
-  }
-);

package/src/StackContext.tsx

@@ -1,52 +0,0 @@
-import React, {
-  useContext,
-  useState,
-  ReactNode,
-  useMemo,
-  useRef,
-  useEffect,
-} from "react";
-import { createEmitter, Subscribe } from "./Emitter";
-
-type State = {
-  subscribe: Subscribe<boolean>;
-};
-
-const StackContext = React.createContext<State>({
-  subscribe: () => {
-    return () => {};
-  },
-});
-
-type Props = {
-  children: ReactNode;
-  isTopOfStack: boolean;
-};
-
-export function StackContextProvider({ children, isTopOfStack }: Props) {
-  const emitterRef = useRef(createEmitter<boolean>());
-
-  useEffect(() => {
-    emitterRef.current.emit(isTopOfStack);
-  }, [isTopOfStack]);
-
-  const value = useMemo(
-    () => ({ subscribe: emitterRef.current.subscribe }),
-    []
-  );
-
-  return (
-    <StackContext.Provider value={value}>{children}</StackContext.Provider>
-  );
-}
-
-export function useIsTopOfStack() {
-  const [isTopOfStack, setIsTopOfStack] = useState<boolean>(true);
-  const { subscribe } = useContext(StackContext);
-
-  useEffect(() => {
-    return subscribe(setIsTopOfStack);
-  }, [subscribe]);
-
-  return isTopOfStack;
-}

package/src/StaticCheckbox.tsx

@@ -1,72 +0,0 @@
-import React from "react";
-import { BaseView } from "./BaseView";
-import { Icon } from "./Icon";
-import { JSS, Size, cssVar } from "./jss";
-import { IconType } from "./IconType";
-
-type StaticCheckboxProps = {
-  checked: boolean;
-  size: Size;
-  icon?: IconType;
-};
-
-const styles: { [key: string]: JSS } = {
-  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
-      jss={{
-        position: "relative",
-        backgroundColor: cssVar("--primary-background"),
-        overflow: "hidden",
-        padding: cssVar("--spacing-xs"),
-        borderRadius: sizes[size] / 2,
-        height: sizes[size],
-        width: sizes[size],
-      }}
-    >
-      <BaseView jss={[styles.border, checked && styles.borderChecked]} />
-      {checked && (
-        <BaseView jss={styles.icon}>
-          <Icon size={size} color="light" icon={icon} />
-        </BaseView>
-      )}
-    </BaseView>
-  );
-}

package/src/Storage.tsx

@@ -1,198 +0,0 @@
-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 }): React.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);
-        setLocalState((prev) => (newLocalState != prev ? newLocalState : prev));
-      });
-    }, []);
-
-    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

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

@@ -1,61 +0,0 @@
-import React, { ReactNode } from "react";
-import { ListButtonItem } from "./ListButtonItem";
-import { Icon } from "./Icon";
-import { Box } from "./Box";
-import { Row } from "./Row";
-import { JSS } from "./jss";
-
-export function Sublist({
-  children,
-  label,
-  labelBold,
-  initialState = { collapsed: false },
-  jss,
-  secondaryAddOn,
-}: {
-  children: React.ReactNode;
-  label: string;
-  labelBold?: boolean;
-  initialState?: {
-    collapsed: boolean;
-  };
-  jss?: JSS;
-  secondaryAddOn?: ReactNode;
-}) {
-  const [collapsed, setCollapsed] = React.useState(initialState.collapsed);
-  return (
-    <>
-      <ListButtonItem
-        headline={label}
-        headlineBold={labelBold}
-        onClick={() => setCollapsed((x) => !x)}
-        jss={jss}
-        addOn={
-          <Row gap="medium" align="center">
-            {secondaryAddOn}
-            <Box
-              padding="medium"
-              jss={[
-                {
-                  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="primary"
-      />
-      {collapsed ? null : children}
-    </>
-  );
-}

package/src/SubmitIconInput.tsx

@@ -1,45 +0,0 @@
-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
-          jss={{
-            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"
-      jss={{
-        visibility: "hidden",
-      }}
-      value=""
-    />
-  );
-}

package/src/Tabs.tsx

@@ -1,110 +0,0 @@
-import { BaseLink } from "./BaseLink";
-import { Row, RowProps } from "./Row";
-import { JSS, Padding, Size, cssVar, getPadding } from "./jss";
-import { useNavigation } from "./useNavigation";
-import { Text } from "./Text";
-import { ReactNode } from "react";
-import { BaseButton } from "./BaseButton";
-
-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;
-  jssTab?: JSS | ((data: { selected: boolean }) => JSS);
-  labelRenderer?: (label: string) => ReactNode;
-}
-
-export function Tabs({
-  tabs,
-  gap = "none",
-  padding = "none",
-  tabPadding = "medium",
-  labelSize = "large",
-  jss,
-  jssTab,
-  labelRenderer,
-  ["aria-controls"]: ariaControls,
-  ...otherProps
-}: TabsProps) {
-  const root = useNavigation();
-
-  return (
-    <Row
-      role="tablist"
-      jss={jss}
-      gap={gap}
-      padding={padding}
-      ref={root}
-      {...otherProps}
-    >
-      {tabs.map(
-        ({
-          label,
-          href,
-          onClick,
-          selected,
-          addOn,
-          addOnPosition = "start",
-        }) => {
-          const BaseComponent = href != null ? BaseLink : BaseButton;
-
-          return (
-            <BaseComponent
-              aria-controls={ariaControls}
-              role="tab"
-              aria-selected={selected ? "true" : undefined}
-              key={label}
-              bare
-              color={selected ? "positive" : "primary"}
-              href={href}
-              onClick={onClick}
-              animateInteraction={false}
-              jss={[
-                {
-                  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),
-                typeof jssTab === "function" ? jssTab({ selected }) : jssTab,
-              ]}
-            >
-              {addOnPosition === "start" && addOn}
-              <Text size={labelSize} color={selected ? "primary" : "secondary"}>
-                {labelRenderer ? labelRenderer(label) : label}
-              </Text>
-              {addOnPosition === "end" && addOn}
-            </BaseComponent>
-          );
-        }
-      )}
-    </Row>
-  );
-}