@treely/strapi-slices 2.1.0 → 2.2.1

package/dist/test/mocks/getStaticPropsContext.d.ts

@@ -0,0 +1,3 @@
+import { GetStaticPropsContext } from 'next';
+declare const getStaticPropsContextMock: GetStaticPropsContext;
+export default getStaticPropsContextMock;

package/dist/utils/mergeGlobalAndStrapiBlogPostData.d.ts

@@ -0,0 +1,5 @@
+import { GetStaticPropsContext } from 'next';
+import { IStrapiData, StrapiBlogPost, StrapiBlogPostProps, StrapiGlobal } from '..';
+import PortfolioProject from '../models/PortfolioProject';
+declare const mergeGlobalAndStrapiBlogPostData: (context: GetStaticPropsContext, global: IStrapiData<StrapiGlobal>, post: IStrapiData<StrapiBlogPost>, blog: IStrapiData<StrapiBlogPost>[], projects: PortfolioProject[]) => StrapiBlogPostProps;
+export default mergeGlobalAndStrapiBlogPostData;

package/dist/utils/mergeGlobalAndStrapiBlogPostData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/mergeGlobalAndStrapiCustomerStoryData.d.ts

@@ -0,0 +1,4 @@
+import { GetStaticPropsContext } from 'next';
+import { IStrapiData, StrapiCustomerStory, StrapiCustomerStoryProps, StrapiGlobal } from '..';
+declare const mergeGlobalAndStrapiCustomerStoryData: (context: GetStaticPropsContext, global: IStrapiData<StrapiGlobal>, customerStory: IStrapiData<StrapiCustomerStory>, customerStories: IStrapiData<StrapiCustomerStory>[]) => StrapiCustomerStoryProps;
+export default mergeGlobalAndStrapiCustomerStoryData;

package/dist/utils/mergeGlobalAndStrapiCustomerStoryData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/mergeGlobalAndStrapiPageData.d.ts

@@ -0,0 +1,5 @@
+import { GetStaticPropsContext } from 'next';
+import { IStrapiData, StrapiBlogPost, StrapiCustomerStory, StrapiGlobal, StrapiPage, StrapiPageProps } from '..';
+import PortfolioProject from '../models/PortfolioProject';
+declare const mergeGlobalAndStrapiPageData: (context: GetStaticPropsContext, global: IStrapiData<StrapiGlobal>, page: IStrapiData<StrapiPage>, blogPosts: IStrapiData<StrapiBlogPost>[], customerStories: IStrapiData<StrapiCustomerStory>[], projects: PortfolioProject[]) => StrapiPageProps;
+export default mergeGlobalAndStrapiPageData;

package/dist/utils/mergeGlobalAndStrapiPageData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/mergeGlobalAndStrapiProjectData.d.ts

@@ -0,0 +1,5 @@
+import { GetStaticPropsContext } from 'next';
+import { IStrapiData, StrapiBlogPost, StrapiGlobal, StrapiProject, StrapiProjectProps } from '..';
+import PortfolioProject from '../models/PortfolioProject';
+declare const mergeGlobalAndStrapiProject: (context: GetStaticPropsContext, global: IStrapiData<StrapiGlobal>, project: IStrapiData<StrapiProject>, blogPosts: IStrapiData<StrapiBlogPost>[], projects: PortfolioProject[]) => StrapiProjectProps;
+export default mergeGlobalAndStrapiProject;

package/dist/utils/mergeGlobalAndStrapiProjectData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",
@@ -31,7 +31,6 @@
     "analyze": "size-limit --why",
     "build": "dts build",
     "lint": "dts lint",
-    "prepare": "dts build",
     "size": "size-limit",
     "start": "dts watch",
     "test": "dts test --passWithNoTests",

