@sikka/hawa 0.0.101 → 0.0.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.101",
+  "version": "0.0.103",
   "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/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,27 +1,34 @@
-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=""
-        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"
+        onChange={(e) => props.onChange(e)}
+        className="mt-0.5 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}
       />
       {(props.label || props.helperText) && (
-        <div className="items-stat flex flex-col">
+        <div className=" flex flex-col">
           {props.label && (
-            <label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+            <label className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
               {props.label}
             </label>
           )}

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,26 +1,33 @@
 import clsx from "clsx"
-import React from "react"
+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
-  children: any
-  buttonPosition: "top-right" | "top-left" | "bottom-right" | "bottom-left"
+  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> = ({
+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,
@@ -61,15 +68,15 @@ export const HawaMenu: React.FunctionComponent<MenuTypes> = ({
               <div className="truncate font-medium">{headerSubtitle}</div>
             </div>
           )}
-          {menuItems.map((group: any) => {
+          {menuItems.map((group) => {
             return (
               <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
-                {group.map((item: any) => {
+                {group.map((item) => {
                   return (
                     <li
-                      onClick={item.action}
+                      onClick={(e) => item.action(e, item.label)}
                       className={
-                        item.button
+                        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"
                       }

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/HawaRadio.tsx

@@ -1,33 +1,36 @@
-import React from "react"
+import React, { useState } from "react"
 
 type RadioTypes = {
-  options: any
+  options?: any
+  onChangeTab?: any
+  defaultValue?: any
 }
 export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
+  const [selectedOption, setSelectedOption] = useState(props.defaultValue)
+  let activeTabStyle =
+    "inline-block py-2 px-4 text-white bg-blue-600 rounded-lg active"
+  let inactiveTabStyle =
+    "inline-block py-2 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+
   return (
     <div>
-      <ul className="w-full items-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:flex">
-        {props.options.map((option: any) => {
-          return (
-            <li className="w-full border-b border-gray-200 dark:border-gray-600 sm:border-b-0 sm:border-r">
-              <div className="flex items-center pl-3">
-                <input
-                  id="horizontal-list-radio-license"
-                  type="radio"
-                  value=""
-                  name="list-radio"
-                  className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600"
-                />
-                <label
-                  htmlFor="horizontal-list-radio-license"
-                  className="ml-2 w-full py-3 text-sm font-medium text-gray-900 dark:text-gray-300"
-                >
-                  {option.label}
-                </label>
-              </div>
-            </li>
-          )
-        })}
+      <ul className="flex w-fit flex-wrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
+        {props.options?.map((opt: any) => (
+          <li>
+            <button
+              aria-current="page"
+              onClick={() => {
+                setSelectedOption(opt.value)
+                props.onChangeTab(opt.value)
+              }}
+              className={
+                selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+              }
+            >
+              {opt.label}
+            </button>
+          </li>
+        ))}
       </ul>
     </div>
   )

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> = ({

package/src/elements/HawaSettingsRow.tsx

@@ -4,53 +4,41 @@ import { HawaTextField } from "./HawaTextField"
 import { HawaSwitch } from "./HawaSwitch"
 import { HawaColorPicker } from "./HawaColorPicker"
 import { HawaRange } from "./HawaRange"
-import { HawaCheckbox } from "./HawaCheckbox"
-import { HawaTabs } from "./HawaTabs"
+import { HawaRadio } from "./HawaRadio"
 
 type SettingsRowTypes = {
   settingsLabel: any
-  settingsType: any
-  // settingsType: PropTypes.oneOf([
-  //     "checkbox",
-  //     "text",
-  //     "radio",
-  //     "boolean",
-  //     "color",
-  //   ]),
+  settingsType: "text" | "radio" | "boolean" | "color" | "range"
+  radioProps: {
+    defaultValue: any
+    onChangeTab: any
+    options: any
+  }
+  colorProps: {
+    color?: any
+    handleChange?: any
+  }
+  rangeProps: {
+    min?: any
+    max?: any
+  }
 }
 
-export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = (
-  props
-) => {
+export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
+  settingsLabel,
+  settingsType,
+  colorProps,
+  rangeProps,
+  radioProps,
+}) => {
   return (
-    <div className="my-2 flex max-h-fit flex-row items-center justify-between rounded-xl bg-white px-4 py-2 pr-2 align-middle">
-      <HawaTypography>{props.settingsLabel}</HawaTypography>
-      {props.settingsType === "checkbox" && (
-        <HawaCheckbox centered {...props} />
-      )}
-      {props.settingsType === "text" && (
-        <HawaTextField margin="none" {...props} />
-      )}
-      {props.settingsType === "boolean" && (
-        <HawaSwitch
-        // {...props}
-        />
-      )}
-      {props.settingsType === "range" && (
-        <HawaRange
-        // {...props}
-        />
-      )}
-      {props.settingsType === "color" && (
-        <HawaColorPicker
-        //  {...props}
-        />
-      )}
-      {props.settingsType === "radio" && (
-        <HawaTabs
-        // {...props}
-        />
-      )}
+    <div className="my-0.5 flex max-h-fit flex-row items-center justify-between rounded-xl bg-white px-4 py-2 pr-2 align-middle">
+      <HawaTypography>{settingsLabel}</HawaTypography>
+      {settingsType === "text" && <HawaTextField margin="none" width="small" />}
+      {settingsType === "boolean" && <HawaSwitch />}
+      {settingsType === "range" && <HawaRange {...rangeProps} />}
+      {settingsType === "color" && <HawaColorPicker {...colorProps} />}
+      {settingsType === "radio" && <HawaRadio {...radioProps} />}
     </div>
   )
 }

package/src/elements/HawaTabs.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React, { useState } from "react"
 
 type TabsTypes = {
@@ -8,14 +9,19 @@ type TabsTypes = {
 export const HawaTabs: React.FunctionComponent<TabsTypes> = (props) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4 text-white bg-blue-600 rounded-lg active"
+    "inline-block py-2 px-4 text-white bg-primary-500 rounded-lg rounded-br-none rounded-bl-none active"
   let inactiveTabStyle =
-    "inline-block py-2 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+    "inline-block py-2 px-4 rounded-lg rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
 
   return (
     <div>
-      <ul className="flex w-fit flex-wrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
-        {props.options.map((opt: any) => (
+      <ul
+        className={clsx(
+          "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",
+          selectedOption ? "border-b-2" : "border-b-0"
+        )}
+      >
+        {props.options?.map((opt: any) => (
           <li>
             <button
               aria-current="page"
@@ -23,9 +29,12 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = (props) => {
                 setSelectedOption(opt.value)
                 props.onChangeTab(opt.value)
               }}
-              className={
-                selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
-              }
+              className={clsx(
+                selectedOption === opt.value
+                  ? activeTabStyle
+                  : inactiveTabStyle,
+                "transition-all"
+              )}
             >
               {opt.label}
             </button>