@treely/strapi-slices 7.17.0 → 8.0.0

package/src/slices/FullWidthImageSlider/FullWidthImageSlider.tsx

@@ -1,191 +0,0 @@
-import React, { useMemo, useRef, useState } from 'react';
-import {
-  Box,
-  IconButton,
-  DefaultSectionContainer,
-  Flex,
-  Text,
-  useMediaQuery,
-} from 'boemly';
-import Image from 'next/image';
-import { useMeasure, useWindowSize } from 'react-use';
-import { AnimatePresence, motion } from 'framer-motion';
-import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import FullScreenImage from '../../components/FullScreenImage';
-import { BREAKPOINT_MD_QUERY } from '../../constants/breakpoints';
-import {
-  ItemContainer,
-  SliderContainer,
-  SliderInnerContainer,
-  ImageContainer,
-} from './styles';
-import { getClosestRatio } from '../../utils/getClosestRatio';
-
-export interface FullWidthImageSliderProps {
-  slice: {
-    images: {
-      id: number;
-      caption: string;
-      img: StrapiImage;
-    }[];
-  };
-}
-
-const ITEM_GAP = 24;
-const MAX_OFFSET_RIGHT = 162;
-
-export const FullWidthImageSlider: React.FC<FullWidthImageSliderProps> = ({
-  slice,
-}: FullWidthImageSliderProps) => {
-  const containerRef = useRef(null);
-  const [imageRef, { width: imageWidth }] = useMeasure<HTMLDivElement>();
-  const { width: windowWidth } = useWindowSize();
-  const [isMobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
-
-  const [sliderIndex, setSliderIndex] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const numberOfItems = useMemo(
-    () => slice.images.length,
-    [slice.images.length]
-  );
-
-  const sliderItemsWidth = useMemo(
-    () => numberOfItems * (imageWidth + ITEM_GAP) - ITEM_GAP,
-    [imageWidth, numberOfItems]
-  );
-
-  const offsetLeft = useMemo(
-    () => sliderIndex * (imageWidth + ITEM_GAP) * -1,
-    [sliderIndex, imageWidth]
-  );
-
-  const allowScroll = useMemo(
-    () => sliderItemsWidth + ITEM_GAP * 3 > windowWidth,
-
-    [sliderItemsWidth, windowWidth]
-  );
-
-  const canMoveRight = useMemo(() => {
-    const offsetRight = windowWidth - (sliderItemsWidth + offsetLeft);
-
-    return offsetRight < MAX_OFFSET_RIGHT;
-  }, [imageWidth, sliderIndex, sliderItemsWidth, windowWidth]);
-
-  const canMoveLeft = useMemo(() => sliderIndex !== 0, [sliderIndex]);
-
-  return (
-    <DefaultSectionContainer>
-      <SliderContainer ref={containerRef}>
-        <SliderInnerContainer
-          animate={{
-            x: imageWidth * -sliderIndex,
-          }}
-          transition={{
-            duration: 0.3,
-            ease: 'easeInOut',
-          }}
-          imageCount={slice.images.length}
-        >
-          {slice.images.map((image, index) => (
-            <ItemContainer key={image.id} ref={imageRef}>
-              <Flex
-                height="full"
-                width="full"
-                justifyContent="end"
-                flexDirection="column"
-                gap="2"
-              >
-                <ImageContainer
-                  aspectRatio={getClosestRatio(
-                    image.img.img.data.attributes.width,
-                    image.img.img.data.attributes.height
-                  )}
-                >
-                  <Image
-                    src={strapiMediaUrl(image.img.img, 'large')}
-                    alt={image.img.alt}
-                    fill
-                    style={{
-                      objectFit: image.img.objectFit || 'cover',
-                      cursor: isMobile ? 'unset' : 'pointer',
-                    }}
-                    onClick={() => {
-                      setSliderIndex(index);
-                      if (!isMobile) setIsOpen(true);
-                    }}
-                  />
-                </ImageContainer>
-
-                <Text noOfLines={3} height="72px" fontSize="md">
-                  {image.caption}
-                </Text>
-              </Flex>
-            </ItemContainer>
-          ))}
-        </SliderInnerContainer>
-      </SliderContainer>
-
-      <Box
-        display={['none', null, null, !!allowScroll ? 'flex' : 'none']}
-        pointerEvents="none"
-        position="absolute"
-        top="calc(50% - var(--boemly-sizes-12))"
-        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="Move left"
-                icon={<ArrowLeft size={16} />}
-                pointerEvents="auto"
-              />
-            )}
-          </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="Move right"
-                icon={<ArrowRight size={16} />}
-                pointerEvents="auto"
-              />
-            )}
-          </AnimatePresence>
-        </Box>
-      </Box>
-
-      <FullScreenImage
-        images={slice.images.map((image) => image.img)}
-        currentIndex={sliderIndex}
-        setCurrentIndex={setSliderIndex}
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-      />
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/FullWidthImageSlider/index.ts

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

