@sikka/hawa 0.0.288 → 0.1.1

package/lib/util.d.ts

@@ -1,3 +1,5 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
 type Palette = {
     name: string;
     colors: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.288",
+  "version": "0.1.1",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -106,6 +106,8 @@
   },
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-label": "^2.0.2",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
     "react": "^18.2.0",
@@ -114,7 +116,8 @@
     "react-icons": "^4.10.1",
     "react-select": "^5.3.2",
     "slate": "^0.94.1",
-    "slate-react": "^0.97.1"
+    "slate-react": "^0.97.1",
+    "tailwind-merge": "^1.14.0"
   },
   "readme": "ERROR: No README data found!",
   "_id": "@sikka/hawa@0.0.285"

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

@@ -0,0 +1,60 @@
+"use client"
+
+import { Icons } from "../../elements/Icons"
+import { Button } from "../../elements/Button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../elements/Card"
+import { Input } from "../../elements/Input"
+import { Label } from "../../elements/Label"
+
+export function SignInBlock() {
+  return (
+    <Card>
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl">Create an account</CardTitle>
+        <CardDescription>
+          Enter your email below to create your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="grid grid-cols-2 gap-6">
+          <Button variant="outline">
+            <Icons.gitHub className="mr-2 h-4 w-4" />
+            Github
+          </Button>
+          <Button variant="outline">
+            <Icons.google 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>
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Create account</Button>
+      </CardFooter>
+    </Card>
+  )
+}

package/src/blocks/AuthForms/SignInForm.tsx

@@ -8,6 +8,11 @@ import {
 } from "../../elements"
 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 {
@@ -17,155 +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>
-        {!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>
+
+          <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>
   )
 }
 
@@ -189,7 +200,7 @@ type SignInFormTypes = {
     passwordRequiredText?: string
     forgotPasswordText?: string
     newUserText?: string
-    signUpText?: string
+    createAccount?: string
     signInText?: string
     signInViaGoogleLabel?: string
     signInViaGithubLabel?: string