@websolutespa/bom-next 3.0.0

package/src/client/useLayout.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { IAppExtended, ILayout } from '@websolutespa/bom-core';
+import { useContext } from 'react';
+import { LayoutContext } from './layout';
+
+export const useLayout = <T extends IAppExtended = IAppExtended>() => {
+  const context = useContext(LayoutContext);
+  if (!context) {
+    throw new Error('useLayout must be used within LayoutProvider');
+  }
+  return context as ILayout<T>;
+};

package/src/client/useLink.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { useCallback } from 'react';
+import { getLink } from '../lib/link';
+import { useLayout } from './useLayout';
+
+export const useLink = () => {
+  const layout = useLayout();
+  const link = useCallback((category: string) => {
+    return getLink(category, layout);
+  }, [layout]);
+  return link;
+};

package/src/client/useMetaData.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { useContext } from 'react';
+import { MetaDataContext } from './metadata';
+
+export const useMetaData = () => {
+  const context = useContext(MetaDataContext);
+  if (!context) {
+    throw new Error('useMetaData must be used within MetaDataProvider');
+  }
+  return context;
+};

package/src/client/usePage.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { useContext } from 'react';
+import { PageContext } from './page';
+
+export const usePage = () => {
+  const context = useContext(PageContext);
+  if (!context) {
+    throw new Error('usePage must be used within PageProvider');
+  }
+  return context;
+};

package/src/client/useUser.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { useContext } from 'react';
+import { UserContext } from './user';
+
+export const useUser = () => {
+  const context = useContext(UserContext);
+  if (!context) {
+    throw new Error('useUser must be used within UserProvider');
+  }
+  return context;
+};

package/src/client/user.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { createContext, ReactNode, useEffect, useState } from 'react';
+import { localApiGet } from '../lib/http';
+import { IEndUser, IUser } from '../types';
+
+export type UserContextType = {
+  user?: IEndUser | IUser | null;
+  setUser: (user?: IEndUser | IUser | null) => void;
+};
+
+export const UserContext = createContext<UserContextType>({
+  setUser: () => {
+    console.log('not implemented');
+  },
+});
+
+export function UserProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [user, setUser] = useState<IEndUser | IUser | null | undefined>();
+  useEffect(() => {
+    const getMe = async () => {
+      try {
+        const user: IEndUser | null = await localApiGet('/auth/me');
+        return user;
+      } catch (error) {
+        console.log('UserProvider.getMe.error', error);
+        return null;
+      }
+    };
+    getMe().then(user => {
+      setUser(user);
+    });
+  }, []);
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+}

package/src/exports/client.ts

@@ -0,0 +1,20 @@
+export * from '../client/client';
+export * from '../client/extra';
+export * from '../client/label';
+export * from '../client/layout';
+export * from '../client/local.collection';
+export * from '../client/metadata';
+export * from '../client/page';
+export * from '../client/useApi';
+export * from '../client/useCollectionApi';
+export * from '../client/useExtra';
+export * from '../client/useHttp';
+export * from '../client/useLabel';
+export * from '../client/useLayout';
+export * from '../client/useLink';
+export * from '../client/useMetaData';
+export * from '../client/usePage';
+export * from '../client/user';
+export * from '../client/useUser';
+export * from '../instrumentation/client';
+

package/src/exports/instrumentation.ts

@@ -0,0 +1 @@
+export * from '../instrumentation/server';

package/src/exports/proxy.ts

@@ -0,0 +1,5 @@
+export * from '../proxy/protected-route';
+export * from '../proxy/proxy';
+export * from '../proxy/route-auto-detection';
+export * from '../proxy/route-proxy';
+

package/src/exports/server.ts

@@ -0,0 +1,19 @@
+export * from '../server/context';
+export * from '../server/handlers/auth.handler';
+export * from '../server/handlers/captions.handler';
+export * from '../server/handlers/collection.handler';
+export * from '../server/handlers/index.handler';
+export * from '../server/handlers/preview.handler';
+export * from '../server/handlers/registry.handler';
+export * from '../server/handlers/route.handler';
+export * from '../server/handlers/sitemap.handler';
+export * from '../server/handlers/static-params.handler';
+export * from '../server/handlers/vars.handler';
+export * from '../server/lazy';
+export * from '../server/local-api';
+export * from '../server/metadata';
+export * from '../server/mixer';
+export * from '../server/page';
+export * from '../server/utils';
+export * from '../server/utmz';
+// export * from '../server/mock/store';

