@sikka/hawa 0.1.0 → 0.1.1

package/package.json

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

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -1,7 +1,14 @@
 import React, { FC } from "react"
 import { Controller, useForm } from "react-hook-form"
-import { HawaButton, HawaTextField } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { HawaTextField } from "../../elements"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type ResetPasswordType = {
   handleResetPassword: () => void
@@ -28,52 +35,55 @@ export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
     control,
   } = methods
   return (
-    <HawaContainer>
-      {!props.sent ? (
-        <form onSubmit={handleSubmit(props.handleResetPassword)}>
-          <Controller
-            control={control}
-            name="email"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                type="text"
-                label={props.texts.emailLabel}
-                helpertext={errors.email?.message}
-                placeholder={props.texts.emailPlaceholder}
-                {...field}
-                value={field.value ?? ""}
-              />
-            )}
-            rules={{
-              required: props.texts.emailRequiredText,
-              pattern: {
-                value:
-                  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                message: props.texts.emailInvalidText,
-              },
-            }}
-          />
-          <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"
-            // type="submit"
-          >
-            {props.texts.resetPassword}
-          </HawaButton>
-        </form>
-      ) : (
-        <div className="text-center">{props.texts.emailSentText}</div>
-      )}
-    </HawaContainer>
+    <Card>
+      <CardHeader>
+        <CardTitle>Reset Password</CardTitle>
+        <CardDescription>
+          Enter your email to reset your account password
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {!props.sent ? (
+          <form onSubmit={handleSubmit(props.handleResetPassword)}>
+            <Controller
+              control={control}
+              name="email"
+              render={({ field }) => (
+                <HawaTextField
+                  width="full"
+                  type="text"
+                  label={props.texts.emailLabel}
+                  helpertext={errors.email?.message}
+                  placeholder={props.texts.emailPlaceholder}
+                  {...field}
+                  value={field.value ?? ""}
+                />
+              )}
+              rules={{
+                required: props.texts.emailRequiredText,
+                pattern: {
+                  value:
+                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                  message: props.texts.emailInvalidText,
+                },
+              }}
+            />
+            <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>
+
+            <Button className="w-full">{props.texts.resetPassword}</Button>
+          </form>
+        ) : (
+          <div className="text-center">{props.texts.emailSentText}</div>
+        )}
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/AuthForms/SignInForm.tsx

