@sikka/hawa 0.0.193 → 0.0.195

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.193",
+  "version": "0.0.195",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaMenu.tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx"
 import React, { ReactNode, useEffect, useRef, useState } from "react"
-// TODO: add size to make it smaller
 // TODO: add width to decrease width
 
 interface TMenuTypes {
@@ -41,7 +40,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   direction = "ltr",
   headerTitle,
   headerSubtitle,
-  size = "small",
+  size = "normal",
   children,
   onClickOutside,
   position = "top-right",
@@ -88,8 +87,8 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
     closed: "h-0 invisible opacity-0 hidden",
   }
   let sizeStyles = {
-    small: "text-xs",
-    normal: "",
+    small: "text-[11px] p-1 m-0",
+    normal: "py-2 px-4",
     large: "",
   }
   let menuCoordinates
@@ -156,49 +155,11 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
 
       break
   }
-  // switch (position) {
-  //   case "top-right":
-  //     menuCoordinates = `0px, -${menuHeight + childrenHeight + spacing}px`
-  //     break
-  //   case "top-left":
-  //     menuCoordinates = `-${menuWidth - childrenWidth}px, -${
-  //       menuHeight + childrenHeight + spacing
-  //     }px`
-  //     break
-  //   case "bottom-right":
-  //     menuCoordinates = `0px, ${spacing}px`
-  //     break
-  //   case "bottom-left":
-  //     menuCoordinates = `-${menuWidth - childrenWidth}px,${spacing}px`
-  //     break
-  //   case "right-bottom":
-  //     menuCoordinates = `${childrenWidth + spacing}px, -${childrenHeight}px`
-  //     break
-  //   case "right-top":
-  //     menuCoordinates = `${childrenWidth + spacing}px, -${menuHeight}px`
-  //     break
-  //   case "left-bottom":
-  //     menuCoordinates = `-${menuWidth + spacing}px, -${childrenHeight}px`
-  //     break
-  //   case "left-top":
-  //     menuCoordinates = `-${menuWidth + spacing}px, -${menuHeight}px`
-  //     break
-
-  //   default:
-  //     menuCoordinates = `-${menuWidth / 2}px, -${
-  //       childrenHeight + menuHeight / 2
-  //     }px`
-
-  //     break
-  // }
   return (
     <div
-      // className="relative w-fit "
       onClick={() => {
         if (menuOpened) setMenuOpened(false)
         else setMenuOpened(true)
-        // if (open) handleClose()
-        // else handleOpen()
       }}
     >
       <div ref={childrenRef}>{children}</div>
@@ -213,7 +174,6 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
         }}
         className={clsx(
           defaultStyles,
-          sizeStyles[size],
           menuOpened ? "opacity-100" : "invisible opacity-0"
         )}
       >
