aidos-ui 4.0.3 → 4.0.5

package/src/MenuIcon.tsx

@@ -1,50 +0,0 @@
-import { BaseView } from "./BaseView";
-import { Column } from "./Column";
-import { Color, JSS, getBackground } from "./jss";
-
-export function MenuIcon({ open, color }: { open: boolean; color: Color }) {
-  return (
-    <Column gap="small">
-      <Bar
-        color={color}
-        jss={{
-          transform: open ? "rotateZ(135deg)" : "",
-          transformOrigin: "center",
-          top: open ? 8 : 0,
-        }}
-      />
-      <Bar
-        color={color}
-        jss={{
-          opacity: open ? 0 : 1,
-        }}
-      />
-      <Bar
-        color={color}
-        jss={{
-          transform: open ? "rotateZ(-135deg)" : "",
-          transformOrigin: "center",
-          top: open ? -8 : 0,
-        }}
-      />
-    </Column>
-  );
-}
-
-function Bar({ jss, color }: { jss: JSS; color: Color }) {
-  return (
-    <BaseView
-      jss={[
-        {
-          position: "relative",
-          width: 24,
-          height: 4,
-          borderRadius: "1px",
-          transition: "all 200ms ease-out",
-        },
-        getBackground(color),
-        jss,
-      ]}
-    />
-  );
-}

package/src/NextJSRouter.tsx

@@ -1,62 +0,0 @@
-import React, { Suspense } from "react";
-
-import { StackContextProvider } from "./StackContext";
-import { Column } from "./Column";
-import { ListDivider } from "./ListDivider";
-import { BaseView } from "./BaseView";
-import { useRouterState } from "./NextJSRouterState";
-import { JSS } from "./jss";
-
-const jsss: { [key: string]: JSS } = {
-  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 jss={jsss.root}>
-      {navigationStack.map(({ route, routeProps }, index, list) => {
-        const isTopOfStack = index === list.length - 1;
-
-        return (
-          <StackContextProvider
-            key={route.title(routeProps)}
-            isTopOfStack={isTopOfStack}
-          >
-            <Column
-              jss={[jsss.route, !isTopOfStack && jsss.hidden]}
-              aria-hidden={!isTopOfStack}
-            >
-              <ListDivider />
-              <Suspense fallback={null}>
-                <route.root {...routeProps} />
-              </Suspense>
-            </Column>
-          </StackContextProvider>
-        );
-      })}
-    </BaseView>
-  );
-}

package/src/NextJSRouterState.tsx

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

@@ -1,42 +0,0 @@
-import React, { useRef, useCallback, ReactElement } from "react";
-
-export function OnVisible({
-  children,
-  onVisible,
-}: {
-  children: (refCallback: React.RefCallback<HTMLElement>) => ReactElement;
-  onVisible: () => void;
-}) {
-  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
-
-  const refCallback = useCallback((element) => {
-    if (element == null) {
-      return;
-    }
-
-    const intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting || entry.intersectionRatio > 0) {
-            onVisible();
-          }
-        });
-      },
-      {
-        root: null,
-        rootMargin: "0px",
-      }
-    );
-
-    intersectionObserverRef.current = intersectionObserver;
-    intersectionObserver.observe(element);
-
-    return () => {
-      intersectionObserver.unobserve(element);
-      intersectionObserverRef.current = null;
-    };
-    // eslint-disable-next-line
-  }, []);
-
-  return children(refCallback);
-}

package/src/Popover.tsx

