@stackshift-ui/signin-signup 6.0.3 → 6.0.4

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/signin-signup",
   "description": "",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -33,20 +34,20 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
+    "@stackshift-ui/card": "6.0.3",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/button": "6.0.2",
-    "@stackshift-ui/card": "6.0.2",
-    "@stackshift-ui/heading": "6.0.2",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/input": "6.0.3",
-    "@stackshift-ui/text": "6.0.2",
-    "@stackshift-ui/link": "6.0.2",
-    "@stackshift-ui/image": "6.0.2",
-    "@stackshift-ui/form": "6.0.2",
-    "@stackshift-ui/form-field": "6.0.3",
-    "@stackshift-ui/container": "6.0.2",
-    "@stackshift-ui/section": "6.0.2",
-    "@stackshift-ui/flex": "6.0.2"
+    "@stackshift-ui/heading": "6.0.3",
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/button": "6.0.3",
+    "@stackshift-ui/input": "6.0.4",
+    "@stackshift-ui/text": "6.0.3",
+    "@stackshift-ui/link": "6.0.3",
+    "@stackshift-ui/image": "6.0.3",
+    "@stackshift-ui/form": "6.0.3",
+    "@stackshift-ui/form-field": "6.0.4",
+    "@stackshift-ui/section": "6.0.3",
+    "@stackshift-ui/flex": "6.0.3",
+    "@stackshift-ui/container": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/helper/index.ts