@@ -227,7 +187,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
           return (
             <ul
               key={o}
-              className="bg-layout-1200 flex flex-col gap-1 py-1 text-sm text-gray-700 dark:text-gray-200"
+              className="bg-layout-1200 flex flex-col gap-1 p-1 text-gray-700 dark:text-gray-200"
             >
               {group?.map((item) => {
                 return item.element ? (
@@ -237,11 +197,12 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                 ) : (
                   <li
                     onClick={(e) => item.action(e, item.label)}
-                    className={
+                    className={clsx(
                       item.isButton
                         ? "mx-1 flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
-                        : "mx-1 flex cursor-pointer flex-row items-center rounded py-2 px-4 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  hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white",
+                      sizeStyles[size]
+                    )}
                   >
                     {item.icon && (
                       <div className="mr-2 rtl:ml-2">{item.icon}</div>

package/src/elements/HawaTable.tsx

@@ -1,11 +1,9 @@
-import React, { useState } from "react"
-import { HawaButton } from "./HawaButton"
-import { FaTrash, FaExclamationCircle, FaPen } from "react-icons/fa"
+import React from "react"
 import { BsThreeDotsVertical } from "react-icons/bs"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 // TODO: make action click return row
-// fix menu pop up
+
 type TableTypes = {
   lang?: any
   columns: any[string]
@@ -21,7 +19,7 @@ type TableTypes = {
   clickable?: boolean
   actionsText?: string
   bordersWidth?: string
-  borders?: ["all" | "cols" | "rows" | "outer"]
+  borders?: "all" | "cols" | "rows" | "outer" | "inner"
 }
 type ActionItems = {
   icon?: JSX.Element
@@ -40,28 +38,30 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   borders,
   highlightFirst = false,
   direction = "ltr",
-  bordersWidth = "0",
+  bordersWidth = "1",
   ...props
 }) => {
-  const [openActions, setOpenActions] = useState(false)
   let isArabic = props.lang === "ar"
 
   let sizeStyles = {
     normal: "py-3 px-6",
     small: "px-3 py-1",
   }
+
   return (
-    <div className="relative overflow-x-clip rounded">
+    <div className="relative">
       <table
         className={clsx(
-          "w-full  text-left text-sm text-gray-500 dark:text-gray-400",
-          borders?.find((e) => e === "all") === "all" ||
-            borders?.find((e) => e === "outer") === "outer"
-            ? `border-[${bordersWidth}px]`
-            : ""
+          "w-full rounded bg-layoutPrimary-500  text-left text-sm text-gray-500 dark:text-gray-400"
+          // borders === "all" || borders === "outer"
+          //   ? `border-[${bordersWidth}px] bg-red-300 p-2`
+          //   : ""
+          // `ring-[${bordersWidth}px] ring-blue-300`
+          // `ring-[${10}px] ring-blue-300`
+          // ` ring-[10px] ring-blue-300`
         )}
       >
-        <thead className=" bg-gray-100 text-xs uppercase text-gray-700 dark:bg-gray-700 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) => (
               <th
@@ -69,8 +69,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                 scope="col"
                 className={clsx(
                   sizeStyles[size],
-                  (i !== 0 && borders?.find((e) => e === "cols") === "cols") ||
-                    borders?.find((e) => e === "all") === "all"
+                  i !== 0 && (borders === "cols" || borders === "all")
                     ? `border-l border-l-[${bordersWidth}px]`
                     : ""
                 )}
@@ -85,50 +84,58 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
             ) : null}
           </tr>
         </thead>
-        <tbody>
+        <tbody
+        // style={{
+        //   borderWidth: bordersWidth,
+        //   border: "1px solid black",
+        // }}
+        // className="bg-yellow-400"
+        >
           {/* Table Rows */}
           {props.rows ? (
-            props.rows.map((singleRow: any, rowIndex: any) => (
-              <tr
-                key={rowIndex}
-                className={clsx(
-                  " dark:border-gray-700 dark:bg-gray-800",
-                  props.clickable ? "hover:bg-gray-100" : "",
-                  "bg-" + customColor,
-                  rowIndex == props.rows.length - 1
-                    ? ""
-                    : borders?.find((e) => e === "all") === "all" ||
-                      borders?.find((e) => e === "rows") === "rows"
-                    ? `border-b border-b-[${bordersWidth}px]`
-                    : ""
-                )}
-              >
-                {singleRow.map((r: any, i: any) => {
-                  if (i === 0) {
-                    return (
-                      <th
-                        key={i}
-                        scope="row"
-                        className={clsx(
-                          sizeStyles[size],
-                          "whitespace-nowrap  dark:text-white",
-                          highlightFirst ? "font-bold" : "font-normal"
-                        )}
-                      >
-                        {r}{" "}
-                      </th>
-                    )
-                  } else {
+            props.rows.map((singleRow: any, rowIndex: any) => {
+              let firstRow
+              let lastRow = rowIndex == props.rows.length - 1
+
+              return (
+                <tr
+                  key={rowIndex}
+                  className={clsx(
+                    " dark:border-gray-700 dark:bg-gray-800",
+                    props.clickable ? "hover:bg-gray-100" : "",
+                    "bg-" + customColor,
+                    !lastRow &&
+                      (borders === "all" ||
+                        borders === "rows" ||
+                        borders === "inner")
+                      ? `border-b border-b-[${bordersWidth}px]`
+                      : ""
+                    // "bg-yellow-400"
+                  )}
+                >
+                  {singleRow.map((r: any, i: any) => {
+                    let firstCell = i === 0
+                    let lastCell = i === singleRow.length - 1
+
                     return (
                       <td
                         key={i}
                         className={clsx(
+                          highlightFirst && firstCell
+                            ? "font-bold"
+                            : "font-normal",
+                          lastRow && firstCell ? "rounded-b" : "",
+                          firstCell ? "rounded-br-none" : "",
+                          lastCell ? "rounded-bl-none" : "",
                           sizeStyles[size],
-
-                          borders?.find((e) => e === "cols") === "cols" ||
-                            borders?.find((e) => e === "all") === "all"
+                          !firstCell &&
+                            (borders === "cols" || borders === "inner")
                             ? `border-l border-l-[${bordersWidth}px]`
                             : "",
+
+                          // borders === "all"
+                          //   ? `border border-[${bordersWidth}px]`
+                          //   : "",
                           props.actions
                             ? `border-r border-r-[${bordersWidth}px]`
                             : ""
@@ -137,27 +144,32 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                         {r}
                       </td>
                     )
-                  }
-                })}
-                {props.actions && size !== "small" ? (
-                  <td align={isArabic ? "right" : "left"} className="">
-                    <div className="flex items-center justify-center">
-                      <HawaMenu
-                        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>
-            ))
+                    // }
+                  })}
+                  {props.actions && size !== "small" ? (
+                    <td
+                      align={isArabic ? "right" : "left"}
+                      className={lastRow ? "rounded-br" : ""}
+                    >
+                      <div className="flex items-center justify-center">
+                        <HawaMenu
+                          size="small"
+                          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>
               <td colSpan={props.columns.length}>

package/src/styles.css

@@ -385,7 +385,7 @@ video {
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
-    --border-radius: 0px;
+    --border-radius: 10px;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
@@ -1238,6 +1238,10 @@ video {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
+.rounded-b {
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+}
 .rounded-r {
   border-top-right-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
@@ -1267,6 +1271,9 @@ video {
 .rounded-br-none {
   border-bottom-right-radius: 0px;
 }
+.rounded-br {
+  border-bottom-right-radius: var(--border-radius);
+}
 .rounded-tl-none {
   border-top-left-radius: 0px;
 }
@@ -1650,6 +1657,9 @@ video {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+.text-\[11px\] {
+  font-size: 11px;
+}
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -1830,10 +1840,19 @@ video {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ring-\[10px\] {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(10px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .ring-blue-200 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
 }
+.ring-blue-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+}
 .ring-buttonPrimary-500 {
   --tw-ring-color: var(--button-primary-500);
 }

package/src/tailwind.css

@@ -14,7 +14,7 @@
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
-    --border-radius: 0px;
+    --border-radius: 10px;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {