@sikka/hawa 0.1.55 → 0.1.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/elements/DropdownMenu.tsx

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     )}
     {...props}
   >
-    {children}
+    <div className="flex flex-row items-center gap-1">{children}</div>{" "}
     {/* <ChevronRight className="ml-auto h-4 w-4" /> */}
     <svg
       aria-label="Chevron Right Icon"
@@ -230,11 +230,13 @@ type ExtendedDropdownMenuTriggerProps = Partial<
 type SubItem = {
   label: string
   value: string
+  icon?: any
   action?: () => void
   highlighted?: boolean
 }
 
 type Item = {
+  icon?: any
   label: string
   value: string
   action?: () => void
@@ -276,23 +278,26 @@ export const DropdownMenu = ({
         <DropdownMenuContent
           side={side}
           sideOffset={sideOffset}
-          className={cn(className)}
+          className={cn(className, "flex flex-col gap-1")}
           align={align}
           alignOffset={alignOffset}
         >
           {items.map((item, index) => {
             return item.subitems ? (
-              <DropdownMenuSub>
+              <DropdownMenuSub key={index}>
                 <DropdownMenuSubTrigger dir={direction}>
+                  {item.icon && item.icon}
                   {item.label}
                 </DropdownMenuSubTrigger>
                 <DropdownMenuPortal>
                   <DropdownMenuSubContent>
                     {item.subitems.map((subitem, subIndex) => (
                       <DropdownMenuItem
+                        className="flex flex-row gap-1"
                         onSelect={() => subitem.action()}
                         key={subIndex}
                       >
+                        {subitem.icon && subitem.icon}
                         {subitem.label}
                       </DropdownMenuItem>
                     ))}
@@ -300,7 +305,12 @@ export const DropdownMenu = ({
                 </DropdownMenuPortal>
               </DropdownMenuSub>
             ) : (
-              <DropdownMenuItem key={index} onSelect={() => item.action()}>
+              <DropdownMenuItem
+                className="flex flex-row gap-1"
+                key={index}
+                onSelect={() => item.action()}
+              >
+                {item.icon && item.icon}
                 {item.label}
               </DropdownMenuItem>
             )

package/src/elements/HawaTable.tsx

@@ -4,6 +4,9 @@ import { HawaMenu } from "./HawaMenu"
 import useTable from "../hooks/useTable"
 import { HawaTextField } from "./HawaTextField"
 import { HawaButton } from "./HawaButton"
+import { cn } from "../util"
+import { Button } from "./Button"
+import { DropdownMenu } from "./DropdownMenu"
 
 // TODO: translate header tools and make it more customizable
 // TODO: pass the onSearch handler to the parent
@@ -21,7 +24,7 @@ type ColTypes = {
 type TableTypes = {
   pagination?: boolean
   columns: ColTypes[]
-  actions?: ActionItems[][]
+  actions?: Item[]
   direction?: "rtl" | "ltr"
   rows?: RowTypes[][]
   handleActionClick?: any
@@ -51,6 +54,29 @@ type ActionItems = {
   element?: any
 }
 
+type Item = {
+  label: string
+  value: string
+  action?: () => void
+  highlighted?: boolean
+}
+
+const ChevronIcon = () => (
+  <svg
+    aria-label="Chevron Right Icon"
+    stroke="currentColor"
+    fill="currentColor"
+    stroke-width="0"
+    viewBox="0 0 16 16"
+    height="1em"
+    width="1em"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+    ></path>
+  </svg>
+)
 export const HawaTable: FC<TableTypes> = ({
   size = "normal",
   bodyColor = "white",
@@ -66,40 +92,9 @@ export const HawaTable: FC<TableTypes> = ({
   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,
@@ -108,13 +103,18 @@ export const HawaTable: FC<TableTypes> = ({
     sortDirection
   )
   let isRTL = direction === "rtl"
-
   let sizeStyles = {
     normal: "py-3 px-6",
     small: "px-3 py-1",
   }
-  // let sortedRows = props.rows
-
+  const handleSort = (colIndex, sortable) => {
+    if (sortable) {
+      setSortColumn(colIndex)
+      setSortDirection((prevDirection) =>
+        prevDirection === "asc" ? "desc" : "asc"
+      )
+    }
+  }
   const changePage = () => {
     if (slice?.length < 1 && page !== 1) {
       setPage(page - 1)
@@ -150,39 +150,34 @@ export const HawaTable: FC<TableTypes> = ({
               margin="none"
             />
             <div className="flex flex-row items-center justify-between gap-2">
-              <HawaButton
-                startIcon={
-                  <svg
-                    aria-label="Filter Icon"
-                    stroke="currentColor"
-                    fill="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 16 16"
-                    height="1em"
-                    width="1em"
-                  >
-                    <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
-                  </svg>
-                }
-                endIcon={
-                  <svg
-                    aria-label="Chevron Right Icon"
-                    stroke="currentColor"
-                    fill="currentColor"
-                    stroke-width="0"
-                    viewBox="0 0 16 16"
-                    height="1em"
-                    width="1em"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-                    ></path>
-                  </svg>
-                }
-              >
+              <Button className="flex flex-row gap-2">
+                <svg
+                  aria-label="Filter Icon"
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 16 16"
+                  height="1em"
+                  width="1em"
+                >
+                  <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
+                </svg>
                 {props.texts?.filter ?? "Filter"}
-              </HawaButton>
+                <svg
+                  aria-label="Chevron Right Icon"
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 16 16"
+                  height="1em"
+                  width="1em"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+                  ></path>
+                </svg>
+              </Button>
             </div>
           </div>
         )}
@@ -323,33 +318,21 @@ export const HawaTable: FC<TableTypes> = ({
                         )
                       }
                     })}
-                    {props.actions ? (
-                      size !== "small" ? (
-                        <td
-                          align={isRTL ? "right" : "left"}
-                          className={clsx(
-                            isRTL && lastRow
-                              ? "rounded-bl rounded-br-none"
-                              : "",
-                            !isRTL && lastRow
-                              ? "rounded-bl-none rounded-br"
-                              : ""
-                            // "w-fit bg-red-400"
-                          )}
-                          colSpan={1}
-                        >
-                          <div className="flex items-center justify-center">
-                            <HawaMenu
-                              size="small"
-                              actionedItem={[rowIndex, singleRow]}
-                              menuItems={props.actions}
-                              position={
-                                direction === "rtl"
-                                  ? "right-bottom"
-                                  : "left-bottom"
-                              }
-                              direction={direction}
-                            >
+                    {props.actions && (
+                      <td
+                        align={isRTL ? "right" : "left"}
+                        className={cn(
+                          isRTL && lastRow && "rounded-bl rounded-br-none",
+                          !isRTL && lastRow && "rounded-bl-none rounded-br"
+                        )}
+                        colSpan={1}
+                      >
+                        <div className="flex items-center justify-center">
+                          <DropdownMenu
+                            direction={direction}
+                            side="right"
+                            items={props.actions}
+                            trigger={
                               <div className="flex w-fit  cursor-pointer items-center justify-center rounded  p-2 hover:bg-gray-200 dark:hover:bg-gray-600">
                                 <svg
                                   aria-label="Vertical Three Dots Menu Icon"
@@ -363,19 +346,11 @@ export const HawaTable: FC<TableTypes> = ({
                                   <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
                                 </svg>
                               </div>
-                            </HawaMenu>
-                          </div>
-                        </td>
-                      ) : (
-                        <div className="flex flex-row  items-center justify-center gap-2 p-1">
-                          {props.actions[0].map((act) => (
-                            <div className=" p-1 transition-all hover:bg-gray-100">
-                              {act.icon}
-                            </div>
-                          ))}
+                            }
+                          />
                         </div>
-                      )
-                    ) : null}
+                      </td>
+                    )}
                   </tr>
                 )
               })
@@ -405,27 +380,15 @@ export const HawaTable: FC<TableTypes> = ({
             <div className="flex w-fit  flex-row items-stretch justify-center gap-2 overflow-clip rounded ">
               {/* Previous Page Button */}
               <div
-                className={clsx(
-                  "flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+                className={cn(
+                  "flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded border bg-background p-1 text-xs hover:bg-primary/10 dark:hover:bg-primary/10",
+                  direction === "rtl" && "rotate-0"
                 )}
                 onClick={() =>
                   page <= 1 ? setPage(range.length) : setPage(page - 1)
                 }
               >
-                <svg
-                  aria-label="Chevron Right Icon"
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 16 16"
-                  height="1em"
-                  width="1em"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-                  ></path>
-                </svg>
+                <ChevronIcon />
               </div>
               {/* Numbered Pagination */}
               <div className="flex flex-row items-center  overflow-clip rounded  transition-all">
@@ -439,7 +402,7 @@ export const HawaTable: FC<TableTypes> = ({
                           className={clsx(
                             "w-10 p-1 text-xs hover:bg-gray-200",
                             page === el
-                              ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                              ? "bg-primary text-primary-foreground hover:bg-primary"
                               : "bg-gray-100"
                           )}
                           onClick={() => setPage(el)}
@@ -483,7 +446,7 @@ export const HawaTable: FC<TableTypes> = ({
                           className={clsx(
                             "w-10 p-1 text-xs hover:bg-gray-200",
                             page === el
-                              ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                              ? "bg-primary text-primary-foreground hover:bg-primary"
                               : "bg-gray-100"
                           )}
                           onClick={() => setPage(el)}
@@ -501,15 +464,27 @@ export const HawaTable: FC<TableTypes> = ({
                       <button
                         key={index}
                         className={clsx(
-                          "w-10 p-1 text-xs  hover:bg-gray-200 dark:hover:bg-gray-700",
+                          "w-10 p-1 text-xs",
                           page === el
-                            ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
-                            : "border bg-background",
+                            ? "bg-primary text-primary-foreground "
+                            : "border bg-background hover:bg-primary/10 dark:hover:bg-primary/10",
 
-                          index === 0 ? "rounded-l border-r-0" : "",
-                          index === range.length - 1
-                            ? "rounded-r border-l-0"
-                            : ""
+                          // Check if the direction is 'rtl'
+                          direction === "rtl"
+                            ? // If direction is 'rtl', then check for the index conditions
+                              // and apply respective classes along with the 'something' class
+                              index === 0
+                              ? "rounded-r border-l-0" // Apply if index is 0 and direction is 'rtl'
+                              : index === range.length - 1
+                              ? "rounded-l border-r-0" // Apply if index is the last element and direction is 'rtl'
+                              : "" // Apply if index is other than 0 or last element and direction is 'rtl'
+                            : // If direction is not 'rtl', then again check for the index conditions
+                            // and apply respective classes along with the 'something else' class
+                            index === 0
+                            ? "rounded-l border-r-0" // Apply if index is 0 and direction is not 'rtl'
+                            : index === range.length - 1
+                            ? "rounded-r border-l-0" // Apply if index is the last element and direction is not 'rtl'
+                            : "" // Apply if index is other than 0 or last element and direction is not 'rtl'
                         )}
                         onClick={() => setPage(el)}
                       >
@@ -523,24 +498,12 @@ export const HawaTable: FC<TableTypes> = ({
                 onClick={() =>
                   page >= range.length ? setPage(1) : setPage(page + 1)
                 }
-                className={clsx(
-                  "flex h-6 w-6  cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+                className={cn(
+                  "flex h-6 w-6  cursor-pointer items-center justify-center rounded border bg-background p-1 text-xs hover:bg-primary/10 dark:hover:bg-primary/10",
+                  direction === "rtl" && "rotate-180"
                 )}
               >
-                <svg
-                  aria-label="Chevron Right Icon"
-                  stroke="currentColor"
-                  fill="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 16 16"
-                  height="1em"
-                  width="1em"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-                  ></path>
-                </svg>
+                <ChevronIcon />
               </div>
             </div>
           ) : (
@@ -582,6 +545,194 @@ export const HawaTable: FC<TableTypes> = ({
           )}
         </div>
       )}
+
+      {/* <Pagination
+        handleNextPage={() =>
+          page >= range.length ? setPage(1) : setPage(page + 1)
+        }
+        handlePrevPage={() =>
+          page <= 1 ? setPage(range.length) : setPage(page - 1)
+        }
+      /> */}
     </div>
   )
 }
+
+// const Pagination = (props) => (
+//   <div className="flex flex-row items-center justify-between ">
+//     {/* Pagination Pages  */}
+//     {range.length > 1 ? (
+//       <div className="flex w-fit  flex-row items-stretch justify-center gap-2 overflow-clip rounded ">
+//         {/* Previous Page Button */}
+//         <div
+//           className={clsx(
+//             "flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+//           )}
+//           onClick={props.handlePrevPage}
+//         >
+//           <svg
+//             aria-label="Chevron Right Icon"
+//             stroke="currentColor"
+//             fill="currentColor"
+//             stroke-width="0"
+//             viewBox="0 0 16 16"
+//             height="1em"
+//             width="1em"
+//           >
+//             <path
+//               fill-rule="evenodd"
+//               d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+//             ></path>
+//           </svg>
+//         </div>
+//         {/* Numbered Pagination */}
+//         <div className="flex flex-row items-center  overflow-clip rounded  transition-all">
+//           {/* The first page */}
+//           {range.length > 6 &&
+//             range.map((el, index) => {
+//               if (index <= 0) {
+//                 return (
+//                   <button
+//                     key={index}
+//                     className={clsx(
+//                       "w-10 p-1 text-xs hover:bg-gray-200",
+//                       page === el
+//                         ? "bg-primary text-white hover:bg-primary"
+//                         : "bg-gray-100"
+//                     )}
+//                     onClick={() => setPage(el)}
+//                   >
+//                     {el}
+//                   </button>
+//                 )
+//               }
+//             })}
+//           {/* The Current Page / Input  */}
+//           {range?.length > 6 && (
+//             <input
+//               type={"text"}
+//               className=" w-10  bg-gray-100 p-1 text-center text-xs"
+//               defaultValue={
+//                 page !== 0 || page !== range.length - 1 ? page : "..."
+//               }
+//               value={
+//                 page == 1 || page == range.length
+//                   ? "..."
+//                   : enteredPage
+//                   ? enteredPage
+//                   : page
+//               }
+//               onChange={(e) => setEnteredPage(parseInt(e.target.value))}
+//               onKeyDown={(e) => {
+//                 if (e.key === "Enter") {
+//                   setPage(enteredPage)
+//                   setEnteredPage(null)
+//                 }
+//               }}
+//             />
+//           )}
+//           {/* The last page */}
+//           {range?.length > 6 &&
+//             range.map((el, index) => {
+//               if (index >= range.length - 1) {
+//                 return (
+//                   <button
+//                     key={index}
+//                     className={clsx(
+//                       "w-10 p-1 text-xs hover:bg-gray-200",
+//                       page === el
+//                         ? "bg-primary text-white hover:bg-primary"
+//                         : "bg-gray-100"
+//                     )}
+//                     onClick={() => setPage(el)}
+//                   >
+//                     {el}
+//                   </button>
+//                 )
+//               }
+//             })}
+
+//           {/* All Pages if less than 6 pages */}
+//           {range?.length <= 6 &&
+//             range.map((el, index) => {
+//               return (
+//                 <button
+//                   key={index}
+//                   className={clsx(
+//                     "w-10 p-1 text-xs  hover:bg-gray-200 dark:hover:bg-gray-700",
+//                     page === el
+//                       ? "bg-primary text-white hover:bg-primary"
+//                       : "border bg-background",
+
+//                     index === 0 ? "rounded-l border-r-0" : "",
+//                     index === range.length - 1 ? "rounded-r border-l-0" : ""
+//                   )}
+//                   onClick={() => setPage(el)}
+//                 >
+//                   {el}
+//                 </button>
+//               )
+//             })}
+//         </div>
+//         {/* Next Page Button */}
+//         <div
+//           onClick={props.handleNextPage}
+//           className={clsx(
+//             "flex h-6 w-6  cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
+//           )}
+//         >
+//           <svg
+//             aria-label="Chevron Right Icon"
+//             stroke="currentColor"
+//             fill="currentColor"
+//             stroke-width="0"
+//             viewBox="0 0 16 16"
+//             height="1em"
+//             width="1em"
+//           >
+//             <path
+//               fill-rule="evenodd"
+//               d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+//             ></path>
+//           </svg>
+//         </div>
+//       </div>
+//     ) : (
+//       <div></div>
+//     )}
+//     {/* Pagination Settings */}
+//     {props.rows ? (
+//       <div className="flex w-fit flex-row items-center gap-2  ">
+//         <div className="text-xs ">
+//           {props.rows.length} {props.texts?.items ?? "Items"}
+//         </div>
+
+//         <select
+//           value={perPage}
+//           className="h-6 cursor-pointer rounded border bg-background px-2 text-xs"
+//           onChange={(e) => {
+//             setPerPage(parseInt(e.target.value))
+//           }}
+//         >
+//           <option value={10} style={{ fontSize: 10 }}>
+//             10 / {props.texts?.page ?? "Page"}
+//           </option>
+//           <option value={20} style={{ fontSize: 10 }}>
+//             20 / {props.texts?.page ?? "Page"}
+//           </option>
+//           <option value={30} style={{ fontSize: 10 }}>
+//             30 / {props.texts?.page ?? "Page"}
+//           </option>
+//           <option value={50} style={{ fontSize: 10 }}>
+//             50 / {props.texts?.page ?? "Page"}
+//           </option>
+//           <option value={100} style={{ fontSize: 10 }}>
+//             100 / {props.texts?.page ?? "Page"}
+//           </option>
+//         </select>
+//       </div>
+//     ) : (
+//       <div></div>
+//     )}
+//   </div>
+// )