@sikka/hawa 0.2.16-beta → 0.2.18-beta

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -1,160 +0,0 @@
-import React, { useState, FC } from "react"
-import { Controller, useForm } from "react-hook-form"
-import { HawaPhoneInput, HawaPinInput } from "../../elements"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-import { cn } from "../../util"
-
-type SignInPhoneTypes = {
-  value: any
-  onSubmit: any
-  country: any
-  label: any
-  handlePhoneChange: any
-  phoneRequiredText: any
-  SignInButtonText: any
-  handleContinue: any
-  handleConfirm: any
-  loadingContinue?: boolean
-  loadingConfirm?: boolean
-  confirmationStage?: boolean
-  texts?: {
-    didntGetCode?: string
-    resendCode?: string
-    cancel?: string
-    confirm?: string
-    continue?: string
-  }
-}
-
-export const SignInPhone: FC<SignInPhoneTypes> = (props) => {
-  const [pins, setPins] = useState(null)
-
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-  const [resendTimer, setResendTimer] = useState(null)
-  const [remainingTime, setRemainingTime] = useState(0)
-  const [showResendTimer, setShowResendTimer] = useState(false)
-
-  const [userPhone, setUserPhone] = useState("")
-  const [phoneConfirm, setPhoneConfirm] = useState(props.confirmationStage)
-
-  const startResendTimer = () => {
-    // Clear any existing timer
-    clearTimeout(resendTimer)
-
-    // Set the timer duration (e.g., 60 seconds)
-    const timerDuration = 60
-    setRemainingTime(timerDuration)
-    setShowResendTimer(true)
-
-    const newTimer = setInterval(() => {
-      setRemainingTime((prevTime) => {
-        if (prevTime > 0) {
-          return prevTime - 1;
-        } else {
-          clearInterval(newTimer); // Stop the timer when it reaches zero
-          setShowResendTimer(false);
-          return 0;
-        }
-      });
-    }, 1000);
-
-    // Update the state with the new timer
-    setResendTimer(newTimer)
-
-    // Add logic to resend OTP here if needed
-  }
-
-  return (
-    <Card>
-      <CardContent className="transition-all" headless>
-        {phoneConfirm ? (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              if (pins) {
-                props.handleConfirm(pins)
-              }
-            }}
-          >
-            <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
-            <div className=" py-2 text-center text-xs text-muted-foreground">
-              {showResendTimer ? (
-                <span>
-                  Resend code in {remainingTime} seconds |{" "}
-                  <span
-                    className="clickable-link"
-                    onClick={() => {
-                      clearTimeout(resendTimer)
-                      setShowResendTimer(false)
-                      // Add logic to resend OTP here
-                    }}
-                  >
-                    Cancel
-                  </span>
-                </span>
-              ) : (
-                <span>
-                  {props.texts?.didntGetCode ?? "Didn't get the code?"}{" "}
-                  <span
-                    className="clickable-link"
-                    onClick={() => {
-                      startResendTimer()
-                      // Add logic to resend OTP here
-                    }}
-                  >
-                    {props.texts?.resendCode ?? "Click to resend"}
-                  </span>
-                </span>
-              )}
-            </div>
-
-            <div className="mt-4  grid grid-cols-2 gap-2">
-              <Button
-                variant="secondary"
-                onClick={() => setPhoneConfirm(false)}
-              >
-                {props.texts?.cancel ?? "Cancel"}
-              </Button>
-              <Button isLoading={props.loadingConfirm}>
-                {props.texts?.confirm ?? "Confirm"}
-              </Button>
-            </div>
-          </form>
-        ) : (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              setPhoneConfirm(true)
-              props.handleContinue(userPhone)
-            }}
-          >
-            <Controller
-              control={control}
-              name="phone"
-              render={({ field }) => (
-                <HawaPhoneInput
-                  country={props.country ?? ""}
-                  label={props.label ?? ""}
-                  handleChange={(e: any) => setUserPhone(e.target.value)}
-                  {...field}
-                />
-              )}
-              rules={{
-                required: props.phoneRequiredText,
-              }}
-            />
-            <Button isLoading={props.loadingContinue} className="w-full">
-              {props.texts?.continue ?? "Continue"}
-            </Button>
-          </form>
-        )}
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -1,359 +0,0 @@
-import React, { FC } from "react"
-import {
-  HawaTextField,
-  InterfaceSettings,
-  HawaAlert,
-  HawaCheckbox,
-  HawaSelect,
-} from "../../elements"
-import { Controller, FormProvider, useForm } from "react-hook-form"
-import { Card, CardContent, CardFooter } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-import { Icons } from "../../elements/Icons"
-import { cn } from "../../util"
-
-type SignUpFormTypes = {
-  handleLanguage?: () => void
-  currentLanguage?: any
-  handleColorMode?: () => void
-  currentColorMode?: any
-  direction?: "rtl" | "ltr"
-  logosOnly?: boolean
-  texts: {
-    fullNameLabel: string
-    fullNamePlaceholder: string
-    fullNameRequiredText: string
-    emailLabel: string
-    emailPlaceholder: string
-    emailRequiredText: string
-    emailInvalidText: string
-    usernameLabel: string
-    usernamePlaceholder: string
-    usernameRequired: string
-    passwordLabel: string
-    passwordPlaceholder: string
-    passwordRequiredText: string
-    passwordTooShortText: string
-    confirmPasswordLabel: string
-    confirmPasswordPlaceholder: string
-    subscribeToNewsletter: string
-    forgotPasswordText: string
-    termsText: string
-    iAcceptText: string
-    termsRequiredText: string
-    newUserText: string
-    signUpText: string
-    signInText: string
-    existingUserText: string
-    signUpViaGoogleLabel: string
-    signUpViaGithubLabel: string
-    signUpViaTwitterLabel: string
-    refCode: string
-  }
-  showUserSource: any
-  viaGoogle: boolean
-  viaGithub: boolean
-  viaTwitter: boolean
-  showNewsletterOption: boolean
-  showRefCode: boolean
-  showTermsOption: boolean
-  handleSignUp: (e: any) => void
-  handleRouteToSignIn: () => void
-  handleGoogleSignUp: () => void
-  handleGithubSignUp: () => void
-  handleTwitterSignUp: () => void
-  handleRouteToTOS: () => void
-  showError: any
-  errorTitle: any
-  errorText: any
-  signUpFields: any[]
-  isLoading?: boolean
-}
-
-export const SignUpForm: FC<SignUpFormTypes> = (props) => {
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-
-  return (
-    <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"
-              />
-            )}
-            <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
-                          key={i}
-                          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
-                          key={i}
-                          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 }}
-                />
-                {props.showRefCode && (
-                  <Controller
-                    control={control}
-                    name="refCode"
-                    render={({ field }) => (
-                      <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}
-                      />
-                    )}
-                  />
-                )}
-                {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-normal 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={cn(
-              props.logosOnly
-                ? "flex flex-row justify-center gap-2"
-                : "grid grid-cols-1 gap-2"
-            )}
-          >
-            {props.viaGoogle && (
-              <Button
-                className="flex flex-row items-center gap-2"
-                variant="outline"
-                onClick={props.handleGoogleSignUp}
-              >
-                <Icons.google className="h-4 w-4" />
-                {!props.logosOnly && props.texts.signUpViaGoogleLabel}
-              </Button>
-            )}
-            {props.viaGithub && (
-              <Button
-                className="flex flex-row items-center gap-2"
-                variant="outline"
-                onClick={props.handleGithubSignUp}
-              >
-                <Icons.gitHub className="h-4 w-4" />
-                {!props.logosOnly && props.texts.signUpViaGithubLabel}
-              </Button>
-            )}
-            {props.viaTwitter && (
-              <Button
-                className="flex flex-row items-center gap-2"
-                variant="outline"
-                onClick={props.handleTwitterSignUp}
-              >
-                <Icons.twitter className="h-4 w-4" />
-                {!props.logosOnly && props.texts.signUpViaTwitterLabel}
-              </Button>
-            )}
-          </CardFooter>
-        ) : null}
-      </Card>
-      <InterfaceSettings
-        currentColorMode={props.currentColorMode}
-        currentLanguage={props.currentLanguage}
-        handleColorMode={props.handleColorMode}
-        handleLanguage={props.handleLanguage}
-      />
-    </div>
-  )
-}

