@sikka/hawa 0.0.99 → 0.0.101

package/lib/layout/Box.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Box: (props: any) => JSX.Element;

package/lib/layout/HawaBottomAppBar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type BottomAppBarTypes = {
+    sx: any;
+    color: any;
+    appBarContent: any;
+};
+export declare const HawaBottomAppBar: React.FunctionComponent<BottomAppBarTypes>;
+export {};

package/lib/layout/HawaContainer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type ContainerTypes = {
+    maxWidth?: "full" | "small" | "normal";
+    children: React.ReactNode;
+};
+export declare const HawaContainer: React.FunctionComponent<ContainerTypes>;
+export {};

package/lib/layout/HawaLayout.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type LayoutTypes = {
+    logoLink: string;
+    username: string;
+    userEmail: string;
+    drawerItems: any;
+};
+export declare const HawaLayout: React.FunctionComponent<LayoutTypes>;
+export {};

package/lib/layout/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Box";
+export * from "./HawaBottomAppBar";
+export * from "./HawaLayout";
+export * from "./HawaContainer";

package/lib/stories/ElementsStories/Buttons.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const ButtonVariationsStory: {
+    (): JSX.Element;
+    storyName: string;
+};
+export declare const ButtonLoadingStory: {
+    (): JSX.Element;
+    storyName: string;
+};
+export declare const ButtonWidthStory: {
+    (): JSX.Element;
+    storyName: string;
+};
+export declare const ButtonSizesStory: {
+    (): JSX.Element;
+    storyName: string;
+};
+export declare const ButtonIconsStory: {
+    (): JSX.Element;
+    storyName: string;
+};

package/lib/stories/ElementsStories/Snackbar.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Plain: any;
+export declare const Success: any;
+export declare const Warning: any;
+export declare const Info: any;
+export declare const Error: any;

package/lib/stories/ElementsStories/Tooltip.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Tooltip: Story;

package/lib/util.d.ts

@@ -0,0 +1,4 @@
+declare const hexToRgb: (hex: any) => number[];
+declare const getTextColor: (backColor: any) => "#000000" | "#ffffff";
+declare const replaceAt: (string: any, index: any, replacement: any) => any;
+export { hexToRgb, getTextColor, replaceAt };

package/package.json

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

package/src/elements/DragDropImages.tsx

@@ -96,14 +96,15 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
     }, [maxSize])
     const errs = fileRejections.map((rej, i) => {
       return (
-        <div key={i}>
-          <div>{rej.file.name}</div>
-          <div>{rej.errors[0].code}</div>
-        </div>
+        <HawaAlert
+          text={rej.file.name}
+          title={rej.errors[0].code}
+          severity="error"
+        />
       )
     })
     const thumbs = files?.map((file: any, index: any) => (
-      <div style={{ position: "relative", margin: 10 }}>
+      <div className="relative m-3 rounded-lg">
         <button
           onClick={(e) => {
             e.stopPropagation()
@@ -112,7 +113,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             onDeleteFile(file)
           }}
           type="button"
-          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"
+          className="absolute left-0 ml-auto inline-flex items-center rounded-lg rounded-tr-none rounded-bl-none 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
@@ -144,6 +145,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             backgroundPosition: "center",
             border: "1px solid black",
           }}
+          className="rounded-lg"
           key={file.name}
         />
       </div>
@@ -165,37 +167,41 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           Click here or drop files here to upload
         </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)
-            }}
-          >
-            Clear All
-          </HawaButton>
-        )}
-
+        <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,
+              // marginTop: 10,
             }}
+            className="rounded-lg border-red-500"
           >
             {thumbs}
           </aside>
         ) : null}
-        {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 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>
     )

package/src/elements/HawaMenu.tsx

