@treely/strapi-slices 7.16.2 → 8.0.0

package/src/slices/TextCarousel/TextCarousel.tsx

@@ -1,251 +0,0 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Box,
-  Center,
-  DefaultSectionContainer,
-  DefaultSectionHeader,
-  IconButton,
-  TextCardWithIcon,
-  useToken,
-  Wrapper,
-} from 'boemly';
-import Image from 'next/image';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import StrapiDefaultHeader from '../../models/strapi/StrapiDefaultHeader';
-import StrapiLink from '../../models/strapi/StrapiLink';
-import StrapiTextCardWithIcon from '../../models/strapi/StrapiTextCardWithIcons';
-import StrapiLinkButton from '../../components/StrapiLinkButton';
-import {
-  CardContainer,
-  CarouselContainer,
-  CarouselInnerContainer,
-} from './styles';
-import { useMeasure, useWindowSize } from 'react-use';
-import { AnimatePresence, motion } from 'framer-motion';
-import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
-import { IntlContext } from '../../components/ContextProvider';
-import strapiLinkUrl from '../../utils/strapiLinkUrl';
-import { useRouter } from 'next/router';
-import shuffleElements from '../../utils/shuffleElements';
-import { AnalyticsContext } from '../../components/ContextProvider/ContextProvider';
-
-interface TextCarouselSlice extends StrapiDefaultHeader {
-  slides: StrapiTextCardWithIcon[];
-  button?: StrapiLink;
-  isShuffled?: boolean;
-}
-export interface TextCarouselProps {
-  slice: TextCarouselSlice;
-}
-
-const ITEM_GAP = 24;
-const MAX_OFFSET_RIGHT = 55;
-
-export const TextCarousel: React.FC<TextCarouselProps> = ({
-  slice,
-}: TextCarouselProps) => {
-  const containerRef = useRef(null);
-  const [primary50] = useToken('colors', ['primary.50']);
-  const [itemRef, { width: itemWidth }] = useMeasure<HTMLDivElement>();
-  const { formatMessage } = useContext(IntlContext);
-  const analyticsFunction = useContext(AnalyticsContext);
-  const { width: windowWidth } = useWindowSize();
-  const { push } = useRouter();
-
-  const [displaySlides, setDisplaySlides] = useState(slice.slides);
-  const [sliderIndex, setSliderIndex] = useState(0);
-
-  const numberOfItems = useMemo(
-    () => slice.slides.length,
-    [slice.slides.length]
-  );
-
-  const sliderItemsWidth = useMemo(
-    () => numberOfItems * (itemWidth + ITEM_GAP) - ITEM_GAP,
-    [itemWidth, numberOfItems]
-  );
-
-  const offsetLeft = useMemo(
-    () => sliderIndex * (itemWidth + ITEM_GAP) * -1,
-    [sliderIndex, itemWidth]
-  );
-
-  const allowScroll = useMemo(
-    () => sliderItemsWidth + ITEM_GAP * 2 > windowWidth,
-
-    [sliderItemsWidth, windowWidth]
-  );
-
-  const canMoveRight = useMemo(() => {
-    const offsetRight = windowWidth - (sliderItemsWidth + offsetLeft);
-
-    return offsetRight < MAX_OFFSET_RIGHT;
-  }, [itemWidth, sliderIndex, sliderItemsWidth, windowWidth]);
-
-  const canMoveLeft = useMemo(() => sliderIndex !== 0, [sliderIndex]);
-
-  const handleSlidesButtonClick = (button?: StrapiLink) => {
-    if (button) {
-      analyticsFunction?.({
-        type: 'track',
-        props: {
-          action: 'click',
-          component: 'TextCarousel',
-          buttonText: button.text,
-          buttonUrl: strapiLinkUrl(button),
-          section: 'slides',
-        },
-      });
-      push(strapiLinkUrl(button));
-    }
-  };
-
-  const { slides, isShuffled = false } = slice;
-
-  useEffect(() => {
-    if (isShuffled) {
-      setDisplaySlides(shuffleElements(slides));
-    }
-  }, [slides, isShuffled]);
-
-  return (
-    <DefaultSectionContainer backgroundColor={primary50} title={slice.title}>
-      <Wrapper>
-        <DefaultSectionHeader
-          tagline={slice.tagline}
-          title={slice.title}
-          text={slice.text}
-          taglineProps={{ textAlign: 'center' }}
-          titleProps={{ textAlign: 'center', maxW: '6xl', marginX: 'auto' }}
-          textProps={{ textAlign: 'center', maxW: '2xl', marginX: 'auto' }}
-        />
-      </Wrapper>
-
-      <CarouselContainer ref={containerRef}>
-        <Box position="relative" width="full">
-          <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(icon.img, 'small')}
-                        alt={icon.alt}
-                        fill
-                        style={{ objectFit: icon.objectFit || 'contain' }}
-                      />
-                    }
-                    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: () => handleSlidesButtonClick(button),
-                      }
-                    }
-                    displayAs="column"
-                  />
-                </CardContainer>
-              ))}
-            </CarouselInnerContainer>
-          </Wrapper>
-          <Box
-            display={['none', null, null, !!allowScroll ? 'flex' : 'none']}
-            pointerEvents="none"
-            position="absolute"
-            top="40%"
-            left="0"
-            width="full"
-            py="0"
-            px="32"
-            justifyContent="space-between"
-          >
-            <Box>
-              <AnimatePresence>
-                {canMoveLeft && (
-                  <IconButton
-                    key="leftButton"
-                    as={motion.button}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    size="lg"
-                    variant="outline"
-                    onClick={() => setSliderIndex(sliderIndex - 1)}
-                    aria-label={formatMessage({
-                      id: 'sections.textCarousel.moveLeft',
-                    })}
-                    icon={<ArrowLeft size={16} />}
-                    pointerEvents="auto"
-                    boxShadow="md"
-                  />
-                )}
-              </AnimatePresence>
-            </Box>
-            <Box>
-              <AnimatePresence>
-                {canMoveRight && (
-                  <IconButton
-                    key="rightButton"
-                    as={motion.button}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    size="lg"
-                    variant="outline"
-                    onClick={() => setSliderIndex(sliderIndex + 1)}
-                    aria-label={formatMessage({
-                      id: 'sections.textCarousel.moveRight',
-                    })}
-                    icon={<ArrowRight size={16} />}
-                    pointerEvents="auto"
-                    boxShadow="md"
-                  />
-                )}
-              </AnimatePresence>
-            </Box>
-          </Box>
-        </Box>
-      </CarouselContainer>
-
-      <>
-        {slice.button && (
-          <Wrapper>
-            <Center>
-              <StrapiLinkButton
-                link={slice.button}
-                size="xl"
-                mt={['8', null, '14']}
-                component="TextCarousel"
-              />
-            </Center>
-          </Wrapper>
-        )}
-      </>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/TextCarousel/index.ts

