next-helios-fe 1.4.3 → 1.4.5

package/package.json

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

package/src/components/chart/index.tsx

@@ -4,31 +4,49 @@ import dynamic from "next/dynamic";
 const Ch = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 interface ChartProps {
-  type: "line" | "area" | "bar" | "pie" | "donut" | "radialBar" | "heatmap";
-  theme?: "light" | "dark" | "system";
+  type:
+    | "line"
+    | "area"
+    | "bar"
+    | "pie"
+    | "donut"
+    | "radialBar"
+    | "heatmap"
+    | "scatter"
+    | "bubble"
+    | "candlestick"
+    | "boxPlot"
+    | "radar"
+    | "polarArea"
+    | "rangeBar"
+    | "rangeArea"
+    | "treemap";
+
   id?: string;
   title?: string;
   subTitle?: string;
-  series: any;
   labels?: string[];
+  series: any;
   xaxis?: {
     categories: string[];
   };
-  height?: number;
-  sparkline?: boolean;
+  options?: {
+    theme?: "light" | "dark" | "system";
+    height?: number;
+    barChart?: { variant: "vertical" | "horizontal" };
+    sparkline?: boolean;
+  };
 }
 
 export const Chart: React.FC<ChartProps> = ({
   type,
-  theme,
   id,
   title,
   subTitle,
   series,
   labels,
   xaxis,
-  height,
-  sparkline,
+  options,
 }) => {
   const areaOptions = type === "area" && {
     fill: {
@@ -42,10 +60,10 @@ export const Chart: React.FC<ChartProps> = ({
 
   return (
     <Ch
-      type={type}
       id={id}
+      type={type}
       series={series}
-      height={height}
+      height={options?.height}
       options={{
         title: {
           text: title,
@@ -74,6 +92,7 @@ export const Chart: React.FC<ChartProps> = ({
           "#9e9e9e",
         ],
         chart: {
+          type: type,
           toolbar: {
             show: false,
           },
@@ -81,14 +100,14 @@ export const Chart: React.FC<ChartProps> = ({
             enabled: false,
           },
           sparkline: {
-            enabled: sparkline ?? true,
+            enabled: options?.sparkline ?? true,
           },
           events: {
             mounted: (chart) => {
               chart.windowResizeHandler();
             },
           },
-          foreColor: theme === "light" ? "#475569" : "#ffffff",
+          foreColor: options?.theme === "light" ? "#475569" : "#ffffff",
         },
         dataLabels: {
           enabled: false,
@@ -101,18 +120,39 @@ export const Chart: React.FC<ChartProps> = ({
           bar: {
             borderRadius: 4,
             columnWidth: "30%",
+            horizontal: options?.barChart?.variant === "horizontal",
           },
           pie: {
             donut: {
-              size: "70%",
+              labels: {
+                show: type === "donut",
+                name: {
+                  show: true,
+                },
+                value: {
+                  show: true,
+                },
+                total: {
+                  show: true,
+                },
+              },
+            },
+          },
+          radialBar: {
+            dataLabels: {
+              total: {
+                show: true,
+                label: "Total",
+              },
             },
           },
         },
         tooltip: {
-          theme: theme === "light" ? "light" : "dark",
+          theme: options?.theme === "light" ? "light" : "dark",
+          fillSeriesColor: false,
         },
         grid: {
-          borderColor: theme === "light" ? "#e5e6e8" : "#545869",
+          borderColor: options?.theme === "light" ? "#e5e6e8" : "#545869",
         },
         ...areaOptions,
       }}

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

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Icon } from "@iconify/react";
 import { Window, type WindowProps } from "./window";
 
@@ -29,36 +29,73 @@ export const Wizard: WizardComponent = ({
   onPreviousClick,
   onNextClick,
 }) => {
+  const wizardNavigationRef = useRef<HTMLDivElement>(null);
   const childrenList = React.Children.toArray(children);
   const windowList = childrenList.filter((child) => {
     return (child as React.ReactElement).type === Wizard.Window;
   });
   const [activeTab, setActiveTab] = useState(0);
 
+  const handleOnPreviousClick = () => {
+    if (activeTab - 1 === 0) {
+      wizardNavigationRef.current?.scrollTo({
+        left: 0,
+        behavior: "smooth",
+      });
+    } else {
+      document.getElementById(`wizard-tab-${activeTab - 1}`)?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  };
+
+  const handleOnNextClick = () => {
+    if (activeTab + 1 === childrenList.length) {
+      wizardNavigationRef.current?.scrollTo({
+        left: wizardNavigationRef.current.scrollWidth,
+        behavior: "smooth",
+      });
+    } else {
+      document.getElementById(`wizard-tab-${activeTab + 1}`)?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  };
+
   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">
+      <div className="space-x-8 relative before:absolute before:inset-0 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
+          ref={wizardNavigationRef}
+          className="relative flex justify-between overflow-auto [&::-webkit-scrollbar]:hidden"
+        >
           {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 ${
+                id={`wizard-tab-${index}`}
+                className={`group flex flex-col items-center gap-2 min-w-32 max-w-40 px-2 ${
                   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 ${
-                    !options?.disableNavigationClick &&
-                    "hover:border-primary hover:text-primary"
-                  }`}
-                  disabled={options?.disableNavigationClick}
-                  onClick={() => {
-                    setActiveTab(index);
-                  }}
-                >
-                  <Icon icon={tab.icon} className="text-2xl" />
-                </button>
+                <div className="rounded-full bg-secondary-bg">
+                  <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 ${
+                      !options?.disableNavigationClick &&
+                      "hover:border-primary hover:bg-primary-transparent hover:text-primary"
+                    }`}
+                    disabled={options?.disableNavigationClick}
+                    onClick={() => {
+                      setActiveTab(index);
+                    }}
+                  >
+                    <Icon icon={tab.icon} className="text-2xl" />
+                  </button>
+                </div>
                 <div className="flex flex-col items-center text-center">
                   <h1 className="text-sm font-medium group-[.is-active]:text-primary">
                     {tab.title}
@@ -84,6 +121,7 @@ export const Wizard: WizardComponent = ({
           disabled={activeTab === 0}
           onClick={() => {
             setActiveTab((prev) => prev - 1);
+            handleOnPreviousClick();
             onPreviousClick && onPreviousClick();
           }}
         >
@@ -96,6 +134,7 @@ export const Wizard: WizardComponent = ({
           disabled={activeTab === childrenList.length - 1}
           onClick={() => {
             setActiveTab((prev) => prev + 1);
+            handleOnNextClick();
             onNextClick && onNextClick();
           }}
         >