aidos-ui 3.0.0

package/src/TextInput.tsx

@@ -0,0 +1,111 @@
+import React, { ReactNode } from "react";
+import { BaseInput, BaseInputProps } from "./BaseInput";
+import { Row } from "./Row";
+import { Gap, JSStyle, Padding, cssVar, getPadding } from "./jss";
+import { Column } from "./Column";
+
+export interface TextInputProps extends BaseInputProps {
+  onValueChange?: (value: string) => void;
+  rootJSStyle?: JSStyle;
+  addOn?: ReactNode;
+  addOnPosition?: "start" | "end";
+  gap?: Gap;
+  onChange?: undefined;
+  padding?: Padding;
+  bare?: boolean;
+}
+
+export const TextInput = React.forwardRef(
+  (
+    {
+      value,
+      onValueChange,
+      rootJSStyle,
+      jsStyle,
+      addOn,
+      gap = "small",
+      addOnPosition = "start",
+      padding = "medium",
+      bare,
+      ...inputProps
+    }: TextInputProps,
+    ref?: React.Ref<HTMLInputElement>
+  ) => {
+    return (
+      <Row
+        gap={gap}
+        jsStyle={[
+          {
+            borderRadius: cssVar("--border-radius-m"),
+            overflow: "hidden",
+          },
+          bare
+            ? {
+                backgroundColor: "inherit",
+                ":has(:focus-visible)": {
+                  backgroundColor: cssVar("--light-highlight"),
+                },
+              }
+            : {
+                border: `1px solid ${cssVar("--divider")}`,
+                backgroundColor: cssVar("--overlay-background"),
+                ":has(:focus-visible)": {
+                  outline: `2px solid ${cssVar("--highlight")}`,
+                  outlineOffset: -2,
+                },
+              },
+          rootJSStyle,
+        ]}
+      >
+        {addOnPosition === "start" && addOn && (
+          <Column
+            justify="center"
+            align="center"
+            jsStyle={[getPadding(padding), { paddingRight: 0 }]}
+          >
+            {addOn}
+          </Column>
+        )}
+        <BaseInput
+          {...inputProps}
+          ref={ref}
+          value={value}
+          onChange={
+            onValueChange ? (e) => onValueChange(e.target.value) : undefined
+          }
+          jsStyle={[
+            {
+              minWidth: 0,
+              flexGrow: 1,
+              backgroundColor: "inherit",
+              color: cssVar("--primary-text"),
+              outline: "none",
+              border: "none",
+              fontSize: 20,
+              lineHeight: 24 / 20,
+              "::placeholder": {
+                color: cssVar("--subtle-text"),
+              },
+              ":disabled": {
+                color: cssVar("--subtle-text"),
+              },
+            },
+            getPadding(padding),
+            addOn && addOnPosition === "start" ? { paddingLeft: 0 } : null,
+            addOn && addOnPosition === "end" ? { paddingRight: 0 } : null,
+            jsStyle,
+          ]}
+        />
+        {addOnPosition === "end" && addOn && (
+          <Column
+            justify="center"
+            align="center"
+            jsStyle={[getPadding(padding), { paddingLeft: 0 }]}
+          >
+            {addOn}
+          </Column>
+        )}
+      </Row>
+    );
+  }
+);

package/src/TextInputWithState.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback } from "react";
+
+import { TextInput } from "./TextInput";
+import { BaseInputProps } from "./BaseInput";
+import { IconType } from "./IconType";
+import { ReactNode, useState } from "react";
+
+export interface TextInputWithStateProps extends BaseInputProps {
+  onValueChange?: (value: string) => void;
+  valueRef: React.MutableRefObject<string>;
+  icon?: IconType;
+  onChange?: undefined;
+}
+
+export function TextInputWithState({
+  valueRef,
+  onValueChange: externalOnChange,
+  icon,
+  ...otherProps
+}: TextInputWithStateProps) {
+  const [value, setValue] = useState(valueRef.current);
+
+  const onValueChange = useCallback(
+    (value) => {
+      valueRef.current = value;
+      setValue(value);
+      externalOnChange && externalOnChange(value);
+    },
+    [setValue, externalOnChange, valueRef]
+  );
+
+  return (
+    <TextInput {...otherProps} value={value} onValueChange={onValueChange} />
+  );
+}

package/src/TextPairing.tsx

