@sikka/hawa 0.0.116 → 0.0.118

package/package.json

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

package/src/blocks/AuthForms/SignInForm.tsx

@@ -10,43 +10,43 @@ import { Controller, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
 
 type SignInFormTypes = {
-  showError: any
-  errorTitle: string
-  errorText: string
-  signInType: "email" | "username" | "phone"
-  texts: {
-    emailLabel: string
-    emailPlaceholder: string
-    emailRequiredText: string
-    emailInvalidText: string
-    usernameLabel: string
-    usernamePlaceholder: string
-    usernameRequired: string
-    usernameRequiredText: string
-    phoneRequiredText: string
-    passwordLabel: string
-    passwordPlaceholder: string
-    passwordRequiredText: string
-    forgotPasswordText: string
-    newUserText: string
-    signUpText: string
-    signInText: string
-    googleButtonLabel: string
-    githubButtonLabel: string
-    twitterButtonLabel: string
+  showError?: any
+  errorTitle?: string
+  errorText?: string
+  signInType?: "email" | "username" | "phone"
+  texts?: {
+    emailLabel?: string
+    emailPlaceholder?: string
+    emailRequiredText?: string
+    emailInvalidText?: string
+    usernameLabel?: string
+    usernamePlaceholder?: string
+    usernameRequired?: string
+    usernameRequiredText?: string
+    phoneRequiredText?: string
+    passwordLabel?: string
+    passwordPlaceholder?: string
+    passwordRequiredText?: string
+    forgotPasswordText?: string
+    newUserText?: string
+    signUpText?: string
+    signInText?: string
+    googleButtonLabel?: string
+    githubButtonLabel?: string
+    twitterButtonLabel?: string
   }
-  withoutResetPassword: boolean
-  withoutSignUp: boolean
-  isLoading: any
-  viaGoogle: boolean
-  viaGithub: boolean
-  viaTwitter: boolean
-  handleSignIn: (e: any) => void
-  handleRouteToSignUp: () => void
-  handleForgotPassword: () => void
-  handleGoogleSignIn: () => void
-  handleGithubSignIn: () => void
-  handleTwitterSignIn: () => void
+  withoutResetPassword?: boolean
+  withoutSignUp?: boolean
+  isLoading?: any
+  viaGoogle?: boolean
+  viaGithub?: boolean
+  viaTwitter?: boolean
+  handleSignIn?: (e: any) => void
+  handleRouteToSignUp?: () => void
+  handleForgotPassword?: () => void
+  handleGoogleSignIn?: () => void
+  handleGithubSignIn?: () => void
+  handleTwitterSignIn?: () => void
 }
 
 export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {

package/src/elements/HawaButton.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import clsx from "clsx"
+import { HawaSpinner } from "./HawaSpinner"
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "contained" | "outlined"
@@ -108,9 +109,10 @@ export function HawaButton({
         {!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>
+          // <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>
+          <HawaSpinner />
         )}
       </button>
       {tooltip && (

package/src/elements/HawaSpinner.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+type SpinnerTypes = {}
+export const HawaSpinner: React.FunctionComponent<SpinnerTypes> = (props) => {
+  return (
+    <div className="flex flex-row gap-x-3">
+      <div className="h-4 w-4 animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"></div>
+    </div>
+  )
+}

package/src/elements/HawaStats.tsx

@@ -1,11 +1,14 @@
 import React from "react"
 import clsx from "clsx"
+import { HawaSpinner } from "./HawaSpinner"
 
 type StatTypes = {
   label?: string
   number?: string
   helperText?: string
   variant?: "plain" | "contained" | "outlined"
+  isLoading?: boolean
+  handleClick?: () => void
 }
 export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
   let defaultStyle = "flex flex-col gap-1 rounded-lg p-4 text-sm"
@@ -16,9 +19,16 @@ export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
     outlined: "ring-2 w-fit",
   }
   return (
-    <div className={clsx(defaultStyle, statStyles[props.variant])}>
+    <div
+      onClick={props.handleClick}
+      className={clsx(defaultStyle, statStyles[props.variant])}
+    >
       <div>{props.label}</div>
-      <div className="text-2xl font-bold">{props.number}</div>
+      {props.isLoading ? (
+        <HawaSpinner />
+      ) : (
+        <div className="text-2xl font-bold">{props.number}</div>
+      )}{" "}
       <div className="text-xs">{props.helperText}</div>
     </div>
   )

package/src/elements/index.ts

@@ -25,6 +25,7 @@ export * from "./HawaCopyrights"
 export * from "./HawaTimeline"
 export * from "./Breadcrumb"
 export * from "./HawaStats"
+export * from "./HawaSpinner"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/layout/HawaAppLayout.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx"
 import React, { useState } from "react"
-import { FaAddressCard } from "react-icons/fa"
+
 type HawaAppLayoutTypes = {
   logoLink: string
   username: string
@@ -14,32 +14,41 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
 
   return (
     <div className="fixed top-0 left-0 m-0 w-full p-0">
-      {/* navbar */}
-      <div className="m-0 flex flex-row justify-between bg-red-300 p-2">
-        <div>logo</div>
-        <div>page title</div>
-        <div className="relative mr-2 h-10 w-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600">
-          <AvatarIcon />
-        </div>
-      </div>
-
-      {/* side menu */}
       <div
         onMouseEnter={() => setOpenSideMenu(true)}
         onMouseLeave={() => setOpenSideMenu(false)}
-        className="fixed top-0 flex h-full w-10 flex-col gap-2 bg-blue-300 transition-all hover:w-60"
+        className="absolute top-0 z-10 flex h-screen w-12 flex-col gap-0 bg-blue-300 transition-all hover:w-40"
       >
+        <div className="m-1 bg-red-300 p-2">logo</div>
         {props.drawerItems.map((dItem) => (
-          <div className="flex flex-row items-start justify-start bg-yellow-300 p-2">
-            {dItem.icon}
-            <div className={clsx(openSideMenu ? "visible" : "invisible")}>
+          <div className="pl-3 m-1 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg bg-orange-400 p-2 transition-all hover:bg-green-300">
+            <div className="flex items-center justify-center">{dItem.icon}</div>
+            <div
+              className={clsx(
+                "mx-2 text-sm transition-all",
+                openSideMenu ? "opacity-100" : "opacity-0"
+              )}
+            >
               {dItem.text}
             </div>
           </div>
         ))}
       </div>
-      {/* page content */}
-      {props.children}
+
+      {/* 
+      <div className="relative flex flex-row bg-yellow-300">
+        <div className="relative left-10 h-screen w-full bg-orange-300">
+          <div className="m-0 flex flex-row justify-between bg-red-300 p-2">
+            <div></div>
+            <div>page title</div>
+            <div className="relative mr-2 h-10 w-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600">
+              <AvatarIcon />
+            </div>
+          </div>
+
+          <div>{props.children}</div>
+        </div>
+      </div> */}
     </div>
   )
 }

package/src/styles.css

@@ -547,6 +547,9 @@ video {
 .top-5 {
   top: 1.25rem;
 }
+.left-10 {
+  left: 2.5rem;
+}
 .-left-1 {
   left: -0.25rem;
 }
@@ -749,6 +752,9 @@ video {
 .h-2 {
   height: 0.5rem;
 }
+.h-4 {
+  height: 1rem;
+}
 .h-32 {
   height: 8rem;
 }
@@ -811,6 +817,9 @@ video {
 .w-10 {
   width: 2.5rem;
 }
+.w-4 {
+  width: 1rem;
+}
 .w-11 {
   width: 2.75rem;
 }
@@ -934,9 +943,6 @@ video {
 .items-stretch {
   align-items: stretch;
 }
-.justify-start {
-  justify-content: flex-start;
-}
 .justify-end {
   justify-content: flex-end;
 }
@@ -958,6 +964,9 @@ video {
 .gap-1 {
   gap: 0.25rem;
 }
+.gap-0 {
+  gap: 0px;
+}
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
@@ -1019,6 +1028,9 @@ video {
 .overflow-x-hidden {
   overflow-x: hidden;
 }
+.overflow-x-clip {
+  overflow-x: clip;
+}
 .overflow-y-clip {
   overflow-y: clip;
 }
@@ -1300,10 +1312,18 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(116 177 251 / var(--tw-bg-opacity));
 }
+.bg-orange-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+}
 .bg-yellow-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
+.bg-orange-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
+}
 .bg-primary-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(156 199 252 / var(--tw-bg-opacity));
@@ -1430,6 +1450,9 @@ video {
 .pl-10 {
   padding-left: 2.5rem;
 }
+.pl-3 {
+  padding-left: 0.75rem;
+}
 .pt-0 {
   padding-top: 0px;
 }
@@ -1741,8 +1764,8 @@ body {
   --tw-content: '';
   content: var(--tw-content);
 }
-.hover\:w-60:hover {
-  width: 15rem;
+.hover\:w-40:hover {
+  width: 10rem;
 }
 .hover\:cursor-pointer:hover {
   cursor: pointer;
@@ -1783,6 +1806,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
+.hover\:bg-green-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+}
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));