@treely/strapi-slices 1.0.1 → 1.0.2

package/src/slices/LinkCardsGrid/LinkCardsGrid.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@/test/testUtils';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
 import LinkCardsGrid from '.';
 import { LinkCardsGridProps } from './LinkCardsGrid';
 

package/src/slices/LinkCardsGrid/LinkCardsGrid.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Link from 'next/link';
 import {
   Box,
@@ -9,9 +10,9 @@ import {
   Wrapper,
 } from 'boemly';
 import { CaretRight } from '@phosphor-icons/react';
-import { MEDIUM_TRANSITION_DURATION } from '@/constants/animations';
-import strapiLinkUrl from '@/utils/strapiLinkUrl';
-import StrapiLink from '@/models/strapi/StrapiLink';
+import { MEDIUM_TRANSITION_DURATION } from '../../constants/animations';
+import strapiLinkUrl from '../../utils/strapiLinkUrl';
+import StrapiLink from '../../models/strapi/StrapiLink';
 
 interface LinkCardsGridSlice {
   tagline?: string;
@@ -41,53 +42,54 @@ export const LinkCardsGrid: React.FC<LinkCardsGridProps> = ({
 
       <SimpleGrid mt="16" columns={[1, null, null, null, 2]} gap="4">
         {slice.cards.map(({ id, title, text, link }) => (
-          <Link key={id} href={strapiLinkUrl(link)} passHref legacyBehavior>
+          <Box
+            key={id}
+            as={Link}
+            href={strapiLinkUrl(link)}
+            data-testid="link"
+            px="10"
+            py="8"
+            borderStyle="solid"
+            borderWidth="thin"
+            borderColor="gray.200"
+            borderRadius="2xl"
+            display="flex"
+            flexDir="row"
+            alignItems="center"
+            justifyContent="space-between"
+            cursor="pointer"
+            transitionDuration={`${MEDIUM_TRANSITION_DURATION}s`}
+            _hover={{ backgroundColor: 'gray.50' }}
+          >
+            <div>
+              <Heading as="h4" size="lg">
+                {title}
+              </Heading>
+              {text && (
+                <Text mt="2" size="smRegularNormal">
+                  {text}
+                </Text>
+              )}
+            </div>
+
             <Box
-              data-testid="link"
-              px="10"
-              py="8"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
               borderStyle="solid"
               borderWidth="thin"
               borderColor="gray.200"
               borderRadius="2xl"
-              display="flex"
-              flexDir="row"
-              alignItems="center"
-              justifyContent="space-between"
-              cursor="pointer"
-              transitionDuration={`${MEDIUM_TRANSITION_DURATION}s`}
-              _hover={{ backgroundColor: 'gray.50' }}
+              height="12"
+              width="12"
+              minWidth="12"
+              minHeight="12"
+              ml="6"
+              backgroundColor="white"
             >
-              <div>
-                <Heading as="h4" size="lg">
-                  {title}
-                </Heading>
-                {text && (
-                  <Text mt="2" size="smRegularNormal">
-                    {text}
-                  </Text>
-                )}
-              </div>
-
-              <Box
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-                borderStyle="solid"
-                borderWidth="thin"
-                borderColor="gray.200"
-                borderRadius="2xl"
-                height="12"
-                width="12"
-                minWidth="12"
-                minHeight="12"
-                ml="6"
-                backgroundColor="white"
-              >
-                <CaretRight />
-              </Box>
+              <CaretRight />
             </Box>
-          </Link>
+          </Box>
         ))}
       </SimpleGrid>
     </Wrapper>

package/src/slices/LogoGridWithText/LogoGridWithText.stories.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { storybookStrapiTreeIconMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import { storybookStrapiTreeIconMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import LogoGridWithText from '.';
 
 export default {
-  title: 'sections/LogoGridWithText',
+  title: 'slices/LogoGridWithText',
   component: LogoGridWithText,
 } as Meta<typeof LogoGridWithText>;
 

package/src/slices/LogoGridWithText/LogoGridWithText.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import LogoGridWithText from '.';
 import { LogoGridWithTextProps } from './LogoGridWithText';
 

package/src/slices/LogoGridWithText/LogoGridWithText.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Box,
   DefaultSectionContainer,
@@ -10,12 +11,11 @@ import {
 } from 'boemly';
 import Image from 'next/image';
 import { ArrowRight } from '@phosphor-icons/react';
-import strapiLinkUrl from '@/utils/strapiLinkUrl';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
-import StrapiImageWithLink from '@/models/strapi/StrapiImageWithLink';
-import StrapiLink from '@/models/strapi/StrapiLink';
-import { LogoFlexContainer } from './styles';
+import strapiLinkUrl from '../../utils/strapiLinkUrl';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
+import StrapiImageWithLink from '../../models/strapi/StrapiImageWithLink';
+import StrapiLink from '../../models/strapi/StrapiLink';
 
 export interface LogoGridWithTextProps {
   slice: {
@@ -56,7 +56,7 @@ export const LogoGridWithText: React.FC<LogoGridWithTextProps> = ({
               />
             )}
           </Box>
-          <LogoFlexContainer>
+          <Flex flexDir="row" flexWrap="wrap" gap={['12', null, null, '28']}>
             {slice.logos.map((logo) => (
               <Flex
                 key={logo.id}
@@ -87,7 +87,7 @@ export const LogoGridWithText: React.FC<LogoGridWithTextProps> = ({
                 </Box>
               </Flex>
             ))}
-          </LogoFlexContainer>
+          </Flex>
         </SimpleGrid>
       </Wrapper>
     </DefaultSectionContainer>

package/src/slices/MapHero/MapHero.stories.tsx

@@ -1,13 +1,14 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
 import {
   storybookStrapiGradientBottomUpMock,
   storybookStrapiMapMock,
-} from '@/test/storybookMocks/storybookStrapiMedia';
+} from '../../test/storybookMocks/storybookStrapiMedia';
 import MapHero from '.';
 
 export default {
-  title: 'sections/MapHero',
+  title: 'slices/MapHero',
   component: MapHero,
 } as Meta<typeof MapHero>;
 

package/src/slices/MapHero/MapHero.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import MapHero from '.';
 import { MapHeroProps } from './MapHero';
 

package/src/slices/MapHero/MapHero.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { DefaultSectionHeader, Flex, useMediaQuery, Wrapper } from 'boemly';
 import Image from 'next/image';
-import { BREAKPOINT_LG_QUERY } from '@/constants/breakpoints';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
-import StrapiImage from '@/models/strapi/StrapiImage';
-import StrapiLink from '@/models/strapi/StrapiLink';
+import { BREAKPOINT_LG_QUERY } from '../../constants/breakpoints';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import StrapiLink from '../../models/strapi/StrapiLink';
 import {
   MapHeroContainer,
   MapHeroTextContainer,

package/src/slices/MapHero/styles.ts

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
-import { BREAKPOINT_LG } from '@/constants/breakpoints';
+import { BREAKPOINT_LG } from '../../constants/breakpoints';
+import { Box } from 'boemly';
 
-export const MapHeroContainer = styled.div`
+export const MapHeroContainer = styled(Box)`
   position: relative;
   width: 100vw;
   height: var(--default-hero-height);
@@ -15,7 +16,7 @@ export const MapHeroContainer = styled.div`
   }
 `;
 
-export const MapHeroTextContainer = styled.div`
+export const MapHeroTextContainer = styled(Box)`
   position: absolute;
   width: 100vw;
   top: 56%;
@@ -31,7 +32,7 @@ export const MapHeroTextContainer = styled.div`
   }
 `;
 
-export const ShapeContainer = styled.div`
+export const ShapeContainer = styled(Box)`
   position: absolute;
   bottom: calc(var(--boemly-space-8) * -1);
   left: 0;
@@ -51,7 +52,7 @@ export const ShapeContainer = styled.div`
   }
 `;
 
-export const MapContainer = styled.div`
+export const MapContainer = styled(Box)`
   position: absolute;
 
   width: 50%;
@@ -77,7 +78,7 @@ export const MapContainer = styled.div`
   }
 `;
 
-export const MapGradient = styled.div`
+export const MapGradient = styled(Box)`
   position: absolute;
   top: 0;
   right: 0;

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

@@ -1,11 +1,12 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import fpmProjectMock from '@/test/integrationMocks/fpmProjectMock';
-import CreditsAvailableState from '@/models/CreditsAvailableState';
+import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
+import CreditsAvailableState from '../../models/CreditsAvailableState';
 import ProjectFacts from '.';
 
 export default {
-  title: 'sections/ProjectFacts',
+  title: 'slices/ProjectFacts',
   component: ProjectFacts,
 } as Meta<typeof ProjectFacts>;
 

package/src/slices/ProjectFacts/ProjectFacts.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen } from '@/test/testUtils';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
 import ProjectFacts from '.';
 import { ProjectFactsProps } from './ProjectFacts';
-import portfolioProjectMock from '@/test/mocks/portfolioProjectMock';
+import portfolioProjectMock from '../../test/mocks/portfolioProjectMock';
 
 const defaultProps: ProjectFactsProps = {
   slice: {

package/src/slices/ProjectFacts/ProjectFacts.tsx

@@ -1,11 +1,12 @@
+import React from 'react';
 import { DefaultSectionContainer, Flex, Wrapper } from 'boemly';
-import StrapiLink from '@/models/strapi/StrapiLink';
-import PortfolioProject from '@/models/PortfolioProject';
-import SmallCheckout from '@/components/portfolio/SmallCheckout';
-import ProjectInfo from '@/components/portfolio/ProjectInfo';
-import DocumentsDownloadList from '@/components/portfolio/DocumentsDownloadList';
-import Contact from '@/components/portfolio/Contact';
-import StrapiImage from '@/models/strapi/StrapiImage';
+import StrapiLink from '../../models/strapi/StrapiLink';
+import PortfolioProject from '../../models/PortfolioProject';
+import SmallCheckout from '../../components/portfolio/SmallCheckout';
+import ProjectInfo from '../../components/portfolio/ProjectInfo';
+import DocumentsDownloadList from '../../components/portfolio/DocumentsDownloadList';
+import Contact from '../../components/portfolio/Contact';
+import StrapiImage from '../../models/strapi/StrapiImage';
 
 export interface ProjectFactsProps {
   project?: PortfolioProject;

package/src/slices/ProjectsGrid/ProjectsGrid.stories.tsx

@@ -1,11 +1,12 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
-import Locale from '@/models/Locale';
+import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
+import Locale from '../../models/Locale';
 import ProjectsGrid from '.';
 
 export default {
-  title: 'sections/ProjectsGrid',
+  title: 'slices/ProjectsGrid',
   component: ProjectsGrid,
 } as Meta<typeof ProjectsGrid>;
 

package/src/slices/ProjectsGrid/ProjectsGrid.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiProjectCardMock } from '@/test/strapiMocks/strapiProjectCard';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiProjectCardMock } from '../../test/strapiMocks/strapiProjectCard';
 import ProjectsGrid from '.';
 import { ProjectsGridProps } from './ProjectsGrid';
 

package/src/slices/ProjectsGrid/ProjectsGrid.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Box,
   DefaultSectionContainer,
@@ -7,9 +8,9 @@ import {
 } from 'boemly';
 import Image from 'next/image';
 import Link from 'next/link';
-import { MEDIUM_TRANSITION_DURATION } from '@/constants/animations';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import StrapiProjectCard from '@/models/strapi/StrapiProjectCard';
+import { MEDIUM_TRANSITION_DURATION } from '../../constants/animations';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import StrapiProjectCard from '../../models/strapi/StrapiProjectCard';
 
 export interface ProjectsGridProps {
   slice: {

package/src/slices/ProjectsMap/MapMarker.test.tsx

@@ -1,5 +1,6 @@
-import { fireEvent, render, screen, waitFor } from '@/test/testUtils';
-import CreditsAvailableState from '@/models/CreditsAvailableState';
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '../../test/testUtils';
+import CreditsAvailableState from '../../models/CreditsAvailableState';
 import MapMarker, { MapMarkerProps } from './MapMarker';
 import messagesEn from './messages.en';
 

package/src/slices/ProjectsMap/MapMarker.tsx

@@ -1,3 +1,4 @@
+import React, { useContext } from 'react';
 import {
   Box,
   Button,
@@ -10,9 +11,9 @@ import {
 } from 'boemly';
 import { MapPin } from '@phosphor-icons/react';
 import NextLink from 'next/link';
-import CreditsAvailableBadge from '@/components/CreditsAvailableBadge';
-import CreditsAvailableState from '@/models/CreditsAvailableState';
-import { FormattedMessage } from 'react-intl';
+import CreditsAvailableBadge from '../../components/CreditsAvailableBadge';
+import CreditsAvailableState from '../../models/CreditsAvailableState';
+import { IntlContext } from '../../components/ContextProvider';
 
 export interface MapMarkerProps {
   title: string;
@@ -29,6 +30,7 @@ const MapMarker = ({
   creditsAvailable,
   isPublic = false,
 }: MapMarkerProps) => {
+  const { formatMessage } = useContext(IntlContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const blue600 = useToken('colors', 'blue.600');
 
@@ -86,7 +88,7 @@ const MapMarker = ({
                 mt="4"
                 whiteSpace="nowrap"
               >
-                <FormattedMessage id="sections.projectsMap.link.text" />
+                {formatMessage({ id: 'sections.projectsMap.link.text' })}
               </Button>
             )}
           </Flex>

package/src/slices/ProjectsMap/ProjectsMap.stories.tsx

@@ -1,11 +1,12 @@
+import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import fpmProjectMock from '@/test/integrationMocks/fpmProjectMock';
-import CreditsAvailableState from '@/models/CreditsAvailableState';
+import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
+import CreditsAvailableState from '../../models/CreditsAvailableState';
 import ProjectsMap from '.';
 
 export default {
-  title: 'sections/ProjectsMap',
+  title: 'slices/ProjectsMap',
   component: ProjectsMap,
 } as Meta<typeof ProjectsMap>;
 

package/src/slices/ProjectsMap/ProjectsMap.test.tsx

@@ -1,6 +1,7 @@
-import { render, screen } from '@/test/testUtils';
-import fpmProjectMock from '@/test/integrationMocks/fpmProjectMock';
-import { MAPBOX_INITIAL_ZOOM } from '@/constants/mapbox';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
+import { MAPBOX_INITIAL_ZOOM } from '../../constants/mapbox';
 import ProjectsMap from '.';
 import { ProjectsMapProps } from './ProjectsMap';
 import {

package/src/slices/ProjectsMap/ProjectsMap.tsx

@@ -1,12 +1,12 @@
+import React, { useContext } from 'react';
 import {
   MAPBOX_INITIAL_ZOOM,
   MAPBOX_MAX_ZOOM,
   MAPBOX_TOKEN,
   MapBoxStyle,
-} from '@/constants/mapbox';
-import { useIntl } from 'react-intl';
-import BBox from '@/models/BBox';
-import mergeBoundingBoxes from '@/utils/mergeBoundingBoxes';
+} from '../../constants/mapbox';
+import BBox from '../../models/BBox';
+import mergeBoundingBoxes from '../../utils/mergeBoundingBoxes';
 import { css } from '@emotion/react';
 import {
   Box,
@@ -17,12 +17,13 @@ import {
 import mapboxgl, { LngLatBoundsLike, LngLatLike, Map, Marker } from 'mapbox-gl';
 import { MutableRefObject, createRef, useEffect, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
-import PortfolioProject from '@/models/PortfolioProject';
-import MinimalProviders from '@/components/MinimalProviders';
+import PortfolioProject from '../../models/PortfolioProject';
+import MinimalProviders from '../../components/MinimalProviders';
 import MapMarker from './MapMarker';
-import 'mapbox-gl/dist/mapbox-gl.css';
+import mapboxStyle from './mapboxStyle';
+import { IntlContext } from '../../components/ContextProvider';
 
-mapboxgl.accessToken = 'MAPBOX_TOKEN';
+mapboxgl.accessToken = MAPBOX_TOKEN;
 
 export interface ProjectsMapProps {
   slice: {
@@ -44,7 +45,7 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
   slice,
   projects,
 }: ProjectsMapProps) => {
-  const { locale } = useIntl();
+  const { locale } = useContext(IntlContext);
 
   const filteredProjects = projects.filter(
     (project) => project.geom
@@ -113,38 +114,48 @@ export const ProjectsMap: React.FC<ProjectsMapProps> = ({
 
     // Clean up on unmount
     return () => map.remove();
-  }, []);
+  }, [locale]);
 
   return (
     <DefaultSectionContainer>
-      <Wrapper>
-        {slice.title ? (
-          <>
-            <DefaultSectionHeader
-              tagline={slice.tagline}
-              title={slice.title}
-              text={slice.text}
-              taglineProps={{ textAlign: 'center' }}
-              titleProps={{ textAlign: 'center', maxW: '6xl', marginX: 'auto' }}
-              textProps={{ textAlign: 'center', maxW: '3xl', marginX: 'auto' }}
-            />
-            <Box height="16" />
-          </>
-        ) : (
-          <></>
-        )}
-
-        <Box
-          height="xl"
-          ref={mapContainer}
-          borderRadius="xl"
-          overflow="hidden"
-          boxShadow={['md', null, null, 'none']}
-          css={css`
-            mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-          `}
-        />
-      </Wrapper>
+      <Box css={mapboxStyle}>
+        <Wrapper>
+          {slice.title ? (
+            <>
+              <DefaultSectionHeader
+                tagline={slice.tagline}
+                title={slice.title}
+                text={slice.text}
+                taglineProps={{ textAlign: 'center' }}
+                titleProps={{
+                  textAlign: 'center',
+                  maxW: '6xl',
+                  marginX: 'auto',
+                }}
+                textProps={{
+                  textAlign: 'center',
+                  maxW: '3xl',
+                  marginX: 'auto',
+                }}
+              />
+              <Box height="16" />
+            </>
+          ) : (
+            <></>
+          )}
+
+          <Box
+            height="xl"
+            ref={mapContainer}
+            borderRadius="xl"
+            overflow="hidden"
+            boxShadow={['md', null, null, 'none']}
+            css={css`
+              mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+            `}
+          />
+        </Wrapper>
+      </Box>
     </DefaultSectionContainer>
   );
 };