@treely/strapi-slices 7.17.0 → 8.0.0

package/src/components/EventCard/EventCard.test.tsx

@@ -1,148 +0,0 @@
-import React from 'react';
-import { render, screen, userEvent, waitFor } from '../../test/testUtils';
-import EventCard from '.';
-import { EventCardProps } from './EventCard';
-import { strapiEventMock } from '../../test/strapiMocks/strapiEventMock';
-import { mergeDeep } from '../../utils/mergeDeep';
-
-const defaultProps: EventCardProps = {
-  event: strapiEventMock.attributes,
-};
-
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<EventCard {...combinedProps} />);
-};
-
-describe('The EventCard component', () => {
-  it('displays the event cards', () => {
-    setup();
-
-    expect(screen.getByText(defaultProps.event.title)).toBeInTheDocument();
-
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
-      'alt',
-      defaultProps.event.image.alt
-    );
-    expect(screen.getAllByRole('img')[1]).toHaveAttribute(
-      'alt',
-      defaultProps.event.logo.alt
-    );
-
-    expect(screen.getByText('Event Description')).toBeInTheDocument();
-    expect(screen.getByText('Event Title')).toBeInTheDocument();
-    expect(screen.getByText('Meet Up')).toBeInTheDocument();
-    expect(screen.getByText('English')).toBeInTheDocument();
-
-    expect(screen.getByRole('link')).toHaveAttribute(
-      'href',
-      defaultProps.event.button?.url
-    );
-
-    expect(screen.queryByText('Recommended')).not.toBeInTheDocument();
-    expect(screen.queryByText('Online')).not.toBeInTheDocument();
-  });
-
-  it('displays start and end date and time correctly', () => {
-    setup();
-
-    const textContent = screen.getByText(
-      /02\/12\/2024\s*\|\s*08:30\s*-\s*03\/12\/2024\s*\|\s*09:30/i
-    ).textContent;
-
-    const normalizedText = textContent?.replace(/\s+/g, ' ').trim();
-
-    expect(normalizedText).toBe('02/12/2024 | 08:30 - 03/12/2024 | 09:30');
-  });
-
-  it('does not display start and end time if allDay property set "true"', () => {
-    setup({
-      event: {
-        ...defaultProps.event,
-        allDay: true,
-      },
-    });
-
-    const textContent = screen.getByText(
-      /02\/12\/2024\s*-\s*03\/12\/2024/i
-    ).textContent;
-
-    const normalizedText = textContent?.replace(/\s+/g, ' ').trim();
-
-    expect(normalizedText).toBe('02/12/2024 - 03/12/2024');
-  });
-
-  it('displays the speakers', async () => {
-    setup();
-
-    const firstSpeakerImage = screen.getAllByRole('img')[2];
-    expect(firstSpeakerImage).toHaveAttribute(
-      'alt',
-      defaultProps.event.speakers?.[0]?.image.alt
-    );
-
-    await waitFor(() => userEvent.hover(firstSpeakerImage));
-    await waitFor(() => expect(screen.getByText('John Doe')).toBeVisible());
-
-    const secondSpeakerImage = screen.getAllByRole('img')[3];
-    expect(secondSpeakerImage).toHaveAttribute(
-      'alt',
-      defaultProps.event.speakers?.[1]?.image.alt
-    );
-
-    await waitFor(() => userEvent.hover(secondSpeakerImage));
-    await waitFor(() => expect(screen.getByText('Jane Doe')).toBeVisible());
-  });
-
-  it('displays optional props if they are defined in the slice', () => {
-    setup({
-      event: {
-        ...defaultProps.event,
-        recommended: true,
-        online: true,
-        location: 'Vienna',
-      },
-    });
-
-    expect(
-      screen.getByText((content) => content.includes('Recommended'))
-    ).toBeInTheDocument();
-    expect(screen.getByText('Online')).toBeInTheDocument();
-    expect(screen.getByText('Vienna')).toBeInTheDocument();
-  });
-
-  it('displays the right country flag', () => {
-    setup();
-    expect(screen.getByText('🇬🇧')).toBeInTheDocument();
-  });
-
-  it('displays multiple event types if they are defined in the slice', () => {
-    setup({
-      event: {
-        ...defaultProps.event,
-        eventTypes: [
-          { id: 1, eventType: 'Conference' },
-          { id: 2, eventType: 'Meet Up' },
-        ],
-      },
-    });
-
-    expect(screen.getByText('Conference')).toBeInTheDocument();
-    expect(screen.getByText('Meet Up')).toBeInTheDocument();
-  });
-
-  it('displays multiple languages if they are defined in the slice', () => {
-    setup({
-      event: {
-        ...defaultProps.event,
-        languages: [
-          { id: 1, language: 'German', countryCode: 'de' },
-          { id: 2, language: 'English', countryCode: 'en' },
-        ],
-      },
-    });
-
-    expect(screen.getByText('German')).toBeInTheDocument();
-    expect(screen.getByText('English')).toBeInTheDocument();
-  });
-});

