orionplace-react 0.1.0 → 0.2.0

package/templates/app/cart/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/cart', props);
+}

package/templates/app/catalog/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/catalog', props);
+}

package/templates/app/category/[id]/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/category/[id]', props);
+}

package/templates/app/contact/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/contact', props);
+}

package/templates/app/error.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { StorefrontErrorRoute } from '@/app/_storefront/StorefrontErrorRoute';
+
+export default function ErrorPage() {
+  return <StorefrontErrorRoute statusCode={500} />;
+}

package/templates/app/featured/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/featured', props);
+}

package/templates/app/global-error.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { StorefrontErrorPage } from '@/components/orionplace/shared/StorefrontErrorPage';
+import { OrionplaceThemeProvider } from '@/components/orionplace/theme/OrionplaceThemeProvider';
+import { storefrontPageMetadata } from '@/lib/orionplace/pageSeo';
+import {
+  storefrontErrorLocale,
+  storefrontErrorLocation,
+} from '@/lib/orionplace/errorPageLabels';
+import '@/app/globals.css';
+
+export default function GlobalError() {
+  const [locale, setLocale] = useState('en');
+  const metadata            = storefrontPageMetadata('error', locale);
+
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    setLocale(storefrontErrorLocale(url.searchParams.get('locale'), undefined));
+  }, []);
+
+  return (
+    <html lang={locale}>
+      <head>
+        <title>{metadata.title}</title>
+        <meta
+          name="description"
+          content={metadata.description}
+        />
+        <meta
+          name="keywords"
+          content={metadata.keywords}
+        />
+        <meta
+          name="robots"
+          content="noindex, nofollow"
+        />
+        <meta
+          property="og:title"
+          content={metadata.title}
+        />
+        <meta
+          property="og:description"
+          content={metadata.description}
+        />
+      </head>
+      <body>
+        <OrionplaceThemeProvider>
+          <StorefrontErrorPage
+            statusCode={500}
+            locale={locale}
+            onRetry={() => window.location.reload()}
+            onSelectHome={() =>
+              window.location.assign(storefrontErrorLocation('/', locale))
+            }
+          />
+        </OrionplaceThemeProvider>
+      </body>
+    </html>
+  );
+}

package/templates/app/globals.css

@@ -1,10 +1,58 @@
 :root {
   color-scheme: light;
+  scrollbar-gutter: stable;
 }
 
+/* As in the Nuxt and Svelte layouts: the theme provider colours the page. */
 body {
   margin: 0;
-  background: #f5f6f8;
-  color: #202b38;
   font-family: system-ui, sans-serif;
 }
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.op-feature-loading {
+  display: flex;
+  min-height: 3rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--orionplace-accent);
+}
+
+.op-feature-loading::before {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0.125rem solid var(--orionplace-border);
+  border-top-color: var(--orionplace-accent);
+  border-radius: 999px;
+  content: '';
+  animation: op-feature-spin 0.8s linear infinite;
+}
+
+@keyframes op-feature-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .op-feature-loading::before {
+    animation: none;
+  }
+}

package/templates/app/journal/[id]/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/journal/[id]', props);
+}

package/templates/app/journal/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/journal', props);
+}

package/templates/app/layout.app.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+import { AppStorefront } from '@/app/_storefront/AppRoutes';
+import '@/app/globals.css';
+
+// The root layout of the Android app build (orionplace/runtime/app.mjs). The
+// app loads the storefront itself, so nothing here depends on a request.
+export const metadata: Metadata = {
+  title: 'Storefront',
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <AppStorefront>{children}</AppStorefront>
+      </body>
+    </html>
+  );
+}

package/templates/app/layout.tsx

@@ -1,24 +1,58 @@
 import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
-import { OrionplaceProvider } from '../providers/OrionplaceProvider';
-import { getOrionplaceAppLoad } from '../lib/orionplace/appLoadServer';
-import './globals.css';
+import { OrionplaceProvider } from '@/providers/OrionplaceProvider';
+import { getOrionplaceAppLoad } from '@/lib/orionplace/appLoadServer';
+import { StorefrontShell } from '@/app/StorefrontShell';
+import { getOrionplaceServerLocale } from '@/lib/orionplace/serverLocale';
+import {
+  getStorefrontMetadata,
+  getStorefrontMetadataContext,
+} from '@/lib/orionplace/serverMetadata';
+import '@/app/globals.css';
 
