@sikka/hawa 0.0.143 → 0.0.145

package/lib/layout/HawaAppLayout.d.ts

@@ -5,7 +5,7 @@ type HawaAppLayoutTypes = {
         icon: any;
         slug: string;
         action: () => void;
-    }[];
+    }[][];
     currentPage: string;
     pageTitle?: string;
     logoSymbol?: any;

package/package.json

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

package/src/elements/DragDropImages.tsx

@@ -10,6 +10,7 @@ const thumbsContainer = {
   marginTop: 10,
 }
 type DragDropImagesTypes = {
+  label?: string
   texts: any
   files: [File]
   setFiles: any
@@ -37,6 +38,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
   onClearFiles,
   maxSize,
   errorMessages,
+  label,
 }) =>
   // props
   {
@@ -154,55 +156,62 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
     console.log("error", fileRejections)
 
     return (
-      <div
-        // variant="drop-area"
-        {...getRootProps({
-          style: { backgroundColor: isDragActive ? "white" : "inherit" },
-        })}
-        // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
-        className="flex flex-col justify-center rounded-xl border border-dashed border-black"
-      >
-        <input {...getInputProps()} />
-        <div className="p-1 text-center">
-          Click here or drop files here to upload
-        </div>
-        <div className="p-1 text-center">Max file size is {max}</div>
-        <div className="flex justify-center ">
-          {acceptedFiles.length > 0 && (
-            <HawaButton
-              // style={{ color: "black" }}
-              onClick={(e) => {
-                e.stopPropagation()
-                onClearFiles(acceptedFiles)
+      <div>
+        {label && (
+          <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
+            {label}
+          </div>
+        )}
+        <div
+          // variant="drop-area"
+          {...getRootProps({
+            style: { backgroundColor: isDragActive ? "white" : "inherit" },
+          })}
+          // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
+          className="mb-2 flex flex-col justify-center rounded-xl border border-dashed border-black"
+        >
+          <input {...getInputProps()} />
+          <div className="p-1 text-center">
+            Click here or drop files here to upload
+          </div>
+          <div className="p-1 text-center">Max file size is {max}</div>
+          <div className="flex justify-center ">
+            {acceptedFiles.length > 0 && (
+              <HawaButton
+                // style={{ color: "black" }}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onClearFiles(acceptedFiles)
+                }}
+              >
+                Clear All
+              </HawaButton>
+            )}
+          </div>
+          {thumbs && showPreview ? (
+            <aside
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                // marginTop: 10,
               }}
+              className="rounded-lg border-red-500"
             >
-              Clear All
-            </HawaButton>
-          )}
-        </div>
-        {thumbs && showPreview ? (
-          <aside
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              flexWrap: "wrap",
-              // marginTop: 10,
-            }}
-            className="rounded-lg border-red-500"
-          >
-            {thumbs}
-          </aside>
-        ) : null}
-        <div className="px-2">
-          {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
-            <HawaAlert text={texts.tooManyFiles} severity="error" />
-          ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
-            <HawaAlert text={texts.fileTooLarge} severity="error" />
-          ) : (
-            errs
-          )}
+              {thumbs}
+            </aside>
+          ) : null}
+          <div className="px-2">
+            {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
+              <HawaAlert text={texts.tooManyFiles} severity="error" />
+            ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
+              <HawaAlert text={texts.fileTooLarge} severity="error" />
+            ) : (
+              errs
+            )}
+          </div>
+          {}
         </div>
-        {}
       </div>
     )
   }

package/src/elements/HawaMenu.tsx

@@ -89,9 +89,12 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
             <div className="truncate font-medium">{headerSubtitle}</div>
           </div>
         )}
