next-helios-fe 1.0.0

package/src/components/content-container/accordion/item.tsx

@@ -0,0 +1,40 @@
+"use client";
+import React, { useState } from "react";
+import { Icon } from "@iconify/react";
+
+export interface ItemProps {
+  children: React.ReactNode;
+  title: string;
+}
+
+export const Item: React.FC<ItemProps> = ({ children, title }) => {
+  const [active, setActive] = useState(false);
+
+  return (
+    <div
+      className={`grid w-full rounded-md overflow-hidden duration-300 ${
+        active ? "border-l-4 border-primary" : "border-l-0"
+      }`}
+    >
+      <button
+        type="button"
+        className={`flex justify-between items-center w-full px-4 py-2 hover:bg-secondary-light ${
+          active && "text-primary font-medium"
+        }`}
+        onClick={() => {
+          setActive(!active);
+        }}
+      >
+        <span>{title}</span>
+        <Icon icon={`gravity-ui:chevron-${active ? "up" : "down"}`} />
+      </button>
+      <div
+        className={`overflow-auto duration-300 transition-all ${
+          active ? "max-h-96 border-t" : "max-h-0"
+        }`}
+      >
+        <div className="px-6 py-4">{children}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/content-container/card.tsx

@@ -0,0 +1,21 @@
+"use client";
+import React from "react";
+
+interface CardProps {
+  children: React.ReactNode;
+  id?: string;
+  options?: { enablePadding?: boolean };
+}
+
+export const Card: React.FC<CardProps> = ({ children, id, options }) => {
+  return (
+    <div
+      id={id}
+      className={`w-full min-h-64 h-full rounded-md shadow-md bg-secondary-bg ${
+        options?.enablePadding && "px-6 py-8"
+      }`}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/content-container/carousel.tsx

@@ -0,0 +1,35 @@
+"use client";
+import React from "react";
+import { Carousel as Cr } from "flowbite-react";
+
+interface CarouselProps {
+  children: React.ReactNode;
+  options?: {
+    interval?: number;
+    pauseOnHover?: boolean;
+  };
+}
+
+export const Carousel: React.FC<CarouselProps> = ({ children, options }) => {
+  const childrenList = React.Children.toArray(children);
+
+  return (
+    <div className="h-full">
+      <Cr
+        slideInterval={options?.interval || 5000}
+        pauseOnHover={options?.pauseOnHover || false}
+      >
+        {childrenList?.map((item, index) => {
+          return (
+            <div
+              key={index}
+              className="relative grid w-full h-full px-8 py-10 rounded-md shadow-md bg-gradient-to-r from-primary to-primary-dark text-white"
+            >
+              {item}
+            </div>
+          );
+        })}
+      </Cr>
+    </div>
+  );
+};

package/src/components/content-container/drawer.tsx

@@ -0,0 +1,78 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Icon } from "@iconify/react";
+
+interface DrawerProps {
+  children: React.ReactNode;
+  title: string;
+  subtitle: string;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+  children,
+  title,
+  subtitle,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    document.addEventListener("mousedown", (e) => {
+      if (
+        e.target instanceof HTMLElement &&
+        !e.target.closest("#info-screen")
+      ) {
+        setOpen(false);
+      }
+    });
+  }, []);
+
+  return (
+    <div
+      className={`absolute top-0 right-0 h-full z-40 ${
+        !open && "pointer-events-none"
+      }`}
+    >
+      <div
+        className={`flex h-full duration-300 ${
+          open ? "translate-x-0" : "translate-x-96"
+        }`}
+      >
+        <button
+          type="button"
+          className="group sticky top-36 h-min rounded-l-md text-white bg-primary p-2 hover:bg-primary-dark pointer-events-auto active:opacity-70 active:duration-300 active:ease-out"
+          onClick={() => {
+            setOpen((prev) => !prev);
+          }}
+        >
+          <Icon
+            icon="ant-design:setting-outlined"
+            className="text-xl group-hover:animate-spin"
+          />
+        </button>
+        <div
+          id="info-screen"
+          className="w-96 h-full py-4 pb-4 shadow-md bg-secondary-bg"
+        >
+          <div className="flex flex-col">
+            <div className="flex justify-between items-center px-6 pb-2 border-b">
+              <div className="grid">
+                <span className="text-lg">{title}</span>
+                <span className="text-sm font-light">{subtitle}</span>
+              </div>
+              <button
+                type="button"
+                className="flex justify-center items-center rounded-full p-1 text-slate-400 hover:bg-secondary-light"
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                <Icon icon="pajamas:close" className="text-2xl" />
+              </button>
+            </div>
+            <div className="px-6 py-4">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,127 @@
+"use client";
+import React, { useEffect } from "react";
+import ReactDom from "react-dom";
+import { Icon } from "@iconify/react";
+import { Button } from "../../../components";
+
+interface ModalProps {
+  children: React.ReactNode;
+  id?: string;
+  title: string;
+  options?: {
+    size?: "fit" | "regular" | "large" | "full";
+    disablePadding?: boolean;
+    disableClose?: boolean;
+    hideFooter?: boolean;
+  };
+  action?: {
+    variant?: "primary" | "secondary" | "success" | "warning" | "danger";
+    label?: string;
+    onClick: () => void;
+  };
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  children,
+  id,
+  title,
+  options,
+  action,
+  open,
+  setOpen,
+}) => {
+  useEffect(() => {
+    if (!options?.disableClose) {
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          setOpen(false);
+        }
+      });
+    }
+  }, []);
+
+  const size =
+    options?.size === "fit"
+      ? "w-fit h-fit"
+      : options?.size === "large"
+      ? "w-11/12 sm:w-9/12 md:w-7/12 h-5/6 md:h-4/6"
+      : options?.size === "full"
+      ? "w-full h-full"
+      : "w-11/12 sm:w-9/12 md:w-7/12 lg:w-5/12 h-5/6 sm:h-4/6 md:h-2/3 lg:h-2/4";
+
+  return (
+    typeof document !== "undefined" &&
+    ReactDom.createPortal(
+      <div
+        id={id}
+        className={`absolute top-0 left-0 w-dvw h-dvh z-40 bg-black/30 backdrop-blur-sm ${
+          !open && "hidden"
+        }`}
+      >
+        <div className="flex justify-center items-center w-full h-full">
+          <div
+            className={`flex flex-col rounded-md shadow-md divide-y bg-secondary-bg ${size}`}
+          >
+            <div className="flex justify-between items-center gap-2 px-6 py-2">
+              <span className="text-lg">{title}</span>
+              {!options?.disableClose && (
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-slate-400">[esc]</span>
+                  <button
+                    type="button"
+                    className="flex justify-center items-center rounded-full px-1 py-1 text-slate-400 hover:bg-secondary-light"
+                    onClick={() => {
+                      setOpen(false);
+                    }}
+                  >
+                    <Icon icon="pajamas:close" className="text-2xl" />
+                  </button>
+                </div>
+              )}
+            </div>
+            <div
+              className={`flex-1 h-full overflow-auto ${
+                !options?.disablePadding && "px-6 py-4"
+              }`}
+            >
+              {children}
+            </div>
+            {(!options?.disableClose || action) && !options?.hideFooter && (
+              <div className="flex justify-end items-center gap-4 px-6 py-2">
+                {!options?.disableClose && (
+                  <Button
+                    options={{
+                      width: "fit",
+                      height: "short",
+                      border: true,
+                    }}
+                    onClick={() => {
+                      setOpen(false);
+                    }}
+                  >
+                    Close
+                  </Button>
+                )}
+                {action?.label && (
+                  <Button
+                    options={{
+                      variant: action?.variant ?? "primary",
+                      width: "fit",
+                      height: "short",
+                    }}
+                    onClick={action?.onClick}
+                  >
+                    {action?.label}
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>,
+      document.body
+    )
+  );
+};

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

@@ -0,0 +1,47 @@
+"use client";
+import React from "react";
+import SortableList from "react-easy-sort";
+import { arrayMoveImmutable } from "array-move";
+import { Item, type ItemProps } from "./item";
+import { Knob, type KnobProps } from "./knob";
+
+interface SortableProps {
+  children: React.ReactNode;
+  className?: string;
+  setItems: any;
+}
+
+interface SortableComponent extends React.FC<SortableProps> {
+  Item: React.FC<ItemProps>;
+  Knob: React.FC<KnobProps>;
+}
+
+export const Sortable: SortableComponent = ({
+  children,
+  className,
+  setItems,
+}) => {
+  const childrenList = React.Children.toArray(children);
+  const itemList = childrenList.filter((child) => {
+    return (child as React.ReactElement).type === Sortable.Item;
+  });
+
+  const onSortEnd = (oldIndex: number, newIndex: number) => {
+    setItems((array: any) => arrayMoveImmutable(array, oldIndex, newIndex));
+  };
+
+  return (
+    <SortableList
+      className={className}
+      onSortEnd={onSortEnd}
+      draggedItemClassName="dragged"
+    >
+      {itemList.map((item) => {
+        return item;
+      })}
+    </SortableList>
+  );
+};
+
+Sortable.Item = Item;
+Sortable.Knob = Knob;

package/src/components/content-container/sortable/item.tsx

@@ -0,0 +1,20 @@
+"use client";
+import React from "react";
+import { SortableItem } from "react-easy-sort";
+
+export interface ItemProps {
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+  options?: {
+    columnSpan?: number;
+  };
+}
+
+export const Item: React.FC<ItemProps> = ({ children, options }) => {
+  const columnSpanNumber = `col-span-${options?.columnSpan || 1}`;
+
+  return (
+    <div className={`${columnSpanNumber} h-full`}>
+      <SortableItem>{children}</SortableItem>
+    </div>
+  );
+};

package/src/components/content-container/sortable/knob.tsx

@@ -0,0 +1,11 @@
+"use client";
+import React from "react";
+import { SortableKnob } from "react-easy-sort";
+
+export interface KnobProps {
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+}
+
+export const Knob: React.FC<KnobProps> = ({ children }) => {
+  return <SortableKnob>{children}</SortableKnob>;
+};

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

@@ -0,0 +1,94 @@
+"use client";
+import React, { useState } from "react";
+import { Icon } from "@iconify/react";
+import { Window, type WindowProps } from "./window";
+
+interface TabProps {
+  children: React.ReactNode;
+  tabs: {
+    title: string;
+    icon?: string;
+  }[];
+  options?: {
+    variant?: "vertical" | "horizontal";
+  };
+}
+
+interface TabComponent extends React.FC<TabProps> {
+  Window: React.FC<WindowProps>;
+}
+
+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;
+  });
+
+  return (
+    <div
+      className={`flex w-full h-full ${
+        options?.variant !== "horizontal"
+          ? "flex-col divide-y-1"
+          : "flex-col lg:flex-row  divide-y-1 lg:divide-y-0 divide-x-0 lg:divide-x-1"
+      }`}
+    >
+      {options?.variant !== "horizontal" ? (
+        <div className="flex overflow-auto [&::-webkit-scrollbar]:hidden">
+          {tabs.slice(0, childrenList.length).map((tab, index) => {
+            return (
+              <button
+                key={index}
+                type="button"
+                className={`flex items-center gap-2 px-6 pt-2 pb-1.5 border-b-2 whitespace-nowrap duration-300 ${
+                  activeTab === index
+                    ? "text-primary border-primary"
+                    : "border-transparent hover:text-primary hover:border-primary-transparent"
+                }`}
+                onClick={() => {
+                  setActiveTab(index);
+                }}
+              >
+                {tab?.icon && <Icon icon={tab?.icon} className="text-lg" />}
+                {tab.title}
+              </button>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="flex flex-row lg:flex-col lg:min-w-36 lg:max-w-48 overflow-auto [&::-webkit-scrollbar]:hidden">
+          {tabs.slice(0, childrenList.length).map((tab, index) => {
+            return (
+              <button
+                key={index}
+                type="button"
+                className={`flex items-center gap-2 px-6 pt-2 pb-1.5 border-b-2 lg:border-b-0 border-r-0 lg:border-r-2 text-left whitespace-nowrap duration-300 ${
+                  activeTab === index
+                    ? "text-primary border-primary"
+                    : "border-transparent hover:text-primary hover:border-primary-transparent"
+                }`}
+                onClick={() => {
+                  setActiveTab(index);
+                }}
+              >
+                {tab?.icon && <Icon icon={tab?.icon} className="text-lg" />}
+                {tab.title}
+              </button>
+            );
+          })}
+        </div>
+      )}
+      <div
+        className={`flex-1 overflow-auto ${
+          options?.variant !== "horizontal"
+            ? "px-6 py-8"
+            : "px-6 lg:px-8 py-8 lg:py-6"
+        }`}
+      >
+        {windowList[activeTab]}
+      </div>
+    </div>
+  );
+};
+
+Tab.Window = Window;

package/src/components/content-container/tab/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/data-tree/index.tsx

@@ -0,0 +1,60 @@
+"use client";
+import React, { useState } from "react";
+import { Icon } from "@iconify/react";
+
+export interface DataTreeProps {
+  data: any[];
+  defaultExpanded?: boolean;
+}
+
+const RecursiveComponent = ({ data, defaultExpanded }: any) => {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded || false);
+
+  return (
+    <div className="ps-3">
+      <div className="flex justify-between items-center gap-6">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              className={`${data?.children.length ? "" : "invisible"}`}
+              onClick={() => {
+                setIsExpanded(!isExpanded);
+              }}
+            >
+              <Icon
+                icon={`gravity-ui:chevron-${isExpanded ? "down" : "right"}`}
+              />
+            </button>
+            <span>{data.name}</span>
+          </div>
+        </div>
+      </div>
+      {isExpanded &&
+        data?.children.map((item: any) => (
+          <RecursiveComponent
+            key={item.id}
+            data={item}
+            defaultExpanded={defaultExpanded}
+          />
+        ))}
+    </div>
+  );
+};
+
+export const DataTree: React.FC<DataTreeProps> = ({
+  data,
+  defaultExpanded,
+}) => {
+  return (
+    <div className="flex flex-col gap-6">
+      {data.map((item) => (
+        <RecursiveComponent
+          key={item.id}
+          data={item}
+          defaultExpanded={defaultExpanded}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/dialog/index.tsx

@@ -0,0 +1,88 @@
+"use client";
+import React, { useEffect } from "react";
+
+interface DialogProps {
+  children: React.ReactNode;
+  action: {
+    variant: "primary" | "secondary" | "success" | "warning" | "danger";
+    label: string;
+    onClick: () => void;
+  };
+  options?: {
+    timeout?: 3000 | 5000 | 7000 | 10000;
+  };
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const Dialog: React.FC<DialogProps> = ({
+  children,
+  action,
+  options,
+  open,
+  setOpen,
+}) => {
+  const actionVariant =
+    action.variant === "secondary"
+      ? "text-secondary hover:text-secondary-dark hover:underline"
+      : action.variant === "success"
+      ? "text-success hover:text-success-dark hover:underline"
+      : action.variant === "warning"
+      ? "text-warning hover:text-warning-dark hover:underline"
+      : action.variant === "danger"
+      ? "text-danger hover:text-danger-dark hover:underline"
+      : "text-primary hover:text-primary-dark hover:underline";
+  const shrinkAnimation =
+    options?.timeout === 3000
+      ? `animate-shrink-3000`
+      : options?.timeout === 5000
+      ? `animate-shrink-5000`
+      : options?.timeout === 7000
+      ? `animate-shrink-7000`
+      : options?.timeout === 10000
+      ? `animate-shrink-10000`
+      : "";
+
+  useEffect(() => {
+    if (options?.timeout) {
+      const timeout = setTimeout(() => {
+        setOpen(false);
+      }, options.timeout);
+      return () => clearTimeout(timeout);
+    }
+  }, [open]);
+
+  return (
+    <div
+      className={`absolute top-0 left-0 w-dvw h-dvh z-40 ${
+        !open && "hidden"
+      } ${options?.timeout ? "pointer-events-none" : "bg-black/30"}`}
+    >
+      <div className="flex justify-center mt-4">
+        <div
+          className={`flex flex-col gap-4 w-full sm:w-4/5 md:w-3/5 lg:w-2/5 xl:w-4/12 min-h-24 border rounded-md bg-secondary-bg text-sm overflow-hidden pointer-events-auto ${
+            options?.timeout ? "pt-4" : "py-4"
+          }`}
+        >
+          <div className="flex-1 h-full px-4">{children}</div>
+          <div className="flex justify-end gap-4 px-4">
+            <button className={actionVariant}>{action.label}</button>
+            <button
+              className="text-danger hover:text-danger-dark hover:underline"
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              Close
+            </button>
+          </div>
+          {options?.timeout && (
+            <div className="w-full h-1.5 bg-primary-transparent">
+              <div className={`h-full bg-primary ${shrinkAnimation}`}></div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/dropdown/header.tsx

@@ -0,0 +1,11 @@
+"use client";
+import React from "react";
+import { Dropdown as Dd } from "flowbite-react";
+
+export interface HeaderProps {
+  children: React.ReactNode;
+}
+
+export const Header: React.FC<HeaderProps> = ({ children }) => {
+  return <Dd.Header>{children}</Dd.Header>;
+};