@prezly/theme-kit-nextjs 1.18.2 → 2.0.0-1

package/src/data-fetching/api/queries.ts

@@ -1,51 +0,0 @@
-const publishedAndAccessible = [
-    { lifecycle_status: { $in: ['published', 'embargo'] } },
-    { visibility: { $in: ['public', 'private', 'embargo'] } },
-];
-
-const publishedAndPublic = [
-    { lifecycle_status: { $in: ['published'] } },
-    { visibility: { $in: ['public'] } },
-];
-
-export function getSlugQuery(newsroomUuid: string, slug: string) {
-    return {
-        $and: [
-            { 'newsroom.uuid': { $in: [newsroomUuid] } },
-            { slug: { $eq: slug } },
-            ...publishedAndAccessible,
-        ],
-    };
-}
-
-export function getStoriesQuery(newsroomUuid: string, categoryId?: number, localeCode?: string) {
-    const query: any = {
-        $and: [...publishedAndPublic, { 'newsroom.uuid': { $in: [newsroomUuid] } }],
-    };
-
-    if (categoryId) {
-        query.$and.push({ 'category.id': { $any: [categoryId] } });
-    }
-
-    if (localeCode) {
-        query.$and.push({ locale: { $in: [localeCode] } });
-    }
-
-    return query;
-}
-
-export function getSortByPublishedDate(order: 'asc' | 'desc') {
-    return order === 'desc' ? '-published_at' : 'published_at';
-}
-
-export function getGalleriesQuery() {
-    return {
-        $and: [{ status: { $eq: 'public' } }, { images_number: { $gt: 0 } }],
-    };
-}
-
-export function getContactsQuery() {
-    return {
-        $and: [{ is_featured: { $eq: true } }],
-    };
-}

package/src/data-fetching/index.ts

@@ -1,3 +0,0 @@
-export * from './api';
-export * from './lib';
-export * from './types';

package/src/data-fetching/lib/getAlgoliaSettings.ts

@@ -1,29 +0,0 @@
-import type { IncomingMessage } from 'http';
-
-import type { AlgoliaSettings } from '../types';
-
-import { getEnvVariables } from './getEnvVariables';
-
-export function getAlgoliaSettings(req?: IncomingMessage): AlgoliaSettings {
-    if (typeof window !== 'undefined') {
-        throw new Error('"getAlgoliaSettings" should only be used on back-end side.');
-    }
-
-    // `getEnvVariables` handles both cases for envs parsing - .env and request headers
-    const {
-        ALGOLIA_API_KEY = '',
-        ALGOLIA_APP_ID = 'UI4CNRAHQB',
-        ALGOLIA_INDEX = 'public_stories_prod',
-    } = getEnvVariables(req);
-
-    if (!ALGOLIA_API_KEY) {
-        // eslint-disable-next-line no-console
-        console.error('"ALGOLIA_API_KEY" is not set in env variables. Search will not be enabled');
-    }
-
-    return {
-        ALGOLIA_API_KEY,
-        ALGOLIA_APP_ID,
-        ALGOLIA_INDEX,
-    };
-}

package/src/data-fetching/lib/getEnvVariables.ts

@@ -1,46 +0,0 @@
-import type { IncomingMessage } from 'http';
-import parseDataUrl from 'parse-data-url';
-
-import type { PrezlyEnv } from '../types';
-
-function decodeJson(json: string): Record<string, any> {
-    try {
-        const decoded = JSON.parse(json);
-        if (decoded && typeof decoded === 'object') {
-            return decoded;
-        }
-    } catch {
-        // passthru
-    }
-    return {};
-}
-
-function decodeHttpEnv(header: string): Record<string, any> {
-    if (header.startsWith('data:')) {
-        const parsed = parseDataUrl(header);
-        if (parsed && parsed.contentType === 'application/json') {
-            const data = parsed.toBuffer().toString('utf-8');
-            return decodeJson(data);
-        }
-        return {}; // unsupported data-uri
-    }
-    return decodeJson(header);
-}
-
-export function getEnvVariables<EnvType extends PrezlyEnv = PrezlyEnv>(
-    req?: IncomingMessage,
-): NodeJS.ProcessEnv & EnvType {
-    if (typeof window !== 'undefined') {
-        throw new Error('"getEnvVariables" should only be used on back-end side.');
-    }
-
-    const headerName = (process.env.HTTP_ENV_HEADER || '').toLowerCase();
-
-    if (headerName && req) {
-        const header = req.headers[headerName] as string | undefined;
-        const httpEnv = decodeHttpEnv(header || '');
-        return { ...process.env, ...httpEnv } as NodeJS.ProcessEnv & EnvType;
-    }
-
-    return { ...process.env } as NodeJS.ProcessEnv & EnvType;
-}

