@treely/strapi-slices 3.2.1 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/constants/{sectionsConfig.ts → slicesConfig.ts}

@@ -9,12 +9,9 @@ export const DARK_THEME_HEADER_SECTIONS = [
   'sections.hero',
   'sections.small-hero',
 ];
-export const SECTIONS_WITH_BLOG_POSTS = [
-  'sections.blog',
-  'sections.blog-cards',
-];
-export const SECTIONS_WITH_CUSTOMER_STORIES = ['sections.customer-stories'];
-export const SECTIONS_WITH_PROJECTS = [
+export const SLICES_WITH_BLOG_POSTS = ['sections.blog', 'sections.blog-cards'];
+export const SLICES_WITH_CUSTOMER_STORIES = ['sections.customer-stories'];
+export const SLICES_WITH_PROJECTS = [
   'sections.projects-grid',
   'sections.projects-map',
   'sections.project-facts',

package/src/index.tsx

@@ -52,12 +52,6 @@ import mergeGlobalAndStrapiProjectData from './utils/mergeGlobalAndStrapiProject
 import strapiLinkUrl from './utils/strapiLinkUrl';
 import strapiMediaUrl from './utils/strapiMediaUrl';
 
-import {
-  SECTIONS_WITH_BLOG_POSTS,
-  SECTIONS_WITH_CUSTOMER_STORIES,
-  SECTIONS_WITH_PROJECTS,
-} from './constants/sectionsConfig';
-
 export * from './components/SEOTags';
 export * from './components/SliceRenderer';
 
@@ -69,11 +63,6 @@ export {
   mergeGlobalAndStrapiProjectData,
   strapiLinkUrl,
   strapiMediaUrl,
-
-  // Constants
-  SECTIONS_WITH_BLOG_POSTS,
-  SECTIONS_WITH_CUSTOMER_STORIES,
-  SECTIONS_WITH_PROJECTS,
 };
 
 export type {

package/src/utils/mergeGlobalAndStrapiBlogPostData.test.ts

@@ -3,6 +3,7 @@ import { strapiBlogPostMock } from '../test/strapiMocks/strapiBlogPost';
 import minimalGlobalData from '../test/strapiMocks/minimalGlobalData';
 import getStaticPropsContextMock from '../test/mocks/getStaticPropsContext';
 import { strapiMetadataMock } from '../test/strapiMocks/strapiMetadata';
+import portfolioProjectMock from '../test/integrationMocks/portfolioProjectMock';
 
 describe('The mergeGlobalAndStrapiBlogPostData util', () => {
   it('returns the global metadata if there is no page metadata', () => {
@@ -151,4 +152,50 @@ describe('The mergeGlobalAndStrapiBlogPostData util', () => {
       { id: Infinity, title: 'Title', links: [] },
     ]);
   });
+
+  it('returns the blog posts if the page includes slices which need blog posts', () => {
+    const result = mergeGlobalAndStrapiBlogPostData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiBlogPostMock,
+        attributes: {
+          ...strapiBlogPostMock.attributes,
+          slices: [
+            {
+              __component: 'sections.blog',
+            },
+          ],
+        },
+      },
+      [strapiBlogPostMock],
+      []
+    );
+
+    expect(result.blogPosts).toStrictEqual([strapiBlogPostMock]);
+    expect(result.projects).toStrictEqual([]);
+  });
+
+  it('returns the projects if the page includes slices which need projects', () => {
+    const result = mergeGlobalAndStrapiBlogPostData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiBlogPostMock,
+        attributes: {
+          ...strapiBlogPostMock.attributes,
+          slices: [
+            {
+              __component: 'sections.projects-grid',
+            },
+          ],
+        },
+      },
+      [],
+      [portfolioProjectMock]
+    );
+
+    expect(result.blogPosts).toStrictEqual([]);
+    expect(result.projects).toStrictEqual([portfolioProjectMock]);
+  });
 });

package/src/utils/mergeGlobalAndStrapiBlogPostData.ts

@@ -8,6 +8,10 @@ import {
 } from '..';
 import PortfolioProject from '../models/PortfolioProject';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
