@sikka/hawa 0.0.213 → 0.0.214

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.213",
+  "version": "0.0.214",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -26,9 +26,9 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "start-storybook -p 6006 -s public",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook",
     "generate-css": "postcss src/tailwind.css -o src/styles.css && mkdir -p dist && cp src/styles.css dist/",
     "deploy-storybook": "storybook-to-ghpages",
+    "build-storybook": "build-storybook",
     "build-lib": "rollup -c",
     "build:styles": " node tools/build-styles"
   },

package/src/blocks/Misc/Newsletter.tsx

@@ -21,10 +21,10 @@ export const Newsletter: React.FunctionComponent<TNewsletter> = ({
     <HawaContainer variant={variant} centered={true}>
       <div className="p-4 pt-0">
         <h1 className="font-bold">
-          {texts.wantToStayUpdated ?? "Want to stay updated?"}
+          {texts?.wantToStayUpdated ?? "Want to stay updated?"}
         </h1>
         <span>
-          {texts.subscribeToNewsletter ?? "Subscribe to our newsletter"}
+          {texts?.subscribeToNewsletter ?? "Subscribe to our newsletter"}
         </span>
       </div>
       <form
@@ -42,7 +42,7 @@ export const Newsletter: React.FunctionComponent<TNewsletter> = ({
           margin="none"
         />
         <HawaButton size="full" margins="none">
-          {texts.submit ?? "Submit"}
+          {texts?.submit ?? "Submit"}
         </HawaButton>
       </form>
     </HawaContainer>

package/src/blocks/Misc/NotFound.tsx

@@ -5,14 +5,14 @@ import { HawaContainer } from "../../layout"
 type NotFoundTypes = {
   variant?: "outlined" | "contained" | "neobrutalism"
   texts?: {
-    pageNotFound: string
-    ifLost: string
-    home: string
+    pageNotFound?: string
+    ifLost?: string
+    home?: string
   }
 }
 
 export const NotFound: React.FunctionComponent<NotFoundTypes> = ({
-  variant,
+  variant = "contained",
   texts,
 }) => {
   return (
@@ -20,13 +20,13 @@ export const NotFound: React.FunctionComponent<NotFoundTypes> = ({
       <div className="flex flex-col items-center dark:text-white">
         <div className="text-center text-6xl font-bold ">404</div>
         <div className="m-2 text-center text-xl font-bold ">
-          {texts.pageNotFound ?? "Page Not Found"}
+          {texts?.pageNotFound ?? "Page Not Found"}
         </div>
         <div className="text-center ">
-          {texts.ifLost ?? "If you're lost please contact us help@sikka.io"}
+          {texts?.ifLost ?? "If you're lost please contact us help@sikka.io"}
         </div>
         <HawaButton color="primary" width="full">
-          {texts.home ?? "Home"}
+          {texts?.home ?? "Home"}
         </HawaButton>
       </div>
     </HawaContainer>

package/src/blocks/Payment/CheckoutForm.tsx

@@ -67,6 +67,7 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
         </div>
         <div className="rounded border border-gray-300">
           <HawaTable
+            pagination={false}
             direction={isArabic ? "rtl" : "ltr"}
             columns={[
               { hidden: false, value: "Product" },

package/src/elements/HawaLogoButton.tsx

@@ -28,6 +28,7 @@ export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
           src={
             "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
           }
+          className="h-6"
         />
       )
       break

package/src/elements/HawaTable.tsx

@@ -11,6 +11,7 @@ import { BsChevronRight, BsFilter, BsPlus, BsThreeDots } from "react-icons/bs"
 // TODO: pass the onSearch handler to the parent
 
 type TableTypes = {
+  pagination?: boolean
   columns: any[string]
   actions?: ActionItems[][]
   direction?: "rtl" | "ltr"
@@ -47,6 +48,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   highlightFirst = false,
   direction = "ltr",
   bordersWidth = "1",
+  pagination = true,
   ...props
 }) => {
   const [perPage, setPerPage] = useState(10)
@@ -256,71 +258,92 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
         </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 ">
-            {/* Previous Page Button */}
-            <div
-              className={clsx(
-                "flex h-6 w-6 rotate-180 items-center justify-center rounded bg-gray-100 p-1  text-xs hover:bg-layoutPrimary-700 "
-              )}
-              onClick={() =>
-                page <= 1 ? setPage(range.length) : setPage(page - 1)
-              }
-            >
-              <BsChevronRight />
-            </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-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
-                            : "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)
+      {pagination && (
+        <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 items-center justify-center rounded bg-gray-100 p-1  text-xs hover:bg-layoutPrimary-700 "
+                )}
+                onClick={() =>
+                  page <= 1 ? setPage(range.length) : setPage(page - 1)
+                }
+              >
+                <BsChevronRight />
+              </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-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                              : "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-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                              : "bg-gray-100"
+                          )}
+                          onClick={() => setPage(el)}
+                        >
+                          {el}
+                        </button>
+                      )
                     }
-                  }}
-                />
-              )}
-              {/* The last page */}
-              {range?.length > 6 &&
-                range.map((el, index) => {
-                  if (index >= range.length - 1) {
+                  })}
+
+                {/* All Pages if less than 6 pages */}
+                {range?.length <= 6 &&
+                  range.map((el, index) => {
                     return (
                       <button
                         key={index}
@@ -335,78 +358,59 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                         {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",
-                        page === el
-                          ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
-                          : "bg-gray-100"
-                      )}
-                      onClick={() => setPage(el)}
-                    >
-                      {el}
-                    </button>
-                  )
-                })}
-            </div>
-            {/* Next Page Button */}
-            <div
-              onClick={() =>
-                page >= range.length ? setPage(1) : setPage(page + 1)
-              }
-              className={clsx(
-                "flex h-6 w-6 items-center  justify-center rounded bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700 "
-              )}
-            >
-              <BsChevronRight />
-            </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>
+              {/* Next Page Button */}
+              <div
+                onClick={() =>
+                  page >= range.length ? setPage(1) : setPage(page + 1)
+                }
+                className={clsx(
+                  "flex h-6 w-6 items-center  justify-center rounded bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700 "
+                )}
+              >
+                <BsChevronRight />
+              </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 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>
+              <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

@@ -5,7 +5,7 @@ import React, { useState } from "react"
 
 type TabsTypes = {
   options?: any
-  onChangeTab?: any
+  onChangeTab?: (option) => void
   defaultValue?: any
   orientation?: "horizontal" | "vertical"
   direction?: "rtl" | "ltr"
@@ -101,7 +101,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
               aria-current="page"
               onClick={() => {
                 setSelectedOption(opt.value)
-                props.onChangeTab(opt)
+                props?.onChangeTab(opt)
               }}
               className={clsx(
                 opt.value === selectedOption

package/src/layout/HawaAppLayout.tsx

@@ -406,8 +406,9 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                                 : 0,
                           }}
                         >
-                          {dItem.subItems?.map((subIt) => (
+                          {dItem.subItems?.map((subIt, s) => (
                             <div
+                              key={s}
                               className={clsx(
                                 "flex flex-row gap-2 overflow-x-clip  rounded p-2 px-2 text-xs",
                                 isRTL ? "text-right" : "text-left",