package/src/components/EventCard/EventCard.tsx

@@ -1,334 +0,0 @@
-import React, { useContext, useState } from 'react';
-import {
-  Text,
-  Box,
-  Flex,
-  Heading,
-  Tooltip,
-  Tag,
-  useMediaQuery,
-  Button,
-} from 'boemly';
-import { css } from '@emotion/react';
-import Image from 'next/image';
-import StrapiLinkButton from '../StrapiLinkButton';
-import {
-  BowlFood,
-  CalendarBlank,
-  CaretDown,
-  CaretRight,
-  CaretUp,
-  ChalkboardTeacher,
-  Confetti,
-  Handshake,
-  Headset,
-  Info,
-  Laptop,
-  MapPinLine,
-  PersonSimpleWalk,
-  ProjectorScreenChart,
-  Star,
-  UsersThree,
-  Webcam,
-} from '@phosphor-icons/react';
-import getCountryFlag from '../../utils/getCountryFlag';
-import { BREAKPOINT_MD_QUERY } from '../../constants/breakpoints';
-import StrapiEvent, { EventType } from '../../models/strapi/StrapiEvent';
-import { IntlContext } from '../ContextProvider';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import isSameDate from '../../utils/isSameDate';
-
-export interface EventCardProps {
-  event: StrapiEvent;
-}
-
-const MAX_LENGTH = 120;
-const LOCATION_MAX_LENGTH = 28;
-
-const getEventIcon = (eventType: string): JSX.Element => {
-  switch (eventType) {
-    case EventType.WEBINAR:
-      return <Webcam size={12} />;
-    case EventType.CONFERENCE:
-      return <Headset size={12} />;
-    case EventType.MEET_UP:
-      return <UsersThree size={12} />;
-    case EventType.FOREST_WALK:
-      return <PersonSimpleWalk size={12} />;
-    case EventType.PARTNER_EVENT:
-      return <Handshake size={12} />;
-    case EventType.LUNCH_AND_LEARN:
-      return <BowlFood size={12} />;
-    case EventType.FAIR:
-      return <ChalkboardTeacher size={12} />;
-    case EventType.FESTIVAL:
-      return <Confetti size={12} />;
-    case EventType.ROADSHOW:
-      return <ProjectorScreenChart size={12} />;
-    default:
-      return <Info size={12} weight="fill" />;
-  }
-};
-
-export const EventCard = ({ event }: EventCardProps): JSX.Element => {
-  const { formatDate, formatNumber, formatMessage } = useContext(IntlContext);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [mobile] = useMediaQuery(BREAKPOINT_MD_QUERY);
-
-  const toggleText = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  const isLocationTooLong =
-    (event.location?.length ?? 0) >= LOCATION_MAX_LENGTH;
-
-  return (
-    <Box
-      borderRadius={['xl', null, null, '2xl']}
-      height="full"
-      width="full"
-      border="1px solid var(--boemly-colors-gray-200)"
-      background="white"
-    >
-      <Box
-        position="relative"
-        width="full"
-        height={['32', null, null, '44']}
-        borderTopRadius={['xl', null, null, '2xl']}
-        css={css`
-          & span,
-          div,
-          img {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-          }
-        `}
-      >
-        <Image
-          src={strapiMediaUrl(event.image?.img, 'medium')}
-          alt={event.image?.alt}
-          fill
-          style={{
-            objectFit: event.image?.objectFit || 'cover',
-          }}
-        />
-
-        <Box
-          position="absolute"
-          top={['6', null, null, '8']}
-          right={['6', null, null, '8']}
-          zIndex="1"
-          width={['12', null, null, '16']}
-          height={['12', null, null, '16']}
-        >
-          <Image
-            src={strapiMediaUrl(event.logo.img, 'medium')}
-            alt={event.logo.alt}
-            fill
-            style={{
-              objectFit: event.logo.objectFit || 'contain',
-              borderRadius: 'var(--boemly-radii-md)',
-              border:
-                '1px solid, var(--whiteAlpha-700, rgba(255, 255, 255, 0.64))',
-            }}
-          />
-        </Box>
-      </Box>
-      <Flex
-        flexDir="column"
-        p={['6', null, null, '8']}
-        h="calc(var(--boemly-sizes-full) - var(--boemly-sizes-44))"
-      >
-        <Flex flexDir="row" mb="4" gap="2" flexWrap="wrap">
-          {event.recommended ? (
-            <Flex mb={['2', null, null, '0']}>
-              <Tag backgroundColor="green.600">
-                <Star size={12} weight="fill" color="white" />
-                &nbsp;
-                <Text size="xsLowBold" color="white">
-                  {formatMessage({
-                    id: 'sections.eventCard.recommendedEvent',
-                  })}
-                </Text>
-              </Tag>
-            </Flex>
-          ) : (
-            <></>
-          )}
-          <Flex flexWrap="wrap" gap="2">
-            {event.eventTypes.map((e) => (
-              <Tag key={e.id}>
-                {getEventIcon(e.eventType)}&nbsp;
-                <Text size="xsLowBold" color="gray.800">
-                  {formatMessage({
-                    id: `sections.eventCard.eventType.${e.eventType
-                      .toLowerCase()
-                      .replace(/\s+/g, '')}`,
-                  })}
-                </Text>
-              </Tag>
-            ))}
-            {event.languages.map(({ id, language, countryCode }) => (
-              <Tag key={id}>
-                {getCountryFlag(countryCode)}&nbsp;
-                <Text size="xsLowBold" color="gray.800">
-                  {language}
-                </Text>
-              </Tag>
-            ))}
-          </Flex>
-        </Flex>
-        <Heading>{event.title}</Heading>
-        <Flex
-          gap={isLocationTooLong ? '2' : ['2', null, null, '6']}
-          alignItems={mobile || isLocationTooLong ? 'flex-start' : 'center'}
-          my="4"
-          flexDir={mobile || isLocationTooLong ? 'column' : 'row'}
-        >
-          {event.online && (
-            <Flex gap="2" alignItems="center">
-              <Laptop size={20} color={'var(--boemly-colors-primary-700)'} />
-              <Text size={['xsLowBold', null, null, 'smLowBold']}>Online</Text>
-            </Flex>
-          )}
-          {event.location && (
-            <Flex gap="2" alignItems="center">
-              <MapPinLine
-                size={20}
-                color={'var(--boemly-colors-primary-700)'}
-                weight="fill"
-              />
-              <Text size={['xsLowBold', null, null, 'smLowBold']}>
-                {event.location}
-              </Text>
-            </Flex>
-          )}
-          <Flex alignItems="center" gap="2">
-            <CalendarBlank
-              size={20}
-              color={'var(--boemly-colors-primary-700)'}
-            />
-            <Text size={['xsLowBold', null, null, 'smLowBold']}>
-              {formatDate(event.start, {
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit',
-              })}
-
-              {!event.allDay &&
-                ` | ${formatNumber(new Date(event.start).getUTCHours(), {
-                  minimumIntegerDigits: 2,
-                })}:${formatNumber(new Date(event.start).getUTCMinutes(), {
-                  minimumIntegerDigits: 2,
-                })}`}
-
-              {event.end &&
-                !isSameDate(new Date(event.start), new Date(event.end)) && (
-                  <>
-                    {' - '}
-                    {formatDate(event.end, {
-                      year: 'numeric',
-                      month: '2-digit',
-                      day: '2-digit',
-                    })}
-
-                    {!event.allDay &&
-                      ` | ${formatNumber(new Date(event.end).getUTCHours(), {
-                        minimumIntegerDigits: 2,
-                      })}:${formatNumber(new Date(event.end).getUTCMinutes(), {
-                        minimumIntegerDigits: 2,
-                      })}`}
-                  </>
-                )}
-
-              {event.end &&
-                !event.allDay &&
-                isSameDate(new Date(event.start), new Date(event.end)) &&
-                ` - ${formatNumber(new Date(event.end).getUTCHours(), {
-                  minimumIntegerDigits: 2,
-                })}:${formatNumber(new Date(event.end).getUTCMinutes(), {
-                  minimumIntegerDigits: 2,
-                })}`}
-            </Text>
-          </Flex>
-        </Flex>
-        <Text
-          mb={mobile ? '0' : '7'}
-          size={['xsRegularNormal', null, null, 'smRegularNormal']}
-        >
-          {isExpanded || !mobile
-            ? event.description
-            : `${event.description.substring(0, MAX_LENGTH)}...`}
-        </Text>
-        {event.description.length > MAX_LENGTH && mobile && (
-          <Flex justifyContent="flex-start">
-            <Button
-              mt="2"
-              onClick={toggleText}
-              variant="link"
-              rightIcon={
-                isExpanded ? <CaretUp size="12" /> : <CaretDown size="12" />
-              }
-            >
-              {formatMessage(
-                isExpanded
-                  ? {
-                      id: 'sections.eventCard.buttonShowLess',
-                    }
-                  : { id: 'sections.eventCard.buttonShowMore' }
-              )}
-            </Button>
-          </Flex>
-        )}
-        <Flex
-          mt={mobile ? '7' : 'auto'}
-          justifyContent={mobile ? undefined : 'space-between'}
-          flexDir={mobile ? 'column-reverse' : 'row'}
-          gap={mobile ? '4' : '0'}
-        >
-          {event.button && (
-            <Flex width={mobile ? 'full' : 'auto'}>
-              <StrapiLinkButton
-                key={event.button.id}
-                size="md"
-                variant={event.buttonVariant}
-                link={event.button}
-                rightIcon={<CaretRight size="10" />}
-                width="full"
-                component="EventCard"
-              />
-            </Flex>
-          )}
-          {event.speakers && event.speakers.length > 0 && (
-            <Flex flexDir="row" gap="2">
-              {event.speakers.map((speaker) => (
-                <Box key={speaker.id}>
-                  <Box
-                    width={['10', null, null, '12']}
-                    height={['10', null, null, '12']}
-                    position="relative"
-                    borderRadius="2xl"
-                  >
-                    <Tooltip label={speaker.name}>
-                      <Image
-                        src={strapiMediaUrl(speaker.image.img, 'medium')}
-                        alt={speaker.image.alt}
-                        fill
-                        style={{
-                          objectFit: speaker.image.objectFit || 'cover',
-                          borderRadius: 'var(--boemly-radii-md)',
-                          border:
-                            '1px solid, var(--whiteAlpha-700, rgba(255, 255, 255, 0.64))',
-                        }}
-                      />
-                    </Tooltip>
-                  </Box>
-                </Box>
-              ))}
-            </Flex>
-          )}
-        </Flex>
-      </Flex>
-    </Box>
-  );
-};

