@sikka/hawa 0.0.112 → 0.0.114

package/lib/stories/ElementsStories/Snackbar.stories.d.ts

@@ -6,3 +6,4 @@ export declare const Success: any;
 export declare const Warning: any;
 export declare const Info: any;
 export declare const Error: any;
+export declare const WithActions: any;

package/package.json

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

package/src/blocks/Account/UserSettingsForm.tsx

@@ -13,7 +13,6 @@ export const UserSettingsForm: React.FunctionComponent<
 > = (props) => {
   return (
     <HawaContainer>
-      {" "}
       {props.children}
       <HawaButton
         color="primary"

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

@@ -1,5 +1,6 @@
 import React from "react"
 import clsx from "clsx"
+import { HawaButton } from "./HawaButton"
 
 let severities = {
   info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
@@ -13,6 +14,13 @@ type AlertTypes = {
   title?: any
   text: any
   hideIcon?: any
+  actions?: [
+    {
+      label: string
+      onClick: any
+      variant: "contained" | "outlined"
+    }
+  ]
 }
 export const HawaAlert: React.FunctionComponent<AlertTypes> = (props) => {
   return (
@@ -25,6 +33,19 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = (props) => {
     >
       <span className="font-medium">{props.title}</span>
       <span>{" " + props.text}</span>
+      {props.actions && (
+        <div className="mt-2 flex flex-row gap-2">
+          {props.actions.map((act) => (
+            <HawaButton
+              variant={act.variant}
+              onClick={act.onClick()}
+              margins="none"
+            >
+              {act.label}
+            </HawaButton>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

package/src/elements/HawaButton.tsx

@@ -6,7 +6,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   color?: "default" | "primary" | "secondary"
   width?: "full" | "normal" | "half"
   size?: "small" | "medium" | "large" | "noPadding"
-  tooltip?: string,
+  margins?: "none" | "1" | "2" | "3" | "4"
+  tooltip?: string
   isLoading?: boolean
 }
 
@@ -59,6 +60,7 @@ export function HawaButton({
   width = "normal",
   disabled = false,
   isLoading = false,
+  margins = "2",
   tooltip,
   children,
   ...props
@@ -66,7 +68,12 @@ export function HawaButton({
   const [isHovered, setIsHovered] = React.useState(false)
 
   return (
-    <div className="relative my-2">
+    <div
+      className={clsx(
+        "relative",
+        margins !== "none" ? `my-${margins}` : "my-0"
+      )}
+    >
       <button
         onMouseEnter={() => {
           setIsHovered(true)

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

@@ -2,7 +2,12 @@ import clsx from "clsx"
 import React, { useState } from "react"
 
 type RadioTypes = {
-  options?: any
+  options?: [
+    {
+      value: any
+      label: any
+    }
+  ]
   onChangeTab?: any
   defaultValue?: any
 }
@@ -17,7 +22,7 @@ export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
     <div>
       <ul
         className={clsx(
-          props.options.length > 2
+          props.options?.length > 2
             ? "flex-wrap xs:max-w-full xs:flex-nowrap"
             : "",
           "flex max-w-fit flex-row whitespace-nowrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400"

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

@@ -1,5 +1,6 @@
 import clsx from "clsx"
 import React, { FC } from "react"
+import { HawaButton } from "./HawaButton"
 
 type THawaSnackBar = {
   severity: "info" | "warning" | "error" | "success" | "none"
@@ -12,6 +13,13 @@ type THawaSnackBar = {
     | "bottom-right"
     | "bottom-center"
     | "bottom-left"
+  actions?: [
+    {
+      label: string
+      onClick: any
+      variant: "contained" | "outlined"
+    }
+  ]
 }
 
 export const HawaSnackbar: FC<THawaSnackBar> = ({
@@ -19,6 +27,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
   description,
   severity = "info",
   position = "bottom-left",
+  actions,
 }) => {
   let defaultStyle =
     "fixed flex flex-row items-top p-1 w-full max-w-xs rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
@@ -44,8 +53,21 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
       className={clsx(defaultStyle, severities[severity], positions[position])}
     >
       <div className="p-3">
-        <div className="ml-3 text-sm font-bold">{title}</div>
-        <div className="ml-3 text-sm font-normal">{description}</div>
+        <div className="text-sm font-bold">{title}</div>
+        <div className="text-sm font-normal">{description}</div>
+        {actions && (
+          <div className="mt-2 flex flex-row gap-2">
+            {actions.map((act) => (
+              <HawaButton
+                variant={act.variant}
+                onClick={act.onClick()}
+                margins="none"
+              >
+                {act.label}
+              </HawaButton>
+            ))}
+          </div>
+        )}
       </div>
       <button
         type="button"

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-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"
-        />
+        <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/layout/HawaContainer.tsx

@@ -13,12 +13,11 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
   centered = false,
   ...props
 }) => {
-  let defaultStyle =
-    "flex w-full max-w-sm flex-col rounded-xl p-4 dark:bg-gray-600"
+  let defaultStyle = "flex w-full flex-col rounded-xl p-4 dark:bg-gray-600"
   let maxWidthStyles: any = {
     full: "md:max-w-xl",
     small: "md:max-w-sm w-1/3 min-w-min",
-    normal: "md:max-w-md",
+    normal: "max-w-sm md:max-w-md",
   }
   let variantStyles = {
     contained: "bg-primary-300",

package/src/styles.css

@@ -541,6 +541,9 @@ video {
 .bottom-4 {
   bottom: 1rem;
 }
+.left-3 {
+  left: 0.75rem;
+}
 .top-5 {
   top: 1.25rem;
 }
@@ -587,14 +590,18 @@ video {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .my-7 {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
@@ -603,10 +610,6 @@ video {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
 }
-.my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
 .ml-auto {
   margin-left: auto;
 }
@@ -619,6 +622,9 @@ video {
 .mb-4 {
   margin-bottom: 1rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -652,9 +658,6 @@ video {
 .ml-2 {
   margin-left: 0.5rem;
 }
-.mt-2 {
-  margin-top: 0.5rem;
-}
 .mb-5 {
   margin-bottom: 1.25rem;
 }
@@ -1389,6 +1392,9 @@ video {
 .pr-3 {
   padding-right: 0.75rem;
 }
+.pl-10 {
+  padding-left: 2.5rem;
+}
 .pt-0 {
   padding-top: 0px;
 }