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

package/src/intl/localeObject.ts

@@ -1,99 +0,0 @@
-import localeConfig from './localeConfig';
-
-/**
- * This class is created to simplify working with locales and transforming between different locale code formats.
- * Prezly API uses underscore-codes, while most frontend application tend to use hyphen-codes or slugs.
- * Note that `fromAnyCode` constructor only accepts locales supported by Prezly backend. See `localeConfig` for reference.
- */
-export class LocaleObject {
-    /**
-     * Hyphen-separated locale code.
-     * Examples: `nl-BE`, `en-US`, `fr`, `fil`
-     */
-    private localeCode: string;
-
-    private constructor(localeCode: string) {
-        if (!/^([a-z]{2,3})(-[a-z\d]{1,4})?$/i.test(localeCode)) {
-            throw new Error('Invalid locale code provided!');
-        }
-
-        const [language, region] = localeCode.split('-');
-
-        if (region) {
-            // Workaround for `zh-Hant` locale, which is the only locale with non-uppercase region part
-            const regionSuffix = region === 'hant' ? 'Hant' : region.toUpperCase();
-
-            this.localeCode = [language, regionSuffix].join('-');
-        } else {
-            this.localeCode = language;
-        }
-    }
-
-    /**
-     * @param localeCode Locale code in any of the formats below.
-     * Examples:
-     * - Hyphen-codes: `nl-BE`, `en-US`, `fr`, `fil`
-     * - Underscore-codes: `nl_BE`, `en_US`, `fr`, `fil`
-     * - Slugs: `nl-be`, `en-us`, `fr`, `fil`
-     */
-    public static fromAnyCode(localeCode: string): LocaleObject {
-        const lowercaseCode = localeCode.toLowerCase().replace('_', '-');
-        const foundCode = localeConfig.find((code) => code === lowercaseCode);
-
-        if (!foundCode) {
-            throw new Error(`Unsupported locale code provided: "${lowercaseCode}"`);
-        }
-
-        return new LocaleObject(foundCode);
-    }
-
-    /**
-     * @returns Code formatted into hyphen format: `nl-BE`, `en-US`, `fr`, `fil`
-     */
-    public toHyphenCode(): string {
-        return this.localeCode;
-    }
-
-    /**
-     * @returns Code formatted into underscore format, as expected by Prezly API: `nl_BE`, `en_US`, `fr`, `fil`
-     */
-    public toUnderscoreCode(): string {
-        return this.localeCode.replace('-', '_');
-    }
-
-    /**
-     * @returns Code formatted to a URL-friendly lowercase slug format: `nl-be`, `en-us`, `fr`, `fil`
-     */
-    public toUrlSlug(): string {
-        return this.localeCode.toLowerCase();
-    }
-
-    /**
-     * @returns Only the language part of the code without culture/region part: `nl`, `en`, `fr`
-     */
-    public toNeutralLanguageCode(): string {
-        const [language] = this.localeCode.split('-');
-
-        return language;
-    }
-
-    /**
-     * @returns Only the culture/regtion part without the language part: `be`, `us`, `fr`
-     */
-    public toRegionCode(): string {
-        const [language, region] = this.localeCode.split('-');
-
-        if (!region) {
-            return language.toUpperCase();
-        }
-
-        return region.toUpperCase();
-    }
-
-    /**
-     * Check if two LocaleObject instances are representing the same locale code.
-     */
-    public isEqual(anotherLocale: LocaleObject) {
-        return anotherLocale.toHyphenCode() === this.localeCode;
-    }
-}

package/src/newsroom-context/context.tsx

@@ -1,115 +0,0 @@
-import type {
-    Category,
-    ExtendedStory,
-    Newsroom,
-    NewsroomCompanyInformation,
-    NewsroomContact,
-    NewsroomLanguageSettings,
-    NewsroomThemePreset,
-    Notification,
-} from '@prezly/sdk';
-import type { PropsWithChildren } from 'react';
-import { createContext, useMemo } from 'react';
-
-import type { AlgoliaSettings } from '../data-fetching';
-import { DEFAULT_LOCALE, LocaleObject } from '../intl';
-
-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,37 +0,0 @@
-import type { NewsroomLanguageSettings } from '@prezly/sdk';
-import { useCallback } from 'react';
-
-import { getShortestLocaleCode, LocaleObject } from '../../intl';
-
-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],
-    );
-}

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

