@stackshift-ui/portfolio 6.0.3 → 6.0.4

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/portfolio",
   "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": {
@@ -28,20 +29,20 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.2",
-    "@stackshift-ui/typescript-config": "6.0.2"
+    "@stackshift-ui/typescript-config": "6.0.2",
+    "@stackshift-ui/eslint-config": "6.0.2"
   },
   "dependencies": {
     "classnames": "^2.5.1",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/button": "6.0.2",
-    "@stackshift-ui/text": "6.0.2",
-    "@stackshift-ui/heading": "6.0.2",
-    "@stackshift-ui/image": "6.0.2",
-    "@stackshift-ui/container": "6.0.2",
-    "@stackshift-ui/section": "6.0.2",
-    "@stackshift-ui/flex": "6.0.2"
+    "@stackshift-ui/text": "6.0.3",
+    "@stackshift-ui/image": "6.0.3",
+    "@stackshift-ui/section": "6.0.3",
+    "@stackshift-ui/container": "6.0.3",
+    "@stackshift-ui/flex": "6.0.3",
+    "@stackshift-ui/heading": "6.0.3",
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/button": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/helper/index.ts

@@ -0,0 +1,27 @@
+import React from "react";
+
+export const useMediaQuery = (width: string) => {
+  const [targetReached, setTargetReached] = React.useState(false);
+
+  const updateTarget = React.useCallback((e: any) => {
+    if (e.matches) {
+      setTargetReached(true);
+    } else {
+      setTargetReached(false);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const media = window.matchMedia(`(max-width: ${width}px)`);
+    media.addEventListener("change", updateTarget);
+
+    // Check on mount (callback is not called until a change occurs)
+    if (media.matches) {
+      setTargetReached(true);
+    }
+
+    return () => media.removeEventListener("change", updateTarget);
+  }, []);
+
+  return targetReached;
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+"use client";
+
+// component exports
+export * from "./portfolio";
+export * from "./portfolio_a";
+export * from "./portfolio_b";
+export * from "./portfolio_c";
+export * from "./portfolio_d";

package/src/portfolio.test.tsx

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

package/src/portfolio.tsx

@@ -0,0 +1,39 @@
+import React, { lazy } from "react";
+
+import { LabeledRoute, Portfolios, PortfoliosWithCategories, SectionsProps } from "./types";
+
+const Variants = {
+  variant_a: lazy(() => import("./portfolio_a")),
+  variant_b: lazy(() => import("./portfolio_b")),
+  variant_c: lazy(() => import("./portfolio_c")),
+  variant_d: lazy(() => import("./portfolio_d")),
+};
+
+export interface PortfolioProps {
+  caption?: string;
+  title?: string;
+  portfoliosWithCategory?: PortfoliosWithCategories[];
+  portfolios?: Portfolios[];
+  primaryButton?: LabeledRoute;
+  length?: number;
+}
+
+const displayName = "Portfolio";
+
+export const Portfolio: React.FC<SectionsProps> = ({ data }) => {
+  const variant = data?.variant;
+  const Variant = variant && Variants?.[variant as keyof typeof Variants];
+
+  const props = {
+    caption: data?.variants?.subtitle ?? undefined,
+    title: data?.variants?.title ?? undefined,
+    portfoliosWithCategory: data?.variants?.portfoliosWithCategories ?? undefined,
+    portfolios: data?.variants?.portfolios ?? undefined,
+    primaryButton: data?.variants?.primaryButton ?? undefined,
+    length: data?.variants?.length,
+  };
+
+  return Variant ? <Variant {...props} /> : null;
+};
+
+Portfolio.displayName = displayName;

package/src/portfolio_a.tsx

@@ -0,0 +1,146 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+
+import { PortfolioProps } from ".";
+import { Content, LabeledRoute, PortfoliosWithCategories } from "./types";
+
+export default function Portfolio_A({
+  caption,
+  title,
+  portfoliosWithCategory,
+  primaryButton,
+  length = 8,
+}: PortfolioProps): React.JSX.Element {
+  const portfolioLength = length; //set initial number of portfolios to display for this variant
+  const [activeTab, setActiveTab] = React.useState(portfoliosWithCategory?.[0]?.category); //set the first index category as initial value
+
+  //creates new array of items filtered by active tab
+  const portfoliosPerCategory = portfoliosWithCategory?.find(data => data?.category === activeTab);
+
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Container maxWidth={512} className="mb-8 text-center md:mb-16">
+          <CaptionAndTitleText caption={caption} title={title} />
+          <PortfolioCategories
+            categories={portfoliosWithCategory}
+            activeTab={activeTab}
+            onClickFn={setActiveTab}
+          />
+        </Container>
+        <PortfolioContent
+          portfolios={portfoliosPerCategory?.content}
+          portfolioLength={portfolioLength}
+        />
+        <PrimaryButton button={primaryButton} />
+      </Container>
+    </Section>
+  );
+}
+
+function CaptionAndTitleText({
+  caption,
+  title,
+}: {
+  caption?: string | null;
+  title?: string | null;
+}) {
+  if (!caption || !title) return null;
+
+  return (
+    <React.Fragment>
+      <Text weight="semibold">{caption}</Text>
+      <Heading className="mb-6" fontSize="2xl">
+        {title}
+      </Heading>
+    </React.Fragment>
+  );
+}
+
+function PrimaryButton({ button }: { button?: LabeledRoute | null }) {
+  if (!button?.label) return null;
+
+  return (
+    <div className="text-center">
+      <Button as="link" ariaLabel={button?.label} link={button}>
+        {button?.label}
+      </Button>
+    </div>
+  );
+}
+
+function PortfolioCategories({
+  categories,
+  activeTab,
+  onClickFn,
+}: {
+  categories?: PortfoliosWithCategories[] | null;
+  activeTab?: string | null;
+  onClickFn?: React.Dispatch<React.SetStateAction<string | null | undefined>>;
+}) {
+  if (!categories || categories?.length === 0) return null;
+
+  return (
+    <Flex className="inline-flex py-1 text-sm bg-white rounded" wrap>
+      {categories?.map((content, index) => (
+        <Button
+          variant="tab"
+          as="button"
+          ariaLabel={content?.category ?? `Category button ${index + 1}`}
+          key={content?._key}
+          isActive={activeTab === content?.category}
+          onClick={() => onClickFn?.(content?.category)}>
+          {content?.category}
+        </Button>
+      ))}
+    </Flex>
+  );
+}
+
+function PortfolioContent({
+  portfolios,
+  portfolioLength,
+}: {
+  portfolios?: Content[] | null;
+  portfolioLength?: number;
+}) {
+  if (!portfolios || portfolios?.length === 0) return null;
+
+  return (
+    <Flex wrap className="mb-8">
+      {portfolios?.slice(0, portfolioLength)?.map((content, index: number) => (
+        <Flex className="w-full space-x-5 px-4 mb-8 sm:w-1/2 lg:w-1/4" key={content?._key}>
+          <div className="relative mx-auto h-[256px] w-[332px] overflow-hidden rounded-global">
+            {content?.mainImage?.image && (
+              <Image
+                className="object-cover w-full h-full"
+                src={content?.mainImage?.image}
+                alt={content?.mainImage?.alt ?? `portfolio-image-${index}`}
+              />
+            )}
+            <div className="absolute inset-0 z-10 flex items-center justify-center duration-300 bg-slate-900 rounded-lg opacity-0 hover:opacity-75">
+              {content?.primaryButton?.label && (
+                <Button
+                  as="link"
+                  variant="outline"
+                  ariaLabel={content?.primaryButton?.label}
+                  link={content?.primaryButton}
+                  className="bg-transparent border-secondary outline text-white hover:bg-secondary/20 hover:border-secondary/20 inline-block rounded-l-xl rounded-t-xl font-bold transition duration-200 px-3 py-4">
+                  {content?.primaryButton?.label}
+                </Button>
+              )}
+            </div>
+          </div>
+        </Flex>
+      ))}
+    </Flex>
+  );
+}
+
+export { Portfolio_A };

package/src/portfolio_b.tsx

@@ -0,0 +1,127 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+
+import { PortfolioProps } from ".";
+import { Content } from "./types";
+
+export default function Portfolio_B({
+  caption,
+  title,
+  portfolios,
+  primaryButton,
+  length = 6,
+}: PortfolioProps): React.JSX.Element {
+  const portfolioLength = length; //set initial number of portfolios to display for this variant
+
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex wrap align="center" justify="center" className="mb-16 md:justify-between">
+          <CaptionAndTitleText caption={caption} title={title} />
+          <div className="hidden mt-5 text-right md:mt-0 lg:mt-0 lg:block xl:mt-0">
+            {primaryButton?.label && (
+              <Button as="link" ariaLabel={primaryButton?.label} link={primaryButton}>
+                {primaryButton?.label}
+              </Button>
+            )}
+          </div>
+        </Flex>
+        <PortfolioContent portfolios={portfolios} portfolioLength={portfolioLength} />
+        <div className="block mt-5 text-center md:mt-0 lg:mt-0 lg:hidden xl:mt-0">
+          {primaryButton?.label && (
+            <Button as="link" ariaLabel={primaryButton?.label} link={primaryButton}>
+              {primaryButton?.label}
+            </Button>
+          )}
+        </div>
+      </Container>
+    </Section>
+  );
+}
+
+function CaptionAndTitleText({
+  caption,
+  title,
+}: {
+  caption?: string | null;
+  title?: string | null;
+}) {
+  if (!caption || !title) return null;
+
+  return (
+    <div className="text-center lg:text-left">
+      <Text weight="semibold">{caption}</Text>
+      <Heading className="mb-6" fontSize="2xl">
+        {title}
+      </Heading>
+    </div>
+  );
+}
+
+function ProjectItem({ content }: { content: Content }) {
+  return (
+    <div className="w-full px-4 mb-4 md:w-1/2 lg:w-1/3">
+      <div className="relative mx-auto overflow-hidden rounded-global md:mb-5">
+        {content?.mainImage?.image && (
+          <Image
+            className="object-cover w-full h-80"
+            src={content?.mainImage?.image}
+            width={480}
+            height={320}
+            alt={content?.mainImage?.alt ?? `portfolio-image`}
+          />
+        )}
+
+        <Flex
+          direction="col"
+          align="start"
+          className="absolute inset-0 z-10 items-start p-6 duration-300 bg-slate-900 rounded opacity-0 hover:opacity-75">
+          <Text className="text-secondary-foreground">{content?.dateAdded}</Text>
+          {content?.title && (
+            <Text weight="bold" className="mb-auto text-white md:text-xl lg:text-2xl">
+              {content?.title?.length > 80
+                ? `${content?.title?.substring(0, 80)}...`
+                : content?.title}
+            </Text>
+          )}
+          {content?.primaryButton?.label && (
+            <Button
+              as="link"
+              variant="outline"
+              ariaLabel={content?.primaryButton?.label}
+              link={content?.primaryButton}
+              className="bg-transparent border-secondary outline text-white hover:bg-secondary/20 hover:border-secondary/20 inline-block rounded-l-xl rounded-t-xl font-bold transition duration-200 px-3 py-4">
+              {content?.primaryButton?.label}
+            </Button>
+          )}
+        </Flex>
+      </div>
+    </div>
+  );
+}
+
+function PortfolioContent({
+  portfolios,
+  portfolioLength,
+}: {
+  portfolios?: Content[] | null;
+  portfolioLength?: number;
+}) {
+  if (!portfolios || portfolios?.length === 0) return null;
+
+  return (
+    <Flex wrap className="mb-4 ">
+      {portfolios
+        ?.slice(0, portfolioLength)
+        .map(content => <ProjectItem content={content} key={content._key} />)}
+    </Flex>
+  );
+}
+
+export { Portfolio_B };

package/src/portfolio_c.tsx

@@ -0,0 +1,124 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+
+import { PortfolioProps } from ".";
+import { Content } from "./types";
+
+export default function Portfolio_C({
+  caption,
+  title,
+  portfolios,
+  primaryButton,
+  length = 6,
+}: PortfolioProps) {
+  const portfolioLength = length; //set initial number of portfolios to display for this variant
+
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex wrap align="center" justify="center" className="mb-16 md:justify-between">
+          <CaptionAndTitleText caption={caption} title={title} />
+          <div className="hidden mt-5 text-right md:mt-0 lg:mt-0 lg:block xl:mt-0">
+            {primaryButton?.label && (
+              <Button as="link" ariaLabel={primaryButton?.label} link={primaryButton}>
+                {primaryButton?.label}
+              </Button>
+            )}
+          </div>
+        </Flex>
+        <PortfolioContent portfolios={portfolios} portfolioLength={portfolioLength} />
+        <div className="block mt-5 text-center md:mt-0 lg:mt-0 lg:hidden xl:mt-0">
+          {primaryButton?.label && (
+            <Button as="link" ariaLabel={primaryButton?.label} link={primaryButton}>
+              {primaryButton?.label}
+            </Button>
+          )}
+        </div>
+      </Container>
+    </Section>
+  );
+}
+
+function CaptionAndTitleText({
+  caption,
+  title,
+}: {
+  caption?: string | null;
+  title?: string | null;
+}) {
+  if (!caption || !title) return null;
+
+  return (
+    <div className="text-center lg:text-left">
+      <Text weight="semibold">{caption}</Text>
+      <Heading className="mb-6" fontSize="2xl">
+        {title}
+      </Heading>
+    </div>
+  );
+}
+
+function ProjectItem({ content }: { content: Content }) {
+  return (
+    <div className="relative w-full px-4 mb-8 md:w-1/2 lg:w-1/3">
+      {content?.mainImage?.image && (
+        <div
+          className="h-full overflow-hidden bg-white rounded-global"
+          style={{ maxHeight: "600px" }}>
+          <Image
+            className="object-cover w-full h-80"
+            src={content?.mainImage?.image}
+            width={480}
+            height={320}
+            alt={content?.mainImage?.alt ?? `portfolio-image`}
+          />
+          <div className="p-6">
+            <Text muted>{content?.dateAdded}</Text>
+            {content?.title && (
+              <Text weight="bold" fontSize="xl" className="mb-4">
+                {content?.title?.length > 31
+                  ? `${content?.title?.substring(0, 31)}...`
+                  : content?.title}
+              </Text>
+            )}
+            {content?.primaryButton?.label && (
+              <Button
+                as="link"
+                variant="link"
+                ariaLabel={content?.primaryButton?.label}
+                link={content?.primaryButton}
+                className="font-bold no-underline text-primary transition-200 hover:text-primary/50">
+                {content?.primaryButton?.label}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PortfolioContent({
+  portfolios,
+  portfolioLength,
+}: {
+  portfolios?: Content[] | null;
+  portfolioLength?: number;
+}) {
+  if (!portfolios || portfolios?.length === 0) return null;
+
+  return (
+    <Flex wrap className="mb-4">
+      {portfolios
+        ?.slice(0, portfolioLength)
+        .map(content => <ProjectItem content={content} key={content._key} />)}
+    </Flex>
+  );
+}
+
+export { Portfolio_C };

package/src/portfolio_d.tsx

@@ -0,0 +1,184 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+
+import { PortfolioProps } from ".";
+import { useMediaQuery } from "./helper";
+import { Content, LabeledRoute, PortfoliosWithCategories } from "./types";
+
+export default function Portfolio_D({
+  caption,
+  title,
+  portfoliosWithCategory,
+  primaryButton,
+  length = 6,
+}: PortfolioProps) {
+  const portfoliosPerPage = length;
+  const count = 0; // default number of portfolios per category
+  const [activeTab, setActiveTab] = React.useState(portfoliosWithCategory?.[0]?.category); // set the first index category as initial value
+
+  // group portfolios per category
+  const portfoliosPerCategory = portfoliosWithCategory?.find(data => data?.category === activeTab);
+
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Container maxWidth={512} className="mb-8 text-center md:mb-16">
+          <CaptionAndTitleText caption={caption} title={title} />
+          <PortfolioCategories
+            categories={portfoliosWithCategory}
+            activeTab={activeTab}
+            onClickFn={setActiveTab}
+          />
+        </Container>
+        <div className="mb-12 sm:flex">
+          <Flex wrap className="w-full mb-8 lg:mb-0 lg:w-1/2">
+            {portfoliosPerCategory?.content
+              ?.slice(count, count + 2)
+              ?.map(content => <ProjectItem size={"sm"} content={content} key={content._key} />)}
+            {portfoliosPerCategory?.content
+              ?.slice(count + 2, count + 3)
+              ?.map(content => <ProjectItem size={"lg"} content={content} key={content._key} />)}
+          </Flex>
+          <div className="w-full lg:w-1/2">
+            {portfoliosPerCategory?.content
+              ?.slice(count + 3, count + 4)
+              ?.map(content => <ProjectItem size={"lg"} content={content} key={content._key} />)}
+            <div className="flex flex-wrap">
+              {portfoliosPerCategory?.content
+                ?.slice(count + 4, portfoliosPerPage)
+                ?.map(content => <ProjectItem size={"sm"} content={content} key={content._key} />)}
+            </div>
+          </div>
+        </div>
+        <PrimaryButton button={primaryButton} />
+      </Container>
+    </Section>
+  );
+}
+
+function CaptionAndTitleText({
+  caption,
+  title,
+}: {
+  caption?: string | null;
+  title?: string | null;
+}) {
+  if (!caption || !title) return null;
+
+  return (
+    <React.Fragment>
+      <Text weight="semibold">{caption}</Text>
+      <Heading className="mb-6" fontSize="2xl">
+        {title}
+      </Heading>
+    </React.Fragment>
+  );
+}
+
+function PrimaryButton({ button }: { button?: LabeledRoute | null }) {
+  if (!button?.label) return null;
+
+  return (
+    <div className="text-center">
+      <Button as="link" ariaLabel={button?.label} link={button} className="text-white">
+        {button?.label}
+      </Button>
+    </div>
+  );
+}
+
+function PortfolioCategories({
+  categories,
+  activeTab,
+  onClickFn,
+}: {
+  categories?: PortfoliosWithCategories[] | null;
+  activeTab?: string | null;
+  onClickFn?: React.Dispatch<React.SetStateAction<string | null | undefined>>;
+}) {
+  if (!categories || categories?.length === 0) return null;
+
+  return (
+    <Flex className="inline-flex py-1 text-sm bg-white rounded" wrap>
+      {categories?.map((content, index) => (
+        <Button
+          variant="tab"
+          as="button"
+          ariaLabel={content?.category ?? `Category button ${index + 1}`}
+          key={content?._key}
+          isActive={activeTab === content?.category}
+          onClick={() => onClickFn?.(content?.category)}>
+          {content?.category}
+        </Button>
+      ))}
+    </Flex>
+  );
+}
+
+function ProjectItem({ size, content }: { size?: string | null; content?: Content }) {
+  const breakpoints = useMediaQuery("639");
+  const maxLength = breakpoints ? 60 : 90;
+
+  return (
+    <div className={`w-full px-4 mb-8 ${size === "lg" ? "w-full" : "lg:w-1/2"}`}>
+      {content?.mainImage?.image && (
+        <div className="relative overflow-hidden rounded-global">
+          <Image
+            className={`object-cover w-full ${size === "lg" ? "h-128" : "h-64"}`}
+            src={content?.mainImage?.image}
+            //width={352}
+            //height={280}
+            alt={`portfolio-image-${content?._key}`}
+          />
+          <div className="absolute inset-0 z-10 justify-center p-6 duration-300 bg-slate-900 rounded-lg opacity-0 hover:opacity-80">
+            <div className="max-w-md my-auto text-xs">
+              {content?.subtitle && (
+                <Text className="text-sm text-primary" weight="bold">
+                  {content?.subtitle?.length > 26
+                    ? `${content?.subtitle?.substring(0, 26)}...`
+                    : content?.subtitle}
+                </Text>
+              )}
+              {content?.title && (
+                <Heading
+                  weight="bold"
+                  className={`my-5 text-white ${size === "lg" ? "text-sm md:text-xl" : "text-sm"}`}>
+                  {content?.title?.length > 38
+                    ? `${content?.title?.substring(0, 38)}...`
+                    : content?.title}
+                </Heading>
+              )}
+              <div className="max-w-xs my-5">
+                {content?.description && (
+                  <Text fontSize="xs" muted className="mb-6 text-white">
+                    {content?.description?.length > maxLength
+                      ? `${content?.description?.substring(0, maxLength)}...`
+                      : content?.description}
+                  </Text>
+                )}
+                {content?.primaryButton?.label && (
+                  <Button
+                    as="link"
+                    variant="outline"
+                    ariaLabel={content?.primaryButton?.label}
+                    link={content?.primaryButton}
+                    className="bg-transparent border-secondary outline text-white hover:bg-secondary/20 hover:border-secondary/20 inline-block rounded-l-xl rounded-t-xl font-bold transition duration-200 px-3 py-4">
+                    {content?.primaryButton?.label}
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { Portfolio_D };

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>;
+    };
+  };
+}

package/dist/chunk-BJOQ75B3.mjs

@@ -1 +0,0 @@
-import{Button as v}from"@stackshift-ui/button";import{Container as w}from"@stackshift-ui/container";import{Flex as p}from"@stackshift-ui/flex";import{Heading as h}from"@stackshift-ui/heading";import{Image as k}from"@stackshift-ui/image";import{Section as B}from"@stackshift-ui/section";import{Text as P}from"@stackshift-ui/text";import N from"react";import{jsx as r,jsxs as g}from"react/jsx-runtime";function L({caption:l,title:e,portfoliosWithCategory:i,primaryButton:a,length:s=8}){var x;let m=s,[b,f]=N.useState((x=i==null?void 0:i[0])==null?void 0:x.category),u=i==null?void 0:i.find(d=>(d==null?void 0:d.category)===b);return r(B,{className:"py-20 bg-background",children:g(w,{maxWidth:1280,children:[g(w,{maxWidth:512,className:"mb-8 text-center md:mb-16",children:[r(T,{caption:l,title:e}),r(S,{categories:i,activeTab:b,onClickFn:f})]}),r(A,{portfolios:u==null?void 0:u.content,portfolioLength:m}),r(R,{button:a})]})})}function T({caption:l,title:e}){return!l||!e?null:g(N.Fragment,{children:[r(P,{weight:"semibold",children:l}),r(h,{className:"mb-6",fontSize:"2xl",children:e})]})}function R({button:l}){return l!=null&&l.label?r("div",{className:"text-center",children:r(v,{as:"link",ariaLabel:l==null?void 0:l.label,link:l,children:l==null?void 0:l.label})}):null}function S({categories:l,activeTab:e,onClickFn:i}){return!l||(l==null?void 0:l.length)===0?null:r(p,{className:"inline-flex py-1 text-sm bg-white rounded-global",wrap:!0,children:l==null?void 0:l.map((a,s)=>{var m;return r(v,{variant:"tab",as:"button",ariaLabel:(m=a==null?void 0:a.category)!=null?m:`Category button ${s+1}`,isActive:e===(a==null?void 0:a.category),onClick:()=>i==null?void 0:i(a==null?void 0:a.category),children:a==null?void 0:a.category},a==null?void 0:a._key)})})}function A({portfolios:l,portfolioLength:e}){var i;return!l||(l==null?void 0:l.length)===0?null:r(p,{wrap:!0,className:"mb-8",children:(i=l==null?void 0:l.slice(0,e))==null?void 0:i.map((a,s)=>{var m,b,f,u,x,d,y;return r(p,{className:"w-full space-x-5 px-4 mb-8 sm:w-1/2 lg:w-1/4",children:g("div",{className:"relative mx-auto h-[256px] w-[332px] overflow-hidden rounded-global",children:[((m=a==null?void 0:a.mainImage)==null?void 0:m.image)&&r(k,{className:"object-cover w-full h-full",src:(b=a==null?void 0:a.mainImage)==null?void 0:b.image,alt:(u=(f=a==null?void 0:a.mainImage)==null?void 0:f.alt)!=null?u:`portfolio-image-${s}`}),r("div",{className:"absolute inset-0 z-10 flex items-center justify-center duration-300 bg-slate-900 rounded-lg opacity-0 hover:opacity-75",children:((x=a==null?void 0:a.primaryButton)==null?void 0:x.label)&&r(v,{as:"link",variant:"outline",ariaLabel:(d=a==null?void 0:a.primaryButton)==null?void 0:d.label,link:a==null?void 0:a.primaryButton,className:"bg-transparent border-secondary outline text-white hover:bg-secondary/20 hover:border-secondary/20 inline-block rounded-l-xl rounded-t-xl font-bold transition duration-200 px-3 py-4",children:(y=a==null?void 0:a.primaryButton)==null?void 0:y.label})})]})},a==null?void 0:a._key)})})}export{L as a};

package/dist/chunk-EJMMBK25.mjs

@@ -1 +0,0 @@
-import{lazy as i}from"react";import{jsx as b}from"react/jsx-runtime";var r={variant_a:i(()=>import("./portfolio_a.mjs")),variant_b:i(()=>import("./portfolio_b.mjs")),variant_c:i(()=>import("./portfolio_c.mjs")),variant_d:i(()=>import("./portfolio_d.mjs"))},h="Portfolio",C=({data:o})=>{var e,s,l,p,f,c,m,u,v,g,y;let n=o==null?void 0:o.variant,t=n&&(r==null?void 0:r[n]),P={caption:(s=(e=o==null?void 0:o.variants)==null?void 0:e.subtitle)!=null?s:void 0,title:(p=(l=o==null?void 0:o.variants)==null?void 0:l.title)!=null?p:void 0,portfoliosWithCategory:(c=(f=o==null?void 0:o.variants)==null?void 0:f.portfoliosWithCategories)!=null?c:void 0,portfolios:(u=(m=o==null?void 0:o.variants)==null?void 0:m.portfolios)!=null?u:void 0,primaryButton:(g=(v=o==null?void 0:o.variants)==null?void 0:v.primaryButton)!=null?g:void 0,length:(y=o==null?void 0:o.variants)==null?void 0:y.length};return t?b(t,{...P}):null};C.displayName=h;export{C as a};