@sikka/hawa 0.0.265 → 0.0.267

package/src/elements/HawaButton.tsx

@@ -7,7 +7,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "contained" | "outlined"
   feedback?: string
   tooltipDirection?: "rtl" | "ltr"
-  color?: "default" | "primary" | "secondary"
+  color?: "default" | "primary" | "secondary" | "light" | "dark"
   width?: "full" | "normal" | "half"
   size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full"
   margins?: "none" | "1" | "2" | "3" | "4"
@@ -26,6 +26,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   endIcon?: any
   isLoading?: boolean
   badge?: any
+  edgeCorner?: any
 }
 
 const disabledSyles = "cursor-default pointer-events-none"
@@ -34,7 +35,7 @@ const disabledVariantSyles = {
   outlined: "text-gray-300 border-gray-300",
 }
 const baseStyles =
-  "cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium rounded transition-all"
+  "cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium transition-all"
 const sizeStyles = {
   xs: "px-1 py-1",
   small: "text-xs px-2.5 py-1.5",
@@ -65,13 +66,17 @@ const colorStyles = {
     primary:
       "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
     secondary:
-      "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-700",
+      "bg-buttonSecondary-500 hover:text-white hover:bg-buttonSecondary-700",
+    gray: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
+    dark: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
   },
   outlined: {
     default: "text-gray-600 border-gray-600 hover:bg-gray-200",
     primary: "text-black hover:bg-gray-50",
     secondary:
       "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
+    gray: "border-gray-300 hover:bg-gray-200  ",
+    dark: "border-gray-900 hover:bg-gray-700  ",
   },
 }
 
@@ -90,6 +95,7 @@ export const HawaButton: FC<ButtonProps> = ({
   margins = "2",
   children,
   badge,
+  edgeCorner = false,
   feedback,
   ...props
 }) => {
@@ -136,6 +142,8 @@ export const HawaButton: FC<ButtonProps> = ({
                 ? clsx(
                     className,
                     baseStyles,
+                    edgeCorner ? "rounded-inner" : "rounded",
+
                     variantStyles[variant],
                     sizeStyles[size],
                     widthStyles[width],
@@ -145,6 +153,8 @@ export const HawaButton: FC<ButtonProps> = ({
                 : clsx(
                     className,
                     baseStyles,
+                    edgeCorner ? "rounded-inner" : "rounded",
+
                     variantStyles[variant],
                     sizeStyles[size],
                     colorStyles[variant][color],
@@ -165,6 +175,8 @@ export const HawaButton: FC<ButtonProps> = ({
               ? clsx(
                   className,
                   baseStyles,
+                  edgeCorner ? "rounded-inner" : "rounded",
+
                   variantStyles[variant],
                   sizeStyles[size],
                   widthStyles[width],
@@ -175,6 +187,7 @@ export const HawaButton: FC<ButtonProps> = ({
                   className,
                   "overflow-x-clip",
                   baseStyles,
+                  edgeCorner ? "rounded-inner" : "rounded",
                   variantStyles[variant],
                   sizeStyles[size],
                   colorStyles[variant][color],
@@ -188,7 +201,7 @@ export const HawaButton: FC<ButtonProps> = ({
           {!isLoading ? (
             <div
               className={clsx(
-                " flex flex-col-reverse items-start justify-center gap-4 s transition-all",
+                " s flex flex-col-reverse items-start justify-center gap-4 transition-all",
                 isClicked && feedback
                   ? " -translate-y-8 pb-1 pt-1"
                   : "translate-y-0"

package/src/elements/HawaCodeBlock.tsx

@@ -112,6 +112,7 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
             </div>
             <HawaButton
               variant="outlined"
+              color="dark"
               onClick={() => {
                 handleCopyClick()
                 navigator.clipboard.writeText(

package/src/elements/HawaInlineCode.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from "react"
+
+type InlineCodeTypes = {
+  text: string
+}
+
+export const HawaInlineCode: FC<InlineCodeTypes> = (props) => {
+  return <code className="inline-code">{props.text}</code>
+}

package/src/elements/HawaMenu.tsx

@@ -197,10 +197,10 @@ export const HawaMenu: FC<TMenuTypes> = ({
                     className={clsx(
                       "transition-all",
                       item.isButton
-                        ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 px-4 py-2 text-white  hover:bg-buttonPrimary-700 rtl:flex-row-reverse"
+                        ? "flex cursor-pointer flex-row items-center rounded-inner bg-buttonPrimary-500 px-4 py-2 text-white  hover:bg-buttonPrimary-700 rtl:flex-row-reverse"
                         : item.disabled
                         ? "text-gray-300"
-                        : " flex cursor-pointer flex-row items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600  dark:hover:text-white ",
+                        : " flex cursor-pointer flex-row items-center rounded-inner hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600  dark:hover:text-white ",
                       sizeStyles[size]
                     )}
                   >

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/elements/Timeline.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react"
+
+type TimelineTypes = {
+  title: any
+  steps: StepTypes[]
+}
+type StepTypes = {
+  date: string
+  title: string
+  description?: string
+  actions?: any
+}
+export const Timeline: FC<TimelineTypes> = (props) => {
+  return (
+    <div>
+      <ol className="relative border-l border-gray-200 dark:border-gray-700">
+        {props.steps.map((step) => (
+          <li className="mb-10 ml-4">
+            <div className="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700"></div>
+            <time className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+              {step.date}
+            </time>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {step.title}
+            </h3>
+            <p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+              {step.description}
+            </p>
+            {step.actions}
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}

package/src/elements/index.ts

@@ -13,8 +13,6 @@ export * from "./HawaTable"
 export * from "./HawaColorPicker"
 export * from "./HawaSearchBar"
 export * from "./HawaAccordion"
-export * from "./DragDropImages"
-export * from "./DraggableCard"
 export * from "./HawaPhoneInput"
 export * from "./HawaTooltip"
 export * from "./HawaTabs"
@@ -22,22 +20,26 @@ export * from "./HawaModal"
 export * from "./HawaMenu"
 export * from "./HawaCopyrights"
 export * from "./HawaStepper"
-export * from "./Breadcrumb"
 export * from "./HawaStats"
 export * from "./HawaCodeBlock"
 export * from "./HawaSpinner"
 export * from "./HawaRadio"
 export * from "./HawaDrawer"
+export * from "./HawaDatepicker"
+export * from "./DragDropImages"
+export * from "./DraggableCard"
+export * from "./Breadcrumb"
 export * from "./SubsectionList"
 export * from "./UsageCard"
 export * from "./InvoiceAccordion"
-export * from "./HawaDatepicker"
 export * from "./UserFeedback"
 export * from "./ArrowCarousel"
 export * from "./FloatingComment"
 export * from "./FloatingCommentSlate"
 export * from "./FloatingCommentExec"
 export * from "./BackToTop"
+export * from "./HawaInlineCode"
+export * from "./Timeline"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

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>