@treely/strapi-slices 1.0.0 → 1.0.2

package/src/components/portfolio/ProjectInfo/ProjectInfo.tsx

@@ -1,3 +1,4 @@
+import React, { useContext } from 'react';
 import {
   Box,
   Container,
@@ -8,17 +9,17 @@ import {
   SimpleGrid,
   Spacer,
 } from 'boemly';
-import { FormattedMessage, useIntl } from 'react-intl';
 import Image from 'next/image';
-import convertAreaM2ToHa from '@/utils/convertAreaM2ToHa';
-import convertCo2AmountKgToTons from '@/utils/convertCo2AmountKgToTons';
-import CreditsAvailableBadge from '@/components/CreditsAvailableBadge';
-import PortfolioProject from '@/models/PortfolioProject';
+import convertAreaM2ToHa from '../../../utils/convertAreaM2ToHa';
+import convertCo2AmountKgToTons from '../../../utils/convertCo2AmountKgToTons';
+import CreditsAvailableBadge from '../../../components/CreditsAvailableBadge';
+import PortfolioProject from '../../../models/PortfolioProject';
 import {
   FORMAT_AS_HECTARE_CONFIG,
   FORMAT_AS_PERCENT_CONFIG,
-} from '@/constants/formatter';
-import getTimeSpanInYears from '@/utils/getTimeSpanInYears';
+} from '../../../constants/formatter';
+import getTimeSpanInYears from '../../../utils/getTimeSpanInYears';
+import { IntlContext } from '../../ContextProvider';
 
 export interface ProjectInfoProps {
   project: PortfolioProject;
@@ -40,12 +41,12 @@ export const ProjectInfo: React.FC<ProjectInfoProps> = ({
   project,
   subtitles,
 }: ProjectInfoProps) => {
-  const { formatMessage, formatNumber, formatDate } = useIntl();
+  const { formatMessage, formatNumber, formatDate } = useContext(IntlContext);
 
   return (
     <Container p="2" width="full">
       <Heading size="xl" textAlign="left">
-        <FormattedMessage id="features.projectInfo.projectInfo.value" />
+        {formatMessage({ id: 'features.projectInfo.projectInfo.value' })}
       </Heading>
 
       <Spacer height="8" />

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

@@ -1,4 +1,5 @@
-import { render, screen, userEvent, waitFor } from '@/test/testUtils';
+import React from 'react';
+import { render, screen, userEvent, waitFor } from '../../../test/testUtils';
 import { pushSpy } from '../../../../__mocks__/next/router';
 
 import SmallCheckout from '.';

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

@@ -1,5 +1,6 @@
-import { CDN_URI, FPM_API_URI } from '@/constants/api';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
+import React, { useContext, useCallback } from 'react';
+import { CDN_URI, FPM_API_URI } from '../../../constants/api';
+import StrapiLinkButton from '../../../components/StrapiLinkButton';
 import {
   BoemlyFormControl,
   Box,
@@ -19,14 +20,13 @@ import {
   FormikProps,
 } from 'formik';
 import { useRouter } from 'next/router';
-import { FormattedMessage, useIntl } from 'react-intl';
 import Image from 'next/image';
-import { useCallback } from 'react';
-import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiLink from '../../../models/strapi/StrapiLink';
 import {
   MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY,
   MINIMUM_CONTRIBUTION_VALUE_IN_MONEY,
-} from '@/constants/domain';
+} from '../../../constants/domain';
+import { IntlContext } from '../../ContextProvider';
 
 export interface SmallCheckoutProps {
   batchId: string;
@@ -55,32 +55,35 @@ const SmallCheckout = ({
   subtitle,
   button,
 }: SmallCheckoutProps) => {
-  const { formatNumber, formatMessage } = useIntl();
+  const { formatNumber, formatMessage, locale } = useContext(IntlContext);
   const { push } = useRouter();
 
-  const validateForm = useCallback((values: SmallCheckoutForm) => {
-    const errors: FormikErrors<SmallCheckoutForm> = {};
+  const validateForm = useCallback(
+    (values: SmallCheckoutForm) => {
+      const errors: FormikErrors<SmallCheckoutForm> = {};
 
-    if (!values.contributionValueCurrency) {
-      errors.contributionValueCurrency = formatMessage({
-        id: 'portfolio.smallCheckout.contributionValueCurrency.validation.empty',
-      });
-    } else if (
-      values.contributionValueCurrency < MINIMUM_CONTRIBUTION_VALUE_IN_MONEY
-    ) {
-      errors.contributionValueCurrency = formatMessage({
-        id: `portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.${currency}`,
-      });
-    } else if (
-      values.contributionValueCurrency > MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY
-    ) {
-      errors.contributionValueCurrency = formatMessage({
-        id: 'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh',
-      });
-    }
+      if (!values.contributionValueCurrency) {
+        errors.contributionValueCurrency = formatMessage({
+          id: 'portfolio.smallCheckout.contributionValueCurrency.validation.empty',
+        });
+      } else if (
+        values.contributionValueCurrency < MINIMUM_CONTRIBUTION_VALUE_IN_MONEY
+      ) {
+        errors.contributionValueCurrency = formatMessage({
+          id: `portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.${currency}`,
+        });
+      } else if (
+        values.contributionValueCurrency > MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY
+      ) {
+        errors.contributionValueCurrency = formatMessage({
+          id: 'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh',
+        });
+      }
 
-    return errors;
-  }, []);
+      return errors;
+    },
+    [locale]
+  );
 
   const onSubmit = async ({ contributionValueCurrency }: SmallCheckoutForm) => {
     push(
@@ -158,9 +161,9 @@ const SmallCheckout = ({
                       })}
                       rightAddonsOrElements={[
                         <InputRightAddon key="currencyUnit">
-                          <FormattedMessage
-                            id={`portfolio.smallCheckout.contributionValueCurrency.unit.${currency}`}
-                          />
+                          {formatMessage({
+                            id: `portfolio.smallCheckout.contributionValueCurrency.unit.${currency}`,
+                          })}
                         </InputRightAddon>,
                       ]}
                       isInvalid={
@@ -212,7 +215,7 @@ const SmallCheckout = ({
             <Spacer height="4" />
 
             <Button type="submit" width="full">
-              <FormattedMessage id="portfolio.smallCheckout.submitButton" />
+              {formatMessage({ id: 'portfolio.smallCheckout.submitButton' })}
             </Button>
           </Form>
         )}

package/src/constants/globalStyle.ts

@@ -52,4 +52,8 @@ export const GLOBAL_STYLE = css`
   :root {
     --default-hero-height: calc(100vh - var(--boemly-space-24));
   }
+
+  a {
+    text-decoration: none;
+  }
 `;

package/src/icons/LinkedInIcon.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const LinkedInIcon = () => (
   <svg
     width="14"

package/src/rootMessages.de.ts

@@ -1,14 +1,14 @@
-import comparisonMessagesDe from '@/slices/Comparison/messages.de';
-import ctaMessagesDe from '@/slices/Cta/messages.de';
-import customerStoriesDe from '@/slices/CustomerStories/messages.de';
-import glossaryMessagesDe from '@/slices/Glossary/messages.de';
-import projectFactsMessagesDe from '@/slices/ProjectFacts/messages.de';
-import projectsMapMessagesDe from '@/slices/ProjectsMap/messages.de';
-import shopCheckoutMessagesDe from '@/slices/ShopCheckout/messages.de';
-import creditsAvailableBadgeMessagesDe from '@/components/CreditsAvailableBadge/messages.de';
-import portfolioDocumentsDownloadListMessagesDe from '@/components/portfolio/DocumentsDownloadList/messages.de';
-import portfolioProjectInfoMessagesDe from '@/components/portfolio/ProjectInfo/messages.de';
-import portfolioSmallCheckoutMessagesDe from '@/components/portfolio/SmallCheckout/messages.de';
+import comparisonMessagesDe from './slices/Comparison/messages.de';
+import ctaMessagesDe from './slices/Cta/messages.de';
+import customerStoriesDe from './slices/CustomerStories/messages.de';
+import glossaryMessagesDe from './slices/Glossary/messages.de';
+import projectFactsMessagesDe from './slices/ProjectFacts/messages.de';
+import projectsMapMessagesDe from './slices/ProjectsMap/messages.de';
+import shopCheckoutMessagesDe from './slices/ShopCheckout/messages.de';
+import creditsAvailableBadgeMessagesDe from './components/CreditsAvailableBadge/messages.de';
+import portfolioDocumentsDownloadListMessagesDe from './components/portfolio/DocumentsDownloadList/messages.de';
+import portfolioProjectInfoMessagesDe from './components/portfolio/ProjectInfo/messages.de';
+import portfolioSmallCheckoutMessagesDe from './components/portfolio/SmallCheckout/messages.de';
 
 import unitMessagesDe from './unit.messages.en';
 
@@ -22,7 +22,7 @@ const rootMessagesDe = {
   ...portfolioSmallCheckoutMessagesDe,
 
   //
-  // Sections
+  // Slices
   //
   ...comparisonMessagesDe,
   ...ctaMessagesDe,

package/src/rootMessages.en.ts

@@ -1,14 +1,14 @@
-import comparisonMessagesEn from '@/slices/Comparison/messages.en';
-import ctaMessagesEn from '@/slices/Cta/messages.en';
-import customerStoriesEn from '@/slices/CustomerStories/messages.en';
-import glossaryMessagesEn from '@/slices/Glossary/messages.en';
-import projectFactsMessagesEn from '@/slices/ProjectFacts/messages.en';
-import projectsMapMessagesEn from '@/slices/ProjectsMap/messages.en';
-import shopCheckoutMessagesEn from '@/slices/ShopCheckout/messages.en';
-import creditsAvailableBadgeMessagesEn from '@/components/CreditsAvailableBadge/messages.en';
-import portfolioDocumentsDownloadListMessagesEn from '@/components/portfolio/DocumentsDownloadList/messages.en';
-import portfolioProjectInfoMessagesEn from '@/components/portfolio/ProjectInfo/messages.en';
-import portfolioSmallCheckoutMessagesEn from '@/components/portfolio/SmallCheckout/messages.en';
+import comparisonMessagesEn from './slices/Comparison/messages.en';
+import ctaMessagesEn from './slices/Cta/messages.en';
+import customerStoriesEn from './slices/CustomerStories/messages.en';
+import glossaryMessagesEn from './slices/Glossary/messages.en';
+import projectFactsMessagesEn from './slices/ProjectFacts/messages.en';
+import projectsMapMessagesEn from './slices/ProjectsMap/messages.en';
+import shopCheckoutMessagesEn from './slices/ShopCheckout/messages.en';
+import creditsAvailableBadgeMessagesEn from './components/CreditsAvailableBadge/messages.en';
+import portfolioDocumentsDownloadListMessagesEn from './components/portfolio/DocumentsDownloadList/messages.en';
+import portfolioProjectInfoMessagesEn from './components/portfolio/ProjectInfo/messages.en';
+import portfolioSmallCheckoutMessagesEn from './components/portfolio/SmallCheckout/messages.en';
 
 import unitMessagesEn from './unit.messages.en';
 
@@ -22,7 +22,7 @@ const rootMessagesEn = {
   ...portfolioSmallCheckoutMessagesEn,
 
   //
-  // Sections
+  // Slices
   //
   ...comparisonMessagesEn,
   ...ctaMessagesEn,

package/src/slices/Blog/Blog.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiBlogPostMock } from '@/test/strapiMocks/strapiBlogPost';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
-import { mergeDeep } from '@/utils/mergeDeep';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiBlogPostMock } from '../../test/strapiMocks/strapiBlogPost';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
+import { mergeDeep } from '../../utils/mergeDeep';
 import { BlogProps } from './Blog';
 import Blog from '.';
 

package/src/slices/Blog/Blog.tsx

@@ -1,3 +1,4 @@
+import React, { useContext } from 'react';
 import {
   Box,
   DatePersonPair,
@@ -9,12 +10,12 @@ import {
   Wrapper,
 } from 'boemly';
 import Image from 'next/image';
-import { useIntl } from 'react-intl';
 import Link from 'next/link';
-import StrapiBlogPost from '@/models/strapi/StrapiBlogPost';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiBlogPost from '../../models/strapi/StrapiBlogPost';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import IStrapiData from '../../models/strapi/IStrapiData';
 import { BlogItemContainer, ImageContainer } from './styles';
+import { IntlContext } from '../../components/ContextProvider';
 
 export interface BlogProps {
   slice: {
@@ -24,7 +25,7 @@ export interface BlogProps {
 }
 
 export const Blog: React.FC<BlogProps> = ({ slice, blogPosts }: BlogProps) => {
-  const { formatDate } = useIntl();
+  const { formatDate } = useContext(IntlContext);
   const sortedBlogPosts = slice.blog_posts.sort(
     (a, b) =>
       new Date(b.attributes.createdAt).getTime() -
@@ -42,69 +43,66 @@ export const Blog: React.FC<BlogProps> = ({ slice, blogPosts }: BlogProps) => {
               return null;
             }
             return (
-              <Link
-                href={`/blog/${blogPost.attributes.slug}`}
-                passHref
+              <BlogItemContainer
                 key={blogPost.attributes.slug}
-                legacyBehavior
+                as={Link}
+                href={`/blog/${blogPost.attributes.slug}`}
               >
-                <BlogItemContainer>
-                  <ImageContainer>
-                    <Image
-                      src={strapiMediaUrl(blogPost.attributes.img.img, 'large')}
-                      alt={blogPost.attributes.img.alt}
-                      fill
-                      style={{
-                        objectFit: blogPost.attributes.img.objectFit || 'cover',
-                      }}
-                    />
-                  </ImageContainer>
-                  <Box px="2" py="8">
-                    {blogPost.attributes.category && (
-                      <Text size="smMonoUppercase" color="primary.800" mb="2">
-                        {blogPost.attributes.category.data.attributes.name}
-                      </Text>
-                    )}
-                    <Heading size="lg">{blogPost.attributes.title}</Heading>
-                    {blogPost.attributes.teaser && (
-                      <Text size="mdRegularNormal" mt="2">
-                        {blogPost.attributes.teaser}
-                      </Text>
-                    )}
-                    <Spacer height="4" />
-                    <DatePersonPair
-                      date={formatDate(blogPost.attributes.createdAt)}
-                      person={
-                        blogPost.attributes.author
-                          ? {
-                              name: blogPost.attributes.author.data.attributes
-                                .name,
-                              image: (
-                                <Image
-                                  src={strapiMediaUrl(
-                                    blogPost.attributes.author.data.attributes
-                                      .img.img,
-                                    'thumbnail'
-                                  )}
-                                  alt={
+                <ImageContainer>
+                  <Image
+                    src={strapiMediaUrl(blogPost.attributes.img.img, 'large')}
+                    alt={blogPost.attributes.img.alt}
+                    fill
+                    style={{
+                      objectFit: blogPost.attributes.img.objectFit || 'cover',
+                    }}
+                  />
+                </ImageContainer>
+                <Box px="2" py="8">
+                  {blogPost.attributes.category && (
+                    <Text size="smMonoUppercase" color="primary.800" mb="2">
+                      {blogPost.attributes.category.data.attributes.name}
+                    </Text>
+                  )}
+                  <Heading size="lg">{blogPost.attributes.title}</Heading>
+                  {blogPost.attributes.teaser && (
+                    <Text size="mdRegularNormal" mt="2">
+                      {blogPost.attributes.teaser}
+                    </Text>
+                  )}
+                  <Spacer height="4" />
+                  <DatePersonPair
+                    date={formatDate(blogPost.attributes.createdAt)}
+                    person={
+                      blogPost.attributes.author
+                        ? {
+                            name: blogPost.attributes.author.data.attributes
+                              .name,
+                            image: (
+                              <Image
+                                src={strapiMediaUrl(
+                                  blogPost.attributes.author.data.attributes.img
+                                    .img,
+                                  'thumbnail'
+                                )}
+                                alt={
+                                  blogPost.attributes.author.data.attributes.img
+                                    .alt
+                                }
+                                fill
+                                style={{
+                                  objectFit:
                                     blogPost.attributes.author.data.attributes
-                                      .img.alt
-                                  }
-                                  fill
-                                  style={{
-                                    objectFit:
-                                      blogPost.attributes.author.data.attributes
-                                        .img.objectFit || 'cover',
-                                  }}
-                                />
-                              ),
-                            }
-                          : undefined
-                      }
-                    />
-                  </Box>
-                </BlogItemContainer>
-              </Link>
+                                      .img.objectFit || 'cover',
+                                }}
+                              />
+                            ),
+                          }
+                        : undefined
+                    }
+                  />
+                </Box>
+              </BlogItemContainer>
             );
           })}
         </SimpleGrid>

package/src/slices/Blog/styles.ts

@@ -1,20 +1,24 @@
 import styled from '@emotion/styled';
-import { BREAKPOINT_MD } from '@/constants/breakpoints';
+import { BREAKPOINT_MD } from '../../constants/breakpoints';
+import { Box, Link } from 'boemly';
+
+export const BlogItemContainer = styled(Link)`
+  text-decoration: none;
 
-export const BlogItemContainer = styled.a`
-  cursor: pointer;
   & div img {
     transition: transform var(--default-ease) var(--medium-transition-duration);
   }
 
   &:hover {
+    text-decoration: none;
+
     & > div:first-of-type img {
       transform: scale(1.03);
     }
   }
 `;
 
-export const ImageContainer = styled.div`
+export const ImageContainer = styled(Box)`
   width: 100%;
   height: var(--boemly-sizes-xs);
   position: relative;

package/src/slices/BlogCards/BlogCards.stories.tsx

@@ -1,14 +1,15 @@
+import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import {
   storybookStrapiAvatarMock,
   storybookStrapiCoverMock,
-} from '@/test/storybookMocks/storybookStrapiMedia';
-import StrapiBlogPost from '@/models/strapi/StrapiBlogPost';
-import IStrapiData from '@/models/strapi/IStrapiData';
+} from '../../test/storybookMocks/storybookStrapiMedia';
+import StrapiBlogPost from '../../models/strapi/StrapiBlogPost';
+import IStrapiData from '../../models/strapi/IStrapiData';
 import BlogCards from '.';
 
 export default {
-  title: 'sections/BlogCards',
+  title: 'slices/BlogCards',
   component: BlogCards,
 } as Meta<typeof BlogCards>;
 

package/src/slices/BlogCards/BlogCards.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiBlogPostMock } from '@/test/strapiMocks/strapiBlogPost';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
-import { mergeDeep } from '@/utils/mergeDeep';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiBlogPostMock } from '../../test/strapiMocks/strapiBlogPost';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
+import { mergeDeep } from '../../utils/mergeDeep';
 import BlogCards from '.';
 import { BlogCardsProps } from './BlogCards';