@sikka/hawa 0.0.114 → 0.0.116

package/lib/layout/HawaAppLayout.d.ts

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

package/lib/layout/{HawaLayout.d.ts → HawaSiteLayout.d.ts}

@@ -5,5 +5,5 @@ type LayoutTypes = {
     userEmail: string;
     drawerItems: any;
 };
-export declare const HawaLayout: React.FunctionComponent<LayoutTypes>;
+export declare const HawaSiteLayout: React.FunctionComponent<LayoutTypes>;
 export {};

package/lib/layout/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./Box";
 export * from "./HawaBottomAppBar";
-export * from "./HawaLayout";
+export * from "./HawaSiteLayout";
+export * from "./HawaAppLayout";
 export * from "./HawaContainer";
 export * from "./SimpleGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.114",
+  "version": "0.0.116",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -38,7 +38,6 @@
     "babel-loader": "^8.2.2",
     "clsx": "^1.2.1",
     "crypto-js": "^4.1.1",
-    "emotion-theming": "^11.0.0",
     "framer-motion": "^4.1.7",
     "html-webpack-plugin": "^5.5.0",
     "next-scripts": "^0.3.4",

package/src/elements/HawaAlert.tsx

@@ -12,6 +12,13 @@ let severities = {
 type AlertTypes = {
   severity: keyof typeof severities
   title?: any
+  variant?:
+    | "normal"
+    | "solid"
+    | "top-accent"
+    | "left-accent"
+    | "right-accent"
+    | "bottom-accent"
   text: any
   hideIcon?: any
   actions?: [
@@ -22,12 +29,62 @@ type AlertTypes = {
     }
   ]
 }
-export const HawaAlert: React.FunctionComponent<AlertTypes> = (props) => {
+export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
+  variant = "normal",
+  ...props
+}) => {
+  let styleVariant = {
+    normal: {
+      info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
+      warning:
+        "text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
+      error: "text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
+      success:
+        "text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
+    },
+    "top-accent": {
+      info: "border-t-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
+      warning:
+        "border-t-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
+      error:
+        "border-t-4 border-red-300  text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
+      success:
+        "border-t-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
+    },
+    "left-accent": {
+      info: "border-l-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
+      warning:
+        "border-l-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
+      error:
+        "border-l-4 border-red-300  text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
+      success:
+        "border-l-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
+    },
+    "right-accent": {
+      info: "border-r-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
+      warning:
+        "border-r-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
+      error:
+        "border-r-4 border-red-300  text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
+      success:
+        "border-r-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
+    },
+    "bottom-accent": {
+      info: "border-b-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
+      warning:
+        "border-b-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
+      error:
+        "border-b-4 border-red-300  text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
+      success:
+        "border-b-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
+    },
+  }
   return (
     <div
       className={clsx(
         "mb-4 flex flex-col rounded-lg p-4 text-sm",
-        severities[props.severity]
+        // severities[props.severity],
+        styleVariant[variant][props.severity]
       )}
       role="alert"
     >

package/src/elements/HawaChip.tsx

@@ -4,7 +4,7 @@ import React from "react"
 type TChipTypes = {
   label: string
   size: "small" | "normal" | "large"
-  icon?: any
+  icon?: JSX.Element
 }
 export const HawaChip: React.FunctionComponent<TChipTypes> = ({
   size = "normal",

package/src/elements/HawaPinInput.tsx

@@ -0,0 +1,55 @@
+import clsx from "clsx"
+import React from "react"
+
+type PinInputTypes = {
+  label: string
+  icon?: JSX.Element
+  digits?: number
+}
+export const HawaPinInput: React.FunctionComponent<PinInputTypes> = ({
+  label,
+  icon,
+}) => {
+  const validate = (evt) => {
+    var theEvent = evt || window.event
+
+    // Handle paste
+    if (theEvent.type === "paste") {
+      key = evt.clipboardData.getData("text/plain")
+    } else {
+      // Handle key press
+      var key = theEvent.keyCode || theEvent.which
+      key = String.fromCharCode(key)
+    }
+    var regex = /[0-9]|\./
+    if (!regex.test(key)) {
+      theEvent.returnValue = false
+      if (theEvent.preventDefault) theEvent.preventDefault()
+    }
+  }
+  return (
+    <div className="flex flex-row gap-2">
+      <SinglePinInput
+        onInput={
+          (v) =>
+            v.target.value.replace(/[^0-9.]/g, "").replace(/(\..*?)\..*/g, "$1")
+          // .replace(/[^0-9.]/g, "")
+          // .replace(/(..*?)..*/g, "$1")
+          // .replace(/^0[^.]/, "0")
+        }
+      />
+      <SinglePinInput />
+      <SinglePinInput />
+      <SinglePinInput />
+    </div>
+  )
+}
+
+const SinglePinInput = (props) => (
+  <input
+    type="text"
+    maxLength={1}
+    className="h-10 w-10 bg-gray-200 text-center"
+    {...props}
+  />
+)

package/src/elements/HawaStats.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import clsx from "clsx"
+
+type StatTypes = {
+  label?: string
+  number?: string
+  helperText?: string
+  variant?: "plain" | "contained" | "outlined"
+}
+export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
+  let defaultStyle = "flex flex-col gap-1 rounded-lg p-4 text-sm"
+  let statStyles = {
+    plain: "",
+    contained: "bg-primary-200 w-fit",
+    // outlined: "border-2 border-primary-200 w-fit",
+    outlined: "ring-2 w-fit",
+  }
+  return (
+    <div className={clsx(defaultStyle, statStyles[props.variant])}>
+      <div>{props.label}</div>
+      <div className="text-2xl font-bold">{props.number}</div>
+      <div className="text-xs">{props.helperText}</div>
+    </div>
+  )
+}

package/src/elements/HawaTextField.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import clsx from "clsx"
+
 import { FaSearch } from "react-icons/fa"
 type TextFieldTypes = {
   margin?: "none" | "normal" | "large"
@@ -55,10 +56,9 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
         />
       ) : props.type === "search" ? (
         <div className="relative">
-          <FaSearch
-            color="gray"
-            className="absolute top-1/2 left-3 -translate-y-1/2"
-          />
+          <div className="absolute top-1/2 left-3 -translate-y-1/2">
+            <FaSearch color="gray" />
+          </div>
           <input
             {...props}
             className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pl-10 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"

package/src/elements/index.ts

@@ -24,9 +24,11 @@ export * from "./HawaDrawer"
 export * from "./HawaCopyrights"
 export * from "./HawaTimeline"
 export * from "./Breadcrumb"
+export * from "./HawaStats"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"
+export * from "./HawaPinInput"
 // Cards
 export * from "./HawaItemCard"
 export * from "./HawaPricingCard"

package/src/layout/HawaAppLayout.tsx

@@ -0,0 +1,60 @@
+import clsx from "clsx"
+import React, { useState } from "react"
+import { FaAddressCard } from "react-icons/fa"
+type HawaAppLayoutTypes = {
+  logoLink: string
+  username: string
+  userEmail: string
+  drawerItems: any
+}
+export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
+  props: any
+) => {
+  const [openSideMenu, setOpenSideMenu] = useState(false)
+
+  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"
+      >
+        {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")}>
+              {dItem.text}
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* page content */}
+      {props.children}
+    </div>
+  )
+}
+
+const AvatarIcon = () => (
+  <svg
+    className="absolute -left-1 h-12 w-12 text-gray-400"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+)

package/src/layout/HawaSiteLayout.tsx

@@ -0,0 +1,302 @@
+import clsx from "clsx"
+import React, { useState } from "react"
+import HawaDrawerItem from "../elements/HawaDrawerItem"
+
+const MenuButton = ({ handleClick }) => {
+  return (
+    <button
+      data-drawer-target="drawer-navigation"
+      data-drawer-show="drawer-navigation"
+      aria-controls="drawer-navigation"
+      type="button"
+      onClick={handleClick()}
+      className="inline-flex items-center rounded-lg p-2 text-sm text-gray-500  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+    >
+      {/* <span className="sr-only">Open main menu</span> */}
+      <svg
+        aria-hidden="true"
+        className="h-6 w-6"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </button>
+  )
+}
+const ProfileDropdown = (props: any) => {
+  return (
+    <div
+      id="userDropdown"
+      className="z-10 hidden w-44 divide-y divide-gray-100 rounded bg-white shadow dark:divide-gray-600 dark:bg-gray-700"
+      data-popper-reference-hidden=""
+      data-popper-escaped=""
+      data-popper-placement="bottom-start"
+      // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 295.5px, 0px);"
+    >
+      <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
+        <div>{props.username}</div>
+        <div className="truncate font-medium">{props.userEmail}</div>
+      </div>
+      <ul
+        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} />
+        })}
+      </ul>
+      <div className="py-1">
+        <a
+          href="#"
+          className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
+        >
+          Sign out
+        </a>
+      </div>
+    </div>
+  )
+}
+const DrawerContent = (props: any) => {
+  return (
+    <div
+      id="drawer-navigation"
+      className="fixed z-40 h-screen w-80 overflow-y-auto bg-white p-4 dark:bg-gray-800"
+      tabIndex={-1}
+      aria-labelledby="drawer-navigation-label"
+    >
+      <div
+        // href={props.logoHref}
+        className="flex items-center"
+      >
+        <img
+          src={
+            "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
+          }
+          // src={props.logoLink}
+          className="h-9"
+        />
+      </div>
+      <CloseButton />
+      <div className="overflow-y-auto py-4">
+        <ul className="space-y-2">
+          {props.drawerItems.map((item: any, i: any) => {
+            return (
+              <HawaDrawerItem action={item.action} key={i} text={item.text} />
+            )
+          })}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+const ProfileItem = (props: any) => {
+  return (
+    <li>
+      <a
+        href={props.link}
+        className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+      >
+        {props.text}
+      </a>
+    </li>
+  )
+}
+const CloseButton = () => {
+  return (
+    <button
+      type="button"
+      data-drawer-dismiss="drawer-navigation"
+      aria-controls="drawer-navigation"
+      className="absolute top-2.5 right-2.5 inline-flex items-center rounded-lg bg-transparent 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"
+    >
+      <svg
+        aria-hidden="true"
+        className="h-5 w-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </button>
+  )
+}
+
+type LayoutTypes = {
+  logoLink: string
+  username: string
+  userEmail: string
+  drawerItems: any
+}
+export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
+  props: any
+) => {
+  const [openSideMenu, setOpenSideMenu] = useState(false)
+  return (
+    <div className="font-plex">
+      <nav className="rounded border-gray-200 dark:bg-gray-900">
+        <div className="flex w-full flex-row-reverse items-center justify-between p-3">
+          <div
+            data-dropdown-toggle="userDropdown"
+            data-dropdown-placement="bottom-start"
+            className="relative mr-2 h-10 w-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600"
+          >
+            <svg
+              className="absolute -left-1 h-12 w-12 text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </div>
+          <div>{props.pageTitle ?? "Home"}</div>
+          <div className="flex flex-row-reverse">
+            <button
+              data-drawer-target="drawer-navigation"
+              data-drawer-show="drawer-navigation"
+              aria-controls="drawer-navigation"
+              type="button"
+              onClick={() => {
+                setOpenSideMenu(true)
+                console.log("opening side menu")
+              }}
+              className="inline-flex items-center rounded-lg p-2 text-sm text-gray-500  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+            >
+              <svg
+                aria-hidden="true"
+                className="h-6 w-6"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </button>{" "}
+          </div>
+        </div>
+      </nav>
+      <div
+        id="drawer-navigation"
+        // className="fixed z-40 h-screen w-80 overflow-y-auto bg-white p-4 dark:bg-gray-800"
+        className={clsx(
+          "flex w-80  flex-col items-center bg-red-300",
+          "fixed top-0 left-0 z-40 h-screen w-80 overflow-y-auto p-4 dark:bg-gray-800",
+          openSideMenu ? "visible" : "invisible"
+        )}
+        tabIndex={-1}
+        aria-labelledby="drawer-navigation-label"
+      >
+        <div>
+          <img
+            src={
+              "https://my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
+            }
+            // src={props.logoLink}
+            className="h-9"
+          />
+        </div>
+        <button
+          type="button"
+          onClick={() => setOpenSideMenu(false)}
+          data-drawer-dismiss="drawer-navigation"
+          aria-controls="drawer-navigation"
+          className="absolute top-2.5 right-2.5 inline-flex items-center rounded-lg bg-transparent 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"
+        >
+          <svg
+            aria-hidden="true"
+            className="h-5 w-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </button>{" "}
+        <div className="overflow-y-auto py-4">
+          <ul className="space-y-2">
+            {props.drawerItems.map((item: any, i: any) => {
+              return (
+                <HawaDrawerItem action={item.action} key={i} text={item.text} />
+              )
+            })}
+          </ul>
+        </div>
+      </div>
+      <div className="p-3">{props.children}</div>
+    </div>
+  )
+}
+
+const AppLayoutNav = (props) => (
+  <nav className="rounded border-gray-200 dark:bg-gray-900">
+    <div className="flex w-full flex-row-reverse items-center justify-between p-3">
+      <div
+        data-dropdown-toggle="userDropdown"
+        data-dropdown-placement="bottom-start"
+        className="relative mr-2 h-10 w-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600"
+      >
+        <svg
+          className="absolute -left-1 h-12 w-12 text-gray-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </div>
+      <div>{props.pageTitle ?? "Home"}</div>
+      <div className="flex flex-row-reverse">
+        <button
+          data-drawer-target="drawer-navigation"
+          data-drawer-show="drawer-navigation"
+          aria-controls="drawer-navigation"
+          type="button"
+          onClick={() => props.handleClick()}
+          className="inline-flex items-center rounded-lg p-2 text-sm text-gray-500  hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        >
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </button>{" "}
+      </div>
+    </div>
+  </nav>
+)

package/src/layout/index.ts

@@ -1,6 +1,6 @@
-export * from "./Box";
-// export * from "./HawaPageControls";
-export * from "./HawaBottomAppBar";
-export * from "./HawaLayout";
-export * from "./HawaContainer";
-export * from "./SimpleGrid";
+export * from "./Box"
+export * from "./HawaBottomAppBar"
+export * from "./HawaSiteLayout"
+export * from "./HawaAppLayout"
+export * from "./HawaContainer"
+export * from "./SimpleGrid"