package/src/slices/FullWidthImageSlider/styles.ts

@@ -1,78 +0,0 @@
-import { motion } from 'framer-motion';
-import styled from '@emotion/styled';
-import { BREAKPOINT_MD } from '../../constants/breakpoints';
-import { Box } from 'boemly';
-
-export const SliderContainer = styled(Box)`
-  --mobile-image-width: calc(100vw - var(--boemly-space-24));
-  --desktop-image-width: var(--boemly-sizes-md);
-
-  width: var(--boemly-size-full);
-
-  overflow-x: hidden;
-
-  padding-left: max(
-    var(--boemly-space-8),
-    calc(50vw - var(--boemly-sizes-7xl) / 2 + var(--boemly-space-6))
-  );
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    overflow-x: scroll;
-    padding-left: max(
-      var(--boemly-space-8),
-      calc(50vw - var(--boemly-sizes-7xl) / 2 + var(--boemly-space-8))
-    );
-  }
-`;
-
-interface SliderInnerContainerProps {
-  imageCount: number;
-}
-export const SliderInnerContainer = styled(
-  motion.div
-)<SliderInnerContainerProps>`
-  display: flex;
-  gap: var(--boemly-space-6);
-
-  width: fit-content;
-`;
-
-export const ItemContainer = styled(Box)`
-  width: var(--desktop-image-width);
-
-  :last-of-type {
-    margin-right: var(--boemly-space-8);
-  }
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    width: var(--mobile-image-width);
-  }
-`;
-
-interface ImageContainerProps {
-  aspectRatio: number;
-}
-export const ImageContainer = styled(Box)<ImageContainerProps>`
-  position: relative;
-
-  max-height: var(--boemly-sizes-xl);
-  height: calc(
-    var(--desktop-image-width) /
-      ${({ aspectRatio }: ImageContainerProps) => aspectRatio}
-  );
-  width: var(--desktop-image-width);
-
-  border-radius: var(--boemly-radii-xl);
-
-  & img {
-    border-radius: var(--boemly-radii-xl);
-  }
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    height: calc(
-      var(--mobile-image-width) /
-        ${({ aspectRatio }: ImageContainerProps) => aspectRatio}
-    );
-    width: var(--mobile-image-width);
-  }
-`;

package/src/slices/Glossary/Glossary.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import Glossary from '.';
-
-export default {
-  title: 'slices/Glossary',
-  component: Glossary,
-} as Meta<typeof Glossary>;
-
-const Template: StoryFn<typeof Glossary> = (args) => <Glossary {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  slice: {
-    glossary_items: [
-      {
-        id: 1,
-        attributes: {
-          title: 'Chocolate',
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
-          slug: 'chocolate-slug',
-        },
-      },
-      {
-        id: 2,
-        attributes: {
-          title: 'Ananas',
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
-          slug: 'ananas-slug',
-        },
-      },
-      {
-        id: 3,
-        attributes: {
-          title: 'Another',
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
-          slug: 'another-slug',
-        },
-      },
-    ],
-  },
-};