package/src/components/EventCard/index.ts

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

package/src/components/EventCard/messages.de.ts

@@ -1,16 +0,0 @@
-const messagesDe = {
-  'sections.eventCard.recommendedEvent': 'Empfohlene Veranstaltung',
-  'sections.eventCard.buttonShowMore': 'Mehr anzeigen',
-  'sections.eventCard.buttonShowLess': 'Weniger anzeigen',
-
-  'sections.eventCard.eventType.conference': 'Konferenz',
-  'sections.eventCard.eventType.webinar': 'Webinar',
-  'sections.eventCard.eventType.forestwalk': 'Waldspaziergang',
-  'sections.eventCard.eventType.partnerevent': 'Partnerveranstaltung',
-  'sections.eventCard.eventType.lunch&learn': 'Mittagessen & Lernen',
-  'sections.eventCard.eventType.fair': 'Messe',
-  'sections.eventCard.eventType.festival': 'Festival',
-  'sections.eventCard.eventType.roadshow': 'Roadshow',
-  'sections.eventCard.eventType.meetup': 'Meet Up',
-};
-export default messagesDe;

package/src/components/EventCard/messages.en.ts

@@ -1,16 +0,0 @@
-const messagesEn = {
-  'sections.eventCard.recommendedEvent': 'Recommended Event',
-  'sections.eventCard.buttonShowMore': 'Show More',
-  'sections.eventCard.buttonShowLess': 'Show Less',
-
-  'sections.eventCard.eventType.conference': 'Conference',
-  'sections.eventCard.eventType.webinar': 'Webinar',
-  'sections.eventCard.eventType.forestwalk': 'Forest Walk',
-  'sections.eventCard.eventType.partnerevent': 'Partner Event',
-  'sections.eventCard.eventType.lunch&learn': 'Lunch & Learn',
-  'sections.eventCard.eventType.fair': 'Fair',
-  'sections.eventCard.eventType.festival': 'Festival',
-  'sections.eventCard.eventType.roadshow': 'Roadshow',
-  'sections.eventCard.eventType.meetup': 'Meet Up',
-};
-export default messagesEn;

