Merge pull request #76 from kleros/feat/modal-component

Feat/modal component

Author: tractorss

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/ui-components-library",
-  "version": "3.0.1",
+  "version": "3.1.2",
   "description": "UI components library which implements the Kleros design system.",
   "source": "./src/lib/index.ts",
   "main": "./dist/esm/ui-components-library.js",

src/lib/container/modal.tsx

@@ -2,23 +2,50 @@ import React from "react";
 import { cn } from "../../utils";
 import {
   Modal as AriaModal,
+  Dialog,
+  ModalOverlay,
+  type DialogProps,
   type ModalOverlayProps,
 } from "react-aria-components";
 
+interface ModalProps
+  extends Omit<ModalOverlayProps, "children">,
+    React.RefAttributes<HTMLDivElement> {
+  /** classname that applies to the modal overlay. */
+  modalOverlayClassname?: ModalOverlayProps["className"];
+  children?: DialogProps["children"];
+}
+
+/** A modal is an overlay element which blocks interaction with elements outside it. */
 function Modal({
   className,
+  modalOverlayClassname,
+  children,
   ...props
-}: ModalOverlayProps & React.RefAttributes<HTMLDivElement>) {
+}: Readonly<ModalProps>) {
   return (
-    <AriaModal
+    <ModalOverlay
       className={cn(
-        "bg-klerosUIComponentsWhiteBackground h-[200px] w-[328px]",
-        "rounded-base box-border",
-        className,
+        "fixed top-0 left-0 isolate",
+        "z-20 h-(--visual-viewport-height) w-full bg-black/[50%] backdrop-blur-md",
+        "flex items-center justify-center",
+        "entering:animate-[fadeIn_100ms_ease-out] exiting:animate-[fadeOut_100ms_ease-in]",
+        modalOverlayClassname,
       )}
+      {...props}
     >
-      {props.children}
-    </AriaModal>
+      <AriaModal {...props}>
+        <Dialog
+          className={cn(
+            "bg-klerosUIComponentsWhiteBackground h-[200px] w-[328px] outline-none",
+            "rounded-base box-border",
+            className,
+          )}
+        >
+          {children}
+        </Dialog>
+      </AriaModal>
+    </ModalOverlay>
   );
 }
 export default Modal;

src/lib/index.ts

@@ -6,6 +6,7 @@ export { default as Button } from "./button";
 
 export { default as Card } from "./container/card";
 export { default as Box } from "./container/box";
+export { default as Modal } from "./container/modal";
 
 export { default as DisplayLarge } from "./display/large";
 export { default as DisplayIcon } from "./display/icon";

src/stories/modal.stories.tsx

@@ -1,13 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react";
-
+import React, { useState } from "react";
 import { IPreviewArgs } from "./utils";
 
-import ModalComponent from "../lib/container/box";
+import ModalComponent from "../lib/container/modal";
+import { Button } from "../lib";
 
 const meta = {
   component: ModalComponent,
   title: "Containers/Modal",
   tags: ["autodocs"],
+  argTypes: {
+    isOpen: {
+      control: "boolean",
+    },
+    isDismissable: {
+      control: "boolean",
+    },
+  },
 } satisfies Meta<typeof ModalComponent>;
 
 export default meta;
@@ -19,5 +28,21 @@ export const Modal: Story = {
     themeUI: "dark",
     backgroundUI: "light",
     className: "w-[500px]",
+    isDismissable: true,
+  },
+  render: function Render(args) {
+    const [isOpen, setOpen] = useState(false);
+    return (
+      <div>
+        <Button text="Press me!" onPress={() => setOpen(true)} />
+        <ModalComponent {...args} isOpen={isOpen} onOpenChange={setOpen}>
+          <div className="flex size-full items-center justify-center">
+            <p className="text-klerosUIComponentsPrimaryText font-semibold">
+              I am a Modal.
+            </p>
+          </div>
+        </ModalComponent>
+      </div>
+    );
   },
 };

src/styles/theme.css

@@ -34,7 +34,7 @@
     --klerosUIComponentsBaseRadius: 3px;
   }
 
-  :root[class="dark"] {
+  :root.dark {
     --klerosUIComponentsName: dark;
     --klerosUIComponentsPrimaryPurple: #7e1bd4;
     --klerosUIComponentsSecondaryPurple: #b45fff;