next-helios-fe 1.0.0

package/dist/index.js.LICENSE.txt

@@ -0,0 +1,62 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * ApexCharts v3.51.0
+ * (c) 2018-2024 ApexCharts
+ * Released under the MIT License.
+ */
+
+/*!
+* tabbable 6.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/*! sheetjs (C) 2013-present SheetJS -- http://sheetjs.com */
+
+/*! svg.draggable.js - v2.2.2 - 2019-01-08
+* https://github.com/svgdotjs/svg.draggable.js
+* Copyright (c) 2019 Wout Fierens; Licensed MIT */
+
+/*! svg.filter.js - v2.0.2 - 2016-02-24
+* https://github.com/wout/svg.filter.js
+* Copyright (c) 2016 Wout Fierens; Licensed MIT */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "next-helios-fe",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:css": "npx postcss src/index.css -o dist/index.css",
+    "build:ts": "tsc",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "apexcharts": "^3.51.0",
+    "array-move": "^4.0.0",
+    "autoprefixer": "^10.4.19",
+    "file-saver": "^2.0.5",
+    "leaflet": "^1.9.4",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
+    "otplib": "^12.0.1",
+    "qrcode": "^1.5.3",
+    "react-apexcharts": "^1.4.1",
+    "react-big-calendar": "^1.13.1",
+    "react-calendar": "^5.0.0",
+    "react-easy-sort": "^1.6.0",
+    "react-google-recaptcha": "^3.1.0",
+    "react-google-recaptcha-v3": "^1.10.1",
+    "react-json-to-excel": "^1.0.8",
+    "react-leaflet": "^4.2.1",
+    "react-pin-field": "^3.1.5",
+    "react-syntax-highlighter": "^15.5.0",
+    "sass": "^1.77.8",
+    "xlsx": "^0.18.5"
+  },
+  "peerDependencies": {
+    "@iconify/react": "^5.0.1",
+    "flowbite-react": "^0.10.1",
+    "next": "14.2.4",
+    "postcss": "^8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5",
+    "dayjs": "^1.11.11"
+  },
+  "devDependencies": {
+    "@iconify/react": "^5.0.1",
+    "@types/leaflet": "^1.9.12",
+    "@types/react": "^18",
+    "@types/react-big-calendar": "^1.8.9",
+    "@types/react-dom": "^18",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "css-loader": "^7.1.2",
+    "flowbite-react": "^0.10.1",
+    "next": "^14.2.4",
+    "postcss": "^8",
+    "postcss-cli": "^11.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass-loader": "^16.0.0",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.1",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "dayjs": "^1.11.11"
+  }
+}

package/src/components/button/index.tsx

@@ -0,0 +1,74 @@
+"use client";
+import React from "react";
+import { Icon } from "@iconify/react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  options?: {
+    variant?:
+      | "basic"
+      | "primary"
+      | "secondary"
+      | "success"
+      | "warning"
+      | "danger";
+    width?: "full" | "fit";
+    height?: "short" | "medium" | "high";
+    position?: "left" | "center" | "right";
+    border?: boolean;
+  };
+  loading?: boolean;
+  active?: boolean;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  className,
+  options,
+  loading,
+  active,
+  ...rest
+}) => {
+  const variant =
+    options?.variant === "primary"
+      ? "text-white bg-primary shadow-sm shadow-primary hover:bg-primary-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
+      : options?.variant === "secondary"
+      ? "text-white bg-secondary shadow-sm shadow-secondary hover:bg-secondary-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
+      : options?.variant === "success"
+      ? "text-white bg-success shadow-sm shadow-success hover:bg-success-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
+      : options?.variant === "warning"
+      ? "text-white bg-warning shadow-sm shadow-warning hover:bg-warning-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
+      : options?.variant === "danger"
+      ? "text-white bg-danger shadow-sm shadow-danger hover:bg-danger-dark disabled:bg-secondary-dark disabled:shadow-secondary-dark"
+      : "text-default hover:bg-secondary-light disabled:bg-primary disabled:text-white disabled:shadow-sm disabled:shadow-primary";
+  const width = options?.width === "fit" ? "w-fit" : "w-full";
+  const height =
+    options?.height === "short"
+      ? "py-1 gap-2"
+      : options?.height === "high"
+      ? "py-2 gap-4"
+      : "py-1.5 gap-2";
+  const position =
+    options?.position === "center"
+      ? "justify-center"
+      : options?.position === "right"
+      ? "justify-end"
+      : "justify-start";
+  const border = options?.border ? "border" : "";
+  const isActive = active
+    ? "bg-secondary-light shadow-sm shadow-secondary-light"
+    : "";
+
+  return (
+    <button
+      className={`group/button flex ${position} items-center ${width} px-3 ${height} rounded-md text-left ${variant} ${border} ${isActive} select-none disabled:pointer-events-none active:opacity-70 active:duration-300 active:ease-out ${className}`}
+      {...rest}
+    >
+      {loading ? (
+        <Icon icon="mingcute:loading-fill" className="text-2xl animate-spin" />
+      ) : (
+        children
+      )}
+    </button>
+  );
+};