package/src/blocks/AuthForms/index.ts

@@ -1,9 +0,0 @@
-export * from "./AppLanding"
-export * from "./SignInPhone"
-export * from "./SignInForm"
-export * from "./SignInBlock"
-export * from "./SignUpForm"
-export * from "./NewPasswordForm"
-export * from "./ResetPasswordForm"
-export * from "./CodeConfirmation"
-export * from "./CheckEmail"

package/src/blocks/Misc/Announcement.tsx

@@ -1,32 +0,0 @@
-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/EmptyState.tsx

@@ -1,47 +0,0 @@
-import React, { FC } from "react"
-import { Card, CardContent, CardFooter } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type TEmptyState = {
-  variant?: "outlined" | "contained" | "neobrutalism"
-  onActionClick: () => void
-  texts: {
-    youreCaughtUp?: string
-    actionText?: string
-  }
-}
-
-export const EmptyState: FC<TEmptyState> = ({
-  variant = "contained",
-  texts,
-  onActionClick,
-}) => {
-  return (
-    <Card>
-      <CardContent headless>
-        <div className="flex flex-col items-center justify-center text-center ">
-          <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold text-primary-foreground">
-            <svg
-              stroke="currentColor"
-              fill="currentColor"
-              strokeWidth="0"
-              viewBox="0 0 512 512"
-              height="0.35em"
-              width="0.35em"
-            >
-              <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
-            </svg>
-          </div>
-          <div className="m-2 text-xl font-bold">
-            {texts?.youreCaughtUp ?? "You're all caught up"}
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full" onClick={() => onActionClick()}>
-          {texts?.actionText ?? "Go Home"}
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}

package/src/blocks/Misc/LeadGenerator.tsx

@@ -1,47 +0,0 @@
-import React, { FC } from "react"
-import { Input } from "../../elements/Input"
-import { Button } from "../../elements/Button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-
-type TLeadGenerator = {
-  variant?: "outlined" | "contained" | "neobrutalism"
-  texts: {
-    title: string
-    subtitle: string
-    submit: string
-  }
-  handleNewsletterSub: (e: string) => void
-}
-
-export const LeadGenerator: FC<TLeadGenerator> = ({
-  variant = "contained",
-  texts,
-  handleNewsletterSub,
-}) => {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{texts?.title}</CardTitle>
-        <CardDescription>{texts?.subtitle}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form
-          className="flex flex-row gap-2"
-          onSubmit={(e) => {
-            e.preventDefault()
-            handleNewsletterSub(e.target[0].value)
-          }}
-        >
-          <Input type="email" name="email" placeholder="example@sikka.io" />
-          <Button>{texts?.submit ?? "Submit"}</Button>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/Misc/NoPermission.tsx

@@ -1,39 +0,0 @@
-import React, { FC } from "react"
-import { Card, CardContent } from "../../elements/Card"
-
-type TNoPermission = {
-  texts?: {
-    title: string
-    subtitle: string
-  }
-}
-
-export const NoPermission: FC<TNoPermission> = ({ texts }) => {
-  return (
-    <Card>
-      <CardContent headless>
-        <div className="flex flex-col items-center justify-center text-center">
-          <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground">
-            <svg
-              stroke="currentColor"
-              fill="currentColor"
-              strokeWidth="0"
-              viewBox="0 0 448 512"
-              height="0.35em"
-              width="0.35em"
-            >
-              <path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
-            </svg>{" "}
-          </div>
-          <div className="m-2 text-xl font-bold">
-            {texts?.title ?? "You don't have permission"}
-          </div>
-          <div>
-            {texts?.subtitle ??
-              "If you think this is a problem please contact your administrator or our customer support"}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}