@treely/strapi-slices 1.0.1 → 1.0.2

package/src/slices/BlogCards/BlogCards.tsx

@@ -1,3 +1,4 @@
+import React, { useContext, useMemo } from 'react';
 import {
   Text,
   Heading,
@@ -14,18 +15,17 @@ import {
 } from 'boemly';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useIntl } from 'react-intl';
 import { CaretRight } from '@phosphor-icons/react';
-import { useMemo } from 'react';
-import StrapiBlogPost from '@/models/strapi/StrapiBlogPost';
-import IStrapiData from '@/models/strapi/IStrapiData';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import StrapiCategory from '@/models/strapi/StrapiCategory';
-import IStrapi from '@/models/strapi/IStrapi';
-import { BREAKPOINT_LG_QUERY } from '@/constants/breakpoints';
-import StrapiLink from '@/models/strapi/StrapiLink';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
+import StrapiBlogPost from '../../models/strapi/StrapiBlogPost';
+import IStrapiData from '../../models/strapi/IStrapiData';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import StrapiCategory from '../../models/strapi/StrapiCategory';
+import IStrapi from '../../models/strapi/IStrapi';
+import { BREAKPOINT_LG_QUERY } from '../../constants/breakpoints';
+import StrapiLink from '../../models/strapi/StrapiLink';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
 import { BlogItemContainer, ImageContainer } from '../Blog/styles';
+import { IntlContext } from '../../components/ContextProvider';
 
 export interface BlogCardsProps {
   slice: {
@@ -59,7 +59,7 @@ export const BlogCards: React.FC<BlogCardsProps> = ({
   slice,
   blogPosts,
 }: BlogCardsProps) => {
-  const { formatDate } = useIntl();
+  const { formatDate } = useContext(IntlContext);
   const [mobile] = useMediaQuery(BREAKPOINT_LG_QUERY);
   const [gray700] = useToken('colors', ['gray.700']);
 
@@ -123,71 +123,68 @@ export const BlogCards: React.FC<BlogCardsProps> = ({
           flexShrink="0"
         >
           {blogPostsToDisplay.map((blogPost) => (
-            <Link
+            <BlogItemContainer
+              as={Link}
               href={`/blog/${blogPost.attributes.slug}`}
-              passHref
+              data-testid="blog-item"
               key={blogPost.attributes.slug}
-              legacyBehavior
             >
-              <BlogItemContainer data-testid="blog-item">
-                <ImageContainer>
-                  <Image
-                    src={strapiMediaUrl(blogPost.attributes.img.img, 'medium')}
-                    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>
-                  )}
+              <ImageContainer>
+                <Image
+                  src={strapiMediaUrl(blogPost.attributes.img.img, 'medium')}
+                  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" />
+                <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={
+                <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>
+                                    .objectFit || 'cover',
+                              }}
+                            />
+                          ),
+                        }
+                      : undefined
+                  }
+                />
+              </Box>
+            </BlogItemContainer>
           ))}
         </SimpleGrid>
         <>

package/src/slices/Comparison/Comparison.stories.tsx

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

package/src/slices/Comparison/Comparison.test.tsx

@@ -1,6 +1,7 @@
-import { mergeDeep } from '@/utils/mergeDeep';
-import { render, screen } from '@/test/testUtils';
-import { strapiMediaMock } from '@/test/strapiMocks/strapiMedia';
+import React from 'react';
+import { mergeDeep } from '../../utils/mergeDeep';
+import { render, screen } from '../../test/testUtils';
+import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import { ComparisonProps } from './Comparison';
 import { pushSpy, useRouter } from '../../../__mocks__/next/router';
 import Comparison from '.';

package/src/slices/Comparison/Comparison.tsx

