@stackshift-ui/text-component 1.0.0 → 6.0.3

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/text-component",
   "description": "",
-  "version": "1.0.0",
+  "version": "6.0.3",
   "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": {
@@ -29,18 +30,18 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "1.0.0",
-    "@stackshift-ui/typescript-config": "2.0.0"
+    "@stackshift-ui/eslint-config": "6.0.2",
+    "@stackshift-ui/typescript-config": "6.0.2"
   },
   "dependencies": {
     "@portabletext/react": "^3.1.0",
     "@portabletext/types": "^2.0.13",
-    "@stackshift-ui/flex": "1.0.0",
-    "@stackshift-ui/container": "1.0.0",
-    "@stackshift-ui/heading": "1.0.0",
-    "@stackshift-ui/section": "1.0.0",
-    "@stackshift-ui/system": "2.0.0",
-    "@stackshift-ui/scripts": "1.0.0"
+    "@stackshift-ui/heading": "6.0.3",
+    "@stackshift-ui/flex": "6.0.3",
+    "@stackshift-ui/scripts": "6.0.2",
+    "@stackshift-ui/section": "6.0.3",
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/container": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/helper/index.tsx

@@ -0,0 +1,63 @@
+import { MyPortableTextComponents } from "../types";
+
+// block styling as props to `components` of the PortableText component
+export const textComponentBlockStyling: MyPortableTextComponents = {
+  block: {
+    h1: ({ children }) => {
+      return <h1 className="mb-6 leading-loose text-gray-900 text-7xl">{children}</h1>;
+    },
+    h2: ({ children }) => {
+      return <h2 className="mb-6 text-5xl leading-loose text-gray-900">{children}</h2>;
+    },
+    h3: ({ children }) => {
+      return <h3 className="mb-6 text-3xl leading-loose text-gray-900">{children}</h3>;
+    },
+    h4: ({ children }) => {
+      return <h4 className="mb-6 text-xl leading-loose text-gray-900">{children}</h4>;
+    },
+    normal: ({ children }) => {
+      return <p className="mb-5 leading-relaxed text-justify text-gray-500">{children}</p>;
+    },
+    blockquote: ({ children }) => {
+      return (
+        <blockquote className="mb-6 italic leading-loose text-gray-500 px-14">
+          - {children}
+        </blockquote>
+      );
+    },
+  },
+  code: ({ value }) => {
+    return (
+      <pre data-language={value.language}>
+        <code>{value.code}</code>
+      </pre>
+    );
+  },
+
+  list: {
+    bullet: ({ children }) => {
+      return <ul className="pl-10 mb-6 leading-loose text-gray-900 list-disc">{children}</ul>;
+    },
+    number: ({ children }) => {
+      return <ol className="mb-6 leading-loose text-gray-900 list-decimal">{children}</ol>;
+    },
+  },
+  listItem: {
+    bullet: ({ children }) => <li className="mb-6 leading-loose text-gray-900">{children}</li>,
+  },
+  marks: {
+    strong: ({ children }) => <strong>{children}</strong>,
+    em: ({ children }) => <em>{children}</em>,
+    code: ({ children }) => <code>{children}</code>,
+    link: ({ children, value }) => (
+      <a
+        aria-label={value.href ?? "external link"}
+        className="text-primary-foreground hover:text-secondary-foreground"
+        href={value?.href}
+        target="_blank"
+        rel="noopener noreferrer">
+        {children}
+      </a>
+    ),
+  },
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+// component exports
+export * from "./text-component";
+export * from "./text_a";
+export * from "./text_b";
+export * from "./text_c";

package/src/text-component.test.tsx

@@ -0,0 +1,64 @@
+import "@testing-library/jest-dom";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { TextComponent } from "./text-component";
+
+const variants = {
+  title: "Trusted by brands all over the world",
+  firstColumn: [
+    {
+      _key: "unique-key",
+      style: "normal",
+      _type: "block",
+      markDefs: [],
+      children: [
+        {
+          _type: "span",
+          text: "Etiam facilisis mauris leo, eu aliquet est iaculis eu. Mauris vitae pellentesque augue, quis efficitur elit. Suspendisse potenti. Vivamus et sem eget ligula bibendum pulvinar. Nullam libero velit, efficitur ut dui eget, tempus ultricies felis. Pellentesque ut lorem id velit aliquam pharetra id placerat purus. Aliquam erat mauris, cursus eget cursus in, rutrum et nisi. Phasellus consequat vehicula metus non sagittis. Sed quis ipsum non velit tempus consequat sit amet eget augue. Donec feugiat ultricies ultrices",
+        },
+      ],
+    },
+  ],
+};
+
+describe("text-component", () => {
+  afterEach(cleanup);
+
+  test("variant_a: renders without errors", async ({ expect }) => {
+    // @todo: We should consider adding this static data into its own repository so we can reuse it across different projects
+    render(
+      <TextComponent
+        data={{
+          variant: "variant_a",
+          variants,
+        }}
+      />,
+    );
+    await waitFor(() => screen.findByText("Trusted by brands all over the world"));
+    screen.debug();
+
+    expect(screen.getByText("Trusted by brands all over the world")).toBeInTheDocument();
+    expect(
+      screen.getByText(/Etiam facilisis mauris leo, eu aliquet est iaculis eu/),
+    ).toBeInTheDocument();
+  });
+
+  test("variant_b: renders without errors", async ({ expect }) => {
+    // @todo: We should consider adding this static data into its own repository so we can reuse it across different projects
+    render(
+      <TextComponent
+        data={{
+          variant: "variant_b",
+          variants,
+        }}
+      />,
+    );
+    await waitFor(() => screen.findByText("Trusted by brands all over the world"));
+    screen.debug();
+
+    expect(screen.getByText("Trusted by brands all over the world")).toBeInTheDocument();
+    expect(
+      screen.getByText(/Etiam facilisis mauris leo, eu aliquet est iaculis eu/),
+    ).toBeInTheDocument();
+  });
+});

package/src/text-component.tsx

@@ -0,0 +1,34 @@
+import { PortableTextBlock } from "@portabletext/types";
+import { lazy } from "react";
+import { SectionsProps } from "./types";
+
+const Variants = {
+  variant_a: lazy(() => import("./text_a")),
+  variant_b: lazy(() => import("./text_b")),
+  variant_c: lazy(() => import("./text_c")),
+};
+
+export interface TextComponentProps {
+  heading?: string;
+  firstColumn?: PortableTextBlock[];
+  secondColumn?: PortableTextBlock[];
+  thirdColumn?: PortableTextBlock[];
+}
+
+const displayName = "TextComponent";
+
+export const TextComponent: React.FC<SectionsProps> = ({ data }) => {
+  const variant = data?.variant;
+  const Variant = variant && Variants[variant as keyof typeof Variants];
+
+  const props = {
+    heading: data?.variants?.title ?? undefined,
+    firstColumn: data?.variants?.firstColumn ?? undefined,
+    secondColumn: data?.variants?.secondColumn ?? undefined,
+    thirdColumn: data?.variants?.thirdColumn ?? undefined,
+  };
+
+  return Variant ? <Variant {...props} /> : null;
+};
+
+TextComponent.displayName = displayName;

package/src/text_a.tsx

@@ -0,0 +1,34 @@
+import { PortableText } from "@portabletext/react";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Section } from "@stackshift-ui/section";
+import { TextComponentProps } from ".";
+import { textComponentBlockStyling } from "./helper";
+
+export default function TextComponent_A({ heading, firstColumn }: TextComponentProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        {heading && (
+          <Heading fontSize="xl" className="mb-5 text-center">
+            {heading}
+          </Heading>
+        )}
+        <Flex wrap justify="center" className="mx-auto">
+          {firstColumn && (
+            <div className="mb-2 text-xs md:mb-0 md:w-1/2 lg:text-base">
+              <PortableText
+                value={firstColumn}
+                components={textComponentBlockStyling}
+                onMissingComponent={false} // Disabling warnings / handling unknown types
+              />
+            </div>
+          )}
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+export { TextComponent_A };

package/src/text_b.tsx

@@ -0,0 +1,43 @@
+import { PortableText } from "@portabletext/react";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Section } from "@stackshift-ui/section";
+import { TextComponentProps } from ".";
+import { textComponentBlockStyling } from "./helper";
+
+export default function TextComponent_B({
+  heading,
+  firstColumn,
+  secondColumn,
+}: TextComponentProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        {heading && (
+          <Heading fontSize="xl" className="w-full mb-4 text-center">
+            {heading}
+          </Heading>
+        )}
+        <Flex wrap justify="center" className="mx-auto ">
+          {firstColumn && (
+            <div className="px-5 mb-3 text-xs leading-relaxed text-justify text-gray-500 lg:mb-6 lg:w-1/4 lg:text-base">
+              <PortableText value={firstColumn} components={textComponentBlockStyling} />
+            </div>
+          )}
+          {secondColumn && (
+            <div className="px-5 mb-6 text-xs leading-relaxed text-justify text-gray-500 md:mb-0 lg:w-1/4 lg:text-base">
+              <PortableText
+                value={secondColumn}
+                components={textComponentBlockStyling}
+                onMissingComponent={false} // Disabling warnings / handling unknown types
+              />
+            </div>
+          )}
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+export { TextComponent_B };

package/src/text_c.tsx

@@ -0,0 +1,57 @@
+import { PortableText } from "@portabletext/react";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Section } from "@stackshift-ui/section";
+import { TextComponentProps } from ".";
+import { textComponentBlockStyling } from "./helper";
+
+export default function TextComponent_C({
+  heading,
+  firstColumn,
+  secondColumn,
+  thirdColumn,
+}: TextComponentProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container className="container px-4 mx-auto" maxWidth={1280}>
+        {heading && (
+          <Heading fontSize="xl" className="w-full mb-5 text-center">
+            {heading}
+          </Heading>
+        )}
+        <Flex wrap justify="center" className="mx-auto">
+          {firstColumn && (
+            <div className="px-3 mb-6 text-xs leading-relaxed text-justify text-gray-500 md:mb-0 lg:w-1/4 lg:text-base">
+              <PortableText
+                value={firstColumn}
+                components={textComponentBlockStyling}
+                onMissingComponent={false} // Disabling warnings / handling unknown types
+              />
+            </div>
+          )}
+          {secondColumn && (
+            <div className="px-3 mb-6 text-xs leading-relaxed text-justify text-gray-500 md:mb-0 lg:w-1/4 lg:text-base">
+              <PortableText
+                value={secondColumn}
+                components={textComponentBlockStyling}
+                onMissingComponent={false} // Disabling warnings / handling unknown types
+              />
+            </div>
+          )}
+          {thirdColumn && (
+            <div className="px-3 mb-6 text-xs leading-relaxed text-justify text-gray-500 md:mb-0 lg:w-1/4 lg:text-base">
+              <PortableText
+                value={thirdColumn}
+                components={textComponentBlockStyling}
+                onMissingComponent={false} // Disabling warnings / handling unknown types
+              />
+            </div>
+          )}
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+export { TextComponent_C };

package/src/types.ts

@@ -0,0 +1,422 @@
+import { PortableTextComponents } from "@portabletext/react";
+import { PortableTextBlock } from "@portabletext/types";
+
+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;
+  firstColumn?: PortableTextBlock[];
+  secondColumn?: PortableTextBlock[];
+  thirdColumn?: PortableTextBlock[];
+  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>;
+    };
+  };
+}
+
+export type MyPortableTextComponents = PortableTextComponents & {
+  code?: ({ value }: { value: { language?: string; code?: string } }) => JSX.Element;
+};