@sikka/hawa 0.0.135 → 0.0.136

package/package.json

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

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -10,9 +10,9 @@ const CheckMark = () => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
+      fillRule="evenodd"
       d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-      clip-rule="evenodd"
+      clipRule="evenodd"
     ></path>
   </svg>
 )
@@ -26,9 +26,9 @@ const UncheckMark = () => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
+      fillRule="evenodd"
       d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-      clip-rule="evenodd"
+      clipRule="evenodd"
     ></path>
   </svg>
 )

package/src/elements/DragDropImages.tsx

@@ -124,9 +124,9 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill-rule="evenodd"
+              fillRule="evenodd"
               d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
           <span className="sr-only">Close modal</span>
@@ -157,7 +157,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       <div
         // variant="drop-area"
         {...getRootProps({
-          style: {backgroundColor : isDragActive ?  "white" : "inherit" }
+          style: { backgroundColor: isDragActive ? "white" : "inherit" },
         })}
         // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
         className="flex flex-col justify-center rounded-xl border border-dashed border-black"

package/src/elements/HawaAccordian.tsx

@@ -38,15 +38,17 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
           <span>{props.title}</span>
           <svg
             data-accordion-icon=""
-            className={`h-6 w-6 ${collapse ? "" : "rotate-180"}  shrink-0 transition-all`}
+            className={`h-6 w-6 ${
+              collapse ? "" : "rotate-180"
+            }  shrink-0 transition-all`}
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill-rule="evenodd"
+              fillRule="evenodd"
               d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
         </button>

package/src/elements/HawaDrawer.tsx

@@ -50,14 +50,24 @@ export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
     }
   })
 
-  const drawerClass =
-    open && position == "left"
-      ? clsx("block", leftDrawer)
-      : open && position == "right"
-      ? clsx("block", rightDrawer)
-      : "hidden"
-
-  return <div className={drawerClass}>{childrenWithProps}</div>
+  // const drawerClass =
+  //   open && position == "left"
+  //     ? clsx("block", leftDrawer)
+  //     : open && position == "right"
+  //     ? clsx("block", rightDrawer)
+  //     : "hidden w-0 "
+
+  return (
+    <div
+      className={clsx(
+        position == "left" ? leftDrawer : rightDrawer,
+        "overflow-y-clip transition-all",
+        open ? "w-60" : "w-0"
+      )}
+    >
+      {childrenWithProps}
+    </div>
+  )
 }
 
 type TDrawerHeader = {
@@ -101,3 +111,33 @@ export const DrawerFooter = (props: TDrawerFooter) => {
     </div>
   )
 }
+
+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"
+  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"
+
+  return (
+    <li onClick={props.action}>
+      <div className={props.icon ? withIcon : withoutIcon}>
+        {/* <svg
+          aria-hidden="true"
+          className="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
+          <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
+        </svg> */}
+        <span className="ml-3">{props.text}</span>
+      </div>
+    </li>
+  )
+}

package/src/elements/HawaModal.tsx

@@ -65,9 +65,9 @@ export const HawaModal: React.FunctionComponent<ModalTypes> = ({
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                clip-rule="evenodd"
+                clipRule="evenodd"
               ></path>
             </svg>
             <span className="sr-only">Close modal</span>

package/src/elements/HawaPricingCard.tsx

@@ -107,9 +107,9 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
               >
                 <title>Check icon</title>
                 <path
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                   d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                 ></path>
               </svg>
               <span className="flex items-center  text-center font-normal leading-tight text-gray-500  dark:text-gray-400">
@@ -118,26 +118,6 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
             </li>
           )
         })}
-
-        {/* <li className="flex space-x-3 line-through decoration-gray-500">
-            <svg
-              aria-hidden="true"
-              className="flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>Check icon</title>
-              <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-            <span className="text-base font-normal leading-tight text-gray-500">
-              Sketch Files
-            </span>
-          </li> */}
       </ul>
       <button
         type="button"

package/src/elements/HawaSnackbar.tsx

@@ -1,11 +1,13 @@
 import clsx from "clsx"
