@sikka/hawa 0.0.114 → 0.0.117

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.117",
   "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/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/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,69 @@
+import clsx from "clsx"
+import React, { useState } from "react"
+
+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">
+      <div
+        onMouseEnter={() => setOpenSideMenu(true)}
+        onMouseLeave={() => setOpenSideMenu(false)}
+        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="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>
+
+      {/* 
+      <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>
+  )
+}
+
+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>
+)