@@ -0,0 +1,28 @@
+import { Logo } from "../types";
+
+// Logo link
+export const logoLink = (logo: Logo) => {
+  if (logo?.internalLink && logo?.type === "linkInternal") {
+    if (logo?.internalLink?.toLowerCase()?.includes("home")) {
+      return "/";
+    }
+    return `/${logo.internalLink}`;
+  } else if (logo?.externalLink && logo?.type === "linkExternal") {
+    return logo?.externalLink ?? "/";
+  } else {
+    return "/";
+  }
+};
+
+// WebriQ form redirect thank you page on successful submission
+export const thankYouPageLink = (link: any) => {
+  if (!link) {
+    return "/thank-you";
+  } else {
+    if (link?.linkType === "linkInternal") {
+      return `/${link?.internalLink}`;
+    } else {
+      return link?.externalLink;
+    }
+  }
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+"use client";
+
+// component exports
+export * from "./signin-signup";
+export * from "./signin_signup_a";
+export * from "./signin_signup_b";

package/src/signin-signup.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { SigninSignup } from "./signin-signup";
+
+describe.concurrent("signin-signup", () => {
+  afterEach(cleanup);
+
+  test.skip("Dummy test - test if renders without errors", ({ expect }) => {
+    const clx = "my-class";
+    render(<SigninSignup />);
+    expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
+  });
+});

package/src/signin-signup.tsx

@@ -0,0 +1,42 @@
+import React, { lazy } from "react";
+import { SectionsProps, Logo, LabeledRoute, LabeledRouteWithKey, Form } from "./types";
+
+const Variants = {
+  variant_a: lazy(() => import("./signin_signup_a")),
+  variant_b: lazy(() => import("./signin_signup_b")),
+};
+
+export interface SignUpFormProps {
+  logo?: Logo;
+  title?: string;
+  subtitle?: string;
+  text?: string;
+  firstButton?: LabeledRoute;
+  secondButton?: LabeledRoute;
+  formLinks?: LabeledRouteWithKey[];
+  signInLink?: LabeledRoute;
+  form?: Form;
+}
+
+const displayName = "SigninSignup";
+
+export const SigninSignup: React.FC<SectionsProps> = ({ data }) => {
+  const variant = data?.variant;
+  const Variant = variant && Variants?.[variant as keyof typeof Variants];
+
+  const props = {
+    logo: data?.variants?.logo ?? undefined,
+    title: data?.variants?.title ?? undefined,
+    subtitle: data?.variants?.subtitle ?? undefined,
+    text: data?.variants?.plainText ?? undefined,
+    firstButton: data?.variants?.primaryButton ?? undefined,
+    secondButton: data?.variants?.secondaryButton ?? undefined,
+    formLinks: data?.variants?.formLinks ?? undefined,
+    signInLink: data?.variants?.signinLink ?? undefined,
+    form: data?.variants?.form ?? undefined,
+  };
+
+  return Variant ? <Variant {...props} /> : null;
+};
+
+SigninSignup.displayName = displayName;

package/src/signin_signup_a.tsx

@@ -0,0 +1,287 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Form } from "@stackshift-ui/form";
+import { FormField } from "@stackshift-ui/form-field";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Input } from "@stackshift-ui/input";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+
+import { SignUpFormProps } from ".";
+import { logoLink, thankYouPageLink } from "./helper";
+import { LabeledRoute, LabeledRouteWithKey, Logo, Form as iForm } from "./types";
+
+export default function SigninSignup_A({ logo, form, formLinks, signInLink }: SignUpFormProps) {
+  return (
+    <Section className="py-10 bg-gray-50 lg:py-20">
+      <Container maxWidth={576}>
+        <LogoSection logo={logo} />
+        <Container className="mb-6 text-center lg:mb-10">
+          <SubtitleAndHeadingText form={form} />
+          <SignupForm
+            form={form}
+            signInLink={signInLink}
+            thankYouPage={thankYouPageLink(form?.thankYouPage)}
+          />
+        </Container>
+        <FormLinks formLinks={formLinks} />
+      </Container>
+    </Section>
+  );
+}
+
+function LogoSection({ logo }: { logo?: Logo }) {
+  if (!logo) return null;
+
+  return (
+    <div className="mb-10">
+      <Link
+        aria-label={`Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`}
+        className="flex justify-center mx-auto text-3xl font-bold leading-none"
+        href={logoLink(logo)}
+        target={logo?.linkTarget}
+        rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
+        <Image
+          src={logo?.image}
+          alt={logo?.alt ?? "signup-logo"}
+          width={100}
+          height={100}
+          className="flex justify-center mx-auto text-3xl font-bold leading-none"
+        />
+      </Link>
+    </div>
+  );
+}
+
+function SubtitleAndHeadingText({ form }: { form?: iForm }) {
+  return (
+    <div className="mb-6">
+      {form?.subtitle ? <Text muted>{form?.subtitle}</Text> : null}
+      {form?.name ? <Heading className="text-2xl lg:text-2xl">{form?.name}</Heading> : null}
+    </div>
+  );
+}
+
+function SignupForm({
+  form,
+  signInLink,
+  thankYouPage,
+}: {
+  form?: iForm;
+  signInLink?: LabeledRoute;
+  thankYouPage?: LabeledRoute;
+}) {
+  if (!form?.fields) return null;
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  return (
+    <Form
+      id={form?.id ?? undefined}
+      name="SignUp-VariantA-Form"
+      className="form-signup"
+      thankyouPage={thankYouPage}>
+      <FormFields form={form} showPassword={showPassword} setShowPassword={setShowPassword} />
+      <div>
+        <div className="webriq-recaptcha" />
+      </div>
+      <div className="text-center">
+        {form?.buttonLabel && (
+          <Button
+            as="button"
+            variant="custom"
+            ariaLabel={form?.buttonLabel ?? "Sign Up form submit button"}
+            className="w-full py-4 text-sm font-bold tex-gray-50"
+            type="submit">
+            {form?.buttonLabel}
+          </Button>
+        )}
+      </div>
+      {signInLink && <SignInLink signInLink={signInLink} />}
+    </Form>
+  );
+}
+
+function FormFields({
+  form,
+  showPassword,
+  setShowPassword,
+}: {
+  form?: iForm;
+  showPassword: boolean;
+  setShowPassword: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  return (
+    <>
+      <Flex wrap className="-mx-2">
+        {form?.fields?.slice(0, 2).map((formFields, index) => (
+          <div className="w-full px-2 mb-3 lg:w-1/2" key={index}>
+            {formFields.type === "inputText" ? (
+              <Input
+                textSize="sm"
+                variant="primary"
+                noLabel
+                placeholder={formFields?.placeholder}
+                required={formFields?.isRequired}
+                className="w-full py-4 text-xs bg-white"
+                name={formFields?.name}
+                ariaLabel={formFields?.label}
+                {...formFields}
+                type="text"
+              />
+            ) : (
+              <FormField textSize="sm" noLabel name={formFields?.name ?? ""} {...formFields} />
+            )}
+          </div>
+        ))}
+      </Flex>
+      {form?.fields?.slice(2).map((formFields, index) => (
+        <div key={index} className="my-3">
+          {formFields.type === "inputPassword" ? (
+            <PasswordField
+              formFields={formFields}
+              showPassword={showPassword}
+              setShowPassword={setShowPassword}
+            />
+          ) : (
+            <FormField
+              className="py-4"
+              textSize="sm"
+              noLabel
+              variant="primary"
+              placeholder={formFields?.placeholder}
+              required={formFields?.isRequired}
+              name={formFields?.name ?? ""}
+              items={formFields?.items}
+              type={formFields?.type}
+              {...formFields}
+            />
+          )}
+        </div>
+      ))}
+    </>
+  );
+}
+
+function SignInLink({ signInLink }: { signInLink?: LabeledRoute }) {
+  if (!signInLink?.label) return null;
+
+  return (
+    <div className="w-full text-center mt-3">
+      <span className="text-xs text-gray-500">Already have an account? </span>
+      <Button
+        as="link"
+        variant="link"
+        link={signInLink}
+        className="text-xs text-primary cursor-pointer hover:underline"
+        ariaLabel={signInLink?.label}>
+        {signInLink?.label}
+      </Button>
+    </div>
+  );
+}
+
+function PasswordField({
+  formFields,
+  showPassword,
+  setShowPassword,
+}: {
+  formFields?: any;
+  showPassword: boolean;
+  setShowPassword: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  return (
+    <Flex className="relative">
+      <Input
+        className="py-4"
+        textSize="sm"
+        noLabel
+        aria-label={formFields?.placeholder ?? formFields?.name}
+        variant="primary"
+        type={showPassword ? "text" : "password"}
+        placeholder={formFields?.placeholder}
+        name={formFields?.name}
+        required={formFields?.isRequired}
+      />
+      <Button
+        as="button"
+        variant="unstyled"
+        ariaLabel={showPassword ? "Show password" : "Hide password"}
+        className="absolute top-0 right-0 h-full p-2"
+        type="button"
+        onClick={() => setShowPassword(!showPassword)}>
+        <PasswordIcon showPassword={showPassword} />
+      </Button>
+    </Flex>
+  );
+}
+
+function FormLinks({ formLinks }: { formLinks?: LabeledRouteWithKey[] }) {
+  if (!formLinks) return null;
+
+  return (
+    <p className="mt-10 text-xs text-center text-gray-700">
+      {formLinks?.map((link: any, index: number, { length }: any) => (
+        <span key={index}>
+          <Button
+            as="link"
+            variant="link"
+            link={link}
+            className="text-xs text-primary cursor-pointer hover:underline"
+            ariaLabel={link?.label}>
+            {link?.label}
+          </Button>
+          {index === length - 1 ? null : index === length - 2 ? (
+            <span>&nbsp;and&nbsp;</span>
+          ) : (
+            <span>&nbsp;,&nbsp;</span>
+          )}
+        </span>
+      ))}
+    </p>
+  );
+}
+
+function PasswordIcon({ showPassword }: { showPassword: boolean }) {
+  return (
+    <>
+      {showPassword ? (
+        <svg
+          className="w-5 h-5 my-auto ml-4 text-gray-500"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 16 16">
+          <g fill="currentColor">
+            <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755c-.165.165-.337.328-.517.486l.708.709z" />
+            <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />
+            <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12l.708-.708l12 12l-.708.708z" />
+          </g>
+        </svg>
+      ) : (
+        <svg
+          className="w-5 h-5 my-auto ml-4 text-gray-500"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 16 16">
+          <g fill="currentColor">
+            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
+            <path d="M8 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0z" />
+          </g>
+        </svg>
+      )}
+    </>
+  );
+}
+
+export { SigninSignup_A };

package/src/signin_signup_b.tsx

@@ -0,0 +1,257 @@
+import { Button } from "@stackshift-ui/button";
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Form } from "@stackshift-ui/form";
+import { FormField } from "@stackshift-ui/form-field";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Input } from "@stackshift-ui/input";
+import { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React, { useState } from "react";
+import { SignUpFormProps } from ".";
+import { logoLink, thankYouPageLink } from "./helper";
+import { LabeledRoute, Logo, Form as iForm } from "./types";
+
+export default function SigninSignup_B({ logo, form, formLinks, signInLink }: SignUpFormProps) {
+  return (
+    <Section className="py-10 bg-primary lg:py-20">
+      <Container maxWidth={1280}>
+        <Container maxWidth={576}>
+          <LogoSection logo={logo} />
+          <Card className="p-6 mb-6 bg-white lg:mb-10 lg:p-12">
+            <SubtitleAndHeadingText form={form} />
+            <SignupForm form={form} signInLink={signInLink} />
+          </Card>
+          <FormLinks formLinks={formLinks} />
+        </Container>
+      </Container>
+    </Section>
+  );
+}
+
+function LogoSection({ logo }: { logo?: Logo }) {
+  if (!logo) return null;
+
+  return (
+    <div className="mb-10">
+      <Link
+        aria-label={`Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`}
+        className="flex justify-center mx-auto text-3xl font-bold leading-none"
+        href={logoLink(logo)}
+        target={logo?.linkTarget}
+        rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
+        <Image
+          src={logo?.image}
+          alt={logo?.alt ?? "signup-logo"}
+          width={100}
+          height={100}
+          className="flex justify-center text-3xl font-bold leading-none text-white"
+        />
+      </Link>
+    </div>
+  );
+}
+
+function SubtitleAndHeadingText({ form }: { form?: iForm }) {
+  return (
+    <div className="mb-6">
+      <Text muted>{form?.subtitle}</Text>
+      <Heading className="text-2xl lg:text-2xl">{form?.name}</Heading>
+    </div>
+  );
+}
+
+function SignupForm({ form, signInLink }: { form?: iForm; signInLink?: LabeledRoute }) {
+  if (!form?.fields) return null;
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <Form
+      id={form?.id ?? undefined}
+      name="SignUp-VariantB-Form"
+      className="form-signup"
+      thankyouPage={thankYouPageLink(form?.thankYouPage)}>
+      <FormFields form={form} showPassword={showPassword} setShowPassword={setShowPassword} />
+      <div>
+        <div className="webriq-recaptcha" />
+      </div>
+      <div className="text-center">
+        <FormButtonLabel form={form} />
+        <SigninLink signInLink={signInLink} />
+      </div>
+    </Form>
+  );
+}
+
+function FormFields({
+  form,
+  showPassword,
+  setShowPassword,
+}: {
+  form?: iForm;
+  showPassword: boolean;
+  setShowPassword: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  return (
+    <React.Fragment>
+      <Flex className="flex-col lg:flex-row gap-3">
+        {form?.fields?.slice(0, 2)?.map((formFields, index) => (
+          <div className="w-full" key={index}>
+            <FormField
+              noLabel
+              variant="secondary"
+              placeholder={formFields?.placeholder}
+              required={formFields?.isRequired}
+              name={formFields?.name ?? ""}
+              items={formFields?.items}
+              type={formFields?.type}
+              {...formFields}
+            />
+          </div>
+        ))}
+      </Flex>
+
+      {form?.fields?.slice(2)?.map((formFields, index) => (
+        <div key={index} className="my-3">
+          {formFields?.type === "inputPassword" ? (
+            <div className="flex">
+              <Input
+                noLabel
+                ariaLabel={formFields?.placeholder ?? formFields?.name}
+                variant="secondary"
+                type={showPassword ? "text" : "password"}
+                placeholder={formFields?.placeholder}
+                name={formFields?.name}
+                required={formFields?.isRequired}
+              />
+              {/* SVG icon on the right of the password input field */}
+              <Button
+                variant="unstyled"
+                as="button"
+                ariaLabel={showPassword ? "Show password" : "Hide password"}
+                className="focus:outline-none mr-4"
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}>
+                <PasswordIcon showPassword={showPassword} />
+              </Button>
+            </div>
+          ) : (
+            <FormField
+              noLabel
+              variant="secondary"
+              name={formFields?.name ?? ""}
+              placeholder={formFields?.placeholder}
+              required={formFields?.isRequired}
+              items={formFields?.items}
+              type={formFields?.type}
+              {...formFields}
+            />
+          )}
+        </div>
+      ))}
+    </React.Fragment>
+  );
+}
+
+function FormButtonLabel({ form }: { form?: iForm }) {
+  if (!form?.buttonLabel) return null;
+
+  return (
+    <Button
+      as="button"
+      className="w-full py-4 mb-3"
+      ariaLabel={form?.buttonLabel ?? "Sign Up form submit button"}
+      variant="custom"
+      type="submit">
+      {form?.buttonLabel}
+    </Button>
+  );
+}
+
+function SigninLink({ signInLink }: { signInLink?: LabeledRoute }) {
+  if (!signInLink?.label) return null;
+
+  return (
+    <span className="text-xs text-gray-900">
+      <span>Already have an account?</span>{" "}
+      <Button
+        as="link"
+        variant="link"
+        link={signInLink}
+        className="text-xs text-primary hover:underline"
+        ariaLabel={signInLink?.label}>
+        {signInLink?.label}
+      </Button>
+    </span>
+  );
+}
+
+function FormLinks({ formLinks }: { formLinks?: LabeledRoute[] }) {
+  if (!formLinks) return null;
+
+  return (
+    <p className="text-xs text-center text-secondary-foreground">
+      {formLinks?.map((link, index, { length }) => (
+        <span key={index}>
+          <Button
+            as="link"
+            variant="link"
+            link={link}
+            className="text-xs underline text-secondary-foreground hover:text-gray-50"
+            ariaLabel={link?.label}>
+            {link?.label}
+          </Button>
+          {index === length - 1 ? null : index === length - 2 ? (
+            <span>&nbsp;and&nbsp;</span>
+          ) : (
+            <span>&nbsp;,&nbsp;</span>
+          )}
+        </span>
+      ))}
+    </p>
+  );
+}
+
+function PasswordIcon({ showPassword }: { showPassword: boolean }) {
+  return (
+    <React.Fragment>
+      {showPassword ? (
+        <svg
+          className="w-5 h-5 my-auto text-gray-500"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 16 16">
+          <g fill="currentColor">
+            <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755c-.165.165-.337.328-.517.486l.708.709z" />
+            <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />
+            <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12l.708-.708l12 12l-.708.708z" />
+          </g>
+        </svg>
+      ) : (
+        <svg
+          className="w-5 h-5 my-auto ml-4 text-gray-500"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          role="img"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 16 16">
+          <g fill="currentColor">
+            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
+            <path d="M8 5.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0z" />
+          </g>
+        </svg>
+      )}
+    </React.Fragment>
+  );
+}
+
+export { SigninSignup_B };

