next-helios-fe 1.0.0

package/src/components/form/other/pin.tsx

@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import { PinField } from "react-pin-field";
+
+export interface PinProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    height?: "short" | "medium" | "high";
+    length: number;
+  };
+  label?: string;
+  onChange?: (e: any) => void;
+}
+
+export const Pin: React.FC<PinProps> = ({
+  options,
+  label,
+  onChange,
+  ...rest
+}) => {
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  return (
+    <label className="grid gap-2 w-fit">
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <div className="flex items-center gap-4">
+        <PinField
+          className={`text-center w-10 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+          length={6}
+          validate={/^[0-9]$/}
+          onChange={(value) => {
+            const e = {
+              target: {
+                value,
+              },
+            };
+            onChange && onChange!(e);
+          }}
+          {...rest}
+        />
+      </div>
+    </label>
+  );
+};

package/src/components/form/other/secret.tsx

@@ -0,0 +1,74 @@
+"use client";
+import React, { useState } from "react";
+import { Icon } from "@iconify/react";
+
+export interface SecretProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+  value?: string;
+  onClipboardClick?: (value: string) => void;
+}
+
+export const Secret: React.FC<SecretProps> = ({
+  options,
+  label,
+  value,
+  onClipboardClick,
+  ...rest
+}) => {
+  const [show, setShow] = useState(false);
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <div className="relative flex items-center">
+        <input
+          type="text"
+          className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+          value={show ? value : value ? value.slice(0, 3) + ".." : ""}
+          disabled
+          {...rest}
+        />
+        <div className="absolute right-4 flex">
+          <div
+            className="p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            onClick={(e) => {
+              e.preventDefault();
+              setShow(!show);
+            }}
+          >
+            <Icon icon={`flowbite:eye${show ? "" : "-slash"}-outline`} />
+          </div>
+          <div
+            className="p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            onClick={(e) => {
+              e.preventDefault();
+              onClipboardClick && onClipboardClick(value!);
+            }}
+          >
+            <Icon icon="fluent:clipboard-text-ltr-32-regular" />
+          </div>
+        </div>
+      </div>
+    </label>
+  );
+};

package/src/components/form/other/select.tsx

@@ -0,0 +1,187 @@
+"use client";
+import React, { useState, useEffect, useRef } from "react";
+import { Icon } from "@iconify/react";
+import { createPortal } from "react-dom";
+
+export interface SelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+  menus: {
+    label: string;
+    value: string;
+    [key: string]: any;
+  }[];
+  placeholder?: string;
+}
+
+export const Select: React.FC<SelectProps> = ({
+  options,
+  label,
+  menus,
+  placeholder,
+  ...rest
+}) => {
+  const [tempValue, setTempValue] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const [dropdownWidth, setDropdownWidth] = useState<number>(0);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node) &&
+        !triggerRef.current?.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const dropdownHeight = dropdownRef.current?.offsetHeight || 0;
+      const windowHeight = window.innerHeight;
+
+      setPosition({
+        top: rect.bottom + window.scrollY + 10,
+        left: rect.left + window.scrollX,
+      });
+
+      setDropdownWidth(rect.width);
+
+      if (rect.bottom + dropdownHeight > windowHeight) {
+        setPosition((prev) =>
+          prev
+            ? { ...prev, top: rect.top + window.scrollY - dropdownHeight - 10 }
+            : null
+        );
+      }
+    }
+
+    if (isOpen) {
+      document.getElementById("body")!.style.overflow = "hidden";
+    } else {
+      document.getElementById("body")!.style.overflow = "auto";
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (rest.value) {
+      setTempValue(rest.value as string);
+      return;
+    } else if (rest.defaultValue) {
+      setTempValue(rest.defaultValue as string);
+      return;
+    }
+  }, [rest.value, rest.defaultValue]);
+
+  useEffect(() => {
+    if (tempValue) {
+      rest.onChange &&
+        rest.onChange({
+          target: { value: tempValue } as HTMLSelectElement,
+        } as any);
+    }
+  }, [tempValue]);
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <div className="relative" ref={triggerRef}>
+        <div
+          className="relative flex items-center cursor-pointer"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <input
+            type="text"
+            className={`w-full px-4 border-default border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height}`}
+            placeholder={placeholder}
+            disabled={rest.disabled}
+            value={tempValue}
+            onClick={() => setIsOpen(true)}
+          />
+          <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
+            <Icon icon={`gravity-ui:chevron-${isOpen ? "up" : "down"}`} />
+          </div>
+        </div>
+        {isOpen &&
+          position &&
+          createPortal(
+            <div
+              ref={dropdownRef}
+              className="absolute max-h-40 p-1 z-50 pointer-events-auto bg-secondary-bg shadow border rounded-md overflow-auto"
+              style={{
+                top: position.top,
+                left: position.left,
+                width: dropdownWidth,
+              }}
+            >
+              {menus.length === 0 ? (
+                <div className="flex justify-center">
+                  <span className="px-4 py-1">No data found</span>
+                </div>
+              ) : (
+                menus.map((item, index) => (
+                  <button
+                    key={index}
+                    type="button"
+                    className={`min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left text-default ${
+                      (menus.find((item) => item.value === rest.value)?.label ||
+                        tempValue) === item.label
+                        ? "bg-primary-transparent cursor-default"
+                        : "hover:bg-secondary-light "
+                    }`}
+                    onMouseDown={() => {
+                      setTempValue(item.label);
+                      setIsOpen(false);
+                    }}
+                  >
+                    {item.label}
+                  </button>
+                ))
+              )}
+            </div>,
+            document.body
+          )}
+      </div>
+      <select className="hidden" {...rest}>
+        {menus.map((item, index) => (
+          <option key={index} value={item.value}>
+            {item.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+};

package/src/components/form/other/textarea.tsx

@@ -0,0 +1,44 @@
+"use client";
+import React from "react";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  options?: {
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+  };
+  label?: string;
+}
+
+export const Textarea: React.FC<TextareaProps> = ({
+  options,
+  label,
+  ...rest
+}) => {
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1"
+      : options?.height === "high"
+      ? "py-2"
+      : "py-1.5";
+
+  return (
+    <label className={`grid gap-2 ${width}`}>
+      {label && (
+        <span
+          className={`text-sm select-none ${
+            rest.required && "after:content-['*'] after:ml-1 after:text-danger"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+      <textarea
+        rows={rest.rows || 10}
+        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+        {...rest}
+      />
+    </label>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,29 @@
+// export { Sidebar } from "./main-layout/sidebar";
+// export { Header } from "./main-layout/header";
+// export { Body } from "./main-layout/body";
+// export { Footer } from "./main-layout/footer";
+// export { Chat } from "./chat";
+// export { Logo } from "./other-component/logo";
+// export { Avatar } from "./other-component/avatar";
+// export { Mfa } from "./security/mfa";
+// export { Recaptcha } from "./security/recaptcha";
+export { Tab } from "./content-container/tab";
+export { Dialog } from "./dialog";
+export { Modal } from "./content-container/modal";
+export { Drawer } from "./content-container/drawer";
+export { Carousel } from "./content-container/carousel";
+export { Accordion } from "./content-container/accordion";
+export { Sortable } from "./content-container/sortable";
+export { Card } from "./content-container/card";
+export { Dropdown } from "./dropdown";
+export { Chip } from "./chip";
+export { Form } from "./form";
+export { Button } from "./button";
+export { Table } from "./table";
+export { Chart } from "./chart";
+export { Calendar } from "./calendar/calendar";
+export { BigCalendar } from "./calendar/big-calendar";
+// export { Map } from "./map";
+export { Timeline } from "./timeline";
+export { DataTree } from "./data-tree";
+export { SyntaxHighlighter } from "./syntax-highlighter";

package/src/components/map/index.tsx

@@ -0,0 +1,72 @@
+"use client";
+import React, { useRef } from "react";
+import dynamic from "next/dynamic";
+const MapContainer = dynamic(
+  () => import("react-leaflet").then((mod) => mod.MapContainer),
+  { ssr: false }
+);
+const TileLayer = dynamic(
+  () => import("react-leaflet").then((mod) => mod.TileLayer),
+  { ssr: false }
+);
+import { useMap, useMapEvent } from "react-leaflet";
+import("leaflet-defaulticon-compatibility")
+  .then((module) => {})
+  .catch((error) => {
+    console.error("Failed to import leaflet-defaulticon-compatibility:", error);
+  });
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
+import "leaflet/dist/leaflet.css";
+import { Marker, type MarkerProps } from "./marker";
+
+const ChangeView = ({ center, zoom }: any) => {
+  const map = useMap();
+  map.setView(center, zoom);
+  return null;
+};
+
+const SetViewOnClick = ({ animateRef }: any) => {
+  const map = useMapEvent("click", (e) => {
+    map.setView(e.latlng, map.getZoom(), {
+      animate: animateRef.current || false,
+    });
+  });
+
+  return null;
+};
+
+interface MapProps {
+  children: React.ReactNode;
+  currentPosition: any[];
+}
+
+interface MapComponentProps extends React.FC<MapProps> {
+  Marker: React.FC<MarkerProps>;
+}
+
+export const Map: MapComponentProps = ({ children, currentPosition }) => {
+  const animateRef = useRef(true);
+
+  return (
+    <div className="flex-1 w-full h-full">
+      <MapContainer
+        // center={currentPosition}
+        // zoom={10}
+        scrollWheelZoom={true}
+        zoomControl={false}
+        // attributionControl={false}
+        style={{ width: "100%", height: "100%", zIndex: "10" }}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {children}
+        <ChangeView center={currentPosition} zoom={15} />
+        <SetViewOnClick animateRef={animateRef} />
+      </MapContainer>
+    </div>
+  );
+};
+
+Map.Marker = Marker;

package/src/components/map/marker.tsx

@@ -0,0 +1,40 @@
+"use client";
+import React from "react";
+import dynamic from "next/dynamic";
+const Mk = dynamic(() => import("react-leaflet").then((mod) => mod.Marker), {
+  ssr: false,
+});
+const Tooltip = dynamic(
+  () => import("react-leaflet").then((mod) => mod.Tooltip),
+  { ssr: false }
+);
+const Popup = dynamic(() => import("react-leaflet").then((mod) => mod.Popup), {
+  ssr: false,
+});
+
+export interface MarkerProps {
+  position: any;
+  label: string;
+  desc?: React.ReactNode;
+  onClick: (position: any) => void;
+}
+
+export const Marker: React.FC<MarkerProps> = ({
+  position,
+  label,
+  desc,
+  onClick,
+}) => {
+  return (
+    <Mk
+      position={position}
+      eventHandlers={{
+        click: onClick,
+      }}
+      alt={label}
+    >
+      <Tooltip permanent>{label}</Tooltip>
+      {desc && <Popup autoClose>{desc}</Popup>}
+    </Mk>
+  );
+};

package/src/components/syntax-highlighter/index.tsx

@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import SH from "react-syntax-highlighter";
+import {
+  atomOneLight,
+  atomOneDark,
+} from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { Icon } from "@iconify/react";
+
+interface SyntaxHighlighterProps {
+  theme?: "light" | "dark" | "system";
+  codeString: string;
+  language?: string;
+  onClipboardClick?: (value: string) => void;
+}
+
+export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
+  theme,
+  codeString,
+  language,
+  onClipboardClick,
+}) => {
+  return (
+    <div className="relative w-full border rounded-md overflow-hidden">
+      <SH
+        language={language}
+        style={theme === "light" ? atomOneLight : atomOneDark}
+        showLineNumbers
+        wrapLongLines
+      >
+        {codeString}
+      </SH>
+      <div
+        className="absolute top-4 right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+        onClick={(e) => {
+          e.preventDefault();
+          navigator.clipboard.writeText(codeString);
+          onClipboardClick && onClipboardClick(codeString);
+        }}
+      >
+        <Icon icon="fluent:clipboard-text-ltr-32-regular" />
+      </div>
+    </div>
+  );
+};

package/src/components/table/action.tsx

@@ -0,0 +1,22 @@
+"use client";
+import React from "react";
+
+export interface ActionProps {
+  children: React.ReactNode;
+}
+
+export const Action: React.FC<ActionProps> = ({ children }) => {
+  const childrenList = React.Children.toArray(children);
+
+  return (
+    <div className="flex justify-center items-center gap-4">
+      {childrenList?.map((item, index) => {
+        return (
+          <div key={index}>
+            {item}
+          </div>
+        );
+      })}
+    </div>
+  );
+};