Merge pull request #60 from ruru-m07/component/modal

feat(components): add modal component
ruru-m07 · Aug 23, 2024 · a8cb65c · a8cb65c
2 parents 6bae747 + 67a90ba
commit a8cb65c
Show file tree

Hide file tree

Showing 21 changed files with 1,591 additions and 46 deletions.
diff --git a/apps/www/app/playground/page.tsx b/apps/www/app/playground/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import Card from "@/components/ui/card";
 import { ModeToggle } from "@/components/ui/ModeToggle";
 import {
@@ -40,8 +40,16 @@ import {
   selectAnimationVariants,
 } from "ruru-ui/components/select";
 import AnimationToggle from "@/components/animationToggle";
+import Modal, { ModalProvider } from "ruru-ui/components/modal";
 
 const Playground = () => {
+  const handleSubmit = async () => {
+    // Your submit logic here
+    console.log("Submitted");
+    // Simulate an API call or any async operation
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  };
+
   return (
     <div className="flex flex-col items-center justify-center bg-card">
       <ModeToggle />
@@ -580,6 +588,64 @@ const Playground = () => {
         ))}
       </div>
 
+      <Card>
+        {/* <Button onClick={() => setOpen(true)} size="small">
+          Open Modal
+        </Button> */}
+
+        {/* <Modal active={open} onClickOutside={() => setOpen(false)}>
+          <Modal.Body>
+            <Modal.Header>
+              <Modal.Title>Create Username</Modal.Title>
+              <Modal.Subtitle>
+                Enter a unique name for your token to differentiate it from
+                other tokens and then select the scope.
+              </Modal.Subtitle>
+            </Modal.Header>
+            <Modal.Content>
+              <Input label="username" placeholder="enter your username." />
+            </Modal.Content>
+          </Modal.Body>
+
+          <Modal.Actions> */}
+        {/* <Modal.Action onClick={() => setOpen(false)} variant="secondary">
+            Cancel
+          </Modal.Action>
+
+          <Modal.Action onClick={() => setOpen(false)}>Submit</Modal.Action> */}
+        {/* <Modal.Action
+              fullWidth
+              onClick={() => setOpen(false)}
+              variant="secondary"
+            >
+              Cancel
+            </Modal.Action>
+          </Modal.Actions>
+        </Modal>*/}
+
+        <ModalProvider>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Modal.Body>
+              <Modal.Header>
+                <Modal.Title>Create Username</Modal.Title>
+                <Modal.Subtitle>
+                  Enter a unique name for your token to differentiate it from
+                  other tokens and then select the scope.
+                </Modal.Subtitle>
+              </Modal.Header>
+              <Modal.Content>
+                <Input label="username" placeholder="enter your username." />
+              </Modal.Content>
+            </Modal.Body>
+            <Modal.Actions>
+              <Modal.Close variant="secondary">Cancel</Modal.Close>
+              <Modal.Action onClick={handleSubmit}>Submit</Modal.Action>
+            </Modal.Actions>
+          </Modal>
+        </ModalProvider>
+      </Card>
+
       <div className="my-52" />
     </div>
   );

