@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/elements/HawaItemCard.tsx

@@ -1,164 +0,0 @@
-import React, { useEffect, useState, FC } from "react"
-import clsx from "clsx"
-import { Button } from "./Button"
-import { DropdownMenu, MenuItemType } from "./DropdownMenu"
-
-interface ItemCardTypes {
-  headerActions?: MenuItemType[]
-  // headerActions?: THeaderActions[]
-  header?: any
-  content?: any
-  /** a URL for the image of the card */
-  cardImage?: string
-  /** a function that fires when the card is clicked anywhere */
-  onCardClick?: any
-  /** a React node with HawaIconCount children to have counters at the bottom of the card */
-  counts?: JSX.Element
-  /** The action buttons on the bottom right of the card */
-  actions?: JSX.Element
-  /** The orientation of the card */
-  orientation?: "horizontal" | "vertical"
-  /** Enabling this blurs the image on hover and shows an action button */
-  clickableImage?: boolean
-  /** The function of the action button on the image of the card */
-  clickableImageAction?: () => void
-  /** The text of the action button on the image of the card */
-  clickableImageActionText: string
-  /** The icon of the action button on the image of the card */
-  clickableImageActionIcon?: any
-}
-
-type THeaderActions = {
-  icon?: JSX.Element
-  value?: string
-  label: string
-  action?: (e: any) => void
-  isButton?: boolean
-}
-export const HawaItemCard: FC<ItemCardTypes> = ({
-  actions,
-  counts,
-  content,
-  headerActions,
-  clickableImage,
-  clickableImageAction,
-  clickableImageActionText,
-  clickableImageActionIcon,
-  header,
-  cardImage,
-  orientation = "vertical",
-  ...props
-}) => {
-  let defaultStyle =
-    "block rounded 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: "h-auto max-h-56 w-full rounded-t-lg object-cover",
-    horizontal:
-      // "h-auto w-full rounded-l-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg",
-      // "h-full w-full rounded-l-lg object-cover md:w-48 md:rounded-none md:rounded-l-lg",
-      "h-full w-48 rounded-l object-cover",
-  }
-  let headerActionsButtonStyle =
-    "inline-block rounded 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)
-
-  function handleOpenActionHeader() {
-    setOpenActionHeader(!openActionHeader)
-  }
-
-  useEffect((): any => {
-    window.onclick = () => {
-      if (openActionHeader) {
-        setOpenActionHeader(false)
-      }
-    }
-    return () => (window.onclick = null)
-  }, [openActionHeader])
-
-  return (
-    <div
-      className={clsx(defaultStyle, orientationStyles[orientation])}
-      {...props}
-    >
-      {cardImage && (
-        <div className="group relative overflow-clip">
-          <img
-            src={"https://via.placeholder.com/50"}
-            className={clsx(
-              imageStyles[orientation],
-              clickableImage
-                ? "overflow-clip transition-all group-hover:blur-lg"
-                : ""
-            )}
-          />
-          {clickableImage && (
-            <div className="absolute left-0 top-0 flex h-full w-full items-center  justify-center opacity-0 transition-all group-hover:opacity-100 ">
-              <Button
-                // startIcon={clickableImageActionIcon}
-                variant="secondary"
-                onClick={clickableImageAction}
-                className="flex flex-row gap-2"
-              >
-                {clickableImageActionIcon}
-                {clickableImageActionText}
-              </Button>
-            </div>
-          )}
-        </div>
-      )}
-      <div className="relative w-full p-6">
-        {headerActions && (
-          <div className="max-h- bg-red absolute right-0 top-0 flex justify-end pr-3 pt-3">
-            <DropdownMenu
-              items={headerActions}
-              trigger={
-                <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"
-                  >
-                    <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>
-              }
-            />
-          </div>
-        )}
-
-        {header && (
-          <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-            {header}
-          </h5>
-        )}
-        {content && (
-          <span className="w-full font-normal text-gray-700 dark:text-gray-400">
-            {content}
-          </span>
-        )}
-        {actions || counts ? (
-          <div
-            className={clsx(
-              "mt-3 flex items-center rounded-b-lg dark:text-white ",
-              actions && counts ? "justify-between" : "justify-end"
-            )}
-          >
-            {counts}
-            {actions}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}

package/src/elements/HawaLandingCard.tsx

@@ -1,68 +0,0 @@
-import clsx from "clsx"
-import React, { FC } from "react"
-
-type LandingCardTypes = {
-  orientation: "vertical" | "horizontal"
-  title: string
-  description: string
-  imageURL: string
-  handleHide: any
-  texts?: {
-    titleTip?: string
-    title?: string
-    description?: string
-    linkText?: string
-  }
-  buttonLink?: string
-  className?: any
-}
-export const HawaLandingCard: FC<LandingCardTypes> = ({
-  orientation = "horizontal",
-  ...props
-}) => {
-  let cardStyles = {
-    horizontal:
-      "flex max-w-xl rounded border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
-    vertical:
-      "flex max-w-xs rounded border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
-  }
-
-  let imageStyles = {
-    horizontal: "w-8 h-8 rounded",
-    vertical: "w-14 h-14 rounded",
-  }
-
-  return (
-    <div
-      className={clsx(
-        cardStyles[orientation],
-        "flex flex-col p-10",
-        "relative overflow-hidden dark:text-white",
-        props.className
-      )}
-      {...props}
-    >
-      {props.texts?.titleTip && (
-        <div className="text-sm text-red-600">{props.texts?.titleTip}</div>
-      )}
-      {props.imageURL && (
-        <img
-          className="absolute -bottom-10 -right-10 h-40 w-auto "
-          src={props.imageURL}
-        />
-      )}
-
-      {props.texts?.title && (
-        <div className="mt-2 text-lg font-medium">{props.texts?.title} </div>
-      )}
-      {props.texts?.description && (
-        <div className="z-10 mt-4 text-sm">{props.texts?.description}</div>
-      )}
-      {props.texts?.linkText && (
-        <div className="z-10 mt-6 text-sm underline underline-offset-8">
-          {props.texts?.linkText}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/HawaLoading.tsx

@@ -1,81 +0,0 @@
-import React, { FC } from "react"
-import clsx from "clsx"
-
-type LoadingTypes = {
-  size?: "button" | "xs" | "sm" | "normal" | "lg" | "xl"
-  design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots"
-  color?: any
-}
-
-export const HawaLoading: FC<LoadingTypes> = ({
-  design = "spinner",
-  size = "sm",
-  color,
-  ...props
-}) => {
-  let sizeStyles = {
-    button: "h-4 w-4",
-    xs: "h-1 w-1",
-    sm: "h-6 w-6",
-    normal: "h-8 w-8",
-    lg: "h-14 w-14",
-    xl: "h-24 w-24",
-  }
-
-  let animationStyles = {
-    pulse: "animate-in fade-in duration-1000",
-    bounce: "animate-bounce",
-  }
-  switch (design.split("-")[0]) {
-    case "dots":
-      return (
-        <div className="flex flex-row gap-2">
-          <div
-            className={clsx(
-              "animate-bounce rounded-full delay-100 repeat-infinite",
-              size === "button" ? "h-2 w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-              color ? color : "bg-primary"
-            )}
-          ></div>
-          <div
-            className={clsx(
-              "animate-bounce rounded-full delay-200 repeat-infinite",
-              size === "button" ? "h-2 w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-              color ? color : "bg-primary"
-            )}
-          ></div>
-          <div
-            className={clsx(
-              "animate-bounce rounded-full delay-300 repeat-infinite",
-              size === "button" ? "h-2 w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-              color ? color : "bg-primary"
-            )}
-          ></div>
-        </div>
-      )
-
-    default:
-      return (
-        <div className="flex flex-row gap-x-3">
-          <div aria-label="Loading..." role="status">
-            <svg
-              className={clsx(sizeStyles[size], "animate-spin")}
-              viewBox="3 3 18 18"
-            >
-              <path
-                className="fill-primary/20"
-                d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
-              ></path>
-              <path
-                className={color ? color : "fill-primary"}
-                d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
-              ></path>
-            </svg>
-          </div>
-        </div>
-      )
-  }
-}

package/src/elements/HawaMenu.tsx

@@ -1,226 +0,0 @@
-import React, { ReactNode, useEffect, useRef, useState, FC } from "react"
-import clsx from "clsx"
-
-// TODO: add width to decrease width
-
-interface TMenuTypes {
-  menuItems: MenuItems[][]
-  withHeader?: boolean
-  headerTitle?: string
-  headerSubtitle?: string
-  direction?: "rtl" | "ltr"
-  anchor?: any
-  children?: ReactNode
-  position?:
-    | "left-top"
-    | "left-bottom"
-    | "right-top"
-    | "right-bottom"
-    | "top-right"
-    | "top-left"
-    | "bottom-right"
-    | "bottom-left"
-  onClickOutside?: any
-  actionedItem?: any
-  size?: "small" | "normal" | "large"
-}
-
-type MenuItems = {
-  icon?: JSX.Element
-  disabled?: boolean
-  label: string
-  action?: (e: any) => void
-  isButton?: boolean
-  element?: any
-}
-
-export const HawaMenu: FC<TMenuTypes> = ({
-  menuItems,
-  withHeader,
-  direction = "ltr",
-  headerTitle,
-  headerSubtitle,
-  size = "normal",
-  children,
-  onClickOutside,
-  actionedItem,
-  position = "top-right",
-}) => {
-  const [menuOpened, setMenuOpened] = useState(false)
-  const childrenRef = useRef(null)
-  const [childrenHeight, setChildrenHeight] = useState(null)
-  const [childrenWidth, setChildrenWidth] = useState(null)
-  const menuRef = useRef(null)
-  const [menuWidth, setMenuWidth] = useState(null)
-  const [menuHeight, setMenuHeight] = useState(null)
-
-  useEffect(() => {
-    setMenuHeight(menuRef.current?.getBoundingClientRect().height)
-    setMenuWidth(menuRef.current?.getBoundingClientRect().width)
-    setChildrenHeight(childrenRef.current?.getBoundingClientRect().height)
-    setChildrenWidth(childrenRef.current?.getBoundingClientRect().width)
-
-    const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setMenuOpened(false)
-      }
-    }
-    document.addEventListener("click", handleClickOutside, true)
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true)
-    }
-  }, [onClickOutside])
-
-  let defaultStyles =
-    "border-none absolute ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded bg-gray-50 shadow-lg transition-all dark:bg-gray-700"
-  let sizeStyles = {
-    small: "text-[11px] p-1 px-4 m-0",
-    normal: "py-2 px-4",
-    large: "",
-  }
-  let menuCoordinates
-  let spacing = 5
-  switch (position) {
-    case "top-right":
-      menuCoordinates =
-        direction === "rtl"
-          ? `${menuWidth - childrenWidth}px, -${
-              menuHeight + childrenHeight + spacing
-            }px`
-          : `0px, -${menuHeight + childrenHeight + spacing}px`
-      break
-    case "top-left":
-      menuCoordinates =
-        direction === "rtl"
-          ? `${0}px, -${menuHeight + childrenHeight + spacing}px`
-          : `-${menuWidth - childrenWidth}px, -${
-              menuHeight + childrenHeight + spacing
-            }px`
-      break
-    case "bottom-right":
-      menuCoordinates =
-        direction === "rtl"
-          ? `-${0}px, ${spacing}px`
-          : `-${childrenWidth - menuWidth}px, ${spacing}px`
-
-      break
-    case "bottom-left":
-      menuCoordinates =
-        direction === "rtl"
-          ? `0px, ${spacing}px`
-          : `-${menuWidth - childrenWidth}px,${spacing}px`
-      break
-    case "right-bottom":
-      menuCoordinates =
-        direction === "rtl"
-          ? `${menuWidth + spacing}px, -${childrenHeight}px`
-          : `${childrenWidth + spacing}px, -${childrenHeight}px`
-      break
-    case "right-top":
-      menuCoordinates =
-        direction === "rtl"
-          ? `${menuWidth + spacing}px, -${menuHeight}px`
-          : `${childrenWidth + spacing}px, -${menuHeight}px`
-      break
-    case "left-bottom":
-      menuCoordinates =
-        direction === "rtl"
-          ? `-${childrenWidth + spacing}px, -${childrenHeight}px`
-          : `-${menuWidth + spacing}px, -${childrenHeight}px`
-      break
-    case "left-top":
-      menuCoordinates =
-        direction === "rtl"
-          ? `-${childrenWidth + spacing}px, -${menuHeight}px`
-          : `-${menuWidth + spacing}px, -${menuHeight}px`
-      break
-
-    default:
-      menuCoordinates = `-${menuWidth / 2}px, -${
-        childrenHeight + menuHeight / 2
-      }px`
-
-      break
-  }
-  return (
-    <div
-      onClick={() => {
-        if (menuOpened) setMenuOpened(false)
-        else setMenuOpened(true)
-      }}
-    >
-      <div ref={childrenRef}>{children}</div>
-
-      <div
-        ref={menuRef}
-        style={{
-          position: "absolute",
-          width: "max-content",
-          transform: `translate(${menuCoordinates})`,
-          maxWidth: "200px",
-        }}
-        className={clsx(
-          defaultStyles,
-          menuOpened ? "opacity-100" : "invisible opacity-0"
-        )}
-      >
-        {withHeader && (
-          <div className="px-4 py-3 text-xs text-gray-900 dark:text-white">
-            <div>{headerTitle}</div>
-            <div className="truncate font-medium">{headerSubtitle}</div>
-          </div>
-        )}
-        {menuItems?.map((group, o) => {
-          return (
-            <ul
-              key={o}
-              className="bg-layout-1200 flex flex-col gap-1 p-1 text-gray-700 dark:text-gray-200"
-            >
-              {group?.map((item, indx) => {
-                return item.element ? (
-                  <li
-                    key={indx}
-                    className="cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
-                  >
-                    {item.element}
-                  </li>
-                ) : (
-                  <li
-                    key={indx}
-                    onClick={() => {
-                      if (item.disabled) {
-                        console.log("button is disabled")
-                      } else {
-                        item?.action(actionedItem)
-                      }
-                    }}
-                    className={clsx(
-                      "transition-all",
-                      item.isButton
-                        ? "flex cursor-pointer flex-row items-center rounded-inner bg-buttonPrimary-500 px-4 py-2 text-white  hover:bg-buttonPrimary-700 rtl:flex-row-reverse"
-                        : item.disabled
-                        ? "text-gray-300"
-                        : " flex cursor-pointer flex-row items-center rounded-inner hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600  dark:hover:text-white ",
-                      sizeStyles[size]
-                    )}
-                  >
-                    {item.icon && (
-                      <div
-                        className={
-                          size === "small" ? "mr-1 rtl:ml-1" : "mr-2 rtl:ml-2"
-                        }
-                      >
-                        {item.icon}
-                      </div>
-                    )}
-                    {item.label}
-                  </li>
-                )
-              })}
-            </ul>
-          )
-        })}
-      </div>
-    </div>
-  )
-}

package/src/elements/HawaModal.tsx

@@ -1,89 +0,0 @@
-import React, { ReactElement, useEffect, FC } from "react"
-import clsx from "clsx"
-
-type ModalTypes = {
-  /**   * The boolean to open and close the modal   */
-  open: boolean
-  /**   * The title of the modal, it will appear in the header of the modal   */
-  title: string
-  /**
-   * a function that's triggered when the modal is closed either by the clicking the close button or outside the modal.
-   * @returns void
-   */
-  onClose: () => void
-  /**   * Boolean to enable/disable closing the modal upon clicking outside the modal   */
-  closeOnClickOutside?: boolean
-  /**   * The id of the modal   */
-  modalID?: string
-  children: ReactElement
-  /**   * The array of actions for the modal, it will appear in the footer of the modal   */
-  actions: any
-}
-export const HawaModal: FC<ModalTypes> = ({
-  open,
-  title,
-  onClose,
-  closeOnClickOutside = true,
-  ...props
-}) => {
-  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()
-        onClose()
-      }
-    }
-    return () => (window.onclick = null)
-  }, [open])
-  return (
-    <div
-      className={clsx(
-        defaultStyle,
-        open ? "z-10  opacity-100 " : "invisible -z-10 opacity-0"
-      )}
-    >
-      <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 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 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"
-            >
-              <path
-                fillRule="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"
-                clipRule="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/HawaPanelTabs.tsx

@@ -1,57 +0,0 @@
-import React, { useState, FC } from "react"
-
-type PanelTabsTypes = {
-  defaultValue: any
-  options: [{ label: string; value: string }]
-  lang: any
-  handleChange: any
-  location: any
-}
-export const HawaPanelTabs: FC<PanelTabsTypes> = (props) => {
-  const [value, setValue] = useState(props.defaultValue)
-  return (
-    <div>
-      <div className="mb-4 border-b border-gray-200 dark:border-gray-700">
-        <ul
-          className="-mb-px flex flex-wrap text-center text-sm font-medium"
-          id="myTab"
-          data-tabs-toggle="#myTabContent"
-          role="tablist"
-        >
-          {props.options.map((option: any, o) => {
-            return (
-              <li key={o} className="mr-2" role="presentation">
-                <button
-                  className="inline-block rounded-t-lg border-b-2 border-blue-600 p-4 text-blue-600 hover:text-blue-600 dark:border-blue-500 dark:text-blue-500 dark:hover:text-blue-500"
-                  id={`${option.value}-tab`}
-                  data-tabs-target={`#${option.value}`}
-                  type="button"
-                  role="tab"
-                  aria-controls={option.value}
-                  aria-selected="true"
-                >
-                  {option.label}
-                </button>
-              </li>
-            )
-          })}
-        </ul>
-      </div>
-      <div id="myTabContent">
-        {props.options.map((option: any, indx) => {
-          return (
-            <div
-              key={indx}
-              className="rounded bg-gray-50 p-4 dark:bg-gray-800"
-              id={`${option.value}`}
-              role="tabpanel"
-              aria-labelledby={`${option.value}-tab`}
-            >
-              {option.content}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}