@sikka/hawa 0.0.136 → 0.0.137

package/package.json

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

package/src/elements/HawaDrawer.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactElement, ReactNode, useEffect, useState } from "react"
-import { FaDailymotion } from "react-icons/fa"
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 import clsx from "clsx"
 
 type TDrawerTypes = {
@@ -8,6 +8,9 @@ type TDrawerTypes = {
   position: any
   heading: any
   children?: ReactNode
+  drawerHeader?: any
+  drawerBody?: any
+  drawerFooter?: any
 }
 
 export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
@@ -19,53 +22,31 @@ export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
   ...props
 }) => {
   const leftDrawer =
-    "w-60 z-50 h-full absolute overflow-x-hidden top-0 left-0 border-r bg-white"
+    "w-60 z-50 h-full absolute overflow-x-clip 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"
-
-  const isFunction = (data: any): data is (...args: any[]) => any =>
-    typeof data === "function"
-  //   useEffect(() => {
-  //     setOpenDrawer(true);
-  //   }, [open]);
-
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && isFunction(child.type)) {
-      switch (child.type.name) {
-        case "DrawerHeader":
-          return (
-            <DrawerHeader setOpen={setOpen} children={child.props.children} />
-          )
-
-        case "DrawerBody":
-          return <DrawerBody children={child.props.children} />
-
-        case "DrawerFooter":
-          return <DrawerFooter children={child.props.children} />
-      }
-      return React.cloneElement(child, {
-        // setOpen: setOpen,
-        // children: child.props.children,
-      })
-    }
-  })
-
-  // const drawerClass =
-  //   open && position == "left"
-  //     ? clsx("block", leftDrawer)
-  //     : open && position == "right"
-  //     ? clsx("block", rightDrawer)
-  //     : "hidden w-0 "
+    "w-60 z-50 h-full absolute overflow-x-clip top-0 right-0 border-l bg-white"
 
   return (
     <div
       className={clsx(
         position == "left" ? leftDrawer : rightDrawer,
-        "overflow-y-clip transition-all",
+        position == "left" ? "flex-row-reverse" : "flex-row",
+        "overflow-x-clip transition-all",
         open ? "w-60" : "w-0"
       )}
     >
-      {childrenWithProps}
+      {props.drawerHeader && (
+        <DrawerHeader direction={position} setOpen={setOpen}>
+          {props.drawerHeader}
+        </DrawerHeader>
+      )}
+
+      {props.drawerBody && (
+        <DrawerBody direction={position}>{props.drawerBody}</DrawerBody>
+      )}
+      {props.drawerFooter && (
+        <DrawerFooter direction={position}>{props.drawerFooter}</DrawerFooter>
+      )}
     </div>
   )
 }
@@ -73,11 +54,17 @@ export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
 type TDrawerHeader = {
   setOpen: any
   children: ReactElement
+  direction: any
 }
 
-export const DrawerHeader: FC<TDrawerHeader> = (props) => {
+const DrawerHeader: FC<TDrawerHeader> = (props) => {
   return (
-    <div className="  flex w-full flex-row items-center justify-between border-b py-4 px-1">
+    <div
+      className={clsx(
+        "flex w-full flex-row items-center justify-between border-b p-4",
+        props.direction == "left" ? "flex-row" : "flex-row-reverse"
+      )}
+    >
       {props.children}
       <div
         className="justify-self-end rounded border p-1 hover:cursor-pointer"
@@ -86,7 +73,11 @@ export const DrawerHeader: FC<TDrawerHeader> = (props) => {
           props.setOpen(false)
         }}
       >
-        <FaDailymotion size={20} strokeWidth={2} />
+        {props.direction == "left" ? (
+          <FaChevronLeft size={20} strokeWidth={2} />
+        ) : (
+          <FaChevronRight size={20} strokeWidth={2} />
+        )}
       </div>
     </div>
   )
@@ -94,50 +85,35 @@ export const DrawerHeader: FC<TDrawerHeader> = (props) => {
 
 type TDrawerBody = {
   children: ReactElement
+  direction: any
 }
-
-export const DrawerBody = (props: TDrawerBody) => {
-  return <div className="p-1">{props.children}</div>
-}
-
-type TDrawerFooter = {
-  children: ReactElement
-}
-
-export const DrawerFooter = (props: TDrawerFooter) => {
+const DrawerBody = (props: TDrawerBody) => {
   return (
-    <div className="absolute bottom-0 w-full border-t py-4 px-1">
+    <div
+      className={clsx(
+        "overflow-clip whitespace-nowrap p-4",
+        props.direction == "left" ? "flex-row" : "flex-row-reverse text-right"
+      )}
+    >
       {props.children}
     </div>
   )
 }
 
-type DrawerItemTypes = {
-  action: any
-  icon?: any
-  text: any
+type TDrawerFooter = {
+  children: ReactElement
+  direction: 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"
 
+const DrawerFooter = (props: TDrawerFooter) => {
   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>
+    <div
+      className={clsx(
+        "absolute bottom-0 w-full whitespace-nowrap border-t p-4",
+        props.direction == "left" ? "flex-row" : "flex-row-reverse text-right"
+      )}
+    >
+      {props.children}
+    </div>
   )
 }

package/src/styles.css

@@ -643,9 +643,6 @@ video {
 .mt-1 {
   margin-top: 0.25rem;
 }
-.ml-3 {
-  margin-left: 0.75rem;
-}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -679,6 +676,9 @@ video {
 .mt-5 {
   margin-top: 1.25rem;
 }
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .mr-1\.5 {
   margin-right: 0.375rem;
 }
@@ -1059,6 +1059,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-clip {
+  overflow: clip;
+}
 .overflow-scroll {
   overflow: scroll;
 }
@@ -1068,9 +1071,6 @@ video {
 .overflow-y-auto {
   overflow-y: auto;
 }
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
 .overflow-x-clip {
   overflow-x: clip;
 }
@@ -1466,14 +1466,6 @@ video {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1482,6 +1474,10 @@ video {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -1519,6 +1515,9 @@ video {
 .text-center {
   text-align: center;
 }
+.text-right {
+  text-align: right;
+}
 .align-middle {
   vertical-align: middle;
 }
@@ -1536,10 +1535,6 @@ video {
 .text-\[10px\] {
   font-size: 10px;
 }
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1748,9 +1743,6 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
-.duration-75 {
-  transition-duration: 75ms;
-}
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
 
 body {
@@ -1938,10 +1930,6 @@ body {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
-.group:hover .group-hover\:text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
 .peer:checked ~ .peer-checked\:bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -2146,10 +2134,6 @@ body {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity));
 }
-.dark .group:hover .dark\:group-hover\:text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
 .dark .peer:focus ~ .dark\:peer-focus\:ring-blue-800 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));