@websolutespa/bom-next 3.0.0

package/src/server/handlers/error-response.ts

@@ -0,0 +1,45 @@
+type StatusError = {
+    data?: unknown;
+    isPublic?: unknown;
+    message?: unknown;
+    name?: unknown;
+    status?: unknown;
+    statusText?: unknown;
+};
+
+type PayloadErrorItem = {
+    data?: unknown;
+    message: string;
+    name?: string;
+};
+
+const getStatus = (error: StatusError): number => {
+    return typeof error.status === 'number' && error.status >= 400 && error.status < 600 ? error.status : 500;
+};
+
+const isPublic = (error: StatusError, status: number): boolean => {
+    return error.isPublic === true || (error.isPublic === undefined && status >= 400 && status < 500);
+};
+
+/**
+ * Converts errors thrown by Next or Payload handlers into Payload-compatible
+ * API responses without exposing messages or data from non-public errors.
+ */
+export function getHandlerErrorResponse(error: unknown): Response {
+    const statusError = error && typeof error === 'object' ? error as StatusError : {};
+    const status = getStatus(statusError);
+    const publicError = isPublic(statusError, status);
+    const message = publicError && typeof statusError.message === 'string' ?
+        statusError.message :
+        publicError && typeof statusError.statusText === 'string' ? statusError.statusText : 'Something went wrong.';
+    const payloadError: PayloadErrorItem = { message };
+
+    if (publicError && typeof statusError.name === 'string') {
+        payloadError.name = statusError.name;
+    }
+    if (publicError && statusError.data !== null && statusError.data !== undefined) {
+        payloadError.data = statusError.data;
+    }
+
+    return Response.json({ errors: [payloadError] }, { status });
+}

package/src/server/handlers/index.handler.ts

@@ -0,0 +1,146 @@
+import { defaultLocale, defaultMarket } from '@websolutespa/bom-core';
+import { getPayload, SanitizedConfig } from 'payload';
+import { getHandlerErrorResponse } from './error-response';
+
+export function indexGetHandler(config: Promise<SanitizedConfig>) {
+  return async function (request: Request) {
+    try {
+      const payload = await getPayload({ config });
+      const keys = [
+        ...payload.config.collections.map(x => x.slug),
+        ...payload.config.globals.map(x => x.slug),
+      ];
+      keys.sort();
+      const market = defaultMarket;
+      const locale = defaultLocale;
+      if (!Array.isArray(keys) || keys?.length === 0) {
+        console.error('apiHome.collectionGet', 'collections not found', keys);
+        return new Response('method not allowed', {
+          status: 405,
+          statusText: 'method not allowed',
+        });
+      }
+      return new Response(`
+    <html>
+    <head>
+      <title>REST Api</title>
+      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+      <style type="text/css">
+        html {
+          padding: 0;
+          background: #09090A;
+          color: #fefefe;
+        }
+        body {
+          padding: 15px;
+          font-family: Inter,-apple-system,'Helvetica Neue','Segoe UI',Roboto,Arial,'Noto Sans',sans-serif;
+          font-size: 13px;
+          background: #09090A;
+          color: #fefefe;
+        }
+        .container {
+          margin: 0 auto;
+          max-width: 1280px;
+        }
+        a {
+          color: #fefefe;
+          text-decoration: none;
+        }
+        a:visited {
+          color: #9e9e9e;
+        }
+        a:hover {
+          text-decoration: underline;
+        }
+        table {
+          width: 100%;
+          margin: 10px 0;
+          border: none;
+          border-collapse: collapse;
+        }
+        td,
+        th {
+          text-align: left;
+          font-size: 12px;
+          padding: 3px;
+        }
+        th:not(:last-child),
+        td:not(:last-child) {
+          padding-right: 30px;
+        }
+        thead th {
+          border-bottom: 1px solid #0e0e0f;
+        }
+        #table tr:nth-child(odd) td {
+          background-color: #0e0e0f;
+        }
+        #table tbody tr:hover td {
+          background-color: #1A1A1B;
+        }
+        #table tbody tr:hover td,
+        #table tbody tr:hover td a {
+          color: #fefefe;
+        }
+        .wysiwyg {
+          margin: 0;
+          padding: 0 0 10px 0;
+          line-height: 1.2em;
+        }
+        .wysiwyg a {
+          color: #00ea4e;
+          font-weight: 600;
+        }
+        .wysiwyg a:visited {
+          color: #00ea4e;
+        }
+      </style>
+    </head>
+    <body>
+      <div class="container">
+        <h1>REST API</h1>
+        <p class="wysiwyg">
+          This is the REST Api generated by <a href="https://github.com/websolutespa/bom" target="_blank" rel="noopener">Mixer</a>.
+        </p>
+        <p class="wysiwyg">
+          It contains a list of all the generic local api CRUD handlers of Mixer app. <br />
+          All methods should be called with market and locale parameters.
+        </p>
+        <table id="table" cellpadding="3">
+          <thead>
+            <tr>
+              <th width="150px">Method</th>
+              <th width="150px">Collection</th>
+              <th>Endpoint</th>
+            </tr>
+          </thead>
+          <tbody>
+          ${keys.map(c => (`
+            <tr>
+              <td>GET, POST, PATCH</td>
+              <td>${c}</td>
+              <td><a href="/api/${c}?market=${market}&locale=${locale}" target="_blank">/api/${c}</a></td>
+            </tr>
+            <tr>
+              <td>GET, DELETE</td>
+              <td>${c}</td>
+              <td><a href="/api/${c}/1?market=${market}&locale=${locale}" target="_blank">/api/${c}/{id}</a></td>
+            </tr>
+          `)).join('\n')}
+          </tbody>
+        </table>
+      </div>
+    </body>
+    `, {
+        headers: {
+          'Content-Type': 'text/html; charset=UTF-8',
+          'X-Frame-Options': 'SAMEORIGIN',
+          'X-Robots-Tag': 'noindex, follow',
+        },
+      });
+    } catch (error: unknown) {
+      const response = getHandlerErrorResponse(error);
+      console.error('storeHandler.indexGet.error', response.status, error);
+      return response;
+    }
+  };
+}