package/src/global.d.ts

@@ -0,0 +1,6 @@
+import { Config } from '@websolutespa/payload-plugin-bowl';
+
+declare module 'payload' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface GeneratedTypes extends Config { }
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+export * from './lib/breadcrumb';
+export * from './lib/const';
+export * from './lib/http';
+export * from './lib/label';
+export * from './lib/layout.defaults';
+export * from './lib/link';
+export * from './lib/meta-data';
+export * from './lib/open-graph';
+export * from './lib/pagination';
+export * from './lib/route';
+export * from './lib/store';
+export * from './lib/structured-data';
+export * from './lib/twitter-card';
+export * from './lib/utils';
+export * from './mock';
+export * from './types';
+

package/src/instrumentation/client.ts

@@ -0,0 +1,19 @@
+import { onRouterTransitionStart as sentryOnRouterTransitionStart } from './sentry/capture.routerTransitionStart';
+
+export function registerClientIntrumentation() {
+  if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+    if (process.env.NEXT_RUNTIME === 'nodejs') {
+      import('./sentry/config.client');
+    }
+  }
+}
+
+// This export will instrument router navigations
+export function captureRouterTransitionStart(href: string, navigationType: string): void {
+  if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+    return sentryOnRouterTransitionStart(href, navigationType);
+  } else {
+    console.log('Instrumentation.onRouterTransitionStart', href, navigationType);
+  }
+}
+

package/src/instrumentation/sentry/capture.requestError.ts

@@ -0,0 +1,6 @@
+import * as Sentry from '@sentry/nextjs';
+
+/**
+ * Reports errors passed to the the Next.js `onRequestError` instrumentation hook.
+ */
+export const captureRequestError = Sentry.captureRequestError;

package/src/instrumentation/sentry/capture.routerTransitionStart.ts

@@ -0,0 +1,4 @@
+import * as Sentry from '@sentry/nextjs';
+
+// This export will instrument router navigations
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

package/src/instrumentation/sentry/config.client.ts

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Capture 100% in dev, 10% in production
+  // Adjust based on your traffic volume
+  tracesSampleRate: process.env.NODE_ENV === 'development' ? 1.0 : 0.1,
+});

package/src/instrumentation/sentry/config.edge.ts

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Capture 100% in dev, 10% in production
+  // Adjust based on your traffic volume
+  tracesSampleRate: process.env.NODE_ENV === 'development' ? 1.0 : 0.1,
+});

package/src/instrumentation/sentry/config.server.ts

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Capture 100% in dev, 10% in production
+  // Adjust based on your traffic volume
+  tracesSampleRate: process.env.NODE_ENV === 'development' ? 1.0 : 0.1,
+});

package/src/instrumentation/server.ts

@@ -0,0 +1,24 @@
+import { captureRequestError as sentryCaptureRequestError } from './sentry/capture.requestError';
+import { ErrorContext, RequestInfo } from './types';
+
+export async function registerIntrumentation() {
+  if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+    if (process.env.NEXT_RUNTIME === 'nodejs') {
+      await import('./sentry/config.server');
+    }
+    if (process.env.NEXT_RUNTIME === 'edge') {
+      await import('./sentry/config.edge');
+    }
+  }
+}
+
+/**
+ * Reports errors passed to the the Next.js `onRequestError` instrumentation hook.
+ */
+export function captureRequestError(error: unknown, request: RequestInfo, errorContext: ErrorContext): void {
+  if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+    return sentryCaptureRequestError(error, request, errorContext);
+  } else {
+    console.log('Instrumentation.captureRequestError', error, errorContext);
+  }
+}

package/src/instrumentation/types.ts

@@ -0,0 +1,12 @@
+
+export type RequestInfo = {
+  path: string;
+  method: string;
+  headers: Record<string, string | string[] | undefined>;
+};
+
+export type ErrorContext = {
+  routerKind: string;
+  routePath: string;
+  routeType: string;
+};