+import {
+  SLICES_WITH_BLOG_POSTS,
+  SLICES_WITH_PROJECTS,
+} from '../constants/slicesConfig';
 
 const mergeGlobalAndStrapiBlogPostData = (
   context: GetStaticPropsContext,
@@ -24,10 +28,17 @@ const mergeGlobalAndStrapiBlogPostData = (
       )
     : DEFAULT_SHARE_IMAGE;
 
+  const returnBlog = post.attributes.slices.some((slice) =>
+    SLICES_WITH_BLOG_POSTS.includes(slice.__component)
+  );
+  const returnProjects = post.attributes.slices.some((slice) =>
+    SLICES_WITH_PROJECTS.includes(slice.__component)
+  );
+
   return {
     ...post,
     // Portfolio Projects
-    projects,
+    projects: returnProjects ? projects : [],
     // StrapiBlogPost
     attributes: {
       ...post?.attributes,
@@ -58,7 +69,7 @@ const mergeGlobalAndStrapiBlogPostData = (
       favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
     },
     slices: post?.attributes.slices,
-    blogPosts: blog,
+    blogPosts: returnBlog ? blog : [],
     banner: global.attributes.banner,
     topBanner: post?.attributes.topBanner || global.attributes.topBanner,
     customerStories: [],

package/src/utils/mergeGlobalAndStrapiCustomerStoryData.test.ts

@@ -146,4 +146,25 @@ describe('The mergeGlobalAndStrapiCustomerStoryData util', () => {
       { id: Infinity, title: 'Title', links: [] },
     ]);
   });
+
+  it('returns the customer stories if the page includes slices which need customer stories', () => {
+    const result = mergeGlobalAndStrapiCustomerStoryData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiCustomerStoryMock,
+        attributes: {
+          ...strapiCustomerStoryMock.attributes,
+          slices: [
+            {
+              __component: 'sections.customer-stories',
+            },
+          ],
+        },
+      },
+      [strapiCustomerStoryMock]
+    );
+
+    expect(result.customerStories).toStrictEqual([strapiCustomerStoryMock]);
+  });
 });

package/src/utils/mergeGlobalAndStrapiCustomerStoryData.ts

@@ -7,6 +7,7 @@ import {
   StrapiGlobal,
 } from '..';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
+import { SLICES_WITH_CUSTOMER_STORIES } from '../constants/slicesConfig';
 
 const mergeGlobalAndStrapiCustomerStoryData = (
   context: GetStaticPropsContext,
@@ -22,6 +23,10 @@ const mergeGlobalAndStrapiCustomerStoryData = (
       )
     : DEFAULT_SHARE_IMAGE;
 
+  const returnCustomerStories = customerStory.attributes.slices.some((slice) =>
+    SLICES_WITH_CUSTOMER_STORIES.includes(slice.__component)
+  );
+
   return {
     ...customerStory,
     // Portfolio Projects
@@ -57,7 +62,7 @@ const mergeGlobalAndStrapiCustomerStoryData = (
       favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
     },
     slices: customerStory?.attributes.slices,
-    customerStories,
+    customerStories: returnCustomerStories ? customerStories : [],
     banner: global.attributes.banner,
     topBanner:
       customerStory?.attributes.topBanner || global.attributes.topBanner,

package/src/utils/mergeGlobalAndStrapiPageData.test.ts

@@ -3,6 +3,9 @@ import mergeGlobalAndStrapiPageData from './mergeGlobalAndStrapiPageData';
 import { strapiPageMock } from '../test/strapiMocks/strapiPage';
 import getStaticPropsContextMock from '../test/mocks/getStaticPropsContext';
 import { strapiMetadataMock } from '../test/strapiMocks/strapiMetadata';
+import { strapiBlogPostMock } from '../test/strapiMocks/strapiBlogPost';
+import { strapiCustomerStoryMock } from '../test/strapiMocks/strapiCustomerStory';
+import portfolioProjectMock from '../test/integrationMocks/portfolioProjectMock';
 
 describe('The mergeGlobalAndStrapiPageData util', () => {
   it('returns the global metadata if there is no page metadata', () => {
@@ -251,4 +254,67 @@ describe('The mergeGlobalAndStrapiPageData util', () => {
       { id: Infinity, title: 'Text', links: [] },
     ]);
   });
+
+  it('returns the blog posts if the page includes slices which need blog posts', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'sections.blog-cards' }],
+        },
+      },
+      [strapiBlogPostMock],
+      [],
+      []
+    );
+
+    expect(result.blogPosts).toStrictEqual([strapiBlogPostMock]);
+    expect(result.customerStories).toStrictEqual([]);
+    expect(result.projects).toStrictEqual([]);
+  });
+
+  it('returns the customer stories if the page includes slices which need customer stories', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'sections.customer-stories' }],
+        },
+      },
+      [],
+      [strapiCustomerStoryMock],
+      []
+    );
+
+    expect(result.customerStories).toStrictEqual([strapiCustomerStoryMock]);
+    expect(result.blogPosts).toStrictEqual([]);
+    expect(result.projects).toStrictEqual([]);
+  });
+
+  it('returns the projects if the page includes slices which need projects', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'sections.projects-grid' }],
+        },
+      },
+      [],
+      [],
+      [portfolioProjectMock]
+    );
+
+    expect(result.projects).toStrictEqual([portfolioProjectMock]);
+    expect(result.blogPosts).toStrictEqual([]);
+    expect(result.customerStories).toStrictEqual([]);
+  });
 });

package/src/utils/mergeGlobalAndStrapiPageData.ts

