@sikka/hawa 0.1.7 → 0.1.8-beta

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -1,72 +0,0 @@
-import React, { useState, FC } from "react"
-import { HawaAlert, HawaPinInput } from "../../elements"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type TConfirmation = {
-  showError?: any
-  errorTitle?: any
-  errorText?: any
-  texts?: {
-    checkYourPhone: string
-    weSentCode: string
-    didntGetCode: string
-    resendCode: string
-    codeLabel: string
-    codePlaceholder: string
-    codeRequiredText: string
-    confirm: string
-    cancel: string
-  }
-  phoneNumber?: string
-  submitConfirmation?: any
-  handleSignIn?: any
-}
-
-export const CodeConfirmation: FC<TConfirmation> = (props) => {
-  const [pins, setPins] = useState(null)
-  return (
-    <Card>
-      <CardContent headless>
-        {props.showError && (
-          <HawaAlert
-            title={props.errorTitle}
-            text={props.errorText}
-            severity="error"
-          />
-        )}
-        <div className="mb-4 dark:text-white">
-          <div className="text-lg font-bold">
-            {props.texts.checkYourPhone ?? "Please check your phone"}
-          </div>
-          <div className="text-muted-foreground">
-            <span>{props.texts.weSentCode ?? "We've sent a code to "}</span>
-            <span>{props.phoneNumber}</span>
-          </div>{" "}
-        </div>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault()
-            if (pins) {
-              props.submitConfirmation(pins)
-            }
-          }}
-        >
-          <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
-          <div className=" py-2 text-center text-xs text-muted-foreground">
-            <span>{props.texts.didntGetCode ?? "Didn't get the code?"}</span>{" "}
-            <span className="clickable-link">
-              {props.texts.resendCode ?? "Click to resend"}
-            </span>
-          </div>
-          <div className="mt-4  grid grid-cols-2 gap-2">
-            <Button variant="secondary">
-              {props.texts.cancel ?? "Cancel"}
-            </Button>
-            <Button>{props.texts.confirm ?? "Confirm"}</Button>
-          </div>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -1,116 +0,0 @@
-import React, { useState, FC } from "react"
-import { HawaTextField, HawaAlert } from "../../elements"
-import { Controller, FormProvider, useForm } from "react-hook-form"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type NewPasswordTypes = {
-  handleNewPassword: () => void
-  passwordChanged: any
-  texts: {
-    passwordPlaceholder: string
-    updatePassword: string
-    passwordRequiredText: string
-    passwordLabel: string
-    confirmPasswordPlaceholder: string
-    confirmPasswordLabel: string
-    confirmPasswordRequiredText: string
-    passwordMatchError: string
-    passwordChanged: string
-  }
-}
-
-export const NewPasswordForm: FC<NewPasswordTypes> = (props) => {
-  const [matchError, setMatchError] = useState(false)
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-
-  const handleSubmission = (e: any) => {
-    if (e.password === e.confirmPassword) {
-      props.handleNewPassword()
-    } else {
-      setMatchError(true)
-    }
-  }
-
-  return (
-    <Card>
-      {matchError && (
-        <HawaAlert text={props.texts.passwordMatchError} severity="error" />
-      )}
-      {props.passwordChanged ? (
-        <CardContent headless>
-          <div className="text-center">{props.texts.passwordChanged}</div>
-        </CardContent>
-      ) : (
-        <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(handleSubmission)}>
-            <CardHeader>
-              <CardTitle>Create Password</CardTitle>
-              <CardDescription>
-                Set a new password for your account
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Controller
-                control={control}
-                name="password"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="password"
-                    autoComplete="new-password"
-                    label={props.texts.passwordLabel}
-                    placeholder={props.texts.passwordPlaceholder}
-                    helpertext={errors.password?.message}
-                    {...field}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{
-                  required: props.texts.passwordRequiredText,
-                }}
-              />
-              <Controller
-                control={control}
-                name="confirmPassword"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="password"
-                    autoComplete="new-password"
-                    label={props.texts.confirmPasswordLabel}
-                    placeholder={props.texts.confirmPasswordPlaceholder}
-                    helpertext={errors.confirmPassword?.message}
-                    {...field}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{
-                  required: props.texts.confirmPasswordRequiredText,
-                }}
-              />
-            </CardContent>
-
-            <CardFooter>
-              <Button className="w-full" type="submit">
-                {props.texts.updatePassword}
-              </Button>
-            </CardFooter>
-          </form>
-        </FormProvider>
-      )}
-    </Card>
-  )
-}

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -1,97 +0,0 @@
-import React, { FC } from "react"
-import { Controller, useForm } from "react-hook-form"
-import { HawaTextField } from "../../elements"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type ResetPasswordType = {
-  handleResetPassword: () => void
-  handleRouteToSignUp: () => void
-  sent: any
-  texts: {
-    emailLabel: string
-    emailPlaceholder: string
-    emailRequiredText: string
-    emailInvalidText: string
-    emailSentText: string
-    resetPassword: string
-    signUpText: string
-    dontHaveAccount: string
-  }
-}
-
-export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    register,
-    control,
-  } = methods
-  return (
-    <Card>
-      {!props.sent ? (
-        <>
-          <CardHeader>
-            <CardTitle>Reset Password</CardTitle>
-            <CardDescription>
-              Enter your email to reset your account password
-            </CardDescription>
-          </CardHeader>
-          <form onSubmit={handleSubmit(props.handleResetPassword)}>
-            <CardContent>
-              <Controller
-                control={control}
-                name="email"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    type="text"
-                    label={props.texts.emailLabel}
-                    helpertext={errors.email?.message}
-                    placeholder={props.texts.emailPlaceholder}
-                    {...field}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{
-                  required: props.texts.emailRequiredText,
-                  pattern: {
-                    value:
-                      /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                    message: props.texts.emailInvalidText,
-                  },
-                }}
-              />
-              <div className=" pb-2 text-left text-sm dark:text-gray-300">
-                {props.texts.dontHaveAccount ?? "Don't have an account? "}
-                <span
-                  onClick={props.handleRouteToSignUp}
-                  className="clickable-link"
-                >
-                  {props.texts.signUpText ?? "Sign Up"}
-                </span>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button type="submit" className="w-full">
-                {props.texts.resetPassword}
-              </Button>
-            </CardFooter>
-          </form>
-        </>
-      ) : (
-        <CardContent headless>
-          <div className="text-center">{props.texts.emailSentText}</div>
-        </CardContent>
-      )}
-    </Card>
-  )
-}

