aidos-ui 3.0.0

package/src/Popover.tsx

@@ -0,0 +1,141 @@
+import React, { useRef, useState } from "react";
+import { queryFocusables } from "./aria";
+
+import { BaseView } from "./BaseView";
+import { useRefEffect } from "./useRefEffect";
+import { JSStyle, jss } from "./jss";
+
+const jsStyles: { [key: string]: JSStyle } = {
+  popover: {
+    padding: 0,
+    zIndex: 1,
+    backgroundColor: "var(--primary-background)",
+    borderRadius: "var(--border-radius-m)",
+    border: "1px solid var(--divider)",
+    overflow: "hidden",
+  },
+};
+
+export function Popover({ children, close }) {
+  const activeElementRef = useRef(null);
+
+  const focusTrapRoot = useRefEffect((root: HTMLElement) => {
+    activeElementRef.current = document.activeElement;
+    const [element] = queryFocusables(root);
+    element ? element.focus() : root.focus();
+
+    const keydown = (e) => {
+      if (e.key === "Escape") {
+        close();
+      } else if (e.key === "Tab") {
+        const focusables = queryFocusables(root).filter(
+          (element) => element.tabIndex !== -1
+        );
+
+        if (focusables.length === 0) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+
+        const focusedIndex = focusables.findIndex(
+          (x) => x === document.activeElement
+        );
+
+        if (focusables.length === 0) {
+          e.stopPropagation();
+          e.preventDefault();
+        } else if (focusedIndex === focusables.length - 1) {
+          // Cycle back to the first element
+          focusables[0].focus();
+          e.stopPropagation();
+          e.preventDefault();
+        } else {
+          // Just do the usual thing
+        }
+      }
+    };
+
+    const click = () => {
+      close();
+    };
+
+    // This is needed so that the trigger click is not captured immediatly, which would close the popover as it opens
+    setTimeout(() => {
+      window.addEventListener("keydown", keydown);
+      window.addEventListener("click", click);
+    }, 0);
+
+    return () => {
+      activeElementRef.current && activeElementRef.current.focus();
+      window.removeEventListener("keydown", keydown);
+      window.removeEventListener("click", click);
+    };
+  });
+
+  return <BaseView ref={focusTrapRoot}>{children}</BaseView>;
+}
+
+interface PopoverTriggerProps<Input> {
+  PopoverComponent: (props: { close: () => void } & Input) => JSX.Element;
+  jsStyle?: JSStyle;
+  className?: undefined;
+  grow?: boolean;
+  shrink?: boolean;
+  tag?: keyof HTMLElementTagNameMap;
+  children: (props: { toggle: (input: Input) => void }) => JSX.Element;
+}
+
+export function PopoverTrigger<Input>({
+  PopoverComponent,
+  jsStyle,
+  grow,
+  shrink,
+  tag,
+  children,
+}: PopoverTriggerProps<Input>) {
+  const [popover, setPopover] = useState<JSX.Element>(null);
+  const dialogRef = useRef<null | HTMLDialogElement>(null);
+
+  const toggle = (input: Input) => {
+    if (popover == null) {
+      dialogRef && dialogRef.current.show();
+      setPopover(
+        <PopoverComponent
+          {...input}
+          close={() => {
+            dialogRef && dialogRef.current.close();
+          }}
+        />
+      );
+    } else {
+      dialogRef && dialogRef.current.close();
+    }
+  };
+
+  return (
+    <BaseView
+      grow={grow}
+      shrink={shrink}
+      tag={tag}
+      relative={true}
+      jsStyle={[jsStyle, { position: "relative", display: "inline-block" }]}
+    >
+      {children({ toggle })}
+      <dialog
+        ref={(ref: null | HTMLDialogElement) => {
+          dialogRef.current = ref;
+        }}
+        className={jss(jsStyles.popover)}
+        onClose={() => {
+          setPopover(null);
+        }}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        {popover}
+      </dialog>
+    </BaseView>
+  );
+}

