@sikka/hawa 0.0.163 → 0.0.165

package/package.json

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

package/src/elements/HawaTabs.tsx

@@ -7,16 +7,18 @@ type TabsTypes = {
   defaultValue?: any
   contents?: any
   orientation?: "horizontal" | "vertical"
+  direction?: "rtl" | "ltr"
 }
 export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   orientation = "horizontal",
+  direction = "ltr",
   ...props
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.options[0]?.value)
   // const [selectedOption, setSelectedOption] = useState(props.defaultValue - 1)
   let activeTabStyle = {
     vertical:
-      "inline-block py-2 px-4 text-white bg-buttonPrimary-default rounded-lg rounded-tl-none rounded-bl-none active",
+      "inline-block py-2 px-4 text-white bg-buttonPrimary-default active",
     horizontal:
       "inline-block py-2 px-4 text-white bg-buttonPrimary-default rounded-lg rounded-br-none rounded-bl-none active",
   }
@@ -44,12 +46,13 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   }
   let tabsStyle = {
     vertical:
-      "flex flex-col w-fit flex-wrap rounded-lg border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded-lg border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     horizontal:
       "flex w-fit flex-wrap rounded-lg rounded-br-none rounded-bl-none  border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div
+      dir={direction}
       className={clsx(
         containerStyle[orientation],
         props.options[selectedOption] ? "border-b-2" : "border-b-0"
@@ -58,9 +61,24 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       <ul
         className={clsx(
           tabsStyle[orientation],
-          props.options[selectedOption] ? "border-b-2" : "border-b-0"
+          "border-buttonPrimary-default",
+          orientation === "vertical"
+            ? direction === "rtl"
+              ? "rounded-none rounded-r-lg border-l-2"
+              : "rounded-none rounded-l-lg border-r-2"
+            : "border-b-2"
         )}
       >
+        {/* 
+        if selected option
+          if vertical
+            if rtl
+              border left
+            else
+              border right
+          else
+            border bottom
+        */}
         {props.options?.map((opt: any, o) => (
           <li key={o}>
             <button
@@ -72,9 +90,13 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
               className={clsx(
                 opt.value === selectedOption
                   ? // props.options[selectedOption].value === opt.value
-                    activeTabStyle[orientation]
+                    [
+                      activeTabStyle[orientation],
+                      direction === "rtl" ? "rounded-r-lg" : "rounded-l-lg",
+                    ]
                   : inactiveTabStyle[orientation],
-                "transition-all"
+                "w-full transition-all"
+                // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
               )}
             >
               {opt.label}
@@ -87,7 +109,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
         {props.options.map((tab) => (
           <div
             key={tab.value}
-            className={`${selectedOption === tab.value ? "" : "hidden"}`}
+            className={clsx(selectedOption === tab.value ? "" : "hidden")}
           >
             {tab.content}
           </div>

package/src/hooks/index.ts

@@ -1 +1 @@
-export * from "./useDiscloser"
+export * from "./useDiscloser"

package/src/hooks/useScrollPosition.js

@@ -0,0 +1,30 @@
+import { useState, useEffect, useRef } from "react";
+
+function useScrollPosition(ref) {
+  const [scrollPosition, setScrollPosition] = useState(0);
+  // const savedRef = useRef();
+
+  // useEffect(() => {
+  //   savedRef.current = ref;
+  // }, [ref]);
+
+  useEffect(() => {
+    function handleScroll() {
+      setScrollPosition(ref.current.scrollTop);
+    }
+
+    if (ref.current) {
+      ref.current.addEventListener("scroll", handleScroll);
+    }
+
+    return () => {
+      if (ref.current) {
+        ref.current.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [ref]);
+
+  return scrollPosition;
+}
+
+export default useScrollPosition;

package/src/layout/HawaAppLayout.tsx

@@ -40,6 +40,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   const [openSubItem, setOpenSubItem] = useState(false)
   const { isOpen, onClose, onOpen } = useDiscloser(false)
   const ref = useRef(null)
+  const drawerItemRef = useRef(null)
 
   let size
   if (typeof window !== "undefined") {
@@ -48,11 +49,11 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
     size = 1200
   }
   const [keepOpen, setKeepOpen] = useState(false)
-  // console.log("size is ", size)
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         // onClickOutside && onClickOutside()
+
         setOpenSideMenu(false)
       }
     }
@@ -68,12 +69,12 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   //less than 600
   //as nothing and expands as button is clicked
   let ltrDrawerStyle = [
-    "fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all hover:overflow-auto",
+    "fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
     size > 600 ? "w-14 hover:w-40" : "w-0",
     openSideMenu ? "w-40" : "w-14",
   ]
   let rtlDrawerStyle = [
-    "fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all hover:overflow-auto",
+    "fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
     size > 600 ? "w-14 hover:w-40" : "w-0",
     openSideMenu ? "w-40" : "w-14",
   ]
@@ -154,28 +155,28 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
         </div>
       )}
       <div
-        onMouseEnter={() => setOpenSideMenu(true)}
-        onMouseLeave={() =>
-          keepOpen ? setOpenSideMenu(true) : setOpenSideMenu(false)
-        }
+        onMouseEnter={() => {
+          setOpenSideMenu(true)
+        }}
+        onMouseLeave={() => {
+          if (keepOpen) {
+            setOpenSideMenu(true)
+          } else {
+            setOpenSideMenu(false)
+          }
+        }}
         ref={ref}
-        className={clsx(
-          direction === "rtl" ? rtlDrawerStyle : ltrDrawerStyle
-          // "fixed top-0 left-0 z-50 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all  hover:overflow-auto",
-          // size > 600 ? "w-14 hover:w-40" : "w-0",
-          // openSideMenu ? "w-40" : "w-14"
-        )}
+        className={clsx(direction === "rtl" ? rtlDrawerStyle : ltrDrawerStyle)}
       >
-        <div>
+        <div className="overflow-scroll scroll-auto ">
           <div
             className={clsx(
-              "fixed z-50 mb-2 flex h-12 items-center justify-center bg-layoutPrimary-default p-2",
+              "fixed z-50 mb-2 flex h-12 items-center justify-center bg-layoutPrimary-default p-2 transition-all",
               openSideMenu ? "w-full" : "w-14"
             )}
           >
             <img
               className={clsx(
-                // "bg-blue-700",
                 "fixed top-2 h-9",
                 direction === "rtl" ? "right-2.5" : "left-2.5",
                 !openSideMenu ? "invisible" : "visible"
@@ -198,22 +199,26 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
             ) : null}
           </div>
 
-          <div className="mt-12">
+          <div className="mt-12 mb-8">
             {props.drawerItems.map((dSection, j) => (
               <div
                 key={j}
-                className={clsx(
-                  "flex flex-col items-stretch justify-center"
-                  // !openSideMenu ? "invisible" : "visible"
-                )}
+                className={clsx("flex flex-col items-stretch justify-center")}
               >
                 {dSection.map((dItem, i) => {
                   return (
-                    <div className="flex flex-col">
+                    <div key={i} id={"test"} className="flex flex-col">
                       <div
-                        key={i}
+                        ref={
+                          props.currentPage === dItem.slug
+                            ? drawerItemRef
+                            : null
+                        }
                         onClick={() => {
                           // if()
+                          const { offsetTop } = drawerItemRef.current
+                          ref.current.scrollTop = offsetTop - 100
+
                           dItem.action()
                         }}
                         className={clsx(
@@ -260,41 +265,46 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
           </div>
         </div>
         <div
+          dir={direction}
           className={clsx(
-            "sticky bottom-2 flex w-fit items-center",
-            direction === "rtl" ? "left-2 justify-start" : " justify-end"
+            "fixed bottom-2 flex w-fit items-center",
+            direction === "rtl"
+              ? "right-32 justify-start"
+              : "left-32 justify-start",
+            "transition-all duration-700",
+            openSideMenu && size > 600 ? " opacity-100" : " opacity-0"
           )}
         >
           {openSideMenu && !keepOpen && size > 600 ? (
             <div
-              onClick={() => setKeepOpen(true)}
+              onClick={() => setKeepOpen(!keepOpen)}
               className={clsx(
-                "w-fit cursor-pointer rounded-lg bg-gray-300 p-2"
-                // openSideMenu ? "sticky bottom-2" : ""
+                keepOpen ? "rotate-180" : "",
+                direction === "rtl" ? "rotate-180" : "",
+                "w-fit cursor-pointer rounded-lg bg-gray-300 p-1 transition-all"
               )}
             >
               <FaChevronRight />
             </div>
           ) : null}
-          {keepOpen && (
+          {/* {keepOpen && (
             <div
               onClick={() => setKeepOpen(false)}
-              className=" w-fit rotate-180 cursor-pointer rounded-lg bg-gray-300 p-2"
+              className={clsx(
+                openSideMenu ? "visible" : "invisible",
+                direction === "rtl" ? "rotate-180" : "",
+                "w-fit cursor-pointer rounded-lg bg-gray-300 p-1 transition-all"
+              )}
             >
-              <FaChevronRight />
+              <FaChevronLeft />
             </div>
-          )}
+          )} */}
         </div>
       </div>
 
       <div
         className={clsx(
           direction === "rtl" ? rtlChildrenStyle : ltrChildrenStyle
-          // "fixed h-full overflow-y-auto",
-          // size > 600 ? "left-14 w-[calc(100%-3.5rem)]" : "left-0 ",
-          // props.topBar ? "top-14" : "top-0",
-          // keepOpen ? "left-40 w-[calc(100%-10rem)]" : "",
-          // keepOpen && size > 600 ? "left-0 w-[calc(100%-10.01rem)]" : ""
         )}
       >
         {props.children}

package/src/styles.css

@@ -605,6 +605,9 @@ video {
 .bottom-4 {
   bottom: 1rem;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .left-3 {
   left: 0.75rem;
 }
@@ -629,9 +632,6 @@ video {
 .-left-1 {
   left: -0.25rem;
 }
-.top-2 {
-  top: 0.5rem;
-}
 .right-2\.5 {
   right: 0.625rem;
 }
@@ -644,6 +644,12 @@ video {
 .bottom-2 {
   bottom: 0.5rem;
 }
+.right-32 {
+  right: 8rem;
+}
+.left-32 {
+  left: 8rem;
+}
 .top-auto {
   top: auto;
 }
@@ -771,6 +777,9 @@ video {
 .mt-12 {
   margin-top: 3rem;
 }
+.mb-8 {
+  margin-bottom: 2rem;
+}
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -1102,6 +1111,9 @@ video {
 .gap-1 {
   gap: 0.25rem;
 }
+.gap-9 {
+  gap: 2.25rem;
+}
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
@@ -1155,6 +1167,9 @@ video {
 .overflow-clip {
   overflow: clip;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -1167,6 +1182,9 @@ video {
 .overflow-y-clip {
   overflow-y: clip;
 }
+.scroll-auto {
+  scroll-behavior: auto;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1221,6 +1239,10 @@ video {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
 .rounded-tr-none {
   border-top-right-radius: 0px;
 }
@@ -1239,12 +1261,12 @@ video {
 .rounded-br-lg {
   border-bottom-right-radius: 0.5rem;
 }
-.rounded-tl-none {
-  border-top-left-radius: 0px;
-}
 .rounded-br-none {
   border-bottom-right-radius: 0px;
 }
+.rounded-tl-none {
+  border-top-left-radius: 0px;
+}
 .border {
   border-width: 1px;
 }
@@ -1290,6 +1312,12 @@ video {
 .border-l-0 {
   border-left-width: 0px;
 }
+.border-l-2 {
+  border-left-width: 2px;
+}
+.border-r-2 {
+  border-right-width: 2px;
+}
 .border-dashed {
   border-style: dashed;
 }
@@ -1347,6 +1375,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
+.border-buttonPrimary-default {
+  border-color: var(--button-primary);
+}
 .border-t-white {
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1439,6 +1470,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+}
 .bg-primary-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(196 222 253 / var(--tw-bg-opacity));
@@ -1451,10 +1486,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
-.bg-blue-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1836,6 +1867,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-700 {
+  transition-duration: 700ms;
+}
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
 
 body {
@@ -1916,10 +1950,6 @@ body {
   cursor: pointer;
 }
 
-.hover\:overflow-auto:hover {
-  overflow: auto;
-}
-
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));