@@ -1,3 +0,0 @@
-import { TextCarousel } from './TextCarousel';
-
-export default TextCarousel;

package/src/slices/TextCarousel/messages.de.ts

@@ -1,5 +0,0 @@
-const messagesDe = {
-  'sections.textCarousel.moveRight': 'Nach rechts bewegen',
-  'sections.textCarousel.moveLeft': 'Nach links bewegen',
-};
-export default messagesDe;

package/src/slices/TextCarousel/messages.en.ts

@@ -1,5 +0,0 @@
-const messagesDe = {
-  'sections.textCarousel.moveRight': 'Move right',
-  'sections.textCarousel.moveLeft': 'Move left',
-};
-export default messagesDe;

package/src/slices/TextCarousel/styles.ts

@@ -1,64 +0,0 @@
-import { motion } from 'framer-motion';
-import styled from '@emotion/styled';
-import { BREAKPOINT_MD } from '../../constants/breakpoints';
-import { Box } from 'boemly';
-
-export const CarouselContainer = styled(Box)`
-  margin-top: var(--boemly-space-6);
-  padding: var(--boemly-space-8) 0;
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    margin-top: var(--boemly-space-4);
-    width: var(--boemly-sizes-full);
-  }
-
-  width: var(--boemly-sizes-full);
-
-  overflow-x: hidden;
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    overflow-x: scroll;
-  }
-`;
-
-interface CarouselInnerContainerProps {
-  numberOfItems: number;
-}
-export const CarouselInnerContainer = styled(
-  motion.div
-)<CarouselInnerContainerProps>`
-  display: flex;
-  gap: var(--boemly-space-6);
-  justify-content: center;
-
-  width: calc(
-    (var(--boemly-sizes-sm) + var(--boemly-space-6)) *
-      ${({ numberOfItems }: CarouselInnerContainerProps) => numberOfItems} +
-      var(--boemly-space-6)
-  );
-  min-width: var(--boemly-sizes-full);
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    gap: var(--boemly-space-1);
-    justify-content: flex-start;
-    width: calc(
-      (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *
-        ${({ numberOfItems }: CarouselInnerContainerProps) => numberOfItems} +
-        var(--boemly-space-6)
-    );
-  }
-`;
-
-export const CardContainer = styled(Box)`
-  width: var(--boemly-sizes-sm);
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    min-width: var(--boemly-sizes-sm);
-
-    margin-right: var(--boemly-space-4);
-
-    &:first-of-type {
-      margin-left: var(--boemly-space-6);
-    }
-  }
-`;