package/src/components/SEOTags/SEOTags.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Head from 'next/head';
+import {
+  DEFAULT_SHARE_ALT,
+  DEFAULT_SHARE_IMAGE,
+} from '../../constants/metadata';
+
+interface SEOTagsProps {
+  title: string;
+  description: string;
+  shareImage?: {
+    url: string;
+    alt: string;
+  };
+  metaTitleSuffix?: string;
+  favicon?: string;
+  domain?: string;
+}
+
+export const SEOTags: React.FC<SEOTagsProps> = ({
+  title,
+  description,
+  shareImage,
+  metaTitleSuffix = 'Tree.ly',
+  favicon = 'https://cdn.tree.ly/favicon.ico',
+  domain = 'tree.ly',
+}: SEOTagsProps) => {
+  const shareImageUrl = shareImage?.url ?? DEFAULT_SHARE_IMAGE;
+  const shareImageAlt = shareImage?.alt ?? DEFAULT_SHARE_ALT;
+
+  return (
+    <Head>
+      <title>{`${title} - ${metaTitleSuffix}`}</title>
+      <meta name="description" content={description} />
+      <link rel="icon" href={favicon} />
+
+      <meta property="og:url" content={`https://${domain}`} />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={shareImageUrl} />
+      <meta property="og:image:alt" content={shareImageAlt} />
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta property="twitter:domain" content={domain} />
+      <meta property="twitter:url" content={`https://${domain}`} />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={shareImageUrl} />
+      <meta name="twitter:image:alt" content={shareImageAlt} />
+    </Head>
+  );
+};

package/src/components/SEOTags/index.ts

@@ -0,0 +1 @@
+export { SEOTags } from './SEOTags';

package/src/components/portfolio/SmallCheckout/SmallCheckout.tsx