-        {menuItems.map((group) => {
+        {menuItems.map((group, o) => {
           return (
-            <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
+            <ul
+              key={o}
+              className="py-1  text-sm text-gray-700 dark:text-gray-200"
+            >
               {group?.map((item) => {
                 return (
                   <li

package/src/elements/HawaPanelTabs.tsx

@@ -26,9 +26,9 @@ export const HawaPanelTabs: React.FunctionComponent<PanelTabsTypes> = (
           data-tabs-toggle="#myTabContent"
           role="tablist"
         >
-          {props.options.map((option: any) => {
+          {props.options.map((option: any, o) => {
             return (
-              <li className="mr-2" role="presentation">
+              <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`}

package/src/elements/HawaPhoneInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import React, { useState } from "react"
 import Countries from "../countries"
 import Select from "react-select"
 

package/src/elements/HawaPricingCard.tsx

@@ -95,9 +95,9 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
         </span>
       </div>
       <ul role="list" className="my-7 space-y-0">
-        {featuresMapping?.map((feature) => {
+        {featuresMapping?.map((feature, o) => {
           return (
-            <li className="flex ">
+            <li key={o} className="flex ">
               <svg
                 aria-hidden="true"
                 className="m-2 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-500"

package/src/elements/HawaRadio.tsx

@@ -28,8 +28,8 @@ export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
           "flex max-w-fit flex-row whitespace-nowrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400"
         )}
       >
-        {props.options?.map((opt: any) => (
-          <li className="w-full">
+        {props.options?.map((opt: any, o) => (
+          <li className="w-full" key={o}>
             <button
               aria-current="page"
               onClick={() => {

package/src/elements/HawaTabs.tsx

@@ -21,8 +21,8 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = (props) => {
           selectedOption ? "border-b-2" : "border-b-0"
         )}
       >
-        {props.options?.map((opt: any) => (
-          <li>
+        {props.options?.map((opt: any, o) => (
+          <li key={o}>
             <button
               aria-current="page"
               onClick={() => {

package/src/layout/HawaAppLayout.tsx

@@ -5,7 +5,12 @@ import { HawaMenu } from "../elements"
 import { HiMenu } from "react-icons/hi"
 import useBreakpoint from "../hooks/useBreakpoint"
 type HawaAppLayoutTypes = {
-  drawerItems: { label: string; icon: any; slug: string; action: () => void }[]
+  drawerItems: {
+    label: string
+    icon: any
+    slug: string
+    action: () => void
+  }[][]
   currentPage: string
   pageTitle?: string
   logoSymbol?: any
@@ -51,6 +56,11 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
     }
   }, [])
 
+  //States of the side menu
+  //larger than 600
+  //as a bar and expands when hover
+  //less than 600
+  //as nothing and expands as button is clicked
   return (
     <>
       {props.topBar && (
@@ -100,12 +110,12 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
         onMouseLeave={() => setOpenSideMenu(false)}
         ref={ref}
         className={clsx(
-          "fixed top-0 left-0 z-50 flex h-full flex-col bg-primary-400 transition-all hover:w-40 hover:overflow-auto",
-          size > 600 ? "w-12" : "w-0",
-          openSideMenu ? "w-40" : ""
+          "fixed top-0 left-0 z-50 flex h-full flex-col overflow-x-clip bg-primary-400 transition-all  hover:overflow-auto",
+          size > 600 ? "w-12 hover:w-40" : "w-0",
+          openSideMenu ? "w-40" : "w-0"
         )}
       >
-        <div className="  mb-9 h-12        w-12 p-2">
+        <div className="mb-9 h-12 w-12 p-2">
           <img
             className={clsx(
               "fixed top-2 h-9",
@@ -140,7 +150,13 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
         </div>
 
         {props.drawerItems.map((dSection, j) => (
-          <div className="flex flex-col items-stretch justify-center">
+          <div
+            key={j}
+            className={clsx(
+              "flex flex-col items-stretch justify-center"
+              // !openSideMenu ? "invisible" : "visible"
+            )}
+          >
             {dSection.map((dItem, i) => {
               return (
                 <div
@@ -151,6 +167,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
                     props.currentPage === dItem.slug
                       ? "bg-primary-600 text-white hover:bg-primary-600"
                       : ""
+                    // !openSideMenu ? " h-0 w-0" : ""
                   )}
                 >
                   <div className="flex items-center justify-center">

package/src/layout/HawaSiteLayout.tsx

@@ -46,8 +46,8 @@ const ProfileDropdown = (props: any) => {
         className="py-1 text-sm text-gray-700 dark:text-gray-200"
         aria-labelledby="avatarButton"
       >
-        {props.profileItems.map((it: any) => {
-          return <ProfileItem text={it.text} link={it.slug} />
+        {props.profileItems.map((it: any, o) => {
+          return <ProfileItem key={o} text={it.text} link={it.slug} />
         })}
       </ul>
       <div className="py-1">
@@ -85,7 +85,7 @@ const DrawerContent = (props: any) => {
       <div className="overflow-y-auto py-4">
         <ul className="space-y-2">
           {props.drawerItems.map((item: any, i: any) => {
-            return <div>{item.text}</div>
+            return <div key={i}>{item.text}</div>
           })}
         </ul>
       </div>
@@ -236,7 +236,7 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
         <div className="overflow-y-auto py-4">
           <ul className="space-y-2">
             {props.drawerItems.map((item: any, i: any) => {
-              return <div>{item.text}</div>
+              return <div key={i}>{item.text}</div>
             })}
           </ul>
         </div>

package/src/styles.css

@@ -2029,6 +2029,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
+.dark .dark\:text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
 .dark .dark\:text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2053,10 +2057,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity));
 }
-.dark .dark\:text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
 .dark .dark\:text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="870.32eb3abe.iframe.bundle.js"></script><script src="main.64f67baa.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="870.32eb3abe.iframe.bundle.js"></script><script src="main.caad440f.iframe.bundle.js"></script></body></html>