package/src/slices/TextWithCard/TextWithCard.stories.tsx

@@ -1,226 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
-import TextWithCard from '.';
-import { IStrapiData, PortfolioProject, StrapiProject } from '../..';
-import { CreditAvailability } from '../../models/fpm/FPMProject';
-
-export default {
-  title: 'slices/TextWithCard',
-  component: TextWithCard,
-} as Meta<typeof TextWithCard>;
-
-const Template: StoryFn<typeof TextWithCard> = (args) => (
-  <TextWithCard {...args} />
-);
-
-const listItems = [
-  { id: 1, text: 'List item 1' },
-  { id: 2, text: 'List item 2' },
-  { id: 3, text: 'List item 3' },
-];
-const button = { id: 1, text: 'Button', url: 'https://tree.ly' };
-const card = {
-  id: 1,
-  image: {
-    id: 1,
-    alt: 'Image alt text',
-    img: { data: storybookStrapiCoverMock },
-  },
-  title: 'Card title',
-  facts: [
-    { id: 1, text: 'Fact 1' },
-    { id: 2, text: 'Fact 2' },
-    { id: 3, text: 'Fact 3' },
-    { id: 4, text: 'Fact 4' },
-  ],
-  footerTitle: 'Footer title',
-  footerSubTitle: 'Footer sub title',
-};
-const portfolioProject: PortfolioProject = {
-  id: '1',
-  title: 'Project 1',
-  geom: {
-    type: 'Point',
-    coordinates: [10.036542145100883, 47.42636837845707],
-  },
-  area: 2000000,
-  location: 'Austria',
-  countryCode: 'AT',
-  start: new Date('2020-01-01'),
-  end: new Date('2050-12-31'),
-  projectType: {
-    title: 'Project Type 1',
-    id: '1',
-    createdAt: new Date('2020-01-01'),
-    updatedAt: new Date('2020-01-01'),
-  },
-  projectDeveloper: {
-    name: 'Project Developer 1',
-    id: '1',
-    createdAt: new Date('2020-01-01'),
-    updatedAt: new Date('2020-01-01'),
-  },
-  verificationStandard: {
-    id: 'SilvaconsultFCSISO14',
-    createdAt: new Date('2020-01-01'),
-    updatedAt: new Date('2020-01-01'),
-  },
-  forecastedAmountYearly: 100,
-  averageSellableAmountPerYear: 80,
-  riskBuffer: 10,
-  createdAt: new Date('2020-01-01'),
-  updatedAt: new Date('2020-01-01'),
-  creditAvailability: CreditAvailability.CREDITS_AVAILABLE,
-  slug: 'portfolio-slug',
-  thumbnail: {
-    img: { data: storybookStrapiCoverMock },
-    alt: 'Project Thumbnail',
-    id: 1,
-  },
-};
-const project: IStrapiData<StrapiProject> = {
-  id: 1,
-  attributes: {
-    slug: 'slug',
-    locale: 'en',
-    fpmProjectId: portfolioProject.id,
-    footerSubTitle: 'Certified, 2023',
-    createdAt: '2022-01-10T15:04:32.897Z',
-    updatedAt: '2022-01-11T10:21:42.317Z',
-    metadata: null,
-    slices: [
-      {
-        __component: 'sections.rich-text',
-        id: 6,
-        content: '# This is my rich text!',
-      },
-    ],
-    portfolio: {
-      data: {
-        id: 1,
-        attributes: {
-          name: 'my-portfolio',
-          title: 'My Portfolio',
-          locale: 'en',
-          createdAt: '2022-01-10T15:04:32.897Z',
-          updatedAt: '2022-01-11T10:21:42.317Z',
-          slices: [
-            {
-              __component: 'sections.rich-text',
-              id: 6,
-              content: '# This is my rich text!',
-            },
-          ],
-        },
-      },
-    },
-    thumbnail: {
-      img: { data: storybookStrapiCoverMock },
-      alt: 'Project Thumbnail',
-      id: 1,
-    },
-    localizations: [
-      {
-        id: 2,
-        locale: 'de',
-      },
-    ],
-  },
-};
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    cardPosition: 'left',
-  },
-  projects: [],
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    cardPosition: 'left',
-  },
-  projects: [],
-};
-
-export const WithTaglineAndText = Template.bind({});
-WithTaglineAndText.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    cardPosition: 'left',
-  },
-  projects: [],
-};
-
-export const WithList = Template.bind({});
-WithList.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    listItems,
-    cardPosition: 'left',
-  },
-  projects: [],
-};
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    listItems,
-    button,
-    cardPosition: 'left',
-  },
-  projects: [],
-};
-
-export const WithCard = Template.bind({});
-WithCard.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    listItems,
-    button,
-    card,
-    cardPosition: 'left',
-  },
-  projects: [],
-};
-
-export const WithCardOnRight = Template.bind({});
-WithCardOnRight.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    listItems,
-    button,
-    card,
-    cardPosition: 'right',
-  },
-  projects: [],
-};
-
-export const WithProjects = Template.bind({});
-WithProjects.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    cardPosition: 'left',
-    project: { data: project },
-  },
-  projects: [portfolioProject],
-};