@@ -0,0 +1,115 @@
+import React, { ReactNode } from "react";
+
+import { Text, TextType } from "./Text";
+import { Row } from "./Row";
+import { BaseView } from "./BaseView";
+import { Column } from "./Column";
+import {
+  TextColor,
+  Size,
+  Position,
+  Gap,
+  Padding,
+  Align,
+  cssVar,
+  JSStyle,
+} from "./jss";
+
+export interface TextPairingProps {
+  headline: ReactNode;
+  body?: ReactNode;
+  headlineColor?: TextColor;
+  headlineSize?: Size;
+  headlineAddOn?: ReactNode;
+  bodyColor?: TextColor;
+  bodySize?: Size;
+  addOn?: ReactNode;
+  addOnPosition?: Position;
+  gap?: Gap;
+  padding?: Padding;
+  align?: Align;
+  grow?: boolean;
+  shrink?: boolean;
+  headlineBold?: boolean;
+  jsStyle?: JSStyle;
+}
+
+export function TextPairing({
+  headline,
+  body,
+  headlineColor = "primary",
+  headlineSize = "medium",
+  headlineAddOn,
+  bodyColor = "secondary",
+  bodySize = "medium",
+  addOn,
+  addOnPosition = "start",
+  gap = "small",
+  align = "stretch",
+  grow,
+  shrink,
+  headlineBold,
+  padding,
+  jsStyle,
+}: TextPairingProps) {
+  const textElement = (
+    <Column
+      grow={grow}
+      shrink={shrink}
+      padding={addOn ? undefined : padding}
+      align={align}
+      jsStyle={[
+        {
+          overflow: "hidden",
+        },
+        jsStyle,
+      ]}
+    >
+      <Row
+        align="center"
+        jsStyle={{
+          textAlign: "start",
+        }}
+      >
+        <Text bold={headlineBold} color={headlineColor} size={headlineSize}>
+          {headline}
+        </Text>
+        {headlineAddOn && <BaseView>{headlineAddOn}</BaseView>}
+      </Row>
+      {body && (
+        <Row
+          align="center"
+          jsStyle={{
+            marginTop: cssVar("--spacing-xs"),
+            textAlign: "start",
+          }}
+        >
+          <Text ellipsis={true} color={bodyColor} size={bodySize}>
+            {body}
+          </Text>
+        </Row>
+      )}
+    </Column>
+  );
+
+  if (addOn) {
+    return (
+      <Row
+        grow={grow}
+        shrink={shrink}
+        gap={gap}
+        align="center"
+        padding={padding}
+        jsStyle={{
+          overflow: "hidden",
+        }}
+      >
+        {addOnPosition === "start" && addOn}
+        {textElement}
+        {addOnPosition === "end" && addOn}
+      </Row>
+    );
+  }
+
+  return textElement;
+}

package/src/TimeInput.tsx

@@ -0,0 +1,109 @@
+import React, { ReactNode } from "react";
+import { BaseInput, BaseInputProps } from "./BaseInput";
+import { Row } from "./Row";
+import { Gap, Padding, cssVar } from "./jss";
+
+export interface TimeInputProps extends BaseInputProps {
+  onTimeChange: (date: Date) => void;
+  time: Date;
+  gap?: Gap;
+  padding?: Padding;
+  addOn?: ReactNode;
+  addOnPosition?: "start" | "end";
+  onChange?: undefined;
+  bare?: boolean;
+}
+
+export const timeFormatter = Intl.DateTimeFormat("en-UK", {
+  hour: "2-digit",
+  minute: "2-digit",
+});
+
+function TimeInputInternal(
+  {
+    time: date,
+    onTimeChange: onDateChange,
+    jsStyle,
+    addOn,
+    padding = "small",
+    gap = "none",
+    addOnPosition = "start",
+    bare,
+    ...inputProps
+  }: TimeInputProps,
+  ref?: React.Ref<HTMLInputElement>
+) {
+  return (
+    <Row
+      padding={padding}
+      gap={gap}
+      align="center"
+      jsStyle={[
+        {
+          borderRadius: cssVar("--border-radius-m"),
+          overflow: "hidden",
+        },
+        bare
+          ? {
+              backgroundColor: "inherit",
+              ":has(:focus-visible)": {
+                backgroundColor: cssVar("--light-highlight"),
+              },
+            }
+          : {
+              border: `1px solid ${cssVar("--divider")}`,
+              backgroundColor: cssVar("--overlay-background"),
+              ":has(:focus-visible)": {
+                outline: `2px solid ${cssVar("--highlight")}`,
+                outlineOffset: -2,
+              },
+            },
+      ]}
+    >
+      {addOnPosition === "start" && addOn}
+      <BaseInput
+        {...inputProps}
+        type="time"
+        ref={ref}
+        value={timeFormatter.format(date)}
+        onChange={(e) => {
+          const value = e.target.value;
+          const [hour, minute] = value.split(":");
+          onDateChange(
+            new Date(
+              date.getFullYear(),
+              date.getMonth(),
+              date.getDate(),
+              parseInt(hour),
+              parseInt(minute)
+            )
+          );
+        }}
+        jsStyle={[
+          {
+            flexGrow: 1,
+            backgroundColor: "inherit",
+            color: "var(--primary-text)",
+            outline: "none",
+            border: "none",
+            fontSize: 20,
+            lineHeight: 24 / 20,
+            "::placeholder": {
+              color: "var(--subtle-text);",
+            },
+            ":disabled": {
+              color: "var(--subtle-text);",
+            },
+            "::-webkit-calendar-picker-indicator": {
+              backgroundColor: "none",
+            },
+          },
+          jsStyle,
+        ]}
+      />
+      {addOnPosition === "end" && addOn}
+    </Row>
+  );
+}
+
+export const TimeInput = React.forwardRef(TimeInputInternal);

