@sikka/hawa 0.1.53 → 0.1.55

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react"
 import {
   HawaTextField,
-  HawaLogoButton,
+  InterfaceSettings,
   HawaAlert,
   HawaCheckbox,
   HawaSelect,
@@ -13,6 +13,10 @@ import { Icons } from "../../elements/Icons"
 import clsx from "clsx"
 
 type SignUpFormTypes = {
+  handleLanguage?: () => void
+  currentLanguage?: any
+  handleColorMode?: () => void
+  currentColorMode?: any
   direction?: "rtl" | "ltr"
   texts: {
     fullNameLabel: string
@@ -74,268 +78,276 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
   } = methods
 
   return (
-    <Card dir={props.direction}>
-      <CardContent headless>
-        <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 }}
+    <div className="flex flex-col gap-4">
+      <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="clickable-link"
-                          >
-                            {props.texts.termsText}
-                          </a>
-                        </span>
-                      }
+                )}
+                {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)
+                          }}
+                        />
+                      )}
                     />
+                  </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="clickable-link"
+                            >
+                              {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="clickable-link"
+              >
+                {props.texts.signInText}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+
+        {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
+          <CardFooter className="grid grid-cols-1 gap-2 ">
+            {props.viaGoogle && (
+              <Button variant="outline" onClick={props.handleGoogleSignUp}>
+                <Icons.google
+                  className={clsx(
+                    "h-4 w-4",
+                    props.direction === "rtl" ? "ml-2" : "mr-2"
                   )}
-                  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.texts.signUpViaGoogleLabel}
+              </Button>
+            )}
+            {props.viaGithub && (
+              <Button variant="outline" onClick={props.handleGithubSignUp}>
+                <Icons.gitHub
+                  className={clsx(
+                    "h-4 w-4",
+                    props.direction === "rtl" ? "ml-2" : "mr-2"
                   )}
                 />
-              )}
-
-              <Button className="w-full" isLoading={props.isLoading}>
-                {props.texts.signUpText}
+                {props.texts.signUpViaGithubLabel}
               </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="clickable-link"
-            >
-              {props.texts.signInText}
-            </span>
-          </div>
-        </div>
-      </CardContent>
-
-      {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-        <CardFooter className="grid grid-cols-1 gap-2 ">
-          {props.viaGoogle && (
-            <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 && (
-            <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 && (
-            <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>
-          )}
-        </CardFooter>
-      ) : null}
-    </Card>
+            )}
+            {props.viaTwitter && (
+              <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>
+            )}
+          </CardFooter>
+        ) : null}
+      </Card>
+      <InterfaceSettings
+        currentColorMode={props.currentColorMode}
+        currentLanguage={props.currentLanguage}
+        handleColorMode={props.handleColorMode}
+        handleLanguage={props.handleLanguage}
+      />
+    </div>
   )
 }

package/src/blocks/Misc/Announcement.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from "react"
+import { Card, CardContent, CardFooter } from "../../elements/Card"
+import { Button } from "../../elements/Button"
+
+type AnnouncementTypes = {
+  variant?: "outlined" | "contained" | "neobrutalism"
+  onActionClick: () => void
+  actionText?: string
+  title?: string
+  subtitle?: string
+}
+
+export const Announcement: FC<AnnouncementTypes> = ({
+  variant = "contained",
+  onActionClick,
+  ...props
+}) => {
+  return (
+    <Card>
+      <CardContent
+        headless
+        className="flex flex-row items-center justify-between"
+      >
+        <div className="flex flex-col items-start justify-center ">
+          <span className="text-lg font-bold">{props.title}</span>
+          <span className="text-sm">{props.subtitle}</span>
+        </div>
+        <Button onClick={() => onActionClick()}>{props.actionText}</Button>
+      </CardContent>
+    </Card>
+  )
+}

package/src/blocks/Misc/index.ts

@@ -2,4 +2,5 @@ export * from "./NotFound"
 export * from "./EmptyState"
 export * from "./Testimonial"
 export * from "./LeadGenerator"
+export * from "./Announcement"
 export * from "./NoPermission"

package/src/elements/BackToTop.tsx

@@ -1,7 +1,9 @@
 import React, { FC, RefObject, useState, useEffect, useRef } from "react"
 import { clsx } from "clsx"
+import { Button } from "./Button"
+import { cn } from "../util"
 
-type ComponentTypes = {
+type BackToTopTypes = {
   paddingX?: number // Horizontal padding relative to the attached corner
   paddingY?: number // Vertical padding relative to the attached corner
   paddingThreshold?: number // Increase to the threshold of the scroll value that has to be passed for the button to appear
@@ -9,7 +11,7 @@ type ComponentTypes = {
   anchor: RefObject<HTMLInputElement>
 }
 
-export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
+export const BackToTop: FC<BackToTopTypes> = ({ ...props }) => {
   const [visible, setVisible] = useState<boolean>(false)
   const [rect, _setRect] = useState<DOMRect>(null)
   const _rect = useRef(rect)
@@ -95,35 +97,31 @@ export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
   }
 
   return (
-    <div
-      className={clsx(
-        "fixed w-fit rounded bg-blue-300 p-2 text-black transition-all hover:bg-blue-500",
-        `${
-          visible
-            ? "pointer-events-all opacity-100"
-            : "pointer-events-none opacity-0"
-        }`
+    <Button
+      className={cn(
+        "fixed cursor-pointer rounded transition-all",
+        visible
+          ? "pointer-events-all opacity-100"
+          : "pointer-events-none opacity-0"
       )}
+      onClick={backToTop}
       style={{
         ...getStyles(),
         transitionProperty: "opacity, background-color",
       }}
-      onClick={backToTop}
       ref={self}
+      size="icon"
     >
-      {/* Back to top arrow 👇*/}
       <svg
         className={clsx(
           "h-6 w-6 shrink-0 rotate-180 transition-all  disabled:bg-gray-200"
         )}
+        aria-label="Arrow Icon"
         viewBox="0 0 20 20"
+        fill="currentColor"
       >
-        <path
-          fillRule="evenodd"
-          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-          clipRule="evenodd"
-        ></path>
+        <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
       </svg>
-    </div>
+    </Button>
   )
 }