@@ -1,96 +0,0 @@
-import type { Category, ExtendedStory } from '@prezly/sdk';
-import { useRouter } from 'next/router';
-import { useCallback } from 'react';
-
-import type { LocaleObject } from '../../intl';
-import { getCategoryHasTranslation, getCategoryUrl } from '../../utils';
-
-import { useCurrentCategory } from './useCurrentCategory';
-import { useCurrentStory } from './useCurrentStory';
-
-// Pulled from SDK types to not leak the `@prezly/sdk` dependency into the client bundle
-enum StoryVisibility {
-    PUBLIC = 'public',
-    EMBARGO = 'embargo',
-    PRIVATE = 'private',
-    CONFIDENTIAL = 'confidential',
-}
-
-function getAllowedTranslationVisibilityValues(story: ExtendedStory): StoryVisibility[] {
-    const { visibility } = story;
-
-    switch (visibility) {
-        case StoryVisibility.EMBARGO:
-            return [StoryVisibility.EMBARGO, StoryVisibility.PUBLIC];
-        case StoryVisibility.PRIVATE:
-            return [StoryVisibility.PRIVATE, StoryVisibility.PUBLIC];
-        case StoryVisibility.CONFIDENTIAL:
-            return [StoryVisibility.CONFIDENTIAL, StoryVisibility.PRIVATE, StoryVisibility.PUBLIC];
-        default:
-            return [StoryVisibility.PUBLIC];
-    }
-}
-
-/**
- * Determine correct URL for translated stories/categories with a fallback to homepage.
- * E.g. if a story has a translation, the function will return the localized slug URL.
- * If there is no translation for the story, it will return the index page URL (`/`),
- * or empty string, if `noFallback` is set to `true` (this is useful for alternate locale links).
- */
-function getTranslationUrl(
-    locale: LocaleObject,
-    path: string,
-    currentCategory?: Category,
-    currentStory?: ExtendedStory,
-    noFallback?: boolean,
-) {
-    if (currentCategory) {
-        if (getCategoryHasTranslation(currentCategory, locale)) {
-            return getCategoryUrl(currentCategory, locale);
-        }
-
-        if (noFallback) {
-            return '';
-        }
-
-        return '/';
-    }
-
-    const localeCode = locale.toUnderscoreCode();
-
-    if (currentStory && currentStory.culture.locale !== localeCode) {
-        const allowedVisibilityValues = getAllowedTranslationVisibilityValues(currentStory);
-
-        const translatedStory = currentStory.translations.find(
-            ({ culture, visibility }) =>
-                culture.locale === localeCode && allowedVisibilityValues.includes(visibility),
-        );
-        if (translatedStory) {
-            return `/${translatedStory.slug}`;
-        }
-
-        if (noFallback) {
-            return '';
-        }
-
-        return '/';
-    }
-
-    return path;
-}
-
-/**
- * This hook returns a function that is meant to be used in language pickers and alternate locales list for the pages.
- * `noFallback` parameter is useful for alternate language links in the `head` section of the document (so that there are no unwanted links to the homepage).
- */
-export function useGetTranslationUrl() {
-    const { asPath } = useRouter();
-    const currentCategory = useCurrentCategory();
-    const currentStory = useCurrentStory();
-
-    return useCallback(
-        (locale: LocaleObject, noFallback?: boolean) =>
-            getTranslationUrl(locale, asPath, currentCategory, currentStory, noFallback),
-        [asPath, currentCategory, currentStory],
-    );
-}

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

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

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

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

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

@@ -1,15 +0,0 @@
-import { useContext } from 'react';
-
-import type { NewsroomContextType } from '../context';
-import { NewsroomContext } from '../context';
-
-export function useNewsroomContext() {
-    // TS Compiler is having a hard time figuring this type implicitly, so we have to set it explicitly
-    // See https://github.com/microsoft/TypeScript/issues/5711#issuecomment-340283439
-    const newsroomContext: NewsroomContextType | undefined = useContext(NewsroomContext);
-    if (!newsroomContext) {
-        throw new Error('No `NewsroomContextProvider` found when calling `useNewsroomContext`');
-    }
-
-    return newsroomContext;
-}

package/src/newsroom-context/index.ts