-export const metadata: Metadata = {
-  title: 'Marketplace · AppLoad debug',
-  description: 'Initialization state of your Orionplace marketplace connection.',
-};
+export async function generateMetadata(): Promise<Metadata> {
+  return getStorefrontMetadata();
+}
 
 // Initialization depends on the request domain and session, so pages are dynamic.
 export const dynamic = 'force-dynamic';
 
-export default async function RootLayout({ children }: { children: ReactNode }) {
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
   // Bootstrap precedes page rendering. Failures stay in the store for the interface to handle.
   const { result, failure } = await getOrionplaceAppLoad();
+  const language            = await getOrionplaceServerLocale();
+  const { tags }            = await getStorefrontMetadataContext();
   return (
-    <html lang="en">
+    <html lang={language}>
+      <head>
+        {tags.map((tag, index) =>
+          'property' in tag ? (
+            <meta
+              key={index}
+              property={tag.property}
+              content={tag.content}
+            />
+          ) : (
+            <meta
+              key={index}
+              name={tag.name}
+              content={tag.content}
+            />
+          ),
+        )}
+      </head>
       <body>
-        <OrionplaceProvider result={result} failure={failure}>{children}</OrionplaceProvider>
+        <OrionplaceProvider
+          result={result}
+          failure={failure}
+          locale={language}
+        >
+          <StorefrontShell>{children}</StorefrontShell>
+        </OrionplaceProvider>
       </body>
     </html>
   );

package/templates/app/logout/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/logout', props);
+}

package/templates/app/manufacturers/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/manufacturers', props);
+}

package/templates/app/not-found.tsx

@@ -0,0 +1,5 @@
+import { StorefrontErrorRoute } from '@/app/_storefront/StorefrontErrorRoute';
+
+export default function NotFound() {
+  return <StorefrontErrorRoute statusCode={404} />;
+}

package/templates/app/orders/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/orders', props);
+}

package/templates/app/page.module.css

@@ -27,6 +27,7 @@
 .eyebrow {
   color: #596777;
   font-size: 14px;
+  line-height: calc(20 / 14);
 }
 
 .bootstrap section {
@@ -52,12 +53,12 @@
   background: #eaf0f5;
 }
 
