@treely/strapi-slices 1.0.0

package/dist/test/storybookMocks/storybookMedia.d.ts

@@ -0,0 +1 @@
+export declare const storybookAvatarUrl = "https://cdn.tree.ly/storybook/v1/avatar.jpeg";

package/dist/test/storybookMocks/storybookStrapiMedia.d.ts

@@ -0,0 +1,8 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiMedia from '@/models/strapi/StrapiMedia';
+export declare const storybookStrapiAvatarMock: IStrapiData<StrapiMedia>;
+export declare const storybookStrapiCoverMock: IStrapiData<StrapiMedia>;
+export declare const storybookStrapiGradientTopDownMock: IStrapiData<StrapiMedia>;
+export declare const storybookStrapiGradientBottomUpMock: IStrapiData<StrapiMedia>;
+export declare const storybookStrapiTreeIconMock: IStrapiData<StrapiMedia>;
+export declare const storybookStrapiMapMock: IStrapiData<StrapiMedia>;

package/dist/test/strapiMocks/minimalGlobalData.d.ts

@@ -0,0 +1,4 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiGlobal from '@/models/strapi/StrapiGlobal';
+declare const minimalGlobalData: IStrapiData<StrapiGlobal>;
+export default minimalGlobalData;

package/dist/test/strapiMocks/strapiAvatarWithName.d.ts

@@ -0,0 +1,12 @@
+export declare const strapiAvatarWithNameMock: {
+    id: number;
+    name: string;
+    description: string;
+    image: {
+        id: number;
+        alt: string;
+        img: {
+            data: import("../../models/strapi/IStrapiData").default<import("../../models/strapi/StrapiMedia").default>;
+        };
+    };
+};

package/dist/test/strapiMocks/strapiBlogPost.d.ts

@@ -0,0 +1,3 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiBlogPost from '@/models/strapi/StrapiBlogPost';
+export declare const strapiBlogPostMock: IStrapiData<StrapiBlogPost>;

package/dist/test/strapiMocks/strapiContact.d.ts

@@ -0,0 +1,2 @@
+import StrapiContactArea from '@/models/strapi/StrapiContactArea';
+export declare const strapiContactMock: StrapiContactArea;

package/dist/test/strapiMocks/strapiCustomerStory.d.ts

@@ -0,0 +1,3 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiCustomerStory from '@/models/strapi/StrapiCustomerStory';
+export declare const strapiCustomerStoryMock: IStrapiData<StrapiCustomerStory>;

package/dist/test/strapiMocks/strapiHeroCard.d.ts

@@ -0,0 +1,2 @@
+import StrapiHeroCard from '@/models/strapi/StrapiHeroCard';
+export declare const strapiHeroCardMock: StrapiHeroCard;

package/dist/test/strapiMocks/strapiLinkPage.d.ts

@@ -0,0 +1,3 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiLinkPage from '@/models/strapi/StrapiLinkPage';
+export declare const strapiLinkPageMock: IStrapiData<StrapiLinkPage>;

package/dist/test/strapiMocks/strapiMedia.d.ts

@@ -0,0 +1,3 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiMedia from '@/models/strapi/StrapiMedia';
+export declare const strapiMediaMock: IStrapiData<StrapiMedia>;

package/dist/test/strapiMocks/strapiMetadata.d.ts

@@ -0,0 +1,2 @@
+import StrapiMetadata from '@/models/strapi/StrapiMetadata';
+export declare const strapiMetadataMock: StrapiMetadata;

package/dist/test/strapiMocks/strapiPage.d.ts

@@ -0,0 +1,3 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiPage from '@/models/strapi/StrapiPage';
+export declare const strapiPageMock: IStrapiData<StrapiPage>;

package/dist/test/strapiMocks/strapiPortfolioCard.d.ts

@@ -0,0 +1,2 @@
+import StrapiPortfolioCard from '@/models/strapi/StrapiPortfolioCard';
+export declare const strapiPortfolioCardMock: StrapiPortfolioCard;

package/dist/test/strapiMocks/strapiPortfolioMock.d.ts