package/src/Tooltip.tsx

@@ -0,0 +1,108 @@
+import React, { useRef, useState } from "react";
+
+import { BaseView } from "./BaseView";
+import { useRefEffect } from "./useRefEffect";
+import { Text } from "./Text";
+import { JSStyle, cssVar, jss } from "./jss";
+
+const jsStyles: { [key: string]: JSStyle } = {
+  tooltip: {
+    top: "-100%",
+    transform: "translateY(50%)",
+    backgroundColor: cssVar("--primary-background"),
+    padding: cssVar("--spacing-s"),
+    borderRadius: cssVar("--border-radius-m"),
+    border: `1px solid ${cssVar("--divider")}`,
+    boxShadow: `0px 1px 2px ${cssVar("--divider")}`,
+    overflow: "hidden",
+  },
+};
+
+interface TooltipProps {
+  content: string;
+  jsStyle?: JSStyle;
+  className?: undefined;
+  tag?: keyof HTMLElementTagNameMap;
+  children: JSX.Element;
+}
+
+export function Tooltip({ content, jsStyle, tag, children }: TooltipProps) {
+  const [tooltip, setTooltip] = useState<JSX.Element>(null);
+  const dialogRef = useRef(null);
+  const focusTrapRoot = useRefEffect((root: HTMLDialogElement) => {
+    dialogRef.current = root;
+
+    const keydown = (e) => {
+      if (e.key === "Escape") {
+        dialogRef.current?.close();
+      } else if (e.key === "Tab") {
+        dialogRef.current?.close();
+      }
+    };
+
+    const click = () => {
+      dialogRef.current?.close();
+    };
+
+    window.addEventListener("keydown", keydown);
+    window.addEventListener("click", click);
+
+    const activeElement = document.activeElement;
+    root.show();
+    // @ts-ignore
+    activeElement.focus();
+
+    return () => {
+      window.removeEventListener("keydown", keydown);
+      window.removeEventListener("click", click);
+    };
+  });
+
+  const toggle = () => {
+    if (tooltip == null) {
+      setTooltip(
+        <dialog
+          ref={(ref: null | HTMLDialogElement) => {
+            dialogRef.current = ref;
+            focusTrapRoot(ref);
+          }}
+          className={jss(jsStyles.tooltip)}
+          onClose={() => {
+            setTooltip(null);
+          }}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
+          <Text size="medium" color="secondary">
+            {content}
+          </Text>
+        </dialog>
+      );
+    } else {
+      setTooltip(null);
+    }
+  };
+
+  return (
+    <BaseView
+      tag={tag}
+      relative={true}
+      jsStyle={[{ display: "inline-block" }, jsStyle]}
+      onMouseEnter={() => {
+        if (tooltip == null) {
+          toggle();
+        }
+      }}
+      onMouseLeave={() => {
+        if (tooltip != null) {
+          toggle();
+        }
+      }}
+    >
+      {children}
+      {tooltip}
+    </BaseView>
+  );
+}

package/src/aria.ts

