Add modals from Tobira

package.json

@@ -18,13 +18,15 @@
     "prepare": "npm run build"
   },
   "devDependencies": {
-    "@opencast/eslint-config-ts-react": "^0.1.0",
+    "@opencast/eslint-config-ts-react": "^0.2.0",
     "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.19",
     "typescript": "^5.1.3"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@floating-ui/react": "^0.24.3",
+    "focus-trap-react": "^10.2.3",
     "react": "^18.2.0",
     "react-icons": "^4.9.0",
     "react-merge-refs": "^2.0.2"

src/card.tsx

@@ -0,0 +1,47 @@
+import { LuAlertTriangle, LuInfo } from "react-icons/lu";
+import { match, useAppkitConfig } from ".";
+
+
+type Props = JSX.IntrinsicElements["div"] & {
+    kind: "error" | "info";
+    iconPos?: "left" | "top";
+};
+
+/** A styled container for different purposes */
+export const Card: React.FC<Props> = ({ kind, iconPos = "left", children, ...rest }) => {
+  const config = useAppkitConfig();
+
+  return (
+    <div
+      css={{
+        display: "inline-flex",
+        flexDirection: iconPos === "left" ? "row" : "column",
+        borderRadius: 4,
+        padding: "8px 16px",
+        gap: 16,
+        alignItems: "center",
+        "& > svg": {
+          fontSize: 24,
+          minWidth: 24,
+        },
+        ...match(kind, {
+          "error": () => ({
+            backgroundColor: config.colors.danger0,
+            border: `1.5px solid ${config.colors.danger0}`,
+            color: config.colors.danger0BwInverted,
+          }) as Record<string, string>,
+          "info": () => ({
+            backgroundColor: config.colors.neutral10,
+          }),
+        }),
+      }}
+      {...rest}
+    >
+      {match(kind, {
+        "error": () => <LuAlertTriangle />,
+        "info": () => <LuInfo css={{ color: config.colors.neutral60 }} />,
+      })}
+      <div>{children}</div>
+    </div>
+  );
+};

src/colors.css

@@ -19,6 +19,12 @@ html[data-color-scheme="light"], html:not([data-color-scheme]) {
   --color-danger4: #c22a2c;
   --color-danger5: #880e11;
 
+  --color-happy0: #fff;
+  --color-happy1: #d0e3e7;
+  --color-happy3: #01758f;
+  --color-happy4: #015669;
+  --color-happy5: #013846;
+
   --color-accent9: #044a81;
   --color-accent8: #215D99;
   --color-accent7: #3073B8;
@@ -51,6 +57,12 @@ html[data-color-scheme="dark"] {
   --color-danger4: #e0584d;
   --color-danger5: #fb7c67;
 
+  --color-happy0: #013846;
+  --color-happy1: #015669;
+  --color-happy3: #759ca4;
+  --color-happy4: #9bbdc4;
+  --color-happy5: #d0e3e7;
+
   --color-accent9: #85ace3;
   --color-accent8: #7da4db;
   --color-accent7: #588ccd;
@@ -83,6 +95,12 @@ html[data-color-scheme="light-high-contrast"] {
   --color-danger4: #a50613;
   --color-danger5: #a50613;
 
+  --color-happy0: #fff;
+  --color-happy1: #fff;
+  --color-happy3: #013846;
+  --color-happy4: #013846;
+  --color-happy5: #013846;
+
   --color-accent8: #000099;
   --color-accent7: #000099;
   --color-accent6: #000099;
@@ -114,6 +132,12 @@ html[data-color-scheme="dark-high-contrast"] {
   --color-danger4: #eb1722;
   --color-danger5: #eb1722;
 
+  --color-happy0: #000;
+  --color-happy1: #000;
+  --color-happy3: #d0e3e7;
+  --color-happy4: #d0e3e7;
+  --color-happy5: #d0e3e7;
+
   --color-accent8: #a6ffea;
   --color-accent7: #a6ffea;
   --color-accent6: #a6ffea;

src/config.tsx

@@ -33,6 +33,12 @@ export type ColorConfig = {
   danger4: string,
   danger5: string,
 
+  happy0: string;
+  happy1: string;
+  happy3: string;
+  happy4: string;
+  happy5: string;
+
   accent8: string;
   accent7: string;
   accent6: string;
@@ -64,6 +70,12 @@ export const DEFAULT_CONFIG: AppkitConfig = {
     danger4: "var(--color-danger4)",
     danger5: "var(--color-danger5)",
 
+    happy0: "var(--color-happy0)",
+    happy1: "var(--color-happy1)",
+    happy3: "var(--color-happy3)",
+    happy4: "var(--color-happy4)",
+    happy5: "var(--color-happy5)",
+
     accent8: "var(--color-accent8)",
     accent7: "var(--color-accent7)",
     accent6: "var(--color-accent6)",

src/confirmationModal.tsx

@@ -0,0 +1,111 @@
+import {
+  ReactNode,
+  FormEvent,
+  PropsWithChildren,
+  forwardRef,
+  useState,
+  useRef,
+  useImperativeHandle,
+} from "react";
+import { ModalProps, ModalHandle, Modal, Spinner, Button, boxError } from ".";
+import { currentRef } from "./util";
+
+
+type ConfirmationModalProps = Omit<ModalProps, "closable" | "title"> & {
+  title?: string;
+  /** What to display in the confirm button. A string can be enough. */
+  buttonContent: ReactNode;
+  onSubmit?: () => void;
+  /** Strings that will be displayed in the UI */
+  text: {
+    /** Text on the button to close the modal */
+    cancel: string,
+    /** Text on the button to close the modal */
+    close: string,
+    /** Text asking the question that should be confirmed or cancelled. */
+    areYouSure: string,
+  },
+};
+
+/**
+ * A component that sits in the middle of the screen, darkens the rest of the
+ * screen and traps user focus. Also asks for confirmation, and closing can
+ * be delayed if a time intensive action was triggered.
+ */
+export type ConfirmationModalHandle = ModalHandle & {
+  done: () => void;
+  reportError: (error: JSX.Element) => void;
+};
+
+export const ConfirmationModal
+  = forwardRef<ConfirmationModalHandle, PropsWithChildren<ConfirmationModalProps>>(
+    ({
+      title: titleOverride,
+      buttonContent,
+      onSubmit,
+      text,
+      children,
+    }, ref) => {
+      const title = titleOverride ?? text.areYouSure;
+
+      const [inFlight, setInFlight] = useState(false);
+      const [error, setError] = useState<JSX.Element | undefined>();
+
+      const modalRef = useRef<ModalHandle>(null);
+
+      useImperativeHandle(ref, () => ({
+        open: () => {
+          setInFlight(false);
+          setError(undefined);
+          currentRef(modalRef).open();
+        },
+        done: () => {
+          currentRef(modalRef).close?.();
+        },
+        reportError: (error: JSX.Element) => {
+          setInFlight(false);
+          setError(error);
+        },
+      }));
+
+      const onSubmitWrapper = (event: FormEvent) => {
+        event.preventDefault();
+        // Don't let the event escape the portal,
+        //   which might be sitting inside of other `form` elements.
+        event.stopPropagation();
+        setInFlight(true);
+        setError(undefined);
+        onSubmit?.();
+      };
+
+      return <Modal
+        title={title}
+        closable={!inFlight}
+        ref={modalRef}
+        text={text}
+      >
+        {children}
+        <form onSubmit={onSubmitWrapper} css={{ marginTop: 32 }}>
+          <div css={{
+            display: "flex",
+            gap: 12,
+            justifyContent: "center",
+            flexWrap: "wrap",
+          }}>
+            <Button disabled={inFlight} onClick={
+              () => currentRef(modalRef).close?.()
+            }>
+              {text.cancel}
+            </Button>
+            <Button disabled={inFlight} type="submit" kind="danger" css={{
+              whiteSpace: "normal",
+            }}>
+              {buttonContent}
+            </Button>
+          </div>
+          {inFlight && <div css={{ marginTop: 16 }}><Spinner size={20} /></div>}
+        </form>
+        {boxError(error)}
+      </Modal>;
+    },
+  );

src/errorBox.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+import { Card } from ".";
+
+export const ErrorBox: React.FC<{ children: ReactNode }> = ({ children }) => (
+  <div css={{ marginTop: 8 }}>
+    <Card kind="error">{children}</Card>
+  </div>
+);
+
+/**
+* If the given error is not `null` nor `undefined`, returns an `<ErrorBox>`
+* with it as content. Returns `null` otherwise.
+*/
+export const boxError = (err: ReactNode): JSX.Element | null => (
+  err == null ? null : <ErrorBox>{err}</ErrorBox>
+);

src/index.tsx

@@ -1,13 +1,18 @@
 import { AppkitConfig } from "./config";
 
 export * from "./button";
+export * from "./card";
 export * from "./colorScheme";
 export * from "./config";
+export * from "./confirmationModal";
 export * from "./err";
+export * from "./errorBox";
 export * from "./floating";
 export * from "./header";
 export * from "./spinner";
 export * from "./util";
+export * from "./modal";
+export * from "./styledButton";
 
 
 /**