@@ -1,3 +1,5 @@
+import clsx from "clsx"
+import React from "react"
 
 type MenuTypes = {
   popMenuID: any
@@ -14,10 +16,11 @@ type MenuTypes = {
   open: any
   handleClose: any
   anchor: any
+  children: any
+  buttonPosition: "top-right" | "top-left" | "bottom-right" | "bottom-left"
 }
 
 export const HawaMenu: React.FunctionComponent<MenuTypes> = ({
-  popMenuID,
   menuItems,
   withHeader,
   withIcons,
@@ -25,50 +28,63 @@ export const HawaMenu: React.FunctionComponent<MenuTypes> = ({
   headerSubtitle,
   open,
   handleClose,
+  buttonPosition,
+  children,
 }) => {
+  let defaultStyles =
+    "absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded-lg bg-white shadow transition-all dark:bg-gray-700"
+  let positionStyles = {
+    "top-right": "top-30 right-0",
+    "top-left": "top-30 left-0",
+    "bottom-right": "bottom-30 right-0",
+    "bottom-left": "bottom-30 left-0",
+  }
+  let animationStyles = {
+    opened: "max-h-72 animate-expandDown",
+    closed: "max-h-0 opacity-0 animate-expandUp",
+  }
   return (
-    <div>
-      <button
-        className="w-44 rounded border bg-blue-700 p-2 text-white"
-        onClick={() => handleClose(!open)}
-      >
-        Menu Dropdown
-      </button>
-      <div
-        id={popMenuID}
-        className={`${
-          open ? "block" : "hidden"
-        } z-10 w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:bg-gray-700`}
-      >
-        {withHeader && (
-          <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
-            <div>{headerTitle}</div>
-            <div className="truncate font-medium">{headerSubtitle}</div>
-          </div>
-        )}
-        {menuItems.map((group: any) => {
-          return (
-            <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
-              {group.map((item: any) => {
-                return (
-                  <li
-                    onClick={item.action}
-                    className={
-                      item.button
-                        ? "mx-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
-                        : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-100 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
-                    }
-                  >
-                    {withIcons && (
-                      <div className="mr-2 rtl:ml-2">{item.icon}</div>
-                    )}
-                    {item.label}
-                  </li>
-                )
-              })}
-            </ul>
-          )
-        })}
+    <div className="">
+      <div className="relative w-fit" onClick={() => handleClose(!open)}>
+        {children}
+
+        <div
+          className={clsx(
+            defaultStyles,
+            positionStyles[buttonPosition],
+            open ? animationStyles.opened : animationStyles.closed
+          )}
+        >
+          {withHeader && (
+            <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
+              <div>{headerTitle}</div>
+              <div className="truncate font-medium">{headerSubtitle}</div>
+            </div>
+          )}
+          {menuItems.map((group: any) => {
+            return (
+              <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
+                {group.map((item: any) => {
+                  return (
+                    <li
+                      onClick={item.action}
+                      className={
+                        item.button
+                          ? "mx-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
+                          : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-100 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
+                      }
+                    >
+                      {withIcons && (
+                        <div className="mr-2 rtl:ml-2">{item.icon}</div>
+                      )}
+                      {item.label}
+                    </li>
+                  )
+                })}
+              </ul>
+            )
+          })}
+        </div>
       </div>
     </div>
   )

package/src/styles.css

@@ -559,6 +559,9 @@ video {
 .z-40 {
   z-index: 40;
 }
+.m-3 {
+  margin: 0.75rem;
+}
 .m-2 {
   margin: 0.5rem;
 }
@@ -702,6 +705,15 @@ video {
 .h-12 {
   height: 3rem;
 }
+.h-96 {
+  height: 24rem;
+}
+.max-h-72 {
+  max-height: 18rem;
+}
+.max-h-0 {
+  max-height: 0px;
+}
 .max-h-fit {
   max-height: -moz-fit-content;
   max-height: fit-content;
@@ -813,6 +825,34 @@ video {
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+@keyframes expandDown {
+
+  0% {
+    max-height: 0;
+    height: 0;
+  }
+
+  100% {
+    max-height: 100px;
+  }
+}
+.animate-expandDown {
+  animation: expandDown 100ms linear;
+}
+@keyframes expandUp {
+
+  0% {
+    max-height: 100px;
+  }
+
+  100% {
+    max-height: 0;
+    height: 0;
+  }
+}
+.animate-expandUp {
+  animation: expandUp 100ms linear;
+}
 .cursor-default {
   cursor: default;
 }
@@ -924,6 +964,9 @@ video {
 .overflow-x-hidden {
   overflow-x: hidden;
 }
+.overflow-y-clip {
+  overflow-y: clip;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -972,6 +1015,12 @@ video {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
+.rounded-tr-none {
+  border-top-right-radius: 0px;
+}
+.rounded-bl-none {
+  border-bottom-left-radius: 0px;
+}
 .rounded-bl-lg {
   border-bottom-left-radius: 0.5rem;
 }
@@ -1021,6 +1070,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1099,10 +1152,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(163 208 57 / var(--tw-bg-opacity));
 }
-.bg-blue-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
 .bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(61 147 249 / var(--tw-bg-opacity));
@@ -1149,6 +1198,10 @@ video {
 .p-10 {
   padding: 2.5rem;
 }
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .px-2\.5 {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
@@ -1157,10 +1210,6 @@ video {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;

package/tailwind.config.js

@@ -23,10 +23,35 @@ module.exports = {
           "50%": { transform: "scaleY(0)" },
           "60%": { transform: "scaleY(0)" }
           // "100%": { transform: "scaleY(1)" },
+        },
+        expandDown: {
+          "0%": {
+            // opacity: 0,
+            "max-height": 0,
+            height: 0
+          },
+          "100%": {
+            // opacity: 1,
+            "max-height": 100
+          }
+        },
+        expandUp: {
+          "0%": {
+            // opacity: 1,
+            maxHeight: 100
+          },
+          "100%": {
+            // opacity: 0,
+            maxHeight: 0,
+            height: 0
+          }
         }
       },
+
       animation: {
-        collapsing: "collapse"
+        collapse: "collapse",
+        expandDown: "expandDown 100ms linear",
+        expandUp: "expandUp 100ms linear"
       },
       colors: {
         primary: {

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+      "declaration": true,
       "target": "es5",
       "lib": ["dom", "dom.iterable", "esnext"],
       "allowJs": true,