@treely/strapi-slices 1.0.0

package/src/test/strapiMocks/strapiPortfolioCard.ts

@@ -0,0 +1,40 @@
+import StrapiPortfolioCard from '@/models/strapi/StrapiPortfolioCard';
+import { strapiMediaMock } from './strapiMedia';
+
+export const strapiPortfolioCardMock: StrapiPortfolioCard = {
+  id: 1,
+  portfolioNumber: 'Portfolio #1',
+  title: 'My forest',
+  facts: [
+    {
+      id: 1,
+      key: 'key1',
+      value: 'value1',
+    },
+    {
+      id: 2,
+      key: 'key2',
+      value: 'value2',
+    },
+    {
+      id: 3,
+      key: 'key3',
+      value: 'value3',
+    },
+    {
+      id: 4,
+      key: 'key4',
+      value: 'value4',
+    },
+  ],
+  button: {
+    id: 3,
+    url: '/login',
+    text: 'Buy certificates',
+  },
+  image: {
+    id: 1,
+    alt: 'Alt text',
+    img: { data: strapiMediaMock },
+  },
+};

package/src/test/strapiMocks/strapiPortfolioMock.ts

@@ -0,0 +1,20 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiPortfolio from '@/models/strapi/StrapiPortfolio';
+
+export const strapiPortfolioMock: IStrapiData<StrapiPortfolio> = {
+  id: 1,
+  attributes: {
+    name: 'my-portfolio',
+    title: 'My Portfolio',
+    locale: 'en',
+    createdAt: '2022-01-10T15:04:32.897Z',
+    updatedAt: '2022-01-11T10:21:42.317Z',
+    slices: [
+      {
+        __component: 'sections.rich-text',
+        id: 6,
+        content: '# This is my rich text!',
+      },
+    ],
+  },
+};

package/src/test/strapiMocks/strapiProject.ts

@@ -0,0 +1,34 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiProject from '@/models/strapi/StrapiProject';
+import CreditsAvailableState from '@/models/CreditsAvailableState';
+import { strapiPortfolioMock } from './strapiPortfolioMock';
+import fpmProjectMock from '../integrationMocks/fpmProjectMock';
+
+export const strapiProjectMock: IStrapiData<StrapiProject> = {
+  id: 1,
+  attributes: {
+    slug: 'slug',
+    locale: 'en',
+    fpmProjectId: fpmProjectMock.id,
+    creditsAvailable: CreditsAvailableState.YES,
+    createdAt: '2022-01-10T15:04:32.897Z',
+    updatedAt: '2022-01-11T10:21:42.317Z',
+    metadata: null,
+    slices: [
+      {
+        __component: 'sections.rich-text',
+        id: 6,
+        content: '# This is my rich text!',
+      },
+    ],
+    portfolio: {
+      data: strapiPortfolioMock,
+    },
+    localizations: [
+      {
+        id: 2,
+        locale: 'de',
+      },
+    ],
+  },
+};

package/src/test/strapiMocks/strapiProjectCard.ts

@@ -0,0 +1,20 @@
+import StrapiProjectCard from '@/models/strapi/StrapiProjectCard';
+import { strapiMediaMock } from './strapiMedia';
+import { strapiProjectMock } from './strapiProject';
+
+export const strapiProjectCardMock: StrapiProjectCard = {
+  id: 1,
+  title: 'My forest',
+  facts: [
+    { id: 1, text: 'text1' },
+    { id: 2, text: 'text2' },
+  ],
+  footerTitle: 'Footer title',
+  footerSubTitle: 'Footer sub title',
+  image: {
+    id: 1,
+    alt: 'Alt text',
+    img: { data: strapiMediaMock },
+  },
+  project: { data: strapiProjectMock },
+};

package/src/test/strapiMocks/strapiQuoteCard.ts