package/src/ProgressBar.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { BaseView } from "./BaseView";
+import { Color, Size, JSStyle, getBackground } from "./jss";
+
+const jsStyles: { [key: string]: JSStyle } = {
+  root: {
+    width: "100%",
+    display: "flex",
+    position: "relative",
+    backgroundColor: "var(--primary-background)",
+    borderRadius: "var(--border-radius-s)",
+    border: "1px solid var(--divider)",
+    overflow: "hidden",
+  },
+  fill: {
+    borderRadius: "var(--border-radius-s)",
+    position: "absolute",
+    transformOrigin: "center left",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+};
+
+const sizes = {
+  xsmall: 4,
+  small: 8,
+  medium: 12,
+  large: 16,
+  xlarge: 20,
+};
+
+export function ProgressBar({
+  color,
+  progress,
+  size,
+  jsStyle,
+}: {
+  progress: number;
+  color: Color;
+  size: Size;
+  jsStyle?: JSStyle;
+}) {
+  return (
+    <BaseView
+      jsStyle={[
+        jsStyles.root,
+        {
+          height: sizes[size],
+        },
+        jsStyle,
+      ]}
+    >
+      <BaseView
+        jsStyle={[jsStyles.fill, getBackground(color)]}
+        style={{
+          transform: `scaleX(${progress > 1 ? 1 : progress})`,
+        }}
+      />
+    </BaseView>
+  );
+}

package/src/ProgressCircle.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { cssVar, jss } from "./jss";
+
+export function ProgressCircle({
+  progress,
+  stroke = 4,
+  outerRadius,
+}: {
+  progress: number;
+  stroke?: number;
+  outerRadius: number;
+}) {
+  const circumference = outerRadius * 2 * Math.PI;
+  const strokeDashoffset = circumference - progress * circumference;
+
+  return (
+    <svg
+      className={jss({
+        backgroundColor: cssVar("--secondary-background"),
+        transform: "rotate(-90deg)",
+        borderRadius: "50%",
+      })}
+      width={(outerRadius + stroke) * 2}
+      height={(outerRadius + stroke) * 2}
+    >
+      <circle
+        stroke="var(--highlight)"
+        fill="transparent"
+        strokeWidth={stroke}
+        strokeDasharray={`${circumference} ${circumference}`}
+        style={{ strokeDashoffset }}
+        r={outerRadius}
+        cx={outerRadius + stroke}
+        cy={outerRadius + stroke}
+      />
+    </svg>
+  );
+}

package/src/Providers.tsx

@@ -0,0 +1,33 @@
+import React, { ReactElement, useEffect } from "react";
+import { DarkModeProvider } from "./DarkMode";
+import { DialogProvider } from "./Dialog";
+import { IconProvider } from "./Icon";
+import { useCookie } from "./useCookie";
+import { JSStylesProvider, Theme } from "./jss";
+
+export function Providers({
+  children,
+  themes,
+}: {
+  children: JSX.Element;
+  themes: { light: Theme; dark: Theme };
+}) {
+  const [darkModeEnabled, setDarkModeEnabled] = useCookie("dark-mode", {
+    initialValue: false,
+    loadingValue: false,
+  });
+  const toggleDarkMode = React.useCallback(
+    () => setDarkModeEnabled((x) => !x),
+    []
+  );
+
+  return (
+    <JSStylesProvider themes={themes}>
+      <IconProvider>
+        <DarkModeProvider enabled={darkModeEnabled} toggle={toggleDarkMode}>
+          <DialogProvider>{children}</DialogProvider>
+        </DarkModeProvider>
+      </IconProvider>
+    </JSStylesProvider>
+  );
+}

package/src/RangeInput.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { BaseInput, BaseInputProps } from "./BaseInput";
+import { Row } from "./Row";
+import { Gap, JSStyle, Padding, cssVar } from "./jss";
+
+export interface RangeInputProps extends BaseInputProps {
+  onValueChange: (value: number) => void;
+  value: number;
+  rootJSStyle?: JSStyle;
+  onChange?: undefined;
+  padding?: Padding;
+  gap?: Gap;
+  addOn?: JSX.Element;
+  addOnPosition?: "start" | "end";
+}
+
+export const RangeInput = React.forwardRef(
+  (
+    {
+      value,
+      onValueChange,
+      rootJSStyle,
+      jsStyle,
+      gap = "medium",
+      padding = "none",
+      min = 0,
+      max = 100,
+      step = 1,
+      label,
+      addOn,
+      addOnPosition = "start",
+      ...inputProps
+    }: RangeInputProps,
+    ref?: React.Ref<HTMLInputElement>
+  ) => {
+    return (
+      <Row
+        gap={gap}
+        padding={padding}
+        align="center"
+        jsStyle={[
+          {
+            ":has(:focus-visible)": {
+              borderRadius: cssVar("--border-radius-m"),
+              backgroundColor: cssVar("--light-highlight"),
+            },
+          },
+          rootJSStyle,
+        ]}
+      >
+        {addOnPosition === "start" && addOn}
+        <BaseInput
+          {...inputProps}
+          label={label}
+          min={min}
+          max={max}
+          type="range"
+          ref={ref}
+          value={value}
+          onChange={(e) => {
+            onValueChange(parseFloat(e.target.value));
+          }}
+          jsStyle={[
+            {
+              backgroundColor: cssVar("--primary-background"),
+              flexGrow: 1,
+              color: cssVar("--primary-text"),
+              margin: 0,
+              paddingTop: cssVar("--spacing-m"),
+              paddingBottom: cssVar("--spacing-m"),
+              ":disabled": {
+                color: cssVar("--subtle-text"),
+              },
+            },
+            jsStyle,
+          ]}
+        />
+        {addOnPosition === "end" && addOn}
+      </Row>
+    );
+  }
+);

package/src/ResultOrError.ts

@@ -0,0 +1,15 @@
+export type Result<T> = { success: true; value: T };
+export type Error<T> = { success: false; error: T };
+export type ResultOrError<R, E> = Result<R> | Error<E>;
+
+export function makeResult<T>(t: void): Result<void>;
+export function makeResult<T>(t: T): Result<T>;
+export function makeResult<T>(t: T): Result<T> {
+  return { success: true, value: t };
+}
+
+export function makeError<T>(t: void): Error<void>;
+export function makeError<T>(t: T): Error<T>;
+export function makeError<T>(t: T): Error<T> {
+  return { success: false, error: t };
+}

package/src/RootView.tsx

@@ -0,0 +1,55 @@
+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}
+      jsStyle={{
+        marginBottom: 0,
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "0%",
+        overflow: "auto",
+        backgroundColor: cssVar("--secondary-background"),
+        minHeight: "600px",
+      }}
+    >
+      {children}
+    </Column>
+  );
+}