package/src/blocks/AuthForms/SignInBlock.tsx

@@ -1,60 +0,0 @@
-"use client"
-
-import { Icons } from "../../elements/Icons"
-import { Button } from "../../elements/Button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../elements/Card"
-import { Input } from "../../elements/Input"
-import { Label } from "../../elements/Label"
-
-export function SignInBlock() {
-  return (
-    <Card>
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl">Create an account</CardTitle>
-        <CardDescription>
-          Enter your email below to create your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid grid-cols-2 gap-6">
-          <Button variant="outline">
-            <Icons.gitHub className="mr-2 h-4 w-4" />
-            Github
-          </Button>
-          <Button variant="outline">
-            <Icons.google className="mr-2 h-4 w-4" />
-            Google
-          </Button>
-        </div>
-        <div className="relative">
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t" />
-          </div>
-          <div className="relative flex justify-center text-xs uppercase">
-            <span className="bg-background px-2 text-muted-foreground">
-              Or continue with
-            </span>
-          </div>
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Create account</Button>
-      </CardFooter>
-    </Card>
-  )
-}

package/src/blocks/AuthForms/SignInForm.tsx

@@ -1,228 +0,0 @@
-import React, { FC } from "react"
-import {
-  HawaTextField,
-  HawaLogoButton,
-  HawaAlert,
-  HawaPhoneInput,
-} from "../../elements"
-import { Controller, useForm } from "react-hook-form"
-import { Button } from "../../elements/Button"
-import { FaGithub, FaGoogle } from "react-icons/fa"
-import { Card, CardContent, CardFooter, CardHeader } from "../../elements/Card"
-import { Icons } from "../../elements/Icons"
-import clsx from "clsx"
-
-export const SignInForm: FC<SignInFormTypes> = (props) => {
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = useForm()
-
-  return (
-    <Card dir={props.direction}>
-      <CardContent headless>
-        <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
-          {props.showError && (
-            <HawaAlert
-              title={props.errorTitle}
-              text={props.errorText}
-              severity="error"
-            />
-          )}
-          {props.signInType === "email" ? (
-            <Controller
-              control={control}
-              name="email"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  type="text"
-                  autoComplete="email"
-                  label={props.texts.emailLabel}
-                  helpertext={errors.email?.message}
-                  placeholder={props.texts.emailPlaceholder}
-                  value={field.value ?? ""}
-                  onChange={field.onChange}
-                />
-              )}
-              rules={{
-                required: props.texts.emailRequiredText,
-                pattern: {
-                  value:
-                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                  message: props.texts.emailInvalidText,
-                },
-              }}
-            />
-          ) : props.signInType === "username" ? (
-            <Controller
-              control={control}
-              name="username"
-              render={({ field }) => {
-                return (
-                  <HawaTextField
-                    width="full"
-                    type="text"
-                    autoComplete="username"
-                    label={props.texts.usernameLabel}
-                    helpertext={errors.username?.message}
-                    placeholder={props.texts.usernamePlaceholder}
-                    onChange={field.onChange}
-                    value={field.value ?? ""}
-                  />
-                )
-              }}
-              rules={{
-                required: props.texts.usernameRequired,
-              }}
-            />
-          ) : (
-            <Controller
-              control={control}
-              name="phone"
-              render={({ field }) => <HawaPhoneInput label="Phone number" />}
-              rules={{ required: props.texts.phoneRequiredText }}
-            />
-          )}
-          {props.signInType !== "phone" && (
-            <>
-              <Controller
-                control={control}
-                name="password"
-                render={({ field }) => (
-                  <HawaTextField
-                    width="full"
-                    autoComplete="current-password"
-                    type="password"
-                    label={props.texts.passwordLabel}
-                    placeholder={props.texts.passwordPlaceholder}
-                    helpertext={errors.password?.message}
-                    onChange={field.onChange}
-                    value={field.value ?? ""}
-                  />
-                )}
-                rules={{
-                  required: props.texts.passwordRequiredText,
-                  minLength: 5,
-                }}
-              />
-              {!props.withoutResetPassword && (
-                <div
-                  onClick={props.handleForgotPassword}
-                  className="mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
-                >
-                  {props.texts.forgotPasswordText}
-                </div>
-              )}
-            </>
-          )}
-
-
-          <Button className="w-full" isLoading={props.isLoading}>
-            {props.texts.signInText}
-          </Button>
-          {!props.withoutSignUp && (
-            <div className="p-3 text-center text-sm font-semibold dark:text-gray-300">
-              {props.texts.newUserText}{" "}
-              <span
-                onClick={props.handleRouteToSignUp}
-                className="clickable-link"
-              >
-                {props.texts.createAccount}
-              </span>
-            </div>
-          )}
-        </form>
-      </CardContent>
-
-      {/* 3rd Party Sign Auth Buttons */}
-      {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-        <CardFooter className="grid grid-cols-1 gap-2 ">
-          {props.viaGoogle && (
-            <Button variant="outline" onClick={props.handleGoogleSignIn}>
-              <Icons.google
-                className={clsx(
-                  "h-4 w-4",
-                  props.direction === "rtl" ? "ml-2" : "mr-2"
-                )}
-              />
-              {props.texts.signInViaGoogleLabel}
-            </Button>
-          )}
-          {props.viaGithub && (
-            <Button variant="outline" onClick={props.handleGithubSignIn}>
-              <Icons.gitHub
-                className={clsx(
-                  "h-4 w-4",
-                  props.direction === "rtl" ? "ml-2" : "mr-2"
-                )}
-              />
-              {props.texts.signInViaGithubLabel}
-            </Button>
-          )}
-          {props.viaTwitter && (
-            <Button variant="outline" onClick={props.handleTwitterSignIn}>
-              <Icons.twitter
-                className={clsx(
-                  "h-4 w-4",
-                  props.direction === "rtl" ? "ml-2" : "mr-2"
-                )}
-              />
-              {props.texts.signInViaTwitterLabel}
-            </Button>
-          )}
-        </CardFooter>
-      ) : null}
-    </Card>
-  )
-}
-
-type SignInFormTypes = {
-  direction?: "rtl" | "ltr"
-  showError?: any
-  errorTitle?: string
-  errorText?: string
-  signInType?: "email" | "username" | "phone"
-  texts?: {
-    emailLabel?: string
-    emailPlaceholder?: string
-    emailRequiredText?: string
-    emailInvalidText?: string
-    usernameLabel?: string
-    usernamePlaceholder?: string
-    usernameRequired?: string
-    phoneRequiredText?: string
-    passwordLabel?: string
-    passwordPlaceholder?: string
-    passwordRequiredText?: string
-    forgotPasswordText?: string
-    newUserText?: string
-    createAccount?: string
-    signInText?: string
-    signInViaGoogleLabel?: string
-    signInViaGithubLabel?: string
-    signInViaTwitterLabel?: string
-  }
-  withoutResetPassword?: boolean
-  withoutSignUp?: boolean
-  /**
-   *show spinner if true
-   */
-  isLoading?: any
-  viaGoogle?: boolean
-  viaGithub?: boolean
-  viaTwitter?: boolean
-  /**
-   * Handle the sign in .
-   */
-  handleSignIn?: (e: any) => void
-  /**
-   * Handle routing to sign up page
-   */
-  handleRouteToSignUp?: () => void
-  handleForgotPassword?: () => void
-  handleGoogleSignIn?: () => void
-  handleGithubSignIn?: () => void
-  handleTwitterSignIn?: () => void
-}

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -1,57 +0,0 @@
-import React, { useState, FC } from "react"
-import { Controller, useForm } from "react-hook-form"
-import { HawaPhoneInput } from "../../elements"
-import { Card, CardContent } from "../../elements/Card"
-import { Button } from "../../elements/Button"
-
-type SignInPhoneTypes = {
-  value: any
-  onSubmit: any
-  country: any
-  label: any
-  handlePhoneChange: any
-  phoneRequiredText: any
-  SignInButtonText: any
-  handleSignIn: any
-}
-
-export const SignInPhone: FC<SignInPhoneTypes> = (props) => {
-  const methods = useForm()
-  const {
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = methods
-
-  const [userPhone, setUserPhone] = useState("")
-  return (
-    <Card>
-      <CardContent headless>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault()
-            props.handleSignIn(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,
-            }}
-          />
-          <div className="mt-2"></div>
-          <Button className="w-full">{props.SignInButtonText}</Button>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}