@sikka/hawa 0.0.205 → 0.0.207

package/src/elements/HawaTable.tsx

@@ -1,24 +1,33 @@
 import React, { useEffect, useState } from "react"
-import { BsChevronRight, BsThreeDotsVertical } from "react-icons/bs"
+import { BsChevronRight, BsFilter, BsPlus, BsThreeDots } from "react-icons/bs"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 import useTable from "../hooks/useTable"
-
+import { HawaTextField } from "./HawaTextField"
+import { HawaButton } from "./HawaButton"
+import { FaSearch } from "react-icons/fa"
+// TODO: translate header tools and make it more customizable
+// TODO: pass the onSearch handler to the parent
 type TableTypes = {
   columns: any[string]
   actions?: ActionItems[][]
   direction?: "rtl" | "ltr"
   rows?: any[any]
-  noDataText?: any
   handleActionClick?: any
   end?: any
   size?: "normal" | "small"
   highlightFirst?: boolean
   customColor?: string
   clickable?: boolean
-  actionsText?: string
+  texts?: {
+    actions?: string
+    noData?: any
+    items?: string
+    page?: string
+  }
   bordersWidth?: string
   onActionClicked?: any
+  headerTools?: boolean
   borders?: "all" | "cols" | "rows" | "outer" | "inner"
 }
 type ActionItems = {
@@ -42,14 +51,17 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   const [enteredPage, setEnteredPage] = useState(null)
   const [page, setPage] = useState(1)
 
-  const { slice, range } = useTable(props.rows ?? [], page, perPage)
-  useEffect(() => {
+  const { slice, range } = useTable(props.rows, page, perPage)
+  const changePage = () => {
     if (slice?.length < 1 && page !== 1) {
       setPage(page - 1)
     }
     if (enteredPage) {
       setPage(enteredPage)
     }
+  }
+  useEffect(() => {
+    changePage()
   }, [slice, page])
 
   let isRTL = direction === "rtl"
@@ -60,168 +72,189 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   }
 
   return (
-    <div className="relative">
-      <table
-        className={clsx(
-          "w-full rounded bg-layoutPrimary-500 text-left text-sm text-gray-500 dark:text-gray-400"
+    <div className="relative flex flex-col gap-2 ">
+      <div className="rounded bg-gray-200">
+        {props.headerTools && (
+          <div className="flex flex-row items-center justify-between px-4 py-2">
+            <div className="w-1/2">
+              <HawaTextField
+                icon={<FaSearch color="gray" />}
+                placeholder={"Search"}
+                width="full"
+                margin="none"
+              />
+            </div>
+            <div className="flex flex-row items-center justify-between gap-2">
+              <HawaButton startIcon={<BsPlus />}>Add Item</HawaButton>
+              <HawaButton startIcon={<BsChevronRight />}>Actions</HawaButton>
+              <HawaButton startIcon={<BsFilter />} endIcon={<BsChevronRight />}>
+                Filter
+              </HawaButton>
+            </div>
+          </div>
         )}
-      >
-        <thead className="  text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
-          <tr>
-            {props.columns.map((col: any, i: any) => {
-              if (col.hidden) {
-                return
-              } else {
+        <table
+          className={clsx(
+            "w-full rounded bg-gray-300 text-left text-sm text-gray-500 dark:text-gray-400"
+          )}
+        >
+          <thead className="  text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+              {props.columns.map((col: any, i: any) => {
+                if (col.hidden) {
+                  return
+                } else {
+                  return (
+                    <th
+                      key={i}
+                      scope="col"
+                      colSpan={2}
+                      className={clsx(
+                        sizeStyles[size],
+                        i !== 0 && (borders === "cols" || borders === "all")
+                          ? `border-l border-l-[${bordersWidth}px]`
+                          : ""
+                      )}
+                    >
+                      {col.value}
+                    </th>
+                  )
+                }
+              })}
+              {props.actions && size !== "small" ? (
+                <th
+                  scope="col"
+                  className={clsx(sizeStyles[size], "w-[calc(1%)] text-center")}
+                >
+                  {props.texts?.actions ?? "Actions"}
+                </th>
+              ) : null}
+            </tr>
+          </thead>
+          <tbody
+            className={
+              customColor && props.rows ? `bg-${customColor}` : "bg-transparent"
+            }
+          >
+            {/* Table Rows */}
+            {props.rows ? (
+              slice?.map((singleRow: any, rowIndex: any) => {
+                let lastRow = rowIndex == slice?.length - 1
                 return (
-                  <th
-                    key={i}
-                    scope="col"
-                    colSpan={2}
+                  <tr
+                    key={rowIndex}
                     className={clsx(
-                      sizeStyles[size],
-                      i !== 0 && (borders === "cols" || borders === "all")
-                        ? `border-l border-l-[${bordersWidth}px]`
+                      " dark:border-gray-700 dark:bg-gray-800",
+                      props.clickable ? "hover:bg-gray-100" : "",
+                      !lastRow &&
+                        (borders === "all" ||
+                          borders === "rows" ||
+                          borders === "inner")
+                        ? `border-b border-b-[${bordersWidth}px]`
                         : ""
                     )}
                   >
-                    {col.value}
-                  </th>
-                )
-              }
-            })}
-            {props.actions && size !== "small" ? (
-              <th
-                scope="col"
-                className={clsx(sizeStyles[size], "w-[calc(1%)] text-center")}
-              >
-                {props.actionsText}
-              </th>
-            ) : null}
-          </tr>
-        </thead>
-        <tbody
-          className={
-            customColor && props.rows ? `bg-${customColor}` : "bg-transparent"
-          }
-        >
-          {/* Table Rows */}
-          {props.rows ? (
-            slice?.map((singleRow: any, rowIndex: any) => {
-              let lastRow = rowIndex == slice?.length - 1
+                    {singleRow?.map((r: any, i: any) => {
+                      let firstCell = i === 0
+                      let lastCell = i === singleRow?.length - 1
+                      let isRTLLastCell =
+                        isRTL && lastRow && lastCell && !props.actions
+                      let isRTLFirstCell = isRTL && lastRow && firstCell
+                      let isLTRFirstCell = !isRTL && lastRow && firstCell
+                      let isLTRLastCell =
+                        !isRTL && lastRow && lastCell && !props.actions
 
-              return (
-                <tr
-                  key={rowIndex}
-                  className={clsx(
-                    " dark:border-gray-700 dark:bg-gray-800",
-                    props.clickable ? "hover:bg-gray-100" : "",
-                    !lastRow &&
-                      (borders === "all" ||
-                        borders === "rows" ||
-                        borders === "inner")
-                      ? `border-b border-b-[${bordersWidth}px]`
-                      : ""
-                  )}
-                >
-                  {singleRow?.map((r: any, i: any) => {
-                    let firstCell = i === 0
-                    let lastCell = i === singleRow?.length - 1
-                    let isRTLLastCell =
-                      isRTL && lastRow && lastCell && !props.actions
-                    let isRTLFirstCell = isRTL && lastRow && firstCell
-                    let isLTRFirstCell = !isRTL && lastRow && firstCell
-                    let isLTRLastCell =
-                      !isRTL && lastRow && lastCell && !props.actions
-
-                    if (r.hidden) {
-                      return
-                    } else {
-                      return (
-                        <td
-                          colSpan={2}
-                          key={i}
-                          className={clsx(
-                            sizeStyles[size],
-                            highlightFirst && firstCell
-                              ? "font-bold"
-                              : "font-normal",
-                            isRTLFirstCell
-                              ? "rounded-bl-none rounded-br"
-                              : isRTLLastCell
-                              ? "rounded-br-none rounded-bl"
-                              : isLTRFirstCell
-                              ? "rounded-br-none rounded-bl"
-                              : isLTRLastCell
-                              ? "rounded-bl-none rounded-br"
-                              : "",
+                      if (r.hidden) {
+                        return
+                      } else {
+                        return (
+                          <td
+                            colSpan={2}
+                            key={i}
+                            className={clsx(
+                              sizeStyles[size],
+                              highlightFirst && firstCell
+                                ? "font-bold"
+                                : "font-normal",
+                              isRTLFirstCell
+                                ? "rounded-bl-none rounded-br"
+                                : isRTLLastCell
+                                ? "rounded-br-none rounded-bl"
+                                : isLTRFirstCell
+                                ? "rounded-br-none rounded-bl"
+                                : isLTRLastCell
+                                ? "rounded-bl-none rounded-br"
+                                : "",
 
-                            !firstCell &&
-                              !lastCell &&
-                              (borders === "cols" || borders === "inner")
-                              ? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
-                              : !firstCell &&
-                                props.actions &&
+                              !firstCell &&
+                                !lastCell &&
                                 (borders === "cols" || borders === "inner")
-                              ? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
-                              : ""
+                                ? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
+                                : !firstCell &&
+                                  props.actions &&
+                                  (borders === "cols" || borders === "inner")
+                                ? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
+                                : ""
 
-                            // customColor ? `bg-${customColor}` : "bg-white"
-                          )}
-                        >
-                          {r.value}
-                        </td>
-                      )
-                    }
-                    // }
-                  })}
-                  {props.actions && size !== "small" ? (
-                    <td
-                      align={isRTL ? "right" : "left"}
-                      className={clsx(
-                        isRTL && lastRow ? "rounded-br-none rounded-bl" : "",
-                        !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}
-                        >
-                          <div className="flex w-fit  items-center justify-center rounded  p-2 hover:bg-gray-200">
-                            <BsThreeDotsVertical />
-                          </div>
-                        </HawaMenu>
-                      </div>
-                    </td>
-                  ) : null}
-                </tr>
-              )
-            })
-          ) : (
-            <tr className="bg-transparent">
-              <td colSpan={20}>
-                <div
-                  className={clsx(
-                    "w-full rounded-b bg-white p-5 text-center",
-                    customColor ? `bg-${customColor}` : "bg-white"
-                  )}
-                >
-                  {props.noDataText}
-                </div>
-              </td>
-            </tr>
-          )}
-        </tbody>
-        <div></div>
-      </table>
-      <div className="mt-2 flex flex-row items-center justify-between ">
+                              // customColor ? `bg-${customColor}` : "bg-white"
+                            )}
+                          >
+                            {r.value}
+                          </td>
+                        )
+                      }
+                    })}
+                    {props.actions && size !== "small" ? (
+                      <td
+                        align={isRTL ? "right" : "left"}
+                        className={clsx(
+                          isRTL && lastRow ? "rounded-br-none rounded-bl" : "",
+                          !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}
+                          >
+                            <div className="flex w-fit  items-center justify-center rounded  p-2 hover:bg-gray-200">
+                              <BsThreeDots />
+                            </div>
+                          </HawaMenu>
+                        </div>
+                      </td>
+                    ) : null}
+                  </tr>
+                )
+              })
+            ) : (
+              <tr className="bg-transparent">
+                <td colSpan={20}>
+                  <div
+                    className={clsx(
+                      "w-full rounded-b bg-white p-5 text-center",
+                      customColor ? `bg-${customColor}` : "bg-white"
+                    )}
+                  >
+                    {props.texts?.noData ?? "No Data"}
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <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 ">
@@ -338,57 +371,39 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
           <div></div>
         )}
         {/* Pagination Settings */}
-        <div className="w-fit ">
-          {/* TODO: Hide it when props.pagination is true */}
-          <select
-            value={perPage}
-            className="h-6 rounded text-xs"
-            onChange={(e) => {
-              setPerPage(parseInt(e.target.value))
-            }}
-          >
-            <option value={10} style={{ fontSize: 10 }}>
-              10 Items
-            </option>
-            <option value={20} style={{ fontSize: 10 }}>
-              20 Items
-            </option>
-            <option value={30} style={{ fontSize: 10 }}>
-              30 Items
-            </option>
-            <option value={50} style={{ fontSize: 10 }}>
-              50 Items
-            </option>
-            <option value={100} style={{ fontSize: 10 }}>
-              100 Items
-            </option>
-          </select>
-          {/* <HawaSelect
-            // label="Per Page"
-            isCreatable={false}
-            isMulti={false}
-            isSearchable={false}
-            isClearable={false}
-            options={[
-              { value: 2, label: "2" },
-              { value: 7, label: "7" },
-              { value: 10, label: "10" },
-              { value: 20, label: "20" },
-            ]}
-            onChange={(e: any) => {
-              // field.onChange(e.value)
-              console.log("changing to ", e.value)
-              setPage(1)
-              setPerPage(e.value)
-            }}
-            onInputChange={(e: any) => {
-              // field.onChange(e.value)
-              console.log("changing to ", e.value)
-              setPage(1)
-              setPerPage(e.value)
-            }}
-          /> */}
-        </div>
+        {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 rounded 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>
     </div>
   )

package/src/elements/HawaTabs.tsx

@@ -1,21 +1,22 @@
 import clsx from "clsx"
 import React, { useState } from "react"
-
+// TODO: fix wrapping issue when small screen
 type TabsTypes = {
   options?: any
   onChangeTab?: any
   defaultValue?: any
-  contents?: any
   orientation?: "horizontal" | "vertical"
   direction?: "rtl" | "ltr"
   marginBetween?: any
   width?: "full" | "normal"
+  pill?: boolean
 }
 export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   orientation = "horizontal",
   direction = "ltr",
   width = "normal",
   marginBetween = 0,
+  pill = true,
   ...props
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.options[0]?.value)
@@ -35,8 +36,6 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     full: "w-full min-w-full",
     normal: "w-fit",
   }
-  console.log("selected i : ", selectedOption)
-  console.log("selected object : ", props.options[selectedOption])
   let orientationStyle = {
     vertical: {
       container: "flex flex-row",
@@ -68,7 +67,6 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     >
       <ul
         className={clsx(
-          // "mb-2",
           marginBetween
             ? orientation === "vertical"
               ? "mb-0"
@@ -79,31 +77,24 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
             : "mr-" + marginBetween,
           tabsStyle[orientation],
           "border-buttonPrimary-500",
+
           orientation === "vertical"
             ? direction === "rtl"
               ? "rounded-none rounded-r border-l-2"
               : "rounded-none rounded-l border-r-2"
             : "border-b-2",
-          widthStyles[width]
+          widthStyles[width],
+          // "bg-red-400",
+          pill ? "overflow-clip rounded border-none" : ""
         )}
       >
-        {/* 
-        if selected option
-          if vertical
-            if rtl
-              border left
-            else
-              border right
-          else
-            border bottom
-        */}
         {props.options?.map((opt: any, o) => (
           <li key={o}>
             <button
               aria-current="page"
               onClick={() => {
                 setSelectedOption(opt.value)
-                // props.onChangeTab(opt.value)
+                props.onChangeTab(opt)
               }}
               className={clsx(
                 opt.value === selectedOption
@@ -113,7 +104,8 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
                       direction === "rtl" ? "rounded-r" : "rounded-l",
                     ]
                   : inactiveTabStyle[orientation],
-                "w-full transition-all"
+                "w-full  transition-all",
+                pill ? "rounded bg-green-400" : ""
                 // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
               )}
             >

package/src/elements/HawaTextField.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import clsx from "clsx"
+// TODO: make icon based on direction
+// TODO: Preferebly usse context to pass direction rtl | ltr
 
-import { FaSearch } from "react-icons/fa"
 type TextFieldTypes = {
   margin?: "none" | "normal" | "large"
   width?: "small" | "normal" | "full"
@@ -43,7 +44,6 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
 
   return (
     <div
-      // ref={props.ref}
       className={clsx(defaultStyle, marginStyles[margin], widthStyles[width])}
     >
       {props.label && (
@@ -69,21 +69,20 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
         />
       ) : (
         <div className="relative">
-          <input
-            {...props}
-            className={clsx(defaultInputStyle, props.icon ? "pr-10" : "")}
-          />
           {props.icon && (
-            <div className="absolute top-1/2 right-3 -translate-y-1/2">
+            <div className="absolute top-1/2 left-3 -translate-y-1/2">
               {props.icon}
             </div>
           )}
+          <input
+            {...props}
+            className={clsx(defaultInputStyle, props.icon ? "pl-10" : "")}
+          />
         </div>
       )}
 
       {props.helperText && (
         <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
-          {/* <span className="font-medium">Oh, snapp!</span> */}
           {props.helperText}
         </p>
       )}

package/src/elements/HawaTooltip.tsx

@@ -8,7 +8,6 @@ type THawaToolTip = {
   content?: string
   btnHovered?: any
   buttonRef?: any
-  buttonID?: any
   direction?: "rtl" | "ltr"
   size?: "normal" | "small" | "large"
   position?:

package/src/elements/InvoiceAccordion.tsx

@@ -25,9 +25,7 @@ type InvoiceAccordionTypes = {
   invoiceActions?: {
     icon?: JSX.Element
     label: string
-    action?: (
-      e: any
-    ) => void
+    action?: (e: any) => void
     isButton?: boolean
     element?: any
   }[][]
@@ -78,9 +76,7 @@ export const InvoiceAccordion: React.FunctionComponent<
         <div className="flex w-full flex-col gap-0 ">
           <div className="flex flex-row items-center gap-2">
             <span className="bg-white-200">{props.invoiceTitle}</span>
-            {props.status && (
-              <HawaChip size="small" label={props.status} />
-            )}{" "}
+            {props.status && <HawaChip size="small" label={props.status} />}
           </div>
           <div className="font-sm text-gray-400">{props.invoiceSubtitle}</div>
         </div>
@@ -89,7 +85,6 @@ export const InvoiceAccordion: React.FunctionComponent<
           <HawaMenu
             direction={direction}
             position={direction === "rtl" ? "bottom-right" : "bottom-left"}
-            // menuItems={[[{ label: "Download PDF" }]]}
             menuItems={props.invoiceActions}
           >
             <div className=" p-2">