-.state[data-state='success'] {
+.state[data-state="success"] {
   background: #e6f2ec;
   color: #245c40;
 }
 
-.state[data-state='error'] {
+.state[data-state="error"] {
   background: #fbeceb;
   color: #8c302a;
 }
@@ -73,12 +74,14 @@
 }
 
 .bootstrap button:disabled {
-  opacity: .6;
+  opacity: 0.6;
   cursor: wait;
 }
 
-.bootstrap button:hover:not(:disabled) {
-  background: #eaf0f5;
+@media (hover: hover) {
+  .bootstrap button:hover:not(:disabled) {
+    background: #eaf0f5;
+  }
 }
 
 .bootstrap a {
@@ -87,12 +90,13 @@
 }
 
 .bootstrap :focus-visible {
-  outline: 2px solid #245786;
-  outline-offset: 4px;
+  outline: none;
+  background-color: var(--docs-hover, #eaf0f5);
+  border-color: var(--docs-accent, #315b7d);
 }
 
 .bootstrap code {
-  font-size: .9em;
+  font-size: 0.9em;
   overflow-wrap: anywhere;
 }
 

package/templates/app/page.tsx

@@ -1,80 +1,9 @@
-'use client';
-
-import { useOrionplace } from '../providers/OrionplaceProvider';
-import { useOrionplaceAppLoad } from '../hooks/useOrionplaceAppLoad';
-import { selectData, selectInit } from '../stores/orionplace';
-import type { AppLoadFailure, AppLoadStatus, IAppLoadPathsRecord } from '../interfaces/orionplace';
-import styles from './page.module.css';
-
-const STATE_LABELS: Record<AppLoadStatus, string> = {
-  idle: 'Not started',
-  pending: 'Loading',
-  success: 'Loaded',
-  error: 'Failed',
-};
-
-const countEndpoints = (routes?: IAppLoadPathsRecord) =>
-  Object.values(routes?.paths ?? {}).reduce((total, section) => total + Object.keys(section).length, 0);
-
-function failureText(failure: AppLoadFailure) {
-  if (failure.kind === 'validation') return 'The backend returned form errors.';
-  if (failure.kind === 'invalid-response') return 'The response is missing required initialization data.';
-  if (failure.kind === 'network') return 'The API request did not complete.';
-  return 'The API returned an HTTP error.';
-}
-
-export default function Home() {
-  const { result, status, failure, refresh } = useOrionplaceAppLoad();
-  const page                                 = useOrionplace(selectData);
-  const init                                 = useOrionplace(selectInit);
-
-  return (
-    <main className={styles.bootstrap}>
-      <header>
-        <p className={styles.eyebrow}>Orionplace · Next.js starter</p>
-        <h1>Your marketplace connection</h1>
-        <p>This first page checks initialization through <code>POST /api/appload</code>.
-          Replace it with your storefront when the connection is ready.</p>
-      </header>
-      <section aria-labelledby="status-title" aria-busy={status === 'pending'}>
-        <div className={styles.sectionHeading}>
-          <h2 id="status-title">AppLoad state</h2>
-          <button type="button" disabled={status === 'pending'} onClick={() => void refresh()}>Reload AppLoad</button>
-        </div>
-        <p role="status" aria-live="polite" className={styles.state} data-state={status}>{STATE_LABELS[status]}</p>
-        {status === 'pending' && <p>Loading initialization data and available API endpoints…</p>}
-        {status !== 'pending' && failure && (
-          <div role="alert">
-            <p>AppLoad could not initialize. {failureText(failure)}</p>
-            {failure.httpStatus ? <p>HTTP status: <code>{failure.httpStatus}</code></p> : null}
-            <p>Check your backend, frontend domain and <code>MIMIC_FRONT_DOMAIN</code> using
-              {' '}<code>npx orionplace-react help</code>. Setup instructions are in <code>orionplace/README.md</code>.</p>
-          </div>
-        )}
-        {status !== 'pending' && !failure && result && init && (
-          <dl>
-            <div><dt>HTTP status</dt><dd>{result.httpStatus}</dd></div>
-            <div><dt>Loaded at (UTC)</dt><dd><time dateTime={result.loadedAt}>{result.loadedAt}</time></dd></div>
-            <div><dt>Session</dt><dd>{init.is_authenticated ? 'Signed in' : 'Guest'}</dd></div>
-            <div><dt>Languages</dt><dd>{Object.keys(init.locale).length}</dd></div>
-            <div><dt>Currencies</dt><dd>{Object.keys(init.currencies).length}</dd></div>
-            <div><dt>Public endpoints</dt><dd>{countEndpoints(page?.unauth)}</dd></div>
-            <div><dt>Authenticated endpoints</dt><dd>{countEndpoints(page?.auth)}</dd></div>
-            <div><dt>Catalog roots</dt><dd>{init.catalog?.length ?? 'Not included'}</dd></div>
-            <div><dt>Initial products</dt><dd>{init.products?.length ?? 'Not included'}</dd></div>
-            <div><dt>Tariffs</dt><dd>{init.tariffs?.data.length ?? 'Not included'}</dd></div>
-          </dl>
-        )}
-      </section>
-      <section aria-labelledby="next-title">
-        <h2 id="next-title">Build from typed initialization data</h2>
-        <p>The root layout awaits <code>lib/orionplace/appLoadServer.ts</code> before this page renders,
-          and passes the snapshot to <code>providers/OrionplaceProvider.tsx</code>. Read it in any client
-          component with <code>useOrionplace()</code>, or await the same loader in a server component.
-          The response and its nested interfaces are in <code>interfaces/orionplace/</code>.</p>
-        <p>This debug page shows section counts. Account details, keys and backend diagnostics are not displayed.</p>
-        <a href="https://orionmarket.place/sandbox">Read the marketplace documentation</a>
-      </section>
-    </main>
-  );
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/', props);
 }

package/templates/app/product/[id]/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/product/[id]', props);
+}

package/templates/app/profile/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/profile', props);
+}

package/templates/app/promo/[id]/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/promo/[id]', props);
+}

package/templates/app/promocodes/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/promocodes', props);
+}

package/templates/app/ps3/blog/[...orionplace]/route.ts

@@ -0,0 +1,13 @@
+// Guarded blog images and videos are read through the same gateway as /api.
+import { forwardMarketplace } from '@orionplace-runtime/marketplace.mjs';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+function handler(request: Request): Promise<Response> {
+  return forwardMarketplace(request, {
+    mimicFrontDomain: process.env.MIMIC_FRONT_DOMAIN ?? '',
+  });
+}
+
+export { handler as GET, handler as HEAD };

package/templates/app/sellers/page.tsx

@@ -0,0 +1,9 @@
+import {
+  renderStorefrontRoute,
+  type StorefrontPageProps,
+} from '@/lib/orionplace/serverRoute';
+
+// The page and its first data: app/_storefront/storefrontRoutes.tsx.
+export default function Page(props: StorefrontPageProps) {
+  return renderStorefrontRoute('/sellers', props);
+}