@@ -12,7 +12,10 @@ import PortfolioProject from '../models/PortfolioProject';
 import {
   DARK_THEME_HEADER_SECTIONS,
   EXTENDABLE_HEADER_SECTIONS,
-} from '../constants/sectionsConfig';
+  SLICES_WITH_BLOG_POSTS,
+  SLICES_WITH_CUSTOMER_STORIES,
+  SLICES_WITH_PROJECTS,
+} from '../constants/slicesConfig';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
 
 const mergeGlobalAndStrapiPageData = (
@@ -31,10 +34,20 @@ const mergeGlobalAndStrapiPageData = (
       )
     : DEFAULT_SHARE_IMAGE;
 
+  const returnBlogPosts = page.attributes.slices.some((slice) =>
+    SLICES_WITH_BLOG_POSTS.includes(slice.__component)
+  );
+  const returnCustomerStories = page.attributes.slices.some((slice) =>
+    SLICES_WITH_CUSTOMER_STORIES.includes(slice.__component)
+  );
+  const returnProjects = page.attributes.slices.some((slice) =>
+    SLICES_WITH_PROJECTS.includes(slice.__component)
+  );
+
   return {
     ...page,
     // Portfolio Projects
-    projects,
+    projects: returnProjects ? projects : [],
     // StrapiPage
     attributes: {
       ...page?.attributes,
@@ -71,10 +84,10 @@ const mergeGlobalAndStrapiPageData = (
       favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
     },
     slices: page?.attributes.slices,
-    blogPosts,
+    blogPosts: returnBlogPosts ? blogPosts : [],
     banner: global.attributes.banner,
     topBanner: page?.attributes.topBanner || global.attributes.topBanner,
-    customerStories,
+    customerStories: returnCustomerStories ? customerStories : [],
   };
 };
 

package/src/utils/mergeGlobalAndStrapiProjectData.test.ts

@@ -1,5 +1,7 @@
+import portfolioProjectMock from '../test/integrationMocks/portfolioProjectMock';
 import getStaticPropsContextMock from '../test/mocks/getStaticPropsContext';
 import minimalGlobalData from '../test/strapiMocks/minimalGlobalData';
+import { strapiBlogPostMock } from '../test/strapiMocks/strapiBlogPost';
 import { strapiMetadataMock } from '../test/strapiMocks/strapiMetadata';
 import { strapiProjectMock } from '../test/strapiMocks/strapiProject';
 import mergeGlobalAndStrapiProjectData from './mergeGlobalAndStrapiProjectData';
@@ -240,4 +242,42 @@ describe('The mergeGlobalAndStrapiProjectData util', () => {
 
     expect(result.headerType?.extendable).toBe(true);
   });
+
+  it('returns the blog posts if the page includes slices which need blog posts', () => {
+    const result = mergeGlobalAndStrapiProjectData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiProjectMock,
+        attributes: {
+          ...strapiProjectMock.attributes,
+          slices: [{ __component: 'sections.blog-cards' }],
+        },
+      },
+      [strapiBlogPostMock],
+      []
+    );
+
+    expect(result.blogPosts).toStrictEqual([strapiBlogPostMock]);
+    expect(result.projects).toStrictEqual([]);
+  });
+
+  it('returns the projects if the page includes slices which need projects', () => {
+    const result = mergeGlobalAndStrapiProjectData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiProjectMock,
+        attributes: {
+          ...strapiProjectMock.attributes,
+          slices: [{ __component: 'sections.projects-grid' }],
+        },
+      },
+      [],
+      [portfolioProjectMock]
+    );
+
+    expect(result.blogPosts).toStrictEqual([]);
+    expect(result.projects).toStrictEqual([portfolioProjectMock]);
+  });
 });

package/src/utils/mergeGlobalAndStrapiProjectData.ts

@@ -11,7 +11,9 @@ import PortfolioProject from '../models/PortfolioProject';
 import {
   DARK_THEME_HEADER_SECTIONS,
   EXTENDABLE_HEADER_SECTIONS,
-} from '../constants/sectionsConfig';
+  SLICES_WITH_BLOG_POSTS,
+  SLICES_WITH_PROJECTS,
+} from '../constants/slicesConfig';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
 
 const mergeGlobalAndStrapiProject = (
@@ -29,10 +31,17 @@ const mergeGlobalAndStrapiProject = (
       )
     : DEFAULT_SHARE_IMAGE;
 
+  const returnBlogPosts = project.attributes.slices.some((slice) =>
+    SLICES_WITH_BLOG_POSTS.includes(slice.__component)
+  );
+  const returnProjects = project.attributes.slices.some((slice) =>
+    SLICES_WITH_PROJECTS.includes(slice.__component)
+  );
+
   return {
     ...project,
     // Portfolio Projects
-    projects,
+    projects: returnProjects ? projects : [],
     // StrapiProject
     attributes: {
       ...project.attributes,
@@ -69,7 +78,7 @@ const mergeGlobalAndStrapiProject = (
       favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
     },
     slices: project.attributes.slices,
-    blogPosts,
+    blogPosts: returnBlogPosts ? blogPosts : [],
     banner: global.attributes.banner,
     topBanner: project?.attributes.topBanner || global.attributes.topBanner,
     customerStories: [],

package/dist/constants/sectionsConfig.d.ts

@@ -1,5 +0,0 @@
-export declare const EXTENDABLE_HEADER_SECTIONS: string[];
-export declare const DARK_THEME_HEADER_SECTIONS: string[];
-export declare const SECTIONS_WITH_BLOG_POSTS: string[];
-export declare const SECTIONS_WITH_CUSTOMER_STORIES: string[];
-export declare const SECTIONS_WITH_PROJECTS: string[];