package/src/Router.tsx

@@ -0,0 +1,62 @@
+import React, { Suspense } from "react";
+
+import { StackContextProvider } from "./StackContext";
+import { Column } from "./Column";
+import { ListDivider } from "./ListDivider";
+import { BaseView } from "./BaseView";
+import { useRouterState } from "./RouterState";
+import { JSStyle } from "./jss";
+
+const jsStyles: { [key: string]: JSStyle } = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    minHeight: 0,
+    flexShrink: 1,
+    flexBasis: "0%",
+    position: "relative",
+  },
+  route: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    minHeight: 0,
+    flexShrink: 1,
+    flexBasis: "0%",
+  },
+  hidden: {
+    display: "none",
+  },
+};
+
+export function Router() {
+  const {
+    context: { navigationStack },
+  } = useRouterState();
+
+  return (
+    <BaseView jsStyle={jsStyles.root}>
+      {navigationStack.map(({ route, routeProps }, index, list) => {
+        const isTopOfStack = index === list.length - 1;
+
+        return (
+          <StackContextProvider
+            key={route.title(routeProps)}
+            isTopOfStack={isTopOfStack}
+          >
+            <Column
+              jsStyle={[jsStyles.route, !isTopOfStack && jsStyles.hidden]}
+              aria-hidden={!isTopOfStack}
+            >
+              <ListDivider />
+              <Suspense fallback={null}>
+                <route.root {...routeProps} />
+              </Suspense>
+            </Column>
+          </StackContextProvider>
+        );
+      })}
+    </BaseView>
+  );
+}