@@ -0,0 +1,8 @@
+import StrapiQuoteCard from '@/models/strapi/StrapiQuoteCard';
+import { strapiAvatarWithNameMock } from './strapiAvatarWithName';
+
+export const strapiQuoteCardMock: StrapiQuoteCard = {
+  id: 1,
+  text: 'Text',
+  avatar: strapiAvatarWithNameMock,
+};

package/src/test/testUtils.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { BoemlyThemeProvider } from 'boemly';
+import { IntlProvider } from 'react-intl';
+import { render as rtlRender } from '@testing-library/react';
+import rootMessagesEn from '@/rootMessages.en';
+import userEvent from '@testing-library/user-event';
+
+interface WrapperProps {
+  children?: ReactNode;
+}
+
+const render = (ui: any, { locale = 'en', ...renderOptions } = {}) => {
+  const Wrapper: React.FC<WrapperProps> = ({ children }: WrapperProps) => (
+    <BoemlyThemeProvider>
+      <IntlProvider messages={rootMessagesEn} locale={locale}>
+        {children}
+      </IntlProvider>
+    </BoemlyThemeProvider>
+  );
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+};
+
+export * from '@testing-library/react';
+
+export { render, userEvent };

package/src/unit.messages.de.ts

@@ -0,0 +1,4 @@
+export default {
+  'unit.formatter.tonsCo2': '{number} /tCO₂',
+  'unit.formatter.tonsCo2PerYear': '{number} tCO₂/Jahr',
+};

package/src/unit.messages.en.ts

@@ -0,0 +1,4 @@
+export default {
+  'unit.formatter.tonsCo2': '{number} /tCO₂',
+  'unit.formatter.tonsCo2PerYear': '{number} tCO₂/year',
+};

package/src/utils/convertAreaM2ToHa.test.ts

@@ -0,0 +1,9 @@
+import convertAreaM2ToHa from './convertAreaM2ToHa';
+
+describe('The convertAreaM2ToHa util', () => {
+  it('converts the area from m2 to ha', () => {
+    const result = convertAreaM2ToHa('100');
+
+    expect(result).toBe(0.01);
+  });
+});

package/src/utils/convertAreaM2ToHa.ts

@@ -0,0 +1,4 @@
+const convertAreaM2ToHa = (areaInM2: string): number =>
+  parseInt(areaInM2, 10) / 10000;
+
+export default convertAreaM2ToHa;

package/src/utils/convertCo2AmountKgToTons.ts

@@ -0,0 +1,4 @@
+const convertCo2AmountKgToTons = (amount: string): number =>
+  parseInt(amount, 10) / 1000;
+
+export default convertCo2AmountKgToTons;

package/src/utils/convertToKebabCase.test.ts

@@ -0,0 +1,9 @@
+import convertToKebabCase from './convertToKebabCase';
+
+describe('The convertToKebabCase function', () => {
+  it('returns a kebab-case string.', () => {
+    const title = 'My Title';
+
+    expect(convertToKebabCase(title)).toBe('my-title');
+  });
+});

package/src/utils/convertToKebabCase.ts

@@ -0,0 +1,10 @@
+const convertToKebabCase = (str: string) => {
+  const matches =
+    str &&
+    str.match(
+      /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+    );
+  return matches ? matches.map((x: string) => x.toLowerCase()).join('-') : '';
+};
+
+export default convertToKebabCase;

package/src/utils/getTimeSpanInYears.test.ts

