next-helios-fe 1.0.2 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "next-helios-fe",
-  "version": "1.0.2",
-  "description": "fix export data bug in table component",
+  "version": "1.1.0",
+  "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -37,23 +37,25 @@
   },
   "peerDependencies": {
     "@iconify/react": "^5.0.1",
+    "dayjs": "^1.11.11",
     "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"
+    "typescript": "^5"
   },
   "devDependencies": {
     "@iconify/react": "^5.0.1",
     "@types/leaflet": "^1.9.12",
+    "@types/qrcode": "^1.5.5",
     "@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",
+    "dayjs": "^1.11.11",
     "flowbite-react": "^0.10.1",
     "next": "^14.2.4",
     "postcss": "^8",
@@ -66,7 +68,6 @@
     "ts-loader": "^9.5.1",
     "typescript": "^5",
     "webpack": "^5.93.0",
-    "webpack-cli": "^5.1.4",
-    "dayjs": "^1.11.11"
+    "webpack-cli": "^5.1.4"
   }
 }

package/src/components/index.ts

@@ -27,3 +27,4 @@ export { BigCalendar } from "./calendar/big-calendar";
 export { Timeline } from "./timeline";
 export { DataTree } from "./data-tree";
 export { SyntaxHighlighter } from "./syntax-highlighter";
+export { QR } from "./qr";

package/src/components/qr/index.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import QRCode from "qrcode";
+
+interface QRProps {
+  value: string;
+}
+
+export const QR: React.FC<QRProps> = ({ value }) => {
+  const [qr, setQr] = useState<string>("");
+  const options = {
+    scale: 10,
+    quality: 0.1,
+    margin: 1,
+  };
+
+  useEffect(() => {
+    QRCode.toDataURL(value || "", options, (err: any, data: any) => {
+      if (err) {
+        console.log(err);
+      }
+      setQr(data);
+    });
+  }, [value]);
+
+  return <Image src={qr} alt="QR Code" width={200} height={200} />;
+};

package/src/components/table/index.tsx

@@ -8,6 +8,7 @@ import { Action, type ActionProps } from "./action";
 
 interface TableProps {
   title?: string;
+
   header: {
     title: string;
     key: string;
@@ -16,13 +17,14 @@ interface TableProps {
   data: any[];
   options?: {
     hideToolbar?: boolean;
-    hideNumber?: boolean;
+    hideNumberColumn?: boolean;
     checkbox?: boolean;
     height?: "full" | "fit" | "20" | "40" | "80";
     maxRow?: 10 | 20 | 50 | 100;
     border?: boolean;
   };
   actions?: (e: any) => React.ReactNode;
+  onAddData?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 interface TableComponentProps extends React.FC<TableProps> {
@@ -35,6 +37,7 @@ export const Table: TableComponentProps = ({
   data,
   options,
   actions,
+  onAddData,
 }) => {
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
@@ -70,12 +73,10 @@ export const Table: TableComponentProps = ({
           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[headerItem.key as keyof typeof item]
+              ?.toString()
+              .toLowerCase()
+              .includes(search.toLowerCase());
           })
         ) {
           return item;
@@ -132,22 +133,30 @@ export const Table: TableComponentProps = ({
                 }`}
               />
             </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 className="relative flex items-center">
+              <input
+                type="search"
+                className="w-full ps-6 pe-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"
+                placeholder="search.."
+                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;
+                    })
+                  );
+                }}
+              />
+              <Icon
+                icon="ic:round-search"
+                className="absolute text-sm text-slate-400"
+              />
+            </div>
           </div>
         </th>
       );
@@ -186,7 +195,7 @@ export const Table: TableComponentProps = ({
               />
             </td>
           )}
-          {!options?.hideNumber && (
+          {!options?.hideNumberColumn && (
             <td className="sticky left-0 px-4 py-1 border-b bg-secondary-bg text-center">
               {(page - 1) * maxRow + index + 1}
             </td>
@@ -229,6 +238,17 @@ export const Table: TableComponentProps = ({
         <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">
+            {onAddData && (
+              <button
+                type="button"
+                className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
+                onClick={(e) => {
+                  onAddData && onAddData(e);
+                }}
+              >
+                <Icon icon="ic:round-plus" className="text-2xl" />
+              </button>
+            )}
             <Dropdown
               trigger={
                 <button
@@ -315,8 +335,8 @@ export const Table: TableComponentProps = ({
                   </div>
                 </th>
               )}
-              {!options?.hideNumber && (
-                <th className="sticky left-0 w-min px-4 py-2 bg-secondary-bg font-medium text-center whitespace-nowrap">
+              {!options?.hideNumberColumn && (
+                <th className="sticky left-0 w-min px-4 py-2 z-10 bg-secondary-bg font-medium text-center whitespace-nowrap">
                   <div className="flex flex-col">
                     <span>NO.</span>
                     <div className="invisible w-0 overflow-hidden">