@sikka/hawa 0.0.213 → 0.0.215

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.213",
+  "version": "0.0.215",
   "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/HawaAlert.tsx

@@ -87,8 +87,9 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
       <span>{" " + props.text}</span>
       {props.actions && (
         <div className="mt-2 flex flex-row gap-2">
-          {props.actions.map((act) => (
+          {props.actions.map((act, index) => (
             <HawaButton
+              key={index}
               variant={act.variant}
               onClick={act.onClick()}
               margins="none"

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/HawaMenu.tsx

@@ -175,13 +175,17 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
               key={o}
               className="bg-layout-1200 flex flex-col gap-1 p-1 text-gray-700 dark:text-gray-200"
             >
-              {group?.map((item) => {
+              {group?.map((item, indx) => {
                 return item.element ? (
-                  <li className="cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white">
+                  <li
+                    key={indx}
+                    className="cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
+                  >
                     {item.element}
                   </li>
                 ) : (
                   <li
+                    key={indx}
                     onClick={() => item?.action(actionedItem)}
                     className={clsx(
                       item.isButton

package/src/elements/HawaPanelTabs.tsx

@@ -40,9 +40,10 @@ export const HawaPanelTabs: React.FunctionComponent<PanelTabsTypes> = (
         </ul>
       </div>
       <div id="myTabContent">
-        {props.options.map((option: any) => {
+        {props.options.map((option: any, indx) => {
           return (
             <div
+              key={indx}
               className="rounded bg-gray-50 p-4 dark:bg-gray-800"
               id={option.value}
               role="tabpanel"

package/src/elements/HawaSnackbar.tsx

@@ -90,8 +90,9 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
           <div className="text-sm font-normal">{description}</div>
           {actions && (
             <div className="mt-2 flex flex-row gap-2">
-              {actions.map((act) => (
+              {actions.map((act, i) => (
                 <HawaButton
+                  key={i}
                   variant={act.variant}
                   onClick={act.onClick()}
                   margins="none"

package/src/elements/HawaStepper.tsx

@@ -29,7 +29,10 @@ export const HawaStepper: React.FunctionComponent<THawaTimeline> = ({
     >
       {props.steps.map((step: any, i: number) => {
         return (
-          <div className="my-2 flex w-auto flex-row flex-wrap justify-start  ">
+          <div
+            key={i}
+            className="my-2 flex w-auto flex-row flex-wrap justify-start  "
+          >
             <div
               className={
                 orientation === "vertical"

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
@@ -127,9 +127,9 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       </ul>
 
       <div className="flex-1 transition-all">
-        {props.options.map((tab) => (
+        {props.options.map((tab, i) => (
           <div
-            key={tab.value}
+            key={i}
             className={clsx(selectedOption === tab.value ? "" : "hidden")}
           >
             {tab.content}

package/src/elements/InvoiceAccordion.tsx

@@ -101,8 +101,8 @@ export const InvoiceAccordion: React.FunctionComponent<
           )}
         >
           <div className="border-b pb-2">{props.invoiceDescription}</div>
-          {props.products?.map((product) => (
-            <div className="flex flex-row border-b  pb-4">
+          {props.products?.map((product, i) => (
+            <div key={i} className="flex flex-row border-b  pb-4">
               <div className="w-full">
                 <InvoiceItemProp start label={texts.plan} text={product.plan} />
               </div>

package/src/elements/SubsectionList.tsx

@@ -24,11 +24,12 @@ export const SubsectionList: React.FunctionComponent<SubsectionListTypes> = ({
   const [selectedSection, setSelectedSection] = useState(null)
   return (
     <div className="w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 ">
-      {subsections.map((ss) => (
-        <div className="my-0">
+      {subsections.map((ss, i) => (
+        <div key={i} className="my-0">
           {ss.title && <div className="my-4 font-bold">{ss.title}</div>}
-          {ss.sections.map((s) => (
+          {ss.sections.map((s, i) => (
             <SubsectionItem
+              key={i}
               onItemClick={() => setSelectedSection(s.value)}
               selected={selectedSection}
               value={s.value}

package/src/layout/AppSidebar.tsx

@@ -21,8 +21,9 @@ export const AppSidebar: React.FC<Props> = ({ isOpen, onClose, items }) => {
           Close
         </button>
         <nav>
-          {items.map((item) => (
+          {items.map((item, i) => (
             <a
+              key={i}
               href="#"
               onClick={item.onClick}
               className="block p-4 font-bold text-white hover:bg-gray-700 hover:text-gray-400"

package/src/layout/HawaAppLayout.tsx

@@ -333,9 +333,9 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
           </div>
           {/* Drawer Items */}
           <div className="mt-14 mb-8">
-            {props.drawerItems?.map((dSection, j) => (
+            {props.drawerItems?.map((dSection, dIndex) => (
               <div
-                key={j}
+                key={dIndex}
                 className={clsx("flex flex-col items-stretch justify-center")}
               >
                 {dSection?.map((dItem, i) => {
@@ -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",
@@ -434,7 +435,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                     </div>
                   )
                 })}
-                {j !== props.drawerItems.length - 1 && (
+                {dIndex !== props.drawerItems.length - 1 && (
                   <div className="my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 text-center "></div>
                 )}
               </div>

package/src/layout/HawaBottomAppBar.tsx

@@ -24,8 +24,9 @@ export const HawaBottomAppBar: React.FunctionComponent<BottomAppBarTypes> = (
         className="flex w-full flex-row items-center justify-evenly rounded bg-gray-200"
         //   variant="outlined"
       >
-        {props.appBarContent.map((singleContent: any) => (
+        {props.appBarContent.map((singleContent: any, i) => (
           <div
+            key={i}
             className="m-1 flex h-full w-full flex-col items-center justify-center rounded p-2 transition-all hover:cursor-pointer hover:bg-buttonPrimary-700 hover:text-white"
             onClick={singleContent.action}
           >

package/src/layout/HawaSiteLayout.tsx

@@ -102,8 +102,11 @@ export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
       >
         {size > 600 ? (
           <div className="flex flex-row gap-2 ">
-            {props.navItems?.map(({ label }) => (
-              <div className="rounded bg-none p-2 transition-all hover:bg-gray-100">
+            {props.navItems?.map(({ label }, i) => (
+              <div
+                key={i}
+                className="rounded bg-none p-2 transition-all hover:bg-gray-100"
+              >
                 {label}
               </div>
             ))}