npm - @treely/strapi-slices - Versions diffs - 7.16.2 → 8.0.0 - Mend

@treely/strapi-slices 7.16.2 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (986) hide show

package/src/components/FullScreenImage/ZoomableImage.tsx DELETED Viewed

@@ -1,84 +0,0 @@
-import StrapiImage from '../../models/strapi/StrapiImage';
-import strapiMediaUrl from '../../utils/strapiMediaUrl';
-import { Box } from 'boemly';
-import Head from 'next/head';
-import Image from 'next/image';
-import React, { useState } from 'react';
-interface ZoomableImageProps {
-  image: StrapiImage;
-  zoom?: number;
-}
-const ZoomableImage = ({ image, zoom = 200 }: ZoomableImageProps) => {
-  // define and set default values to the states of the component
-  const [isZoomed, setIsZoomed] = useState(false);
-  const [backgroundPos, setBackgroundPos] = useState('50% 50%');
-  const imageSrc = strapiMediaUrl(image.img, 'xLarge');
-  const zoomInPosition = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    // This will handle the calculations of the area where the image needs to zoom in depending on the user interaction
-    const zoomer = e.currentTarget.getBoundingClientRect();
-    const x = ((e.clientX - zoomer.x) / zoomer.width) * 100;
-    const y = ((e.clientY - zoomer.y) / zoomer.height) * 100;
-    setBackgroundPos(`${x}% ${y}%`);
-  };
-  const toggleZoomImage = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    if (isZoomed) {
-      setIsZoomed(false);
-    } else {
-      // Zoom in and set the background position correctly
-      setIsZoomed(true);
-      zoomInPosition(e);
-    }
-  };
-  const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    toggleZoomImage(e);
-  };
-  const handleMove = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    if (isZoomed) {
-      zoomInPosition(e);
-    }
-  };
-  return (
-    <>
-      <Head>
-        <link rel="prefetch" as="image" href={imageSrc} />
-      </Head>
-      <Box
-        position="relative"
-        display="inline-block"
-        width="full"
-        height="full"
-        overflow="hidden"
-        flexShrink="0"
-        scrollSnapAlign="center"
-        scrollSnapStop="always"
-        draggable="false"
-        cursor={isZoomed ? 'zoom-out' : 'zoom-in'}
-        backgroundImage={isZoomed ? `url( ${imageSrc} )` : 'none'}
-        backgroundSize={`${zoom}%`}
-        backgroundPosition={backgroundPos}
-        onClick={(e) => handleClick(e)}
-        onMouseMove={(e) => handleMove(e)}
-      >
-        <Image
-          src={imageSrc}
-          alt={image.alt}
-          fill
-          style={{
-            visibility: isZoomed ? 'hidden' : 'visible',
-            objectFit: 'contain',
-          }}
-        />
-      </Box>
-    </>
-  );
-};
-export default ZoomableImage;

package/src/components/FullScreenImage/index.ts DELETED Viewed

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

package/src/components/LogoCard/LogoCard.test.tsx DELETED Viewed

@@ -1,29 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { mergeDeep } from '../../utils/mergeDeep';
-import { strapiCustomerStoryMock } from '../../test/strapiMocks/strapiCustomerStory';
-import { LogoCardProps } from './LogoCard';
-import LogoCard from '.';
-const defaultProps: LogoCardProps = {
-  customerStory: strapiCustomerStoryMock.attributes,
-};
-const setup = (props = {}) => {
-  const combinedProps = mergeDeep(defaultProps, props);
-  render(<LogoCard {...combinedProps} />);
-};
-describe('The LogoCard component', () => {
-  it('displays the customer card image with the link', () => {
-    setup();
-    expect(screen.getByRole('img')).toBeInTheDocument();
-  });
-  it('displays the link', () => {
-    setup();
-    expect(screen.getByRole('link')).toBeInTheDocument();
-  });
-});

package/src/components/LogoCard/LogoCard.tsx DELETED Viewed