package/src/data-fetching/lib/index.ts

@@ -1,4 +0,0 @@
-export { getAlgoliaSettings } from './getAlgoliaSettings';
-export { getEnvVariables } from './getEnvVariables';
-export { isSdkError } from './isSdkError';
-export { isUuid } from './isUuid';

package/src/data-fetching/lib/isSdkError.ts

@@ -1,5 +0,0 @@
-import type { SdkError } from '../../types';
-
-export function isSdkError(error: any): error is SdkError {
-    return 'payload' in error;
-}

package/src/data-fetching/lib/isUuid.ts

@@ -1,5 +0,0 @@
-const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
-
-export function isUuid(input: string) {
-    return UUID_REGEX.test(input);
-}

package/src/data-fetching/types.ts

@@ -1,14 +0,0 @@
-export interface AlgoliaSettings {
-    ALGOLIA_API_KEY: string;
-    ALGOLIA_APP_ID: string;
-    ALGOLIA_INDEX: string;
-}
-
-export interface PrezlyNewsroomEnv {
-    PREZLY_ACCESS_TOKEN: string;
-    PREZLY_NEWSROOM_UUID: string;
-    PREZLY_THEME_UUID?: string;
-    PREZLY_MODE?: 'preview';
-}
-
-export interface PrezlyEnv extends PrezlyNewsroomEnv, AlgoliaSettings {}

package/src/index.ts

@@ -1,9 +0,0 @@
-export * from './adapter-nextjs';
-export * from './components-nextjs';
-export * from './data-fetching';
-export * from './infinite-loading';
-export * from './intl';
-export * from './newsroom-context';
-export * from './sentry';
-export * from './types';
-export * from './utils';

package/src/infinite-loading/index.ts

@@ -1,4 +0,0 @@
-export { useInfiniteLoading } from './useInfiniteLoading';
-export { useInfiniteStoriesLoading } from './useInfiniteStoriesLoading';
-export { useInfiniteGalleriesLoading } from './useInfiniteGalleriesLoading';
-export * from './types';

package/src/infinite-loading/types.ts

@@ -1,5 +0,0 @@
-export interface PaginationProps {
-    itemsTotal: number;
-    currentPage: number;
-    pageSize: number;
-}

package/src/infinite-loading/useInfiniteGalleriesLoading.ts

@@ -1,53 +0,0 @@
-import type { NewsroomGallery } from '@prezly/sdk';
-
-import type { PaginationProps } from './types';
-import { useInfiniteLoading } from './useInfiniteLoading';
-
-async function fetchGalleries(
-    page: number,
-    pageSize: number,
-): Promise<{ galleries: NewsroomGallery[] }> {
-    const result = await fetch('/api/fetch-galleries', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            page,
-            pageSize,
-        }),
-    });
-
-    if (!result.ok) {
-        const { message } = await result.json();
-        throw new Error(message);
-    }
-
-    return result.json();
-}
-
-/**
- * NOTE: This hook depends on the presence of a Next API route (/api/fetch-galleries)!
- * The handler for this route is exported from `apiHandlers/fetchGalleries.ts` file.
- * See https://github.com/prezly/theme-nextjs-bea/blob/d381e9878187ca98815d240d3ffdf10a75993c14/pages/media/index.tsx#L23 for usage example
- */
-export function useInfiniteGalleriesLoading(
-    initialGalleries: NewsroomGallery[],
-    pagination: PaginationProps,
-) {
-    const { canLoadMore, data, isLoading, loadMore } = useInfiniteLoading<NewsroomGallery>({
-        fetchingFn: async (nextPage, pageSize) => {
-            const { galleries } = await fetchGalleries(nextPage, pageSize);
-            return galleries;
-        },
-        initialData: initialGalleries,
-        pagination,
-    });
-
-    return {
-        canLoadMore,
-        galleries: data,
-        isLoading,
-        loadMoreGalleries: loadMore,
-    };
-}

package/src/infinite-loading/useInfiniteLoading.ts