@@ -1,145 +0,0 @@
-import React, { useRef, useState } from "react";
-import { queryFocusables } from "./aria";
-
-import { BaseView } from "./BaseView";
-import { useRefEffect } from "./useRefEffect";
-import { JSS, toClassnames } from "./jss";
-
-const jsss: { [key: string]: JSS } = {
-  popover: {
-    padding: 0,
-    zIndex: 1,
-    backgroundColor: "var(--primary-background)",
-    borderRadius: "var(--border-radius-l)",
-    border: "1px solid var(--divider)",
-    overflow: "hidden",
-    boxShadow: "var(--shadow-lg)",
-    animation: "popoverFadeIn 0.15s ease-out",
-  },
-};
-
-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) => React.JSX.Element;
-  jss?: JSS;
-  jssDialog?: JSS;
-  className?: undefined;
-  grow?: boolean;
-  shrink?: boolean;
-  tag?: keyof HTMLElementTagNameMap;
-  children: (props: { toggle: (input: Input) => void }) => React.JSX.Element;
-}
-
-export function PopoverTrigger<Input>({
-  PopoverComponent,
-  jss,
-  jssDialog,
-  grow,
-  shrink,
-  tag,
-  children,
-}: PopoverTriggerProps<Input>) {
-  const [popover, setPopover] = useState<React.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}
-      jss={[jss, { position: "relative", display: "inline-block" }]}
-    >
-      {children({ toggle })}
-      <dialog
-        ref={(ref: null | HTMLDialogElement) => {
-          dialogRef.current = ref;
-        }}
-        className={toClassnames([jsss.popover, jssDialog])}
-        onClose={() => {
-          setPopover(null);
-        }}
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      >
-        {popover}
-      </dialog>
-    </BaseView>
-  );
-}

package/src/ProgressBar.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { BaseView } from "./BaseView";
-import { Color, Size, JSS, getBackground } from "./jss";
-
-const jsss: { [key: string]: JSS } = {
-  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,
-  jss,
-}: {
-  progress: number;
-  color: Color;
-  size: Size;
-  jss?: JSS;
-}) {
-  return (
-    <BaseView
-      jss={[
-        jsss.root,
-        {
-          height: sizes[size],
-        },
-        jss,
-      ]}
-    >
-      <BaseView
-        jss={[jsss.fill, getBackground(color)]}
-        style={{
-          transform: `scaleX(${progress > 1 ? 1 : progress})`,
-        }}
-      />
-    </BaseView>
-  );
-}

package/src/ProgressCircle.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import { cssVar, toClassnames } 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={toClassnames({
-        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

@@ -1,33 +0,0 @@
-import React, { ReactElement, useEffect } from "react";
-import { DarkModeProvider } from "./DarkMode";
-import { DialogProvider } from "./Dialog";
-import { IconProvider } from "./Icon";
-import { useCookie } from "./useCookie";
-import { JSSProvider, Theme } from "./jss";
-
-export function Providers({
-  children,
-  themes,
-}: {
-  children: React.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 (
-    <JSSProvider themes={themes}>
-      <IconProvider>
-        <DarkModeProvider enabled={darkModeEnabled} toggle={toggleDarkMode}>
-          <DialogProvider>{children}</DialogProvider>
-        </DarkModeProvider>
-      </IconProvider>
-    </JSSProvider>
-  );
-}

package/src/RangeInput.tsx

@@ -1,82 +0,0 @@
-import React from "react";
-import { BaseInput, BaseInputProps } from "./BaseInput";
-import { Row } from "./Row";
-import { Gap, JSS, Padding, cssVar } from "./jss";
-
-export interface RangeInputProps extends BaseInputProps {
-  onValueChange: (value: number) => void;
-  value: number;
-  jssRoot?: JSS;
-  onChange?: undefined;
-  padding?: Padding;
-  gap?: Gap;
-  addOn?: React.JSX.Element;
-  addOnPosition?: "start" | "end";
-}
-
-export const RangeInput = React.forwardRef(
-  (
-    {
-      value,
-      onValueChange,
-      jssRoot,
-      jss,
-      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"
-        jss={[
-          {
-            ":has(:focus-visible)": {
-              borderRadius: cssVar("--border-radius-m"),
-              backgroundColor: cssVar("--light-highlight"),
-            },
-          },
-          jssRoot,
-        ]}
-      >
-        {addOnPosition === "start" && addOn}
-        <BaseInput
-          {...inputProps}
-          label={label}
-          min={min}
-          max={max}
-          type="range"
-          ref={ref}
-          value={value}
-          onChange={(e) => {
-            onValueChange(parseFloat(e.target.value));
-          }}
-          jss={[
-            {
-              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"),
-              },
-            },
-            jss,
-          ]}
-        />
-        {addOnPosition === "end" && addOn}
-      </Row>
-    );
-  }
-);

package/src/ResultOrError.ts

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