aidos-ui 3.0.0

package/src/Dialog.tsx

@@ -0,0 +1,144 @@
+import React, { useContext, useMemo, useRef, useState } from "react";
+
+import { BaseView } from "./BaseView";
+import { Text } from "./Text";
+import { ListDivider } from "./ListDivider";
+import { Column } from "./Column";
+import { Row } from "./Row";
+import { IconButton } from "./IconButton";
+import { jss } from "./jss";
+
+const jsStyles = {
+  dialog: {
+    border: "1px solid var(--divider)",
+    borderRadius: "var(--border-radius-m)",
+    padding: 0,
+  },
+  root: {
+    display: "grid",
+    width: "calc(100vw - 48px)",
+    gridTemplateAreas: `
+        "header"
+        "content"
+    `,
+    "@media (min-width: 750px)": {
+      maxWidth: 750,
+    },
+    backgroundColor: "var(--secondary-background)",
+  },
+  header: {
+    gridArea: "header",
+  },
+  content: {
+    gridArea: "content",
+  },
+};
+
+export const Dialog = ({
+  label,
+  children,
+  close,
+}: {
+  label: string;
+  children: JSX.Element;
+  close: () => void;
+}) => {
+  return (
+    <BaseView jsStyle={jsStyles.root}>
+      <Column jsStyle={jsStyles.header}>
+        <Row padding="medium" justify="space-between" align="center">
+          <Text size="medium" color="secondary">
+            {label}
+          </Text>
+          <IconButton
+            autoFocus={true}
+            bare={true}
+            icon="fa-close"
+            size="medium"
+            onClick={close}
+            color="secondary"
+          />
+        </Row>
+        <ListDivider />
+      </Column>
+      <BaseView jsStyle={jsStyles.content}>{children}</BaseView>
+    </BaseView>
+  );
+};
+
+const DialogContext = React.createContext<{ setDialog: React.Dispatch<any> }>({
+  setDialog: () => {},
+});
+
+export function DialogProvider({ children }) {
+  const [dialog, setDialog] = useState<JSX.Element>(null);
+  const value = useMemo(() => ({ setDialog }), []);
+
+  return (
+    <DialogContext.Provider value={value}>
+      {dialog}
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+export function useDialog<Input>(
+  DialogComponent: (props: { close: () => void } & Input) => JSX.Element,
+  options: { closeOnOutsideClick: boolean }
+) {
+  const { setDialog } = useContext(DialogContext);
+  const dialogRef = useRef<null | HTMLDialogElement>(null);
+  const activeElementRef = useRef(null);
+  const closeRef = useRef(null);
+
+  closeRef.current = () => {
+    dialogRef.current && dialogRef.current.close();
+    activeElementRef.current && activeElementRef.current.focus();
+    dialogRef.current = null;
+    activeElementRef.current = null;
+    setDialog(null);
+  };
+
+  const open = (input: Input) => {
+    activeElementRef.current = document.activeElement;
+    setDialog(
+      <dialog
+        ref={(ref: null | HTMLDialogElement) => {
+          dialogRef.current = ref;
+          ref && ref.showModal();
+        }}
+        className={jss(jsStyles.dialog)}
+        onClose={() => {
+          closeRef.current();
+        }}
+        onClick={(e) => {
+          if (dialogRef.current == null) {
+            return;
+          }
+
+          const dialogDimensions = dialogRef.current.getBoundingClientRect();
+
+          if (options.closeOnOutsideClick === false) {
+            return;
+          }
+
+          if (
+            e.clientX < dialogDimensions.left ||
+            e.clientX > dialogDimensions.right ||
+            e.clientY > dialogDimensions.bottom ||
+            e.clientY < dialogDimensions.top
+          ) {
+            dialogRef.current.close();
+          }
+        }}
+      >
+        <DialogComponent {...input} close={() => closeRef.current()} />
+      </dialog>
+    );
+  };
+
+  return {
+    open,
+    close: () => closeRef.current(),
+  };
+}

package/src/Dropdown.tsx

@@ -0,0 +1,129 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { BaseView } from "./BaseView";
+import { guid } from "./guid";
+import { Button } from "./Button";
+import { Column } from "./Column";
+import { useNavigation } from "./useNavigation";
+import { useRefEffect } from "./useRefEffect";
+import { JSStyle, getBackground } from "./jss";
+
+const jsStyles: { [key: string]: JSStyle } = {
+  root: {
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "stretch",
+    flexGrow: 1,
+  },
+  button: {
+    flexGrow: 1,
+  },
+  dropdown: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    borderRadius: "var(--border-radius-m)",
+    boxShadow: "0px 1px 2px var(--divider)",
+    zIndex: 1,
+  },
+};
+export function Dropdown<T>({
+  id = guid(),
+  label,
+  options,
+  selection,
+  setSelection,
+  jsStyle,
+}: {
+  id?: string;
+  label: string;
+  options: Set<T>;
+  setSelection: (selection: T) => void;
+  selection: T;
+  jsStyle?: JSStyle;
+}) {
+  const triggerRef = useRef(null);
+  const [expanded, setExpanded] = useState(false);
+  const dropdownRef = useNavigation({ autofocus: true });
+  const rootRef = useRefEffect<HTMLElement>((root) => {
+    const onKeyDown = (e) => {
+      if (e.code === "Escape") {
+        setExpanded(false);
+      }
+    };
+
+    root.addEventListener("keydown", onKeyDown);
+    return () => root.removeEventListener("keydown", onKeyDown);
+  });
+
+  useEffect(() => {
+    if (!expanded) {
+      triggerRef.current && triggerRef.current.focus();
+    }
+  }, [expanded]);
+
+  return (
+    <BaseView ref={rootRef} jsStyle={[jsStyles.root, jsStyle]}>
+      <Button
+        aria-expanded={expanded ? "true" : "false"}
+        aria-controls={id}
+        aria-haspopup="true"
+        aria-label={label}
+        role="combobox"
+        justify="space-between"
+        tabIndex={0}
+        jsStyle={jsStyles.button}
+        label={selection.toString()}
+        color="positive"
+        icon="fa-chevron-down"
+        iconPosition="right"
+        onClick={() => {
+          setExpanded((x) => !x);
+        }}
+        ref={triggerRef}
+      />
+      {expanded && (
+        <Column
+          gap="medium"
+          jsStyle={[jsStyles.dropdown, getBackground("secondary-background")]}
+          id={id}
+          role="listbox"
+          aria-label={label}
+          tabIndex={-1}
+          ref={dropdownRef}
+          onBlur={(e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+              setExpanded(false);
+            }
+          }}
+        >
+          {Array.from(options).map((option, index) => {
+            const optionId = `${id}-${index}`;
+            const selected = option === selection;
+            return (
+              <Button
+                justify={selected ? "space-between" : "flex-start"}
+                align="center"
+                bare={true}
+                iconPosition="right"
+                icon={selected ? "fa-check" : undefined}
+                key={optionId}
+                role="option"
+                id={optionId}
+                aria-selected={selected ? "true" : "false"}
+                label={option.toString()}
+                color="positive"
+                onClick={() => {
+                  setSelection(option);
+                  setExpanded(false);
+                }}
+              />
+            );
+          })}
+        </Column>
+      )}
+    </BaseView>
+  );
+}

