@sikka/hawa 0.0.117 → 0.0.119

package/lib/layout/AppSidebar.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    items: {
+        label: string;
+        onClick: () => void;
+    }[];
+}
+export declare const AppSidebar: React.FC<Props>;
+export {};

package/lib/layout/HawaAppLayout.d.ts

@@ -1,9 +1,13 @@
 import React from "react";
 type HawaAppLayoutTypes = {
     logoLink: string;
-    username: string;
-    userEmail: string;
-    drawerItems: any;
+    drawerItems: {
+        label: string;
+        icon: any;
+        slug: string;
+        action: () => void;
+    }[];
+    currentPage?: string;
 };
 export declare const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes>;
 export {};

package/lib/layout/index.d.ts

@@ -4,3 +4,4 @@ export * from "./HawaSiteLayout";
 export * from "./HawaAppLayout";
 export * from "./HawaContainer";
 export * from "./SimpleGrid";
+export * from "./AppSidebar";

package/package.json

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

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/AppSidebar.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  items: { label: string; onClick: () => void }[]
+}
+
+export const AppSidebar: React.FC<Props> = ({ isOpen, onClose, items }) => {
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <div className="fixed inset-0 z-40 flex bg-gray-600 bg-opacity-75">
+      <div className="w-1/3 rounded-l-lg bg-gray-800 shadow-2xl">
+        <button
+          onClick={onClose}
+          className="p-4 text-gray-400 hover:text-white focus:text-white focus:outline-none"
+        >
+          Close
+        </button>
+        <nav>
+          {items.map((item) => (
+            <a
+              href="#"
+              onClick={item.onClick}
+              className="block p-4 font-bold text-white hover:bg-gray-700 hover:text-gray-400"
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+      </div>
+      <div className="w-2/3 bg-gray-50"></div>
+    </div>
+  )
+}

package/src/layout/HawaAppLayout.tsx

@@ -3,9 +3,8 @@ import React, { useState } from "react"
 
 type HawaAppLayoutTypes = {
   logoLink: string
-  username: string
-  userEmail: string
-  drawerItems: any
+  drawerItems: { label: string; icon: any; slug: string; action: () => void }[]
+  currentPage?: string
 }
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   props: any
@@ -21,7 +20,15 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
       >
         <div className="m-1 bg-red-300 p-2">logo</div>
         {props.drawerItems.map((dItem) => (
-          <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
+            onClick={() => dItem.action(dItem.slug)}
+            className={clsx(
+              "m-1 flex cursor-pointer flex-row items-center overflow-x-clip rounded-lg p-2  pl-3 transition-all hover:bg-green-300",
+              props.currentPage === dItem.slug
+                ? "bg-primary-400"
+                : "bg-yellow-300"
+            )}
+          >
             <div className="flex items-center justify-center">{dItem.icon}</div>
             <div
               className={clsx(
@@ -29,7 +36,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
                 openSideMenu ? "opacity-100" : "opacity-0"
               )}
             >
-              {dItem.text}
+              {dItem.label}
             </div>
           </div>
         ))}

package/src/layout/index.ts

@@ -4,3 +4,4 @@ export * from "./HawaSiteLayout"
 export * from "./HawaAppLayout"
 export * from "./HawaContainer"
 export * from "./SimpleGrid"
+export * from "./AppSidebar"

package/src/styles.css

@@ -508,6 +508,12 @@ video {
 .relative {
   position: relative;
 }
+.inset-0 {
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
 .left-0 {
   left: 0px;
 }
@@ -752,6 +758,9 @@ video {
 .h-2 {
   height: 0.5rem;
 }
+.h-4 {
+  height: 1rem;
+}
 .h-32 {
   height: 8rem;
 }
@@ -814,18 +823,24 @@ video {
 .w-10 {
   width: 2.5rem;
 }
+.w-4 {
+  width: 1rem;
+}
 .w-11 {
   width: 2.75rem;
 }
 .w-1 {
   width: 0.25rem;
 }
-.w-12 {
-  width: 3rem;
-}
 .w-1\/3 {
   width: 33.333333%;
 }
+.w-2\/3 {
+  width: 66.666667%;
+}
+.w-12 {
+  width: 3rem;
+}
 .w-80 {
   width: 20rem;
 }
@@ -1306,9 +1321,13 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(116 177 251 / var(--tw-bg-opacity));
 }
-.bg-orange-400 {
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+.bg-gray-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 .bg-yellow-300 {
   --tw-bg-opacity: 1;
@@ -1322,6 +1341,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(156 199 252 / var(--tw-bg-opacity));
 }
+.bg-opacity-75 {
+  --tw-bg-opacity: 0.75;
+}
 .bg-\[url\(\'https\:\/\/via\.placeholder\.com\/50\'\)\] {
   background-image: url('https://via.placeholder.com/50');
 }
@@ -1644,6 +1666,11 @@ video {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1800,6 +1827,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
 .hover\:bg-green-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
@@ -1816,6 +1847,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
+.hover\:text-gray-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
 .hover\:underline:hover {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1832,6 +1867,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
+.focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;