package/src/server/handlers/preview.handler.ts

@@ -0,0 +1,63 @@
+import { draftMode } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+
+// http://localhost:3000/api/-preview?marketId=ww&localeId=it&templateId=homepage&documentId=6a6b33177d8f191df34b33a3
+
+export async function previewHandler(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const params = Object.fromEntries(searchParams) as {
+    marketId: string;
+    localeId: string;
+    templateId: string;
+    documentId: string;
+    _status: 'published' | 'draft';
+    _live: string;
+    _token: string;
+  };
+  /*
+  if (params.secret !== process.env.MIXER_SECRET) {
+    return new Response('Invalid token', { status: 401 })
+  }
+  */
+  /*
+  const headersList = await headers()
+  const userAgent = headersList.get('user-agent')
+  */
+  const { marketId, localeId, templateId, documentId, _status, _live } = params;
+  const destination = `/${marketId}/${localeId}/${templateId}/${documentId}${_live ? '?_live=true' : ''}`;
+  /*
+  response.setPreviewData({ _status });
+  response.setDraftMode({ enable: true });
+  response.redirect(307, destination);
+  redirect(destination, RedirectType.replace);
+  */
+  const draft = await draftMode();
+  draft.enable();
+  const path = `${process.env.NEXT_PUBLIC_URL}${destination}`;
+  return NextResponse.redirect(path, {
+    status: 303,
+  });
+  /*
+  return NextResponse.redirect(path, {
+    status: 303,
+  });
+  */
+  /*
+  return new Response(null, {
+    status: 303,
+    headers: {
+      Location: path,
+    },
+  });
+  */
+  /*
+  redirect(path);
+  return;
+  */
+  /*
+  return NextResponse.json({
+    destination: destination,
+    permanent: false
+  });
+  */
+}

package/src/server/handlers/registry.handler.test.ts