package/src/types.ts

@@ -0,0 +1,412 @@
+export type StyleVariants<T extends string> = Record<T, string>;
+
+export type Socials = "facebook" | "instagram" | "youtube" | "linkedin" | "twitter";
+export interface MainImage {
+  image: string;
+  alt?: string;
+}
+
+export interface LabeledRoute extends ConditionalLink {
+  ariaLabel?: string;
+  label?: string;
+  linkTarget?: string;
+  linkType?: string;
+  _type?: string;
+  linkInternal?: any;
+}
+export interface ConditionalLink {
+  type?: string;
+  internalLink?: string | null;
+  externalLink?: string | null;
+}
+
+export interface StatItems {
+  label?: string;
+  mainImage?: MainImage;
+  value?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface Logo extends ConditionalLink {
+  alt?: string;
+  linkTarget?: string;
+  image?: string;
+}
+
+export interface Images {
+  image?: string;
+  _key?: string;
+  _type?: string;
+  alt?: string;
+}
+
+export interface ContactDetails {
+  addressInfo?: string;
+  contactInfo?: string;
+  emailInfo?: string;
+  _key?: string;
+}
+
+export interface SocialLink {
+  socialMedia?: string | null;
+  socialMediaLink?: string | null;
+  _key?: string | null;
+  _type?: string | null;
+  socialMediaIcon?: {
+    alt?: string;
+    image?: string;
+  } | null;
+  socialMediaPlatform?: string | null;
+}
+
+export interface LabeledRouteWithKey extends LabeledRoute {
+  _key?: string;
+}
+
+export interface ArrayOfImageTitleAndText {
+  mainImage?: {
+    alt?: string;
+    image?: string;
+  };
+  plainText?: string;
+  title?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface FeaturedItem {
+  description?: string;
+  mainImage?: MainImage;
+  title?: string;
+  subtitle?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface ArrayOfTitleAndText {
+  _key?: string;
+  plainText?: string;
+  title?: string;
+}
+
+export interface BlogPost extends SanityBody {
+  authors?: Author[] | null;
+  body?: any;
+  categories?: Category[] | null;
+  excerpt?: string | null;
+  link?: string | null;
+  mainImage?: string | null;
+  publishedAt?: string;
+  seo?: Seo | null;
+  slug?: SanitySlug | null;
+  title?: string;
+}
+
+export interface Seo {
+  _type?: string;
+  seoTitle?: string;
+  seoDescription?: string;
+  seoImage?: string;
+  seoKeywords?: string;
+  seoSynonyms?: string;
+}
+
+export interface SanitySlug {
+  current?: string;
+  _type?: "slug";
+}
+
+export interface SanityBody {
+  _createdAt?: string;
+  _id?: string;
+  _rev?: string;
+  _type?: string;
+  _updatedAt?: string;
+}
+
+export interface Author extends SanityBody {
+  link?: string | null;
+  bio?: string | null;
+  name?: string | null;
+  slug?: SanitySlug | null;
+  image?: string | null;
+  profile?: {
+    alt: string;
+    image: string;
+  } | null;
+}
+
+export interface Category extends SanityBody {
+  title?: string;
+}
+
+export interface Form {
+  id?: string | null;
+  buttonLabel?: string | null;
+  name?: string | null;
+  subtitle?: string | null;
+  fields?: FormFields[] | null;
+  thankYouPage?: ThankYouPage | null;
+}
+
+export interface FormFields {
+  name?: string;
+  placeholder?: string;
+  pricingType?: string;
+  type?: FormTypes;
+  _key?: string;
+  _type?: string;
+  isRequired?: boolean;
+  label?: string;
+  items?: string[];
+}
+
+export type FormTypes =
+  | "inputText"
+  | "inputEmail"
+  | "inputPassword"
+  | "inputNumber"
+  | "textarea"
+  | "inputFile"
+  | "inputRadio"
+  | "inputCheckbox"
+  | "inputSelect";
+
+export interface ThankYouPage {
+  externalLink?: string | null;
+  internalLink?: string | null;
+  linkInternal?: any;
+  linkTarget?: string;
+  linkType?: string;
+  type?: string;
+}
+
+//Used on different sections
+export interface SectionsProps {
+  template?: Template;
+  data?: Sections;
+  variant?: string | null | undefined;
+  schema?: Variants;
+}
+
+export interface Sections extends SanityBody {
+  label?: string;
+  variant?: string;
+  variants?: Variants;
+  _key?: string;
+}
+
+//*EDIT THIS SECTION WHEN CREATING/UPDATING SCHEMAS ON STUDIO */
+export interface Variants {
+  template?: Template;
+  multipleMenus?: any;
+  arrayOfTitleAndText?: ArrayOfTitleAndText[] | null;
+  logo?: Logo | null;
+  primaryButton?: LabeledRoute | null;
+  secondaryButton?: LabeledRoute | null;
+  routes?: LabeledRouteWithKey[] | null;
+  menu?: LabeledRouteWithKey[] | null;
+  plans?: Plans[] | null;
+  formLinks?: LabeledRouteWithKey[] | null;
+  portfolios?: Portfolios[] | null;
+  portfoliosWithCategories?: PortfoliosWithCategories[] | null;
+  length?: number;
+  signInLink?: LabeledRoute | null;
+  signinLink?: LabeledRoute | null;
+  tags?: string[] | null;
+  posts?: BlogPost[] | null;
+  blogsPerPage?: number | null;
+  form?: Form | null;
+  collections?: Collection | null;
+  products?: CollectionProduct | null;
+  allProducts?: Collection[];
+  subtitle?: string | null;
+  caption?: string | null;
+  title?: string | null;
+  plainText?: string | null;
+  contactDescription?: string | null;
+  officeInformation?: string | null;
+  contactEmail?: string | null;
+  contactNumber?: string | null;
+  socialLinks?: SocialLink[] | null;
+  block?: any;
+  heading?: string | null;
+  acceptButtonLabel?: string | null;
+  declineButtonLabel?: string | null;
+  faqsWithCategories?: FaqsWithCategory[] | null;
+  faqs?: AskedQuestion[] | null;
+  arrayOfImageTitleAndText?: ArrayOfImageTitleAndText[] | null;
+  description?: string | null;
+  featuredItems?: FeaturedItem[] | null;
+  images?: Images[] | null;
+  contactDetails?: ContactDetails[] | null;
+  copyright?: string | null;
+  mainImage?: MainImage | null;
+  youtubeLink?: string | null;
+  banner?: any;
+  stats?: StatItems[] | null;
+  teams?: Team[] | null;
+  testimonials?: Testimonial[] | null;
+  selectStripeAccount?: string;
+  annualBilling?: string;
+  monthlyBilling?: string;
+  productDetails?: ProductDetail[];
+  btnLabel?: string;
+  selectAccount?: string;
+  hashtags?: string[];
+  numberOfPosts?: number;
+  text?: string;
+  button?: LabeledRoute;
+  features?: string[];
+  config?: {
+    enableAnalytics: boolean;
+    cookiePolicy?: {
+      siteName: string;
+      cookiePolicyPage: Reference;
+    };
+    consentModalPosition?: string;
+  };
+  contactLink?: LabeledRoute;
+}
+
+export interface Template {
+  bg?: string;
+  color?: string;
+}
+
+export type Plans = {
+  _key?: string | null;
+  _type?: "planItems" | null;
+  checkoutButtonName?: string | null;
+  description?: string | null;
+  monthlyPrice?: string | null;
+  planType?: string | null;
+  yearlyPrice?: string | null;
+  planIncludes?: string[] | null;
+  primaryButton?: LabeledRoute | null;
+} & Record<string, string>;
+
+export interface Portfolios {
+  dateAdded?: string | null;
+  mainImage?: {
+    image?: string | null;
+    alt?: string | null;
+  } | null;
+  primaryButton?: LabeledRoute | null;
+  title?: string | null;
+  _key?: string | null;
+  _type?: string | null;
+}
+
+export interface PortfoliosWithCategories {
+  category?: string | null;
+  content?: Content[] | null;
+  primaryButton?: LabeledRoute | null;
+  _key?: string | null;
+  _type?: string | null;
+}
+
+export interface Content extends Portfolios {
+  description?: string | null;
+  subtitle?: string | null;
+}
+
+export interface Collection extends SanityBody {
+  collectionInfoVariant?: {
+    variant?: string;
+  } | null;
+  name?: string | null;
+  products?: CollectionProduct[] | null;
+  sections?: any; //todo
+  seo?: Seo | null;
+  slug?: SanitySlug | null;
+}
+
+export interface CollectionProduct extends SanityBody {
+  compareToPrice?: number | null;
+  description?: string | null;
+  ecwidProductId?: number | null;
+  name?: string | null;
+  price?: number | null;
+  productInfo?: ProductInfo | null;
+  productInfoVariant?: {
+    variant?: string;
+  } | null;
+  sections?: any; //todo
+  seo?: Seo | null;
+  slug?: SanitySlug | null;
+}
+
+//TODO, RECHECK PRODUCT INFO DATA FROM SANITY
+interface ProductInfo {
+  btnLabel?: string | null;
+  images?: ProductInfoImage[] | null;
+  productDetails?: ProductDetail[] | null;
+  socialLinks?: SocialLink[] | null;
+  subtitle?: string | null;
+}
+
+//TODO, RECHECK PRODUCT INFO DATA FROM SANITY
+export interface ProductDetail {
+  blockContent?: any;
+  contentType?: string;
+  tabName?: string;
+  _key?: string;
+  [key: string]: any;
+}
+interface ProductInfoImage {
+  alt?: string | null;
+  _key: string;
+  _type: string;
+  image?: string | null;
+}
+
+export interface FaqsWithCategory {
+  askedQuestions?: AskedQuestion[] | null;
+  category?: string | null;
+  _key?: string;
+  _type?: string;
+}
+
+export interface AskedQuestion {
+  answer?: string | null;
+  question?: string | null;
+  hidden?: boolean;
+  _key?: string;
+  _type?: string;
+}
+
+export interface Team {
+  jobTitle?: string;
+  mainImage?: MainImage;
+  name?: string;
+  plainText?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export interface Testimonial {
+  jobTitle?: string;
+  mainImage?: MainImage;
+  name?: string;
+  rating?: string;
+  testimony?: string;
+  _key?: string;
+  _type?: string;
+}
+
+export declare interface Reference {
+  _type: string;
+  _ref: string;
+  _key?: string;
+  _weak?: boolean;
+  _strengthenOnPublish?: {
+    type: string;
+    weak?: boolean;
+    template?: {
+      id: string;
+      params: Record<string, string | number | boolean>;
+    };
+  };
+}