@@ -1,32 +0,0 @@
-import { Box, Container, Flex } from 'boemly';
-import { StrapiCustomerStory, strapiMediaUrl } from '../..';
-import Image from 'next/image';
-import React from 'react';
-import Link from 'next/link';
-export interface LogoCardProps {
-  customerStory: StrapiCustomerStory;
-}
-export const LogoCard = ({ customerStory }: LogoCardProps) => {
-  if (customerStory.cardImage) {
-    return (
-      <Container height="full" backgroundColor="primary.50">
-        <Flex justifyContent="center" height="full" padding="4">
-          <Box position="relative" height="12" width="36" marginY="auto">
-            <Link href={`/customer-stories/${customerStory.slug}`}>
-              <Image
-                src={strapiMediaUrl(customerStory.cardImage.img, 'medium')}
-                alt={customerStory.cardImage.alt}
-                fill
-                style={{
-                  objectFit: customerStory.cardImage.objectFit,
-                }}
-              />
-            </Link>
-          </Box>
-        </Flex>
-      </Container>
-    );
-  }
-  return <></>;
-};

package/src/components/LogoCard/index.ts DELETED Viewed

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

package/src/components/MinimalProviders/MinimalProviders.tsx DELETED Viewed

@@ -1,20 +0,0 @@
-import React from 'react';
-import { FONT_CUSTOMIZATIONS } from '../../constants/fontCustomizations';
-import { BoemlyThemeProvider } from 'boemly';
-import { IntlProvider } from 'react-intl';
-import getMessages from '../../utils/getMessages';
-interface MinimalProvidersProps {
-  locale: string;
-  children: JSX.Element | JSX.Element[];
-}
-const MinimalProviders = ({ children, locale }: MinimalProvidersProps) => (
-  <IntlProvider messages={getMessages(locale)} locale={locale}>
-    <BoemlyThemeProvider fonts={FONT_CUSTOMIZATIONS}>
-      {children}
-    </BoemlyThemeProvider>
-  </IntlProvider>
-);
-export default MinimalProviders;

package/src/components/MinimalProviders/index.ts DELETED Viewed

@@ -1,3 +0,0 @@
-import MinimalProviders from './MinimalProviders';
-export default MinimalProviders;

package/src/components/PreviewAlert/PreviewAlert.stories.tsx DELETED Viewed

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { PreviewAlert } from '.';
-export default {
-  title: 'dev/PreviewAlert',
-  component: PreviewAlert,
-} as Meta<typeof PreviewAlert>;
-const Template: StoryFn<typeof PreviewAlert> = () => <PreviewAlert />;
-export const Default = Template.bind({});

package/src/components/PreviewAlert/PreviewAlert.test.tsx DELETED Viewed

@@ -1,15 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { PreviewAlert } from '.';
-const setup = () => {
-  render(<PreviewAlert />);
-};
-describe('The PreviewAlert component', () => {
-  it('displays a preview alert', () => {
-    setup();
-    expect(screen.getByText('Preview')).toBeInTheDocument();
-  });
-});

package/src/components/PreviewAlert/PreviewAlert.tsx DELETED Viewed

@@ -1,10 +0,0 @@
-import React from 'react';
-import { BoemlyAlert, Box } from 'boemly';
-export const PreviewAlert = (): JSX.Element => {
-  return (
-    <Box position="fixed" top="4" left="4">
-      <BoemlyAlert text="Preview" status="error" />
-    </Box>
-  );
-};

package/src/components/PreviewAlert/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export { PreviewAlert } from './PreviewAlert';

package/src/components/ProjectGridCard/ProjectGridCard.test.tsx DELETED Viewed

@@ -1,60 +0,0 @@
-import { render, screen } from '../../test/testUtils';
-import { ProjectGridCardProps } from './ProjectGridCard';
-import ProjectGridCard from '.';
-import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
-import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
-import React from 'react';
-import messagesEn from '../../components/CreditsAvailableBadge/messages.en';
-const defaultProps: ProjectGridCardProps = {
-  project: {
-    ...fpmProjectMock,
-    slug: 'slug',
-    thumbnail: { img: { data: strapiMediaMock }, alt: 'Alt Text', id: 1 },
-  },
-};
-const setup = (props = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  render(<ProjectGridCard {...combinedProps} />);
-};
-describe('The ProjectGridCard component', () => {
-  it('displays the project card', () => {
-    setup();
-    expect(screen.getByText(fpmProjectMock.title)).toBeInTheDocument();
-  });
-  it('displays the project thumbnail', () => {
-    setup();
-    expect(screen.getByRole('img')).toHaveProperty('alt', 'Alt Text');
-  });
-  it('displays the project area', () => {
-    setup();
-    expect(screen.getByText('140 ha')).toBeInTheDocument();
-  });
-  it('displays the project location', () => {
-    setup();
-    expect(screen.getByText('Austria')).toBeInTheDocument();
-  });
-  it('displays the certification date if it is defined', () => {
-    setup();
-    expect(screen.getByText('Certified, 2020')).toBeInTheDocument();
-  });
-  it('displays the credits available badge', () => {
-    setup();
-    expect(
-      screen.getByText(messagesEn['components.creditsAvailableBadge.text.yes'])
-    ).toBeInTheDocument();
-  });
-});

