aidos-ui 4.0.3 → 4.0.5

package/src/Dialog.tsx

@@ -1,150 +0,0 @@
-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 { toClassnames } from "./jss";
-
-const jsss = {
-  dialog: {
-    border: "1px solid var(--divider)",
-    borderRadius: "var(--border-radius-l)",
-    padding: 0,
-    boxShadow: "var(--shadow-lg)",
-    animation: "dialogFadeIn 0.2s ease-out",
-    "::backdrop": {
-      backgroundColor: "rgba(0, 0, 0, 0.4)",
-      animation: "backdropFadeIn 0.2s ease-out",
-    },
-  },
-  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: React.JSX.Element;
-  close: () => void;
-}) => {
-  return (
-    <BaseView jss={jsss.root}>
-      <Column jss={jsss.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="primary"
-          />
-        </Row>
-        <ListDivider />
-      </Column>
-      <BaseView jss={jsss.content}>{children}</BaseView>
-    </BaseView>
-  );
-};
-
-const DialogContext = React.createContext<{ setDialog: React.Dispatch<any> }>({
-  setDialog: () => {},
-});
-
-export function DialogProvider({ children }) {
-  const [dialog, setDialog] = useState<React.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) => React.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={toClassnames(jsss.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

@@ -1,146 +0,0 @@
-import React, { useEffect, useId, useRef, useState } from "react";
-
-import { BaseView } from "./BaseView";
-import { Button } from "./Button";
-import { Column } from "./Column";
-import { useNavigation } from "./useNavigation";
-import { useRefEffect } from "./useRefEffect";
-import { Gap, JSS, Padding, Size, getBackground } from "./jss";
-
-const jsss: { [key: string]: JSS } = {
-  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: "var(--shadow-sm)",
-    zIndex: 1,
-  },
-};
-export function Dropdown<T extends string | number>({
-  id: propId,
-  label,
-  options,
-  selection,
-  setSelection,
-  jss,
-  jssButton,
-  optionLabel,
-  padding,
-  size,
-  gap = "medium",
-}: {
-  id?: string;
-  label: string;
-  options: Set<T>;
-  setSelection: (selection: T) => void;
-  selection: T;
-  jss?: JSS;
-  jssButton?: JSS;
-  optionLabel: (option: T) => string;
-  padding?: Padding;
-  gap?: Gap;
-  size?: Size;
-}) {
-  const hookId = useId();
-  const id = propId ?? hookId;
-  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} jss={[jsss.root, jss]}>
-      <Button
-        size={size}
-        padding={padding}
-        aria-expanded={expanded ? "true" : "false"}
-        aria-controls={id}
-        aria-haspopup="true"
-        aria-label={label}
-        role="combobox"
-        justify="space-between"
-        tabIndex={0}
-        jss={[jsss.button, jssButton]}
-        color="positive"
-        icon="fa-chevron-down"
-        iconPosition="right"
-        onClick={() => {
-          setExpanded((x) => !x);
-        }}
-        ref={triggerRef}
-      >
-        {optionLabel(selection)}
-      </Button>
-      {expanded && (
-        <Column
-          gap={gap}
-          jss={[jsss.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
-                size={size}
-                padding={padding}
-                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"}
-                color="positive"
-                onClick={() => {
-                  setSelection(option);
-                  setExpanded(false);
-                }}
-              >
-                {optionLabel(option)}
-              </Button>
-            );
-          })}
-        </Column>
-      )}
-    </BaseView>
-  );
-}

package/src/Emitter.ts

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

@@ -1,53 +0,0 @@
-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(
-  (
-    {
-      jss,
-      gap = "none",
-      justify = "none",
-      align = "none",
-      padding = "none",
-      direction = "column",
-      ...otherProps
-    }: FlexLayoutProps,
-    ref?: React.Ref<HTMLElement>
-  ) => {
-    return (
-      <BaseView
-        ref={ref}
-        jss={[
-          {
-            display: "flex",
-            flexDirection: direction,
-            gap: getSpacing(gap),
-            justifyContent: justify,
-            alignItems: align,
-          },
-          getPadding(padding),
-          jss,
-        ]}
-        {...otherProps}
-      />
-    );
-  }
-);

package/src/Icon.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import { Icon as IconifyIcon } from "@iconify/react";
-import { BaseView } from "./BaseView";
-import { IconType } from "./IconType";
-import { Size, TextColor, getTextColor } from "./jss";
-
-const jsss = {
-  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: 32,
-    width: 32,
-  },
-  xxlarge: {
-    height: 48,
-    width: 48,
-  },
-  xxxlarge: {
-    height: 64,
-    width: 64,
-  },
-};
-
-export function IconProvider({ children }: { children: React.JSX.Element }) {
-  return children;
-}
-
-export function Icon({
-  icon,
-  size,
-  color,
-  ariaLabel,
-}: {
-  ariaLabel?: string;
-  icon: IconType;
-  size: Size;
-  color: TextColor;
-}) {
-  return (
-    <BaseView
-      aria-label={ariaLabel}
-      jss={[
-        jsss.root,
-        size === "xsmall" && jsss.xsmall,
-        size === "small" && jsss.small,
-        size === "medium" && jsss.medium,
-        size === "large" && jsss.large,
-        size === "xlarge" && jsss.xlarge,
-        size === "xxlarge" && jsss.xxlarge,
-        size === "xxxlarge" && jsss.xxxlarge,
-        getTextColor(color),
-      ]}
-    >
-      <IconifyIcon icon={icon} width="100%" height="100%" />
-    </BaseView>
-  );
-}

package/src/IconButton.tsx

@@ -1,58 +0,0 @@
-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, jss, ...buttonProps }: IconButtonProps,
-    ref?: React.Ref<HTMLButtonElement>
-  ) => {
-    return (
-      <BaseButton
-        {...buttonProps}
-        bare={bare}
-        jss={[
-          {
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: sizes[size],
-            width: sizes[size],
-            borderRadius: sizes[size] / 2,
-          },
-          !disabled && {
-            ":active": {
-              transform: "scale(0.92)",
-            },
-          },
-          jss,
-        ]}
-        color={color}
-        ref={ref}
-        disabled={disabled}
-      >
-        <Icon
-          size={size}
-          icon={icon}
-          color={getGlyphColor(color, disabled, bare)}
-        />
-      </BaseButton>
-    );
-  }
-);

package/src/IconLink.tsx

@@ -1,59 +0,0 @@
-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, jss, ...otherProps }: IconLinkProps,
-    ref?: React.Ref<HTMLAnchorElement>
-  ) => {
-    return (
-      <BaseLink
-        {...otherProps}
-        bare={bare}
-        jss={[
-          {
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: sizes[size],
-            width: sizes[size],
-            borderRadius: sizes[size] / 2,
-            textDecoration: "none",
-          },
-          !disabled && {
-            ":active": {
-              transform: "scale(0.92)",
-            },
-          },
-          jss,
-        ]}
-        color={color}
-        ref={ref}
-        disabled={disabled}
-      >
-        <Icon
-          size={size}
-          icon={icon}
-          color={getGlyphColor(color, disabled, bare)}
-        />
-      </BaseLink>
-    );
-  }
-);