@sikka/hawa 0.0.195 → 0.0.197

package/package.json

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

package/src/blocks/Payment/CheckoutForm.tsx

@@ -66,7 +66,7 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
           {props.texts.orderDetails}
         </div>
         <HawaTable
-          lang={props.lang}
+          direction={isArabic ? "rtl" : "ltr"}
           columns={["Product", "Price"]}
           rows={props.products}
           end={["Total", props.total]}

package/src/blocks/Payment/Confirmation.tsx

@@ -64,7 +64,7 @@ export const ConfirmationPage: React.FunctionComponent<
         </div>
         {props.products && (
           <HawaTable
-            lang={props.lang}
+            direction={isArabic ? "rtl" : "ltr"}
             columns={["Product", "Price"]}
             rows={props.products}
             // end={["Total", props.total]}

package/src/elements/HawaTable.tsx

@@ -3,9 +3,8 @@ import { BsThreeDotsVertical } from "react-icons/bs"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 // TODO: make action click return row
-
+// TODO: make action column width max fit
 type TableTypes = {
-  lang?: any
   columns: any[string]
   actions?: ActionItems[][]
   direction?: "rtl" | "ltr"
@@ -41,7 +40,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   bordersWidth = "1",
   ...props
 }) => {
-  let isArabic = props.lang === "ar"
+  let isRTL = direction === "rtl"
 
   let sizeStyles = {
     normal: "py-3 px-6",
@@ -52,13 +51,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
     <div className="relative">
       <table
         className={clsx(
-          "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`
+          "w-full rounded bg-layoutPrimary-500 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">
@@ -85,60 +78,65 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
           </tr>
         </thead>
         <tbody
-        // style={{
-        //   borderWidth: bordersWidth,
-        //   border: "1px solid black",
-        // }}
-        // className="bg-yellow-400"
+        // className={customColor ? `bg-${customColor}` : "bg-transparent"}
         >
           {/* Table Rows */}
           {props.rows ? (
             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
+                    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 (
                       <td
                         key={i}
                         className={clsx(
+                          sizeStyles[size],
                           highlightFirst && firstCell
                             ? "font-bold"
                             : "font-normal",
-                          lastRow && firstCell ? "rounded-b" : "",
-                          firstCell ? "rounded-br-none" : "",
-                          lastCell ? "rounded-bl-none" : "",
-                          sizeStyles[size],
-                          !firstCell &&
-                            (borders === "cols" || borders === "inner")
-                            ? `border-l border-l-[${bordersWidth}px]`
+                          isRTLFirstCell
+                            ? "rounded-bl-none rounded-br"
+                            : isRTLLastCell
+                            ? "rounded-br-none rounded-bl"
+                            : isLTRFirstCell
+                            ? "rounded-br-none rounded-bl"
+                            : isLTRLastCell
+                            ? "rounded-bl-none rounded-br"
                             : "",
 
-                          // borders === "all"
-                          //   ? `border border-[${bordersWidth}px]`
-                          //   : "",
-                          props.actions
-                            ? `border-r border-r-[${bordersWidth}px]`
+                          !firstCell &&
+                            !lastCell &&
+                            (borders === "cols" || borders === "inner")
+                            ? `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}
@@ -148,8 +146,11 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                   })}
                   {props.actions && size !== "small" ? (
                     <td
-                      align={isArabic ? "right" : "left"}
-                      className={lastRow ? "rounded-br" : ""}
+                      align={isRTL ? "right" : "left"}
+                      className={clsx(
+                        isRTL && lastRow ? "rounded-br-none rounded-bl" : "",
+                        !isRTL && lastRow ? "rounded-bl-none rounded-br" : ""
+                      )}
                     >
                       <div className="flex items-center justify-center">
                         <HawaMenu
@@ -171,9 +172,14 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
               )
             })
           ) : (
-            <tr>
+            <tr className="bg-transparent">
               <td colSpan={props.columns.length}>
-                <div className="w-full bg-white p-5 text-center">
+                <div
+                  className={clsx(
+                    "w-full rounded-b bg-white p-5 text-center",
+                    customColor ? `bg-${customColor}` : "bg-white"
+                  )}
+                >
                   {props.noDataText}
                 </div>
               </td>

package/src/styles.css

@@ -1268,11 +1268,14 @@ video {
 .rounded-br-lg {
   border-bottom-right-radius: 0.5rem;
 }
+.rounded-br {
+  border-bottom-right-radius: var(--border-radius);
+}
 .rounded-br-none {
   border-bottom-right-radius: 0px;
 }
-.rounded-br {
-  border-bottom-right-radius: var(--border-radius);
+.rounded-bl {
+  border-bottom-left-radius: var(--border-radius);
 }
 .rounded-tl-none {
   border-top-left-radius: 0px;
@@ -1840,19 +1843,10 @@ 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);
 }