package/src/components/ProjectGridCard/ProjectGridCard.tsx DELETED Viewed

@@ -1,75 +0,0 @@
-import { Box, Container, Flex, Heading, Tag, Text } from 'boemly';
-import React, { useContext } from 'react';
-import Image from 'next/image';
-import PortfolioProject from '../../models/PortfolioProject';
-import { strapiMediaUrl } from '../..';
-import { FORMAT_AS_HECTARE_CONFIG } from '../../constants/formatter';
-import CreditsAvailableBadge from '../../components/CreditsAvailableBadge';
-import { IntlContext } from '../ContextProvider';
-export interface ProjectGridCardProps {
-  project: PortfolioProject;
-}
-export const ProjectGridCard = ({
-  project,
-}: ProjectGridCardProps): JSX.Element => {
-  const { formatNumber, formatMessage } = useContext(IntlContext);
-  return (
-    <Container height="full">
-      <Flex flexDir="column" height="full">
-        {project.thumbnail && (
-          <Box borderRadius="xl" position="relative" height="36" mb="2">
-            <Image
-              src={strapiMediaUrl(project.thumbnail?.img, 'medium')}
-              alt={project.thumbnail?.alt}
-              fill
-              style={{
-                objectFit: project.thumbnail?.objectFit || 'cover',
-                borderRadius: 'var(--boemly-radii-xl)',
-              }}
-            />
-          </Box>
-        )}
-        <Heading my="4" size="lg">
-          {project.friendlyName || project.title}
-        </Heading>
-        <Flex flexDir="row" gap="2" flexWrap="wrap">
-          <Tag>
-            <Text size="xsLowBold" color="gray.800">
-              {formatNumber(
-                (project.area || 0) / 10000,
-                FORMAT_AS_HECTARE_CONFIG
-              )}
-            </Text>
-          </Tag>
-          <Tag>
-            <Text size="xsLowBold" color="gray.800">
-              {project.location}
-            </Text>
-          </Tag>
-          {project.certificationDate ? (
-            <Tag>
-              <Text size="xsLowBold" color="gray.800">
-                {formatMessage(
-                  { id: 'components.projectGridCard.certified' },
-                  { year: new Date(project.certificationDate).getFullYear() }
-                )}
-              </Text>
-            </Tag>
-          ) : (
-            <Tag>
-              <Text size="xsLowBold" color="gray.800">
-                {formatMessage({
-                  id: 'components.projectGridCard.certificationInProgress',
-                })}
-              </Text>
-            </Tag>
-          )}
-          <CreditsAvailableBadge status={project.creditAvailability} />
-        </Flex>
-      </Flex>
-    </Container>
-  );
-};

package/src/components/ProjectGridCard/index.ts DELETED Viewed

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

package/src/components/ProjectGridCard/messages.de.ts DELETED Viewed

@@ -1,6 +0,0 @@
-const messagesDe = {
-  'components.projectGridCard.certified': 'Zertifiziert, {year}',
-  'components.projectGridCard.certificationInProgress':
-    'Zertifizierung ist in Arbeit',
-};
-export default messagesDe;

package/src/components/ProjectGridCard/messages.en.ts DELETED Viewed

@@ -1,6 +0,0 @@
-const messagesDe = {
-  'components.projectGridCard.certified': 'Certified, {year}',
-  'components.projectGridCard.certificationInProgress':
-    'Certification in progress',
-};
-export default messagesDe;

package/src/components/SEOTags/SEOTags.tsx DELETED Viewed

