next-helios-fe 1.3.6 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.3.6",
+  "version": "1.4.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/content-container/modal/index.tsx

@@ -31,6 +31,7 @@ export const Modal: React.FC<ModalProps> = ({
   useEffect(() => {
     if (!options?.disableClose) {
       document.addEventListener("keydown", (e) => {
+        e.preventDefault();
         if (e.key === "Escape") {
           onClose && onClose();
         }

package/src/components/content-container/tab/index.tsx

@@ -21,10 +21,10 @@ interface TabComponent extends React.FC<TabProps> {
 
 export const Tab: TabComponent = ({ children, tabs, options }) => {
   const childrenList = React.Children.toArray(children);
-  const [activeTab, setActiveTab] = useState(0);
   const windowList = childrenList.filter((child) => {
     return (child as React.ReactElement).type === Tab.Window;
   });
+  const [activeTab, setActiveTab] = useState(0);
 
   return (
     <div
@@ -36,7 +36,7 @@ export const Tab: TabComponent = ({ children, tabs, options }) => {
     >
       {options?.variant !== "horizontal" ? (
         <div className="flex overflow-auto [&::-webkit-scrollbar]:hidden">
-          {tabs.slice(0, childrenList.length).map((tab, index) => {
+          {tabs?.slice(0, childrenList?.length).map((tab, index) => {
             return (
               <button
                 key={index}

package/src/components/content-container/wizard/index.tsx

@@ -0,0 +1,105 @@
+"use client";
+import React, { useState } from "react";
+import { Icon } from "@iconify/react";
+import { Window, type WindowProps } from "./window";
+
+interface WizardProps {
+  children: React.ReactNode;
+  tabs: {
+    title: string;
+    subTitle: string;
+    icon: string;
+  }[];
+  options?: {
+    border?: boolean;
+  };
+  onPreviousClick?: () => void;
+  onNextClick?: () => void;
+}
+
+interface WizardComponent extends React.FC<WizardProps> {
+  Window: React.FC<WindowProps>;
+}
+
+export const Wizard: WizardComponent = ({
+  children,
+  tabs,
+  options,
+  onPreviousClick,
+  onNextClick,
+}) => {
+  const childrenList = React.Children.toArray(children);
+  const windowList = childrenList.filter((child) => {
+    return (child as React.ReactElement).type === Wizard.Window;
+  });
+  const [activeTab, setActiveTab] = useState(0);
+
+  return (
+    <div className="flex flex-col gap-8 h-full overflow-hidden">
+      <div className="space-x-8 relative before:absolute before:inset-0 before:mt-4 before:-translate-y-px md:before:mt-6 md:before:translate-y-0 before:w-full before:h-0.5 before:bg-gradient-to-r before:from-transparent before:via-primary before:to-transparent">
+        <div className="relative flex justify-between">
+          {tabs?.slice(0, childrenList.length)?.map((tab, index) => {
+            return (
+              <div
+                key={index}
+                className={`group flex flex-col items-center gap-2 max-w-40 max-h-40 ${
+                  activeTab >= index && "is-active"
+                }`}
+              >
+                <button
+                  className="flex justify-center items-center w-12 h-12 shadow border border-white rounded-full bg-secondary-light duration-300 group-[.is-active]:bg-primary group-[.is-active]:text-white"
+                  onClick={() => {
+                    setActiveTab(index);
+                  }}
+                >
+                  <Icon icon={tab.icon} className="text-2xl" />
+                </button>
+                <div className="flex flex-col items-center text-center">
+                  <h1 className="text-sm font-medium group-[.is-active]:text-primary">
+                    {tab.title}
+                  </h1>
+                  <p className="text-xs">{tab.subTitle}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div
+        className={`flex-1 overflow-auto ${
+          options?.border && "border rounded-md px-4 py-6"
+        }`}
+      >
+        {windowList[activeTab]}
+      </div>
+      <div className="flex justify-between">
+        <button
+          type="button"
+          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-slate-400"
+          disabled={activeTab === 0}
+          onClick={() => {
+            setActiveTab((prev) => prev - 1);
+            onPreviousClick && onPreviousClick();
+          }}
+        >
+          <Icon icon="gravity-ui:chevron-left" className="text-xl" />
+          Previous
+        </button>
+        <button
+          type="button"
+          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-slate-400"
+          disabled={activeTab === childrenList.length - 1}
+          onClick={() => {
+            setActiveTab((prev) => prev + 1);
+            onNextClick && onNextClick();
+          }}
+        >
+          Next
+          <Icon icon="gravity-ui:chevron-right" className="text-xl" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+Wizard.Window = Window;

package/src/components/content-container/wizard/window.tsx

@@ -0,0 +1,10 @@
+"use client";
+import React from "react";
+
+export interface WindowProps {
+  children: React.ReactNode;
+}
+
+export const Window: React.FC<WindowProps> = ({ children }) => {
+  return children;
+};

package/src/components/dialog/index.tsx

@@ -15,7 +15,7 @@ interface DialogProps {
     timeout?: 3000 | 5000 | 7000 | 10000;
   };
   open: boolean;
-  onClose: (open: boolean) => void;
+  onClose: () => void;
 }
 
 export const Dialog: React.FC<DialogProps> = ({
@@ -50,7 +50,7 @@ export const Dialog: React.FC<DialogProps> = ({
   useEffect(() => {
     if (options?.timeout) {
       const timeout = setTimeout(() => {
-        onClose(false);
+        onClose && onClose();
       }, options.timeout);
       return () => clearTimeout(timeout);
     }
@@ -93,7 +93,7 @@ export const Dialog: React.FC<DialogProps> = ({
                 type="button"
                 className="text-primary hover:text-primary-dark hover:underline"
                 onClick={() => {
-                  onClose && onClose(false);
+                  onClose && onClose();
                 }}
               >
                 Close

package/src/components/index.ts

@@ -8,6 +8,7 @@
 // export { Mfa } from "./security/mfa";
 // export { Recaptcha } from "./security/recaptcha";
 export { Tab } from "./content-container/tab";
+export { Wizard } from "./content-container/wizard";
 export { Dialog } from "./dialog";
 export { Modal } from "./content-container/modal";
 export { Drawer } from "./content-container/drawer";