@@ -0,0 +1,65 @@
+import { NextRequest } from 'next/server';
+import { describe, expect, test } from 'vitest';
+import { getRegistry, getRegistryItem } from './registry.handler';
+
+const request = new NextRequest('https://registry.example.test/r');
+
+describe('registry handlers', () => {
+    test('builds a registry from all published UI source folders', async () => {
+        const response = await getRegistry()(request);
+        const body = await response.json();
+        const names = body.items.map((item: { name: string }) => item.name);
+
+        expect(response.headers.get('content-type')).toContain('application/json');
+        expect(body.$schema).toBe('https://ui.shadcn.com/schema/registry.json');
+        expect(names).toContain('button');
+        expect(names).toContain('box');
+        expect(names).toContain('sections-header');
+        expect(names).toContain('hooks-use-pagination');
+        expect(names).toContain('lazy-login-form');
+        expect(names).toContain('examples-example-button');
+        expect(names).toContain('theme-theme');
+        expect(names).toContain('lib-utils');
+        expect(names).not.toContain('accordion');
+        expect(names).not.toContain('hooks-use-event-listener-test');
+        expect(names).not.toContain('sections-index');
+        expect(body.items.every((item: { files: Array<{ content?: string }> }) => item.files.every(file => !('content' in file)))).toBe(true);
+    });
+
+    test('returns rewritten source and dependencies for an item', async () => {
+        const response = await getRegistryItem()(request, { params: Promise.resolve({ slug: ['box.json'] }) });
+        const body = await response.json();
+
+        expect(body.$schema).toBe('https://ui.shadcn.com/schema/registry-item.json');
+        expect(body.name).toBe('box');
+        expect(body.files.map((file: { target: string }) => file.target)).toEqual([
+            '@ui/box.tsx',
+        ]);
+        expect(body.files[0].content).toContain("@/lib/as-component");
+        expect(body.registryDependencies).toEqual([
+            'https://registry.example.test/r/lib-as-component.json',
+            'https://registry.example.test/r/lib-utils.json',
+        ]);
+    });
+
+    test('returns source, dependencies, and assets for non-component items', async () => {
+        const handler = getRegistryItem();
+        const sectionResponse = await handler(request, { params: Promise.resolve({ slug: ['sections-header.json'] }) });
+        const section = await sectionResponse.json();
+        const themeResponse = await handler(request, { params: Promise.resolve({ slug: ['theme-theme.json'] }) });
+        const theme = await themeResponse.json();
+
+        expect(sectionResponse.status).toBe(200);
+        expect(section.files.map((file: { target: string }) => file.target)).toContain('@components/sections/header.tsx');
+        expect(section.registryDependencies).toContain('https://registry.example.test/r/sections-main-nav.json');
+        expect(themeResponse.status).toBe(200);
+        expect(theme.files.map((file: { type: string }) => file.type)).toContain('registry:style');
+        expect(theme.files.map((file: { target: string }) => file.target)).toContain('@components/theme/theme.css');
+    });
+
+    test('returns 404 for excluded and unknown components', async () => {
+        const handler = getRegistryItem();
+        expect((await handler(request, { params: Promise.resolve({ slug: ['accordion.json'] }) })).status).toBe(404);
+        expect((await handler(request, { params: Promise.resolve({ slug: ['missing.json'] }) })).status).toBe(404);
+    });
+});

package/src/server/handlers/registry.handler.ts

