@sikka/hawa 0.0.95 → 0.0.96

package/src/blocks/AuthForms/{SignInForm.js → SignInForm.tsx}

@@ -1,25 +1,63 @@
-import React from "react";
+import React from "react"
 import {
   HawaTextField,
   HawaLogoButton,
   HawaAlert,
   HawaButton,
-  HawaPhoneInput
-} from "../../elements";
-import { Controller, useForm } from "react-hook-form";
-import PropTypes from "prop-types";
-import { HawaContainer } from "../../layout/HawaContainer";
+  HawaPhoneInput,
+} from "../../elements"
+import { Controller, useForm } from "react-hook-form"
+import { HawaContainer } from "../../layout"
 
-export const SignInForm = (props) => {
-  const methods = useForm();
+type SignInFormTypes = {
+  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
+    usernameRequiredText: string
+    phoneRequiredText: string
+    passwordLabel: string
+    passwordPlaceholder: string
+    passwordRequiredText: string
+    forgotPasswordText: string
+    newUserText: string
+    signUpText: string
+    signInText: string
+    googleButtonLabel: string
+    githubButtonLabel: string
+    twitterButtonLabel: string
+  }
+  withoutResetPassword: boolean
+  withoutSignUp: boolean
+  isLoading: any
+  viaGoogle: boolean
+  viaGithub: boolean
+  viaTwitter: boolean
+  handleSignIn: any
+  handleRouteToSignUp: any
+  handleForgotPassword: any
+  handleGoogleSignIn: any
+  handleGithubSignIn: any
+  handleTwitterSignIn: any
+}
+
+export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
   const {
     formState: { errors },
     handleSubmit,
-    control
-  } = methods;
+    control,
+  } = useForm()
 
   return (
-    <HawaContainer withDividers>
+    <HawaContainer>
       <form onSubmit={handleSubmit(props.handleSignIn)}>
         {props.showError && (
           <HawaAlert
@@ -34,13 +72,13 @@ export const SignInForm = (props) => {
             name="email"
             render={({ field }) => (
               <HawaTextField
-                fullWidth
+                width="full"
                 type="text"
-                value={field.value ?? ""}
                 label={props.texts.emailLabel}
                 helperText={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
                 {...field}
+                value={field.value ?? ""}
               />
             )}
             rules={{
@@ -48,8 +86,8 @@ export const SignInForm = (props) => {
               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
-              }
+                message: props.texts.emailInvalidText,
+              },
             }}
           />
         ) : props.signInType === "username" ? (
@@ -58,17 +96,17 @@ export const SignInForm = (props) => {
             name="username"
             render={({ field }) => (
               <HawaTextField
-                fullWidth
+                width="full"
                 type="text"
-                value={field.value ?? ""}
                 label={props.texts.usernameLabel}
                 helperText={errors.username?.message}
                 placeholder={props.texts.usernamePlaceholder}
                 {...field}
+                value={field.value ?? ""}
               />
             )}
             rules={{
-              required: props.texts.usernameRequired
+              required: props.texts.usernameRequiredText,
             }}
           />
         ) : (
@@ -76,7 +114,7 @@ export const SignInForm = (props) => {
             control={control}
             name="phone"
             render={({ field }) => <HawaPhoneInput label="Phone number" />}
-            rules={{ required: props.texts.passwordRequiredText }}
+            rules={{ required: props.texts.phoneRequiredText }}
           />
         )}
         <Controller
@@ -84,38 +122,43 @@ export const SignInForm = (props) => {
           name="password"
           render={({ field }) => (
             <HawaTextField
-              fullWidth
+              width="full"
               type="password"
               defaultValue={field.value ?? ""}
-              value={field.value ?? ""}
               label={props.texts.passwordLabel}
               placeholder={props.texts.passwordPlaceholder}
               helperText={errors.password?.message}
               {...field}
+              value={field.value ?? ""}
             />
           )}
-          rules={{ required: props.texts.passwordRequiredText }}
+          rules={{ required: props.texts.passwordRequiredText, minLength: 5 }}
         />
         {!props.withoutResetPassword && (
           <div
-            className="dark:text-gray-300 text-xs cursor-pointer w-fit mb-3"
+            className="mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
             onClick={props.handleForgotPassword}
           >
             {props.texts.forgotPasswordText}
           </div>
         )}
+
         <HawaButton
-          fullWidth
           isLoading={props.isLoading}
+          variant="contained"
+          color="primary"
+          size="medium"
+          width="full"
           type="submit"
-          text={props.texts.signInText}
-        />{" "}
+        >
+          {props.texts.signInText}
+        </HawaButton>
         {!props.withoutSignUp && (
-          <div className="dark:text-gray-300 font-semibold p-3 text-center text-sm">
+          <div className="p-3 text-center text-sm font-semibold dark:text-gray-300">
             {props.texts.newUserText}{" "}
             <span
               onClick={props.handleRouteToSignUp}
-              className="dark:text-blue-400 text-blue-600 cursor-pointer"
+              className="cursor-pointer text-blue-600 dark:text-blue-400"
             >
               {props.texts.signUpText}
             </span>
@@ -150,40 +193,5 @@ export const SignInForm = (props) => {
         </div>
       ) : null}
     </HawaContainer>
-  );
-};
-SignInForm.propTypes = {
-  /**
-   *  An object of all the texts in the blocks
-   */
-  texts: PropTypes.shape({
-    emailLabel: PropTypes.string,
-    emailPlaceholder: PropTypes.string,
-    emailRequiredText: PropTypes.string,
-    emailInvalidText: PropTypes.string,
-    usernameLabel: PropTypes.string,
-    usernamePlaceholder: PropTypes.string,
-    usernameRequired: PropTypes.string,
-    passwordLabel: PropTypes.string,
-    passwordPlaceholder: PropTypes.string,
-    passwordRequiredText: PropTypes.string,
-    forgotPasswordText: PropTypes.string,
-    newUserText: PropTypes.string,
-    signUpText: PropTypes.string,
-    signInText: PropTypes.string,
-    googleButtonLabel: PropTypes.string,
-    githubButtonLabel: PropTypes.string,
-    twitterButtonLabel: PropTypes.string
-  }),
-  viaGoogle: PropTypes.bool,
-  viaGithub: PropTypes.bool,
-  viaTwitter: PropTypes.bool,
-  handleSignIn: PropTypes.func,
-  handleRouteToSignUp: PropTypes.func,
-  handleGoogleSignIn: PropTypes.func,
-  handleGithubSignIn: PropTypes.func,
-  handleTwitterSignIn: PropTypes.func,
-  handleForgotPassword: PropTypes.func,
-
-  withoutSignUp: PropTypes.bool
-};
+  )
+}

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { HawaButton, HawaPhoneInput } from "../../elements"
+import { HawaContainer } from "../../layout"
+
+type SignInPhoneTypes = {
+  value: any
+  onSubmit: any
+  country: any
+  label: any
+  handlePhoneChange: any
+  phoneRequiredText: any
+  SignInButtonText: any
+}
+
+export const SignInPhone: React.FunctionComponent<SignInPhoneTypes> = (
+  props
+) => {
+  const {
+    formState: { errors },
+    handleSubmit,
+    control,
+  } = useForm()
+
+  const [userPhone, setUserPhone] = useState("")
+  const handlingSubmit = () => {
+    console.log("submitting ", userPhone)
+  }
+  return (
+    <HawaContainer>
+      <form
+        onSubmit={handleSubmit(() => console.log("testing submit"))}
+        // onSubmit={(e) => {
+        //   e.preventDefault()
+        //   console.log("testing submit")
+        // }}
+      >
+        <Controller
+          control={control}
+          name="phone"
+          render={({ field }) => (
+            <HawaPhoneInput
+              country={props.country ?? ""}
+              label={props.label ?? ""}
+              {...field}
+              handleChange={(e: any) => {
+                console.log("test")
+                setUserPhone(e.target.value)
+              }}
+              // handleChange={(e: any) => {
+              //   // props.handlePhoneChange(e.target.value)
+              //   setUserPhone(e.target.value)
+              // }}
+              // value={props.value ?? props.value}
+            />
+          )}
+          rules={{
+            required: props.phoneRequiredText,
+          }}
+        />
+        <div className="mt-2"></div>
+        <HawaButton color="primary" width="full" type="submit">
+          {props.SignInButtonText}
+        </HawaButton>
+      </form>
+    </HawaContainer>
+  )
+}

package/src/blocks/AuthForms/{SignUpForm.js → SignUpForm.tsx}

@@ -1,26 +1,74 @@
-import React from "react";
+import React from "react"
 import {
   HawaTextField,
   HawaLogoButton,
   HawaAlert,
   HawaButton,
   HawaCheckbox,
-  HawaSelect
-} from "../../elements";
-import PropTypes from "prop-types";
-import { Controller, FormProvider, useForm } from "react-hook-form";
-import { HawaContainer } from "../../layout/HawaContainer";
+  HawaSelect,
+} from "../../elements"
+import { Controller, FormProvider, useForm } from "react-hook-form"
+import { HawaContainer } from "../../layout/HawaContainer"
 
-export const SignUpForm = (props) => {
-  const methods = useForm();
+type SignUpFormTypes = {
+  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
+    googleButtonLabel: string
+    githubButtonLabel: string
+    twitterButtonLabel: string
+  }
+  showUserSource: any
+  signUpType: any
+  viaGoogle: boolean
+  viaGithub: boolean
+  viaTwitter: boolean
+  showNewsletterOption: boolean
+  showRefCode: boolean
+  showTermsOption: boolean
+  handleSignUp: any
+  handleRouteToSignIn: any
+  handleGoogleSignUp: any
+  handleGithubSignUp: any
+  handleTwitterSignUp: any
+  showError: any
+  errorTitle: any
+  errorText: any
+}
+
+export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
+  const methods = useForm()
   const {
     formState: { errors },
     handleSubmit,
-    control
-  } = methods;
+    control,
+  } = methods
 
   return (
-    <HawaContainer withDividers>
+    <HawaContainer>
       <div>
         {props.showError && (
           <HawaAlert
@@ -36,17 +84,17 @@ export const SignUpForm = (props) => {
               name="fullName"
               render={({ field }) => (
                 <HawaTextField
-                  fullWidth
+                  width="full"
                   type="text"
-                  value={field.value ?? ""}
                   label={props.texts.fullNameLabel}
                   placeholder={props.texts.fullNamePlaceholder}
                   helperText={errors.fullName?.message}
                   {...field}
+                  value={field.value ?? ""}
                 />
               )}
               rules={{
-                required: props.texts.fullNameRequiredText
+                required: props.texts.fullNameRequiredText,
               }}
             />
             {props.signUpType === "email" ? (
@@ -55,13 +103,13 @@ export const SignUpForm = (props) => {
                 name="email"
                 render={({ field }) => (
                   <HawaTextField
-                    fullWidth
+                    width="full"
                     type="text"
-                    value={field.value ?? ""}
                     label={props.texts.emailLabel}
                     helperText={errors.email?.message}
                     placeholder={props.texts.emailPlaceholder}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
                 rules={{
@@ -69,8 +117,8 @@ export const SignUpForm = (props) => {
                   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
-                  }
+                    message: props.texts.emailInvalidText,
+                  },
                 }}
               />
             ) : (
@@ -79,17 +127,17 @@ export const SignUpForm = (props) => {
                 name="username"
                 render={({ field }) => (
                   <HawaTextField
-                    fullWidth
+                    width="full"
                     type="text"
-                    value={field.value ?? ""}
                     label={props.texts.usernameLabel}
                     helperText={errors.username?.message}
                     placeholder={props.texts.usernamePlaceholder}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
                 rules={{
-                  required: props.texts.usernameRequired
+                  required: props.texts.usernameRequired,
                 }}
               />
             )}
@@ -98,14 +146,14 @@ export const SignUpForm = (props) => {
               name="password"
               render={({ field }) => (
                 <HawaTextField
-                  fullWidth
+                  width="full"
                   type="password"
                   defaultValue={field.value ?? ""}
-                  value={field.value ?? ""}
                   label={props.texts.passwordLabel}
                   placeholder={props.texts.passwordPlaceholder}
                   helperText={errors.password?.message}
                   {...field}
+                  value={field.value ?? ""}
                 />
               )}
               rules={{ required: props.texts.passwordRequiredText }}
@@ -115,14 +163,14 @@ export const SignUpForm = (props) => {
               name="confirm_password"
               render={({ field }) => (
                 <HawaTextField
-                  fullWidth
+                  width="full"
                   type="password"
                   defaultValue={field.value ?? ""}
-                  value={field.value ?? ""}
                   label={props.texts.confirmPasswordLabel}
                   placeholder={props.texts.confirmPasswordPlaceholder}
                   helperText={errors.confirm_password?.message}
                   {...field}
+                  value={field.value ?? ""}
                 />
               )}
               rules={{ required: props.texts.passwordRequiredText }}
@@ -133,14 +181,14 @@ export const SignUpForm = (props) => {
                 name="password"
                 render={({ field }) => (
                   <HawaTextField
-                    fullWidth
+                    width="full"
                     type="text"
                     defaultValue={field.value ?? ""}
-                    value={field.value ?? ""}
                     label={"Ref Code"}
                     placeholder={props.texts.passwordPlaceholder}
                     helperText={errors.password?.message}
                     {...field}
+                    value={field.value ?? ""}
                   />
                 )}
               />
@@ -160,11 +208,13 @@ export const SignUpForm = (props) => {
                       options={[
                         { value: "friend", label: "From a friend" },
                         { value: "ad", label: "Advertisement" },
-                        { value: "other", label: "Other" }
+                        { value: "other", label: "Other" },
                       ]}
-                      onChange={(e, o) => console.log("chooo", e)}
-                      onInputChange={(e, o) => console.log("changing", e)}
+                      onInputChange={(e: any, o: any) =>
+                        console.log("changing", e)
+                      }
                       {...field}
+                      onChange={(e: any, o: any) => console.log("chooo", e)}
                     />
                   )}
                 />
@@ -178,6 +228,7 @@ export const SignUpForm = (props) => {
                   render={({ field }) => (
                     <HawaCheckbox
                       helperText={errors.terms_accepted?.message}
+                      {...field}
                       onChange={() => console.log("te")}
                       label={
                         <span>
@@ -187,7 +238,6 @@ export const SignUpForm = (props) => {
                           </a>
                         </span>
                       }
-                      {...field}
                     />
                   )}
                   rules={{ required: props.texts.termsRequiredText }}
@@ -208,14 +258,16 @@ export const SignUpForm = (props) => {
                 />
               </div>
             )}
-            <HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
+            <HawaButton color="primary" width="full" type="submit">
+              {props.texts.signUpText}
+            </HawaButton>
           </form>
         </FormProvider>
-        <div className="font-semibold p-3 text-center text-sm">
+        <div className="p-3 text-center text-sm font-semibold">
           {props.texts.existingUserText}{" "}
           <span
             onClick={props.handleRouteToSignIn}
-            className="text-blue-600 cursor-pointer"
+            className="cursor-pointer text-blue-600"
           >
             {props.texts.signInText}
           </span>
@@ -247,51 +299,5 @@ export const SignUpForm = (props) => {
         </div>
       ) : null}
     </HawaContainer>
-  );
-};
-
-SignUpForm.propTypes = {
-  /**
-   *  An object of all the texts in the blocks
-   */
-  texts: PropTypes.shape({
-    fullNameLabel: PropTypes.string,
-    fullNamePlaceholder: PropTypes.string,
-    fullNameRequiredText: PropTypes.string,
-    emailLabel: PropTypes.string,
-    emailPlaceholder: PropTypes.string,
-    emailRequiredText: PropTypes.string,
-    emailInvalidText: PropTypes.string,
-    usernameLabel: PropTypes.string,
-    usernamePlaceholder: PropTypes.string,
-    usernameRequired: PropTypes.string,
-    passwordLabel: PropTypes.string,
-    passwordPlaceholder: PropTypes.string,
-    passwordRequiredText: PropTypes.string,
-    passwordTooShortText: PropTypes.string,
-    confirmPasswordLabel: PropTypes.string,
-    confirmPasswordPlaceholder: PropTypes.string,
-    forgotPasswordText: PropTypes.string,
-    termsText: PropTypes.string,
-    iAcceptText: PropTypes.string,
-    termsRequiredText: PropTypes.string,
-    newUserText: PropTypes.string,
-    signUpText: PropTypes.string,
-    signInText: PropTypes.string,
-    existingUserText: PropTypes.string,
-    googleButtonLabel: PropTypes.string,
-    githubButtonLabel: PropTypes.string,
-    twitterButtonLabel: PropTypes.string
-  }),
-  viaGoogle: PropTypes.bool,
-  viaGithub: PropTypes.bool,
-  viaTwitter: PropTypes.bool,
-  showNewsletterOption: PropTypes.bool,
-  showRefCode: PropTypes.bool,
-  showTermsOption: PropTypes.bool,
-  handleSignUp: PropTypes.func,
-  handleRouteToSignIn: PropTypes.func,
-  handleGoogleSignUp: PropTypes.func,
-  handleGithubSignUp: PropTypes.func,
-  handleTwitterSignUp: PropTypes.func
-};
+  )
+}

package/src/blocks/AuthForms/index.ts

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

package/src/blocks/Misc/NotFound.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { HawaButton } from "../../elements"
+import { HawaContainer } from "../../layout"
+
+type NotFoundTypes = {}
+
+export const NotFound: React.FunctionComponent<NotFoundTypes> = (props) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      <div className="text-6xl font-bold">404</div>
+      <div className="m-2 text-xl font-bold">Page Not Found</div>
+      <HawaContainer>
+        <div className="text-center">
+          If you're lost please contact us help@sikka.io{" "}
+        </div>
+        <HawaButton color="primary" width="full">
+          Home
+        </HawaButton>
+      </HawaContainer>
+    </div>
+  )
+}

package/src/blocks/Misc/index.ts

@@ -0,0 +1 @@
+export * from "./NotFound";