@@ -1,6 +1,4 @@
-import React, { useContext, useCallback } from 'react';
-import { CDN_URI, FPM_API_URI } from '../../../constants/api';
-import StrapiLinkButton from '../../../components/StrapiLinkButton';
+import React, { useCallback, useContext } from 'react';
 import {
   BoemlyFormControl,
   Box,
@@ -21,12 +19,14 @@ import {
 } from 'formik';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
-import StrapiLink from '../../../models/strapi/StrapiLink';
+import { StrapiLink } from '../../..';
+import { IntlContext } from '../../ContextProvider';
 import {
   MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY,
   MINIMUM_CONTRIBUTION_VALUE_IN_MONEY,
 } from '../../../constants/domain';
-import { IntlContext } from '../../ContextProvider';
+import { CDN_URI, FPM_API_URI } from '../../../constants/api';
+import StrapiLinkButton from '../../StrapiLinkButton';
 
 export interface SmallCheckoutProps {
   batchId: string;
@@ -85,13 +85,12 @@ const SmallCheckout = ({
     [locale]
   );
 
-  const onSubmit = async ({ contributionValueCurrency }: SmallCheckoutForm) => {
+  const onSubmit = async ({ contributionValueCurrency }: SmallCheckoutForm) =>
     push(
       `${FPM_API_URI}/v1/webhooks/shop/checkout?batchId=${batchId}&quantity=${Math.floor(
         contributionValueCurrency / pricePerKg
       )}`
     );
-  };
 
   return (
     <Flex
@@ -143,12 +142,12 @@ const SmallCheckout = ({
                     <BoemlyFormControl
                       id="contributionValueCurrency"
                       size="md"
-                      inputType="NumberInput"
-                      numberInputProps={{
+                      inputProps={{
+                        type: 'number',
                         value: field.value,
-                        onChange: (valueString) => {
+                        onChange: (e) => {
                           // valueAsNumber might be NaN
-                          const value = parseInt(valueString || '0', 10);
+                          const value = e.target.valueAsNumber || 0;
 
                           setValues({
                             contributionValueCurrency: value,
@@ -182,11 +181,11 @@ const SmallCheckout = ({
                     <BoemlyFormControl
                       id="contributionValueKgs"
                       size="md"
-                      inputType="NumberInput"
-                      numberInputProps={{
+                      inputProps={{
+                        type: 'number',
                         value: field.value,
-                        onChange: (valueString) => {
-                          const value = parseInt(valueString || '0', 10);
+                        onChange: (e) => {
+                          const value = e.target.valueAsNumber || 0;
 
                           setValues({
                             contributionValueCurrency:

package/src/constants/metadata.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_SHARE_IMAGE =
+  'https://cdn.tree.ly/assets/v3/app/share-image-generic.webp';
+export const DEFAULT_SHARE_ALT = 'Share Image';

package/src/constants/sectionsConfig.ts

@@ -0,0 +1,20 @@
+export const EXTENDABLE_HEADER_SECTIONS = [
+  'sections.hero',
+  'sections.map-hero',
+  'sections.full-width-image',
+  'sections.small-hero',
+  'sections.small-hero-light',
+];
+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 = [
+  'sections.projects-map',
+  'sections.project-facts',
+];

package/src/index.tsx

@@ -5,10 +5,12 @@ import StrapiAuthor from './models/strapi/StrapiAuthor';
 import StrapiAvatarWithName from './models/strapi/StrapiAvatarWithName';
 import StrapiBanner from './models/strapi/StrapiBanner';
 import StrapiBlogPost from './models/strapi/StrapiBlogPost';
+import StrapiBlogPostProps from './models/strapi/StrapiBlogPostProps';
 import StrapiButtonWithVariant from './models/strapi/StrapiButtonWithVariant';
 import StrapiCategory from './models/strapi/StrapiCategory';
 import StrapiContactArea from './models/strapi/StrapiContactArea';
 import StrapiCustomerStory from './models/strapi/StrapiCustomerStory';
+import StrapiCustomerStoryProps from './models/strapi/StrapiCustomerStoryProps';
 import StrapiDefaultHeader from './models/strapi/StrapiDefaultHeader';
 import StrapiGlobal from './models/strapi/StrapiGlobal';
 import StrapiGlossaryItem from './models/strapi/StrapiGlossaryItem';
@@ -25,18 +27,51 @@ import StrapiMedia from './models/strapi/StrapiMedia';
 import StrapiMetadata from './models/strapi/StrapiMetadata';
 import StrapiNavMenu from './models/strapi/StrapiNavMenu';
 import StrapiPage from './models/strapi/StrapiPage';
+import StrapiPageProps from './models/strapi/StrapiPageProps';
 import StrapiPortfolio from './models/strapi/StrapiPortfolio';
 import StrapiPortfolioCard from './models/strapi/StrapiPortfolioCard';
 import StrapiProject from './models/strapi/StrapiProject';
+import StrapiProjectProps from './models/strapi/StrapiProjectProps';
 import StrapiProjectCard from './models/strapi/StrapiProjectCard';
 import StrapiQuoteCard from './models/strapi/StrapiQuoteCard';
 import StrapiShapesCard from './models/strapi/StrapiShapesCard';
 import StrapiTextCardWithIcons from './models/strapi/StrapiTextCardWithIcons';
 import StrapiTopBanner from './models/strapi/StrapiTopBanner';
 
+import HeaderType from './models/HeaderType';
+import Image from './models/Image';
+import PageMetadata from './models/PageMetadata';
+import PageProps from './models/PageProps';
+
+import mergeGlobalAndStrapiBlogPostData from './utils/mergeGlobalAndStrapiBlogPostData';
+import mergeGlobalAndStrapiCustomerStoryData from './utils/mergeGlobalAndStrapiCustomerStoryData';
+import mergeGlobalAndStrapiPageData from './utils/mergeGlobalAndStrapiPageData';
+import mergeGlobalAndStrapiProjectData from './utils/mergeGlobalAndStrapiProjectData';
+
+import {
+  SECTIONS_WITH_BLOG_POSTS,
+  SECTIONS_WITH_CUSTOMER_STORIES,
+  SECTIONS_WITH_PROJECTS,
+} from './constants/sectionsConfig';
+
+export * from './components/SEOTags';
 export * from './components/SliceRenderer';
 
+export {
+  // Utils
+  mergeGlobalAndStrapiBlogPostData,
+  mergeGlobalAndStrapiCustomerStoryData,
+  mergeGlobalAndStrapiPageData,
+  mergeGlobalAndStrapiProjectData,
+
+  // Constants
+  SECTIONS_WITH_BLOG_POSTS,
+  SECTIONS_WITH_CUSTOMER_STORIES,
+  SECTIONS_WITH_PROJECTS,
+};
+
 export type {
+  // Strapi Models
   IStrapi,
   IStrapiData,
   IStrapiResponse,
@@ -44,10 +79,12 @@ export type {
   StrapiAvatarWithName,
   StrapiBanner,
   StrapiBlogPost,
+  StrapiBlogPostProps,
   StrapiButtonWithVariant,
   StrapiCategory,
   StrapiContactArea,
   StrapiCustomerStory,
+  StrapiCustomerStoryProps,
   StrapiDefaultHeader,
   StrapiGlobal,
   StrapiGlossaryItem,
@@ -64,12 +101,20 @@ export type {
   StrapiMetadata,
   StrapiNavMenu,
   StrapiPage,
+  StrapiPageProps,
   StrapiPortfolio,
   StrapiPortfolioCard,
   StrapiProject,
+  StrapiProjectProps,
   StrapiProjectCard,
   StrapiQuoteCard,
   StrapiShapesCard,
   StrapiTextCardWithIcons,
   StrapiTopBanner,
+
+  // Models
+  HeaderType,
+  Image,
+  PageMetadata,
+  PageProps,
 };

package/src/models/HeaderType.ts

@@ -0,0 +1,6 @@
+interface HeaderType {
+  extendable: boolean;
+  theme: 'dark' | 'light';
+}
+
+export default HeaderType;

package/src/models/Image.ts

@@ -0,0 +1,6 @@
+interface Image {
+  url: string;
+  alt: string;
+}
+
+export default Image;

package/src/models/PageMetadata.ts

@@ -0,0 +1,11 @@
+import Image from './Image';
+
+interface PageMetadata {
+  title: string;
+  description: string;
+  shareImage?: Image;
+  metaTitleSuffix?: string;
+  favicon?: string;
+}
+
+export default PageMetadata;

package/src/models/PageProps.ts

@@ -0,0 +1,32 @@
+import {
+  IStrapiData,
+  StrapiBanner,
+  StrapiBlogPost,
+  StrapiCustomerStory,
+  StrapiLink,
+  StrapiLinkList,
+  StrapiNavMenu,
+  StrapiTopBanner,
+} from '..';
+import { ReactNode } from 'react';
+import PortfolioProject from './PortfolioProject';
+import PageMetadata from './PageMetadata';
+import HeaderType from './HeaderType';
+
+interface PageProps {
+  headerType?: HeaderType;
+  headerNavMenus?: StrapiNavMenu[];
+  headerButtons?: StrapiLink[];
+  footerLinks?: StrapiLinkList[];
+  hideFooter?: boolean;
+  children?: ReactNode;
+  metadata: PageMetadata;
+  slices: any[];
+  blogPosts: IStrapiData<StrapiBlogPost>[];
+  projects: PortfolioProject[];
+  banner?: StrapiBanner;
+  topBanner?: StrapiTopBanner;
+  customerStories: IStrapiData<StrapiCustomerStory>[];
+}
+
+export default PageProps;

package/src/models/strapi/StrapiBlogPostProps.ts

@@ -0,0 +1,7 @@
+import PageProps from '../PageProps';
+import IStrapiData from './IStrapiData';
+import StrapiBlogPost from './StrapiBlogPost';
+
+interface StrapiBlogPostProps extends PageProps, IStrapiData<StrapiBlogPost> {}
+
+export default StrapiBlogPostProps;

package/src/models/strapi/StrapiCustomerStoryProps.ts

@@ -0,0 +1,9 @@
+import PageProps from '../PageProps';
+import IStrapiData from './IStrapiData';
+import StrapiCustomerStory from './StrapiCustomerStory';
+
+interface StrapiCustomerStoryProps
+  extends PageProps,
+    IStrapiData<StrapiCustomerStory> {}
+
+export default StrapiCustomerStoryProps;

package/src/models/strapi/StrapiPageProps.ts

@@ -0,0 +1,7 @@
+import PageProps from '../PageProps';
+import IStrapiData from './IStrapiData';
+import StrapiPage from './StrapiPage';
+
+interface StrapiPageProps extends PageProps, IStrapiData<StrapiPage> {}
+
+export default StrapiPageProps;

package/src/models/strapi/StrapiProjectProps.ts

@@ -0,0 +1,7 @@
+import PageProps from '../PageProps';
+import IStrapiData from './IStrapiData';
+import StrapiProject from './StrapiProject';
+
+interface StrapiProjectProps extends PageProps, IStrapiData<StrapiProject> {}
+
+export default StrapiProjectProps;

package/src/slices/ProjectFacts/ProjectFacts.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
+import { storybookStrapiAvatarMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import CreditsAvailableState from '../../models/CreditsAvailableState';
 import ProjectFacts from '.';
 
@@ -90,3 +91,55 @@ FullProps.args = {
     },
   },
 };
+
+export const WithContact = Template.bind({});
+WithContact.args = {
+  project: fpmProjectMock,
+  slice: {
+    projectId: fpmProjectMock.id,
+
+    contactTitle: 'Contact Title',
+    contactText: 'Contact Text',
+    contactButton: {
+      id: 1,
+      text: 'Contact our Sales Team',
+      url: 'https://example.org',
+    },
+    contactAvatar: {
+      id: 1,
+      alt: 'Avatar image alt text',
+      img: {
+        data: storybookStrapiAvatarMock,
+      },
+    },
+  },
+};
+
+export const WithDocumentsAndContact = Template.bind({});
+WithDocumentsAndContact.args = {
+  project: fpmProjectMock,
+  slice: {
+    projectId: fpmProjectMock.id,
+
+    documentUrls: [
+      { id: 1, text: 'Document 1', url: 'https://example.org' },
+      { id: 2, text: 'Document 2', url: 'https://example.org' },
+      { id: 3, text: 'Document 3', url: 'https://example.org' },
+    ],
+
+    contactTitle: 'Contact Title',
+    contactText: 'Contact Text',
+    contactButton: {
+      id: 1,
+      text: 'Contact our Sales Team',
+      url: 'https://example.org',
+    },
+    contactAvatar: {
+      id: 1,
+      alt: 'Avatar image alt text',
+      img: {
+        data: storybookStrapiAvatarMock,
+      },
+    },
+  },
+};

package/src/test/mocks/getStaticPropsContext.ts

@@ -0,0 +1,9 @@
+import { GetStaticPropsContext } from 'next';
+
+const getStaticPropsContextMock: GetStaticPropsContext = {
+  locales: ['en', 'de'],
+  locale: 'en',
+  defaultLocale: 'en',
+};
+
+export default getStaticPropsContextMock;

package/src/utils/mergeGlobalAndStrapiBlogPostData.test.ts

@@ -0,0 +1,154 @@
+import mergeGlobalAndStrapiBlogPostData from './mergeGlobalAndStrapiBlogPostData';
+import { strapiBlogPostMock } from '../test/strapiMocks/strapiBlogPost';
+import minimalGlobalData from '../test/strapiMocks/minimalGlobalData';
+import getStaticPropsContextMock from '../test/mocks/getStaticPropsContext';
+import { strapiMetadataMock } from '../test/strapiMocks/strapiMetadata';
+
+describe('The mergeGlobalAndStrapiBlogPostData util', () => {
+  it('returns the global metadata if there is no page metadata', () => {
+    const pageDataWithoutMetadata = {
+      ...strapiBlogPostMock,
+      attributes: {
+        ...strapiBlogPostMock.attributes,
+        metadata: null,
+      },
+    };
+
+    const result = mergeGlobalAndStrapiBlogPostData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      pageDataWithoutMetadata,
+      [],
+      []
+    );
+
+    expect(result.attributes.metadata).toBe(
+      minimalGlobalData.attributes.metadata
+    );
+    expect(result.metadata.title).toBe(
+      minimalGlobalData.attributes.metadata.title
+    );
+    expect(result.metadata.description).toBe(
+      minimalGlobalData.attributes.metadata.description
+    );
+  });
+
+  it('returns the pages metadata if the page data includes metadata', () => {
+    const pageDataWithMetadata = {
+      ...strapiBlogPostMock,
+      data: {
+        ...strapiBlogPostMock,
+        attributes: {
+          ...strapiBlogPostMock.attributes,
+          metadata: strapiMetadataMock,
+        },
+      },
+    };
+
+    const result = mergeGlobalAndStrapiBlogPostData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      pageDataWithMetadata,
+      [],
+      []
+    );
+
+    expect(result.attributes.metadata?.title).toBe(strapiMetadataMock.title);
+    expect(result.metadata?.title).toBe(strapiMetadataMock.title);
+  });
+
+  it('returns the navbar links if there are links in the global data', () => {
+    const result = mergeGlobalAndStrapiBlogPostData(
+      getStaticPropsContextMock,
+      {
+        ...minimalGlobalData,
+        attributes: {
+          ...minimalGlobalData.attributes,
+          navbar: {
+            ...minimalGlobalData.attributes.navbar,
+            navMenus: [
+              {
+                link: {
+                  id: Infinity,
+                  text: 'Text',
+                  url: '/',
+                },
+                title: 'Title',
+                items: [],
+              },
+            ],
+          },
+        },
+      },
+      strapiBlogPostMock,
+      [],
+      []
+    );
+
+    expect(result.headerNavMenus).toStrictEqual([
+      {
+        title: 'Title',
+        items: [],
+        link: { id: Infinity, text: 'Text', url: '/' },
+      },
+    ]);
+  });
+
+  it('returns the navbar buttons if there are buttons in the global data', () => {
+    const result = mergeGlobalAndStrapiBlogPostData(
+      getStaticPropsContextMock,
+      {
+        ...minimalGlobalData,
+        attributes: {
+          ...minimalGlobalData.attributes,
+          navbar: {
+            ...minimalGlobalData.attributes.navbar,
+            buttons: [
+              {
+                id: Infinity,
+                text: 'Header button',
+                url: '/',
+              },
+            ],
+          },
+        },
+      },
+      strapiBlogPostMock,
+      [],
+      []
+    );
+
+    expect(result.headerButtons).toStrictEqual([
+      { id: Infinity, text: 'Header button', url: '/' },
+    ]);
+  });
+
+  it('returns the footer links if there are links in the global data', () => {
+    const result = mergeGlobalAndStrapiBlogPostData(
+      getStaticPropsContextMock,
+      {
+        ...minimalGlobalData,
+        attributes: {
+          ...minimalGlobalData.attributes,
+          footer: {
+            ...minimalGlobalData.attributes.footer,
+            links: [
+              {
+                id: Infinity,
+                title: 'Title',
+                links: [],
+              },
+            ],
+          },
+        },
+      },
+      strapiBlogPostMock,
+      [],
+      []
+    );
+
+    expect(result.footerLinks).toStrictEqual([
+      { id: Infinity, title: 'Title', links: [] },
+    ]);
+  });
+});