@@ -1,211 +0,0 @@
-import React from 'react';
-import Head from 'next/head';
-import {
-  DEFAULT_SHARE_ALT,
-  DEFAULT_SHARE_IMAGE,
-} from '../../constants/metadata';
-import {
-  Article,
-  BlogPosting,
-  Brand,
-  BreadcrumbList,
-  Event,
-  FAQPage,
-  HowTo,
-  LocalBusiness,
-  Offer,
-  Organization,
-  Person,
-  Product,
-  QAPage,
-  Service,
-  SoftwareApplication,
-  WebPage,
-  WithContext,
-} from 'schema-dts';
-type SupportedSchemaType =
-  | Article
-  | BlogPosting
-  | Brand
-  | BreadcrumbList
-  | Event
-  | FAQPage
-  | HowTo
-  | LocalBusiness
-  | Offer
-  | Organization
-  | Person
-  | Product
-  | QAPage
-  | Product
-  | Service
-  | SoftwareApplication
-  | WebPage;
-// Helper function to convert SchemaValue to string
-const getTextValue = (value: unknown): string => {
-  if (typeof value === 'string') return value;
-  if (typeof value === 'object' && value !== null && 'text' in value) {
-    return (value as { text: string }).text;
-  }
-  return '';
-};
-// Helper function to safely access properties from a schema
-const getSchemaProperty = (
-  schema: SupportedSchemaType,
-  property: string
-): string => {
-  return (
-    getTextValue((schema as unknown as Record<string, unknown>)[property]) || ''
-  );
-};
-// Helper function to get a unique identifier from a schema
-const getSchemaIdentifier = (schema: SupportedSchemaType): string => {
-  const type = (schema as { '@type': string })['@type'];
-  switch (type) {
-    case 'Organization':
-      return getSchemaProperty(schema, 'name') || 'default';
-    case 'Article':
-    case 'BlogPosting':
-      return getSchemaProperty(schema, 'headline') || 'untitled-article';
-    case 'Product':
-      return getSchemaProperty(schema, 'name') || 'untitled-product';
-    case 'Person':
-      return getSchemaProperty(schema, 'name') || 'unnamed-person';
-    case 'Event':
-      return getSchemaProperty(schema, 'name') || 'untitled-event';
-    case 'LocalBusiness':
-      return getSchemaProperty(schema, 'name') || 'unnamed-business';
-    case 'Service':
-      return getSchemaProperty(schema, 'name') || 'unnamed-service';
-    case 'Brand':
-      return getSchemaProperty(schema, 'name') || 'unnamed-brand';
-    case 'FAQPage':
-      return 'faq-page';
-    case 'HowTo':
-      return getSchemaProperty(schema, 'name') || 'untitled-howto';
-    case 'BreadcrumbList':
-      return 'breadcrumbs';
-    case 'Offer':
-      const offer = schema as Offer;
-      return `offer-${offer.price ?? 'unknown-price'}`;
-    case 'WebPage':
-      return getSchemaProperty(schema, 'name') || 'untitled-page';
-    case 'QAPage':
-      return getSchemaProperty(schema, 'name') || 'untitled-qa';
-    case 'SoftwareApplication':
-      return getSchemaProperty(schema, 'name') || 'untitled-software';
-    default:
-      return 'unknown-schema';
-  }
-};
-interface SEOTagsProps {
-  title: string;
-  description: string;
-  shareImage?: {
-    url: string;
-    alt: string;
-  };
-  metaTitleSuffix?: string;
-  favicon?: string;
-  domain?: string;
-  /**
-   * Structured data for SEO purposes, following the schema.org standard.
-   * This can be a single schema object or an array of schema objects.
-   * Each object must include an `@context` property set to "https://schema.org"
-   * and an `@type` property indicating the type of schema (e.g., Article, Product).
-   */
-  schemaMarkup?:
-    | WithContext<SupportedSchemaType>
-    | WithContext<SupportedSchemaType>[];
-}
-const validateSchema = (
-  schema: WithContext<SupportedSchemaType> | WithContext<SupportedSchemaType>[]
-): boolean => {
-  if (Array.isArray(schema)) {
-    return schema.every(
-      (item) => item['@context'] === 'https://schema.org' && '@type' in item
-    );
-  }
-  return schema['@context'] === 'https://schema.org' && '@type' in schema;
-};
-export const SEOTags: React.FC<SEOTagsProps> = ({
-  title,
-  description,
-  shareImage,
-  metaTitleSuffix = 'Tree.ly',
-  favicon = 'https://cdn.tree.ly/favicon.ico',
-  domain = 'tree.ly',
-  schemaMarkup,
-}: SEOTagsProps) => {
-  const shareImageUrl = shareImage?.url ?? DEFAULT_SHARE_IMAGE;
-  const shareImageAlt = shareImage?.alt ?? DEFAULT_SHARE_ALT;
-  let schemas = schemaMarkup;
-  let isValidSchema = schemaMarkup ? validateSchema(schemaMarkup) : false;
-  if (schemaMarkup && !isValidSchema) {
-    console.warn(
-      'Invalid schema markup provided to SEOTags component. Schema markup will not be rendered.',
-      schemaMarkup
-    );
-    schemas = undefined;
-    isValidSchema = false;
-  }
-  const schemaArray = schemas
-    ? Array.isArray(schemas)
-      ? schemas
-      : [schemas]
-    : [];
-  const getSchemaKey = (
-    schema: WithContext<SupportedSchemaType>,
-    index: number
-  ): string => {
-    const type = (schema as { '@type': string })['@type'];
-    const identifier = getSchemaIdentifier(schema as SupportedSchemaType);
-    return `${type}-${identifier}-${index}`;
-  };
-  return (
-    <Head>
-      <title>{`${title} - ${metaTitleSuffix}`}</title>
-      <meta name="description" content={description} />
-      <link rel="icon" href={favicon} />
-      <meta property="og:url" content={`https://${domain}`} />
-      <meta property="og:type" content="website" />
-      <meta property="og:title" content={title} />
-      <meta property="og:description" content={description} />
-      <meta property="og:image" content={shareImageUrl} />
-      <meta property="og:image:alt" content={shareImageAlt} />
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta property="twitter:domain" content={domain} />
-      <meta property="twitter:url" content={`https://${domain}`} />
-      <meta name="twitter:title" content={title} />
-      <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={shareImageUrl} />
-      <meta name="twitter:image:alt" content={shareImageAlt} />
-      {isValidSchema &&
-        schemaArray.map((schema, index) => (
-          <script
-            key={getSchemaKey(schema, index)}
-            type="application/ld+json"
-            dangerouslySetInnerHTML={{
-              __html: JSON.stringify(schema),
-            }}
-          />
-        ))}
-    </Head>
-  );
-};