@@ -0,0 +1,35 @@
+import getTimeSpanInYears from './getTimeSpanInYears';
+
+describe('The getTimeSpanInYears util', () => {
+  it('counts the difference in years between start and end dates', () => {
+    const startDate = new Date('2021-01-01');
+    const endDate = new Date('2031-01-01');
+    const result = getTimeSpanInYears(startDate, endDate);
+
+    expect(result).toBe(10);
+  });
+
+  it('counts the difference in years between start and end dates and adds one year more, if the months difference is more than 6 ', () => {
+    const startDate = new Date('2031-01-01');
+    const endDate = new Date('2041-12-31');
+    const result = getTimeSpanInYears(startDate, endDate);
+
+    expect(result).toBe(11);
+  });
+
+  it('counts the difference of more than 6 months for an entire year', () => {
+    const startDate = new Date('2041-05-01');
+    const endDate = new Date('2041-12-31');
+    const result = getTimeSpanInYears(startDate, endDate);
+
+    expect(result).toBe(1);
+  });
+
+  it('counts the difference in years also considering the amount of months', () => {
+    const startDate = new Date('2041-12-01');
+    const endDate = new Date('2043-01-01');
+    const result = getTimeSpanInYears(startDate, endDate);
+
+    expect(result).toBe(1);
+  });
+});

package/src/utils/getTimeSpanInYears.ts

@@ -0,0 +1,14 @@
+const getTimeSpanInYears = (start: Date, end: Date) => {
+  const monthsDifference = end.getMonth() - start.getMonth();
+  const yearsDifference = end.getFullYear() - start.getFullYear();
+
+  if (monthsDifference > 4) {
+    return yearsDifference + 1;
+  }
+  if (monthsDifference < -4) {
+    return yearsDifference - 1;
+  }
+  return yearsDifference;
+};
+
+export default getTimeSpanInYears;

package/src/utils/mergeBoundingBoxes.test.ts

@@ -0,0 +1,13 @@
+import mergeBoundingBoxes from './mergeBoundingBoxes';
+
+describe('The mergeBoundingBoxes util', () => {
+  it('returns the merged bounding box', () => {
+    const result = mergeBoundingBoxes([
+      [10, 10, 10, 10],
+      [5, 5, 15, 15],
+      [7, 7, 12, 12],
+    ]);
+
+    expect(result).toStrictEqual([5, 5, 15, 15]);
+  });
+});

package/src/utils/mergeBoundingBoxes.ts

@@ -0,0 +1,19 @@
+import BBox from '@/models/BBox';
+
+const mergeBoundingBoxes = (boundingBoxes: BBox[]): BBox => {
+  let minLeft: number = 180;
+  let minBottom: number = 90;
+  let maxRight: number = -180;
+  let maxTop: number = -90;
+
+  boundingBoxes.forEach(([left, bottom, right, top]) => {
+    if (left < minLeft) minLeft = left;
+    if (bottom < minBottom) minBottom = bottom;
+    if (right > maxRight) maxRight = right;
+    if (top > maxTop) maxTop = top;
+  });
+
+  return [minLeft, minBottom, maxRight, maxTop];
+};
+
+export default mergeBoundingBoxes;

package/src/utils/mergeDeep.ts

@@ -0,0 +1,31 @@
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject(item: any) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export function mergeDeep(target: any, ...sources: any): any {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key) => {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        mergeDeep(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    });
+  }
+
+  return mergeDeep(target, ...sources);
+}

package/src/utils/openHubSpotChat.ts

@@ -0,0 +1,15 @@
+const openHubSpotChat = () => {
+  const w = window as any;
+
+  if (w.HubSpotConversations) {
+    w.HubSpotConversations.widget.open();
+  } else {
+    w.hsConversationsOnReady = [
+      () => {
+        w.HubSpotConversations.widget.open();
+      },
+    ];
+  }
+};
+
+export default openHubSpotChat;

package/src/utils/strapiLinkUrl.test.ts

@@ -0,0 +1,26 @@
+import { strapiLinkPageMock } from '@/test/strapiMocks/strapiLinkPage';
+import strapiLinkUrl from './strapiLinkUrl';
+
+describe('The strapiLinkUrl util', () => {
+  it('returns the page slug if there is a page in the given link', () => {
+    const result = strapiLinkUrl({
+      id: 1,
+      text: 'Text',
+      page: { data: strapiLinkPageMock },
+    });
+
+    expect(result).toBe(`/${strapiLinkPageMock.attributes.slug}`);
+  });
+
+  it('returns url if there is no page in the given link', () => {
+    const result = strapiLinkUrl({ id: 1, text: 'Text', url: '/url' });
+
+    expect(result).toBe('/url');
+  });
+
+  it('return / if undefined is passed in', () => {
+    const result = strapiLinkUrl();
+
+    expect(result).toBe('/');
+  });
+});

