@sikka/hawa 0.0.102 → 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/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/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/HawaSettingsRow.tsx

@@ -4,13 +4,11 @@ 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: "checkbox" | "text" | "radio" | "boolean" | "color" | "range"
+  settingsType: "text" | "radio" | "boolean" | "color" | "range"
   radioProps: {
     defaultValue: any
     onChangeTab: any
@@ -34,14 +32,13 @@ export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
   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">
+    <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 === "checkbox" && <HawaCheckbox centered />}
       {settingsType === "text" && <HawaTextField margin="none" width="small" />}
       {settingsType === "boolean" && <HawaSwitch />}
       {settingsType === "range" && <HawaRange {...rangeProps} />}
       {settingsType === "color" && <HawaColorPicker {...colorProps} />}
-      {settingsType === "radio" && <HawaTabs {...radioProps} />}
+      {settingsType === "radio" && <HawaRadio {...radioProps} />}
     </div>
   )
 }

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

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React, { useState } from "react"
 
 type TabsTypes = {
@@ -8,13 +9,18 @@ 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">
+      <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
@@ -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>