package/src/components/calendar/big-calendar/event.tsx

@@ -0,0 +1,46 @@
+"use client";
+import React from "react";
+import { Form } from "../../../components";
+
+export interface EventProps {
+  eventList: any[];
+  hiddenEvent: any[];
+  setHiddenEvent: (event: any) => void;
+}
+
+export const Event: React.FC<EventProps> = ({
+  eventList,
+  hiddenEvent,
+  setHiddenEvent,
+}) => {
+  const eventArr = eventList?.map((item) => {
+    return (
+      <Form.Checkbox
+        key={item.id}
+        label={item.title}
+        theme={item.color}
+        checked={!hiddenEvent.includes(item.id)}
+        onChange={(e) => {
+          if (e.target.value && hiddenEvent.includes(item.id)) {
+            setHiddenEvent((prev: any) =>
+              prev.filter((id: any) => id !== item.id)
+            );
+          } else {
+            setHiddenEvent((prev: any) => [...prev, item.id]);
+          }
+        }}
+      />
+    );
+  });
+
+  return (
+    eventList.length !== 0 && (
+      <div className="flex-1 flex flex-col gap-4 h-full px-6 py-6 overflow-hidden">
+        <span className="text-lg">Event Filter</span>
+        <div className="flex flex-col gap-2 h-full overflow-auto">
+          {eventArr}
+        </div>
+      </div>
+    )
+  );
+};

package/src/components/calendar/big-calendar/index.tsx

@@ -0,0 +1,102 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Toolbar } from "./toolbar";
+import { Event, type EventProps } from "./event";
+import { Calendar as Bc, dayjsLocalizer } from "react-big-calendar";
+import dayjs from "dayjs";
+import "../../../styles";
+
+const localizer = dayjsLocalizer(dayjs);
+
+interface BigCalendarProps {
+  eventList: any[];
+  setEventList: (event: any) => void;
+  hiddenEvent: any[];
+  onSelectEvent?: (event: any) => void;
+}
+
+interface BigCalendarComponent extends React.FC<BigCalendarProps> {
+  Event: React.FC<EventProps>;
+}
+
+export const BigCalendar: BigCalendarComponent = ({
+  eventList,
+  setEventList,
+  hiddenEvent,
+  onSelectEvent,
+}) => {
+  const [active, setActive] = useState<string>("month");
+
+  const colorList = [
+    { id: 1, label: "Blue", value: "#2196f3" },
+    { id: 2, label: "Purple", value: "#673ab7" },
+    { id: 3, label: "Green", value: "#4caf50" },
+    { id: 4, label: "Red", value: "#f44336" },
+    { id: 5, label: "Orange", value: "#ff9800" },
+    { id: 6, label: "Pink", value: "#e91e63" },
+    { id: 7, label: "Yellow", value: "#ffc338" },
+    { id: 8, label: "Brown", value: "#795548" },
+    { id: 9, label: "Grey", value: "#9e9e9e" },
+  ];
+
+  useEffect(() => {
+    const tempEvent = eventList;
+
+    setEventList(
+      tempEvent?.map((item) => {
+        return {
+          ...item,
+          color: colorList[Math.floor(Math.random() * colorList.length)].value,
+        };
+      })
+    );
+  }, []);
+
+  const eventPropGetter = (item: any) => {
+    var custStyle = {
+      backgroundColor: item.color,
+      opacity: 0.8,
+      color: "white",
+    };
+    return {
+      style: custStyle,
+    };
+  };
+
+  return (
+    <div className="flex-1 overflow-hidden">
+      <Bc
+        localizer={localizer}
+        events={eventList.filter((item) => {
+          return !hiddenEvent.includes(item.id);
+        })}
+        startAccessor="start"
+        endAccessor="end"
+        components={{
+          toolbar: (toolbar: any) => {
+            return (
+              <Toolbar
+                toolbar={toolbar}
+                active={active}
+                setActive={setActive}
+              />
+            );
+          },
+        }}
+        onView={(view) => {
+          setActive(view);
+        }}
+        // onRangeChange={(range) => console.log(range)}
+        popup
+        tooltipAccessor={(event) => event.desc}
+        eventPropGetter={eventPropGetter}
+        // selected={selected}
+        onSelectEvent={(event) => {
+          onSelectEvent && onSelectEvent(event);
+        }}
+      />
+    </div>
+  );
+};
+
+BigCalendar.Event = Event;

