@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/elements/HawaButton.tsx

@@ -1,200 +0,0 @@
-import React, { FC, ButtonHTMLAttributes, useState } from "react"
-import clsx from "clsx"
-import { HawaLoading } from "./HawaLoading"
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "contained" | "outlined"
-  feedback?: string
-  tooltipDirection?: "rtl" | "ltr"
-  color?: "default" | "primary" | "secondary" | "light" | "dark"
-  width?: "full" | "normal" | "half"
-  size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full" | "icon"
-  margins?: "none" | "1" | "2" | "3" | "4"
-  tooltip?: string
-  tooltipSize?: "normal" | "small" | "large"
-  tooltipPosition?:
-    | "left-top"
-    | "left-bottom"
-    | "right-top"
-    | "right-bottom"
-    | "top-right"
-    | "top-left"
-    | "bottom-right"
-    | "bottom-left"
-  startIcon?: any
-  endIcon?: any
-  isLoading?: boolean
-  badge?: any
-  edgeCorner?: any
-  disabled?: boolean
-}
-
-const disabledSyles = "cursor-default pointer-events-none"
-const disabledVariantSyles = {
-  contained: "text-gray-300 bg-gray-100",
-  outlined: "text-gray-300 border-gray-300",
-}
-const baseStyles =
-  "cursor-pointer  justify-center items-center text-center font-medium transition-all "
-const sizeStyles = {
-  icon: "h-10 w-10",
-  xs: "px-1.5 py-2 text-[9px] h-fit",
-  small: "text-xs px-2.5 py-1.5",
-  medium: "text-sm leading-4 px-3 py-2",
-  default: "h-10 px-4 py-2",
-  large: "text-sm px-4 py-2",
-  noPadding: "p-0",
-  full: "h-full max-h-full p-2",
-}
-const widthStyles = {
-  full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
-  half: "w-full text-center flex items-center justify-center h-full",
-  normal:
-    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
-}
-const containerWidthStyles = {
-  full: "w-full flex justify-center text-center inline-flex items-center",
-  half: "w-1/2",
-  normal: "w-fit",
-}
-const variantStyles = {
-  contained: "border-transparent",
-  // outlined: "bg-transparent border",
-  outlined:
-    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-}
-const colorStyles = {
-  contained: {
-    default:
-      "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-700 bg-buttonPrimary-500 text-white",
-    primary:
-      "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
-    secondary:
-      "bg-buttonSecondary-500 hover:text-white hover:bg-buttonSecondary-700",
-    gray: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
-    dark: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
-  },
-  outlined: {
-    default:
-      "text-gray-600 border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 dark:text-white",
-    primary: "text-black hover:bg-gray-50  dark:text-white",
-    secondary:
-      " dark:text-white text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
-    gray: "border-gray-300 hover:bg-gray-200",
-    dark: "border-gray-900 hover:bg-gray-700",
-  },
-}
-
-export const HawaButton: FC<ButtonProps> = ({
-  className,
-  variant = "contained",
-  color = "default",
-  size = "default",
-  width = "normal",
-  disabled = false,
-  isLoading = false,
-  tooltip,
-  tooltipSize = "normal",
-  tooltipPosition = "top-left",
-  tooltipDirection = "ltr",
-  margins = "2",
-  children,
-  badge,
-  edgeCorner = false,
-  feedback,
-  ...props
-}) => {
-  const [isClicked, setIsClicked] = useState(false)
-  const [buttonText, setButtonText] = useState(children)
-
-  const handleClick = (event) => {
-    if (props.onClick) {
-      props.onClick(event)
-    }
-    if (feedback && !isClicked) {
-      setButtonText(feedback)
-      setIsClicked(true)
-      setTimeout(() => {
-        setButtonText(children)
-        setIsClicked(false)
-      }, 2000)
-    }
-  }
-
-  return (
-    <div
-      className={clsx(
-        "relative",
-        margins !== "none" ? `my-${margins}` : "m-0",
-        containerWidthStyles[width]
-      )}
-    >
-      <button
-        className={
-          disabled
-            ? clsx(
-                className,
-                baseStyles,
-                edgeCorner ? "rounded-inner" : "rounded",
-
-                variantStyles[variant],
-                sizeStyles[size],
-                widthStyles[width],
-                disabledSyles,
-                disabledVariantSyles[variant]
-              )
-            : clsx(
-                className,
-                "overflow-x-clip",
-                baseStyles,
-                edgeCorner ? "rounded-inner" : "rounded",
-                variantStyles[variant],
-                sizeStyles[size],
-                colorStyles[variant][color],
-                widthStyles[width]
-              )
-        }
-        disabled={disabled}
-        // onClick={props.onClick}
-        onClick={handleClick}
-      >
-        {!isLoading ? (
-          <div
-            className={clsx(
-              " s flex flex-col-reverse items-start justify-center gap-4 transition-all",
-              isClicked && feedback
-                ? " -translate-y-8 pb-1 pt-1"
-                : "translate-y-0"
-            )}
-          >
-            {isClicked && feedback ? (
-              <div className="w-full  text-center">{buttonText}</div>
-            ) : null}
-            <div className="flex w-full select-none flex-row items-center justify-center gap-2 whitespace-nowrap">
-              {props.startIcon && props.startIcon}
-              {children}
-              {props.endIcon && props.endIcon}
-            </div>
-          </div>
-        ) : (
-          <HawaLoading design="dots-pulse" color={"bg-white"} size="button" />
-        )}
-      </button>
-
-      {badge && (
-        <div
-          className={clsx(
-            typeof badge === "boolean"
-              ? "h-5 w-5"
-              : typeof badge === "string"
-              ? "h-5 w-7"
-              : "h-6 w-6",
-            "absolute -right-2 -top-2 inline-flex select-none  items-center justify-center rounded-full border-2 border-white bg-red-500 text-[9px] font-bold text-white dark:border-gray-900"
-          )}
-        >
-          {typeof badge === "number" && badge > 100 ? "+99" : badge}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/HawaCheckbox.tsx

@@ -1,54 +0,0 @@
-import React, { useEffect, useState, FC } from "react"
-import clsx from "clsx"
-
-type TCheckBoxTypes = {
-  centered?: boolean
-  label?: any
-  helperText?: any
-  id: string
-  onChange?: (e) => void
-  val?: boolean
-}
-
-export const HawaCheckbox: FC<TCheckBoxTypes> = (props) => {
-  const [isChecked, setVal] = useState(props.val)
-
-  useEffect(() => {
-    props.onChange(isChecked)
-  }, [isChecked])
-  return (
-    <div
-      className={clsx(
-        props.centered
-          ? "flex h-full items-center justify-center"
-          : "flex h-full items-start "
-      )}
-    >
-      <input
-        type="checkbox"
-        checked={isChecked}
-        onChange={(e) => setVal(e.target.checked)}
-        id={props.id}
-        aria-label={props.label}
-        className="mt-3 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.label || props.helperText) && (
-        <div
-          className=" flex cursor-pointer flex-col py-2"
-          onClick={(e) => setVal(!isChecked)}
-        >
-          {props.label && (
-            <label className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-              {props.label}
-            </label>
-          )}
-          {props.helperText && (
-            <p className="mx-2 mt-1 text-xs text-red-600 dark:text-red-500">
-              {props.helperText}
-            </p>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/HawaChip.tsx

@@ -1,59 +0,0 @@
-import React, { FC } from "react"
-import clsx from "clsx"
-
-type TChipTypes = {
-  /** The text inside the chip */
-  label: string
-  /** The small icon before the chip label  */
-  icon?: JSX.Element
-  /** The color of the chip, must be a tailwind color */
-  color?: string
-  /** The size of the chip */
-  size?: "small" | "normal" | "large"
-  /** Enable/Disable the dot before the label of the chip */
-  dot?: boolean
-  /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */
-  dotType?: "available" | "unavailable"
-}
-
-export const HawaChip: FC<TChipTypes> = ({
-  label,
-  size = "normal",
-  icon,
-  color,
-  dot,
-  dotType = "available",
-}) => {
-  let defaultStyles =
-    "flex flex-row w-fit gap-1 items-center rounded  px-2.5 py-0.5  font-bold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
-  let sizeStyles = {
-    small: "h-full leading-4 px-1 py-0 text-[9px] gap-0.5 ",
-    normal: "h-fit text-xs",
-    large: "",
-  }
-
-  let dotStyles = {
-    small: "flex h-1 w-1 rounded-full",
-    normal: "flex h-2 w-2 rounded-full",
-    large: "flex h-3 w-3 rounded-full",
-  }
-  let dotTypeStyles = {
-    available: "bg-green-500",
-    unavailable: "bg-red-500",
-  }
-  return (
-    <span
-      className={clsx(
-        defaultStyles,
-        sizeStyles[size],
-        color ? `bg-${color}-100 text-${color}-500` : "bg-layoutPrimary-500"
-      )}
-    >
-      {dot && (
-        <span className={clsx(dotStyles[size], dotTypeStyles[dotType])}></span>
-      )}
-      {icon && icon}
-      {label}
-    </span>
-  )
-}

package/src/elements/HawaCodeBlock.tsx

@@ -1,118 +0,0 @@
-import React, { FC, useState } from "react"
-import { Button } from "./Button"
-import { Tooltip } from "./Tooltip"
-import { cn } from "../util"
-import { useClipboard } from "../hooks/useClipboard"
-
-type CodeBlockTypes = {
-  color?: "dark" | "light"
-  language?: string
-  width?: "full" | "md" | "sm"
-  tabs?: TabsTypes[]
-  fileName?: string
-  code?: string
-}
-type TabsTypes = {
-  title: string
-  code: string
-}
-
-export const HawaCodeBlock: FC<CodeBlockTypes> = ({
-  tabs,
-  code,
-  fileName,
-  width = "full",
-}) => {
-  const clipboard = useClipboard()
-  const [selectedTab, setSelectedTab] = useState(0)
-
-  let widthStyles = {
-    full: "w-full",
-    md: "w-full max-w-md",
-    sm: "w-full max-w-sm",
-    xs: "w-full max-w-xs",
-  }
-
-  return (
-    <div
-      className={cn(
-        widthStyles[width],
-        "w-full flex-col items-center rounded bg-gray-200 text-left text-sm text-white dark:bg-gray-800 sm:text-base"
-      )}
-    >
-      {tabs && (
-        <div className="flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black dark:bg-gray-700 dark:text-white">
-          {tabs.map((tab, i) => (
-            <div
-              className={cn(
-                selectedTab === i
-                  ? " border-b-2 border-primary"
-                  : "bg-transparent"
-              )}
-            >
-              <div
-                onClick={() => setSelectedTab(i)}
-                className={cn(
-                  "mb-1 w-full max-w-[52px] cursor-pointer rounded-inner p-2 py-1 text-center text-[0.75rem] hover:bg-gray-300 dark:hover:bg-gray-500"
-                )}
-              >
-                {tab.title}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-      {fileName && (
-        <div className="flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black  dark:bg-gray-700 dark:text-white">
-          <div
-            className={cn(
-              "mb-1 w-full max-w-[52px] rounded-inner p-2 py-1 text-center text-[0.75rem]"
-            )}
-          >
-            {fileName}
-          </div>
-        </div>
-      )}
-      <pre>
-        <code
-          className={cn(
-            "flex w-full flex-row items-start justify-between rounded bg-gray-200 p-0 text-left  text-sm text-black dark:bg-gray-800 dark:text-white sm:text-base"
-          )}
-        >
-          <div className="flex min-h-[37.75px] w-full  flex-col  justify-center p-4 ">
-            {tabs ? tabs[selectedTab].code : code}
-          </div>
-          <div className="flex w-fit flex-row items-center gap-2 p-2">
-            <Tooltip
-              open={clipboard.copied}
-              side="left"
-              content={<div>Copied!</div>}
-            >
-              <Button
-                size="icon"
-                onClick={() =>
-                  clipboard.copy(tabs ? tabs[selectedTab].code : code)
-                }
-              >
-                <svg
-                  aria-label="Copy Icon"
-                  stroke="currentColor"
-                  fill="none"
-                  strokeWidth="2"
-                  viewBox="0 0 24 24"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  height="1em"
-                  width="1em"
-                >
-                  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
-                  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
-                </svg>
-              </Button>
-            </Tooltip>
-          </div>
-        </code>
-      </pre>
-    </div>
-  )
-}

package/src/elements/HawaColorPicker.tsx

@@ -1,40 +0,0 @@
-import React, { useState, FC, ChangeEvent } from "react"
-
-type ColorPickerTypes = {
-  /** The hex code for the color */
-  color?: any
-  /** Fires everytime the color changes */
-  handleChange?: (e: ChangeEvent<HTMLInputElement>) => void
-}
-
-export const HawaColorPicker: FC<ColorPickerTypes> = (props) => {
-  const [selectedColor, setSelectedColor] = useState(props.color)
-  return (
-    <div className={`flex w-fit flex-row rounded border p-0`}>
-      <div
-        style={{ backgroundColor: selectedColor }}
-        className="rounded-bl-lg rounded-tl-lg"
-      >
-        <input
-          type="color"
-          value={selectedColor}
-          onChange={(e) => {
-            setSelectedColor(e.target.value)
-            props.handleChange(e)
-          }}
-          className="opacity-0"
-        />
-      </div>
-
-      <input
-        type="text"
-        onChange={(e) => {
-          setSelectedColor(e.target.value)
-          props.handleChange(e)
-        }}
-        value={selectedColor}
-        className="w-24 bg-background  rounded-br-lg rounded-tr-lg pl-2 pr-2"
-      />
-    </div>
-  )
-}

package/src/elements/HawaCopyrights.tsx

@@ -1,30 +0,0 @@
-import React, { FC } from "react"
-
-type CopyRightsTypes = {
-  /** A text used as the version of the app, for example: v1.0.0 */
-  version?: string
-  /** Credit to the creator of the app, for example: Sikka Software */
-  credits?: string
-  /** The URL of the logo in the copyrights */
-  logoURL?: string
-  /** Enable/Disable the existance of the logo */
-  withLogo?: boolean
-  /** Fires when the logo is clicked, usually goes to the website of the creator of the app */
-  onLogoClicked?: any
-}
-
-export const HawaCopyrights: FC<CopyRightsTypes> = (props) => {
-  return (
-    <div className="my-2 flex flex-col items-center justify-center gap-1 text-xs text-gray-400">
-      {props.withLogo ? (
-        <a href={props.onLogoClicked}>
-          <div className="cursor-pointer">
-            <image href={props.logoURL} width={100} height={50} />
-          </div>
-        </a>
-      ) : null}
-      <div>{props.version}</div>
-      {props.credits ? props.credits : null}
-    </div>
-  )
-}

package/src/elements/HawaDatepicker.tsx

@@ -1,23 +0,0 @@
-import React, { FC, useState } from "react"
-
-type DatepickerTypes = {}
-
-export const HawaDatepicker: FC<DatepickerTypes> = () => {
-  const [selectedDate, setSelectedDate] = useState("")
-
-  const handleDateChange = (event) => {
-    setSelectedDate(event.target.value)
-  }
-  return (
-    <div className="relative inline-block text-left">
-      <span className="rounded-md shadow-sm">
-        <input
-          type="date"
-          value={selectedDate}
-          onChange={handleDateChange}
-          className="block w-full rounded border border-gray-300 bg-white p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-        />
-      </span>
-    </div>
-  )
-}

package/src/elements/HawaIconCount.tsx

@@ -1,17 +0,0 @@
-import React, { FC } from "react"
-
-type IconCountTypes = {
-  /** The icon of the counter */
-  icon: JSX.Element
-  /** The text next to the icon */
-  count?: string
-}
-
-export const HawaIconCount: FC<IconCountTypes> = (props) => {
-  return (
-    <div className="flex h-fit  flex-row items-center  gap-2 px-2">
-      <div>{props.icon}</div>
-      <div className="text-sm">{props.count}</div>
-    </div>
-  )
-}

package/src/elements/HawaInlineCode.tsx

@@ -1,9 +0,0 @@
-import React, { FC } from "react"
-
-type InlineCodeTypes = {
-  text: string
-}
-
-export const HawaInlineCode: FC<InlineCodeTypes> = (props) => {
-  return <code className="inline-code">{props.text}</code>
-}