@@ -10,6 +10,9 @@ import { Controller, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
 import { Button } from "../../elements/Button"
 import { FaGithub, FaGoogle } from "react-icons/fa"
+import { Card, CardContent, CardFooter, CardHeader } from "../../elements/Card"
+import { Icons } from "../../elements/Icons"
+import clsx from "clsx"
 
 export const SignInForm: FC<SignInFormTypes> = (props) => {
   const {
@@ -19,174 +22,161 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
   } = useForm()
 
   return (
-    <HawaContainer direction={props.direction}>
-      <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
-        {props.showError && (
-          <HawaAlert
-            title={props.errorTitle}
-            text={props.errorText}
-            severity="error"
-          />
-        )}
-        {props.signInType === "email" ? (
-          <Controller
-            control={control}
-            name="email"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                type="text"
-                autoComplete="email"
-                label={props.texts.emailLabel}
-                helpertext={errors.email?.message}
-                placeholder={props.texts.emailPlaceholder}
-                value={field.value ?? ""}
-                onChange={field.onChange}
-              />
-            )}
-            rules={{
-              required: props.texts.emailRequiredText,
-              pattern: {
-                value:
-                  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                message: props.texts.emailInvalidText,
-              },
-            }}
-          />
-        ) : props.signInType === "username" ? (
-          <Controller
-            control={control}
-            name="username"
-            render={({ field }) => {
-              return (
-                <HawaTextField
-                  width="full"
-                  type="text"
-                  autoComplete="username"
-                  label={props.texts.usernameLabel}
-                  helpertext={errors.username?.message}
-                  placeholder={props.texts.usernamePlaceholder}
-                  onChange={field.onChange}
-                  value={field.value ?? ""}
-                />
-              )
-            }}
-            rules={{
-              required: props.texts.usernameRequired,
-            }}
-          />
-        ) : (
-          <Controller
-            control={control}
-            name="phone"
-            render={({ field }) => <HawaPhoneInput label="Phone number" />}
-            rules={{ required: props.texts.phoneRequiredText }}
-          />
-        )}
-        {props.signInType !== "phone" && (
-          <>
+    <Card dir={props.direction}>
+      <CardContent headless>
+        <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
+          {props.showError && (
+            <HawaAlert
+              title={props.errorTitle}
+              text={props.errorText}
+              severity="error"
+            />
+          )}
+          {props.signInType === "email" ? (
             <Controller
               control={control}
-              name="password"
+              name="email"
               render={({ field }) => (
                 <HawaTextField
                   width="full"
-                  autoComplete="current-password"
-                  type="password"
-                  label={props.texts.passwordLabel}
-                  placeholder={props.texts.passwordPlaceholder}
-                  helpertext={errors.password?.message}
-                  onChange={field.onChange}
+                  type="text"
+                  autoComplete="email"
+                  label={props.texts.emailLabel}
+                  helpertext={errors.email?.message}
+                  placeholder={props.texts.emailPlaceholder}
                   value={field.value ?? ""}
+                  onChange={field.onChange}
                 />
               )}
               rules={{
-                required: props.texts.passwordRequiredText,
-                minLength: 5,
+                required: props.texts.emailRequiredText,
+                pattern: {
+                  value:
+                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                  message: props.texts.emailInvalidText,
+                },
               }}
             />
-            {!props.withoutResetPassword && (
-              <div
-                onClick={props.handleForgotPassword}
-                className="mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
-              >
-                {props.texts.forgotPasswordText}
-              </div>
-            )}
-          </>
-        )}
+          ) : props.signInType === "username" ? (
+            <Controller
+              control={control}
+              name="username"
+              render={({ field }) => {
+                return (
+                  <HawaTextField
+                    width="full"
+                    type="text"
+                    autoComplete="username"
+                    label={props.texts.usernameLabel}
+                    helpertext={errors.username?.message}
+                    placeholder={props.texts.usernamePlaceholder}
+                    onChange={field.onChange}
+                    value={field.value ?? ""}
+                  />
+                )
+              }}
+              rules={{
+                required: props.texts.usernameRequired,
+              }}
+            />
+          ) : (
+            <Controller
+              control={control}
+              name="phone"
+              render={({ field }) => <HawaPhoneInput label="Phone number" />}
+              rules={{ required: props.texts.phoneRequiredText }}
+            />
+          )}
+          {props.signInType !== "phone" && (
+            <>
+              <Controller
+                control={control}
+                name="password"
+                render={({ field }) => (
+                  <HawaTextField
+                    width="full"
+                    autoComplete="current-password"
+                    type="password"
+                    label={props.texts.passwordLabel}
+                    placeholder={props.texts.passwordPlaceholder}
+                    helpertext={errors.password?.message}
+                    onChange={field.onChange}
+                    value={field.value ?? ""}
+                  />
+                )}
+                rules={{
+                  required: props.texts.passwordRequiredText,
+                  minLength: 5,
+                }}
+              />
+              {!props.withoutResetPassword && (
+                <div
+                  onClick={props.handleForgotPassword}
+                  className="mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
+                >
+                  {props.texts.forgotPasswordText}
+                </div>
+              )}
+            </>
+          )}
 
-        {/* <HawaButton
-          isLoading={props.isLoading}
-          variant="contained"
-          color="primary"
-          size="medium"
-          width="full"
-        >
-          {props.texts.signInText}
-        </HawaButton> */}
-        <Button className="w-full">{props.texts.signInText}</Button>
-        {!props.withoutSignUp && (
-          <div className="p-3 text-center text-sm font-semibold dark:text-gray-300">
-            {props.texts.newUserText}{" "}
-            <span
-              onClick={props.handleRouteToSignUp}
-              className="cursor-pointer text-blue-600 dark:text-blue-400"
-            >
-              {props.texts.signUpText}
-            </span>
-          </div>
-        )}
-      </form>
 
-      {/* <div className="grid grid-cols-2 gap-6">
-        <Button variant="outline">
-          <FaGithub className="mr-2 h-4 w-4" /> Github
-        </Button>
-        <Button variant="outline">
-          <FaGoogle className="mr-2 h-4 w-4" /> Google
-        </Button>
-      </div>
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <span className="w-full border-t" />
-        </div>
-        <div className="relative flex justify-center text-xs uppercase">
-          <span className="bg-background px-2 text-muted-foreground">
-            Or continue with
-          </span>
-        </div>
-      </div> */}
+          <Button className="w-full" isLoading={props.isLoading}>
+            {props.texts.signInText}
+          </Button>
+          {!props.withoutSignUp && (
+            <div className="p-3 text-center text-sm font-semibold dark:text-gray-300">
+              {props.texts.newUserText}{" "}
+              <span
+                onClick={props.handleRouteToSignUp}
+                className="cursor-pointer text-blue-600 dark:text-blue-400"
+              >
+                {props.texts.createAccount}
+              </span>
+            </div>
+          )}
+        </form>
+      </CardContent>
+
       {/* 3rd Party Sign Auth Buttons */}
       {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-        <div className="flex flex-col ">
+        <CardFooter className="grid grid-cols-1 gap-2 ">
           {props.viaGoogle && (
-            <HawaLogoButton
-              logo="google"
-              direction={props.direction}
-              buttonText={props.texts.signInViaGoogleLabel}
-              onClick={props.handleGoogleSignIn}
-            />
+            <Button variant="outline" onClick={props.handleGoogleSignIn}>
+              <Icons.google
+                className={clsx(
+                  "h-4 w-4",
+                  props.direction === "rtl" ? "ml-2" : "mr-2"
+                )}
+              />
+              {props.texts.signInViaGoogleLabel}
+            </Button>
           )}
           {props.viaGithub && (
-            <HawaLogoButton
-              logo="github"
-              direction={props.direction}
-              buttonText={props.texts.signInViaGithubLabel}
-              onClick={props.handleGithubSignIn}
-            />
+            <Button variant="outline" onClick={props.handleGithubSignIn}>
+              <Icons.gitHub
+                className={clsx(
+                  "h-4 w-4",
+                  props.direction === "rtl" ? "ml-2" : "mr-2"
+                )}
+              />
+              {props.texts.signInViaGithubLabel}
+            </Button>
           )}
           {props.viaTwitter && (
-            <HawaLogoButton
-              logo="twitter"
-              direction={props.direction}
-              buttonText={props.texts.signInViaTwitterLabel}
-              onClick={props.handleTwitterSignIn}
-            />
+            <Button variant="outline" onClick={props.handleTwitterSignIn}>
+              <Icons.twitter
+                className={clsx(
+                  "h-4 w-4",
+                  props.direction === "rtl" ? "ml-2" : "mr-2"
+                )}
+              />
+              {props.texts.signInViaTwitterLabel}
+            </Button>
           )}
-        </div>
+        </CardFooter>
       ) : null}
-    </HawaContainer>
+    </Card>
   )
 }
 
@@ -210,7 +200,7 @@ type SignInFormTypes = {
     passwordRequiredText?: string
     forgotPasswordText?: string
     newUserText?: string
-    signUpText?: string
+    createAccount?: string
     signInText?: string
     signInViaGoogleLabel?: string
     signInViaGithubLabel?: string