package/src/lib/breadcrumb.ts

@@ -0,0 +1,21 @@
+import { findRouteOfCategory, ICategory, IRoute, IRouteLink } from '@websolutespa/bom-core';
+import { routeToLink } from './route';
+
+/**
+ * Builds the breadcrumb trail from category segments + the current route.
+ * Uses currentRoutes (already filtered by market+locale) to resolve each segment's href.
+ * Replicates the logic of getBreadcrumbFromSegments without any store calls.
+ */
+export function buildBreadcrumb(segments: ICategory[], currentRoute: IRoute, currentRoutes: IRoute[]): IRouteLink[] {
+  const tree: IRouteLink[] = segments
+    .map(segment => {
+      const route = findRouteOfCategory(currentRoutes, segment.id);
+      return route ? routeToLink(route) : null;
+    })
+    .filter((x): x is IRouteLink => x !== null);
+  // Append the leaf page only when it is not the default/index route of its category
+  if (!currentRoute.isDefault) {
+    tree.push(routeToLink(currentRoute));
+  }
+  return tree;
+}

package/src/lib/const.ts

@@ -0,0 +1,3 @@
+import type { Config, User } from '@websolutespa/payload-plugin-bowl';
+
+export const guest = { collection: 'users', roles: ['guest'] } as (User & Config['user']);

package/src/lib/http.test.ts

@@ -0,0 +1,25 @@
+// @vitest-environment node
+
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+const originalEnvironment = process.env;
+
+afterEach(() => {
+    process.env = originalEnvironment;
+    vi.resetModules();
+});
+
+describe('getLocalApiUrl', () => {
+    test('uses the supplied request origin instead of the build-time URL', async () => {
+        process.env = {
+            ...originalEnvironment,
+            NEXT_PUBLIC_API: '/api',
+            NEXT_PUBLIC_URL: 'https://preview.example.vercel.app',
+        };
+        const { getLocalApiUrl } = await import('./http');
+
+        expect(getLocalApiUrl('/-route', 'https://www.example.com')).toBe(
+            'https://www.example.com/api/-route'
+        );
+    });
+});

package/src/lib/http.ts

@@ -0,0 +1,74 @@
+import { FetchRequestOptions, httpFetch, isBrowser, merge } from '@websolutespa/bom-core';
+
+const API_URL = process.env.NEXT_PUBLIC_URL || 'http://localhost:3000';
+const API_BASE = process.env.NEXT_PUBLIC_API || '/api';
+
+export type ApiRequestOptions = FetchRequestOptions;
+
+export function getLocalApiRequestOptions(): ApiRequestOptions {
+  return {
+    headers: {
+    },
+  };
+}
+
+export function getRemoteApiRequestOptions(token?: string): ApiRequestOptions {
+  if (token) {
+    // authenticated end user JWT token bearer (end_users)
+    return {
+      // mode: 'cors',
+      headers: {
+        Authorization: `JWT ${token}`,
+        // Authorization: `Bearer ${token}`,
+      },
+    };
+  } else {
+    // guest user api key (users)
+    return {
+      // mode: 'cors',
+      headers: {
+        Authorization: `users API-Key ${process.env.STORE_API_KEY}`,
+      },
+    };
+  }
+}
+
+export function getLocalApiUrl(pathname: string, origin?: string): string {
+  const url = `${isBrowser ? window.location.origin : (origin || API_URL)}${API_BASE}${pathname}`;
+  // console.log('getLocalApiUrl', url);
+  return url;
+}
+
+export async function localApiFetch<T = unknown>(pathname: string, options: ApiRequestOptions = {}, serviceOptions?: { locale: string, market: string }, origin?: string): Promise<T> {
+  // console.log('localApiFetch', pathname, options, serviceOptions);
+  const url = new URL(getLocalApiUrl(pathname, origin));
+  if (serviceOptions) {
+    url.searchParams.append('locale', serviceOptions.locale);
+    url.searchParams.append('market', serviceOptions.market);
+  }
+  const apiOptions = merge({ ...getLocalApiRequestOptions() }, options);
+  console.log('📡 localApiFetch', apiOptions.method, url.href);
+  const apiResponse = await httpFetch(url.href, apiOptions);
+  // console.log('localApiFetch', pathname, apiResponse);
+  return apiResponse;
+}
+
+export async function localApiGet<T = unknown>(url: string, options: ApiRequestOptions = {}, serviceOptions?: { locale: string, market: string }, origin?: string): Promise<T> {
+  return await localApiFetch<T>(url, { ...options, method: 'GET' }, serviceOptions, origin);
+}
+
+export async function localApiPost<T = unknown>(url: string, payload?: unknown, options: ApiRequestOptions = {}, serviceOptions?: { locale: string, market: string }): Promise<T> {
+  return await localApiFetch<T>(url, { ...options, method: 'POST', body: payload ? JSON.stringify(payload) : undefined }, serviceOptions);
+}
+
+export async function localApiPut<T = unknown>(url: string, payload?: unknown, options: ApiRequestOptions = {}, serviceOptions?: { locale: string, market: string }): Promise<T> {
+  return await localApiFetch<T>(url, { ...options, method: 'PUT', body: payload ? JSON.stringify(payload) : undefined }, serviceOptions);
+}
+
+export async function localApiPatch<T = unknown>(url: string, payload?: unknown, options: ApiRequestOptions = {}, serviceOptions?: { locale: string, market: string }): Promise<T> {
+  return await localApiFetch<T>(url, { ...options, method: 'PATCH', body: payload ? JSON.stringify(payload) : undefined }, serviceOptions);
+}
+
+export async function localApiDelete<T = unknown>(url: string, options: ApiRequestOptions = {}, serviceOptions?: { locale: string, market: string }): Promise<T> {
+  return await localApiFetch<T>(url, { ...options, method: 'DELETE' }, serviceOptions);
+}