@@ -0,0 +1,259 @@
+import { NextRequest } from 'next/server';
+import { readdir, readFile, stat } from 'node:fs/promises';
+import { basename, dirname, extname, join, relative, resolve } from 'node:path';
+
+const REGISTRY_SCHEMA = 'https://ui.shadcn.com/schema/registry.json';
+const REGISTRY_ITEM_SCHEMA = 'https://ui.shadcn.com/schema/registry-item.json';
+const SOURCE_EXTENSIONS = new Set(['.css', '.json', '.ts', '.tsx']);
+const PUBLISHED_DIRECTORIES = new Set(['components', 'examples', 'hooks', 'lazy', 'lib', 'sections', 'theme']);
+const SHADCN_COMPONENTS = new Set([
+  'accordion', 'alert-dialog', 'alert', 'aspect-ratio', 'avatar', 'badge', 'breadcrumb', 'calendar', 'card',
+  'carousel', 'chart', 'checkbox', 'collapsible', 'combobox', 'command', 'context-menu', 'dialog', 'drawer',
+  'dropdown-menu', 'form', 'hover-card', 'input', 'input-otp', 'label', 'menubar', 'navigation-menu',
+  'pagination', 'popover', 'progress', 'radio-group', 'resizable', 'scroll-area', 'select', 'separator', 'sheet',
+  'sidebar', 'skeleton', 'slider', 'sonner', 'switch', 'table', 'tabs', 'textarea', 'toast', 'toggle',
+  'toggle-group', 'tooltip',
+]);
+
+type RegistryFile = {
+  path: string;
+  content: string;
+  type: 'registry:ui' | 'registry:lib' | 'registry:hook' | 'registry:style' | 'registry:file';
+  target: string;
+};
+
+type RegistryCatalogFile = Omit<RegistryFile, 'content'>;
+
+type RegistryItem = {
+  $schema: typeof REGISTRY_ITEM_SCHEMA;
+  name: string;
+  type: 'registry:ui';
+  title: string;
+  dependencies?: string[];
+  registryDependencies?: string[];
+  files: RegistryFile[];
+};
+
+type RegistryCatalogItem = Omit<RegistryItem, 'files'> & {
+  files: RegistryCatalogFile[];
+};
+
+type SourceFile = { absolutePath: string; relativePath: string };
+
+function toKebabCase(value: string) {
+  return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').replace(/[._\s]+/g, '-').toLowerCase();
+}
+
+function titleFromName(name: string) {
+  return name.replace(/(^|[-_])(\w)/g, (_, __, character: string) => character.toUpperCase());
+}
+
+function packageName(specifier: string) {
+  return specifier.startsWith('@') ? specifier.split('/').slice(0, 2).join('/') : specifier.split('/')[0];
+}
+
+function getOrigin(request: NextRequest) {
+  return process.env.NEXT_PUBLIC_URL?.replace(/\/$/, '') || request.nextUrl.origin;
+}
+
+async function directoryExists(directory: string) {
+  try {
+    return (await stat(directory)).isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+async function getUiSourceDirectory() {
+  if (process.env.UI_REGISTRY_SOURCE_DIR) {
+    const configuredPath = resolve(process.env.UI_REGISTRY_SOURCE_DIR);
+    if (await directoryExists(configuredPath)) return configuredPath;
+    throw new Error(`UI_REGISTRY_SOURCE_DIR does not exist: ${configuredPath}`);
+  }
+
+  let currentDirectory = process.cwd();
+  while (dirname(currentDirectory) !== currentDirectory) {
+    const candidate = join(currentDirectory, 'packages', 'ui', 'src');
+    if (await directoryExists(candidate)) return candidate;
+    currentDirectory = dirname(currentDirectory);
+  }
+  throw new Error('Unable to find packages/ui/src. Set UI_REGISTRY_SOURCE_DIR to its absolute path.');
+}
+
+async function getSourceFiles(directory: string, sourceDirectory = directory): Promise<SourceFile[]> {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const files = await Promise.all(entries.map(async entry => {
+    const absolutePath = join(directory, entry.name);
+    if (entry.isDirectory()) return getSourceFiles(absolutePath, sourceDirectory);
+    if (!SOURCE_EXTENSIONS.has(extname(entry.name)) || entry.name.endsWith('.d.ts') || /\.(test|spec)\.[^.]+$/.test(entry.name)) return [];
+    return [{ absolutePath, relativePath: entry.name }];
+  }));
+
+  return files.flat().map(file => ({
+    ...file,
+    relativePath: relative(sourceDirectory, file.absolutePath).replaceAll('\\', '/'),
+  }));
+}
+
+function getImportSpecifiers(source: string) {
+  return [...source.matchAll(/(?:import|export)\s+(?:type\s+)?(?:[\s\S]*?\s+from\s+)?['"]([^'"]+)['"]/g)]
+    .map(match => match[1]);
+}
+
+function resolveSourceImport(sourceDirectory: string, sourceFile: string, specifier: string, sourceFiles: Map<string, SourceFile>) {
+  let candidate: string | undefined;
+  if (specifier.startsWith('@app/ui/')) candidate = specifier.slice('@app/ui/'.length);
+  if (specifier.startsWith('.')) candidate = relative(sourceDirectory, resolve(dirname(sourceFile), specifier)).replaceAll('\\', '/');
+  if (!candidate) return undefined;
+
+  const normalizedCandidate = candidate.replace(/^\.\//, '');
+  return sourceFiles.get(normalizedCandidate) ||
+    sourceFiles.get(`${normalizedCandidate}.ts`) || sourceFiles.get(`${normalizedCandidate}.tsx`) ||
+    sourceFiles.get(`${normalizedCandidate}/index.ts`) || sourceFiles.get(`${normalizedCandidate}/index.tsx`);
+}
+
+function rewriteUiImports(source: string, sourceFile: SourceFile, sourceDirectory: string, sourceFiles: Map<string, SourceFile>) {
+  return source.replace(/(['"])(@app\/ui\/[^'"]+|\.\.?\/[^'"]+)\1/g, (match, quote: string, specifier: string) => {
+    const importedFile = resolveSourceImport(sourceDirectory, sourceFile.absolutePath, specifier, sourceFiles);
+    return importedFile ? `${quote}${getImportPath(importedFile.relativePath)}${quote}` : match;
+  });
+}
+
+function getImportPath(relativePath: string) {
+  const extensionlessPath = relativePath.replace(/\.(tsx?|mts|cts)$/, '');
+  if (extensionlessPath.startsWith('components/')) return `@/components/ui/${extensionlessPath.slice('components/'.length)}`;
+  if (extensionlessPath.startsWith('hooks/')) return `@/hooks/${extensionlessPath.slice('hooks/'.length)}`;
+  if (extensionlessPath.startsWith('lib/')) return `@/lib/${extensionlessPath.slice('lib/'.length)}`;
+  return `@/components/${extensionlessPath}`;
+}
+
+function getTargetPath(relativePath: string) {
+  if (relativePath.startsWith('components/')) return `@ui/${relativePath.slice('components/'.length)}`;
+  if (relativePath.startsWith('hooks/')) return `@hooks/${relativePath.slice('hooks/'.length)}`;
+  if (relativePath.startsWith('lib/')) return `@lib/${relativePath.slice('lib/'.length)}`;
+  return `@components/${relativePath}`;
+}
+
+function getRegistryFileType(relativePath: string): RegistryFile['type'] {
+  if (relativePath.startsWith('components/')) return 'registry:ui';
+  if (relativePath.startsWith('hooks/')) return 'registry:hook';
+  if (relativePath.startsWith('theme/')) return 'registry:style';
+  if (extname(relativePath) === '.json') return 'registry:file';
+  return 'registry:lib';
+}
+
+function isPublishedFile(file: SourceFile) {
+  const [directory] = file.relativePath.split('/');
+  return PUBLISHED_DIRECTORIES.has(directory) && !/(^|\/)index\.[^.]+$/.test(file.relativePath);
+}
+
+function getRegistryItemName(file: SourceFile) {
+  const [directory, ...path] = file.relativePath.split('/');
+  const filename = path.join('/').replace(extname(file.relativePath), '');
+  const name = toKebabCase(filename.replaceAll('/', '-'));
+  return directory === 'components' ? name : `${directory}-${name}`;
+}
+
+async function createRegistryCatalog(sourceDirectory: string, origin: string) {
+  const files = (await getSourceFiles(sourceDirectory)).filter(file => PUBLISHED_DIRECTORIES.has(file.relativePath.split('/')[0]));
+  const filesByRelativePath = new Map(files.map(file => [file.relativePath, file]));
+  const entries = new Map(files.filter(isPublishedFile).map(file => [getRegistryItemName(file), file]));
+  const entryNamesByPath = new Map([...entries].map(([name, file]) => [file.relativePath, name]));
+  const includedItems = new Set([...entries].filter(([name, file]) =>
+    !file.relativePath.startsWith('components/') || name === 'button' || !SHADCN_COMPONENTS.has(name)
+  ).map(([name]) => name));
+
+  async function getItem(name: string): Promise<RegistryItem | undefined> {
+    const entry = entries.get(name);
+    if (!entry || !includedItems.has(name)) return undefined;
+
+    const filesToInclude = new Map<string, SourceFile>();
+    const externalDependencies = new Set<string>();
+    const registryDependencies = new Set<string>();
+    const pendingFiles = [entry];
+
+    while (pendingFiles.length) {
+      const file = pendingFiles.pop()!;
+      if (filesToInclude.has(file.relativePath)) continue;
+      filesToInclude.set(file.relativePath, file);
+      const source = await readFile(file.absolutePath, 'utf8');
+
+      for (const specifier of getImportSpecifiers(source)) {
+        const localFile = resolveSourceImport(sourceDirectory, file.absolutePath, specifier, filesByRelativePath);
+        const dependencyName = localFile && entryNamesByPath.get(localFile.relativePath);
+        if (localFile?.relativePath.startsWith('components/')) {
+          const componentName = toKebabCase(basename(localFile.relativePath, extname(localFile.relativePath)));
+          if (dependencyName !== name) {
+            registryDependencies.add(includedItems.has(componentName) ? `${origin}/r/${componentName}.json` : componentName);
+          }
+        } else if (localFile && dependencyName && dependencyName !== name && includedItems.has(dependencyName)) {
+          registryDependencies.add(`${origin}/r/${dependencyName}.json`);
+        } else if (localFile) {
+          pendingFiles.push(localFile);
+        } else if (!specifier.startsWith('.') && !specifier.startsWith('@app/ui/') && !specifier.startsWith('node:') && specifier !== 'react' && specifier !== 'react-dom') {
+          externalDependencies.add(packageName(specifier));
+        }
+      }
+    }
+
+    const registryFiles = await Promise.all([...filesToInclude.values()].sort((left, right) => left.relativePath.localeCompare(right.relativePath)).map(async file => ({
+      path: file.relativePath,
+      content: rewriteUiImports(await readFile(file.absolutePath, 'utf8'), file, sourceDirectory, filesByRelativePath),
+      type: getRegistryFileType(file.relativePath),
+      target: getTargetPath(file.relativePath),
+    })));
+
+    return {
+      $schema: REGISTRY_ITEM_SCHEMA,
+      name,
+      type: 'registry:ui',
+      title: titleFromName(name),
+      ...(externalDependencies.size && { dependencies: [...externalDependencies].sort() }),
+      ...(registryDependencies.size && { registryDependencies: [...registryDependencies].sort() }),
+      files: registryFiles,
+    };
+  }
+
+  async function getCatalogItem(name: string): Promise<RegistryCatalogItem | undefined> {
+    const item = await getItem(name);
+    if (!item) return undefined;
+    return {
+      ...item,
+      files: item.files.map(file => ({
+        path: file.path,
+        type: file.type,
+        target: file.target,
+      })),
+    };
+  }
+
+  return { items: includedItems, getCatalogItem, getItem };
+}
+
+function jsonResponse(body: unknown, status = 200) {
+  return Response.json(body, {
+    status,
+    headers: { 'X-Frame-Options': 'SAMEORIGIN', 'X-Robots-Tag': 'noindex, follow' },
+  });
+}
+
+export function getRegistry() {
+  return async function (request: NextRequest) {
+    const sourceDirectory = await getUiSourceDirectory();
+    const catalog = await createRegistryCatalog(sourceDirectory, getOrigin(request));
+    const items = (await Promise.all([...catalog.items].sort().map(name => catalog.getCatalogItem(name)))).filter(Boolean);
+    return jsonResponse({ $schema: REGISTRY_SCHEMA, name: 'bom-ui', homepage: getOrigin(request), items });
+  };
+}
+
+export function getRegistryItem() {
+  return async function (request: NextRequest, { params: getParams }: { params: Promise<{ slug: string[] }> }) {
+    const { slug } = await getParams;
+    const name = slug.at(-1)?.replace(/\.json$/, '');
+    if (!name) return jsonResponse({ error: 'Registry item name is required.' }, 404);
+
+    const sourceDirectory = await getUiSourceDirectory();
+    const item = await (await createRegistryCatalog(sourceDirectory, getOrigin(request))).getItem(name);
+    return item ? jsonResponse(item) : jsonResponse({ error: `Registry item not found: ${name}` }, 404);
+  };
+}