@sikka/hawa 0.0.113 → 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.113",
+  "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/blocks/AuthForms/AppLanding.tsx

@@ -3,9 +3,9 @@ import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout/HawaContainer"
 
 type AppLandingTypes = {
-  handleSignIn: any
-  handleSignUp: any
-  handleLanguage: any
+  handleSignIn: () => void
+  handleSignUp: () => void
+  handleLanguage: () => void
   texts: {
     signIn: string
     signUp: string

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -4,7 +4,7 @@ import { Controller, FormProvider, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
 
 type NewPasswordTypes = {
-  handleNewPassword: any
+  handleNewPassword: () => void
   passwordChanged: any
   texts: {
     passwordPlaceholder: string
@@ -17,7 +17,6 @@ type NewPasswordTypes = {
     passwordMatchError: string
     passwordChanged: string
   }
-  handleSignIn: any
 }
 
 export const NewPasswordForm: React.FunctionComponent<NewPasswordTypes> = (

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -4,7 +4,7 @@ import { HawaButton, HawaTextField } from "../../elements"
 import { HawaContainer } from "../../layout"
 
 type ResetPasswordType = {
-  handleResetPassword: any
+  handleResetPassword: () => void
   sent: any
   texts: {
     emailLabel: string

package/src/blocks/AuthForms/SignInForm.tsx

@@ -41,12 +41,12 @@ type SignInFormTypes = {
   viaGoogle: boolean
   viaGithub: boolean
   viaTwitter: boolean
-  handleSignIn: any
-  handleRouteToSignUp: any
-  handleForgotPassword: any
-  handleGoogleSignIn: any
-  handleGithubSignIn: any
-  handleTwitterSignIn: any
+  handleSignIn: (e: any) => void
+  handleRouteToSignUp: () => void
+  handleForgotPassword: () => void
+  handleGoogleSignIn: () => void
+  handleGithubSignIn: () => void
+  handleTwitterSignIn: () => void
 }
 
 export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -11,29 +11,27 @@ type SignInPhoneTypes = {
   handlePhoneChange: any
   phoneRequiredText: any
   SignInButtonText: any
+  handleSignIn: any
 }
 
 export const SignInPhone: React.FunctionComponent<SignInPhoneTypes> = (
   props
 ) => {
+  const methods = useForm()
   const {
     formState: { errors },
     handleSubmit,
     control,
-  } = useForm()
+  } = methods
 
   const [userPhone, setUserPhone] = useState("")
-  const handlingSubmit = () => {
-    console.log("submitting ", userPhone)
-  }
   return (
     <HawaContainer>
       <form
-        onSubmit={handleSubmit(() => console.log("testing submit"))}
-        // onSubmit={(e) => {
-        //   e.preventDefault()
-        //   console.log("testing submit")
-        // }}
+        onSubmit={(e) => {
+          e.preventDefault()
+          props.handleSignIn(userPhone)
+        }}
       >
         <Controller
           control={control}
@@ -42,11 +40,11 @@ export const SignInPhone: React.FunctionComponent<SignInPhoneTypes> = (
             <HawaPhoneInput
               country={props.country ?? ""}
               label={props.label ?? ""}
-              {...field}
               handleChange={(e: any) => {
                 console.log("test")
                 setUserPhone(e.target.value)
               }}
+              {...field}
               // handleChange={(e: any) => {
               //   // props.handlePhoneChange(e.target.value)
               //   setUserPhone(e.target.value)

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -49,11 +49,11 @@ type SignUpFormTypes = {
   showNewsletterOption: boolean
   showRefCode: boolean
   showTermsOption: boolean
-  handleSignUp: any
-  handleRouteToSignIn: any
-  handleGoogleSignUp: any
-  handleGithubSignUp: any
-  handleTwitterSignUp: any
+  handleSignUp: (e: any) => void
+  handleRouteToSignIn: () => void
+  handleGoogleSignUp: () => void
+  handleGithubSignUp: () => void
+  handleTwitterSignUp: () => void
   showError: any
   errorTitle: any
   errorText: any
@@ -78,7 +78,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
           />
         )}
         <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(props.handleSignUp)}>
+          <form onSubmit={handleSubmit((e) => props.handleSignUp(e))}>
             <Controller
               control={control}
               name="fullName"
@@ -228,7 +228,6 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                   render={({ field }) => (
                     <HawaCheckbox
                       helperText={errors.terms_accepted?.message}
-                      {...field}
                       onChange={() => console.log("te")}
                       label={
                         <span>
@@ -238,6 +237,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
                           </a>
                         </span>
                       }
+                      {...field}
                     />
                   )}
                   rules={{ required: props.texts.termsRequiredText }}

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,20 +4,24 @@ import React from "react"
 type TChipTypes = {
   label: string
   size: "small" | "normal" | "large"
+  icon?: JSX.Element
 }
 export const HawaChip: React.FunctionComponent<TChipTypes> = ({
   size = "normal",
   label,
+  icon,
 }) => {
-  // small: "text-xs px-2.5 py-1.5",
-  // medium: "text-sm leading-4 px-3 py-2",
-  // large: "text-sm px-4 py-2",
   let defaultStyles =
-    "rounded-lg bg-blue-200 px-2.5 py-0.5  font-bold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
+    "flex flex-row w-fit gap-1 items-center rounded-lg bg-blue-200 px-2.5 py-0.5  font-bold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
   let sizeStyles = {
     small: "h-fit text-xs",
     normal: "h-full leading-4 px-3 py-2 text-xs ",
     large: "",
   }
-  return <span className={clsx(defaultStyles, sizeStyles[size])}>{label}</span>
+  return (
+    <span className={clsx(defaultStyles, sizeStyles[size])}>
+      {icon && icon}
+      {label}
+    </span>
+  )
 }

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

@@ -5,5 +5,5 @@ type SearchBarTypes = {}
 export const HawaSearchBar: React.FunctionComponent<SearchBarTypes> = (
   props
 ) => {
-  return <HawaTextField {...props} />
+  return <HawaTextField type={"search"} {...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,6 +1,7 @@
 import React from "react"
 import clsx from "clsx"
 
+import { FaSearch } from "react-icons/fa"
 type TextFieldTypes = {
   margin?: "none" | "normal" | "large"
   width?: "small" | "normal" | "full"
@@ -53,11 +54,23 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
           className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm 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"
           placeholder="Your message..."
         />
+      ) : props.type === "search" ? (
+        <div className="relative">
+          <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"
+          />
+        </div>
       ) : (
-        <input
-          {...props}
-          className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 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"
-        />
+        <div>
+          <input
+            {...props}
+            className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 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"
+          />
+        </div>
       )}
 
       {props.helperText && (

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>
+)