@sikka/hawa 0.0.266 → 0.0.268

package/src/elements/HawaTable.tsx

@@ -10,12 +10,22 @@ import { BsChevronRight, BsFilter, BsPlus, BsThreeDots } from "react-icons/bs"
 // TODO: translate header tools and make it more customizable
 // TODO: pass the onSearch handler to the parent
 
+type RowTypes = {
+  hidden: boolean
+  value: any
+  suffix?: any
+}
+type ColTypes = {
+  hidden: boolean
+  value: any
+  sortable?: boolean
+}
 type TableTypes = {
   pagination?: boolean
-  columns: any[string]
+  columns: ColTypes[]
   actions?: ActionItems[][]
   direction?: "rtl" | "ltr"
-  rows?: any[any]
+  rows?: RowTypes[][]
   handleActionClick?: any
   end?: any
   size?: "normal" | "small"
@@ -57,8 +67,56 @@ export const HawaTable: FC<TableTypes> = ({
   const [perPage, setPerPage] = useState(10)
   const [enteredPage, setEnteredPage] = useState(null)
   const [page, setPage] = useState(1)
+  const [sortingCol, setSortingCol] = useState(null)
+
+  const [sortedRows, setSortedRows] = useState(props.rows)
+  const [sortColumn, setSortColumn] = useState(null)
+  const [sortDirection, setSortDirection] = useState(null)
+
+  const handleSort = (colIndex, sortable) => {
+    if (sortable) {
+      setSortColumn(colIndex)
+      setSortDirection((prevDirection) =>
+        prevDirection === "asc" ? "desc" : "asc"
+      )
+    }
+    // const newDirection =
+    //   sortColumn === colIndex && sortDirection === "asc" ? "desc" : "asc"
+
+    // const sortedData = [...sortedRows].sort((a, b) => {
+    //   const aValue = a[colIndex].value
+    //   const bValue = b[colIndex].value
+
+    //   // You can enhance the sorting logic based on the data type
+    //   if (newDirection === "asc") {
+    //     return aValue.localeCompare(bValue)
+    //   } else {
+    //     return bValue.localeCompare(aValue)
+    //   }
+    // })
+
+    // setSortedRows(sortedData)
+    // setSortColumn(colIndex)
+    // setSortDirection(newDirection)
+  }
+
+  // const { slice, range } = useTable(props.rows, page, perPage)
+  // Use the custom hook to get paginated and sorted data
+  const { slice, range } = useTable(
+    props.rows,
+    page,
+    perPage,
+    sortColumn,
+    sortDirection
+  )
+  let isRTL = direction === "rtl"
+
+  let sizeStyles = {
+    normal: "py-3 px-6",
+    small: "px-3 py-1",
+  }
+  // let sortedRows = props.rows
 
-  const { slice, range } = useTable(props.rows, page, perPage)
   const changePage = () => {
     if (slice?.length < 1 && page !== 1) {
       setPage(page - 1)
@@ -70,14 +128,6 @@ export const HawaTable: FC<TableTypes> = ({
   useEffect(() => {
     changePage()
   }, [slice, page])
-
-  let isRTL = direction === "rtl"
-
-  let sizeStyles = {
-    normal: "py-3 px-6",
-    small: "px-3 py-1",
-  }
-
   return (
     <div className="relative flex flex-col gap-2 ">
       <div className={`overflow-x-auto rounded  bg-${headerColor}`}>
@@ -124,10 +174,14 @@ export const HawaTable: FC<TableTypes> = ({
                 } else {
                   return (
                     <th
+                      onClick={() =>
+                        col.sortable && handleSort(i, col.sortable)
+                      }
                       key={i}
                       scope="col"
                       colSpan={2}
                       className={clsx(
+                        col.sortable ? "cursor-pointer hover:bg-gray-300" : "",
                         sizeStyles[size],
                         i !== 0 &&
                           (borders === "cols" ||
@@ -137,7 +191,11 @@ export const HawaTable: FC<TableTypes> = ({
                           : ""
                       )}
                     >
+                      {/* TODO: add arrow icon for sorting */}
                       {col.value}
+                      {sortColumn === i && (
+                        <span>{sortDirection === "asc" ? " ▲" : " ▼"}</span>
+                      )}
                     </th>
                   )
                 }
@@ -158,7 +216,7 @@ export const HawaTable: FC<TableTypes> = ({
             }
           >
             {/* Table Rows */}
-            {props.rows ? (
+            {sortedRows ? (
               slice?.map((singleRow: any, rowIndex: any) => {
                 let lastRow = rowIndex == slice?.length - 1
                 return (
@@ -224,7 +282,7 @@ export const HawaTable: FC<TableTypes> = ({
                               // bodyColor ? `bg-${bodyColor}` : "bg-white"
                             )}
                           >
-                            {r.value}
+                            {r.value} {r.suffix && r.suffix}
                           </td>
                         )
                       }

package/src/hooks/useTable.ts

@@ -1,3 +1,4 @@
+// useTable.js
 import React, { useState, useEffect } from "react"
 
 const calculateRange = (data, rowsPerPage) => {
@@ -14,7 +15,33 @@ const sliceData = (data, page, rowsPerPage) => {
   return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
 }
 
-const useTable = (data, page, rowsPerPage) => {
+// useTable.js
+const sortData = (data, sortColumn, sortDirection) => {
+  if (sortColumn !== null) {
+    return data?.sort((a, b) => {
+      const aValue = a[sortColumn].value
+      const bValue = b[sortColumn].value
+
+      // Handle non-string values by using simple comparison
+      if (typeof aValue === "string" && typeof bValue === "string") {
+        if (sortDirection === "asc") {
+          return aValue.localeCompare(bValue)
+        } else {
+          return bValue.localeCompare(aValue)
+        }
+      } else {
+        if (sortDirection === "asc") {
+          return aValue - bValue
+        } else {
+          return bValue - aValue
+        }
+      }
+    })
+  }
+  return data
+}
+
+const useTable = (data, page, rowsPerPage, sortColumn, sortDirection) => {
   const [tableRange, setTableRange] = useState([])
   const [slice, setSlice] = useState([])
 
@@ -23,12 +50,110 @@ const useTable = (data, page, rowsPerPage) => {
       const range = calculateRange(data, rowsPerPage)
       setTableRange([...range])
 
-      const slice = sliceData(data, page, rowsPerPage)
-      setSlice([...slice])
+      const sortedData = sortData(data, sortColumn, sortDirection)
+      const slicedData = sliceData(sortedData, page, rowsPerPage)
+      setSlice([...slicedData])
     }
-  }, [data, setTableRange, page, setSlice, rowsPerPage])
+  }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection])
 
   return { slice, range: tableRange }
 }
 
 export default useTable
+
+// import React, { useState, useEffect } from "react"
+
+// const calculateRange = (data, rowsPerPage) => {
+//   const range = []
+//   const num = Math.ceil(data?.length / rowsPerPage)
+//   let i = 1
+//   for (let i = 1; i <= num; i++) {
+//     range.push(i)
+//   }
+//   return range
+// }
+
+// const sliceData = (data, page, rowsPerPage) => {
+//   return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+// }
+
+// const sortData = (data, sortColumn, sortDirection) => {
+//   if (sortColumn !== null) {
+//     return data?.sort((a, b) => {
+//       const aValue = a[sortColumn].value
+//       const bValue = b[sortColumn].value
+
+//       if (sortDirection === "asc") {
+//         return aValue.localeCompare(bValue)
+//       } else {
+//         return bValue.localeCompare(aValue)
+//       }
+//     })
+//   }
+//   return data
+// }
+
+// const useTable = (data, page, rowsPerPage, sortColumn, sortDirection) => {
+//   const [tableRange, setTableRange] = useState([])
+//   const [slice, setSlice] = useState([])
+
+//   useEffect(() => {
+//     if (data) {
+//       const range = calculateRange(data, rowsPerPage)
+//       setTableRange([...range])
+
+//       const sortedData = sortData(data, sortColumn, sortDirection)
+//       const slicedData = sliceData(sortedData, page, rowsPerPage)
+//       setSlice([...slicedData])
+//     }
+//   }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection])
+
+//   return { slice, range: tableRange }
+// }
+
+// export default useTable
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+// import React, { useState, useEffect } from "react"
+
+// const calculateRange = (data, rowsPerPage) => {
+//   const range = []
+//   const num = Math.ceil(data?.length / rowsPerPage)
+//   let i = 1
+//   for (let i = 1; i <= num; i++) {
+//     range.push(i)
+//   }
+//   return range
+// }
+
+// const sliceData = (data, page, rowsPerPage) => {
+//   return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+// }
+
+// const useTable = (data, page, rowsPerPage) => {
+//   const [tableRange, setTableRange] = useState([])
+//   const [slice, setSlice] = useState([])
+
+//   useEffect(() => {
+//     if (data) {
+//       const range = calculateRange(data, rowsPerPage)
+//       setTableRange([...range])
+
+//       const slice = sliceData(data, page, rowsPerPage)
+//       setSlice([...slice])
+//     }
+//   }, [data, setTableRange, page, setSlice, rowsPerPage])
+
+//   return { slice, range: tableRange }
+// }
+
+// export default useTable

package/src/layout/Banner.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, FC, useRef, useState } from "react"
+import clsx from "clsx"
+import { HawaButton } from "../elements"
+
+type BannerTypes = {
+  showBanner?: boolean
+  direction?: "rtl" | "ltr"
+  logoURL?: string
+  title?: string
+  text?: string
+  actionText?: string
+  onActionClick?: () => void
+  position?: "top" | "bottom"
+  design: "default" | "floating"
+}
+
+export const HawaBanner: FC<BannerTypes> = ({
+  design = "floating",
+  ...props
+}) => {
+  const bannerRef = useRef(null)
+  const [closed, setClosed] = useState(false)
+  let bannerStyle = {
+    floating:
+      "left-1/2  z-50  w-[calc(100%-2rem)] -translate-x-1/2 lg:max-w-7xl p-4 rounded",
+    default: "w-[calc(100%)] left-0 z-50 right-0 rounded-none p-2",
+  }
+  return (
+    <div ref={bannerRef}>
+      <div
+        dir={props.direction}
+        className={clsx(
+          bannerStyle[design],
+          "fixed flex  flex-col justify-between  border  border-gray-100 bg-white  shadow-sm transition-all dark:border-gray-600 dark:bg-gray-700 md:flex-row md:gap-4 ",
+          props.position === "top"
+            ? design === "floating"
+              ? "top-6"
+              : "top-0"
+            : design === "floating"
+            ? "bottom-6"
+            : "bottom-0",
+          closed ? "opacity-0" : "opacity-100"
+        )}
+      >
+        <div className="mb-3 flex w-full flex-col items-center  justify-start   md:mb-0 md:flex-row md:items-center">
+          <div
+            className={clsx(
+              props.direction === "rtl"
+                ? "md:ml-4 md:border-l  md:pl-4"
+                : "md:mr-4 md:border-r  md:pr-4",
+              "mb-2 flex items-center  border-gray-200 dark:border-gray-600 md:mb-0 md:mr-4  md:pr-4"
+            )}
+          >
+            {props.logoURL && (
+              <img
+                src={props.logoURL}
+                className="mr-2 h-6"
+                alt="Flowbite Logo"
+              />
+            )}
+            {props.title && (
+              <span className="self-center whitespace-nowrap text-lg font-semibold dark:text-white">
+                {props.title}
+              </span>
+            )}
+          </div>
+          {props.text && (
+            <p
+              className={clsx(
+                "m-0 flex items-center text-center text-sm  font-normal  text-gray-500 dark:text-gray-400 ",
+                props.direction === "rtl" ? "md:text-right" : "md:text-left"
+              )}
+            >
+              {props.text}
+            </p>
+          )}
+        </div>
+        {props.actionText && (
+          <div
+            className={clsx(
+              "flex flex-shrink-0 items-center justify-center ",
+              props.direction === "rtl" ? "ml-0 md:ml-10" : "mr-0 md:mr-10"
+            )}
+          >
+            <HawaButton onClick={props.onActionClick}>
+              {props.actionText}
+            </HawaButton>
+          </div>
+        )}
+        <button
+          type="button"
+          className={clsx(
+            "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
+            props.direction === "rtl" ? "left-2" : "right-2"
+          )}
+          data-dismiss-target="#alert-default"
+          aria-label="Close"
+          onClick={() => {
+            setClosed(true)
+            setTimeout(() => {
+              bannerRef.current.removeChild(bannerRef.current.children[0])
+            }, 200)
+          }}
+        >
+          <span className="sr-only">Close</span>
+          <svg
+            aria-hidden="true"
+            className="h-5 w-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            ></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/layout/HawaAppLayout.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
-import { HiMenu } from "react-icons/hi"
 import { FaChevronRight } from "react-icons/fa"
 import { FiSettings } from "react-icons/fi"
 import useDiscloser from "../hooks/useDiscloser"
@@ -136,8 +135,22 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                 onClick={() => setOpenSideMenu(true)}
                 className="z-40 mx-1 cursor-pointer  rounded p-2  transition-all hover:bg-gray-100"
               >
-                <HiMenu size={25} />
-              </div>
+ <svg
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 20 20"
+                  aria-hidden="true"
+                  height="1.6em"
+                  width="1.6em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>              </div>
               {/* Mobile Page Title */}
               {props.pageTitle ? (
                 <div className="text-sm">{props.pageTitle}</div>

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
-import { HiMenu } from "react-icons/hi"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
 import { HawaMenu } from "../elements"
@@ -135,7 +134,22 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                 onClick={() => setOpenSideMenu(true)}
                 className="z-40 mx-1 cursor-pointer  rounded p-2  transition-all hover:bg-gray-100"
               >
-                <HiMenu size={25} />
+                <svg
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 20 20"
+                  aria-hidden="true"
+                  height="1.6em"
+                  width="1.6em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
               </div>
               {/* Mobile Page Title */}
               {props.pageTitle ? (
@@ -316,6 +330,14 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                       </div>
                       {dItem.subItems && (
                         <ArrowIcon
+                          color={
+                            props.currentPage === dItem.slug ||
+                            dItem.subItems?.find(
+                              (e) => e.slug === props.currentPage
+                            )
+                              ? "white"
+                              : "black"
+                          }
                           pointing={
                             openSubItem && dItem.slug === openSubItem
                               ? "up"
@@ -328,7 +350,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                     {dItem.subItems && (
                       <div
                         className={clsx(
-                          "m-1 mx-2 flex cursor-pointer flex-col gap-0 overflow-clip whitespace-nowrap rounded bg-layoutPrimary-300 p-1 transition-all",
+                          "m-1 mx-2 flex cursor-pointer flex-col gap-1 overflow-clip whitespace-nowrap rounded bg-layoutPrimary-300 p-1 transition-all",
                           openSubItem == dItem.slug && openSideMenu
                             ? ""
                             : "my-0 py-0",
@@ -337,7 +359,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                         style={{
                           height:
                             openSubItem == dItem.slug && openSideMenu
-                              ? 6 + 33 * dItem.subItems?.length
+                              ? 6 + 35 * dItem.subItems?.length
                               : 0,
                         }}
                       >
@@ -430,6 +452,7 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                   }
                 >
                   <ArrowIcon
+                    color={"black"}
                     pointing={
                       keepOpen
                         ? isRTL
@@ -488,7 +511,7 @@ const AvatarIcon = () => (
   </svg>
 )
 
-const ArrowIcon = ({ pointing }) => {
+const ArrowIcon = ({ pointing, color }) => {
   let directionStyle
   switch (pointing) {
     case "right":
@@ -513,6 +536,7 @@ const ArrowIcon = ({ pointing }) => {
         "h-6 w-6 shrink-0  transition-all  disabled:bg-gray-200",
         directionStyle
       )}
+      fill={color}
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
     >

package/src/layout/HawaSiteLayout.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import useDiscloser from "../hooks/useDiscloser"
-import { HiMenu } from "react-icons/hi"
 import useBreakpoint from "../hooks/useBreakpoint"
 
 type HawaSiteLayoutTypes = {
@@ -117,8 +116,22 @@ export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
               onClick={() => setOpenSideMenu(!openSideMenu)}
               className="cursor-pointer rounded p-1 transition-all hover:bg-gray-100"
             >
-              <HiMenu size={25} />
-            </div>
+ <svg
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 20 20"
+                  aria-hidden="true"
+                  height="1.6em"
+                  width="1.6em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>            </div>
             {props.pageTitle ? <div>{props.pageTitle}</div> : <div></div>}
           </div>
         )}

package/src/layout/index.ts

@@ -6,3 +6,4 @@ export * from "./HawaAppLayoutSimplified"
 export * from "./HawaContainer"
 export * from "./AppSidebar"
 export * from "./Footer"
+export * from "./Banner"