@treely/strapi-slices 7.4.2 → 7.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.4.2",
+  "version": "7.5.1",
   "license": "MIT",
   "author": "Tree.ly FlexCo",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",
@@ -99,22 +99,27 @@
     }
   ],
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.5",
     "@size-limit/preset-small-lib": "^11.0.0",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addons": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/nextjs": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/manager-api": "^8.6.4",
+    "@storybook/nextjs": "^8.6.4",
+    "@storybook/preview-api": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/theming": "^8.6.4",
+    "@storybook/types": "^8.6.4",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@tsconfig/recommended": "^1.0.3",
     "@tsconfig/vite-react": "^2.0.1",
     "@types/mapbox-gl": "^2.7.19",
+    "@types/qs": "^6.9.18",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
@@ -133,7 +138,7 @@
     "react-dom": "^18.2.0",
     "semantic-release": "^22.0.8",
     "size-limit": "^11.0.0",
-    "storybook": "^7.5.3",
+    "storybook": "^8.6.4",
     "typescript": "^5.3.2"
   },
   "dependencies": {
@@ -141,7 +146,7 @@
     "adblock-detect-react": "^1.1.0",
     "axios": "^1.7.2",
     "axios-cache-interceptor": "^1.5.3",
-    "boemly": "^7.5.0",
+    "boemly": "^7.6.0",
     "embla-carousel-auto-scroll": "^8.5.1",
     "embla-carousel-autoplay": "^8.5.1",
     "embla-carousel-react": "^8.5.1",

package/src/integrations/strapi/getAllSlugsFromStrapi.test.ts

@@ -2,24 +2,49 @@ import MockAxios from 'jest-mock-axios';
 import getAllSlugsFromStrapi from './getAllSlugsFromStrapi';
 import StrapiPage from '../../models/strapi/StrapiPage';
 import { strapiPageMock } from '../../test/strapiMocks/strapiPage';
+import getAvailableLocalesFromStrapi from './getAvailableLocalesFromStrapi';
+
+jest.mock('./getAvailableLocalesFromStrapi', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
 
 describe('The getAllSlugsFromStrapi function', () => {
   afterEach(() => {
     MockAxios.reset();
+    jest.clearAllMocks();
   });
 
   it('returns all slugs and creates a fallback for locales that dont have a translation', async () => {
+    (getAvailableLocalesFromStrapi as jest.Mock).mockResolvedValue([
+      'en',
+      'de',
+      'hu',
+    ]);
+
     const slugsPromise = getAllSlugsFromStrapi<StrapiPage>('/api/pages', [
       'en',
       'de',
       'hu',
     ]);
 
-    // This page is avaliable in 'de' and 'en'
-    MockAxios.mockResponseFor(
-      { url: '/api/pages' },
-      { data: { data: [strapiPageMock] } }
-    );
+    // This page is available in 'de', 'en', and 'hu'
+    MockAxios.get
+      .mockResolvedValueOnce({ data: { data: [strapiPageMock] } }) // english
+      .mockResolvedValueOnce({
+        data: {
+          data: [
+            {
+              ...strapiPageMock,
+              attributes: {
+                ...strapiPageMock.attributes,
+                locale: 'de',
+              },
+            },
+          ],
+        },
+      })
+      .mockResolvedValueOnce({ data: { data: [] } });
 
     const slugs = await slugsPromise;
 

package/src/integrations/strapi/getAllSlugsFromStrapi.ts

@@ -6,6 +6,7 @@ import {
 import IStrapiResponse from '../../models/strapi/IStrapiResponse';
 import IStrapiData from '../../models/strapi/IStrapiData';
 import LocalizedEntity from '../../models/LocalizedEntity';
+import getAvailableLocalesFromStrapi from './getAvailableLocalesFromStrapi';
 
 interface Options {
   filters?: Record<string, any>;
@@ -18,33 +19,45 @@ const getAllSlugsFromStrapi = async <T extends LocalizedEntity<'slug'>>(
   locales: string[],
   { filters = {} }: Options = { filters: {} }
 ): Promise<Slug[]> => {
-  const params: Record<string, any> = {
-    locale: 'all',
-    'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
-    filters,
-  };
-
-  const { data } = await strapiClient.get<IStrapiResponse<IStrapiData<T>[]>>(
-    path,
-    { params }
-  );
-
-  const slugs: Slug[] = data.data.map((page) => ({
-    slug: page.attributes.slug,
-    locale: page.attributes.locale,
-  }));
-
-  const fallBackSlugs: Slug[] = locales.flatMap((locale) =>
-    slugs
+  const allLocales = await getAvailableLocalesFromStrapi();
+
+  const slugPromises = allLocales.map((locale) => {
+    const params: Record<string, any> = {
+      locale,
+      'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
+      filters,
+    };
+
+    return strapiClient.get<IStrapiResponse<IStrapiData<T>[]>>(path, {
+      params,
+    });
+  });
+
+  const slugResults = await Promise.all(slugPromises);
+
+  let allSlugs = slugResults
+    .map((result) =>
+      result.data.data.map((page) => ({
+        slug: page.attributes.slug,
+        locale: page.attributes.locale,
+      }))
+    )
+    .flat();
+
+  // Identify missing locales for each slug
+  const missingLocales = locales.flatMap((locale) => {
+    return allSlugs
       .filter((slug) => slug.locale === STRAPI_FALLBACK_LOCALE)
-      .map((slug) => ({ ...slug, locale }))
-  );
-
-  const nonFallbackSlugs = slugs.filter(
-    (p) => p.locale !== STRAPI_FALLBACK_LOCALE
-  );
-
-  return [...fallBackSlugs, ...nonFallbackSlugs];
+      .filter(
+        (fallbackSlug) =>
+          !allSlugs.some(
+            (slug) => slug.slug === fallbackSlug.slug && slug.locale === locale
+          )
+      )
+      .map((fallbackSlug) => ({ ...fallbackSlug, locale })); // Clone only for missing locales
+  });
+
+  return [...allSlugs, ...missingLocales]; // Merge original and missing slugs
 };
 
 export default getAllSlugsFromStrapi;

package/src/integrations/strapi/getAvailableLocalesFromStrapi.test.ts

@@ -0,0 +1,22 @@
+import getAvailableLocalesFromStrapi from './getAvailableLocalesFromStrapi';
+import strapiClient from './strapiClient';
+
+jest.mock('./strapiClient', () => ({
+  get: jest.fn(),
+}));
+
+describe('The getAvailableLocales function', () => {
+  it('should fetch available locales and return them correctly', async () => {
+    const mockResponse = {
+      data: [{ code: 'en' }, { code: 'de' }, { code: 'hu' }],
+    };
+
+    (strapiClient.get as jest.Mock).mockResolvedValue(mockResponse);
+
+    const locales = await getAvailableLocalesFromStrapi();
+
+    expect(locales).toEqual(['en', 'de', 'hu']);
+    expect(strapiClient.get).toHaveBeenCalledWith('/i18n/locales');
+    expect(strapiClient.get).toHaveBeenCalledTimes(1);
+  });
+});

package/src/integrations/strapi/getAvailableLocalesFromStrapi.ts

@@ -0,0 +1,8 @@
+import strapiClient from './strapiClient';
+
+const getAvailableLocalesFromStrapi = async (): Promise<string[]> => {
+  const { data } = await strapiClient.get('/i18n/locales');
+  return data.map((locale: { code: string }) => locale.code);
+};
+
+export default getAvailableLocalesFromStrapi;

package/src/integrations/strapi/getPortfolioProjects.ts

@@ -17,7 +17,7 @@ const getPortfolioProjects = async (
 ): Promise<PortfolioProject[]> => {
   const cache = preview ? false : undefined;
   const params: Record<string, any> = {
-    populate: 'deep,6',
+    pLevel: '6',
     locale,
     'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
   };

package/src/integrations/strapi/getStrapiCollectionType.test.ts

@@ -2,6 +2,12 @@ import MockAxios from 'jest-mock-axios';
 import getStrapiCollectionType from './getStrapiCollectionType';
 import StrapiPage from '../../models/strapi/StrapiPage';
 import { strapiPageMock } from '../../test/strapiMocks/strapiPage';
+import getAvailableLocalesFromStrapi from './getAvailableLocalesFromStrapi';
+
+jest.mock('./getAvailableLocalesFromStrapi', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
 
 describe('The getStrapiCollectionType function', () => {
   const germanStrapiPageMock = {
@@ -15,20 +21,39 @@ describe('The getStrapiCollectionType function', () => {
 
   afterEach(() => {
     MockAxios.reset();
+    jest.clearAllMocks();
   });
 
   it('returns the localized versions if available', async () => {
+    (getAvailableLocalesFromStrapi as jest.Mock).mockResolvedValue([
+      'en',
+      'de',
+      'hu',
+    ]);
+
+    MockAxios.get
+      .mockResolvedValueOnce({ data: { data: [strapiPageMock] } }) // english
+      .mockResolvedValueOnce({
+        data: {
+          data: [
+            {
+              ...germanStrapiPageMock,
+              attributes: {
+                ...germanStrapiPageMock.attributes,
+                locale: 'de',
+              },
+            },
+          ],
+        },
+      })
+      .mockResolvedValueOnce({ data: { data: [] } });
+
     const pages = getStrapiCollectionType<StrapiPage, 'slug'>(
       '/api/pages',
       'slug',
       { locale: 'de' }
     );
 
-    MockAxios.mockResponseFor(
-      { url: '/api/pages' },
-      { data: { data: [strapiPageMock, germanStrapiPageMock] } }
-    );
-
     const page = await pages;
 
     expect(page).toStrictEqual([
@@ -41,17 +66,23 @@ describe('The getStrapiCollectionType function', () => {
   });
 
   it('returns the english versions if no localized version is available', async () => {
+    (getAvailableLocalesFromStrapi as jest.Mock).mockResolvedValue([
+      'en',
+      'de',
+      'hu',
+    ]);
+
+    MockAxios.get
+      .mockResolvedValueOnce({ data: { data: [strapiPageMock] } }) // english
+      .mockResolvedValueOnce({ data: { data: [] } })
+      .mockResolvedValueOnce({ data: { data: [] } });
+
     const pages = getStrapiCollectionType<StrapiPage, 'slug'>(
       '/api/pages',
       'slug',
       { locale: 'de' }
     );
 
-    MockAxios.mockResponseFor(
-      { url: '/api/pages' },
-      { data: { data: [strapiPageMock] } }
-    );
-
     const page = await pages;
 
     expect(page).toStrictEqual([

package/src/integrations/strapi/getStrapiCollectionType.ts

@@ -6,6 +6,7 @@ import {
 import IStrapiData from '../../models/strapi/IStrapiData';
 import IStrapiResponse from '../../models/strapi/IStrapiResponse';
 import LocalizedEntity from '../../models/LocalizedEntity';
+import getAvailableLocalesFromStrapi from './getAvailableLocalesFromStrapi';
 
 interface Options {
   locale?: string;
@@ -23,31 +24,43 @@ const getStrapiCollectionType = async <
   { locale = 'en', preview = false, filters = {} }: Options
 ): Promise<IStrapiData<T>[]> => {
   const cache = preview ? false : undefined;
-  const params: Record<string, any> = {
-    populate: 'deep,6',
-    locale: 'all',
-    'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
-    filters,
-  };
-
-  if (preview) {
-    params.publicationState = 'preview';
+  const allLocales = await getAvailableLocalesFromStrapi();
+
+  if (!allLocales.includes(STRAPI_FALLBACK_LOCALE)) {
+    allLocales.push(STRAPI_FALLBACK_LOCALE);
   }
 
-  const { data } = await strapiClient.get<IStrapiResponse<IStrapiData<T>[]>>(
-    path,
-    { params, cache }
-  );
+  const promises = allLocales.map((loc) => {
+    const params: Record<string, any> = {
+      pLevel: '6',
+      locale: loc,
+      'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
+      filters,
+    };
+
+    if (preview) {
+      params.publicationState = 'preview';
+    }
+
+    return strapiClient.get<IStrapiResponse<IStrapiData<T>[]>>(path, {
+      params,
+      cache,
+    });
+  });
+
+  const responses = await Promise.all(promises);
+
+  const results = responses.flatMap((response) => response.data.data);
 
-  const localizedResponses = data.data.filter(
+  const localizedResponses = results.filter(
     (d) => d.attributes.locale === locale
   );
 
-  const fallbackResponses = data.data.filter(
+  const fallbackResponses = results.filter(
     (d) => d.attributes.locale === STRAPI_FALLBACK_LOCALE
   );
 
-  const responses = fallbackResponses.map((fallbackResponse) => {
+  const result = fallbackResponses.map((fallbackResponse) => {
     const localizedResponse = localizedResponses.find(
       (localized) =>
         localized.attributes[key] === fallbackResponse.attributes[key]
@@ -56,7 +69,7 @@ const getStrapiCollectionType = async <
     return localizedResponse || fallbackResponse;
   });
 
-  return responses;
+  return result;
 };
 
 export default getStrapiCollectionType;

package/src/integrations/strapi/getStrapiSingleType.ts

@@ -19,7 +19,7 @@ const getStrapiSingleType = async <T>(
 ): Promise<IStrapiData<T>> => {
   const cache = preview ? false : undefined;
   const params: Record<string, any> = {
-    populate: 'deep,6',
+    pLevel: '6',
     locale,
     'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
     filters,

package/src/integrations/strapi/strapiClient.ts

@@ -6,6 +6,7 @@ import { STRAPI_URI } from '../../constants/strapi';
 const strapiClient = setupCache(
   axios.create({
     baseURL: `${STRAPI_URI}/api`,
+    headers: { 'Strapi-Response-Format': 'v4' },
     paramsSerializer: (p) => qs.stringify(p, { encodeValuesOnly: true }),
     timeout: 60_000,
   }),

package/src/slices/Events/Events.tsx

@@ -90,7 +90,7 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
     url.searchParams.append('pagination[limit]', batchSize.toString());
     url.searchParams.append(startFilter, now);
     url.searchParams.append('locale', locale);
-    url.searchParams.append('populate', 'deep,6');
+    url.searchParams.append('pLevel', '6');
 
     if (sort[0] === Sort.OLDEST_FIRST) {
       url.searchParams.append('sort', 'start:asc');
@@ -165,10 +165,15 @@ export const Events: React.FC<EventsProps> = ({ slice }: EventsProps) => {
   const fetchAllOptions = useCallback(async () => {
     const url = new URL(`/treely-events`, STRAPI_URI);
     url.searchParams.append('locale', locale);
-    url.searchParams.append('populate', 'deep,6');
+    url.searchParams.append('pLevel', '6');
 
     const response = await fetch(
-      `${STRAPI_URI}/api/treely-events${url.search}`
+      `${STRAPI_URI}/api/treely-events${url.search}`,
+      {
+        headers: {
+          'Strapi-Response-Format': 'v4',
+        },
+      }
     );
     const data = await response.json();
 

package/src/stories/{Introduction.stories.mdx → Introduction.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Introduction" />