@treely/strapi-slices 7.4.1 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "7.4.1",
+  "version": "7.5.0",
   "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,61 @@ 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: [
+            {
+              ...strapiPageMock,
+              attributes: {
+                ...strapiPageMock.attributes,
+                locale: 'hu',
+              },
+            },
+          ],
+        },
+      });
 
     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('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,17 @@ 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';
+import strapiClient from './strapiClient';
+
+jest.mock('./strapiClient', () => ({
+  get: jest.fn(),
+}));
+
+jest.mock('./getAvailableLocalesFromStrapi', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
 
 describe('The getStrapiCollectionType function', () => {
   const germanStrapiPageMock = {
@@ -15,20 +26,28 @@ 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',
+    ]);
+
+    (strapiClient.get as jest.Mock).mockResolvedValue({
+      data: {
+        data: [strapiPageMock, germanStrapiPageMock],
+      },
+    });
+
     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 +60,24 @@ describe('The getStrapiCollectionType function', () => {
   });
 
   it('returns the english versions if no localized version is available', async () => {
+    (getAvailableLocalesFromStrapi as jest.Mock).mockResolvedValue([
+      'en',
+      'de',
+      'hu',
+    ]);
+
+    (strapiClient.get as jest.Mock).mockResolvedValue({
+      data: {
+        data: [strapiPageMock],
+      },
+    });
+
     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,40 +24,46 @@ 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 responses: IStrapiData<T>[] = [];
 
-  const localizedResponses = data.data.filter(
-    (d) => d.attributes.locale === locale
-  );
+  for (const loc of allLocales) {
+    const params: Record<string, any> = {
+      pLevel: '6',
+      loc,
+      'pagination[pageSize]': STRAPI_DEFAULT_PAGE_SIZE,
+      filters,
+    };
 
-  const fallbackResponses = data.data.filter(
-    (d) => d.attributes.locale === STRAPI_FALLBACK_LOCALE
-  );
+    if (preview) {
+      params.publicationState = 'preview';
+    }
 
-  const responses = fallbackResponses.map((fallbackResponse) => {
-    const localizedResponse = localizedResponses.find(
-      (localized) =>
-        localized.attributes[key] === fallbackResponse.attributes[key]
+    const { data } = await strapiClient.get<IStrapiResponse<IStrapiData<T>[]>>(
+      path,
+      { params, cache }
     );
 
-    return localizedResponse || fallbackResponse;
-  });
+    responses.push(...data.data);
+  }
+
+  const groupedResponses = responses.reduce<Record<string, IStrapiData<T>>>(
+    (acc, response) => {
+      const keyValue = response.attributes[key];
+      if (!acc[keyValue] || response.attributes.locale === locale) {
+        acc[keyValue] = response;
+      }
+      return acc;
+    },
+    {}
+  );
 
-  return responses;
+  return Object.values(groupedResponses);
 };
 
 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/slices/TextCarousel/TextCarousel.tsx

@@ -105,54 +105,56 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
 
       <CarouselContainer ref={containerRef}>
         <Box position="relative" width="full">
-          <CarouselInnerContainer
-            numberOfItems={slice.slides.length}
-            animate={{
-              x: offsetLeft,
-            }}
-            transition={{
-              duration: 0.3,
-              ease: 'easeInOut',
-            }}
-          >
-            {displaySlides.map(({ id, title, text, icon, image, button }) => (
-              <CardContainer key={id} ref={itemRef}>
-                <TextCardWithIcon
-                  title={title}
-                  text={text}
-                  height="full"
-                  icon={
-                    <Image
-                      src={strapiMediaUrl(icon.img, 'small')}
-                      alt={icon.alt}
-                      fill
-                      style={{ objectFit: icon.objectFit || 'contain' }}
-                    />
-                  }
-                  image={
-                    image && (
+          <Wrapper>
+            <CarouselInnerContainer
+              numberOfItems={slice.slides.length}
+              animate={{
+                x: offsetLeft,
+              }}
+              transition={{
+                duration: 0.3,
+                ease: 'easeInOut',
+              }}
+            >
+              {displaySlides.map(({ id, title, text, icon, image, button }) => (
+                <CardContainer key={id} ref={itemRef}>
+                  <TextCardWithIcon
+                    title={title}
+                    text={text}
+                    height="full"
+                    icon={
                       <Image
-                        src={strapiMediaUrl(image?.img, 'medium')}
-                        alt={image?.alt}
+                        src={strapiMediaUrl(icon.img, 'small')}
+                        alt={icon.alt}
                         fill
-                        style={{
-                          objectFit: image?.objectFit || 'cover',
-                          borderRadius: 'var(--boemly-radii-xl)',
-                        }}
+                        style={{ objectFit: icon.objectFit || 'contain' }}
                       />
-                    )
-                  }
-                  button={
-                    button && {
-                      text: button.text,
-                      onClick: () => push(strapiLinkUrl(button)),
                     }
-                  }
-                  displayAs="column"
-                />
-              </CardContainer>
-            ))}
-          </CarouselInnerContainer>
+                    image={
+                      image && (
+                        <Image
+                          src={strapiMediaUrl(image?.img, 'medium')}
+                          alt={image?.alt}
+                          fill
+                          style={{
+                            objectFit: image?.objectFit || 'cover',
+                            borderRadius: 'var(--boemly-radii-xl)',
+                          }}
+                        />
+                      )
+                    }
+                    button={
+                      button && {
+                        text: button.text,
+                        onClick: () => push(strapiLinkUrl(button)),
+                      }
+                    }
+                    displayAs="column"
+                  />
+                </CardContainer>
+              ))}
+            </CarouselInnerContainer>
+          </Wrapper>
           <Box
             display={['none', null, null, !!allowScroll ? 'flex' : 'none']}
             pointerEvents="none"

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" />