Add modals from Tobira

src/confirmationModal.tsx

@@ -13,15 +13,25 @@ import { currentRef } from "./utilFunc";
 
 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;

src/modal.tsx

@@ -14,12 +14,18 @@ import {
 
 export type ModalProps = {
   title: string;
+  /** Whether the user can close the modal. If false, the application
+  *  will have to close the modal eventually. */
   closable?: boolean;
   className?: string;
   closeOnOutsideClick?: boolean;
   open?: boolean;
+  /** If true, the first element in the modal automatically be focused. If false,
+   * no element is initially focused */
   initialFocus?: false;
+  /** Strings that will be displayed in the UI */
   text: {
+    /** Text on the button to close the modal */
     close: string,
   },
 };
@@ -30,6 +36,10 @@ export type ModalHandle = {
   isOpen?: () => boolean;
 };
 
+/**
+ * A component that sits in the middle of the screen, darkens the rest of the
+ * screen and traps user focus.
+ */
 export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(({
   title,
   closable = true,

src/styledButton.tsx

@@ -16,6 +16,10 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ),
 );
 
+/**
+ * Returns css for different types of buttons.
+ * Comes in the kinds "normal", "danger" and "happy".
+ */
 const css = (kind: Kind, extraCss: Interpolation<Theme> = {}): Interpolation<Theme> => {
   const config = useAppkitConfig();