@@ -0,0 +1,72 @@
+type Focusable = HTMLElement;
+
+export function queryFocusables(root: HTMLElement): Focusable[] {
+  const focusables: Focusable[] = Array.from(
+    root.querySelectorAll(
+      "button,input,textarea,a,[tabindex='0'],[tabindex='-1']"
+    )
+  );
+
+  return focusables.filter((element: Focusable) => !element["disabled"]);
+}
+
+export function queryGrid(root: HTMLElement): HTMLElement[][] {
+  const rows: HTMLLIElement[] = Array.from(
+    root.querySelectorAll('li[role="row"]')
+  );
+
+  const rowsWithColumns = rows
+    .map((row) => Array.from(queryFocusables(row)))
+    .filter((row) => row.length > 0);
+
+  return rowsWithColumns;
+}
+
+export const normalizeGrid = (
+  rows: HTMLElement[][],
+  rowIndex: number,
+  columnIndex: number
+): void => {
+  for (const row of rows) {
+    for (const column of row) {
+      column.tabIndex = -1;
+    }
+  }
+
+  const row = rows[rowIndex];
+  const column = row[columnIndex] ?? row[row.length - 1];
+  column.tabIndex = 0;
+};
+
+export const focusGridElement = (
+  rows: HTMLElement[][],
+  rowIndex: number,
+  columnIndex: number
+): void => {
+  normalizeGrid(rows, rowIndex, columnIndex);
+  const row = rows[rowIndex];
+  const column = row[columnIndex] ?? row[row.length - 1];
+  column.focus();
+  column.scrollIntoView(false);
+};
+
+export const normalizeElements = (
+  focusables: HTMLElement[],
+  index: number
+): void => {
+  for (const element of focusables) {
+    element.tabIndex = -1;
+  }
+  const element = focusables[index] ?? focusables[focusables.length - 1];
+  element.tabIndex = 0;
+};
+
+export const focusElement = (
+  focusables: HTMLElement[],
+  index: number
+): void => {
+  normalizeElements(focusables, index);
+  const element = focusables[index] ?? focusables[focusables.length - 1];
+  element.focus();
+  // element.scrollIntoView(false);
+};

package/src/examples/ExampleDialog.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { DarkModeToggle } from "../DarkMode";
+import { Row } from "../Row";
+import { Dialog, useDialog } from "../Dialog";
+import { Button } from "../Button";
+import { Span } from "../Text";
+
+function ExampleDialog({ close }) {
+  return (
+    <Dialog close={close} label="Example">
+      <Row padding="medium" align="center" justify="space-between">
+        <Span>Dark mode</Span>
+        <DarkModeToggle />
+      </Row>
+    </Dialog>
+  );
+}
+
+export function DialogTrigger() {
+  const { open } = useDialog<void>(
+    ({ close }) => <ExampleDialog close={close} />,
+    { closeOnOutsideClick: true }
+  );
+
+  return (
+    <Button label="Show dialog" color={"positive"} onClick={() => open()} />
+  );
+}

package/src/guid.ts

@@ -0,0 +1,7 @@
+export function guid(): string {
+  return "ID-xxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}

package/src/hash.ts

@@ -0,0 +1,21 @@
+export function hash(source: string, modulus?: number): number {
+  let hash = 0;
+  let i: number;
+  let chr: number;
+
+  if (source.length === 0) {
+    return hash;
+  }
+
+  for (i = 0; i < source.length; i++) {
+    chr = source.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+
+  if (modulus) {
+    return Math.abs(hash) % modulus;
+  } else {
+    return Math.abs(hash);
+  }
+}

package/src/index.ts

@@ -0,0 +1,65 @@
+export * from "./aria";
+export * from "./Badge";
+export * from "./BaseButton";
+export * from "./BaseInput";
+export * from "./BaseLink";
+export * from "./BaseList";
+export * from "./BaseListAddOn";
+export * from "./BaseListItem";
+export * from "./BaseView";
+export * from "./Box";
+export * from "./Button";
+export * from "./Calendar";
+export * from "./Checkbox";
+export * from "./Circle";
+export * from "./Column";
+export * from "./DarkMode";
+export * from "./DateInput";
+export * from "./DatePicker";
+export * from "./DatetimeInput";
+export * from "./Dialog";
+export * from "./Dropdown";
+export * from "./Emitter";
+export * from "./FlexLayout";
+export * from "./guid";
+export * from "./Icon";
+export * from "./IconButton";
+export * from "./IconLink";
+export * from "./IconType";
+export * from "./jss";
+export * from "./Link";
+export * from "./List";
+export * from "./ListButtonItem";
+export * from "./ListDivider";
+export * from "./ListHeaderItem";
+export * from "./ListItem";
+export * from "./ListLinkItem";
+export * from "./ListSpacer";
+export * from "./numberToBase";
+export * from "./OnVisible";
+export * from "./Popover";
+export * from "./ProgressBar";
+export * from "./ProgressCircle";
+export * from "./Providers";
+export * from "./RangeInput";
+export * from "./RootView";
+export * from "./Row";
+export * from "./StackContext";
+export * from "./stateMachineContextFactory";
+export * from "./StaticCheckbox";
+export * from "./Storage";
+export * from "./Stream";
+export * from "./Sublist";
+export * from "./SubmitIconInput";
+export * from "./Tabs";
+export * from "./Text";
+export * from "./TextArea";
+export * from "./TextInput";
+export * from "./TextInputWithState";
+export * from "./TextPairing";
+export * from "./TimeInput";
+export * from "./TimeInput";
+export * from "./useCookie";
+export * from "./useNavigation";
+export * from "./usePromise";
+export * from "./useRefEffect";