@@ -1,2 +0,0 @@
-export { NewsroomContext, NewsroomContextProvider, NewsroomContextProps } from './context';
-export * from './hooks';

package/src/sentry/client.ts

@@ -1,7 +0,0 @@
-import type { init } from '@sentry/nextjs';
-
-import { getCommonClientOptions } from './common';
-
-export function getSentryClientOptions(dsn: string, themeName: string): Parameters<typeof init>[0] {
-    return getCommonClientOptions(dsn, themeName);
-}

package/src/sentry/common.ts

@@ -1,27 +0,0 @@
-import type { init } from '@sentry/nextjs';
-
-export function getCommonClientOptions(dsn: string, themeName: string): Parameters<typeof init>[0] {
-    return {
-        dsn,
-        // Adjust this value in production, or use tracesSampler for greater control
-        tracesSampleRate: 0.02,
-        // ...
-        // Note: if you want to override the automatic release value, do not set a
-        // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-        // that it will also get attached to your source maps
-
-        ignoreErrors: [
-            // This particular error is coming from Microsoft Outlook SafeLink crawler.
-            // It doesn't affect the user experience in any way, but produces a lot of unwanted Sentry events.
-            // See https://forum.sentry.io/t/unhandledrejection-non-error-promise-rejection-captured-with-value/14062
-            'Object Not Found Matching Id',
-            // This error is caused by `beacon.min.js` polyfill in Cloudflare Insights. From what we see, it doesn't affect the user experience.
-            'Illegal invocation',
-        ],
-        // Attach theme tag to each event
-        initialScope: (scope) => {
-            scope.setTags({ prezly_theme: themeName });
-            return scope;
-        },
-    };
-}

package/src/sentry/index.ts

@@ -1,2 +0,0 @@
-export { getSentryClientOptions } from './client';
-export { getSentryServerOptions } from './server';

package/src/sentry/server.ts

@@ -1,7 +0,0 @@
-import type { init } from '@sentry/nextjs';
-
-import { getCommonClientOptions } from './common';
-
-export function getSentryServerOptions(dsn: string, themeName: string): Parameters<typeof init>[0] {
-    return getCommonClientOptions(dsn, themeName);
-}

package/src/types.ts

@@ -1,51 +0,0 @@
-import type { CultureRef, ExtraStoryFields, Story } from '@prezly/sdk';
-
-import type { NewsroomContextProps } from './newsroom-context';
-
-export interface ServerSidePageProps {
-    /**
-     * Indicates whether the locale requested by the Next application was correctly resolved to an active newsroom locale.
-     * This is used by `processRequest` method to redirect to the default locale if the property is `false`.
-     */
-    localeResolved: boolean;
-}
-
-/**
- * These are the props returned by the `processRequest` method that are meant to be passed to your `_app` to be injected into the `NewsroomContextProvider`.
- */
-export interface PageProps {
-    newsroomContextProps: NewsroomContextProps;
-}
-
-/**
- * Categories in Algolia index are stored in a simplified format, with `slug` and `name` properties already saved in the correct locale for the story search result.
- */
-export interface AlgoliaCategoryRef {
-    id: number;
-    name: string;
-    slug: string;
-}
-
-/**
- * Stories in Algolia index are stored in a simplified format, with only minimal subset of fields.
- */
-export type AlgoliaStory = Pick<Story, 'uuid' | 'slug' | 'title' | 'subtitle'> &
-    Pick<ExtraStoryFields, 'thumbnail_image'> & {
-        content_text: string;
-        updated_at: number;
-        published_at: number;
-        culture: Pick<CultureRef, 'code' | 'name' | 'native_name' | 'language_code'>;
-        categories: AlgoliaCategoryRef[];
-    };
-
-// TODO: This should be exported from `@prezly/sdk`
-export interface SdkError extends Error {
-    status: number;
-    statusText: string;
-    payload: {
-        errors: {
-            reason: string;
-        };
-        message: string;
-    };
-}

package/src/utils/boilerplate.ts

