@treely/strapi-slices 1.0.0

package/src/slices/ProjectsMap/MapMarker.test.tsx

@@ -0,0 +1,79 @@
+import { fireEvent, render, screen, waitFor } from '@/test/testUtils';
+import CreditsAvailableState from '@/models/CreditsAvailableState';
+import MapMarker, { MapMarkerProps } from './MapMarker';
+import messagesEn from './messages.en';
+
+const defaultProps: MapMarkerProps = {
+  title: 'Project title',
+  isPublic: true,
+};
+
+const setup = (props: Partial<MapMarkerProps> = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<MapMarker {...combinedProps} />);
+};
+
+describe('The MapMarker component', () => {
+  it('renders successfully with minimal props', () => {
+    setup({});
+
+    expect(screen.queryByText('Project title')).not.toBeInTheDocument();
+  });
+
+  it('renders successfully with minimal props', () => {
+    setup({});
+
+    fireEvent.mouseEnter(screen.getByTestId('mapmarker-pin'));
+
+    waitFor(() => {
+      expect(screen.findByText('Project title')).toBeInTheDocument();
+      expect(screen.findByRole('button')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders a button if slug is defined', () => {
+    setup({ slug: 'slug' });
+
+    expect(screen.getByTestId('mapmarker-pin').parentElement).toHaveProperty(
+      'href',
+      expect.stringContaining('/portfolio/slug')
+    );
+
+    fireEvent.mouseEnter(screen.getByTestId('mapmarker-pin'));
+
+    waitFor(() => {
+      const button = screen.getByText(
+        messagesEn['sections.projectsMap.link.text']
+      );
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveProperty(
+        'href',
+        expect.stringContaining('/portfolio/slug')
+      );
+    });
+  });
+
+  it('renders the project developer if it is defined', () => {
+    setup({
+      projectDeveloper: 'Project developer',
+    });
+
+    fireEvent.mouseEnter(screen.getByTestId('mapmarker-pin'));
+
+    waitFor(() => {
+      expect(screen.getByText('Project developer')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the credit availability if it is defined', () => {
+    setup({
+      creditsAvailable: CreditsAvailableState.YES,
+    });
+
+    fireEvent.mouseEnter(screen.getByTestId('mapmarker-pin'));
+
+    waitFor(() => {
+      expect(screen.getByText('CREDITS AVAILABLE')).toBeInTheDocument();
+    });
+  });
+});

package/src/slices/ProjectsMap/MapMarker.tsx

@@ -0,0 +1,99 @@
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Text,
+  useDisclosure,
+  useToken,
+} from 'boemly';
+import { MapPin } from '@phosphor-icons/react';
+import NextLink from 'next/link';
+import CreditsAvailableBadge from '@/components/CreditsAvailableBadge';
+import CreditsAvailableState from '@/models/CreditsAvailableState';
+import { FormattedMessage } from 'react-intl';
+
+export interface MapMarkerProps {
+  title: string;
+  isPublic?: boolean;
+  projectDeveloper?: string;
+  slug?: string;
+  creditsAvailable?: CreditsAvailableState;
+}
+
+const MapMarker = ({
+  title,
+  projectDeveloper,
+  slug,
+  creditsAvailable,
+  isPublic = false,
+}: MapMarkerProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const blue600 = useToken('colors', 'blue.600');
+
+  return (
+    <Flex
+      position="absolute"
+      gap="4"
+      onMouseEnter={onOpen}
+      onMouseLeave={onClose}
+      cursor="grab"
+    >
+      <Box as={slug ? NextLink : undefined} href={slug && `/portfolio/${slug}`}>
+        <MapPin
+          size="40px"
+          color={blue600}
+          weight="fill"
+          data-testid="mapmarker-pin"
+          filter="drop-shadow(0px 0px 2px #FFF)"
+        />
+      </Box>
+
+      {isPublic && isOpen && (
+        <Container
+          shadow="md"
+          width="max-content"
+          minWidth="3xs"
+          maxWidth={['3xs', null, null, 'sm']}
+        >
+          <Flex direction="column">
+            {creditsAvailable && (
+              <>
+                <CreditsAvailableBadge
+                  status={creditsAvailable}
+                  href={slug && `/portfolio/${slug}`}
+                />
+                <Box height="3" />
+              </>
+            )}
+
+            <Heading size="md">{title}</Heading>
+
+            {projectDeveloper && (
+              <Text size="smLowNormal" mt="1">
+                {projectDeveloper}
+              </Text>
+            )}
+
+            {slug && (
+              <Button
+                width="fit-content"
+                variant="outline"
+                size="sm"
+                as={NextLink}
+                href={`/portfolio/${slug}`}
+                mt="4"
+                whiteSpace="nowrap"
+              >
+                <FormattedMessage id="sections.projectsMap.link.text" />
+              </Button>
+            )}
+          </Flex>
+        </Container>
+      )}
+    </Flex>
+  );
+};
+
+export default MapMarker;

package/src/slices/ProjectsMap/ProjectsMap.stories.tsx

@@ -0,0 +1,101 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import fpmProjectMock from '@/test/integrationMocks/fpmProjectMock';
+import CreditsAvailableState from '@/models/CreditsAvailableState';
+import ProjectsMap from '.';
+
+export default {
+  title: 'sections/ProjectsMap',
+  component: ProjectsMap,
+} as Meta<typeof ProjectsMap>;
+
+const Template: StoryFn<typeof ProjectsMap> = (args) => (
+  <ProjectsMap {...args} />
+);
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {},
+  projects: [
+    fpmProjectMock,
+    {
+      isPublic: true,
+      ...fpmProjectMock,
+      geom: {
+        type: 'Point',
+        coordinates: [10.336542145100883, 47.82636837845707],
+      },
+    },
+  ],
+};
+
+export const WithHero = Template.bind({});
+WithHero.args = {
+  slice: {
+    tagline: 'Projects Map Tagline',
+    text: 'Projects Map Text',
+    title: 'Projects Map Title',
+  },
+
+  projects: [
+    fpmProjectMock,
+    {
+      isPublic: true,
+      ...fpmProjectMock,
+      geom: {
+        type: 'Point',
+        coordinates: [10.336542145100883, 47.82636837845707],
+      },
+    },
+  ],
+};
+
+export const InitialPosition = Template.bind({});
+InitialPosition.args = {
+  slice: {
+    defaultCenterCoordinates: {
+      latitude: 47.42636837845707,
+      longitude: 10.036542145100883,
+    },
+    defaultZoomLevel: 10,
+  },
+  projects: [
+    fpmProjectMock,
+    {
+      ...fpmProjectMock,
+      isPublic: true,
+      geom: {
+        type: 'Point',
+        coordinates: [10.336542145100883, 47.82636837845707],
+      },
+    },
+  ],
+};
+
+export const FullProps = Template.bind({});
+FullProps.args = {
+  slice: {
+    tagline: 'Projects Map Tagline',
+    text: 'Projects Map Text',
+    title: 'Projects Map Title',
+
+    defaultCenterCoordinates: {
+      latitude: 47.82636837845707,
+      longitude: 10.336542145100883,
+    },
+    defaultZoomLevel: 10,
+  },
+  projects: [
+    fpmProjectMock,
+    {
+      ...fpmProjectMock,
+      slug: 'project-slug',
+      creditsAvailable: CreditsAvailableState.YES,
+      isPublic: true,
+      geom: {
+        type: 'Point',
+        coordinates: [10.336542145100883, 47.82636837845707],
+      },
+    },
+  ],
+};

package/src/slices/ProjectsMap/ProjectsMap.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen } from '@/test/testUtils';
+import fpmProjectMock from '@/test/integrationMocks/fpmProjectMock';
+import { MAPBOX_INITIAL_ZOOM } from '@/constants/mapbox';
+import ProjectsMap from '.';
+import { ProjectsMapProps } from './ProjectsMap';
+import {
+  markerSetLngLatSpy,
+  markerAddToSpy,
+  mapConstructorMock,
+} from '../../../__mocks__/mapbox-gl';
+
+const defaultProps: ProjectsMapProps = {
+  slice: {},
+  projects: [],
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<ProjectsMap {...combinedProps} />);
+};
+
+describe('The ProjectsMap component', () => {
+  afterEach(() => {
+    markerSetLngLatSpy.mockClear();
+    markerAddToSpy.mockClear();
+    mapConstructorMock.mockClear();
+  });
+
+  it('renders successfully with minimal props', () => {
+    setup({});
+  });
+
+  it('renders the title, tagline and text', () => {
+    setup({
+      slice: {
+        title: 'title',
+        tagline: 'tagline',
+        text: 'text',
+      },
+    });
+
+    expect(screen.getByText('title')).toBeInTheDocument();
+    expect(screen.getByText('tagline')).toBeInTheDocument();
+    expect(screen.getByText('text')).toBeInTheDocument();
+  });
+
+  it('adds the projects to the map', () => {
+    setup({
+      projects: [fpmProjectMock],
+    });
+
+    expect(markerSetLngLatSpy).toHaveBeenCalledWith(
+      fpmProjectMock.geom?.coordinates
+    );
+    expect(markerAddToSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('sets the center to the bounding box of the projects coordinates by default', () => {
+    setup({
+      projects: [fpmProjectMock],
+    });
+
+    expect(mapConstructorMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        bounds: [
+          9.836542145100884, 47.22636837845707, 10.236542145100882,
+          47.62636837845707,
+        ],
+        center: undefined,
+        zoom: MAPBOX_INITIAL_ZOOM,
+      })
+    );
+  });
+
+  it('sets the and zoom to the specified ones if they are provided', () => {
+    setup({
+      slice: {
+        defaultCenterCoordinates: {
+          latitude: 13,
+          longitude: 23,
+        },
+        defaultZoomLevel: 7,
+      },
+      projects: [fpmProjectMock],
+    });
+
+    expect(mapConstructorMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        bounds: undefined,
+        center: [23, 13],
+        zoom: 7,
+      })
+    );
+  });
+});

package/src/slices/ProjectsMap/ProjectsMap.tsx

@@ -0,0 +1,150 @@
+import {
+  MAPBOX_INITIAL_ZOOM,
+  MAPBOX_MAX_ZOOM,
+  MAPBOX_TOKEN,
+  MapBoxStyle,
+} from '@/constants/mapbox';
+import { useIntl } from 'react-intl';
+import BBox from '@/models/BBox';
+import mergeBoundingBoxes from '@/utils/mergeBoundingBoxes';
+import { css } from '@emotion/react';
+import {
+  Box,
+  DefaultSectionContainer,
+  DefaultSectionHeader,
+  Wrapper,
+} from 'boemly';
+import mapboxgl, { LngLatBoundsLike, LngLatLike, Map, Marker } from 'mapbox-gl';
+import { MutableRefObject, createRef, useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import PortfolioProject from '@/models/PortfolioProject';
+import MinimalProviders from '@/components/MinimalProviders';
+import MapMarker from './MapMarker';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+mapboxgl.accessToken = 'MAPBOX_TOKEN';
+
+export interface ProjectsMapProps {
+  slice: {
+    tagline?: string;
+    title?: string;
+    text?: string;
+
+    defaultCenterCoordinates?: {
+      latitude: number;
+      longitude: number;
+    };
+    defaultZoomLevel?: number;
+  };
+
+  projects: PortfolioProject[];
+}
+
+export const ProjectsMap: React.FC<ProjectsMapProps> = ({
+  slice,
+  projects,
+}: ProjectsMapProps) => {
+  const { locale } = useIntl();
+
+  const filteredProjects = projects.filter(
+    (project) => project.geom
+  ) as (PortfolioProject & {
+    geom: Pick<PortfolioProject, 'geom'>;
+  })[];
+
+  const center: LngLatLike | undefined = slice.defaultCenterCoordinates
+    ? [
+        slice.defaultCenterCoordinates.longitude,
+        slice.defaultCenterCoordinates.latitude,
+      ]
+    : undefined;
+
+  const bounds: LngLatBoundsLike | undefined = center
+    ? undefined
+    : mergeBoundingBoxes(
+        filteredProjects.map(
+          (p): BBox =>
+            [
+              ...p.geom.coordinates.map((c) => c - 0.2),
+              ...p.geom.coordinates.map((c) => c + 0.2),
+            ] as BBox
+        )
+      );
+
+  const mapContainer = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const map = new Map({
+      container: mapContainer.current || '',
+      style: MapBoxStyle.CaliTerrain,
+      center,
+      zoom: slice.defaultZoomLevel || MAPBOX_INITIAL_ZOOM,
+      maxZoom: MAPBOX_MAX_ZOOM,
+      bounds,
+    });
+
+    filteredProjects
+      // Sort by longitude, so that the markers are rendeed form right to left
+      .sort((a, b) => b.geom.coordinates[0] - a.geom.coordinates[0])
+      .forEach((project) => {
+        const ref =
+          createRef<HTMLDivElement>() as MutableRefObject<HTMLDivElement>;
+        ref.current = document.createElement('div');
+
+        createRoot(ref.current).render(
+          <MinimalProviders locale={locale}>
+            <MapMarker
+              title={project.title}
+              isPublic={project.isPublic}
+              slug={project.slug}
+              creditsAvailable={project.creditsAvailable}
+              projectDeveloper={project.projectDeveloper?.name}
+            />
+          </MinimalProviders>
+        );
+
+        // Offset is needed to center the marker on the coordinates
+        const marker = new Marker(ref.current, { offset: [-20, -40] });
+
+        // No chaining here, because the mocks don't support it
+        marker.setLngLat(project.geom.coordinates);
+        marker.addTo(map);
+      });
+
+    // Clean up on unmount
+    return () => map.remove();
+  }, []);
+
+  return (
+    <DefaultSectionContainer>
+      <Wrapper>
+        {slice.title ? (
+          <>
+            <DefaultSectionHeader
+              tagline={slice.tagline}
+              title={slice.title}
+              text={slice.text}
+              taglineProps={{ textAlign: 'center' }}
+              titleProps={{ textAlign: 'center', maxW: '6xl', marginX: 'auto' }}
+              textProps={{ textAlign: 'center', maxW: '3xl', marginX: 'auto' }}
+            />
+            <Box height="16" />
+          </>
+        ) : (
+          <></>
+        )}
+
+        <Box
+          height="xl"
+          ref={mapContainer}
+          borderRadius="xl"
+          overflow="hidden"
+          boxShadow={['md', null, null, 'none']}
+          css={css`
+            mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+          `}
+        />
+      </Wrapper>
+    </DefaultSectionContainer>
+  );
+};