package/src/components/calendar/big-calendar/toolbar.tsx

@@ -0,0 +1,98 @@
+"use client";
+import React from "react";
+import { Icon } from "@iconify/react";
+import dayjs from "dayjs";
+
+interface ToolbarProps {
+  toolbar: any;
+  active: string;
+  setActive: (active: string) => void;
+}
+
+export const Toolbar: React.FC<ToolbarProps> = ({
+  toolbar,
+  active,
+  setActive,
+}) => {
+  return (
+    <div className="flex justify-between items-center gap-6 p-6 bg-secondary-bg border-b overflow-auto [&::-webkit-scrollbar]:hidden">
+      <div className="flex items-center gap-4">
+        <div className="flex gap-2">
+          <button
+            type="button"
+            className="p-2 rounded-full hover:bg-secondary-light"
+            onClick={() => {
+              toolbar.onNavigate("PREV");
+            }}
+          >
+            <Icon icon="gravity-ui:chevron-left" className="text-lg" />
+          </button>
+          <button
+            type="button"
+            className="p-2 rounded-full hover:bg-secondary-light"
+            onClick={() => {
+              toolbar.onNavigate("NEXT");
+            }}
+          >
+            <Icon icon="gravity-ui:chevron-right" className="text-lg" />
+          </button>
+        </div>
+        <span className="text-2xl whitespace-nowrap">
+          {`${dayjs(toolbar.date).format("MMMM")} ${dayjs(toolbar.date).format(
+            "YYYY"
+          )}`}
+        </span>
+      </div>
+      <div className="flex">
+        <button
+          type="button"
+          className={`px-4 py-1.5 rounded-l-md text-primary hover:bg-primary-light ${
+            active === "month" ? "bg-primary-light" : "bg-primary-transparent"
+          }`}
+          onClick={() => {
+            toolbar.onView("month");
+            setActive("month");
+          }}
+        >
+          Month
+        </button>
+        <button
+          type="button"
+          className={`px-4 py-1.5 border-x border-primary/30 text-primary hover:bg-primary-light ${
+            active === "week" ? "bg-primary-light" : "bg-primary-transparent"
+          }`}
+          onClick={() => {
+            toolbar.onView("week");
+            setActive("week");
+          }}
+        >
+          Week
+        </button>
+        <button
+          type="button"
+          className={`px-4 py-1.5 border-r border-primary/30 text-primary hover:bg-primary-light ${
+            active === "day" ? "bg-primary-light" : "bg-primary-transparent"
+          }`}
+          onClick={() => {
+            toolbar.onView("day");
+            setActive("day");
+          }}
+        >
+          Day
+        </button>
+        <button
+          type="button"
+          className={`px-3 py-1.5 rounded-r-md text-primary hover:bg-primary-light ${
+            active === "agenda" ? "bg-primary-light" : "bg-primary-transparent"
+          }`}
+          onClick={() => {
+            toolbar.onView("agenda");
+            setActive("agenda");
+          }}
+        >
+          List
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/calendar/calendar/index.tsx

@@ -0,0 +1,26 @@
+"use client";
+import React from "react";
+import Cl from "react-calendar";
+import "../../../styles";
+
+interface CalendarProps {
+  options?: {
+    enableSelectRange?: boolean;
+  };
+  value?: any;
+  onChange?: (date: any) => void;
+}
+
+export const Calendar: React.FC<CalendarProps> = ({
+  options,
+  value,
+  onChange,
+}) => {
+  return (
+    <Cl
+      selectRange={options?.enableSelectRange || false}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};

package/src/components/chart/index.tsx

@@ -0,0 +1,121 @@
+"use client";
+import React from "react";
+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";
+  id?: string;
+  title?: string;
+  subTitle?: string;
+  series: any;
+  labels?: string[];
+  xaxis?: {
+    categories: string[];
+  };
+  height?: number;
+  sparkline?: boolean;
+}
+
+export const Chart: React.FC<ChartProps> = ({
+  type,
+  theme,
+  id,
+  title,
+  subTitle,
+  series,
+  labels,
+  xaxis,
+  height,
+  sparkline,
+}) => {
+  const areaOptions = type === "area" && {
+    fill: {
+      type: "gradient",
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.7,
+      },
+    },
+  };
+
+  return (
+    <Ch
+      type={type}
+      id={id}
+      series={series}
+      height={height}
+      options={{
+        title: {
+          text: title,
+          align: "left",
+        },
+        subtitle: {
+          text: subTitle,
+          align: "left",
+        },
+        xaxis: {
+          categories: xaxis?.categories ?? [],
+          labels: {
+            maxHeight: 40,
+          },
+        },
+        labels: labels ?? [],
+        colors: [
+          "#2196f3",
+          "#673ab7",
+          "#4caf50",
+          "#f44336",
+          "#ff9800",
+          "#e91e63",
+          "#ffc338",
+          "#795548",
+          "#9e9e9e",
+        ],
+        chart: {
+          toolbar: {
+            show: false,
+          },
+          zoom: {
+            enabled: false,
+          },
+          sparkline: {
+            enabled: sparkline ?? true,
+          },
+          events: {
+            mounted: (chart) => {
+              chart.windowResizeHandler();
+            },
+          },
+          foreColor: theme === "light" ? "#475569" : "#ffffff",
+        },
+        dataLabels: {
+          enabled: false,
+        },
+        stroke: {
+          curve: "smooth",
+          width: 2,
+        },
+        plotOptions: {
+          bar: {
+            borderRadius: 4,
+            columnWidth: "30%",
+          },
+          pie: {
+            donut: {
+              size: "70%",
+            },
+          },
+        },
+        tooltip: {
+          theme: theme === "light" ? "light" : "dark",
+        },
+        grid: {
+          borderColor: theme === "light" ? "#e5e6e8" : "#545869",
+        },
+        ...areaOptions,
+      }}
+    />
+  );
+};

package/src/components/chip/index.tsx

@@ -0,0 +1,47 @@
+"use client";
+import React from "react";
+import { Icon } from "@iconify/react";
+
+interface ChipProps {
+  label: string;
+  icon?: string;
+  options?: {
+    variant?: "primary" | "secondary" | "success" | "warning" | "danger";
+    bordered?: boolean;
+    borderRadius?: "basic" | "full";
+  };
+}
+
+export const Chip: React.FC<ChipProps> = ({ label, icon, options }) => {
+  const variant =
+    options?.bordered !== true
+      ? options?.variant === "secondary"
+        ? "bg-secondary-transparent text-secondary"
+        : options?.variant === "success"
+        ? "bg-success-transparent text-success"
+        : options?.variant === "warning"
+        ? "bg-warning-transparent text-warning"
+        : options?.variant === "danger"
+        ? "bg-danger-transparent text-danger"
+        : "bg-primary-transparent text-primary"
+      : options?.variant === "secondary"
+      ? "border border-secondary text-secondary"
+      : options?.variant === "success"
+      ? "border border-success text-success"
+      : options?.variant === "warning"
+      ? "border border-warning text-warning"
+      : options?.variant === "danger"
+      ? "border border-danger text-danger"
+      : "border border-primary text-primary";
+  const borderRadius =
+    options?.borderRadius === "full" ? "rounded-full" : "rounded-md";
+
+  return (
+    <div
+      className={`flex items-center gap-1.5 w-fit px-3 py-1 font-medium select-none ${variant} ${borderRadius}`}
+    >
+      {icon && <Icon icon={icon} className="text-lg" />}
+      <span className="text-sm">{label}</span>
+    </div>
+  );
+};

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

@@ -0,0 +1,28 @@
+"use client";
+import React from "react";
+import { Item, type ItemProps } from "./item";
+
+interface AccordionProps {
+  children: React.ReactNode;
+}
+
+interface AccordionComponent extends React.FC<AccordionProps> {
+  Item: React.FC<ItemProps>;
+}
+
+export const Accordion: AccordionComponent = ({ children }) => {
+  const childrenList = React.Children.toArray(children);
+  const itemList = childrenList.filter((child) => {
+    return (child as React.ReactElement).type === Accordion.Item;
+  });
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      {itemList.map((item) => {
+        return item;
+      })}
+    </div>
+  );
+};
+
+Accordion.Item = Item;