@sikka/hawa 0.0.241 → 0.0.242

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.241",
+  "version": "0.0.242",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/BackToTop.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactNode, useState, useEffect } from "react"
+import React, { FunctionComponent, useState, useEffect } from "react"
 import { clsx } from "clsx"
 
 type ComponentTypes = {
@@ -33,7 +33,7 @@ export const BackToTop: FunctionComponent<ComponentTypes> = ({ ...props }) => {
     props.anchor.current.addEventListener("scroll", onScroll)
 
     return () => {
-      props.anchor.current.removeEventListener("scroll", onScroll)
+      props.anchor.current?.removeEventListener("scroll", onScroll)
     }
   }, [])
 
@@ -72,14 +72,26 @@ export const BackToTop: FunctionComponent<ComponentTypes> = ({ ...props }) => {
   return (
     <div
       className={clsx(
-        "fixed rounded bg-blue-300 p-2 text-black transition-all hover:bg-blue-500",
-        `${visible ? "block" : "hidden"}`
-        // getClasses()
+        "fixed w-fit rounded bg-blue-300 p-2 text-black transition-all hover:bg-blue-500 ",
+        `${visible ? "inline-block" : "hidden"}`
       )}
       style={getStyles()}
       onClick={backToTop}
     >
-      Back to top
+      {/* Back to top arrow 👇*/}
+      <svg
+        className={clsx(
+          "h-6 w-6 shrink-0 rotate-180 transition-all  disabled:bg-gray-200"
+        )}
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
     </div>
   )
 }

package/src/elements/HawaAlert.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useRef, useState, useEffect } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
 
@@ -8,6 +8,8 @@ type AlertTypes = {
   title?: any
   /** The text of the alert placed below the title of the alert. Can be used alone */
   text: any
+  /** The duration for the alert to stay on the screen */
+  duration?: number
   // hideIcon?: any //TODO: an X button to delete the alert
   variant?:
     | "normal"
@@ -28,8 +30,31 @@ type AlertTypes = {
 export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
   variant = "normal",
   direction = "ltr",
+  duration,
   ...props
 }) => {
+  const alertRef = useRef(null)
+  const [closed, setClosed] = useState(false)
+
+  useEffect(() => {
+    if (duration) {
+      //To change opacity and hide the component
+      const timeoutHide = setTimeout(() => {
+        setClosed(true)
+      }, duration)
+      //To destroy the component after hiding it
+      const timeoutDestroy = setTimeout(() => {
+        setClosed(true)
+        alertRef.current.removeChild(alertRef.current.children[0])
+      }, duration + 1000)
+
+      return () => {
+        clearTimeout(timeoutHide)
+        clearTimeout(timeoutDestroy)
+      }
+    }
+  }, [duration])
+
   let styleVariant = {
     normal: {
       info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
@@ -77,30 +102,58 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
     },
   }
   return (
-    <div
-      className={clsx(
-        "mb-4 flex flex-col rounded p-4 text-sm",
-        styleVariant[variant][props.severity]
-      )}
-      role="alert"
-      dir={direction}
-    >
-      <span className="font-medium">{props.title}</span>
-      <span>{" " + props.text}</span>
-      {props.actions && (
-        <div className="mt-2 flex flex-row gap-2">
-          {props.actions.map((act, index) => (
-            <HawaButton
-              key={index}
-              variant={act.variant}
-              onClick={act.onClick()}
-              margins="none"
-            >
-              {act.label}
-            </HawaButton>
-          ))}
-        </div>
-      )}
+    <div ref={alertRef}>
+      <div
+        className={clsx(
+          "mb-4 flex flex-col rounded p-4 text-sm",
+          styleVariant[variant][props.severity],
+          closed ? "opacity-0" : "opacity-100"
+        )}
+        role="alert"
+        dir={direction}
+      >
+        <span className="font-medium">{props.title}</span>
+        <span>{" " + props.text}</span>
+        {props.actions && (
+          <div className="mt-2 flex flex-row gap-2">
+            {props.actions.map((act, index) => (
+              <HawaButton
+                key={index}
+                variant={act.variant}
+                onClick={act.onClick()}
+                margins="none"
+              >
+                {act.label}
+              </HawaButton>
+            ))}
+          </div>
+        )}
+        <button
+          type="button"
+          className="absolute right-8 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+          data-dismiss-target="#alert-default"
+          aria-label="Close"
+          onClick={() => {
+            setClosed(true)
+            alertRef.current.removeChild(alertRef.current.children[0])
+          }}
+        >
+          <span className="sr-only">Close</span>
+          <svg
+            aria-hidden="true"
+            className="h-5 w-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <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>
+        </button>
+      </div>
     </div>
   )
 }

package/src/elements/HawaSnackbar.tsx

@@ -6,7 +6,7 @@ type THawaSnackBar = {
   severity: "info" | "warning" | "error" | "success" | "none"
   title: string
   description: string
-  handleClose?: () => void
+  // handleClose?: () => void
   duration?: number
   position?:
     | "top-left"
@@ -31,7 +31,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
   severity = "info",
   position = "bottom-left",
   actions,
-  handleClose,
+  // handleClose,
   duration,
 }) => {
   let defaultStyle =

package/src/elements/HawaTextField.tsx

@@ -50,9 +50,9 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
 
   let defaultStyle = "flex max-h-fit flex-col justify-center"
   let defaultInputStyle =
-    "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"
+    "block w-full rounded outline outline-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"
   let previewInputStyle =
-    "block w-full rounded bg-gray-50 h-9  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"
+    "block w-full rounded bg-gray-50 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"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  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",
 
   return (
@@ -89,16 +89,17 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
                   {props.icon}
                 </div>
               )}
-                  {/* <input
+              <input
                 {...props}
+                disabled={preview}
                 className={clsx(previewInputStyle, props.icon ? "pl-10" : "")}
-              /> */}
-              <div
+              />
+              {/* <div
                 // {...props}
                 className={clsx(previewInputStyle, props.icon ? "pl-10" : "")}
               >
                 {props.value}
-              </div>
+              </div> */}
             </div>
           )}
         </>

package/src/styles.css

@@ -636,6 +636,9 @@ video {
 .right-4 {
   right: 1rem;
 }
+.right-8 {
+  right: 2rem;
+}
 .top-0 {
   top: 0px;
 }
@@ -898,6 +901,9 @@ video {
 .h-6 {
   height: 1.5rem;
 }
+.h-64 {
+  height: 16rem;
+}
 .h-7 {
   height: 1.75rem;
 }
@@ -964,6 +970,9 @@ video {
 .w-1\/3 {
   width: 33.333333%;
 }
+.w-1\/4 {
+  width: 25%;
+}
 .w-10 {
   width: 2.5rem;
 }
@@ -982,6 +991,9 @@ video {
 .w-2\/3 {
   width: 66.666667%;
 }
+.w-2\/4 {
+  width: 50%;
+}
 .w-20 {
   width: 5rem;
 }
@@ -1621,10 +1633,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
-.bg-red-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
-}
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));