@sikka/hawa 0.0.113 → 0.0.114

package/package.json

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

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

@@ -4,20 +4,24 @@ import React from "react"
 type TChipTypes = {
   label: string
   size: "small" | "normal" | "large"
+  icon?: any
 }
 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/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/HawaTextField.tsx

@@ -1,6 +1,6 @@
 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 +53,24 @@ 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">
+          <FaSearch
+            color="gray"
+            className="absolute top-1/2 left-3 -translate-y-1/2"
+          />
+          <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/styles.css

@@ -541,6 +541,9 @@ video {
 .bottom-4 {
   bottom: 1rem;
 }
+.left-3 {
+  left: 0.75rem;
+}
 .top-5 {
   top: 1.25rem;
 }
@@ -1389,6 +1392,9 @@ video {
 .pr-3 {
   padding-right: 0.75rem;
 }
+.pl-10 {
+  padding-left: 2.5rem;
+}
 .pt-0 {
   padding-top: 0px;
 }