package/src/utils/strapiLinkUrl.ts

@@ -0,0 +1,13 @@
+import StrapiLink from '@/models/strapi/StrapiLink';
+
+const strapiLinkUrl = (
+  strapiLink: StrapiLink | undefined = undefined
+): string => {
+  if (strapiLink?.page?.data) {
+    return `/${strapiLink.page.data.attributes.slug}`;
+  }
+
+  return strapiLink?.url || '/';
+};
+
+export default strapiLinkUrl;

package/src/utils/strapiMediaUrl.test.ts

@@ -0,0 +1,54 @@
+import { STRAPI_URI } from '@/constants/strapi';
+import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import strapiMediaUrl from './strapiMediaUrl';
+
+const fileSizes: ('xSmall' | 'small' | 'medium' | 'large' | 'xLarge')[] = [
+  'xSmall',
+  'small',
+  'medium',
+  'large',
+  'xLarge',
+];
+
+describe('The strapiMediaUrl util', () => {
+  it('returns the native url if no preferredUrl parameter is given', () => {
+    const result = strapiMediaUrl({ data: strapiMediaMock });
+
+    expect(result).toBe(`${STRAPI_URI}${strapiMediaMock.attributes.url}`);
+  });
+
+  it('returns the native url if `native` is given as the preferredUrl parameter', () => {
+    const result = strapiMediaUrl({ data: strapiMediaMock }, 'native');
+
+    expect(result).toBe(`${STRAPI_URI}${strapiMediaMock.attributes.url}`);
+  });
+
+  it('returns the native url if the extension of the image file is `.svg`', () => {
+    const result = strapiMediaUrl(
+      {
+        data: {
+          ...strapiMediaMock,
+          attributes: {
+            ...strapiMediaMock.attributes,
+            ext: '.svg',
+          },
+        },
+      },
+      'medium'
+    );
+
+    expect(result).toBe(`${STRAPI_URI}${strapiMediaMock.attributes.url}`);
+  });
+
+  fileSizes.forEach(
+    (fileSize: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge') => {
+      it(`returns the ${fileSize} url if '${fileSize}' is given as the preferredUrl parameter`, () => {
+        const result = strapiMediaUrl({ data: strapiMediaMock }, fileSize);
+
+        expect(result).toBe(
+          `${STRAPI_URI}${strapiMediaMock.attributes.formats[fileSize]?.url}`
+        );
+      });
+    }
+  );
+});

package/src/utils/strapiMediaUrl.ts

@@ -0,0 +1,32 @@
+import { STRAPI_URI } from '@/constants/strapi';
+import IStrapi from '@/models/strapi/IStrapi';
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiMedia from '@/models/strapi/StrapiMedia';
+
+const strapiMediaUrl = (
+  media: IStrapi<IStrapiData<StrapiMedia>>,
+  preferredSize:
+    | 'native'
+    | 'thumbnail'
+    | 'xSmall'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xLarge' = 'native'
+): string => {
+  let { url } = media.data.attributes || {};
+  if (preferredSize !== 'native' && media.data.attributes.ext !== '.svg') {
+    url = media.data.attributes.formats[preferredSize]?.url || url;
+  }
+  if (url && (url.indexOf('http://') === 0 || url.indexOf('https://') === 0)) {
+    return url;
+  }
+  return `${
+    (STRAPI_URI.includes('127.0.0.1') || STRAPI_URI.includes('localhost')) &&
+    !process.env.STORYBOOK
+      ? STRAPI_URI
+      : ''
+  }${url}`;
+};
+
+export default strapiMediaUrl;