package/src/components/FullScreenImage/FullScreenImage.test.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import FullScreenImage from '.';
-import { FullScreenImageProps } from './FullScreenImage';
-
-const onCloseSpy = jest.fn();
-const changeImageSpy = jest.fn();
-
-const defaultProps: FullScreenImageProps = {
-  images: [
-    {
-      id: 1,
-      alt: 'alt-text',
-      img: { data: strapiMediaMock },
-    },
-  ],
-  isOpen: false,
-  onClose: onCloseSpy,
-};
-
-const setup = (props?: Partial<FullScreenImageProps>) => {
-  const combinedProps = { ...defaultProps, ...props };
-  return render(<FullScreenImage {...combinedProps} />);
-};
-
-describe('The FullScreenImage component', () => {
-  afterEach(() => {
-    onCloseSpy.mockClear();
-    changeImageSpy.mockClear();
-  });
-
-  it('does not display anything by default', () => {
-    setup();
-
-    expect(screen.queryByRole('img')).not.toBeInTheDocument();
-    expect(screen.queryByRole('button')).not.toBeInTheDocument();
-  });
-
-  it('shows the image and the close button', () => {
-    setup({ isOpen: true });
-
-    expect(screen.getByRole('img')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toBeInTheDocument();
-  });
-});

package/src/components/FullScreenImage/FullScreenImage.tsx

@@ -1,129 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { BoemlyModal, Flex, IconButton } from 'boemly';
-import { useKey, useLockBodyScroll } from 'react-use';
-import StrapiImage from '../../models/strapi/StrapiImage';
-import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import ZoomableImage from './ZoomableImage';
-
-export interface FullScreenImageProps {
-  images: StrapiImage[];
-  isOpen: boolean;
-  onClose: () => void;
-  currentIndex?: number;
-  setCurrentIndex?: (callback: (c: number) => number) => void;
-}
-
-export const FullScreenImage = ({
-  images,
-  isOpen,
-  onClose,
-  currentIndex = 0,
-  setCurrentIndex,
-}: FullScreenImageProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useLockBodyScroll(isOpen);
-
-  const canMoveRight = useMemo(
-    () => currentIndex < images.length - 1,
-    [currentIndex, images.length]
-  );
-  const canMoveLeft = useMemo(() => currentIndex !== 0, [currentIndex]);
-
-  const onRight = useCallback(
-    () => canMoveRight && setCurrentIndex && setCurrentIndex((c) => c + 1),
-    [canMoveRight]
-  );
-  const onLeft = useCallback(
-    () => canMoveLeft && setCurrentIndex && setCurrentIndex((c) => c - 1),
-    [canMoveLeft]
-  );
-
-  useKey('ArrowRight', onRight, {}, [onRight]);
-  useKey('ArrowLeft', onLeft, {}, [onLeft]);
-
-  useEffect(() => {
-    if (!!isOpen) {
-      setTimeout(() => {
-        containerRef?.current?.scrollTo({
-          left: currentIndex * containerRef.current.clientWidth,
-          behavior: 'instant',
-        });
-      }, 10);
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.scrollTo({
-        left: currentIndex * containerRef.current.clientWidth,
-        behavior: 'smooth',
-      });
-    }
-  }, [currentIndex, containerRef]);
-
-  return (
-    <BoemlyModal
-      onClose={onClose}
-      isOpen={isOpen}
-      title=""
-      trigger=""
-      size="full"
-      content={
-        <Flex
-          position="absolute"
-          insetY="16"
-          insetX="0"
-          alignItems="center"
-          justifyContent="center"
-        >
-          <Flex
-            ref={containerRef}
-            flexGrow="1"
-            flexBasis="100%"
-            flexShrink="1"
-            gap="4"
-            marginX="24"
-            scrollSnapType="x mandatory"
-            overflow="hidden"
-            position="relative"
-            height="full"
-            width="full"
-          >
-            {images.map((image) => (
-              <ZoomableImage key={image.id} image={image} />
-            ))}
-          </Flex>
-
-          <Flex
-            position="absolute"
-            inset="6"
-            justifyContent="space-between"
-            alignItems="center"
-            pointerEvents="none"
-          >
-            <IconButton
-              visibility={canMoveLeft ? 'visible' : 'hidden'}
-              onClick={onLeft}
-              icon={<CaretLeft size={16} />}
-              aria-label="Previous picture"
-              variant="outline"
-              pointerEvents="all"
-              mr="6"
-            />
-
-            <IconButton
-              visibility={canMoveRight ? 'visible' : 'hidden'}
-              onClick={onRight}
-              icon={<CaretRight size={16} />}
-              aria-label="Next picture"
-              variant="outline"
-              pointerEvents="all"
-              ml="4"
-            />
-          </Flex>
-        </Flex>
-      }
-    />
-  );
-};