@@ -0,0 +1,3 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiPortfolio from '@/models/strapi/StrapiPortfolio';
+export declare const strapiPortfolioMock: IStrapiData<StrapiPortfolio>;

package/dist/test/strapiMocks/strapiProject.d.ts

@@ -0,0 +1,3 @@
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiProject from '@/models/strapi/StrapiProject';
+export declare const strapiProjectMock: IStrapiData<StrapiProject>;

package/dist/test/strapiMocks/strapiProjectCard.d.ts

@@ -0,0 +1,2 @@
+import StrapiProjectCard from '@/models/strapi/StrapiProjectCard';
+export declare const strapiProjectCardMock: StrapiProjectCard;

package/dist/test/strapiMocks/strapiQuoteCard.d.ts

@@ -0,0 +1,2 @@
+import StrapiQuoteCard from '@/models/strapi/StrapiQuoteCard';
+export declare const strapiQuoteCardMock: StrapiQuoteCard;

package/dist/test/testUtils.d.ts

@@ -0,0 +1,6 @@
+import userEvent from '@testing-library/user-event';
+declare const render: (ui: any, { locale, ...renderOptions }?: {
+    locale?: string | undefined;
+}) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export * from '@testing-library/react';
+export { render, userEvent };

package/dist/unit.messages.de.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    'unit.formatter.tonsCo2': string;
+    'unit.formatter.tonsCo2PerYear': string;
+};
+export default _default;

package/dist/unit.messages.en.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    'unit.formatter.tonsCo2': string;
+    'unit.formatter.tonsCo2PerYear': string;
+};
+export default _default;

package/dist/utils/convertAreaM2ToHa.d.ts

@@ -0,0 +1,2 @@
+declare const convertAreaM2ToHa: (areaInM2: string) => number;
+export default convertAreaM2ToHa;

package/dist/utils/convertCo2AmountKgToTons.d.ts

@@ -0,0 +1,2 @@
+declare const convertCo2AmountKgToTons: (amount: string) => number;
+export default convertCo2AmountKgToTons;

package/dist/utils/convertToKebabCase.d.ts

@@ -0,0 +1,2 @@
+declare const convertToKebabCase: (str: string) => string;
+export default convertToKebabCase;

package/dist/utils/getTimeSpanInYears.d.ts

@@ -0,0 +1,2 @@
+declare const getTimeSpanInYears: (start: Date, end: Date) => number;
+export default getTimeSpanInYears;

package/dist/utils/mergeBoundingBoxes.d.ts

@@ -0,0 +1,3 @@
+import BBox from '@/models/BBox';
+declare const mergeBoundingBoxes: (boundingBoxes: BBox[]) => BBox;
+export default mergeBoundingBoxes;

package/dist/utils/mergeDeep.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export declare function isObject(item: any): any;
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export declare function mergeDeep(target: any, ...sources: any): any;

package/dist/utils/openHubSpotChat.d.ts

@@ -0,0 +1,2 @@
+declare const openHubSpotChat: () => void;
+export default openHubSpotChat;

package/dist/utils/strapiLinkUrl.d.ts

@@ -0,0 +1,3 @@
+import StrapiLink from '@/models/strapi/StrapiLink';
+declare const strapiLinkUrl: (strapiLink?: StrapiLink | undefined) => string;
+export default strapiLinkUrl;

package/dist/utils/strapiMediaUrl.d.ts

