@sikka/hawa 0.0.100 → 0.0.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.100",
+  "version": "0.0.102",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -58,6 +58,7 @@
     "react-transition-group": "^4.4.2",
     "rollup": "^2.38.4",
     "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
@@ -90,9 +91,9 @@
   },
   "dependencies": {
     "react-dropzone": "^12.0.4",
+    "react-hook-form": "^7.28.0",
     "react-icons": "^4.6.0",
     "react-select": "^5.3.2",
-    "react-hook-form": "^7.28.0",
     "rollup-plugin-swc": "^0.2.1",
     "rollup-plugin-typescript2": "^0.34.1"
   }

package/rollup.config.js

@@ -6,6 +6,7 @@ import { terser } from "rollup-plugin-terser";
 import postcss from "rollup-plugin-postcss";
 import typescript from "rollup-plugin-typescript2";
 import swc from "rollup-plugin-swc";
+import cleaner from "rollup-plugin-cleaner";
 
 export default [
   {
@@ -15,6 +16,9 @@ export default [
       { file: "es/index.es.js", format: "es", exports: "named" }
     ],
     plugins: [
+      cleaner({
+        targets: ["./lib", "./es"]
+      }),
       postcss({ plugins: [], minimize: true }),
       babel({
         exclude: "node_modules/**",

package/src/elements/DragDropImages.tsx

@@ -96,14 +96,15 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
     }, [maxSize])
     const errs = fileRejections.map((rej, i) => {
       return (
-        <div key={i}>
-          <div>{rej.file.name}</div>
-          <div>{rej.errors[0].code}</div>
-        </div>
+        <HawaAlert
+          text={rej.file.name}
+          title={rej.errors[0].code}
+          severity="error"
+        />
       )
     })
     const thumbs = files?.map((file: any, index: any) => (
-      <div style={{ position: "relative", margin: 10 }}>
+      <div className="relative m-3 rounded-lg">
         <button
           onClick={(e) => {
             e.stopPropagation()
@@ -112,7 +113,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             onDeleteFile(file)
           }}
           type="button"
-          className="absolute left-0 ml-auto inline-flex items-center rounded-lg bg-gray-900 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"
+          className="absolute left-0 ml-auto inline-flex items-center rounded-lg rounded-tr-none rounded-bl-none bg-gray-900 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"
         >
           <svg
@@ -144,6 +145,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             backgroundPosition: "center",
             border: "1px solid black",
           }}
+          className="rounded-lg"
           key={file.name}
         />
       </div>
@@ -165,37 +167,41 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           Click here or drop files here to upload
         </div>
         <div className="p-1 text-center">Max file size is {max}</div>
-        {acceptedFiles.length > 0 && (
-          <HawaButton
-            style={{ color: "black" }}
-            onClick={(e) => {
-              e.stopPropagation()
-              onClearFiles(acceptedFiles)
-            }}
-          >
-            Clear All
-          </HawaButton>
-        )}
-
+        <div className="flex justify-center ">
+          {acceptedFiles.length > 0 && (
+            <HawaButton
+              // style={{ color: "black" }}
+              onClick={(e) => {
+                e.stopPropagation()
+                onClearFiles(acceptedFiles)
+              }}
+            >
+              Clear All
+            </HawaButton>
+          )}
+        </div>
         {thumbs && showPreview ? (
           <aside
             style={{
               display: "flex",
               flexDirection: "row",
               flexWrap: "wrap",
-              marginTop: 10,
+              // marginTop: 10,
             }}
+            className="rounded-lg border-red-500"
           >
             {thumbs}
           </aside>
         ) : null}
-        {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
-          <HawaAlert text={texts.tooManyFiles} severity="error" />
-        ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
-          <HawaAlert text={texts.fileTooLarge} severity="error" />
-        ) : (
-          errs
-        )}
+        <div className="px-2">
+          {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
+            <HawaAlert text={texts.tooManyFiles} severity="error" />
+          ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
+            <HawaAlert text={texts.fileTooLarge} severity="error" />
+          ) : (
+            errs
+          )}
+        </div>
         {}
       </div>
     )

package/src/elements/DraggableCard.tsx