package/src/RouterState.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState, ComponentType } from "react";
+
+import {
+  stateMachineContextFactory,
+  Reducer,
+} from "./stateMachineContextFactory";
+
+import { DesignBook } from "./DesignBook";
+
+export enum RouteState {
+  Menu = "Menu",
+  DesignBook = "DesignBook",
+  Encounter = "Encounter",
+}
+
+export enum RouteTransition {
+  Pop = "Pop",
+  ToDesignBook = "ToDesignBook",
+  ToEncounter = "ToEncounter",
+}
+
+type Context = {
+  navigationStack: Array<StackNode<any>>;
+};
+
+type StackNode<Props> = {
+  route: Route<Props, any>;
+  routeProps: Props;
+};
+
+type Route<Props, State extends RouteState> = {
+  state: State;
+  title: (props: Props) => string;
+  root: ComponentType<Props>;
+};
+
+// const MenuRoute: Route<{}, RouteState.Menu> = {
+//   state: RouteState.Menu,
+//   title: () => "Menu",
+//   root: Menu,
+// };
+
+const DesignBookRoute: Route<{}, RouteState.DesignBook> = {
+  state: RouteState.DesignBook,
+  title: () => "DesignBook",
+  root: DesignBook,
+};
+
+const INITIAL_CONTEXT: Context = {
+  navigationStack: [{ route: DesignBookRoute, routeProps: {} }],
+};
+
+const pop: Reducer<RouteState, Context> = ({ state, context }) => {
+  if (context.navigationStack.length > 1) {
+    const navigationStack = [...context.navigationStack];
+    navigationStack.pop();
+    const finalState = navigationStack[navigationStack.length - 1].route.state;
+
+    return {
+      state: finalState,
+      context: {
+        ...context,
+        navigationStack,
+      },
+    };
+  }
+
+  return { state, context };
+};
+
+const pushFactory =
+  <Props, State extends RouteState>(
+    route: Route<Props, State>
+  ): Reducer<RouteState, Context> =>
+  ({ context, data }) => {
+    return {
+      state: route.state,
+      context: {
+        ...context,
+        navigationStack: [
+          ...context.navigationStack,
+          {
+            route,
+            routeProps: data,
+          },
+        ],
+      },
+    };
+  };
+
+const replaceFactory =
+  <Props, State extends RouteState>(
+    route: Route<Props, State>
+  ): Reducer<RouteState, Context> =>
+  ({ context, data }) => {
+    return {
+      state: route.state,
+      context: {
+        ...context,
+        navigationStack: [
+          ...context.navigationStack.slice(0, -1),
+          {
+            route,
+            routeProps: data,
+          },
+        ],
+      },
+    };
+  };
+
+const stateMachine = {
+  states: {
+    [RouteState.Menu]: {
+      on: {
+        ToDesignBook: pushFactory(DesignBookRoute),
+      },
+    },
+    [RouteState.Encounter]: {
+      on: {
+        Pop: pop,
+      },
+    },
+    [RouteState.DesignBook]: {
+      on: {
+        Pop: pop,
+      },
+    },
+  },
+  state: RouteState.Menu,
+  context: INITIAL_CONTEXT,
+};
+
+export const { Provider, useStateMachine } =
+  stateMachineContextFactory(stateMachine);
+
+export const useRouterState = () => {
+  const [state, setState] = useState<{ state: RouteState; context: Context }>({
+    state: RouteState.Menu,
+    context: INITIAL_CONTEXT,
+  });
+  const { subscribe } = useStateMachine();
+
+  useEffect(() => {
+    return subscribe(setState);
+  }, [subscribe]);
+
+  return state;
+};
+
+export const useRouterSend = () => {
+  const { send } = useStateMachine();
+
+  return send;
+};

package/src/Row.tsx

@@ -0,0 +1,12 @@
+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/StackContext.tsx

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