@sikka/hawa 0.0.103 → 0.0.104

package/src/elements/HawaItemCard.tsx

@@ -1,25 +1,53 @@
+import clsx from "clsx"
 import React, { useEffect } from "react"
 import { useState } from "react"
+import { HawaMenu } from "./HawaMenu"
 
-type ItemCardTypes = {
-  actions: any
-  content: any
-  headerActions: any
-  //     label: PropTypes.string,
-  //     action: PropTypes.func,
-  header: any
-  lang: string
+interface ItemCardTypes {
+  actions?: any
+  content?: any
+  headerActions?: THeaderActions[][]
+  header?: any
+  lang?: string
+  cardImage?: string
   onCardClick?: any
+  orientation?: "horizontal" | "vertical"
 }
 
+type THeaderActions = {
+  icon?: JSX.Element
+  label: string
+  action?: (
+    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    item: string
+  ) => void
+  isButton?: boolean
+}
 export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
   actions,
   content,
   headerActions,
   header,
+  cardImage,
+  orientation = "vertical",
   ...props
 }) => {
+  let defaultStyle =
+    "block rounded-lg border border-gray-200 bg-white shadow-sm hover:shadow-lg transition-all dark:border-gray-700 dark:bg-gray-800 "
+
+  let orientationStyles = {
+    vertical: "max-w-sm",
+    horizontal: "flex flex-row w-full",
+  }
+  let imageStyles = {
+    vertical: "w-full rounded-tr-lg rounded-tl-lg",
+    horizontal: "h-40 w-fit rounded-tl-lg rounded-bl-lg",
+  }
+  let headerActionsButtonStyle =
+    "inline-block rounded-lg p-1 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+
   const [openActionHeader, setOpenActionHeader] = useState(false)
+  const [openDropDown, setOpenDropDown] = useState(false)
 
   function handleOpenActionHeader() {
     setOpenActionHeader(!openActionHeader)
@@ -37,61 +65,58 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
 
   return (
     <div
-      className="relative block max-w-sm rounded-lg border border-gray-200 bg-white pt-6 shadow-md  dark:border-gray-700 dark:bg-gray-800 "
+      className={clsx(defaultStyle, orientationStyles[orientation])}
       {...props}
     >
-      {headerActions && (
-        <div className="absolute right-0 top-0 flex justify-end pt-3 pr-3">
-          <button
-            id="dropdownButton"
-            data-dropdown-toggle="dropdown"
-            className="inline-block rounded-lg text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-            type="button"
-            onClick={handleOpenActionHeader}
-          >
-            <span className="sr-only">Open dropdown</span>
-            <svg
-              className="h-6 w-6"
-              aria-hidden="true"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
+      {cardImage && (
+        <img
+          src={"https://via.placeholder.com/50"}
+          // className=" h-full w-full max-w-sm bg-red-500  bg-[url('https://via.placeholder.com/50')] bg-cover bg-no-repeat"
+          className={clsx(imageStyles[orientation])}
+        />
+      )}
+      <div className="relative w-full  px-6 pt-6">
+        {headerActions && (
+          <div className="max-h- bg-red absolute right-0 top-0 flex justify-end pt-3 pr-3">
+            <HawaMenu
+              buttonPosition="top-right"
+              menuItems={headerActions}
+              handleClose={setOpenDropDown}
+              open={openDropDown}
             >
-              <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
-            </svg>
-          </button>
-          <div
-            id="dropdown"
-            className={`absolute ${
-              openActionHeader ? "block" : "hidden"
-            } right-0 top-7 z-10 w-44 list-none divide-y divide-gray-100 rounded bg-white text-base shadow dark:bg-gray-700`}
-          >
-            <ul className="py-1" aria-labelledby="dropdownButton">
-              {headerActions.map((singleAction: any) => {
-                return (
-                  <li onClick={singleAction.action}>
-                    <a
-                      href="#"
-                      className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
-                    >
-                      {singleAction.label}
-                    </a>
-                  </li>
-                )
-              })}
-            </ul>
+              <div
+                className={clsx(headerActionsButtonStyle)}
+                onClick={handleOpenActionHeader}
+              >
+                <span className="sr-only">Open dropdown</span>
+                <svg
+                  className="h-6 w-6"
+                  aria-hidden="true"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
+                </svg>
+              </div>
+            </HawaMenu>
           </div>
-        </div>
-      )}
-      <div className="px-6">
-        <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          {header}{" "}
-        </h5>
-        <p className="font-normal text-gray-700 dark:text-gray-400">
-          {content}
-        </p>
+        )}
+
+        {header && (
+          <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+            {header}
+          </h5>
+        )}
+        {content && (
+          <p className="w-full font-normal text-gray-700 dark:text-gray-400">
+            {content}
+          </p>
+        )}
+        {actions && (
+          <div className="flex justify-end rounded-b-lg p-3">{actions}</div>
+        )}
       </div>
-      <div className="mt-6 flex justify-end rounded-b-lg p-3">{actions}</div>
     </div>
   )
 }

package/src/elements/HawaMenu.tsx

@@ -2,29 +2,26 @@ import clsx from "clsx"
 import React, { ReactNode } from "react"
 
 interface TMenuTypes {
-  popMenuID: any
   menuItems: MenuItems[][]
-  //
-  //         icon: PropTypes.element,
-  //         label: PropTypes.string,
-  //        action: PropTypes.func,
-  //
   withHeader?: boolean
   withIcons?: boolean
   headerTitle?: string
   headerSubtitle?: string
-  open: boolean
-  handleClose: (e : boolean) => void
+  open?: boolean
+  handleClose?: (e: boolean) => void
   anchor?: any
   children?: ReactNode
   buttonPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
 }
 
-type MenuItems =  {
-  icon ?: JSX.Element,
-  label : string,
-  action ?: (e : React.MouseEvent<HTMLLIElement, MouseEvent>,item : string) => void
-  isButton ?: boolean
+type MenuItems = {
+  icon?: JSX.Element
+  label: string
+  action?: (
+    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    item: string
+  ) => void
+  isButton?: boolean
 }
 
 export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
@@ -39,7 +36,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   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"
+    "border-2 border-blue-400 border-opacity-20 ring-offset-1 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",
@@ -51,47 +48,45 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
     closed: "max-h-0 opacity-0 animate-expandUp",
   }
   return (
-    <div className="">
-      <div className="relative w-fit" onClick={() => handleClose(!open)}>
-        {children}
+    <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
+        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>
   )

package/src/elements/HawaModal.tsx

@@ -1,10 +1,11 @@
+import clsx from "clsx"
 import React, { ReactElement, useEffect } from "react"
 
 type ModalTypes = {
   open: boolean
   title: string
   onClose: () => void
-  // closeOnClickOutside: any
+  closeOnClickOutside?: boolean
   modalID?: string
   children: ReactElement
   actions: any
@@ -13,63 +14,68 @@ export const HawaModal: React.FunctionComponent<ModalTypes> = ({
   open,
   title,
   onClose,
+  closeOnClickOutside = true,
   ...props
 }) => {
-  // useEffect((): any => {
-  //   if (closeOnClickOutside) {
-  //     window.onclick = () => {
-  //       console.log("open : ", open)
-  //       if (open) {
-  //         console.log("Im clicing")
-  //         onClose()
-  //       }
-  //     }
-  //   }
-  //   return () => (window.onclick = null)
-  // }, [open])
+  let defaultStyle =
+    "absolute top-1/2 left-1/2 w-full h-screen flex flex-col justify-center items-center -translate-x-1/2 -translate-y-1/2 transition-all"
+  useEffect((): any => {
+    if (closeOnClickOutside && open) {
+      window.onclick = (e) => {
+        e.stopPropagation()
+        console.log("open : ", open)
+        console.log("Im clicing")
+        onClose()
+      }
+    }
+    return () => (window.onclick = null)
+  }, [open])
   return (
     <div
-      id={props.modalID}
-      tabIndex={-1}
-      aria-hidden="true"
-      className={`${
-        open ? "block" : "hidden"
-      } h-modal fixed top-0 right-0 left-0 z-50 w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0 md:h-full`}
+      className={clsx(
+        defaultStyle,
+        open ? "z-10  opacity-100 " : "invisible -z-10 opacity-0"
+      )}
     >
-      <div className="relative h-full w-full max-w-2xl p-4 md:h-auto">
-        <div className="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <div className="flex items-start justify-between rounded-t border-b p-4 dark:border-gray-600">
-            <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-              {title}
-            </h3>
-            <button
-              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={(e) => {
-                onClose()
-              }}
+      <div
+        className={clsx(
+          "absolute h-screen w-full bg-gray-500 opacity-50",
+          open ? "opacity-50" : "opacity-0"
+        )}
+      ></div>
+
+      <div className="relative w-1/2 max-w-md rounded-lg bg-white p-1 shadow-lg dark:bg-gray-700">
+        <div className="flex items-start justify-between rounded-t p-3 dark:border-gray-600">
+          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+            {title}
+          </h3>
+          <button
+            type="button"
+            className="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={(e) => {
+              onClose()
+            }}
+          >
+            <svg
+              aria-hidden="true"
+              className="h-5 w-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                aria-hidden="true"
-                className="h-5 w-5"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <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>
-              <span className="sr-only">Close modal</span>
-            </button>
-          </div>
-          <div className="space-y-6 p-6">{props.children}</div>
-          <div className="flex items-center space-x-2 rounded-b border-t border-gray-200 p-6 dark:border-gray-600">
-            {props.actions}
-          </div>
+              <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>
+            <span className="sr-only">Close modal</span>
+          </button>
+        </div>
+        <div className="space-y-6 p-3">{props.children}</div>
+        <div className="mx-2 flex items-center justify-end space-x-1  p-0  dark:border-gray-600">
+          {props.actions}
         </div>
       </div>
     </div>

package/src/elements/HawaSelect.tsx

@@ -68,7 +68,7 @@ const Menu: React.FunctionComponent<MenuTypes> = ({
 }) => {
   return (
     <div
-      className="absolute mt-2 w-full rounded-lg bg-white"
+      className="absolute z-10 mt-2 w-full rounded-lg bg-white ring-1 ring-blue-200"
       ref={innerRef}
       {...innerProps}
       // {...props}
@@ -81,7 +81,7 @@ const Menu: React.FunctionComponent<MenuTypes> = ({
 type SelectTypes = {
   label?: any
   isCreatable?: any
-  options?: any
+  options?: any[any]
   isClearable?: any
   isMulti?: any
   isSearchable?: any
@@ -92,6 +92,7 @@ type SelectTypes = {
   fullWidth?: any
   value?: any
   children?: any
+  getOptionLabel?: any
 }
 export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
   return (
@@ -115,6 +116,7 @@ export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
             Option,
             Menu,
           }}
+          getOptionLabel={props.getOptionLabel}
         />
       )}
       {props.isCreatable && (

package/src/elements/HawaTable.tsx

@@ -3,9 +3,9 @@ import { HawaButton } from "./HawaButton"
 
 type TableTypes = {
   lang?: any
-  columns?: any
+  columns: any[string]
   actions?: any
-  rows?: any
+  rows?: any[any]
   noDataText?: any
   handleActionClick?: any
   end?: any

package/src/elements/HawaTooltip.tsx

@@ -1,35 +1,42 @@
-import React, { useState } from "react";
-
+import clsx from "clsx"
+import React, { useState } from "react"
 
 type THawaToolTip = {
-  children : React.ReactElement
-  content : string
+  children: React.ReactElement
+  content: string
 }
 
-export const HawaTooltip : React.FunctionComponent<THawaToolTip> = ({children, content}) => {
-  const [isHovered, setIsHovered] = useState<boolean>(false);
+export const HawaTooltip: React.FunctionComponent<THawaToolTip> = ({
+  children,
+  content,
+}) => {
+  const [isHovered, setIsHovered] = useState<boolean>(false)
+  let tooltipStyles = {
+    default:
+      "absolute top-5 opacity-0 left-0 z-10 inline-block w-fit max-w-xs rounded-lg bg-gray-900 py-2 px-3 text-center text-sm font-medium text-white opacity-100 shadow-sm transition-all duration-300 dark:bg-gray-700",
+    hovered:
+      "absolute top-5 opacity-100 left-0 z-10 inline-block w-fit max-w-xs rounded-lg bg-gray-900 py-2 px-3 text-center text-sm font-medium text-white opacity-100 shadow-sm transition-all duration-300 dark:bg-gray-700",
+  }
   return (
     <div className="relative">
       <div
-        className="w-fit"
+        className="flex h-fit w-fit items-center justify-center"
         onMouseEnter={() => {
-          setIsHovered(true);
+          setIsHovered(true)
         }}
         onMouseLeave={() => {
-          setIsHovered(false);
+          setIsHovered(false)
         }}
       >
         {children}
       </div>
       <div
-        className={
-          isHovered
-            ? "absolute top-10 left-0 z-10 inline-block w-fit max-w-xs rounded-lg bg-gray-900 py-2 px-3 text-center text-sm font-medium text-white opacity-100 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
-            : "absolute top-10 left-0 z-10 inline-block w-fit max-w-xs rounded-lg bg-gray-900 py-2 px-3 text-center text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
-        }
+        className={clsx(
+          isHovered ? tooltipStyles["hovered"] : tooltipStyles["default"]
+        )}
       >
         {content}
       </div>
     </div>
-  );
-};
+  )
+}

package/src/layout/HawaContainer.tsx

@@ -13,11 +13,11 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
     "flex w-full max-w-sm flex-col rounded-xl bg-primary-300 p-4 dark:bg-gray-600"
   let maxWidthStyles: any = {
     full: "md:max-w-xl",
-    small: "md:max-w-sm",
+    small: "md:max-w-sm w-1/3 min-w-min",
     normal: "md:max-w-md",
   }
   return (
-    <div className={clsx(defaultStyle, maxWidthStyles[maxWidth])}>
+    <div className={clsx(defaultStyle, maxWidthStyles[maxWidth], "")}>
       {props.children}
     </div>
   )