@@ -0,0 +1,5 @@
+import IStrapi from '@/models/strapi/IStrapi';
+import IStrapiData from '@/models/strapi/IStrapiData';
+import StrapiMedia from '@/models/strapi/StrapiMedia';
+declare const strapiMediaUrl: (media: IStrapi<IStrapiData<StrapiMedia>>, preferredSize?: 'native' | 'thumbnail' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge') => string;
+export default strapiMediaUrl;

package/package.json

@@ -0,0 +1,132 @@
+{
+  "name": "@treely/strapi-slices",
+  "version": "1.0.0",
+  "license": "MIT",
+  "author": "Tree.ly GmbH",
+  "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/treely/strapi-slices.git"
+  },
+  "bugs": {
+    "url": "https://github.com/treely/strapi-slices/issues"
+  },
+  "homepage": "https://tree.ly",
+  "release": {
+    "branches": [
+      "main"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/strapi-slices.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "analyze": "size-limit --why",
+    "build": "dts build",
+    "lint": "dts lint",
+    "prepare": "dts build",
+    "size": "size-limit",
+    "start": "dts watch",
+    "test": "dts test --passWithNoTests",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "dts lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "./src/test/setupTests.ts"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1",
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    },
+    "collectCoverageFrom": [
+      "./src/**/*.{js,jsx,ts,tsx}",
+      "!**/src/test/**",
+      "!**/src/index.ts",
+      "!**/*.de.ts",
+      "!**/*.stories.ts",
+      "!**/*.stories.tsx",
+      "!**/node_modules/**",
+      "!**/.next/**",
+      "!**/coverage/**",
+      "!**/.storybook/**",
+      "!**/storybook-static/**"
+    ]
+  },
+  "peerDependencies": {
+    "next": "^14.0.3",
+    "react": ">=18",
+    "react-intl": ">=6"
+  },
+  "engines": {
+    "node": ">=16 <=18"
+  },
+  "size-limit": [
+    {
+      "path": "dist/strapi-slices.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/strapi-slices.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.0.0",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/nextjs": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@tsconfig/recommended": "^1.0.3",
+    "@tsconfig/vite-react": "^2.0.1",
+    "@types/mapbox-gl": "^2.7.19",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "dts-cli": "^2.0.3",
+    "esbuild": "^0.19.8",
+    "husky": "^8.0.3",
+    "identity-obj-proxy": "^3.0.0",
+    "mq-polyfill": "^1.1.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "semantic-release": "^22.0.8",
+    "size-limit": "^11.0.0",
+    "storybook": "^7.5.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.2"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.0.15",
+    "adblock-detect-react": "^1.1.0",
+    "boemly": "^5.3.0",
+    "formik": "^2.4.5",
+    "mapbox-gl": "^2.15.0"
+  }
+}

package/src/components/CreditsAvailableBadge/CreditsAvailableBadge.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from '@/test/testUtils';
+import CreditsAvailableState from '@/models/CreditsAvailableState';
+import CreditsAvailableBadge, {
+  CreditsAvailableBadgeProps,
+} from './CreditsAvailableBadge';
+import messagesEn from './messages.en';
+
+const defaultProps: CreditsAvailableBadgeProps = {
+  status: CreditsAvailableState.YES,
+};
+
+const setup = (props: Partial<CreditsAvailableBadgeProps> = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<CreditsAvailableBadge {...combinedProps} />);
+};
+
+describe('The CreditsAvailableBadge component', () => {
+  it('renders successfully with minimal props', () => {
+    setup({});
+
+    expect(
+      screen.getByText(messagesEn['components.creditsAvailableBadge.text.yes'])
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(messagesEn['components.creditsAvailableBadge.text.yes'])
+    ).not.toHaveAttribute('href');
+  });
+
+  it('renders a link if specified', () => {
+    setup({ href: 'link-to' });
+
+    expect(
+      screen.getByText(messagesEn['components.creditsAvailableBadge.text.yes'])
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(messagesEn['components.creditsAvailableBadge.text.yes'])
+    ).toHaveAttribute('href', 'link-to');
+  });
+
+  it('renders correctly for the "some" case', () => {
+    setup({ status: CreditsAvailableState.SOME });
+
+    expect(
+      screen.getByText(messagesEn['components.creditsAvailableBadge.text.some'])
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly for the "no" case', () => {
+    setup({ status: CreditsAvailableState.NO });
+
+    expect(
+      screen.getByText(messagesEn['components.creditsAvailableBadge.text.no'])
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly for the "notYet" case', () => {
+    setup({ status: CreditsAvailableState.NOT_YET });
+
+    expect(
+      screen.getByText(
+        messagesEn['components.creditsAvailableBadge.text.notYet']
+      )
+    ).toBeInTheDocument();
+  });
+});

package/src/components/CreditsAvailableBadge/CreditsAvailableBadge.tsx

@@ -0,0 +1,55 @@
+import CreditsAvailableState from '@/models/CreditsAvailableState';
+import { Badge } from 'boemly';
+import NextLink from 'next/link';
+import { useIntl } from 'react-intl';
+
+export interface CreditsAvailableBadgeProps {
+  status: CreditsAvailableState;
+  href?: string;
+}
+
+const CreditsAvailableBadge = ({
+  status,
+  href,
+}: CreditsAvailableBadgeProps) => {
+  const { formatMessage } = useIntl();
+
+  const variants: Record<
+    CreditsAvailableState,
+    { color: string; text: string }
+  > = {
+    [CreditsAvailableState.YES]: {
+      color: 'green',
+      text: formatMessage({ id: 'components.creditsAvailableBadge.text.yes' }),
+    },
+    [CreditsAvailableState.SOME]: {
+      color: 'orange',
+      text: formatMessage({ id: 'components.creditsAvailableBadge.text.some' }),
+    },
+    [CreditsAvailableState.NO]: {
+      color: 'red',
+      text: formatMessage({ id: 'components.creditsAvailableBadge.text.no' }),
+    },
+    [CreditsAvailableState.NOT_YET]: {
+      color: 'blue',
+      text: formatMessage({
+        id: 'components.creditsAvailableBadge.text.notYet',
+      }),
+    },
+  };
+
+  const variant = variants[status];
+
+  return (
+    <Badge
+      as={href ? NextLink : undefined}
+      href={href}
+      colorScheme={variant.color}
+      width="fit-content"
+    >
+      {variant.text}
+    </Badge>
+  );
+};
+
+export default CreditsAvailableBadge;

package/src/components/CreditsAvailableBadge/index.ts

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

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

@@ -0,0 +1,7 @@
+export default {
+  'components.creditsAvailableBadge.text.yes': 'Credits verfügbar',
+  'components.creditsAvailableBadge.text.some': 'Einige verbleibende Credits',
+  'components.creditsAvailableBadge.text.no': 'Keine verbleibenden Credits',
+  'components.creditsAvailableBadge.text.notYet':
+    'Noch keine Credits verfügbar',
+};

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

@@ -0,0 +1,6 @@
+export default {
+  'components.creditsAvailableBadge.text.yes': 'Credits available',
+  'components.creditsAvailableBadge.text.some': 'Some remaining credits',
+  'components.creditsAvailableBadge.text.no': 'No remaining credits',
+  'components.creditsAvailableBadge.text.notYet': 'No credits available yet',
+};

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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,119 @@
+import { BoemlyModal, Flex, IconButton } from 'boemly';
+import { useKey, useLockBodyScroll } from 'react-use';
+import StrapiImage from '@/models/strapi/StrapiImage';
+import { useEffect, useRef, useState } from 'react';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
+import ZoomableImage from './ZoomableImage';
+
+export interface FullScreenImageProps {
+  images: StrapiImage[];
+  isOpen: boolean;
+  onClose: () => void;
+  openIndex?: number;
+}
+
+export const FullScreenImage = ({
+  images,
+  isOpen,
+  onClose,
+  openIndex,
+}: FullScreenImageProps) => {
+  const [imageIndex, setImageIndex] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useLockBodyScroll(isOpen);
+
+  const canMoveRight = imageIndex < images.length - 1;
+  const canMoveLeft = imageIndex !== 0;
+
+  const onRight = () => setImageIndex((p) => (canMoveRight ? p + 1 : p));
+  const onLeft = () => setImageIndex((p) => (canMoveLeft ? p - 1 : p));
+
+  useKey('ArrowRight', onRight, {}, [onRight]);
+  useKey('ArrowLeft', onLeft, {}, [onLeft]);
+
+  useEffect(() => {
+    if (openIndex !== undefined) {
+      setImageIndex(openIndex);
+    }
+  }, [openIndex]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        left: imageIndex * containerRef.current.clientWidth,
+        behavior: 'smooth',
+      });
+    }
+  }, [imageIndex, containerRef]);
+
+  const onCloseLocal = () => {
+    setImageIndex(0);
+    onClose();
+  };
+
+  return (
+    <BoemlyModal
+      onClose={onCloseLocal}
+      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>
+      }
+    />
+  );
+};