package/src/slices/Glossary/Glossary.test.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor, userEvent } from '../../test/testUtils';
-import Glossary from '.';
-import { GlossaryProps } from './Glossary';
-
-const copyToClipboardSpy = jest.fn();
-const mockedResult = jest.fn().mockReturnValue({ noUserInteraction: false });
-
-jest.mock('react-use', () => ({
-  ...jest.requireActual('react-use'),
-  useCopyToClipboard: () => [mockedResult(), copyToClipboardSpy],
-}));
-
-const defaultProps: GlossaryProps = {
-  slice: {
-    glossary_items: [
-      {
-        id: 1,
-        attributes: {
-          title: 'chocolate-title',
-          text: 'chocolate-text',
-          slug: 'chocolate-slug',
-        },
-      },
-      {
-        id: 2,
-        attributes: {
-          title: 'ananas-title',
-          text: 'ananas-text',
-          slug: 'ananas-slug',
-        },
-      },
-      {
-        id: 3,
-        attributes: {
-          title: 'another-title',
-          text: 'another-text',
-          slug: 'another-slug',
-        },
-      },
-    ],
-  },
-};
-
-const setup = () => render(<Glossary {...defaultProps} />);
-
-describe('The Glossary component', () => {
-  afterEach(() => {
-    copyToClipboardSpy.mockClear();
-    mockedResult.mockClear();
-  });
-
-  it('groups the items by the first letter of the title', () => {
-    setup();
-
-    expect(screen.getByText('A')).toBeInTheDocument();
-    expect(screen.getByText('C')).toBeInTheDocument();
-  });
-
-  it('the title and text of the items', () => {
-    setup();
-
-    expect(screen.getByText('chocolate-title')).toBeInTheDocument();
-    expect(screen.getByText('chocolate-text')).toBeInTheDocument();
-  });
-
-  it('adds the slug as an id to the title', () => {
-    setup();
-
-    expect(screen.getByText('chocolate-title')).toHaveAttribute(
-      'id',
-      'chocolate-slug'
-    );
-  });
-
-  it('adds a button that copies the anchor link to the users clipboard', async () => {
-    setup();
-
-    await userEvent.click(screen.getAllByRole('button')[0]);
-
-    await waitFor(() => {
-      expect(copyToClipboardSpy).toHaveBeenCalledWith(
-        'http://localhost/#ananas-slug'
-      );
-    });
-  });
-
-  it('shows a success message when copying succeeded', async () => {
-    mockedResult.mockReturnValueOnce({
-      noUserInteraction: false,
-      value: 'http://localhost/#ananas-slug',
-    });
-
-    setup();
-
-    await userEvent.click(screen.getAllByRole('button')[0]);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('check-icon')).toBeInTheDocument();
-    });
-  });
-});

package/src/slices/Glossary/Glossary.tsx

@@ -1,110 +0,0 @@
-import React, { useContext, useState } from 'react';
-import {
-  DefaultSectionContainer,
-  Divider,
-  Flex,
-  GridItem,
-  Heading,
-  IconButton,
-  SimpleGrid,
-  Text,
-  Wrapper,
-} from 'boemly';
-import { Check, Link as LinkIcon } from '@phosphor-icons/react';
-import { useCopyToClipboard } from 'react-use';
-import IStrapiData from '../../models/strapi/IStrapiData';
-import StrapiGlossaryItem from '../../models/strapi/StrapiGlossaryItem';
-import { IntlContext } from '../../components/ContextProvider';
-
-export interface GlossaryProps {
-  slice: {
-    glossary_items: IStrapiData<StrapiGlossaryItem>[];
-  };
-}
-
-export const Glossary: React.FC<GlossaryProps> = ({ slice }: GlossaryProps) => {
-  const [, copyToClipboard] = useCopyToClipboard();
-  const { formatMessage } = useContext(IntlContext);
-  const grouped: Record<string, StrapiGlossaryItem[]> = {};
-  const [copiedItem, setCopiedItem] = useState<string>();
-
-  slice.glossary_items
-    .sort((a, b) => a.attributes.title.localeCompare(b.attributes.title))
-    .forEach((curr) => {
-      const index = curr.attributes.title.at(0)?.toUpperCase() || 'A';
-      if (!grouped[index]) {
-        grouped[index] = [];
-      }
-      grouped[index].push(curr.attributes);
-    }, {});
-
-  const handleAnchorClick = async (slug: string) => {
-    if (window?.location) {
-      const currentUrl = window.location.href.split('#')[0];
-      copyToClipboard(`${currentUrl}#${slug}`);
-      setCopiedItem(slug);
-
-      setTimeout(() => {
-        setCopiedItem(undefined);
-      }, 1200);
-    }
-  };
-
-  return (
-    <DefaultSectionContainer>
-      <Wrapper>
-        <SimpleGrid>
-          {Object.entries(grouped).map(([letter, items], index) => (
-            <GridItem maxW="xl" placeSelf="center" key={letter}>
-              <Heading size="3xl" mb="8">
-                {letter}
-              </Heading>
-
-              <SimpleGrid spacing="6">
-                {items.map((item) => (
-                  <GridItem key={item.slug}>
-                    <Flex mb="2" gap="1.5" alignItems="center">
-                      <Heading
-                        wordBreak="break-word"
-                        size="xl"
-                        id={item.slug}
-                        scrollMarginTop="calc(var(--header-height) + var(--boemly-sizes-10))"
-                      >
-                        {item.title}
-                      </Heading>
-                      <IconButton
-                        variant="ghost"
-                        size="xs"
-                        icon={
-                          copiedItem === item.slug ? (
-                            <Check size="16" data-testid="check-icon" />
-                          ) : (
-                            <LinkIcon size="16" />
-                          )
-                        }
-                        title={formatMessage({
-                          id: 'sections.glossary.copyButtonLabel',
-                        })}
-                        aria-label={formatMessage({
-                          id: 'sections.glossary.copyButtonLabel',
-                        })}
-                        onClick={async () => handleAnchorClick(item.slug)}
-                      />
-                    </Flex>
-                    <Text color="black" wordBreak="break-word">
-                      {item.text}
-                    </Text>
-                  </GridItem>
-                ))}
-              </SimpleGrid>
-
-              {index !== Object.keys(grouped).length - 1 && (
-                <Divider maxW="xl" placeSelf="center" mb="10" mt="10" />
-              )}
-            </GridItem>
-          ))}
-        </SimpleGrid>
-      </Wrapper>
-    </DefaultSectionContainer>
-  );
-};

