@sikka/hawa 0.0.94 → 0.0.96

package/src/elements/{HawaCopyrights.js → HawaCopyrights.tsx}

@@ -1,7 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react"
 
-export const HawaCopyrights = (props) => {
+type CopyRightsTypes = {
+  withLogo: any
+  lang: any
+  version: any
+}
 
+export const HawaCopyrights: React.FunctionComponent<CopyRightsTypes> = (
+  props
+) => {
   return (
     <div
       style={{
@@ -11,15 +18,15 @@ export const HawaCopyrights = (props) => {
         color: "grey",
         fontSize: 14,
         marginTop: 10,
-        marginBottom: 10
+        marginBottom: 10,
       }}
     >
       {props.withLogo ? (
-        <a href={"https://qawaim.app/" + lang}>
+        <a href={"https://qawaim.app/" + props.lang}>
           <div style={{ cursor: "pointer" }}>
             <image
-              src="/qawaim-logo.svg"
-              alt="Qawaim"
+              // src="/qawaim-logo.svg"
+              // alt="Qawaim"
               width={100}
               height={50}
             />
@@ -29,5 +36,5 @@ export const HawaCopyrights = (props) => {
 
       <div>{props.version}</div>
     </div>
-  );
-};
+  )
+}

package/src/elements/HawaDrawer.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from "react"
+import { FaDailymotion } from "react-icons/fa"
+import clsx from "clsx"
+
+type DrawerTypes = {
+  open: any
+  setOpen: any
+  position: any
+  heading: any
+  children: any
+}
+
+export const HawaDrawer: React.FunctionComponent<DrawerTypes> = ({
+  open,
+  setOpen,
+  position,
+  heading,
+  children,
+}) => {
+  const leftDrawer =
+    "w-60 z-50 h-full absolute overflow-x-hidden top-0 left-0 border-r bg-white"
+  const rightDrawer =
+    "w-60 z-50 h-full absolute overflow-x-hidden top-0 right-0 border-l bg-white"
+
+  //   useEffect(() => {
+  //     setOpenDrawer(true);
+  //   }, [open]);
+
+  const childrenWithProps = React.Children.map(children, (child) => {
+    // if (
+    //   // React.isValidElement(child) &&
+    //   // child.type.name == "DrawerHeader"
+    // ) {
+    //   return React.cloneElement(child, {
+    //     // setOpen: setOpen,
+    //     // children: child.props.children,
+    //   })
+    // }
+    // if (React.isValidElement(child) && child.type.name == "DrawerBody") {
+    // return React.cloneElement(child, { children: child.props })
+    // }
+    // if (React.isValidElement(child) && child.type.name == "DrawerFooter") {
+    // return React.cloneElement(child, { children: child.props.children })
+    // }
+  })
+
+  const drawerClass =
+    open && position == "left"
+      ? clsx("block", leftDrawer)
+      : open && position == "right"
+      ? clsx("block", rightDrawer)
+      : "hidden"
+
+  return <div className={drawerClass}>{childrenWithProps}</div>
+}
+
+export const DrawerHeader = (props: any) => {
+  return (
+    <div className="  flex w-full flex-row items-center justify-between border-b py-4 px-1">
+      {props.children}
+      <div
+        className="justify-self-end rounded border p-1 hover:cursor-pointer"
+        onClick={() => {
+          console.log("running")
+          props.setOpen(false)
+        }}
+      >
+        <FaDailymotion size={20} strokeWidth={2} />
+      </div>
+    </div>
+  )
+}
+
+export const DrawerBody = (props: any) => {
+  return <div className="p-1">{props.children}</div>
+}
+
+export const DrawerFooter = (props: any) => {
+  return (
+    <div className="absolute bottom-0 w-full border-t py-4 px-1">
+      {props.children}
+    </div>
+  )
+}

package/src/elements/{HawaDrawerItem.js → HawaDrawerItem.tsx}

@@ -1,10 +1,15 @@
-import React from "react";
+import React from "react"
 
-const HawaDrawerItem = (props) => {
+type DrawerItemTypes = {
+  action: any
+  icon?: any
+  text: any
+}
+const HawaDrawerItem: React.FunctionComponent<DrawerItemTypes> = (props) => {
   let withIcon =
-    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700";
+    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
   let withoutIcon =
-    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700";
+    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
 
   return (
     <li onClick={props.action}>
@@ -22,7 +27,7 @@ const HawaDrawerItem = (props) => {
         <span className="ml-3">{props.text}</span>
       </div>
     </li>
-  );
-};
+  )
+}
 
-export default HawaDrawerItem;
+export default HawaDrawerItem

package/src/elements/{HawaItemCard.js → HawaItemCard.tsx}

@@ -1,47 +1,57 @@
-import React, { useEffect } from "react";
-import PropTypes from "prop-types";
-import { useState } from "react";
+import React, { useEffect } from "react"
+import { useState } from "react"
 
-export const HawaItemCard = ({
+type ItemCardTypes = {
+  actions: any
+  content: any
+  headerActions: any
+  //     label: PropTypes.string,
+  //     action: PropTypes.func,
+  header: any
+  lang: string
+  onCardClick?: any
+}
+
+export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
   actions,
   content,
   headerActions,
   header,
   ...props
 }) => {
-  const [openActionHeader, setOpenActionHeader] = useState(false);
+  const [openActionHeader, setOpenActionHeader] = useState(false)
 
   function handleOpenActionHeader() {
-    setOpenActionHeader(!openActionHeader);
+    setOpenActionHeader(!openActionHeader)
   }
 
-  useEffect(() => {
+  useEffect((): any => {
     window.onclick = () => {
-      console.log("clicking, state = ", openActionHeader);
+      console.log("clicking, state = ", openActionHeader)
       if (openActionHeader) {
-        setOpenActionHeader(false);
+        setOpenActionHeader(false)
       }
-    };
-    return () => (window.onClick = null);
-  }, [openActionHeader]);
+    }
+    return () => (window.onclick = null)
+  }, [openActionHeader])
 
   return (
     <div
-      className="block pt-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md  dark:bg-gray-800 dark:border-gray-700 "
+      className="relative block max-w-sm rounded-lg border border-gray-200 bg-white pt-6 shadow-md  dark:border-gray-700 dark:bg-gray-800 "
       {...props}
     >
       {headerActions && (
-        <div className="relative flex justify-end pr-6">
+        <div className="absolute right-0 top-0 flex justify-end pt-3 pr-3">
           <button
             id="dropdownButton"
             data-dropdown-toggle="dropdown"
-            className="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
+            className="inline-block rounded-lg text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
             type="button"
             onClick={handleOpenActionHeader}
           >
             <span className="sr-only">Open dropdown</span>
             <svg
-              className="w-6 h-6"
+              className="h-6 w-6"
               aria-hidden="true"
               fill="currentColor"
               viewBox="0 0 20 20"
@@ -54,20 +64,20 @@ export const HawaItemCard = ({
             id="dropdown"
             className={`absolute ${
               openActionHeader ? "block" : "hidden"
-            } right-0 top-7 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700`}
+            } right-0 top-7 z-10 w-44 list-none divide-y divide-gray-100 rounded bg-white text-base shadow dark:bg-gray-700`}
           >
             <ul className="py-1" aria-labelledby="dropdownButton">
-              {headerActions.map(({ label, action }) => {
+              {headerActions.map((singleAction: any) => {
                 return (
-                  <li onClick={action}>
+                  <li onClick={singleAction.action}>
                     <a
                       href="#"
-                      className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                      className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
                     >
-                      {label}
+                      {singleAction.label}
                     </a>
                   </li>
-                );
+                )
               })}
             </ul>
           </div>
@@ -81,18 +91,7 @@ export const HawaItemCard = ({
           {content}
         </p>
       </div>
-      <div className="p-3 mt-6 rounded-b-lg flex justify-end">{actions}</div>
+      <div className="mt-6 flex justify-end rounded-b-lg p-3">{actions}</div>
     </div>
-  );
-};
-HawaItemCard.propTypes = {
-  lang: PropTypes.string,
-  actions: PropTypes.element,
-  content: PropTypes.element,
-  headerActions: PropTypes.arrayOf({
-    label: PropTypes.string,
-    action: PropTypes.func
-  }),
-  header: PropTypes.element,
-  onCardClick: PropTypes.func
-};
+  )
+}

package/src/elements/{HawaLogoButton.js → HawaLogoButton.tsx}

@@ -1,9 +1,28 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from "react"
 
-export const HawaLogoButton = (props) => {
-  let isArabic = props.lang === "ar";
-  let logoElement = "";
+type LogoButtonTypes = {
+  lang?: any
+  logo?: any
+  //   logo: PropTypes.oneOf([
+  //     "google",
+  //     "github",
+  //     "twitter",
+  //     "wallet",
+  //     "googlepay",
+  //     "applepay",
+  //     "stcpay",
+  //     "visa/master",
+  //     "paypal",
+  //     "mada",
+  //   ]),
+  onClick?: any
+  buttonText?: any
+}
+export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
+  props
+) => {
+  let isArabic = props.lang === "ar"
+  let logoElement: any = ""
   switch (props.logo?.toLowerCase()) {
     case "google":
       logoElement = (
@@ -12,8 +31,8 @@ export const HawaLogoButton = (props) => {
             "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
           }
         />
-      );
-      break;
+      )
+      break
     case "github":
       logoElement = (
         <svg
@@ -21,12 +40,12 @@ export const HawaLogoButton = (props) => {
           height="32px"
           viewBox="0 0 32 32"
           xmlns="http://www.w3.org/2000/svg"
-          className="w-7 h-7"
+          className="h-7 w-7"
         >
           <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" />
         </svg>
-      );
-      break;
+      )
+      break
     case "twitter":
       logoElement = (
         <svg
@@ -34,7 +53,7 @@ export const HawaLogoButton = (props) => {
           xmlns="http://www.w3.org/2000/svg"
           x="0px"
           y="0px"
-          className="w-5 h-5"
+          className="h-5 w-5"
           viewBox="0 0 512.002 512.002"
         >
           <path
@@ -53,16 +72,16 @@ export const HawaLogoButton = (props) => {
      C507.7,94.204,503.76,93.294,500.398,94.784z"
           />
         </svg>
-      );
-      break;
+      )
+      break
     case "mada":
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
           className="h-6"
         />
-      );
-      break;
+      )
+      break
     case "stcpay":
       logoElement = (
         <img
@@ -70,40 +89,40 @@ export const HawaLogoButton = (props) => {
           // height={20}
           className="h-6"
         />
-      );
-      break;
+      )
+      break
     case "visa/master":
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
           className="h-6"
         />
-      );
-      break;
+      )
+      break
     case "paypal":
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
           className="h-6"
         />
-      );
-      break;
+      )
+      break
     case "googlepay":
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
           className="h-6"
         />
-      );
-      break;
+      )
+      break
     case "applepay":
       logoElement = (
         <img
           src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
           className="h-11"
         />
-      );
-      break;
+      )
+      break
     case "wallet":
       logoElement = (
         <svg
@@ -124,48 +143,25 @@ export const HawaLogoButton = (props) => {
             />
           </g>
         </svg>
-      );
-      break;
+      )
+      break
 
     default:
-      break;
+      break
   }
   return (
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       {...props}
-      className="bg-white rounded-xl my-2 h-11 flex max-w-sm w-full flex-row justify-center align-middle"
+      className="my-2 flex h-11 w-full max-w-sm flex-row justify-center rounded-xl bg-white align-middle"
     >
-      <div className="h-full flex flex-row justify-end items-center">
+      <div className="flex h-full flex-row items-center justify-end">
         {logoElement}
       </div>
       <div style={{ width: 10 }} />
-      <div className="h-full flex flex-col justify-center items-start">
+      <div className="flex h-full flex-col items-start justify-center">
         {props.buttonText}
       </div>
     </button>
-  );
-};
-
-HawaLogoButton.propTypes = {
-  lang: PropTypes.string,
-  /**
-   * The logo/icon of the button
-   */
-  logo: PropTypes.oneOf([
-    "google",
-    "github",
-    "twitter",
-    "wallet",
-    "googlepay",
-    "applepay",
-    "stcpay",
-    "visa/master",
-    "paypal",
-    "mada"
-  ]),
-  /**
-   * The text next to the logo in the button
-   */
-  buttonText: PropTypes.string
-};
+  )
+}

package/src/elements/HawaMenu.tsx

@@ -0,0 +1,75 @@
+
+type MenuTypes = {
+  popMenuID: any
+  menuItems: any
+  //
+  //         icon: PropTypes.element,
+  //         label: PropTypes.string,
+  //        action: PropTypes.func,
+  //
+  withHeader: any
+  withIcons: any
+  headerTitle: any
+  headerSubtitle: any
+  open: any
+  handleClose: any
+  anchor: any
+}
+
+export const HawaMenu: React.FunctionComponent<MenuTypes> = ({
+  popMenuID,
+  menuItems,
+  withHeader,
+  withIcons,
+  headerTitle,
+  headerSubtitle,
+  open,
+  handleClose,
+}) => {
+  return (
+    <div>
+      <button
+        className="w-44 rounded border bg-blue-700 p-2 text-white"
+        onClick={() => handleClose(!open)}
+      >
+        Menu Dropdown
+      </button>
+      <div
+        id={popMenuID}
+        className={`${
+          open ? "block" : "hidden"
+        } z-10 w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:bg-gray-700`}
+      >
+        {withHeader && (
+          <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
+            <div>{headerTitle}</div>
+            <div className="truncate font-medium">{headerSubtitle}</div>
+          </div>
+        )}
+        {menuItems.map((group: any) => {
+          return (
+            <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
+              {group.map((item: any) => {
+                return (
+                  <li
+                    onClick={item.action}
+                    className={
+                      item.button
+                        ? "mx-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
+                        : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-100 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
+                    }
+                  >
+                    {withIcons && (
+                      <div className="mr-2 rtl:ml-2">{item.icon}</div>
+                    )}
+                    {item.label}
+                  </li>
+                )
+              })}
+            </ul>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/elements/{HawaModal.js → HawaModal.tsx}

@@ -1,50 +1,59 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from "react"
 
-export const HawaModal = ({
+type ModalTypes = {
+  open: any
+  title: any
+  onClose: any
+  closeOnClickOutside: any
+  modalID: any
+  children: any
+  actions: any
+}
+export const HawaModal: React.FunctionComponent<ModalTypes> = ({
   open,
   title,
   onClose,
   closeOnClickOutside,
   ...props
 }) => {
-  useEffect(() => {
+  useEffect((): any => {
     if (closeOnClickOutside) {
       window.onclick = () => {
-        console.log("open : ", open);
+        console.log("open : ", open)
         if (open) {
-          console.log("Im clicing");
-          onClose();
+          console.log("Im clicing")
+          onClose()
         }
-      };
+      }
     }
-    return () => (window.onClick = null);
-  }, [open]);
+    return () => (window.onclick = null)
+  }, [open])
   return (
     <div
       id={props.modalID}
-      tabindex="-1"
+      tabIndex={-1}
       aria-hidden="true"
       className={`${
         open ? "block" : "hidden"
-      } overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center`}
+      } h-modal fixed top-0 right-0 left-0 z-50 w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0 md:h-full`}
     >
-      <div className="relative p-4 w-full max-w-2xl h-full md:h-auto">
-        <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
-          <div className="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
+      <div className="relative h-full w-full max-w-2xl p-4 md:h-auto">
+        <div className="relative rounded-lg bg-white shadow dark:bg-gray-700">
+          <div className="flex items-start justify-between rounded-t border-b p-4 dark:border-gray-600">
             <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
               {title}
             </h3>
             <button
               type="button"
-              className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              className="ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
               data-modal-toggle="defaultModal"
               onClick={() => {
-                onClose();
+                onClose()
               }}
             >
               <svg
                 aria-hidden="true"
-                className="w-5 h-5"
+                className="h-5 w-5"
                 fill="currentColor"
                 viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg"
@@ -58,12 +67,12 @@ export const HawaModal = ({
               <span className="sr-only">Close modal</span>
             </button>
           </div>
-          <div className="p-6 space-y-6">{props.children}</div>
-          <div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
+          <div className="space-y-6 p-6">{props.children}</div>
+          <div className="flex items-center space-x-2 rounded-b border-t border-gray-200 p-6 dark:border-gray-600">
             {props.actions}
           </div>
         </div>
       </div>
     </div>
-  );
-};
+  )
+}