package/src/components/SEOTags/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export { SEOTags } from './SEOTags';

package/src/components/SliceRenderer/SliceRenderer.test.tsx DELETED Viewed

@@ -1,49 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test/testUtils';
-import { SliceRenderer } from '.';
-import { CustomSliceProps, SliceRendererProps } from './SliceRenderer';
-const defaultProps: SliceRendererProps = {
-  slices: [],
-  blogPosts: [],
-  projects: [],
-  customerStories: [],
-};
-const setup = (props: Partial<SliceRendererProps> = {}) => {
-  const combinedProps = { ...defaultProps, ...props };
-  return render(<SliceRenderer {...combinedProps} />);
-};
-describe('The SliceRenderer component', () => {
-  it('displays an error message if the given slice is not supported', () => {
-    setup({ slices: [{ id: 1, __component: 'Not supported slice' }] });
-    expect(
-      screen.getByText('Slice component not supported')
-    ).toBeInTheDocument();
-  });
-  it('renders an existing slice without errors', () => {
-    setup({
-      slices: [
-        { id: 1, __component: 'sections.rich-text', content: 'Rich text' },
-      ],
-    });
-    expect(screen.getByText('Rich text')).toBeInTheDocument();
-  });
-  it('renders a custom slice if given', () => {
-    const CustomSlice = ({ id }: CustomSliceProps): JSX.Element => (
-      <div>Custom slice {id}</div>
-    );
-    setup({
-      slices: [{ id: 1, __component: 'custom.slice' }],
-      CustomSlice,
-    });
-    expect(screen.getByText('Custom slice custom.slice')).toBeInTheDocument();
-  });
-});