@sikka/hawa 0.0.95 → 0.0.97

package/src/elements/{AutoCompleteField.js → AutoCompleteField.tsx}

@@ -1,9 +1,16 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
+import React from "react"
+import { Controller, useFormContext } from "react-hook-form"
 
-export const AutoCompleteField = (props) => {
-  const { control } = useFormContext();
-  const { name, rules, shouldUnregister } = props;
+type TAutoCompleteFieldTypes = {
+  name: string
+  rules: any
+  shouldUnregister: boolean
+}
+export const AutoCompleteField: React.FunctionComponent<
+  TAutoCompleteFieldTypes
+> = (props) => {
+  const { control } = useFormContext()
+  const { name, rules, shouldUnregister } = props
 
   return (
     <React.Fragment>
@@ -12,7 +19,7 @@ export const AutoCompleteField = (props) => {
         rules={rules}
         control={control}
         shouldUnregister={shouldUnregister}
-        className="theme_form_input"
+        // className="theme_form_input"
         render={({ field: { onChange, value } }) => {
           return (
             <input type="text" />
@@ -24,9 +31,9 @@ export const AutoCompleteField = (props) => {
             //   {...props}
             //   className={"theme_form_input"}
             // />
-          );
+          )
         }}
       />
     </React.Fragment>
-  );
-};
+  )
+}

package/src/elements/{DragDropImages.js → DragDropImages.tsx}

@@ -1,16 +1,30 @@
-import React, { useEffect, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { HawaAlert } from "./HawaAlert";
-import { HawaButton } from "./HawaButton";
+import React, { useEffect, useState } from "react"
+import { useDropzone } from "react-dropzone"
+import { HawaAlert } from "./HawaAlert"
+import { HawaButton } from "./HawaButton"
 
 const thumbsContainer = {
   display: "flex",
   flexDirection: "row",
   flexWrap: "wrap",
-  marginTop: 10
-};
+  marginTop: 10,
+}
+type DragDropImagesTypes = {
+  texts: any
+  files: [File]
+  setFiles: any
+  setDeletedFiles: any
+  maxFiles: number
+  accept: any
+  onAcceptedFiles: any
+  showPreview: any
+  onDeleteFile: any
+  onClearFiles: any
+  maxSize: number
+  errorMessages: string
+}
 
