@sikka/hawa 0.0.288 → 0.1.1

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -8,7 +8,10 @@ import {
   HawaSelect,
 } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
-import { HawaContainer } from "../../layout/HawaContainer"
+import { Card, CardContent, CardFooter } from "../../elements/Card"
+import { Button } from "../../elements/Button"
+import { Icons } from "../../elements/Icons"
+import clsx from "clsx"
 
 type SignUpFormTypes = {
   direction?: "rtl" | "ltr"
@@ -72,259 +75,268 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
   } = methods
 
   return (
-    <HawaContainer direction={props.direction}>
-      <div>
-        {props.showError && (
-          <HawaAlert
-            title={props.errorTitle}
-            text={props.errorText}
-            severity="error"
-          />
-        )}
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit((e) => props.handleSignUp(e))}>
-            <div>
-              {props.signUpFields.map((fld, i) => {
-                if (fld === "fullname") {
-                  return (
-                    <Controller
-                      key={i}
-                      control={control}
-                      name="fullName"
-                      render={({ field }) => (
-                        <HawaTextField
-                          width="full"
-                          type="text"
-                          label={props.texts.fullNameLabel}
-                          placeholder={props.texts.fullNamePlaceholder}
-                          helpertext={errors.fullName?.message}
-                          onChange={field.onChange}
-                          value={field.value ?? ""}
-                        />
-                      )}
-                      rules={{
-                        required: props.texts.fullNameRequiredText,
-                      }}
-                    />
-                  )
-                }
-                if (fld === "email") {
-                  return (
-                    <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}
-                          onChange={field.onChange}
-                          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,
-                        },
-                      }}
-                    />
-                  )
-                }
-                if (fld === "username") {
-                  return (
-                    <Controller
-                      control={control}
-                      name="username"
-                      render={({ field }) => (
-                        <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,
-                      }}
-                    />
-                  )
-                }
-              })}
-            </div>
-            <Controller
-              control={control}
-              name="password"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  type="password"
-                  autoComplete="new-password"
-                  // defaultValue={field.value ?? ""}
-                  label={props.texts.passwordLabel}
-                  placeholder={props.texts.passwordPlaceholder}
-                  helpertext={errors.password?.message}
-                  onChange={field.onChange}
-                  value={field.value ?? ""}
-                />
-              )}
-              rules={{ required: props.texts.passwordRequiredText }}
-            />
-            <Controller
-              control={control}
-              name="confirm_password"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  type="password"
-                  autoComplete="new-password"
-                  // defaultValue={field.value ?? ""}
-                  label={props.texts.confirmPasswordLabel}
-                  placeholder={props.texts.confirmPasswordPlaceholder}
-                  helpertext={errors.confirm_password?.message}
-                  onChange={field.onChange}
-                  value={field.value ?? ""}
-                />
-              )}
-              rules={{ required: props.texts.passwordRequiredText }}
+    <Card dir={props.direction}>
+      <CardContent headless>
+        <div>
+          {props.showError && (
+            <HawaAlert
+              title={props.errorTitle}
+              text={props.errorText}
+              severity="error"
             />
-            {props.showRefCode && (
+          )}
+          <FormProvider {...methods}>
+            <form onSubmit={handleSubmit((e) => props.handleSignUp(e))}>
+              <div>
+                {props.signUpFields.map((fld, i) => {
+                  if (fld === "fullname") {
+                    return (
+                      <Controller
+                        key={i}
+                        control={control}
+                        name="fullName"
+                        render={({ field }) => (
+                          <HawaTextField
+                            width="full"
+                            type="text"
+                            label={props.texts.fullNameLabel}
+                            placeholder={props.texts.fullNamePlaceholder}
+                            helpertext={errors.fullName?.message}
+                            onChange={field.onChange}
+                            value={field.value ?? ""}
+                          />
+                        )}
+                        rules={{
+                          required: props.texts.fullNameRequiredText,
+                        }}
+                      />
+                    )
+                  }
+                  if (fld === "email") {
+                    return (
+                      <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}
+                            onChange={field.onChange}
+                            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,
+                          },
+                        }}
+                      />
+                    )
+                  }
+                  if (fld === "username") {
+                    return (
+                      <Controller
+                        control={control}
+                        name="username"
+                        render={({ field }) => (
+                          <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,
+                        }}
+                      />
+                    )
+                  }
+                })}
+              </div>
               <Controller
                 control={control}