@@ -1,27 +0,0 @@
-import type { NewsroomCompanyInformation } from '@prezly/sdk';
-
-export function hasAnySocialMedia(companyInformation: NewsroomCompanyInformation): boolean {
-    return Boolean(
-        companyInformation.facebook ||
-            companyInformation.instagram ||
-            companyInformation.linkedin ||
-            companyInformation.pinterest ||
-            companyInformation.tiktok ||
-            companyInformation.twitter ||
-            companyInformation.youtube,
-    );
-}
-
-export function hasAnyAboutInformation(companyInformation: NewsroomCompanyInformation): boolean {
-    return Boolean(
-        companyInformation.about ||
-            companyInformation.website ||
-            hasAnySocialMedia(companyInformation),
-    );
-}
-
-export function hasAnyContactInformation(companyInformation: NewsroomCompanyInformation): boolean {
-    return Boolean(
-        companyInformation.address || companyInformation.phone || companyInformation.email,
-    );
-}

package/src/utils/constants.ts

@@ -1,3 +0,0 @@
-export const ASSETS_URL = 'https://cdn.uc.assets.prezly.com';
-export const DEFAULT_PAGE_SIZE = 12;
-export const DEFAULT_GALLERY_PAGE_SIZE = 6;

package/src/utils/getAssetsUrl.test.ts

@@ -1,9 +0,0 @@
-import { ASSETS_URL } from './constants';
-import { getAssetsUrl } from './getAssetsUrl';
-
-describe('getAssetsUrl', () => {
-    it('generates correct asset URL with uuid passed to it', () => {
-        const uuid = 'foo-bar';
-        expect(getAssetsUrl(uuid)).toBe(`${ASSETS_URL}/${uuid}/`);
-    });
-});

package/src/utils/getAssetsUrl.ts

@@ -1,9 +0,0 @@
-import { ASSETS_URL } from './constants';
-
-/**
- * @param uuid UUID of the assets hosted on Uploadcare
- * @returns Full asset URL that can be used as a source for <img>, <video> and <a> tags.
- */
-export function getAssetsUrl(uuid: string) {
-    return `${ASSETS_URL}/${uuid}/`;
-}

package/src/utils/getDataRequestLink.ts

@@ -1,14 +0,0 @@
-import type { Newsroom } from '@prezly/sdk';
-
-import type { LocaleObject } from '../intl';
-
-import { getPrivacyPortalUrl } from './getPrivacyPortalUrl';
-
-export function getDataRequestLink(newsroom: Newsroom, currentLocale: LocaleObject) {
-    return (
-        newsroom.custom_data_request_link ||
-        getPrivacyPortalUrl(newsroom, currentLocale, {
-            action: 'data-request',
-        })
-    );
-}

package/src/utils/getLocalizedCategoryData.ts

@@ -1,47 +0,0 @@
-import type { Category } from '@prezly/sdk';
-
-import type { LocaleObject } from '../intl';
-import type { AlgoliaCategoryRef } from '../types';
-
-function isAlgoliaCategory(
-    category: Category | AlgoliaCategoryRef,
-): category is AlgoliaCategoryRef {
-    return 'name' in category && 'slug' in category;
-}
-
-export function getLocalizedCategoryData(
-    category: Category | AlgoliaCategoryRef,
-    locale: LocaleObject,
-) {
-    if (isAlgoliaCategory(category)) {
-        return {
-            description: null,
-            name: category.name,
-            slug: category.slug,
-        };
-    }
-
-    const targetLocaleCode = locale.toUnderscoreCode();
-    const { i18n } = category;
-    const populatedLocales = Object.keys(i18n).filter((localeCode) => i18n[localeCode].name);
-    const targetLocale =
-        populatedLocales.find((localeCode) => localeCode === targetLocaleCode) ||
-        populatedLocales.find((localeCode) => i18n[localeCode].name === category.display_name) ||
-        populatedLocales[0];
-
-    const { locale: _, ...localizedData } = i18n[targetLocale];
-
-    return localizedData;
-}
-
-export function getCategoryUrl(category: Category | AlgoliaCategoryRef, locale: LocaleObject) {
-    const { slug } = getLocalizedCategoryData(category, locale);
-    return `/category/${slug}`;
-}
-
-export function getCategoryHasTranslation(category: Category, locale: LocaleObject) {
-    const targetLocaleCode = locale.toUnderscoreCode();
-    const { i18n } = category;
-    const populatedLocales = Object.keys(i18n).filter((localeCode) => i18n[localeCode].name);
-    return Boolean(populatedLocales.find((localeCode) => localeCode === targetLocaleCode));
-}