@sikka/hawa 0.1.0 → 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/elements/Button.tsx

@@ -3,6 +3,7 @@ import * as React from "react"
 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",
@@ -37,10 +38,22 @@ 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, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      isLoading,
+      children,
+      ...props
+    },
+    ref
+  ) => {
     // const Comp = asChild ? Slot : "button"
     const Comp = "button"
     return (
@@ -48,7 +61,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
-      />
+      >
+        {isLoading ? (
+          // Replace with your loading icon component
+          <HawaLoading design="dots-pulse"  size="button" />
+          ) : (
+          children
+        )}
+      </Comp>
     )
   }
 )

package/src/elements/Card.tsx

@@ -55,11 +55,20 @@ const CardDescription = React.forwardRef<
 ))
 CardDescription.displayName = "CardDescription"
 
+type CardContentProps = {
+  headless?: boolean
+} & React.HTMLAttributes<HTMLDivElement>
+
 const CardContent = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+  CardContentProps
+  // React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div
+    ref={ref}
+    className={cn("p-6", props.headless ? "pt-6" : "pt-0", className)}
+    {...props}
+  />
 ))
 CardContent.displayName = "CardContent"
 

package/src/elements/HawaLoading.tsx

@@ -28,13 +28,13 @@ export const HawaLoading: FC<LoadingTypes> = ({
   switch (design.split("-")[0]) {
     case "dots":
       return (
-        <div className="flex flex-row space-x-2 ">
+        <div className="flex flex-row gap-2">
           <div
             className={clsx(
               "animate-bounce rounded-full delay-100 repeat-infinite",
               size === "button" ? "h-2 w-2" : sizeStyles[size],
               animationStyles[design.split("-")[1]],
-              color ? color : "bg-buttonPrimary-500"
+              color ? color : "bg-primary-foreground"
             )}
           ></div>
           <div
@@ -43,7 +43,7 @@ export const HawaLoading: FC<LoadingTypes> = ({
               size === "button" ? "h-2 w-2" : sizeStyles[size],
               animationStyles[design.split("-")[1]],
 
-              color ? color : "bg-buttonPrimary-500"
+              color ? color : "bg-primary-foreground"
             )}
           ></div>
           <div
@@ -52,7 +52,7 @@ export const HawaLoading: FC<LoadingTypes> = ({
               size === "button" ? "h-2 w-2" : sizeStyles[size],
               animationStyles[design.split("-")[1]],
 
-              color ? color : "bg-buttonPrimary-500"
+              color ? color : "bg-primary-foreground"
             )}
           ></div>
         </div>

package/src/elements/HawaTextField.tsx

@@ -1,5 +1,6 @@
 import React, { FC, PropsWithRef } from "react"
 import clsx from "clsx"
+import { Label } from "./Label"
 
 // TODO: make icon based on direction
 // TODO: Preferebly use context to pass direction rtl | ltr
@@ -50,7 +51,7 @@ export const HawaTextField: FC<TextFieldTypes> = ({
     full: "w-full",
   }
 
-  let defaultStyle = "flex max-h-fit flex-col justify-center"
+  let defaultStyle = "flex max-h-fit flex-col justify-center gap-2"
   let defaultInputStyle =
     "block w-full rounded border bg-background p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
   let previewInputStyle =
@@ -62,12 +63,13 @@ export const HawaTextField: FC<TextFieldTypes> = ({
       className={clsx(defaultStyle, marginStyles[margin], widthStyles[width])}
     >
       {props.label && (
-        <label
-          // htmlFor="first_name"
-          className="mb-2 block text-sm font-medium "
-        >
-          {props.label}
-        </label>
+        // <label
+        //   // htmlFor="first_name"
+        //   className="mb-2 block text-sm font-medium "
+        // >
+        //   {props.label}
+        // </label>
+        <Label>{props.label}</Label>
       )}
       {preview ? (
         <>

package/src/elements/Icons.tsx

@@ -30,7 +30,10 @@ export const Icons = {
   ),
   twitter: (props: IconProps) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
-      <path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148a13.98 13.98 0 0 0 10.15 5.144 4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z" />
+      <path
+        fill="currentColor"
+        d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148a13.98 13.98 0 0 0 10.15 5.144 4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"
+      />
     </svg>
   ),
   gitHub: (props: IconProps) => (