next-helios-fe 1.0.0

package/src/components/table/index.tsx

@@ -0,0 +1,431 @@
+"use client";
+import React, { useState, useEffect, useMemo } from "react";
+import { Icon } from "@iconify/react";
+import { Form, Button, Dropdown } from "../../components";
+import { exportToExcel } from "react-json-to-excel";
+import dayjs from "dayjs";
+import { Action, type ActionProps } from "./action";
+
+interface TableProps {
+  title?: string;
+  header: { title: string; key: string }[];
+  data: any[];
+  options?: {
+    hideToolbar?: boolean;
+    hideNumber?: boolean;
+    checkbox?: boolean;
+    height?: "full" | "fit" | "20" | "40" | "80";
+    maxRow?: 10 | 20 | 50 | 100;
+    border?: boolean;
+  };
+  actions?: (e: any) => React.ReactNode;
+}
+
+interface TableComponentProps extends React.FC<TableProps> {
+  Action: React.FC<ActionProps>;
+}
+
+export const Table: TableComponentProps = ({
+  title,
+  header,
+  data,
+  options,
+  actions,
+}) => {
+  const [search, setSearch] = useState<string>("");
+  const [filter, setFilter] = useState<any[]>([]);
+  const [maxRow, setMaxRow] = useState<number>(options?.maxRow || 10);
+  const [page, setPage] = useState<number>(1);
+  const [selected, setSelected] = useState<number[]>([]);
+  const [sortBy, setSortBy] = useState<string[]>(["", ""]);
+  const [excluded, setExcluded] = useState<string[]>([]);
+
+  const height =
+    options?.height === "fit"
+      ? "h-fit"
+      : options?.height === "20"
+      ? "h-20"
+      : options?.height === "40"
+      ? "h-40"
+      : options?.height === "80"
+      ? "h-80"
+      : "flex-1 h-full";
+
+  useEffect(() => {
+    setFilter(
+      header.map((item) => {
+        return { key: item.key, value: "" };
+      })
+    );
+  }, [header]);
+
+  const filteredData = useMemo(() => {
+    return data
+      ?.filter((item) => {
+        if (search === "") {
+          return item;
+        } else if (
+          header.some((headerItem) => {
+            if (headerItem.title !== header[1].title) {
+              return item[headerItem.key as keyof typeof item]
+                ?.toString()
+                .toLowerCase()
+                .includes(search.toLowerCase());
+            }
+          })
+        ) {
+          return item;
+        }
+      })
+      ?.filter((item) => {
+        return filter.every((filterItem) => {
+          return item[filterItem.key as keyof typeof item]
+            .toString()
+            .toLowerCase()
+            .includes(filterItem.value.toLowerCase());
+        });
+      });
+  }, [data, filter, search]);
+
+  const headerArr = header
+    ?.filter((item) => !excluded.includes(item.key))
+    ?.map((item) => {
+      return (
+        <th
+          key={item.key}
+          className="px-4 py-2 bg-secondary-bg font-medium text-left whitespace-nowrap"
+        >
+          <div className="flex flex-col">
+            <button
+              type="button"
+              className="group/header flex justify-between items-center gap-4 w-full"
+              onClick={() => {
+                setSortBy([
+                  sortBy[0] !== item.key
+                    ? item.key
+                    : sortBy[0] === item.key && sortBy[1] === "asc"
+                    ? item.key
+                    : "",
+                  sortBy[0] !== item.key
+                    ? "asc"
+                    : sortBy[0] === item.key && sortBy[1] === "asc"
+                    ? "desc"
+                    : "",
+                ]);
+              }}
+            >
+              {item.title}
+              <Icon
+                icon={`mi:${
+                  item.key === sortBy[0] && sortBy[1] === "asc"
+                    ? "arrow-up"
+                    : item.key === sortBy[0] && sortBy[1] === "desc"
+                    ? "arrow-down"
+                    : "sort"
+                }`}
+                className={`group-hover/header:visible ${
+                  item.key === sortBy[0] ? "visible" : "invisible"
+                }`}
+              />
+            </button>
+            <input
+              type="search"
+              className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+              value={
+                filter.find((filterItem) => filterItem.key === item.key)?.value
+              }
+              onChange={(e) => {
+                setFilter(
+                  filter.map((filterItem) => {
+                    return filterItem.key === item.key
+                      ? { ...filterItem, value: e.target.value }
+                      : filterItem;
+                  })
+                );
+              }}
+            />
+          </div>
+        </th>
+      );
+    });
+
+  const dataArr = filteredData
+    ?.sort((a, b) => {
+      if (sortBy[1] === "asc") {
+        return a[sortBy[0] as keyof typeof a] > b[sortBy[0] as keyof typeof b]
+          ? 1
+          : -1;
+      } else if (sortBy[1] === "desc") {
+        return a[sortBy[0] as keyof typeof a] < b[sortBy[0] as keyof typeof b]
+          ? 1
+          : -1;
+      } else {
+        return a.id > b.id ? 1 : -1;
+      }
+    })
+    ?.slice((page - 1) * maxRow, page * maxRow)
+    ?.map((item, index) => {
+      return (
+        <tr key={item.id}>
+          {options?.checkbox && (
+            <td className="sticky left-0 w-8 px-4 py-1 border-b bg-secondary-bg">
+              <Form.Checkbox
+                options={{ disableHover: true }}
+                checked={selected.includes(item.id)}
+                onChange={(e) => {
+                  if (selected.includes(item.id)) {
+                    setSelected(selected.filter((prev) => prev !== item.id));
+                  } else {
+                    setSelected([...selected, item.id]);
+                  }
+                }}
+              />
+            </td>
+          )}
+          {!options?.hideNumber && (
+            <td className="sticky left-0 px-4 py-1 border-b bg-secondary-bg text-center">
+              {(page - 1) * maxRow + index + 1}
+            </td>
+          )}
+          {header
+            ?.filter((headerItem) => !excluded.includes(headerItem.key))
+            ?.map((headerItem) => {
+              return (
+                <td
+                  key={headerItem.key}
+                  className="px-4 py-1 border-b bg-secondary-bg whitespace-nowrap"
+                >
+                  {item[headerItem.key as keyof typeof item]}
+                </td>
+              );
+            })}
+          {actions && (
+            <td className="px-4 py-1 border-b bg-secondary-bg text-center">
+              {actions(item)}
+            </td>
+          )}
+        </tr>
+      );
+    });
+
+  return (
+    <div className="flex flex-col gap-6 h-full">
+      {!options?.hideToolbar && (
+        <div className="flex justify-between items-center gap-4 w-full h-fit">
+          <span className="text-lg">{title}</span>
+          <div className="flex items-center gap-4">
+            <Dropdown
+              trigger={
+                <button
+                  type="button"
+                  className="px-2 py-2 rounded-full hover:bg-secondary-light"
+                >
+                  <Icon icon="mage:filter" className="text-xl" />
+                </button>
+              }
+            >
+              {header.map((item) => {
+                return (
+                  <Dropdown.Item
+                    key={item.key}
+                    onClick={() => {
+                      if (excluded.includes(item.key)) {
+                        setExcluded(
+                          excluded.filter((prev) => prev !== item.key)
+                        );
+                      } else {
+                        setExcluded([...excluded, item.key]);
+                      }
+                    }}
+                  >
+                    <Form.Checkbox
+                      options={{ disableHover: true }}
+                      label={item.title}
+                      checked={!excluded.includes(item.key)}
+                    />
+                  </Dropdown.Item>
+                );
+              })}
+            </Dropdown>
+            <Form.Search
+              options={{ width: "fit" }}
+              placeholder="search.."
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+              }}
+            />
+            <Button
+              options={{ variant: "primary", width: "fit" }}
+              onClick={() => {
+                exportToExcel(
+                  data,
+                  `${title}-data_${dayjs().format("YYYY-MM-DD_HH-mm-ss")}`
+                );
+              }}
+            >
+              Export
+            </Button>
+          </div>
+        </div>
+      )}
+      <div
+        className={`overflow-auto ${height} ${
+          options?.border && "border rounded-md"
+        }`}
+      >
+        <table className="w-full text-sm overflow-x-auto">
+          <thead className="sticky top-0 z-10 border-b">
+            <tr>
+              {options?.checkbox && (
+                <th className="sticky left-0 w-8 px-4 py-2 bg-secondary-bg">
+                  <div className="flex flex-col">
+                    <Form.Checkbox
+                      options={{ disableHover: true }}
+                      checked={selected.length === data.length}
+                      onChange={(e) => {
+                        if (selected.length === data.length) {
+                          setSelected([]);
+                        } else {
+                          setSelected(data.map((item) => item.id));
+                        }
+                      }}
+                    />
+                    <div className="invisible w-0 overflow-hidden">
+                      <input
+                        type="search"
+                        className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+                      />
+                    </div>
+                  </div>
+                </th>
+              )}
+              {!options?.hideNumber && (
+                <th className="sticky left-0 w-min px-4 py-2 bg-secondary-bg font-medium text-center whitespace-nowrap">
+                  <div className="flex flex-col">
+                    <span>NO.</span>
+                    <div className="invisible w-0 overflow-hidden">
+                      <input
+                        type="search"
+                        className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+                      />
+                    </div>
+                  </div>
+                </th>
+              )}
+              {headerArr}
+              {actions && (
+                <th className="w-min px-4 py-2 bg-secondary-bg font-medium text-center">
+                  <div className="flex flex-col">
+                    <span>Actions</span>
+                    <div className="invisible w-0 overflow-hidden">
+                      <input
+                        type="search"
+                        className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+                      />
+                    </div>
+                  </div>
+                </th>
+              )}
+            </tr>
+          </thead>
+          <tbody>{dataArr}</tbody>
+        </table>
+      </div>
+      {!options?.hideToolbar && (
+        <div className="flex justify-between items-end gap-2 w-full h-fit">
+          <div className="!text-sm">
+            <Form.Select
+              options={{
+                width: "fit",
+                height: "short",
+              }}
+              label="Data per page:"
+              menus={[
+                { label: "10", value: "10" },
+                { label: "20", value: "20" },
+                { label: "50", value: "50" },
+                { label: "100", value: "100" },
+              ]}
+              value={maxRow.toString()}
+              onChange={(e) => {
+                setMaxRow(Number(e.target.value));
+              }}
+            />
+          </div>
+          <span className="hidden md:block text-sm text-slate-400">{`Showing ${
+            (page - 1) * maxRow + 1
+          } to ${
+            page * maxRow > data.length ? data.length : page * maxRow
+          } of ${data.length} entries`}</span>
+          <div className="flex items-center gap-2 text-xs font-light">
+            <button
+              type="button"
+              className="flex justify-center items-center border rounded-md min-w-9 h-9 bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
+              disabled={page === 1}
+              onClick={() => {
+                setPage(1);
+              }}
+            >
+              <Icon icon="gravity-ui:chevrons-left" />
+            </button>
+            <button
+              type="button"
+              className="hidden md:flex justify-center items-center border rounded-md min-w-9 h-9 bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
+              disabled={page === 1}
+              onClick={() => {
+                setPage((prev) => prev - 1);
+              }}
+            >
+              <Icon icon="gravity-ui:chevron-left" />
+            </button>
+            <div className="flex gap-2 max-w-20 overflow-auto [&::-webkit-scrollbar]:hidden">
+              {Array.from({ length: Math.ceil(data.length / maxRow) }).map(
+                (_, index) => {
+                  return (
+                    <button
+                      key={index}
+                      type="button"
+                      className={`flex justify-center items-center border rounded-md min-w-9 h-9 ${
+                        page === index + 1
+                          ? "bg-primary-light text-primary"
+                          : "bg-secondary-bg hover:bg-secondary-light"
+                      }`}
+                      onClick={() => {
+                        setPage(index + 1);
+                      }}
+                    >
+                      {index + 1}
+                    </button>
+                  );
+                }
+              )}
+            </div>
+            <button
+              type="button"
+              className="hidden md:flex justify-center items-center border rounded-md min-w-9 h-9 bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
+              disabled={data.length <= page * maxRow}
+              onClick={() => {
+                setPage((prev) => prev + 1);
+              }}
+            >
+              <Icon icon="gravity-ui:chevron-right" />
+            </button>
+            <button
+              type="button"
+              className="flex justify-center items-center border rounded-md min-w-9 h-9 bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
+              disabled={data.length <= page * maxRow}
+              onClick={() => {
+                setPage(Math.ceil(data.length / maxRow));
+              }}
+            >
+              <Icon icon="gravity-ui:chevrons-right" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Table.Action = Action;

package/src/components/timeline/index.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React from "react";
+import { Item, type ItemProps } from "./item";
+
+interface TimelineProps {
+  children?: React.ReactNode;
+}
+
+interface TimelineComponent extends React.FC<TimelineProps> {
+  Item: React.FC<ItemProps>;
+}
+
+export const Timeline: TimelineComponent = ({ children }) => {
+  const childrenList = React.Children.toArray(children);
+  const itemList = childrenList.filter((child) => {
+    return (child as React.ReactElement).type === Timeline.Item;
+  });
+
+  return (
+    <div className="space-y-8 relative before:absolute before:inset-0 before:ml-4 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-primary before:to-transparent">
+      {itemList.map((item) => {
+        return item;
+      })}
+    </div>
+  );
+};
+
+Timeline.Item = Item;

package/src/components/timeline/item.tsx

@@ -0,0 +1,25 @@
+"use client";
+import React from "react";
+
+export interface ItemProps {
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+}
+
+export const Item: React.FC<ItemProps> = ({ children, icon, isActive }) => {
+  return (
+    <div
+      className={`relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group ${
+        isActive && "is-active"
+      }`}
+    >
+      <div className="flex items-center justify-center w-8 h-8 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-primary group-[.is-active]:text-white shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+        {icon}
+      </div>
+      <div className="w-[calc(100%-4rem)] md:w-[calc(50%-2rem)]">
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/index.css

@@ -0,0 +1 @@
+@import "./styles/index.css";

package/src/index.ts

@@ -0,0 +1,3 @@
+import "./index.css";
+
+export * from "./components";