-export const DragDropImages = ({
+export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
   texts,
   files,
   setFiles,
@@ -22,19 +36,19 @@ export const DragDropImages = ({
   onDeleteFile,
   onClearFiles,
   maxSize,
-  errorMessages
+  errorMessages,
 }) =>
   // props
   {
-    const [cmp, setCmp] = useState(0);
-    const [max, setMax] = useState(0);
+    const [cmp, setCmp] = useState(0)
+    const [max, setMax] = useState<any>(0)
     //const [thumbs, setThumbs] = useState("");
     const {
       getRootProps,
       getInputProps,
       fileRejections,
       acceptedFiles,
-      isDragActive
+      isDragActive,
     } = useDropzone({
       multiple: true,
       accept: accept,
@@ -44,66 +58,66 @@ export const DragDropImages = ({
         setFiles(
           acceptedFiles.map((file, index) =>
             Object.assign(file, {
-              preview: URL.createObjectURL(file)
+              preview: URL.createObjectURL(file),
             })
           )
-        );
-      }
-    });
+        )
+      },
+    })
     useEffect(
       () => () => {
-        files?.forEach((file) => {
-          URL.revokeObjectURL(file.preview);
-        });
+        files?.forEach((file: any) => {
+          URL.revokeObjectURL(file.preview)
+        })
       },
       [files]
-    );
+    )
 
     useEffect(() => {
-      setFiles(acceptedFiles);
-    }, [acceptedFiles, cmp]);
+      setFiles(acceptedFiles)
+    }, [acceptedFiles, cmp])
 
     onClearFiles = () => {
-      acceptedFiles.length = 0;
-      acceptedFiles.splice(0, acceptedFiles.length);
-      setFiles([]);
-    };
+      acceptedFiles.length = 0
+      acceptedFiles.splice(0, acceptedFiles.length)
+      setFiles([])
+    }
 
     useEffect(() => {
       if (maxSize > 0) {
-        const k = 1024;
-        const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-        const i = Math.floor(Math.log(maxSize) / Math.log(1024));
+        const k = 1024
+        const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+        const i = Math.floor(Math.log(maxSize) / Math.log(1024))
 
         setMax(
           parseFloat((maxSize / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i]
-        );
+        )
       }
-    }, [maxSize]);
+    }, [maxSize])
     const errs = fileRejections.map((rej, i) => {
       return (
         <div key={i}>
           <div>{rej.file.name}</div>
           <div>{rej.errors[0].code}</div>
         </div>
-      );
-    });
-    const thumbs = files?.map((file, index) => (
+      )
+    })
+    const thumbs = files?.map((file: any, index: any) => (
       <div style={{ position: "relative", margin: 10 }}>
         <button
           onClick={(e) => {
-            e.stopPropagation();
-            acceptedFiles.splice(acceptedFiles.indexOf(file), 1);
-            setCmp(Math.random);
-            onDeleteFile(file);
+            e.stopPropagation()
+            acceptedFiles.splice(acceptedFiles.indexOf(file), 1)
+            setCmp(Math.random)
+            onDeleteFile(file)
           }}
           type="button"
-          className="text-gray-400 absolute left-0 bg-gray-900 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          className="absolute left-0 ml-auto inline-flex items-center rounded-lg bg-gray-900 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"
         >
           <svg
             aria-hidden="true"
-            className="w-5 h-5"
+            className="h-5 w-5"
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -128,41 +142,52 @@ export const DragDropImages = ({
             backgroundImage: `url(${file.preview})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
-            border: "1px solid black"
+            border: "1px solid black",
           }}
           key={file.name}
         />
       </div>
-    ));
+    ))
 
-    console.log("error", fileRejections);
+    console.log("error", fileRejections)
 
     return (
       <div
         // variant="drop-area"
         {...getRootProps({
-          style: { backgroundColor: isDragActive && "white" }
+          //fix type error
+          // style: { backgroundColor: isDragActive && "white" },
         })}
-        className="border-black border border-dashed rounded-xl flex flex-col justify-center"
+        className="flex flex-col justify-center rounded-xl border border-dashed border-black"
       >
         <input {...getInputProps()} />
-        <div className="text-center p-1">
+        <div className="p-1 text-center">
           Click here or drop files here to upload
         </div>
-        <div className="text-center p-1">Max file size is {max}</div>
+        <div className="p-1 text-center">Max file size is {max}</div>
         {acceptedFiles.length > 0 && (
           <HawaButton
             style={{ color: "black" }}
             onClick={(e) => {
-              e.stopPropagation();
-              onClearFiles(acceptedFiles);
+              e.stopPropagation()
+              onClearFiles(acceptedFiles)
             }}
-            text={"Clear All"}
-          />
+          >
+            Clear All
+          </HawaButton>
         )}
 
         {thumbs && showPreview ? (
-          <aside style={thumbsContainer}>{thumbs}</aside>
+          <aside
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              flexWrap: "wrap",
+              marginTop: 10,
+            }}
+          >
+            {thumbs}
+          </aside>
         ) : null}
         {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
           <HawaAlert text={texts.tooManyFiles} severity="error" />
@@ -173,5 +198,5 @@ export const DragDropImages = ({
         )}
         {}
       </div>
-    );
-  };
+    )
+  }

package/src/elements/DraggableCard.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+type DraggableCardTypes = {
+  children: any
+}
+
+export const DraggableCard: React.FunctionComponent<DraggableCardTypes> = (
+  props
+) => {
+  return (
+    <div className="flex flex-row rounded-xl bg-blue-300 p-4">
+      <button
+        className="inline-flex items-center rounded-lg bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        type="button"
+      >
+        <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>
+      </button>
+
+      <div className="p-4">{props.children}</div>
+    </div>
+  )
+}

package/src/elements/{HawaAccordian.js → HawaAccordian.tsx}

@@ -1,18 +1,23 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from "react"
 
-const AccordionItem = (props) => {
-  const [collapse, setCollapse] = React.useState(false);
+type AccordionItemTypes = {
+  title: any
+  count: any
+  content: any
+}
+
+const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
+  const [collapse, setCollapse] = React.useState(false)
   let noRounding =
-    "flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
+    "flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white"
   let roundedTop =
-    "rounded-t-xl border-b-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
+    "rounded-t-xl border-b-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white"
   let roundedBottom =
-    "rounded-b-xl border-t-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
+    "rounded-b-xl border-t-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white"
   let accPaper =
-    "p-5 font-light border border-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900";
+    "p-5 font-light border border-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900"
   let accPaperRounded =
-    "p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900";
+    "p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900"
   return (
     <div>
       <h2 id={"accordion-collapse-heading-" + props.count}>
@@ -27,7 +32,7 @@ const AccordionItem = (props) => {
           <span>{props.title}</span>
           <svg
             data-accordion-icon=""
-            className={`w-6 h-6 ${collapse ? "" : "rotate-180"}  shrink-0`}
+            className={`h-6 w-6 ${collapse ? "" : "rotate-180"}  shrink-0`}
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -52,26 +57,25 @@ const AccordionItem = (props) => {
         </div>
       </div>
     </div>
-  );
-};
-export const HawaAccordian = (props) => {
+  )
+}
+type AccordionTypes = {
+  content: any
+}
+export const HawaAccordian: React.FunctionComponent<AccordionTypes> = (
+  props
+) => {
   return (
     <div id="accordion-collapse" data-accordion="collapse">
-      {props.content.map((acc, i) => {
+      {props.content.map((acc: any, i: any) => {
         return (
           <AccordionItem
             title={acc.title}
             content={acc.content}
             count={props.content.length - 1 === i ? -1 : i}
           />
-        );
+        )
       })}
     </div>
-  );
-};
-HawaAccordian.propTypes = {
-  content: PropTypes.shape({
-    title: PropTypes.string,
-    content: PropTypes.string
-  })
-};
+  )
+}

package/src/elements/HawaAdCard.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+
+type AdCardTypes = {
+  orientation: "vertical" | "horizontal"
+  title: string
+  description: string
+  imageURL: string
+  handleHide: any
+}
+export const HawaAdCard: React.FunctionComponent<AdCardTypes> = ({
+  orientation,
+  ...props
+}) => {
+  let cardStyles = {
+    horizontal:
+      "flex max-w-xl rounded-lg border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
+    vertical:
+      "flex max-w-xs rounded-lg border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
+  }
+
+  let imageStyles = {
+    horizontal: "w-8 h-8 rounded-lg",
+    vertical: "w-14 h-14 rounded-lg",
+  }
+
+  return (
+    <div className={cardStyles[orientation]} {...props}>
+      <div className=" m-2 mr-0 flex  w-full max-w-fit items-center">
+        <img
+          src={
+            props.imageURL ? props.imageURL : "https://via.placeholder.com/50"
+          }
+          className={imageStyles[orientation]}
+        />
+      </div>
+      <div className="w-full p-2 text-xs">
+        <div className="font-bold">{props.title}</div>
+        <div>{props.description}</div>
+      </div>
+      <span
+        onClick={props.handleHide}
+        className="h-fit rounded-bl-lg rounded-tr-lg bg-blue-100 px-2.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
+      >
+        Hide
+      </span>
+    </div>
+  )
+}

package/src/elements/HawaAlert.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import clsx from "clsx"
+
+let severities = {
+  info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
+  warning:
+    "text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
+  error: "text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
+  success: "text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
+}
+type AlertTypes = {
+  severity: keyof typeof severities
+  title?: any
+  text: any
+  hideIcon?: any
+}
+export const HawaAlert: React.FunctionComponent<AlertTypes> = (props) => {
+  return (
+    <div
+      className={clsx(
+        "mb-4 flex flex-col rounded-lg p-4 text-sm",
+        severities[props.severity]
+      )}
+      role="alert"
+    >
+      <span className="font-medium">{props.title}</span>
+      <span>{" " + props.text}</span>
+    </div>
+  )
+}

package/src/elements/HawaButton.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import clsx from "clsx"
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "contained" | "outlined"
+  color?: "default" | "primary" | "secondary"
+  width?: "full" | "normal" | "half"
+  size?: "small" | "medium" | "large"
+  tooltip?: string
+  isLoading?: boolean
+}
+
+const baseStyles = "font-medium rounded-lg"
+
+const sizeStyles = {
+  small: "text-xs px-2.5 py-1.5",
+  medium: "text-sm leading-4 px-3 py-2",
+  large: "text-sm px-4 py-2",
+}
+
+const widthStyles = {
+  full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
+  normal:
+    "w-fit dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800",
+  half: "w-1/2",
+}
+const variantStyles = {
+  contained: "border border-transparent",
+  outlined: "bg-transparent border",
+}
+
+const colorStyles = {
+  contained: {
+    default: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
+    primary:
+      "text-white bg-primary-default hover:bg-primary-700 hover:text-white",
+    secondary:
+      "text-neutral-900 bg-secondary-default hover:bg-secondary-700 hover:text-white",
+  },
+  outlined: {
+    default: "text-gray-600 border-gray-600 hover:bg-gray-200",
+    primary: "text-black hover:bg-gray-50",
+    secondary: "text-secondary-800 border-secondary-800 hover:bg-secondary-100",
+  },
+}
+
+const disabledSyles = "cursor-default pointer-events-none"
+const disabledVariantSyles = {
+  contained: "text-gray-300 bg-gray-100",
+  outlined: "text-gray-300 border-gray-300",
+}
+
+export function HawaButton({
+  className,
+  variant = "contained",
+  color = "default",
+  size = "medium",
+  width = "normal",
+  disabled = false,
+  isLoading = false,
+  tooltip,
+  children,
+  ...props
+}: ButtonProps) {
+  const [isHovered, setIsHovered] = React.useState(false)
+
+  const buttonClass = disabled
+    ? clsx(
+        className,
+        baseStyles,
+        variantStyles[variant],
+        sizeStyles[size],
+        widthStyles[width],
+        disabledSyles,
+        disabledVariantSyles[variant]
+      )
+    : clsx(
+        className,
+        baseStyles,
+        variantStyles[variant],
+        sizeStyles[size],
+        colorStyles[variant][color],
+        widthStyles[width]
+      )
+
+  return (
+    <div className="relative my-2">
+      <button
+        onMouseEnter={() => {
+          setIsHovered(true)
+        }}
+        onMouseLeave={() => {
+          setIsHovered(false)
+        }}
+        className={buttonClass}
+        disabled={disabled}
+        {...props}
+      >
+        {!isLoading ? (
+          children
+        ) : (
+          <div className="flex flex-row gap-x-3">
+            <div className="h-5 w-5 animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"></div>
+          </div>
+        )}
+      </button>
+      {tooltip && (
+        <div
+          className={
+            isHovered
+              ? "absolute top-10 left-0 z-10 inline-block w-fit min-w-max 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 min-w-max 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"
+          }
+        >
+          {tooltip}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/elements/HawaCheckbox.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+type CheckoutTypes = {
+  centered?: any
+  label?: any
+  helperText?: any
+  onChange?: any
+}
+
+export const HawaCheckbox: React.FunctionComponent<CheckoutTypes> = (props) => {
+  return (
+    <div
+      className={props.centered ? "flex h-full items-center" : "flex h-full"}
+    >
+      <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"
+        {...props}
+      />
+      {(props.label || props.helperText) && (
+        <div className="items-stat flex flex-col">
+          {props.label && (
+            <label className="ml-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

@@ -0,0 +1,12 @@
+import React from "react"
+
+type ChipTypes = {
+  label: any
+}
+export const HawaChip: React.FunctionComponent<ChipTypes> = (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}
+    </span>
+  )
+}

package/src/elements/HawaColorPicker.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react"
+
+type ColorPickerTypes = {
+  color?: any
+  handleChange?: any
+}
+
+export const HawaColorPicker: React.FunctionComponent<ColorPickerTypes> = (
+  props
+) => {
+  const [selectedColor, setSelectedColor] = useState(props.color)
+  return (
+    <div className={`flex w-fit flex-row p-0`}>
+      <div
+        style={{ backgroundColor: selectedColor }}
+        className="rounded-tl-lg rounded-bl-lg"
+      >
+        <input
+          type="color"
+          value={selectedColor}
+          onChange={(e) => {
+            setSelectedColor(e.target.value)
+            props.handleChange(e.target.value)
+          }}
+          className="opacity-0"
+        />
+      </div>
+
+      <input
+        type="text"
+        value={selectedColor}
+        className="w-24 rounded-tr-lg rounded-br-lg pr-2 pl-2"
+      />
+    </div>
+  )
+}
+
+