@@ -1,66 +0,0 @@
-import { useAsync } from '@react-hookz/web';
-import { useCallback, useEffect, useState } from 'react';
-
-import type { PaginationProps } from './types';
-
-interface Parameters<T> {
-    fetchingFn: (page: number, pageSize: number) => Promise<T[]>;
-    initialData: T[];
-    pagination: PaginationProps;
-}
-
-interface State<T> {
-    canLoadMore: boolean;
-    currentPage: number;
-    data: T[];
-    isLoading: boolean;
-    loadMore: () => void;
-    resetData: () => void;
-}
-
-export function useInfiniteLoading<T>({
-    fetchingFn,
-    initialData,
-    pagination,
-}: Parameters<T>): State<T> {
-    const [data, setData] = useState<T[]>(initialData);
-    const [currentPage, setCurrentPage] = useState(pagination.currentPage);
-
-    const { itemsTotal, pageSize } = pagination;
-    const pagesTotal = Math.ceil(itemsTotal / pageSize);
-    const canLoadMore = currentPage < pagesTotal;
-
-    const [{ error, status }, { execute: loadMoreFn }] = useAsync(async () => {
-        const nextPage = currentPage + 1;
-        const newData = await fetchingFn(nextPage, pageSize);
-        setCurrentPage(nextPage);
-        setData((currentData) => [...currentData, ...newData]);
-    });
-
-    const loadMore = useCallback(() => {
-        if (canLoadMore) {
-            loadMoreFn();
-        }
-    }, [canLoadMore, loadMoreFn]);
-
-    const resetData = useCallback(() => {
-        setData(initialData);
-        setCurrentPage(pagination.currentPage);
-    }, [pagination.currentPage, initialData]);
-
-    useEffect(() => {
-        if (error) {
-            // eslint-disable-next-line no-console
-            console.error(error);
-        }
-    }, [error]);
-
-    return {
-        canLoadMore,
-        currentPage,
-        data,
-        isLoading: status === 'loading',
-        loadMore,
-        resetData,
-    };
-}

package/src/infinite-loading/useInfiniteStoriesLoading.ts

@@ -1,81 +0,0 @@
-import type { Category, ExtraStoryFields, Story } from '@prezly/sdk';
-import { useEffect } from 'react';
-
-import type { LocaleObject } from '../intl';
-import { useCurrentLocale } from '../newsroom-context';
-
-import type { PaginationProps } from './types';
-import { useInfiniteLoading } from './useInfiniteLoading';
-
-async function fetchStories<T extends Story = Story>(
-    page: number,
-    pageSize: number,
-    category?: Category,
-    locale?: LocaleObject,
-    include?: (keyof ExtraStoryFields)[],
-): Promise<{ stories: T[] }> {
-    const result = await fetch('/api/fetch-stories', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            page,
-            pageSize,
-            category,
-            include,
-            ...(locale && {
-                localeCode: locale.toUnderscoreCode(),
-            }),
-        }),
-    });
-
-    if (!result.ok) {
-        const { message } = await result.json();
-        throw new Error(message);
-    }
-
-    return result.json();
-}
-
-/**
- * NOTE: This hook depends on the presence of a Next API route (/api/fetch-stories)!
- * The handler for this route is exported from `apiHandlers/fetchStories.ts` file.
- * See https://github.com/prezly/theme-nextjs-bea/blob/d381e9878187ca98815d240d3ffdf10a75993c14/pages/index.tsx#L24 for usage example
- */
-export function useInfiniteStoriesLoading<T extends Story = Story>(
-    initialStories: T[],
-    pagination: PaginationProps,
-    category?: Category,
-    include?: (keyof ExtraStoryFields)[],
-) {
-    const currentLocale = useCurrentLocale();
-
-    const { canLoadMore, data, isLoading, loadMore, resetData } = useInfiniteLoading<T>({
-        fetchingFn: async (nextPage, pageSize) => {
-            const { stories } = await fetchStories<T>(
-                nextPage,
-                pageSize,
-                category,
-                currentLocale,
-                include,
-            );
-            return stories;
-        },
-        initialData: initialStories,
-        pagination,
-    });
-
-    useEffect(() => {
-        if (category?.id) {
-            resetData();
-        }
-    }, [category?.id, resetData]);
-
-    return {
-        canLoadMore,
-        isLoading,
-        loadMoreStories: loadMore,
-        stories: data,
-    };
-}

package/src/intl/index.ts

@@ -1,4 +0,0 @@
-export * from './languages';
-export * from './locale';
-export { default as localeConfig } from './localeConfig';
-export * from './localeObject';

package/src/intl/languages.test.ts