-import React, { FC } from "react"
+import React, { FC, useEffect, useRef, useState } from "react"
 import { HawaButton } from "./HawaButton"
 
 type THawaSnackBar = {
   severity: "info" | "warning" | "error" | "success" | "none"
   title: string
   description: string
+  handleClose?: () => void
+  duration?: number
   position?:
     | "top-left"
     | "top-center"
@@ -28,6 +30,8 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
   severity = "info",
   position = "bottom-left",
   actions,
+  handleClose,
+  duration,
 }) => {
   let defaultStyle =
     "fixed flex flex-row items-top p-1 w-full max-w-xs rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
@@ -46,50 +50,81 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
     "bottom-right": "bottom-4 right-4",
     "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
   }
+
+  const [closed, setClosed] = useState(false)
+  const toastRef = useRef(null)
+  useEffect(() => {
+    if (duration) {
+      //To change opacity and hide the component
+      const timeoutHide = setTimeout(() => {
+        setClosed(true)
+      }, duration)
+      //To destroy the component after hiding it
+      const timeoutDestroy = setTimeout(() => {
+        setClosed(true)
+        toastRef.current.removeChild(toastRef.current.children[0])
+      }, duration + 1000)
+
+      return () => {
+        clearTimeout(timeoutHide)
+        clearTimeout(timeoutDestroy)
+      }
+    }
+  }, [duration])
+
   return (
-    <div
-      id="toast-default"
-      role="alert"
-      className={clsx(defaultStyle, severities[severity], positions[position])}
-    >
-      <div className="p-3">
-        <div className="text-sm font-bold">{title}</div>
-        <div className="text-sm font-normal">{description}</div>
-        {actions && (
-          <div className="mt-2 flex flex-row gap-2">
-            {actions.map((act) => (
-              <HawaButton
-                variant={act.variant}
-                onClick={act.onClick()}
-                margins="none"
-              >
-                {act.label}
-              </HawaButton>
-            ))}
-          </div>
+    <div ref={toastRef}>
+      <div
+        id="toast-default"
+        role="alert"
+        className={clsx(
+          defaultStyle,
+          severities[severity],
+          positions[position],
+          "p-2 transition-all",
+          closed ? "opacity-0" : "opacity-100"
         )}
-      </div>
-      <button
-        type="button"
-        className="inline-flex h-8 w-8 rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
-        data-dismiss-target="#toast-default"
-        aria-label="Close"
       >
-        <span className="sr-only">Close</span>
-        <svg
-          aria-hidden="true"
-          className="h-5 w-5"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
+        <div className="p-3">
+          <div className="text-sm font-bold">{title}</div>
+          <div className="text-sm font-normal">{description}</div>
+          {actions && (
+            <div className="mt-2 flex flex-row gap-2">
+              {actions.map((act) => (
+                <HawaButton
+                  variant={act.variant}
+                  onClick={act.onClick()}
+                  margins="none"
+                >
+                  {act.label}
+                </HawaButton>
+              ))}
+            </div>
+          )}
+        </div>
+        <button
+          type="button"
+          className="inline-flex h-8 w-8 rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+          data-dismiss-target="#toast-default"
+          aria-label="Close"
+          onClick={() => setClosed(true)}
         >
-          <path
-            fill-rule="evenodd"
-            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-      </button>
+          <span className="sr-only">Close</span>
+          <svg
+            aria-hidden="true"
+            className="h-5 w-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            ></path>
+          </svg>
+        </button>
+      </div>
     </div>
   )
 }

package/src/elements/index.ts

@@ -15,18 +15,17 @@ export * from "./HawaAccordian"
 export * from "./DragDropImages"
 export * from "./DraggableCard"
 export * from "./HawaPhoneInput"
-export * from "./HawaDrawerItem"
 export * from "./HawaTooltip"
 export * from "./HawaTabs"
 export * from "./HawaModal"
 export * from "./HawaMenu"
-export * from "./HawaDrawer"
 export * from "./HawaCopyrights"
 export * from "./HawaTimeline"
 export * from "./Breadcrumb"
 export * from "./HawaStats"
 export * from "./HawaSpinner"
 export * from "./HawaRadio"
+export * from "./HawaDrawer"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/hooks/useBreakpoint.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react"
+
+const useBreakpoint = () => {
+  const [breakpoint, setBreakpoint] = useState(1200)
+  const resize = () => {
+    setBreakpoint(window.innerWidth)
+  }
+
+  useEffect(() => {
+    window.addEventListener("resize", resize)
+
+    return () => {
+      window.removeEventListener("resize", resize)
+    }
+  }, [])
+
+  return breakpoint
+}
+
+export default useBreakpoint

package/src/hooks/useDiscloser.ts

@@ -1,17 +1,14 @@
 import { useState } from "react"
 
-
 type TUseDiscloser = {
-    isOpen : boolean,
-    onOpen : () => void,
-    onClose : () => void
+  isOpen: boolean
+  onOpen: () => void
+  onClose: () => void
 }
 
-const useDiscloser = (value: boolean = false) : TUseDiscloser => {
+const useDiscloser = (value: boolean = false): TUseDiscloser => {
   const [open, setOpen] = useState<boolean>(value)
-
   const onOpen = () => setOpen(true)
-
   const onClose = () => setOpen(false)
 
   return {
@@ -21,5 +18,4 @@ const useDiscloser = (value: boolean = false) : TUseDiscloser => {
   }
 }
 
-
-export default useDiscloser;
+export default useDiscloser

package/src/layout/HawaAppLayout.tsx

@@ -57,9 +57,9 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                   d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                 ></path>
               </svg>
             </div>
@@ -124,7 +124,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
           // "overflow-scroll",
           "w-[calc(100%-3rem)]",
           "translate-x-[3rem]",
-          "bg-red-900 text-white",
+          // "bg-red-900 text-white",
           "m-0",
           props.topBar ? "mt-14" : ""
         )}

package/src/layout/HawaSiteLayout.tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx"
 import React, { useState } from "react"
-import HawaDrawerItem from "../elements/HawaDrawerItem"
 
 const MenuButton = ({ handleClick }) => {
   return (
@@ -21,9 +20,9 @@ const MenuButton = ({ handleClick }) => {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill-rule="evenodd"
+          fillRule="evenodd"
           d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         ></path>
       </svg>
     </button>
@@ -86,9 +85,7 @@ const DrawerContent = (props: any) => {
       <div className="overflow-y-auto py-4">
         <ul className="space-y-2">
           {props.drawerItems.map((item: any, i: any) => {
-            return (
-              <HawaDrawerItem action={item.action} key={i} text={item.text} />
-            )
+            return <div>{item.text}</div>
           })}
         </ul>
       </div>
@@ -124,9 +121,9 @@ const CloseButton = () => {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill-rule="evenodd"
+          fillRule="evenodd"
           d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         ></path>
       </svg>
     </button>
@@ -159,9 +156,9 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                clip-rule="evenodd"
+                clipRule="evenodd"
               ></path>
             </svg>
           </div>
@@ -186,9 +183,9 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                   d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                 ></path>
               </svg>
             </button>{" "}
@@ -230,18 +227,16 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill-rule="evenodd"
+              fillRule="evenodd"
               d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
         </button>{" "}
         <div className="overflow-y-auto py-4">
           <ul className="space-y-2">
             {props.drawerItems.map((item: any, i: any) => {
-              return (
-                <HawaDrawerItem action={item.action} key={i} text={item.text} />
-              )
+              return <div>{item.text}</div>
             })}
           </ul>
         </div>
@@ -266,9 +261,9 @@ const AppLayoutNav = (props) => (
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           ></path>
         </svg>
       </div>
@@ -290,9 +285,9 @@ const AppLayoutNav = (props) => (
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill-rule="evenodd"
+              fillRule="evenodd"
               d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
         </button>{" "}

package/src/styles.css

@@ -817,6 +817,9 @@ video {
 .w-60 {
   width: 15rem;
 }
+.w-0 {
+  width: 0px;
+}
 .w-7 {
   width: 1.75rem;
 }
@@ -941,6 +944,9 @@ video {
 .cursor-pointer {
   cursor: pointer;
 }
+.resize {
+  resize: both;
+}
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1023,11 +1029,6 @@ video {
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0px * var(--tw-space-y-reverse));
 }
-.space-x-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
-}
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1669,14 +1670,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
-.line-through {
-  -webkit-text-decoration-line: line-through;
-          text-decoration-line: line-through;
-}
-.decoration-gray-500 {
-  -webkit-text-decoration-color: #6b7280;
-          text-decoration-color: #6b7280;
-}
 .opacity-100 {
   opacity: 1;
 }