@@ -1,7 +1,8 @@
-import StrapiLinkButton from '@/components/StrapiLinkButton';
-import StrapiImage from '@/models/strapi/StrapiImage';
-import StrapiLink from '@/models/strapi/StrapiLink';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import React, { useContext } from 'react';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import StrapiLink from '../../models/strapi/StrapiLink';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
 import {
   Container,
   DefaultSectionContainer,
@@ -18,9 +19,9 @@ import {
 } from 'boemly';
 import Image from 'next/image';
 import { CaretRight } from '@phosphor-icons/react';
-import { useIntl } from 'react-intl';
 import { Icon } from './Icon';
-import { CDN_URI } from '@/constants/api';
+import { CDN_URI } from '../../constants/api';
+import { IntlContext } from '../../components/ContextProvider';
 
 export interface ComparisonProps {
   slice: {
@@ -76,7 +77,7 @@ const VARIANTS = {
 export const Comparison: React.FC<ComparisonProps> = ({
   slice,
 }: ComparisonProps) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage } = useContext(IntlContext);
 
   return (
     <DefaultSectionContainer>

package/src/slices/Comparison/Icon.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { mergeDeep } from '@/utils/mergeDeep';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { mergeDeep } from '../../utils/mergeDeep';
 import { IconProps, Icon } from './Icon';
 
 const defaultProps: IconProps = {

package/src/slices/Comparison/Icon.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Check, X } from '@phosphor-icons/react';
 import { Box } from 'boemly';
 

package/src/slices/Cta/Cta.stories.tsx

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

package/src/slices/Cta/Cta.test.tsx

@@ -1,6 +1,7 @@
-import { render, screen } from '@/test/testUtils';
-import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
-import { mergeDeep } from '@/utils/mergeDeep';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
+import { mergeDeep } from '../../utils/mergeDeep';
 import { pushSpy, useRouter } from '../../../__mocks__/next/router';
 import { CtaProps } from './Cta';
 import Cta from '.';

package/src/slices/Cta/Cta.tsx

@@ -1,3 +1,4 @@
+import React, { useContext } from 'react';
 import {
   Box,
   Container,
@@ -8,13 +9,13 @@ import {
   Spacer,
   Wrapper,
 } from 'boemly';
-import StrapiButtonWithVariant from '@/models/strapi/StrapiButtonWithVariant';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
+import StrapiButtonWithVariant from '../../models/strapi/StrapiButtonWithVariant';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
 import Image from 'next/image';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
-import StrapiImage from '@/models/strapi/StrapiImage';
-import { useIntl } from 'react-intl';
-import { CDN_URI } from '@/constants/api';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
+import StrapiImage from '../../models/strapi/StrapiImage';
+import { CDN_URI } from '../../constants/api';
+import { IntlContext } from '../../components/ContextProvider';
 
 type Variant = 'gray' | 'green' | 'white';
 
@@ -177,7 +178,7 @@ const getTypeOfCard = (ctaCard: CtaCard): CtaCardType => {
 };
 
 export const Cta: React.FC<CtaProps> = ({ slice }: CtaProps) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage } = useContext(IntlContext);
 
   return (
     <DefaultSectionContainer

package/src/slices/CtaOnly/CtaOnly.stories.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import CtaOnly from '.';
 import RichTextSection from '../RichTextSection';
 import { RichTextSectionProps } from '../RichTextSection/RichTextSection';
 
 export default {
-  title: 'sections/CTAOnly',
+  title: 'slices/CTAOnly',
   component: CtaOnly,
   subcomponents: { RichTextSection },
 } as Meta<typeof CtaOnly>;

package/src/slices/CtaOnly/CtaOnly.test.tsx

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

package/src/slices/CtaOnly/CtaOnly.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Box, Wrapper } from 'boemly';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
-import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
+import StrapiLink from '../../models/strapi/StrapiLink';
 
 export interface CtaOnlyProps {
   slice: {

package/src/slices/CustomerStories/CustomerStories.stories.tsx

@@ -1,9 +1,10 @@
-import { strapiCustomerStoryMock } from '@/test/strapiMocks/strapiCustomerStory';
+import React from 'react';
+import { strapiCustomerStoryMock } from '../../test/strapiMocks/strapiCustomerStory';
 import { Meta, StoryFn } from '@storybook/react';
 import CustomerStories from '.';
 
 export default {
-  title: 'sections/CustomerStories',
+  title: 'slices/CustomerStories',
   component: CustomerStories,
 } as Meta<typeof CustomerStories>;
 

package/src/slices/CustomerStories/CustomerStories.test.tsx

@@ -1,6 +1,7 @@
-import { render, screen } from '@/test/testUtils';
-import { mergeDeep } from '@/utils/mergeDeep';
-import { strapiCustomerStoryMock } from '@/test/strapiMocks/strapiCustomerStory';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { mergeDeep } from '../../utils/mergeDeep';
+import { strapiCustomerStoryMock } from '../../test/strapiMocks/strapiCustomerStory';
 import { CustomerStoriesProps } from './CustomerStories';
 import CustomerStories from '.';
 

package/src/slices/CustomerStories/CustomerStories.tsx

@@ -1,6 +1,7 @@
-import IStrapiData from '@/models/strapi/IStrapiData';
-import StrapiCustomerStory from '@/models/strapi/StrapiCustomerStory';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import React, { useContext } from 'react';
+import IStrapiData from '../../models/strapi/IStrapiData';
+import StrapiCustomerStory from '../../models/strapi/StrapiCustomerStory';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
 import {
   Box,
   Button,
@@ -14,7 +15,7 @@ import {
 } from 'boemly';
 import Image from 'next/image';
 import Link from 'next/link';
-import { FormattedMessage } from 'react-intl';
+import { IntlContext } from '../../components/ContextProvider';
 
 export interface CustomerStoriesProps {
   slice: {
@@ -26,59 +27,63 @@ export interface CustomerStoriesProps {
 export const CustomerStories = ({
   slice,
   customerStories,
-}: CustomerStoriesProps): JSX.Element => (
-  <DefaultSectionContainer>
-    <Wrapper>
-      <SimpleGrid columns={[1, null, null, 2]} spacingX={56} spacingY={24}>
-        {slice.customer_stories.map(({ attributes }) => {
-          const customerStory: IStrapiData<StrapiCustomerStory> | undefined =
-            customerStories.find(
-              (cs) => cs.attributes.slug === attributes.slug
-            );
-          if (!customerStory) {
-            return null;
-          }
-          return (
-            <Container padding="none" key={customerStory.id}>
-              <Center
-                height="24"
-                backgroundColor="primary.50"
-                borderTopRadius="xl"
-              >
-                <Box position="relative" height="12" width="12">
-                  <Image
-                    src={strapiMediaUrl(
-                      customerStory.attributes.customerLogo.img,
-                      'medium'
-                    )}
-                    alt={customerStory.attributes.customerLogo.alt}
-                    fill
-                    style={{
-                      objectFit:
-                        customerStory.attributes.customerLogo.objectFit,
-                    }}
-                  />
-                </Box>
-              </Center>
-              <Box px="6" pt="12" pb="6">
-                <Text size="xsMonoUppercase" color="gray.500" mb="2">
-                  {customerStory.attributes.customerIndustry}
-                </Text>
-                <Heading size="xl">{customerStory.attributes.title}</Heading>
-                <Button
-                  as={Link}
-                  href={`/customer-stories/${customerStory.attributes.slug}`}
-                  variant="outline"
-                  size="sm"
-                  mt="12"
+}: CustomerStoriesProps): JSX.Element => {
+  const { formatMessage } = useContext(IntlContext);
+
+  return (
+    <DefaultSectionContainer>
+      <Wrapper>
+        <SimpleGrid columns={[1, null, null, 2]} spacingX={56} spacingY={24}>
+          {slice.customer_stories.map(({ attributes }) => {
+            const customerStory: IStrapiData<StrapiCustomerStory> | undefined =
+              customerStories.find(
+                (cs) => cs.attributes.slug === attributes.slug
+              );
+            if (!customerStory) {
+              return null;
+            }
+            return (
+              <Container padding="none" key={customerStory.id}>
+                <Center
+                  height="24"
+                  backgroundColor="primary.50"
+                  borderTopRadius="xl"
                 >
-                  <FormattedMessage id="sections.customerStories.more" />
-                </Button>
-              </Box>
-            </Container>
-          );
-        })}
-      </SimpleGrid>
-    </Wrapper>
-  </DefaultSectionContainer>
-);
+                  <Box position="relative" height="12" width="12">
+                    <Image
+                      src={strapiMediaUrl(
+                        customerStory.attributes.customerLogo.img,
+                        'medium'
+                      )}
+                      alt={customerStory.attributes.customerLogo.alt}
+                      fill
+                      style={{
+                        objectFit:
+                          customerStory.attributes.customerLogo.objectFit,
+                      }}
+                    />
+                  </Box>
+                </Center>
+                <Box px="6" pt="12" pb="6">
+                  <Text size="xsMonoUppercase" color="gray.500" mb="2">
+                    {customerStory.attributes.customerIndustry}
+                  </Text>
+                  <Heading size="xl">{customerStory.attributes.title}</Heading>
+                  <Button
+                    as={Link}
+                    href={`/customer-stories/${customerStory.attributes.slug}`}
+                    variant="outline"
+                    size="sm"
+                    mt="12"
+                  >
+                    {formatMessage({ id: 'sections.customerStories.more' })}
+                  </Button>
+                </Box>
+              </Container>
+            );
+          })}
+        </SimpleGrid>
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/Facts/Facts.stories.tsx

@@ -1,8 +1,9 @@
+import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import Facts from '.';
 
 export default {
-  title: 'sections/Facts',
+  title: 'slices/Facts',
   component: Facts,
 } as Meta<typeof Facts>;
 

package/src/slices/Facts/Facts.test.tsx

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

package/src/slices/Facts/Facts.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   DefaultSectionContainer,
   DefaultSectionHeader,
@@ -6,8 +7,8 @@ import {
   Spacer,
   Text,
 } from 'boemly';
-import StrapiLinkButton from '@/components/StrapiLinkButton';
-import StrapiLink from '@/models/strapi/StrapiLink';
+import StrapiLinkButton from '../../components/StrapiLinkButton';
+import StrapiLink from '../../models/strapi/StrapiLink';
 
 export interface FactsProps {
   slice: {

package/src/slices/FullWidthHighlightQuote/FullWidthHighlightQuote.stories.tsx

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

package/src/slices/FullWidthHighlightQuote/FullWidthHighlightQuote.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from '@/test/testUtils';
-import { strapiAvatarWithNameMock } from '@/test/strapiMocks/strapiAvatarWithName';
+import React from 'react';
+import { render, screen } from '../../test/testUtils';
+import { strapiAvatarWithNameMock } from '../../test/strapiMocks/strapiAvatarWithName';
 import FullWidthHighlightQuote from '.';
 import { FullWidthHighlightQuoteProps } from './FullWidthHighlightQuote';
 

package/src/slices/FullWidthHighlightQuote/FullWidthHighlightQuote.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Image from 'next/image';
 import {
   DefaultSectionContainer,
@@ -6,8 +7,8 @@ import {
   Text,
   Box,
 } from 'boemly';
-import StrapiAvatarWithName from '@/models/strapi/StrapiAvatarWithName';
-import strapiMediaUrl from '@/utils/strapiMediaUrl';
+import StrapiAvatarWithName from '../../models/strapi/StrapiAvatarWithName';
+import strapiMediaUrl from '../../utils/strapiMediaUrl';
 
 export interface FullWidthHighlightQuoteProps {
   slice: {

package/src/slices/FullWidthImage/FullWidthImage.stories.tsx

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

package/src/slices/FullWidthImage/FullWidthImage.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 FullWidthImage from '.';
 import { FullWidthImageProps } from './FullWidthImage';