package/src/slices/TextWithCard/TextWithCard.test.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiProjectCardMock } from '../../test/strapiMocks/strapiProjectCard';
-import TextWithCard from '.';
-import { TextWithCardProps } from './TextWithCard';
-import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
-import portfolioProjectMock from '../../test/mocks/portfolioProjectMock';
-
-const defaultProps: TextWithCardProps = {
-  projects: [],
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    text: 'Text',
-    cardPosition: 'left',
-  },
-};
-
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<TextWithCard {...combinedProps} />);
-};
-
-describe('The TextWithCard component', () => {
-  it('displays the section header', () => {
-    setup();
-
-    expect(screen.getByTestId('default-section-header')).toBeInTheDocument();
-  });
-
-  it('displays no check marks if there are no check marks in the slice', () => {
-    setup();
-
-    expect(screen.queryAllByRole('listitem')).toHaveLength(0);
-  });
-
-  it('displays the check marks if there are check marks in the slice', () => {
-    setup({
-      slice: {
-        ...defaultProps.slice,
-        listItems: [{ id: 1, text: 'Check mark label' }],
-      },
-    });
-
-    expect(screen.queryAllByRole('listitem')).toHaveLength(1);
-    expect(screen.getByText('Check mark label')).toBeInTheDocument();
-  });
-
-  it('displays no link if there is no button in the slice', () => {
-    setup();
-
-    expect(screen.queryByRole('link')).not.toBeInTheDocument();
-  });
-
-  it('displays a link if there is a button in the slice', () => {
-    setup({
-      slice: { ...defaultProps.slice, button: { url: 'url', text: 'Link' } },
-    });
-
-    expect(screen.queryByRole('link')).toBeInTheDocument();
-    expect(screen.getByText('Link')).toBeInTheDocument();
-  });
-
-  it('displays no card if there is no card in the slice', () => {
-    setup();
-
-    expect(
-      screen.queryByText(strapiProjectCardMock.title)
-    ).not.toBeInTheDocument();
-  });
-
-  it('displays a card if there is a card in the slice', () => {
-    setup({
-      slice: { ...defaultProps.slice, card: strapiProjectCardMock },
-    });
-
-    expect(screen.getByText(strapiProjectCardMock.title)).toBeInTheDocument();
-  });
-
-  it('displays the card, filled with information from the FPM if a project is selected', () => {
-    setup({
-      projects: [portfolioProjectMock],
-      slice: { ...defaultProps.slice, project: { data: strapiProjectMock } },
-    });
-
-    expect(screen.getByText(portfolioProjectMock.title)).toBeInTheDocument();
-  });
-
-  const cardPositions = ['left', 'right'];
-
-  cardPositions.forEach((cardPosition) => {
-    it(`displays the card on the right if the card position is '${cardPosition}'`, () => {
-      setup({ slice: { ...defaultProps.slice, cardPosition } });
-
-      expect(
-        screen.queryByTestId(`card-position-${cardPosition}`)
-      ).toBeInTheDocument();
-    });
-  });
-});