-                name="refCode"
+                name="password"
                 render={({ field }) => (
                   <HawaTextField
                     width="full"
-                    type="text"
-                    defaultValue={field.value ?? ""}
-                    label={props.texts.refCode}
+                    type="password"
+                    autoComplete="new-password"
+                    // defaultValue={field.value ?? ""}
+                    label={props.texts.passwordLabel}
                     placeholder={props.texts.passwordPlaceholder}
                     helpertext={errors.password?.message}
+                    onChange={field.onChange}
                     value={field.value ?? ""}
+                  />
+                )}
+                rules={{ required: props.texts.passwordRequiredText }}
+              />
+              <Controller
+                control={control}
+                name="confirm_password"
+                render={({ field }) => (
+                  <HawaTextField
+                    width="full"
+                    type="password"
+                    autoComplete="new-password"
+                    // defaultValue={field.value ?? ""}
+                    label={props.texts.confirmPasswordLabel}
+                    placeholder={props.texts.confirmPasswordPlaceholder}
+                    helpertext={errors.confirm_password?.message}
                     onChange={field.onChange}
+                    value={field.value ?? ""}
                   />
                 )}
+                rules={{ required: props.texts.passwordRequiredText }}
               />
-            )}
-            {props.showUserSource && (
-              <div>
+              {props.showRefCode && (
                 <Controller
                   control={control}
-                  name="reference"
+                  name="refCode"
                   render={({ field }) => (
-                    <HawaSelect
-                      label="How did you learn about us?"
-                      isCreatable={false}
-                      isMulti={false ?? false}
-                      isSearchable={false}
-                      isClearable={false ?? false}
-                      options={[
-                        { value: "friend", label: "From a friend" },
-                        { value: "ad", label: "Advertisement" },
-                        { value: "other", label: "Other" },
-                      ]}
-                      onChange={(e: any) => {
-                        field.onChange(e.value)
-                      }}
+                    <HawaTextField
+                      width="full"
+                      type="text"
+                      defaultValue={field.value ?? ""}
+                      label={props.texts.refCode}
+                      placeholder={props.texts.passwordPlaceholder}
+                      helpertext={errors.password?.message}
+                      value={field.value ?? ""}
+                      onChange={field.onChange}
                     />
                   )}
                 />
-              </div>
-            )}
-            {props.showTermsOption && (
-              <Controller
-                control={control}
-                name="terms_accepted"
-                render={({ field }) => (
-                  <HawaCheckbox
-                    id="terms_accepted"
-                    helperText={errors.terms_accepted?.message}
-                    onChange={(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 && (
-              <Controller
-                control={control}
-                name="newsletter_accepted"
-                render={({ field }) => (
-                  <HawaCheckbox
-                    id="newsletter_accepted"
-                    label={props.texts.subscribeToNewsletter}
-                    onChange={field.onChange}
+              )}
+              {props.showUserSource && (
+                <div>
+                  <Controller
+                    control={control}
+                    name="reference"
+                    render={({ field }) => (
+                      <HawaSelect
+                        label="How did you learn about us?"
+                        isCreatable={false}
+                        isMulti={false ?? false}
+                        isSearchable={false}
+                        isClearable={false ?? false}
+                        options={[
+                          { value: "friend", label: "From a friend" },
+                          { value: "ad", label: "Advertisement" },
+                          { value: "other", label: "Other" },
+                        ]}
+                        onChange={(e: any) => {
+                          field.onChange(e.value)
+                        }}
+                      />
+                    )}
                   />
-                )}
-              />
-            )}
-            <HawaButton
-              isLoading={props.isLoading}
-              color="primary"
-              width="full"
+                </div>
+              )}
+              {props.showTermsOption && (
+                <Controller
+                  control={control}
+                  name="terms_accepted"
+                  render={({ field }) => (
+                    <HawaCheckbox
+                      id="terms_accepted"
+                      helperText={errors.terms_accepted?.message}
+                      onChange={(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 && (
+                <Controller
+                  control={control}
+                  name="newsletter_accepted"
+                  render={({ field }) => (
+                    <HawaCheckbox
+                      id="newsletter_accepted"
+                      label={props.texts.subscribeToNewsletter}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              )}
+
+              <Button className="w-full" isLoading={props.isLoading}>
+                {props.texts.signUpText}
+              </Button>
+            </form>
+          </FormProvider>
+          <div className="flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white">
+            <span>{props.texts.existingUserText}</span>
+            <span
+              onClick={props.handleRouteToSignIn}
+              className="cursor-pointer text-blue-600"
             >
-              {props.texts.signUpText}
-            </HawaButton>
-          </form>
-        </FormProvider>
-        <div className="flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white">
-          <span>{props.texts.existingUserText}</span>
-          <span
-            onClick={props.handleRouteToSignIn}
-            className="cursor-pointer text-blue-600"
-          >
-            {props.texts.signInText}
-          </span>
+              {props.texts.signInText}
+            </span>
+          </div>
         </div>
-      </div>
+      </CardContent>
+
       {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-        <div style={{ display: "flex", flexDirection: "column" }}>
+        <CardFooter className="grid grid-cols-1 gap-2 ">
           {props.viaGoogle && (
-            <HawaLogoButton
-              logo="google"
-              direction={props.direction}
-              buttonText={props.texts.signUpViaGoogleLabel}
-              onClick={props.handleGoogleSignUp}
-            />
+            <Button variant="outline" onClick={props.handleGoogleSignUp}>
+              <Icons.google
+                className={clsx(
+                  "h-4 w-4",
+                  props.direction === "rtl" ? "ml-2" : "mr-2"
+                )}
+              />
+              {props.texts.signUpViaGoogleLabel}
+            </Button>
           )}
           {props.viaGithub && (
-            <HawaLogoButton
-              logo="github"
-              direction={props.direction}
-              buttonText={props.texts.signUpViaGithubLabel}
-              onClick={props.handleGithubSignUp}
-            />
+            <Button variant="outline" onClick={props.handleGithubSignUp}>
+              <Icons.gitHub
+                className={clsx(
+                  "h-4 w-4",
+                  props.direction === "rtl" ? "ml-2" : "mr-2"
+                )}
+              />
+              {props.texts.signUpViaGithubLabel}
+            </Button>
           )}
           {props.viaTwitter && (
-            <HawaLogoButton
-              logo="twitter"
-              direction={props.direction}
-              buttonText={props.texts.signUpViaTwitterLabel}
-              onClick={props.handleTwitterSignUp}
-            />
+            <Button variant="outline" onClick={props.handleTwitterSignUp}>
+              <Icons.twitter
+                className={clsx(
+                  "h-4 w-4",
+                  props.direction === "rtl" ? "ml-2" : "mr-2"
+                )}
+              />
+              {props.texts.signUpViaTwitterLabel}
+            </Button>
           )}
-        </div>
+        </CardFooter>
       ) : null}
-    </HawaContainer>
+    </Card>
   )
 }

package/src/blocks/AuthForms/index.ts

@@ -1,7 +1,8 @@
-export * from "./AppLanding";
-export * from "./SignInPhone";
-export * from "./SignInForm";
-export * from "./SignUpForm";
-export * from "./NewPasswordForm";
-export * from "./ResetPasswordForm";
-export * from "./CodeConfirmation";
+export * from "./AppLanding"
+export * from "./SignInPhone"
+export * from "./SignInForm"
+export * from "./SignInBlock"
+export * from "./SignUpForm"
+export * from "./NewPasswordForm"
+export * from "./ResetPasswordForm"
+export * from "./CodeConfirmation"

package/src/elements/Button.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+// import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../util"
+import { HawaLoading } from "./HawaLoading"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  isLoading?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      isLoading,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // const Comp = asChild ? Slot : "button"
+    const Comp = "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      >
+        {isLoading ? (
+          // Replace with your loading icon component
+          <HawaLoading design="dots-pulse"  size="button" />
+          ) : (
+          children
+        )}
+      </Comp>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }