@prezly/theme-kit-nextjs 4.2.0-alpha.1 → 4.2.0-alpha.3

package/src/infinite-loading/useInfiniteGalleriesLoading.ts

@@ -1,54 +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: {
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            '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,67 +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, withHighlightedStory } = pagination;
-    const adjustedItemsTotal = withHighlightedStory ? itemsTotal - 1 : itemsTotal;
-    const pagesTotal = Math.ceil(adjustedItemsTotal / 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,94 +0,0 @@
-import type { Category, Story } from '@prezly/sdk';
-import type { LocaleObject } from '@prezly/theme-kit-core';
-import { useEffect } from 'react';
-
-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,
-    withHighlightedStory: boolean,
-    category?: Category,
-    locale?: LocaleObject,
-    include?: (keyof Story.ExtraFields)[],
-    pinning?: boolean,
-    filterQuery?: Object,
-): Promise<{ stories: T[] }> {
-    const result = await fetch('/api/fetch-stories', {
-        method: 'POST',
-        headers: {
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            page,
-            pageSize,
-            withHighlightedStory,
-            category,
-            include,
-            pinning,
-            ...(locale && {
-                localeCode: locale.toUnderscoreCode(),
-            }),
-            filterQuery,
-        }),
-    });
-
-    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 Story.ExtraFields)[],
-    pinning?: boolean,
-    filterQuery?: Object,
-) {
-    const currentLocale = useCurrentLocale();
-    const { withHighlightedStory = false } = pagination;
-
-    const { canLoadMore, data, isLoading, loadMore, resetData } = useInfiniteLoading<T>({
-        fetchingFn: async (nextPage, pageSize) => {
-            const { stories } = await fetchStories<T>(
-                nextPage,
-                pageSize,
-                withHighlightedStory,
-                category,
-                currentLocale,
-                include,
-                pinning,
-                filterQuery,
-            );
-            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,2 +0,0 @@
-export * from './languages';
-export * from './locale';

package/src/intl/languages.test.ts

@@ -1,37 +0,0 @@
-import { LANGUAGES } from '../__mocks__/languages';
-
-import { getLanguageFromNextLocaleIsoCode } from './languages';
-import { DUMMY_DEFAULT_LOCALE } from './locale';
-
-const ALL_LANGUAGES = Object.values(LANGUAGES);
-
-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);
-    });
-});

package/src/intl/languages.ts

@@ -1,40 +0,0 @@
-import type { NewsroomLanguageSettings } from '@prezly/sdk';
-import {
-    getDefaultLanguage,
-    getLanguageByExactLocaleCode,
-    getLanguageByNeutralLocaleCode,
-    getLanguageByShortRegionCode,
-    LocaleObject,
-} from '@prezly/theme-kit-core';
-
-import { DUMMY_DEFAULT_LOCALE } from './locale';
-
-/**
- * Retrieve a culture with fallback to legacy codes support.
- * Pulled from https://github.com/prezly/prezly/blob/de9900d9890a33502780494aa3fb85c9a732b3c3/lib/model/CulturePeer.php#L91-L114
- */
-export function getLanguageFromNextLocaleIsoCode(
-    languages: NewsroomLanguageSettings[],
-    nextLocaleIsoCode?: string,
-): NewsroomLanguageSettings | undefined {
-    const defaultLanguage = getDefaultLanguage(languages);
-
-    if (!nextLocaleIsoCode || nextLocaleIsoCode === DUMMY_DEFAULT_LOCALE) {
-        return defaultLanguage;
-    }
-
-    const locale = LocaleObject.fromAnyCode(nextLocaleIsoCode);
-    let targetLanguage: NewsroomLanguageSettings | undefined;
-
-    if (nextLocaleIsoCode.length >= 2 && nextLocaleIsoCode.length <= 4) {
-        // The order of methods here is reversed from `getShortestLocaleCode`, so that the logic "unwraps" the possible variants with no collisions
-        targetLanguage =
-            getLanguageByExactLocaleCode(languages, locale) ||
-            getLanguageByShortRegionCode(languages, locale) ||
-            getLanguageByNeutralLocaleCode(languages, locale);
-    } else {
-        targetLanguage = getLanguageByExactLocaleCode(languages, locale);
-    }
-
-    return targetLanguage;
-}

package/src/intl/locale.test.ts

@@ -1,42 +0,0 @@
-import { DUMMY_DEFAULT_LOCALE, getRedirectToCanonicalLocale } from './locale';
-
-describe('getRedirectToCanonicalLocale', () => {
-    it('returns undefined when no locale or dummy locale is provided', () => {
-        expect(getRedirectToCanonicalLocale('en', undefined, '/')).toBe(undefined);
-        expect(getRedirectToCanonicalLocale('en', DUMMY_DEFAULT_LOCALE, '/')).toBe(undefined);
-    });
-
-    it('returns undefined when locale is already canonical', () => {
-        expect(getRedirectToCanonicalLocale('en', 'en', '/')).toBe(undefined);
-        expect(getRedirectToCanonicalLocale('nl_BE', 'nl-be', '/')).toBe(undefined);
-    });
-
-    it('returns a redirect object when requested locale is not canonical', () => {
-        expect(getRedirectToCanonicalLocale(false, 'en-us', '/test')).toEqual({
-            destination: '/test',
-            permanent: false,
-        });
-
-        expect(getRedirectToCanonicalLocale('en', 'en-us', '/test')).toEqual({
-            destination: '/en/test',
-            permanent: false,
-        });
-
-        expect(getRedirectToCanonicalLocale('en', 'en-us', 'test')).toEqual({
-            destination: '/en/test',
-            permanent: false,
-        });
-    });
-
-    it('preserves query parameters', () => {
-        expect(
-            getRedirectToCanonicalLocale('en', 'en-us', '/test', {
-                page: '1',
-                tags: ['story', 'media'],
-            }),
-        ).toEqual({
-            destination: '/en/test?page=1&tags=story&tags=media',
-            permanent: false,
-        });
-    });
-});

package/src/intl/locale.ts

@@ -1,39 +0,0 @@
-import { LocaleObject } from '@prezly/theme-kit-core';
-import type { Redirect } from 'next';
-import type { ParsedUrlQuery } from 'querystring';
-import { stringify } from 'querystring';
-
-// We use pseudo locale used for localization testing, to reliably determine if we need to fallback to the default newsroom language
-export const DUMMY_DEFAULT_LOCALE = 'qps-ploc';
-
-export function getRedirectToCanonicalLocale(
-    shortestLocaleCode: string | false,
-    nextLocaleIsoCode: string | undefined,
-    redirectPath: string,
-    query?: ParsedUrlQuery,
-): Redirect | undefined {
-    // No need to redirect if no particular locale was requested by the application
-    if (!nextLocaleIsoCode || nextLocaleIsoCode === DUMMY_DEFAULT_LOCALE) {
-        return undefined;
-    }
-
-    const shortestLocaleSlug = shortestLocaleCode
-        ? LocaleObject.fromAnyCode(shortestLocaleCode).toUrlSlug()
-        : shortestLocaleCode;
-
-    if (shortestLocaleSlug !== nextLocaleIsoCode) {
-        const prefixedPath =
-            redirectPath && !redirectPath.startsWith('/') ? `/${redirectPath}` : redirectPath;
-
-        const urlQuery = query ? `?${stringify(query)}` : '';
-
-        return {
-            destination: shortestLocaleSlug
-                ? `/${shortestLocaleSlug}${prefixedPath}${urlQuery}`
-                : `${prefixedPath}${urlQuery}`,
-            permanent: false,
-        };
-    }
-
-    return undefined;
-}

package/src/newsroom-context/context.tsx

@@ -1,114 +0,0 @@
-import type {
-    Category,
-    ExtendedStory,
-    Newsroom,
-    NewsroomCompanyInformation,
-    NewsroomContact,
-    NewsroomLanguageSettings,
-    NewsroomThemePreset,
-    Notification,
-} from '@prezly/sdk';
-import type { AlgoliaSettings } from '@prezly/theme-kit-core';
-import { DEFAULT_LOCALE, LocaleObject } from '@prezly/theme-kit-core';
-import type { PropsWithChildren } from 'react';
-import { createContext, useMemo } from 'react';
-
-export interface NewsroomContextType {
-    /**
-     * Basic newsroom information: newsroom logos, settings, etc.
-     */
-    newsroom: Newsroom;
-    /**
-     * Contact information of the newsroom in the default language, usually displayed in the "About" section
-     */
-    companyInformation: NewsroomCompanyInformation;
-    /**
-     * List of all categories enabled on the newsroom
-     */
-    categories: Category[];
-    /**
-     * Optional: Contacts set up to be displayed on the newsroom home page.
-     * Will only be loaded if `loadHomepageContacts` option of `getNewsroomServerSideProps` is set to `true`.
-     */
-    contacts?: NewsroomContact[];
-    /**
-     * Optional: Refers to a currently selected category when navigated to `/category/[slug]` page.
-     */
-    currentCategory?: Category;
-    /**
-     * Optional: Refers to a currently selected story when navigated to `/[slug]` page.
-     */
-    currentStory?: ExtendedStory;
-    /**
-     * List of currently enabled newsroom languages, as well as company information translated for each language
-     */
-    languages: NewsroomLanguageSettings[];
-    /**
-     * Currently chosen locale
-     */
-    locale: LocaleObject;
-    /**
-     * Newsroom user-facing notifications (usually displayed as top-edge banners)
-     */
-    notifications: Notification[];
-    /**
-     * Theme settings as set in the Prezly app.
-     * You need to provide `PREZLY_THEME_UUID` in environment variables in order for the preset to be loaded.
-     * Only applicable to themes hosted on the Prezly infrastructure.
-     */
-    themePreset: NewsroomThemePreset | null;
-    /**
-     * Environment variables required for Algolia search to work.
-     */
-    algoliaSettings: AlgoliaSettings;
-}
-
-export interface NewsroomContextProps extends Omit<NewsroomContextType, 'locale'> {
-    localeCode: string;
-}
-
-export const NewsroomContext = createContext<NewsroomContextType | undefined>(undefined);
-
-/**
- * This context provides common Newsroom information retrieved by `getNewsroomServerSideProps` helper.
- * Please refer to the `NewsroomContextType` definition for more info on what's exposed from the context.
- */
-export function NewsroomContextProvider({
-    categories,
-    contacts,
-    newsroom,
-    currentCategory,
-    currentStory,
-    companyInformation,
-    languages,
-    localeCode,
-    notifications,
-    themePreset,
-    algoliaSettings,
-    children,
-}: PropsWithChildren<NewsroomContextProps>) {
-    const locale = useMemo(
-        () => LocaleObject.fromAnyCode(localeCode || DEFAULT_LOCALE),
-        [localeCode],
-    );
-
-    return (
-        <NewsroomContext.Provider
-            value={{
-                categories,
-                contacts,
-                newsroom,
-                currentCategory,
-                currentStory,
-                companyInformation,
-                languages,
-                locale,
-                notifications,
-                themePreset,
-                algoliaSettings,
-            }}
-        >
-            {children}
-        </NewsroomContext.Provider>
-    );
-}

package/src/newsroom-context/hooks/index.ts

@@ -1,11 +0,0 @@
-export * from './useAlgoliaSettings';
-export * from './useCategories';
-export * from './useCompanyInformation';
-export * from './useCurrentCategory';
-export * from './useCurrentLocale';
-export * from './useCurrentStory';
-export * from './useGetLinkLocaleSlug';
-export * from './useGetTranslationUrl';
-export * from './useLanguages';
-export * from './useNewsroom';
-export * from './useNewsroomContext';

package/src/newsroom-context/hooks/useAlgoliaSettings.ts

@@ -1,7 +0,0 @@
-import { useNewsroomContext } from './useNewsroomContext';
-
-export function useAlgoliaSettings() {
-    const context = useNewsroomContext();
-
-    return context.algoliaSettings;
-}

package/src/newsroom-context/hooks/useCategories.ts

@@ -1,7 +0,0 @@
-import { useNewsroomContext } from './useNewsroomContext';
-
-export function useCategories() {
-    const context = useNewsroomContext();
-
-    return context.categories;
-}

package/src/newsroom-context/hooks/useCompanyInformation.ts

@@ -1,7 +0,0 @@
-import { useNewsroomContext } from './useNewsroomContext';
-
-export function useCompanyInformation() {
-    const context = useNewsroomContext();
-
-    return context.companyInformation;
-}

package/src/newsroom-context/hooks/useCurrentCategory.ts

@@ -1,7 +0,0 @@
-import { useNewsroomContext } from './useNewsroomContext';
-
-export function useCurrentCategory() {
-    const context = useNewsroomContext();
-
-    return context.currentCategory;
-}

package/src/newsroom-context/hooks/useCurrentLocale.ts

@@ -1,7 +0,0 @@
-import { useNewsroomContext } from './useNewsroomContext';
-
-export function useCurrentLocale() {
-    const context = useNewsroomContext();
-
-    return context.locale;
-}

package/src/newsroom-context/hooks/useCurrentStory.ts

@@ -1,7 +0,0 @@
-import { useNewsroomContext } from './useNewsroomContext';
-
-export function useCurrentStory() {
-    const context = useNewsroomContext();
-
-    return context.currentStory;
-}

package/src/newsroom-context/hooks/useGetLinkLocaleSlug.ts

@@ -1,36 +0,0 @@
-import type { NewsroomLanguageSettings } from '@prezly/sdk';
-import { getShortestLocaleCode, LocaleObject } from '@prezly/theme-kit-core';
-import { useCallback } from 'react';
-
-import { useCurrentLocale } from './useCurrentLocale';
-import { useLanguages } from './useLanguages';
-
-/**
- * Determines correct locale slug for the link (trying to shorten the locale code if possible).
- * E.g. if newsroom has a single locale for Dutch (`nl_BE`), it will be shortened to `nl`.
- * If there are more than one locale with the same language part, a full locale code will be used instead.
- * `false` means that a default locale should be used (no locale in URL required).
- */
-function getLinkLocaleSlug(
-    languages: NewsroomLanguageSettings[],
-    locale: LocaleObject,
-): string | false {
-    const shortestLocaleCode = getShortestLocaleCode(languages, locale);
-    // When navigating to default language, we don't append the locale to the URL.
-    if (!shortestLocaleCode) {
-        return shortestLocaleCode;
-    }
-
-    return LocaleObject.fromAnyCode(shortestLocaleCode).toUrlSlug();
-}
-
-export function useGetLinkLocaleSlug() {
-    const currentLocale = useCurrentLocale();
-    const languages = useLanguages();
-
-    // The `locale` parameter is mainly used for Language Dropdown
-    return useCallback(
-        (locale?: LocaleObject) => getLinkLocaleSlug(languages, locale || currentLocale),
-        [languages, currentLocale],
-    );
-}