@@ -1,6 +1,6 @@
-import React from "react"
+import React, { ReactElement } from "react"
 type DraggableCardTypes = {
-  children: any
+  children: ReactElement
 }
 
 export const DraggableCard: React.FunctionComponent<DraggableCardTypes> = (

package/src/elements/HawaCheckbox.tsx

@@ -1,20 +1,25 @@
-import React from "react"
+import React, { ReactElement } from "react"
 
-type CheckoutTypes = {
-  centered?: any
+type TCheckBoxTypes = {
+  centered?: boolean
   label?: any
   helperText?: any
-  onChange?: any
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
 
-export const HawaCheckbox: React.FunctionComponent<CheckoutTypes> = (props) => {
+export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (props) => {
   return (
     <div
-      className={props.centered ? "flex h-full items-center" : "flex h-full"}
+      className={
+        props.centered
+          ? "flex h-full items-center justify-center"
+          : "flex h-full items-start"
+      }
     >
       <input
         type="checkbox"
         value=""
+        onChange={(e) => props.onChange(e)}
         className="h-5 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
         {...props}
       />

package/src/elements/HawaChip.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 
-type ChipTypes = {
-  label: any
+type TChipTypes = {
+  label: string
 }
-export const HawaChip: React.FunctionComponent<ChipTypes> = (props) => {
+export const HawaChip: React.FunctionComponent<TChipTypes> = (props) => {
   return (
     <span className="mr-2 h-fit rounded bg-blue-100 px-2.5 py-0.5 text-xs font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800">
       {props.label}

package/src/elements/HawaColorPicker.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 
 type ColorPickerTypes = {
   color?: any
-  handleChange?: any
+  handleChange?: (e : React.ChangeEvent<HTMLInputElement>) => void
 }
 
 export const HawaColorPicker: React.FunctionComponent<ColorPickerTypes> = (
@@ -20,7 +20,7 @@ export const HawaColorPicker: React.FunctionComponent<ColorPickerTypes> = (
           value={selectedColor}
           onChange={(e) => {
             setSelectedColor(e.target.value)
-            props.handleChange(e.target.value)
+            props.handleChange(e)
           }}
           className="opacity-0"
         />

package/src/elements/HawaCopyrights.tsx

@@ -1,31 +1,24 @@
 import React, { useEffect, useState } from "react"
 
 type CopyRightsTypes = {
-  withLogo: any
+  withLogo: boolean
   lang: any
-  version: any
+  version: string
+  credits: string
+  logoURL: string
 }
 
 export const HawaCopyrights: React.FunctionComponent<CopyRightsTypes> = (
   props
 ) => {
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        textAlign: "center",
-        color: "grey",
-        fontSize: 14,
-        marginTop: 10,
-        marginBottom: 10,
-      }}
-    >
+    <div className="my-2 flex flex-col items-center justify-center gap-1 text-xs text-gray-400">
       {props.withLogo ? (
         <a href={"https://qawaim.app/" + props.lang}>
           <div style={{ cursor: "pointer" }}>
             <image
-              // src="/qawaim-logo.svg"
+              // src={props.logoURL}
+              href={props.logoURL}
               // alt="Qawaim"
               width={100}
               height={50}
@@ -33,8 +26,8 @@ export const HawaCopyrights: React.FunctionComponent<CopyRightsTypes> = (
           </div>
         </a>
       ) : null}
-
       <div>{props.version}</div>
+      {props.credits ? props.credits : null}
     </div>
   )
 }

package/src/elements/HawaDrawer.tsx

@@ -1,47 +1,53 @@
-import React, { useEffect, useState } from "react"
+import React, { FC, ReactElement, ReactNode, useEffect, useState } from "react"
 import { FaDailymotion } from "react-icons/fa"
 import clsx from "clsx"
 
-type DrawerTypes = {
-  open: any
+type TDrawerTypes = {
+  open: boolean
   setOpen: any
   position: any
   heading: any
-  children: any
+  children?: ReactNode
 }
 
-export const HawaDrawer: React.FunctionComponent<DrawerTypes> = ({
+export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
   open,
   setOpen,
   position,
   heading,
   children,
+  ...props
 }) => {
   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"
 
+  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) &&
-    //   // 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 })
-    // }
+    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 =
@@ -54,7 +60,12 @@ export const HawaDrawer: React.FunctionComponent<DrawerTypes> = ({
   return <div className={drawerClass}>{childrenWithProps}</div>
 }
 
-export const DrawerHeader = (props: any) => {
+type TDrawerHeader = {
+  setOpen: any
+  children: ReactElement
+}
+
+export const DrawerHeader: FC<TDrawerHeader> = (props) => {
   return (
     <div className="  flex w-full flex-row items-center justify-between border-b py-4 px-1">
       {props.children}
@@ -71,11 +82,19 @@ export const DrawerHeader = (props: any) => {
   )
 }
 
-export const DrawerBody = (props: any) => {
+type TDrawerBody = {
+  children: ReactElement
+}
+
+export const DrawerBody = (props: TDrawerBody) => {
   return <div className="p-1">{props.children}</div>
 }
 
-export const DrawerFooter = (props: any) => {
+type TDrawerFooter = {
+  children: ReactElement
+}
+
+export const DrawerFooter = (props: TDrawerFooter) => {
   return (
     <div className="absolute bottom-0 w-full border-t py-4 px-1">
       {props.children}

package/src/elements/HawaMenu.tsx

@@ -1,23 +1,33 @@
+import clsx from "clsx"
+import React, { ReactNode } from "react"
 
-type MenuTypes = {
+interface TMenuTypes {
   popMenuID: any
-  menuItems: any
+  menuItems: MenuItems[][]
   //
   //         icon: PropTypes.element,
   //         label: PropTypes.string,
   //        action: PropTypes.func,
   //
-  withHeader: any
-  withIcons: any
-  headerTitle: any
-  headerSubtitle: any
-  open: any
-  handleClose: any
-  anchor: any
+  withHeader?: boolean
+  withIcons?: boolean
+  headerTitle?: string
+  headerSubtitle?: string
+  open: boolean
+  handleClose: (e : boolean) => void
+  anchor?: any
+  children?: ReactNode
+  buttonPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
 }
 
-export const HawaMenu: React.FunctionComponent<MenuTypes> = ({
-  popMenuID,
+type MenuItems =  {
+  icon ?: JSX.Element,
+  label : string,
+  action ?: (e : React.MouseEvent<HTMLLIElement, MouseEvent>,item : string) => void
+  isButton ?: boolean
+}
+
+export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   menuItems,
   withHeader,
   withIcons,
@@ -25,50 +35,63 @@ export const HawaMenu: React.FunctionComponent<MenuTypes> = ({
   headerSubtitle,
   open,
   handleClose,
+  buttonPosition,
+  children,
 }) => {
+  let defaultStyles =
+    "absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded-lg bg-white shadow transition-all dark:bg-gray-700"
+  let positionStyles = {
+    "top-right": "top-30 right-0",
+    "top-left": "top-30 left-0",
+    "bottom-right": "bottom-30 right-0",
+    "bottom-left": "bottom-30 left-0",
+  }
+  let animationStyles = {
+    opened: "max-h-72 animate-expandDown",
+    closed: "max-h-0 opacity-0 animate-expandUp",
+  }
   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 className="">
+      <div className="relative w-fit" onClick={() => handleClose(!open)}>
+        {children}
+
+        <div
+          className={clsx(
+            defaultStyles,
+            positionStyles[buttonPosition],
+            open ? animationStyles.opened : animationStyles.closed
+          )}
+        >
+          {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) => {
+            return (
+              <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
+                {group.map((item) => {
+                  return (
+                    <li
+                      onClick={(e) => item.action(e, item.label)}
+                      className={
+                        item.isButton
+                          ? "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>
     </div>
   )

package/src/elements/HawaModal.tsx

@@ -1,33 +1,32 @@
-import React, { useEffect } from "react"
+import React, { ReactElement, useEffect } from "react"
 
 type ModalTypes = {
-  open: any
-  title: any
-  onClose: any
-  closeOnClickOutside: any
-  modalID: any
-  children: any
+  open: boolean
+  title: string
+  onClose: () => void
+  // closeOnClickOutside: any
+  modalID?: string
+  children: ReactElement
   actions: any
 }
 export const HawaModal: React.FunctionComponent<ModalTypes> = ({
   open,
   title,
   onClose,
-  closeOnClickOutside,
   ...props
 }) => {
-  useEffect((): any => {
-    if (closeOnClickOutside) {
-      window.onclick = () => {
-        console.log("open : ", open)
-        if (open) {
-          console.log("Im clicing")
-          onClose()
-        }
-      }
-    }
-    return () => (window.onclick = null)
-  }, [open])
+  // useEffect((): any => {
+  //   if (closeOnClickOutside) {
+  //     window.onclick = () => {
+  //       console.log("open : ", open)
+  //       if (open) {
+  //         console.log("Im clicing")
+  //         onClose()
+  //       }
+  //     }
+  //   }
+  //   return () => (window.onclick = null)
+  // }, [open])
   return (
     <div
       id={props.modalID}
@@ -47,7 +46,7 @@ export const HawaModal: React.FunctionComponent<ModalTypes> = ({
               type="button"
               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={() => {
+              onClick={(e) => {
                 onClose()
               }}
             >

package/src/elements/HawaRange.tsx

@@ -6,6 +6,8 @@ type RangeTypes = {
   startElement?: any
   endElement?: any
   label?: any
+  min?: any
+  max?: any
 }
 
 export const HawaRange: React.FunctionComponent<RangeTypes> = ({