@stackshift-ui/blog 6.0.5 → 6.0.6

package/dist/types.d.ts

@@ -181,6 +181,7 @@ export interface Variants {
     signinLink?: LabeledRoute | null;
     tags?: string[] | null;
     posts?: BlogPost[] | null;
+    blogPosts?: BlogPost[] | null;
     blogsPerPage?: number | null;
     form?: Form | null;
     collections?: Collection | null;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/blog",
   "description": "",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "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": {
@@ -34,19 +35,19 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/badge": "6.0.2",
-    "@stackshift-ui/button": "6.0.2",
-    "@stackshift-ui/card": "6.0.2",
-    "@stackshift-ui/container": "6.0.2",
-    "@stackshift-ui/flex": "6.0.2",
-    "@stackshift-ui/heading": "6.0.2",
-    "@stackshift-ui/image": "6.0.2",
-    "@stackshift-ui/input": "6.0.3",
-    "@stackshift-ui/link": "6.0.2",
+    "@stackshift-ui/container": "6.0.3",
+    "@stackshift-ui/button": "6.0.3",
+    "@stackshift-ui/flex": "6.0.3",
+    "@stackshift-ui/link": "6.0.3",
+    "@stackshift-ui/heading": "6.0.3",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/section": "6.0.2",
-    "@stackshift-ui/text": "6.0.2"
+    "@stackshift-ui/section": "6.0.3",
+    "@stackshift-ui/input": "6.0.4",
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/text": "6.0.3",
+    "@stackshift-ui/image": "6.0.3",
+    "@stackshift-ui/badge": "6.0.3",
+    "@stackshift-ui/card": "6.0.3"
   },
   "peerDependencies": {
     "@stackshift-ui/system": ">=0.0.0",

package/src/blog.test.tsx

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

package/src/blog.tsx

@@ -0,0 +1,32 @@
+import { lazy } from "react";
+import { BlogPost, LabeledRoute, SectionsProps } from "./types";
+
+const Variants = {
+  variant_a: lazy(() => import("./blog_a")),
+  variant_b: lazy(() => import("./blog_b")),
+  variant_c: lazy(() => import("./blog_c")),
+  variant_d: lazy(() => import("./blog_d")),
+};
+
+export interface BlogProps {
+  subtitle?: string;
+  title?: string;
+  posts?: BlogPost[];
+  primaryButton?: LabeledRoute;
+}
+const displayName = "Blog";
+
+export const Blog: React.FC<SectionsProps> = ({ data }) => {
+  const variant = data?.variant;
+  const Variant = variant && Variants[variant as keyof typeof Variants];
+
+  const props = {
+    subtitle: data?.variants?.subtitle ?? undefined,
+    title: data?.variants?.title ?? undefined,
+    posts: (data?.variants?.posts || data?.variants?.blogPosts) ?? undefined,
+    primaryButton: data?.variants?.primaryButton ?? undefined,
+  };
+  return Variant ? <Variant {...props} /> : null;
+};
+
+Blog.displayName = displayName;

package/src/blog_a.tsx

@@ -0,0 +1,121 @@
+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 { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import { format } from "date-fns";
+
+import { BlogProps } from ".";
+import { BlogPost, Category, LabeledRoute } from "./types";
+
+export default function Blog_A({ subtitle, title, posts, primaryButton }: BlogProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <SubtitleAndTitleText subtitle={subtitle} title={title} />
+        <BlogPosts posts={posts} />
+        <PrimaryButton primaryButton={primaryButton} />
+      </Container>
+    </Section>
+  );
+}
+
+function SubtitleAndTitleText({ subtitle, title }: { subtitle?: string; title?: string }) {
+  return (
+    <div className="mb-16 text-center">
+      {subtitle ? (
+        <Text weight="bold" className="text-secondary">
+          {subtitle}
+        </Text>
+      ) : null}
+      {title ? <Heading fontSize="3xl">{title}</Heading> : null}
+    </div>
+  );
+}
+
+function BlogPosts({ posts }: { posts?: BlogPost[] }) {
+  if (!posts) return null;
+
+  let blogsPerPage = 6,
+    count = 0;
+
+  return (
+    <Flex gap={4} className="flex-col lg:flex-row">
+      <div className="w-full space-y-5 lg:w-1/2">
+        {posts?.slice(count, count + 1)?.map((post, key) => <BlogItem post={post} key={key} />)}
+        <Flex gap={4} className="flex-col lg:flex-row">
+          {posts
+            ?.slice(count + 1, count + 3)
+            ?.map((post, key) => <BlogItem post={post} key={key} />)}
+        </Flex>
+      </div>
+
+      <div className="w-full space-y-5 lg:w-1/2">
+        <Flex gap={4} className="flex-col lg:flex-row">
+          {posts
+            ?.slice(count + 3, count + 5)
+            ?.map((post, key) => <BlogItem post={post} key={key} />)}
+        </Flex>
+        {posts
+          ?.slice(count + 5, blogsPerPage)
+          ?.map((post, key) => <BlogItem post={post} key={key} />)}
+      </div>
+    </Flex>
+  );
+}
+
+function BlogItem({ post }: { post?: BlogPost }) {
+  return (
+    <div className="relative w-full h-64 rounded">
+      {post?.mainImage ? (
+        <Image
+          className="relative object-cover w-full h-full overflow-hidden rounded-global"
+          src={`${post?.mainImage}`}
+          alt={`blog-variantA-image`}
+          sizes="(min-width: 1540px) 740px, (min-width: 1280px) 612px, (min-width: 1040px) 484px, (min-width: 780px) 736px, (min-width: 680px) 608px, calc(94.44vw - 15px)"
+        />
+      ) : null}
+      <div className="absolute inset-0 bg-gray-900 rounded-global opacity-75" />
+      <div className="absolute inset-0 flex flex-col items-start p-6">
+        {post?.categories ? (
+          <div className="absolute flex left-5 top-5">
+            {post?.categories?.map((category: Category, index: number) => (
+              <span
+                className="px-3 py-1 mb-auto mr-3 text-sm font-bold uppercase bg-white rounded-full text-primary"
+                key={index}>
+                {category?.title}
+              </span>
+            ))}
+          </div>
+        ) : null}
+        <span className="mt-auto text-sm text-gray-500">
+          {post?.publishedAt ? format(new Date(post?.publishedAt), "dd MMM, yyyy") : ""}
+        </span>
+        {post?.title ? (
+          <Link
+            className="text-lg font-bold text-white transform hover:scale-110 hover:text-secondary motion-reduce:transform-none"
+            href={`/${post?.link}`}>
+            {post?.title?.length > 40 ? post?.title.substring(0, 40) + "..." : post?.title}
+          </Link>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
+  if (!primaryButton?.label) return null;
+
+  return (
+    <div className="mt-10 text-center">
+      <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+        {primaryButton?.label}
+      </Button>
+    </div>
+  );
+}
+
+export { Blog_A };

package/src/blog_b.tsx

@@ -0,0 +1,158 @@
+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 { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import { format } from "date-fns";
+import { BlogProps } from ".";
+import { useMediaQuery } from "./hooks/useMediaQuery";
+import { BlogPost, LabeledRoute } from "./types";
+
+export default function Blog_B({ subtitle, title, posts, primaryButton }: BlogProps) {
+  const blogsPerPage = 5;
+  const count = 0;
+
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <SubtitleAndTitle subtitle={subtitle} title={title} />
+        <BlogPosts posts={posts} count={count} blogsPerPage={blogsPerPage} />
+        <PrimaryButton primaryButton={primaryButton} />
+      </Container>
+    </Section>
+  );
+}
+
+function SubtitleAndTitle({ subtitle, title }: { subtitle?: string; title?: string }) {
+  return (
+    <div className="w-full mb-16 text-center">
+      {subtitle ? (
+        <Text weight="bold" className="text-secondary">
+          {subtitle}
+        </Text>
+      ) : null}
+      {title ? <Heading fontSize="3xl">{title}</Heading> : null}
+    </div>
+  );
+}
+
+function BlogPosts({
+  posts,
+  count,
+  blogsPerPage,
+}: {
+  posts?: BlogPost[];
+  count: number;
+  blogsPerPage: number;
+}) {
+  return (
+    <Flex wrap justify="center" className="mb-16" gap={4}>
+      <div className="w-full lg:w-[45%]">
+        {posts
+          ?.slice(count, count + 1)
+          .map((post, key) => <BlogItem size="lg" post={post} key={key} />)}
+      </div>
+      <Flex wrap className="w-full lg:w-[45%]" gap={4}>
+        {posts?.slice(count + 1, blogsPerPage).map((post, key) => (
+          <div className="w-full lg:basis-[45%]" key={key}>
+            <BlogItem post={post} size="sm" />
+          </div>
+        ))}
+      </Flex>
+    </Flex>
+  );
+}
+
+function BlogItem({ post, size }: { post: BlogPost; size?: string }) {
+  const breakpoints = useMediaQuery("1024");
+
+  return (
+    <div className="overflow-hidden rounded-global shadow">
+      {post?.mainImage ? (
+        <ImageContainer post={post} size={size} breakpoints={breakpoints} />
+      ) : null}
+      <div className="p-6 bg-white flex flex-col justify-between" style={{ height: "295px" }}>
+        <div>
+          {post?.publishedAt ? (
+            <Text muted className="text-sm">
+              {format(new Date(post.publishedAt), " dd MMM, yyyy")}
+            </Text>
+          ) : null}
+          {post?.title ? (
+            <Heading type="h4" className="my-2">
+              {post.title.length > 25 ? `${post.title.substring(0, 25)}...` : post.title}
+            </Heading>
+          ) : null}
+          {post?.excerpt ? (
+            <Text muted className="mb-6 text-justify">
+              {post.excerpt.length > 41 ? `${post.excerpt.substring(0, 41)}...` : post.excerpt}
+            </Text>
+          ) : null}
+        </div>
+        {post?.link ? (
+          <Link
+            aria-label="View Blog Post"
+            className="font-bold text-primary hover:text-secondary"
+            href={`/${post?.link}`}>
+            View Blog Post
+          </Link>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function ImageContainer({
+  post,
+  size,
+  breakpoints,
+}: {
+  post: BlogPost;
+  size?: string;
+  breakpoints: boolean;
+}) {
+  return (
+    <>
+      {breakpoints ? (
+        <Image
+          className="object-cover w-full overflow-hidden"
+          src={`${post.mainImage}`}
+          sizes="100vw"
+          style={{ width: "100%", height: "auto", objectFit: "cover" }}
+          width={271}
+          height={248}
+          alt={`blog-variantB-image-${post.title}`}
+        />
+      ) : (
+        <div className={`${size === "lg" ? "h-[44.5rem]" : "h-[12.5rem]"}`}>
+          <Image
+            className="object-cover w-full overflow-hidden rounded-t-global"
+            src={`${post.mainImage}`}
+            sizes="100vw"
+            style={{ width: "100%", height: "100%", objectFit: "cover" }}
+            width={271}
+            height={248}
+            alt={`blog-variantB-image-${post.title}`}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
+  if (!primaryButton?.label) return null;
+
+  return (
+    <div className="text-center">
+      <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+        {primaryButton?.label}
+      </Button>
+    </div>
+  );
+}
+
+export { Blog_B };

package/src/blog_c.tsx

@@ -0,0 +1,142 @@
+import { Badge } from "@stackshift-ui/badge";
+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 { Link } from "@stackshift-ui/link";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import { format } from "date-fns";
+import React from "react";
+import { BlogProps } from ".";
+import { useMediaQuery } from "./hooks/useMediaQuery";
+import { BlogPost, LabeledRoute } from "./types";
+
+export default function Blog_C({ subtitle, title, posts, primaryButton }: BlogProps) {
+  let blogsPerPage = 3;
+
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex align="center" justify="between" className="flex-col mb-16 md:flex-row" gap={4}>
+          <SubtitleAndTitleText subtitle={subtitle} title={title} />
+          <PrimaryButton primaryButton={primaryButton} />
+        </Flex>
+        <BlogPosts posts={posts} blogsPerPage={blogsPerPage} />
+        <PrimaryButton primaryButton={primaryButton} />
+      </Container>
+    </Section>
+  );
+}
+
+function SubtitleAndTitleText({ subtitle, title }: { subtitle?: string; title?: string }) {
+  return (
+    <div className="text-center md:text-left">
+      {subtitle ? (
+        <Text weight="bold" className="text-primary">
+          {subtitle}
+        </Text>
+      ) : null}
+      {title ? <Heading fontSize="3xl">{title}</Heading> : null}
+    </div>
+  );
+}
+
+function BlogPosts({ posts, blogsPerPage }: { posts?: BlogPost[]; blogsPerPage?: number }) {
+  if (!posts) return null;
+  return (
+    <div>
+      {posts?.slice(0, blogsPerPage)?.map((post, key) => (
+        <div className="flex flex-wrap mb-8 overflow-hidden rounded-global shadow" key={key}>
+          <BlogItem
+            post={post}
+            className={`${key % 2 === 0 ? "flex-row" : "flex-row-reverse"}`}
+            key={key}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function BlogItem({ post, className }: { post: BlogPost; className?: string }) {
+  const breakpoints = useMediaQuery("1100");
+  const maxExcerptLength = breakpoints ? 70 : 200;
+
+  return (
+    <Flex wrap className={`bg-white overflow-hidden rounded-lg shadow  w-full ${className}`}>
+      {post?.mainImage && (
+        <Image
+          className="object-cover w-full h-auto rounded-l lg:w-1/2"
+          src={`${post?.mainImage}`}
+          sizes="100vw"
+          width={554}
+          height={416}
+          alt={`blog-variantC-image-`}
+        />
+      )}
+      <div className="w-full px-6 py-6 rounded-r lg:w-1/2 lg:pt-10">
+        <Flex gap={2}>
+          {post?.categories &&
+            post?.categories?.map((category, index) => (
+              <Badge className=" bg-secondary-foreground text-primary" key={index}>
+                {category?.title}
+              </Badge>
+            ))}
+        </Flex>
+
+        {post?.publishedAt && (
+          <Text muted className="m-1">
+            {format(new Date(post?.publishedAt), " dd MMM, yyyy")}
+          </Text>
+        )}
+        {post?.title && (
+          <Heading className="my-4" type="h3">
+            {post?.title?.length > 40 ? post?.title?.substring(0, 40) + "..." : post?.title}
+          </Heading>
+        )}
+        {post?.authors && (
+          <div className="flex mb-10 flex-wrap">
+            <span className="italic text-primary">By&nbsp;</span>
+            {post?.authors?.map((author, index, { length }) => (
+              <>
+                <Text className="italic text-primary">{author?.name}</Text>
+                {index + 1 !== length ? <span>&nbsp;,&nbsp;</span> : null}
+              </>
+            ))}
+          </div>
+        )}
+        {post?.excerpt && (
+          <Text muted className="mb-6 leading-loose text-justify">
+            {post?.excerpt?.length > maxExcerptLength
+              ? post?.excerpt?.substring(0, maxExcerptLength) + "..."
+              : post?.excerpt}
+          </Text>
+        )}
+        {post?.link && (
+          <Link
+            aria-label="View Blog Post"
+            className="font-bold text-primary hover:text-primary-foreground"
+            href={`/${post?.link}`}>
+            View Blog Post
+          </Link>
+        )}
+      </div>
+    </Flex>
+  );
+}
+
+function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
+  if (!primaryButton?.label) return null;
+
+  return (
+    <React.Fragment>
+      <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+        {primaryButton?.label}
+      </Button>
+    </React.Fragment>
+  );
+}
+
+export { Blog_C };