package/src/lib/label.ts

@@ -0,0 +1,43 @@
+import type { ILabel, ILocalizable } from '@websolutespa/bom-core';
+
+export function getLabelFromLabels(labels: ILabel[]) {
+  const labelService = new LabelService(labels);
+  return (key: string, params?: Record<string, any>): string => {
+    return labelService.getLabel(key, params);
+  };
+}
+
+function parseLabel(dictionary: Record<string, ILocalizable | undefined>, key: string, params?: Record<string, any>): string {
+  const label = (dictionary[key] != null ? dictionary[key] : key) as string;
+  if (params) {
+    return interpolateText(label, params);
+  }
+  return label;
+}
+
+export function interpolateText(text: string, dictionary: Record<string, any>): string {
+  const TEMPLATE_REGEXP: RegExp = /@(\w+)/g;
+  return text.replace(TEMPLATE_REGEXP, (text: string, key: string) => {
+    const replacer: unknown = dictionary[key];
+    return typeof replacer !== 'undefined' ? String(replacer) : text;
+  });
+}
+
+export class LabelService {
+  labels: ILabel[];
+  dictionary: Record<string, ILocalizable | undefined>;
+  constructor(labels: ILabel[]) {
+    this.labels = labels;
+    this.dictionary = Object.fromEntries(labels.map(l => [l.id, l.text]));
+  }
+  getLabel(key: string, params?: Record<string, any>): string {
+    return parseLabel(this.dictionary, key, params);
+  }
+}
+
+/*
+export function resolveLabel(labels: ILabel[], id: string): string {
+  const label = labels.find(x => x.id === id);
+  return label && label.text ? label.text.toString() : id;
+}
+*/

package/src/lib/layout.defaults.ts

