@prezly/theme-kit-nextjs 1.15.0-0 → 1.16.0-0

package/src/adapter-nextjs/page-props/gallery.ts

@@ -71,7 +71,7 @@ export function getGalleryPageServerSideProps<CustomProps extends Record<string,
 }
 
 export function getGalleryPageStaticProps<CustomProps extends Record<string, any>>(
-    customProps: CustomProps | PropsFunction<CustomProps>,
+    customProps: CustomProps | PropsFunction<CustomProps, GetStaticPropsContext>,
     options?: Options,
 ) {
     const { pageSize = DEFAULT_GALLERY_PAGE_SIZE } = options || {};
@@ -104,7 +104,10 @@ export function getGalleryPageStaticProps<CustomProps extends Record<string, any
                 pageSize,
             },
             ...(typeof customProps === 'function'
-                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                ? await (customProps as PropsFunction<CustomProps, GetStaticPropsContext>)(
+                      context,
+                      staticProps,
+                  )
                 : customProps),
         });
     };

package/src/adapter-nextjs/page-props/galleryAlbum.ts

@@ -49,7 +49,7 @@ export function getGalleryAlbumPageServerSideProps<CustomProps extends Record<st
 }
 
 export function getGalleryAlbumPageStaticProps<CustomProps extends Record<string, any>>(
-    customProps: CustomProps | PropsFunction<CustomProps>,
+    customProps: CustomProps | PropsFunction<CustomProps, GetStaticPropsContext>,
 ) {
     return async function getStaticProps(
         context: GetStaticPropsContext,
@@ -67,7 +67,10 @@ export function getGalleryAlbumPageStaticProps<CustomProps extends Record<string
             ...staticProps,
             gallery,
             ...(typeof customProps === 'function'
-                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                ? await (customProps as PropsFunction<CustomProps, GetStaticPropsContext>)(
+                      context,
+                      staticProps,
+                  )
                 : customProps),
         });
     };

package/src/adapter-nextjs/page-props/home.ts

@@ -74,7 +74,7 @@ export function getHomepageServerSideProps<
 export function getHomepageStaticProps<
     CustomProps extends Record<string, any>,
     StoryType extends Story = Story,
->(customProps: CustomProps | PropsFunction<CustomProps>, options?: Options) {
+>(customProps: CustomProps | PropsFunction<CustomProps, GetStaticPropsContext>, options?: Options) {
     const { pageSize = DEFAULT_PAGE_SIZE, extraStoryFields } = options || {};
 
     return async function getStaticProps(
@@ -103,7 +103,10 @@ export function getHomepageStaticProps<
                 pageSize,
             },
             ...(typeof customProps === 'function'
-                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                ? await (customProps as PropsFunction<CustomProps, GetStaticPropsContext>)(
+                      context,
+                      staticProps,
+                  )
                 : customProps),
         });
     };

package/src/adapter-nextjs/page-props/lib/types.ts

@@ -2,7 +2,7 @@ import type { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
 
 import type { PageProps } from '../../../types';
 
-export type PropsFunction<CustomProps> = (
-    context: GetServerSidePropsContext | GetStaticPropsContext,
-    props: PageProps,
-) => CustomProps | Promise<CustomProps>;
+export type PropsFunction<
+    CustomProps,
+    Context extends GetServerSidePropsContext | GetStaticPropsContext = GetServerSidePropsContext,
+> = (context: Context, props: PageProps) => CustomProps | Promise<CustomProps>;

package/src/adapter-nextjs/page-props/search.ts

@@ -1,4 +1,8 @@
-import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+import type {
+    GetServerSidePropsContext,
+    GetServerSidePropsResult,
+    GetStaticPropsContext,
+} from 'next';
 
 import { getNewsroomServerSideProps } from '../getNewsroomServerSideProps';
 import { getNewsroomStaticProps } from '../getNewsroomStaticProps';
@@ -29,7 +33,7 @@ export function getSearchPageServerSideProps<CustomProps extends Record<string,
 }
 
 export function getSearchPageStaticProps<CustomProps extends Record<string, any>>(
-    customProps: CustomProps | PropsFunction<CustomProps>,
+    customProps: CustomProps | PropsFunction<CustomProps, GetStaticPropsContext>,
 ) {
     return async function getStaticProps(
         context: GetServerSidePropsContext,
@@ -39,7 +43,10 @@ export function getSearchPageStaticProps<CustomProps extends Record<string, any>
         return processStaticRequest(context, {
             ...staticProps,
             ...(typeof customProps === 'function'
-                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                ? await (customProps as PropsFunction<CustomProps, GetStaticPropsContext>)(
+                      context,
+                      staticProps,
+                  )
                 : customProps),
         });
     };

package/src/adapter-nextjs/page-props/story.ts

@@ -54,7 +54,7 @@ export function getStoryPageServerSideProps<CustomProps extends Record<string, a
 }
 
 export function getStoryPageStaticProps<CustomProps extends Record<string, any>>(
-    customProps: CustomProps | PropsFunction<CustomProps>,
+    customProps: CustomProps | PropsFunction<CustomProps, GetStaticPropsContext>,
 ) {
     return async function getStaticProps(
         context: GetStaticPropsContext,
@@ -76,7 +76,10 @@ export function getStoryPageStaticProps<CustomProps extends Record<string, any>>
                 currentStory: story,
             },
             ...(typeof customProps === 'function'
-                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                ? await (customProps as PropsFunction<CustomProps, GetStaticPropsContext>)(
+                      context,
+                      staticProps,
+                  )
                 : customProps),
         });
     };

package/src/components-nextjs/document.tsx

@@ -0,0 +1,38 @@
+import Document, { Head, Html, Main, NextScript } from 'next/document';
+
+import { DEFAULT_LOCALE, getLocaleDirection, LocaleObject } from '../intl';
+import type { PageProps } from '../types';
+
+export class PrezlyThemeDocument extends Document {
+    getLocaleCode() {
+        const {
+            newsroomContextProps,
+            // eslint-disable-next-line no-underscore-dangle
+        } = this.props.__NEXT_DATA__.props.pageProps as PageProps;
+
+        // In some cases (like server errors) the newsroom context props will not be loaded.
+        // We need to fall back to default locale to keep the app working.
+        const { localeCode } = newsroomContextProps ?? { localeCode: DEFAULT_LOCALE };
+
+        return localeCode;
+    }
+
+    render() {
+        const locale = LocaleObject.fromAnyCode(this.getLocaleCode());
+        // TODO: The direction can be pulled from the Language object
+        const direction = getLocaleDirection(locale);
+
+        return (
+            <Html lang={locale.toHyphenCode()} dir={direction}>
+                <Head>
+                    <meta name="og:locale" content={locale.toHyphenCode()} />
+                    {/* TODO: Add alternate locales */}
+                </Head>
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+}

package/src/components-nextjs/index.ts

@@ -1,2 +1,3 @@
 export { PageSeo } from './PageSeo';
 export { StorySeo } from './StorySeo';
+export { PrezlyThemeDocument } from './document';

package/src/index.ts

@@ -4,5 +4,6 @@ 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/sentry/client.ts

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

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

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

package/src/sentry/server.ts

@@ -0,0 +1,7 @@
+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);
+}