@sikka/hawa 0.0.248 → 0.0.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.248",
+  "version": "0.0.249",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -81,6 +81,10 @@
     "webpack": "^5.75.0",
     "tailwindcss": "^3.3.3"
   },
+  "peerDependencies": {
+    "react-dom": ">=17.0.1",
+    "react": ">=17.0.1"
+  },
   "resolutions": {
     "@storybook/react/webpack": "^5",
     "@storybook/core-common/webpack": "^5",

package/src/elements/DragDropImages.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react"
 import { useDropzone } from "react-dropzone"
 import { HawaAlert } from "./HawaAlert"
 import { HawaButton } from "./HawaButton"
+import { TbDragDrop } from "react-icons/tb"
+import clsx from "clsx"
 //TODO: This element needs more improvements and testing
 type DragDropImagesTypes = {
   /**  The text label above the component. Consistant with the other form input fields   */
@@ -19,10 +21,11 @@ type DragDropImagesTypes = {
   errorMessages: string
   /** The translation object, use this to replace the default text with any translated text you want.*/
   texts: {
-    clickHereToUpload: string
-    maxFileSize: string
-    tooManyFiles: string
-    fileTooLarge: string
+    errorUploading: any
+    clickHereToUpload: any
+    maxFileSize: any
+    tooManyFiles: any
+    fileTooLarge: any
   }
 }
 
@@ -102,7 +105,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
     )
   })
   const thumbs = files?.map((file: any, index: any) => (
-    <div className="relative m-3 rounded ">
+    <div className="relative m-3 rounded  ">
       <button
         onClick={(e) => {
           e.stopPropagation()
@@ -158,11 +161,17 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       )}
       <div
         {...getRootProps({})}
-        className="flex flex-col justify-center rounded border border-dashed border-black bg-white transition-all hover:bg-gray-100 "
+        className={clsx(
+          "flex flex-col justify-center rounded border border-dashed border-black  transition-all hover:bg-gray-100 ",
+          isDragActive ? "bg-layoutPrimary-500" : "bg-white"
+        )}
       >
         <input {...getInputProps()} />
-        <div className="pt-4 text-center">{texts.clickHereToUpload}</div>
-        <div className="pb-4 text-center text-xs">
+        <div className="flex flex-col items-center justify-center gap-2 pt-4 text-center">
+          <TbDragDrop size={22} />
+          {<texts.clickHereToUpload />}
+        </div>
+        <div className="py-4 text-center text-xs">
           {texts.maxFileSize} {max}
         </div>
         <div className="flex justify-center ">
@@ -190,11 +199,19 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             {thumbs}
           </aside>
         ) : null}
-        <div className="px-2">
+        <div className="px-4">
           {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
-            <HawaAlert text={texts.tooManyFiles} severity="error" />
+            <HawaAlert
+              title={texts.errorUploading}
+              text={texts.tooManyFiles}
+              severity="error"
+            />
           ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
-            <HawaAlert text={texts.fileTooLarge} severity="error" />
+            <HawaAlert
+              title={texts.errorUploading}
+              text={texts.fileTooLarge}
+              severity="error"
+            />
           ) : (
             errs
           )}

package/src/elements/HawaAlert.tsx

@@ -105,7 +105,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
     <div ref={alertRef}>
       <div
         className={clsx(
-          "mb-4 flex flex-col rounded p-4 text-sm",
+          "relative mb-4 flex flex-col rounded p-4 text-sm transition-all",
           styleVariant[variant][props.severity],
           closed ? "opacity-0" : "opacity-100"
         )}
@@ -114,6 +114,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
       >
         <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) => (
@@ -130,12 +131,14 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         )}
         <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"
+          className="absolute right-4 top-4  inline-flex  h-8 w-8 translate-y-1 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])
+            setTimeout(() => {
+              alertRef.current.removeChild(alertRef.current.children[0])
+            }, 200)
           }}
         >
           <span className="sr-only">Close</span>

package/src/styles.css

@@ -639,9 +639,6 @@ video {
 .right-4 {
   right: 1rem;
 }
-.right-8 {
-  right: 2rem;
-}
 .top-0 {
   top: 0px;
 }
@@ -1124,6 +1121,10 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-y-1 {
+  --tw-translate-y: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-y-1\/2 {
   --tw-translate-y: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1768,6 +1769,10 @@ video {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;