@@ -0,0 +1,167 @@
+import { ILayout } from '@websolutespa/bom-core';
+
+export const LayoutDefaults: ILayout = {
+  labels: [
+    {
+      id: 'error.required',
+      text: 'Required field',
+    },
+    {
+      id: 'items.found',
+      text: '@items items found',
+    },
+  ],
+  locale: 'en',
+  locales: [],
+  market: 'ww',
+  markets: [],
+  app: {
+    id: 'app',
+    brand: {
+      name: 'Mixer',
+      social: [],
+    },
+  },
+  menu: {
+    main: {
+      id: 'main',
+      items: [
+        {
+          id: 1,
+          type: 'category',
+          title: 'Collections',
+          category: 'product_index',
+          href: '#collections',
+          items: [
+            {
+              id: 'product_category_tile',
+              type: 'category',
+              title: 'Tiles',
+              category: 'product_category_tile',
+              href: '#collections/tiles',
+              items: [],
+              media: {
+                type: 'image',
+                src: 'https://placehold.co/960x600/e4e5eb/f4f5fb.webp?text=placehold',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  },
+  tree: {
+    id: 'homepage',
+    category: 'homepage',
+    schema: 'homepage',
+    title: 'Homepage',
+    href: '/',
+    items: [
+      {
+        id: 'product_index',
+        category: 'product_index',
+        schema: 'product_index',
+        title: 'Collections',
+        href: '#collections',
+        items: [
+          {
+            id: 'product_category',
+            category: 'product_category',
+            schema: 'product_category',
+            title: 'Tiles',
+            href: '#product_category',
+            media: {
+              type: 'image',
+              src: 'https://bom-mixer.wslabs.it/assets/header/6366_n_tiles.jpg',
+            },
+          },
+          {
+            id: 'product_category',
+            category: 'product_category',
+            schema: 'product_category',
+            title: '3D Elements',
+            href: '#product_category',
+            media: {
+              type: 'image',
+              src: 'https://bom-mixer.wslabs.it/assets/header/6369_n_3d_elements_menu_cover.webp',
+            },
+          },
+          {
+            id: 'product_category',
+            category: 'product_category',
+            schema: 'product_category',
+            title: 'Paints',
+            href: '#product_category',
+            media: {
+              type: 'image',
+              src: 'https://bom-mixer.wslabs.it/assets/header/6367_n_paints.jpg',
+            },
+          },
+          {
+            id: 'product_category',
+            category: 'product_category',
+            schema: 'product_category',
+            title: 'Wood & Metal',
+            href: '#product_category',
+            media: {
+              type: 'image',
+              src: 'https://bom-mixer.wslabs.it/assets/header/6368_n_menu_wood_metal.webp',
+            },
+          },
+          {
+            id: 'product_category',
+            category: 'product_category',
+            schema: 'product_category',
+            title: 'Accessories',
+            href: '#product_category',
+            media: {
+              type: 'image',
+              src: 'https://bom-mixer.wslabs.it/assets/header/6371_n_accessories.jpg',
+            },
+          },
+          {
+            id: 'product_category',
+            category: 'product_category',
+            schema: 'product_category',
+            title: 'Editions',
+            href: '#product_category',
+            media: {
+              type: 'image',
+              src: 'https://bom-mixer.wslabs.it/assets/header/7858_n_Menu.webp',
+            },
+          },
+        ],
+      },
+      {
+        id: 'magazine_index',
+        category: 'magazine_index',
+        schema: 'magazine_index',
+        title: 'Magazine',
+        href: '#magazine_index',
+      },
+      {
+        id: 'store_index',
+        category: 'store_index',
+        schema: 'store_index',
+        title: 'Stores',
+        href: '#store_index',
+      },
+      {
+        id: 'contact',
+        category: 'contact',
+        schema: 'contact',
+        title: 'Contacts',
+        href: '#contact',
+      },
+      {
+        id: 'shop_index',
+        category: 'shop_index',
+        schema: 'shop_index',
+        title: 'Shop',
+        href: '#shop_index',
+      },
+    ],
+  },
+  topLevelHrefs: {},
+  topLevelRoutes: {},
+};

package/src/lib/link.ts

@@ -0,0 +1,19 @@
+import type { ILayout, IRouteLink } from '@websolutespa/bom-core';
+
+function getLink_(category: string, routeLink: IRouteLink | undefined): string | undefined {
+  if (routeLink) {
+    if (routeLink.category === category) {
+      return routeLink.href;
+    }
+    if (routeLink.items) {
+      return routeLink.items.reduce((p: string | undefined, c) => {
+        return getLink_(category, c) || p;
+      }, undefined);
+    }
+  }
+  return undefined;
+}
+
+export function getLink(category: string, layout: ILayout) {
+  return getLink_(category, layout.tree);
+}