package/src/Emitter.ts

@@ -0,0 +1,26 @@
+export type Callback<Value> = (value: Value) => void;
+
+export type Subscribe<Value> = (callback: Callback<Value>) => () => void;
+
+export function createEmitter<Value>() {
+  const subscriptions = new Set<Callback<Value>>();
+
+  const subscribe: Subscribe<Value> = (callback: Callback<Value>) => {
+    subscriptions.add(callback);
+
+    return () => {
+      subscriptions.delete(callback);
+    };
+  };
+
+  const emit = (value: Value) => {
+    subscriptions.forEach((subscription) => {
+      subscription(value);
+    });
+  };
+
+  return {
+    subscribe,
+    emit,
+  };
+}

package/src/FlexLayout.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { BaseView, BaseViewProps } from "./BaseView";
+import {
+  Justify,
+  Gap,
+  Align,
+  Padding,
+  FlexDirection,
+  getPadding,
+  getSpacing,
+} from "./jss";
+
+export interface FlexLayoutProps extends BaseViewProps {
+  justify?: Justify;
+  gap?: Gap;
+  align?: Align;
+  padding?: Padding;
+  direction?: FlexDirection;
+}
+
+export const FlexLayout = React.forwardRef(
+  (
+    {
+      jsStyle,
+      gap = "none",
+      justify = "none",
+      align = "none",
+      padding = "none",
+      direction = "column",
+      ...otherProps
+    }: FlexLayoutProps,
+    ref?: React.Ref<HTMLElement>
+  ) => {
+    return (
+      <BaseView
+        ref={ref}
+        jsStyle={[
+          {
+            display: "flex",
+            flexDirection: direction,
+            gap: getSpacing(gap),
+            justifyContent: justify,
+            alignItems: align,
+          },
+          getPadding(padding),
+          jsStyle,
+        ]}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Icon.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect } from "react";
+import { BaseView } from "./BaseView";
+import { IconType } from "./IconType";
+import { Size, TextColor, getTextColor } from "./jss";
+
+const jsStyles = {
+  root: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    " svg": {
+      height: "inherit",
+      width: "inherit",
+    },
+  },
+  xsmall: {
+    height: 8,
+    width: 8,
+  },
+  small: {
+    height: 12,
+    width: 12,
+  },
+  medium: {
+    height: 18,
+    width: 18,
+  },
+  large: {
+    height: 24,
+    width: 24,
+  },
+  xlarge: {
+    height: 30,
+    width: 30,
+  },
+};
+
+let initialized = false;
+
+const initializeIcons = () => {
+  if (initialized) {
+    return;
+  }
+
+  const hasIconify = document.getElementById("iconify");
+
+  if (hasIconify) {
+    initialized = true;
+    return;
+  }
+
+  const script = document.createElement("script");
+  script.src = "https://code.iconify.design/3/3.1.1/iconify.min.js";
+  script.id = "iconify";
+  document.head.appendChild(script);
+
+  initialized = true;
+};
+
+export function IconProvider({ children }: { children: JSX.Element }) {
+  useEffect(() => {
+    initializeIcons();
+  }, []);
+
+  return children;
+}
+
+export function Icon({
+  icon,
+  size,
+  color,
+  ariaLabel,
+}: {
+  ariaLabel?: string;
+  icon: IconType;
+  size: Size;
+  color: TextColor;
+}) {
+  return (
+    <BaseView
+      key={icon}
+      aria-label={ariaLabel}
+      jsStyle={[
+        jsStyles.root,
+        size === "xsmall" && jsStyles.xsmall,
+        size === "small" && jsStyles.small,
+        size === "medium" && jsStyles.medium,
+        size === "large" && jsStyles.large,
+        size === "xlarge" && jsStyles.xlarge,
+        getTextColor(color),
+      ]}
+    >
+      <span className="iconify" data-icon={icon}></span>
+    </BaseView>
+  );
+}

package/src/IconButton.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { BaseButton, BaseButtonProps } from "./BaseButton";
+import { Icon } from "./Icon";
+import { IconType } from "./IconType";
+import { getGlyphColor } from "./Interactable";
+import { Size } from "./jss";
+
+const sizes = {
+  xsmall: 20,
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 48,
+};
+
+export interface IconButtonProps extends BaseButtonProps {
+  icon: IconType;
+  size: Size;
+}
+
+export const IconButton = React.forwardRef(
+  (
+    {
+      icon,
+      size,
+      color,
+      bare,
+      disabled,
+      jsStyle,
+      ...buttonProps
+    }: IconButtonProps,
+    ref?: React.Ref<HTMLButtonElement>
+  ) => {
+    return (
+      <BaseButton
+        {...buttonProps}
+        bare={bare}
+        jsStyle={[
+          {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: sizes[size],
+            width: sizes[size],
+            borderRadius: sizes[size] / 2,
+          },
+          !disabled && {
+            ":active": {
+              transform: "scale(0.92)",
+            },
+          },
+          jsStyle,
+        ]}
+        color={color}
+        ref={ref}
+        disabled={disabled}
+      >
+        <Icon
+          size={size}
+          icon={icon}
+          color={getGlyphColor(color, disabled, bare)}
+        />
+      </BaseButton>
+    );
+  }
+);

package/src/IconLink.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Icon } from "./Icon";
+import { IconType } from "./IconType";
+import { getGlyphColor } from "./Interactable";
+import { Size } from "./jss";
+import { BaseLink, BaseLinkProps } from "./BaseLink";
+
+const sizes = {
+  xsmall: 20,
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 48,
+};
+
+export interface IconLinkProps extends BaseLinkProps {
+  icon: IconType;
+  size: Size;
+}
+
+export const IconLink = React.forwardRef(
+  (
+    { icon, size, color, bare, disabled, ...otherProps }: IconLinkProps,
+    ref?: React.Ref<HTMLAnchorElement>
+  ) => {
+    return (
+      <BaseLink
+        {...otherProps}
+        bare={bare}
+        jsStyle={[
+          {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: sizes[size],
+            width: sizes[size],
+            borderRadius: sizes[size] / 2,
+            textDecoration: "none",
+          },
+          !disabled && {
+            ":active": {
+              transform: "scale(0.92)",
+            },
+          },
+        ]}
+        color={color}
+        ref={ref}
+        disabled={disabled}
+      >
+        <Icon
+          size={size}
+          icon={icon}
+          color={getGlyphColor(color, disabled, bare)}
+        />
+      </BaseLink>
+    );
+  }
+);