diff --git a/apps/www/components/preview/Modal/customWidth.tsx b/apps/www/components/preview/Modal/customWidth.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import { Button } from "ruru-ui/components/button";
+import { Input } from "ruru-ui/components/input";
+import Modal, { ModalProvider } from "ruru-ui/components/modal";
+
+const CustomWidth = () => {
+  return (
+    <ModalProvider>
+      <Modal.Trigger asChild>
+        <Button>Open Modal</Button>
+      </Modal.Trigger>
+      <Modal>
+        <Modal.Body>
+          <Modal.Header>
+            <Modal.Title
+              style={{
+                marginTop: "0em",
+                marginBottom: "5px",
+              }}
+              className="p-0"
+            >
+              Custom Width
+            </Modal.Title>
+            <Modal.Subtitle
+              className="p-0"
+              style={{
+                marginTop: "0em",
+                marginBottom: "0em",
+              }}
+            >
+              This modal opens with a Custom Width button.
+            </Modal.Subtitle>
+          </Modal.Header>
+          <Modal.Content className="">
+            <Input
+              prefix="https://"
+              suffix=".vercel.app"
+              placeholder="enter your username."
+              disabled
+              value={"ruru-ui-git-component-modal-ruru-07"}
+            />
+          </Modal.Content>
+        </Modal.Body>
+        <Modal.Actions>
+          <Modal.Close fullWidth variant="secondary">
+            Cancel
+          </Modal.Close>
+        </Modal.Actions>
+      </Modal>
+    </ModalProvider>
+  );
+};
+
+export default CustomWidth;
diff --git a/apps/www/components/preview/Modal/customWidth2.tsx b/apps/www/components/preview/Modal/customWidth2.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from "react";
+import { Button } from "ruru-ui/components/button";
+import { Input } from "ruru-ui/components/input";
+import Modal, { ModalProvider } from "ruru-ui/components/modal";
+
+const CustomWidth2 = () => {
+  return (
+    <ModalProvider>
+      <Modal.Trigger asChild>
+        <Button>Open Modal</Button>
+      </Modal.Trigger>
+      <Modal>
+        <Modal.Body>
+          <Modal.Header>
+            <Modal.Title
+              style={{
+                marginTop: "0em",
+                marginBottom: "5px",
+              }}
+              className="p-0"
+            >
+              Custom Width
+            </Modal.Title>
+            <Modal.Subtitle
+              className="p-0"
+              style={{
+                marginTop: "0em",
+                marginBottom: "0em",
+              }}
+            >
+              This modal opens with a Custom Width button.
+            </Modal.Subtitle>
+          </Modal.Header>
+          <Modal.Content className="">
+            <Input
+              prefix="https://"
+              suffix=".vercel.app"
+              placeholder="enter your username."
+              disabled
+              value={"ruru-ui-git-component-modal-ruru-07"}
+            />
+          </Modal.Content>
+        </Modal.Body>
+        <Modal.Actions>
+          <Modal.Close fullWidth variant="secondary">
+            Cancel
+          </Modal.Close>
+          <Modal.Close fullWidth>Submit</Modal.Close>
+        </Modal.Actions>
+      </Modal>
+    </ModalProvider>
+  );
+};
+
+export default CustomWidth2;
diff --git a/apps/www/components/preview/Modal/disabled.tsx b/apps/www/components/preview/Modal/disabled.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { Button } from "ruru-ui/components/button";
+import { Input } from "ruru-ui/components/input";
+import Modal, { ModalProvider } from "ruru-ui/components/modal";
+
+const Disabled = () => {
+  return (
+    <ModalProvider>
+      <Modal.Trigger asChild>
+        <Button>Open Modal</Button>
+      </Modal.Trigger>
+      <Modal>
+        <Modal.Body>
+          <Modal.Header>
+            <Modal.Title
+              style={{
+                marginTop: "0em",
+                marginBottom: "5px",
+              }}
+              className="p-0"
+            >
+              Disabled
+            </Modal.Title>
+            <Modal.Subtitle
+              className="p-0"
+              style={{
+                marginTop: "0em",
+                marginBottom: "0em",
+              }}
+            >
+              This modal opens with a Disabled button.
+            </Modal.Subtitle>
+          </Modal.Header>
+          <Modal.Content className="">
+            <Input
+              prefix="https://"
+              suffix=".vercel.app"
+              placeholder="enter your username."
+              disabled
+              value={"ruru-ui-git-component-modal-ruru-07"}
+            />
+          </Modal.Content>
+        </Modal.Body>
+        <Modal.Actions>
+          <Modal.Close variant="secondary">Cancel</Modal.Close>
+          <Modal.Close disabled> Submit </Modal.Close>
+        </Modal.Actions>
+      </Modal>
+    </ModalProvider>
+  );
+};
+
+export default Disabled;
diff --git a/apps/www/components/preview/Modal/preview.tsx b/apps/www/components/preview/Modal/preview.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import React, { useState } from "react";
+import Modal, { ModalProvider } from "ruru-ui/components/modal";
+import { Input } from "ruru-ui/components/input";
+
+const Preview = () => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [status, setStatus] = useState<boolean>(false);
+
+  const handleSubmit = async () => {
+    setIsLoading(true);
+
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    setStatus(true);
+    setIsLoading(false);
+
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    setStatus(false);
+  };
+
+  return (
+    <div className="">
+      <ModalProvider>
+        <Modal.Trigger>Deploy</Modal.Trigger>
+        <Modal>
+          <Modal.Body>
+            <Modal.Header>
+              <Modal.Title
+                style={{
+                  marginTop: "0em",
+                  marginBottom: "5px",
+                }}
+                className="p-0"
+              >
+                Deploy to production
+              </Modal.Title>
+              <Modal.Subtitle
+                className="p-0"
+                style={{
+                  marginTop: "0em",
+                  marginBottom: "0em",
+                }}
+              >
+                Deploy your site to production by clicking the button below.
+              </Modal.Subtitle>
+            </Modal.Header>
+            <Modal.Content className="">
+              <Input
+                prefix="https://"
+                suffix=".vercel.app"
+                placeholder="enter your username."
+                disabled
+                value={"ruru-ui-git-component-modal-ruru-07"}
+              />
+            </Modal.Content>
+          </Modal.Body>
+          <Modal.Actions>
+            <Modal.Close variant="secondary">Cancel</Modal.Close>
+            <Modal.Action
+              className={status ? "bg-[#0f2e18] text-[#62c073] rounded-md" : ""}
+              loading={isLoading}
+              disabled={isLoading}
+              onClick={handleSubmit}
+            >
+              {status ? (
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 15 15"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+                    fill="currentColor"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+              ) : (
+                "Deploy"
+              )}
+            </Modal.Action>
+          </Modal.Actions>
+        </Modal>
+      </ModalProvider>
+    </div>
+  );
+};
+
+export default Preview;