@@ -1,232 +0,0 @@
-import { LANGUAGES } from '../__mocks__/languages';
-import { STORY } from '../__mocks__/story';
-
-import {
-    getCompanyInformation,
-    getDefaultLanguage,
-    getLanguageByExactLocaleCode,
-    getLanguageByNeutralLocaleCode,
-    getLanguageByShortRegionCode,
-    getLanguageDisplayName,
-    getLanguageFromNextLocaleIsoCode,
-    getLanguageFromStory,
-    getShortestLocaleCode,
-    getUsedLanguages,
-} from './languages';
-import { DUMMY_DEFAULT_LOCALE } from './locale';
-import { LocaleObject } from './localeObject';
-
-const ALL_LANGUAGES = Object.values(LANGUAGES);
-
-describe('getLanguageDisplayName', () => {
-    it('returns shortened name when language is the only culture', () => {
-        const languages = [LANGUAGES.en, LANGUAGES.fr];
-
-        expect(getLanguageDisplayName(LANGUAGES.en, languages)).toBe('English');
-        expect(getLanguageDisplayName(LANGUAGES.fr, languages)).toBe('Français');
-    });
-
-    it('returns full name when language is NOT the only culture', () => {
-        const languages = [LANGUAGES.nl_BE, LANGUAGES.nl_NL];
-
-        expect(getLanguageDisplayName(LANGUAGES.nl_BE, languages)).toBe('Nederlands (België)');
-        expect(getLanguageDisplayName(LANGUAGES.nl_NL, languages)).toBe('Nederlands (Nederland)');
-    });
-});
-
-describe('getDefaultLanguage', () => {
-    it('returns the actual default language', () => {
-        const languages = [LANGUAGES.en, LANGUAGES.fr];
-
-        expect(getDefaultLanguage(languages)).toEqual(LANGUAGES.en);
-    });
-
-    it('returns the first language if no default language is set', () => {
-        const languages = [LANGUAGES.nl_BE, LANGUAGES.nl_NL];
-
-        expect(getDefaultLanguage(languages)).toEqual(LANGUAGES.nl_BE);
-    });
-});
-
-describe('getUsedLanguages', () => {
-    it('filters out languages with no published stories', () => {
-        const languages = Object.values(LANGUAGES);
-        const usedLanguages = getUsedLanguages(languages);
-
-        expect(usedLanguages).toHaveLength(3);
-        expect(usedLanguages.every(({ public_stories_count }) => public_stories_count > 0)).toBe(
-            true,
-        );
-    });
-});
-
-describe('getLanguageByExactLocaleCode', () => {
-    const languages = [LANGUAGES.nl_BE, LANGUAGES.en];
-
-    it('returns a languages by its exact locale code', () => {
-        expect(getLanguageByExactLocaleCode(languages, LocaleObject.fromAnyCode('nl-BE'))).toEqual(
-            LANGUAGES.nl_BE,
-        );
-        expect(getLanguageByExactLocaleCode(languages, LocaleObject.fromAnyCode('en'))).toEqual(
-            LANGUAGES.en,
-        );
-    });
-
-    it('returns undefined when there is no langauge with exact locale code', () => {
-        expect(getLanguageByExactLocaleCode(languages, LocaleObject.fromAnyCode('nl'))).toBe(
-            undefined,
-        );
-    });
-});
-
-describe('getLanguageByNeutralLocaleCode', () => {
-    it('prefers default language', () => {
-        const languages = [LANGUAGES.en_US, LANGUAGES.en];
-
-        expect(getLanguageByNeutralLocaleCode(languages, LocaleObject.fromAnyCode('en'))).toEqual(
-            LANGUAGES.en,
-        );
-    });
-
-    it('prefers used cultures', () => {
-        const languages = [
-            LANGUAGES.en,
-            { ...LANGUAGES.nl_BE, public_stories_count: 0, stories_count: 0 },
-            LANGUAGES.nl_NL,
-        ];
-
-        expect(getLanguageByNeutralLocaleCode(languages, LocaleObject.fromAnyCode('nl'))).toEqual(
-            LANGUAGES.nl_NL,
-        );
-    });
-
-    it('returns first fitting culture from unused cultures', () => {
-        const languages = [
-            LANGUAGES.en,
-            { ...LANGUAGES.nl_BE, public_stories_count: 0, stories_count: 0 },
-            { ...LANGUAGES.nl_NL, public_stories_count: 0, stories_count: 0 },
-        ];
-
-        expect(getLanguageByNeutralLocaleCode(languages, LocaleObject.fromAnyCode('nl'))).toEqual(
-            languages[1],
-        );
-    });
-});
-
-describe('getLanguageByShortRegionCode', () => {
-    it('prefers default language', () => {
-        const languages = [LANGUAGES.nl_BE, { ...LANGUAGES.fr_BE, is_default: true }];
-
-        expect(getLanguageByShortRegionCode(languages, LocaleObject.fromAnyCode('be'))).toEqual(
-            languages[1],
-        );
-    });
-
-    it('prefers used cultures', () => {
-        const languages = [LANGUAGES.en, LANGUAGES.nl_BE, LANGUAGES.fr_BE];
-
-        expect(getLanguageByShortRegionCode(languages, LocaleObject.fromAnyCode('be'))).toEqual(
-            LANGUAGES.nl_BE,
-        );
-    });
-
-    it('returns first fitting culture from unused cultures', () => {
-        const languages = [
-            LANGUAGES.en,
-            LANGUAGES.fr_BE,
-            { ...LANGUAGES.nl_BE, public_stories_count: 0, stories_count: 0 },
-        ];
-
-        expect(getLanguageByShortRegionCode(languages, LocaleObject.fromAnyCode('be'))).toEqual(
-            LANGUAGES.fr_BE,
-        );
-    });
-});
-
-describe('getLanguageFromNextLocaleIsoCode', () => {
-    it('returns default language when no locale code provided or when dummy locale provided', () => {
-        expect(getLanguageFromNextLocaleIsoCode(ALL_LANGUAGES)).toEqual(LANGUAGES.en);
-        expect(getLanguageFromNextLocaleIsoCode(ALL_LANGUAGES, DUMMY_DEFAULT_LOCALE)).toEqual(
-            LANGUAGES.en,
-        );
-    });
-
-    it('returns language by exact code first', () => {
-        expect(getLanguageFromNextLocaleIsoCode(ALL_LANGUAGES, 'en')).toEqual(LANGUAGES.en);
-    });
-
-    it('returns language by region code second', () => {
-        expect(getLanguageFromNextLocaleIsoCode(ALL_LANGUAGES, 'be')).toEqual(LANGUAGES.nl_BE);
-        expect(getLanguageFromNextLocaleIsoCode(ALL_LANGUAGES, 'nl')).toEqual(LANGUAGES.nl_NL);
-    });
-
-    it('returns language by neutral code thrid', () => {
-        expect(
-            getLanguageFromNextLocaleIsoCode(
-                ALL_LANGUAGES.filter(({ code }) => code !== 'fr'),
-                'fr',
-            ),
-        ).toEqual(LANGUAGES.fr_BE);
-    });
-
-    it('returns undefined when no language found', () => {
-        expect(getLanguageFromNextLocaleIsoCode(ALL_LANGUAGES, 'zh-Hant')).toEqual(undefined);
-    });
-});
-
-describe('getLanguageFromStory', () => {
-    it('correctly returns language from a story', () => {
-        expect(getLanguageFromStory(ALL_LANGUAGES, STORY)).toEqual(LANGUAGES.en);
-    });
-});
-
-describe('getCompanyInformation', () => {
-    it('returns company information from target language', () => {
-        expect(getCompanyInformation(ALL_LANGUAGES, LocaleObject.fromAnyCode('nl-BE'))).toEqual(
-            LANGUAGES.nl_BE.company_information,
-        );
-    });
-
-    it('returns company information from default language if target not found', () => {
-        expect(getCompanyInformation(ALL_LANGUAGES, LocaleObject.fromAnyCode('de-DE'))).toEqual(
-            LANGUAGES.en.company_information,
-        );
-    });
-});
-
-describe('getShortestLocaleCode', () => {
-    it('returns false for default language', () => {
-        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('en'))).toBe(false);
-    });
-
-    it('returns neutral language code if it is the only culture with that language', () => {
-        expect(
-            getShortestLocaleCode(
-                ALL_LANGUAGES.filter(({ code }) => code !== 'es_419'),
-                LocaleObject.fromAnyCode('es-ES'),
-            ),
-        ).toBe('es');
-    });
-
-    it('returns region code if it is the only culture with that region', () => {
-        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('en-US'))).toBe('US');
-        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('en-GB'))).toBe('GB');
-        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('nl-NL'))).toBe('NL');
-        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('fr'))).toBe('FR');
-    });
-
-    it('returns full code if it can not be shortened', () => {
-        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('fr-BE'))).toBe(
-            'fr_BE',
-        );
-        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('nl-BE'))).toBe(
-            'nl_BE',
-        );
-    });
-
-    it('returns full code when trying to shorten to region code for es-419', () => {
-        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('es-419'))).toBe(
-            'es_419',
-        );
-    });
-});