@sikka/hawa 0.0.186 → 0.0.187

package/package.json

@@ -1,9 +1,27 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.186",
-  "description": "UI Kit",
+  "version": "0.0.187",
+  "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
+  "author": "Sikka Software <contact@sikka.io> (http://sikka.io)",
+  "license": "MIT",
+  "keywords": [
+    "ui",
+    "kit",
+    "saas",
+    "kit",
+    "hawa"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sikka-software/hawa.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sikka-software/hawa/issues",
+    "email": "hawa@sikka.io"
+  },
+  "homepage": "https://hawa.style",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "start-storybook -p 6006 -s public",
@@ -14,8 +32,6 @@
     "build-lib": "rollup -c",
     "build:styles": " node tools/build-styles"
   },
-  "author": "Sikka Software",
-  "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-react": "^7.12.10",

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -5,6 +5,7 @@ import { HawaContainer } from "../../layout"
 
 type ResetPasswordType = {
   handleResetPassword: () => void
+  handleRouteToSignUp: () => void
   sent: any
   texts: {
     emailLabel: string
@@ -13,6 +14,8 @@ type ResetPasswordType = {
     emailInvalidText: string
     emailSentText: string
     resetPassword: string
+    signUpText: string
+    dontHaveAccount: string
   }
 }
 
@@ -53,6 +56,15 @@ export const ResetPasswordForm: React.FunctionComponent<ResetPasswordType> = (
               },
             }}
           />
+          <div className=" pb-2 text-left text-sm dark:text-gray-300">
+            {props.texts.dontHaveAccount ?? "Don't have an account? "}
+            <span
+              onClick={props.handleRouteToSignUp}
+              className="cursor-pointer text-blue-600 dark:text-blue-400"
+            >
+              {props.texts.signUpText ?? "Sign Up"}
+            </span>
+          </div>
           <HawaButton
             color="primary"
             width="full"

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -41,6 +41,7 @@ type SignUpFormTypes = {
     googleButtonLabel: string
     githubButtonLabel: string
     twitterButtonLabel: string
+    refCode: string
   }
   showUserSource: any
   viaGoogle: boolean