package/src/slices/ProjectsMap/index.ts

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

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

@@ -0,0 +1,3 @@
+export default {
+  'sections.projectsMap.link.text': 'Mehr Infos',
+};

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

@@ -0,0 +1,3 @@
+export default {
+  'sections.projectsMap.link.text': 'Show more info',
+};

package/src/slices/QAndA/QAndA.stories.tsx

@@ -0,0 +1,103 @@
+import { StoryFn, Meta } from '@storybook/react';
+
+import { storybookStrapiCoverMock } from '@/test/storybookMocks/storybookStrapiMedia';
+import QAndA from '.';
+
+export default {
+  title: 'sections/QAndA',
+  component: QAndA,
+} as Meta<typeof QAndA>;
+
+const Template: StoryFn<typeof QAndA> = (args) => <QAndA {...args} />;
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    questionsAndAnswers: [
+      { id: 1, key: 'Question 1', value: 'Answer 1' },
+      { id: 2, key: 'Question 2', value: 'Answer 2' },
+      { id: 3, key: 'Question 3', value: 'Answer 3' },
+    ],
+    otherQuestions: 'Other questions?',
+    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+  },
+};
+
+export const WithHero = Template.bind({});
+WithHero.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    questionsAndAnswers: [
+      { id: 1, key: 'Question 1', value: 'Answer 1' },
+      { id: 2, key: 'Question 2', value: 'Answer 2' },
+      { id: 3, key: 'Question 3', value: 'Answer 3' },
+    ],
+    otherQuestions: 'Other questions?',
+    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+    hero: {
+      id: 1,
+      title: 'Title',
+      subTitle: 'Sub title',
+      button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+      image: {
+        id: 1,
+        alt: 'Hero image alt text',
+        img: { data: storybookStrapiCoverMock },
+      },
+    },
+  },
+};
+
+export const WithScroll = Template.bind({});
+WithScroll.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    questionsAndAnswers: [
+      { id: 1, key: 'Question 1', value: 'Answer 1' },
+      { id: 2, key: 'Question 2', value: 'Answer 2' },
+      { id: 3, key: 'Question 3', value: 'Answer 3' },
+      { id: 4, key: 'Question 3', value: 'Answer 4' },
+      { id: 5, key: 'Question 3', value: 'Answer 5' },
+      { id: 6, key: 'Question 3', value: 'Answer 6' },
+      { id: 7, key: 'Question 3', value: 'Answer 7' },
+    ],
+    otherQuestions: 'Other questions?',
+    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+  },
+};
+
+export const Gray = Template.bind({});
+Gray.args = {
+  slice: {
+    variant: 'gray',
+    tagline: 'Tagline',
+    title: 'Title',
+    questionsAndAnswers: [
+      { id: 1, key: 'Question 1', value: 'Answer 1' },
+      { id: 2, key: 'Question 2', value: 'Answer 2' },
+      { id: 3, key: 'Question 3', value: 'Answer 3' },
+    ],
+    otherQuestions: 'Other questions?',
+    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+  },
+};
+
+export const White = Template.bind({});
+White.args = {
+  slice: {
+    variant: 'white',
+    tagline: 'Tagline',
+    title: 'Title',
+    questionsAndAnswers: [
+      { id: 1, key: 'Question 1', value: 'Answer 1' },
+      { id: 2, key: 'Question 2', value: 'Answer 2' },
+      { id: 3, key: 'Question 3', value: 'Answer 3' },
+    ],
+    otherQuestions: 'Other questions?',
+    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+  },
+};