package/src/slices/Glossary/index.ts

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

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

@@ -1,8 +0,0 @@
-const messagesDe = {
-  'sections.glossary.copyButtonLabel':
-    'Kopiere den Link zu diesem Abschnitt in die Zwischenablage',
-  'sections.glossary.copySuccessMessage': 'Link in die Zwischenablage kopiert',
-  'sections.glossary.copyFailureMessage':
-    'Link konnte nicht in die Zwischenablage kopiert werden',
-};
-export default messagesDe;

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

@@ -1,7 +0,0 @@
-const messagesEn = {
-  'sections.glossary.copyButtonLabel':
-    'Copy a link to this section to your clipboard',
-  'sections.glossary.copySuccessMessage': 'Copied the link to your clipboard',
-  'sections.glossary.copyFailureMessage': 'Could not copy link to clipboard',
-};
-export default messagesEn;

package/src/slices/Hero/Hero.stories.tsx

@@ -1,130 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import {
-  storybookStrapiCoverMock,
-  storybookStrapiGradientBottomUpMock,
-} from '../../test/storybookMocks/storybookStrapiMedia';
-import Hero from '.';
-
-export default {
-  title: 'slices/Hero',
-  component: Hero,
-} as Meta<typeof Hero>;
-
-const Template: StoryFn<typeof Hero> = (args) => <Hero {...args} />;
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  slice: {
-    title: 'Title',
-    subTitle: 'Sub title',
-    textAlign: 'center',
-    additionalButtons: [],
-  },
-};
-
-export const WithTagline = Template.bind({});
-WithTagline.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    textAlign: 'center',
-    additionalButtons: [],
-  },
-};
-
-export const WithButton = Template.bind({});
-WithButton.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    textAlign: 'center',
-    button: {
-      id: 1,
-      text: 'Button',
-      url: 'https://tree.ly',
-    },
-    additionalButtons: [],
-  },
-};
-
-export const WithAdditionalButton = Template.bind({});
-WithAdditionalButton.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    textAlign: 'center',
-    button: {
-      id: 1,
-      text: 'Button',
-      url: 'https://tree.ly',
-    },
-    additionalButtons: [
-      {
-        button: {
-          id: 1,
-          text: 'Button Right',
-          url: 'https://tree.ly',
-        },
-        variant: 'outline',
-      },
-    ],
-  },
-};
-
-export const WithImage = Template.bind({});
-WithImage.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    textAlign: 'center',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-    additionalButtons: [],
-  },
-};
-
-export const TextAlignLeft = Template.bind({});
-TextAlignLeft.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    textAlign: 'left',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-    additionalButtons: [],
-  },
-};
-
-export const TextAlignLeftWithShape = Template.bind({});
-TextAlignLeftWithShape.args = {
-  slice: {
-    tagline: 'Tagline',
-    title: 'Title',
-    subTitle: 'Sub title',
-    textAlign: 'left',
-    image: {
-      id: 1,
-      alt: 'Alt text',
-      img: { data: storybookStrapiCoverMock },
-    },
-    shape: {
-      id: 1,
-      alt: 'Shape alt text',
-      img: { data: storybookStrapiGradientBottomUpMock },
-    },
-    additionalButtons: [],
-  },
-};