@@ -194,13 +195,13 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
             {props.showRefCode && (
               <Controller
                 control={control}
-                name="password"
+                name="refCode"
                 render={({ field }) => (
                   <HawaTextField
                     width="full"
                     type="text"
                     defaultValue={field.value ?? ""}
-                    label={"Ref Code"}
+                    label={props.texts.refCode}
                     placeholder={props.texts.passwordPlaceholder}
                     helperText={errors.password?.message}
                     value={field.value ?? ""}
@@ -235,49 +236,45 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
               </div>
             )}
             {props.showTermsOption && (
-              <div>
-                <Controller
-                  control={control}
-                  name="terms_accepted"
-                  render={({ field }) => (
-                    <HawaCheckbox
-                      id="terms_accepted"
-                      helperText={errors.terms_accepted?.message}
-                      onChange={(e) => {
-                        console.log("changing ", e)
-                        field.onChange(e)
-                      }}
-                      label={
-                        <span>
-                          {props.texts.iAcceptText}{" "}
-                          <a
-                            onClick={props.handleRouteToTOS}
-                            className="cursor-pointer text-blue-800"
-                          >
-                            {props.texts.termsText}
-                          </a>
-                        </span>
-                      }
-                    />
-                  )}
-                  rules={{ required: props.texts.termsRequiredText }}
-                />
-              </div>
+              <Controller
+                control={control}
+                name="terms_accepted"
+                render={({ field }) => (
+                  <HawaCheckbox
+                    id="terms_accepted"
+                    helperText={errors.terms_accepted?.message}
+                    onChange={(e) => {
+                      console.log("changing ", e)
+                      field.onChange(e)
+                    }}
+                    label={
+                      <span>
+                        {props.texts.iAcceptText}{" "}
+                        <a
+                          onClick={props.handleRouteToTOS}
+                          className="cursor-pointer text-blue-800"
+                        >
+                          {props.texts.termsText}
+                        </a>
+                      </span>
+                    }
+                  />
+                )}
+                rules={{ required: props.texts.termsRequiredText }}
+              />
             )}
             {props.showNewsletterOption && (
-              <div className="py-2">
-                <Controller
-                  control={control}
-                  name="newsletter_accepted"
-                  render={({ field }) => (
-                    <HawaCheckbox
-                      id="newsletter_accepted"
-                      label={props.texts.subscribeToNewsletter}
-                      onChange={field.onChange}
-                    />
-                  )}
-                />
-              </div>
+              <Controller
+                control={control}
+                name="newsletter_accepted"
+                render={({ field }) => (
+                  <HawaCheckbox
+                    id="newsletter_accepted"
+                    label={props.texts.subscribeToNewsletter}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
             )}
             <HawaButton
               isLoading={props.isLoading}

package/src/elements/HawaCheckbox.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React, { useEffect, useState } from "react"
 
 type TCheckBoxTypes = {
@@ -19,11 +20,11 @@ export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (
   }, [val])
   return (
     <div
-      className={
+      className={clsx(
         props.centered
           ? "flex h-full items-center justify-center"
           : "flex h-full items-start "
-      }
+      )}
     >
       <input
         type="checkbox"

package/src/elements/HawaSelect.tsx

@@ -18,7 +18,7 @@ const Option: React.FunctionComponent<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="m-2 flex flex-row items-center justify-between rounded p-1 px-3 hover:bg-blue-200"
+    className="m-2 flex flex-row items-center justify-between rounded p-1 px-3 hover:bg-buttonPrimary-500 hover:text-white"
     {...innerProps}
   >
     {children}

package/src/elements/HawaTabs.tsx

@@ -9,10 +9,12 @@ type TabsTypes = {
   orientation?: "horizontal" | "vertical"
   direction?: "rtl" | "ltr"
   marginBetween?: any
+  width?: "full" | "normal"
 }
 export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   orientation = "horizontal",
   direction = "ltr",
+  width = "normal",
   marginBetween = 0,
   ...props
 }) => {
@@ -27,7 +29,11 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     vertical:
       "inline-block py-2 px-4 rounded-none rounded-br-none rounded-tl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
     horizontal:
-      "inline-block py-2 px-4 rounded rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
+      "bg-gray-100 inline-block py-2 px-4 rounded rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
+  }
+  let widthStyles = {
+    full: "w-full min-w-full",
+    normal: "w-fit",
   }
   console.log("selected i : ", selectedOption)
   console.log("selected object : ", props.options[selectedOption])
@@ -49,7 +55,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     vertical:
       "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     horizontal:
-      "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-buttonPrimary-500  text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div
@@ -57,6 +63,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       className={clsx(
         containerStyle[orientation],
         props.options[selectedOption] ? "border-b-2" : "border-b-0"
+        // "bg-red-400"
       )}
     >
       <ul
@@ -76,7 +83,8 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
             ? direction === "rtl"
               ? "rounded-none rounded-r border-l-2"
               : "rounded-none rounded-l border-r-2"
-            : "border-b-2"
+            : "border-b-2",
+          widthStyles[width]
         )}
       >
         {/* 

package/src/elements/HawaTextField.tsx

@@ -17,6 +17,7 @@ type TextFieldTypes = {
   inputProps?: any
   onChange?: any
   ref?: any
+  icon?: any
 }
 
 export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
@@ -36,6 +37,10 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
   }
 
   let defaultStyle = "flex h-fit max-h-fit flex-col justify-center"
+  let defaultInputStyle =
+    "block w-full rounded border border-gray-300 bg-gray-50 p-2 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"
+  // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  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",
+
   return (
     <div
       // ref={props.ref}
@@ -53,7 +58,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
         <textarea
           id="message"
           rows={4}
-          className="block w-full rounded 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"
+          className={defaultInputStyle}
           onChange={props.onChange}
           type={props.type}
           aria-label={props.label}
@@ -62,32 +67,22 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
           value={props.value}
           {...props}
         />
-      ) : 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 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>
-      ) : (
-        <div>
-          <input
-            onChange={props.onChange}
-            type={props.type}
-            aria-label={props.label}
-            placeholder={props.placeholder}
-            defaultValue={props.defaultValue}
-            value={props.value}
-            className="mb-0 block w-full rounded 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"
+            className={clsx(defaultInputStyle, props.icon ? "pr-10" : "")}
           />
+          {props.icon && (
+            <div className="absolute top-1/2 right-3 -translate-y-1/2">
+              {props.icon}
+            </div>
+          )}
         </div>
       )}
 
       {props.helperText && (
-        <p className="mb-1 mt-1 text-xs text-red-600 dark:text-red-500">
+        <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
           {/* <span className="font-medium">Oh, snapp!</span> */}
           {props.helperText}
         </p>

package/src/styles.css

@@ -385,7 +385,7 @@ video {
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
-    --border-radius: 13px;
+    --border-radius: 0px;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
@@ -608,8 +608,8 @@ video {
 .top-2 {
   top: 0.5rem;
 }
-.left-3 {
-  left: 0.75rem;
+.right-3 {
+  right: 0.75rem;
 }
 .-top-10 {
   top: -2.5rem;
@@ -965,6 +965,9 @@ video {
 .w-40 {
   width: 10rem;
 }
+.min-w-full {
+  min-width: 100%;
+}
 .min-w-min {
   min-width: -moz-min-content;
   min-width: min-content;
@@ -1615,12 +1618,15 @@ video {
 .pr-3 {
   padding-right: 0.75rem;
 }
-.pl-10 {
-  padding-left: 2.5rem;
+.pr-10 {
+  padding-right: 2.5rem;
 }
 .pl-3 {
   padding-left: 0.75rem;
 }
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
 .pt-0 {
   padding-top: 0px;
 }

package/src/tailwind.css

@@ -14,7 +14,7 @@
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
-    --border-radius: 13px;
+    --border-radius: 0px;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {