diff --git a/docs/plans/2026-03-31-admin-adapter-combined.md b/docs/plans/2026-03-31-admin-adapter-combined.md new file mode 100644 index 00000000000..86fbb88854f --- /dev/null +++ b/docs/plans/2026-03-31-admin-adapter-combined.md @@ -0,0 +1,839 @@ +# AdminAdapter Pattern — Combined Design & Implementation Plan + +> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. + +**Goal:** Decouple Payload CMS from Next.js by introducing an `AdminAdapter` pattern (like `DatabaseAdapter`), enabling frameworks like TanStack Start as alternatives. + +**Architecture:** Two-layer abstraction — a `RouterProvider` React context replaces direct `next/navigation` imports in UI, and an `AdminAdapter` interface abstracts server-side concerns (request init, cookies, server functions, navigation primitives like `notFound`/`redirect`). Views move from `packages/next` to `packages/ui`. `packages/next` becomes a thin adapter implementation. + +**Tech Stack:** TypeScript, React (RSC), Payload CMS monorepo (pnpm + Turbo) + +## Table of Contents + +- [Design Decisions](#design-decisions) +- [RSC Compatibility: Next.js vs TanStack Start](#rsc-compatibility-nextjs-vs-tanstack-start) +- [Package Responsibilities After Refactor](#package-responsibilities-after-refactor) + - [View Split Pattern](#view-split-pattern) + - [RSC Component Example: Before & After](#rsc-component-example-before--after) +- [AdminAdapter Interface](#adminadapter-interface) +- [RouterProvider Abstraction](#routerprovider-abstraction) +- [Core Package Decoupling](#core-package-decoupling) +- [Data Flows](#data-flows) +- [TanStack Start Adapter Shape](#tanstack-start-adapter-shape) +- [Implementation Phases](#implementation-phases) + - [Phase 1: Define AdminAdapter Interface in Core](#phase-1-define-adminadapter-interface-in-core) + - [Phase 2: RouterProvider Abstraction](#phase-2-routerprovider-abstraction) + - [Phase 3: Decouple Core Package](#phase-3-decouple-core-package) + - [Phase 4: Move Views from packages/next to packages/ui](#phase-4-move-views-from-packagesnext-to-packagesui) + - [Phase 5: Refactor packages/next to Implement AdminAdapter](#phase-5-refactor-packagesnext-to-implement-adminadapter) + - [Phase 6: CLI and Template Changes](#phase-6-cli-and-template-changes) + - [Phase 7: TanStack Start Proof-of-Concept](#phase-7-tanstack-start-proof-of-concept) + - [Phase 8: Testing](#phase-8-testing) +- [Work Items Summary](#work-items-summary) +- [Dependency Graph](#dependency-graph) + +--- + +## Design Decisions + +| Decision | Choice | +| ----------------- | ---------------------------------------------------------------------- | +| Approach | RouterProvider + AdminAdapter interface | +| React/RSC | React-only, RSC-required | +| Build plugins | Each adapter owns its own | +| Migration | Non-breaking, auto-detect `@payloadcms/next` | +| Adapter name | `AdminAdapter` | +| Views location | Move from `packages/next` to `packages/ui` | +| Core decoupling | Replace 3 Next.js imports with generic alternatives | +| UI decoupling | `RouterProvider` context replaces ~38 direct `next/navigation` imports | +| Server navigation | `notFound()` / `redirect()` abstracted via adapter | +| Config | `admin.adapter` field, optional (defaults to next) | + +--- + +## RSC Compatibility: Next.js vs TanStack Start + +Both frameworks support RSC but with different mechanisms. These differences drive the adapter contract: + +| Concern | Next.js | TanStack Start | Adapter Resolution | +| ---------------- | --------------------------------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------- | +| Server functions | `'use server'` directive | `createServerFn()` from `@tanstack/start` | `adapter.handleServerFunctions` — already abstracted via `ServerFunctionsProvider` | +| Request context | `headers()` / `cookies()` from `next/headers` | `getWebRequest()` from `vinxi/http` | `adapter.initReq()` — each adapter reads request differently | +| `notFound()` | Throws special error caught by Next.js | `throw notFound()` from `@tanstack/react-router` | `adapter.notFound()` — added to interface | +| `redirect(url)` | Throws special error caught by Next.js | `throw redirect({ to: url })` from `@tanstack/react-router` | `adapter.redirect(url)` — added to interface | +| Caching | `unstable_cache()` / `React.cache()` | Framework-level caching via Vinxi | Caching stays in adapter, not in shared views | +| OG Images | `ImageResponse` from `next/og` | Custom implementation | Stays in adapter package | +| Build config | `withPayload()` wrapping `next.config.mjs` | Vite plugin for `app.config.ts` | Each adapter owns its build plugin | + +### Framework-Specific Code Audit (packages/next) + +| Category | File Count | Must Stay in Adapter | +| --------------------------------- | -------------------------------------------------------- | --------------------------------------------------------------- | +| `notFound()` / `redirect()` calls | ~12 views | Yes — views receive these as callbacks or adapter provides them | +| Client `next/navigation` hooks | 7 client components in packages/next + 38 in packages/ui | No — replaced with `RouterProvider` hooks | +| `initReq` direct calls | 2 views (Root, NotFound) | Yes — adapter calls initReq, passes result as props | +| `'use server'` directive | 4 files (auth actions + Root layout) | Yes — server function transport is adapter-specific | +| `next/headers` (cookies/headers) | 7 utility files | Yes — all go through adapter | +| `ImageResponse` (OG) | 1 file | Yes | + +### Key Constraint + +**`packages/ui` must be purely React — zero framework-specific imports.** Every `next/*` call must either: + +1. Route through the `AdminAdapter` interface, or +2. Be passed as props from the adapter's server entry point + +--- + +## Package Responsibilities After Refactor + +| Package | Responsibility | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `packages/payload` | Core CMS logic + `AdminAdapter` interface + `createAdminAdapter` helper | +| `packages/ui` | All React components + views (render only) + layouts + templates + `RouterProvider` context | +| `packages/next` | `nextAdapter()`: `initReq`, route handlers, `withPayload()`, cookies, auth actions, `notFound`/`redirect`, OG images, `RouterProvider` via `next/navigation` | +| `packages/tanstack-start` | `tanstackStartAdapter()`: same contract, TanStack-specific implementations | + +### View Split Pattern + +Views that currently call `initReq` or `notFound()`/`redirect()` are split: + +``` +BEFORE (in packages/next): + DocumentView.tsx → calls initReq(), calls notFound(), renders UI + +AFTER: + packages/next: DocumentEntry.tsx → calls initReq(), passes data as props + packages/ui: DocumentView.tsx → receives props, calls adapter.notFound() if needed, renders UI +``` + +For `notFound()` / `redirect()`: views receive these as functions from a `ServerNavigation` context provided by the adapter, or call `adapter.notFound()` / `adapter.redirect()` through a hook. + +### RSC Component Example: Before & After + +**CURRENT — tightly coupled to Next.js** (`packages/next/src/views/Document/index.tsx`): + +```tsx +// Imports Next.js-specific APIs directly +import { notFound, redirect } from 'next/navigation.js' + +export const renderDocument = async ({ initPageResult, params, ... }) => { + // initPageResult comes from initReq() called in the Root layout (also Next.js-specific) + const { collectionConfig, docID, locale, permissions, req } = initPageResult + + // Fetches data — this part is already framework-agnostic + const doc = await getDocumentData({ id: docID, collectionSlug, locale, payload: req.payload, req }) + + // Next.js-specific: throws special error caught by Next.js error boundary + if (isEditing && !doc) { + redirect(formatAdminURL({ adminRoute, path: `/collections/${collectionSlug}` })) + } + + const [docPreferences, { docPermissions }, { isLocked }] = await Promise.all([ + getDocPreferences({ id: docID, collectionSlug, req }), + getDocumentPermissions({ collectionConfig, id: docID, req }), + getIsLocked({ collectionSlug, id: docID, req }), + ]) + + // Renders UI — this part is framework-agnostic React + return { + data: doc, + Document: ( + + + + + ), + } +} +``` + +**AFTER — split into adapter entry + framework-agnostic render component:** + +`packages/next/src/views/Document/index.tsx` (adapter — stays in packages/next): + +```tsx +// Next.js adapter: thin entry point that handles framework-specific concerns +import { notFound, redirect } from 'next/navigation.js' +import { DocumentView } from '@payloadcms/ui/views/Document' + +export const renderDocument = async ({ initPageResult, params, ... }) => { + const { collectionConfig, docID, locale, permissions, req } = initPageResult + + const doc = await getDocumentData({ id: docID, collectionSlug, locale, payload: req.payload, req }) + + // Framework-specific navigation — handled HERE, not in the shared view + if (isEditing && !doc && collectionSlug) { + redirect(formatAdminURL({ adminRoute, path: `/collections/${collectionSlug}` })) + } + if (isEditing && !doc) { + notFound() + } + + const [docPreferences, { docPermissions }, { isLocked }] = await Promise.all([...]) + + // Delegates to the framework-agnostic render component + return { + data: doc, + Document: ( + + ), + } +} +``` + +`packages/tanstack-start/src/views/Document/index.tsx` (adapter — in packages/tanstack-start): + +```tsx +// TanStack Start adapter: same logic, different framework primitives +import { notFound, redirect } from '@tanstack/react-router' +import { DocumentView } from '@payloadcms/ui/views/Document' + +export const renderDocument = async ({ initPageResult, params, ... }) => { + const { collectionConfig, docID, locale, permissions, req } = initPageResult + + const doc = await getDocumentData({ id: docID, collectionSlug, locale, payload: req.payload, req }) + + // TanStack Start uses different throw signatures + if (isEditing && !doc && collectionSlug) { + throw redirect({ to: formatAdminURL({ adminRoute, path: `/collections/${collectionSlug}` }) }) + } + if (isEditing && !doc) { + throw notFound() + } + + const [docPreferences, { docPermissions }, { isLocked }] = await Promise.all([...]) + + // Same shared render component + return { + data: doc, + Document: ( + + ), + } +} +``` + +`packages/ui/src/views/Document/index.tsx` (shared — pure React, no framework imports): + +```tsx +// Framework-agnostic render component — pure React RSC +// NO imports from next/*, @tanstack/*, or any framework +import { DocumentInfoProvider, EditDepthProvider } from '@payloadcms/ui' + +export const DocumentView: React.FC = ({ + doc, + docPermissions, + docPreferences, + isLocked, + ... +}) => { + return ( + + + + + ) +} +``` + +**Key takeaway:** The data fetching and framework navigation live in the adapter's thin entry point (~20 lines). The actual UI rendering (~200+ lines) lives in packages/ui and is shared across all frameworks. Each adapter duplicates only the entry point glue, not the rendering logic. + +--- + +## AdminAdapter Interface + +```typescript +// packages/payload/src/admin/adapter/types.ts + +type AdminAdapterResult = { + init: (args: { payload: Payload }) => T + name: string +} + +interface BaseAdminAdapter { + name: string + payload: Payload + + // Server-side request handling + initReq: (args: { + config: SanitizedConfig + importMap: ImportMap + }) => Promise + + // Cookie management + getCookie: (name: string) => string | undefined + setCookie: (name: string, value: string, options?: CookieOptions) => void + deleteCookie: (name: string) => void + + // Server function dispatcher + handleServerFunctions: ServerFunctionHandler + + // Server-side navigation (RSC) + notFound: () => never + redirect: (url: string) => never + + // Client-side router provider + RouterProvider: React.ComponentType<{ children: React.ReactNode }> + + // Route handler factories for REST + GraphQL + createRouteHandlers: (config: SanitizedConfig) => RouteHandlers + + // Optional + generateMetadata?: (args: { + config: SanitizedConfig + }) => Promise> + destroy?: () => void | Promise +} +``` + +**Config usage:** + +```typescript +export default buildConfig({ + db: postgresAdapter({ ... }), + admin: { + adapter: nextAdapter({ ... }), // optional, auto-detected + }, +}) +``` + +### Auto-Detection (Backwards Compatibility) + +1. If `admin.adapter` is explicitly set, use it +2. If not, check if `@payloadcms/next` is installed — auto-import and use as default +3. If neither, throw clear error + +--- + +## RouterProvider Abstraction + +```typescript +// packages/ui/src/providers/Router/types.ts + +type RouterContextType = { + Link: React.ComponentType + useParams: () => Record + usePathname: () => string + useRouter: () => RouterInstance + useSearchParams: () => URLSearchParams +} + +type RouterInstance = { + back: () => void + forward: () => void + prefetch: (url: string) => void + push: (url: string) => void + refresh: () => void + replace: (url: string) => void +} +``` + +Replaces `next/navigation` / `next/link` imports in: + +- ~38 files in `packages/ui/src/` (elements, providers, views, forms, graphics, utilities) +- ~7 client components in `packages/next/src/` (moved to packages/ui) + +--- + +## Core Package Decoupling + +| Import | File | Resolution | +| ------------------------ | ------------------------------------------------------ | ------------------------------------------------------------ | +| `@next/env` | `packages/payload/src/bin/loadEnv.ts` | Replace with `dotenv` + `dotenv-expand` | +| `Metadata` from `'next'` | `packages/payload/src/config/types.ts` | Define `PayloadMetadata` type (subset Payload actually uses) | +| `ReadonlyRequestCookies` | `packages/payload/src/utilities/getRequestLanguage.ts` | Remove from union — callers pass `Map` | + +--- + +## Data Flows + +**Admin page request:** + +``` +Request → Framework route handler + → adapter.initReq() (framework-specific: reads headers/cookies) + → PayloadRequest + → View (packages/ui) renders with data as props + → Components use RouterProvider for navigation + → Views use adapter.notFound() / adapter.redirect() for server navigation +``` + +**Server function call (e.g., form state):** + +``` +UI calls useServerFunctions().getFormState() + → ServerFunctionsProvider → adapter.handleServerFunctions() + → adapter.initReq() + → Dispatches to handler (buildFormStateHandler, etc.) + → Returns result +``` + +--- + +## TanStack Start Adapter Shape + +```typescript +export function tanstackStartAdapter(args?: TanStackStartArgs): AdminAdapterResult { + return { + name: 'tanstack-start', + init: ({ payload }) => createAdminAdapter({ + name: 'tanstack-start', + payload, + initReq: // vinxi getWebRequest / getEvent + getCookie: // vinxi/http getCookie + setCookie: // vinxi/http setCookie + deleteCookie: // vinxi/http deleteCookie + handleServerFunctions: // TanStack createServerFn() wrapper + notFound: // throw notFound() from @tanstack/react-router + redirect: // throw redirect({ to: url }) from @tanstack/react-router + RouterProvider: // @tanstack/react-router hooks + Link + createRouteHandlers: // Vinxi API routes + }) + } +} +``` + +Build plugin as separate export: + +```typescript +// user's app.config.ts +import { withPayload } from '@payloadcms/tanstack-start/vite' +export default withPayload(defineConfig({ ... })) +``` + +--- + +## Implementation Phases + +### Phase 1: Define AdminAdapter Interface in Core + +#### Task 1: Create AdminAdapter types + +**Files:** + +- Create: `packages/payload/src/admin/adapter/types.ts` + +Write the `BaseAdminAdapter`, `AdminAdapterResult`, `CookieOptions`, `RouteHandler`, `RouteHandlers` types as shown in the interface section above. Include `notFound` and `redirect` in the interface. + +**Commit:** `feat: define AdminAdapter types` + +#### Task 2: Create createAdminAdapter helper + +**Files:** + +- Create: `packages/payload/src/admin/adapter/createAdminAdapter.ts` +- Create: `packages/payload/src/admin/adapter/index.ts` (barrel export) +- Modify: `packages/payload/src/index.ts` (add public exports) + +Factory helper modeled after `packages/payload/src/database/createDatabaseAdapter.ts`. + +**Commit:** `feat: add createAdminAdapter helper and exports` + +#### Task 3: Add adapter field to Config types + +**Files:** + +- Modify: `packages/payload/src/config/types.ts` + +Add `adapter?: AdminAdapterResult` to the `admin` block (around line 820). Add the import for `AdminAdapterResult`. + +**Commit:** `feat: add admin.adapter field to Config type` + +#### Task 4: Wire adapter initialization into Payload lifecycle + +**Files:** + +- Modify: `packages/payload/src/index.ts` (around line 881) + +Add `adminAdapter?: BaseAdminAdapter` property to Payload class. After db init, add: + +```typescript +if (this.config.admin?.adapter) { + this.adminAdapter = this.config.admin.adapter.init({ payload: this }) + this.adminAdapter.payload = this +} +``` + +**Commit:** `feat: wire AdminAdapter initialization into Payload lifecycle` + +--- + +### Phase 2: RouterProvider Abstraction + +#### Task 5: Create RouterProvider context in packages/ui + +**Files:** + +- Create: `packages/ui/src/providers/Router/types.ts` +- Create: `packages/ui/src/providers/Router/index.tsx` +- Modify: `packages/ui/src/exports/client/index.ts` (add exports) + +Create `RouterContext`, `RouterProvider`, and hook wrappers (`useRouter`, `usePathname`, `useSearchParams`, `useParams`, `Link`) that read from context. + +**Commit:** `feat(ui): add RouterProvider context and navigation hooks` + +#### Task 6: Add RouterProvider to RootProvider tree + +**Files:** + +- Modify: `packages/ui/src/providers/Root/index.tsx` + +Add optional `router?: RouterContextType` prop. Wrap with `` when provided. Keep backwards compatibility when not provided. + +**Commit:** `feat(ui): integrate RouterProvider into RootProvider tree` + +#### Task 7: Refactor UI files to use RouterProvider hooks + +**Files:** + +- Modify: ~38 files in `packages/ui/src/` + +Mechanical refactoring — replace all `import { useRouter } from 'next/navigation.js'` with `import { useRouter } from '../../providers/Router/index.js'` (adjust paths). Do in batches of ~10, build between batches. + +Full file list in implementation plan appendix. + +**Commit:** `refactor(ui): replace next/navigation imports with RouterProvider hooks` + +--- + +### Phase 3: Decouple Core Package + +#### Task 8: Replace @next/env with dotenv + +**Files:** + +- Modify: `packages/payload/src/bin/loadEnv.ts` +- Modify: `packages/payload/package.json` + +Replace `@next/env` with `dotenv` + `dotenv-expand`. Support same .env file priority (.env, .env.local, .env.development, .env.production). + +**Commit:** `refactor: replace @next/env with dotenv in core package` + +#### Task 9: Replace Metadata type with PayloadMetadata + +**Files:** + +- Modify: `packages/payload/src/config/types.ts` + +Remove `import type { Metadata } from 'next'`. Define `PayloadMetadata` type covering the subset Payload uses (title, description, openGraph, icons, twitter). Change `MetaConfig` from `& DeepClone` to `& PayloadMetadata`. + +**Commit:** `refactor: replace Next.js Metadata type with PayloadMetadata` + +#### Task 10: Remove ReadonlyRequestCookies from core + +**Files:** + +- Modify: `packages/payload/src/utilities/getRequestLanguage.ts` +- Modify: `packages/ui/src/utilities/getRequestLanguage.ts` (if same import exists) + +Remove `ReadonlyRequestCookies` type. Change parameter to `cookies: Map`. Adapters convert their cookie format to Map before calling core. + +**Commit:** `refactor: remove ReadonlyRequestCookies Next.js type from core` + +#### Task 11: Remove 'next' from packages/payload dependencies + +**Files:** + +- Modify: `packages/payload/package.json` + +Verify zero `next` / `@next/*` imports remain, then remove from deps/peerDeps. + +**Commit:** `chore: remove next dependency from core payload package` + +--- + +### Phase 4: Move Views from packages/next to packages/ui + +**Complexity: High** — this is the hardest phase due to RSC framework differences. + +#### Task 12: Split views into server entry + render component + +Views that call `initReq`, `notFound()`, or `redirect()` must be split: + +**Server entry (stays in packages/next):** Calls `initReq()`, fetches data, handles `notFound()`/`redirect()` at the framework level, passes results as props. + +**Render component (moves to packages/ui):** Receives data as props, renders UI. Uses `adapter.notFound()` / `adapter.redirect()` from a `ServerNavigation` hook/context only when needed for post-init logic. + +**Views requiring split (~12):** + +| View | Uses `initReq` | Uses `notFound()` | Uses `redirect()` | +| ----------------- | -------------- | ----------------- | ----------------- | +| Root | Yes | Yes | Yes | +| NotFound | Yes | - | - | +| Document | - | Yes | Yes | +| Account | - | Yes | - | +| List | - | Yes | - | +| Login | - | - | Yes | +| BrowseByFolder | - | Yes | Yes | +| CollectionFolders | - | Yes | Yes | +| CollectionTrash | - | Yes | - | +| Version | - | Yes | - | +| Versions | - | Yes | - | + +**Views that can move cleanly:** Dashboard, Edit, CreateFirstUser, ForgotPassword, ResetPassword, Logout, Verify, Unauthorized, API. + +**Client components (~7) that need RouterProvider swap:** TabLink, Nav client, LogoutClient, ResetPasswordForm, Verify client, API client, CreatedAtCell — same mechanical refactoring as Task 7. + +**Step 1:** Create `ServerNavigation` context in packages/ui for `notFound()` / `redirect()`: + +```typescript +// packages/ui/src/providers/ServerNavigation/index.tsx +const ServerNavigationContext = createContext<{ + notFound: () => never + redirect: (url: string) => never +}>() +``` + +Populated by the adapter at the root layout level. + +**Step 2:** For each view requiring split, extract the render component to packages/ui. The server entry in packages/next becomes thin: + +```typescript +// packages/next/src/views/Document/index.tsx (stays in adapter) +import { DocumentView } from '@payloadcms/ui/views' +import { initReq } from '../../utilities/initReq.js' +import { notFound, redirect } from 'next/navigation.js' + +export async function DocumentEntry(props) { + const { req, permissions } = await initReq(...) + const doc = await payload.findByID(...) + if (!doc) notFound() + if (!permissions.canRead) redirect('/admin/unauthorized') + return +} +``` + +**Step 3:** Update packages/next export files to re-export from packages/ui for backwards compat. + +**Step 4:** Move client components, apply RouterProvider hook swap. + +**Commit:** `refactor: split views into server entries (adapter) and render components (ui)` + +--- + +### Phase 5: Refactor packages/next to Implement AdminAdapter + +#### Task 13: Create nextAdapter() factory function + +**Files:** + +- Create: `packages/next/src/adapter/index.ts` +- Create: `packages/next/src/adapter/RouterProvider.tsx` +- Modify: `packages/next/src/index.js` + +Implement `nextAdapter()` returning `AdminAdapterResult`. Wire existing `initReq`, `handleServerFunctions`, cookie helpers. Create `NextRouterProvider` wrapping `next/navigation` hooks. Implement `notFound` and `redirect` using `next/navigation`. + +**Commit:** `feat(next): create nextAdapter() implementing AdminAdapter interface` + +#### Task 14: Wire NextRouterProvider into Root Layout + +**Files:** + +- Modify: `packages/next/src/layouts/Root/index.tsx` + +Pass router context and `ServerNavigation` (notFound/redirect) to RootProvider. + +**Commit:** `feat(next): wire NextRouterProvider into admin root layout` + +--- + +### Phase 6: CLI and Template Changes + +#### Task 15: Add --framework flag to create-payload-app + +**Files:** + +- Modify: `packages/create-payload-app/src/types.ts` (add `FrameworkType`, `--framework` arg) +- Modify: `packages/create-payload-app/src/main.ts` (add flag + alias, call framework prompt) +- Create: `packages/create-payload-app/src/lib/select-framework.ts` (prompt logic) + +Add `--framework next|tanstack-start` flag (alias `-f`). Add interactive prompt similar to database selection. Default: `next`. + +**Commit:** `feat(create-payload-app): add --framework flag and framework selection prompt` + +#### Task 16: Update templates for framework support + +**Files:** + +- Create: `templates/blank-tanstack-start/` (TanStack Start blank template) +- Modify: `packages/create-payload-app/src/lib/templates.ts` (framework filtering) +- Modify: `packages/create-payload-app/src/lib/ast/payload-config.ts` (adapter imports) +- Modify: `packages/create-payload-app/src/lib/create-project.ts` (pass framework) + +Separate template directories per framework (different project structure). Update AST to insert correct adapter import and config. + +**Commit:** `feat(create-payload-app): add framework-specific templates and AST config` + +--- + +### Phase 7: TanStack Start Proof-of-Concept + +#### Task 17: Scaffold packages/tanstack-start + +**Files:** + +- Create: `packages/tanstack-start/package.json` +- Create: `packages/tanstack-start/src/index.ts` +- Create: `packages/tanstack-start/src/adapter/index.ts` +- Create: `packages/tanstack-start/src/adapter/RouterProvider.tsx` +- Create: `packages/tanstack-start/src/adapter/initReq.ts` +- Create: `packages/tanstack-start/src/vite/index.ts` (withPayload Vite plugin) + +Implement full `AdminAdapterResult` using: + +- `vinxi/http` for request context and cookies +- `@tanstack/start` `createServerFn()` for server functions +- `@tanstack/react-router` hooks for RouterProvider +- `@tanstack/react-router` `notFound()` / `redirect()` for server navigation + +**Commit:** `feat: scaffold @payloadcms/tanstack-start adapter package` + +--- + +### Phase 8: Testing + +#### Task 18: Verify packages/next works identically + +Run full test suite — all existing tests must pass unchanged: + +```bash +pnpm run test:int +pnpm run test:e2e +pnpm run dev # manual smoke test +``` + +#### Task 19: Add adapter-specific integration tests + +**Files:** + +- Create: `test/admin-adapter/config.ts` +- Create: `test/admin-adapter/int.spec.ts` + +Test: explicit adapter config works, auto-detection works, missing adapter errors clearly, `payload.adminAdapter` is set. + +**Commit:** `test: add AdminAdapter integration tests` + +#### Task 20: Refactor e2e test architecture for multi-framework support + +The current e2e test suite (Playwright) is tightly coupled to Next.js — the test harness spins up a Next.js dev server and tests assume Next.js routing behavior. This needs to become framework-agnostic. + +**Current architecture:** + +- Test harness starts a Next.js dev server per test suite +- Playwright navigates `localhost:3000/admin` +- Tests assume Next.js route transitions, loading states, error pages + +**Target architecture:** + +**Step 1: Abstract the dev server harness** + +Create a `FrameworkTestHarness` interface: + +```ts +interface FrameworkTestHarness { + start(config: PayloadTestConfig): Promise<{ url: string }> + stop(): Promise +} +``` + +Each adapter provides its own harness: + +- `@payloadcms/next` → starts Next.js dev server (existing behavior) +- `@payloadcms/tanstack-start` → starts Vinxi dev server + +The harness is selected via `PAYLOAD_FRAMEWORK` env var (defaults to `next`). + +**Step 2: Make tests framework-agnostic** + +- Remove any assertions that depend on Next.js-specific behavior (route transition animations, specific error page markup, etc.) +- Tests should assert on Payload admin UI behavior, not framework behavior +- Use `data-testid` attributes and accessibility snapshots rather than framework-specific selectors + +**Step 3: Run e2e matrix in CI** + +Update `.github/workflows/main.yml` to run e2e tests against each framework: + +```yaml +strategy: + matrix: + framework: [next, tanstack-start] +env: + PAYLOAD_FRAMEWORK: ${{ matrix.framework }} +``` + +**Step 4: Shared vs adapter-specific e2e tests** + +- **Shared tests** (~90%): Admin panel CRUD, navigation, auth, forms — these should work identically on any framework +- **Adapter-specific tests** (~10%): Framework-specific features like Next.js OG images, metadata, build config + +``` +test/ +├── e2e/ +│ ├── shared/ # framework-agnostic admin tests +│ ├── next/ # Next.js-specific e2e tests +│ └── tanstack-start/ # TanStack Start-specific e2e tests +``` + +**Commit:** `test: refactor e2e test architecture for multi-framework support` + +--- + +## Work Items Summary + +| Work Item | Complexity | Phase | +| --------------------------------------------------------------------- | ---------------- | ----- | +| Define `AdminAdapter` interface (with `notFound`/`redirect`) | Medium | 1 | +| Create `createAdminAdapter` helper + exports | Low | 1 | +| Add `admin.adapter` to Config types | Low | 1 | +| Wire adapter into Payload init lifecycle | Low | 1 | +| Create `RouterProvider` context + hooks in `packages/ui` | Low | 2 | +| Add `RouterProvider` to `RootProvider` tree | Low | 2 | +| Refactor ~45 UI files to use `RouterProvider` (38 existing + 7 moved) | Low (mechanical) | 2 | +| Replace `@next/env` with `dotenv` | Low | 3 | +| Replace `Metadata` type with `PayloadMetadata` | Low | 3 | +| Remove `ReadonlyRequestCookies` from core | Trivial | 3 | +| Remove `next` from core dependencies | Trivial | 3 | +| Split ~12 views into server entry + render component | **High** | 4 | +| Move clean views + client components to packages/ui | Medium | 4 | +| Create `ServerNavigation` context for `notFound`/`redirect` | Medium | 4 | +| Refactor `packages/next` to implement `AdminAdapter` | **High** | 5 | +| Wire `NextRouterProvider` into root layout | Low | 5 | +| CLI `--framework` flag + framework selection prompt | Medium | 6 | +| Framework-specific templates | Medium-High | 6 | +| Scaffold `@payloadcms/tanstack-start` | **High** | 7 | +| Testing — integration + adapter-specific | Medium | 8 | +| Testing — refactor e2e architecture for multi-framework | **High** | 8 | +| Testing — CI matrix for framework e2e | Medium | 8 | + +## Dependency Graph + +``` +Phase 1 (Tasks 1-4): Foundation + ↓ +Phase 2 (Tasks 5-7) ──parallel── Phase 3 (Tasks 8-11) + ↓ ↓ +Phase 4 (Task 12): Split & move views ← depends on both + ↓ +Phase 5 (Tasks 13-14): Refactor packages/next + ↓ +Phase 6 (Tasks 15-16): CLI + Templates ← can start after Phase 1 + ↓ +Phase 7 (Task 17): TanStack Start PoC ← depends on Phase 5 + ↓ +Phase 8 (Tasks 18-19): Testing ← depends on all +``` + +**Parallelizable:** Phase 2 + Phase 3. Phase 6 can start early (after Phase 1). diff --git a/docs/plans/2026-04-01-tanstack-start-adapter.md b/docs/plans/2026-04-01-tanstack-start-adapter.md new file mode 100644 index 00000000000..434bb1a86c5 --- /dev/null +++ b/docs/plans/2026-04-01-tanstack-start-adapter.md @@ -0,0 +1,1516 @@ +# TanStack Start Adapter — Full Implementation Plan + +> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. + +**Goal:** Complete the TanStack Start admin adapter with a proper implementation by moving all framework-agnostic code from `packages/next` to `packages/ui`, then building a real adapter using `vinxi/http` and `@tanstack/react-router`. + +**Architecture:** Three-stage process: (1) extract all framework-agnostic utilities and components from `packages/next` to `packages/ui`, (2) refactor `renderDocument`/`renderListView`/etc. to accept `notFound`/`redirect` as callbacks making them moveable, (3) implement `packages/tanstack-start` using `vinxi/http` cookies, `getWebRequest()` for initReq, and real `@tanstack/react-router` hooks. + +**Tech Stack:** TypeScript, React 19 RSC, Payload CMS monorepo (pnpm + Turbo), vinxi/http, @tanstack/react-router, @tanstack/start + +--- + +## Current State + +The original plan (`2026-03-31-admin-adapter-combined.md`) is fully implemented. `packages/tanstack-start` exists with stub methods that throw errors. This plan completes it. + +**What `packages/next` still exclusively owns (needs to move):** + +- `elements/Nav/` — full Nav server+client component +- `elements/DocumentHeader/` — DocumentHeader with Tabs +- `templates/Default/` and `templates/Minimal/` +- `utilities/selectiveCache.ts`, `getRequestLocale.ts`, `getPreferences.ts`, `handleAuthRedirect.ts`, `slugify.ts`, `isCustomAdminView.ts`, `isPublicAdminRoute.ts`, `getRouteWithoutAdmin.ts`, `timestamp.ts` +- `views/Document/` utilities: `getDocumentData`, `getDocumentPermissions`, `getIsLocked`, `getVersions`, `getDocumentView`, `getCustomDocumentViewByKey`, `getCustomViewByRoute`, `renderDocumentSlots`, `handleServerFunction` +- `views/List/` utilities: `enrichDocsWithVersionStatus`, `handleGroupBy`, `renderListViewSlots`, `resolveAllFilterOptions`, `transformColumnsToSelect`, `createSerializableValue`, `extractRelationshipDisplayValue`, `extractValueOrRelationshipID`, `handleServerFunction` +- `views/Document/index.tsx` and `views/List/index.tsx` — main render functions using `notFound`/`redirect` +- `views/Account/` client files, `views/Version/`, `views/Versions/` utilities + +**Blocking the TanStack adapter:** + +- `renderDocument` and `renderListView` call `notFound()`/`redirect()` from `next/navigation` — to move them to packages/ui, we must pass these as callbacks +- `handleServerFunctions` registry lives in packages/next and references view handlers that haven't moved yet + +--- + +## Phase 1: Move Framework-Agnostic Utilities + +### Task 1: Move packages/next utilities to packages/ui + +**Files:** + +- Copy: `packages/next/src/utilities/selectiveCache.ts` → `packages/ui/src/utilities/selectiveCache.ts` +- Copy: `packages/next/src/utilities/getRequestLocale.ts` → `packages/ui/src/utilities/getRequestLocale.ts` +- Copy: `packages/next/src/utilities/handleAuthRedirect.ts` → `packages/ui/src/utilities/handleAuthRedirect.ts` +- Copy: `packages/next/src/utilities/isCustomAdminView.ts` → `packages/ui/src/utilities/isCustomAdminView.ts` +- Copy: `packages/next/src/utilities/isPublicAdminRoute.ts` → `packages/ui/src/utilities/isPublicAdminRoute.ts` +- Copy: `packages/next/src/utilities/getRouteWithoutAdmin.ts` → `packages/ui/src/utilities/getRouteWithoutAdmin.ts` +- Copy: `packages/next/src/utilities/timestamp.ts` → `packages/ui/src/utilities/timestamp.ts` +- Copy: `packages/next/src/utilities/slugify.ts` → `packages/ui/src/utilities/slugify.ts` (the server function handler) + +**Steps:** + +1. Copy each file to packages/ui/src/utilities/ +2. Fix any `@payloadcms/ui` self-imports → relative paths +3. Update packages/next to re-import from packages/ui where needed +4. Run: `pnpm run build:ui && pnpm run build:next` — expect no TypeScript errors +5. Commit: `refactor(ui): move shared utilities from packages/next to packages/ui` + +**Note:** `getPreferences.ts` is already in `packages/ui/src/utilities/getPreferences.ts` (moved in previous work). `getRequestLocale.ts` imports from `@payloadcms/ui/rsc` and `@payloadcms/ui/shared` — replace those with relative imports. + +--- + +### Task 2: Move Nav and DocumentHeader elements + +**Files:** + +- Copy: `packages/next/src/elements/Nav/index.tsx` → `packages/ui/src/elements/Nav/index.tsx` +- Copy: `packages/next/src/elements/Nav/index.client.tsx` → `packages/ui/src/elements/Nav/index.client.tsx` +- Copy: `packages/next/src/elements/Nav/NavHamburger/index.tsx` → `packages/ui/src/elements/Nav/NavHamburger/index.tsx` +- Copy: `packages/next/src/elements/Nav/NavWrapper/index.tsx` → `packages/ui/src/elements/Nav/NavWrapper/index.tsx` +- Copy: `packages/next/src/elements/Nav/SettingsMenuButton/index.tsx` → `packages/ui/src/elements/Nav/SettingsMenuButton/index.tsx` +- Copy: `packages/next/src/elements/Nav/getNavPrefs.ts` → `packages/ui/src/elements/Nav/getNavPrefs.ts` +- Copy: `packages/next/src/elements/DocumentHeader/` (entire dir) → `packages/ui/src/elements/DocumentHeader/` + +**Steps:** + +1. Check that `packages/ui/src/elements/Nav/context.tsx` already exists (the NavProvider/useNav hook). The Nav server component from packages/next is different — it renders the full nav sidebar. +2. Copy files, fix `@payloadcms/ui` self-imports → relative paths +3. Update packages/next Nav exports to re-export from packages/ui +4. Run: `pnpm run build:ui && pnpm run build:next` +5. Commit: `refactor(ui): move Nav and DocumentHeader elements from packages/next` + +--- + +### Task 3: Move templates to packages/ui + +**Files:** + +- Create: `packages/ui/src/templates/Default/index.tsx` (from `packages/next/src/templates/Default/index.tsx`) +- Create: `packages/ui/src/templates/Default/NavHamburger/index.tsx` +- Create: `packages/ui/src/templates/Default/Wrapper/index.tsx` +- Create: `packages/ui/src/templates/Minimal/index.tsx` + +**Steps:** + +1. Copy each file, convert `@payloadcms/ui` imports to relative paths +2. Add `"./templates/*"` export pattern to `packages/ui/package.json` exports +3. Update `packages/next/src/templates/` to re-export from `@payloadcms/ui/templates/*` +4. Run: `pnpm run build:ui && pnpm run build:next` +5. Commit: `refactor(ui): move Default and Minimal templates from packages/next` + +--- + +## Phase 2: Move View Utilities + +### Task 4: Move Document view utilities + +**Files to move (all have zero next/\* imports):** + +- `packages/next/src/views/Document/getDocumentData.ts` → `packages/ui/src/views/Document/getDocumentData.ts` (already exists — verify) +- `packages/next/src/views/Document/getDocumentPermissions.tsx` → `packages/ui/src/views/Document/getDocumentPermissions.tsx` +- `packages/next/src/views/Document/getIsLocked.ts` → `packages/ui/src/views/Document/getIsLocked.ts` +- `packages/next/src/views/Document/getVersions.ts` → `packages/ui/src/views/Document/getVersions.ts` +- `packages/next/src/views/Document/getDocumentView.tsx` → `packages/ui/src/views/Document/getDocumentView.tsx` +- `packages/next/src/views/Document/getCustomDocumentViewByKey.tsx` → `packages/ui/src/views/Document/getCustomDocumentViewByKey.tsx` +- `packages/next/src/views/Document/getCustomViewByRoute.tsx` → `packages/ui/src/views/Document/getCustomViewByRoute.tsx` +- `packages/next/src/views/Document/renderDocumentSlots.tsx` → `packages/ui/src/views/Document/renderDocumentSlots.tsx` + +**Steps:** + +1. `getDocumentData.ts` and `getDocPreferences.ts` already exist in packages/ui — verify they're correct copies +2. Copy remaining files, fix self-imports +3. Update packages/next to import these from `@payloadcms/ui/views/Document/*` (add export paths if needed) or relative package imports +4. Run: `pnpm run build:ui && pnpm run build:next` +5. Commit: `refactor(ui): move Document view utilities from packages/next` + +--- + +### Task 5: Move List view utilities + +**Files to move (all have zero next/\* imports):** + +- `packages/next/src/views/List/createSerializableValue.ts` → `packages/ui/src/views/List/createSerializableValue.ts` +- `packages/next/src/views/List/enrichDocsWithVersionStatus.ts` → `packages/ui/src/views/List/enrichDocsWithVersionStatus.ts` +- `packages/next/src/views/List/extractRelationshipDisplayValue.ts` → `packages/ui/src/views/List/extractRelationshipDisplayValue.ts` +- `packages/next/src/views/List/extractValueOrRelationshipID.ts` → `packages/ui/src/views/List/extractValueOrRelationshipID.ts` +- `packages/next/src/views/List/handleGroupBy.ts` → `packages/ui/src/views/List/handleGroupBy.ts` +- `packages/next/src/views/List/renderListViewSlots.tsx` → `packages/ui/src/views/List/renderListViewSlots.tsx` +- `packages/next/src/views/List/resolveAllFilterOptions.ts` → `packages/ui/src/views/List/resolveAllFilterOptions.ts` +- `packages/next/src/views/List/transformColumnsToSelect.ts` → `packages/ui/src/views/List/transformColumnsToSelect.ts` + +**Steps:** + +1. Copy files, fix self-imports +2. Run: `pnpm run build:ui && pnpm run build:next` +3. Commit: `refactor(ui): move List view utilities from packages/next` + +--- + +### Task 6: Move Version/Versions and Account utilities + +**Files:** + +- `packages/next/src/views/Version/fetchVersions.ts` → `packages/ui/src/views/Version/fetchVersions.ts` +- `packages/next/src/views/Version/RenderFieldsToDiff/` (entire dir) → `packages/ui/src/views/Version/RenderFieldsToDiff/` +- `packages/next/src/views/Version/SelectComparison/` → `packages/ui/src/views/Version/SelectComparison/` +- `packages/next/src/views/Version/VersionPillLabel/` → `packages/ui/src/views/Version/VersionPillLabel/` +- `packages/next/src/views/Version/Default/` (minus index.tsx) → `packages/ui/src/views/Version/Default/` +- `packages/next/src/views/Versions/buildColumns.tsx` → `packages/ui/src/views/Versions/buildColumns.tsx` +- `packages/next/src/views/Versions/cells/` → `packages/ui/src/views/Versions/cells/` +- `packages/next/src/views/Account/index.client.tsx` → `packages/ui/src/views/Account/index.client.tsx` +- `packages/next/src/views/Account/ResetPreferences/` → `packages/ui/src/views/Account/ResetPreferences/` +- `packages/next/src/views/Account/Settings/` → `packages/ui/src/views/Account/Settings/` +- `packages/next/src/views/Account/ToggleTheme/` → `packages/ui/src/views/Account/ToggleTheme/` + +**Steps:** + +1. Copy files, fix self-imports +2. Run: `pnpm run build:ui && pnpm run build:next` +3. Commit: `refactor(ui): move Version/Versions/Account utilities from packages/next` + +--- + +## Phase 3: Refactor Main View Functions to Accept Navigation Callbacks + +The `renderDocument`, `renderListView`, `renderVersion`, `renderVersions`, and `renderAccount` functions in `packages/next` call `notFound()`/`redirect()` from `next/navigation`. To move them to `packages/ui`, we add these as parameters. + +### Task 7: Add ServerNavigation params to renderDocument and move to packages/ui + +**Files:** + +- Modify: `packages/next/src/views/Document/index.tsx` +- Create: `packages/ui/src/views/Document/RenderDocument.tsx` (the moved render function) +- Modify: `packages/next/src/views/Document/handleServerFunction.tsx` + +**The pattern:** Extract `renderDocument` from `packages/next` to `packages/ui` with two new parameters: + +```typescript +// packages/ui/src/views/Document/RenderDocument.tsx +export const renderDocument = async ({ + // ...existing params... + notFound, // ADD: () => never + redirect, // ADD: (url: string) => never +}: { + // ... existing type ... + notFound: () => never + redirect: (url: string) => never +}): Promise<{ data: Data; Document: React.ReactNode }> => { + // same implementation, but calls params.notFound() and params.redirect() + // instead of importing from next/navigation +} +``` + +**Steps:** + +1. Create `packages/ui/src/views/Document/RenderDocument.tsx`: + + - Copy the entire `renderDocument` function from `packages/next/src/views/Document/index.tsx` + - Add `notFound: () => never` and `redirect: (url: string) => never` to the function params type + - Replace the `import { notFound, redirect } from 'next/navigation.js'` with no import + - Replace all `notFound()` calls with `notFound()` (params) and `redirect(url)` with `redirect(url)` (params) + - Fix any `@payloadcms/ui` self-imports → relative paths + - Fix imports of `DocumentHeader` → from `../../elements/DocumentHeader/index.js` + - Fix imports of Document utilities → relative `./getDocumentData.js` etc. + +2. Update `packages/next/src/views/Document/index.tsx` to: + + ```typescript + import { notFound, redirect } from 'next/navigation.js' + import { renderDocument as renderDocumentFromUI } from '@payloadcms/ui/views/Document/RenderDocument' + + // Re-export renderDocument passing in Next.js's notFound/redirect + export const renderDocument = (args) => + renderDocumentFromUI({ ...args, notFound, redirect }) + ``` + +3. Update `packages/next/src/views/Document/handleServerFunction.tsx` to import from the updated location + +4. Run: `pnpm run build:ui && pnpm run build:next` +5. Commit: `refactor(ui): move renderDocument to packages/ui with navigation callbacks` + +--- + +### Task 8: Move renderListView to packages/ui with navigation callbacks + +**Files:** + +- Create: `packages/ui/src/views/List/RenderListView.tsx` (the moved render function) +- Modify: `packages/next/src/views/List/index.tsx` +- Modify: `packages/next/src/views/List/handleServerFunction.tsx` + +**Steps:** + +1. Create `packages/ui/src/views/List/RenderListView.tsx`: + + - Copy `renderListView` function from `packages/next/src/views/List/index.tsx` + - Add `notFound: () => never` to params + - Replace `notFound()` call with the param + - Fix imports → relative paths within packages/ui + +2. Update `packages/next/src/views/List/index.tsx`: + + ```typescript + import { notFound } from 'next/navigation.js' + import { renderListView as renderListViewFromUI } from '@payloadcms/ui/views/List/RenderListView' + + export const renderListView = (args) => + renderListViewFromUI({ ...args, notFound }) + ``` + +3. Run: `pnpm run build:ui && pnpm run build:next` +4. Commit: `refactor(ui): move renderListView to packages/ui with notFound callback` + +--- + +### Task 9: Move renderVersion, renderVersions, renderAccount to packages/ui + +**Same pattern as Tasks 7-8, applied to:** + +- `packages/next/src/views/Version/index.tsx` → `packages/ui/src/views/Version/RenderVersion.tsx` +- `packages/next/src/views/Versions/index.tsx` → `packages/ui/src/views/Versions/RenderVersions.tsx` +- `packages/next/src/views/Account/index.tsx` → `packages/ui/src/views/Account/RenderAccount.tsx` + +For Version and Versions: add `notFound: () => never` to params. +For Account: add `notFound: () => never` to params. + +**Steps:** + +1. For each view: + - Create `RenderX.tsx` in packages/ui with navigation callback params + - Update packages/next entry to import from packages/ui and pass Next.js callbacks +2. Run: `pnpm run build:ui && pnpm run build:next` +3. Commit: `refactor(ui): move Version/Versions/Account render functions to packages/ui` + +--- + +## Phase 4: Move handleServerFunction Handlers to packages/ui + +### Task 10: Move renderDocumentHandler and renderListHandler + +These server function handlers (`handleServerFunction.tsx` in each view) call `renderDocument`/`renderListView`. Now that those functions are in packages/ui and accept navigation callbacks, the handlers can also move. + +**Files:** + +- Move: `packages/next/src/views/Document/handleServerFunction.tsx` → `packages/ui/src/views/Document/handleServerFunction.tsx` +- Move: `packages/next/src/views/List/handleServerFunction.tsx` → `packages/ui/src/views/List/handleServerFunction.tsx` + +**Key:** These handlers don't call `notFound`/`redirect` themselves — they call `renderDocument`/`renderListView` which accept callbacks. But the callbacks need to come from somewhere when invoked in a server function context. + +**Solution:** Server function handlers accept `notFound` and `redirect` from the `ServerFunctionArgs` context (which the adapter injects via `initReq`). Add these to `DefaultServerFunctionArgs`: + +```typescript +// packages/ui/src/views/Document/handleServerFunction.tsx +export const renderDocumentHandler: RenderDocumentServerFunction = async (args) => { + const { notFound, redirect } = args // injected by adapter's handleServerFunctions + const { data, Document } = await renderDocument({ + ...renderArgs, + notFound: notFound ?? (() => { throw new Error('notFound not provided') }), + redirect: redirect ?? (() => { throw new Error('redirect not provided') }), + }) + ... +} +``` + +**Steps:** + +1. Check the `RenderDocumentServerFunction` type in `packages/ui` — does it include `notFound`/`redirect`? If not, extend it in `packages/payload/src/admin/types.ts` +2. Update `DefaultServerFunctionArgs` in packages/payload to include optional `notFound`/`redirect` +3. Create `packages/ui/src/views/Document/handleServerFunction.tsx` with updated handler +4. Create `packages/ui/src/views/List/handleServerFunction.tsx` with updated handler +5. Update packages/next handlers to be thin re-exports +6. Run: `pnpm run build:ui && pnpm run build:next` +7. Commit: `refactor(ui): move renderDocumentHandler and renderListHandler to packages/ui` + +--- + +### Task 11: Create shared handleServerFunctions base in packages/ui + +**File:** Create `packages/ui/src/utilities/handleServerFunctions.ts` + +```typescript +// packages/ui/src/utilities/handleServerFunctions.ts +import type { + DefaultServerFunctionArgs, + ServerFunction, + ServerFunctionHandler, +} from 'payload' + +import { + _internal_renderFieldHandler, + copyDataFromLocaleHandler, +} from '../exports/rsc/index.js' +import { buildFormStateHandler } from './buildFormState.js' +import { buildTableStateHandler } from './buildTableState.js' +import { getFolderResultsComponentAndDataHandler } from './getFolderResultsComponentAndData.js' +import { schedulePublishHandler } from './schedulePublishHandler.js' +import { getDefaultLayoutHandler } from '../views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.js' +import { renderWidgetHandler } from '../views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js' +import { renderDocumentHandler } from '../views/Document/handleServerFunction.js' +import { renderDocumentSlotsHandler } from '../views/Document/renderDocumentSlots.js' +import { renderListHandler } from '../views/List/handleServerFunction.js' +import { slugifyHandler } from './slugify.js' + +export const baseServerFunctions: Record> = { + 'copy-data-from-locale': copyDataFromLocaleHandler, + 'form-state': buildFormStateHandler, + 'get-default-layout': getDefaultLayoutHandler, + 'get-folder-results-component-and-data': + getFolderResultsComponentAndDataHandler, + 'render-document': renderDocumentHandler, + 'render-document-slots': renderDocumentSlotsHandler, + 'render-field': _internal_renderFieldHandler, + 'render-list': renderListHandler, + 'render-widget': renderWidgetHandler, + 'schedule-publish': schedulePublishHandler, + slugify: slugifyHandler, + 'table-state': buildTableStateHandler, +} + +/** + * Framework-agnostic server function dispatcher. + * Adapters call this after running initReq to get the request context. + */ +export async function dispatchServerFunction(args: { + augmentedArgs: DefaultServerFunctionArgs + extraServerFunctions?: Record + name: string +}): Promise { + const { augmentedArgs, extraServerFunctions, name } = args + const fn = extraServerFunctions?.[name] || baseServerFunctions[name] + if (!fn) { + throw new Error(`Unknown Server Function: ${name}`) + } + return fn(augmentedArgs) +} +``` + +**Steps:** + +1. Create the file above +2. Update `packages/next/src/utilities/handleServerFunctions.ts` to: + + ```typescript + import { dispatchServerFunction } from '@payloadcms/ui/utilities/handleServerFunctions' + + export const handleServerFunctions: ServerFunctionHandler = async (args) => { + const { + name: fnKey, + args: fnArgs, + config, + importMap, + serverFunctions, + } = args + const { cookies, locale, permissions, req } = await initReq({ + configPromise: config, + importMap, + key: 'RootLayout', + }) + const augmentedArgs = { + ...fnArgs, + cookies, + importMap, + locale, + permissions, + req, + notFound: () => notFound(), // inject Next.js navigation + redirect: (url) => redirect(url), + } + return dispatchServerFunction({ + augmentedArgs, + extraServerFunctions: serverFunctions, + name: fnKey, + }) + } + ``` + +3. Run: `pnpm run build:ui && pnpm run build:next` +4. Commit: `refactor(ui): create shared server function dispatcher` + +--- + +## Phase 5: Implement TanStack Start Adapter + +### Task 12: Implement initReq for TanStack Start + +**File:** Create `packages/tanstack-start/src/utilities/initReq.ts` + +```typescript +import type { I18n, I18nClient } from '@payloadcms/translations' +import type { ImportMap, InitReqResult, SanitizedConfig } from 'payload' + +import { initI18n } from '@payloadcms/translations' +// vinxi/http provides server-side request context in TanStack Start +import { getCookie as vinxiGetCookie, getWebRequest } from 'vinxi/http' +import { + createLocalReq, + executeAuthStrategies, + getAccessResults, + getPayload, + getRequestLanguage, + parseCookies, +} from 'payload' + +import { getRequestLocale } from '@payloadcms/ui/utilities/getRequestLocale' +import { selectiveCache } from '@payloadcms/ui/utilities/selectiveCache' + +const partialReqCache = selectiveCache('partialReq') +const reqCache = selectiveCache('req') + +export const initReq = async function ({ + config: configArg, + importMap, + key = 'adapter', +}: { + config: Promise | SanitizedConfig + importMap: ImportMap + key?: string +}): Promise { + // getWebRequest() returns the current server request from Vinxi's context store + const request = getWebRequest() + const headers = new Headers(request.headers) + const cookies = parseCookies(headers) + + const partialResult = await partialReqCache.get(async () => { + const config = await configArg + const payload = await getPayload({ config, cron: true, importMap }) + const languageCode = getRequestLanguage({ config, cookies, headers }) + + const i18n: I18nClient = await initI18n({ + config: config.i18n, + context: 'client', + language: languageCode, + }) + + const { responseHeaders, user } = await executeAuthStrategies({ + headers, + payload, + }) + + return { i18n, languageCode, payload, responseHeaders, user } + }, 'global') + + return reqCache + .get(async () => { + const { i18n, languageCode, payload, responseHeaders, user } = + partialResult + + const req = await createLocalReq( + { + req: { + headers, + host: headers.get('host'), + i18n: i18n as I18n, + responseHeaders, + url: request.url, + user, + }, + }, + payload, + ) + + const locale = await getRequestLocale({ req }) + req.locale = locale?.code + + const permissions = await getAccessResults({ req }) + + return { cookies, headers, languageCode, locale, permissions, req } + }, key) + .then((result) => ({ + ...result, + req: { + ...result.req, + ...(result.req?.context ? { context: { ...result.req.context } } : {}), + }, + })) +} +``` + +**Steps:** + +1. Create the file +2. Add `vinxi` to `packages/tanstack-start/package.json` peerDependencies (already there) +3. Verify `getWebRequest` import path — check vinxi docs or `node_modules/vinxi/dist` for correct import +4. Run: `cd packages/tanstack-start && pnpm tsc --noEmit` — expect no errors on the new file (warnings about peer deps OK) +5. Commit: `feat(tanstack-start): implement initReq using vinxi/http getWebRequest` + +--- + +### Task 13: Implement handleServerFunctions for TanStack Start + +**File:** Create `packages/tanstack-start/src/utilities/handleServerFunctions.ts` + +```typescript +import type { ServerFunctionHandler } from 'payload' + +import { notFound, redirect } from '@tanstack/react-router' +import { dispatchServerFunction } from '@payloadcms/ui/utilities/handleServerFunctions' + +import { initReq } from './initReq.js' + +export const handleServerFunctions: ServerFunctionHandler = async (args) => { + const { name: fnKey, args: fnArgs, config, importMap, serverFunctions } = args + + const { cookies, locale, permissions, req } = await initReq({ + config, + importMap, + key: 'RootLayout', + }) + + const augmentedArgs = { + ...fnArgs, + cookies, + importMap, + locale, + notFound: () => { + throw notFound() + }, + permissions, + redirect: (url: string) => { + throw redirect({ to: url }) + }, + req, + } + + return dispatchServerFunction({ + augmentedArgs, + extraServerFunctions: serverFunctions, + name: fnKey, + }) +} +``` + +**Steps:** + +1. Create the file +2. Verify `@tanstack/react-router` exports `notFound` and `redirect` — check their API: `notFound()` returns a special error object to throw, `redirect({ to })` does the same +3. Commit: `feat(tanstack-start): implement handleServerFunctions using shared dispatcher` + +--- + +### Task 14: Implement real RouterProvider with @tanstack/react-router hooks + +**File:** Replace `packages/tanstack-start/src/adapter/RouterProvider.tsx` + +```typescript +'use client' +import type { LinkProps as RouterLinkProps, RouterContextType } from '@payloadcms/ui' + +import { RouterProvider as BaseRouterProvider } from '@payloadcms/ui' +import { Link as TanStackLink, useLocation, useParams, useRouter } from '@tanstack/react-router' +import React from 'react' + +const AdapterLink: React.FC = ({ href, children, ...rest }) => ( + + {children} + +) + +export function TanStackRouterProvider({ children }: { children: React.ReactNode }) { + const router = useRouter() + const location = useLocation() + const params = useParams({ strict: false }) + + const searchParams = React.useMemo( + () => new URLSearchParams(location.search), + [location.search], + ) + + const routerCtx: RouterContextType = React.useMemo( + () => ({ + Link: AdapterLink, + params, + pathname: location.pathname, + router: { + back: () => router.history.back(), + forward: () => router.history.forward(), + prefetch: (url: string) => router.preloadRoute({ to: url }), + push: (url: string) => { void router.navigate({ to: url }) }, + refresh: () => { void router.invalidate() }, + replace: (url: string) => { void router.navigate({ to: url, replace: true }) }, + }, + searchParams, + }), + [router, location, params, searchParams], + ) + + return {children} +} +``` + +**Steps:** + +1. Check what `@tanstack/react-router` exports: `useRouter`, `useLocation`, `useParams`, `Link` + - Run: `grep -r "export.*useRouter\|export.*useLocation" node_modules/@tanstack/react-router/dist/ 2>/dev/null | head -5` to verify +2. Replace the file. Note `AdapterLink` is module-level (not nested in component) — this satisfies react-compiler. +3. Run: `cd packages/tanstack-start && pnpm tsc --noEmit` +4. Commit: `feat(tanstack-start): implement TanStackRouterProvider with real hooks` + +--- + +### Task 15: Implement cookie helpers and wire adapter + +**File:** Update `packages/tanstack-start/src/adapter/index.ts` + +```typescript +import type { + AdminAdapterResult, + BaseAdminAdapter, + CookieOptions, +} from 'payload' + +import { notFound, redirect } from '@tanstack/react-router' +import { deleteCookie, getCookie, setCookie } from 'vinxi/http' +import { createAdminAdapter } from 'payload' + +import { handleServerFunctions } from '../utilities/handleServerFunctions.js' +import { initReq } from '../utilities/initReq.js' +import { TanStackRouterProvider } from './RouterProvider.js' + +export function tanstackStartAdapter(): AdminAdapterResult { + return { + name: 'tanstack-start', + init: ({ payload }) => + createAdminAdapter({ + RouterProvider: TanStackRouterProvider, + createRouteHandlers: () => ({}), // Vinxi handles routing via file-system + deleteCookie: (name) => deleteCookie(name), + getCookie: (name) => getCookie(name), + handleServerFunctions, + initReq: ({ config, importMap }) => initReq({ config, importMap }), + name: 'tanstack-start', + notFound: () => { + throw notFound() + }, + payload, + redirect: (url) => { + throw redirect({ to: url }) + }, + setCookie: (name, value, options) => setCookie(name, value, options), + } satisfies BaseAdminAdapter), + } +} +``` + +**Steps:** + +1. Replace the file with the above +2. Verify `vinxi/http` exports `getCookie`, `setCookie`, `deleteCookie` — check: `ls node_modules/vinxi/dist/` and search for cookie exports +3. Run: `cd packages/tanstack-start && pnpm tsc --noEmit` +4. Run: `pnpm run build:ui && pnpm run build:next` from repo root — packages/next should still pass +5. Commit: `feat(tanstack-start): implement full adapter with vinxi/http cookies` + +--- + +### Task 16: Update exports and package.json for tanstack-start + +**Files:** + +- Update: `packages/tanstack-start/src/index.ts` +- Update: `packages/tanstack-start/package.json` (add `@tanstack/react-router` and `vinxi` to dependencies or peerDependencies) + +```typescript +// packages/tanstack-start/src/index.ts +export { tanstackStartAdapter } from './adapter/index.js' +export { TanStackRouterProvider } from './adapter/RouterProvider.js' +// Export initReq for users who need direct access +export { initReq } from './utilities/initReq.js' +export { handleServerFunctions } from './utilities/handleServerFunctions.js' +``` + +```json +// packages/tanstack-start/package.json additions +"peerDependencies": { + "@tanstack/react-router": ">=1.0.0", + "@tanstack/start": ">=1.0.0", + "react": "^19.0.0", + "vinxi": ">=0.4.0" +}, +"peerDependenciesMeta": { + "@tanstack/react-router": { "optional": false }, + "vinxi": { "optional": false } +} +``` + +**Steps:** + +1. Update both files +2. Run: `pnpm install` +3. Run: `pnpm run build:next` — full build check +4. Commit: `feat(tanstack-start): finalize exports and peer dependencies` + +--- + +### Task 17: Add integration tests for TanStack Start adapter shape + +**File:** Create `test/admin-adapter/tanstack-start.spec.ts` + +```typescript +import { describe, expect, it } from 'vitest' + +describe('tanstackStartAdapter', () => { + it('should export tanstackStartAdapter function', async () => { + const { tanstackStartAdapter } = await import('@payloadcms/tanstack-start') + expect(typeof tanstackStartAdapter).toBe('function') + }) + + it('should return AdminAdapterResult with name and init', async () => { + const { tanstackStartAdapter } = await import('@payloadcms/tanstack-start') + const result = tanstackStartAdapter() + expect(result.name).toBe('tanstack-start') + expect(typeof result.init).toBe('function') + }) + + it('should satisfy BaseAdminAdapter interface when init is called', async () => { + const { tanstackStartAdapter } = await import('@payloadcms/tanstack-start') + const { createAdminAdapter } = await import('payload') + + // Can't call init without full payload instance, but verify the shape + const result = tanstackStartAdapter() + expect(result.name).toBe('tanstack-start') + + // The adapter factory is the correct type + expect(typeof result.init).toBe('function') + }) +}) +``` + +**Steps:** + +1. Create the test file +2. Run: `pnpm run test:int admin-adapter` +3. Fix any failures +4. Commit: `test: add TanStack Start adapter shape tests` + +--- + +## Dependency Graph + +``` +Phase 1 (Tasks 1-3): Move utilities/elements/templates + ↓ +Phase 2 (Tasks 4-6): Move view utilities + ↓ +Phase 3 (Tasks 7-9): Move render functions (with nav callbacks) + ↓ +Phase 4 (Tasks 10-11): Move handlers + create shared dispatcher + ↓ +Phase 5 (Tasks 12-16): TanStack Start adapter implementation + ↓ +Task 17: Tests +``` + +## Verification at Each Phase + +After each phase, run: + +```bash +pnpm run build:ui # packages/ui builds clean +pnpm run build:next # packages/next builds clean +pnpm run test:int admin-adapter # adapter tests pass +``` + +Final verification: + +```bash +pnpm run dev # dev server starts, admin panel works +``` + +## Key Files Summary + +**Moved from packages/next → packages/ui:** + +- `utilities/selectiveCache.ts`, `getRequestLocale.ts`, `handleAuthRedirect.ts`, `isCustomAdminView.ts`, `isPublicAdminRoute.ts`, `getRouteWithoutAdmin.ts`, `timestamp.ts`, `slugify.ts` +- `elements/Nav/` (full), `elements/DocumentHeader/` (full) +- `templates/Default/`, `templates/Minimal/` +- `views/Document/` utilities (8 files) +- `views/List/` utilities (8 files) +- `views/Version/`, `views/Versions/`, `views/Account/` utilities +- `views/Document/RenderDocument.tsx` (new, accepts nav callbacks) +- `views/List/RenderListView.tsx` (new, accepts nav callbacks) +- `views/Document/handleServerFunction.tsx`, `views/List/handleServerFunction.tsx` +- `utilities/handleServerFunctions.ts` → `utilities/handleServerFunctions.ts` (shared dispatcher) + +**New in packages/tanstack-start:** + +- `src/utilities/initReq.ts` — uses `getWebRequest()` from `vinxi/http` +- `src/utilities/handleServerFunctions.ts` — uses shared dispatcher + TanStack navigation +- `src/adapter/RouterProvider.tsx` — real `@tanstack/react-router` hooks +- `src/adapter/index.ts` — complete adapter using `vinxi/http` cookies + +--- + +## Phase 6: TanStack Start App Shell + `pnpm dev:tanstack` + +This phase creates the TanStack Start equivalent of the auto-generated `app/(payload)/` Next.js files, plus the dev entry point. After this phase `pnpm dev:tanstack` starts a working admin panel. + +### Background: How `pnpm dev` works today + +``` +pnpm dev + → test/dev.ts + → loadEnv() + → runInit(testSuiteArg) # writes importMap.js, generates DB adapter + → nextImport({ dir: rootDir }) # starts Next.js from repo root + → serves app/(payload)/ # auto-generated layout.tsx + page.tsx +``` + +The auto-generated files wire together: + +- `app/(payload)/layout.tsx` → `RootLayout` + `handleServerFunctions` from `@payloadcms/next/layouts` +- `app/(payload)/admin/[[...segments]]/page.tsx` → `RootPage` from `@payloadcms/next/views` +- `app/(payload)/api/[...slug]/route.ts` → REST handlers from `@payloadcms/next/routes` + +For TanStack Start we need the same wiring using TanStack's routing conventions. + +--- + +### Task 18: Install TanStack Start dependencies + +**Files:** + +- Modify: `packages/tanstack-start/package.json` — move peer deps to real deps for the workspace app +- Create: `tanstack-app/package.json` + +**Steps:** + +1. Create `tanstack-app/package.json`: + +```json +{ + "name": "payload-tanstack-app", + "private": true, + "type": "module", + "scripts": { + "dev": "vinxi dev", + "build": "vinxi build", + "start": "vinxi start" + }, + "dependencies": { + "@payloadcms/tanstack-start": "workspace:*", + "@payloadcms/ui": "workspace:*", + "@tanstack/react-router": "^1.0.0", + "@tanstack/start": "^1.0.0", + "payload": "workspace:*", + "react": "19.1.0", + "react-dom": "19.1.0", + "vinxi": "^0.4.0" + }, + "devDependencies": { + "typescript": "5.x", + "vite-tsconfig-paths": "^5.0.0" + } +} +``` + +2. Add `tanstack-app` to `pnpm-workspace.yaml`: + +```yaml +packages: + - 'packages/*' + - 'tanstack-app' # ADD THIS + - ... +``` + +3. Run: `pnpm install` + +4. Verify: `ls node_modules/@tanstack/start` inside `tanstack-app/` + +5. Commit: `chore: add tanstack-app workspace package with TanStack Start deps` + +--- + +### Task 19: Create TanStack Start app config (app.config.ts) + +TanStack Start uses `app.config.ts` (Vinxi config) instead of `next.config.mjs`. + +**File:** Create `tanstack-app/app.config.ts` + +```typescript +import { defineConfig } from '@tanstack/start/config' +import tsConfigPaths from 'vite-tsconfig-paths' + +export default defineConfig({ + tsr: { + appDirectory: './app', + }, + vite: { + plugins: [ + tsConfigPaths({ + projects: ['./tsconfig.json'], + }), + ], + }, +}) +``` + +**File:** Create `tanstack-app/tsconfig.json` + +```json +{ + "extends": "../tsconfig.base.json", + "compilerOptions": { + "strict": false, + "baseUrl": ".", + "paths": { + "@payload-config": ["../test/_community/config.ts"] + } + }, + "include": ["app/**/*", "app.config.ts"] +} +``` + +The `@payload-config` alias mirrors what Next.js uses — the test suite config is injected via path alias. + +**Steps:** + +1. Create both files +2. Run: `cd tanstack-app && pnpm vinxi dev --help` — verify Vinxi is available +3. Commit: `feat(tanstack-app): add app.config.ts and tsconfig` + +--- + +### Task 20: Create TanStack Start app entry points + +TanStack Start requires three entry files. + +**File:** Create `tanstack-app/app/client.tsx` + +```typescript +import { StartClient } from '@tanstack/start' +import { StrictMode } from 'react' +import { hydrateRoot } from 'react-dom/client' +import { createRouter } from './router.js' + +const router = createRouter() + +hydrateRoot( + document, + + + , +) +``` + +**File:** Create `tanstack-app/app/ssr.tsx` + +```typescript +import { + createStartHandler, + defaultStreamHandler, +} from '@tanstack/start/server' +import { createRouter } from './router.js' + +export default createStartHandler({ createRouter })(defaultStreamHandler) +``` + +**File:** Create `tanstack-app/app/router.tsx` + +```typescript +import { createRouter as createTanStackRouter } from '@tanstack/react-router' +import { routeTree } from './routeTree.gen.js' + +export function createRouter() { + return createTanStackRouter({ routeTree }) +} + +declare module '@tanstack/react-router' { + interface Register { + router: ReturnType + } +} +``` + +**Note:** `routeTree.gen.ts` is auto-generated by TanStack Router CLI from the routes directory. You need to run `tanstack-router generate` or configure `tsr.watch` in app.config.ts to auto-generate it. + +**Steps:** + +1. Create all three files +2. Create a placeholder `tanstack-app/app/routeTree.gen.ts` (will be replaced by codegen): + ```typescript + // This file is auto-generated by TanStack Router + import { rootRoute } from './routes/__root.js' + export const routeTree = rootRoute + ``` +3. Commit: `feat(tanstack-app): add TanStack Start app entry points` + +--- + +### Task 21: Create the root layout route + +The root layout is the TanStack Start equivalent of `app/(payload)/layout.tsx`. It wires in `TanStackRouterProvider` and the Payload `RootLayout`. + +**File:** Create `tanstack-app/app/routes/__root.tsx` + +```typescript +import type { ImportMap, ServerFunctionClient } from 'payload' + +import config from '@payload-config' +import { tanstackStartAdapter } from '@payloadcms/tanstack-start' +import { + createRootRoute, + HeadContent, + Outlet, + Scripts, +} from '@tanstack/react-router' +import { createServerFn } from '@tanstack/start' +import React from 'react' + +// Import the shared handler dispatcher from packages/ui (available after Phase 4) +import { dispatchServerFunction } from '@payloadcms/ui/utilities/handleServerFunctions' +import { initReq } from '@payloadcms/tanstack-start/utilities/initReq' + +// Import the generated importMap (written by dev script on startup) +import { importMap } from '../importMap.js' + +// Server function: handles all Payload server function calls +// This is the TanStack Start equivalent of Next.js's 'use server' function +const handleServerFn = createServerFn() + .validator((data: unknown) => data as Parameters[0]) + .handler(async ({ data: args }) => { + const { cookies, locale, permissions, req } = await initReq({ + config, + importMap, + key: 'RootLayout', + }) + return dispatchServerFunction({ + augmentedArgs: { + ...args, + cookies, + importMap, + locale, + permissions, + req, + notFound: () => { throw { _type: 'notFound' } }, + redirect: (url: string) => { throw { _type: 'redirect', url } }, + }, + extraServerFunctions: args.serverFunctions, + name: args.name, + }) + }) + +// Thin wrapper matching Payload's ServerFunctionClient signature +const serverFunction: ServerFunctionClient = (args) => handleServerFn({ data: args }) + +export const Route = createRootRoute({ + component: RootComponent, + head: () => ({ + meta: [{ charSet: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }], + }), +}) + +// RootLayout from @payloadcms/tanstack-start will be created in packages/tanstack-start/src/layouts/ +// It is the equivalent of RootLayout from @payloadcms/next/layouts, using TanStackRouterProvider +function RootComponent() { + return ( + + + + + + {/* TanStack Start's payload root layout — created in Task 22 */} + + + + + + + ) +} +``` + +**Note on `PayloadRootLayout`:** This is `RootLayout` from `packages/tanstack-start/src/layouts/Root/`. It is equivalent to `packages/next/src/layouts/Root/index.tsx` but wraps with `TanStackRouterProvider` instead of `NextRouterProvider`. Created in Task 22. + +**Steps:** + +1. Create the file +2. Create placeholder `tanstack-app/app/importMap.ts` (will be auto-generated): + ```typescript + export const importMap = {} + ``` +3. Commit: `feat(tanstack-app): add root layout route` + +--- + +### Task 22: Create RootLayout for TanStack Start (in packages/tanstack-start) + +This is the TanStack Start equivalent of `packages/next/src/layouts/Root/index.tsx`. + +**File:** Create `packages/tanstack-start/src/layouts/Root/index.tsx` + +```typescript +import type { ImportMap, ServerFunctionClient, SanitizedConfig } from 'payload' + +import { RootProvider } from '@payloadcms/ui' +import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig' +import { applyLocaleFiltering } from 'payload/shared' +import React from 'react' + +import { TanStackRouterProvider } from '../../adapter/RouterProvider.js' +import { initReq } from '../../utilities/initReq.js' + +type Props = { + children: React.ReactNode + config: Promise | SanitizedConfig + importMap: ImportMap + serverFunction: ServerFunctionClient +} + +// Server-side layout: initializes request context and renders Payload RootProvider +export async function RootLayout({ children, config: configPromise, importMap, serverFunction }: Props) { + const { + cookies, + headers, + languageCode, + locale, + permissions, + req, + req: { payload: { config } }, + } = await initReq({ config: configPromise, importMap }) + + const theme = cookies.get(`${config.cookiePrefix || 'payload'}-theme`) || 'light' + + // Get client-safe config + const clientConfig = getClientConfig({ config, i18n: req.i18n, importMap, user: req.user }) + await applyLocaleFiltering({ clientConfig, config, req }) + + // Language options + const languageOptions = Object.entries(config.i18n.supportedLanguages || {}).map( + ([value, langConfig]) => ({ + label: (langConfig as any).translations?.general?.thisLanguage ?? value, + value, + }), + ) + + return ( + + + {children} + + + ) +} +``` + +**Update** `packages/tanstack-start/src/index.ts` to also export `RootLayout`. + +**Steps:** + +1. Create the file +2. Add export to `src/index.ts` +3. Run: `cd packages/tanstack-start && pnpm tsc --noEmit` +4. Commit: `feat(tanstack-start): add RootLayout server component` + +--- + +### Task 23: Create admin route and API routes + +**File:** Create `tanstack-app/app/routes/admin.$.tsx` + +```typescript +import config from '@payload-config' +import { createFileRoute } from '@tanstack/react-router' +import React from 'react' + +// The RootPage equivalent for TanStack Start — created in packages/tanstack-start/src/views/Root/ +import { RootPage } from '@payloadcms/tanstack-start/views' +import { importMap } from '../importMap.js' + +export const Route = createFileRoute('/admin/$')({ + component: AdminPage, +}) + +function AdminPage() { + const params = Route.useParams() + const search = Route.useSearch() + // Convert TanStack params to the shape Payload expects + const segments = params._splat?.split('/').filter(Boolean) ?? [] + + return +} +``` + +**File:** Create `tanstack-app/app/routes/api.$.ts` (API catch-all for REST) + +```typescript +import config from '@payload-config' +import { createAPIFileRoute } from '@tanstack/start/api' +import { + REST_DELETE, + REST_GET, + REST_OPTIONS, + REST_PATCH, + REST_POST, +} from '@payloadcms/tanstack-start/routes' + +export const APIRoute = createAPIFileRoute('/api/$')({ + GET: ({ request }) => REST_GET(config)(request), + POST: ({ request }) => REST_POST(config)(request), + DELETE: ({ request }) => REST_DELETE(config)(request), + PATCH: ({ request }) => REST_PATCH(config)(request), + OPTIONS: ({ request }) => REST_OPTIONS(config)(request), +}) +``` + +**Note:** `@payloadcms/tanstack-start/views` and `@payloadcms/tanstack-start/routes` require new exports: + +- `RootPage` — the TanStack Start admin page renderer (see Task 24) +- REST route handlers adapted from `@payloadcms/next/routes` (see Task 25) + +**Steps:** + +1. Create both files +2. Commit: `feat(tanstack-app): add admin and API routes` + +--- + +### Task 24: Create RootPage and route handlers for TanStack Start + +**File:** Create `packages/tanstack-start/src/views/Root/index.tsx` + +This is the TanStack Start equivalent of `packages/next/src/views/Root/index.tsx` — it: + +- Calls `initReq` using vinxi/http +- Routes to the correct view based on the URL segments +- Throws TanStack's `notFound()`/`redirect()` instead of Next.js's + +```typescript +import type { ImportMap, SanitizedConfig } from 'payload' + +import config from '@payload-config' +import { notFound, redirect } from '@tanstack/react-router' +import React from 'react' + +// Reuse the shared RootPage logic from packages/ui once it's moved (Phase 3) +// For now, replicate the core routing logic from packages/next/src/views/Root/index.tsx +// replacing notFound/redirect with TanStack's versions + +import { importMap } from '../../../importMap.js' // relative to tanstack-app when bundled + +type Props = { + config: Promise | SanitizedConfig + importMap: ImportMap + searchParams: Record + segments: string[] +} + +export async function RootPage({ + config: configPromise, + importMap, + segments, + searchParams, +}: Props) { + // Import the shared Root view logic from packages/ui/views/Root + // (which will accept notFound/redirect as callbacks after Phase 3 of this plan) + const { renderRootPage } = await import( + '@payloadcms/ui/views/Root/RenderRoot' + ) + + return renderRootPage({ + config: configPromise, + importMap, + notFound: () => { + throw notFound() + }, + redirect: (url) => { + throw redirect({ to: url }) + }, + searchParams, + segments, + }) +} +``` + +**File:** Create `packages/tanstack-start/src/routes/index.ts` + +```typescript +// REST route handlers adapted for TanStack Start's API route format +// They accept Request objects (same Web API) so we can delegate to the +// framework-agnostic REST handlers. +export { + REST_DELETE, + REST_GET, + REST_OPTIONS, + REST_PATCH, + REST_POST, +} from '@payloadcms/next/routes' +// Note: Until packages/next REST routes are decoupled, we re-export them. +// The REST handlers use standard Request/Response Web APIs and don't +// depend on Next.js internals — they work in any runtime. +``` + +**Update** `packages/tanstack-start/package.json` exports: + +```json +"./views": { "import": "./src/views/index.ts", ... }, +"./routes": { "import": "./src/routes/index.ts", ... } +``` + +**Steps:** + +1. Create `RootPage` (initially delegating to the shared Root render after Phase 3) +2. Create routes index re-exporting from `@payloadcms/next/routes` +3. Update package.json exports +4. Commit: `feat(tanstack-start): add RootPage and route exports` + +--- + +### Task 25: Create dev-tanstack.ts entry point + +**File:** Create `test/dev-tanstack.ts` + +```typescript +import chalk from 'chalk' +import execa from 'execa' +import minimist from 'minimist' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import { loadEnv } from 'payload/node' + +import { runInit } from './runInit.js' + +loadEnv() + +const filename = fileURLToPath(import.meta.url) +const dirname = path.dirname(filename) + +const { + _: [_testSuiteArg = '_community'], +} = minimist(process.argv.slice(2)) + +const testSuiteArg = _testSuiteArg as string + +console.log(`Selected test suite: ${testSuiteArg} [TanStack Start / Vinxi]`) + +// Generate importMap and DB adapter (reuses the same init logic as Next.js dev) +// This writes to tanstack-app/app/importMap.js instead of app/(payload)/admin/importMap.js +process.env.ROOT_DIR = path.resolve(dirname, '..', 'tanstack-app') + +await runInit(testSuiteArg, true, false) + +// Start Vinxi dev server +const tanstackAppDir = path.resolve(dirname, '..', 'tanstack-app') +const port = process.env.PORT ? Number(process.env.PORT) : 3100 // Use 3100 to avoid conflict with Next.js dev + +const vinxiProcess = execa('pnpm', ['vinxi', 'dev', '--port', String(port)], { + cwd: tanstackAppDir, + stdio: 'inherit', + env: { + ...process.env, + PORT: String(port), + }, +}) + +console.log(chalk.green(`✓ TanStack Start dev server starting on port ${port}`)) +console.log(chalk.cyan(` Admin: http://localhost:${port}/admin`)) + +// Forward signals +process.on('SIGINT', () => { + vinxiProcess.kill('SIGINT') + process.exit(0) +}) +process.on('SIGTERM', () => { + vinxiProcess.kill('SIGTERM') + process.exit(0) +}) + +await vinxiProcess +``` + +**Root package.json** — add the script: + +```json +"dev:tanstack": "cross-env NODE_OPTIONS=\"--no-deprecation --max-old-space-size=16384\" tsx ./test/dev-tanstack.ts", +"dev:tanstack:postgres": "cross-env PAYLOAD_DATABASE=postgres pnpm runts ./test/dev-tanstack.ts" +``` + +**Also update `initDevAndTest.ts`** to support writing the importMap to the TanStack app location when `ROOT_DIR` points there: + +- Currently hardcodes `./app/(payload)/admin/importMap.js` — make this path configurable +- Change: `path.resolve(process.env.ROOT_DIR || getNextRootDir(testSuiteArg).rootDir, './app/(payload)/admin/importMap.js')` + to a helper that checks whether `ROOT_DIR` contains a TanStack app and picks the right path + +**Steps:** + +1. Create `test/dev-tanstack.ts` +2. Add scripts to root `package.json` +3. Update `initDevAndTest.ts` to write importMap to `${ROOT_DIR}/app/importMap.js` when the TanStack app is the target (check by presence of `app.config.ts`) +4. Run: `pnpm dev:tanstack` — expect Vinxi to start +5. Fix any import/build errors +6. Commit: `feat: add pnpm dev:tanstack command and dev entry point` + +--- + +### Task 26: Smoke test `pnpm dev:tanstack` + +**Steps:** + +1. Run: `pnpm dev:tanstack` +2. Navigate to: `http://localhost:3100/admin` +3. Verify: admin panel loads, can log in, can navigate collections +4. Run: `curl -s http://localhost:3100/api/access | jq .` — verify REST API responds +5. Fix any runtime errors +6. Commit: `test: verify pnpm dev:tanstack works end-to-end` + +--- + +## Updated Dependency Graph + +``` +Phase 1 (Tasks 1-3): Move utilities/elements/templates + ↓ +Phase 2 (Tasks 4-6): Move view utilities + ↓ +Phase 3 (Tasks 7-9): Move render functions (with nav callbacks) + ↓ +Phase 4 (Tasks 10-11): Move handlers + create shared dispatcher + ↓ +Phase 5 (Tasks 12-16): TanStack Start adapter implementation + ↓ +Phase 6 (Tasks 18-26): TanStack Start app shell + pnpm dev:tanstack + ↓ +Task 17 + Task 26: Integration tests + smoke test +``` + +## File Summary — Phase 6 New Files + +``` +tanstack-app/ +├── app.config.ts # Vinxi/TanStack Start config +├── tsconfig.json # Path aliases (especially @payload-config) +├── package.json # TanStack deps +└── app/ + ├── client.tsx # Hydration entry + ├── ssr.tsx # SSR entry + ├── router.tsx # Router definition + ├── importMap.ts # Auto-generated on dev start + ├── routeTree.gen.ts # Auto-generated by TanStack Router + └── routes/ + ├── __root.tsx # Root layout (uses RootLayout from packages/tanstack-start) + ├── admin.$.tsx # Admin catch-all → RootPage + └── api.$.ts # REST API catch-all + +packages/tanstack-start/src/ +├── layouts/ +│ └── Root/ +│ └── index.tsx # RootLayout server component +├── views/ +│ └── Root/ +│ └── index.tsx # RootPage (route renderer) +└── routes/ + └── index.ts # Re-exports REST handlers + +test/ +└── dev-tanstack.ts # pnpm dev:tanstack entry point +``` diff --git a/docs/plans/2026-04-02-data-first-view-loading.md b/docs/plans/2026-04-02-data-first-view-loading.md new file mode 100644 index 00000000000..9c7190f85a3 --- /dev/null +++ b/docs/plans/2026-04-02-data-first-view-loading.md @@ -0,0 +1,219 @@ +# Data-First View Loading + +## Goal + +Replace the fragile `useEffect`-based server function pattern in TanStack view adapters with loader-based data fetching, and extract shared data-fetching functions so both Next RSC and TanStack loaders can fetch data before rendering. + +## The Problem + +The current TanStack adapters for List, Document, BrowseByFolder, and CollectionFolders all follow this pattern: + +```mermaid +sequenceDiagram + participant Loader as TanStack Loader + participant Comp as Client Component + participant SF as Server Function + + Loader->>Comp: pageState (metadata only) + Note over Comp: Renders LoadingOverlay + Comp->>SF: useEffect → serverFunction("render-list") + SF-->>Comp: { List: React.ReactNode } + Note over Comp: setState → re-render with JSX +``` + +This is unreliable: + +- **Waterfall**: loader fetches metadata, component mounts, THEN fetches actual view content +- **Flash of loading**: user always sees `LoadingOverlay` before content +- **Race conditions**: fast navigation can cause stale state updates (mitigated by `cancelled` flag, but fragile) +- **Serialization concern**: shipping pre-rendered `React.ReactNode` over a server function POST is opaque and hard to debug + +The Dashboard already works correctly — `getPageState` fetches dashboard data in the loader, and the component renders immediately with data. Auth views work the same way. List/Document/Folder views should follow the same pattern. + +## Target Architecture + +```mermaid +sequenceDiagram + participant Loader as TanStack Loader / Next RSC + participant DataFn as Shared Data Function + participant Comp as Shared UI Component + + Loader->>DataFn: fetchListData(req, collection, query) + DataFn-->>Loader: { docs, columns, permissions, ... } + Loader->>Comp: Pass data as props + Note over Comp: Renders immediately — no loading state +``` + +Both frameworks call the same shared data-fetching function, then pass data to the same shared component: + +- **Next**: RSC calls `fetchListData()` → passes data to `` +- **TanStack**: Loader calls `fetchListData()` → serializes as JSON → component receives via `useLoaderData()` → passes to same `` + +The shared component is a regular React client component. No async, no server function, no useEffect for initial data. + +## Key Constraint: Serializable Data, Not JSX + +The current builders (`renderListView`, `renderDocument`) return `React.ReactNode` — pre-rendered JSX that includes providers, slot components, tables, etc. This cannot be JSON-serialized through a TanStack loader. + +The fix is to split each builder into two layers: + +1. **Data function** (shared, framework-agnostic) — fetches and returns plain serializable data +2. **Render function** (shared, React component) — accepts data props, renders JSX + +The existing builders can be refactored to compose these two layers internally, so the `renderListView` API doesn't break. + +## Phased Approach + +### Phase 0: Inventory what each view needs as data + +Before coding, identify the minimum serializable data each view needs. This determines the shape of the new data functions. + +**List view** (from `renderListView` internals): + +- `docs: PaginatedDocs` — the query result +- `columnState: Column[]` — resolved column definitions +- `hasCreatePermission, hasDeletePermission, hasTrashPermission: boolean` +- `newDocumentURL: string` +- `collectionSlug: string` +- `queryPreset, resolvedFilterOptions` — filter/preset data +- Collection preferences + +**Document view** (from `renderDocument` internals): + +- `doc: Data` — the document record (already returned as `data`) +- `formState: FormState` — serialized field state +- `docPermissions: SanitizedDocumentPermissions` +- `docPreferences` +- `isLocked: boolean` +- `versions` data +- Collection/global config reference + +**Folder views**: Similar to List — paginated results + folder hierarchy data. + +### Phase 1: Extract data-fetching functions from builders + +For each view, extract a `fetchXxxViewData()` function from the existing builder. These functions take `req` + view-specific args and return plain serializable data. + +**Files to create/modify:** + +- `packages/ui/src/views/List/fetchListViewData.ts` — new, extracted from `packages/ui/src/views/List/RenderListView.tsx` lines 81-350 (the data-fetching portion before JSX assembly) +- `packages/ui/src/views/Document/fetchDocumentViewData.ts` — new, extracted from `packages/ui/src/views/Document/RenderDocument.tsx` +- `packages/ui/src/views/BrowseByFolder/fetchBrowseFolderData.ts` — new +- `packages/ui/src/views/CollectionFolders/fetchCollectionFolderData.ts` — new + +Each returns a typed, JSON-serializable data object. No React nodes. + +Refactor the existing builders to call these functions internally: + +```ts +renderListView(args) { + const data = await fetchListViewData(args) // extracted + return { List: } // existing JSX assembly +} +``` + +This is a non-breaking refactor — the existing `renderListView` API and Next adapters continue to work unchanged. + +### Phase 2: Create shared client view components that accept data props + +For each view, create (or adapt) a client component that accepts the data object from Phase 1 and renders the view. + +**Key files:** + +- The List view's `DefaultListView` (`packages/ui/src/views/List/index.tsx`) already accepts `ListViewClientProps` but also expects pre-built JSX in slots (`Table`, `renderedFilters`). The Table and filters would need to be built client-side from data. +- The Document view's `EditView` and `DocumentInfoProvider` already handle most rendering from data props. The gap is `formState` and slot resolution. +- The Dashboard's `ModularDashboardClient` already works this way — it is the reference. + +This is the hardest phase. The main challenge is that some props are currently `React.ReactNode` (pre-rendered server-side): + +- `Table` in ListViewSlots +- `renderedFilters` in List +- Document slots (Save, Publish, Preview buttons) + +These would need to move to client-side rendering from data/config, or use server functions for on-demand rendering (like `RenderWidget` already does for dashboard widgets). + +### Phase 3: Move data fetching into TanStack loader via `getPageState` + +Extend `packages/tanstack-start/src/views/Root/getPageState.ts` to call the new data functions for each view type, just like it already does for `dashboard`: + +```ts +// In getPageState, after determining viewType: +if (pageViewType === 'list') { + pageData = { + ...pageData, + list: await fetchListViewData({ req, collectionSlug, query, ... }), + } +} + +if (pageViewType === 'document') { + pageData = { + ...pageData, + document: await fetchDocumentViewData({ req, collectionSlug, docID, ... }), + } +} +``` + +Since `getPageState` runs in the TanStack loader, data is available immediately when the component mounts — no useEffect, no loading spinner, no waterfall. + +### Phase 4: Rewrite TanStack view adapters to use loader data + +Replace the `useEffect` + `serverFunction` pattern with direct data consumption: + +```tsx +// Before (current): +function ListView({ pageState }) { + const [listView, setListView] = useState(null) + useEffect(() => { + serverFunction({ name: 'render-list', args: ... }) + .then(result => setListView(result.List)) + }, []) + return isLoading ? : listView +} + +// After (target): +function ListView({ pageState }) { + const listData = pageState.pageData.list + return +} +``` + +**Files to modify:** + +- `packages/tanstack-start/src/views/List/index.tsx` +- `packages/tanstack-start/src/views/Document/index.tsx` +- `packages/tanstack-start/src/views/BrowseByFolder/index.tsx` +- `packages/tanstack-start/src/views/CollectionFolders/index.tsx` +- `packages/tanstack-start/src/views/Account/index.tsx` +- `packages/tanstack-start/src/views/Root/types.ts` — extend `SerializablePageData` with list/document/folder data types + +### Phase 5: Align Next adapters to use the same data functions + +Next adapters can optionally be refactored to call the same `fetchXxxViewData()` functions, making the data-fetching truly shared: + +```tsx +// packages/next/src/views/List/index.tsx +export const ListView = async (args) => { + const data = await fetchListViewData(args) + return +} +``` + +This is optional for Phase 1 since Next's current RSC pattern already works. But it aligns the architecture: both frameworks call the same data function, pass to the same component. + +## Recommended Order + +1. **Start with List** — it's the most commonly used view after Dashboard and has well-understood data needs +2. **Then Document** — more complex due to form state, but high impact +3. **Then Folder views** — similar to List +4. **Account last** — smallest scope + +## The Hard Part: Table and Slots as JSX + +The biggest obstacle is that `renderListView` currently builds `Table` as pre-rendered JSX server-side (with `renderTable()`). The table includes resolved cell components from the import map. + +Two approaches: + +- **Option A**: Render table client-side from column definitions + data. The `Table` component would need to resolve cell renderers client-side. This is the cleaner architecture but more work. +- **Option B**: Keep using `RenderWidget`-style server functions for table/slot rendering on demand. The initial data (docs, columns, permissions) loads in the loader, but the table body fetches via server function after mount. This is a hybrid — eliminates the main waterfall while deferring heavy JSX resolution. + +The Dashboard already uses Option B for widgets (`RenderWidget` calls `render-widget` server function). This is a proven pattern in the codebase. diff --git a/docs/plans/2026-04-02-tanstack-start-client-rendering-plan.md b/docs/plans/2026-04-02-tanstack-start-client-rendering-plan.md new file mode 100644 index 00000000000..bd66b64bdcb --- /dev/null +++ b/docs/plans/2026-04-02-tanstack-start-client-rendering-plan.md @@ -0,0 +1,488 @@ +# TanStack Start Client Rendering Implementation Plan + +## Goal + +Replace the current TanStack Start admin page path, which renders the server-side `RootPage`, with: + +1. A serializable server-side page-state function +2. A client-only TanStack admin page shell +3. Client-side view wrappers that reuse existing client UI pieces from `packages/ui` + +This removes the need for `serverOnlyStubPlugin` in the TanStack app while leaving the Next.js adapter untouched. + +## Verified Current State + +These points are based on the current repo, not assumptions: + +- [tanstack-app/app/routes/admin.$.tsx](/Users/orakhmatulin/work/payload/tanstack-app/app/routes/admin.$.tsx) still returns `segments` from the loader and renders `RootPage`. +- [packages/tanstack-start/src/views/Root/index.tsx](/Users/orakhmatulin/work/payload/packages/tanstack-start/src/views/Root/index.tsx) imports `@payloadcms/ui/views/Root/RenderRoot`, which keeps TanStack on the RSC path. +- [packages/tanstack-start/src/layouts/Root/index.tsx](/Users/orakhmatulin/work/payload/packages/tanstack-start/src/layouts/Root/index.tsx) already mounts `RootProvider`, `TanStackRouterProvider`, auth, translations, config, and server functions. The new page path must fit inside this provider tree. +- There is no existing TanStack-specific client page/view layer in `packages/tanstack-start/src/views` beyond the server `RootPage`. +- Existing reusable client view pieces already live in `packages/ui`, notably: + - [packages/ui/src/views/List/index.tsx](/Users/orakhmatulin/work/payload/packages/ui/src/views/List/index.tsx) + - [packages/ui/src/views/Edit/index.tsx](/Users/orakhmatulin/work/payload/packages/ui/src/views/Edit/index.tsx) + - [packages/ui/src/views/CreateFirstUser/index.client.tsx](/Users/orakhmatulin/work/payload/packages/ui/src/views/CreateFirstUser/index.client.tsx) + - [packages/ui/src/views/Dashboard/Default/ModularDashboard/index.client.tsx](/Users/orakhmatulin/work/payload/packages/ui/src/views/Dashboard/Default/ModularDashboard/index.client.tsx) +- Existing server functions `render-document` and `render-list` still return React nodes: + - [packages/ui/src/views/Document/handleServerFunction.tsx](/Users/orakhmatulin/work/payload/packages/ui/src/views/Document/handleServerFunction.tsx) + - [packages/ui/src/views/List/handleServerFunction.tsx](/Users/orakhmatulin/work/payload/packages/ui/src/views/List/handleServerFunction.tsx) +- The current default template/nav path is server-oriented: + - [packages/ui/src/templates/Default/index.tsx](/Users/orakhmatulin/work/payload/packages/ui/src/templates/Default/index.tsx) + - [packages/ui/src/elements/Nav/index.tsx](/Users/orakhmatulin/work/payload/packages/ui/src/elements/Nav/index.tsx) + +## Constraints + +- Do not modify `packages/next`. +- Keep Next.js behavior unchanged. +- Minimize changes in `packages/ui`. +- A small `packages/ui` exception is acceptable where required for serialization support. The main justified example is extracting a serializable `buildTableData`. +- Do not attempt to serialize React nodes across TanStack server functions. +- Keep `RootLayout` and `RootProvider` as the shared TanStack layout foundation. + +## Architecture + +### Next.js path + +Unchanged. It continues to use: + +- `renderRootPage` +- Server-rendered templates +- Server-rendered view entry points +- Existing `render-document` and `render-list` behavior + +### TanStack Start path + +New flow: + +1. Route loader calls `getPageState` +2. `getPageState` runs server-side and returns only serializable data +3. Route component renders a client-only `TanStackAdminPage` +4. `TanStackAdminPage` picks a built-in client wrapper by `viewType` +5. Client wrappers reuse existing client components from `packages/ui` +6. Any view-specific mutations that currently depend on `render-document` / `render-list` trigger route invalidation instead of returning React nodes + +### Important scope correction + +The implementation should not try to make the existing `packages/ui` server view entry points directly serializable. Instead: + +- Keep those server entry points for Next.js +- Add TanStack-specific client wrappers in `packages/tanstack-start` +- Reuse existing client components from `packages/ui` where they already exist + +## Serializable Page State + +Create a new server-side page-state function in: + +- `packages/tanstack-start/src/views/Root/getPageState.ts` + +Responsibilities: + +- Call `initReq` +- Recreate the route-resolution logic currently buried in `renderRootPage` +- Handle redirects and notFound via TanStack Router errors +- Return only serializable data +- Recompute any page-level data the client shell cannot derive from context alone + +### Required fields + +The page state should include at least: + +```ts +type SerializablePageState = { + browseByFolderSlugs: string[] + clientConfig: ClientConfig + documentSubViewType?: DocumentSubViewTypes + locale?: Locale + permissions: SanitizedPermissions + routeParams: { + collection?: string + folderCollection?: string + folderID?: number | string + global?: string + id?: number | string + token?: string + versionID?: number | string + } + searchParams?: Record + segments: string[] + templateClassName: string + templateType?: 'default' | 'minimal' + viewType?: ViewTypes + visibleEntities: VisibleEntities + navPreferences?: NavPreferences + customView?: PayloadComponent | undefined + viewActions?: PayloadComponent[] +} +``` + +### Serialization rules + +- Built-in views should be represented by `viewType`, not by a React function. +- `viewActions` should only include import-map-addressable payload components. +- Any direct React function references must be dropped from the serialized output. +- `visibleEntities` must be present unless the implementation instead serializes fully prepared nav groups. + +### Auth and route handling + +Move the route/auth checks into `getPageState` so the route loader becomes thin. + +Reuse logic from: + +- [packages/ui/src/views/Root/getRouteData.ts](/Users/orakhmatulin/work/payload/packages/ui/src/views/Root/getRouteData.ts) +- [packages/ui/src/utilities/handleAuthRedirect.ts](/Users/orakhmatulin/work/payload/packages/ui/src/utilities/handleAuthRedirect.ts) +- [packages/ui/src/utilities/isPublicAdminRoute.ts](/Users/orakhmatulin/work/payload/packages/ui/src/utilities/isPublicAdminRoute.ts) +- [packages/ui/src/utilities/isCustomAdminView.ts](/Users/orakhmatulin/work/payload/packages/ui/src/utilities/isCustomAdminView.ts) + +Do not call `renderRootPage` from `getPageState`. + +## Route Rewrite + +Replace the current route flow in: + +- `tanstack-app/app/routes/admin.$.tsx` + +Current: + +- Loader returns `{ segments }` +- Component renders `` + +Target: + +- Loader calls `getPageState` +- Component renders `` + +The route should pass `search` from TanStack Router into the client page as plain search params. + +## Client Page Shell + +Create: + +- `packages/tanstack-start/src/views/Root/TanStackAdminPage.tsx` + +Requirements: + +- `'use client'` +- Must not import server-only modules +- Must sit inside the existing layout/provider tree from `RootLayout` +- Should use `PageConfigProvider`, not replace `RootProvider` + +Responsibilities: + +1. Apply page-level config shadowing with `PageConfigProvider` +2. Pick template by `templateType` +3. Pick the built-in TanStack view wrapper by `viewType` +4. Resolve import-map based custom views if they are safe client components +5. Pass route/search/page state into the selected client wrapper + +## Template Strategy + +Do not try to render [packages/ui/src/templates/Default/index.tsx](/Users/orakhmatulin/work/payload/packages/ui/src/templates/Default/index.tsx) directly in the client path. It depends on server-side `RenderServerComponent`, `payload`, and server props. + +Instead create TanStack-safe client templates in `packages/tanstack-start`, likely: + +- `packages/tanstack-start/src/templates/Default/TanStackDefaultTemplate.tsx` +- `packages/tanstack-start/src/templates/Minimal/TanStackMinimalTemplate.tsx` + +These should reuse client-safe UI pieces from `packages/ui` where possible. + +### Default template requirements + +- Use `visibleEntities` and/or precomputed nav groups +- Use `DefaultNavClient` instead of `DefaultNav` +- Preserve core layout structure, app header behavior, nav toggling, and wrappers where client-safe +- Avoid `RenderServerComponent` + +### Minimal template requirements + +- Mirror the minimal shell used for login/reset/verify-like routes +- Avoid any server component hooks + +## View Wrapper Strategy + +Add TanStack-specific client wrappers under `packages/tanstack-start/src/views`. + +These wrappers should map built-in `viewType` values to existing client functionality in `packages/ui`. + +### Views that can reuse existing client components + +- `list` + - Reuse `DefaultListView` +- `document` + - Reuse `DefaultEditView` and surrounding client providers required by the edit path +- `createFirstUser` + - Reuse `CreateFirstUserClient` +- `account` + - Reuse `AccountClient` +- Dashboard internals + - Reuse the modular dashboard client pieces where feasible + +### Views that still need server-derived state + +If a view currently has only a server entry point, add a thin TanStack client wrapper that: + +- fetches serializable state from server functions on mount, or +- consumes state already prepared by `getPageState` + +Do not pass server-rendered React nodes through page state. + +### Custom views + +Support only import-map-addressable custom views in the serialized route state. + +Rules: + +- If `PayloadComponent` is a path/object reference, resolve it through the import map on the client. +- If the current route resolves to a direct React function that is not safely serializable, do not attempt to pass it through page state. +- If needed, document that TanStack custom views require import-map-addressable components for this path. + +## List View Data + +The current plan to extract `buildTableData` is valid, but it needs one correction: + +- It should be framed as a small, deliberate `packages/ui` exception to support a serializable TanStack path. + +### New utility + +Add: + +- `packages/ui/src/utilities/buildTableData.ts` + +Export it from: + +- `packages/ui/src/exports/utilities.ts` + +### Behavior + +This helper should: + +- Share the data-fetching and column-building logic from `buildTableState` +- Return only serializable data: + - `columns` + - `data` + - `preferences` +- Not render: + - `Table` + - `renderedFilters` + +### Consistency requirement + +Do not introduce a TanStack-only behavior fork in the shared fetch logic. + +Note: + +- [packages/ui/src/utilities/buildTableState.ts](/Users/orakhmatulin/work/payload/packages/ui/src/utilities/buildTableState.ts) currently contains a `joinQuery.page` / `joinQuery.limit` inconsistency in the array-of-collections branch. + +If that logic is touched, either: + +- preserve the current behavior exactly in both paths, or +- fix the bug intentionally for both shared consumers + +Do not silently make TanStack behave differently from Next.js. + +## List Wrapper + +Add a TanStack list wrapper that: + +1. Obtains serializable list data +2. Builds client-safe list props +3. Reuses `DefaultListView` + +Prefer: + +- server-side serializable data from `buildTableData` +- client-side `ListQueryProvider` +- client-side `TableColumnsProvider` +- client-side filters/table behavior only where the underlying props are serializable + +Do not depend on `renderListView` or `render-list` for page rendering. + +## Document Wrapper + +Add a TanStack document wrapper that: + +1. Fetches or derives serializable document state +2. Reuses `DefaultEditView` +3. Provides the same client providers the edit view expects + +The wrapper must not rely on `renderDocument` returning a React node. + +Reuse existing document-related server utilities where possible for data, permissions, preferences, lock state, and form state, but return plain data only. + +## Dashboard Wrapper + +The dashboard path needs special care because the existing server view still resolves server-rendered content around modular dashboard widgets. + +Recommended approach: + +1. Start with a minimal TanStack dashboard wrapper that renders the core dashboard client shell and widget area without server-only imports. +2. Reuse the modular dashboard client pieces from `packages/ui`. +3. If some dashboard extensions remain server-only, explicitly leave them unsupported in the first TanStack slice rather than sneaking server imports back into the client tree. + +The first implementation should optimize for removing the stub plugin and keeping the default dashboard functional. + +## Server Function Invalidation + +Keep the existing shared dispatcher in `packages/ui` intact. + +Change TanStack-specific handling in: + +- `packages/tanstack-start/src/utilities/handleServerFunctions.ts` + +### Required behavior + +Intercept: + +- `render-document` +- `render-list` + +Return a TanStack-specific invalidation sentinel, for example: + +```ts +{ + __tanstack_invalidate: true +} +``` + +All other server functions should continue to dispatch normally through `dispatchServerFunction`. + +## Router Provider Invalidation Hook + +Update: + +- `packages/tanstack-start/src/adapter/RouterProvider.tsx` + +So that the client-side router/server-function flow recognizes the TanStack invalidation sentinel and calls: + +- `router.invalidate()` + +This should refresh route data and allow the client page shell to rebuild from fresh serialized page state. + +## Export Surface + +Update TanStack exports as needed so the new view/page helpers are available from: + +- `packages/tanstack-start/src/index.ts` + +If `RootPage` is removed or superseded, update the export surface accordingly and adjust the route import sites. + +## Vite Cleanup + +After the new page path is fully client-safe, remove: + +- `serverOnlyStubPlugin` + +from: + +- [tanstack-app/vite.config.ts](/Users/orakhmatulin/work/payload/tanstack-app/vite.config.ts) + +Keep: + +- `tanstackStartCompatPlugin` + +Do not remove the stub plugin before the new route path is verified to build and hydrate cleanly. + +## Implementation Order + +Implement in this order: + +### Phase 0 + +- Rewrite the TanStack plan and align it with repo reality + +### Phase 1 + +- Add `buildTableData` in `packages/ui` +- Export it +- Typecheck `packages/ui` + +### Phase 2 + +- Add `getPageState` +- Move route/auth/page-state logic into it +- Add tests for the serialized page-state shape + +### Phase 3 + +- Replace `RootPage` route usage with `TanStackAdminPage` +- Keep the first shell minimal but functional +- Verify there are no server-only imports in the page client graph + +### Phase 4 + +- Add TanStack-safe default/minimal templates +- Add nav handling using client-safe pieces + +### Phase 5 + +- Add built-in client wrappers for: + - list + - document + - dashboard + - account + - createFirstUser + - remaining simple auth/minimal views as needed + +### Phase 6 + +- Add TanStack invalidation handling for `render-document` and `render-list` +- Wire router invalidation in the TanStack adapter/provider + +### Phase 7 + +- Remove `serverOnlyStubPlugin` +- Run targeted tests/build verification + +## Testing + +### Integration + +Expand: + +- `test/admin-adapter/tanstack-start.int.spec.ts` + +Add coverage for: + +- `getPageState` exports and returns a plain serializable object +- built-in view types resolve to expected serializable state +- auth redirect/notFound behavior is preserved +- TanStack `handleServerFunctions` returns invalidation for: + - `render-document` + - `render-list` +- other server functions still dispatch normally + +### E2E + +Add or extend TanStack app coverage in the appropriate test location for: + +- dashboard loads without server-only import/runtime errors +- list view loads and navigates +- document view loads and saves +- client-side navigation between admin routes works +- document/list mutations trigger route invalidation and refresh +- browser console does not show server-only module failures + +### Manual verification + +At minimum verify: + +1. TanStack app builds without relying on `serverOnlyStubPlugin` +2. Admin root route loads +3. List route loads +4. Document route loads +5. Save/delete flows refresh correctly + +## Non-Goals + +- Reworking the Next.js adapter +- Converting all existing `packages/ui` server views into dual server/client implementations +- Full parity for every custom server-rendered extension on day one if that would reintroduce server-only imports into the TanStack client graph + +## Deliverable + +The final implementation is successful when: + +- `tanstack-app/app/routes/admin.$.tsx` no longer renders `RootPage` +- TanStack admin rendering no longer imports `RenderRoot` into the page path +- the TanStack app works without `serverOnlyStubPlugin` +- Next.js behavior remains unchanged +- the new plan is accurately reflected in code and tests diff --git a/docs/plans/2026-04-02-tanstack-start-client-rendering.md b/docs/plans/2026-04-02-tanstack-start-client-rendering.md new file mode 100644 index 00000000000..451385d94f6 --- /dev/null +++ b/docs/plans/2026-04-02-tanstack-start-client-rendering.md @@ -0,0 +1,376 @@ +# TanStack Start: Serializable Page State + Client Rendering + +## Goal + +Fix the TanStack Start admin rendering path by removing the dependency on `renderRootPage` and replacing it with: + +- a serializable server-side page-state function +- a client-only TanStack admin page shell +- TanStack-specific client view wrappers that reuse existing client UI pieces from `packages/ui` + +Next.js remains unchanged and continues using the existing RSC-based admin rendering path. + +## Problem + +TanStack Start is isomorphic by default. The current admin route still renders `RootPage`, and `RootPage` imports `@payloadcms/ui/views/Root/RenderRoot`. That pulls the server-rendered admin path into the TanStack route graph. + +Because `renderRootPage` and the current server view/template chain transitively depend on server-only modules, TanStack’s client build currently needs `serverOnlyStubPlugin` in `tanstack-app/vite.config.ts`. + +That plugin is only masking the real issue. Each new server-only dependency can create a new browser-bundle breakage point. + +## Verified Current State + +- `tanstack-app/app/routes/admin.$.tsx` still returns `segments` from the loader and renders `RootPage`. +- `packages/tanstack-start/src/views/Root/index.tsx` imports `@payloadcms/ui/views/Root/RenderRoot`. +- `packages/tanstack-start/src/layouts/Root/index.tsx` already sets up `RootProvider`, TanStack router integration, auth, translations, config, and server functions. +- `packages/ui` already contains reusable client pieces such as `DefaultListView`, `DefaultEditView`, `CreateFirstUserClient`, and dashboard client modules. +- `render-document` and `render-list` still return React nodes today, so they are not suitable as serializable TanStack page data primitives. +- The current default template and nav are server-oriented and rely on `RenderServerComponent`. + +## Design + +### Rendering model + +**Next.js** + +- Keeps `renderRootPage` +- Keeps RSC views and templates +- No behavior change + +**TanStack Start** + +- Loader calls `getPageState` +- `getPageState` returns serializable data only +- Route component renders `TanStackAdminPage` +- `TanStackAdminPage` is client-only +- Client wrappers map `viewType` to reusable client implementations +- Mutations that currently depend on `render-document` / `render-list` invalidate the route instead of returning React nodes + +This is acceptable because Payload admin is authenticated application UI, not an SEO page. + +## Core Principles + +### 1. Do not serialize React nodes + +No TanStack loader or server function used for route rendering should return: + +- `React.ReactNode` +- rendered server components +- server-only component references + +Only plain serializable data should cross the route boundary. + +### 2. Do not repurpose the existing `packages/ui` server views as-is + +The current server view entry points in `packages/ui` stay in place for Next.js. + +TanStack should instead: + +- add a page-state layer in `packages/tanstack-start` +- add client wrappers in `packages/tanstack-start` +- reuse client components from `packages/ui` where those already exist + +### 3. Keep the existing TanStack root layout + +The current `RootLayout` in `packages/tanstack-start` already provides the base app shell and providers. The new page flow should fit inside that tree. + +`TanStackAdminPage` should use `PageConfigProvider` at the page level, not replace `RootProvider`. + +## Main Components + +### 1. `getPageState` + +**File:** `packages/tanstack-start/src/views/Root/getPageState.ts` + +This is the new server-side entry point for route rendering. + +Responsibilities: + +- call `initReq` +- perform auth/public-route/custom-route checks +- reproduce route resolution currently handled before rendering +- derive serializable page state from `getRouteData` +- throw TanStack `redirect` / `notFound` as needed + +### Serializable state shape + +At minimum: + +```ts +type SerializablePageState = { + browseByFolderSlugs: string[] + clientConfig: ClientConfig + documentSubViewType?: DocumentSubViewTypes + locale?: Locale + navPreferences?: NavPreferences + permissions: SanitizedPermissions + routeParams: { + collection?: string + folderCollection?: string + folderID?: number | string + global?: string + id?: number | string + token?: string + versionID?: number | string + } + searchParams?: Record + segments: string[] + templateClassName: string + templateType?: 'default' | 'minimal' + viewType?: ViewTypes + visibleEntities: VisibleEntities + customView?: PayloadComponent + viewActions?: PayloadComponent[] +} +``` + +### Important notes + +- Built-in views should be represented by `viewType`, not by serializing a React function. +- `viewActions` and `customView` are only safe when they are import-map-addressable payload components. +- Direct function components should not be serialized through page state. +- `visibleEntities` or precomputed nav groups must be present so the client template can build navigation without server-only helpers. + +### 2. Route loader rewrite + +**File:** `tanstack-app/app/routes/admin.$.tsx` + +Current route behavior: + +- resolves `segments` +- performs some auth logic inline +- renders `` + +Target route behavior: + +- resolves `segments` +- delegates page-state work to `getPageState` +- renders `` + +The route component should pass TanStack search params as plain route search state into the page shell. + +### 3. `TanStackAdminPage` + +**File:** `packages/tanstack-start/src/views/Root/TanStackAdminPage.tsx` + +Requirements: + +- `'use client'` +- no server-only imports +- uses `PageConfigProvider` +- chooses template by `templateType` +- chooses built-in view wrapper by `viewType` +- resolves supported import-map custom views on the client + +This component is the top of the new TanStack page tree. + +## Templates + +The existing `packages/ui` templates are server-oriented and should not be reused directly in the TanStack page path. + +Instead create TanStack-safe client templates under `packages/tanstack-start`. + +### Default template + +Should: + +- use client-safe wrappers and layout primitives +- use `DefaultNavClient` rather than `DefaultNav` +- rely on `visibleEntities` or precomputed nav groups +- preserve the admin shell structure where possible +- avoid `RenderServerComponent` + +### Minimal template + +Should: + +- cover login/reset/verify-like minimal routes +- remain client-safe +- avoid server-render helpers + +## View Strategy + +TanStack needs its own client wrappers for built-in views. + +### Reuse from existing client components + +Reuse existing client components in `packages/ui` where practical: + +- list: `DefaultListView` +- document: `DefaultEditView` +- create first user: `CreateFirstUserClient` +- account: `AccountClient` +- dashboard internals: modular dashboard client pieces + +### Views with server-only current entry points + +If a view still only exists as a server entry point, add a TanStack client wrapper that: + +- consumes serializable state from `getPageState`, or +- fetches serializable data via existing server functions or new data-only helpers + +Do not route page rendering through the server view entry point. + +### Custom views + +TanStack should only support custom views that can be addressed through the import map on the client. + +If a custom view is only represented by a direct React function and cannot be safely serialized or resolved client-side, it should not be passed through route state. + +## List Data + +The list page needs a data-only path instead of the current RSC rendering path. + +### Shared utility + +Add a small `packages/ui` exception: + +- `packages/ui/src/utilities/buildTableData.ts` + +Export it from: + +- `packages/ui/src/exports/utilities.ts` + +This helper should: + +- share data-fetching and column-building behavior with `buildTableState` +- return serializable data only +- not render `Table` +- not render filters + +### Consistency requirement + +Do not let TanStack and Next.js diverge accidentally. + +If shared list-fetch logic is adjusted, either: + +- preserve existing behavior in both paths, or +- intentionally fix the behavior in both places + +## Document Data + +The document page also needs a serializable, non-RSC path. + +TanStack should not use `renderDocument` for route rendering because it returns React nodes. + +Instead: + +- derive document state with existing server-side utilities where possible +- return plain data, permissions, preferences, locks, form state, and route metadata +- mount a client wrapper that reuses `DefaultEditView` and the required client providers + +## Dashboard + +Dashboard is the highest-risk view because the current server path still wraps modular dashboard pieces with server rendering behavior. + +Recommended initial scope: + +- make the default dashboard functional in TanStack +- reuse modular dashboard client pieces +- avoid dragging server-only dashboard extensions into the TanStack client graph + +If some advanced dashboard customizations are still server-only, keep the first pass conservative instead of reintroducing the underlying problem. + +## Server Functions and Invalidation + +The shared dispatcher in `packages/ui` should remain unchanged. + +TanStack-specific behavior belongs in: + +- `packages/tanstack-start/src/utilities/handleServerFunctions.ts` + +### Special-case invalidation + +Intercept: + +- `render-document` +- `render-list` + +Instead of returning React nodes, return an invalidation sentinel such as: + +```ts +{ + __tanstack_invalidate: true +} +``` + +All other server functions should continue dispatching through the existing shared handler. + +## Router Invalidation + +The TanStack adapter/router path should recognize the invalidation sentinel and call: + +- `router.invalidate()` + +This keeps the route data model TanStack-native: + +- route state comes from the loader +- updates trigger loader refresh +- page state rehydrates from fresh serialized data + +## Vite Cleanup + +Once the TanStack admin route no longer pulls server-only code into the client graph: + +- remove `serverOnlyStubPlugin` from `tanstack-app/vite.config.ts` + +Keep the compatibility shim plugin that is unrelated to this issue. + +## What Does Not Change + +- `packages/next` +- `renderRootPage` +- the shared server-function dispatcher in `packages/ui` +- REST and auth semantics +- the Next.js admin rendering path + +## Trade-offs + +| Aspect | Next.js | TanStack Start | +| -------------------------------- | ------------------- | ------------------------------ | +| View rendering | RSC-first | client wrappers + loader state | +| Route payload | React nodes allowed | serializable data only | +| Route refresh | framework RSC flow | loader invalidation | +| Server-only deps in client graph | none | none after migration | +| Stub maintenance | not needed | removed | + +## Testing + +### Integration + +Extend `test/admin-adapter/tanstack-start.int.spec.ts` to cover: + +- `getPageState` export and shape +- redirect/notFound behavior +- invalidation responses for `render-document` and `render-list` +- normal dispatch behavior for other server functions + +### E2E + +Add or extend TanStack app coverage for: + +- dashboard route loads +- list route loads +- document route loads +- client-side navigation works +- mutations refresh the route via invalidation +- browser console has no server-only module errors + +### Manual verification + +Verify at minimum: + +1. TanStack app builds without `serverOnlyStubPlugin` +2. admin root route renders +3. list route renders +4. document route renders +5. save/delete style flows refresh correctly + +## Outcome + +This design succeeds when TanStack admin rendering: + +- no longer routes through `RootPage` / `RenderRoot` +- no longer needs `serverOnlyStubPlugin` +- remains compatible with the existing `RootLayout` provider tree +- keeps Next.js untouched diff --git a/docs/plans/2026-04-02-tanstack-start-server-client-boundary-rework.md b/docs/plans/2026-04-02-tanstack-start-server-client-boundary-rework.md new file mode 100644 index 00000000000..acedf32af89 --- /dev/null +++ b/docs/plans/2026-04-02-tanstack-start-server-client-boundary-rework.md @@ -0,0 +1,182 @@ +# TanStack Start Server/Client Boundary Rework Plan + +## Goal + +Fix TanStack Start `admin-root` e2e by removing server-only code from the client route graph. + +This plan explicitly rejects browser-side module shims and mock Node builtins. The correct fix is: + +1. keep client bundles client-only +2. keep server logic behind TanStack server functions or server loaders +3. split mixed entrypoints so route-tree imports never pull server modules into the browser + +## Keep vs Revert + +### Keep + +- Keep the Sass warning suppression in [tanstack-app/vite.config.ts](/Users/orakhmatulin/work/payload/tanstack-app/vite.config.ts) (`silenceDeprecations: ['import']`) +- Keep the `@vite-ignore` update in [packages/payload/src/utilities/dynamicImport.ts](/Users/orakhmatulin/work/payload/packages/payload/src/utilities/dynamicImport.ts) +- Keep the route-level move away from static `@payload-config` imports as part of the rework direction + +### Revert + +- Revert all browser shim work in [tanstack-app/vite.config.ts](/Users/orakhmatulin/work/payload/tanstack-app/vite.config.ts) +- Do not add more client aliases for `node:*`, `react-dom/server`, or other server modules + +## Verified Problem + +The browser failures were not isolated package bugs. They were repeated proof that the client graph still imports server code. + +Observed breakages included: + +- `file-type` +- `sharp` +- `node:stream/web` +- `react-dom/server` +- `node:async_hooks` +- `util.isDeepStrictEqual` +- `ieee754` + +These were downstream symptoms of one root issue: TanStack route modules imported server-oriented entrypoints that are also pulled into the client by [tanstack-app/app/routeTree.gen.ts](/Users/orakhmatulin/work/payload/tanstack-app/app/routeTree.gen.ts). + +## Root Cause + +### 1. Route-tree modules are client-visible + +[tanstack-app/app/routeTree.gen.ts](/Users/orakhmatulin/work/payload/tanstack-app/app/routeTree.gen.ts) imports: + +- [tanstack-app/app/routes/\_\_root.tsx](/Users/orakhmatulin/work/payload/tanstack-app/app/routes/__root.tsx) +- [tanstack-app/app/routes/admin.index.tsx](/Users/orakhmatulin/work/payload/tanstack-app/app/routes/admin.index.tsx) +- [tanstack-app/app/routes/admin.$.tsx](/Users/orakhmatulin/work/payload/tanstack-app/app/routes/admin.$.tsx) + +Anything statically imported by those files is at risk of entering the client graph. + +### 2. `__root.tsx` imports a server-oriented layout entrypoint + +[tanstack-app/app/routes/\_\_root.tsx](/Users/orakhmatulin/work/payload/tanstack-app/app/routes/__root.tsx) currently depends on `RootLayout` behavior from `@payloadcms/tanstack-start`. + +[packages/tanstack-start/src/layouts/Root/index.tsx](/Users/orakhmatulin/work/payload/packages/tanstack-start/src/layouts/Root/index.tsx) imports and executes server-oriented concerns: + +- `initReq` +- nav preference lookup +- request/theme/cookie derivation +- client config generation +- locale filtering +- server action wiring + +That file is not safe as a static route-tree import. + +### 3. Package root exports are too mixed + +`@payloadcms/tanstack-start` currently exposes both client-safe and server-oriented entrypoints from the same package root. + +Using the package root from route files makes it too easy to drag server code into the client graph. + +## Rework Direction + +## Phase 1: Remove the Wrong Fix + +1. Remove the browser shim plugin from [tanstack-app/vite.config.ts](/Users/orakhmatulin/work/payload/tanstack-app/vite.config.ts) +2. Keep only the Sass suppression in that file +3. Re-run focused TanStack `admin-root` e2e to confirm the route graph still fails without shims + +## Phase 2: Split the Root Route into Client Shell + Server Data + +### Target state + +[tanstack-app/app/routes/\_\_root.tsx](/Users/orakhmatulin/work/payload/tanstack-app/app/routes/__root.tsx) should import only client-safe UI and TanStack router components at module scope. + +It should not statically import: + +- `RootLayout` +- `initReq` +- `@payload-config` +- server-only request helpers +- mixed package-root exports that transitively pull server modules + +### Required refactor + +Extract the server work currently embedded in `RootLayout` into a data function that returns only serializable props. + +Suggested split: + +1. Add a server-only helper in `packages/tanstack-start` + + - example shape: `getRootLayoutData({ config, importMap })` + - responsibility: run `initReq`, nav prefs lookup, client config generation, locale filtering, translation/theme derivation + - output: plain data needed by the client root shell + +2. Add a client-safe root-shell export in `packages/tanstack-start` + + - example shape: `TanStackRootShell` + - responsibility: compose `TanStackRouterProvider`, `TanStackRootProvider`, `ProgressBar`, and `Outlet` + - input: serialized root layout data, plus the TanStack server function clients + +3. Update `__root.tsx` + - route loader or `createServerFn` fetches root layout data + - component renders the client shell with loader data + - server functions stay behind `createServerFn` + +## Phase 3: Add Explicit Client-Safe Exports + +Avoid importing the mixed `@payloadcms/tanstack-start` package root from route files. + +Add explicit client-safe subpath exports for pieces that are allowed in the client route graph, for example: + +- router provider +- root provider shell +- client page shell + +Add explicit server-only subpaths for: + +- root layout data builder +- page-state loader helpers +- server function dispatcher + +## Phase 4: Keep Admin Routes on the Same Pattern + +[tanstack-app/app/routes/admin.index.tsx](/Users/orakhmatulin/work/payload/tanstack-app/app/routes/admin.index.tsx) and [tanstack-app/app/routes/admin.$.tsx](/Users/orakhmatulin/work/payload/tanstack-app/app/routes/admin.$.tsx) should keep page-state fetching behind a TanStack server function. + +Follow through on that pattern: + +1. keep page-state fetching behind a TanStack server function +2. keep route modules free of server-only static imports +3. keep [packages/tanstack-start/src/views/TanStackAdminPage.tsx](/Users/orakhmatulin/work/payload/packages/tanstack-start/src/views/TanStackAdminPage.tsx) client-only + +## Phase 5: Re-evaluate Payload-Side Workarounds + +Some Payload changes made during triage may still be valid independently of TanStack. + +Rule: + +- do not keep a Payload change just because it delayed the next client import crash +- keep only changes that are correct on their own merits after the route boundary is fixed + +## Phase 6: Resolve the API Route Warning Separately + +[tanstack-app/app/routes/api.$.ts](/Users/orakhmatulin/work/payload/tanstack-app/app/routes/api.$.ts) still produces the route-tree warning that it does not export `Route`. + +Treat that as a separate cleanup task: + +1. verify the correct TanStack Start API route file convention for this app version +2. move or rename the file to the framework-approved location/pattern +3. ensure the fix does not put the API handler back into the client route graph + +## Validation + +After the rework: + +1. run focused lint on the touched TanStack and Payload files +2. run `PAYLOAD_FRAMEWORK=tanstack-start pnpm run test:e2e admin-root --workers=1` +3. confirm the browser no longer crashes on server-only imports +4. only then debug real UI/test assertion failures + +## Suggested Implementation Order + +1. remove the browser shims +2. extract root layout server data from `RootLayout` +3. add client-safe TanStack root-shell exports/subpaths +4. update `__root.tsx` to use only client-safe static imports +5. rerun focused e2e +6. prune any Payload-side workaround that is no longer justified +7. fix the API route warning separately diff --git a/docs/plans/2026-04-02-ui-framework-agnostic-views.md b/docs/plans/2026-04-02-ui-framework-agnostic-views.md new file mode 100644 index 00000000000..8d16062ff2a --- /dev/null +++ b/docs/plans/2026-04-02-ui-framework-agnostic-views.md @@ -0,0 +1,705 @@ +# UI Framework-Agnostic Views + +## Goal + +Move shared admin view logic toward a framework-agnostic layer in `@payloadcms/ui`, while moving Next-specific request, routing, and React Server Component behavior into `@payloadcms/next`. + +This document supersedes the recent TanStack-specific client-shell direction from: + +- `docs/plans/2026-04-02-tanstack-start-client-rendering.md` +- `docs/plans/2026-04-02-tanstack-start-client-rendering-plan.md` + +Those documents assumed the right answer was to add a TanStack-only page shell beside the existing Next path. The better direction is to make the shared admin view layer portable first, then let each framework package provide its own runtime wrapper. + +## Why The Previous Direction Is Wrong + +The recent TanStack work correctly identified that the current `ui` admin rendering path is not safely consumable by an isomorphic route graph, but it pushed the fix too far into `packages/tanstack-start`. + +That approach has two problems: + +1. It duplicates admin view and template behavior in a second package instead of fixing the boundary in the shared layer. +2. It preserves the assumption that Next keeps the "real" admin path and other frameworks must adapt around it with client-only substitutes. + +If `@payloadcms/ui` is truly the shared admin UI package, it should own the framework-agnostic view contracts and composition rules. `@payloadcms/next` should own the Next-specific runtime and RSC integration. + +## Verified Current Boundary Problem + +### Shared `ui` still owns framework-shaped rendering + +`packages/ui/src/views/Root/RenderRoot.tsx` is described as framework-agnostic, but it still owns: + +- route-to-view orchestration +- auth redirects +- template selection +- direct rendering of payload components through `RenderServerComponent` + +`packages/ui/src/views/Dashboard/index.tsx` is also not just a shared dashboard view. It currently mixes: + +- request-bound data fetches like `getGlobalData(req)` +- server props assembly +- `RenderServerComponent` invocation for dashboard component resolution + +### `RenderServerComponent` is the hidden framework seam + +`packages/ui/src/elements/RenderServerComponent/index.tsx` currently decides: + +- how `PayloadComponent` values are resolved from the import map +- whether a resolved component is treated as an RSC-like server component +- when `serverProps` are merged into the render call + +That is the main coupling point between: + +- shared view and template description in `ui` +- framework-specific server rendering behavior + +### `ui` still contains Next-specific assumptions + +The clearest example is `packages/ui/src/elements/Link/index.tsx`, which imports `next/link.js` directly. That means `ui` still embeds a runtime-specific navigation primitive instead of consuming an adapter-provided one. + +## Current Layering + +```mermaid +flowchart LR + nextEntry[NextRootPage] --> nextInit[NextInitReq] + nextEntry --> uiRoot[ui renderRootPage] + uiRoot --> uiRoute[getRouteData] + uiRoot --> uiTemplate[DefaultTemplate or MinimalTemplate] + uiRoot --> uiRenderer[RenderServerComponent] + uiTemplate --> uiRenderer + uiDashboard[DashboardView] --> uiRenderer +``` + +Today, `packages/next` is mostly a wrapper around a rendering model that still lives in `ui`. + +That is backward for a portable architecture. + +## Target Architecture + +```mermaid +flowchart LR + uiRoute[UiRouteDescriptorBuilder] --> uiView[UiViewDescriptor] + uiView --> uiTemplate[UiTemplateDescriptor] + uiView --> uiSlots[UiSlotDeclarations] + uiDashboard[UiDashboardDescriptor] --> uiView + + nextRuntime[NextRuntime] --> nextAdapter[NextViewAdapter] + nextAdapter --> nextRenderer[NextComponentRenderer] + nextAdapter --> uiRoute + nextRenderer --> uiTemplate + nextRenderer --> uiSlots + + tanstackRuntime[TanStackRuntime] --> tanstackAdapter[TanStackViewAdapter] + tanstackAdapter --> tanstackRenderer[TanStackComponentRenderer] + tanstackAdapter --> uiRoute + tanstackRenderer --> uiTemplate + tanstackRenderer --> uiSlots +``` + +In the target state: + +- `@payloadcms/ui` defines route resolution, shared view descriptors, template contracts, slot declarations, and dashboard behavior. +- `@payloadcms/next` owns Next request initialization, `redirect` / `notFound`, server actions, `next/navigation`, document shell wiring, and RSC-aware component rendering. +- `@payloadcms/tanstack-start` consumes the same shared descriptors through its own runtime adapter instead of recreating view/template logic. + +## Boundary Rules + +### `@payloadcms/ui` should own + +- route and view descriptors +- template and slot contracts +- shared dashboard view composition +- synchronous shared root/bootstrap composition +- framework-neutral router interfaces and provider contracts +- framework-neutral component resolution interfaces + +### `@payloadcms/next` should own + +- `initReq` built on `next/headers` +- `redirect` / `notFound` +- Next-specific invocation transport such as server actions, route handlers, and cookie writes +- `next/navigation` router integration +- `next/link` integration +- async request-bound execution needed to prepare root/bootstrap inputs for RSC +- RSC-aware payload component execution +- app-router document shell concerns + +### `@payloadcms/tanstack-start` should own + +- TanStack route loaders, server functions, or REST wiring +- TanStack router integration +- TanStack-specific request/runtime adapters +- use of shared `ui` descriptors instead of placeholder templates or duplicate views + +### Reusable server-side logic vs framework transport + +`@payloadcms/ui` can still own reusable admin-side logic that happens to run on the server. The important boundary is not "server code vs client code." The important boundary is "shared Payload/business logic vs framework-specific execution transport." + +That means shared files such as: + +- `packages/ui/src/utilities/copyDataFromLocale.ts` +- `packages/ui/src/utilities/buildFormState.ts` +- `packages/ui/src/utilities/buildTableState.ts` +- `packages/ui/src/utilities/slugify.ts` + +can remain in `ui` when they provide reusable logic like: + +- Payload Local API reads/writes +- access checks and permission-aware data shaping +- shared result formatting or merge logic +- framework-neutral request-aware helpers that accept `req` + +What should not be locked into `ui` is a Next-shaped execution model for invoking that logic. + +The adapter packages should own how shared logic is exposed to their runtime: + +- `@payloadcms/next` can call it through a Next server action, route handler, or RSC wrapper +- `@payloadcms/tanstack-start` can call it through a loader, server function, or plain REST request +- another framework might skip server actions entirely and call the same shared logic through a REST API endpoint + +So the long-term contract should be: + +1. keep reusable logic in `ui` where it is genuinely framework-agnostic +2. keep framework transport and runtime wiring in the adapter package +3. avoid making "server actions" themselves the shared primitive, because some frameworks will not support that concept at all + +## Root Bootstrap Boundary Correction + +The immediate target is not "fix nav." The immediate target is to fix the root/bootstrap components without which another framework cannot even load the first admin page. + +The shared layer currently still mixes two different concerns inside those bootstrap paths: + +- synchronous shared composition +- request/runtime-specific async execution + +That split should be inverted. + +### What counts as a root/bootstrap component + +For this phase, "root/bootstrap" means the components and helpers that are required to decide, assemble, and render the very first admin page shell at all. That includes things like: + +- root route/view orchestration +- template selection and shell assembly +- root-level slot preparation +- framework-specific component execution needed by that first page + +`packages/ui/src/elements/Nav/index.tsx` is only an example of the problem, because it sits on the first-page path and currently mixes shared composition with request-bound async work. It is not the whole target by itself. + +### Target shape for root/bootstrap + +The shared `ui` entries on the first-page path should move toward synchronous composition layers that accept already-resolved inputs. + +In practice, that means `ui` should own things like: + +- root descriptors +- template/shell composition +- already-grouped or already-resolved root UI inputs +- framework-neutral slot/component specifications + +And the framework package should own the async wrapper above them. + +### What `next` should do instead + +If Next needs async behavior for RSC, that async boundary should live in `@payloadcms/next`, not in the shared `ui` bootstrap components. + +That Next wrapper should be responsible for: + +- loading request-bound state needed to render the first page +- resolving any RSC/server-rendered root slots +- passing the fully resolved props into the synchronous shared `ui` bootstrap entries + +This is the same broader rule as the rest of the document: `ui` describes and composes, while `next` performs request-bound async execution. + +### What TanStack should do instead + +TanStack should consume the same synchronous shared bootstrap contracts using its own runtime state and router bindings. + +It should not require `ui` to accumulate adapter-motivated helper leaves that are only useful because the shared root/bootstrap boundary is still in the wrong place. + +If a helper like `packages/ui/src/elements/Nav/AdminNavLinks.tsx` exists during migration, it should be treated as transitional unless it becomes part of the canonical shared path that the main `ui` bootstrap components themselves use. + +## Renderer Boundary Proposal + +The current `RenderServerComponent` API is too concrete. It renders immediately and embeds framework behavior in the shared layer. + +The first architectural step should be to replace "render now" with "describe what must be rendered." + +### Proposed split + +1. Keep import-map and payload-component concepts in `ui`, but stop coupling them directly to a framework rendering decision. +2. Introduce a renderer boundary that can be implemented by `next` first and by TanStack later. + +### Proposed shared types + +```ts +type ViewComponentSpec = { + component?: PayloadComponent | React.ComponentType + fallback?: React.ComponentType + clientProps?: object + serverProps?: object +} + +type ViewSlotSpec = { + key: string + spec: ViewComponentSpec +} + +type FrameworkViewRenderer = { + renderComponent: (spec: ViewComponentSpec) => React.ReactNode + renderSlots: (specs: ViewSlotSpec[]) => Record +} +``` + +This is intentionally small. + +The important shift is: + +- `ui` produces `ViewComponentSpec` and `ViewSlotSpec` +- the framework adapter decides how to execute them + +### What changes in `ui` + +The following files should stop invoking rendering directly and instead produce shared declarations or consume an injected renderer: + +- `packages/ui/src/elements/RenderServerComponent/index.tsx` +- `packages/ui/src/views/Root/RenderRoot.tsx` +- `packages/ui/src/templates/Default/index.tsx` +- `packages/ui/src/views/Dashboard/index.tsx` + +### What changes in `next` + +`packages/next` should own the first renderer implementation for the new boundary. + +That implementation should preserve current behavior by continuing to: + +- resolve payload components through the import map +- detect RSC/server component behavior where needed +- merge server props only in the Next runtime + +## Root Refactor: Shared Descriptor + Framework Wrapper + +The current `renderRootPage` path should be split in two layers. + +### Shared `ui` layer + +The `ui` layer should build a root-level descriptor from: + +- `getRouteData` +- auth/public-route decisions +- visible entities +- client config +- template selection +- slot/component specifications + +The output should be a structured description of what the page is, not an already-rendered tree. + +### Framework wrapper layer + +The framework package should provide: + +- request initialization +- framework redirects and not-found behavior +- renderer implementation +- final page/tree assembly + +For Next, this means `packages/next/src/views/Root/index.tsx` becomes a true adapter entrypoint instead of a thin passthrough to a monolithic `ui` renderer. + +## Root-First Migration Slice + +The first implementation slice should prove the architecture with only the root/bootstrap components required to load the first admin page. + +### Scope + +Included: + +- root descriptor boundary +- renderer abstraction +- root/bootstrap shell migration +- Next adapter ownership of async/RSC execution for this slice + +Deferred: + +- dashboard-specific cleanup beyond what the first page needs +- nav-specific cleanup beyond what the first page needs +- auth and minimal-template views like login / forgot / reset / logout / verify / unauthorized / create-first-user +- list, browse-by-folder, and collection-folder rendering +- document, edit, account, API, version, and versions rendering +- splitting TanStack view ownership into per-view modules that mirror the existing Next view tree +- full template cleanup +- broader custom-view support + +### Why Root First + +Until the root/bootstrap boundary is corrected, another framework still cannot reliably load the first page without inheriting Next-shaped assumptions from `ui`. + +That makes the first-page path the highest-leverage proving slice because it exercises: + +- route selection from `getRouteData` +- template composition +- root shell assembly +- root-level slot/component execution +- request/runtime handoff between `ui` and the framework package + +### Root target shape + +The first target is not "finish dashboard" or "finish nav." The first target is to make the root/bootstrap path loadable through a shared synchronous composition contract with adapter-owned async execution above it. + +Instead, it should move toward: + +1. shared root/bootstrap descriptor or composition in `ui` +2. renderer-driven execution of root component specs in the framework package +3. Next preserving current behavior through its adapter implementation +4. the same descriptor/adapter pattern being applied view-by-view after the bootstrap path is stable +5. TanStack moving from a monolithic admin page file to per-view adapter entrypoints that are easy to compare against `packages/next/src/views` + +## Next-Specific Ownership To Expand + +The following `next` files already sit near the correct boundary and should continue moving in that direction: + +- `packages/next/src/layouts/Root/index.tsx` +- `packages/next/src/views/Root/index.tsx` +- `packages/next/src/adapter/RouterProvider.tsx` +- `packages/next/src/utilities/initReq.ts` + +In addition, root/bootstrap primitives currently embedded in `ui` should move behind adapter-owned async wrappers where necessary, starting with: + +- `packages/ui/src/elements/Link/index.tsx` +- the async/request-bound pieces currently mixed into root-path components like `packages/ui/src/elements/Nav/index.tsx` +- other `ui` root/template/bootstrap entries that are currently `async` only because they perform Next-shaped request work + +The long-term goal is that `ui` consumes only framework-neutral router context, while `next` and TanStack each provide their own `Link`, pathname, search-params, and router operations through adapter wiring. + +## Immediate Follow-Through: Collapse `TanStackAdminPage` Into Per-View Adapters + +Once the root/bootstrap boundary exists, the next TanStack step should not be to keep extending `packages/tanstack-start/src/views/TanStackAdminPage.tsx` as a parallel admin implementation. + +That file is now the main duplication hotspot. It already re-implements: + +- default template composition through `TanStackDefaultTemplate` +- dashboard composition through `DashboardView` +- auth/minimal-template views like `LoginView`, `ForgotPasswordView`, `ResetPasswordView`, `LogoutView`, `VerifyView`, `UnauthorizedView`, and `CreateFirstUserView` +- account/document-edit composition through `AccountView` +- list state + rendering through `useListState` and `ListView` +- document state + rendering through `useDocumentState` and `DocumentView` +- top-level view selection through a TanStack-only `renderView` switch + +At the same time, TanStack server state is already leaning on shared `ui` internals in: + +- `packages/tanstack-start/src/views/Root/getPageState.ts` +- `packages/tanstack-start/src/views/Root/serverFunctions.ts` + +That means the next architectural payoff is not another TanStack-only wrapper. It is to first finish turning the shared root/bootstrap `ui` paths into adapter-consumable contracts, then delete the matching custom branches from `TanStackAdminPage.tsx` view by view. + +### Target shape + +`TanStackAdminPage.tsx` should not remain the long-term home for every TanStack admin view. The target should look much closer to `packages/next/src/views`, with TanStack view entrypoints split by view type instead of centralized behind one switch. + +It should either disappear entirely or shrink to a tiny route-level handoff that owns only: + +1. TanStack runtime providers and router bindings +2. handoff from serialized page/server-function state into shared `ui` view entrypoints +3. adapter-specific renderer execution for payload component slots +4. temporary unsupported fallbacks only where the shared contract does not exist yet + +It should stop owning bespoke template markup or hand-maintained root/dashboard/auth/list/document/account wrappers once the shared contracts are available. + +### Target TanStack view structure + +TanStack should move toward a per-view folder layout similar to Next so adapter boundaries are explicit and comparable: + +```text +packages/tanstack-start/src/views/ + Root/ + index.tsx + getPageState.ts + serverFunctions.ts + types.ts + Dashboard/ + index.tsx + Login/ + index.tsx + ForgotPassword/ + index.tsx + ResetPassword/ + index.tsx + Logout/ + index.tsx + Verify/ + index.tsx + Unauthorized/ + index.tsx + CreateFirstUser/ + index.tsx + List/ + index.tsx + Document/ + index.tsx + Account/ + index.tsx + Versions/ + index.tsx + Version/ + index.tsx +``` + +This does not mean TanStack must copy every Next file 1:1. It means the folder structure should communicate the same architecture: one adapter entrypoint per view, shared `ui` contracts underneath, and no single "big ass file" that owns the whole admin surface. + +### Required shared extractions + +To make that collapse possible, the shared layer needs adapter-facing entrypoints that TanStack can consume without copying behavior: + +- root/bootstrap contracts that let TanStack load the first page without depending on async `ui` entrypoints +- template contracts that let TanStack use shared default/minimal composition instead of `TanStackDefaultTemplate` +- dashboard descriptor/state helpers that replace the current client-only `DashboardView` +- auth/minimal-view entrypoints for login, forgot-password, reset-password, logout, verify, unauthorized, and create-first-user flows +- list descriptor/state builders that replace the TanStack-specific `table-state` -> `DefaultListView` bridge +- browse/folder view contracts where TanStack currently needs collection-specific route handling +- document, edit, and account descriptor/state builders that replace the TanStack-specific `tanstack-document-state` -> `DefaultEditView` bridge +- version and versions contracts so edit-related subviews also follow the same adapter boundary +- a supported custom-view contract only after the core built-in views have stopped depending on framework-specific rendering in `ui` + +The important constraint is that these should be shared `ui` contracts, not TanStack-specific forks of `renderListView` or `renderDocument`. + +For auth/minimal views specifically, the end state should be reuse of the shared `ui` view implementations themselves wherever they already exist, not permanent duplication in each adapter package. Files like: + +- `packages/ui/src/views/Login/index.tsx` +- `packages/ui/src/views/ForgotPassword/index.tsx` +- `packages/ui/src/views/ResetPassword/index.tsx` +- `packages/ui/src/views/Logout/index.tsx` +- `packages/ui/src/views/Verify/index.tsx` +- `packages/ui/src/views/Unauthorized/index.tsx` +- `packages/ui/src/views/CreateFirstUser/index.tsx` + +should become the canonical shared view entries consumed by both Next and TanStack once any remaining framework-specific transport or wrapper concerns are pulled up into the adapter layer. + +The same structural rule should apply to the rest of the built-in admin views too. The auth/minimal views are only the first easy slice. After that, the long-term target for `DashboardView`, `ListView`, `DocumentView`, `EditView`, `AccountView`, `VersionView`, and related folder/browse views should still be: + +1. one canonical shared `ui` view implementation or renderer contract +2. thin framework adapters in `next` and TanStack +3. deletion of adapter-specific copies once the shared `ui` view can be consumed directly + +Concrete examples of the shared `ui` side that should move toward that reusable role include: + +- `packages/ui/src/views/Dashboard/index.tsx` +- `packages/ui/src/views/List/RenderListView.tsx` +- `packages/ui/src/views/Document/RenderDocument.tsx` +- `packages/ui/src/views/Edit/index.tsx` + +`packages/next/src/views/Edit/index.tsx` already shows the intended shape in miniature: a very thin framework entrypoint over shared `ui` edit behavior. The same idea should eventually apply to the other built-in views as their remaining framework seams are removed. + +For root/bootstrap specifically, the target is not "extract another helper from `ui` because TanStack needs it." The target is to make the main shared first-page path adapter-consumable, with Next owning any async wrapper above it. + +### Collapse order + +1. identify the root/bootstrap `ui` components required to load the first admin page +2. move async/request-bound work for those components into `packages/next` wrappers +3. make the shared `ui` bootstrap path synchronous and adapter-consumable +4. route TanStack first-page loading through those same shared root/bootstrap contracts +5. split the simplest TanStack views into per-view adapters first, starting with auth/minimal-template views that already map cleanly to Next folders +6. apply the same extraction pattern to dashboard, list, browse/folder, document/edit, account, version, and versions views +7. reduce any remaining TanStack root dispatcher to a thin handoff over per-view entrypoints instead of a second admin implementation + +### Likely touchpoints for this follow-through + +- `packages/tanstack-start/src/views/TanStackAdminPage.tsx` +- new TanStack view folders under `packages/tanstack-start/src/views/*` +- `packages/ui/src/views/Root/RenderRoot.tsx` +- `packages/ui/src/elements/RenderServerComponent/index.tsx` +- `packages/ui/src/elements/Nav/index.tsx` +- `packages/ui/src/elements/Nav/index.client.tsx` +- `packages/tanstack-start/src/views/Root/getPageState.ts` +- `packages/tanstack-start/src/views/Root/serverFunctions.ts` +- `packages/tanstack-start/src/views/Root/types.ts` +- `packages/next/src/views/Root/index.tsx` +- `packages/next/src/layouts/Root/index.tsx` +- `packages/ui/src/templates/Default/index.tsx` +- `packages/ui/src/templates/Minimal/index.tsx` +- `packages/next/src/views/Login/index.tsx` +- `packages/next/src/views/List/index.tsx` +- `packages/next/src/views/Document/index.tsx` +- `packages/next/src/views/Account/index.tsx` + +## Deferred Follow-Up Phases + +### Phase 2: Auth And Minimal Views + +Apply the same pattern to the simpler built-in views first so TanStack stops routing them through one monolith: + +- shared auth/minimal view contracts in `ui` +- framework redirects, router integration, and runtime-specific execution in the adapter package +- TanStack view folders for login, forgot-password, reset-password, logout, verify, unauthorized, and create-first-user only as a migration step toward reusing the shared `ui` entries + +The target for this phase is not "one TanStack file per auth view forever." The target is: + +1. make the existing shared `ui` auth/minimal view entries reusable across frameworks +2. keep any Next-only or TanStack-only transport concerns in the adapter package +3. delete adapter-specific copies once the shared `ui` view can be consumed directly + +`packages/ui/src/views/Logout/index.tsx` is a good example of the desired destination: one canonical shared view implementation that both `@payloadcms/next` and `@payloadcms/tanstack-start` should reuse. The same rule should apply to the other similar `ui` auth/minimal view files once their remaining framework seams are removed. + +Likely touchpoints: + +- `packages/ui/src/views/Login` +- `packages/ui/src/views/ForgotPassword` +- `packages/ui/src/views/ResetPassword` +- `packages/ui/src/views/Logout` +- `packages/ui/src/views/Verify` +- `packages/ui/src/views/Unauthorized` +- `packages/ui/src/views/CreateFirstUser` +- `packages/next/src/views/Login/index.tsx` +- `packages/tanstack-start/src/views/Login/index.tsx` + +### Phase 3: Dashboard, List, And Folder Views + +Apply the same pattern to the main collection navigation surface by separating: + +- shared dashboard/list/folder descriptors and slot declarations in `ui` +- framework rendering and request/runtime behavior in the adapter package +- per-view TanStack adapters instead of inline branches inside a single page component + +The target for this phase is not "one TanStack `DashboardView` / `ListView` / folder view file forever." It is the same pattern as Phase 2: + +1. make the shared `ui` dashboard/list/folder entries reusable across frameworks +2. keep framework-specific request transport and routing in the adapter package +3. delete adapter-specific copies once TanStack and Next can consume the shared `ui` view directly + +### Proven pattern: dashboard as reference implementation + +The dashboard view is now the **reference implementation** for how all other views should converge. The pattern it demonstrates must be repeated for every built-in admin view (list, document/edit, account, version, etc.). + +#### What was done for dashboard + +1. **Shared client component in `ui`**: `ModularDashboardClient`, `RenderWidget`, `useDashboardLayout`, `DashboardStepNav`, `WidgetEditControl`, `WidgetConfigDrawer`, and all related dnd-kit interaction code live in `packages/ui/src/views/Dashboard/Default/ModularDashboard/`. These are purely client-side React components with no RSC or framework dependency. + +2. **Public exports from `@payloadcms/ui`**: `ModularDashboardClient`, `RenderWidget`, `WidgetInstanceClient`, `WidgetItem`, and `DropTargetWidget` are exported from `@payloadcms/ui`'s root client entry. No deep relative cross-package imports are used. + +3. **Next adapter** (`packages/next/src/views/Dashboard/Default/ModularDashboard/index.tsx`): the RSC server wrapper imports `ModularDashboardClient` and types directly from `@payloadcms/ui`. It fetches layout from preferences, server-renders widgets via `RenderServerComponent`, and passes the result to the shared `ModularDashboardClient`. There is no intermediate re-export file — adapter code imports from the `@payloadcms/ui` package boundary, not through local wrapper files. + +4. **TanStack adapter** (`packages/tanstack-start/src/views/Dashboard/index.tsx`): imports `ModularDashboardClient` and `RenderWidget` from `@payloadcms/ui`. Gets layout items from `pageState.pageData.dashboard.layoutItems` (fetched server-side in `getPageState`). Builds `WidgetInstanceClient[]` using `RenderWidget` for each widget (client-side rendering via the `render-widget` server function). Passes `clientLayout` and `widgets` to the same `ModularDashboardClient`. + +5. **Server function dispatch**: TanStack's `handleServerFunctions` falls through to the shared `dispatchServerFunction` from `@payloadcms/ui/utilities/handleServerFunctions`, which already registers `render-widget` and `get-default-layout`. No TanStack-specific handler was needed. + +6. **Same visual result**: both frameworks render the full modular dashboard with drag-and-drop, widget editing, layout persistence, and breadcrumb navigation because both consume the same shared `ModularDashboardClient`. + +#### The key architectural difference + +- **Next** server-renders widgets initially via `RenderServerComponent` (RSC), then hands off to `ModularDashboardClient` for client interaction. +- **TanStack** renders all widgets client-side via `RenderWidget` (which calls the `render-widget` server function on mount), then hands off to the same `ModularDashboardClient`. + +Both approaches produce the same interactive result. The only difference is initial render strategy, which is inherently framework-specific. + +#### This exact pattern must be applied to every remaining view + +The dashboard is not special. The same structural rule applies to **all** built-in admin views: + +| View | Shared `ui` component | Next adapter | TanStack adapter | +| ------------- | ----------------------------------------------------------- | ----------------------------- | --------------------------------------------- | +| Dashboard | `ModularDashboardClient` | RSC wrapper (direct import) | `RenderWidget` + `pageState` | +| List | `DefaultListView` / `RenderListView` | RSC data fetch + pass-through | Server function fetch + same shared component | +| Document/Edit | `DefaultEditView` / `RenderDocument` | RSC data + form state | Server function data + same shared component | +| Account | `AccountClient` / `RenderAccount` | RSC wrapper | Server function + same shared component | +| Version | Shared version diff/comparison UI | RSC wrapper | Server function + same shared component | +| Versions | Shared versions list UI | RSC wrapper | Server function + same shared component | +| Browse/Folder | `DefaultBrowseByFolderView` / `DefaultCollectionFolderView` | RSC + redirect handling | Server function + same shared component | + +For each view, the work is: + +1. Ensure the core client UI component lives in `@payloadcms/ui` and is publicly exported +2. `@payloadcms/next` becomes a thin adapter: RSC data fetching + pass-through to the shared component +3. `@payloadcms/tanstack-start` becomes a thin adapter: server function data fetching + same shared component +4. Both produce the same visual and interactive result +5. No deep relative cross-package imports; always use `@payloadcms/ui` package boundary +6. **No re-export wrapper files in adapter packages.** When `@payloadcms/ui` publicly exports a component or type, adapter code should import it directly from `@payloadcms/ui` — not through a local file that just re-exports the same thing. Re-export wrappers add indirection without value and make it harder to verify that the shared implementation is actually being used + +The main exception remains code genuinely tied to Next's RSC execution model (`RenderServerComponent`, request-bound server props). Those pieces stay adapter-owned while the visual/interaction layer lives in `ui`. + +Likely touchpoints: + +- `packages/ui/src/views/Dashboard/index.tsx` +- `packages/ui/src/views/List/RenderListView.tsx` +- `packages/ui/src/views/List/renderListViewSlots.tsx` +- `packages/next/src/views/Dashboard/index.tsx` +- `packages/next/src/views/List/index.tsx` +- `packages/next/src/views/BrowseByFolder/buildView.tsx` +- `packages/next/src/views/CollectionFolders/buildView.tsx` + +Folder views are also a useful positive precedent here: `packages/next/src/views/BrowseByFolder/buildView.tsx` and `packages/next/src/views/CollectionFolders/buildView.tsx` already reuse shared `DefaultBrowseByFolderView` / `DefaultCollectionFolderView` UI from `@payloadcms/ui` while keeping redirect and request handling in Next. + +**List and folder views must follow the same proven dashboard pattern**: shared client component in `ui`, publicly exported from `@payloadcms/ui`, Next as a thin RSC adapter, TanStack as a thin server-function adapter, same visual result from both. + +### Phase 4: Document, Edit, Account, And Version Views + +Apply the same pattern to edit-heavy views by separating: + +- shared document/account/version descriptors and composition rules in `ui` +- framework execution of payload components, server data, and edit-specific runtime behavior in the adapter package +- TanStack adapters for document, account, version, and versions views that mirror Next's high-level structure + +Again, the end state is not permanent TanStack-only `DocumentView` / `AccountView` / `EditView` copies. **Follow the exact same pattern that was proven with the dashboard:** + +1. The shared client UI component lives in `@payloadcms/ui` and is publicly exported (e.g. `RenderDocument`, `DefaultEditView`, `AccountClient`) +2. `@payloadcms/next` is a thin RSC adapter that fetches data server-side and passes it to the shared component +3. `@payloadcms/tanstack-start` is a thin server-function adapter that fetches data via `pageState` or server functions and passes it to the same shared component +4. Both produce the same visual and interactive result +5. No deep relative cross-package imports; always use `@payloadcms/ui` package boundary +6. Adapter-specific copies disappear as the shared `ui` contracts become consumable directly + +Other likely places that should be audited with the same rule, because they currently appear to contain reusable visual/admin interaction logic in `packages/next` rather than framework-only transport, include: + +- `packages/next/src/views/Version/Default/index.tsx` +- `packages/next/src/views/Version/Restore/index.tsx` +- `packages/next/src/views/API/index.client.tsx` + +These should be treated identically to how the dashboard was handled: if the behavior is primarily UI, form, comparison, modal, or client interaction logic rather than RSC-specific execution, the default implementation should move to `@payloadcms/ui` so both Next and TanStack can reuse it and converge on the same visual result. + +Likely touchpoints: + +- `packages/ui/src/views/Document/RenderDocument.tsx` +- `packages/ui/src/views/Document/renderDocumentSlots.tsx` +- `packages/next/src/views/Document/index.tsx` +- `packages/next/src/views/Account/index.tsx` +- `packages/next/src/views/Version` +- `packages/next/src/views/Versions` + +### Phase 5: Templates And Custom Views + +After the built-in view boundaries are stable: + +- revisit `DefaultTemplate` and `MinimalTemplate` +- move more slot rendering to descriptor-driven contracts +- define the supported boundary for custom admin views across frameworks + +## Non-Goals For Phase 1 + +- Do not finish the full TanStack admin implementation in this slice. +- Do not redesign dashboard, list, or document rendering yet unless the root/bootstrap path requires it. +- Do not preserve the TanStack placeholder-shell direction just because it exists. +- Do not treat `packages/tanstack-start/src/views/TanStackAdminPage.tsx` as acceptable final architecture. +- Do not keep Next-only assumptions in `ui` when they can be moved behind an adapter boundary. + +## Success Criteria + +Phase 1 is successful when: + +1. the first admin page can be described and loaded through a shared root/bootstrap architecture without requiring a TanStack-only template workaround +2. `ui` owns shared route/view/template contracts rather than direct framework rendering decisions +3. `next` clearly owns async RSC and request/runtime execution for the migrated bootstrap slice +4. all remaining built-in admin views, including login, dashboard, list, edit/document, account, and version flows, are clearly staged behind the same boundary model +5. the TanStack target architecture is explicitly per-view and folder-based, not centered on one monolithic admin page file + +The overall effort is successful when **every built-in admin view follows the proven dashboard pattern**: + +6. the shared client UI component for each view lives in `@payloadcms/ui` and is publicly exported from the package boundary (not via deep relative source paths) +7. `@payloadcms/next` is a thin adapter per view: RSC data fetching on the server, then pass-through to the shared `ui` component +8. `@payloadcms/tanstack-start` is a thin adapter per view: server-function or `pageState` data fetching, then pass-through to the same shared `ui` component +9. both frameworks produce the same visual and interactive result for every view +10. no adapter package contains a bespoke reimplementation of view behavior that already exists in `@payloadcms/ui` + +## Recommended First Implementation Steps + +1. identify the minimum shared root/bootstrap components required to load the first admin page +2. introduce a renderer abstraction beside the current `RenderServerComponent` +3. refactor root rendering so `ui` builds a shared bootstrap/page descriptor +4. implement the first Next async wrapper/adapter for that descriptor +5. collapse TanStack first-page loading onto the shared root/bootstrap contracts instead of extending custom wrappers +6. define the per-view TanStack adapter folders that should replace `TanStackAdminPage.tsx` +7. continue view-by-view with auth, dashboard, list, folder, document/edit, account, and version adapters only after that bootstrap path is stable diff --git a/docs/plans/2026-04-03-serializable-server-functions.md b/docs/plans/2026-04-03-serializable-server-functions.md new file mode 100644 index 00000000000..063f5138cac --- /dev/null +++ b/docs/plans/2026-04-03-serializable-server-functions.md @@ -0,0 +1,788 @@ +# Serializable Server Functions Implementation Plan + +> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. + +**Goal:** Split each `render-*` server function handler into a serializable data function (new default in `@payloadcms/ui`) and an RSC rendering wrapper (override in `@payloadcms/next`), making the shared handlers framework-agnostic while preserving Next.js RSC behavior exactly. + +**Architecture:** Two-tier handler pattern — `@payloadcms/ui` defaults return serializable data (safe for any transport including TanStack Start's seroval). `@payloadcms/next` overrides those defaults with RSC handlers via `extraServerFunctions`, producing the same `{ List: ReactNode }` / `{ Document: ReactNode }` output it does today. No behavioral change for Next.js users. + +**Tech Stack:** TypeScript, React 19, Payload CMS monorepo (`pnpm` + Turbo), `@payloadcms/ui`, `@payloadcms/next`, `@payloadcms/tanstack-start` + +--- + +## Background + +### Problem + +The `render-list`, `render-document`, and `render-widget` server function handlers in `@payloadcms/ui` return React nodes (JSX). This works in Next.js because the Flight protocol serializes JSX natively. In TanStack Start, the `createServerFn` transport uses `seroval` for serialization, which crashes on `Symbol(react.transitional.element)`. + +### Current Flow (Broken in TanStack Start) + +``` +Client component calls serverFunction({ name: 'render-list', args }) + → TanStack createServerFn handler + → handleServerFunctions + → dispatchServerFunction + → renderListHandler → renderListView → { List: ReactNode } + → seroval tries to serialize ReactNode → CRASH +``` + +### Target Flow + +``` +TanStack Start (data-only defaults): + dispatchServerFunction → fetchListServerFnData → { listData, preferences } + → seroval serializes plain objects → OK + +Next.js (RSC override): + dispatchServerFunction({ extraServerFunctions: rscServerFunctions }) + → renderListRSCHandler → renderListView → { List: ReactNode } + → Flight serializes ReactNode → OK (unchanged) +``` + +### Architecture Diagram + +```mermaid +flowchart TB + subgraph UI["@payloadcms/ui (shared)"] + DataFn["Data-only handlers (NEW DEFAULT)\nrender-list → fetchListServerFnData\nrender-document → fetchDocumentServerFnData\nrender-widget → fetchWidgetServerFnData"] + RSCFn["RSC handlers (EXPORTED separately)\nrenderListRSCHandler\nrenderDocumentRSCHandler\nrenderWidgetRSCHandler"] + end + + subgraph Next["@payloadcms/next"] + NextHSF["handleServerFunctions\npasses RSC handlers as extraServerFunctions"] + end + + subgraph Tanstack["@payloadcms/tanstack-start"] + TanstackHSF["handleServerFunctions\nuses data-only defaults"] + end + + RSCFn -->|"extraServerFunctions override"| NextHSF + DataFn -->|"baseServerFunctions default"| TanstackHSF +``` + +--- + +## Task 1: Extract `fetchListServerFnData` in `@payloadcms/ui` + +**Files:** + +- Create: `packages/ui/src/views/List/fetchListServerFnData.ts` +- Modify: `packages/ui/src/utilities/handleServerFunctions.ts` +- Reference: `packages/ui/src/views/List/handleServerFunction.tsx` (current RSC handler) +- Reference: `packages/ui/src/views/List/fetchListViewData.ts` (existing data function) + +**Step 1: Create the data-only handler** + +Create `packages/ui/src/views/List/fetchListServerFnData.ts`: + +```ts +import type { + CollectionPreferences, + ResolvedFilterOptions, + ServerFunction, + VisibleEntities, +} from 'payload' + +import { canAccessAdmin, isEntityHidden, UnauthorizedError } from 'payload' +import { applyLocaleFiltering } from 'payload/shared' + +import type { RenderListServerFnArgs } from '../../elements/ListDrawer/types.js' + +import { getClientConfig } from '../../utilities/getClientConfig.js' +import { fetchListViewData } from './fetchListViewData.js' + +export type RenderListDataResult = { + listData: { + collectionPreferences: CollectionPreferences + collectionSlug: string + columns: unknown[] + data: unknown + hasCreatePermission: boolean + hasDeletePermission: boolean + hasTrashPermission: boolean + isGroupBy: boolean + newDocumentURL: string + notFoundDocId: null | string + orderableFieldName: string | undefined + query: Record + queryPreset: unknown + queryPresetPermissions: unknown + resolvedFilterOptions: Record + select: unknown + staticDescription: unknown + viewType: unknown + where: unknown + } + preferences: CollectionPreferences +} + +export const fetchListServerFnData: ServerFunction< + RenderListServerFnArgs, + Promise +> = async (args) => { + const { + collectionSlug, + cookies, + enableRowSelections, + locale, + overrideEntityVisibility, + permissions, + query, + req, + req: { + i18n, + payload, + payload: { config }, + user, + }, + searchParams, + trash, + viewType, + } = args + + if (!req.user) { + throw new UnauthorizedError() + } + + await canAccessAdmin({ req }) + + const clientConfig = getClientConfig({ + config, + i18n, + importMap: payload.importMap, + user, + }) + await applyLocaleFiltering({ clientConfig, config, req }) + + const preferencesKey = `collection-${collectionSlug}` + + const preferences = await payload + .find({ + collection: 'payload-preferences', + depth: 0, + limit: 1, + where: { + and: [ + { key: { equals: preferencesKey } }, + { 'user.relationTo': { equals: user.collection } }, + { 'user.value': { equals: user.id } }, + ], + }, + }) + .then((res) => res.docs[0]?.value as CollectionPreferences) + + const visibleEntities: VisibleEntities = { + collections: payload.config.collections + .map(({ slug, admin: { hidden } }) => + !isEntityHidden({ hidden, user }) ? slug : null, + ) + .filter(Boolean), + globals: payload.config.globals + .map(({ slug, admin: { hidden } }) => + !isEntityHidden({ hidden, user }) ? slug : null, + ) + .filter(Boolean), + } + + const listData = await fetchListViewData({ + clientConfig, + collectionSlug, + overrideEntityVisibility, + permissions, + query, + req, + searchParams: searchParams ?? {}, + trash, + viewType: viewType ?? 'list', + visibleEntities, + }) + + // Convert Map to Record for serialization + const serializedFilterOptions: Record = {} + for (const [key, value] of listData.resolvedFilterOptions) { + serializedFilterOptions[key] = value + } + + return { + listData: { + ...listData, + query: listData.query as unknown as Record, + resolvedFilterOptions: serializedFilterOptions, + }, + preferences, + } +} +``` + +**Step 2: Verify the file compiles** + +Run: `cd packages/ui && npx tsc --noEmit src/views/List/fetchListServerFnData.ts 2>&1 | head -20` +Expected: No errors (or only pre-existing ones) + +**Step 3: Commit** + +```bash +git add packages/ui/src/views/List/fetchListServerFnData.ts +git commit -m "feat(ui): extract fetchListServerFnData for serializable render-list" +``` + +--- + +## Task 2: Extract `fetchDocumentServerFnData` in `@payloadcms/ui` + +**Files:** + +- Create: `packages/ui/src/views/Document/fetchDocumentServerFnData.ts` +- Reference: `packages/tanstack-start/src/views/Root/serverFunctions.ts` (source of `tanstackDocumentStateHandler`) + +**Step 1: Create the data-only handler** + +Move the `tanstackDocumentStateHandler` logic from `packages/tanstack-start/src/views/Root/serverFunctions.ts` into `packages/ui/src/views/Document/fetchDocumentServerFnData.ts`. The function: + +- Accepts the same args (collectionSlug, docID, documentSubViewType, globalSlug, etc.) +- Calls `getDocumentData`, `getDocPreferences`, `getDocumentPermissions`, `buildFormState`, `getIsLocked`, `getVersions`, `handleLivePreview`, `handlePreview` +- Returns `RenderDocumentDataResult` — all serializable + +The key imports that need updating (these are already in `@payloadcms/ui`): + +- `reduceToSerializableFields` from `@payloadcms/ui/shared` +- `buildFormState` from `@payloadcms/ui/utilities/buildFormState` +- `getDocPreferences` from `@payloadcms/ui/views/Document/getDocPreferences` +- `getDocumentData` from `@payloadcms/ui/views/Document/getDocumentData` +- `getDocumentPermissions` from `@payloadcms/ui/views/Document/getDocumentPermissions` +- `getIsLocked` from `@payloadcms/ui/views/Document/getIsLocked` +- `getVersions` from `@payloadcms/ui/views/Document/getVersions` +- `handleLivePreview` from `@payloadcms/ui/utilities/handleLivePreview` +- `handlePreview` from `@payloadcms/ui/utilities/handlePreview` + +All these are already in `@payloadcms/ui`, so the function can live there with local imports. + +Export type: + +```ts +export type RenderDocumentDataResult = { + apiURL?: string + collectionSlug?: string + currentEditor?: unknown + data?: Data + docPermissions?: Record + globalSlug?: string + hasDeletePermission?: boolean + hasPublishedDoc: boolean + hasPublishPermission?: boolean + hasSavePermission?: boolean + hasTrashPermission?: boolean + id?: number | string + initialState?: DocumentViewClientProps['formState'] + isEditing?: boolean + isLivePreviewEnabled?: boolean + isLocked: boolean + isPreviewEnabled?: boolean + isTrashed?: boolean + lastUpdateTime: number + livePreviewBreakpoints?: unknown[] + livePreviewURL?: string + mostRecentVersionIsAutosaved: boolean + preferences?: DocumentPreferences + previewURL?: string + redirectURL?: string + typeofLivePreviewURL?: 'function' | 'string' + unpublishedVersionCount: number + versionCount: number +} +``` + +**Step 2: Verify the file compiles** + +Run: `cd packages/ui && npx tsc --noEmit src/views/Document/fetchDocumentServerFnData.ts 2>&1 | head -20` +Expected: No errors + +**Step 3: Commit** + +```bash +git add packages/ui/src/views/Document/fetchDocumentServerFnData.ts +git commit -m "feat(ui): extract fetchDocumentServerFnData for serializable render-document" +``` + +--- + +## Task 3: Extract `fetchWidgetServerFnData` in `@payloadcms/ui` + +**Files:** + +- Create: `packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/fetchWidgetServerFnData.ts` +- Reference: `packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts` (current RSC handler) + +**Step 1: Create the data-only handler** + +```ts +import type { PayloadComponent, ServerFunction } from 'payload' + +import type { RenderWidgetServerFnArgs } from './renderWidgetServerFn.js' + +import { extractLocaleData } from '../utils/localeUtils.js' + +export type RenderWidgetDataResult = { + Component?: PayloadComponent + error?: string + widgetData?: Record + widgetSlug: string +} + +export const fetchWidgetServerFnData: ServerFunction< + RenderWidgetServerFnArgs, + Promise +> = async ({ req, widgetData, widgetSlug }) => { + if (!req.user) { + throw new Error('Unauthorized') + } + + const { widgets } = req.payload.config.admin.dashboard + const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug) + + if (!widgetConfig) { + return { error: `Widget "${widgetSlug}" not found`, widgetSlug } + } + + const localeFilteredData = widgetConfig.fields?.length + ? extractLocaleData( + widgetData || {}, + req.locale || 'en', + widgetConfig.fields as any, + ) + : widgetData || {} + + return { + Component: widgetConfig.Component, + widgetData: localeFilteredData, + widgetSlug, + } +} +``` + +**Step 2: Verify the file compiles** + +Run: `cd packages/ui && npx tsc --noEmit src/views/Dashboard/Default/ModularDashboard/renderWidget/fetchWidgetServerFnData.ts 2>&1 | head -20` +Expected: No errors + +**Step 3: Commit** + +```bash +git add packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/fetchWidgetServerFnData.ts +git commit -m "feat(ui): extract fetchWidgetServerFnData for serializable render-widget" +``` + +--- + +## Task 4: Update `baseServerFunctions` and export RSC handlers + +**Files:** + +- Modify: `packages/ui/src/utilities/handleServerFunctions.ts` + +**Step 1: Update the dispatch map** + +In `packages/ui/src/utilities/handleServerFunctions.ts`: + +1. Import the new data-only handlers +2. Rename current RSC handlers in the import to clarify their role +3. Replace `render-list`, `render-document`, `render-widget` in `baseServerFunctions` with data-only handlers +4. Export the RSC handlers separately as `rscServerFunctions` + +```ts +// New imports +import { fetchDocumentServerFnData } from '../views/Document/fetchDocumentServerFnData.js' +import { fetchWidgetServerFnData } from '../views/Dashboard/Default/ModularDashboard/renderWidget/fetchWidgetServerFnData.js' +import { fetchListServerFnData } from '../views/List/fetchListServerFnData.js' + +// Existing imports (renamed for clarity) +import { renderListHandler as renderListRSCHandler } from '../views/List/handleServerFunction.js' +import { renderDocumentHandler as renderDocumentRSCHandler } from '../views/Document/handleServerFunction.js' +import { renderWidgetHandler as renderWidgetRSCHandler } from '../views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js' + +// baseServerFunctions uses data-only handlers as defaults +export const baseServerFunctions: Record = { + // ... unchanged handlers ... + 'render-document': fetchDocumentServerFnData, // was renderDocumentHandler + 'render-list': fetchListServerFnData, // was renderListHandler + 'render-widget': fetchWidgetServerFnData, // was renderWidgetHandler + // ... unchanged handlers ... +} + +// RSC handlers for frameworks that support React element serialization (Next.js Flight) +export const rscServerFunctions: Record = { + 'render-document': renderDocumentRSCHandler, + 'render-list': renderListRSCHandler, + 'render-widget': renderWidgetRSCHandler, +} +``` + +**Step 2: Verify the file compiles** + +Run: `cd packages/ui && npx tsc --noEmit src/utilities/handleServerFunctions.ts 2>&1 | head -20` +Expected: No errors + +**Step 3: Commit** + +```bash +git add packages/ui/src/utilities/handleServerFunctions.ts +git commit -m "feat(ui): default baseServerFunctions to data-only, export rscServerFunctions separately" +``` + +--- + +## Task 5: Update `@payloadcms/next` to pass RSC overrides + +**Files:** + +- Modify: `packages/next/src/utilities/handleServerFunctions.ts` + +**Step 1: Import and pass RSC handlers** + +```ts +import type { ServerFunctionHandler } from 'payload' + +import { + dispatchServerFunction, + rscServerFunctions, +} from '@payloadcms/ui/utilities/handleServerFunctions' +import { notFound, redirect } from 'next/navigation.js' + +import { initReq } from './initReq.js' + +export const handleServerFunctions: ServerFunctionHandler = async (args) => { + const { + name: fnKey, + args: fnArgs, + config: configPromise, + importMap, + serverFunctions: extraServerFunctions, + } = args + + const { cookies, locale, permissions, req } = await initReq({ + configPromise, + importMap, + key: 'RootLayout', + }) + + const augmentedArgs = { + ...fnArgs, + cookies, + importMap, + locale, + notFound: () => notFound(), + permissions, + redirect: (url: string) => redirect(url), + req, + } + + return dispatchServerFunction({ + name: fnKey, + augmentedArgs, + extraServerFunctions: { + ...rscServerFunctions, + ...extraServerFunctions, + }, + }) +} +``` + +The only change is importing `rscServerFunctions` and merging them into `extraServerFunctions`. RSC handlers take priority because they come first in the spread; user-provided `extraServerFunctions` can still override. + +**Step 2: Verify Next.js admin panel still works** + +Run: `pnpm run dev` (or `pnpm run dev fields` or similar test suite) +Navigate to: `http://localhost:3000/admin` +Expected: Dashboard, list views, document views, list drawers, widget rendering all work exactly as before. + +**Step 3: Commit** + +```bash +git add packages/next/src/utilities/handleServerFunctions.ts +git commit -m "feat(next): pass rscServerFunctions as extraServerFunctions to preserve RSC rendering" +``` + +--- + +## Task 6: Update `ListDrawer/DrawerContent.tsx` to handle data responses + +**Files:** + +- Modify: `packages/ui/src/elements/ListDrawer/DrawerContent.tsx` + +**Step 1: Update the refresh callback** + +The drawer currently does: + +```ts +const result = (await serverFunction({ + name: 'render-list', + args, +})) as RenderListServerFnReturnType +setListView(result?.List || null) +``` + +Update to detect whether the response is RSC (has `List`) or data-only (has `listData`): + +```ts +const result = await serverFunction({ name: 'render-list', args }) + +if (result?.List) { + // RSC path (Next.js) — use pre-rendered JSX directly + setListView(result.List) +} else if (result?.listData) { + // Data path (TanStack Start / non-RSC) — render client-side from data + setListView( + + + + ) +} else { + setListView(null) +} +``` + +Import `DefaultListView` from `../../views/List/index.js` and `ListQueryProvider` from `../../providers/ListQuery/index.js`. + +**Step 2: Verify list drawers still work in Next.js** + +Run: `pnpm run dev` +Navigate to a document with a relationship field → open the list drawer +Expected: Drawer shows the collection list with full table, filters, etc. (RSC path is used) + +**Step 3: Commit** + +```bash +git add packages/ui/src/elements/ListDrawer/DrawerContent.tsx +git commit -m "feat(ui): ListDrawer handles both RSC and data-only render-list responses" +``` + +--- + +## Task 7: Update `RenderWidget.tsx` to handle data responses + +**Files:** + +- Modify: `packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.tsx` + +**Step 1: Update the render callback** + +Currently: + +```ts +const result = (await serverFunction({ + name: 'render-widget', + args, +})) as RenderWidgetServerFnReturnType +setComponent(result.component) +``` + +Update to handle both RSC and data responses. For the data path, use `importMap` to resolve the widget component and render it client-side: + +```ts +const result = await serverFunction({ name: 'render-widget', args }) + +if (result?.component) { + // RSC path — pre-rendered JSX + setComponent(result.component) +} else if (result?.Component) { + // Data path — resolve component from importMap and render client-side + // The Component is a PayloadComponent (string path like "MyWidget#default") + // Resolve it from the import map and create the element + const { resolveComponentFromImportMap } = await import( + '@payloadcms/ui/utilities/resolveComponentFromImportMap' + ) + const ResolvedComponent = resolveComponentFromImportMap( + result.Component, + importMap, + ) + if (ResolvedComponent) { + setComponent( + React.createElement(ResolvedComponent, { widgetData: result.widgetData }), + ) + } else { + setComponent( + React.createElement( + 'div', + null, + `Widget component not found: ${result.widgetSlug}`, + ), + ) + } +} else if (result?.error) { + setComponent(React.createElement('div', null, result.error)) +} +``` + +Note: `RenderWidget` needs access to `importMap` from context. Check if there's an existing `useImportMap` hook or if it needs to be threaded through props/context. + +**Step 2: Verify dashboard widgets render in Next.js** + +Run: `pnpm run dev` +Navigate to: `http://localhost:3000/admin` (dashboard) +Expected: Widgets render as before + +**Step 3: Commit** + +```bash +git add packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.tsx +git commit -m "feat(ui): RenderWidget handles both RSC and data-only render-widget responses" +``` + +--- + +## Task 8: Clean up `@payloadcms/tanstack-start` + +**Files:** + +- Modify: `packages/tanstack-start/src/utilities/handleServerFunctions.ts` +- Modify: `packages/tanstack-start/src/views/Root/serverFunctions.ts` +- Modify: `packages/tanstack-start/src/views/Root/getPageState.ts` + +**Step 1: Simplify `handleServerFunctions.ts`** + +Remove: + +- The `renderToString` import and `serializeReactNodes` function +- The `SERVER_FNS_WITH_REACT_NODES` set +- The `tanstack-document-state` special case (the default `render-document` now returns serializable data) +- The `isRenderedHTML` / `RenderedHTML` exports + +The file becomes: + +```ts +import type { ServerFunctionHandler } from 'payload' + +import { dispatchServerFunction } from '@payloadcms/ui/utilities/handleServerFunctions' +import { notFound, redirect } from '@tanstack/react-router' + +import { TANSTACK_INVALIDATE } from '../views/Root/serverFunctions.js' +import { initReq } from './initReq.js' + +export const handleServerFunctions: ServerFunctionHandler = async (args) => { + const { name: fnKey, args: fnArgs, config, importMap, serverFunctions } = args + const invalidateArgs = fnArgs as + | { __tanstackInvalidate?: boolean } + | undefined + + const { cookies, locale, permissions, req } = await initReq({ + config, + importMap, + key: 'RootLayout', + }) + + const augmentedArgs = { + ...fnArgs, + cookies, + importMap, + locale, + notFound: () => { + throw notFound() + }, + permissions, + redirect: (url: string) => { + throw redirect({ to: url }) + }, + req, + } + + if ( + (fnKey === 'render-document' || fnKey === 'render-list') && + invalidateArgs?.__tanstackInvalidate === true + ) { + return TANSTACK_INVALIDATE + } + + return dispatchServerFunction({ + name: fnKey, + augmentedArgs, + extraServerFunctions: serverFunctions, + }) +} +``` + +**Step 2: Simplify `serverFunctions.ts`** + +Remove the `tanstackDocumentStateHandler` function (now lives in `@payloadcms/ui` as `fetchDocumentServerFnData`). Keep only `TANSTACK_INVALIDATE` and the type. + +**Step 3: Update `getPageState.ts`** + +Update the import for the document data function — change from local `tanstackDocumentStateHandler` to the shared `fetchDocumentServerFnData` from `@payloadcms/ui`. + +**Step 4: Remove `renderToString` from `TanStackRootProvider`** + +Remove the `hydrateRenderedHTML` function and the `isRenderedHTML` check from `packages/tanstack-start/src/layouts/Root/TanStackRootProvider.tsx`. The `__tanstack_rendered_html` marker is no longer needed. + +**Step 5: Commit** + +```bash +git add packages/tanstack-start/ +git commit -m "refactor(tanstack-start): remove renderToString workaround, use shared data-only handlers" +``` + +--- + +## Task 9: Verify Next.js admin panel + +**Step 1: Start the Next.js dev server** + +Run: `pnpm run dev` +Navigate to: `http://localhost:3000/admin` + +**Step 2: Test critical flows** + +- Dashboard: widgets render +- List view: table, filters, column state, bulk actions work +- Document view: form renders, save works +- List drawer: open a relationship field's drawer, verify list loads +- Account view: renders correctly + +Expected: All flows work identically to before the refactor. + +**Step 3: Run integration tests** + +Run: `pnpm run test:int admin-root` +Expected: All tests pass + +--- + +## Task 10: Verify TanStack Start admin panel + +**Step 1: Start the TanStack Start dev server** + +Run: `pnpm dev:tanstack` + +**Step 2: Test with Playwright MCP** + +Navigate to: `http://localhost:3000/admin` + +- Dashboard: no seroval errors, widgets render (data path) +- List view: shell renders from loader data, server function returns serializable data +- Document view: form renders from loader data +- Console: no `Seroval Error` messages + +**Step 3: Commit summary** + +```bash +git add -A +git commit -m "feat: serializable server functions — data-only defaults with RSC override in next.js" +``` diff --git a/docs/plans/architecture-framework-agnostic-admin.md b/docs/plans/architecture-framework-agnostic-admin.md new file mode 100644 index 00000000000..20dfd7f4e22 --- /dev/null +++ b/docs/plans/architecture-framework-agnostic-admin.md @@ -0,0 +1,414 @@ +# Architecture: Framework-Agnostic Admin UI + +## The Idea in One Sentence + +Payload's admin UI lives in `@payloadcms/ui` as shared React components. Framework packages (`@payloadcms/next`, `@payloadcms/tanstack-start`) are thin adapters that fetch data and wire routing — they don't own UI. + +## Three Layers + +``` +┌─────────────────────────────────────────────────────────┐ +│ Framework Adapter │ +│ (@payloadcms/next or @payloadcms/tanstack-start) │ +│ │ +│ - Request init (headers, cookies) │ +│ - Data fetching (RSC / server functions / loaders) │ +│ - Navigation primitives (redirect, notFound, Link) │ +│ - Route handlers (REST, GraphQL) │ +└────────────────────────┬────────────────────────────────┘ + │ passes data as props +┌────────────────────────▼────────────────────────────────┐ +│ Shared UI (@payloadcms/ui) │ +│ │ +│ - All React components (client + server) │ +│ - View composition (Dashboard, List, Document, etc.) │ +│ - Templates (Default, Minimal) │ +│ - Server function handlers (form-state, render-list…) │ +│ - RouterProvider contract (framework-neutral hooks) │ +└────────────────────────┬────────────────────────────────┘ + │ +┌────────────────────────▼────────────────────────────────┐ +│ Core (payload) │ +│ │ +│ - Collections, fields, hooks, access control │ +│ - Local API, database adapters │ +│ - AdminAdapter interface + createAdminAdapter helper │ +│ - Config types │ +└─────────────────────────────────────────────────────────┘ +``` + +## AdminAdapter Interface + +Every framework implements this contract, similar to how database adapters work: + +```ts +// Defined in payload core +interface BaseAdminAdapter { + name: string + + initReq: (args) => Promise // Read request context + getCookie / setCookie / deleteCookie // Cookie management + handleServerFunctions: ServerFunctionHandler // Dispatch server functions + notFound: () => never // Framework-specific 404 + redirect: (url: string) => never // Framework-specific redirect + RouterProvider: React.ComponentType // Client-side router context + createRouteHandlers: () => RouteHandlers // REST + GraphQL routes +} +``` + +Usage in config: + +```ts +export default buildConfig({ + db: postgresAdapter({ ... }), + admin: { + adapter: nextAdapter(), // or tanstackStartAdapter() + }, +}) +``` + +## RouterProvider: One Hook API, Two Implementations + +`@payloadcms/ui` defines a `RouterProvider` context. Each adapter fills it with its own primitives. All UI components use framework-neutral hooks. + +``` +@payloadcms/ui defines: useRouter, usePathname, useSearchParams, useParams, Link + ▲ + ┌───────────────────────────────┼──────────────────────────────────┐ + │ │ │ + NextRouterProvider TanStackRouterProvider (future adapter) + wraps next/navigation wraps @tanstack/react-router wraps ??? + wraps next/link wraps TanStack Link +``` + +**Next.js adapter** (`packages/next/src/adapter/RouterProvider.tsx`): + +```tsx +const NextRouterProvider = ({ children }) => { + const nextRouter = useNextRouter() + const pathname = useNextPathname() + // ... map to RouterContextType + return {children} +} +``` + +**TanStack adapter** (`packages/tanstack-start/src/adapter/RouterProvider.tsx`): + +```tsx +function TanStackRouterProvider({ children }) { + const router = useRouter() + const location = useLocation() + // ... map to RouterContextType + return {children} +} +``` + +Result: `@payloadcms/ui` has zero `next/*` or `@tanstack/*` imports. + +## The Pattern: Two Layers per View + +Every built-in admin view is split into two shared layers, plus a thin adapter wrapper: + +1. **Data function** (shared, `@payloadcms/ui`) — fetches and returns plain serializable data. No React nodes. +2. **Builder / render function** (shared, `@payloadcms/ui`) — takes the data, produces rendered JSX with providers and slots. +3. **Adapter wrapper** (per-framework) — wires the data into the component using the framework's data-fetching primitive (RSC, loader, server function). + +The data function is the key abstraction. Both Next RSC and TanStack loaders call it to get the same serializable data before any rendering happens. + +### Dashboard Example (Reference) + +**1. Shared UI** — `@payloadcms/ui` owns both the builder and the client components: + +```tsx +// packages/ui/src/views/Dashboard/index.tsx +// renderDashboardView — async builder that fetches global data, +// assembles nav groups, and returns { Dashboard: ReactNode } + +// packages/ui/src/views/Dashboard/Default/ModularDashboard/ +// ModularDashboardClient, RenderWidget, etc. +// Pure React client components. No framework dependency. +``` + +**2. Next.js adapter** — RSC wrapper that calls the shared builder: + +```tsx +// packages/next/src/views/Dashboard/index.tsx +import { renderDashboardView } from '@payloadcms/ui/views/Dashboard' + +export const DashboardView = async (args) => { + const { Dashboard } = await renderDashboardView(args) + return Dashboard +} +``` + +**3. TanStack adapter** — renders immediately from loader-supplied data: + +```tsx +// packages/tanstack-start/src/views/Dashboard/index.tsx +export function DashboardView({ pageState }) { + const clientLayout = layoutItems.map(item => ({ + component: , + item: { id: item.id, ... }, + })) + + return +} +``` + +Both frameworks render the same `ModularDashboardClient`. Same drag-and-drop, same widget editing, same visual result. No `useEffect`, no loading spinner. + +### Data-First View Loading + +Views that are more complex than the Dashboard (List, Document, Account) use a **data-first** pattern: the TanStack loader fetches serializable data in `getPageState`, and the adapter component renders immediately from that data. + +```mermaid +sequenceDiagram + participant Loader as TanStack Loader (getPageState) + participant DataFn as Shared Data Function + participant Comp as Adapter Component + + Loader->>DataFn: fetchListViewData(req, collection, query) + DataFn-->>Loader: { docs, columns, permissions, ... } + Note over Loader: Serialized into pageData.list + Loader->>Comp: pageState.pageData.list + Note over Comp: Renders shell immediately — no LoadingOverlay + Note over Comp: Table/slots load via server function in parallel +``` + +The shared data functions live in `@payloadcms/ui` and are called by both frameworks: + +| View | Data function | Location | +| ------------ | --------------------------------------- | ------------------------------------------------------------------ | +| List / Trash | `fetchListViewData()` | `@payloadcms/ui/views/List/fetchListViewData` | +| Document | `tanstackDocumentStateHandler()` | `@payloadcms/tanstack-start` (to be extracted to `@payloadcms/ui`) | +| Account | Same as Document (with `account: true`) | Same | + +`getPageState` calls the appropriate data function based on `viewType`: + +```ts +// In getPageState, after determining viewType: +if (pageViewType === 'list' || pageViewType === 'trash') { + pageData = { ...pageData, list: await fetchListViewData({ req, ... }) } +} +if (pageViewType === 'document') { + pageData = { ...pageData, document: await tanstackDocumentStateHandler({ req, ... }) } +} +if (pageViewType === 'account') { + pageData = { ...pageData, document: await tanstackDocumentStateHandler({ req, account: true, ... }) } +} +``` + +### Structural Pattern + +Every view follows this split: + +- `@payloadcms/ui` exports a shared **data function** (`fetchListViewData`) that returns serializable data, and an async **builder** (`renderListView`) that composes data + JSX +- `@payloadcms/next` owns the **RSC wrapper** that calls the builder and handles framework errors (`notFound`, `redirect`) +- `@payloadcms/tanstack-start` owns a **data-first wrapper** that reads loader data from `pageState.pageData`, renders the view shell immediately, and loads non-serializable parts (Table, slots) via server functions + +The data function is the shared code. The builder composes data + rendering. The adapter wires framework-specific data loading. + +### List View Example + +**1. Shared UI** — `@payloadcms/ui` owns `fetchListViewData` (data layer), `renderListView` (builder), and `DefaultListView` (client component). + +`fetchListViewData` extracts all data-fetching logic: permission checks, query/preference resolution, `payload.find`, version enrichment, filter options, and permission computation. Returns only serializable data. `renderListView` calls it internally, then handles table rendering, filters, and JSX assembly. + +**2. Next.js adapter** — calls the shared builder, handles `notFound()`: + +```tsx +// packages/next/src/views/List/index.tsx +export const ListView = async (args) => { + try { + const { List } = await renderListView({ ...args }) + return List + } catch (error) { + if (error.message === 'not-found') notFound() + } +} +``` + +**3. TanStack adapter** — renders shell from loader data, loads Table via server function: + +```tsx +// packages/tanstack-start/src/views/List/index.tsx +export function ListView({ pageState }) { + const listData = pageState.pageData?.list // from loader + const [renderedList, setRenderedList] = useState(null) + + // Server function loads Table/columnState/filters/slots in parallel + useEffect(() => { serverFunction('render-list', ...).then(...) }, [...]) + + // When server function completes, swap to full rendered view + if (renderedList) return renderedList + + // Immediate render from loader data — no LoadingOverlay + return ( + + + + ) +} +``` + +The user sees the list header, controls, and pagination immediately. The table body appears when the server function returns. + +### Document View Example + +**1. Next.js** — calls `renderDocument` server-side via RSC: + +``` +Next.js: RSC page → renderDocument() → +``` + +**2. TanStack** — renders document providers directly from loader data: + +```tsx +// packages/tanstack-start/src/views/Document/index.tsx +export function DocumentView({ pageState }) { + const documentData = pageState.pageData?.document // from loader + + // Version subviews still use server function fallback + if (!documentData || isVersionView) return + + return ( + + + + + + ) +} +``` + +No loading overlay. The document form, permissions, and editing state render immediately from the serialized loader data. The `tanstackDocumentStateHandler` (which already produced serializable data) now runs in the loader instead of via `useEffect`. + +### The Hybrid: Non-Serializable Parts + +Some view parts are `React.ReactNode` and cannot pass through JSON serialization: + +| Non-serializable part | Where it comes from | How TanStack handles it | +| -------------------------------------- | -------------------------------------- | -------------------------------------------------- | +| `Table` (list rows) | `renderTable()` / `buildColumnState()` | Server function after mount (like `RenderWidget`) | +| `renderedFilters` | `renderFilters()` | Server function after mount | +| List slots (`AfterList`, `BeforeList`) | `renderListViewSlots()` | Server function after mount | +| Document slots (Save, Publish) | `renderDocumentSlots()` | Provider-based (already in `DocumentInfoProvider`) | + +This follows the same proven pattern as Dashboard widgets: metadata loads in the loader, heavy JSX renders on demand via server function. The key improvement is eliminating the full-page `LoadingOverlay` — the view shell renders immediately. + +## Server Functions: Shared Logic, Framework Transport + +Reusable server-side logic lives in `@payloadcms/ui`. Each framework provides its own transport: + +``` +@payloadcms/ui registers handlers: + 'form-state' → buildFormStateHandler + 'render-list' → renderListHandler + 'render-document' → renderDocumentHandler + 'render-widget' → renderWidgetHandler + 'table-state' → buildTableStateHandler + ... + +Next.js calls them via: server actions ('use server') +TanStack calls them via: createServerFn() from @tanstack/start +(future) could call via: plain REST endpoints +``` + +Both frameworks share the same `dispatchServerFunction` from `@payloadcms/ui`. Framework-specific setup (request init, cookie access) happens in each adapter's `handleServerFunctions` before dispatching to the shared handler. + +## File Structure + +``` +packages/ +├── payload/ # Core: types, Local API, AdminAdapter interface +├── ui/ # Shared UI: all React components and views +│ └── src/ +│ ├── views/ +│ │ ├── Dashboard/ # Shared dashboard components +│ │ ├── List/ +│ │ │ ├── fetchListViewData.ts # Shared data function (serializable) +│ │ │ ├── RenderListView.tsx # Builder (calls fetchListViewData + renders JSX) +│ │ │ ├── index.tsx # DefaultListView client component +│ │ │ └── ... +│ │ ├── Document/ +│ │ │ ├── RenderDocument.tsx # Builder +│ │ │ ├── DocumentView.tsx # Server wrapper +│ │ │ └── ... +│ │ ├── Login/ # Shared login form +│ │ └── ... +│ ├── templates/ # Default + Minimal shell templates +│ ├── elements/ # Reusable UI elements +│ ├── providers/ # RouterProvider, ServerFunctions, etc. +│ └── utilities/ # handleServerFunctions registry +│ +├── next/ # Next.js adapter (thin) +│ └── src/ +│ ├── adapter/ # nextAdapter(), NextRouterProvider +│ ├── views/ # Per-view thin wrappers (RSC → shared builder) +│ │ ├── Dashboard/ +│ │ ├── List/ # RSC → renderListView() → rendered JSX +│ │ ├── Document/ # RSC → renderDocument() → rendered JSX +│ │ └── ... +│ ├── layouts/Root/ # Next.js root layout +│ └── utilities/ # initReq, handleServerFunctions +│ +├── tanstack-start/ # TanStack adapter (thin) +│ └── src/ +│ ├── adapter/ # TanStackRouterProvider +│ ├── views/ +│ │ ├── Root/ +│ │ │ ├── getPageState.ts # Loader: calls fetchListViewData, etc. +│ │ │ ├── types.ts # SerializablePageData (list, document, etc.) +│ │ │ └── serverFunctions.ts # tanstackDocumentStateHandler +│ │ ├── Dashboard/ # Reads pageData.dashboard → immediate render +│ │ ├── List/ # Reads pageData.list → shell + async Table +│ │ ├── Document/ # Reads pageData.document → immediate render +│ │ ├── Account/ # Reads pageData.document → immediate render +│ │ └── ... +│ ├── layouts/Root/ # TanStack root layout +│ └── utilities/ # initReq, handleServerFunctions +``` + +## The Rule + +For any view, ask: **where does this code belong?** + +| If the code… | It belongs in… | +| ---------------------------------------- | ---------------------------- | +| Renders UI (React components, JSX) | `@payloadcms/ui` | +| Fetches data via Payload Local API | `@payloadcms/ui` (data fn) | +| Returns serializable view data (no JSX) | `@payloadcms/ui` (data fn) | +| Composes data + JSX into rendered view | `@payloadcms/ui` (builder) | +| Uses `next/navigation` or `next/headers` | `@payloadcms/next` (adapter) | +| Uses `@tanstack/react-router` | `@payloadcms/tanstack-start` | +| Calls `redirect()` or `notFound()` | adapter (passed as callback) | +| Defines collection/field/hook logic | `payload` (core) | + +## What's Different Between Adapters + +The only things that differ are **how** data reaches the shared component: + +| Concern | Next.js | TanStack Start | +| ------------------- | ---------------------------------- | ---------------------------------------- | +| Initial data fetch | RSC calls shared builder directly | Loader calls shared data function | +| View rendering | Builder returns rendered JSX (RSC) | Loader provides data → component renders | +| Non-serializable UI | Server-rendered in builder | Server function on demand after mount | +| Server functions | `'use server'` actions | `createServerFn()` | +| Request context | `next/headers` cookies/headers | `vinxi/http` getWebRequest | +| Navigation | `next/navigation` hooks + Link | `@tanstack/react-router` hooks | +| Redirect / NotFound | `next/navigation` throw helpers | `@tanstack/react-router` throws | +| Route definitions | File-system routing (`app/`) | TanStack route tree | + +Everything else — the data functions, the components, the form state, the list rendering, the document editing, the dashboard widgets — is shared. diff --git a/examples/custom-components/src/components/views/CustomDefaultRootView.tsx b/examples/custom-components/src/components/views/CustomDefaultRootView.tsx index e2e975b165e..6684cbabb8e 100644 --- a/examples/custom-components/src/components/views/CustomDefaultRootView.tsx +++ b/examples/custom-components/src/components/views/CustomDefaultRootView.tsx @@ -1,18 +1,22 @@ import type { AdminViewProps } from 'payload' import { DefaultTemplate } from '@payloadcms/next/templates' +import { getNavPrefs } from '@payloadcms/next/utilities' import { Gutter } from '@payloadcms/ui' import React from 'react' -export const CustomDefaultRootView: React.FC = ({ +export const CustomDefaultRootView: React.FC = async ({ initPageResult, params, searchParams, }) => { + const navPreferences = await getNavPrefs(initPageResult.req) + return ( = { + next: { + description: 'Next.js App Router (recommended)', + title: 'Next.js', + value: 'next', + }, + 'tanstack-start': { + description: 'TanStack Start (experimental)', + title: 'TanStack Start', + value: 'tanstack-start', + }, +} + +const validFrameworks = Object.keys(frameworkChoiceRecord) as FrameworkType[] + +export async function selectFramework( + args: CliArgs, + template?: ProjectTemplate, +): Promise { + if (args['--framework']) { + const value = args['--framework'] as FrameworkType + if (!validFrameworks.includes(value)) { + throw new Error(`Invalid framework given. Valid values are: ${validFrameworks.join(', ')}`) + } + return value + } + + if (template?.frameworkType) { + return template.frameworkType + } + + const framework = await p.select<{ label: string; value: FrameworkType }[], FrameworkType>({ + initialValue: 'next', + message: `Select a framework`, + options: Object.values(frameworkChoiceRecord).map((choice) => ({ + hint: choice.description, + label: choice.title, + value: choice.value, + })), + }) + + if (p.isCancel(framework)) { + process.exit(0) + } + + return framework +} diff --git a/packages/create-payload-app/src/main.ts b/packages/create-payload-app/src/main.ts index 947abee37f0..2639b2cc211 100644 --- a/packages/create-payload-app/src/main.ts +++ b/packages/create-payload-app/src/main.ts @@ -17,6 +17,7 @@ import { manageEnvFiles } from './lib/manage-env-files.js' import { parseProjectName } from './lib/parse-project-name.js' import { parseTemplate } from './lib/parse-template.js' import { selectDb } from './lib/select-db.js' +import { selectFramework } from './lib/select-framework.js' import { getValidTemplates, validateTemplate } from './lib/templates.js' import { updatePayloadInProject } from './lib/update-payload-in-project.js' import { getLatestPackageVersion } from './utils/getLatestPackageVersion.js' @@ -41,6 +42,7 @@ export class Main { '--db-accept-recommended': Boolean, '--db-connection-string': String, '--example': String, + '--framework': String, '--help': Boolean, '--local-template': String, '--name': String, @@ -69,6 +71,7 @@ export class Main { // Aliases '-d': '--db', '-e': '--example', + '-f': '--framework', '-h': '--help', '-n': '--name', '-t': '--template', @@ -266,10 +269,12 @@ export class Main { } case 'starter': { const dbDetails = await selectDb(this.args, projectName, template) + const frameworkType = await selectFramework(this.args, template) await createProject({ cliArgs: this.args, dbDetails, + frameworkType, packageManager, projectDir, projectName, diff --git a/packages/create-payload-app/src/types.ts b/packages/create-payload-app/src/types.ts index 6e6f9cdd975..c2bb2afe0d9 100644 --- a/packages/create-payload-app/src/types.ts +++ b/packages/create-payload-app/src/types.ts @@ -12,6 +12,7 @@ export interface Args extends arg.Spec { '--dry-run': BooleanConstructor '--example': StringConstructor + '--framework': StringConstructor '--help': BooleanConstructor '--init-next': BooleanConstructor '--local-example': StringConstructor @@ -29,6 +30,7 @@ export interface Args extends arg.Spec { // Aliases '-e': string + '-f': string '-h': string '-n': string '-t': string @@ -64,10 +66,13 @@ export interface PluginTemplate extends Template { interface Template { dbType?: DbType description?: string + frameworkType?: FrameworkType name: string type: ProjectTemplate['type'] } +export type FrameworkType = 'next' | 'tanstack-start' + export type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn' export type DbType = (typeof ALL_DATABASE_ADAPTERS)[number] diff --git a/packages/next/src/adapter/RouterProvider.tsx b/packages/next/src/adapter/RouterProvider.tsx new file mode 100644 index 00000000000..f782b57fd93 --- /dev/null +++ b/packages/next/src/adapter/RouterProvider.tsx @@ -0,0 +1,45 @@ +'use client' +import type { RouterContextType, LinkProps as RouterLinkProps } from '@payloadcms/ui' + +import { RouterProvider as BaseRouterProvider } from '@payloadcms/ui' +import NextLinkImport from 'next/link.js' +import { + useParams as useNextParams, + usePathname as useNextPathname, + useRouter as useNextRouter, + useSearchParams as useNextSearchParams, +} from 'next/navigation.js' +import React from 'react' + +const NextLink = 'default' in NextLinkImport ? NextLinkImport.default : NextLinkImport + +const AdapterLink: React.FC = ({ children, ...rest }) => { + return {children} +} + +export const NextRouterProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const nextRouter = useNextRouter() + const pathname = useNextPathname() + const searchParams = useNextSearchParams() + const params = useNextParams() + + const router: RouterContextType = React.useMemo( + () => ({ + Link: AdapterLink, + params, + pathname, + router: { + back: nextRouter.back, + forward: nextRouter.forward, + prefetch: nextRouter.prefetch, + push: nextRouter.push, + refresh: nextRouter.refresh, + replace: nextRouter.replace, + }, + searchParams, + }), + [nextRouter, pathname, searchParams, params], + ) + + return {children} +} diff --git a/packages/next/src/adapter/index.ts b/packages/next/src/adapter/index.ts new file mode 100644 index 00000000000..2785434177a --- /dev/null +++ b/packages/next/src/adapter/index.ts @@ -0,0 +1,47 @@ +import type { AdminAdapterResult, BaseAdminAdapter, CookieOptions } from 'payload' + +import { notFound, redirect } from 'next/navigation.js' +import { createAdminAdapter } from 'payload' + +import { handleServerFunctions } from '../utilities/handleServerFunctions.js' +import { initReq as nextInitReq } from '../utilities/initReq.js' +import { NextRouterProvider } from './RouterProvider.js' + +export function nextAdapter(): AdminAdapterResult { + return { + name: 'next', + init: ({ payload }) => { + return createAdminAdapter({ + name: 'next', + createRouteHandlers: () => { + // Route handlers in the Next.js adapter are set up via the file-system routing + // convention (app/api/[...slug]/route.ts) rather than being created dynamically. + // This is a no-op for the Next.js adapter. + return {} + }, + deleteCookie: async (name: string) => { + const { cookies } = await import('next/headers.js') + const cookieStore = await cookies() + cookieStore.delete(name) + }, + getCookie: async (name: string) => { + const { cookies } = await import('next/headers.js') + const cookieStore = await cookies() + return cookieStore.get(name)?.value + }, + handleServerFunctions, + initReq: ({ config, importMap }) => + nextInitReq({ configPromise: config, importMap, key: 'adapter' }), + notFound: () => notFound(), + payload, + redirect: (url: string) => redirect(url), + RouterProvider: NextRouterProvider, + setCookie: async (name: string, value: string, options?: CookieOptions) => { + const { cookies } = await import('next/headers.js') + const cookieStore = await cookies() + cookieStore.set(name, value, options) + }, + } satisfies BaseAdminAdapter) + }, + } +} diff --git a/packages/next/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx b/packages/next/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx index fd890937121..2ba76893077 100644 --- a/packages/next/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx +++ b/packages/next/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx @@ -1,8 +1,7 @@ 'use client' import type { SanitizedConfig } from 'payload' -import { Button } from '@payloadcms/ui' -import { useParams, usePathname, useSearchParams } from 'next/navigation.js' +import { Button, useParams, usePathname, useSearchParams } from '@payloadcms/ui' import { formatAdminURL } from 'payload/shared' import React from 'react' diff --git a/packages/next/src/elements/Nav/index.client.tsx b/packages/next/src/elements/Nav/index.client.tsx index d65fc56a8ec..4e08d3f1c6d 100644 --- a/packages/next/src/elements/Nav/index.client.tsx +++ b/packages/next/src/elements/Nav/index.client.tsx @@ -3,14 +3,8 @@ import type { groupNavItems } from '@payloadcms/ui/shared' import type { NavPreferences } from 'payload' -import { getTranslation } from '@payloadcms/translations' -import { BrowseByFolderButton, Link, NavGroup, useConfig, useTranslation } from '@payloadcms/ui' -import { EntityType } from '@payloadcms/ui/shared' -import { usePathname } from 'next/navigation.js' -import { formatAdminURL } from 'payload/shared' -import React, { Fragment } from 'react' - -const baseClass = 'nav' +import { AdminNavLinks } from '@payloadcms/ui' +import React from 'react' /** * @internal @@ -19,75 +13,5 @@ export const DefaultNavClient: React.FC<{ groups: ReturnType navPreferences: NavPreferences }> = ({ groups, navPreferences }) => { - const pathname = usePathname() - - const { - config: { - admin: { - routes: { browseByFolder: foldersRoute }, - }, - folders, - routes: { admin: adminRoute }, - }, - } = useConfig() - - const { i18n } = useTranslation() - - const folderURL = formatAdminURL({ - adminRoute, - path: foldersRoute, - }) - - const viewingRootFolderView = pathname.startsWith(folderURL) - - return ( - - {folders && folders.browseByFolder && } - {groups.map(({ entities, label }, key) => { - return ( - - {entities.map(({ slug, type, label }, i) => { - let href: string - let id: string - - if (type === EntityType.collection) { - href = formatAdminURL({ adminRoute, path: `/collections/${slug}` }) - id = `nav-${slug}` - } - - if (type === EntityType.global) { - href = formatAdminURL({ adminRoute, path: `/globals/${slug}` }) - id = `nav-global-${slug}` - } - - const isActive = - pathname.startsWith(href) && ['/', undefined].includes(pathname[href.length]) - - const Label = ( - <> - {isActive &&
} - {getTranslation(label, i18n)} - - ) - - // If the URL matches the link exactly - if (pathname === href) { - return ( -
- {Label} -
- ) - } - - return ( - - {Label} - - ) - })} - - ) - })} - - ) + return } diff --git a/packages/next/src/elements/Nav/index.tsx b/packages/next/src/elements/Nav/index.tsx index ae3f31fc155..c6e6731ae8f 100644 --- a/packages/next/src/elements/Nav/index.tsx +++ b/packages/next/src/elements/Nav/index.tsx @@ -1,212 +1,13 @@ -import type { EntityToGroup } from '@payloadcms/ui/shared' -import type { PayloadRequest, ServerProps } from 'payload' +import type { NavProps as UINavProps } from '@payloadcms/ui/elements/Nav' -import { Logout } from '@payloadcms/ui' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import { EntityType, groupNavItems } from '@payloadcms/ui/shared' +import { DefaultNav as UIDefaultNav } from '@payloadcms/ui/elements/Nav' import React from 'react' -import { NavHamburger } from './NavHamburger/index.js' -import { NavWrapper } from './NavWrapper/index.js' -import { SettingsMenuButton } from './SettingsMenuButton/index.js' -import './index.scss' - -const baseClass = 'nav' - import { getNavPrefs } from './getNavPrefs.js' -import { DefaultNavClient } from './index.client.js' - -export type NavProps = { - req?: PayloadRequest -} & ServerProps +export type NavProps = UINavProps export const DefaultNav: React.FC = async (props) => { - const { - documentSubViewType, - i18n, - locale, - params, - payload, - permissions, - req, - searchParams, - user, - viewType, - visibleEntities, - } = props - - if (!payload?.config) { - return null - } - - const { - admin: { - components: { afterNav, afterNavLinks, beforeNav, beforeNavLinks, logout, settingsMenu }, - }, - collections, - globals, - } = payload.config - - const groups = groupNavItems( - [ - ...collections - .filter(({ slug }) => visibleEntities.collections.includes(slug)) - .map( - (collection) => - ({ - type: EntityType.collection, - entity: collection, - }) satisfies EntityToGroup, - ), - ...globals - .filter(({ slug }) => visibleEntities.globals.includes(slug)) - .map( - (global) => - ({ - type: EntityType.global, - entity: global, - }) satisfies EntityToGroup, - ), - ], - permissions, - i18n, - ) - - const navPreferences = await getNavPrefs(req) - - const LogoutComponent = RenderServerComponent({ - clientProps: { - documentSubViewType, - viewType, - }, - Component: logout?.Button, - Fallback: Logout, - importMap: payload.importMap, - serverProps: { - i18n, - locale, - params, - payload, - permissions, - searchParams, - user, - }, - }) - - const RenderedSettingsMenu = - settingsMenu && Array.isArray(settingsMenu) - ? settingsMenu.map((item, index) => - RenderServerComponent({ - clientProps: { - documentSubViewType, - viewType, - }, - Component: item, - importMap: payload.importMap, - key: `settings-menu-item-${index}`, - serverProps: { - i18n, - locale, - params, - payload, - permissions, - searchParams, - user, - }, - }), - ) - : [] - - const RenderedBeforeNav = RenderServerComponent({ - clientProps: { - documentSubViewType, - viewType, - }, - Component: beforeNav, - importMap: payload.importMap, - serverProps: { - i18n, - locale, - params, - payload, - permissions, - searchParams, - user, - }, - }) - - const RenderedBeforeNavLinks = RenderServerComponent({ - clientProps: { - documentSubViewType, - viewType, - }, - Component: beforeNavLinks, - importMap: payload.importMap, - serverProps: { - i18n, - locale, - params, - payload, - permissions, - searchParams, - user, - }, - }) - - const RenderedAfterNavLinks = RenderServerComponent({ - clientProps: { - documentSubViewType, - viewType, - }, - Component: afterNavLinks, - importMap: payload.importMap, - serverProps: { - i18n, - locale, - params, - payload, - permissions, - searchParams, - user, - }, - }) - - const RenderedAfterNav = RenderServerComponent({ - clientProps: { - documentSubViewType, - viewType, - }, - Component: afterNav, - importMap: payload.importMap, - serverProps: { - i18n, - locale, - params, - payload, - permissions, - searchParams, - user, - }, - }) + const navPreferences = await getNavPrefs(props.req) - return ( - - {RenderedBeforeNav} - - {RenderedAfterNav} -
-
- -
-
- - ) + return } diff --git a/packages/next/src/exports/utilities.ts b/packages/next/src/exports/utilities.ts index c198ff8eca9..a748c8719cc 100644 --- a/packages/next/src/exports/utilities.ts +++ b/packages/next/src/exports/utilities.ts @@ -1,5 +1,6 @@ // NOTICE: Server-only utilities, do not import anything client-side here. +export { getNavPrefs } from '../elements/Nav/getNavPrefs.js' export { getNextRequestI18n } from '../utilities/getNextRequestI18n.js' export { getPayloadHMR } from '../utilities/getPayloadHMR.js' diff --git a/packages/next/src/exports/views.ts b/packages/next/src/exports/views.ts index 6977b766ed8..001e277e029 100644 --- a/packages/next/src/exports/views.ts +++ b/packages/next/src/exports/views.ts @@ -6,7 +6,11 @@ export { type DashboardViewServerPropsOnly, DefaultDashboard, } from '../views/Dashboard/Default/index.js' -export { DashboardView } from '../views/Dashboard/index.js' +export { + DashboardView, + renderDashboardView, + type RenderDashboardViewArgs, +} from '../views/Dashboard/index.js' export { ListView, renderListView, type RenderListViewArgs } from '../views/List/index.js' export { LoginView } from '../views/Login/index.js' diff --git a/packages/next/src/index.js b/packages/next/src/index.js index d9154a66aa9..744b9e9501c 100644 --- a/packages/next/src/index.js +++ b/packages/next/src/index.js @@ -1 +1,2 @@ +export { nextAdapter } from './adapter/index.js' export { default as withPayload } from './withPayload/withPayload.js' diff --git a/packages/next/src/layouts/Root/index.tsx b/packages/next/src/layouts/Root/index.tsx index e9e1e6bd9b5..dfb5fc4699e 100644 --- a/packages/next/src/layouts/Root/index.tsx +++ b/packages/next/src/layouts/Root/index.tsx @@ -8,6 +8,7 @@ import { cookies as nextCookies } from 'next/headers.js' import { applyLocaleFiltering } from 'payload/shared' import React, { Suspense } from 'react' +import { NextRouterProvider } from '../../adapter/RouterProvider.js' import { getNavPrefs } from '../../elements/Nav/getNavPrefs.js' import { getRequestTheme } from '../../utilities/getRequestTheme.js' import { initReq } from '../../utilities/initReq.js' @@ -130,40 +131,42 @@ const RootLayoutContent = async ({ - - - {Array.isArray(config.admin?.components?.providers) && - config.admin?.components?.providers.length > 0 ? ( - - {children} - - ) : ( - children - )} - + + + + {Array.isArray(config.admin?.components?.providers) && + config.admin?.components?.providers.length > 0 ? ( + + {children} + + ) : ( + children + )} + +
diff --git a/packages/next/src/templates/Default/index.tsx b/packages/next/src/templates/Default/index.tsx index cb2043f7fe1..b626405cd1e 100644 --- a/packages/next/src/templates/Default/index.tsx +++ b/packages/next/src/templates/Default/index.tsx @@ -1,168 +1 @@ -import type { - CustomComponent, - DocumentSubViewTypes, - PayloadRequest, - ServerProps, - ViewTypes, - VisibleEntities, -} from 'payload' - -import { - ActionsProvider, - AppHeader, - BulkUploadProvider, - EntityVisibilityProvider, - NavToggler, -} from '@payloadcms/ui' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' - -import './index.scss' - -import React from 'react' - -import { DefaultNav } from '../../elements/Nav/index.js' -import { NavHamburger } from './NavHamburger/index.js' -import { Wrapper } from './Wrapper/index.js' - -const baseClass = 'template-default' - -export type DefaultTemplateProps = { - children?: React.ReactNode - className?: string - collectionSlug?: string - docID?: number | string - documentSubViewType?: DocumentSubViewTypes - globalSlug?: string - req?: PayloadRequest - viewActions?: CustomComponent[] - viewType?: ViewTypes - visibleEntities: VisibleEntities -} & ServerProps - -export const DefaultTemplate: React.FC = ({ - children, - className, - collectionSlug, - docID, - documentSubViewType, - globalSlug, - i18n, - locale, - params, - payload, - permissions, - req, - searchParams, - user, - viewActions, - viewType, - visibleEntities, -}) => { - const { - admin: { - avatar, - components, - components: { header: CustomHeader, Nav: CustomNav } = { - header: undefined, - Nav: undefined, - }, - } = {}, - } = payload.config || {} - - const clientProps = { - documentSubViewType, - viewType, - visibleEntities, - } - - const serverProps: { - collectionSlug: string - docID: number | string - globalSlug: string - req: PayloadRequest - } & ServerProps = { - collectionSlug, - docID, - globalSlug, - i18n, - locale, - params, - payload, - permissions, - req, - searchParams, - user, - } - - const Actions: Record = {} - for (const action of viewActions ?? []) { - if (!action) { - continue - } - const key = typeof action === 'object' ? action.path : action - Actions[key] = RenderServerComponent({ - clientProps, - Component: action, - importMap: payload.importMap, - serverProps, - }) - } - - const NavComponent = RenderServerComponent({ - clientProps, - Component: CustomNav, - Fallback: DefaultNav, - importMap: payload.importMap, - serverProps, - }) - - return ( - - - - {RenderServerComponent({ - clientProps, - Component: CustomHeader, - importMap: payload.importMap, - serverProps, - })} -
- - - {NavComponent} -
- - {children} -
- -
- - - - ) -} +export { DefaultTemplate, type DefaultTemplateProps } from '@payloadcms/ui/templates/Default' diff --git a/packages/next/src/templates/Minimal/index.tsx b/packages/next/src/templates/Minimal/index.tsx index 792574b6e93..78beba7fc4b 100644 --- a/packages/next/src/templates/Minimal/index.tsx +++ b/packages/next/src/templates/Minimal/index.tsx @@ -1,24 +1 @@ -import React from 'react' - -import './index.scss' - -const baseClass = 'template-minimal' - -export type MinimalTemplateProps = { - children?: React.ReactNode - className?: string - style?: React.CSSProperties - width?: 'normal' | 'wide' -} - -export const MinimalTemplate: React.FC = (props) => { - const { children, className, style = {}, width = 'normal' } = props - - const classes = [className, baseClass, `${baseClass}--width-${width}`].filter(Boolean).join(' ') - - return ( -
-
{children}
-
- ) -} +export { MinimalTemplate, type MinimalTemplateProps } from '@payloadcms/ui/templates/Minimal' diff --git a/packages/next/src/utilities/getNextRequestI18n.ts b/packages/next/src/utilities/getNextRequestI18n.ts index 07c71a3a0b8..0301ce4c301 100644 --- a/packages/next/src/utilities/getNextRequestI18n.ts +++ b/packages/next/src/utilities/getNextRequestI18n.ts @@ -27,6 +27,10 @@ export const getNextRequestI18n = async < return (await initI18n({ config: config.i18n, context: 'client', - language: getRequestLanguage({ config, cookies: await cookies(), headers: await headers() }), + language: getRequestLanguage({ + config, + cookies: new Map((await cookies()).getAll().map((c) => [c.name, c.value])), + headers: await headers(), + }), })) as any } diff --git a/packages/next/src/utilities/handleServerFunctions.ts b/packages/next/src/utilities/handleServerFunctions.ts index 9bcc5ce8d04..4cff82ae0ea 100644 --- a/packages/next/src/utilities/handleServerFunctions.ts +++ b/packages/next/src/utilities/handleServerFunctions.ts @@ -1,33 +1,9 @@ -import type { DefaultServerFunctionArgs, ServerFunction, ServerFunctionHandler } from 'payload' +import type { ServerFunctionHandler } from 'payload' -import { _internal_renderFieldHandler, copyDataFromLocaleHandler } from '@payloadcms/ui/rsc' -import { buildFormStateHandler } from '@payloadcms/ui/utilities/buildFormState' -import { buildTableStateHandler } from '@payloadcms/ui/utilities/buildTableState' -import { getFolderResultsComponentAndDataHandler } from '@payloadcms/ui/utilities/getFolderResultsComponentAndData' -import { schedulePublishHandler } from '@payloadcms/ui/utilities/schedulePublishHandler' +import { dispatchServerFunction } from '@payloadcms/ui/utilities/handleServerFunctions' +import { notFound, redirect } from 'next/navigation.js' -import { getDefaultLayoutHandler } from '../views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.js' -import { renderWidgetHandler } from '../views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js' -import { renderDocumentHandler } from '../views/Document/handleServerFunction.js' -import { renderDocumentSlotsHandler } from '../views/Document/renderDocumentSlots.js' -import { renderListHandler } from '../views/List/handleServerFunction.js' import { initReq } from './initReq.js' -import { slugifyHandler } from './slugify.js' - -const baseServerFunctions: Record> = { - 'copy-data-from-locale': copyDataFromLocaleHandler, - 'form-state': buildFormStateHandler, - 'get-default-layout': getDefaultLayoutHandler, - 'get-folder-results-component-and-data': getFolderResultsComponentAndDataHandler, - 'render-document': renderDocumentHandler, - 'render-document-slots': renderDocumentSlotsHandler, - 'render-field': _internal_renderFieldHandler, - 'render-list': renderListHandler, - 'render-widget': renderWidgetHandler, - 'schedule-publish': schedulePublishHandler, - slugify: slugifyHandler, - 'table-state': buildTableStateHandler, -} export const handleServerFunctions: ServerFunctionHandler = async (args) => { const { @@ -44,20 +20,20 @@ export const handleServerFunctions: ServerFunctionHandler = async (args) => { key: 'RootLayout', }) - const augmentedArgs: DefaultServerFunctionArgs = { + const augmentedArgs = { ...fnArgs, cookies, importMap, locale, + notFound: () => notFound(), permissions, + redirect: (url: string) => redirect(url), req, } - const fn = extraServerFunctions?.[fnKey] || baseServerFunctions[fnKey] - - if (!fn) { - throw new Error(`Unknown Server Function: ${fnKey}`) - } - - return fn(augmentedArgs) + return dispatchServerFunction({ + name: fnKey, + augmentedArgs, + extraServerFunctions, + }) } diff --git a/packages/next/src/utilities/initReq.ts b/packages/next/src/utilities/initReq.ts index 5b3123d6c12..d178c2cb7d7 100644 --- a/packages/next/src/utilities/initReq.ts +++ b/packages/next/src/utilities/initReq.ts @@ -2,6 +2,8 @@ import type { I18n, I18nClient } from '@payloadcms/translations' import type { ImportMap, InitReqResult, PayloadRequest, SanitizedConfig } from 'payload' import { initI18n } from '@payloadcms/translations' +import { getRequestLocale } from '@payloadcms/ui/utilities/getRequestLocale' +import { selectiveCache } from '@payloadcms/ui/utilities/selectiveCache' import { headers as getHeaders } from 'next/headers.js' import { createLocalReq, @@ -12,9 +14,6 @@ import { parseCookies, } from 'payload' -import { getRequestLocale } from './getRequestLocale.js' -import { selectiveCache } from './selectiveCache.js' - type PartialResult = { i18n: I18nClient } & Pick & diff --git a/packages/next/src/views/API/index.client.tsx b/packages/next/src/views/API/index.client.tsx index c51f583c523..08613d761dc 100644 --- a/packages/next/src/views/API/index.client.tsx +++ b/packages/next/src/views/API/index.client.tsx @@ -12,9 +12,9 @@ import { useConfig, useDocumentInfo, useLocale, + useSearchParams, useTranslation, } from '@payloadcms/ui' -import { useSearchParams } from 'next/navigation.js' import './index.scss' diff --git a/packages/next/src/views/Account/ResetPreferences/index.tsx b/packages/next/src/views/Account/ResetPreferences/index.tsx index dd427bd2f77..834457fabd2 100644 --- a/packages/next/src/views/Account/ResetPreferences/index.tsx +++ b/packages/next/src/views/Account/ResetPreferences/index.tsx @@ -1,90 +1 @@ -'use client' -import type { TypedUser } from 'payload' - -import { - Button, - ConfirmationModal, - toast, - useConfig, - useModal, - useTranslation, -} from '@payloadcms/ui' -import { formatAdminURL } from 'payload/shared' -import * as qs from 'qs-esm' -import { Fragment, useCallback } from 'react' - -const confirmResetModalSlug = 'confirm-reset-modal' - -export const ResetPreferences: React.FC<{ - readonly user?: TypedUser -}> = ({ user }) => { - const { openModal } = useModal() - const { t } = useTranslation() - const { - config: { - routes: { api: apiRoute }, - }, - } = useConfig() - - const handleResetPreferences = useCallback(async () => { - if (!user) { - return - } - - const stringifiedQuery = qs.stringify( - { - depth: 0, - where: { - 'user.value': { - equals: user.id, - }, - }, - }, - { addQueryPrefix: true }, - ) - - try { - const res = await fetch( - formatAdminURL({ - apiRoute, - path: `/payload-preferences${stringifiedQuery}`, - }), - { - credentials: 'include', - headers: { - 'Content-Type': 'application/json', - }, - method: 'DELETE', - }, - ) - - const json = await res.json() - const message = json.message - - if (res.ok) { - toast.success(message) - } else { - toast.error(message) - } - } catch (_err) { - // swallow error - } - }, [apiRoute, user]) - - return ( - -
- -
- - - ) -} +export { ResetPreferences } from '@payloadcms/ui/views/Account/ResetPreferences/index' diff --git a/packages/next/src/views/Account/Settings/LanguageSelector.tsx b/packages/next/src/views/Account/Settings/LanguageSelector.tsx index 1bea75fdec7..65609c6e0bf 100644 --- a/packages/next/src/views/Account/Settings/LanguageSelector.tsx +++ b/packages/next/src/views/Account/Settings/LanguageSelector.tsx @@ -1,27 +1 @@ -'use client' -import type { AcceptedLanguages } from '@payloadcms/translations' -import type { ReactSelectOption } from '@payloadcms/ui' -import type { LanguageOptions } from 'payload' - -import { ReactSelect, useTranslation } from '@payloadcms/ui' -import React from 'react' - -export const LanguageSelector: React.FC<{ - languageOptions: LanguageOptions -}> = (props) => { - const { languageOptions } = props - - const { i18n, switchLanguage } = useTranslation() - - return ( - ) => { - await switchLanguage(option.value) - }} - options={languageOptions} - value={languageOptions.find((language) => language.value === i18n.language)} - /> - ) -} +export { LanguageSelector } from '@payloadcms/ui/views/Account/Settings/LanguageSelector' diff --git a/packages/next/src/views/Account/Settings/index.tsx b/packages/next/src/views/Account/Settings/index.tsx index 555d8d6e752..74df72f93f9 100644 --- a/packages/next/src/views/Account/Settings/index.tsx +++ b/packages/next/src/views/Account/Settings/index.tsx @@ -1,35 +1 @@ -import type { I18n } from '@payloadcms/translations' -import type { BasePayload, Config, LanguageOptions, TypedUser } from 'payload' - -import { FieldLabel } from '@payloadcms/ui' -import React from 'react' - -import { ResetPreferences } from '../ResetPreferences/index.js' -import './index.scss' -import { ToggleTheme } from '../ToggleTheme/index.js' -import { LanguageSelector } from './LanguageSelector.js' - -const baseClass = 'payload-settings' - -export const Settings: React.FC<{ - readonly className?: string - readonly i18n: I18n - readonly languageOptions: LanguageOptions - readonly payload: BasePayload - readonly theme: Config['admin']['theme'] - readonly user?: TypedUser -}> = (props) => { - const { className, i18n, languageOptions, theme, user } = props - - return ( -
-

{i18n.t('general:payloadSettings')}

-
- - -
- {theme === 'all' && } - -
- ) -} +export { Settings } from '@payloadcms/ui/views/Account/Settings/index' diff --git a/packages/next/src/views/Account/ToggleTheme/index.tsx b/packages/next/src/views/Account/ToggleTheme/index.tsx index 3fd6a13a867..140ba302b81 100644 --- a/packages/next/src/views/Account/ToggleTheme/index.tsx +++ b/packages/next/src/views/Account/ToggleTheme/index.tsx @@ -1,43 +1 @@ -'use client' - -import { RadioGroupField, useTheme, useTranslation } from '@payloadcms/ui' -import React, { useCallback } from 'react' - -export const ToggleTheme: React.FC = () => { - const { autoMode, setTheme, theme } = useTheme() - const { t } = useTranslation() - - const onChange = useCallback( - (newTheme) => { - setTheme(newTheme) - }, - [setTheme], - ) - - return ( - - ) -} +export { ToggleTheme } from '@payloadcms/ui/views/Account/ToggleTheme/index' diff --git a/packages/next/src/views/Account/index.client.tsx b/packages/next/src/views/Account/index.client.tsx index d3e1ccf6945..352e2a228db 100644 --- a/packages/next/src/views/Account/index.client.tsx +++ b/packages/next/src/views/Account/index.client.tsx @@ -1,21 +1 @@ -'use client' -import { type StepNavItem, useStepNav, useTranslation } from '@payloadcms/ui' -import React from 'react' - -export const AccountClient: React.FC = () => { - const { setStepNav } = useStepNav() - const { t } = useTranslation() - - React.useEffect(() => { - const nav: StepNavItem[] = [] - - nav.push({ - label: t('authentication:account'), - url: '/account', - }) - - setStepNav(nav) - }, [setStepNav, t]) - - return null -} +export { AccountClient } from '@payloadcms/ui/views/Account/index.client' diff --git a/packages/next/src/views/Account/index.tsx b/packages/next/src/views/Account/index.tsx index e84d7cb0108..0e40995977e 100644 --- a/packages/next/src/views/Account/index.tsx +++ b/packages/next/src/views/Account/index.tsx @@ -1,180 +1,15 @@ -import type { AdminViewServerProps, DocumentViewServerPropsOnly } from 'payload' +import type { AdminViewServerProps } from 'payload' -import { DocumentInfoProvider, EditDepthProvider, HydrateAuthProvider } from '@payloadcms/ui' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import { buildFormState } from '@payloadcms/ui/utilities/buildFormState' +import { AccountView as AccountViewFromUI } from '@payloadcms/ui/views/Account/RenderAccount' import { notFound } from 'next/navigation.js' -import { formatAdminURL } from 'payload/shared' -import React from 'react' -import { DocumentHeader } from '../../elements/DocumentHeader/index.js' -import { getDocPreferences } from '../Document/getDocPreferences.js' -import { getDocumentData } from '../Document/getDocumentData.js' -import { getDocumentPermissions } from '../Document/getDocumentPermissions.js' -import { getIsLocked } from '../Document/getIsLocked.js' -import { getVersions } from '../Document/getVersions.js' -import { EditView } from '../Edit/index.js' -import { AccountClient } from './index.client.js' -import { Settings } from './Settings/index.js' - -export async function AccountView({ initPageResult, params, searchParams }: AdminViewServerProps) { - const { - languageOptions, - locale, - permissions, - req, - req: { - i18n, - payload, - payload: { config }, - user, - }, - } = initPageResult - - const { - admin: { theme, user: userSlug }, - routes: { api }, - serverURL, - } = config - - const collectionConfig = payload?.collections?.[userSlug]?.config - - if (collectionConfig && user?.id) { - // Fetch the data required for the view - const data = await getDocumentData({ - id: user.id, - collectionSlug: collectionConfig.slug, - locale, - payload, - req, - user, - }) - - if (!data) { - throw new Error('not-found') +export async function AccountView(props: AdminViewServerProps) { + try { + return await AccountViewFromUI(props) + } catch (error) { + if (error?.message === 'not-found') { + return notFound() } - - // Get document preferences - const docPreferences = await getDocPreferences({ - id: user.id, - collectionSlug: collectionConfig.slug, - payload, - user, - }) - - // Get permissions - const { - docPermissions, - hasDeletePermission, - hasPublishPermission, - hasSavePermission, - hasTrashPermission, - } = await getDocumentPermissions({ - id: user.id, - collectionConfig, - data, - req, - }) - - // Build initial form state from data - const { state: formState } = await buildFormState({ - id: user.id, - collectionSlug: collectionConfig.slug, - data, - docPermissions, - docPreferences, - locale: locale?.code, - operation: 'update', - renderAllFields: true, - req, - schemaPath: collectionConfig.slug, - skipValidation: true, - }) - - // Fetch document lock state - const { currentEditor, isLocked, lastUpdateTime } = await getIsLocked({ - id: user.id, - collectionConfig, - isEditing: true, - req, - }) - - // Get all versions required for UI - const { hasPublishedDoc, mostRecentVersionIsAutosaved, unpublishedVersionCount, versionCount } = - await getVersions({ - id: user.id, - collectionConfig, - doc: data, - docPermissions, - locale: locale?.code, - payload, - user, - }) - - return ( - - } - apiURL={formatAdminURL({ - apiRoute: api, - path: `/${userSlug}${user?.id ? `/${user.id}` : ''}`, - })} - collectionSlug={userSlug} - currentEditor={currentEditor} - docPermissions={docPermissions} - hasDeletePermission={hasDeletePermission} - hasPublishedDoc={hasPublishedDoc} - hasPublishPermission={hasPublishPermission} - hasSavePermission={hasSavePermission} - hasTrashPermission={hasTrashPermission} - id={user?.id} - initialData={data} - initialState={formState} - isEditing - isLocked={isLocked} - lastUpdateTime={lastUpdateTime} - mostRecentVersionIsAutosaved={mostRecentVersionIsAutosaved} - unpublishedVersionCount={unpublishedVersionCount} - versionCount={versionCount} - > - - - - {RenderServerComponent({ - Component: config.admin?.components?.views?.account?.Component, - Fallback: EditView, - importMap: payload.importMap, - serverProps: { - doc: data, - hasPublishedDoc, - i18n, - initPageResult, - locale, - params, - payload, - permissions, - routeSegments: [], - searchParams, - user, - } satisfies DocumentViewServerPropsOnly, - })} - - - - ) + throw error } - - return notFound() } diff --git a/packages/next/src/views/CreateFirstUser/index.tsx b/packages/next/src/views/CreateFirstUser/index.tsx index 604c03add42..df3d4aca25a 100644 --- a/packages/next/src/views/CreateFirstUser/index.tsx +++ b/packages/next/src/views/CreateFirstUser/index.tsx @@ -1,93 +1 @@ -import type { - AdminViewServerProps, - SanitizedDocumentPermissions, - SanitizedFieldsPermissions, -} from 'payload' - -import { buildFormState } from '@payloadcms/ui/utilities/buildFormState' -import React from 'react' - -import { getDocPreferences } from '../Document/getDocPreferences.js' -import { getDocumentData } from '../Document/getDocumentData.js' -import { CreateFirstUserClient } from './index.client.js' -import './index.scss' - -export async function CreateFirstUserView({ initPageResult }: AdminViewServerProps) { - const { - locale, - req, - req: { - payload: { - collections, - config: { - admin: { user: userSlug }, - }, - }, - }, - } = initPageResult - - const collectionConfig = collections?.[userSlug]?.config - const { auth: authOptions } = collectionConfig - const loginWithUsername = authOptions.loginWithUsername - - // Fetch the data required for the view - const data = await getDocumentData({ - collectionSlug: collectionConfig.slug, - locale, - payload: req.payload, - req, - user: req.user, - }) - - // Get document preferences - const docPreferences = await getDocPreferences({ - collectionSlug: collectionConfig.slug, - payload: req.payload, - user: req.user, - }) - - const baseFields: SanitizedFieldsPermissions = Object.fromEntries( - collectionConfig.fields - .filter((f): f is { name: string } & typeof f => 'name' in f && typeof f.name === 'string') - .map((f) => [f.name, { create: true, read: true, update: true }]), - ) - - // In create-first-user we should always allow all fields - const docPermissionsForForm: SanitizedDocumentPermissions = { - create: true, - delete: true, - fields: baseFields, - read: true, - readVersions: true, - update: true, - } - - // Build initial form state from data - const { state: formState } = await buildFormState({ - collectionSlug: collectionConfig.slug, - data, - docPermissions: docPermissionsForForm, - docPreferences, - locale: locale?.code, - operation: 'create', - renderAllFields: true, - req, - schemaPath: collectionConfig.slug, - skipClientConfigAuth: true, - skipValidation: true, - }) - - return ( -
-

{req.t('general:welcome')}

-

{req.t('authentication:beginCreateFirstUser')}

- -
- ) -} +export { CreateFirstUserView } from '@payloadcms/ui/views/CreateFirstUser' diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.tsx b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.tsx index 625a19435c9..77ef5141be6 100644 --- a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.tsx +++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.tsx @@ -1,13 +1,13 @@ import type { TFunction } from '@payloadcms/translations' +import type { WidgetInstanceClient } from '@payloadcms/ui' import type { ClientWidget, Field, WidgetServerProps } from 'payload' +import { ModularDashboardClient } from '@payloadcms/ui' import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' import React from 'react' import type { DashboardViewServerProps } from '../index.js' -import type { WidgetInstanceClient } from './index.client.js' -import { ModularDashboardClient } from './index.client.js' import { getItemsFromConfig } from './utils/getItemsFromConfig.js' import { getItemsFromPreferences } from './utils/getItemsFromPreferences.js' import { extractLocaleData } from './utils/localeUtils.js' diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts b/packages/next/src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts index 02ba3a6708e..60b4b6ecbc2 100644 --- a/packages/next/src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts +++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts @@ -1,3 +1,4 @@ +import type { WidgetInstanceClient, WidgetItem } from '@payloadcms/ui' import type { DashboardConfig, PayloadRequest, @@ -8,8 +9,6 @@ import type { import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import type { WidgetInstanceClient, WidgetItem } from '../index.client.js' - export type GetDefaultLayoutServerFnArgs = Record export type GetDefaultLayoutServerFnReturnType = { diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts b/packages/next/src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts index 59785c2d50f..58e5e166cb7 100644 --- a/packages/next/src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts +++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts @@ -1,3 +1,4 @@ +import type { WidgetInstanceClient, WidgetItem } from '@payloadcms/ui' import type { WidgetWidth } from 'payload' import { arrayMove } from '@dnd-kit/sortable' @@ -13,7 +14,6 @@ import { import { PREFERENCE_KEYS } from 'payload/shared' import React, { useCallback, useEffect, useState } from 'react' -import type { WidgetInstanceClient, WidgetItem } from './index.client.js' import type { GetDefaultLayoutServerFnReturnType } from './renderWidget/getDefaultLayoutServerFn.js' import { RenderWidget } from './renderWidget/RenderWidget.js' diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromConfig.ts b/packages/next/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromConfig.ts index 6e2ad3be1f1..ad3a9b99da6 100644 --- a/packages/next/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromConfig.ts +++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromConfig.ts @@ -1,7 +1,6 @@ +import type { WidgetItem } from '@payloadcms/ui' import type { DashboardConfig, PayloadRequest, Widget, WidgetInstance } from 'payload' -import type { WidgetItem } from '../index.client.js' - export async function getItemsFromConfig( defaultLayout: NonNullable, req: PayloadRequest, diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromPreferences.ts b/packages/next/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromPreferences.ts index 285493cd3fa..92788886678 100644 --- a/packages/next/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromPreferences.ts +++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromPreferences.ts @@ -1,9 +1,8 @@ +import type { WidgetItem } from '@payloadcms/ui' import type { BasePayload, TypedUser } from 'payload' import { PREFERENCE_KEYS } from 'payload/shared' -import type { WidgetItem } from '../index.client.js' - import { getPreferences } from '../../../../../utilities/getPreferences.js' export async function getItemsFromPreferences( diff --git a/packages/next/src/views/Dashboard/index.tsx b/packages/next/src/views/Dashboard/index.tsx index 576ae264656..abe1e956a41 100644 --- a/packages/next/src/views/Dashboard/index.tsx +++ b/packages/next/src/views/Dashboard/index.tsx @@ -1,54 +1,13 @@ -import type { AdminViewServerProps } from 'payload' +import type { RenderDashboardViewArgs } from '@payloadcms/ui/views/Dashboard' +import type React from 'react' -import { HydrateAuthProvider, SetStepNav } from '@payloadcms/ui' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import { getGlobalData, getNavGroups } from '@payloadcms/ui/shared' -import React, { Fragment } from 'react' +import { renderDashboardView } from '@payloadcms/ui/views/Dashboard' -import type { DashboardViewClientProps, DashboardViewServerPropsOnly } from './Default/index.js' +export type { RenderDashboardViewArgs } -import { DefaultDashboard } from './Default/index.js' +export { renderDashboardView } from '@payloadcms/ui/views/Dashboard' -export async function DashboardView(props: AdminViewServerProps) { - const { - locale, - permissions, - req: { - i18n, - payload: { config }, - payload, - user, - }, - req, - visibleEntities, - } = props.initPageResult - - const globalData = await getGlobalData(req) - const navGroups = getNavGroups(permissions, visibleEntities, config, i18n) - - return ( - - - - {RenderServerComponent({ - clientProps: { - locale, - } satisfies DashboardViewClientProps, - Component: config.admin?.components?.views?.dashboard?.Component, - Fallback: DefaultDashboard, - importMap: payload.importMap, - serverProps: { - ...props, - globalData, - i18n, - locale, - navGroups, - payload, - permissions, - user, - visibleEntities, - } satisfies DashboardViewServerPropsOnly, - })} - - ) +export const DashboardView: React.FC = async (args) => { + const { Dashboard } = await renderDashboardView(args) + return Dashboard } diff --git a/packages/next/src/views/Document/getCustomDocumentViewByKey.tsx b/packages/next/src/views/Document/getCustomDocumentViewByKey.tsx index 8b0001946dc..2a7a5456e69 100644 --- a/packages/next/src/views/Document/getCustomDocumentViewByKey.tsx +++ b/packages/next/src/views/Document/getCustomDocumentViewByKey.tsx @@ -1,13 +1 @@ -import type { EditViewComponent, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload' - -export const getCustomDocumentViewByKey = ( - views: - | SanitizedCollectionConfig['admin']['components']['views'] - | SanitizedGlobalConfig['admin']['components']['views'], - customViewKey: string, -): EditViewComponent => { - return typeof views?.edit?.[customViewKey] === 'object' && - 'Component' in views.edit[customViewKey] - ? views?.edit?.[customViewKey].Component - : null -} +export { getCustomDocumentViewByKey } from '@payloadcms/ui/views/Document/getCustomDocumentViewByKey' diff --git a/packages/next/src/views/Document/getCustomViewByRoute.tsx b/packages/next/src/views/Document/getCustomViewByRoute.tsx index 9f879d0815b..0a1a4ccfeb4 100644 --- a/packages/next/src/views/Document/getCustomViewByRoute.tsx +++ b/packages/next/src/views/Document/getCustomViewByRoute.tsx @@ -1,53 +1 @@ -import type { EditViewComponent, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload' - -import { isPathMatchingRoute } from '../Root/isPathMatchingRoute.js' - -export const getCustomViewByRoute = ({ - baseRoute, - currentRoute, - views, -}: { - baseRoute: string - currentRoute: string - views: - | SanitizedCollectionConfig['admin']['components']['views'] - | SanitizedGlobalConfig['admin']['components']['views'] -}): { - Component: EditViewComponent - viewKey?: string -} => { - if (typeof views?.edit === 'object') { - let viewKey: string - - const foundViewConfig = Object.entries(views.edit).find(([key, view]) => { - if (typeof view === 'object' && 'path' in view) { - const viewPath = `${baseRoute}${view.path}` - - const isMatching = isPathMatchingRoute({ - currentRoute, - exact: true, - path: viewPath, - }) - - if (isMatching) { - viewKey = key - } - - return isMatching - } - - return false - })?.[1] - - if (foundViewConfig && 'Component' in foundViewConfig) { - return { - Component: foundViewConfig.Component, - viewKey, - } - } - } - - return { - Component: null, - } -} +export { getCustomViewByRoute } from '@payloadcms/ui/views/Document/getCustomViewByRoute' diff --git a/packages/next/src/views/Document/getDocumentPermissions.tsx b/packages/next/src/views/Document/getDocumentPermissions.tsx index 5b501cec30b..7afccee30f2 100644 --- a/packages/next/src/views/Document/getDocumentPermissions.tsx +++ b/packages/next/src/views/Document/getDocumentPermissions.tsx @@ -1,153 +1 @@ -import type { - Data, - PayloadRequest, - SanitizedCollectionConfig, - SanitizedDocumentPermissions, - SanitizedGlobalConfig, -} from 'payload' - -import { - hasSavePermission as getHasSavePermission, - isEditing as getIsEditing, -} from '@payloadcms/ui/shared' -import { docAccessOperation, docAccessOperationGlobal, logError } from 'payload' -import { hasDraftsEnabled } from 'payload/shared' - -export const getDocumentPermissions = async (args: { - collectionConfig?: SanitizedCollectionConfig - data: Data - globalConfig?: SanitizedGlobalConfig - /** - * When called for creating a new document, id is not provided. - */ - id?: number | string - req: PayloadRequest -}): Promise<{ - docPermissions: SanitizedDocumentPermissions - hasDeletePermission: boolean - hasPublishPermission: boolean - hasSavePermission: boolean - hasTrashPermission: boolean -}> => { - const { id, collectionConfig, data = {}, globalConfig, req } = args - - let docPermissions: SanitizedDocumentPermissions - let hasPublishPermission = false - let hasTrashPermission = false - let hasDeletePermission = false - - if (collectionConfig) { - try { - docPermissions = await docAccessOperation({ - id, - collection: { - config: collectionConfig, - }, - data: { - ...data, - _status: 'draft', - }, - req, - }) - - if (hasDraftsEnabled(collectionConfig)) { - hasPublishPermission = ( - await docAccessOperation({ - id, - collection: { - config: collectionConfig, - }, - data: { - ...data, - _status: 'published', - }, - req, - }) - ).update - } - - if (collectionConfig.trash) { - const { deletedAt: _, ...dataWithoutDeletedAt } = data || {} - - const [trashPermissionResult, deletePermissionResult] = await Promise.all([ - docAccessOperation({ - id, - collection: { - config: collectionConfig, - }, - data: { - ...data, - deletedAt: new Date().toISOString(), - }, - req, - }), - docAccessOperation({ - id, - collection: { - config: collectionConfig, - }, - data: dataWithoutDeletedAt, - req, - }), - ]) - - hasTrashPermission = trashPermissionResult.delete - hasDeletePermission = deletePermissionResult.delete - } else { - // When trash is not enabled, delete permission is straightforward - hasDeletePermission = 'delete' in docPermissions ? Boolean(docPermissions.delete) : false - hasTrashPermission = false - } - } catch (err) { - logError({ err, payload: req.payload }) - } - } - - if (globalConfig) { - try { - docPermissions = await docAccessOperationGlobal({ - data, - globalConfig, - req, - }) - - if (hasDraftsEnabled(globalConfig)) { - hasPublishPermission = ( - await docAccessOperationGlobal({ - data: { - ...data, - _status: 'published', - }, - globalConfig, - req, - }) - ).update - } - - // Globals don't support trash - hasDeletePermission = false - hasTrashPermission = false - } catch (err) { - logError({ err, payload: req.payload }) - } - } - - const hasSavePermission = getHasSavePermission({ - collectionSlug: collectionConfig?.slug, - docPermissions, - globalSlug: globalConfig?.slug, - isEditing: getIsEditing({ - id, - collectionSlug: collectionConfig?.slug, - globalSlug: globalConfig?.slug, - }), - }) - - return { - docPermissions, - hasDeletePermission, - hasPublishPermission, - hasSavePermission, - hasTrashPermission, - } -} +export { getDocumentPermissions } from '@payloadcms/ui/views/Document/getDocumentPermissions' diff --git a/packages/next/src/views/Document/getIsLocked.ts b/packages/next/src/views/Document/getIsLocked.ts index f69a29cf0b0..30c35ee64a5 100644 --- a/packages/next/src/views/Document/getIsLocked.ts +++ b/packages/next/src/views/Document/getIsLocked.ts @@ -1,120 +1 @@ -import type { - PayloadRequest, - SanitizedCollectionConfig, - SanitizedGlobalConfig, - TypedUser, - Where, -} from 'payload' - -import { sanitizeID } from '@payloadcms/ui/shared' -import { extractID } from 'payload/shared' - -type Args = { - collectionConfig?: SanitizedCollectionConfig - globalConfig?: SanitizedGlobalConfig - id?: number | string - isEditing: boolean - req: PayloadRequest -} - -type Result = Promise<{ - currentEditor?: TypedUser - isLocked: boolean - lastUpdateTime?: number -}> - -export const getIsLocked = async ({ - id, - collectionConfig, - globalConfig, - isEditing, - req, -}: Args): Result => { - const entityConfig = collectionConfig || globalConfig - - const entityHasLockingEnabled = - entityConfig?.lockDocuments !== undefined ? entityConfig?.lockDocuments : true - - // Check if the locked-documents collection exists - if (!req.payload.collections?.['payload-locked-documents']) { - // If the collection doesn't exist, locking is not available - return { - isLocked: false, - } - } - - if (!entityHasLockingEnabled || !isEditing) { - return { - isLocked: false, - } - } - - const where: Where = {} - - const lockDurationDefault = 300 // Default 5 minutes in seconds - const lockDuration = - typeof entityConfig.lockDocuments === 'object' - ? entityConfig.lockDocuments.duration - : lockDurationDefault - const lockDurationInMilliseconds = lockDuration * 1000 - - const now = new Date().getTime() - - if (globalConfig) { - where.and = [ - { - globalSlug: { - equals: globalConfig.slug, - }, - }, - { - updatedAt: { - greater_than: new Date(now - lockDurationInMilliseconds), - }, - }, - ] - } else { - where.and = [ - { - 'document.value': { - equals: sanitizeID(id), - }, - }, - { - 'document.relationTo': { - equals: collectionConfig.slug, - }, - }, - { - updatedAt: { - greater_than: new Date(now - lockDurationInMilliseconds), - }, - }, - ] - } - - const { docs } = await req.payload.find({ - collection: 'payload-locked-documents', - depth: 1, - overrideAccess: false, - req, - where, - }) - - if (docs.length > 0) { - const currentEditor = docs[0].user?.value - const lastUpdateTime = new Date(docs[0].updatedAt).getTime() - - if (extractID(currentEditor) !== req.user.id) { - return { - currentEditor, - isLocked: true, - lastUpdateTime, - } - } - } - - return { - isLocked: false, - } -} +export { getIsLocked } from '@payloadcms/ui/views/Document/getIsLocked' diff --git a/packages/next/src/views/Document/getVersions.ts b/packages/next/src/views/Document/getVersions.ts index 204ac871b02..ad02b98e841 100644 --- a/packages/next/src/views/Document/getVersions.ts +++ b/packages/next/src/views/Document/getVersions.ts @@ -1,316 +1 @@ -import { sanitizeID, traverseForLocalizedFields } from '@payloadcms/ui/shared' -import { - combineQueries, - extractAccessFromPermission, - type Payload, - type SanitizedCollectionConfig, - type SanitizedDocumentPermissions, - type SanitizedGlobalConfig, - type TypedUser, -} from 'payload' -import { hasAutosaveEnabled, hasDraftsEnabled } from 'payload/shared' - -type Args = { - collectionConfig?: SanitizedCollectionConfig - /** - * Optional - performance optimization. - * If a document has been fetched before fetching versions, pass it here. - * If this document is set to published, we can skip the query to find out if a published document exists, - * as the passed in document is proof of its existence. - */ - doc?: Record - docPermissions: SanitizedDocumentPermissions - globalConfig?: SanitizedGlobalConfig - id?: number | string - locale?: string - payload: Payload - user: TypedUser -} - -type Result = Promise<{ - hasPublishedDoc: boolean - mostRecentVersionIsAutosaved: boolean - unpublishedVersionCount: number - versionCount: number -}> - -// TODO: in the future, we can parallelize some of these queries -// this will speed up the API by ~30-100ms or so -// Note from the future: I have attempted parallelizing these queries, but it made this function almost 2x slower. -export const getVersions = async ({ - id: idArg, - collectionConfig, - doc, - docPermissions, - globalConfig, - locale, - payload, - user, -}: Args): Result => { - const id = sanitizeID(idArg) - let publishedDoc - let hasPublishedDoc = false - let mostRecentVersionIsAutosaved = false - let unpublishedVersionCount = 0 - let versionCount = 0 - - const entityConfig = collectionConfig || globalConfig - const versionsConfig = entityConfig?.versions - const hasLocalizedFields = traverseForLocalizedFields(entityConfig.fields) - const localizedDraftsEnabled = - hasDraftsEnabled(entityConfig) && - typeof payload.config.localization === 'object' && - hasLocalizedFields - - const shouldFetchVersions = Boolean(versionsConfig && docPermissions?.readVersions) - - if (!shouldFetchVersions) { - // Without readVersions permission, determine published status from the _status field - const hasPublishedDoc = localizedDraftsEnabled - ? doc?._status === 'published' - : doc?._status !== 'draft' - - return { - hasPublishedDoc, - mostRecentVersionIsAutosaved, - unpublishedVersionCount, - versionCount, - } - } - - if (collectionConfig) { - if (!id) { - return { - hasPublishedDoc, - mostRecentVersionIsAutosaved, - unpublishedVersionCount, - versionCount, - } - } - - if (hasDraftsEnabled(collectionConfig)) { - // Find out if a published document exists - if (doc?._status === 'published') { - publishedDoc = doc - } else { - publishedDoc = ( - await payload.find({ - collection: collectionConfig.slug, - depth: 0, - limit: 1, - locale: locale || undefined, - pagination: false, - select: { - updatedAt: true, - }, - user, - where: { - and: [ - { - _status: { - equals: 'published', - }, - }, - { - id: { - equals: id, - }, - }, - ], - }, - }) - )?.docs?.[0] - } - - if (publishedDoc) { - hasPublishedDoc = true - } - - if (hasAutosaveEnabled(collectionConfig)) { - const where: Record = { - and: [ - { - parent: { - equals: id, - }, - }, - ], - } - - if (localizedDraftsEnabled) { - where.and.push({ - snapshot: { - not_equals: true, - }, - }) - } - - const mostRecentVersion = await payload.findVersions({ - collection: collectionConfig.slug, - depth: 0, - limit: 1, - locale, - select: { - autosave: true, - }, - user, - where: combineQueries(where, extractAccessFromPermission(docPermissions.readVersions)), - }) - - if ( - mostRecentVersion.docs[0] && - 'autosave' in mostRecentVersion.docs[0] && - mostRecentVersion.docs[0].autosave - ) { - mostRecentVersionIsAutosaved = true - } - } - - if (publishedDoc?.updatedAt) { - ;({ totalDocs: unpublishedVersionCount } = await payload.countVersions({ - collection: collectionConfig.slug, - locale, - user, - where: combineQueries( - { - and: [ - { - parent: { - equals: id, - }, - }, - { - 'version._status': { - equals: 'draft', - }, - }, - { - updatedAt: { - greater_than: publishedDoc.updatedAt, - }, - }, - ], - }, - extractAccessFromPermission(docPermissions.readVersions), - ), - })) - } - } - - const countVersionsWhere: Record = { - and: [ - { - parent: { - equals: id, - }, - }, - ], - } - - if (localizedDraftsEnabled) { - countVersionsWhere.and.push({ - snapshot: { - not_equals: true, - }, - }) - } - - ;({ totalDocs: versionCount } = await payload.countVersions({ - collection: collectionConfig.slug, - locale, - user, - where: combineQueries( - countVersionsWhere, - extractAccessFromPermission(docPermissions.readVersions), - ), - })) - } - - if (globalConfig) { - // Find out if a published document exists - if (hasDraftsEnabled(globalConfig)) { - if (doc?._status === 'published') { - publishedDoc = doc - } else { - publishedDoc = await payload.findGlobal({ - slug: globalConfig.slug, - depth: 0, - locale, - select: { - updatedAt: true, - }, - user, - }) - } - - if (publishedDoc?._status === 'published') { - hasPublishedDoc = true - } - - if (hasAutosaveEnabled(globalConfig)) { - const mostRecentVersion = await payload.findGlobalVersions({ - slug: globalConfig.slug, - limit: 1, - locale, - select: { - autosave: true, - }, - user, - }) - - if ( - mostRecentVersion.docs[0] && - 'autosave' in mostRecentVersion.docs[0] && - mostRecentVersion.docs[0].autosave - ) { - mostRecentVersionIsAutosaved = true - } - } - - if (publishedDoc?.updatedAt) { - ;({ totalDocs: unpublishedVersionCount } = await payload.countGlobalVersions({ - global: globalConfig.slug, - locale, - user, - where: combineQueries( - { - and: [ - { - 'version._status': { - equals: 'draft', - }, - }, - { - updatedAt: { - greater_than: publishedDoc.updatedAt, - }, - }, - ], - }, - extractAccessFromPermission(docPermissions.readVersions), - ), - })) - } - } - - ;({ totalDocs: versionCount } = await payload.countGlobalVersions({ - global: globalConfig.slug, - locale, - user, - where: localizedDraftsEnabled - ? { - snapshot: { - not_equals: true, - }, - } - : undefined, - })) - } - - return { - hasPublishedDoc, - mostRecentVersionIsAutosaved, - unpublishedVersionCount, - versionCount, - } -} +export { getVersions } from '@payloadcms/ui/views/Document/getVersions' diff --git a/packages/next/src/views/Document/handleServerFunction.tsx b/packages/next/src/views/Document/handleServerFunction.tsx index 593a80981e8..04958761783 100644 --- a/packages/next/src/views/Document/handleServerFunction.tsx +++ b/packages/next/src/views/Document/handleServerFunction.tsx @@ -1,128 +1 @@ -import type { RenderDocumentServerFunction } from '@payloadcms/ui' -import type { DocumentPreferences, VisibleEntities } from 'payload' - -import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig' -import { canAccessAdmin, isEntityHidden } from 'payload' -import { applyLocaleFiltering } from 'payload/shared' - -import { renderDocument } from './index.js' - -export const renderDocumentHandler: RenderDocumentServerFunction = async (args) => { - const { - collectionSlug, - cookies, - disableActions, - docID, - drawerSlug, - initialData, - locale, - overrideEntityVisibility, - paramsOverride, - permissions, - redirectAfterCreate, - redirectAfterDelete, - redirectAfterDuplicate, - req, - req: { - i18n, - payload, - payload: { config }, - user, - }, - searchParams = {}, - versions, - } = args - - await canAccessAdmin({ req }) - - const clientConfig = getClientConfig({ - config, - i18n, - importMap: req.payload.importMap, - user, - }) - await applyLocaleFiltering({ clientConfig, config, req }) - - let preferences: DocumentPreferences - - if (docID) { - const preferencesKey = `${collectionSlug}-edit-${docID}` - - preferences = await payload - .find({ - collection: 'payload-preferences', - depth: 0, - limit: 1, - where: { - and: [ - { - key: { - equals: preferencesKey, - }, - }, - { - 'user.relationTo': { - equals: user.collection, - }, - }, - { - 'user.value': { - equals: user.id, - }, - }, - ], - }, - }) - .then((res) => res.docs[0]?.value as DocumentPreferences) - } - - const visibleEntities: VisibleEntities = { - collections: payload.config.collections - .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) - .filter(Boolean), - globals: payload.config.globals - .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) - .filter(Boolean), - } - - const { data, Document } = await renderDocument({ - clientConfig, - disableActions, - documentSubViewType: 'default', - drawerSlug, - i18n, - importMap: payload.importMap, - initialData, - initPageResult: { - collectionConfig: payload?.collections?.[collectionSlug]?.config, - cookies, - docID, - globalConfig: payload.config.globals.find((global) => global.slug === collectionSlug), - languageOptions: undefined, // TODO - locale, - permissions, - req, - translations: undefined, // TODO - visibleEntities, - }, - locale, - overrideEntityVisibility, - params: paramsOverride ?? { - segments: ['collections', collectionSlug, String(docID)], - }, - payload, - permissions, - redirectAfterCreate, - redirectAfterDelete, - redirectAfterDuplicate, - searchParams, - versions, - viewType: 'document', - }) - - return { - data, - Document, - preferences, - } -} +export { renderDocumentHandler } from '@payloadcms/ui/views/Document/handleServerFunction' diff --git a/packages/next/src/views/Document/index.tsx b/packages/next/src/views/Document/index.tsx index 3e790c5c8cc..790f91d673e 100644 --- a/packages/next/src/views/Document/index.tsx +++ b/packages/next/src/views/Document/index.tsx @@ -1,466 +1,34 @@ -import type { - AdminViewServerProps, - CollectionPreferences, - Data, - DocumentViewClientProps, - DocumentViewServerProps, - DocumentViewServerPropsOnly, - EditViewComponent, - PayloadComponent, - RenderDocumentVersionsProperties, -} from 'payload' +import type { AdminViewServerProps, RenderDocumentVersionsProperties } from 'payload' -import { - DocumentInfoProvider, - EditDepthProvider, - HydrateAuthProvider, - LivePreviewProvider, -} from '@payloadcms/ui' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import { handleLivePreview, handlePreview } from '@payloadcms/ui/rsc' -import { isEditing as getIsEditing } from '@payloadcms/ui/shared' -import { buildFormState } from '@payloadcms/ui/utilities/buildFormState' +import { renderDocument as renderDocumentFromUI } from '@payloadcms/ui/views/Document/RenderDocument' import { notFound, redirect } from 'next/navigation.js' -import { isolateObjectProperty, logError } from 'payload' -import { formatAdminURL, hasAutosaveEnabled, hasDraftsEnabled } from 'payload/shared' -import React from 'react' +import { logError } from 'payload' import type { GenerateEditViewMetadata } from './getMetaBySegment.js' -import { DocumentHeader } from '../../elements/DocumentHeader/index.js' -import { getPreferences } from '../../utilities/getPreferences.js' -import { NotFoundView } from '../NotFound/index.js' -import { getDocPreferences } from './getDocPreferences.js' -import { getDocumentData } from './getDocumentData.js' -import { getDocumentPermissions } from './getDocumentPermissions.js' -import { getDocumentView } from './getDocumentView.js' -import { getIsLocked } from './getIsLocked.js' import { getMetaBySegment } from './getMetaBySegment.js' -import { getVersions } from './getVersions.js' -import { renderDocumentSlots } from './renderDocumentSlots.js' -export const generateMetadata: GenerateEditViewMetadata = async (args) => getMetaBySegment(args) - -export type ViewToRender = - | EditViewComponent - | PayloadComponent - | React.FC - | React.FC - -/** - * This function is responsible for rendering - * an Edit Document view on the server for both: - * - default document edit views - * - on-demand edit views within drawers - */ -export const renderDocument = async ({ - disableActions, - documentSubViewType, - drawerSlug, - importMap, - initialData, - initPageResult, - overrideEntityVisibility, - params, - redirectAfterCreate, - redirectAfterDelete, - redirectAfterDuplicate, - redirectAfterRestore, - searchParams, - versions, - viewType, -}: { - drawerSlug?: string - overrideEntityVisibility?: boolean - readonly redirectAfterCreate?: boolean - readonly redirectAfterDelete?: boolean - readonly redirectAfterDuplicate?: boolean - readonly redirectAfterRestore?: boolean - versions?: RenderDocumentVersionsProperties -} & AdminViewServerProps): Promise<{ - data: Data - Document: React.ReactNode -}> => { - const { - collectionConfig, - docID: idFromArgs, - globalConfig, - locale, - permissions, - req, - req: { - i18n, - payload, - payload: { - config, - config: { - routes: { admin: adminRoute, api: apiRoute }, - }, - }, - user, - }, - visibleEntities, - } = initPageResult - - const segments = Array.isArray(params?.segments) ? params.segments : [] - const collectionSlug = collectionConfig?.slug || undefined - const globalSlug = globalConfig?.slug || undefined - let isEditing = getIsEditing({ id: idFromArgs, collectionSlug, globalSlug }) - - // Fetch the doc required for the view - let doc = - !idFromArgs && !globalSlug - ? initialData || null - : await getDocumentData({ - id: idFromArgs, - collectionSlug, - globalSlug, - locale, - payload, - req, - segments, - user, - }) - - if (isEditing && !doc) { - // If it's a collection document that doesn't exist, redirect to collection list - if (collectionSlug) { - const redirectURL = formatAdminURL({ - adminRoute, - path: `/collections/${collectionSlug}?notFound=${encodeURIComponent(idFromArgs)}`, - }) - redirect(redirectURL) - } else { - // For globals or other cases, keep the 404 behavior - throw new Error('not-found') - } - } - - const isTrashedDoc = Boolean(doc && 'deletedAt' in doc && typeof doc?.deletedAt === 'string') - - // CRITICAL FIX FOR TRANSACTION RACE CONDITION: - // When running parallel operations with Promise.all, if they share the same req object - // and one operation calls initTransaction() which MUTATES req.transactionID, that mutation - // is visible to all parallel operations. This causes: - // 1. Operation A (e.g., getDocumentPermissions → docAccessOperation) calls initTransaction() - // which sets req.transactionID = Promise, then resolves it to a UUID - // 2. Operation B (e.g., getIsLocked) running in parallel receives the SAME req with the mutated transactionID - // 3. Operation A (does not even know that Operation B even exists and is stil using the transactionID) commits/ends its transaction - // 4. Operation B tries to use the now-expired session → MongoExpiredSessionError! - // - // Solution: Use isolateObjectProperty to create a Proxy that isolates the 'transactionID' property. - // This allows each operation to have its own transactionID without affecting the parent req. - // If parent req already has a transaction, preserve it (don't isolate), since this - // issue only arises when one of the operations calls initTransaction() themselves - - // because then, that operation will also try to commit/end the transaction itself. - - // If the transactionID is already set, the parallel operations will not try to - // commit/end the transaction themselves, so we don't need to isolate the - // transactionID property. - const reqForPermissions = req.transactionID ? req : isolateObjectProperty(req, 'transactionID') - const reqForLockCheck = req.transactionID ? req : isolateObjectProperty(req, 'transactionID') - - const [ - docPreferences, - { - docPermissions, - hasDeletePermission, - hasPublishPermission, - hasSavePermission, - hasTrashPermission, - }, - { currentEditor, isLocked, lastUpdateTime }, - entityPreferences, - ] = await Promise.all([ - // Get document preferences - getDocPreferences({ - id: idFromArgs, - collectionSlug, - globalSlug, - payload, - user, - }), - - // Get permissions - isolated transactionID prevents cross-contamination - getDocumentPermissions({ - id: idFromArgs, - collectionConfig, - data: doc, - globalConfig, - req: reqForPermissions, - }), - - // Fetch document lock state - isolated transactionID prevents cross-contamination - getIsLocked({ - id: idFromArgs, - collectionConfig, - globalConfig, - isEditing, - req: reqForLockCheck, - }), +export type { ViewToRender } from '@payloadcms/ui/views/Document/RenderDocument' - // get entity preferences - getPreferences( - collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`, - payload, - req.user.id, - req.user.collection, - ), - ]) - - const operation = (collectionSlug && idFromArgs) || globalSlug ? 'update' : 'create' - - const [ - { hasPublishedDoc, mostRecentVersionIsAutosaved, unpublishedVersionCount, versionCount }, - { state: formState }, - ] = await Promise.all([ - getVersions({ - id: idFromArgs, - collectionConfig, - doc, - docPermissions, - globalConfig, - locale: locale?.code, - payload, - user, - }), - buildFormState({ - id: idFromArgs, - collectionSlug, - data: doc, - docPermissions, - docPreferences, - fallbackLocale: false, - globalSlug, - locale: locale?.code, - operation, - readOnly: isTrashedDoc || isLocked, - renderAllFields: true, - req, - schemaPath: collectionSlug || globalSlug, - skipValidation: true, - }), - ]) - - const documentViewServerProps: DocumentViewServerPropsOnly = { - doc, - hasPublishedDoc, - i18n, - initPageResult, - locale, - params, - payload, - permissions, - routeSegments: segments, - searchParams, - user, - versions, - } - - if ( - !overrideEntityVisibility && - ((collectionSlug && - !visibleEntities?.collections?.find((visibleSlug) => visibleSlug === collectionSlug)) || - (globalSlug && !visibleEntities?.globals?.find((visibleSlug) => visibleSlug === globalSlug))) - ) { - throw new Error('not-found') - } - - const formattedParams = new URLSearchParams() - - if (hasDraftsEnabled(collectionConfig || globalConfig)) { - formattedParams.append('draft', 'true') - } - - if (locale?.code) { - formattedParams.append('locale', locale.code) - } - - const apiQueryParams = `?${formattedParams.toString()}` - - const apiURL = formatAdminURL({ - apiRoute, - path: collectionSlug - ? `/${collectionSlug}/${idFromArgs}${apiQueryParams}` - : globalSlug - ? `/${globalSlug}${apiQueryParams}` - : '', - }) - - let View: ViewToRender = null - - let showHeader = true - - const RootViewOverride = - collectionConfig?.admin?.components?.views?.edit?.root && - 'Component' in collectionConfig.admin.components.views.edit.root - ? collectionConfig?.admin?.components?.views?.edit?.root?.Component - : globalConfig?.admin?.components?.views?.edit?.root && - 'Component' in globalConfig.admin.components.views.edit.root - ? globalConfig?.admin?.components?.views?.edit?.root?.Component - : null - - if (RootViewOverride) { - View = RootViewOverride - showHeader = false - } else { - ;({ View } = getDocumentView({ - collectionConfig, - config, - docPermissions, - globalConfig, - routeSegments: segments, - })) - } - - if (!View) { - View = NotFoundView - } - - /** - * Handle case where autoSave is enabled and the document is being created - * => create document and redirect - */ - const shouldAutosave = hasSavePermission && hasAutosaveEnabled(collectionConfig || globalConfig) - - const validateDraftData = - collectionConfig?.versions?.drafts && collectionConfig?.versions?.drafts?.validate - - let id = idFromArgs - - if (shouldAutosave && !validateDraftData && !idFromArgs && collectionSlug) { - doc = await payload.create({ - collection: collectionSlug, - data: initialData || {}, - depth: 0, - draft: true, - fallbackLocale: false, - locale: locale?.code, - req, - user, - }) - - if (doc?.id) { - id = doc.id - isEditing = getIsEditing({ id: doc.id, collectionSlug, globalSlug }) - - if (!drawerSlug && redirectAfterCreate !== false) { - const redirectURL = formatAdminURL({ - adminRoute, - path: `/collections/${collectionSlug}/${doc.id}`, - }) - - redirect(redirectURL) - } - } else { - throw new Error('not-found') - } - } - - const documentSlots = renderDocumentSlots({ - id, - collectionConfig, - globalConfig, - hasSavePermission, - locale, - permissions, - req, - }) - - // Extract Description from documentSlots to pass to DocumentHeader - const { Description } = documentSlots - - const clientProps: DocumentViewClientProps = { - formState, - ...documentSlots, - documentSubViewType, - viewType, - } - - const { isLivePreviewEnabled, livePreviewConfig, livePreviewURL } = await handleLivePreview({ - collectionSlug, - config, - data: doc, - globalSlug, - operation, - req, - }) +export const generateMetadata: GenerateEditViewMetadata = async (args) => getMetaBySegment(args) - const { isPreviewEnabled, previewURL } = await handlePreview({ - collectionSlug, - config, - data: doc, - globalSlug, - operation, - req, +export const renderDocument = ( + args: { + drawerSlug?: string + overrideEntityVisibility?: boolean + readonly redirectAfterCreate?: boolean + readonly redirectAfterDelete?: boolean + readonly redirectAfterDuplicate?: boolean + readonly redirectAfterRestore?: boolean + versions?: RenderDocumentVersionsProperties + } & AdminViewServerProps, +) => + renderDocumentFromUI({ + ...args, + notFound: () => notFound(), + redirect: (url) => redirect(url), }) - return { - data: doc, - Document: ( - - - {showHeader && !drawerSlug && ( - - )} - - - {RenderServerComponent({ - clientProps, - Component: View, - importMap, - serverProps: documentViewServerProps, - })} - - - - ), - } -} - export async function DocumentView(props: AdminViewServerProps) { try { const { Document: RenderedDocument } = await renderDocument(props) diff --git a/packages/next/src/views/Document/renderDocumentSlots.tsx b/packages/next/src/views/Document/renderDocumentSlots.tsx index 704276ea1ec..03a87c177f4 100644 --- a/packages/next/src/views/Document/renderDocumentSlots.tsx +++ b/packages/next/src/views/Document/renderDocumentSlots.tsx @@ -1,242 +1,4 @@ -import type { - BeforeDocumentControlsServerPropsOnly, - DocumentSlots, - EditMenuItemsServerPropsOnly, - Locale, - PayloadRequest, - PreviewButtonServerPropsOnly, - PublishButtonServerPropsOnly, - SanitizedCollectionConfig, - SanitizedGlobalConfig, - SanitizedPermissions, - SaveButtonServerPropsOnly, - SaveDraftButtonServerPropsOnly, - ServerFunction, - ServerProps, - StaticDescription, - UnpublishButtonServerPropsOnly, - ViewDescriptionClientProps, - ViewDescriptionServerPropsOnly, -} from 'payload' - -import { ViewDescription } from '@payloadcms/ui' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import { hasDraftsEnabled } from 'payload/shared' - -import { getDocumentPermissions } from './getDocumentPermissions.js' - -export const renderDocumentSlots: (args: { - collectionConfig?: SanitizedCollectionConfig - globalConfig?: SanitizedGlobalConfig - hasSavePermission: boolean - id?: number | string - locale: Locale - permissions: SanitizedPermissions - req: PayloadRequest -}) => DocumentSlots = (args) => { - const { id, collectionConfig, globalConfig, hasSavePermission, locale, permissions, req } = args - - const components: DocumentSlots = {} as DocumentSlots - - const unsavedDraftWithValidations = undefined - - const isPreviewEnabled = collectionConfig?.admin?.preview || globalConfig?.admin?.preview - - const serverProps: ServerProps = { - id, - i18n: req.i18n, - locale, - payload: req.payload, - permissions, - user: req.user, - // TODO: Add remaining serverProps - } - - const BeforeDocumentControls = - collectionConfig?.admin?.components?.edit?.beforeDocumentControls || - globalConfig?.admin?.components?.elements?.beforeDocumentControls - - if (BeforeDocumentControls) { - components.BeforeDocumentControls = RenderServerComponent({ - Component: BeforeDocumentControls, - importMap: req.payload.importMap, - serverProps: serverProps satisfies BeforeDocumentControlsServerPropsOnly, - }) - } - - const EditMenuItems = collectionConfig?.admin?.components?.edit?.editMenuItems - - if (EditMenuItems) { - components.EditMenuItems = RenderServerComponent({ - Component: EditMenuItems, - importMap: req.payload.importMap, - serverProps: serverProps satisfies EditMenuItemsServerPropsOnly, - }) - } - - const CustomPreviewButton = - collectionConfig?.admin?.components?.edit?.PreviewButton || - globalConfig?.admin?.components?.elements?.PreviewButton - - if (isPreviewEnabled && CustomPreviewButton) { - components.PreviewButton = RenderServerComponent({ - Component: CustomPreviewButton, - importMap: req.payload.importMap, - serverProps: serverProps satisfies PreviewButtonServerPropsOnly, - }) - } - - const LivePreview = - collectionConfig?.admin?.components?.views?.edit?.livePreview || - globalConfig?.admin?.components?.views?.edit?.livePreview - - if (LivePreview?.Component) { - components.LivePreview = RenderServerComponent({ - Component: LivePreview.Component, - importMap: req.payload.importMap, - serverProps, - }) - } - - const descriptionFromConfig = - collectionConfig?.admin?.description || globalConfig?.admin?.description - - const staticDescription: StaticDescription = - typeof descriptionFromConfig === 'function' - ? descriptionFromConfig({ t: req.i18n.t }) - : descriptionFromConfig - - const CustomDescription = - collectionConfig?.admin?.components?.Description || - globalConfig?.admin?.components?.elements?.Description - - const hasDescription = CustomDescription || staticDescription - - if (hasDescription) { - components.Description = RenderServerComponent({ - clientProps: { - collectionSlug: collectionConfig?.slug, - description: staticDescription, - } satisfies ViewDescriptionClientProps, - Component: CustomDescription, - Fallback: ViewDescription, - importMap: req.payload.importMap, - serverProps: serverProps satisfies ViewDescriptionServerPropsOnly, - }) - } - - if (collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts) { - const CustomStatus = - collectionConfig?.admin?.components?.edit?.Status || - globalConfig?.admin?.components?.elements?.Status - - if (CustomStatus) { - components.Status = RenderServerComponent({ - Component: CustomStatus, - importMap: req.payload.importMap, - serverProps, - }) - } - } - - if (hasSavePermission) { - if (hasDraftsEnabled(collectionConfig || globalConfig)) { - const CustomPublishButton = - collectionConfig?.admin?.components?.edit?.PublishButton || - globalConfig?.admin?.components?.elements?.PublishButton - - if (CustomPublishButton) { - components.PublishButton = RenderServerComponent({ - Component: CustomPublishButton, - importMap: req.payload.importMap, - serverProps: serverProps satisfies PublishButtonServerPropsOnly, - }) - } - - const CustomUnpublishButton = - collectionConfig?.admin?.components?.edit?.UnpublishButton || - globalConfig?.admin?.components?.elements?.UnpublishButton - - if (CustomUnpublishButton) { - components.UnpublishButton = RenderServerComponent({ - Component: CustomUnpublishButton, - importMap: req.payload.importMap, - serverProps: serverProps satisfies UnpublishButtonServerPropsOnly, - }) - } - - const CustomSaveDraftButton = - collectionConfig?.admin?.components?.edit?.SaveDraftButton || - globalConfig?.admin?.components?.elements?.SaveDraftButton - - const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig) - - if ((draftsEnabled || unsavedDraftWithValidations) && CustomSaveDraftButton) { - components.SaveDraftButton = RenderServerComponent({ - Component: CustomSaveDraftButton, - importMap: req.payload.importMap, - serverProps: serverProps satisfies SaveDraftButtonServerPropsOnly, - }) - } - } else { - const CustomSaveButton = - collectionConfig?.admin?.components?.edit?.SaveButton || - globalConfig?.admin?.components?.elements?.SaveButton - - if (CustomSaveButton) { - components.SaveButton = RenderServerComponent({ - Component: CustomSaveButton, - importMap: req.payload.importMap, - serverProps: serverProps satisfies SaveButtonServerPropsOnly, - }) - } - } - } - - if (collectionConfig?.upload && collectionConfig?.admin?.components?.edit?.Upload) { - components.Upload = RenderServerComponent({ - Component: collectionConfig.admin.components.edit.Upload, - importMap: req.payload.importMap, - serverProps, - }) - } - - if (collectionConfig?.upload && collectionConfig.upload.admin?.components?.controls) { - components.UploadControls = RenderServerComponent({ - Component: collectionConfig.upload.admin.components.controls, - importMap: req.payload.importMap, - serverProps, - }) - } - - return components -} - -export const renderDocumentSlotsHandler: ServerFunction<{ - collectionSlug: string - id?: number | string -}> = async (args) => { - const { id, collectionSlug, locale, permissions, req } = args - - const collectionConfig = req.payload.collections[collectionSlug]?.config - - if (!collectionConfig) { - throw new Error(req.t('error:incorrectCollection')) - } - - const { hasSavePermission } = await getDocumentPermissions({ - id, - collectionConfig, - data: {}, - req, - }) - - return renderDocumentSlots({ - id, - collectionConfig, - hasSavePermission, - locale, - permissions, - req, - }) -} +export { + renderDocumentSlots, + renderDocumentSlotsHandler, +} from '@payloadcms/ui/views/Document/renderDocumentSlots' diff --git a/packages/next/src/views/ForgotPassword/index.tsx b/packages/next/src/views/ForgotPassword/index.tsx index bfaf3702477..c4eb27a6a69 100644 --- a/packages/next/src/views/ForgotPassword/index.tsx +++ b/packages/next/src/views/ForgotPassword/index.tsx @@ -1,75 +1 @@ -import type { AdminViewServerProps } from 'payload' - -import { Button, Link } from '@payloadcms/ui' -import { Translation } from '@payloadcms/ui/shared' -import { formatAdminURL } from 'payload/shared' -import React, { Fragment } from 'react' - -import { FormHeader } from '../../elements/FormHeader/index.js' -import { ForgotPasswordForm } from './ForgotPasswordForm/index.js' - -export const forgotPasswordBaseClass = 'forgot-password' - -export function ForgotPasswordView({ initPageResult }: AdminViewServerProps) { - const { - req: { - i18n, - payload: { config }, - user, - }, - } = initPageResult - - const { - admin: { - routes: { account: accountRoute, login: loginRoute }, - }, - routes: { admin: adminRoute }, - } = config - - if (user) { - return ( - - ( - - {children} - - ), - }} - i18nKey="authentication:loggedInChangePassword" - t={i18n.t} - /> - } - heading={i18n.t('authentication:alreadyLoggedIn')} - /> - - - ) - } - - return ( - - - - {i18n.t('authentication:backToLogin')} - - - ) -} +export { forgotPasswordBaseClass, ForgotPasswordView } from '@payloadcms/ui/views/ForgotPassword' diff --git a/packages/next/src/views/List/createSerializableValue.ts b/packages/next/src/views/List/createSerializableValue.ts index a6932813a04..25f89a2070e 100644 --- a/packages/next/src/views/List/createSerializableValue.ts +++ b/packages/next/src/views/List/createSerializableValue.ts @@ -1,13 +1 @@ -// Helper function to create serializable value for client components -export const createSerializableValue = (value: any): string => { - if (value === null || value === undefined) { - return 'null' - } - if (typeof value === 'object' && value?.relationTo && value?.value) { - return `${value.relationTo}:${value.value}` - } - if (typeof value === 'object' && value?.id) { - return String(value.id) - } - return String(value) -} +export { createSerializableValue } from '@payloadcms/ui/views/List/createSerializableValue' diff --git a/packages/next/src/views/List/enrichDocsWithVersionStatus.ts b/packages/next/src/views/List/enrichDocsWithVersionStatus.ts index ff1973ebbfe..a4ad86cf6b6 100644 --- a/packages/next/src/views/List/enrichDocsWithVersionStatus.ts +++ b/packages/next/src/views/List/enrichDocsWithVersionStatus.ts @@ -1,117 +1 @@ -import type { PaginatedDocs, PayloadRequest, SanitizedCollectionConfig } from 'payload' - -/** - * Enriches list view documents with correct draft status display. - * When draft=true is used in the query, Payload returns the latest draft version if it exists. - * This function checks if draft documents also have a published version to determine "changed" status. - * - * Performance: Uses a single query to find all documents with "changed" status instead of N queries. - */ -export async function enrichDocsWithVersionStatus({ - collectionConfig, - data, - req, -}: { - collectionConfig: SanitizedCollectionConfig - data: PaginatedDocs - req: PayloadRequest -}): Promise { - const draftsEnabled = collectionConfig?.versions?.drafts - - if (!draftsEnabled || !data?.docs?.length) { - return data - } - - // Find all draft documents - // When querying with draft:true, we get the latest draft if it exists - // We need to check if these drafts have a published version - const draftDocs = data.docs.filter((doc) => doc._status === 'draft') - - if (draftDocs.length === 0) { - return data - } - - const draftDocIds = draftDocs.map((doc) => doc.id).filter(Boolean) - - if (draftDocIds.length === 0) { - return data - } - - // OPTIMIZATION: Single query to find all document IDs that have BOTH: - // 1. A draft version (latest=true, _status='draft') - // 2. A published version (_status='published') - // These are the documents with "changed" status - try { - // TODO: This could be more efficient with a findDistinctVersions() API: - // const { values } = await req.payload.findDistinctVersions({ - // collection: collectionConfig.slug, - // field: 'parent', - // where: { - // and: [ - // { parent: { in: draftDocIds } }, - // { 'version._status': { equals: 'published' } }, - // ], - // }, - // }) - // const hasPublishedVersionSet = new Set(values) - // - // For now, we query all published versions but only select the 'parent' field - // to minimize data transfer, then deduplicate with a Set - const publishedVersions = await req.payload.findVersions({ - collection: collectionConfig.slug, - depth: 0, - limit: 0, - pagination: false, - select: { - parent: true, - }, - where: { - and: [ - { - parent: { - in: draftDocIds, - }, - }, - { - 'version._status': { - equals: 'published', - }, - }, - ], - }, - }) - - // Create a Set of document IDs that have published versions - const hasPublishedVersionSet = new Set( - publishedVersions.docs.map((version) => version.parent).filter(Boolean), - ) - - // Enrich documents with display status - const enrichedDocs = data.docs.map((doc) => { - // If it's a draft and has a published version, show "changed" - if (doc._status === 'draft' && hasPublishedVersionSet.has(doc.id)) { - return { - ...doc, - _displayStatus: 'changed' as const, - } - } - - return { - ...doc, - _displayStatus: doc._status as 'draft' | 'published', - } - }) - - return { - ...data, - docs: enrichedDocs, - } - } catch (error) { - // If there's an error querying versions, just return the original data - req.payload.logger.error({ - err: error, - msg: `Error checking version status for collection ${collectionConfig.slug}`, - }) - return data - } -} +export { enrichDocsWithVersionStatus } from '@payloadcms/ui/views/List/enrichDocsWithVersionStatus' diff --git a/packages/next/src/views/List/extractRelationshipDisplayValue.ts b/packages/next/src/views/List/extractRelationshipDisplayValue.ts index ee97d7ff837..c6df380e017 100644 --- a/packages/next/src/views/List/extractRelationshipDisplayValue.ts +++ b/packages/next/src/views/List/extractRelationshipDisplayValue.ts @@ -1,25 +1 @@ -import type { ClientCollectionConfig, ClientConfig } from 'payload' - -// Helper function to extract display value from relationship -export const extractRelationshipDisplayValue = ( - relationship: any, - clientConfig: ClientConfig, - relationshipConfig?: ClientCollectionConfig, -): string => { - if (!relationship) { - return '' - } - - // Handle polymorphic relationships - if (typeof relationship === 'object' && relationship?.relationTo && relationship?.value) { - const config = clientConfig.collections.find((c) => c.slug === relationship.relationTo) - return relationship.value?.[config?.admin?.useAsTitle || 'id'] || '' - } - - // Handle regular relationships - if (typeof relationship === 'object' && relationship?.id) { - return relationship[relationshipConfig?.admin?.useAsTitle || 'id'] || '' - } - - return String(relationship) -} +export { extractRelationshipDisplayValue } from '@payloadcms/ui/views/List/extractRelationshipDisplayValue' diff --git a/packages/next/src/views/List/extractValueOrRelationshipID.ts b/packages/next/src/views/List/extractValueOrRelationshipID.ts index 17e6df50ee0..fe1bc03a0a9 100644 --- a/packages/next/src/views/List/extractValueOrRelationshipID.ts +++ b/packages/next/src/views/List/extractValueOrRelationshipID.ts @@ -1,21 +1 @@ -// Helper function to extract value or relationship ID for database queries -export const extractValueOrRelationshipID = (relationship: any): any => { - if (!relationship || typeof relationship !== 'object') { - return relationship - } - - // For polymorphic relationships, preserve structure but ensure IDs are strings - if (relationship?.relationTo && relationship?.value) { - return { - relationTo: relationship.relationTo, - value: String(relationship.value?.id || relationship.value), - } - } - - // For regular relationships, extract ID - if (relationship?.id) { - return String(relationship.id) - } - - return relationship -} +export { extractValueOrRelationshipID } from '@payloadcms/ui/views/List/extractValueOrRelationshipID' diff --git a/packages/next/src/views/List/handleGroupBy.ts b/packages/next/src/views/List/handleGroupBy.ts index be1fe168ed1..714cadf7033 100644 --- a/packages/next/src/views/List/handleGroupBy.ts +++ b/packages/next/src/views/List/handleGroupBy.ts @@ -1,223 +1 @@ -import type { - ClientCollectionConfig, - ClientConfig, - Column, - ListQuery, - PaginatedDocs, - PayloadRequest, - SanitizedCollectionConfig, - SanitizedFieldsPermissions, - SelectType, - ViewTypes, - Where, -} from 'payload' - -import { renderTable } from '@payloadcms/ui/rsc' -import { formatDate } from '@payloadcms/ui/shared' -import { flattenAllFields } from 'payload' - -import { createSerializableValue } from './createSerializableValue.js' -import { extractRelationshipDisplayValue } from './extractRelationshipDisplayValue.js' -import { extractValueOrRelationshipID } from './extractValueOrRelationshipID.js' - -export const handleGroupBy = async ({ - clientCollectionConfig, - clientConfig, - collectionConfig, - collectionSlug, - columns, - customCellProps, - drawerSlug, - enableRowSelections, - fieldPermissions, - query, - req, - select, - trash = false, - user, - viewType, - where: whereWithMergedSearch, -}: { - clientCollectionConfig: ClientCollectionConfig - clientConfig: ClientConfig - collectionConfig: SanitizedCollectionConfig - collectionSlug: string - columns: any[] - customCellProps?: Record - drawerSlug?: string - enableRowSelections?: boolean - fieldPermissions?: SanitizedFieldsPermissions - query?: ListQuery - req: PayloadRequest - select?: SelectType - trash?: boolean - user: any - viewType?: ViewTypes - where: Where -}): Promise<{ - columnState: Column[] - data: PaginatedDocs - Table: null | React.ReactNode | React.ReactNode[] -}> => { - let Table: React.ReactNode | React.ReactNode[] = null - let columnState: Column[] - - const dataByGroup: Record = {} - - // NOTE: is there a faster/better way to do this? - const flattenedFields = flattenAllFields({ fields: collectionConfig.fields }) - - const groupByFieldPath = query.groupBy.replace(/^-/, '') - - const groupByField = flattenedFields.find((f) => f.name === groupByFieldPath) - - // Set up population for relationships - let populate - - if (groupByField?.type === 'relationship' && groupByField.relationTo) { - const relationTo = Array.isArray(groupByField.relationTo) - ? groupByField.relationTo - : [groupByField.relationTo] - - populate = {} - relationTo.forEach((rel) => { - const config = clientConfig.collections.find((c) => c.slug === rel) - populate[rel] = { [config?.admin?.useAsTitle || 'id']: true } - }) - } - - const distinct = await req.payload.findDistinct({ - collection: collectionSlug, - depth: 1, - field: groupByFieldPath, - limit: query?.limit ? Number(query.limit) : undefined, - locale: req.locale, - overrideAccess: false, - page: query?.page ? Number(query.page) : undefined, - populate, - req, - sort: query?.groupBy, - trash, - where: whereWithMergedSearch, - }) - - const data = { - ...distinct, - docs: distinct.values?.map(() => ({})) || [], - values: undefined, - } - - await Promise.all( - (distinct.values || []).map(async (distinctValue, i) => { - const potentiallyPopulatedRelationship = distinctValue[groupByFieldPath] - - // Extract value or relationship ID for database query - const valueOrRelationshipID = extractValueOrRelationshipID(potentiallyPopulatedRelationship) - - const groupData = await req.payload.find({ - collection: collectionSlug, - depth: 0, - draft: true, - fallbackLocale: false, - includeLockStatus: true, - limit: query?.queryByGroup?.[valueOrRelationshipID]?.limit - ? Number(query.queryByGroup[valueOrRelationshipID].limit) - : undefined, - locale: req.locale, - overrideAccess: false, - page: query?.queryByGroup?.[valueOrRelationshipID]?.page - ? Number(query.queryByGroup[valueOrRelationshipID].page) - : undefined, - req, - // Note: if we wanted to enable table-by-table sorting, we could use this: - // sort: query?.queryByGroup?.[valueOrRelationshipID]?.sort, - select, - sort: query?.sort, - trash, - user, - where: { - ...(whereWithMergedSearch || {}), - [groupByFieldPath]: { - equals: valueOrRelationshipID, - }, - }, - }) - - // Extract heading - let heading: string - - if (potentiallyPopulatedRelationship === null) { - heading = req.i18n.t('general:noValue') - } else if (groupByField?.type === 'relationship') { - const relationshipConfig = Array.isArray(groupByField.relationTo) - ? undefined - : clientConfig.collections.find((c) => c.slug === groupByField.relationTo) - heading = extractRelationshipDisplayValue( - potentiallyPopulatedRelationship, - clientConfig, - relationshipConfig, - ) - } else if (groupByField?.type === 'date') { - heading = formatDate({ - date: String(valueOrRelationshipID), - i18n: req.i18n, - pattern: clientConfig.admin.dateFormat, - }) - } else if (groupByField?.type === 'checkbox') { - if (valueOrRelationshipID === true) { - heading = req.i18n.t('general:true') - } - if (valueOrRelationshipID === false) { - heading = req.i18n.t('general:false') - } - } else { - heading = String(valueOrRelationshipID) - } - - // Create serializable value for client - const serializableValue = createSerializableValue(valueOrRelationshipID) - - if (groupData.docs && groupData.docs.length > 0) { - const { columnState: newColumnState, Table: NewTable } = renderTable({ - clientCollectionConfig, - collectionConfig, - columns, - customCellProps, - data: groupData, - drawerSlug, - enableRowSelections, - fieldPermissions, - groupByFieldPath, - groupByValue: serializableValue, - heading: heading || req.i18n.t('general:noValue'), - i18n: req.i18n, - key: `table-${serializableValue}`, - orderableFieldName: collectionConfig.orderable === true ? '_order' : undefined, - payload: req.payload, - query, - useAsTitle: collectionConfig.admin.useAsTitle, - viewType, - }) - - // Only need to set `columnState` once, using the first table's column state - // This will avoid needing to generate column state explicitly for root context that wraps all tables - if (!columnState) { - columnState = newColumnState - } - - if (!Table) { - Table = [] - } - - dataByGroup[serializableValue] = groupData - ;(Table as Array)[i] = NewTable - } - }), - ) - - return { - columnState, - data, - Table, - } -} +export { handleGroupBy } from '@payloadcms/ui/views/List/handleGroupBy' diff --git a/packages/next/src/views/List/handleServerFunction.tsx b/packages/next/src/views/List/handleServerFunction.tsx index 28755e5f254..df868706554 100644 --- a/packages/next/src/views/List/handleServerFunction.tsx +++ b/packages/next/src/views/List/handleServerFunction.tsx @@ -1,129 +1 @@ -import type { RenderListServerFnArgs, RenderListServerFnReturnType } from '@payloadcms/ui' -import type { CollectionPreferences, ServerFunction, VisibleEntities } from 'payload' - -import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig' -import { canAccessAdmin, isEntityHidden, UnauthorizedError } from 'payload' -import { applyLocaleFiltering } from 'payload/shared' - -import { renderListView } from './index.js' - -export const renderListHandler: ServerFunction< - RenderListServerFnArgs, - Promise -> = async (args) => { - const { - collectionSlug, - cookies, - disableActions, - disableBulkDelete, - disableBulkEdit, - disableQueryPresets, - drawerSlug, - enableRowSelections, - locale, - overrideEntityVisibility, - permissions, - query, - redirectAfterDelete, - redirectAfterDuplicate, - req, - req: { - i18n, - payload, - payload: { config }, - user, - }, - } = args - - if (!req.user) { - throw new UnauthorizedError() - } - - await canAccessAdmin({ req }) - - const clientConfig = getClientConfig({ - config, - i18n, - importMap: payload.importMap, - user, - }) - await applyLocaleFiltering({ clientConfig, config, req }) - - const preferencesKey = `collection-${collectionSlug}` - - const preferences = await payload - .find({ - collection: 'payload-preferences', - depth: 0, - limit: 1, - where: { - and: [ - { - key: { - equals: preferencesKey, - }, - }, - { - 'user.relationTo': { - equals: user.collection, - }, - }, - { - 'user.value': { - equals: user.id, - }, - }, - ], - }, - }) - .then((res) => res.docs[0]?.value as CollectionPreferences) - - const visibleEntities: VisibleEntities = { - collections: payload.config.collections - .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) - .filter(Boolean), - globals: payload.config.globals - .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) - .filter(Boolean), - } - - const { List } = await renderListView({ - clientConfig, - disableActions, - disableBulkDelete, - disableBulkEdit, - disableQueryPresets, - drawerSlug, - enableRowSelections, - i18n, - importMap: payload.importMap, - initPageResult: { - collectionConfig: payload?.collections?.[collectionSlug]?.config, - cookies, - globalConfig: payload.config.globals.find((global) => global.slug === collectionSlug), - languageOptions: undefined, // TODO - locale, - permissions, - req, - translations: undefined, // TODO - visibleEntities, - }, - locale, - overrideEntityVisibility, - params: { - segments: ['collections', collectionSlug], - }, - payload, - permissions, - query, - redirectAfterDelete, - redirectAfterDuplicate, - searchParams: {}, - viewType: 'list', - }) - - return { - List, - preferences, - } -} +export { renderListHandler } from '@payloadcms/ui/views/List/handleServerFunction' diff --git a/packages/next/src/views/List/index.tsx b/packages/next/src/views/List/index.tsx index 204de13055f..596c068f96c 100644 --- a/packages/next/src/views/List/index.tsx +++ b/packages/next/src/views/List/index.tsx @@ -1,453 +1,21 @@ -import type { - AdminViewServerProps, - CollectionPreferences, - Column, - ColumnPreference, - ListQuery, - ListViewClientProps, - ListViewServerPropsOnly, - PaginatedDocs, - PayloadComponent, - QueryPreset, - SanitizedCollectionPermission, -} from 'payload' +import type React from 'react' -import { DefaultListView, HydrateAuthProvider, ListQueryProvider } from '@payloadcms/ui' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import { getColumns, renderFilters, renderTable, upsertPreferences } from '@payloadcms/ui/rsc' -import { notFound } from 'next/navigation.js' import { - appendUploadSelectFields, - combineWhereConstraints, - formatAdminURL, - isNumber, - mergeListSearchAndWhere, - transformColumnsToPreferences, - transformColumnsToSearchParams, -} from 'payload/shared' -import React, { Fragment } from 'react' - -import { getDocumentPermissions } from '../Document/getDocumentPermissions.js' -import { enrichDocsWithVersionStatus } from './enrichDocsWithVersionStatus.js' -import { handleGroupBy } from './handleGroupBy.js' -import { renderListViewSlots } from './renderListViewSlots.js' -import { resolveAllFilterOptions } from './resolveAllFilterOptions.js' -import { transformColumnsToSelect } from './transformColumnsToSelect.js' - -/** - * @internal - */ -export type RenderListViewArgs = { - /** - * Allows providing your own list view component. This will override the default list view component and - * the collection's configured list view component (if any). - */ - ComponentOverride?: - | PayloadComponent - | React.ComponentType - customCellProps?: Record - disableBulkDelete?: boolean - disableBulkEdit?: boolean - disableQueryPresets?: boolean - drawerSlug?: string - enableRowSelections: boolean - overrideEntityVisibility?: boolean - /** - * If not ListQuery is provided, `req.query` will be used. - */ - query?: ListQuery - redirectAfterDelete?: boolean - redirectAfterDuplicate?: boolean - /** - * @experimental This prop is subject to change in future releases. - */ - trash?: boolean -} & AdminViewServerProps - -/** - * This function is responsible for rendering - * the list view on the server for both: - * - default list view - * - list view within drawers - * - * @internal - */ -export const renderListView = async ( - args: RenderListViewArgs, -): Promise<{ - List: React.ReactNode -}> => { - const { - clientConfig, - ComponentOverride, - customCellProps, - disableBulkDelete, - disableBulkEdit, - disableQueryPresets, - drawerSlug, - enableRowSelections, - initPageResult, - overrideEntityVisibility, - params, - query: queryFromArgs, - searchParams, - trash, - viewType, - } = args - - const { - collectionConfig, - collectionConfig: { slug: collectionSlug }, - locale: fullLocale, - permissions, - req, - req: { - i18n, - payload, - payload: { config }, - query: queryFromReq, - user, - }, - visibleEntities, - } = initPageResult - const { - routes: { admin: adminRoute }, - } = config - - if ( - !collectionConfig || - !permissions?.collections?.[collectionSlug]?.read || - (!visibleEntities.collections.includes(collectionSlug) && !overrideEntityVisibility) - ) { - throw new Error('not-found') - } - - const query: ListQuery = queryFromArgs || queryFromReq - - const columnsFromQuery: ColumnPreference[] = transformColumnsToPreferences(query?.columns) - - query.queryByGroup = - query?.queryByGroup && typeof query.queryByGroup === 'string' - ? JSON.parse(query.queryByGroup) - : query?.queryByGroup - - const collectionPreferences = await upsertPreferences({ - key: `collection-${collectionSlug}`, - req, - value: { - columns: columnsFromQuery, - groupBy: query?.groupBy, - limit: isNumber(query?.limit) ? Number(query.limit) : undefined, - preset: query?.preset, - sort: query?.sort as string, - }, - }) - - let queryPreset: QueryPreset | undefined - let queryPresetPermissions: SanitizedCollectionPermission | undefined - - if (collectionPreferences?.preset) { - try { - queryPreset = (await payload.findByID({ - id: collectionPreferences?.preset, - collection: 'payload-query-presets', - depth: 0, - overrideAccess: false, - user, - })) as QueryPreset - - if (queryPreset) { - queryPresetPermissions = ( - await getDocumentPermissions({ - id: queryPreset.id, - collectionConfig: req.payload.collections['payload-query-presets'].config, - data: queryPreset, - req, - }) - )?.docPermissions - } - } catch (err) { - req.payload.logger.error(`Error fetching query preset or preset permissions: ${err}`) - } - } - - query.preset = queryPreset?.id - if (queryPreset?.where && !query.where) { - query.where = queryPreset.where - } - query.groupBy = query.groupBy ?? queryPreset?.groupBy ?? collectionPreferences?.groupBy - - const columnPreference = query.columns - ? transformColumnsToPreferences(query.columns) - : (queryPreset?.columns ?? collectionPreferences?.columns) - query.columns = transformColumnsToSearchParams(columnPreference) - - query.page = isNumber(query?.page) ? Number(query.page) : 0 - - query.limit = collectionPreferences?.limit || collectionConfig.admin.pagination.defaultLimit - - query.sort = - collectionPreferences?.sort || - (typeof collectionConfig.defaultSort === 'string' ? collectionConfig.defaultSort : undefined) - - const baseFilterConstraint = await ( - collectionConfig.admin?.baseFilter ?? collectionConfig.admin?.baseListFilter - )?.({ - limit: query.limit, - page: query.page, - req, - sort: query.sort, - }) - - let whereWithMergedSearch = mergeListSearchAndWhere({ - collectionConfig, - search: typeof query?.search === 'string' ? query.search : undefined, - where: combineWhereConstraints([query?.where, baseFilterConstraint]), - }) - - if (trash === true) { - whereWithMergedSearch = { - and: [ - whereWithMergedSearch, - { - deletedAt: { - exists: true, - }, - }, - ], - } - } - - let Table: React.ReactNode | React.ReactNode[] = null - let columnState: Column[] = [] - let data: PaginatedDocs = { - // no results default - docs: [], - hasNextPage: false, - hasPrevPage: false, - limit: query.limit, - nextPage: null, - page: 1, - pagingCounter: 0, - prevPage: null, - totalDocs: 0, - totalPages: 0, - } - - const clientCollectionConfig = clientConfig.collections.find((c) => c.slug === collectionSlug) - - const columns = getColumns({ - clientConfig, - collectionConfig: clientCollectionConfig, - collectionSlug, - columns: columnPreference, - i18n, - permissions, - }) - - const select = collectionConfig.admin.enableListViewSelectAPI - ? transformColumnsToSelect(columns) - : undefined - - /** Force select image fields for list view thumbnails */ - appendUploadSelectFields({ - collectionConfig, - select, - }) - - try { - if (collectionConfig.admin.groupBy && query.groupBy) { - ;({ columnState, data, Table } = await handleGroupBy({ - clientCollectionConfig, - clientConfig, - collectionConfig, - collectionSlug, - columns, - customCellProps, - drawerSlug, - enableRowSelections, - fieldPermissions: permissions?.collections?.[collectionSlug]?.fields, - query, - req, - select, - trash, - user, - viewType, - where: whereWithMergedSearch, - })) - - // Enrich documents with correct display status for drafts - data = await enrichDocsWithVersionStatus({ - collectionConfig, - data, - req, - }) - } else { - data = await req.payload.find({ - collection: collectionSlug, - depth: 0, - draft: true, - fallbackLocale: false, - includeLockStatus: true, - limit: query?.limit ? Number(query.limit) : undefined, - locale: req.locale, - overrideAccess: false, - page: query?.page ? Number(query.page) : undefined, - req, - select, - sort: query?.sort, - trash, - user, - where: whereWithMergedSearch, - }) - - // Enrich documents with correct display status for drafts - data = await enrichDocsWithVersionStatus({ - collectionConfig, - data, - req, - }) - ;({ columnState, Table } = renderTable({ - clientCollectionConfig, - collectionConfig, - columns, - customCellProps, - data, - drawerSlug, - enableRowSelections, - fieldPermissions: permissions?.collections?.[collectionSlug]?.fields, - i18n: req.i18n, - orderableFieldName: collectionConfig.orderable === true ? '_order' : undefined, - payload: req.payload, - query, - req, - useAsTitle: collectionConfig.admin.useAsTitle, - viewType, - })) - } - } catch (err) { - if (err.name !== 'QueryError') { - // QueryErrors are expected when a user filters by a field they do not have access to - req.payload.logger.error({ - err, - msg: `There was an error fetching the list view data for collection ${collectionSlug}`, - }) - throw err - } - } - - const renderedFilters = renderFilters(collectionConfig.fields, req.payload.importMap) - - const resolvedFilterOptions = await resolveAllFilterOptions({ - fields: collectionConfig.fields, - req, - }) - - const staticDescription = - typeof collectionConfig.admin.description === 'function' - ? collectionConfig.admin.description({ t: i18n.t }) - : collectionConfig.admin.description - - const newDocumentURL = formatAdminURL({ - adminRoute, - path: `/collections/${collectionSlug}/create`, - }) - - const hasCreatePermission = permissions?.collections?.[collectionSlug]?.create - - const { hasDeletePermission, hasTrashPermission } = await getDocumentPermissions({ - collectionConfig, - // Empty object serves as base for computing differentiated trash/delete permissions - data: {}, - req, - }) - - // Check if there's a notFound query parameter (document ID that wasn't found) - const notFoundDocId = typeof searchParams?.notFound === 'string' ? searchParams.notFound : null - - const serverProps: ListViewServerPropsOnly = { - collectionConfig, - data, - i18n, - limit: query.limit, - listPreferences: collectionPreferences, - listSearchableFields: collectionConfig.admin.listSearchableFields, - locale: fullLocale, - params, - payload, - permissions, - searchParams, - user, - } - - const listViewSlots = renderListViewSlots({ - clientProps: { - collectionSlug, - hasCreatePermission, - hasDeletePermission, - hasTrashPermission, - newDocumentURL, - }, - collectionConfig, - description: staticDescription, - notFoundDocId, - payload, - serverProps, - }) - - const isInDrawer = Boolean(drawerSlug) + type RenderListViewArgs, + renderListView as renderListViewFromUI, +} from '@payloadcms/ui/views/List/RenderListView' +import { notFound } from 'next/navigation.js' - // Needed to prevent: Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing it to props. - // Is there a way to avoid this? The `where` object is already seemingly plain, but is not bc it originates from the params. - query.where = query?.where ? JSON.parse(JSON.stringify(query?.where || {})) : undefined +export type { RenderListViewArgs } - return { - List: ( - - - - {RenderServerComponent({ - clientProps: { - ...listViewSlots, - collectionSlug, - columnState, - disableBulkDelete, - disableBulkEdit: collectionConfig.disableBulkEdit ?? disableBulkEdit, - disableQueryPresets, - enableRowSelections, - hasCreatePermission, - hasDeletePermission, - hasTrashPermission, - listPreferences: collectionPreferences, - newDocumentURL, - queryPreset, - queryPresetPermissions, - renderedFilters, - resolvedFilterOptions, - Table, - viewType, - } satisfies ListViewClientProps, - Component: - ComponentOverride ?? collectionConfig?.admin?.components?.views?.list?.Component, - Fallback: DefaultListView, - importMap: payload.importMap, - serverProps, - })} - - - ), - } -} +export { renderListView } from '@payloadcms/ui/views/List/RenderListView' export const ListView: React.FC = async (args) => { try { - const { List: RenderedList } = await renderListView({ ...args, enableRowSelections: true }) + const { List: RenderedList } = await renderListViewFromUI({ + ...args, + enableRowSelections: true, + }) return RenderedList } catch (error) { // Pass through Next.js errors diff --git a/packages/next/src/views/List/renderListViewSlots.tsx b/packages/next/src/views/List/renderListViewSlots.tsx index 200fcf7f37e..f33f1d26297 100644 --- a/packages/next/src/views/List/renderListViewSlots.tsx +++ b/packages/next/src/views/List/renderListViewSlots.tsx @@ -1,122 +1 @@ -import type { - AfterListClientProps, - AfterListTableClientProps, - AfterListTableServerPropsOnly, - BeforeListClientProps, - BeforeListServerPropsOnly, - BeforeListTableClientProps, - BeforeListTableServerPropsOnly, - ListViewServerPropsOnly, - ListViewSlots, - ListViewSlotSharedClientProps, - Payload, - SanitizedCollectionConfig, - StaticDescription, - ViewDescriptionClientProps, - ViewDescriptionServerPropsOnly, -} from 'payload' - -import { Banner } from '@payloadcms/ui/elements/Banner' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import React from 'react' - -type Args = { - clientProps: ListViewSlotSharedClientProps - collectionConfig: SanitizedCollectionConfig - description?: StaticDescription - notFoundDocId?: null | string - payload: Payload - serverProps: ListViewServerPropsOnly -} - -export const renderListViewSlots = ({ - clientProps, - collectionConfig, - description, - notFoundDocId, - payload, - serverProps, -}: Args): ListViewSlots => { - const result: ListViewSlots = {} as ListViewSlots - - if (collectionConfig.admin.components?.afterList) { - result.AfterList = RenderServerComponent({ - clientProps: clientProps satisfies AfterListClientProps, - Component: collectionConfig.admin.components.afterList, - importMap: payload.importMap, - serverProps: serverProps satisfies AfterListTableServerPropsOnly, - }) - } - - const listMenuItems = collectionConfig.admin.components?.listMenuItems - - if (Array.isArray(listMenuItems)) { - result.listMenuItems = [ - RenderServerComponent({ - clientProps, - Component: listMenuItems, - importMap: payload.importMap, - serverProps, - }), - ] - } - - if (collectionConfig.admin.components?.afterListTable) { - result.AfterListTable = RenderServerComponent({ - clientProps: clientProps satisfies AfterListTableClientProps, - Component: collectionConfig.admin.components.afterListTable, - importMap: payload.importMap, - serverProps: serverProps satisfies AfterListTableServerPropsOnly, - }) - } - - if (collectionConfig.admin.components?.beforeList) { - result.BeforeList = RenderServerComponent({ - clientProps: clientProps satisfies BeforeListClientProps, - Component: collectionConfig.admin.components.beforeList, - importMap: payload.importMap, - serverProps: serverProps satisfies BeforeListServerPropsOnly, - }) - } - - // Handle beforeListTable with optional banner - const existingBeforeListTable = collectionConfig.admin.components?.beforeListTable - ? RenderServerComponent({ - clientProps: clientProps satisfies BeforeListTableClientProps, - Component: collectionConfig.admin.components.beforeListTable, - importMap: payload.importMap, - serverProps: serverProps satisfies BeforeListTableServerPropsOnly, - }) - : null - - // Create banner for document not found - const notFoundBanner = notFoundDocId ? ( - - {serverProps.i18n.t('error:documentNotFound', { id: notFoundDocId })} - - ) : null - - // Combine banner and existing component - if (notFoundBanner || existingBeforeListTable) { - result.BeforeListTable = ( - - {notFoundBanner} - {existingBeforeListTable} - - ) - } - - if (collectionConfig.admin.components?.Description) { - result.Description = RenderServerComponent({ - clientProps: { - collectionSlug: collectionConfig.slug, - description, - } satisfies ViewDescriptionClientProps, - Component: collectionConfig.admin.components.Description, - importMap: payload.importMap, - serverProps: serverProps satisfies ViewDescriptionServerPropsOnly, - }) - } - - return result -} +export { renderListViewSlots } from '@payloadcms/ui/views/List/renderListViewSlots' diff --git a/packages/next/src/views/List/resolveAllFilterOptions.ts b/packages/next/src/views/List/resolveAllFilterOptions.ts index c0582386da2..7b756037bb6 100644 --- a/packages/next/src/views/List/resolveAllFilterOptions.ts +++ b/packages/next/src/views/List/resolveAllFilterOptions.ts @@ -1,85 +1 @@ -import type { Field, PayloadRequest, ResolvedFilterOptions } from 'payload' - -import { resolveFilterOptions } from '@payloadcms/ui/rsc' -import { - fieldAffectsData, - fieldHasSubFields, - fieldIsHiddenOrDisabled, - tabHasName, -} from 'payload/shared' - -export const resolveAllFilterOptions = async ({ - fields, - pathPrefix, - req, - result, -}: { - fields: Field[] - pathPrefix?: string - req: PayloadRequest - result?: Map -}): Promise> => { - const resolvedFilterOptions = !result ? new Map() : result - - await Promise.all( - fields.map(async (field) => { - if (fieldIsHiddenOrDisabled(field)) { - return - } - - const fieldPath = fieldAffectsData(field) - ? pathPrefix - ? `${pathPrefix}.${field.name}` - : field.name - : pathPrefix - - if ( - (field.type === 'relationship' || field.type === 'upload') && - 'filterOptions' in field && - field.filterOptions - ) { - const options = await resolveFilterOptions(field.filterOptions, { - id: undefined, - blockData: undefined, - data: {}, // use empty object to prevent breaking queries when accessing properties of `data` - relationTo: field.relationTo, - req, - siblingData: {}, // use empty object to prevent breaking queries when accessing properties of `siblingData` - user: req.user, - }) - - resolvedFilterOptions.set(fieldPath, options) - } - - if (fieldHasSubFields(field)) { - await resolveAllFilterOptions({ - fields: field.fields, - pathPrefix: fieldPath, - req, - result: resolvedFilterOptions, - }) - } - - if (field.type === 'tabs') { - await Promise.all( - field.tabs.map(async (tab) => { - const tabPath = tabHasName(tab) - ? fieldPath - ? `${fieldPath}.${tab.name}` - : tab.name - : fieldPath - - await resolveAllFilterOptions({ - fields: tab.fields, - pathPrefix: tabPath, - req, - result: resolvedFilterOptions, - }) - }), - ) - } - }), - ) - - return resolvedFilterOptions -} +export { resolveAllFilterOptions } from '@payloadcms/ui/views/List/resolveAllFilterOptions' diff --git a/packages/next/src/views/List/transformColumnsToSelect.ts b/packages/next/src/views/List/transformColumnsToSelect.ts index 1f268884da7..3f985b2bbf3 100644 --- a/packages/next/src/views/List/transformColumnsToSelect.ts +++ b/packages/next/src/views/List/transformColumnsToSelect.ts @@ -1,14 +1 @@ -import type { ColumnPreference, SelectType } from 'payload' - -import { unflatten } from 'payload/shared' - -export const transformColumnsToSelect = (columns: ColumnPreference[]): SelectType => { - const columnsSelect = columns.reduce((acc, column) => { - if (column.active) { - acc[column.accessor] = true - } - return acc - }, {} as SelectType) - - return unflatten(columnsSelect) -} +export { transformColumnsToSelect } from '@payloadcms/ui/views/List/transformColumnsToSelect' diff --git a/packages/next/src/views/Login/index.tsx b/packages/next/src/views/Login/index.tsx index c5c4318e33a..2b118c88a8b 100644 --- a/packages/next/src/views/Login/index.tsx +++ b/packages/next/src/views/Login/index.tsx @@ -1,103 +1,37 @@ -import type { AdminViewServerProps, ServerProps } from 'payload' +import type { AdminViewServerProps } from 'payload' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' +import { LoginView as LoginViewRender } from '@payloadcms/ui/views/Login' import { redirect } from 'next/navigation.js' import { getSafeRedirect } from 'payload/shared' -import React, { Fragment } from 'react' +import React from 'react' import { Logo } from '../../elements/Logo/index.js' -import { LoginForm } from './LoginForm/index.js' -import './index.scss' -export const loginBaseClass = 'login' -export function LoginView({ initPageResult, params, searchParams }: AdminViewServerProps) { - const { locale, permissions, req } = initPageResult +export { loginBaseClass } from '@payloadcms/ui/views/Login' +export function LoginView({ initPageResult, params, searchParams }: AdminViewServerProps) { const { - i18n, - payload: { config }, - payload, - user, - } = req + req: { + payload: { config }, + user, + }, + } = initPageResult const { - admin: { components: { afterLogin, beforeLogin } = {}, user: userSlug }, routes: { admin }, } = config - const redirectUrl = getSafeRedirect({ fallbackTo: admin, redirectTo: searchParams.redirect }) - if (user) { + const redirectUrl = getSafeRedirect({ fallbackTo: admin, redirectTo: searchParams.redirect }) redirect(redirectUrl) } - const collectionConfig = payload?.collections?.[userSlug]?.config - - const prefillAutoLogin = - typeof config.admin?.autoLogin === 'object' && config.admin?.autoLogin.prefillOnly - - const prefillUsername = - prefillAutoLogin && typeof config.admin?.autoLogin === 'object' - ? config.admin?.autoLogin.username - : undefined - - const prefillEmail = - prefillAutoLogin && typeof config.admin?.autoLogin === 'object' - ? config.admin?.autoLogin.email - : undefined - - const prefillPassword = - prefillAutoLogin && typeof config.admin?.autoLogin === 'object' - ? config.admin?.autoLogin.password - : undefined - return ( - -
- -
- {RenderServerComponent({ - Component: beforeLogin, - importMap: payload.importMap, - serverProps: { - i18n, - locale, - params, - payload, - permissions, - searchParams, - user, - } satisfies ServerProps, - })} - {!collectionConfig?.auth?.disableLocalStrategy && ( - - )} - {RenderServerComponent({ - Component: afterLogin, - importMap: payload.importMap, - serverProps: { - i18n, - locale, - params, - payload, - permissions, - searchParams, - user, - } satisfies ServerProps, - })} - + ) } diff --git a/packages/next/src/views/Logout/LogoutClient.tsx b/packages/next/src/views/Logout/LogoutClient.tsx index 212f1b47d5a..0d51ea53d88 100644 --- a/packages/next/src/views/Logout/LogoutClient.tsx +++ b/packages/next/src/views/Logout/LogoutClient.tsx @@ -5,10 +5,10 @@ import { toast, useAuth, useConfig, + useRouter, useRouteTransition, useTranslation, } from '@payloadcms/ui' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import React, { useEffect } from 'react' diff --git a/packages/next/src/views/Logout/index.tsx b/packages/next/src/views/Logout/index.tsx index 8cd0dd0ff16..841ad19bcad 100644 --- a/packages/next/src/views/Logout/index.tsx +++ b/packages/next/src/views/Logout/index.tsx @@ -1,38 +1 @@ -import type { AdminViewServerProps } from 'payload' - -import React from 'react' - -import { LogoutClient } from './LogoutClient.js' -import './index.scss' - -const baseClass = 'logout' - -export const LogoutView: React.FC< - { - inactivity?: boolean - } & AdminViewServerProps -> = ({ inactivity, initPageResult, searchParams }) => { - const { - req: { - payload: { - config: { - routes: { admin: adminRoute }, - }, - }, - }, - } = initPageResult - - return ( -
- -
- ) -} - -export function LogoutInactivity(props: AdminViewServerProps) { - return -} +export { LogoutInactivity, LogoutView } from '@payloadcms/ui/views/Logout' diff --git a/packages/next/src/views/NotFound/index.tsx b/packages/next/src/views/NotFound/index.tsx index f58d78f44e8..bcce594cbee 100644 --- a/packages/next/src/views/NotFound/index.tsx +++ b/packages/next/src/views/NotFound/index.tsx @@ -2,14 +2,15 @@ import type { Metadata } from 'next' import type { AdminViewServerProps, ImportMap, SanitizedConfig } from 'payload' import { getVisibleEntities } from '@payloadcms/ui/shared' +import { NotFoundClient, NotFoundView as NotFoundViewRender } from '@payloadcms/ui/views/NotFound' import { formatAdminURL } from 'payload/shared' import * as qs from 'qs-esm' import React from 'react' +import { getNavPrefs } from '../../elements/Nav/getNavPrefs.js' import { DefaultTemplate } from '../../templates/Default/index.js' import { getNextRequestI18n } from '../../utilities/getNextRequestI18n.js' import { initReq } from '../../utilities/initReq.js' -import { NotFoundClient } from './index.client.js' export const generateNotFoundViewMetadata = async ({ config: configPromise, @@ -77,11 +78,13 @@ export const NotFoundPage = async ({ const params = await paramsPromise const visibleEntities = getVisibleEntities({ req }) + const navPreferences = await getNavPrefs(req) return ( +export function NotFoundView(_props: AdminViewServerProps) { + return } diff --git a/packages/next/src/views/ResetPassword/ResetPasswordForm/index.tsx b/packages/next/src/views/ResetPassword/ResetPasswordForm/index.tsx index d8aee4e8e20..e77812c6934 100644 --- a/packages/next/src/views/ResetPassword/ResetPasswordForm/index.tsx +++ b/packages/next/src/views/ResetPassword/ResetPasswordForm/index.tsx @@ -7,9 +7,9 @@ import { PasswordField, useAuth, useConfig, + useRouter, useTranslation, } from '@payloadcms/ui' -import { useRouter } from 'next/navigation.js' import { type FormState } from 'payload' import { formatAdminURL } from 'payload/shared' import React from 'react' diff --git a/packages/next/src/views/ResetPassword/index.tsx b/packages/next/src/views/ResetPassword/index.tsx index da8dfb72546..05d52ecbb90 100644 --- a/packages/next/src/views/ResetPassword/index.tsx +++ b/packages/next/src/views/ResetPassword/index.tsx @@ -1,81 +1 @@ -import type { AdminViewServerProps } from 'payload' - -import { Button, Link } from '@payloadcms/ui' -import { Translation } from '@payloadcms/ui/shared' -import { formatAdminURL } from 'payload/shared' -import React from 'react' - -import { FormHeader } from '../../elements/FormHeader/index.js' -import { ResetPasswordForm } from './ResetPasswordForm/index.js' -import './index.scss' - -export const resetPasswordBaseClass = 'reset-password' - -export function ResetPassword({ initPageResult, params }: AdminViewServerProps) { - const { req } = initPageResult - - const { - segments: [_, token], - } = params - - const { - i18n, - payload: { config }, - user, - } = req - - const { - admin: { - routes: { account: accountRoute, login: loginRoute }, - }, - routes: { admin: adminRoute }, - } = config - - if (user) { - return ( -
- ( - - {children} - - ), - }} - i18nKey="authentication:loggedInChangePassword" - t={i18n.t} - /> - } - heading={i18n.t('authentication:alreadyLoggedIn')} - /> - -
- ) - } - - return ( -
- - - - {i18n.t('authentication:backToLogin')} - -
- ) -} +export { ResetPassword, resetPasswordBaseClass } from '@payloadcms/ui/views/ResetPassword' diff --git a/packages/next/src/views/Root/createNextViewRenderer.tsx b/packages/next/src/views/Root/createNextViewRenderer.tsx new file mode 100644 index 00000000000..9e9bf8f1bf3 --- /dev/null +++ b/packages/next/src/views/Root/createNextViewRenderer.tsx @@ -0,0 +1,20 @@ +import type { ViewComponentRenderer } from '@payloadcms/ui/utilities/createViewRenderer' +import type { ImportMap } from 'payload' + +import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' + +export const createNextViewRenderer = ({ + importMap, +}: { + importMap: ImportMap +}): ViewComponentRenderer => { + return ({ clientProps, Component, Fallback, key, serverProps }) => + RenderServerComponent({ + clientProps, + Component, + Fallback, + importMap, + key, + serverProps, + }) +} diff --git a/packages/next/src/views/Root/index.tsx b/packages/next/src/views/Root/index.tsx index e5514486fa1..adcc9113edc 100644 --- a/packages/next/src/views/Root/index.tsx +++ b/packages/next/src/views/Root/index.tsx @@ -1,33 +1,16 @@ import type { I18nClient } from '@payloadcms/translations' import type { Metadata } from 'next' -import type { - AdminViewClientProps, - AdminViewServerPropsOnly, - CollectionPreferences, - ImportMap, - SanitizedCollectionConfig, - SanitizedConfig, - SanitizedGlobalConfig, -} from 'payload' +import type { ImportMap, SanitizedConfig } from 'payload' -import { PageConfigProvider } from '@payloadcms/ui' -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import { getVisibleEntities } from '@payloadcms/ui/shared' -import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig' +import { getRootPageDescriptor } from '@payloadcms/ui/views/Root/getRootPageDescriptor' +import { renderRootPageFromDescriptor } from '@payloadcms/ui/views/Root/RenderRoot' import { notFound, redirect } from 'next/navigation.js' -import { applyLocaleFiltering, formatAdminURL } from 'payload/shared' +import { formatAdminURL } from 'payload/shared' import * as qs from 'qs-esm' -import React from 'react' -import { DefaultTemplate } from '../../templates/Default/index.js' -import { MinimalTemplate } from '../../templates/Minimal/index.js' -import { getPreferences } from '../../utilities/getPreferences.js' -import { handleAuthRedirect } from '../../utilities/handleAuthRedirect.js' +import { getNavPrefs } from '../../elements/Nav/getNavPrefs.js' import { initReq } from '../../utilities/initReq.js' -import { isCustomAdminView } from '../../utilities/isCustomAdminView.js' -import { isPublicAdminRoute } from '../../utilities/isPublicAdminRoute.js' -import { getCustomViewByRoute } from './getCustomViewByRoute.js' -import { getRouteData } from './getRouteData.js' +import { createNextViewRenderer } from './createNextViewRenderer.js' export type GenerateViewMetadata = (args: { config: SanitizedConfig @@ -52,81 +35,22 @@ export const RootPage = async ({ }> }) => { const config = await configPromise + const params = await paramsPromise + const searchParams = await searchParamsPromise + const segments = Array.isArray(params?.segments) ? params.segments : [] const { - admin: { - routes: { createFirstUser: _createFirstUserRoute }, - user: userSlug, - }, routes: { admin: adminRoute }, } = config - const params = await paramsPromise - const currentRoute = formatAdminURL({ adminRoute, - path: Array.isArray(params.segments) ? `/${params.segments.join('/')}` : null, + path: segments.length ? `/${segments.join('/')}` : null, }) - const segments = Array.isArray(params.segments) ? params.segments : [] - const isCollectionRoute = segments[0] === 'collections' - const isGlobalRoute = segments[0] === 'globals' - let collectionConfig: SanitizedCollectionConfig = undefined - let globalConfig: SanitizedGlobalConfig = undefined - - const searchParams = await searchParamsPromise - - // Redirect `${adminRoute}/collections` to `${adminRoute}` - if (isCollectionRoute) { - if (segments.length === 1) { - const { viewKey } = getCustomViewByRoute({ - config, - currentRoute: '/collections', - }) - - // Only redirect if there's NO custom view configured for /collections - if (!viewKey) { - redirect(adminRoute) - } - } - - if (segments[1]) { - collectionConfig = config.collections.find(({ slug }) => slug === segments[1]) - } - } - - // Redirect `${adminRoute}/globals` to `${adminRoute}` - if (isGlobalRoute) { - if (segments.length === 1) { - const { viewKey } = getCustomViewByRoute({ - config, - currentRoute: '/globals', - }) - - // Only redirect if there's NO custom view configured for /globals - if (!viewKey) { - redirect(adminRoute) - } - } - - if (segments[1]) { - globalConfig = config.globals.find(({ slug }) => slug === segments[1]) - } - } - - if ((isCollectionRoute && !collectionConfig) || (isGlobalRoute && !globalConfig)) { - return notFound() - } - const queryString = `${qs.stringify(searchParams ?? {}, { addQueryPrefix: true })}` - const { - cookies, - locale, - permissions, - req, - req: { payload }, - } = await initReq({ + const initPageResult = await initReq({ configPromise: config, importMap, key: 'initPage', @@ -138,227 +62,36 @@ export const RootPage = async ({ ignoreQueryPrefix: true, }), }, - // intentionally omit `serverURL` to keep URL relative urlSuffix: `${currentRoute}${searchParams ? queryString : ''}`, }, }) - if ( - !permissions.canAccessAdmin && - !isPublicAdminRoute({ adminRoute, config: payload.config, route: currentRoute }) && - !isCustomAdminView({ adminRoute, config: payload.config, route: currentRoute }) - ) { - redirect( - handleAuthRedirect({ - config: payload.config, - route: currentRoute, - searchParams, - user: req.user, - }), - ) - } - - let collectionPreferences: CollectionPreferences = undefined - - if (collectionConfig && segments.length === 2) { - if (config.folders && collectionConfig.folders && segments[1] !== config.folders.slug) { - await getPreferences( - `collection-${collectionConfig.slug}`, - req.payload, - req.user.id, - config.admin.user, - ).then((res) => { - if (res && res.value) { - collectionPreferences = res.value - } - }) - } - } - - const { - browseByFolderSlugs, - DefaultView, - documentSubViewType, - routeParams, - templateClassName, - templateType, - viewActions, - viewType, - } = getRouteData({ - adminRoute, - collectionConfig, - collectionPreferences, - currentRoute, - globalConfig, - payload, + const rootPageResult = await getRootPageDescriptor({ + importMap, + initPageResult, searchParams, segments, }) - req.routeParams = routeParams - - const dbHasUser = - req.user || - (await req.payload.db - .findOne({ - collection: userSlug, - req, - }) - ?.then((doc) => !!doc)) - - /** - * This function is responsible for handling the case where the view is not found. - * The current route did not match any default views or custom route views. - */ - if (!DefaultView?.Component && !DefaultView?.payloadComponent) { - if (req?.user) { - notFound() - } - - if (dbHasUser) { - redirect(adminRoute) - } - } - - const usersCollection = config.collections.find(({ slug }) => slug === userSlug) - const disableLocalStrategy = usersCollection?.auth?.disableLocalStrategy - - const createFirstUserRoute = formatAdminURL({ - adminRoute, - path: _createFirstUserRoute, - }) - - if (disableLocalStrategy && currentRoute === createFirstUserRoute) { - redirect(adminRoute) - } - - if (!dbHasUser && currentRoute !== createFirstUserRoute && !disableLocalStrategy) { - redirect(createFirstUserRoute) - } - - if (dbHasUser && currentRoute === createFirstUserRoute) { - redirect(adminRoute) - } - - if (!DefaultView?.Component && !DefaultView?.payloadComponent && !dbHasUser) { - redirect(adminRoute) + if (rootPageResult.type === 'not-found') { + return notFound() } - const clientConfig = getClientConfig({ - config, - i18n: req.i18n, - importMap, - user: viewType === 'createFirstUser' ? true : req.user, - }) - - await applyLocaleFiltering({ clientConfig, config, req }) - - // Ensure locale on req is still valid after filtering locales - if ( - clientConfig.localization && - req.locale && - !clientConfig.localization.localeCodes.includes(req.locale) - ) { - redirect( - `${currentRoute}${qs.stringify( - { - ...searchParams, - locale: clientConfig.localization.localeCodes.includes( - clientConfig.localization.defaultLocale, - ) - ? clientConfig.localization.defaultLocale - : clientConfig.localization.localeCodes[0], - }, - { addQueryPrefix: true }, - )}`, - ) + if (rootPageResult.type === 'redirect') { + return redirect(rootPageResult.url) } - const visibleEntities = getVisibleEntities({ req }) + const navPreferences = await getNavPrefs(initPageResult.req) - const folderID = routeParams.folderID - - const RenderedView = RenderServerComponent({ - clientProps: { - browseByFolderSlugs, - clientConfig, - documentSubViewType, - viewType, - } satisfies AdminViewClientProps, - Component: DefaultView.payloadComponent, - Fallback: DefaultView.Component, + return renderRootPageFromDescriptor({ + descriptor: rootPageResult.descriptor, importMap, - serverProps: { - clientConfig, - collectionConfig, - docID: routeParams.id, - folderID, - globalConfig, - i18n: req.i18n, - importMap, - initPageResult: { - collectionConfig, - cookies, - docID: routeParams.id, - globalConfig, - languageOptions: Object.entries(req.payload.config.i18n.supportedLanguages || {}).reduce( - (acc, [language, languageConfig]) => { - if (Object.keys(req.payload.config.i18n.supportedLanguages).includes(language)) { - acc.push({ - label: languageConfig.translations.general.thisLanguage, - value: language, - }) - } - - return acc - }, - [], - ), - locale, - permissions, - req, - translations: req.i18n.translations, - visibleEntities, - }, - params, - payload: req.payload, - searchParams, - viewActions, - } satisfies AdminViewServerPropsOnly, + initPageResult, + navPreferences, + notFound: () => notFound(), + redirect: (url) => redirect(url), + searchParams, + segments, + viewRenderer: createNextViewRenderer({ importMap }), }) - - return ( - - {!templateType && {RenderedView}} - {templateType === 'minimal' && ( - {RenderedView} - )} - {templateType === 'default' && ( - " error introduced in React 19 - // which this caused as soon as initPageResult.visibleEntities is passed in - collections: visibleEntities?.collections, - globals: visibleEntities?.globals, - }} - > - {RenderedView} - - )} - - ) } diff --git a/packages/next/src/views/Unauthorized/index.tsx b/packages/next/src/views/Unauthorized/index.tsx index bc5678c43c5..f10036cee11 100644 --- a/packages/next/src/views/Unauthorized/index.tsx +++ b/packages/next/src/views/Unauthorized/index.tsx @@ -1,58 +1 @@ -import type { AdminViewServerProps } from 'payload' - -import { Button, Gutter } from '@payloadcms/ui' -import { formatAdminURL } from 'payload/shared' -import React from 'react' - -import { FormHeader } from '../../elements/FormHeader/index.js' -import './index.scss' - -const baseClass = 'unauthorized' - -export function UnauthorizedView({ initPageResult }: AdminViewServerProps) { - const { - permissions, - req: { - i18n, - payload: { - config: { - admin: { - routes: { logout: logoutRoute }, - }, - routes: { admin: adminRoute }, - }, - }, - user, - }, - } = initPageResult - - return ( -
- - -
- ) -} - -export const UnauthorizedViewWithGutter = (props: AdminViewServerProps) => { - return ( - - - - ) -} +export { UnauthorizedView, UnauthorizedViewWithGutter } from '@payloadcms/ui/views/Unauthorized' diff --git a/packages/next/src/views/Verify/index.client.tsx b/packages/next/src/views/Verify/index.client.tsx index ebd032792e8..b5d711942a3 100644 --- a/packages/next/src/views/Verify/index.client.tsx +++ b/packages/next/src/views/Verify/index.client.tsx @@ -1,6 +1,5 @@ 'use client' -import { toast, useRouteTransition } from '@payloadcms/ui' -import { useRouter } from 'next/navigation.js' +import { toast, useRouter, useRouteTransition } from '@payloadcms/ui' import React, { useEffect } from 'react' type Props = { diff --git a/packages/next/src/views/Verify/index.tsx b/packages/next/src/views/Verify/index.tsx index b71245b97d2..a2fab0983d4 100644 --- a/packages/next/src/views/Verify/index.tsx +++ b/packages/next/src/views/Verify/index.tsx @@ -1,70 +1 @@ -import type { AdminViewServerProps } from 'payload' - -import { formatAdminURL } from 'payload/shared' -import React from 'react' - -import { Logo } from '../../elements/Logo/index.js' -import { ToastAndRedirect } from './index.client.js' -import './index.scss' - -export const verifyBaseClass = 'verify' - -export async function Verify({ initPageResult, params, searchParams }: AdminViewServerProps) { - // /:collectionSlug/verify/:token - - const [collectionSlug, verify, token] = params.segments - const { locale, permissions, req } = initPageResult - - const { - i18n, - payload: { config }, - payload, - user, - } = req - - const { - routes: { admin: adminRoute }, - serverURL, - } = config - - let textToRender - let isVerified = false - - try { - await req.payload.verifyEmail({ - collection: collectionSlug, - token, - }) - - isVerified = true - textToRender = req.t('authentication:emailVerified') - } catch (e) { - textToRender = req.t('authentication:unableToVerify') - } - - if (isVerified) { - return ( - - ) - } - - return ( - -
- -
-

{textToRender}

- - ) -} +export { Verify, verifyBaseClass } from '@payloadcms/ui/views/Verify' diff --git a/packages/next/src/views/Version/Default/SelectedLocalesContext.tsx b/packages/next/src/views/Version/Default/SelectedLocalesContext.tsx index 2913b82a64e..42b424b770c 100644 --- a/packages/next/src/views/Version/Default/SelectedLocalesContext.tsx +++ b/packages/next/src/views/Version/Default/SelectedLocalesContext.tsx @@ -1,13 +1,4 @@ -'use client' - -import { createContext, use } from 'react' - -type SelectedLocalesContextType = { - selectedLocales: string[] -} - -export const SelectedLocalesContext = createContext({ - selectedLocales: [], -}) - -export const useSelectedLocales = () => use(SelectedLocalesContext) +export { + SelectedLocalesContext, + useSelectedLocales, +} from '@payloadcms/ui/views/Version/Default/SelectedLocalesContext' diff --git a/packages/next/src/views/Version/Default/SetStepNav.tsx b/packages/next/src/views/Version/Default/SetStepNav.tsx index b74f7a1be6a..4948adaab2a 100644 --- a/packages/next/src/views/Version/Default/SetStepNav.tsx +++ b/packages/next/src/views/Version/Default/SetStepNav.tsx @@ -1,131 +1 @@ -'use client' - -import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload' -import type React from 'react' - -import { getTranslation } from '@payloadcms/translations' -import { useConfig, useDocumentTitle, useLocale, useStepNav, useTranslation } from '@payloadcms/ui' -import { formatAdminURL } from 'payload/shared' -import { useEffect } from 'react' - -export const SetStepNav: React.FC<{ - readonly collectionConfig?: ClientCollectionConfig - readonly globalConfig?: ClientGlobalConfig - readonly id?: number | string - readonly isTrashed?: boolean - versionToCreatedAtFormatted?: string - versionToID?: string -}> = ({ - id, - collectionConfig, - globalConfig, - isTrashed, - versionToCreatedAtFormatted, - versionToID, -}) => { - const { config } = useConfig() - const { setStepNav } = useStepNav() - const { i18n, t } = useTranslation() - const locale = useLocale() - const { title } = useDocumentTitle() - - useEffect(() => { - const { - routes: { admin: adminRoute }, - serverURL, - } = config - - if (collectionConfig) { - const collectionSlug = collectionConfig.slug - - const pluralLabel = collectionConfig.labels?.plural - - const docBasePath: `/${string}` = isTrashed - ? `/collections/${collectionSlug}/trash/${id}` - : `/collections/${collectionSlug}/${id}` - - const nav = [ - { - label: getTranslation(pluralLabel, i18n), - url: formatAdminURL({ - adminRoute, - path: `/collections/${collectionSlug}`, - }), - }, - ] - - if (isTrashed) { - nav.push({ - label: t('general:trash'), - url: formatAdminURL({ - adminRoute, - path: `/collections/${collectionSlug}/trash`, - }), - }) - } - - nav.push( - { - label: title, - url: formatAdminURL({ - adminRoute, - path: docBasePath, - }), - }, - { - label: t('version:versions'), - url: formatAdminURL({ - adminRoute, - path: `${docBasePath}/versions`, - }), - }, - { - label: versionToCreatedAtFormatted, - url: undefined, - }, - ) - - setStepNav(nav) - return - } - - if (globalConfig) { - const globalSlug = globalConfig.slug - - setStepNav([ - { - label: globalConfig.label, - url: formatAdminURL({ - adminRoute, - path: `/globals/${globalSlug}`, - }), - }, - { - label: t('version:versions'), - url: formatAdminURL({ - adminRoute, - path: `/globals/${globalSlug}/versions`, - }), - }, - { - label: versionToCreatedAtFormatted, - }, - ]) - } - }, [ - config, - setStepNav, - id, - isTrashed, - locale, - t, - i18n, - collectionConfig, - globalConfig, - title, - versionToCreatedAtFormatted, - versionToID, - ]) - - return null -} +export { SetStepNav } from '@payloadcms/ui/views/Version/Default/SetStepNav' diff --git a/packages/next/src/views/Version/Default/index.tsx b/packages/next/src/views/Version/Default/index.tsx index dbf85896b15..1ed49a1ceb8 100644 --- a/packages/next/src/views/Version/Default/index.tsx +++ b/packages/next/src/views/Version/Default/index.tsx @@ -10,10 +10,12 @@ import { useConfig, useDocumentInfo, useLocale, + usePathname, + useRouter, useRouteTransition, + useSearchParams, useTranslation, } from '@payloadcms/ui' -import { usePathname, useRouter, useSearchParams } from 'next/navigation.js' import React, { type FormEventHandler, useCallback, useEffect, useMemo, useState } from 'react' import type { CompareOption, DefaultVersionsViewProps } from './types.js' diff --git a/packages/next/src/views/Version/Default/types.ts b/packages/next/src/views/Version/Default/types.ts index 5017ff2d097..3682423e46b 100644 --- a/packages/next/src/views/Version/Default/types.ts +++ b/packages/next/src/views/Version/Default/types.ts @@ -1,24 +1,5 @@ -export type CompareOption = { - label: React.ReactNode | string - value: string -} - -export type VersionPill = { - id: string - Label: React.ReactNode -} - -export type DefaultVersionsViewProps = { - canUpdate: boolean - modifiedOnly: boolean - RenderedDiff: React.ReactNode - selectedLocales: string[] - versionFromCreatedAt?: string - versionFromID?: string - versionFromOptions: CompareOption[] - versionToCreatedAt?: string - versionToCreatedAtFormatted: string - VersionToCreatedAtLabel: React.ReactNode - versionToID?: string - versionToStatus?: string -} +export type { + CompareOption, + DefaultVersionsViewProps, + VersionPill, +} from '@payloadcms/ui/views/Version/Default/types' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx index 35f59a667d7..e496db3717c 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx @@ -1,122 +1 @@ -'use client' -import type { ClientField } from 'payload' - -import { ChevronIcon, FieldDiffLabel, useConfig, useTranslation } from '@payloadcms/ui' -import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared' -import React, { useState } from 'react' - -import './index.scss' -import { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js' - -const baseClass = 'diff-collapser' - -type Props = { - hideGutter?: boolean - initCollapsed?: boolean - Label: React.ReactNode - locales: string[] | undefined - parentIsLocalized: boolean - valueTo: unknown -} & ( - | { - // fields collapser - children: React.ReactNode - field?: never - fields: ClientField[] - isIterable?: false - valueFrom: unknown - } - | { - // iterable collapser - children: React.ReactNode - field: ClientField - fields?: never - isIterable: true - valueFrom?: unknown - } -) - -export const DiffCollapser: React.FC = ({ - children, - field, - fields, - hideGutter = false, - initCollapsed = false, - isIterable = false, - Label, - locales, - parentIsLocalized, - valueFrom, - valueTo, -}) => { - const { t } = useTranslation() - const [isCollapsed, setIsCollapsed] = useState(initCollapsed) - const { config } = useConfig() - - let changeCount = 0 - - if (isIterable) { - if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) { - throw new Error( - 'DiffCollapser: field must be an array or blocks field when isIterable is true', - ) - } - const valueFromRows = valueFrom ?? [] - const valueToRows = valueTo ?? [] - - if (!Array.isArray(valueFromRows) || !Array.isArray(valueToRows)) { - throw new Error( - 'DiffCollapser: valueFrom and valueTro must be arrays when isIterable is true', - ) - } - - changeCount = countChangedFieldsInRows({ - config, - field, - locales, - parentIsLocalized, - valueFromRows, - valueToRows, - }) - } else { - changeCount = countChangedFields({ - config, - fields, - locales, - parentIsLocalized, - valueFrom, - valueTo, - }) - } - - const contentClassNames = [ - `${baseClass}__content`, - isCollapsed && `${baseClass}__content--is-collapsed`, - hideGutter && `${baseClass}__content--hide-gutter`, - ] - .filter(Boolean) - .join(' ') - - return ( -
- - - {changeCount > 0 && isCollapsed && ( - - {t('version:changedFieldsCount', { count: changeCount })} - - )} - -
{children}
-
- ) -} +export { DiffCollapser } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/DiffCollapser/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx index 3f8ec527880..6b855840fce 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx @@ -1,73 +1 @@ -'use client' -const baseClass = 'render-field-diffs' -import type { VersionField } from 'payload' - -import './index.scss' - -import { ShimmerEffect } from '@payloadcms/ui' -import React, { Fragment, useEffect } from 'react' - -export const RenderVersionFieldsToDiff = ({ - parent = false, - versionFields, -}: { - /** - * If true, this is the parent render version fields component, not one nested in - * a field with children (e.g. group) - */ - parent?: boolean - versionFields: VersionField[] -}): React.ReactNode => { - const [hasMounted, setHasMounted] = React.useState(false) - - // defer rendering until after the first mount as the CSS is loaded with Emotion - // this will ensure that the CSS is loaded before rendering the diffs and prevent CLS - useEffect(() => { - setHasMounted(true) - }, []) - - return ( -
- {!hasMounted ? ( - - - - ) : ( - versionFields?.map((field, fieldIndex) => { - if (field.fieldByLocale) { - const LocaleComponents: React.ReactNode[] = [] - for (const [locale, baseField] of Object.entries(field.fieldByLocale)) { - LocaleComponents.push( -
-
{baseField.CustomComponent}
-
, - ) - } - return ( -
- {LocaleComponents} -
- ) - } else if (field.field) { - return ( -
- {field.field.CustomComponent} -
- ) - } - - return null - }) - )} -
- ) -} +export { RenderVersionFieldsToDiff } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx index 1b8bbcd362c..4a6a0f5c886 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx @@ -1,565 +1,2 @@ -import type { I18nClient } from '@payloadcms/translations' - -import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent' -import { dequal } from 'dequal/lite' -import { - type BaseVersionField, - type ClientField, - type ClientFieldSchemaMap, - type Field, - type FieldDiffClientProps, - type FieldDiffServerProps, - type FieldTypes, - type FlattenedBlock, - MissingEditorProp, - type PayloadComponent, - type PayloadRequest, - type SanitizedFieldPermissions, - type SanitizedFieldsPermissions, - type VersionField, -} from 'payload' -import { - fieldIsID, - fieldShouldBeLocalized, - getFieldPaths, - getUniqueListBy, - tabHasName, -} from 'payload/shared' - -import { diffComponents } from './fields/index.js' - -export type BuildVersionFieldsArgs = { - clientSchemaMap: ClientFieldSchemaMap - customDiffComponents: Partial< - Record> - > - entitySlug: string - fields: Field[] - fieldsPermissions: SanitizedFieldsPermissions - i18n: I18nClient - modifiedOnly: boolean - nestingLevel?: number - parentIndexPath: string - parentIsLocalized: boolean - parentPath: string - parentSchemaPath: string - req: PayloadRequest - selectedLocales: string[] - versionFromSiblingData: object - versionToSiblingData: object -} - -/** - * Build up an object that contains rendered diff components for each field. - * This is then sent to the client to be rendered. - * - * Here, the server is responsible for traversing through the document data and building up this - * version state object. - */ -export const buildVersionFields = ({ - clientSchemaMap, - customDiffComponents, - entitySlug, - fields, - fieldsPermissions, - i18n, - modifiedOnly, - nestingLevel = 0, - parentIndexPath, - parentIsLocalized, - parentPath, - parentSchemaPath, - req, - selectedLocales, - versionFromSiblingData, - versionToSiblingData, -}: BuildVersionFieldsArgs): { - versionFields: VersionField[] -} => { - const versionFields: VersionField[] = [] - let fieldIndex = -1 - - for (const field of fields) { - fieldIndex++ - - if (fieldIsID(field)) { - continue - } - - const { indexPath, path, schemaPath } = getFieldPaths({ - field, - index: fieldIndex, - parentIndexPath, - parentPath, - parentSchemaPath, - }) - - const clientField = clientSchemaMap.get(entitySlug + '.' + schemaPath) - - if (!clientField) { - req.payload.logger.error({ - clientFieldKey: entitySlug + '.' + schemaPath, - clientSchemaMapKeys: Array.from(clientSchemaMap.keys()), - msg: 'No client field found for ' + entitySlug + '.' + schemaPath, - parentPath, - parentSchemaPath, - path, - schemaPath, - }) - throw new Error('No client field found for ' + entitySlug + '.' + schemaPath) - } - - const versionField: VersionField = {} - const isLocalized = fieldShouldBeLocalized({ field, parentIsLocalized }) - - const fieldName: null | string = 'name' in field ? field.name : null - - const valueFrom = fieldName ? versionFromSiblingData?.[fieldName] : versionFromSiblingData - const valueTo = fieldName ? versionToSiblingData?.[fieldName] : versionToSiblingData - - if (isLocalized) { - versionField.fieldByLocale = {} - - for (const locale of selectedLocales) { - const localizedVersionField = buildVersionField({ - clientField: clientField as ClientField, - clientSchemaMap, - customDiffComponents, - entitySlug, - field, - i18n, - indexPath, - locale, - modifiedOnly, - nestingLevel, - parentFieldsPermissions: fieldsPermissions, - parentIsLocalized: true, - parentPath, - parentSchemaPath, - path, - req, - schemaPath, - selectedLocales, - valueFrom: valueFrom?.[locale], - valueTo: valueTo?.[locale], - }) - if (localizedVersionField) { - versionField.fieldByLocale[locale] = localizedVersionField - } - } - } else { - const baseVersionField = buildVersionField({ - clientField: clientField as ClientField, - clientSchemaMap, - customDiffComponents, - entitySlug, - field, - i18n, - indexPath, - modifiedOnly, - nestingLevel, - parentFieldsPermissions: fieldsPermissions, - parentIsLocalized: parentIsLocalized || ('localized' in field && field.localized), - parentPath, - parentSchemaPath, - path, - req, - schemaPath, - selectedLocales, - valueFrom, - valueTo, - }) - - if (baseVersionField) { - versionField.field = baseVersionField - } - } - - if ( - versionField.field || - (versionField.fieldByLocale && Object.keys(versionField.fieldByLocale).length) - ) { - versionFields.push(versionField) - } - } - - return { - versionFields, - } -} - -const buildVersionField = ({ - clientField, - clientSchemaMap, - customDiffComponents, - entitySlug, - field, - i18n, - indexPath, - locale, - modifiedOnly, - nestingLevel, - parentFieldsPermissions, - parentIsLocalized, - parentPath, - parentSchemaPath, - path, - req, - schemaPath, - selectedLocales, - valueFrom, - valueTo, -}: { - clientField: ClientField - field: Field - indexPath: string - locale?: string - modifiedOnly?: boolean - nestingLevel: number - parentFieldsPermissions: SanitizedFieldsPermissions - parentIsLocalized: boolean - path: string - schemaPath: string - valueFrom: unknown - valueTo: unknown -} & Omit< - BuildVersionFieldsArgs, - | 'fields' - | 'fieldsPermissions' - | 'parentIndexPath' - | 'versionFromSiblingData' - | 'versionToSiblingData' ->): BaseVersionField | null => { - let hasReadPermission: boolean = false - let fieldPermissions: SanitizedFieldPermissions | undefined = undefined - - if (typeof parentFieldsPermissions === 'boolean') { - hasReadPermission = parentFieldsPermissions - fieldPermissions = parentFieldsPermissions - } else { - if ('name' in field) { - fieldPermissions = parentFieldsPermissions?.[field.name] - if (typeof fieldPermissions === 'boolean') { - hasReadPermission = fieldPermissions - } else if (typeof fieldPermissions?.read === 'boolean') { - hasReadPermission = fieldPermissions.read - } - } else { - // If the field is unnamed and parentFieldsPermissions is an object, its sub-fields will decide their read permissions state. - // As far as this field is concerned, we are allowed to read it, as we need to reach its sub-fields to determine their read permissions. - hasReadPermission = true - } - } - - if (!hasReadPermission) { - // HasReadPermission is only valid if the field has a name. E.g. for a tabs field it would incorrectly return `false`. - return null - } - - if (modifiedOnly && dequal(valueFrom, valueTo)) { - return null - } - - let CustomComponent = customDiffComponents?.[field.type] - if (field?.type === 'richText') { - if (!field?.editor) { - throw new MissingEditorProp(field) // while we allow disabling editor functionality, you should not have any richText fields defined if you do not have an editor - } - - if (typeof field?.editor === 'function') { - throw new Error('Attempted to access unsanitized rich text editor.') - } - - if (field.editor.CellComponent) { - CustomComponent = field.editor.DiffComponent - } - } - if (field?.admin?.components?.Diff) { - CustomComponent = field.admin.components.Diff - } - - const DefaultComponent = diffComponents?.[field.type] - - const baseVersionField: BaseVersionField = { - type: field.type, - fields: [], - path, - schemaPath, - } - - if (field.type === 'tabs' && 'tabs' in field) { - baseVersionField.tabs = [] - let tabIndex = -1 - for (const tab of field.tabs) { - tabIndex++ - const isNamedTab = tabHasName(tab) - - const tabAsField = { ...tab, type: 'tab' } - - const { - indexPath: tabIndexPath, - path: tabPath, - schemaPath: tabSchemaPath, - } = getFieldPaths({ - field: tabAsField, - index: tabIndex, - parentIndexPath: indexPath, - parentPath: path, - parentSchemaPath: schemaPath, - }) - - let tabFieldsPermissions: SanitizedFieldsPermissions = undefined - - // The tabs field does not have its own permissions as it's unnamed => use parentFieldsPermissions - if (typeof parentFieldsPermissions === 'boolean') { - tabFieldsPermissions = parentFieldsPermissions - } else { - if ('name' in tab) { - const tabPermissions = parentFieldsPermissions?.[tab.name] - if (typeof tabPermissions === 'boolean') { - tabFieldsPermissions = tabPermissions - } else { - tabFieldsPermissions = tabPermissions?.fields - } - } else { - tabFieldsPermissions = parentFieldsPermissions - } - } - - const tabVersion = { - name: 'name' in tab ? tab.name : null, - fields: buildVersionFields({ - clientSchemaMap, - customDiffComponents, - entitySlug, - fields: tab.fields, - fieldsPermissions: tabFieldsPermissions, - i18n, - modifiedOnly, - nestingLevel: nestingLevel + 1, - parentIndexPath: isNamedTab ? '' : tabIndexPath, - parentIsLocalized: parentIsLocalized || tab.localized, - parentPath: isNamedTab ? tabPath : 'name' in field ? path : parentPath, - parentSchemaPath: tabSchemaPath, - req, - selectedLocales, - versionFromSiblingData: 'name' in tab ? valueFrom?.[tab.name] : valueFrom, - versionToSiblingData: 'name' in tab ? valueTo?.[tab.name] : valueTo, - }).versionFields, - label: typeof tab.label === 'function' ? tab.label({ i18n, t: i18n.t }) : tab.label, - } - if (tabVersion?.fields?.length) { - baseVersionField.tabs.push(tabVersion) - } - } - - if (modifiedOnly && !baseVersionField.tabs.length) { - return null - } - } // At this point, we are dealing with a `row`, `collapsible`, array`, etc - else if ('fields' in field) { - let subFieldsPermissions: SanitizedFieldsPermissions = undefined - - if ('name' in field && typeof fieldPermissions !== 'undefined') { - // Named fields like arrays - subFieldsPermissions = - typeof fieldPermissions === 'boolean' ? fieldPermissions : fieldPermissions.fields - } else { - // Unnamed fields like collapsible and row inherit directly from parent permissions - subFieldsPermissions = parentFieldsPermissions - } - - if (field.type === 'array' && (valueTo || valueFrom)) { - const maxLength = Math.max( - Array.isArray(valueTo) ? valueTo.length : 0, - Array.isArray(valueFrom) ? valueFrom.length : 0, - ) - baseVersionField.rows = [] - - for (let i = 0; i < maxLength; i++) { - const fromRow = (Array.isArray(valueFrom) && valueFrom?.[i]) || {} - const toRow = (Array.isArray(valueTo) && valueTo?.[i]) || {} - - const versionFields = buildVersionFields({ - clientSchemaMap, - customDiffComponents, - entitySlug, - fields: field.fields, - fieldsPermissions: subFieldsPermissions, - i18n, - modifiedOnly, - nestingLevel: nestingLevel + 1, - parentIndexPath: 'name' in field ? '' : indexPath, - parentIsLocalized: parentIsLocalized || field.localized, - parentPath: ('name' in field ? path : parentPath) + '.' + i, - parentSchemaPath: schemaPath, - req, - selectedLocales, - versionFromSiblingData: fromRow, - versionToSiblingData: toRow, - }).versionFields - - if (versionFields?.length) { - baseVersionField.rows[i] = versionFields - } - } - - if (!baseVersionField.rows?.length && modifiedOnly) { - return null - } - } else { - baseVersionField.fields = buildVersionFields({ - clientSchemaMap, - customDiffComponents, - entitySlug, - fields: field.fields, - fieldsPermissions: subFieldsPermissions, - i18n, - modifiedOnly, - nestingLevel: field.type !== 'row' ? nestingLevel + 1 : nestingLevel, - parentIndexPath: 'name' in field ? '' : indexPath, - parentIsLocalized: parentIsLocalized || ('localized' in field && field.localized), - parentPath: 'name' in field ? path : parentPath, - parentSchemaPath: schemaPath, - req, - selectedLocales, - versionFromSiblingData: valueFrom as object, - versionToSiblingData: valueTo as object, - }).versionFields - - if (modifiedOnly && !baseVersionField.fields?.length) { - return null - } - } - } else if (field.type === 'blocks') { - baseVersionField.rows = [] - - const maxLength = Math.max( - Array.isArray(valueTo) ? valueTo.length : 0, - Array.isArray(valueFrom) ? valueFrom.length : 0, - ) - - for (let i = 0; i < maxLength; i++) { - const fromRow = (Array.isArray(valueFrom) && valueFrom?.[i]) || {} - const toRow = (Array.isArray(valueTo) && valueTo?.[i]) || {} - - const blockSlugToMatch: string = toRow?.blockType ?? fromRow?.blockType - const toBlock = - req.payload.blocks[blockSlugToMatch] ?? - ((field.blockReferences ?? field.blocks).find( - (block) => typeof block !== 'string' && block.slug === blockSlugToMatch, - ) as FlattenedBlock | undefined) - - let fields = [] - - if (toRow.blockType === fromRow.blockType) { - fields = toBlock.fields - } else { - const fromBlockSlugToMatch: string = toRow?.blockType ?? fromRow?.blockType - - const fromBlock = - req.payload.blocks[fromBlockSlugToMatch] ?? - ((field.blockReferences ?? field.blocks).find( - (block) => typeof block !== 'string' && block.slug === fromBlockSlugToMatch, - ) as FlattenedBlock | undefined) - - if (fromBlock) { - fields = getUniqueListBy([...toBlock.fields, ...fromBlock.fields], 'name') - } else { - fields = toBlock.fields - } - } - - let blockFieldsPermissions: SanitizedFieldsPermissions = undefined - - // fieldPermissions will be set here, as the blocks field has a name - if (typeof fieldPermissions === 'boolean') { - blockFieldsPermissions = fieldPermissions - } else if (typeof fieldPermissions?.blocks === 'boolean') { - blockFieldsPermissions = fieldPermissions.blocks - } else { - const permissionsBlockSpecific = fieldPermissions?.blocks?.[blockSlugToMatch] - if (typeof permissionsBlockSpecific === 'boolean') { - blockFieldsPermissions = permissionsBlockSpecific - } else { - blockFieldsPermissions = permissionsBlockSpecific?.fields - } - } - - const versionFields = buildVersionFields({ - clientSchemaMap, - customDiffComponents, - entitySlug, - fields, - fieldsPermissions: blockFieldsPermissions, - i18n, - modifiedOnly, - nestingLevel: nestingLevel + 1, - parentIndexPath: 'name' in field ? '' : indexPath, - parentIsLocalized: parentIsLocalized || ('localized' in field && field.localized), - parentPath: ('name' in field ? path : parentPath) + '.' + i, - parentSchemaPath: schemaPath + '.' + toBlock.slug, - req, - selectedLocales, - versionFromSiblingData: fromRow, - versionToSiblingData: toRow, - }).versionFields - - if (versionFields?.length) { - baseVersionField.rows[i] = versionFields - } - } - - if (!baseVersionField.rows?.length && modifiedOnly) { - return null - } - } - - const clientDiffProps: FieldDiffClientProps = { - baseVersionField: { - ...baseVersionField, - CustomComponent: undefined, - }, - /** - * TODO: Change to valueFrom in 4.0 - */ - comparisonValue: valueFrom, - /** - * @deprecated remove in 4.0. Each field should handle its own diffing logic - */ - diffMethod: 'diffWordsWithSpace', - field: clientField, - fieldPermissions: - typeof fieldPermissions === 'undefined' ? parentFieldsPermissions : fieldPermissions, - parentIsLocalized, - - nestingLevel: nestingLevel ? nestingLevel : undefined, - /** - * TODO: Change to valueTo in 4.0 - */ - versionValue: valueTo, - } - if (locale) { - clientDiffProps.locale = locale - } - - const serverDiffProps: FieldDiffServerProps = { - ...clientDiffProps, - clientField, - field, - i18n, - req, - selectedLocales, - } - - baseVersionField.CustomComponent = RenderServerComponent({ - clientProps: clientDiffProps, - Component: CustomComponent, - Fallback: DefaultComponent, - importMap: req.payload.importMap, - key: 'diff component', - serverProps: serverDiffProps, - }) - - return baseVersionField -} +export type { BuildVersionFieldsArgs } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/buildVersionFields' +export { buildVersionFields } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/buildVersionFields' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx index 01da8257f2d..c86cde21e58 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx @@ -1,46 +1 @@ -'use client' -import type { CollapsibleFieldDiffClientComponent } from 'payload' - -import { getTranslation } from '@payloadcms/translations' -import { useTranslation } from '@payloadcms/ui' -import React from 'react' - -import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js' -import { DiffCollapser } from '../../DiffCollapser/index.js' -import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' - -const baseClass = 'collapsible-diff' - -export const Collapsible: CollapsibleFieldDiffClientComponent = ({ - baseVersionField, - comparisonValue: valueFrom, - field, - parentIsLocalized, - versionValue: valueTo, -}) => { - const { i18n } = useTranslation() - const { selectedLocales } = useSelectedLocales() - - if (!baseVersionField.fields?.length) { - return null - } - - return ( -
- {getTranslation(field.label, i18n)} - } - locales={selectedLocales} - parentIsLocalized={parentIsLocalized || field.localized} - valueFrom={valueFrom} - valueTo={valueTo} - > - - -
- ) -} +export { Collapsible } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Collapsible/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx index c108ff120d5..f3374325863 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx @@ -1,78 +1 @@ -'use client' -import type { DateFieldDiffClientComponent } from 'payload' - -import { - escapeDiffHTML, - FieldDiffContainer, - getHTMLDiffComponents, - unescapeDiffHTML, - useConfig, - useTranslation, -} from '@payloadcms/ui' -import { formatDate } from '@payloadcms/ui/shared' -import React from 'react' - -import './index.scss' - -const baseClass = 'date-diff' - -export const DateDiffComponent: DateFieldDiffClientComponent = ({ - comparisonValue: valueFrom, - field, - locale, - nestingLevel, - versionValue: valueTo, -}) => { - const { i18n } = useTranslation() - const { - config: { - admin: { dateFormat }, - }, - } = useConfig() - - const formattedFromDate = valueFrom - ? formatDate({ - date: typeof valueFrom === 'string' ? new Date(valueFrom) : (valueFrom as Date), - i18n, - pattern: dateFormat, - }) - : '' - - const formattedToDate = valueTo - ? formatDate({ - date: typeof valueTo === 'string' ? new Date(valueTo) : (valueTo as Date), - i18n, - pattern: dateFormat, - }) - : '' - - const escapedFromDate = escapeDiffHTML(formattedFromDate) - const escapedToDate = escapeDiffHTML(formattedToDate) - - const { From, To } = getHTMLDiffComponents({ - fromHTML: - `

` + - escapedFromDate + - '

', - postProcess: unescapeDiffHTML, - toHTML: - `

` + - escapedToDate + - '

', - tokenizeByCharacter: false, - }) - - return ( - - ) -} +export { DateDiffComponent } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Date/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx index 95761c47da2..490bfc468cb 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx @@ -1,53 +1 @@ -'use client' -import type { GroupFieldDiffClientComponent } from 'payload' - -import { getTranslation } from '@payloadcms/translations' - -import './index.scss' - -import { useTranslation } from '@payloadcms/ui' -import React from 'react' - -import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js' -import { DiffCollapser } from '../../DiffCollapser/index.js' -import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' - -const baseClass = 'group-diff' - -export const Group: GroupFieldDiffClientComponent = ({ - baseVersionField, - comparisonValue: valueFrom, - field, - locale, - parentIsLocalized, - versionValue: valueTo, -}) => { - const { i18n } = useTranslation() - const { selectedLocales } = useSelectedLocales() - - return ( -
- - {locale && {locale}} - {getTranslation(field.label, i18n)} - - ) : ( - - <{i18n.t('version:noLabelGroup')}> - - ) - } - locales={selectedLocales} - parentIsLocalized={parentIsLocalized || field.localized} - valueFrom={valueFrom} - valueTo={valueTo} - > - - -
- ) -} +export { Group } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Group/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx index 2f0a9201072..ed6abd706f8 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx @@ -1,122 +1 @@ -'use client' - -import type { FieldDiffClientProps } from 'payload' - -import { getTranslation } from '@payloadcms/translations' -import { useConfig, useTranslation } from '@payloadcms/ui' - -import './index.scss' - -import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared' -import React from 'react' - -import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js' -import { DiffCollapser } from '../../DiffCollapser/index.js' -import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' -import { getFieldsForRowComparison } from '../../utilities/getFieldsForRowComparison.js' - -const baseClass = 'iterable-diff' - -export const Iterable: React.FC = ({ - baseVersionField, - comparisonValue: valueFrom, - field, - locale, - parentIsLocalized, - versionValue: valueTo, -}) => { - const { i18n, t } = useTranslation() - const { selectedLocales } = useSelectedLocales() - const { config } = useConfig() - - if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) { - throw new Error(`Expected field to be an array or blocks type but got: ${field.type}`) - } - - const valueToRowCount = Array.isArray(valueTo) ? valueTo.length : 0 - const valueFromRowCount = Array.isArray(valueFrom) ? valueFrom.length : 0 - const maxRows = Math.max(valueToRowCount, valueFromRowCount) - - return ( -
- - {locale && {locale}} - {getTranslation(field.label, i18n)} - - ) - } - locales={selectedLocales} - parentIsLocalized={parentIsLocalized} - valueFrom={valueFrom} - valueTo={valueTo} - > - {maxRows > 0 && ( -
- {Array.from({ length: maxRows }, (_, i) => { - const valueToRow = valueTo?.[i] || {} - const valueFromRow = valueFrom?.[i] || {} - - const { fields, versionFields } = getFieldsForRowComparison({ - baseVersionField, - config, - field, - row: i, - valueFromRow, - valueToRow, - }) - - if (!versionFields?.length) { - // Rows without a diff create "holes" in the baseVersionField.rows (=versionFields) array - this is to maintain the correct row indexes. - // It does mean that this row has no diff and should not be rendered => skip it. - return null - } - - const rowNumber = String(i + 1).padStart(2, '0') - const rowLabel = fieldIsArrayType(field) - ? `${t('general:item')} ${rowNumber}` - : `${t('fields:block')} ${rowNumber}` - - return ( -
- -
- {rowLabel} -
- } - locales={selectedLocales} - parentIsLocalized={parentIsLocalized || field.localized} - valueFrom={valueFromRow} - valueTo={valueToRow} - > - - -
- ) - })} -
- )} - {maxRows === 0 && ( -
- {i18n.t('version:noRowsFound', { - label: - 'labels' in field && field.labels?.plural - ? getTranslation(field.labels.plural, i18n) - : i18n.t('general:rows'), - })} -
- )} - -
- ) -} +export { Iterable } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Iterable/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts index fe7d7084c9b..98f59159c0b 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts @@ -1,100 +1 @@ -import type { PayloadRequest, RelationshipField, TypeWithID } from 'payload' - -import { - fieldAffectsData, - fieldIsPresentationalOnly, - fieldShouldBeLocalized, - flattenTopLevelFields, -} from 'payload/shared' - -import type { RelationshipValue } from './index.js' - -export const generateLabelFromValue = async ({ - field, - locale, - parentIsLocalized, - req, - value, -}: { - field: RelationshipField - locale: string - parentIsLocalized: boolean - req: PayloadRequest - value: RelationshipValue -}): Promise => { - let relatedDoc: number | string | TypeWithID - let relationTo: string = field.relationTo as string - let valueToReturn: string = '' - - if (typeof value === 'object' && 'relationTo' in value) { - relatedDoc = value.value - relationTo = value.relationTo - } else { - // Non-polymorphic relationship or deleted document - relatedDoc = value - } - - const relatedCollection = req.payload.collections[relationTo].config - - const useAsTitle = relatedCollection?.admin?.useAsTitle - - const flattenedRelatedCollectionFields = flattenTopLevelFields(relatedCollection.fields, { - moveSubFieldsToTop: true, - }) - - const useAsTitleField = flattenedRelatedCollectionFields.find( - (f) => fieldAffectsData(f) && !fieldIsPresentationalOnly(f) && f.name === useAsTitle, - ) - let titleFieldIsLocalized = false - - if (useAsTitleField && fieldAffectsData(useAsTitleField)) { - titleFieldIsLocalized = fieldShouldBeLocalized({ field: useAsTitleField, parentIsLocalized }) - } - - if (typeof relatedDoc?.[useAsTitle] !== 'undefined') { - valueToReturn = relatedDoc[useAsTitle] - } else if (typeof relatedDoc === 'string' || typeof relatedDoc === 'number') { - // When relatedDoc is just an ID (due to maxDepth: 0), fetch the document to get the title - try { - const fetchedDoc = await req.payload.findByID({ - id: relatedDoc, - collection: relationTo, - depth: 0, - locale: titleFieldIsLocalized ? locale : undefined, - req, - select: { - [useAsTitle]: true, - }, - }) - - if (fetchedDoc?.[useAsTitle]) { - valueToReturn = fetchedDoc[useAsTitle] - } else { - valueToReturn = `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}` - } - } catch (error) { - // Document might have been deleted or user doesn't have access - valueToReturn = `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}` - } - } else { - valueToReturn = String(typeof relatedDoc === 'object' ? relatedDoc.id : relatedDoc) - } - - if ( - typeof valueToReturn === 'object' && - valueToReturn && - titleFieldIsLocalized && - valueToReturn?.[locale] - ) { - valueToReturn = valueToReturn[locale] - } - - if ( - (valueToReturn && typeof valueToReturn === 'object' && valueToReturn !== null) || - typeof valueToReturn !== 'string' - ) { - valueToReturn = JSON.stringify(valueToReturn) - } - - return valueToReturn -} +export { generateLabelFromValue } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx index 3a1eb90e68c..b99375facd8 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx @@ -1,338 +1,5 @@ -import type { - PayloadRequest, - RelationshipField, - RelationshipFieldDiffServerComponent, - TypeWithID, -} from 'payload' - -import { getTranslation, type I18nClient } from '@payloadcms/translations' -import { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc' - -import './index.scss' - -import React from 'react' - -import { generateLabelFromValue } from './generateLabelFromValue.js' - -const baseClass = 'relationship-diff' - -export type RelationshipValue = - | { relationTo: string; value: number | string | TypeWithID } - | (number | string | TypeWithID) - -export const Relationship: RelationshipFieldDiffServerComponent = ({ - comparisonValue: valueFrom, - field, - i18n, - locale, - nestingLevel, - parentIsLocalized, - req, - versionValue: valueTo, -}) => { - const hasMany = - ('hasMany' in field && field.hasMany) || - // Check data structure (handles block swaps where schema may not match data) - Array.isArray(valueFrom) || - Array.isArray(valueTo) - const polymorphic = Array.isArray(field.relationTo) - - if (hasMany) { - return ( - - ) - } - - return ( - - ) -} - -export const SingleRelationshipDiff: React.FC<{ - field: RelationshipField - i18n: I18nClient - locale: string - nestingLevel?: number - parentIsLocalized: boolean - polymorphic: boolean - req: PayloadRequest - valueFrom: RelationshipValue - valueTo: RelationshipValue -}> = async (args) => { - const { - field, - i18n, - locale, - nestingLevel, - parentIsLocalized, - polymorphic, - req, - valueFrom, - valueTo, - } = args - - const ReactDOMServer = (await import('react-dom/server')).default - - const localeToUse = - locale ?? - (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? - 'en' - - // Generate titles asynchronously before creating components - const [titleFrom, titleTo] = await Promise.all([ - valueFrom - ? generateLabelFromValue({ - field, - locale: localeToUse, - parentIsLocalized, - req, - value: valueFrom, - }) - : Promise.resolve(null), - valueTo - ? generateLabelFromValue({ - field, - locale: localeToUse, - parentIsLocalized, - req, - value: valueTo, - }) - : Promise.resolve(null), - ]) - - const FromComponent = valueFrom ? ( - - ) : null - const ToComponent = valueTo ? ( - - ) : null - - const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `

` - const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : `

` - - const diff = getHTMLDiffComponents({ - fromHTML, - toHTML, - tokenizeByCharacter: false, - }) - - return ( - - ) -} - -const ManyRelationshipDiff: React.FC<{ - field: RelationshipField - i18n: I18nClient - locale: string - nestingLevel?: number - parentIsLocalized: boolean - polymorphic: boolean - req: PayloadRequest - valueFrom: RelationshipValue[] | undefined - valueTo: RelationshipValue[] | undefined -}> = async ({ - field, - i18n, - locale, - nestingLevel, - parentIsLocalized, - polymorphic, - req, - valueFrom, - valueTo, -}) => { - const ReactDOMServer = (await import('react-dom/server')).default - - const fromArr = Array.isArray(valueFrom) ? valueFrom : [] - const toArr = Array.isArray(valueTo) ? valueTo : [] - - const localeToUse = - locale ?? - (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? - 'en' - - // Generate all titles asynchronously before creating components - const [titlesFrom, titlesTo] = await Promise.all([ - Promise.all( - fromArr.map((val) => - generateLabelFromValue({ - field, - locale: localeToUse, - parentIsLocalized, - req, - value: val, - }), - ), - ), - Promise.all( - toArr.map((val) => - generateLabelFromValue({ - field, - locale: localeToUse, - parentIsLocalized, - req, - value: val, - }), - ), - ), - ]) - - const makeNodes = (list: RelationshipValue[], titles: string[]) => - list.map((val, idx) => ( - - )) - - const fromNodes = - fromArr.length > 0 ? makeNodes(fromArr, titlesFrom) :

- - const toNodes = - toArr.length > 0 ? makeNodes(toArr, titlesTo) :

- - const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes) - const toHTML = ReactDOMServer.renderToStaticMarkup(toNodes) - - const diff = getHTMLDiffComponents({ - fromHTML, - toHTML, - tokenizeByCharacter: false, - }) - - return ( - - ) -} - -const RelationshipDocumentDiff = ({ - field, - i18n, - locale, - parentIsLocalized, - polymorphic, - relationTo, - req, - showPill = false, - title, - value, -}: { - field: RelationshipField - i18n: I18nClient - locale: string - parentIsLocalized: boolean - polymorphic: boolean - relationTo: string - req: PayloadRequest - showPill?: boolean - title: null | string - value: RelationshipValue -}) => { - let pillLabel: null | string = null - if (showPill) { - const collectionConfig = req.payload.collections[relationTo].config - pillLabel = collectionConfig.labels?.singular - ? getTranslation(collectionConfig.labels.singular, i18n) - : collectionConfig.slug - } - - return ( -
- {pillLabel && ( - - {pillLabel} - - )} - - {title} - -
- ) -} +export type { RelationshipValue } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Relationship/index' +export { + Relationship, + SingleRelationshipDiff, +} from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Relationship/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx index db73c912dc0..371b7b0e244 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx @@ -1,16 +1 @@ -'use client' -import type { RowFieldDiffClientComponent } from 'payload' - -import React from 'react' - -import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' - -const baseClass = 'row-diff' - -export const Row: RowFieldDiffClientComponent = ({ baseVersionField }) => { - return ( -
- -
- ) -} +export { Row } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Row/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx index 0c7b3a5c711..912c5b7b254 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx @@ -1,122 +1 @@ -'use client' -import type { I18nClient } from '@payloadcms/translations' -import type { Option, SelectField, SelectFieldDiffClientComponent } from 'payload' - -import { getTranslation } from '@payloadcms/translations' -import { - escapeDiffHTML, - FieldDiffContainer, - getHTMLDiffComponents, - unescapeDiffHTML, - useTranslation, -} from '@payloadcms/ui' -import React from 'react' - -import './index.scss' - -const baseClass = 'select-diff' - -const getOptionsToRender = ( - value: string, - options: SelectField['options'], - hasMany: boolean, -): Option | Option[] => { - if (hasMany && Array.isArray(value)) { - return value.map( - (val) => - options.find((option) => (typeof option === 'string' ? option : option.value) === val) || - String(val), - ) - } - return ( - options.find((option) => (typeof option === 'string' ? option : option.value) === value) || - String(value) - ) -} - -/** - * Translates option labels while ensuring they are strings. - * If `options.label` is a JSX element, it falls back to `options.value` because `DiffViewer` - * expects all values to be strings. - */ -const getTranslatedOptions = (options: Option | Option[], i18n: I18nClient): string => { - if (Array.isArray(options)) { - return options - .map((option) => { - if (typeof option === 'string') { - return option - } - const translatedLabel = getTranslation(option.label, i18n) - - // Ensure the result is a string, otherwise use option.value - return typeof translatedLabel === 'string' ? translatedLabel : option.value - }) - .join(', ') - } - - if (typeof options === 'string') { - return options - } - - const translatedLabel = getTranslation(options.label, i18n) - - return typeof translatedLabel === 'string' ? translatedLabel : options.value -} - -export const Select: SelectFieldDiffClientComponent = ({ - comparisonValue: valueFrom, - diffMethod, - field, - locale, - nestingLevel, - versionValue: valueTo, -}) => { - const { i18n } = useTranslation() - - const options = 'options' in field && field.options - - const renderedValueFrom = - typeof valueFrom !== 'undefined' - ? getTranslatedOptions( - getOptionsToRender( - typeof valueFrom === 'string' ? valueFrom : JSON.stringify(valueFrom), - options, - field.hasMany, - ), - i18n, - ) - : '' - - const renderedValueTo = - typeof valueTo !== 'undefined' - ? getTranslatedOptions( - getOptionsToRender( - typeof valueTo === 'string' ? valueTo : JSON.stringify(valueTo), - options, - field.hasMany, - ), - i18n, - ) - : '' - - const { From, To } = getHTMLDiffComponents({ - fromHTML: '

' + escapeDiffHTML(renderedValueFrom) + '

', - postProcess: unescapeDiffHTML, - toHTML: '

' + escapeDiffHTML(renderedValueTo) + '

', - tokenizeByCharacter: true, - }) - - return ( - - ) -} +export { Select } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Select/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx index 91c41170ef9..f6357820200 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx @@ -1,120 +1 @@ -'use client' -import type { - ClientTab, - FieldDiffClientProps, - TabsFieldClient, - TabsFieldDiffClientComponent, - VersionTab, -} from 'payload' - -import { getTranslation } from '@payloadcms/translations' -import { useTranslation } from '@payloadcms/ui' -import React from 'react' - -import './index.scss' -import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js' -import { DiffCollapser } from '../../DiffCollapser/index.js' -import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' - -const baseClass = 'tabs-diff' - -export const Tabs: TabsFieldDiffClientComponent = (props) => { - const { baseVersionField, comparisonValue: valueFrom, field, versionValue: valueTo } = props - const { selectedLocales } = useSelectedLocales() - - return ( -
- {baseVersionField.tabs.map((tab, i) => { - if (!tab?.fields?.length) { - return null - } - const fieldTab = field.tabs?.[i] - if (!fieldTab) { - return null - } - return ( -
- {(() => { - if ('name' in fieldTab && selectedLocales && fieldTab.localized) { - // Named localized tab - return selectedLocales.map((locale, index) => { - const localizedTabProps: TabProps = { - ...props, - comparisonValue: valueFrom?.[tab.name]?.[locale], - fieldTab, - locale, - tab, - versionValue: valueTo?.[tab.name]?.[locale], - } - return ( -
-
- -
-
- ) - }) - } else if ('name' in tab && tab.name) { - // Named tab - const namedTabProps: TabProps = { - ...props, - comparisonValue: valueFrom?.[tab.name], - fieldTab, - tab, - versionValue: valueTo?.[tab.name], - } - return - } else { - // Unnamed tab - return - } - })()} -
- ) - })} -
- ) -} - -type TabProps = { - fieldTab: ClientTab - tab: VersionTab -} & FieldDiffClientProps - -const Tab: React.FC = ({ - comparisonValue: valueFrom, - fieldTab, - locale, - parentIsLocalized, - tab, - versionValue: valueTo, -}) => { - const { i18n } = useTranslation() - const { selectedLocales } = useSelectedLocales() - - if (!tab.fields?.length) { - return null - } - - return ( - - {locale && {locale}} - {getTranslation(tab.label, i18n)} - - ) - } - locales={selectedLocales} - parentIsLocalized={parentIsLocalized || fieldTab.localized} - valueFrom={valueFrom} - valueTo={valueTo} - > - - - ) -} +export { Tabs } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Tabs/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx index d968c584120..3683876c1f4 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx @@ -1,98 +1 @@ -'use client' -import type { TextFieldDiffClientComponent } from 'payload' - -import { - escapeDiffHTML, - FieldDiffContainer, - getHTMLDiffComponents, - unescapeDiffHTML, - useTranslation, -} from '@payloadcms/ui' -import React from 'react' - -import './index.scss' - -const baseClass = 'text-diff' - -function formatValue(value: unknown): { - tokenizeByCharacter: boolean - value: string -} { - if (typeof value === 'string') { - return { tokenizeByCharacter: true, value: escapeDiffHTML(value) } - } - if (typeof value === 'number') { - return { - tokenizeByCharacter: true, - value: String(value), - } - } - if (typeof value === 'boolean') { - return { - tokenizeByCharacter: false, - value: String(value), - } - } - - if (value && typeof value === 'object') { - return { - tokenizeByCharacter: false, - value: `
${escapeDiffHTML(JSON.stringify(value, null, 2))}
`, - } - } - - return { - tokenizeByCharacter: true, - value: undefined, - } -} - -export const Text: TextFieldDiffClientComponent = ({ - comparisonValue: valueFrom, - field, - locale, - nestingLevel, - versionValue: valueTo, -}) => { - const { i18n } = useTranslation() - - let placeholder = '' - - if (valueTo == valueFrom) { - placeholder = `` - } - - const formattedValueFrom = formatValue(valueFrom) - const formattedValueTo = formatValue(valueTo) - - let tokenizeByCharacter = true - if (formattedValueFrom.value?.length) { - tokenizeByCharacter = formattedValueFrom.tokenizeByCharacter - } else if (formattedValueTo.value?.length) { - tokenizeByCharacter = formattedValueTo.tokenizeByCharacter - } - - const renderedValueFrom = formattedValueFrom.value ?? placeholder - const renderedValueTo: string = formattedValueTo.value ?? placeholder - - const { From, To } = getHTMLDiffComponents({ - fromHTML: '

' + renderedValueFrom + '

', - postProcess: unescapeDiffHTML, - toHTML: '

' + renderedValueTo + '

', - tokenizeByCharacter, - }) - - return ( - - ) -} +export { Text } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Text/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx index d27b3c77479..0018b592793 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx @@ -1,307 +1,5 @@ -import type { - FileData, - PayloadRequest, - TypeWithID, - UploadField, - UploadFieldDiffServerComponent, -} from 'payload' - -import { getTranslation, type I18nClient } from '@payloadcms/translations' -import { FieldDiffContainer, File, getHTMLDiffComponents } from '@payloadcms/ui/rsc' - -import './index.scss' - -import React from 'react' - -const baseClass = 'upload-diff' - -type NonPolyUploadDoc = (FileData & TypeWithID) | number | string -type PolyUploadDoc = { relationTo: string; value: (FileData & TypeWithID) | number | string } - -type UploadDoc = NonPolyUploadDoc | PolyUploadDoc - -export const Upload: UploadFieldDiffServerComponent = (args) => { - const { - comparisonValue: valueFrom, - field, - i18n, - locale, - nestingLevel, - req, - versionValue: valueTo, - } = args - const hasMany = 'hasMany' in field && field.hasMany && Array.isArray(valueTo) - const polymorphic = Array.isArray(field.relationTo) - - if (hasMany) { - return ( - - ) - } - - return ( - - ) -} - -export const HasManyUploadDiff: React.FC<{ - field: UploadField - i18n: I18nClient - locale: string - nestingLevel?: number - polymorphic: boolean - req: PayloadRequest - valueFrom: Array - valueTo: Array -}> = async (args) => { - const { field, i18n, locale, nestingLevel, polymorphic, req, valueFrom, valueTo } = args - const ReactDOMServer = (await import('react-dom/server')).default - - let From: React.ReactNode = '' - let To: React.ReactNode = '' - - const showCollectionSlug = Array.isArray(field.relationTo) - - const getUploadDocKey = (uploadDoc: UploadDoc): number | string => { - if (typeof uploadDoc === 'object' && 'relationTo' in uploadDoc) { - // Polymorphic case - const value = uploadDoc.value - return typeof value === 'object' ? value.id : value - } - // Non-polymorphic case - return typeof uploadDoc === 'object' ? uploadDoc.id : uploadDoc - } - - const FromComponents = valueFrom - ? valueFrom.map((uploadDoc) => ( - - )) - : null - const ToComponents = valueTo - ? valueTo.map((uploadDoc) => ( - - )) - : null - - const diffResult = getHTMLDiffComponents({ - fromHTML: - `
` + - (FromComponents - ? FromComponents.map( - (component) => `
${ReactDOMServer.renderToStaticMarkup(component)}
`, - ).join('') - : '') + - '
', - toHTML: - `
` + - (ToComponents - ? ToComponents.map( - (component) => `
${ReactDOMServer.renderToStaticMarkup(component)}
`, - ).join('') - : '') + - '
', - tokenizeByCharacter: false, - }) - From = diffResult.From - To = diffResult.To - - return ( - - ) -} - -export const SingleUploadDiff: React.FC<{ - field: UploadField - i18n: I18nClient - locale: string - nestingLevel?: number - polymorphic: boolean - req: PayloadRequest - valueFrom: UploadDoc - valueTo: UploadDoc -}> = async (args) => { - const { field, i18n, locale, nestingLevel, polymorphic, req, valueFrom, valueTo } = args - - const ReactDOMServer = (await import('react-dom/server')).default - - let From: React.ReactNode = '' - let To: React.ReactNode = '' - - const showCollectionSlug = Array.isArray(field.relationTo) - - const FromComponent = valueFrom ? ( - - ) : null - const ToComponent = valueTo ? ( - - ) : null - - const fromHtml = FromComponent - ? ReactDOMServer.renderToStaticMarkup(FromComponent) - : '

' + '' + '

' - const toHtml = ToComponent - ? ReactDOMServer.renderToStaticMarkup(ToComponent) - : '

' + '' + '

' - - const diffResult = getHTMLDiffComponents({ - fromHTML: fromHtml, - toHTML: toHtml, - tokenizeByCharacter: false, - }) - From = diffResult.From - To = diffResult.To - - return ( - - ) -} - -const UploadDocumentDiff = (args: { - i18n: I18nClient - polymorphic: boolean - relationTo: string | string[] - req: PayloadRequest - showCollectionSlug?: boolean - uploadDoc: UploadDoc -}) => { - const { i18n, polymorphic, relationTo, req, showCollectionSlug, uploadDoc } = args - - let thumbnailSRC: string = '' - - const value = polymorphic - ? (uploadDoc as { relationTo: string; value: FileData & TypeWithID }).value - : (uploadDoc as FileData & TypeWithID) - - if (value && typeof value === 'object' && 'thumbnailURL' in value) { - thumbnailSRC = - (typeof value.thumbnailURL === 'string' && value.thumbnailURL) || - (typeof value.url === 'string' && value.url) || - '' - } - - let filename: string - if (value && typeof value === 'object') { - filename = value.filename - } else { - filename = `${i18n.t('general:untitled')} - ID: ${uploadDoc as number | string}` - } - - let pillLabel: null | string = null - - if (showCollectionSlug) { - let collectionSlug: string - if (polymorphic && typeof uploadDoc === 'object' && 'relationTo' in uploadDoc) { - collectionSlug = uploadDoc.relationTo - } else { - collectionSlug = typeof relationTo === 'string' ? relationTo : relationTo[0] - } - const uploadConfig = req.payload.collections[collectionSlug].config - pillLabel = uploadConfig.labels?.singular - ? getTranslation(uploadConfig.labels.singular, i18n) - : uploadConfig.slug - } - - let id: number | string | undefined - if (polymorphic && typeof uploadDoc === 'object' && 'relationTo' in uploadDoc) { - const polyValue = uploadDoc.value - id = typeof polyValue === 'object' ? polyValue.id : polyValue - } else if (typeof uploadDoc === 'object' && 'id' in uploadDoc) { - id = uploadDoc.id - } else if (typeof uploadDoc === 'string' || typeof uploadDoc === 'number') { - id = uploadDoc - } - - const alt = - (value && typeof value === 'object' && (value as { alt?: string }).alt) || filename || '' - - return ( -
-
-
- {thumbnailSRC?.length ? {alt} : } -
- {pillLabel && ( -
- {pillLabel} -
- )} -
- {filename} -
-
-
- ) -} +export { + HasManyUploadDiff, + SingleUploadDiff, + Upload, +} from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/Upload/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.ts b/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.ts index cc00eeab186..072b35d23e4 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.ts +++ b/packages/next/src/views/Version/RenderFieldsToDiff/fields/index.ts @@ -1,40 +1 @@ -import type { FieldDiffClientProps, FieldDiffServerProps, FieldTypes } from 'payload' - -import { Collapsible } from './Collapsible/index.js' -import { DateDiffComponent } from './Date/index.js' -import { Group } from './Group/index.js' -import { Iterable } from './Iterable/index.js' -import { Relationship } from './Relationship/index.js' -import { Row } from './Row/index.js' -import { Select } from './Select/index.js' -import { Tabs } from './Tabs/index.js' -import { Text } from './Text/index.js' -import { Upload } from './Upload/index.js' - -export const diffComponents: Record< - FieldTypes, - React.ComponentType -> = { - array: Iterable, - blocks: Iterable, - checkbox: Text, - code: Text, - collapsible: Collapsible, - date: DateDiffComponent, - email: Text, - group: Group, - join: null, - json: Text, - number: Text, - point: Text, - radio: Select, - relationship: Relationship, - richText: Text, - row: Row, - select: Select, - tabs: Tabs, - text: Text, - textarea: Text, - ui: null, - upload: Upload, -} +export { diffComponents } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/fields/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/index.tsx b/packages/next/src/views/Version/RenderFieldsToDiff/index.tsx index a2e90a8424c..9abc64f0950 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/index.tsx +++ b/packages/next/src/views/Version/RenderFieldsToDiff/index.tsx @@ -1,8 +1 @@ -import { buildVersionFields, type BuildVersionFieldsArgs } from './buildVersionFields.js' -import { RenderVersionFieldsToDiff } from './RenderVersionFieldsToDiff.js' - -export const RenderDiff = (args: BuildVersionFieldsArgs): React.ReactNode => { - const { versionFields } = buildVersionFields(args) - - return -} +export { RenderDiff } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/index' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts b/packages/next/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts index 3c6fcbd1e33..34eedb86cda 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts +++ b/packages/next/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts @@ -1,255 +1,4 @@ -import type { ArrayFieldClient, BlocksFieldClient, ClientConfig, ClientField } from 'payload' - -import { fieldShouldBeLocalized, groupHasName } from 'payload/shared' - -import { fieldHasChanges } from './fieldHasChanges.js' -import { getFieldsForRowComparison } from './getFieldsForRowComparison.js' - -type Args = { - config: ClientConfig - fields: ClientField[] - locales: string[] | undefined - parentIsLocalized: boolean - valueFrom: unknown - valueTo: unknown -} - -/** - * Recursively counts the number of changed fields between comparison and - * version data for a given set of fields. - */ -export function countChangedFields({ - config, - fields, - locales, - parentIsLocalized, - valueFrom, - valueTo, -}: Args) { - let count = 0 - - fields.forEach((field) => { - // Don't count the id field since it is not displayed in the UI - if ('name' in field && field.name === 'id') { - return - } - const fieldType = field.type - switch (fieldType) { - // Iterable fields are arrays and blocks fields. We iterate over each row and - // count the number of changed fields in each. - case 'array': - case 'blocks': { - if (locales && fieldShouldBeLocalized({ field, parentIsLocalized })) { - locales.forEach((locale) => { - const valueFromRows = valueFrom?.[field.name]?.[locale] ?? [] - const valueToRows = valueTo?.[field.name]?.[locale] ?? [] - count += countChangedFieldsInRows({ - config, - field, - locales, - parentIsLocalized: parentIsLocalized || field.localized, - valueFromRows, - valueToRows, - }) - }) - } else { - const valueFromRows = valueFrom?.[field.name] ?? [] - const valueToRows = valueTo?.[field.name] ?? [] - count += countChangedFieldsInRows({ - config, - field, - locales, - parentIsLocalized: parentIsLocalized || field.localized, - valueFromRows, - valueToRows, - }) - } - break - } - - // Regular fields without nested fields. - case 'checkbox': - case 'code': - case 'date': - case 'email': - case 'join': - case 'json': - case 'number': - case 'point': - case 'radio': - case 'relationship': - case 'richText': - case 'select': - case 'text': - case 'textarea': - case 'upload': { - // Fields that have a name and contain data. We can just check if the data has changed. - if (locales && fieldShouldBeLocalized({ field, parentIsLocalized })) { - locales.forEach((locale) => { - if ( - fieldHasChanges(valueTo?.[field.name]?.[locale], valueFrom?.[field.name]?.[locale]) - ) { - count++ - } - }) - } else if (fieldHasChanges(valueTo?.[field.name], valueFrom?.[field.name])) { - count++ - } - break - } - // Fields that have nested fields, but don't nest their fields' data. - case 'collapsible': - case 'row': { - count += countChangedFields({ - config, - fields: field.fields, - locales, - parentIsLocalized: parentIsLocalized || field.localized, - valueFrom, - valueTo, - }) - - break - } - - // Fields that have nested fields and nest their fields' data. - case 'group': { - if (groupHasName(field)) { - if (locales && fieldShouldBeLocalized({ field, parentIsLocalized })) { - locales.forEach((locale) => { - count += countChangedFields({ - config, - fields: field.fields, - locales, - parentIsLocalized: parentIsLocalized || field.localized, - valueFrom: valueFrom?.[field.name]?.[locale], - valueTo: valueTo?.[field.name]?.[locale], - }) - }) - } else { - count += countChangedFields({ - config, - fields: field.fields, - locales, - parentIsLocalized: parentIsLocalized || field.localized, - valueFrom: valueFrom?.[field.name], - valueTo: valueTo?.[field.name], - }) - } - } else { - // Unnamed group field: data is NOT nested under `field.name` - count += countChangedFields({ - config, - fields: field.fields, - locales, - parentIsLocalized: parentIsLocalized || field.localized, - valueFrom, - valueTo, - }) - } - break - } - - // Each tab in a tabs field has nested fields. The fields data may be - // nested or not depending on the existence of a name property. - case 'tabs': { - field.tabs.forEach((tab) => { - if ('name' in tab && locales && tab.localized) { - // Named localized tab - locales.forEach((locale) => { - count += countChangedFields({ - config, - fields: tab.fields, - locales, - parentIsLocalized: parentIsLocalized || tab.localized, - valueFrom: valueFrom?.[tab.name]?.[locale], - valueTo: valueTo?.[tab.name]?.[locale], - }) - }) - } else if ('name' in tab) { - // Named tab - count += countChangedFields({ - config, - fields: tab.fields, - locales, - parentIsLocalized: parentIsLocalized || tab.localized, - valueFrom: valueFrom?.[tab.name], - valueTo: valueTo?.[tab.name], - }) - } else { - // Unnamed tab - count += countChangedFields({ - config, - fields: tab.fields, - locales, - parentIsLocalized: parentIsLocalized || tab.localized, - valueFrom, - valueTo, - }) - } - }) - break - } - - // UI fields don't have data and are not displayed in the version view - // so we can ignore them. - case 'ui': { - break - } - - default: { - const _exhaustiveCheck: never = fieldType - throw new Error(`Unexpected field.type in countChangedFields : ${String(fieldType)}`) - } - } - }) - - return count -} - -type countChangedFieldsInRowsArgs = { - config: ClientConfig - field: ArrayFieldClient | BlocksFieldClient - locales: string[] | undefined - parentIsLocalized: boolean - valueFromRows: unknown[] - valueToRows: unknown[] -} - -export function countChangedFieldsInRows({ - config, - field, - locales, - parentIsLocalized, - valueFromRows = [], - valueToRows = [], -}: countChangedFieldsInRowsArgs) { - let count = 0 - let i = 0 - - while (valueFromRows[i] || valueToRows[i]) { - const valueFromRow = valueFromRows?.[i] || {} - const valueToRow = valueToRows?.[i] || {} - - const { fields: rowFields } = getFieldsForRowComparison({ - baseVersionField: { type: 'text', fields: [], path: '', schemaPath: '' }, // Doesn't matter, as we don't need the versionFields output here - config, - field, - row: i, - valueFromRow, - valueToRow, - }) - - count += countChangedFields({ - config, - fields: rowFields, - locales, - parentIsLocalized: parentIsLocalized || field.localized, - valueFrom: valueFromRow, - valueTo: valueToRow, - }) - - i++ - } - return count -} +export { + countChangedFields, + countChangedFieldsInRows, +} from '@payloadcms/ui/views/Version/RenderFieldsToDiff/utilities/countChangedFields' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts b/packages/next/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts index fa2a0659b7d..3bc169dfed9 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts +++ b/packages/next/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts @@ -1,3 +1 @@ -export function fieldHasChanges(a: unknown, b: unknown) { - return JSON.stringify(a) !== JSON.stringify(b) -} +export { fieldHasChanges } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges' diff --git a/packages/next/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts b/packages/next/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts index 4ef258c097f..b0e47f1a605 100644 --- a/packages/next/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts +++ b/packages/next/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts @@ -1,89 +1 @@ -import type { - ArrayFieldClient, - BaseVersionField, - BlocksFieldClient, - ClientBlock, - ClientConfig, - ClientField, - VersionField, -} from 'payload' - -import { getUniqueListBy } from 'payload/shared' - -/** - * Get the fields for a row in an iterable field for comparison. - * - Array fields: the fields of the array field, because the fields are the same for each row. - * - Blocks fields: the union of fields from the comparison and version row, - * because the fields from the version and comparison rows may differ. - */ -export function getFieldsForRowComparison({ - baseVersionField, - config, - field, - row, - valueFromRow, - valueToRow, -}: { - baseVersionField: BaseVersionField - config: ClientConfig - field: ArrayFieldClient | BlocksFieldClient - row: number - valueFromRow: any - valueToRow: any -}): { fields: ClientField[]; versionFields: VersionField[] } { - let fields: ClientField[] = [] - let versionFields: VersionField[] = [] - - if (field.type === 'array' && 'fields' in field) { - fields = field.fields - versionFields = baseVersionField.rows?.length - ? baseVersionField.rows[row] - : baseVersionField.fields - } else if (field.type === 'blocks') { - if (valueToRow?.blockType === valueFromRow?.blockType) { - const matchedBlock: ClientBlock = - config?.blocksMap?.[valueToRow?.blockType] ?? - (((('blocks' in field || 'blockReferences' in field) && - (field.blockReferences ?? field.blocks)?.find( - (block) => typeof block !== 'string' && block.slug === valueToRow?.blockType, - )) || { - fields: [], - }) as ClientBlock) - - fields = matchedBlock.fields - versionFields = baseVersionField.rows?.length - ? baseVersionField.rows[row] - : baseVersionField.fields - } else { - const matchedVersionBlock = - config?.blocksMap?.[valueToRow?.blockType] ?? - (((('blocks' in field || 'blockReferences' in field) && - (field.blockReferences ?? field.blocks)?.find( - (block) => typeof block !== 'string' && block.slug === valueToRow?.blockType, - )) || { - fields: [], - }) as ClientBlock) - - const matchedComparisonBlock = - config?.blocksMap?.[valueFromRow?.blockType] ?? - (((('blocks' in field || 'blockReferences' in field) && - (field.blockReferences ?? field.blocks)?.find( - (block) => typeof block !== 'string' && block.slug === valueFromRow?.blockType, - )) || { - fields: [], - }) as ClientBlock) - - fields = getUniqueListBy( - [...matchedVersionBlock.fields, ...matchedComparisonBlock.fields], - 'name', - ) - - // buildVersionFields already merged the fields of the version and comparison rows together - versionFields = baseVersionField.rows?.length - ? baseVersionField.rows[row] - : baseVersionField.fields - } - } - - return { fields, versionFields } -} +export { getFieldsForRowComparison } from '@payloadcms/ui/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison' diff --git a/packages/next/src/views/Version/Restore/index.tsx b/packages/next/src/views/Version/Restore/index.tsx index 547b341a2de..3971651f6fe 100644 --- a/packages/next/src/views/Version/Restore/index.tsx +++ b/packages/next/src/views/Version/Restore/index.tsx @@ -10,11 +10,11 @@ import { toast, useConfig, useModal, + useRouter, useRouteTransition, useTranslation, } from '@payloadcms/ui' import { requests } from '@payloadcms/ui/shared' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import './index.scss' diff --git a/packages/next/src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx b/packages/next/src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx index 800360fc4ea..a24fb0466cc 100644 --- a/packages/next/src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx +++ b/packages/next/src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx @@ -1,45 +1 @@ -'use client' -import { useConfig, useModal, useRouteTransition, useTranslation } from '@payloadcms/ui' -import { formatDate } from '@payloadcms/ui/shared' -import { usePathname, useRouter, useSearchParams } from 'next/navigation.js' - -import type { CreatedAtCellProps } from '../../../Versions/cells/CreatedAt/index.js' - -export const VersionDrawerCreatedAtCell: React.FC = ({ - rowData: { id, updatedAt } = {}, -}) => { - const { - config: { - admin: { dateFormat }, - }, - } = useConfig() - const { closeAllModals } = useModal() - const router = useRouter() - const pathname = usePathname() - const searchParams = useSearchParams() - const { startRouteTransition } = useRouteTransition() - - const { i18n } = useTranslation() - - return ( - - ) -} +export { VersionDrawerCreatedAtCell } from '@payloadcms/ui/views/Version/SelectComparison/VersionDrawer/CreatedAtCell' diff --git a/packages/next/src/views/Version/SelectComparison/VersionDrawer/index.tsx b/packages/next/src/views/Version/SelectComparison/VersionDrawer/index.tsx index c40b7abed95..92b660f4960 100644 --- a/packages/next/src/views/Version/SelectComparison/VersionDrawer/index.tsx +++ b/packages/next/src/views/Version/SelectComparison/VersionDrawer/index.tsx @@ -1,200 +1,7 @@ -'use client' -import { - Drawer, - LoadingOverlay, - toast, - useDocumentInfo, - useEditDepth, - useModal, - useServerFunctions, - useTranslation, -} from '@payloadcms/ui' -import { useSearchParams } from 'next/navigation.js' - -import './index.scss' - -import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react' - -export const baseClass = 'version-drawer' -export const formatVersionDrawerSlug = ({ - depth, - uuid, -}: { - depth: number - uuid: string // supply when creating a new document and no id is available -}) => `version-drawer_${depth}_${uuid}` - -export const VersionDrawerContent: React.FC<{ - collectionSlug?: string - docID?: number | string - drawerSlug: string - globalSlug?: string -}> = (props) => { - const { collectionSlug, docID, drawerSlug, globalSlug } = props - const { isTrashed } = useDocumentInfo() - const { closeModal } = useModal() - const searchParams = useSearchParams() - const prevSearchParams = useRef(searchParams) - - const { renderDocument } = useServerFunctions() - - const [DocumentView, setDocumentView] = useState(undefined) - const [isLoading, setIsLoading] = useState(true) - const hasRenderedDocument = useRef(false) - const { t } = useTranslation() - - const getDocumentView = useCallback( - (docID?: number | string) => { - const fetchDocumentView = async () => { - setIsLoading(true) - - try { - const isGlobal = Boolean(globalSlug) - const entitySlug = collectionSlug ?? globalSlug - - const result = await renderDocument({ - collectionSlug: entitySlug, - docID, - drawerSlug, - paramsOverride: { - segments: [ - isGlobal ? 'globals' : 'collections', - entitySlug, - ...(isTrashed ? ['trash'] : []), - isGlobal ? undefined : String(docID), - 'versions', - ].filter(Boolean), - }, - redirectAfterDelete: false, - redirectAfterDuplicate: false, - searchParams: Object.fromEntries(searchParams.entries()), - versions: { - disableGutter: true, - useVersionDrawerCreatedAtCell: true, - }, - }) - - if (result?.Document) { - setDocumentView(result.Document) - setIsLoading(false) - } - } catch (error) { - toast.error(error?.message || t('error:unspecific')) - closeModal(drawerSlug) - // toast.error(data?.errors?.[0].message || t('error:unspecific')) - } - } - - void fetchDocumentView() - }, - [ - closeModal, - collectionSlug, - drawerSlug, - globalSlug, - isTrashed, - renderDocument, - searchParams, - t, - ], - ) - - useEffect(() => { - if (!hasRenderedDocument.current || prevSearchParams.current !== searchParams) { - prevSearchParams.current = searchParams - getDocumentView(docID) - hasRenderedDocument.current = true - } - }, [docID, getDocumentView, searchParams]) - - if (isLoading) { - return - } - - return DocumentView -} -export const VersionDrawer: React.FC<{ - collectionSlug?: string - docID?: number | string - drawerSlug: string - globalSlug?: string -}> = (props) => { - const { collectionSlug, docID, drawerSlug, globalSlug } = props - const { t } = useTranslation() - - return ( - - - - ) -} - -export const useVersionDrawer = ({ - collectionSlug, - docID, - globalSlug, -}: { - collectionSlug?: string - docID?: number | string - globalSlug?: string -}) => { - const drawerDepth = useEditDepth() - const uuid = useId() - const { closeModal, modalState, openModal, toggleModal } = useModal() - const [isOpen, setIsOpen] = useState(false) - - const drawerSlug = formatVersionDrawerSlug({ - depth: drawerDepth, - uuid, - }) - - useEffect(() => { - setIsOpen(Boolean(modalState[drawerSlug]?.isOpen)) - }, [modalState, drawerSlug]) - - const toggleDrawer = useCallback(() => { - toggleModal(drawerSlug) - }, [toggleModal, drawerSlug]) - - const closeDrawer = useCallback(() => { - closeModal(drawerSlug) - }, [drawerSlug, closeModal]) - - const openDrawer = useCallback(() => { - openModal(drawerSlug) - }, [drawerSlug, openModal]) - - const MemoizedDrawer = useMemo(() => { - return () => ( - - ) - }, [collectionSlug, docID, drawerSlug, globalSlug]) - - return useMemo( - () => ({ - closeDrawer, - Drawer: MemoizedDrawer, - drawerDepth, - drawerSlug, - isDrawerOpen: isOpen, - openDrawer, - toggleDrawer, - }), - [MemoizedDrawer, closeDrawer, drawerDepth, drawerSlug, isOpen, openDrawer, toggleDrawer], - ) -} +export { + baseClass, + formatVersionDrawerSlug, + useVersionDrawer, + VersionDrawer, + VersionDrawerContent, +} from '@payloadcms/ui/views/Version/SelectComparison/VersionDrawer/index' diff --git a/packages/next/src/views/Version/SelectComparison/index.tsx b/packages/next/src/views/Version/SelectComparison/index.tsx index 2f1082ae9e7..71809657ba9 100644 --- a/packages/next/src/views/Version/SelectComparison/index.tsx +++ b/packages/next/src/views/Version/SelectComparison/index.tsx @@ -1,68 +1 @@ -'use client' - -import { fieldBaseClass, ReactSelect, useTranslation } from '@payloadcms/ui' -import React, { memo, useCallback, useMemo } from 'react' - -import type { CompareOption } from '../Default/types.js' - -import './index.scss' - -import type { Props } from './types.js' - -import { useVersionDrawer } from './VersionDrawer/index.js' - -const baseClass = 'compare-version' - -export const SelectComparison: React.FC = memo((props) => { - const { - collectionSlug, - docID, - globalSlug, - onChange: onChangeFromProps, - versionFromID, - versionFromOptions, - } = props - const { t } = useTranslation() - - const { Drawer, openDrawer } = useVersionDrawer({ collectionSlug, docID, globalSlug }) - - const options = useMemo(() => { - return [ - ...versionFromOptions, - { - label: {t('version:moreVersions')}, - value: 'more', - }, - ] - }, [t, versionFromOptions]) - - const currentOption = useMemo( - () => versionFromOptions.find((option) => option.value === versionFromID), - [versionFromOptions, versionFromID], - ) - - const onChange = useCallback( - (val: CompareOption) => { - if (val.value === 'more') { - openDrawer() - return - } - onChangeFromProps(val) - }, - [onChangeFromProps, openDrawer], - ) - - return ( -
- - -
- ) -}) +export { SelectComparison } from '@payloadcms/ui/views/Version/SelectComparison/index' diff --git a/packages/next/src/views/Version/SelectComparison/types.ts b/packages/next/src/views/Version/SelectComparison/types.ts index 703b73b12c4..dc51701a923 100644 --- a/packages/next/src/views/Version/SelectComparison/types.ts +++ b/packages/next/src/views/Version/SelectComparison/types.ts @@ -1,30 +1,5 @@ -import type { PaginatedDocs, SanitizedCollectionConfig } from 'payload' - -import type { CompareOption } from '../Default/types.js' - -export type Props = { - collectionSlug?: string - docID?: number | string - globalSlug?: string - onChange: (val: CompareOption) => void - versionFromID?: string - versionFromOptions: CompareOption[] -} - -type CLEAR = { - required: boolean - type: 'CLEAR' -} - -type ADD = { - collection: SanitizedCollectionConfig - data: PaginatedDocs - type: 'ADD' -} - -export type Action = ADD | CLEAR - -export type ValueWithRelation = { - relationTo: string - value: string -} +export type { + Action, + Props, + ValueWithRelation, +} from '@payloadcms/ui/views/Version/SelectComparison/types' diff --git a/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx b/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx index 50674b82aae..cc41bfde0fd 100644 --- a/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx +++ b/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx @@ -1,121 +1 @@ -'use client' - -import type { TypeWithVersion } from 'payload' - -import { Pill, useConfig, useLocale, useTranslation } from '@payloadcms/ui' -import { formatDate } from '@payloadcms/ui/shared' -import React from 'react' - -import './index.scss' -import { getVersionLabel } from './getVersionLabel.js' - -const baseClass = 'version-pill-label' - -const renderPill = (label: React.ReactNode, pillStyle: Parameters[0]['pillStyle']) => { - return ( - - {label} - - ) -} - -export const VersionPillLabel: React.FC<{ - currentlyPublishedVersion?: TypeWithVersion - disableDate?: boolean - - doc: { - [key: string]: unknown - id: number | string - publishedLocale?: string - updatedAt?: string - version: { - [key: string]: unknown - _status: 'draft' | 'published' - updatedAt: string - } - } - /** - * By default, the date is displayed first, followed by the version label. - * @default false - */ - labelFirst?: boolean - labelOverride?: React.ReactNode - /** - * @default 'pill' - */ - labelStyle?: 'pill' | 'text' - labelSuffix?: React.ReactNode - latestDraftVersion?: TypeWithVersion -}> = ({ - currentlyPublishedVersion, - disableDate = false, - doc, - labelFirst = false, - labelOverride, - labelStyle = 'pill', - labelSuffix, - latestDraftVersion, -}) => { - const { - config: { - admin: { dateFormat }, - localization, - }, - } = useConfig() - const { i18n, t } = useTranslation() - const { code: currentLocale } = useLocale() - - const { label, pillStyle } = getVersionLabel({ - currentLocale, - currentlyPublishedVersion, - latestDraftVersion, - t, - version: doc, - }) - const labelText: React.ReactNode = ( - - {labelOverride || label} - {labelSuffix} - - ) - - const showDate = !disableDate && doc.updatedAt - const formattedDate = showDate - ? formatDate({ date: doc.updatedAt, i18n, pattern: dateFormat }) - : null - - const localeCode = Array.isArray(doc.publishedLocale) - ? doc.publishedLocale[0] - : doc.publishedLocale - - const locale = - localization && localization?.locales - ? localization.locales.find((loc) => loc.code === localeCode) - : null - const localeLabel = locale ? locale?.label?.[i18n?.language] || locale?.label : null - - return ( -
- {labelFirst ? ( - - {labelStyle === 'pill' ? ( - renderPill(labelText, pillStyle) - ) : ( - {labelText} - )} - {showDate && {formattedDate}} - - ) : ( - - {showDate && {formattedDate}} - {labelStyle === 'pill' ? ( - renderPill(labelText, pillStyle) - ) : ( - {labelText} - )} - - )} - {localeLabel && {localeLabel}} -
- ) -} +export { VersionPillLabel } from '@payloadcms/ui/views/Version/VersionPillLabel/VersionPillLabel' diff --git a/packages/next/src/views/Version/VersionPillLabel/getVersionLabel.ts b/packages/next/src/views/Version/VersionPillLabel/getVersionLabel.ts index d35ebc303b8..1f7eac9d60e 100644 --- a/packages/next/src/views/Version/VersionPillLabel/getVersionLabel.ts +++ b/packages/next/src/views/Version/VersionPillLabel/getVersionLabel.ts @@ -1,85 +1 @@ -import type { TFunction } from '@payloadcms/translations' -import type { Pill } from '@payloadcms/ui' - -type Args = { - currentLocale?: string - currentlyPublishedVersion?: { - id: number | string - publishedLocale?: string - updatedAt: string - version: { - updatedAt: string - } - } - latestDraftVersion?: { - id: number | string - updatedAt: string - } - t: TFunction - version: { - id: number | string - publishedLocale?: string - version: { _status?: 'draft' | 'published'; updatedAt: string } - } -} - -/** - * Gets the appropriate version label and version pill styling - * given existing versions and the current version status. - */ -export function getVersionLabel({ - currentLocale, - currentlyPublishedVersion, - latestDraftVersion, - t, - version, -}: Args): { - label: string - name: 'currentDraft' | 'currentlyPublished' | 'draft' | 'previouslyPublished' | 'published' - pillStyle: Parameters[0]['pillStyle'] -} { - const status = version.version._status - - if (status === 'draft') { - const publishedNewerThanDraft = - currentlyPublishedVersion?.updatedAt > latestDraftVersion?.updatedAt - - if (publishedNewerThanDraft) { - return { - name: 'draft', - label: t('version:draft'), - pillStyle: 'light', - } - } - - const isCurrentDraft = version.id === latestDraftVersion?.id - - return { - name: isCurrentDraft ? 'currentDraft' : 'draft', - label: isCurrentDraft ? t('version:currentDraft') : t('version:draft'), - pillStyle: 'light', - } - } - - const publishedInAnotherLocale = - status === 'published' && version.publishedLocale && currentLocale !== version.publishedLocale - - if (publishedInAnotherLocale) { - return { - name: 'currentDraft', - label: t('version:currentDraft'), - pillStyle: 'light', - } - } - - const isCurrentlyPublished = - currentlyPublishedVersion && version.id === currentlyPublishedVersion.id - - return { - name: isCurrentlyPublished ? 'currentlyPublished' : 'previouslyPublished', - label: isCurrentlyPublished - ? t('version:currentlyPublished') - : t('version:previouslyPublished'), - pillStyle: isCurrentlyPublished ? 'success' : 'light', - } -} +export { getVersionLabel } from '@payloadcms/ui/views/Version/VersionPillLabel/getVersionLabel' diff --git a/packages/next/src/views/Version/fetchVersions.ts b/packages/next/src/views/Version/fetchVersions.ts index 858f40f3964..7048cdd0ac8 100644 --- a/packages/next/src/views/Version/fetchVersions.ts +++ b/packages/next/src/views/Version/fetchVersions.ts @@ -1,206 +1,5 @@ -import { - logError, - type PaginatedDocs, - type PayloadRequest, - type SelectType, - type Sort, - type TypedUser, - type TypeWithVersion, - type Where, -} from 'payload' - -export const fetchVersion = async ({ - id, - collectionSlug, - depth, - globalSlug, - locale, - overrideAccess, - req, - select, - user, -}: { - collectionSlug?: string - depth?: number - globalSlug?: string - id: number | string - locale?: 'all' | ({} & string) - overrideAccess?: boolean - req: PayloadRequest - select?: SelectType - user?: TypedUser -}): Promise> => { - try { - if (collectionSlug) { - return (await req.payload.findVersionByID({ - id: String(id), - collection: collectionSlug, - depth, - locale, - overrideAccess, - req, - select, - user, - })) as TypeWithVersion - } else if (globalSlug) { - return (await req.payload.findGlobalVersionByID({ - id: String(id), - slug: globalSlug, - depth, - locale, - overrideAccess, - req, - select, - user, - })) as TypeWithVersion - } - } catch (err) { - logError({ err, payload: req.payload }) - return null - } -} - -export const fetchVersions = async ({ - collectionSlug, - depth, - draft, - globalSlug, - limit, - locale, - overrideAccess, - page, - parentID, - req, - select, - sort, - user, - where: whereFromArgs, -}: { - collectionSlug?: string - depth?: number - draft?: boolean - globalSlug?: string - limit?: number - locale?: 'all' | ({} & string) - overrideAccess?: boolean - page?: number - parentID?: number | string - req: PayloadRequest - select?: SelectType - sort?: Sort - user?: TypedUser - where?: Where -}): Promise>> => { - const where: Where = { and: [...(whereFromArgs ? [whereFromArgs] : [])] } - - try { - if (collectionSlug) { - if (parentID) { - where.and.push({ - parent: { - equals: parentID, - }, - }) - } - return (await req.payload.findVersions({ - collection: collectionSlug, - depth, - draft, - limit, - locale, - overrideAccess, - page, - req, - select, - sort, - user, - where, - })) as PaginatedDocs> - } else if (globalSlug) { - return (await req.payload.findGlobalVersions({ - slug: globalSlug, - depth, - limit, - locale, - overrideAccess, - page, - req, - select, - sort, - user, - where, - })) as PaginatedDocs> - } - } catch (err) { - logError({ err, payload: req.payload }) - - return null - } -} - -export const fetchLatestVersion = async ({ - collectionSlug, - depth, - globalSlug, - locale, - overrideAccess, - parentID, - req, - select, - status, - user, - where, -}: { - collectionSlug?: string - depth?: number - globalSlug?: string - locale?: 'all' | ({} & string) - overrideAccess?: boolean - parentID?: number | string - req: PayloadRequest - select?: SelectType - status: 'draft' | 'published' - user?: TypedUser - where?: Where -}): Promise> => { - // Get the entity config to check if drafts are enabled - const entityConfig = collectionSlug - ? req.payload.collections[collectionSlug]?.config - : globalSlug - ? req.payload.globals[globalSlug]?.config - : undefined - - // Only query by _status if drafts are enabled (since _status field only exists with drafts) - const draftsEnabled = entityConfig?.versions?.drafts - - const and: Where[] = [ - ...(draftsEnabled - ? [ - { - 'version._status': { - equals: status, - }, - }, - ] - : []), - ...(where ? [where] : []), - ] - - const latest = await fetchVersions({ - collectionSlug, - depth, - draft: true, - globalSlug, - limit: 1, - locale, - overrideAccess, - parentID, - req, - select, - sort: '-updatedAt', - user, - where: { and }, - }) - - return latest?.docs?.length ? (latest.docs[0] as TypeWithVersion) : null -} +export { + fetchLatestVersion, + fetchVersion, + fetchVersions, +} from '@payloadcms/ui/views/Version/fetchVersions' diff --git a/packages/next/src/views/Version/index.tsx b/packages/next/src/views/Version/index.tsx index 2266821c596..7c912c15642 100644 --- a/packages/next/src/views/Version/index.tsx +++ b/packages/next/src/views/Version/index.tsx @@ -1,445 +1 @@ -import type { - DocumentViewServerProps, - Locale, - SanitizedCollectionPermission, - SanitizedGlobalPermission, - TypeWithVersion, -} from 'payload' - -import { formatDate } from '@payloadcms/ui/shared' -import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig' -import { getClientSchemaMap } from '@payloadcms/ui/utilities/getClientSchemaMap' -import { getSchemaMap } from '@payloadcms/ui/utilities/getSchemaMap' -import { notFound } from 'next/navigation.js' -import { hasDraftsEnabled } from 'payload/shared' -import React from 'react' - -import type { CompareOption } from './Default/types.js' - -import { DefaultVersionView } from './Default/index.js' -import { fetchLatestVersion, fetchVersion, fetchVersions } from './fetchVersions.js' -import { RenderDiff } from './RenderFieldsToDiff/index.js' -import { getVersionLabel } from './VersionPillLabel/getVersionLabel.js' -import { VersionPillLabel } from './VersionPillLabel/VersionPillLabel.js' - -export async function VersionView(props: DocumentViewServerProps) { - const { hasPublishedDoc, i18n, initPageResult, routeSegments, searchParams } = props - - const { - collectionConfig, - docID: id, - globalConfig, - permissions, - req, - req: { payload, payload: { config, config: { localization } } = {}, user } = {}, - } = initPageResult - - const versionToID = routeSegments[routeSegments.length - 1] - - const collectionSlug = collectionConfig?.slug - const globalSlug = globalConfig?.slug - - const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig) - - // Resolve user's current locale for version label comparison (not 'all') - const userLocale = - (searchParams.locale as string) || - (req.locale !== 'all' ? req.locale : localization && localization.defaultLocale) - - const localeCodesFromParams = searchParams.localeCodes - ? JSON.parse(searchParams.localeCodes as string) - : null - - const versionFromIDFromParams = searchParams.versionFrom as string - - const modifiedOnly: boolean = searchParams.modifiedOnly === 'false' ? false : true - - const docPermissions: SanitizedCollectionPermission | SanitizedGlobalPermission = collectionSlug - ? permissions.collections[collectionSlug] - : permissions.globals[globalSlug] - - const versionTo = await fetchVersion<{ - _status?: string - }>({ - id: versionToID, - collectionSlug, - depth: 1, - globalSlug, - locale: 'all', - overrideAccess: false, - req, - user, - }) - - if (!versionTo) { - return notFound() - } - - const [ - previousVersionResult, - versionFromResult, - currentlyPublishedVersion, - latestDraftVersion, - previousPublishedVersionResult, - ] = await Promise.all([ - // Previous version (the one before the versionTo) - fetchVersions({ - collectionSlug, - // If versionFromIDFromParams is provided, the previous version is only used in the version comparison dropdown => depth 0 is enough. - // If it's not provided, this is used as `versionFrom` in the comparison, which expects populated data => depth 1 is needed. - depth: versionFromIDFromParams ? 0 : 1, - draft: true, - globalSlug, - limit: 1, - locale: 'all', - overrideAccess: false, - parentID: id, - req, - sort: '-updatedAt', - user, - where: { - and: [ - { - updatedAt: { - less_than: versionTo.updatedAt, - }, - }, - ], - }, - }), - // Version from ID from params - (versionFromIDFromParams - ? fetchVersion({ - id: versionFromIDFromParams, - collectionSlug, - depth: 1, - globalSlug, - locale: 'all', - overrideAccess: false, - req, - user, - }) - : Promise.resolve(null)) as Promise>, - // Currently published version - do note: currently published != latest published, as an unpublished version can be the latest published - hasPublishedDoc - ? fetchLatestVersion({ - collectionSlug, - depth: 0, - globalSlug, - locale: req.locale, - overrideAccess: false, - parentID: id, - req, - status: 'published', - user, - }) - : Promise.resolve(null), - // Latest draft version - draftsEnabled - ? fetchLatestVersion({ - collectionSlug, - depth: 0, - globalSlug, - locale: 'all', - overrideAccess: false, - parentID: id, - req, - status: 'draft', - user, - }) - : Promise.resolve(null), - // Previous published version - // Only query for published versions if drafts are enabled (since _status field only exists with drafts) - draftsEnabled - ? fetchVersions({ - collectionSlug, - depth: 0, - draft: true, - globalSlug, - limit: 1, - locale: 'all', - overrideAccess: false, - parentID: id, - req, - sort: '-updatedAt', - user, - where: { - and: [ - { - updatedAt: { - less_than: versionTo.updatedAt, - }, - }, - { - 'version._status': { - equals: 'published', - }, - }, - ], - }, - }) - : Promise.resolve(null), - ]) - - const previousVersion: null | TypeWithVersion = previousVersionResult?.docs?.[0] ?? null - - const versionFrom = - versionFromResult || - // By default, we'll compare the previous version. => versionFrom = version previous to versionTo - previousVersion - - // Previous published version before the versionTo - const previousPublishedVersion = previousPublishedVersionResult?.docs?.[0] ?? null - - let selectedLocales: string[] = [] - if (localization) { - let locales: Locale[] = [] - if (localeCodesFromParams) { - for (const code of localeCodesFromParams) { - const locale = localization.locales.find((locale) => locale.code === code) - if (!locale) { - continue - } - locales.push(locale) - } - } else { - locales = localization.locales - } - - if (localization.filterAvailableLocales) { - locales = (await localization.filterAvailableLocales({ locales, req })) || [] - } - - selectedLocales = locales.map((locale) => locale.code) - } - - const schemaMap = getSchemaMap({ - collectionSlug, - config, - globalSlug, - i18n, - }) - - const clientSchemaMap = getClientSchemaMap({ - collectionSlug, - config: getClientConfig({ - config: payload.config, - i18n, - importMap: payload.importMap, - user, - }), - globalSlug, - i18n, - payload, - schemaMap, - }) - const RenderedDiff = RenderDiff({ - clientSchemaMap, - customDiffComponents: {}, - entitySlug: collectionSlug || globalSlug, - fields: (collectionConfig || globalConfig)?.fields, - fieldsPermissions: docPermissions?.fields, - i18n, - modifiedOnly, - parentIndexPath: '', - parentIsLocalized: false, - parentPath: '', - parentSchemaPath: '', - req, - selectedLocales, - versionFromSiblingData: { - ...versionFrom?.version, - updatedAt: versionFrom?.updatedAt, - }, - versionToSiblingData: { - ...versionTo.version, - updatedAt: versionTo.updatedAt, - }, - }) - - const versionToCreatedAtFormatted = versionTo.updatedAt - ? formatDate({ - date: - typeof versionTo.updatedAt === 'string' - ? new Date(versionTo.updatedAt) - : (versionTo.updatedAt as Date), - i18n, - pattern: config.admin.dateFormat, - }) - : '' - - const formatPill = ({ - doc, - labelOverride, - labelStyle, - labelSuffix, - }: { - doc: TypeWithVersion - labelOverride?: string - labelStyle?: 'pill' | 'text' - labelSuffix?: React.ReactNode - }): React.ReactNode => { - return ( - - ) - } - - // SelectComparison Options: - // - // Previous version: always, unless doesn't exist. Can be the same as previously published - // Latest draft: only if no newer published exists (latestDraftVersion) - // Currently published: always, if exists - // Previously published: if there is a prior published version older than versionTo - // Specific Version: only if not already present under other label (= versionFrom) - - let versionFromOptions: { - doc: TypeWithVersion - labelOverride?: string - updatedAt: Date - value: string - }[] = [] - - // Previous version - if (previousVersion?.id) { - versionFromOptions.push({ - doc: previousVersion, - labelOverride: i18n.t('version:previousVersion'), - updatedAt: new Date(previousVersion.updatedAt), - value: previousVersion.id, - }) - } - - // Latest Draft - const publishedNewerThanDraft = - currentlyPublishedVersion?.updatedAt > latestDraftVersion?.updatedAt - if (latestDraftVersion && !publishedNewerThanDraft) { - versionFromOptions.push({ - doc: latestDraftVersion, - updatedAt: new Date(latestDraftVersion.updatedAt), - value: latestDraftVersion.id, - }) - } - - // Currently Published - if (currentlyPublishedVersion) { - versionFromOptions.push({ - doc: currentlyPublishedVersion, - updatedAt: new Date(currentlyPublishedVersion.updatedAt), - value: currentlyPublishedVersion.id, - }) - } - - // Previous Published - if (previousPublishedVersion && currentlyPublishedVersion?.id !== previousPublishedVersion.id) { - versionFromOptions.push({ - doc: previousPublishedVersion, - labelOverride: i18n.t('version:previouslyPublished'), - updatedAt: new Date(previousPublishedVersion.updatedAt), - value: previousPublishedVersion.id, - }) - } - - // Specific Version - if (versionFrom?.id && !versionFromOptions.some((option) => option.value === versionFrom.id)) { - // Only add "specific version" if it is not already in the options - versionFromOptions.push({ - doc: versionFrom, - labelOverride: i18n.t('version:specificVersion'), - updatedAt: new Date(versionFrom.updatedAt), - value: versionFrom.id, - }) - } - - versionFromOptions = versionFromOptions.sort((a, b) => { - // Sort by updatedAt, newest first - if (a && b) { - return b.updatedAt.getTime() - a.updatedAt.getTime() - } - return 0 - }) - - const versionToIsVersionFrom = versionFrom?.id === versionTo.id - - const versionFromComparisonOptions: CompareOption[] = [] - - for (const option of versionFromOptions) { - const isVersionTo = option.value === versionTo.id - - if (isVersionTo && !versionToIsVersionFrom) { - // Don't offer selecting a versionFrom that is the same as versionTo, unless it's already selected - continue - } - - const alreadyAdded = versionFromComparisonOptions.some( - (existingOption) => existingOption.value === option.value, - ) - if (alreadyAdded) { - continue - } - - const otherOptionsWithSameID = versionFromOptions.filter( - (existingOption) => existingOption.value === option.value && existingOption !== option, - ) - - // Merge options with same ID to the same option - const labelSuffix = otherOptionsWithSameID?.length ? ( - - {' ('} - {otherOptionsWithSameID.map((optionWithSameID, index) => { - const label = - optionWithSameID.labelOverride || - getVersionLabel({ - currentLocale: userLocale, - currentlyPublishedVersion, - latestDraftVersion, - t: i18n.t, - version: optionWithSameID.doc, - }).label - - return ( - - {index > 0 ? ', ' : ''} - {label} - - ) - })} - {')'} - - ) : undefined - - versionFromComparisonOptions.push({ - label: formatPill({ - doc: option.doc, - labelOverride: option.labelOverride, - labelSuffix, - }), - value: option.value, - }) - } - - return ( - - ) -} +export { VersionView } from '@payloadcms/ui/views/Version' diff --git a/packages/next/src/views/Versions/buildColumns.tsx b/packages/next/src/views/Versions/buildColumns.tsx index 28eccead80a..244358b8332 100644 --- a/packages/next/src/views/Versions/buildColumns.tsx +++ b/packages/next/src/views/Versions/buildColumns.tsx @@ -1,105 +1 @@ -import type { I18n } from '@payloadcms/translations' -import type { - Column, - PaginatedDocs, - SanitizedCollectionConfig, - SanitizedGlobalConfig, - TypeWithVersion, -} from 'payload' - -import { SortColumn } from '@payloadcms/ui' -import { hasDraftsEnabled } from 'payload/shared' -import React from 'react' - -import { AutosaveCell } from './cells/AutosaveCell/index.js' -import { CreatedAtCell, type CreatedAtCellProps } from './cells/CreatedAt/index.js' -import { IDCell } from './cells/ID/index.js' - -export const buildVersionColumns = ({ - collectionConfig, - CreatedAtCellOverride, - currentlyPublishedVersion, - docID, - docs, - globalConfig, - i18n: { t }, - isTrashed, - latestDraftVersion, -}: { - collectionConfig?: SanitizedCollectionConfig - CreatedAtCellOverride?: React.ComponentType - currentlyPublishedVersion?: TypeWithVersion - docID?: number | string - docs: PaginatedDocs>['docs'] - globalConfig?: SanitizedGlobalConfig - i18n: I18n - isTrashed?: boolean - latestDraftVersion?: TypeWithVersion -}): Column[] => { - const entityConfig = collectionConfig || globalConfig - - const CreatedAtCellComponent = CreatedAtCellOverride ?? CreatedAtCell - - const columns: Column[] = [ - { - accessor: 'updatedAt', - active: true, - field: { - name: '', - type: 'date', - }, - Heading: , - renderedCells: docs.map((doc, i) => { - return ( - - ) - }), - }, - { - accessor: 'id', - active: true, - field: { - name: '', - type: 'text', - }, - Heading: , - renderedCells: docs.map((doc, i) => { - return - }), - }, - ] - - if (hasDraftsEnabled(entityConfig)) { - columns.push({ - accessor: '_status', - active: true, - field: { - name: '', - type: 'checkbox', - }, - Heading: , - renderedCells: docs.map((doc, i) => { - return ( - - ) - }), - }) - } - - return columns -} +export { buildVersionColumns } from '@payloadcms/ui/views/Versions/buildColumns' diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx b/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx index e9486595b20..b3a6b703354 100644 --- a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx +++ b/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx @@ -1,48 +1 @@ -'use client' -import type { TypeWithVersion } from 'payload' - -import { Pill, useTranslation } from '@payloadcms/ui' -import React from 'react' - -import { VersionPillLabel } from '../../../Version/VersionPillLabel/VersionPillLabel.js' -import './index.scss' - -const baseClass = 'autosave-cell' - -type AutosaveCellProps = { - currentlyPublishedVersion?: TypeWithVersion - latestDraftVersion?: TypeWithVersion - rowData: { - autosave?: boolean - id: number | string - publishedLocale?: string - updatedAt?: string - version: { - [key: string]: unknown - _status: 'draft' | 'published' - updatedAt: string - } - } -} - -export const AutosaveCell: React.FC = ({ - currentlyPublishedVersion, - latestDraftVersion, - rowData, -}) => { - const { t } = useTranslation() - - return ( -
- {rowData?.autosave && {t('version:autosave')}} - -
- ) -} +export { AutosaveCell } from '@payloadcms/ui/views/Versions/cells/AutosaveCell/index' diff --git a/packages/next/src/views/Versions/cells/CreatedAt/index.tsx b/packages/next/src/views/Versions/cells/CreatedAt/index.tsx index 15abcd988fe..d55fb64e5a0 100644 --- a/packages/next/src/views/Versions/cells/CreatedAt/index.tsx +++ b/packages/next/src/views/Versions/cells/CreatedAt/index.tsx @@ -1,57 +1,2 @@ -'use client' -import { Link, useConfig, useTranslation } from '@payloadcms/ui' -import { formatDate } from '@payloadcms/ui/shared' -import { formatAdminURL } from 'payload/shared' -import React from 'react' - -export type CreatedAtCellProps = { - collectionSlug?: string - docID?: number | string - globalSlug?: string - isTrashed?: boolean - rowData?: { - id: number | string - updatedAt: Date | number | string - } -} - -export const CreatedAtCell: React.FC = ({ - collectionSlug, - docID, - globalSlug, - isTrashed, - rowData: { id, updatedAt } = {}, -}) => { - const { - config: { - admin: { dateFormat }, - routes: { admin: adminRoute }, - }, - } = useConfig() - - const { i18n } = useTranslation() - - const trashedDocPrefix = isTrashed ? 'trash/' : '' - - let to: string - - if (collectionSlug) { - to = formatAdminURL({ - adminRoute, - path: `/collections/${collectionSlug}/${trashedDocPrefix}${docID}/versions/${id}`, - }) - } - - if (globalSlug) { - to = formatAdminURL({ - adminRoute, - path: `/globals/${globalSlug}/versions/${id}`, - }) - } - - return ( - - {formatDate({ date: updatedAt, i18n, pattern: dateFormat })} - - ) -} +export type { CreatedAtCellProps } from '@payloadcms/ui/views/Versions/cells/CreatedAt/index' +export { CreatedAtCell } from '@payloadcms/ui/views/Versions/cells/CreatedAt/index' diff --git a/packages/next/src/views/Versions/cells/ID/index.tsx b/packages/next/src/views/Versions/cells/ID/index.tsx index 7b3853fc16f..e854c69f575 100644 --- a/packages/next/src/views/Versions/cells/ID/index.tsx +++ b/packages/next/src/views/Versions/cells/ID/index.tsx @@ -1,6 +1 @@ -'use client' -import React, { Fragment } from 'react' - -export function IDCell({ id }: { id: number | string }) { - return {id} -} +export { IDCell } from '@payloadcms/ui/views/Versions/cells/ID/index' diff --git a/packages/next/src/views/Versions/index.client.tsx b/packages/next/src/views/Versions/index.client.tsx index a3fa76d11d9..4e503f9bdae 100644 --- a/packages/next/src/views/Versions/index.client.tsx +++ b/packages/next/src/views/Versions/index.client.tsx @@ -1,76 +1 @@ -'use client' -import type { Column, SanitizedCollectionConfig } from 'payload' - -import { - LoadingOverlayToggle, - Pagination, - PerPage, - Table, - useListQuery, - useTranslation, -} from '@payloadcms/ui' -import { useSearchParams } from 'next/navigation.js' -import React from 'react' - -export const VersionsViewClient: React.FC<{ - readonly baseClass: string - readonly columns: Column[] - readonly fetchURL: string - readonly paginationLimits?: SanitizedCollectionConfig['admin']['pagination']['limits'] -}> = (props) => { - const { baseClass, columns, paginationLimits } = props - - const { data, handlePageChange, handlePerPageChange } = useListQuery() - - const searchParams = useSearchParams() - const limit = searchParams.get('limit') - - const { i18n } = useTranslation() - - const versionCount = data?.totalDocs || 0 - - return ( - - - {versionCount === 0 && ( -
- {i18n.t('version:noFurtherVersionsFound')} -
- )} - {versionCount > 0 && ( - - -
- - {data?.totalDocs > 0 && ( - -
- {data.page * data.limit - (data.limit - 1)}- - {data.totalPages > 1 && data.totalPages !== data.page - ? data.limit * data.page - : data.totalDocs}{' '} - {i18n.t('general:of')} {data.totalDocs} -
- - - )} -
- - )} - - ) -} +export { VersionsViewClient } from '@payloadcms/ui/views/Versions/index.client' diff --git a/packages/next/src/views/Versions/index.tsx b/packages/next/src/views/Versions/index.tsx index 6457373129b..a0158d980fd 100644 --- a/packages/next/src/views/Versions/index.tsx +++ b/packages/next/src/views/Versions/index.tsx @@ -1,200 +1 @@ -import { Gutter, ListQueryProvider, SetDocumentStepNav } from '@payloadcms/ui' -import { notFound } from 'next/navigation.js' -import { type DocumentViewServerProps, type PaginatedDocs, type Where } from 'payload' -import { formatAdminURL, hasDraftsEnabled, isNumber } from 'payload/shared' -import React from 'react' - -import { fetchLatestVersion, fetchVersions } from '../Version/fetchVersions.js' -import { VersionDrawerCreatedAtCell } from '../Version/SelectComparison/VersionDrawer/CreatedAtCell.js' -import { buildVersionColumns } from './buildColumns.js' -import { VersionsViewClient } from './index.client.js' -import './index.scss' - -const baseClass = 'versions' - -export async function VersionsView(props: DocumentViewServerProps) { - const { - hasPublishedDoc, - initPageResult: { - collectionConfig, - docID: id, - globalConfig, - req, - req: { - i18n, - payload: { config }, - t, - user, - }, - }, - routeSegments: segments, - searchParams: { limit, page, sort }, - versions: { disableGutter = false, useVersionDrawerCreatedAtCell = false } = {}, - } = props - - const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig) - - const collectionSlug = collectionConfig?.slug - const globalSlug = globalConfig?.slug - - const isTrashed = segments[2] === 'trash' - - const { - localization, - routes: { api: apiRoute }, - serverURL, - } = config - - const whereQuery: { - and: Array<{ parent?: { equals: number | string }; snapshot?: { not_equals: boolean } }> - } & Where = { - and: [], - } - if (localization && draftsEnabled) { - whereQuery.and.push({ - snapshot: { - not_equals: true, - }, - }) - } - - const defaultLimit = collectionSlug ? collectionConfig?.admin?.pagination?.defaultLimit : 10 - - const limitToUse = isNumber(limit) ? Number(limit) : defaultLimit - - const versionsData: PaginatedDocs = await fetchVersions({ - collectionSlug, - depth: 0, - globalSlug, - limit: limitToUse, - locale: req.locale, - overrideAccess: false, - page: page ? parseInt(page.toString(), 10) : undefined, - parentID: id, - req, - sort: sort as string, - user, - where: whereQuery, - }) - - if (!versionsData) { - return notFound() - } - - const [currentlyPublishedVersion, latestDraftVersion] = await Promise.all([ - hasPublishedDoc - ? fetchLatestVersion({ - collectionSlug, - depth: 0, - globalSlug, - locale: req.locale, - overrideAccess: false, - parentID: id, - req, - select: { - id: true, - updatedAt: true, - version: { - _status: true, - updatedAt: true, - }, - }, - status: 'published', - user, - where: localization - ? { - snapshot: { - not_equals: true, - }, - } - : undefined, - }) - : Promise.resolve(null), - draftsEnabled - ? fetchLatestVersion({ - collectionSlug, - depth: 0, - globalSlug, - locale: req.locale, - overrideAccess: false, - parentID: id, - req, - select: { - id: true, - updatedAt: true, - version: { - _status: true, - updatedAt: true, - }, - }, - status: 'draft', - user, - where: localization - ? { - snapshot: { - not_equals: true, - }, - } - : undefined, - }) - : Promise.resolve(null), - ]) - - const fetchURL = formatAdminURL({ - apiRoute, - path: collectionSlug ? `/${collectionSlug}/versions` : `/${globalSlug}/versions`, - }) - - const columns = buildVersionColumns({ - collectionConfig, - CreatedAtCellOverride: useVersionDrawerCreatedAtCell ? VersionDrawerCreatedAtCell : undefined, - currentlyPublishedVersion, - docID: id, - docs: versionsData?.docs, - globalConfig, - i18n, - isTrashed, - latestDraftVersion, - }) - - const pluralLabel = - typeof collectionConfig?.labels?.plural === 'function' - ? collectionConfig.labels.plural({ i18n, t }) - : (collectionConfig?.labels?.plural ?? globalConfig?.label) - - const GutterComponent = disableGutter ? React.Fragment : Gutter - - return ( - - -
- - - - - -
- - ) -} +export { VersionsView } from '@payloadcms/ui/views/Versions' diff --git a/packages/payload/package.json b/packages/payload/package.json index fb72419fa81..14b4a463509 100644 --- a/packages/payload/package.json +++ b/packages/payload/package.json @@ -99,7 +99,6 @@ "pretest": "pnpm build" }, "dependencies": { - "@next/env": "^15.1.5", "@payloadcms/translations": "workspace:*", "@types/busboy": "1.5.4", "ajv": "8.17.1", @@ -110,6 +109,8 @@ "croner": "9.1.0", "dataloader": "2.2.3", "deepmerge": "4.3.1", + "dotenv": "16.4.7", + "dotenv-expand": "12.0.1", "file-type": "19.3.0", "get-tsconfig": "4.8.1", "http-status": "2.1.0", diff --git a/packages/payload/src/admin/adapter/createAdminAdapter.ts b/packages/payload/src/admin/adapter/createAdminAdapter.ts new file mode 100644 index 00000000000..706e1d1c760 --- /dev/null +++ b/packages/payload/src/admin/adapter/createAdminAdapter.ts @@ -0,0 +1,5 @@ +import type { BaseAdminAdapter } from './types.js' + +export function createAdminAdapter(args: T): T { + return args +} diff --git a/packages/payload/src/admin/adapter/index.ts b/packages/payload/src/admin/adapter/index.ts new file mode 100644 index 00000000000..25c0d690a26 --- /dev/null +++ b/packages/payload/src/admin/adapter/index.ts @@ -0,0 +1,8 @@ +export { createAdminAdapter } from './createAdminAdapter.js' +export type { + AdminAdapterResult, + BaseAdminAdapter, + CookieOptions, + RouteHandler, + RouteHandlers, +} from './types.js' diff --git a/packages/payload/src/admin/adapter/types.ts b/packages/payload/src/admin/adapter/types.ts new file mode 100644 index 00000000000..585446051d4 --- /dev/null +++ b/packages/payload/src/admin/adapter/types.ts @@ -0,0 +1,62 @@ +import type React from 'react' + +import type { ImportMap } from '../../bin/generateImportMap/index.js' +import type { SanitizedConfig } from '../../config/types.js' +import type { Payload } from '../../types/index.js' +import type { InitReqResult, ServerFunctionHandler } from '../functions/index.js' + +export type CookieOptions = { + domain?: string + expires?: Date + httpOnly?: boolean + maxAge?: number + path?: string + sameSite?: 'lax' | 'none' | 'strict' + secure?: boolean +} + +export type RouteHandler = (request: Request) => Promise | Response + +export type RouteHandlers = { + DELETE?: RouteHandler + GET?: RouteHandler + PATCH?: RouteHandler + POST?: RouteHandler + PUT?: RouteHandler +} + +export interface BaseAdminAdapter { + /** Create route handlers for REST + GraphQL endpoints */ + createRouteHandlers: (config: SanitizedConfig) => RouteHandlers + /** Delete a cookie */ + deleteCookie: (name: string) => Promise | void + /** Destroy the adapter (cleanup) */ + destroy?: () => Promise | void + /** Generate metadata for the admin panel */ + generateMetadata?: (args: { config: SanitizedConfig }) => Promise> + /** Get a cookie value by name */ + getCookie: (name: string) => Promise | string | undefined + /** Handle server function dispatching */ + handleServerFunctions: ServerFunctionHandler + /** Initialize the request context, returning a PayloadRequest and related data */ + initReq: (args: { config: SanitizedConfig; importMap: ImportMap }) => Promise + /** Adapter name for identification */ + name: string + /** Server-side not found navigation — throws framework-specific error */ + notFound: () => never + /** The Payload instance, set after init */ + payload: Payload + /** Server-side redirect navigation — throws framework-specific error */ + redirect: (url: string) => never + /** Client-side router provider wrapping framework navigation hooks */ + RouterProvider: React.ComponentType<{ children: React.ReactNode }> + /** Set a cookie */ + setCookie: (name: string, value: string, options?: CookieOptions) => Promise | void +} + +export type AdminAdapterResult = { + /** Initialize the adapter, binding it to the Payload instance */ + init: (args: { payload: Payload }) => T + /** Adapter name for identification */ + name: string +} diff --git a/packages/payload/src/admin/functions/index.ts b/packages/payload/src/admin/functions/index.ts index 4cf9e54b44e..0e3c76d5986 100644 --- a/packages/payload/src/admin/functions/index.ts +++ b/packages/payload/src/admin/functions/index.ts @@ -28,6 +28,10 @@ export type InitReqResult = { export type DefaultServerFunctionArgs = { importMap: ImportMap + /** Framework-specific notFound callback, injected by the adapter's handleServerFunctions. */ + notFound?: () => never + /** Framework-specific redirect callback, injected by the adapter's handleServerFunctions. */ + redirect?: (url: string) => never } & Pick export type ServerFunctionArgs = { diff --git a/packages/payload/src/bin/loadEnv.ts b/packages/payload/src/bin/loadEnv.ts index a365783a521..3b2a58b3cd9 100644 --- a/packages/payload/src/bin/loadEnv.ts +++ b/packages/payload/src/bin/loadEnv.ts @@ -1,27 +1,63 @@ -import nextEnvImport from '@next/env' +import dotenvImport from 'dotenv' +import dotenvExpandImport from 'dotenv-expand' +import fs from 'fs' +import path from 'path' import { findUpSync } from '../utilities/findUp.js' -const { loadEnvConfig } = nextEnvImport + +const dotenvConfig = + 'config' in dotenvImport ? dotenvImport.config : (dotenvImport as any).default.config +const dotenvExpand = + 'expand' in dotenvExpandImport + ? dotenvExpandImport.expand + : (dotenvExpandImport as any).default.expand + +function getEnvFilenames(dev: boolean): string[] { + if (dev) { + return ['.env.development.local', '.env.local', '.env.development', '.env'] + } + return ['.env.production.local', '.env.local', '.env.production', '.env'] +} + +function loadEnvFromDir(dir: string, dev: boolean): boolean { + const filenames = getEnvFilenames(dev) + let loaded = false + + for (const filename of filenames) { + const filePath = path.resolve(dir, filename) + try { + fs.accessSync(filePath) + } catch { + continue + } + const env = dotenvConfig({ path: filePath }) + if (env.parsed) { + dotenvExpand(env) + loaded = true + } + } + + return loaded +} /** - * Try to find user's env files and load it. Uses the same algorithm next.js uses to parse env files, meaning this also supports .env.local, .env.development, .env.production, etc. + * Try to find user's env files and load them. Supports .env, .env.local, + * .env.development, .env.production (same priority as Next.js). */ -export function loadEnv(path?: string) { - if (path?.length) { - loadEnvConfig(path, true) +export function loadEnv(envPath?: string) { + if (envPath?.length) { + loadEnvFromDir(envPath, true) return } const dev = process.env.NODE_ENV !== 'production' - const { loadedEnvFiles } = loadEnvConfig(process.cwd(), dev) + const loaded = loadEnvFromDir(process.cwd(), dev) - if (!loadedEnvFiles?.length) { - // use findUp to find the env file. So, run loadEnvConfig for every directory upwards + if (!loaded) { findUpSync({ // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve condition: (dir) => { - const { loadedEnvFiles } = loadEnvConfig(dir, true) - if (loadedEnvFiles?.length) { + if (loadEnvFromDir(dir, true)) { return true } }, diff --git a/packages/payload/src/config/types.ts b/packages/payload/src/config/types.ts index e7fbbe4da86..f736c3587b5 100644 --- a/packages/payload/src/config/types.ts +++ b/packages/payload/src/config/types.ts @@ -10,12 +10,12 @@ import type { BusboyConfig } from 'busboy' import type GraphQL from 'graphql' import type { GraphQLFormattedError } from 'graphql' import type { JSONSchema4 } from 'json-schema' -import type { Metadata } from 'next' import type { DestinationStream, Level, LoggerOptions } from 'pino' import type React from 'react' import type { default as sharp } from 'sharp' import type { DeepRequired } from 'ts-essentials' +import type { AdminAdapterResult } from '../admin/adapter/types.js' import type { RichTextAdapterProvider } from '../admin/RichText.js' import type { DocumentSubViewTypes, @@ -207,6 +207,37 @@ export type OGImageConfig = { */ type DeepClone = T extends object ? { [K in keyof T]: DeepClone } : T +/** Subset of Next.js Metadata that Payload actually consumes. */ +export type PayloadMetadata = { + description?: null | string + icons?: + | { + apple?: PayloadMetadataIcon[] + icon?: PayloadMetadataIcon[] + shortcut?: PayloadMetadataIcon[] + } + | null + | PayloadMetadataIcon[] + keywords?: null | string | string[] + metadataBase?: null | URL + openGraph?: { + description?: string + images?: OGImageConfig[] + siteName?: string + title?: string + } | null + robots?: { follow?: boolean; index?: boolean } | null | string + title?: null | string +} + +type PayloadMetadataIcon = { + media?: string + rel?: string + sizes?: string + type?: string + url: string +} + export type MetaConfig = { /** * When `static`, a pre-made image will be used for all pages. @@ -220,7 +251,7 @@ export type MetaConfig = { * @example `" - Custom CMS"` */ titleSuffix?: string -} & DeepClone +} & DeepClone export type ServerOnlyLivePreviewProperties = keyof Pick @@ -818,6 +849,11 @@ export type SanitizedDashboardConfig = { export type Config = { /** Configure admin dashboard */ admin?: { + /** + * The admin adapter to use for framework-specific concerns (request handling, routing, cookies). + * Defaults to auto-detecting @payloadcms/next if installed. + */ + adapter?: AdminAdapterResult /** Automatically log in as a user */ autoLogin?: | { diff --git a/packages/payload/src/index.ts b/packages/payload/src/index.ts index 71dbb550232..b4bee32a85a 100644 --- a/packages/payload/src/index.ts +++ b/packages/payload/src/index.ts @@ -37,7 +37,8 @@ import { verifyEmailLocal, type Options as VerifyEmailOptions, } from './auth/operations/local/verifyEmail.js' -export type { FieldState } from './admin/forms/Form.js' +export { createAdminAdapter } from './admin/adapter/index.js' +import type { BaseAdminAdapter } from './admin/adapter/types.js' import type { InitOptions, SanitizedConfig } from './config/types.js' import type { BaseDatabaseAdapter, PaginatedDistinctDocs, PaginatedDocs } from './database/types.js' import type { InitializedEmailAdapter } from './email/types.js' @@ -119,6 +120,14 @@ import { updateGlobalLocal, type Options as UpdateGlobalOptions, } from './globals/operations/local/update.js' +export type { + AdminAdapterResult, + BaseAdminAdapter, + CookieOptions, + RouteHandler, + RouteHandlers, +} from './admin/adapter/index.js' +export type { FieldState } from './admin/forms/Form.js' export type * from './admin/types.js' export { EntityType } from './admin/views/dashboard.js' import type { SupportedLanguages } from '@payloadcms/translations' @@ -387,6 +396,8 @@ let checkedDependencies = false * @description Payload */ export class BasePayload { + adminAdapter?: BaseAdminAdapter + /** * @description Authorization and Authentication using headers and cookies to run auth user strategies * @returns permissions: Permissions @@ -401,8 +412,8 @@ export class BasePayload { blocks: Record = {} collections: Record = {} - config!: SanitizedConfig + /** * @description Performs count operation * @param options @@ -446,7 +457,6 @@ export class BasePayload { ): Promise> => { return createLocal(this, options) } - crons: Cron[] = [] db!: DatabaseAdapter @@ -881,6 +891,11 @@ export class BasePayload { this.db = this.config.db.init({ payload: this }) this.db.payload = this + if (this.config.admin?.adapter) { + this.adminAdapter = this.config.admin.adapter.init({ payload: this }) + this.adminAdapter.payload = this + } + this.kv = this.config.kv.init({ payload: this }) if (this.db?.init) { diff --git a/packages/payload/src/utilities/dynamicImport.ts b/packages/payload/src/utilities/dynamicImport.ts index 4235fbc8bc9..470c9a8f481 100644 --- a/packages/payload/src/utilities/dynamicImport.ts +++ b/packages/payload/src/utilities/dynamicImport.ts @@ -18,7 +18,11 @@ export async function dynamicImport(modulePathOrSpecifier: string): // Vitest runs tests in a VM context where eval'd dynamic imports fail with // ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING. Use direct import in test environment. if (process.env.VITEST) { - return await import(/* webpackIgnore: true */ importPath) + return await import( + /* webpackIgnore: true */ + /* @vite-ignore */ + importPath + ) } // Without the eval, the Next.js bundler will throw this error when encountering the import statement: diff --git a/packages/payload/src/utilities/getRequestLanguage.ts b/packages/payload/src/utilities/getRequestLanguage.ts index e2193052ec3..d88cc6ec33a 100644 --- a/packages/payload/src/utilities/getRequestLanguage.ts +++ b/packages/payload/src/utilities/getRequestLanguage.ts @@ -1,5 +1,4 @@ import type { AcceptedLanguages } from '@payloadcms/translations' -import type { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension/adapters/request-cookies.js' import { extractHeaderLanguage } from '@payloadcms/translations' @@ -7,7 +6,7 @@ import type { SanitizedConfig } from '../config/types.js' type GetRequestLanguageArgs = { config: SanitizedConfig - cookies: Map | ReadonlyRequestCookies + cookies: Map defaultLanguage?: AcceptedLanguages headers: Request['headers'] } @@ -18,10 +17,8 @@ export const getRequestLanguage = ({ headers, }: GetRequestLanguageArgs): AcceptedLanguages => { const supportedLanguageKeys = Object.keys(config.i18n.supportedLanguages) as AcceptedLanguages[] - const langCookie = cookies.get(`${config.cookiePrefix || 'payload'}-lng`) - - const languageFromCookie: AcceptedLanguages = ( - typeof langCookie === 'string' ? langCookie : langCookie?.value + const languageFromCookie = cookies.get( + `${config.cookiePrefix || 'payload'}-lng`, ) as AcceptedLanguages if (languageFromCookie && supportedLanguageKeys.includes(languageFromCookie)) { diff --git a/packages/tanstack-start/package.json b/packages/tanstack-start/package.json new file mode 100644 index 00000000000..532324204eb --- /dev/null +++ b/packages/tanstack-start/package.json @@ -0,0 +1,81 @@ +{ + "name": "@payloadcms/tanstack-start", + "version": "0.1.0", + "description": "TanStack Start admin adapter for Payload CMS", + "homepage": "https://payloadcms.com", + "repository": { + "type": "git", + "url": "https://github.com/payloadcms/payload.git", + "directory": "packages/tanstack-start" + }, + "license": "MIT", + "author": "Payload (https://payloadcms.com)", + "type": "module", + "exports": { + ".": { + "import": "./src/index.ts", + "types": "./src/index.ts", + "default": "./src/index.ts" + }, + "./client": { + "import": "./src/client.ts", + "types": "./src/client.ts", + "default": "./src/client.ts" + }, + "./server": { + "import": "./src/server.ts", + "types": "./src/server.ts", + "default": "./src/server.ts" + }, + "./views": { + "import": "./src/views/index.ts", + "types": "./src/views/index.ts", + "default": "./src/views/index.ts" + }, + "./views/getPageState": { + "import": "./src/views/Root/getPageState.ts", + "types": "./src/views/Root/getPageState.ts", + "default": "./src/views/Root/getPageState.ts" + }, + "./routes": { + "import": "./src/routes/index.ts", + "types": "./src/routes/index.ts", + "default": "./src/routes/index.ts" + }, + "./utilities/initReq": { + "import": "./src/utilities/initReq.ts", + "types": "./src/utilities/initReq.ts", + "default": "./src/utilities/initReq.ts" + }, + "./utilities/handleServerFunctions": { + "import": "./src/utilities/handleServerFunctions.ts", + "types": "./src/utilities/handleServerFunctions.ts", + "default": "./src/utilities/handleServerFunctions.ts" + } + }, + "main": "./src/index.ts", + "types": "./src/index.ts", + "dependencies": { + "@payloadcms/next": "workspace:*", + "@payloadcms/translations": "workspace:*", + "@payloadcms/ui": "workspace:*", + "payload": "workspace:*", + "react": "19.1.0" + }, + "devDependencies": { + "@tanstack/react-start": "^1.167.0" + }, + "peerDependencies": { + "@tanstack/react-router": ">=1.0.0", + "@tanstack/react-start": ">=1.167.0", + "react": "^19.0.0" + }, + "peerDependenciesMeta": { + "@tanstack/react-router": { + "optional": false + }, + "@tanstack/react-start": { + "optional": false + } + } +} diff --git a/packages/tanstack-start/src/adapter/RouterProvider.tsx b/packages/tanstack-start/src/adapter/RouterProvider.tsx new file mode 100644 index 00000000000..a2f7257326a --- /dev/null +++ b/packages/tanstack-start/src/adapter/RouterProvider.tsx @@ -0,0 +1,46 @@ +'use client' +import type { RouterContextType, LinkProps as RouterLinkProps } from '@payloadcms/ui' + +import { RouterProvider as BaseRouterProvider } from '@payloadcms/ui' +import { Link as TanStackLink, useLocation, useParams, useRouter } from '@tanstack/react-router' +import React from 'react' + +const AdapterLink: React.FC = ({ children, href, prefetch, ...rest }) => ( + + {children} + +) + +export function TanStackRouterProvider({ children }: { children: React.ReactNode }) { + const router = useRouter() + const location = useLocation() + const params = useParams({ strict: false }) + + const searchParams = React.useMemo(() => new URLSearchParams(location.search), [location.search]) + + const routerCtx: RouterContextType = React.useMemo( + () => ({ + Link: AdapterLink, + params, + pathname: location.pathname, + router: { + back: () => router.history.back(), + forward: () => router.history.forward(), + prefetch: (url: string) => router.preloadRoute({ to: url }), + push: (url: string) => { + void router.navigate({ to: url }) + }, + refresh: () => { + void router.invalidate() + }, + replace: (url: string) => { + void router.navigate({ replace: true, to: url }) + }, + }, + searchParams, + }), + [router, location, params, searchParams], + ) + + return {children} +} diff --git a/packages/tanstack-start/src/adapter/index.ts b/packages/tanstack-start/src/adapter/index.ts new file mode 100644 index 00000000000..68d4408689a --- /dev/null +++ b/packages/tanstack-start/src/adapter/index.ts @@ -0,0 +1,47 @@ +import type { AdminAdapterResult, BaseAdminAdapter, CookieOptions } from 'payload' + +import { notFound, redirect } from '@tanstack/react-router' +import { deleteCookie, getCookie, setCookie } from '@tanstack/react-start/server' +import { createAdminAdapter } from 'payload' + +import { handleServerFunctions } from '../utilities/handleServerFunctions.js' +import { initReq } from '../utilities/initReq.js' +import { TanStackRouterProvider } from './RouterProvider.js' + +/** + * TanStack Start admin adapter for Payload CMS. + * + * Usage in payload.config.ts: + * ```ts + * import { tanstackStartAdapter } from '@payloadcms/tanstack-start' + * + * export default buildConfig({ + * admin: { adapter: tanstackStartAdapter() }, + * }) + * ``` + */ +export function tanstackStartAdapter(): AdminAdapterResult { + return { + name: 'tanstack-start', + init: ({ payload }) => + createAdminAdapter({ + name: 'tanstack-start', + createRouteHandlers: () => ({}), // Vinxi handles routing via file-system + deleteCookie: (name) => deleteCookie(name), + getCookie: (name) => getCookie(name), + handleServerFunctions, + initReq: ({ config, importMap }) => initReq({ config, importMap }), + notFound: () => { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw notFound() + }, + payload, + redirect: (url) => { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw redirect({ to: url }) + }, + RouterProvider: TanStackRouterProvider, + setCookie: (name, value, options?: CookieOptions) => setCookie(name, value, options), + } satisfies BaseAdminAdapter), + } +} diff --git a/packages/tanstack-start/src/client.ts b/packages/tanstack-start/src/client.ts new file mode 100644 index 00000000000..aeeb410744f --- /dev/null +++ b/packages/tanstack-start/src/client.ts @@ -0,0 +1,3 @@ +export { TanStackRouterProvider } from './adapter/RouterProvider.js' +export { TanStackRootProvider } from './layouts/Root/TanStackRootProvider.js' +export type { RootLayoutData } from './types.js' diff --git a/packages/tanstack-start/src/index.ts b/packages/tanstack-start/src/index.ts new file mode 100644 index 00000000000..1c0b2457710 --- /dev/null +++ b/packages/tanstack-start/src/index.ts @@ -0,0 +1,3 @@ +export { tanstackStartAdapter } from './adapter/index.js' +export { TanStackRouterProvider } from './adapter/RouterProvider.js' +export { RootLayout } from './layouts/Root/index.js' diff --git a/packages/tanstack-start/src/layouts/Root/TanStackRootProvider.tsx b/packages/tanstack-start/src/layouts/Root/TanStackRootProvider.tsx new file mode 100644 index 00000000000..db78818065a --- /dev/null +++ b/packages/tanstack-start/src/layouts/Root/TanStackRootProvider.tsx @@ -0,0 +1,36 @@ +'use client' + +import { RootProvider } from '@payloadcms/ui' +import { useRouter } from '@tanstack/react-router' +import React from 'react' + +type TanStackInvalidateResult = { + __tanstack_invalidate?: boolean +} + +type TanStackRootProviderProps = React.ComponentProps + +export const TanStackRootProvider: React.FC = ({ + serverFunction, + ...props +}) => { + const router = useRouter() + + const wrappedServerFunction = React.useCallback< + React.ComponentProps['serverFunction'] + >( + async (args) => { + const result = (await serverFunction(args)) as TanStackInvalidateResult + + if (result?.__tanstack_invalidate === true) { + await router.invalidate() + return null + } + + return result + }, + [router, serverFunction], + ) + + return +} diff --git a/packages/tanstack-start/src/layouts/Root/index.tsx b/packages/tanstack-start/src/layouts/Root/index.tsx new file mode 100644 index 00000000000..447f96b3932 --- /dev/null +++ b/packages/tanstack-start/src/layouts/Root/index.tsx @@ -0,0 +1,103 @@ +import type { ImportMap, LanguageOptions, SanitizedConfig, ServerFunctionClient } from 'payload' + +import { defaultTheme, ProgressBar } from '@payloadcms/ui' +import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig' +import { setCookie } from '@tanstack/react-start/server' +import { applyLocaleFiltering } from 'payload/shared' +import React from 'react' + +import { TanStackRouterProvider } from '../../adapter/RouterProvider.js' +import { getNavPrefs } from '../../utilities/getNavPrefs.js' +import { initReq } from '../../utilities/initReq.js' +import { TanStackRootProvider } from './TanStackRootProvider.js' + +import '@payloadcms/ui/scss/app.scss' + +type RootLayoutProps = { + readonly children: React.ReactNode + readonly config: Promise | SanitizedConfig + readonly importMap: ImportMap + readonly serverFunction: ServerFunctionClient +} + +function getRequestTheme(cookies: Map, config: SanitizedConfig): 'dark' | 'light' { + const themeCookie = cookies.get(`${config.cookiePrefix || 'payload'}-theme`) + if (themeCookie === 'dark' || themeCookie === 'light') { + return themeCookie + } + if (config.admin.theme !== 'all') { + return config.admin.theme + } + return defaultTheme as 'dark' | 'light' +} + +export const RootLayout = async ({ + children, + config: configPromise, + importMap, + serverFunction, +}: RootLayoutProps) => { + const { + cookies, + languageCode, + permissions, + req, + req: { + payload: { config }, + }, + } = await initReq({ config: configPromise, importMap, key: 'RootLayout' }) + + const theme = getRequestTheme(cookies, config) + + const languageOptions: LanguageOptions = Object.entries( + config.i18n.supportedLanguages || {}, + ).reduce((acc, [language, languageConfig]) => { + if (Object.keys(config.i18n.supportedLanguages).includes(language)) { + acc.push({ + label: languageConfig.translations.general.thisLanguage, + value: language, + }) + } + return acc + }, []) + + // eslint-disable-next-line @typescript-eslint/require-await + const switchLanguageServerAction = async (lang: string): Promise => { + 'use server' + setCookie(`${config.cookiePrefix || 'payload'}-lng`, lang, { path: '/' }) + } + + const navPrefs = await getNavPrefs(req) + + const clientConfig = getClientConfig({ + config, + i18n: req.i18n, + importMap, + user: req.user, + }) + + await applyLocaleFiltering({ clientConfig, config, req }) + + return ( + + + + {children} + + + ) +} diff --git a/packages/tanstack-start/src/routes/index.ts b/packages/tanstack-start/src/routes/index.ts new file mode 100644 index 00000000000..018218968a5 --- /dev/null +++ b/packages/tanstack-start/src/routes/index.ts @@ -0,0 +1,3 @@ +// REST route handlers adapted for TanStack Start's API route format. +// They accept standard Web API Request objects, same as @payloadcms/next/routes. +export { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes' diff --git a/packages/tanstack-start/src/server.ts b/packages/tanstack-start/src/server.ts new file mode 100644 index 00000000000..f846269a7ea --- /dev/null +++ b/packages/tanstack-start/src/server.ts @@ -0,0 +1,3 @@ +export { getRootLayoutData } from './utilities/getRootLayoutData.js' +export { handleServerFunctions } from './utilities/handleServerFunctions.js' +export { initReq } from './utilities/initReq.js' diff --git a/packages/tanstack-start/src/types.ts b/packages/tanstack-start/src/types.ts new file mode 100644 index 00000000000..b7ef3f7fa6b --- /dev/null +++ b/packages/tanstack-start/src/types.ts @@ -0,0 +1,23 @@ +import type { I18nClient, Language } from '@payloadcms/translations' +import type { + ClientConfig, + LanguageOptions, + Locale, + SanitizedPermissions, + TypedUser, +} from 'payload' + +export type RootLayoutData = { + config: ClientConfig + cookiePrefix: string + dateFNSKey: Language['dateFNSKey'] + fallbackLang: string + isNavOpen: boolean + languageCode: string + languageOptions: LanguageOptions + locale?: Locale['code'] + permissions: null | SanitizedPermissions + theme: 'dark' | 'light' + translations: I18nClient['translations'] + user: null | TypedUser +} diff --git a/packages/tanstack-start/src/utilities/getNavPrefs.ts b/packages/tanstack-start/src/utilities/getNavPrefs.ts new file mode 100644 index 00000000000..b6cdadacecd --- /dev/null +++ b/packages/tanstack-start/src/utilities/getNavPrefs.ts @@ -0,0 +1,37 @@ +import type { NavPreferences, PayloadRequest } from 'payload' + +import { PREFERENCE_KEYS } from 'payload/shared' +import { cache } from 'react' + +export const getNavPrefs = cache(async (req: PayloadRequest): Promise => { + return req?.user?.collection + ? await req.payload + .find({ + collection: 'payload-preferences', + depth: 0, + limit: 1, + pagination: false, + req, + where: { + and: [ + { + key: { + equals: PREFERENCE_KEYS.NAV, + }, + }, + { + 'user.relationTo': { + equals: req.user.collection, + }, + }, + { + 'user.value': { + equals: req?.user?.id, + }, + }, + ], + }, + }) + ?.then((res) => res?.docs?.[0]?.value) + : null +}) diff --git a/packages/tanstack-start/src/utilities/getRootLayoutData.ts b/packages/tanstack-start/src/utilities/getRootLayoutData.ts new file mode 100644 index 00000000000..4bd506632a8 --- /dev/null +++ b/packages/tanstack-start/src/utilities/getRootLayoutData.ts @@ -0,0 +1,79 @@ +import type { LanguageOptions, SanitizedConfig } from 'payload' + +import { defaultTheme } from '@payloadcms/ui' +import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig' +import { applyLocaleFiltering } from 'payload/shared' + +import type { RootLayoutData } from '../types.js' + +import { getNavPrefs } from './getNavPrefs.js' +import { initReq } from './initReq.js' + +function getRequestTheme(cookies: Map, config: SanitizedConfig): 'dark' | 'light' { + const themeCookie = cookies.get(`${config.cookiePrefix || 'payload'}-theme`) + if (themeCookie === 'dark' || themeCookie === 'light') { + return themeCookie + } + if (config.admin.theme !== 'all') { + return config.admin.theme + } + return defaultTheme as 'dark' | 'light' +} + +export async function getRootLayoutData({ + config: configArg, + importMap, +}: { + config: Promise | SanitizedConfig + importMap: Parameters[0]['importMap'] +}): Promise { + const { + cookies, + languageCode, + permissions, + req, + req: { + payload: { config }, + }, + } = await initReq({ config: configArg, importMap, key: 'RootLayout' }) + + const theme = getRequestTheme(cookies, config) + + const languageOptions: LanguageOptions = Object.entries( + config.i18n.supportedLanguages || {}, + ).reduce((acc, [language, languageConfig]) => { + if (Object.keys(config.i18n.supportedLanguages).includes(language)) { + acc.push({ + label: languageConfig.translations.general.thisLanguage, + value: language, + }) + } + return acc + }, []) + + const navPrefs = await getNavPrefs(req) + + const clientConfig = getClientConfig({ + config, + i18n: req.i18n, + importMap, + user: req.user, + }) + + await applyLocaleFiltering({ clientConfig, config, req }) + + return { + config: clientConfig, + cookiePrefix: config.cookiePrefix || 'payload', + dateFNSKey: req.i18n.dateFNSKey, + fallbackLang: config.i18n.fallbackLanguage, + isNavOpen: navPrefs?.open ?? true, + languageCode, + languageOptions, + locale: req.locale, + permissions: req.user ? permissions : null, + theme, + translations: req.i18n.translations, + user: req.user, + } +} diff --git a/packages/tanstack-start/src/utilities/handleServerFunctions.ts b/packages/tanstack-start/src/utilities/handleServerFunctions.ts new file mode 100644 index 00000000000..fa33d963d02 --- /dev/null +++ b/packages/tanstack-start/src/utilities/handleServerFunctions.ts @@ -0,0 +1,52 @@ +import type { ServerFunctionHandler } from 'payload' + +import { dispatchServerFunction } from '@payloadcms/ui/utilities/handleServerFunctions' +import { notFound, redirect } from '@tanstack/react-router' + +import { TANSTACK_INVALIDATE, tanstackDocumentStateHandler } from '../views/Root/serverFunctions.js' +import { initReq } from './initReq.js' + +export const handleServerFunctions: ServerFunctionHandler = async (args) => { + const { name: fnKey, args: fnArgs, config, importMap, serverFunctions } = args + const invalidateArgs = fnArgs as { __tanstackInvalidate?: boolean } | undefined + + const { cookies, locale, permissions, req } = await initReq({ + config, + importMap, + key: 'RootLayout', + }) + + const augmentedArgs = { + ...fnArgs, + cookies, + importMap, + locale, + notFound: () => { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw notFound() + }, + permissions, + redirect: (url: string) => { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw redirect({ to: url }) + }, + req, + } + + if ( + (fnKey === 'render-document' || fnKey === 'render-list') && + invalidateArgs?.__tanstackInvalidate === true + ) { + return TANSTACK_INVALIDATE + } + + if (fnKey === 'tanstack-document-state') { + return tanstackDocumentStateHandler(augmentedArgs as never) + } + + return dispatchServerFunction({ + name: fnKey, + augmentedArgs, + extraServerFunctions: serverFunctions, + }) +} diff --git a/packages/tanstack-start/src/utilities/initReq.ts b/packages/tanstack-start/src/utilities/initReq.ts new file mode 100644 index 00000000000..5ab04d3b66a --- /dev/null +++ b/packages/tanstack-start/src/utilities/initReq.ts @@ -0,0 +1,90 @@ +import type { I18n, I18nClient } from '@payloadcms/translations' +import type { ImportMap, InitReqResult, PayloadRequest, SanitizedConfig } from 'payload' + +import { initI18n } from '@payloadcms/translations' +import { getRequestLocale } from '@payloadcms/ui/utilities/getRequestLocale' +import { selectiveCache } from '@payloadcms/ui/utilities/selectiveCache' +import { getRequest } from '@tanstack/react-start/server' +import { + createLocalReq, + executeAuthStrategies, + getAccessResults, + getPayload, + getRequestLanguage, + parseCookies, +} from 'payload' + +type PartialResult = { + i18n: I18nClient +} & Pick & + Pick + +const partialReqCache = selectiveCache('partialReq') +const reqCache = selectiveCache('req') + +export const initReq = async function ({ + config: configArg, + importMap, + key = 'adapter', +}: { + config: Promise | SanitizedConfig + importMap: ImportMap + key?: string +}): Promise { + // getRequest() returns the current server request from TanStack Start's context store + const request = getRequest() + const headers = new Headers(request.headers) + const cookies = parseCookies(headers) + + const partialResult = await partialReqCache.get(async () => { + const config = await configArg + const payload = await getPayload({ config, cron: true, importMap }) + const languageCode = getRequestLanguage({ config, cookies, headers }) + + const i18n: I18nClient = await initI18n({ + config: config.i18n, + context: 'client', + language: languageCode, + }) + + const { responseHeaders, user } = await executeAuthStrategies({ + headers, + payload, + }) + + return { i18n, languageCode, payload, responseHeaders, user } + }, 'global') + + return reqCache + .get(async () => { + const { i18n, languageCode, payload, responseHeaders, user } = partialResult + + const req = await createLocalReq( + { + req: { + headers, + host: headers.get('host'), + i18n: i18n as I18n, + responseHeaders, + url: request.url, + user, + }, + }, + payload, + ) + + const locale = await getRequestLocale({ req }) + req.locale = locale?.code + + const permissions = await getAccessResults({ req }) + + return { cookies, headers, languageCode, locale, permissions, req } + }, key) + .then((result) => ({ + ...result, + req: { + ...result.req, + ...(result.req?.context ? { context: { ...result.req.context } } : {}), + }, + })) +} diff --git a/packages/tanstack-start/src/views/Account/index.tsx b/packages/tanstack-start/src/views/Account/index.tsx new file mode 100644 index 00000000000..6dd9f139dd7 --- /dev/null +++ b/packages/tanstack-start/src/views/Account/index.tsx @@ -0,0 +1,158 @@ +'use client' + +import { + AccountClient, + APIViewClient, + DefaultEditView, + DocumentInfoProvider, + EditDepthProvider, + HydrateAuthProvider, + LivePreviewProvider, + LoadingOverlay, + OperationProvider, + useRouter, + useServerFunctions, +} from '@payloadcms/ui' +import React from 'react' + +import type { TanStackDocumentStateResult } from '../Root/serverFunctions.js' +import type { DocumentPageData, SerializablePageState } from '../Root/types.js' + +import { UnsupportedView } from '../shared.js' + +function useAccountDocumentStateFallback(args: { + pageState: SerializablePageState + shouldFetch: boolean +}) { + const { serverFunction } = useServerFunctions() + const router = useRouter() + const [state, setState] = React.useState(null) + + React.useEffect(() => { + if (!args.shouldFetch) { + return + } + + let cancelled = false + + const run = async () => { + const result = (await serverFunction({ + name: 'tanstack-document-state', + args: { + account: true, + collectionSlug: args.pageState.routeParams.collection, + docID: args.pageState.routeParams.id, + documentSubViewType: args.pageState.documentSubViewType, + globalSlug: args.pageState.routeParams.global, + searchParams: args.pageState.searchParams, + segments: args.pageState.segments, + }, + })) as TanStackDocumentStateResult + + if (result?.redirectURL) { + router.replace(result.redirectURL) + return + } + + if (!cancelled) { + setState(result) + } + } + + void run() + + return () => { + cancelled = true + } + }, [ + args.shouldFetch, + args.pageState.documentSubViewType, + args.pageState.routeParams.collection, + args.pageState.routeParams.global, + args.pageState.routeParams.id, + args.pageState.searchParams, + args.pageState.segments, + router, + serverFunction, + ]) + + return state +} + +export function AccountView({ pageState }: { pageState: SerializablePageState }) { + const documentData = pageState.pageData?.document + const needsFallback = !documentData + const fallbackState = useAccountDocumentStateFallback({ + pageState, + shouldFetch: needsFallback, + }) + + const state = documentData ?? (fallbackState as DocumentPageData | null) + + if (!state) { + return + } + + if (pageState.documentSubViewType === 'versions' || pageState.documentSubViewType === 'version') { + return ( + + ) + } + + const operation = (state.collectionSlug && state.id) || state.globalSlug ? 'update' : 'create' + + return ( + + + + + + {pageState.documentSubViewType === 'api' ? ( + + ) : ( + + )} + + + + + + ) +} diff --git a/packages/tanstack-start/src/views/BrowseByFolder/index.tsx b/packages/tanstack-start/src/views/BrowseByFolder/index.tsx new file mode 100644 index 00000000000..64b77b11fc1 --- /dev/null +++ b/packages/tanstack-start/src/views/BrowseByFolder/index.tsx @@ -0,0 +1,77 @@ +'use client' + +import { LoadingOverlay, useRouter, useServerFunctions } from '@payloadcms/ui' +import { notFound } from '@tanstack/react-router' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +import { buildRenderBrowseFolderArgs } from '../buildRenderViewArgs.js' +import { getRedirectURL, isNotFoundError, UnsupportedView } from '../shared.js' + +export function BrowseByFolderView({ pageState }: { pageState: SerializablePageState }) { + const { serverFunction } = useServerFunctions() + const router = useRouter() + const [isLoading, setIsLoading] = React.useState(true) + const [isNotFoundRoute, setIsNotFoundRoute] = React.useState(false) + const [folderView, setFolderView] = React.useState(null) + + if (isNotFoundRoute) { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw notFound() + } + + React.useEffect(() => { + let cancelled = false + + const run = async () => { + try { + const result = (await serverFunction({ + name: 'render-browse-folder', + args: buildRenderBrowseFolderArgs({ pageState }), + })) as { View?: React.ReactNode } + + if (!cancelled) { + setFolderView(result?.View ?? null) + setIsLoading(false) + } + } catch (error) { + if (cancelled) { + return + } + + const redirectURL = getRedirectURL(error) + + if (redirectURL) { + router.replace(redirectURL) + return + } + + if (isNotFoundError(error)) { + setIsNotFoundRoute(true) + return + } + + setFolderView( + , + ) + setIsLoading(false) + } + } + + void run() + + return () => { + cancelled = true + } + }, [pageState, router, serverFunction]) + + if (isLoading) { + return + } + + return folderView +} diff --git a/packages/tanstack-start/src/views/CollectionFolders/index.tsx b/packages/tanstack-start/src/views/CollectionFolders/index.tsx new file mode 100644 index 00000000000..0de38ff0e83 --- /dev/null +++ b/packages/tanstack-start/src/views/CollectionFolders/index.tsx @@ -0,0 +1,81 @@ +'use client' + +import { LoadingOverlay, useRouter, useServerFunctions } from '@payloadcms/ui' +import { notFound } from '@tanstack/react-router' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +import { buildRenderCollectionFolderArgs } from '../buildRenderViewArgs.js' +import { getRedirectURL, isNotFoundError, UnsupportedView } from '../shared.js' + +export function CollectionFoldersView({ pageState }: { pageState: SerializablePageState }) { + const { serverFunction } = useServerFunctions() + const router = useRouter() + const [isLoading, setIsLoading] = React.useState(true) + const [isNotFoundRoute, setIsNotFoundRoute] = React.useState(false) + const [folderView, setFolderView] = React.useState(null) + + if (isNotFoundRoute) { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw notFound() + } + + React.useEffect(() => { + if (!pageState.routeParams.collection) { + return + } + + let cancelled = false + + const run = async () => { + try { + const result = (await serverFunction({ + name: 'render-collection-folder', + args: buildRenderCollectionFolderArgs({ pageState }), + })) as { View?: React.ReactNode } + + if (!cancelled) { + setFolderView(result?.View ?? null) + setIsLoading(false) + } + } catch (error) { + if (cancelled) { + return + } + + const redirectURL = getRedirectURL(error) + + if (redirectURL) { + router.replace(redirectURL) + return + } + + if (isNotFoundError(error)) { + setIsNotFoundRoute(true) + return + } + + setFolderView( + , + ) + setIsLoading(false) + } + } + + void run() + + return () => { + cancelled = true + } + }, [pageState, router, serverFunction]) + + if (!pageState.routeParams.collection || isLoading) { + return + } + + return folderView +} diff --git a/packages/tanstack-start/src/views/CreateFirstUser/index.tsx b/packages/tanstack-start/src/views/CreateFirstUser/index.tsx new file mode 100644 index 00000000000..54e19a93749 --- /dev/null +++ b/packages/tanstack-start/src/views/CreateFirstUser/index.tsx @@ -0,0 +1,27 @@ +import { CreateFirstUserClient, LoadingOverlay, useTranslation } from '@payloadcms/ui' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +export function CreateFirstUserView({ pageState }: { pageState: SerializablePageState }) { + const { t } = useTranslation() + const data = pageState.pageData?.createFirstUser + + if (!data) { + return + } + + return ( +
+

{t('general:welcome')}

+

{t('authentication:beginCreateFirstUser')}

+ +
+ ) +} diff --git a/packages/tanstack-start/src/views/Dashboard/index.tsx b/packages/tanstack-start/src/views/Dashboard/index.tsx new file mode 100644 index 00000000000..79f2f407e2c --- /dev/null +++ b/packages/tanstack-start/src/views/Dashboard/index.tsx @@ -0,0 +1,37 @@ +'use client' + +import type { ClientWidget } from 'payload' + +import { ModularDashboardClient, RenderWidget, type WidgetInstanceClient } from '@payloadcms/ui' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +export function DashboardView({ pageState }: { pageState: SerializablePageState }) { + const layoutItems = pageState.pageData?.dashboard?.layoutItems ?? [] + const widgets: ClientWidget[] = pageState.clientConfig?.admin?.dashboard?.widgets ?? [] + + const clientLayout: WidgetInstanceClient[] = React.useMemo( + () => + layoutItems.map((item) => ({ + component: React.createElement(RenderWidget, { + widgetData: item.data, + widgetId: item.id, + }), + item: { + id: item.id, + data: item.data, + maxWidth: item.maxWidth as WidgetInstanceClient['item']['maxWidth'], + minWidth: item.minWidth as WidgetInstanceClient['item']['minWidth'], + width: item.width as WidgetInstanceClient['item']['width'], + }, + })), + [layoutItems], + ) + + return ( +
+ +
+ ) +} diff --git a/packages/tanstack-start/src/views/Document/index.tsx b/packages/tanstack-start/src/views/Document/index.tsx new file mode 100644 index 00000000000..b1d2913631a --- /dev/null +++ b/packages/tanstack-start/src/views/Document/index.tsx @@ -0,0 +1,190 @@ +'use client' + +import { + APIViewClient, + DefaultEditView, + DocumentInfoProvider, + EditDepthProvider, + HydrateAuthProvider, + LivePreviewProvider, + LoadingOverlay, + OperationProvider, + useRouter, + useServerFunctions, +} from '@payloadcms/ui' +import { notFound } from '@tanstack/react-router' +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import type { DocumentPageData, SerializablePageState } from '../Root/types.js' + +import { buildRenderDocumentArgs } from '../buildRenderViewArgs.js' +import { getRedirectURL, isNotFoundError, UnsupportedView } from '../shared.js' + +/** + * Renders the document view from loader-supplied data when available, + * falling back to the server function approach for version subviews + * and cases where the loader data is not available. + */ +export function DocumentView({ pageState }: { pageState: SerializablePageState }) { + const { renderDocument } = useServerFunctions() + const router = useRouter() + const documentData = pageState.pageData?.document + + const [fallbackView, setFallbackView] = React.useState(null) + const [isFallbackLoading, setIsFallbackLoading] = React.useState(false) + const [isNotFoundRoute, setIsNotFoundRoute] = React.useState(false) + + if (isNotFoundRoute) { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw notFound() + } + + const needsFallback = + !documentData || + pageState.documentSubViewType === 'versions' || + pageState.documentSubViewType === 'version' + + React.useEffect(() => { + if (!needsFallback) { + return + } + + setIsFallbackLoading(true) + let cancelled = false + + const run = async () => { + try { + const result = await renderDocument(buildRenderDocumentArgs({ pageState })) + + if (cancelled) { + return + } + + if ( + pageState.routeParams.collection && + !pageState.routeParams.id && + result?.data && + typeof result.data === 'object' && + 'id' in result.data && + result.data.id + ) { + router.replace( + formatAdminURL({ + adminRoute: pageState.clientConfig.routes.admin, + path: `/collections/${pageState.routeParams.collection}/${String(result.data.id)}`, + }), + ) + return + } + + setFallbackView(result?.Document ?? null) + setIsFallbackLoading(false) + } catch (error) { + if (cancelled) { + return + } + + const redirectURL = getRedirectURL(error) + + if (redirectURL) { + router.replace(redirectURL) + return + } + + if (isNotFoundError(error)) { + setIsNotFoundRoute(true) + return + } + + setFallbackView( + , + ) + setIsFallbackLoading(false) + } + } + + void run() + + return () => { + cancelled = true + } + }, [needsFallback, pageState, renderDocument, router]) + + if (needsFallback) { + if (isFallbackLoading) { + return + } + + return fallbackView + } + + return +} + +function DocumentDataView({ + documentData, + pageState, +}: { + documentData: DocumentPageData + pageState: SerializablePageState +}) { + const operation = + (documentData.collectionSlug && documentData.id) || documentData.globalSlug + ? 'update' + : 'create' + + return ( + + + + + + {pageState.documentSubViewType === 'api' ? ( + + ) : ( + + )} + + + + + ) +} diff --git a/packages/tanstack-start/src/views/ForgotPassword/index.tsx b/packages/tanstack-start/src/views/ForgotPassword/index.tsx new file mode 100644 index 00000000000..f80acc7fbc1 --- /dev/null +++ b/packages/tanstack-start/src/views/ForgotPassword/index.tsx @@ -0,0 +1,24 @@ +import { ForgotPasswordForm, Link, useTranslation } from '@payloadcms/ui' +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +export function ForgotPasswordView({ pageState }: { pageState: SerializablePageState }) { + const { t } = useTranslation() + + return ( + <> + + + {t('authentication:backToLogin')} + + + ) +} diff --git a/packages/tanstack-start/src/views/List/index.tsx b/packages/tanstack-start/src/views/List/index.tsx new file mode 100644 index 00000000000..c5599323c40 --- /dev/null +++ b/packages/tanstack-start/src/views/List/index.tsx @@ -0,0 +1,139 @@ +'use client' + +import type { ListQuery, ResolvedFilterOptions } from 'payload' + +import { + DefaultListView, + HydrateAuthProvider, + ListQueryProvider, + LoadingOverlay, + parseSearchParams, + useRouter, + useSearchParams, + useServerFunctions, +} from '@payloadcms/ui' +import { notFound } from '@tanstack/react-router' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +import { buildRenderListArgs } from '../buildRenderViewArgs.js' +import { getRedirectURL, isNotFoundError, UnsupportedView } from '../shared.js' + +/** + * Renders an immediate shell from loader data while the full server-rendered + * view loads in the background. Once the server function returns, the view + * swaps to the canonical rendered output (Table, filters, slots included). + */ +export function ListView({ pageState }: { pageState: SerializablePageState }) { + const { serverFunction } = useServerFunctions() + const router = useRouter() + const searchParams = useSearchParams() + const listData = pageState.pageData?.list + + const [isNotFoundRoute, setIsNotFoundRoute] = React.useState(false) + const [renderedList, setRenderedList] = React.useState(null) + + if (isNotFoundRoute) { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw notFound() + } + + React.useEffect(() => { + if (!pageState.routeParams.collection) { + return + } + + let cancelled = false + + const run = async () => { + try { + const result = (await serverFunction({ + name: 'render-list', + args: buildRenderListArgs({ + pageState, + query: parseSearchParams(searchParams) as ListQuery, + }), + })) as { List?: React.ReactNode } + + if (!cancelled) { + setRenderedList(result?.List ?? null) + } + } catch (error) { + if (cancelled) { + return + } + + const redirectURL = getRedirectURL(error) + + if (redirectURL) { + router.replace(redirectURL) + return + } + + if (isNotFoundError(error)) { + setIsNotFoundRoute(true) + return + } + + setRenderedList( + , + ) + } + } + + void run() + + return () => { + cancelled = true + } + }, [pageState, router, searchParams, serverFunction]) + + if (!pageState.routeParams.collection) { + return + } + + if (renderedList) { + return renderedList + } + + if (!listData) { + return + } + + const resolvedFilterOptionsMap = new Map( + Object.entries(listData.resolvedFilterOptions ?? {}), + ) + + return ( + <> + + + + + + ) +} diff --git a/packages/tanstack-start/src/views/Login/index.tsx b/packages/tanstack-start/src/views/Login/index.tsx new file mode 100644 index 00000000000..f156e417b01 --- /dev/null +++ b/packages/tanstack-start/src/views/Login/index.tsx @@ -0,0 +1,17 @@ +import { LoginForm } from '@payloadcms/ui' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +export function LoginView({ pageState }: { pageState: SerializablePageState }) { + return ( +
+ +
+ ) +} diff --git a/packages/tanstack-start/src/views/Logout/index.tsx b/packages/tanstack-start/src/views/Logout/index.tsx new file mode 100644 index 00000000000..8f32b4295e1 --- /dev/null +++ b/packages/tanstack-start/src/views/Logout/index.tsx @@ -0,0 +1,16 @@ +import { LogoutClient } from '@payloadcms/ui' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +export function LogoutView({ pageState }: { pageState: SerializablePageState }) { + return ( +
+ +
+ ) +} diff --git a/packages/tanstack-start/src/views/ResetPassword/index.tsx b/packages/tanstack-start/src/views/ResetPassword/index.tsx new file mode 100644 index 00000000000..952c372f5bc --- /dev/null +++ b/packages/tanstack-start/src/views/ResetPassword/index.tsx @@ -0,0 +1,16 @@ +import { ResetPasswordForm, useTranslation } from '@payloadcms/ui' +import { FormHeader } from '@payloadcms/ui/elements/FormHeader' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +export function ResetPasswordView({ pageState }: { pageState: SerializablePageState }) { + const { t } = useTranslation() + + return ( +
+ + +
+ ) +} diff --git a/packages/tanstack-start/src/views/Root/getPageState.ts b/packages/tanstack-start/src/views/Root/getPageState.ts new file mode 100644 index 00000000000..33e1f88e95f --- /dev/null +++ b/packages/tanstack-start/src/views/Root/getPageState.ts @@ -0,0 +1,454 @@ +import type { + ImportMap, + ListQuery, + Locale, + PayloadComponent, + ResolvedFilterOptions, + SanitizedConfig, + SanitizedDocumentPermissions, + ViewTypes, +} from 'payload' + +import { reduceToSerializableFields } from '@payloadcms/ui/shared' +import { buildFormState } from '@payloadcms/ui/utilities/buildFormState' +import { getPreferences } from '@payloadcms/ui/utilities/getPreferences' +import { getDocPreferences } from '@payloadcms/ui/views/Document/getDocPreferences' +import { getDocumentData } from '@payloadcms/ui/views/Document/getDocumentData' +import { fetchListViewData } from '@payloadcms/ui/views/List/fetchListViewData' +import { getRootPageDescriptor } from '@payloadcms/ui/views/Root/getRootPageDescriptor' +import { PREFERENCE_KEYS } from 'payload/shared' + +import type { + DashboardLayoutItem, + DocumentPageData, + ListPageData, + SerializablePageData, + SerializablePageState, +} from './types.js' + +import { getNavPrefs } from '../../utilities/getNavPrefs.js' +import { initReq } from '../../utilities/initReq.js' +import { tanstackDocumentStateHandler } from './serverFunctions.js' + +const isSerializablePayloadComponent = ( + value: PayloadComponent | undefined, +): value is Exclude => { + return Boolean(value && (typeof value === 'string' || typeof value === 'object')) +} + +const serializePayloadComponents = ( + components: PayloadComponent[] | undefined, +): PayloadComponent[] | undefined => { + const safeComponents = components?.filter(isSerializablePayloadComponent) + return safeComponents?.length ? safeComponents : undefined +} + +const getLoginPageData = (config: SanitizedConfig): SerializablePageData['login'] => { + const prefillAutoLogin = + typeof config.admin?.autoLogin === 'object' && config.admin?.autoLogin.prefillOnly + + if (!prefillAutoLogin || typeof config.admin?.autoLogin !== 'object') { + return undefined + } + + return { + prefillEmail: config.admin.autoLogin.email, + prefillPassword: config.admin.autoLogin.password, + prefillUsername: config.admin.autoLogin.username, + } +} + +const getCreateFirstUserPageData = async ({ + localeCode, + req, +}: { + localeCode?: string + req: Awaited>['req'] +}): Promise => { + const { + payload, + payload: { + collections, + config: { + admin: { user: userSlug }, + }, + }, + user, + } = req + + const collectionConfig = collections?.[userSlug]?.config + + if (!collectionConfig) { + return undefined + } + + const data = await getDocumentData({ + collectionSlug: collectionConfig.slug, + locale: req.locale as unknown as Locale | undefined, + payload, + req, + user, + }) + + const docPreferences = await getDocPreferences({ + collectionSlug: collectionConfig.slug, + payload, + user, + }) + + const docPermissions = { + create: true, + delete: true, + fields: Object.fromEntries( + collectionConfig.fields + .filter((field): field is { name: string } & typeof field => 'name' in field) + .map((field) => [field.name, { create: true, read: true, update: true } as const]), + ), + read: true, + readVersions: true, + update: true, + } as const satisfies SanitizedDocumentPermissions + + const { state } = await buildFormState({ + collectionSlug: collectionConfig.slug, + data, + docPermissions, + docPreferences, + locale: localeCode, + operation: 'create', + renderAllFields: true, + req, + schemaPath: collectionConfig.slug, + skipClientConfigAuth: true, + skipValidation: true, + }) + + return { + docPermissions, + docPreferences, + initialState: reduceToSerializableFields(state), + loginWithUsername: collectionConfig.auth?.loginWithUsername, + userSlug, + } +} + +const getVerifyPageData = async ({ + collection, + req, + token, +}: { + collection?: string + req: Awaited>['req'] + token?: string +}): Promise => { + let isVerified = false + let message = req.t('authentication:unableToVerify') + + if (!collection || !token) { + return { isVerified, message } + } + + try { + await req.payload.verifyEmail({ + collection, + token, + }) + isVerified = true + message = req.t('authentication:emailVerified') + } catch { + // Keep the default failure message + } + + return { isVerified, message } +} + +export async function getPageState(args: { + config: Promise | SanitizedConfig + importMap: ImportMap + searchParams: Record + segments: string[] +}): Promise { + const { config: configPromise, importMap, searchParams, segments } = args + + const initPageResult = await initReq({ + config: configPromise, + importMap, + key: 'getPageState', + }) + + const { + locale, + permissions, + req, + req: { payload }, + } = initPageResult + + const config = payload.config + const { + admin: { user: userSlug }, + } = config + + const rootPageResult = await getRootPageDescriptor({ + importMap, + initPageResult, + searchParams, + segments, + }) + + if (rootPageResult.type === 'not-found') { + throw new Error('not-found') + } + + if (rootPageResult.type === 'redirect') { + throw new Error(`REDIRECT:${rootPageResult.url}`) + } + + const { + browseByFolderSlugs, + clientConfig, + DefaultView, + documentSubViewType, + routeParams, + templateClassName, + templateType, + viewActions, + viewType, + visibleEntities, + } = rootPageResult.descriptor + + const navPreferences = await getNavPrefs(req) + + let pageData: SerializablePageData = undefined + const pageViewType = viewType as string | undefined + + if (pageViewType === 'login') { + pageData = { + ...pageData, + login: getLoginPageData(config), + } + } + + if (pageViewType === 'createFirstUser') { + pageData = { + ...pageData, + createFirstUser: await getCreateFirstUserPageData({ + localeCode: locale?.code, + req, + }), + } + } + + if (pageViewType === 'dashboard') { + const { defaultLayout = [], widgets = [] } = config.admin.dashboard || {} + + const savedPreferences = await getPreferences( + PREFERENCE_KEYS.DASHBOARD_LAYOUT, + payload, + req.user?.id, + req.user?.collection, + ) + + let layoutItems: DashboardLayoutItem[] | null = null + + if ( + savedPreferences?.value && + typeof savedPreferences.value === 'object' && + 'layouts' in savedPreferences.value && + savedPreferences.value.layouts + ) { + layoutItems = savedPreferences.value.layouts as DashboardLayoutItem[] + } + + if (!layoutItems) { + const widgetInstances = + typeof defaultLayout === 'function' ? await defaultLayout({ req }) : defaultLayout + + layoutItems = widgetInstances.map((instance, index) => { + const widget = widgets.find((w) => w.slug === instance.widgetSlug) + return { + id: `${instance.widgetSlug}-${index}`, + data: instance.data, + maxWidth: widget?.maxWidth ?? 'full', + minWidth: widget?.minWidth ?? 'x-small', + width: instance.width || 'x-small', + } + }) + } + + pageData = { + ...pageData, + dashboard: { layoutItems }, + } + } + + if (pageViewType === 'verify') { + pageData = { + ...pageData, + verify: await getVerifyPageData({ + collection: routeParams.collection, + req, + token: routeParams.token, + }), + } + } + + if ((pageViewType === 'list' || pageViewType === 'trash') && routeParams.collection) { + try { + const listData = await fetchListViewData({ + clientConfig, + collectionSlug: routeParams.collection, + permissions, + query: searchParams as unknown as ListQuery, + req, + searchParams, + trash: pageViewType === 'trash', + viewType, + visibleEntities, + }) + + const serializedFilterOptions: Record = {} + + for (const [key, value] of listData.resolvedFilterOptions) { + serializedFilterOptions[key] = value + } + + const listPageData: ListPageData = { + collectionPreferences: listData.collectionPreferences, + collectionSlug: listData.collectionSlug, + columns: listData.columns, + data: listData.data, + hasCreatePermission: listData.hasCreatePermission, + hasDeletePermission: listData.hasDeletePermission, + hasTrashPermission: listData.hasTrashPermission, + isGroupBy: listData.isGroupBy, + newDocumentURL: listData.newDocumentURL, + notFoundDocId: listData.notFoundDocId, + orderableFieldName: listData.orderableFieldName, + query: listData.query as unknown as Record, + queryPreset: listData.queryPreset, + queryPresetPermissions: listData.queryPresetPermissions, + resolvedFilterOptions: serializedFilterOptions, + select: listData.select, + staticDescription: listData.staticDescription, + viewType: listData.viewType, + where: listData.where, + } + + pageData = { + ...pageData, + list: listPageData, + } + } catch (err) { + if ((err as Error)?.message === 'not-found') { + throw err + } + + req.payload.logger.error({ + err, + msg: `Error fetching list view data for ${routeParams.collection}`, + }) + } + } + + if (pageViewType === 'document') { + try { + const docResult = await tanstackDocumentStateHandler({ + ...initPageResult, + collectionSlug: routeParams.collection, + docID: routeParams.id, + documentSubViewType, + globalSlug: routeParams.global, + importMap, + redirectAfterCreate: false, + searchParams, + segments, + }) + + if (docResult.redirectURL) { + throw new Error(`REDIRECT:${docResult.redirectURL}`) + } + + pageData = { + ...pageData, + document: docResult as DocumentPageData, + } + } catch (err) { + if ((err as Error)?.message === 'not-found') { + throw err + } + + const errMsg = (err as Error)?.message + if (errMsg?.startsWith('REDIRECT:')) { + throw err + } + + req.payload.logger.error({ + err, + msg: `Error fetching document state for ${routeParams.collection || routeParams.global}`, + }) + } + } + + if (pageViewType === 'account') { + try { + const accountResult = await tanstackDocumentStateHandler({ + ...initPageResult, + account: true, + collectionSlug: routeParams.collection, + docID: routeParams.id, + documentSubViewType, + globalSlug: routeParams.global, + importMap, + searchParams, + segments, + }) + + if (accountResult.redirectURL) { + throw new Error(`REDIRECT:${accountResult.redirectURL}`) + } + + pageData = { + ...pageData, + document: accountResult as DocumentPageData, + } + } catch (err) { + const errMsg = (err as Error)?.message + if (errMsg === 'not-found') { + throw err + } + + if (errMsg?.startsWith('REDIRECT:')) { + throw err + } + + req.payload.logger.error({ + err, + msg: 'Error fetching account document state', + }) + } + } + + return { + browseByFolderSlugs, + clientConfig, + customView: isSerializablePayloadComponent(DefaultView?.payloadComponent) + ? DefaultView.payloadComponent + : undefined, + documentSubViewType, + locale, + navPreferences, + pageData, + permissions, + routeParams, + searchParams, + segments, + templateClassName, + templateType, + unsupportedCustomView: Boolean( + DefaultView?.Component && !viewType && !DefaultView?.payloadComponent, + ), + viewActions: serializePayloadComponents(viewActions), + viewType, + visibleEntities, + } +} diff --git a/packages/tanstack-start/src/views/Root/index.ts b/packages/tanstack-start/src/views/Root/index.ts new file mode 100644 index 00000000000..78a29eae42e --- /dev/null +++ b/packages/tanstack-start/src/views/Root/index.ts @@ -0,0 +1,2 @@ +export { getPageState } from './getPageState.js' +export type { SerializablePageState } from './types.js' diff --git a/packages/tanstack-start/src/views/Root/serverFunctions.ts b/packages/tanstack-start/src/views/Root/serverFunctions.ts new file mode 100644 index 00000000000..61172c0c2b2 --- /dev/null +++ b/packages/tanstack-start/src/views/Root/serverFunctions.ts @@ -0,0 +1,350 @@ +import type { + Data, + DefaultServerFunctionArgs, + DocumentSubViewTypes, + DocumentViewClientProps, + RenderDocumentVersionsProperties, + ServerFunction, + VisibleEntities, +} from 'payload' + +import { reduceToSerializableFields } from '@payloadcms/ui/shared' +import { buildFormState } from '@payloadcms/ui/utilities/buildFormState' +import { handleLivePreview } from '@payloadcms/ui/utilities/handleLivePreview' +import { handlePreview } from '@payloadcms/ui/utilities/handlePreview' +import { isEditing as getIsEditing } from '@payloadcms/ui/utilities/isEditing' +import { getDocPreferences } from '@payloadcms/ui/views/Document/getDocPreferences' +import { getDocumentData } from '@payloadcms/ui/views/Document/getDocumentData' +import { getDocumentPermissions } from '@payloadcms/ui/views/Document/getDocumentPermissions' +import { getIsLocked } from '@payloadcms/ui/views/Document/getIsLocked' +import { getVersions } from '@payloadcms/ui/views/Document/getVersions' +import { canAccessAdmin, isEntityHidden } from 'payload' +import { formatAdminURL, hasAutosaveEnabled, hasDraftsEnabled } from 'payload/shared' + +export const TANSTACK_INVALIDATE = { + __tanstack_invalidate: true as const, +} + +export type TanStackInvalidateResult = typeof TANSTACK_INVALIDATE + +type TanStackDocumentStateArgs = { + account?: boolean + collectionSlug?: string + docID?: number | string + documentSubViewType?: DocumentSubViewTypes + globalSlug?: string + redirectAfterCreate?: boolean + redirectAfterDelete?: boolean + redirectAfterDuplicate?: boolean + redirectAfterRestore?: boolean + searchParams?: Record + segments: string[] + versions?: RenderDocumentVersionsProperties +} & DefaultServerFunctionArgs + +export type TanStackDocumentStateResult = { + apiURL?: string + collectionSlug?: string + currentEditor?: unknown + docPermissions?: Record + globalSlug?: string + hasDeletePermission?: boolean + hasPublishedDoc: boolean + hasPublishPermission?: boolean + hasSavePermission?: boolean + hasTrashPermission?: boolean + hideTabs?: boolean + id?: number | string + initialData?: Data + initialState?: DocumentViewClientProps['formState'] + isEditing?: boolean + isLivePreviewEnabled?: boolean + isLocked: boolean + isPreviewEnabled?: boolean + isTrashed?: boolean + lastUpdateTime: number + livePreviewBreakpoints?: unknown[] + livePreviewURL?: string + mostRecentVersionIsAutosaved: boolean + previewURL?: string + redirectURL?: string + typeofLivePreviewURL?: 'function' | 'string' + unpublishedVersionCount: number + versionCount: number +} + +const getVisibleEntities = ({ + payload, + user, +}: { + payload: DefaultServerFunctionArgs['req']['payload'] + user: DefaultServerFunctionArgs['req']['user'] +}): VisibleEntities => ({ + collections: payload.config.collections + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), + globals: payload.config.globals + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), +}) + +export const tanstackDocumentStateHandler: ServerFunction< + TanStackDocumentStateArgs, + Promise +> = async (args) => { + const { + account, + collectionSlug: collectionSlugFromArgs, + docID: docIDFromArgs, + documentSubViewType = 'default', + globalSlug: globalSlugFromArgs, + redirectAfterCreate, + req, + req: { + payload, + payload: { + config, + config: { + admin: { user: userSlug }, + routes: { admin: adminRoute, api: apiRoute }, + }, + }, + user, + }, + searchParams: _searchParams = {}, + segments, + versions: _versions, + } = args + + await canAccessAdmin({ req }) + + const collectionSlug = + account || (!collectionSlugFromArgs && !globalSlugFromArgs && documentSubViewType === 'default') + ? userSlug + : collectionSlugFromArgs + + const globalSlug = account ? undefined : globalSlugFromArgs + const docID = account ? user?.id : docIDFromArgs + + const collectionConfig = collectionSlug ? payload.collections[collectionSlug]?.config : undefined + const globalConfig = globalSlug + ? payload.config.globals.find((global) => global.slug === globalSlug) + : undefined + + if (!collectionConfig && !globalConfig) { + throw new Error('not-found') + } + + const visibleEntities = getVisibleEntities({ payload, user }) + + if ( + (collectionSlug && !visibleEntities.collections.includes(collectionSlug)) || + (globalSlug && !visibleEntities.globals.includes(globalSlug)) + ) { + throw new Error('not-found') + } + + const id = docID + const isEditing = getIsEditing({ id, collectionSlug, globalSlug }) + + const data = await getDocumentData({ + id, + collectionSlug, + globalSlug, + locale: req.locale, + payload, + req, + segments, + user, + }) + + if (isEditing && !data) { + if (collectionSlug) { + return { + hasPublishedDoc: false, + isLocked: false, + lastUpdateTime: Date.now(), + mostRecentVersionIsAutosaved: false, + redirectURL: formatAdminURL({ + adminRoute, + path: `/collections/${collectionSlug}?notFound=${encodeURIComponent(String(id))}`, + }), + unpublishedVersionCount: 0, + versionCount: 0, + } + } + + throw new Error('not-found') + } + + const docPreferences = await getDocPreferences({ + id, + collectionSlug, + globalSlug, + payload, + user, + }) + + const { + docPermissions, + hasDeletePermission, + hasPublishPermission, + hasSavePermission, + hasTrashPermission, + } = await getDocumentPermissions({ + id, + collectionConfig, + data, + globalConfig, + req, + }) + + let resolvedData = data + let resolvedID = id + + const shouldAutosave = + hasSavePermission && hasAutosaveEnabled(collectionConfig || globalConfig) && collectionSlug + const validateDraftData = + typeof collectionConfig?.versions?.drafts === 'object' && + collectionConfig.versions.drafts?.validate + + if (shouldAutosave && !validateDraftData && !id && collectionSlug) { + const createdDoc = await payload.create({ + collection: collectionSlug, + data: resolvedData || {}, + depth: 0, + draft: true, + fallbackLocale: false, + locale: req.locale, + req, + user, + }) + + if (createdDoc?.id) { + resolvedData = createdDoc + resolvedID = createdDoc.id + + if (redirectAfterCreate !== false) { + return { + hasPublishedDoc: false, + isLocked: false, + lastUpdateTime: Date.now(), + mostRecentVersionIsAutosaved: false, + redirectURL: formatAdminURL({ + adminRoute, + path: `/collections/${collectionSlug}/${createdDoc.id}`, + }), + unpublishedVersionCount: 0, + versionCount: 0, + } + } + } + } + + const operation = (collectionSlug && resolvedID) || globalSlug ? 'update' : 'create' + + const { state } = await buildFormState({ + id: resolvedID, + collectionSlug, + data: resolvedData, + docPermissions, + docPreferences, + fallbackLocale: false, + globalSlug, + locale: req.locale, + operation, + readOnly: false, + renderAllFields: true, + req, + schemaPath: collectionSlug || globalSlug, + skipValidation: true, + }) + + const { currentEditor, isLocked, lastUpdateTime } = await getIsLocked({ + id: resolvedID, + collectionConfig, + globalConfig, + isEditing: Boolean((collectionSlug && resolvedID) || globalSlug), + req, + }) + + const { hasPublishedDoc, mostRecentVersionIsAutosaved, unpublishedVersionCount, versionCount } = + await getVersions({ + id: resolvedID, + collectionConfig, + doc: resolvedData, + docPermissions, + globalConfig, + locale: req.locale, + payload, + user, + }) + + const formattedParams = new URLSearchParams() + + if (hasDraftsEnabled(collectionConfig || globalConfig)) { + formattedParams.append('draft', 'true') + } + + if (req.locale) { + formattedParams.append('locale', req.locale) + } + + const apiQueryParams = `?${formattedParams.toString()}` + const apiURL = formatAdminURL({ + apiRoute, + path: collectionSlug + ? `/${collectionSlug}/${resolvedID}${apiQueryParams}` + : globalSlug + ? `/${globalSlug}${apiQueryParams}` + : '', + }) + + const { isLivePreviewEnabled, livePreviewConfig, livePreviewURL } = await handleLivePreview({ + collectionSlug, + config, + data: resolvedData, + globalSlug, + operation, + req, + }) + + const { isPreviewEnabled, previewURL } = await handlePreview({ + collectionSlug, + config, + data: resolvedData, + globalSlug, + operation, + req, + }) + + return { + id: resolvedID, + apiURL, + collectionSlug, + currentEditor, + docPermissions, + globalSlug, + hasDeletePermission, + hasPublishedDoc, + hasPublishPermission, + hasSavePermission, + hasTrashPermission, + hideTabs: account, + initialData: resolvedData, + initialState: reduceToSerializableFields(state) as DocumentViewClientProps['formState'], + isEditing: Boolean((collectionSlug && resolvedID) || globalSlug), + isLivePreviewEnabled: isLivePreviewEnabled && operation !== 'create', + isLocked, + isPreviewEnabled: Boolean(isPreviewEnabled), + isTrashed: Boolean(resolvedData && 'deletedAt' in resolvedData && resolvedData.deletedAt), + lastUpdateTime, + livePreviewBreakpoints: livePreviewConfig?.breakpoints, + livePreviewURL, + mostRecentVersionIsAutosaved, + previewURL, + typeofLivePreviewURL: typeof livePreviewConfig?.url as 'function' | 'string' | undefined, + unpublishedVersionCount, + versionCount, + } +} diff --git a/packages/tanstack-start/src/views/Root/types.ts b/packages/tanstack-start/src/views/Root/types.ts new file mode 100644 index 00000000000..9b6f734aef0 --- /dev/null +++ b/packages/tanstack-start/src/views/Root/types.ts @@ -0,0 +1,152 @@ +import type { + ClientConfig, + CollectionPreferences, + ColumnPreference, + DocumentSubViewTypes, + DocumentViewClientProps, + Locale, + NavPreferences, + PaginatedDocs, + PayloadComponent, + QueryPreset, + ResolvedFilterOptions, + SanitizedCollectionPermission, + SanitizedPermissions, + SelectType, + StaticDescription, + ViewTypes, + VisibleEntities, + Where, +} from 'payload' + +export type SerializableRouteParams = { + collection?: string + folderCollection?: string + folderID?: number | string + global?: string + id?: number | string + token?: string + versionID?: number | string +} + +export type LoginPageData = { + prefillEmail?: string + prefillPassword?: string + prefillUsername?: string +} + +export type CreateFirstUserPageData = { + docPermissions: Record + docPreferences: Record + initialState: Record + loginWithUsername?: false | Record + userSlug: string +} + +export type VerifyPageData = { + isVerified: boolean + message: string +} + +export type DashboardLayoutItem = { + data?: Record + id: string + maxWidth: string + minWidth: string + width: string +} + +export type DashboardPageData = { + layoutItems: DashboardLayoutItem[] +} + +export type ListPageData = { + collectionPreferences: CollectionPreferences + collectionSlug: string + columns: ColumnPreference[] + data: PaginatedDocs + hasCreatePermission: boolean + hasDeletePermission: boolean + hasTrashPermission: boolean + isGroupBy: boolean + newDocumentURL: string + notFoundDocId: null | string + orderableFieldName: string | undefined + query: Record + queryPreset?: QueryPreset + queryPresetPermissions?: SanitizedCollectionPermission + resolvedFilterOptions: Record + select: SelectType | undefined + staticDescription: StaticDescription + viewType: undefined | ViewTypes + where: Where +} + +export type DocumentPageData = { + apiURL?: string + collectionSlug?: string + currentEditor?: unknown + docPermissions?: Record + globalSlug?: string + hasDeletePermission?: boolean + hasPublishedDoc: boolean + hasPublishPermission?: boolean + hasSavePermission?: boolean + hasTrashPermission?: boolean + hideTabs?: boolean + id?: number | string + initialData?: Record + initialState?: DocumentViewClientProps['formState'] + isEditing?: boolean + isLivePreviewEnabled?: boolean + isLocked: boolean + isPreviewEnabled?: boolean + isTrashed?: boolean + lastUpdateTime: number + livePreviewBreakpoints?: unknown[] + livePreviewURL?: string + mostRecentVersionIsAutosaved: boolean + previewURL?: string + redirectURL?: string + typeofLivePreviewURL?: 'function' | 'string' + unpublishedVersionCount: number + versionCount: number +} + +export type SerializablePageData = { + createFirstUser?: CreateFirstUserPageData + dashboard?: DashboardPageData + document?: DocumentPageData + list?: ListPageData + login?: LoginPageData + verify?: VerifyPageData +} + +export type TanStackViewType = + | 'forgot' + | 'inactivity' + | 'login' + | 'logout' + | 'reset' + | 'unauthorized' + | ViewTypes + +export type SerializablePageState = { + browseByFolderSlugs: string[] + clientConfig: ClientConfig + customView?: PayloadComponent + documentSubViewType?: DocumentSubViewTypes + locale?: Locale + navPreferences?: NavPreferences + pageData?: SerializablePageData + permissions: SanitizedPermissions + routeParams: SerializableRouteParams + searchParams?: Record + segments: string[] + templateClassName: string + templateType?: 'default' | 'minimal' + unsupportedCustomView?: boolean + viewActions?: PayloadComponent[] + viewType?: TanStackViewType + visibleEntities: VisibleEntities +} diff --git a/packages/tanstack-start/src/views/TanStackAdminPage.tsx b/packages/tanstack-start/src/views/TanStackAdminPage.tsx new file mode 100644 index 00000000000..473b3a3ac53 --- /dev/null +++ b/packages/tanstack-start/src/views/TanStackAdminPage.tsx @@ -0,0 +1,123 @@ +'use client' + +import { AdminNavLinks, PageConfigProvider, useTranslation } from '@payloadcms/ui' +import { EntityType, groupNavItems } from '@payloadcms/ui/shared' +import { DefaultTemplateShell } from '@payloadcms/ui/templates/Default' +import { MinimalTemplate } from '@payloadcms/ui/templates/Minimal' +import React from 'react' + +import type { SerializablePageState } from './Root/types.js' + +import { getAuthViewByType } from './getAuthViewByType.js' +import { getDashboardViewByType } from './getDashboardViewByType.js' +import { getViewByType } from './getViewByType.js' +import { UnsupportedView } from './shared.js' + +function TanStackDefaultTemplate({ + children, + pageState, +}: { + children: React.ReactNode + pageState: SerializablePageState +}) { + const { i18n } = useTranslation() + + const groups = React.useMemo( + () => + groupNavItems( + [ + ...pageState.clientConfig.collections + .filter((collection) => pageState.visibleEntities.collections.includes(collection.slug)) + .map((entity) => ({ + type: EntityType.collection, + entity: entity as never, + })), + ...pageState.clientConfig.globals + .filter((global) => pageState.visibleEntities.globals.includes(global.slug)) + .map((entity) => ({ + type: EntityType.global, + entity: entity as never, + })), + ], + pageState.permissions, + i18n, + ), + [ + i18n, + pageState.clientConfig.collections, + pageState.clientConfig.globals, + pageState.permissions, + pageState.visibleEntities.collections, + pageState.visibleEntities.globals, + ], + ) + + return ( + + + + } + visibleEntities={pageState.visibleEntities} + > + {children} + + ) +} + +function renderView(pageState: SerializablePageState): React.ReactNode { + if (pageState.unsupportedCustomView || pageState.customView) { + return ( + + ) + } + + const AuthView = getAuthViewByType(pageState.viewType) + + if (AuthView) { + return + } + + const DashboardView = getDashboardViewByType(pageState.viewType) + + if (DashboardView) { + return + } + + const View = getViewByType(pageState.viewType) + + if (View) { + return + } + + return ( + + ) +} + +export function TanStackAdminPage({ pageState }: { pageState: SerializablePageState }) { + const content = renderView(pageState) + + return ( + + {!pageState.templateType && <>{content}} + {pageState.templateType === 'minimal' && ( + {content} + )} + {pageState.templateType === 'default' && ( + {content} + )} + + ) +} diff --git a/packages/tanstack-start/src/views/Unauthorized/index.tsx b/packages/tanstack-start/src/views/Unauthorized/index.tsx new file mode 100644 index 00000000000..8b1a597a6aa --- /dev/null +++ b/packages/tanstack-start/src/views/Unauthorized/index.tsx @@ -0,0 +1,30 @@ +import { Button, Gutter, useTranslation } from '@payloadcms/ui' +import { FormHeader } from '@payloadcms/ui/elements/FormHeader' +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +export function UnauthorizedView({ pageState }: { pageState: SerializablePageState }) { + const { t } = useTranslation() + + return ( + + + + + ) +} diff --git a/packages/tanstack-start/src/views/Verify/index.tsx b/packages/tanstack-start/src/views/Verify/index.tsx new file mode 100644 index 00000000000..77fb1f37c14 --- /dev/null +++ b/packages/tanstack-start/src/views/Verify/index.tsx @@ -0,0 +1,12 @@ +import { Gutter } from '@payloadcms/ui' +import React from 'react' + +import type { SerializablePageState } from '../Root/types.js' + +export function VerifyView({ pageState }: { pageState: SerializablePageState }) { + return ( + +

{pageState.pageData?.verify?.message}

+ + ) +} diff --git a/packages/tanstack-start/src/views/buildRenderViewArgs.spec.ts b/packages/tanstack-start/src/views/buildRenderViewArgs.spec.ts new file mode 100644 index 00000000000..489cd2e986d --- /dev/null +++ b/packages/tanstack-start/src/views/buildRenderViewArgs.spec.ts @@ -0,0 +1,68 @@ +import type { ListQuery } from 'payload' + +import { describe, expect, it } from 'vitest' + +import { buildRenderDocumentArgs, buildRenderListArgs } from './buildRenderViewArgs.js' + +describe('buildRenderViewArgs', () => { + it('should build render-list args for trash views', () => { + const query = { + limit: 10, + sort: '-createdAt', + } satisfies ListQuery + + expect( + buildRenderListArgs({ + pageState: { + searchParams: { + notFound: '123', + }, + routeParams: { + collection: 'posts', + }, + viewType: 'trash', + } as any, + query, + }), + ).toEqual({ + collectionSlug: 'posts', + enableRowSelections: true, + query, + searchParams: { + notFound: '123', + }, + trash: true, + viewType: 'trash', + }) + }) + + it('should build render-document args for global api views', () => { + expect( + buildRenderDocumentArgs({ + pageState: { + documentSubViewType: 'api', + routeParams: { + global: 'settings', + }, + searchParams: { + locale: 'en', + }, + segments: ['globals', 'settings', 'api'], + viewType: 'document', + } as any, + }), + ).toEqual({ + collectionSlug: 'settings', + docID: undefined, + documentSubViewType: 'api', + paramsOverride: { + segments: ['globals', 'settings', 'api'], + }, + redirectAfterCreate: false, + searchParams: { + locale: 'en', + }, + viewType: 'document', + }) + }) +}) diff --git a/packages/tanstack-start/src/views/buildRenderViewArgs.ts b/packages/tanstack-start/src/views/buildRenderViewArgs.ts new file mode 100644 index 00000000000..a1969f153bd --- /dev/null +++ b/packages/tanstack-start/src/views/buildRenderViewArgs.ts @@ -0,0 +1,70 @@ +import type { RenderListServerFnArgs, ServerFunctionsContextType } from '@payloadcms/ui' +import type { ListQuery, ViewTypes } from 'payload' + +import type { SerializablePageState } from './Root/types.js' + +export const buildRenderListArgs = (args: { + pageState: SerializablePageState + query: ListQuery +}): RenderListServerFnArgs => { + const { pageState, query } = args + + return { + collectionSlug: pageState.routeParams.collection, + enableRowSelections: true, + query, + searchParams: pageState.searchParams, + trash: pageState.viewType === 'trash', + viewType: pageState.viewType as ViewTypes, + } +} + +export const buildRenderDocumentArgs = (args: { + pageState: SerializablePageState +}): Parameters[0] => { + const { pageState } = args + + return { + collectionSlug: pageState.routeParams.collection || pageState.routeParams.global, + docID: pageState.routeParams.id, + documentSubViewType: pageState.documentSubViewType, + paramsOverride: { + segments: pageState.segments, + }, + redirectAfterCreate: false, + searchParams: pageState.searchParams, + viewType: pageState.viewType as ViewTypes, + } +} + +export const buildRenderBrowseFolderArgs = (args: { + pageState: SerializablePageState +}): { + browseByFolderSlugs?: string[] + folderID?: number | string + searchParams?: Record +} => { + const { pageState } = args + + return { + browseByFolderSlugs: pageState.browseByFolderSlugs, + folderID: pageState.routeParams.folderID, + searchParams: pageState.searchParams, + } +} + +export const buildRenderCollectionFolderArgs = (args: { + pageState: SerializablePageState +}): { + collectionSlug?: string + folderID?: number | string + searchParams?: Record +} => { + const { pageState } = args + + return { + collectionSlug: pageState.routeParams.collection, + folderID: pageState.routeParams.folderID, + searchParams: pageState.searchParams, + } +} diff --git a/packages/tanstack-start/src/views/getAuthViewByType.spec.ts b/packages/tanstack-start/src/views/getAuthViewByType.spec.ts new file mode 100644 index 00000000000..e002c05bf58 --- /dev/null +++ b/packages/tanstack-start/src/views/getAuthViewByType.spec.ts @@ -0,0 +1,30 @@ +import { describe, expect, it } from 'vitest' + +import { CreateFirstUserView } from './CreateFirstUser/index.js' +import { ForgotPasswordView } from './ForgotPassword/index.js' +import { getAuthViewByType } from './getAuthViewByType' +import { LoginView } from './Login/index.js' +import { LogoutView } from './Logout/index.js' +import { ResetPasswordView } from './ResetPassword/index.js' +import { UnauthorizedView } from './Unauthorized/index.js' +import { VerifyView } from './Verify/index.js' + +describe('getAuthViewByType', () => { + it('should return auth and minimal TanStack view components by view type', () => { + expect(getAuthViewByType('createFirstUser')).toBe(CreateFirstUserView) + expect(getAuthViewByType('forgot')).toBe(ForgotPasswordView) + expect(getAuthViewByType('inactivity')).toBe(LogoutView) + expect(getAuthViewByType('login')).toBe(LoginView) + expect(getAuthViewByType('logout')).toBe(LogoutView) + expect(getAuthViewByType('reset')).toBe(ResetPasswordView) + expect(getAuthViewByType('unauthorized')).toBe(UnauthorizedView) + expect(getAuthViewByType('verify')).toBe(VerifyView) + }) + + it('should return undefined for non-auth TanStack view types', () => { + expect(getAuthViewByType('dashboard')).toBeUndefined() + expect(getAuthViewByType('document')).toBeUndefined() + expect(getAuthViewByType('list')).toBeUndefined() + expect(getAuthViewByType(undefined)).toBeUndefined() + }) +}) diff --git a/packages/tanstack-start/src/views/getAuthViewByType.ts b/packages/tanstack-start/src/views/getAuthViewByType.ts new file mode 100644 index 00000000000..4e9f3ea5273 --- /dev/null +++ b/packages/tanstack-start/src/views/getAuthViewByType.ts @@ -0,0 +1,39 @@ +import type { ComponentType } from 'react' + +import type { SerializablePageState } from './Root/types.js' + +import { CreateFirstUserView } from './CreateFirstUser/index.js' +import { ForgotPasswordView } from './ForgotPassword/index.js' +import { LoginView } from './Login/index.js' +import { LogoutView } from './Logout/index.js' +import { ResetPasswordView } from './ResetPassword/index.js' +import { UnauthorizedView } from './Unauthorized/index.js' +import { VerifyView } from './Verify/index.js' + +type TanStackPageViewComponent = ComponentType<{ + pageState: SerializablePageState +}> + +export const getAuthViewByType = ( + viewType: SerializablePageState['viewType'], +): TanStackPageViewComponent | undefined => { + switch (viewType) { + case 'createFirstUser': + return CreateFirstUserView + case 'forgot': + return ForgotPasswordView + case 'inactivity': + case 'logout': + return LogoutView + case 'login': + return LoginView + case 'reset': + return ResetPasswordView + case 'unauthorized': + return UnauthorizedView + case 'verify': + return VerifyView + default: + return undefined + } +} diff --git a/packages/tanstack-start/src/views/getDashboardViewByType.spec.ts b/packages/tanstack-start/src/views/getDashboardViewByType.spec.ts new file mode 100644 index 00000000000..0d99d3b13e4 --- /dev/null +++ b/packages/tanstack-start/src/views/getDashboardViewByType.spec.ts @@ -0,0 +1,16 @@ +import { describe, expect, it } from 'vitest' + +import { DashboardView } from './Dashboard/index.js' +import { getDashboardViewByType } from './getDashboardViewByType.js' + +describe('getDashboardViewByType', () => { + it('should return the TanStack dashboard view component for dashboard routes', () => { + expect(getDashboardViewByType('dashboard')).toBe(DashboardView) + }) + + it('should return undefined for non-dashboard TanStack view types', () => { + expect(getDashboardViewByType('document')).toBeUndefined() + expect(getDashboardViewByType('list')).toBeUndefined() + expect(getDashboardViewByType(undefined)).toBeUndefined() + }) +}) diff --git a/packages/tanstack-start/src/views/getDashboardViewByType.ts b/packages/tanstack-start/src/views/getDashboardViewByType.ts new file mode 100644 index 00000000000..c4bd41041cd --- /dev/null +++ b/packages/tanstack-start/src/views/getDashboardViewByType.ts @@ -0,0 +1,20 @@ +import type { ComponentType } from 'react' + +import type { SerializablePageState } from './Root/types.js' + +import { DashboardView } from './Dashboard/index.js' + +type TanStackPageViewComponent = ComponentType<{ + pageState: SerializablePageState +}> + +export const getDashboardViewByType = ( + viewType: SerializablePageState['viewType'], +): TanStackPageViewComponent | undefined => { + switch (viewType) { + case 'dashboard': + return DashboardView + default: + return undefined + } +} diff --git a/packages/tanstack-start/src/views/getViewByType.spec.ts b/packages/tanstack-start/src/views/getViewByType.spec.ts new file mode 100644 index 00000000000..ba535f8cc4b --- /dev/null +++ b/packages/tanstack-start/src/views/getViewByType.spec.ts @@ -0,0 +1,27 @@ +import { describe, expect, it } from 'vitest' + +import { AccountView } from './Account/index.js' +import { BrowseByFolderView } from './BrowseByFolder/index.js' +import { CollectionFoldersView } from './CollectionFolders/index.js' +import { DocumentView } from './Document/index.js' +import { getViewByType } from './getViewByType.js' +import { ListView } from './List/index.js' + +describe('getViewByType', () => { + it('should return the correct TanStack view component for each view type', () => { + expect(getViewByType('account')).toBe(AccountView) + expect(getViewByType('collection-folders')).toBe(CollectionFoldersView) + expect(getViewByType('document')).toBe(DocumentView) + expect(getViewByType('folders')).toBe(BrowseByFolderView) + expect(getViewByType('list')).toBe(ListView) + expect(getViewByType('trash')).toBe(ListView) + expect(getViewByType('version')).toBe(DocumentView) + }) + + it('should return undefined for view types handled by other dispatchers', () => { + expect(getViewByType('dashboard')).toBeUndefined() + expect(getViewByType('login')).toBeUndefined() + expect(getViewByType('logout')).toBeUndefined() + expect(getViewByType(undefined)).toBeUndefined() + }) +}) diff --git a/packages/tanstack-start/src/views/getViewByType.ts b/packages/tanstack-start/src/views/getViewByType.ts new file mode 100644 index 00000000000..1f2e5bde6f9 --- /dev/null +++ b/packages/tanstack-start/src/views/getViewByType.ts @@ -0,0 +1,34 @@ +import type { ComponentType } from 'react' + +import type { SerializablePageState } from './Root/types.js' + +import { AccountView } from './Account/index.js' +import { BrowseByFolderView } from './BrowseByFolder/index.js' +import { CollectionFoldersView } from './CollectionFolders/index.js' +import { DocumentView } from './Document/index.js' +import { ListView } from './List/index.js' + +type TanStackPageViewComponent = ComponentType<{ + pageState: SerializablePageState +}> + +export const getViewByType = ( + viewType: SerializablePageState['viewType'], +): TanStackPageViewComponent | undefined => { + switch (viewType) { + case 'account': + return AccountView + case 'collection-folders': + return CollectionFoldersView + case 'document': + case 'version': + return DocumentView + case 'folders': + return BrowseByFolderView + case 'list': + case 'trash': + return ListView + default: + return undefined + } +} diff --git a/packages/tanstack-start/src/views/index.ts b/packages/tanstack-start/src/views/index.ts new file mode 100644 index 00000000000..e17d5db2295 --- /dev/null +++ b/packages/tanstack-start/src/views/index.ts @@ -0,0 +1 @@ +export { TanStackAdminPage } from './TanStackAdminPage.js' diff --git a/packages/tanstack-start/src/views/shared.tsx b/packages/tanstack-start/src/views/shared.tsx new file mode 100644 index 00000000000..93ff55baab3 --- /dev/null +++ b/packages/tanstack-start/src/views/shared.tsx @@ -0,0 +1,32 @@ +'use client' + +import { Gutter } from '@payloadcms/ui' +import { FormHeader } from '@payloadcms/ui/elements/FormHeader' +import React from 'react' + +export const getRedirectURL = (error: unknown): null | string => { + if (!error || typeof error !== 'object') { + return null + } + + if ('href' in error && typeof error.href === 'string') { + return error.href + } + + if ('to' in error && typeof error.to === 'string') { + return error.to + } + + return null +} + +export const isNotFoundError = (error: unknown): boolean => + error instanceof Error && error.message === 'not-found' + +export function UnsupportedView(props: { description: string; title: string }) { + return ( + + + + ) +} diff --git a/packages/tanstack-start/tsconfig.json b/packages/tanstack-start/tsconfig.json new file mode 100644 index 00000000000..9a64ab3e9ad --- /dev/null +++ b/packages/tanstack-start/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "strict": false, + "noUncheckedIndexedAccess": false + }, + "references": [ + { "path": "../payload" }, + { "path": "../ui" } + ] +} diff --git a/packages/ui/package.json b/packages/ui/package.json index 9684393c83a..5a7923ecc4f 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -51,6 +51,361 @@ "types": "./src/elements/RenderServerComponent/index.tsx", "default": "./src/elements/RenderServerComponent/index.tsx" }, + "./views/*": { + "import": "./src/views/*/index.tsx", + "types": "./src/views/*/index.tsx", + "default": "./src/views/*/index.tsx" + }, + "./views/Root/getRouteData": { + "import": "./src/views/Root/getRouteData.ts", + "types": "./src/views/Root/getRouteData.ts", + "default": "./src/views/Root/getRouteData.ts" + }, + "./views/Root/getRootPageDescriptor": { + "import": "./src/views/Root/getRootPageDescriptor.ts", + "types": "./src/views/Root/getRootPageDescriptor.ts", + "default": "./src/views/Root/getRootPageDescriptor.ts" + }, + "./views/Document/getDocumentData": { + "import": "./src/views/Document/getDocumentData.ts", + "types": "./src/views/Document/getDocumentData.ts", + "default": "./src/views/Document/getDocumentData.ts" + }, + "./views/Document/getDocPreferences": { + "import": "./src/views/Document/getDocPreferences.ts", + "types": "./src/views/Document/getDocPreferences.ts", + "default": "./src/views/Document/getDocPreferences.ts" + }, + "./views/Document/getDocumentPermissions": { + "import": "./src/views/Document/getDocumentPermissions.tsx", + "types": "./src/views/Document/getDocumentPermissions.tsx", + "default": "./src/views/Document/getDocumentPermissions.tsx" + }, + "./views/Document/getIsLocked": { + "import": "./src/views/Document/getIsLocked.ts", + "types": "./src/views/Document/getIsLocked.ts", + "default": "./src/views/Document/getIsLocked.ts" + }, + "./views/Document/getVersions": { + "import": "./src/views/Document/getVersions.ts", + "types": "./src/views/Document/getVersions.ts", + "default": "./src/views/Document/getVersions.ts" + }, + "./views/Document/getCustomDocumentViewByKey": { + "import": "./src/views/Document/getCustomDocumentViewByKey.tsx", + "types": "./src/views/Document/getCustomDocumentViewByKey.tsx", + "default": "./src/views/Document/getCustomDocumentViewByKey.tsx" + }, + "./views/Document/getCustomViewByRoute": { + "import": "./src/views/Document/getCustomViewByRoute.tsx", + "types": "./src/views/Document/getCustomViewByRoute.tsx", + "default": "./src/views/Document/getCustomViewByRoute.tsx" + }, + "./views/Document/renderDocumentSlots": { + "import": "./src/views/Document/renderDocumentSlots.tsx", + "types": "./src/views/Document/renderDocumentSlots.tsx", + "default": "./src/views/Document/renderDocumentSlots.tsx" + }, + "./views/Document/RenderDocument": { + "import": "./src/views/Document/RenderDocument.tsx", + "types": "./src/views/Document/RenderDocument.tsx", + "default": "./src/views/Document/RenderDocument.tsx" + }, + "./views/Document/getDocumentView": { + "import": "./src/views/Document/getDocumentView.tsx", + "types": "./src/views/Document/getDocumentView.tsx", + "default": "./src/views/Document/getDocumentView.tsx" + }, + "./views/Document/handleServerFunction": { + "import": "./src/views/Document/handleServerFunction.tsx", + "types": "./src/views/Document/handleServerFunction.tsx", + "default": "./src/views/Document/handleServerFunction.tsx" + }, + "./views/List/handleServerFunction": { + "import": "./src/views/List/handleServerFunction.tsx", + "types": "./src/views/List/handleServerFunction.tsx", + "default": "./src/views/List/handleServerFunction.tsx" + }, + "./views/List/fetchListViewData": { + "import": "./src/views/List/fetchListViewData.ts", + "types": "./src/views/List/fetchListViewData.ts", + "default": "./src/views/List/fetchListViewData.ts" + }, + "./views/Version": { + "import": "./src/views/Version/index.tsx", + "types": "./src/views/Version/index.tsx", + "default": "./src/views/Version/index.tsx" + }, + "./views/Version/RenderVersion": { + "import": "./src/views/Version/RenderVersion.tsx", + "types": "./src/views/Version/RenderVersion.tsx", + "default": "./src/views/Version/RenderVersion.tsx" + }, + "./views/Versions": { + "import": "./src/views/Versions/index.tsx", + "types": "./src/views/Versions/index.tsx", + "default": "./src/views/Versions/index.tsx" + }, + "./views/Versions/RenderVersions": { + "import": "./src/views/Versions/RenderVersions.tsx", + "types": "./src/views/Versions/RenderVersions.tsx", + "default": "./src/views/Versions/RenderVersions.tsx" + }, + "./views/Account/RenderAccount": { + "import": "./src/views/Account/RenderAccount.tsx", + "types": "./src/views/Account/RenderAccount.tsx", + "default": "./src/views/Account/RenderAccount.tsx" + }, + "./views/Root/RenderRoot": { + "import": "./src/views/Root/RenderRoot.tsx", + "types": "./src/views/Root/RenderRoot.tsx", + "default": "./src/views/Root/RenderRoot.tsx" + }, + "./views/Version/fetchVersions": { + "import": "./src/views/Version/fetchVersions.ts", + "types": "./src/views/Version/fetchVersions.ts", + "default": "./src/views/Version/fetchVersions.ts" + }, + "./views/Version/RenderFieldsToDiff/DiffCollapser/index": { + "import": "./src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff": { + "import": "./src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx" + }, + "./views/Version/RenderFieldsToDiff/buildVersionFields": { + "import": "./src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Collapsible/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Date/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Group/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Iterable/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts" + }, + "./views/Version/RenderFieldsToDiff/fields/Relationship/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Row/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Select/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Tabs/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Text/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/Upload/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/fields/index": { + "import": "./src/views/Version/RenderFieldsToDiff/fields/index.ts", + "types": "./src/views/Version/RenderFieldsToDiff/fields/index.ts", + "default": "./src/views/Version/RenderFieldsToDiff/fields/index.ts" + }, + "./views/Version/RenderFieldsToDiff/index": { + "import": "./src/views/Version/RenderFieldsToDiff/index.tsx", + "types": "./src/views/Version/RenderFieldsToDiff/index.tsx", + "default": "./src/views/Version/RenderFieldsToDiff/index.tsx" + }, + "./views/Version/RenderFieldsToDiff/utilities/countChangedFields": { + "import": "./src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts", + "types": "./src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts", + "default": "./src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts" + }, + "./views/Version/RenderFieldsToDiff/utilities/fieldHasChanges": { + "import": "./src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts", + "types": "./src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts", + "default": "./src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts" + }, + "./views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison": { + "import": "./src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts", + "types": "./src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts", + "default": "./src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts" + }, + "./views/Version/SelectComparison/VersionDrawer/CreatedAtCell": { + "import": "./src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx", + "types": "./src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx", + "default": "./src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx" + }, + "./views/Version/SelectComparison/VersionDrawer/index": { + "import": "./src/views/Version/SelectComparison/VersionDrawer/index.tsx", + "types": "./src/views/Version/SelectComparison/VersionDrawer/index.tsx", + "default": "./src/views/Version/SelectComparison/VersionDrawer/index.tsx" + }, + "./views/Version/SelectComparison/index": { + "import": "./src/views/Version/SelectComparison/index.tsx", + "types": "./src/views/Version/SelectComparison/index.tsx", + "default": "./src/views/Version/SelectComparison/index.tsx" + }, + "./views/Version/SelectComparison/types": { + "import": "./src/views/Version/SelectComparison/types.ts", + "types": "./src/views/Version/SelectComparison/types.ts", + "default": "./src/views/Version/SelectComparison/types.ts" + }, + "./views/Version/VersionPillLabel/VersionPillLabel": { + "import": "./src/views/Version/VersionPillLabel/VersionPillLabel.tsx", + "types": "./src/views/Version/VersionPillLabel/VersionPillLabel.tsx", + "default": "./src/views/Version/VersionPillLabel/VersionPillLabel.tsx" + }, + "./views/Version/VersionPillLabel/getVersionLabel": { + "import": "./src/views/Version/VersionPillLabel/getVersionLabel.ts", + "types": "./src/views/Version/VersionPillLabel/getVersionLabel.ts", + "default": "./src/views/Version/VersionPillLabel/getVersionLabel.ts" + }, + "./views/Version/Default/SelectedLocalesContext": { + "import": "./src/views/Version/Default/SelectedLocalesContext.tsx", + "types": "./src/views/Version/Default/SelectedLocalesContext.tsx", + "default": "./src/views/Version/Default/SelectedLocalesContext.tsx" + }, + "./views/Version/Default/SetStepNav": { + "import": "./src/views/Version/Default/SetStepNav.tsx", + "types": "./src/views/Version/Default/SetStepNav.tsx", + "default": "./src/views/Version/Default/SetStepNav.tsx" + }, + "./views/Version/Default/types": { + "import": "./src/views/Version/Default/types.ts", + "types": "./src/views/Version/Default/types.ts", + "default": "./src/views/Version/Default/types.ts" + }, + "./views/Versions/buildColumns": { + "import": "./src/views/Versions/buildColumns.tsx", + "types": "./src/views/Versions/buildColumns.tsx", + "default": "./src/views/Versions/buildColumns.tsx" + }, + "./views/Versions/index.client": { + "import": "./src/views/Versions/index.client.tsx", + "types": "./src/views/Versions/index.client.tsx", + "default": "./src/views/Versions/index.client.tsx" + }, + "./views/Versions/cells/AutosaveCell/index": { + "import": "./src/views/Versions/cells/AutosaveCell/index.tsx", + "types": "./src/views/Versions/cells/AutosaveCell/index.tsx", + "default": "./src/views/Versions/cells/AutosaveCell/index.tsx" + }, + "./views/Versions/cells/CreatedAt/index": { + "import": "./src/views/Versions/cells/CreatedAt/index.tsx", + "types": "./src/views/Versions/cells/CreatedAt/index.tsx", + "default": "./src/views/Versions/cells/CreatedAt/index.tsx" + }, + "./views/Versions/cells/ID/index": { + "import": "./src/views/Versions/cells/ID/index.tsx", + "types": "./src/views/Versions/cells/ID/index.tsx", + "default": "./src/views/Versions/cells/ID/index.tsx" + }, + "./views/Account/index.client": { + "import": "./src/views/Account/index.client.tsx", + "types": "./src/views/Account/index.client.tsx", + "default": "./src/views/Account/index.client.tsx" + }, + "./views/Account/ResetPreferences/index": { + "import": "./src/views/Account/ResetPreferences/index.tsx", + "types": "./src/views/Account/ResetPreferences/index.tsx", + "default": "./src/views/Account/ResetPreferences/index.tsx" + }, + "./views/Account/Settings/LanguageSelector": { + "import": "./src/views/Account/Settings/LanguageSelector.tsx", + "types": "./src/views/Account/Settings/LanguageSelector.tsx", + "default": "./src/views/Account/Settings/LanguageSelector.tsx" + }, + "./views/Account/Settings/index": { + "import": "./src/views/Account/Settings/index.tsx", + "types": "./src/views/Account/Settings/index.tsx", + "default": "./src/views/Account/Settings/index.tsx" + }, + "./views/Account/ToggleTheme/index": { + "import": "./src/views/Account/ToggleTheme/index.tsx", + "types": "./src/views/Account/ToggleTheme/index.tsx", + "default": "./src/views/Account/ToggleTheme/index.tsx" + }, + "./views/List/createSerializableValue": { + "import": "./src/views/List/createSerializableValue.ts", + "types": "./src/views/List/createSerializableValue.ts", + "default": "./src/views/List/createSerializableValue.ts" + }, + "./views/List/enrichDocsWithVersionStatus": { + "import": "./src/views/List/enrichDocsWithVersionStatus.ts", + "types": "./src/views/List/enrichDocsWithVersionStatus.ts", + "default": "./src/views/List/enrichDocsWithVersionStatus.ts" + }, + "./views/List/extractRelationshipDisplayValue": { + "import": "./src/views/List/extractRelationshipDisplayValue.ts", + "types": "./src/views/List/extractRelationshipDisplayValue.ts", + "default": "./src/views/List/extractRelationshipDisplayValue.ts" + }, + "./views/List/extractValueOrRelationshipID": { + "import": "./src/views/List/extractValueOrRelationshipID.ts", + "types": "./src/views/List/extractValueOrRelationshipID.ts", + "default": "./src/views/List/extractValueOrRelationshipID.ts" + }, + "./views/List/handleGroupBy": { + "import": "./src/views/List/handleGroupBy.ts", + "types": "./src/views/List/handleGroupBy.ts", + "default": "./src/views/List/handleGroupBy.ts" + }, + "./views/List/renderListViewSlots": { + "import": "./src/views/List/renderListViewSlots.tsx", + "types": "./src/views/List/renderListViewSlots.tsx", + "default": "./src/views/List/renderListViewSlots.tsx" + }, + "./views/List/resolveAllFilterOptions": { + "import": "./src/views/List/resolveAllFilterOptions.ts", + "types": "./src/views/List/resolveAllFilterOptions.ts", + "default": "./src/views/List/resolveAllFilterOptions.ts" + }, + "./views/List/transformColumnsToSelect": { + "import": "./src/views/List/transformColumnsToSelect.ts", + "types": "./src/views/List/transformColumnsToSelect.ts", + "default": "./src/views/List/transformColumnsToSelect.ts" + }, + "./views/List/RenderListView": { + "import": "./src/views/List/RenderListView.tsx", + "types": "./src/views/List/RenderListView.tsx", + "default": "./src/views/List/RenderListView.tsx" + }, + "./templates/*": { + "import": "./src/templates/*/index.tsx", + "types": "./src/templates/*/index.tsx", + "default": "./src/templates/*/index.tsx" + }, "./rsc": { "import": "./src/exports/rsc/index.ts", "types": "./src/exports/rsc/index.ts", @@ -91,11 +446,86 @@ "types": "./src/utilities/getClientConfig.ts", "default": "./src/utilities/getClientConfig.ts" }, + "./utilities/createViewRenderer": { + "import": "./src/utilities/createViewRenderer.ts", + "types": "./src/utilities/createViewRenderer.ts", + "default": "./src/utilities/createViewRenderer.ts" + }, + "./utilities/getPreferences": { + "import": "./src/utilities/getPreferences.ts", + "types": "./src/utilities/getPreferences.ts", + "default": "./src/utilities/getPreferences.ts" + }, + "./utilities/getVisibleEntities": { + "import": "./src/utilities/getVisibleEntities.ts", + "types": "./src/utilities/getVisibleEntities.ts", + "default": "./src/utilities/getVisibleEntities.ts" + }, "./utilities/buildFieldSchemaMap/traverseFields": { "import": "./src/utilities/buildFieldSchemaMap/traverseFields.ts", "types": "./src/utilities/buildFieldSchemaMap/traverseFields.ts", "default": "./src/utilities/buildFieldSchemaMap/traverseFields.ts" }, + "./utilities/selectiveCache": { + "import": "./src/utilities/selectiveCache.ts", + "types": "./src/utilities/selectiveCache.ts", + "default": "./src/utilities/selectiveCache.ts" + }, + "./utilities/getRequestLocale": { + "import": "./src/utilities/getRequestLocale.ts", + "types": "./src/utilities/getRequestLocale.ts", + "default": "./src/utilities/getRequestLocale.ts" + }, + "./utilities/handleAuthRedirect": { + "import": "./src/utilities/handleAuthRedirect.ts", + "types": "./src/utilities/handleAuthRedirect.ts", + "default": "./src/utilities/handleAuthRedirect.ts" + }, + "./utilities/handleLivePreview": { + "import": "./src/utilities/handleLivePreview.ts", + "types": "./src/utilities/handleLivePreview.ts", + "default": "./src/utilities/handleLivePreview.ts" + }, + "./utilities/handlePreview": { + "import": "./src/utilities/handlePreview.ts", + "types": "./src/utilities/handlePreview.ts", + "default": "./src/utilities/handlePreview.ts" + }, + "./utilities/isCustomAdminView": { + "import": "./src/utilities/isCustomAdminView.ts", + "types": "./src/utilities/isCustomAdminView.ts", + "default": "./src/utilities/isCustomAdminView.ts" + }, + "./utilities/isEditing": { + "import": "./src/utilities/isEditing.ts", + "types": "./src/utilities/isEditing.ts", + "default": "./src/utilities/isEditing.ts" + }, + "./utilities/isPublicAdminRoute": { + "import": "./src/utilities/isPublicAdminRoute.ts", + "types": "./src/utilities/isPublicAdminRoute.ts", + "default": "./src/utilities/isPublicAdminRoute.ts" + }, + "./utilities/getRouteWithoutAdmin": { + "import": "./src/utilities/getRouteWithoutAdmin.ts", + "types": "./src/utilities/getRouteWithoutAdmin.ts", + "default": "./src/utilities/getRouteWithoutAdmin.ts" + }, + "./utilities/timestamp": { + "import": "./src/utilities/timestamp.ts", + "types": "./src/utilities/timestamp.ts", + "default": "./src/utilities/timestamp.ts" + }, + "./utilities/slugify": { + "import": "./src/utilities/slugify.ts", + "types": "./src/utilities/slugify.ts", + "default": "./src/utilities/slugify.ts" + }, + "./utilities/handleServerFunctions": { + "import": "./src/utilities/handleServerFunctions.ts", + "types": "./src/utilities/handleServerFunctions.ts", + "default": "./src/utilities/handleServerFunctions.ts" + }, "./forms/fieldSchemasToFormState": { "import": "./src/forms/fieldSchemasToFormState/index.tsx", "types": "./src/forms/fieldSchemasToFormState/index.tsx", @@ -139,6 +569,7 @@ "dependencies": { "@date-fns/tz": "1.2.0", "@dnd-kit/core": "6.3.1", + "@dnd-kit/modifiers": "9.0.0", "@dnd-kit/sortable": "10.0.0", "@dnd-kit/utilities": "3.2.2", "@faceless-ui/modal": "3.0.0", @@ -151,6 +582,7 @@ "dequal": "2.0.3", "md5": "2.3.0", "object-to-formdata": "4.5.1", + "path-to-regexp": "6.3.0", "qs-esm": "8.0.1", "react-datepicker": "7.6.0", "react-image-crop": "10.1.8", @@ -272,6 +704,16 @@ "import": "./dist/utilities/*.js", "types": "./dist/utilities/*.d.ts", "default": "./dist/utilities/*.js" + }, + "./views/Root/getRootPageDescriptor": { + "import": "./dist/views/Root/getRootPageDescriptor.js", + "types": "./dist/views/Root/getRootPageDescriptor.d.ts", + "default": "./dist/views/Root/getRootPageDescriptor.js" + }, + "./views/List/fetchListViewData": { + "import": "./dist/views/List/fetchListViewData.js", + "types": "./dist/views/List/fetchListViewData.d.ts", + "default": "./dist/views/List/fetchListViewData.js" } }, "main": "./dist/exports/client/index.js", diff --git a/packages/ui/src/elements/CloseModalOnRouteChange/index.tsx b/packages/ui/src/elements/CloseModalOnRouteChange/index.tsx index 551ebecfd46..c673657b610 100644 --- a/packages/ui/src/elements/CloseModalOnRouteChange/index.tsx +++ b/packages/ui/src/elements/CloseModalOnRouteChange/index.tsx @@ -1,10 +1,10 @@ 'use client' import { useModal } from '@faceless-ui/modal' -import { usePathname } from 'next/navigation.js' import { useEffect, useRef } from 'react' import { useEffectEvent } from '../../hooks/useEffectEvent.js' +import { usePathname } from '../../providers/Router/index.js' export function CloseModalOnRouteChange() { const { closeAllModals } = useModal() diff --git a/packages/ui/src/elements/CopyLocaleData/index.tsx b/packages/ui/src/elements/CopyLocaleData/index.tsx index 544f22ab032..1af9a773dc8 100644 --- a/packages/ui/src/elements/CopyLocaleData/index.tsx +++ b/packages/ui/src/elements/CopyLocaleData/index.tsx @@ -2,7 +2,6 @@ import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import React, { useCallback } from 'react' import { toast } from 'sonner' @@ -13,6 +12,7 @@ import { useFormModified } from '../../forms/Form/context.js' import { useConfig } from '../../providers/Config/index.js' import { useDocumentInfo } from '../../providers/DocumentInfo/index.js' import { useLocale } from '../../providers/Locale/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useServerFunctions } from '../../providers/ServerFunctions/index.js' import { useTranslation } from '../../providers/Translation/index.js' diff --git a/packages/ui/src/elements/DefaultListViewTabs/index.tsx b/packages/ui/src/elements/DefaultListViewTabs/index.tsx index a363259c153..fa1ad3c65e3 100644 --- a/packages/ui/src/elements/DefaultListViewTabs/index.tsx +++ b/packages/ui/src/elements/DefaultListViewTabs/index.tsx @@ -3,11 +3,11 @@ import type { ClientCollectionConfig, ClientConfig, ViewTypes } from 'payload' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import React from 'react' import { usePreferences } from '../../providers/Preferences/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { Button } from '../Button/index.js' import './index.scss' diff --git a/packages/ui/src/elements/DeleteDocument/index.tsx b/packages/ui/src/elements/DeleteDocument/index.tsx index 4d546e1728c..6ecef20eec4 100644 --- a/packages/ui/src/elements/DeleteDocument/index.tsx +++ b/packages/ui/src/elements/DeleteDocument/index.tsx @@ -3,7 +3,6 @@ import type { SanitizedCollectionConfig } from 'payload' import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import React, { Fragment, useCallback, useState } from 'react' import { toast } from 'sonner' @@ -15,6 +14,7 @@ import { useForm } from '../../forms/Form/context.js' import { useConfig } from '../../providers/Config/index.js' import { useDocumentInfo } from '../../providers/DocumentInfo/index.js' import { useDocumentTitle } from '../../providers/DocumentTitle/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { requests } from '../../utilities/api.js' diff --git a/packages/ui/src/elements/DeleteMany/index.tsx b/packages/ui/src/elements/DeleteMany/index.tsx index 783a568b4ac..a7fa4a6081f 100644 --- a/packages/ui/src/elements/DeleteMany/index.tsx +++ b/packages/ui/src/elements/DeleteMany/index.tsx @@ -3,7 +3,6 @@ import type { ClientCollectionConfig, ViewTypes, Where } from 'payload' import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter, useSearchParams } from 'next/navigation.js' import { formatAdminURL, mergeListSearchAndWhere } from 'payload/shared' import * as qs from 'qs-esm' import React from 'react' @@ -14,6 +13,7 @@ import { useAuth } from '../../providers/Auth/index.js' import { useConfig } from '../../providers/Config/index.js' import { useLocale } from '../../providers/Locale/index.js' import { useRouteCache } from '../../providers/RouteCache/index.js' +import { useRouter, useSearchParams } from '../../providers/Router/index.js' import { SelectAllStatus, useSelection } from '../../providers/Selection/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { requests } from '../../utilities/api.js' diff --git a/packages/ui/src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx b/packages/ui/src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx new file mode 100644 index 00000000000..9df2e3f258b --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx @@ -0,0 +1,19 @@ +'use client' +import type React from 'react' + +import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js' + +export const ShouldRenderTabs: React.FC<{ + children: React.ReactNode +}> = ({ children }) => { + const { id: idFromContext, collectionSlug, globalSlug } = useDocumentInfo() + + const id = idFromContext !== 'create' ? idFromContext : null + + // Don't show tabs when creating new documents + if ((collectionSlug && id) || globalSlug) { + return children + } + + return null +} diff --git a/packages/ui/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx b/packages/ui/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx new file mode 100644 index 00000000000..39493666ca0 --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx @@ -0,0 +1,75 @@ +'use client' +import type { SanitizedConfig } from 'payload' + +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import { useParams } from '../../../../providers/Params/index.js' +import { usePathname, useSearchParams } from '../../../../providers/Router/index.js' +import { Button } from '../../../Button/index.js' + +export const DocumentTabLink: React.FC<{ + adminRoute: SanitizedConfig['routes']['admin'] + ariaLabel?: string + baseClass: string + children?: React.ReactNode + href: string + isActive?: boolean + newTab?: boolean +}> = ({ + adminRoute, + ariaLabel, + baseClass, + children, + href: hrefFromProps, + isActive: isActiveFromProps, + newTab, +}) => { + const pathname = usePathname() + const params = useParams() + + const searchParams = useSearchParams() + + const locale = searchParams.get('locale') + + const [entityType, entitySlug, segmentThree, segmentFour, ...rest] = params.segments || [] + const isCollection = entityType === 'collections' + + let docPath = formatAdminURL({ + adminRoute, + path: `/${isCollection ? 'collections' : 'globals'}/${entitySlug}`, + }) + + if (isCollection) { + if (segmentThree === 'trash' && segmentFour) { + docPath += `/trash/${segmentFour}` + } else if (segmentThree) { + docPath += `/${segmentThree}` + } + } + + const href = `${docPath}${hrefFromProps}` + // separated the two so it doesn't break checks against pathname + const hrefWithLocale = `${href}${locale ? `?locale=${locale}` : ''}` + + const isActive = + (href === docPath && pathname === docPath) || + (href !== docPath && pathname.startsWith(href)) || + isActiveFromProps + + return ( + + ) +} diff --git a/packages/ui/src/elements/DocumentHeader/Tabs/Tab/index.scss b/packages/ui/src/elements/DocumentHeader/Tabs/Tab/index.scss new file mode 100644 index 00000000000..07b5ce221b1 --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/Tabs/Tab/index.scss @@ -0,0 +1,38 @@ +@import '../../../../scss/styles.scss'; + +@layer payload-default { + .doc-tab { + display: flex; + justify-content: center; + align-items: center; + white-space: nowrap; + + &:hover { + .pill-version-count { + background-color: var(--theme-elevation-150); + } + } + + &--active { + .pill-version-count { + background-color: var(--theme-elevation-250); + } + + &:hover { + .pill-version-count { + background-color: var(--theme-elevation-250); + } + } + } + + &__label { + display: flex; + position: relative; + align-items: center; + gap: 4px; + width: 100%; + height: 100%; + line-height: calc(var(--base) * 1.2); + } + } +} diff --git a/packages/ui/src/elements/DocumentHeader/Tabs/Tab/index.tsx b/packages/ui/src/elements/DocumentHeader/Tabs/Tab/index.tsx new file mode 100644 index 00000000000..44006223d66 --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/Tabs/Tab/index.tsx @@ -0,0 +1,93 @@ +import type { + DocumentTabConfig, + DocumentTabServerPropsOnly, + PayloadRequest, + SanitizedCollectionConfig, + SanitizedGlobalConfig, + SanitizedPermissions, +} from 'payload' +import type React from 'react' + +import { Fragment } from 'react' + +import { RenderServerComponent } from '../../../RenderServerComponent/index.js' +import { DocumentTabLink } from './TabLink.js' +import './index.scss' + +export const baseClass = 'doc-tab' + +export const DefaultDocumentTab: React.FC<{ + apiURL?: string + collectionConfig?: SanitizedCollectionConfig + globalConfig?: SanitizedGlobalConfig + path?: string + permissions?: SanitizedPermissions + req: PayloadRequest + tabConfig: { readonly Pill_Component?: React.FC } & DocumentTabConfig +}> = (props) => { + const { + apiURL, + collectionConfig, + globalConfig, + permissions, + req, + tabConfig: { href: tabHref, isActive: tabIsActive, label, newTab, Pill, Pill_Component }, + } = props + + let href = typeof tabHref === 'string' ? tabHref : '' + let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false + + if (typeof tabHref === 'function') { + href = tabHref({ + apiURL, + collection: collectionConfig, + global: globalConfig, + routes: req.payload.config.routes, + }) + } + + if (typeof tabIsActive === 'function') { + isActive = tabIsActive({ + href, + }) + } + + const labelToRender = + typeof label === 'function' + ? label({ + t: req.i18n.t, + }) + : label + + return ( + + + {labelToRender} + {Pill || Pill_Component ? ( + +   + {RenderServerComponent({ + Component: Pill, + Fallback: Pill_Component, + importMap: req.payload.importMap, + serverProps: { + i18n: req.i18n, + payload: req.payload, + permissions, + req, + user: req.user, + } satisfies DocumentTabServerPropsOnly, + })} + + ) : null} + + + ) +} diff --git a/packages/ui/src/elements/DocumentHeader/Tabs/index.scss b/packages/ui/src/elements/DocumentHeader/Tabs/index.scss new file mode 100644 index 00000000000..3a16014d8ce --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/Tabs/index.scss @@ -0,0 +1,54 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .doc-tabs { + display: flex; + + &__tabs { + display: flex; + gap: calc(var(--base) / 2); + list-style: none; + align-items: center; + margin: 0; + padding-left: 0; + } + + @include mid-break { + width: 100%; + padding: 0; + overflow: auto; + + // this container has a gradient overlay as visual indication of `overflow: scroll` + &::-webkit-scrollbar { + display: none; + } + + &::after { + content: ''; + display: block; + position: sticky; + right: 0; + width: calc(var(--base) * 2); + height: calc(var(--base) * 2); + background: linear-gradient(to right, transparent, var(--theme-bg)); + flex-shrink: 0; + z-index: 1111; + pointer-events: none; + } + + &__tabs { + padding: 0; + } + } + + @include small-break { + &__tabs-container { + margin-right: var(--gutter-h); + } + + &__tabs { + gap: var(--gutter-h); + } + } + } +} diff --git a/packages/ui/src/elements/DocumentHeader/Tabs/index.tsx b/packages/ui/src/elements/DocumentHeader/Tabs/index.tsx new file mode 100644 index 00000000000..cefbc3ac278 --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/Tabs/index.tsx @@ -0,0 +1,86 @@ +import type { + DocumentTabClientProps, + DocumentTabServerPropsOnly, + PayloadRequest, + SanitizedCollectionConfig, + SanitizedGlobalConfig, + SanitizedPermissions, +} from 'payload' + +import React from 'react' + +import { RenderServerComponent } from '../../RenderServerComponent/index.js' +import { ShouldRenderTabs } from './ShouldRenderTabs.js' +import { DefaultDocumentTab } from './Tab/index.js' +import { getTabs } from './tabs/index.js' +import './index.scss' + +const baseClass = 'doc-tabs' + +export const DocumentTabs: React.FC<{ + collectionConfig: SanitizedCollectionConfig + globalConfig: SanitizedGlobalConfig + permissions: SanitizedPermissions + req: PayloadRequest +}> = ({ collectionConfig, globalConfig, permissions, req }) => { + const { config } = req.payload + + const tabs = getTabs({ + collectionConfig, + globalConfig, + }) + + return ( + +
+
+
    + {tabs?.map(({ tab: tabConfig, viewPath }, index) => { + const { condition } = tabConfig || {} + + const meetsCondition = + !condition || + condition({ collectionConfig, config, globalConfig, permissions, req }) + + if (!meetsCondition) { + return null + } + + if (tabConfig?.Component) { + return RenderServerComponent({ + clientProps: { + path: viewPath, + } satisfies DocumentTabClientProps, + Component: tabConfig.Component, + importMap: req.payload.importMap, + key: `tab-${index}`, + serverProps: { + collectionConfig, + globalConfig, + i18n: req.i18n, + payload: req.payload, + permissions, + req, + user: req.user, + } satisfies DocumentTabServerPropsOnly, + }) + } + + return ( + + ) + })} +
+
+
+ + ) +} diff --git a/packages/ui/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.scss b/packages/ui/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.scss new file mode 100644 index 00000000000..e1183b6cdfc --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.scss @@ -0,0 +1,10 @@ +@layer payload-default { + .pill-version-count { + line-height: calc(var(--base) * 0.8); + min-width: calc(var(--base) * 0.8); + text-align: center; + background-color: var(--theme-elevation-100); + border-radius: var(--style-radius-s); + padding: 2px 4px; + } +} diff --git a/packages/ui/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx b/packages/ui/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx new file mode 100644 index 00000000000..d9c1c8f59a2 --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx @@ -0,0 +1,17 @@ +'use client' +import React from 'react' + +import { useDocumentInfo } from '../../../../../providers/DocumentInfo/index.js' +import './index.scss' + +const baseClass = 'pill-version-count' + +export const VersionsPill: React.FC = () => { + const { versionCount } = useDocumentInfo() + + if (!versionCount) { + return null + } + + return {versionCount} +} diff --git a/packages/ui/src/elements/DocumentHeader/Tabs/tabs/index.tsx b/packages/ui/src/elements/DocumentHeader/Tabs/tabs/index.tsx new file mode 100644 index 00000000000..8b28407d805 --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/Tabs/tabs/index.tsx @@ -0,0 +1,87 @@ +import type { DocumentTabConfig, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload' + +import { VersionsPill } from './VersionsPill/index.js' + +export const documentViewKeys = ['api', 'default', 'livePreview', 'versions'] + +export type DocumentViewKey = (typeof documentViewKeys)[number] + +export const getTabs = ({ + collectionConfig, + globalConfig, +}: { + collectionConfig?: SanitizedCollectionConfig + globalConfig?: SanitizedGlobalConfig +}): { tab: DocumentTabConfig; viewPath: string }[] => { + const customViews = + collectionConfig?.admin?.components?.views?.edit || + globalConfig?.admin?.components?.views?.edit || + {} + + return [ + { + tab: { + href: '', + label: ({ t }) => t('general:edit'), + order: 100, + ...(customViews?.['default']?.tab || {}), + }, + viewPath: '/', + }, + { + tab: { + condition: ({ collectionConfig, globalConfig, permissions }) => + Boolean( + (collectionConfig?.versions && + permissions?.collections?.[collectionConfig?.slug]?.readVersions) || + (globalConfig?.versions && permissions?.globals?.[globalConfig?.slug]?.readVersions), + ), + href: '/versions', + label: ({ t }) => t('version:versions'), + order: 300, + Pill_Component: VersionsPill, + ...(customViews?.['versions']?.tab || {}), + }, + viewPath: '/versions', + }, + { + tab: { + condition: ({ collectionConfig, globalConfig }) => + (collectionConfig && !collectionConfig?.admin?.hideAPIURL) || + (globalConfig && !globalConfig?.admin?.hideAPIURL), + href: '/api', + label: 'API', + order: 400, + ...(customViews?.['api']?.tab || {}), + }, + viewPath: '/api', + }, + ] + .concat( + Object.entries(customViews).reduce((acc, [key, value]) => { + if (documentViewKeys.includes(key)) { + return acc + } + + if (value?.tab) { + acc.push({ + tab: value.tab, + viewPath: 'path' in value ? value.path : '', + }) + } + + return acc + }, []), + ) + ?.sort(({ tab: a }, { tab: b }) => { + if (a.order === undefined && b.order === undefined) { + return 0 + } else if (a.order === undefined) { + return 1 + } else if (b.order === undefined) { + return -1 + } + + return a.order - b.order + }) +} diff --git a/packages/ui/src/elements/DocumentHeader/index.scss b/packages/ui/src/elements/DocumentHeader/index.scss new file mode 100644 index 00000000000..165da787d8f --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/index.scss @@ -0,0 +1,64 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .doc-header { + width: 100%; + margin-top: calc(var(--base) * 0.4); + padding-bottom: calc(var(--base) * 1.2); + position: relative; + + &::after { + content: ''; + display: block; + position: absolute; + height: 1px; + background: var(--theme-elevation-100); + width: 100%; + left: 0; + top: calc(100% - 1px); + } + + &__header { + display: flex; + align-items: center; + gap: calc(var(--base) / 2); + } + + &__title { + flex-grow: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0; + padding-bottom: calc(var(--base) * 0.4); + vertical-align: top; + padding-bottom: 0; + } + + &__after-header { + padding-top: calc(var(--base) * 0.8); + } + + @include mid-break { + margin-top: calc(var(--base) * 0.25); + padding-bottom: calc(var(--base) / 1.5); + + &__header { + flex-direction: column; + gap: calc(var(--base) / 2); + } + + &__title { + width: 100%; + } + + &__after-header { + padding-top: calc(var(--base) / 4); + } + } + + @include small-break { + margin-top: 0; + } + } +} diff --git a/packages/ui/src/elements/DocumentHeader/index.tsx b/packages/ui/src/elements/DocumentHeader/index.tsx new file mode 100644 index 00000000000..a1f88abcbb9 --- /dev/null +++ b/packages/ui/src/elements/DocumentHeader/index.tsx @@ -0,0 +1,46 @@ +import type { + PayloadRequest, + SanitizedCollectionConfig, + SanitizedGlobalConfig, + SanitizedPermissions, +} from 'payload' + +import React from 'react' + +import { Gutter } from '../Gutter/index.js' +import { RenderTitle } from '../RenderTitle/index.js' +import { DocumentTabs } from './Tabs/index.js' +import './index.scss' + +const baseClass = `doc-header` + +/** + * @internal + */ +export const DocumentHeader: React.FC<{ + AfterHeader?: React.ReactNode + collectionConfig?: SanitizedCollectionConfig + globalConfig?: SanitizedGlobalConfig + hideTabs?: boolean + permissions: SanitizedPermissions + req: PayloadRequest +}> = (props) => { + const { AfterHeader, collectionConfig, globalConfig, hideTabs, permissions, req } = props + + return ( + +
+ + {!hideTabs && ( + + )} +
+ {AfterHeader ?
{AfterHeader}
: null} + + ) +} diff --git a/packages/ui/src/elements/DuplicateDocument/index.tsx b/packages/ui/src/elements/DuplicateDocument/index.tsx index bdb500a5aa6..bc2922200e8 100644 --- a/packages/ui/src/elements/DuplicateDocument/index.tsx +++ b/packages/ui/src/elements/DuplicateDocument/index.tsx @@ -4,7 +4,6 @@ import type { SanitizedCollectionConfig } from 'payload' import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { formatAdminURL, hasDraftsEnabled } from 'payload/shared' import * as qs from 'qs-esm' import React, { useCallback, useMemo } from 'react' @@ -15,6 +14,7 @@ import type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js' import { useForm, useFormModified } from '../../forms/Form/context.js' import { useConfig } from '../../providers/Config/index.js' import { useLocale } from '../../providers/Locale/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { requests } from '../../utilities/api.js' diff --git a/packages/ui/src/elements/EditMany/DrawerContent.tsx b/packages/ui/src/elements/EditMany/DrawerContent.tsx index 526a79d7a57..17589c783a8 100644 --- a/packages/ui/src/elements/EditMany/DrawerContent.tsx +++ b/packages/ui/src/elements/EditMany/DrawerContent.tsx @@ -4,7 +4,6 @@ import type { SelectType, Where } from 'payload' import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter, useSearchParams } from 'next/navigation.js' import { combineWhereConstraints, formatAdminURL, @@ -28,6 +27,7 @@ import { useConfig } from '../../providers/Config/index.js' import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js' import { useLocale } from '../../providers/Locale/index.js' import { OperationContext } from '../../providers/Operation/index.js' +import { useRouter, useSearchParams } from '../../providers/Router/index.js' import { useServerFunctions } from '../../providers/ServerFunctions/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js' diff --git a/packages/ui/src/elements/FolderView/CurrentFolderActions/index.tsx b/packages/ui/src/elements/FolderView/CurrentFolderActions/index.tsx index cc77bd85335..1e4dd9e4ef1 100644 --- a/packages/ui/src/elements/FolderView/CurrentFolderActions/index.tsx +++ b/packages/ui/src/elements/FolderView/CurrentFolderActions/index.tsx @@ -1,6 +1,5 @@ import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import React from 'react' import { toast } from 'sonner' @@ -9,6 +8,7 @@ import { Dots } from '../../../icons/Dots/index.js' import { useConfig } from '../../../providers/Config/index.js' import { useFolder } from '../../../providers/Folders/index.js' import { useRouteCache } from '../../../providers/RouteCache/index.js' +import { useRouter } from '../../../providers/Router/index.js' import { useRouteTransition } from '../../../providers/RouteTransition/index.js' import { useTranslation } from '../../../providers/Translation/index.js' import { ConfirmationModal } from '../../ConfirmationModal/index.js' diff --git a/packages/ui/src/elements/FormHeader/index.scss b/packages/ui/src/elements/FormHeader/index.scss new file mode 100644 index 00000000000..88896041ca1 --- /dev/null +++ b/packages/ui/src/elements/FormHeader/index.scss @@ -0,0 +1,8 @@ +@layer payload-default { + .form-header { + display: flex; + flex-direction: column; + gap: calc(var(--base) * 0.5); + margin-bottom: var(--base); + } +} diff --git a/packages/ui/src/elements/FormHeader/index.tsx b/packages/ui/src/elements/FormHeader/index.tsx new file mode 100644 index 00000000000..22a07eb8f21 --- /dev/null +++ b/packages/ui/src/elements/FormHeader/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' + +import './index.scss' + +const baseClass = 'form-header' + +type Props = { + description?: React.ReactNode | string + heading: string +} +export function FormHeader({ description, heading }: Props) { + if (!heading) { + return null + } + + return ( +
+

{heading}

+ {Boolean(description) &&

{description}

} +
+ ) +} diff --git a/packages/ui/src/elements/LeaveWithoutSaving/usePreventLeave.tsx b/packages/ui/src/elements/LeaveWithoutSaving/usePreventLeave.tsx index 73f4ce5d8de..356b1aeb863 100644 --- a/packages/ui/src/elements/LeaveWithoutSaving/usePreventLeave.tsx +++ b/packages/ui/src/elements/LeaveWithoutSaving/usePreventLeave.tsx @@ -1,11 +1,11 @@ 'use client' +import { useCallback, useEffect, useRef } from 'react' + // Credit: @Taiki92777 // - Source: https://github.com/vercel/next.js/discussions/32231#discussioncomment-7284386 // Credit: `react-use` maintainers // - Source: https://github.com/streamich/react-use/blob/ade8d3905f544305515d010737b4ae604cc51024/src/useBeforeUnload.ts#L2 -import { useRouter } from 'next/navigation.js' -import { useCallback, useEffect, useRef } from 'react' - +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' function on( diff --git a/packages/ui/src/elements/Link/index.tsx b/packages/ui/src/elements/Link/index.tsx index 2090851d9c3..8beca2bbf91 100644 --- a/packages/ui/src/elements/Link/index.tsx +++ b/packages/ui/src/elements/Link/index.tsx @@ -1,8 +1,8 @@ 'use client' import NextLinkImport from 'next/link.js' -import { useRouter } from 'next/navigation.js' import React from 'react' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { formatUrl } from './formatUrl.js' diff --git a/packages/ui/src/elements/ListDrawer/types.ts b/packages/ui/src/elements/ListDrawer/types.ts index f9f54b906b2..b9059874d8a 100644 --- a/packages/ui/src/elements/ListDrawer/types.ts +++ b/packages/ui/src/elements/ListDrawer/types.ts @@ -2,7 +2,9 @@ import type { CollectionPreferences, FilterOptionsResult, ListQuery, + Params, SanitizedCollectionConfig, + ViewTypes, } from 'payload' import type React from 'react' import type { HTMLAttributes } from 'react' @@ -24,6 +26,9 @@ export type RenderListServerFnArgs = { query: ListQuery redirectAfterDelete?: boolean redirectAfterDuplicate?: boolean + searchParams?: Params + trash?: boolean + viewType?: ViewTypes } /** diff --git a/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx b/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx index dcdfa35e0e1..e9585ff1c26 100644 --- a/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx +++ b/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx @@ -2,10 +2,10 @@ import type { CollectionSlug } from 'payload' import { useModal } from '@faceless-ui/modal' -import { useRouter } from 'next/navigation.js' import React from 'react' import { useBulkUpload } from '../../../elements/BulkUpload/index.js' +import { useRouter } from '../../../providers/Router/index.js' import { useTranslation } from '../../../providers/Translation/index.js' import { Button } from '../../Button/index.js' diff --git a/packages/ui/src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx b/packages/ui/src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx index ffd23f208f1..d9916a91815 100644 --- a/packages/ui/src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx +++ b/packages/ui/src/elements/ListHeader/TitleActions/ListEmptyTrashButton.tsx @@ -3,7 +3,6 @@ import type { ClientCollectionConfig } from 'payload' import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter, useSearchParams } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import * as qs from 'qs-esm' import React from 'react' @@ -12,6 +11,7 @@ import { toast } from 'sonner' import { useConfig } from '../../../providers/Config/index.js' import { useLocale } from '../../../providers/Locale/index.js' import { useRouteCache } from '../../../providers/RouteCache/index.js' +import { useRouter, useSearchParams } from '../../../providers/Router/index.js' import { useTranslation } from '../../../providers/Translation/index.js' import { requests } from '../../../utilities/api.js' import { Button } from '../../Button/index.js' diff --git a/packages/ui/src/elements/Localizer/index.tsx b/packages/ui/src/elements/Localizer/index.tsx index 88b6a79160c..f78af6c29ea 100644 --- a/packages/ui/src/elements/Localizer/index.tsx +++ b/packages/ui/src/elements/Localizer/index.tsx @@ -1,11 +1,11 @@ 'use client' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import * as qs from 'qs-esm' import React, { Fragment } from 'react' import { useConfig } from '../../providers/Config/index.js' import { useLocale, useLocaleLoading } from '../../providers/Locale/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { Popup, PopupList } from '../Popup/index.js' diff --git a/packages/ui/src/elements/Logo/index.tsx b/packages/ui/src/elements/Logo/index.tsx new file mode 100644 index 00000000000..e62c8d94b19 --- /dev/null +++ b/packages/ui/src/elements/Logo/index.tsx @@ -0,0 +1,34 @@ +import type { ServerProps } from 'payload' +import type React from 'react' + +import { PayloadLogo } from '../../graphics/Logo/index.js' +import { RenderServerComponent } from '../RenderServerComponent/index.js' + +export const Logo: React.FC = (props) => { + const { i18n, locale, params, payload, permissions, searchParams, user } = props + + const { + admin: { + components: { + graphics: { Logo: CustomLogo } = { + Logo: undefined, + }, + } = {}, + } = {}, + } = payload.config + + return RenderServerComponent({ + Component: CustomLogo, + Fallback: PayloadLogo, + importMap: payload.importMap, + serverProps: { + i18n, + locale, + params, + payload, + permissions, + searchParams, + user, + }, + }) +} diff --git a/packages/ui/src/elements/Nav/AdminNavLinks.spec.ts b/packages/ui/src/elements/Nav/AdminNavLinks.spec.ts new file mode 100644 index 00000000000..0f70037435a --- /dev/null +++ b/packages/ui/src/elements/Nav/AdminNavLinks.spec.ts @@ -0,0 +1,98 @@ +import type { NavPreferences } from 'payload' + +import React from 'react' +import { renderToStaticMarkup } from 'react-dom/server' +import { describe, expect, it, vi } from 'vitest' + +import { EntityType } from '../../utilities/groupNavItems.js' + +import { AdminNavLinks } from './AdminNavLinks' + +vi.mock('../../providers/Config/index.js', () => ({ + useConfig: () => ({ + config: { + admin: { + routes: { + browseByFolder: '/browse-by-folder', + }, + }, + folders: undefined, + routes: { + admin: '/admin', + }, + }, + }), +})) + +vi.mock('../../providers/Router/index.js', () => ({ + Link: ({ children, href, ...props }) => React.createElement('a', { href, ...props }, children), + usePathname: () => '/admin/collections/posts', +})) + +vi.mock('../../providers/Translation/index.js', () => ({ + useTranslation: () => ({ + i18n: { + language: 'en', + t: (key: string) => key, + translations: {}, + }, + }), +})) + +vi.mock('../FolderView/BrowseByFolderButton/index.js', () => ({ + BrowseByFolderButton: () => null, +})) + +vi.mock('../NavGroup/index.js', () => ({ + NavGroup: ({ + children, + isOpen, + label, + }: { + children: React.ReactNode + isOpen?: boolean + label: string + }) => + React.createElement( + 'div', + { + className: ['nav-group', isOpen === false && 'nav-group--collapsed'] + .filter(Boolean) + .join(' '), + 'data-label': label, + }, + children, + ), +})) + +describe('AdminNavLinks', () => { + it('should render collapsed groups from nav preferences', () => { + const markup = renderToStaticMarkup( + React.createElement(AdminNavLinks, { + groups: [ + { + entities: [ + { + label: 'Posts', + slug: 'posts', + type: EntityType.collection, + }, + ], + label: 'Content', + }, + ], + navPreferences: { + groups: { + Content: { + open: false, + }, + }, + } as unknown as NavPreferences, + }), + ) + + expect(markup).toContain('nav-group--collapsed') + expect(markup).toContain('nav__link-indicator') + expect(markup).toContain('
') + }) +}) diff --git a/packages/ui/src/elements/Nav/AdminNavLinks.tsx b/packages/ui/src/elements/Nav/AdminNavLinks.tsx new file mode 100644 index 00000000000..1b2aafc86e4 --- /dev/null +++ b/packages/ui/src/elements/Nav/AdminNavLinks.tsx @@ -0,0 +1,95 @@ +'use client' + +import type { NavPreferences } from 'payload' + +import { getTranslation } from '@payloadcms/translations' +import { formatAdminURL } from 'payload/shared' +import React, { Fragment } from 'react' + +import type { groupNavItems } from '../../utilities/groupNavItems.js' + +import { useConfig } from '../../providers/Config/index.js' +import { Link, usePathname } from '../../providers/Router/index.js' +import { useTranslation } from '../../providers/Translation/index.js' +import { EntityType } from '../../utilities/groupNavItems.js' +import { BrowseByFolderButton } from '../FolderView/BrowseByFolderButton/index.js' +import { NavGroup } from '../NavGroup/index.js' + +const baseClass = 'nav' + +export const AdminNavLinks: React.FC<{ + groups: ReturnType + navPreferences?: NavPreferences +}> = ({ groups, navPreferences }) => { + const pathname = usePathname() + + const { + config: { + admin: { + routes: { browseByFolder: foldersRoute }, + }, + folders, + routes: { admin: adminRoute }, + }, + } = useConfig() + + const { i18n } = useTranslation() + + const folderURL = formatAdminURL({ + adminRoute, + path: foldersRoute, + }) + + const viewingRootFolderView = pathname.startsWith(folderURL) + + return ( + + {folders && folders.browseByFolder && } + {groups.map(({ entities, label }, key) => { + return ( + + {entities.map(({ slug, type, label }, i) => { + let href: string + let id: string + + if (type === EntityType.collection) { + href = formatAdminURL({ adminRoute, path: `/collections/${slug}` }) + id = `nav-${slug}` + } + + if (type === EntityType.global) { + href = formatAdminURL({ adminRoute, path: `/globals/${slug}` }) + id = `nav-global-${slug}` + } + + const isActive = + pathname.startsWith(href) && ['/', undefined].includes(pathname[href.length]) + + const Label = ( + <> + {isActive &&
} + {getTranslation(label, i18n)} + + ) + + // If the URL matches the link exactly + if (pathname === href) { + return ( +
+ {Label} +
+ ) + } + + return ( + + {Label} + + ) + })} + + ) + })} + + ) +} diff --git a/packages/ui/src/elements/Nav/NavHamburger/index.tsx b/packages/ui/src/elements/Nav/NavHamburger/index.tsx new file mode 100644 index 00000000000..edb42a4cede --- /dev/null +++ b/packages/ui/src/elements/Nav/NavHamburger/index.tsx @@ -0,0 +1,27 @@ +'use client' +import React from 'react' + +import { Hamburger } from '../../Hamburger/index.js' +import { useNav } from '../context.js' + +/** + * @internal + */ +export const NavHamburger: React.FC<{ + baseClass?: string +}> = ({ baseClass }) => { + const { navOpen, setNavOpen } = useNav() + + return ( + + ) +} diff --git a/packages/ui/src/elements/Nav/NavWrapper/index.scss b/packages/ui/src/elements/Nav/NavWrapper/index.scss new file mode 100644 index 00000000000..4c0688900d2 --- /dev/null +++ b/packages/ui/src/elements/Nav/NavWrapper/index.scss @@ -0,0 +1,27 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .nav { + position: sticky; + top: 0; + left: 0; + flex-shrink: 0; + height: 100vh; + width: var(--nav-width); + border-right: 1px solid var(--theme-elevation-100); + opacity: 0; + + [dir='rtl'] & { + border-right: none; + border-left: 1px solid var(--theme-elevation-100); + } + + &--nav-animate { + transition: opacity var(--nav-trans-time) ease-in-out; + } + + &--nav-open { + opacity: 1; + } + } +} diff --git a/packages/ui/src/elements/Nav/NavWrapper/index.tsx b/packages/ui/src/elements/Nav/NavWrapper/index.tsx new file mode 100644 index 00000000000..3fe8faaebf5 --- /dev/null +++ b/packages/ui/src/elements/Nav/NavWrapper/index.tsx @@ -0,0 +1,35 @@ +'use client' +import React from 'react' + +import { useNav } from '../context.js' +import './index.scss' + +/** + * @internal + */ +export const NavWrapper: React.FC<{ + baseClass?: string + children: React.ReactNode +}> = (props) => { + const { baseClass, children } = props + + const { hydrated, navOpen, navRef, shouldAnimate } = useNav() + + return ( + + ) +} diff --git a/packages/ui/src/elements/Nav/SettingsMenuButton/index.scss b/packages/ui/src/elements/Nav/SettingsMenuButton/index.scss new file mode 100644 index 00000000000..5a3eae39c33 --- /dev/null +++ b/packages/ui/src/elements/Nav/SettingsMenuButton/index.scss @@ -0,0 +1,11 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .settings-menu-button { + &.popup--h-align-left { + .popup__content { + left: calc(var(--nav-padding-inline-start) * -0.5); + } + } + } +} diff --git a/packages/ui/src/elements/Nav/SettingsMenuButton/index.tsx b/packages/ui/src/elements/Nav/SettingsMenuButton/index.tsx new file mode 100644 index 00000000000..fa917fb1c2c --- /dev/null +++ b/packages/ui/src/elements/Nav/SettingsMenuButton/index.tsx @@ -0,0 +1,36 @@ +'use client' +import React, { Fragment } from 'react' + +import { GearIcon } from '../../../icons/Gear/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' +import { Popup } from '../../Popup/index.js' +import './index.scss' + +const baseClass = 'settings-menu-button' + +export type SettingsMenuButtonProps = { + settingsMenu?: React.ReactNode[] +} + +export const SettingsMenuButton: React.FC = ({ settingsMenu }) => { + const { t } = useTranslation() + + if (!settingsMenu || settingsMenu.length === 0) { + return null + } + + return ( + } + className={baseClass} + horizontalAlign="left" + id="settings-menu" + size="small" + verticalAlign="bottom" + > + {settingsMenu.map((item, i) => ( + {item} + ))} + + ) +} diff --git a/packages/ui/src/elements/Nav/context.tsx b/packages/ui/src/elements/Nav/context.tsx index 6f44ad5df7a..b171d73137a 100644 --- a/packages/ui/src/elements/Nav/context.tsx +++ b/packages/ui/src/elements/Nav/context.tsx @@ -1,10 +1,10 @@ 'use client' import { useWindowInfo } from '@faceless-ui/window-info' -import { usePathname } from 'next/navigation.js' import { PREFERENCE_KEYS } from 'payload/shared' import React, { useEffect, useRef } from 'react' import { usePreferences } from '../../providers/Preferences/index.js' +import { usePathname } from '../../providers/Router/index.js' type NavContextType = { hydrated: boolean diff --git a/packages/ui/src/elements/Nav/getNavPrefs.ts b/packages/ui/src/elements/Nav/getNavPrefs.ts new file mode 100644 index 00000000000..b6cdadacecd --- /dev/null +++ b/packages/ui/src/elements/Nav/getNavPrefs.ts @@ -0,0 +1,37 @@ +import type { NavPreferences, PayloadRequest } from 'payload' + +import { PREFERENCE_KEYS } from 'payload/shared' +import { cache } from 'react' + +export const getNavPrefs = cache(async (req: PayloadRequest): Promise => { + return req?.user?.collection + ? await req.payload + .find({ + collection: 'payload-preferences', + depth: 0, + limit: 1, + pagination: false, + req, + where: { + and: [ + { + key: { + equals: PREFERENCE_KEYS.NAV, + }, + }, + { + 'user.relationTo': { + equals: req.user.collection, + }, + }, + { + 'user.value': { + equals: req?.user?.id, + }, + }, + ], + }, + }) + ?.then((res) => res?.docs?.[0]?.value) + : null +}) diff --git a/packages/ui/src/elements/Nav/index.client.tsx b/packages/ui/src/elements/Nav/index.client.tsx new file mode 100644 index 00000000000..d57d129487f --- /dev/null +++ b/packages/ui/src/elements/Nav/index.client.tsx @@ -0,0 +1,19 @@ +'use client' + +import type { NavPreferences } from 'payload' + +import React from 'react' + +import type { groupNavItems } from '../../utilities/groupNavItems.js' + +import { AdminNavLinks } from './AdminNavLinks.js' + +/** + * @internal + */ +export const DefaultNavClient: React.FC<{ + groups: ReturnType + navPreferences: NavPreferences +}> = ({ groups, navPreferences }) => { + return +} diff --git a/packages/ui/src/elements/Nav/index.scss b/packages/ui/src/elements/Nav/index.scss new file mode 100644 index 00000000000..4a97c922acf --- /dev/null +++ b/packages/ui/src/elements/Nav/index.scss @@ -0,0 +1,173 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .nav { + position: sticky; + top: 0; + left: 0; + flex-shrink: 0; + height: 100vh; + width: var(--nav-width); + border-right: 1px solid var(--theme-elevation-100); + opacity: 0; + overflow: hidden; + --nav-padding-inline-start: var(--base); + --nav-padding-inline-end: var(--base); + --nav-padding-block-start: var(--app-header-height); + --nav-padding-block-end: calc(var(--base) * 2); + + [dir='rtl'] & { + border-right: none; + border-left: 1px solid var(--theme-elevation-100); + } + + &--nav-animate { + transition: opacity var(--nav-trans-time) ease-in-out; + } + + &--nav-open { + opacity: 1; + } + + &__header { + position: absolute; + top: 0; + width: 100vw; + height: var(--app-header-height); + } + + &__header-content { + z-index: 1; + position: relative; + height: 100%; + width: 100%; + } + + &__mobile-close { + display: none; + background: none; + border: 0; + outline: 0; + padding: base(0.8) 0; + } + + &__scroll { + height: 100%; + display: flex; + flex-direction: column; + padding: var(--nav-padding-block-start) var(--nav-padding-inline-end) + var(--nav-padding-block-end) var(--nav-padding-inline-start); + overflow-y: auto; + + // remove the scrollbar here to prevent layout shift as nav groups are toggled + &::-webkit-scrollbar { + display: none; + } + } + + &__wrap { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + flex-grow: 1; + } + + &__label { + color: var(--theme-elevation-400); + } + + &__controls { + display: flex; + flex-direction: column; + gap: base(0.75); + margin-top: auto; + margin-bottom: 0; + + > :first-child { + margin-top: base(1); + } + + a:focus-visible { + outline: var(--accessibility-outline); + } + } + + &__log-out { + &:hover { + g { + transform: translateX(-#{base(0.125)}); + } + } + } + + &__link { + display: flex; + align-items: center; + position: relative; + padding-block: base(0.125); + padding-inline-start: 0; + padding-inline-end: base(1.5); + text-decoration: none; + + &:focus:not(:focus-visible) { + box-shadow: none; + font-weight: 600; + } + + &.active { + font-weight: normal; + padding-left: 0; + font-weight: 600; + } + } + + a.nav__link { + &:hover, + &:focus-visible { + text-decoration: underline; + } + } + + &__link:has(.nav__link-indicator) { + font-weight: 600; + padding-left: 0; + } + + &__link-indicator { + position: absolute; + display: block; + // top: 0; + inset-inline-start: base(-1); + width: 2px; + height: 16px; + border-start-end-radius: 2px; + border-end-end-radius: 2px; + background: var(--theme-text); + } + + @include mid-break { + &__scroll { + --nav-padding-inline-start: calc(var(--base) * 0.5); + --nav-padding-inline-end: calc(var(--base) * 0.5); + } + } + + @include small-break { + &__scroll { + --nav-padding-inline-start: var(--gutter-h); + --nav-padding-inline-end: var(--gutter-h); + } + + &__link { + font-size: base(0.875); + line-height: base(1.5); + } + + &__mobile-close { + display: flex; + align-items: center; + } + } + } +} diff --git a/packages/ui/src/elements/Nav/index.tsx b/packages/ui/src/elements/Nav/index.tsx new file mode 100644 index 00000000000..f6abf948bc1 --- /dev/null +++ b/packages/ui/src/elements/Nav/index.tsx @@ -0,0 +1,173 @@ +import type { NavPreferences, PayloadRequest, ServerProps } from 'payload' + +import React from 'react' + +import type { WithViewRenderer } from '../../utilities/createViewRenderer.js' +import type { EntityToGroup } from '../../utilities/groupNavItems.js' + +import { createViewRenderer } from '../../utilities/createViewRenderer.js' +import { EntityType, groupNavItems } from '../../utilities/groupNavItems.js' +import { Logout } from '../Logout/index.js' +import { NavHamburger } from './NavHamburger/index.js' +import { NavWrapper } from './NavWrapper/index.js' +import { SettingsMenuButton } from './SettingsMenuButton/index.js' +import './index.scss' + +const baseClass = 'nav' + +import { DefaultNavClient } from './index.client.js' + +export type NavProps = { + navPreferences?: NavPreferences + req?: PayloadRequest +} & ServerProps & + WithViewRenderer + +export const DefaultNav: React.FC = (props) => { + const { + documentSubViewType, + i18n, + locale, + navPreferences, + params, + payload, + permissions, + req, + searchParams, + user, + viewType, + visibleEntities, + } = props + + if (!payload?.config) { + return null + } + + const renderView = props.viewRenderer ?? createViewRenderer({ importMap: payload.importMap }) + + const { + admin: { + components: { afterNav, afterNavLinks, beforeNav, beforeNavLinks, logout, settingsMenu }, + }, + collections, + globals, + } = payload.config + + const groups = groupNavItems( + [ + ...collections + .filter(({ slug }) => visibleEntities.collections.includes(slug)) + .map( + (collection) => + ({ + type: EntityType.collection, + entity: collection, + }) satisfies EntityToGroup, + ), + ...globals + .filter(({ slug }) => visibleEntities.globals.includes(slug)) + .map( + (global) => + ({ + type: EntityType.global, + entity: global, + }) satisfies EntityToGroup, + ), + ], + permissions, + i18n, + ) + + const serverProps = { + i18n, + locale, + params, + payload, + permissions, + searchParams, + user, + viewRenderer: renderView, + } satisfies ServerProps & WithViewRenderer + + const LogoutComponent = renderView({ + clientProps: { + documentSubViewType, + viewType, + }, + Component: logout?.Button, + Fallback: Logout, + serverProps, + }) + + const RenderedSettingsMenu = + settingsMenu && Array.isArray(settingsMenu) + ? settingsMenu.map((item, index) => + renderView({ + clientProps: { + documentSubViewType, + viewType, + }, + Component: item, + key: `settings-menu-item-${index}`, + serverProps, + }), + ) + : [] + + const RenderedBeforeNav = renderView({ + clientProps: { + documentSubViewType, + viewType, + }, + Component: beforeNav, + serverProps, + }) + + const RenderedBeforeNavLinks = renderView({ + clientProps: { + documentSubViewType, + viewType, + }, + Component: beforeNavLinks, + serverProps, + }) + + const RenderedAfterNavLinks = renderView({ + clientProps: { + documentSubViewType, + viewType, + }, + Component: afterNavLinks, + serverProps, + }) + + const RenderedAfterNav = renderView({ + clientProps: { + documentSubViewType, + viewType, + }, + Component: afterNav, + serverProps, + }) + + return ( + + {RenderedBeforeNav} + + {RenderedAfterNav} +
+
+ +
+
+ + ) +} diff --git a/packages/ui/src/elements/PermanentlyDeleteButton/index.tsx b/packages/ui/src/elements/PermanentlyDeleteButton/index.tsx index a5446d38717..580eeda3fd6 100644 --- a/packages/ui/src/elements/PermanentlyDeleteButton/index.tsx +++ b/packages/ui/src/elements/PermanentlyDeleteButton/index.tsx @@ -4,7 +4,6 @@ import type { SanitizedCollectionConfig } from 'payload' import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import * as qs from 'qs-esm' import React, { Fragment, useCallback } from 'react' @@ -14,6 +13,7 @@ import type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js' import { useConfig } from '../../providers/Config/index.js' import { useDocumentTitle } from '../../providers/DocumentTitle/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { requests } from '../../utilities/api.js' diff --git a/packages/ui/src/elements/Popup/PopupButtonList/index.tsx b/packages/ui/src/elements/Popup/PopupButtonList/index.tsx index 64f856f98f4..7171a79ecc2 100644 --- a/packages/ui/src/elements/Popup/PopupButtonList/index.tsx +++ b/packages/ui/src/elements/Popup/PopupButtonList/index.tsx @@ -1,8 +1,8 @@ 'use client' -import type { LinkProps } from 'next/link.js' - import * as React from 'react' +import type { LinkProps } from '../../../providers/Router/types.js' + import { Link } from '../../Link/index.js' import './index.scss' diff --git a/packages/ui/src/elements/PublishMany/DrawerContent.tsx b/packages/ui/src/elements/PublishMany/DrawerContent.tsx index 4a4ae911ddc..f5fa79dd58c 100644 --- a/packages/ui/src/elements/PublishMany/DrawerContent.tsx +++ b/packages/ui/src/elements/PublishMany/DrawerContent.tsx @@ -1,7 +1,6 @@ import type { Where } from 'payload' import { getTranslation } from '@payloadcms/translations' -import { useRouter, useSearchParams } from 'next/navigation.js' import { combineWhereConstraints, formatAdminURL, mergeListSearchAndWhere } from 'payload/shared' import * as qs from 'qs-esm' import React, { useCallback } from 'react' @@ -12,6 +11,7 @@ import type { PublishManyProps } from './index.js' import { useConfig } from '../../providers/Config/index.js' import { useLocale } from '../../providers/Locale/index.js' import { useRouteCache } from '../../providers/RouteCache/index.js' +import { useRouter, useSearchParams } from '../../providers/Router/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { requests } from '../../utilities/api.js' import { parseSearchParams } from '../../utilities/parseSearchParams.js' diff --git a/packages/ui/src/elements/RestoreButton/index.tsx b/packages/ui/src/elements/RestoreButton/index.tsx index 6f8fcfb36c9..25fd5b25d7f 100644 --- a/packages/ui/src/elements/RestoreButton/index.tsx +++ b/packages/ui/src/elements/RestoreButton/index.tsx @@ -4,7 +4,6 @@ import type { SanitizedCollectionConfig } from 'payload' import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import * as qs from 'qs-esm' import React, { Fragment, useCallback, useState } from 'react' @@ -15,6 +14,7 @@ import type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js' import { CheckboxInput } from '../../fields/Checkbox/Input.js' import { useConfig } from '../../providers/Config/index.js' import { useDocumentTitle } from '../../providers/DocumentTitle/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { requests } from '../../utilities/api.js' diff --git a/packages/ui/src/elements/RestoreMany/index.tsx b/packages/ui/src/elements/RestoreMany/index.tsx index 38f48e13884..ee1a0e451ea 100644 --- a/packages/ui/src/elements/RestoreMany/index.tsx +++ b/packages/ui/src/elements/RestoreMany/index.tsx @@ -3,7 +3,6 @@ import type { ClientCollectionConfig, ViewTypes, Where } from 'payload' import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' -import { useRouter, useSearchParams } from 'next/navigation.js' import { formatAdminURL, mergeListSearchAndWhere } from 'payload/shared' import * as qs from 'qs-esm' import React from 'react' @@ -14,6 +13,7 @@ import { useAuth } from '../../providers/Auth/index.js' import { useConfig } from '../../providers/Config/index.js' import { useLocale } from '../../providers/Locale/index.js' import { useRouteCache } from '../../providers/RouteCache/index.js' +import { useRouter, useSearchParams } from '../../providers/Router/index.js' import { SelectAllStatus, useSelection } from '../../providers/Selection/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { requests } from '../../utilities/api.js' diff --git a/packages/ui/src/elements/SortComplex/index.tsx b/packages/ui/src/elements/SortComplex/index.tsx index 4dc38d4b3ae..8e34dd1e28c 100644 --- a/packages/ui/src/elements/SortComplex/index.tsx +++ b/packages/ui/src/elements/SortComplex/index.tsx @@ -2,13 +2,13 @@ import type { OptionObject, SanitizedCollectionConfig } from 'payload' import { getTranslation } from '@payloadcms/translations' -// TODO: abstract the `next/navigation` dependency out from this component -import { usePathname, useRouter, useSearchParams } from 'next/navigation.js' import { sortableFieldTypes } from 'payload' import { fieldAffectsData } from 'payload/shared' import * as qs from 'qs-esm' import React, { useEffect, useState } from 'react' +import { usePathname, useRouter, useSearchParams } from '../../providers/Router/index.js' + export type SortComplexProps = { collection: SanitizedCollectionConfig handleChange?: (sort: string) => void diff --git a/packages/ui/src/elements/StayLoggedIn/index.tsx b/packages/ui/src/elements/StayLoggedIn/index.tsx index bd4b8c1b15c..431b14641bd 100644 --- a/packages/ui/src/elements/StayLoggedIn/index.tsx +++ b/packages/ui/src/elements/StayLoggedIn/index.tsx @@ -1,5 +1,4 @@ 'use client' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import React, { useCallback } from 'react' @@ -7,6 +6,7 @@ import type { OnCancel } from '../ConfirmationModal/index.js' import { useAuth } from '../../providers/Auth/index.js' import { useConfig } from '../../providers/Config/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { ConfirmationModal } from '../ConfirmationModal/index.js' diff --git a/packages/ui/src/elements/UnpublishMany/DrawerContent.tsx b/packages/ui/src/elements/UnpublishMany/DrawerContent.tsx index 3ce7c06791f..8972ad093ea 100644 --- a/packages/ui/src/elements/UnpublishMany/DrawerContent.tsx +++ b/packages/ui/src/elements/UnpublishMany/DrawerContent.tsx @@ -1,7 +1,6 @@ import type { Where } from 'payload' import { getTranslation } from '@payloadcms/translations' -import { useRouter, useSearchParams } from 'next/navigation.js' import { combineWhereConstraints, formatAdminURL, mergeListSearchAndWhere } from 'payload/shared' import * as qs from 'qs-esm' import React, { useCallback } from 'react' @@ -12,6 +11,7 @@ import type { UnpublishManyProps } from './index.js' import { useConfig } from '../../providers/Config/index.js' import { useLocale } from '../../providers/Locale/index.js' import { useRouteCache } from '../../providers/RouteCache/index.js' +import { useRouter, useSearchParams } from '../../providers/Router/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { requests } from '../../utilities/api.js' import { parseSearchParams } from '../../utilities/parseSearchParams.js' diff --git a/packages/ui/src/exports/client/index.ts b/packages/ui/src/exports/client/index.ts index a8a194ee218..da67dce083a 100644 --- a/packages/ui/src/exports/client/index.ts +++ b/packages/ui/src/exports/client/index.ts @@ -123,6 +123,7 @@ export { Logout } from '../../elements/Logout/index.js' export { Modal, useModal } from '../../elements/Modal/index.js' export { NavToggler } from '../../elements/Nav/NavToggler/index.js' export { NavContext, NavProvider, useNav } from '../../elements/Nav/context.js' +export { AdminNavLinks } from '../../elements/Nav/AdminNavLinks.js' export { NavGroup } from '../../elements/NavGroup/index.js' export { Pagination } from '../../elements/Pagination/index.js' export { PerPage } from '../../elements/PerPage/index.js' @@ -326,6 +327,24 @@ export { RouteTransitionProvider, useRouteTransition, } from '../../providers/RouteTransition/index.js' +export { + RouterProvider, + useParams, + usePathname, + useRouter, + useSearchParams, +} from '../../providers/Router/index.js' +export type { + LinkProps, + NavigateOptions, + RouterContextType, + RouterInstance, +} from '../../providers/Router/types.js' +export { + ServerNavigationProvider, + useServerNavigation, +} from '../../providers/ServerNavigation/index.js' +export type { ServerNavigationContextType } from '../../providers/ServerNavigation/index.js' export { ConfigProvider, PageConfigProvider, useConfig } from '../../providers/Config/index.js' export { DocumentEventsProvider, useDocumentEvents } from '../../providers/DocumentEvents/index.js' export { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js' @@ -345,7 +364,7 @@ export { export { ListQueryProvider, useListQuery } from '../../providers/ListQuery/index.js' export { LocaleProvider, useLocale } from '../../providers/Locale/index.js' export { OperationProvider, useOperation } from '../../providers/Operation/index.js' -export { ParamsProvider, useParams } from '../../providers/Params/index.js' +export { ParamsProvider } from '../../providers/Params/index.js' export { PreferencesProvider, usePreferences } from '../../providers/Preferences/index.js' export { RootProvider } from '../../providers/Root/index.js' export { @@ -353,7 +372,7 @@ export { useRouteCache, } from '../../providers/RouteCache/index.js' export { ScrollInfoProvider, useScrollInfo } from '../../providers/ScrollInfo/index.js' -export { SearchParamsProvider, useSearchParams } from '../../providers/SearchParams/index.js' +export { SearchParamsProvider } from '../../providers/SearchParams/index.js' export { SelectionProvider, useSelection } from '../../providers/Selection/index.js' export { UploadHandlersProvider, useUploadHandlers } from '../../providers/UploadHandlers/index.js' export type { UploadHandlersContext } from '../../providers/UploadHandlers/index.js' @@ -375,6 +394,20 @@ export { SelectMany } from '../../elements/SelectMany/index.js' export { DefaultListView } from '../../views/List/index.js' export { DefaultCollectionFolderView } from '../../views/CollectionFolder/index.js' export { DefaultBrowseByFolderView } from '../../views/BrowseByFolder/index.js' +export { LoginForm } from '../../views/Login/LoginForm/index.js' +export { ForgotPasswordForm } from '../../views/ForgotPassword/ForgotPasswordForm/index.js' +export { ResetPasswordForm } from '../../views/ResetPassword/ResetPasswordForm/index.js' +export { LogoutClient } from '../../views/Logout/LogoutClient.js' +export { CreateFirstUserClient } from '../../views/CreateFirstUser/index.client.js' +export { APIViewClient } from '../../views/API/index.client.js' +export { AccountClient } from '../../views/Account/index.client.js' +export { ModularDashboardClient } from '../../views/Dashboard/Default/ModularDashboard/index.client.js' +export type { + DropTargetWidget, + WidgetInstanceClient, + WidgetItem, +} from '../../views/Dashboard/Default/ModularDashboard/index.client.js' +export { RenderWidget } from '../../views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.js' export type { /** diff --git a/packages/ui/src/exports/shared/index.ts b/packages/ui/src/exports/shared/index.ts index fb90dda5dfe..55fbf340cff 100644 --- a/packages/ui/src/exports/shared/index.ts +++ b/packages/ui/src/exports/shared/index.ts @@ -10,6 +10,7 @@ export { filterFields } from '../../providers/TableColumns/buildColumnState/filt export { getInitialColumns } from '../../providers/TableColumns/getInitialColumns.js' export { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js' export { requests } from '../../utilities/api.js' +export { buildDashboardEntityLinks } from '../../utilities/buildDashboardEntityLinks.js' export { findLocaleFromCode } from '../../utilities/findLocaleFromCode.js' export { formatAdminURL } from '../../utilities/formatAdminURL.js' export { formatDate } from '../../utilities/formatDocTitle/formatDateTitle.js' diff --git a/packages/ui/src/forms/Form/index.tsx b/packages/ui/src/forms/Form/index.tsx index 8a5a105a3fc..2452bb35561 100644 --- a/packages/ui/src/forms/Form/index.tsx +++ b/packages/ui/src/forms/Form/index.tsx @@ -1,6 +1,5 @@ 'use client' import { dequal } from 'dequal/lite' // lite: no need for Map and Set support -import { useRouter } from 'next/navigation.js' import { serialize } from 'object-to-formdata' import { type FormState, type PayloadRequest } from 'payload' import { @@ -33,6 +32,7 @@ import { useConfig } from '../../providers/Config/index.js' import { useDocumentInfo } from '../../providers/DocumentInfo/index.js' import { useLocale } from '../../providers/Locale/index.js' import { useOperation } from '../../providers/Operation/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useServerFunctions } from '../../providers/ServerFunctions/index.js' import { useTranslation } from '../../providers/Translation/index.js' diff --git a/packages/ui/src/graphics/Account/index.tsx b/packages/ui/src/graphics/Account/index.tsx index e071dd79be3..a0ea7e76ad6 100644 --- a/packages/ui/src/graphics/Account/index.tsx +++ b/packages/ui/src/graphics/Account/index.tsx @@ -1,10 +1,10 @@ 'use client' -import { usePathname } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import React from 'react' import { useAuth } from '../../providers/Auth/index.js' import { useConfig } from '../../providers/Config/index.js' +import { usePathname } from '../../providers/Router/index.js' import { DefaultAccountIcon } from './Default/index.js' import { GravatarAccountIcon } from './Gravatar/index.js' diff --git a/packages/ui/src/providers/Auth/index.tsx b/packages/ui/src/providers/Auth/index.tsx index ddcff9e9dd7..ce6d42f8cf8 100644 --- a/packages/ui/src/providers/Auth/index.tsx +++ b/packages/ui/src/providers/Auth/index.tsx @@ -2,7 +2,6 @@ import type { ClientUser, SanitizedPermissions, TypedUser } from 'payload' import { useModal } from '@faceless-ui/modal' -import { usePathname, useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import * as qs from 'qs-esm' import React, { createContext, use, useCallback, useEffect, useState } from 'react' @@ -13,6 +12,7 @@ import { useEffectEvent } from '../../hooks/useEffectEvent.js' import { useTranslation } from '../../providers/Translation/index.js' import { requests } from '../../utilities/api.js' import { useConfig } from '../Config/index.js' +import { usePathname, useRouter } from '../Router/index.js' import { useRouteTransition } from '../RouteTransition/index.js' export type UserWithToken = { diff --git a/packages/ui/src/providers/Folders/index.tsx b/packages/ui/src/providers/Folders/index.tsx index 82ad74fe864..d3cbeb5ae13 100644 --- a/packages/ui/src/providers/Folders/index.tsx +++ b/packages/ui/src/providers/Folders/index.tsx @@ -3,7 +3,6 @@ import type { ClientCollectionConfig, CollectionSlug, FolderSortKeys } from 'payload' import type { FolderBreadcrumb, FolderDocumentItemKey, FolderOrDocument } from 'payload/shared' -import { useRouter, useSearchParams } from 'next/navigation.js' import { extractID, formatAdminURL, formatFolderOrDocumentItem } from 'payload/shared' import * as qs from 'qs-esm' import React from 'react' @@ -13,6 +12,7 @@ import { useDrawerDepth } from '../../elements/Drawer/index.js' import { parseSearchParams } from '../../utilities/parseSearchParams.js' import { useConfig } from '../Config/index.js' import { useLocale } from '../Locale/index.js' +import { useRouter, useSearchParams } from '../Router/index.js' import { useRouteTransition } from '../RouteTransition/index.js' import { useTranslation } from '../Translation/index.js' import { groupItemIDsByRelation } from './groupItemIDsByRelation.js' diff --git a/packages/ui/src/providers/ListQuery/index.tsx b/packages/ui/src/providers/ListQuery/index.tsx index ebbacb95d49..a79c98bf5a8 100644 --- a/packages/ui/src/providers/ListQuery/index.tsx +++ b/packages/ui/src/providers/ListQuery/index.tsx @@ -1,5 +1,4 @@ 'use client' -import { useRouter, useSearchParams } from 'next/navigation.js' import { type ListQuery, type Where } from 'payload' import * as qs from 'qs-esm' import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' @@ -11,6 +10,7 @@ import { useEffectEvent } from '../../hooks/useEffectEvent.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { parseSearchParams } from '../../utilities/parseSearchParams.js' import { useConfig } from '../Config/index.js' +import { useRouter, useSearchParams } from '../Router/index.js' import { ListQueryContext, ListQueryModifiedContext } from './context.js' import { mergeQuery } from './mergeQuery.js' import { sanitizeQuery } from './sanitizeQuery.js' diff --git a/packages/ui/src/providers/Locale/index.tsx b/packages/ui/src/providers/Locale/index.tsx index 1e20b756af4..3b9618033a9 100644 --- a/packages/ui/src/providers/Locale/index.tsx +++ b/packages/ui/src/providers/Locale/index.tsx @@ -2,13 +2,13 @@ import type { Locale } from 'payload' -import { useSearchParams } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import React, { createContext, use, useEffect, useRef, useState } from 'react' import { findLocaleFromCode } from '../../utilities/findLocaleFromCode.js' import { useAuth } from '../Auth/index.js' import { useConfig } from '../Config/index.js' +import { useSearchParams } from '../Router/index.js' const LocaleContext = createContext({} as Locale) diff --git a/packages/ui/src/providers/Params/index.tsx b/packages/ui/src/providers/Params/index.tsx index 15d9a2bc514..25c568432e8 100644 --- a/packages/ui/src/providers/Params/index.tsx +++ b/packages/ui/src/providers/Params/index.tsx @@ -1,8 +1,9 @@ 'use client' -import { useParams as useNextParams } from 'next/navigation.js' import React, { createContext, use } from 'react' +import { useParams as useNextParams } from '../Router/index.js' + export type Params = ReturnType interface IParamsContext extends Params {} diff --git a/packages/ui/src/providers/Root/index.tsx b/packages/ui/src/providers/Root/index.tsx index 7552be4c797..74a9cee4f02 100644 --- a/packages/ui/src/providers/Root/index.tsx +++ b/packages/ui/src/providers/Root/index.tsx @@ -14,6 +14,7 @@ import { ModalContainer, ModalProvider } from '@faceless-ui/modal' import { ScrollInfoProvider } from '@faceless-ui/scroll-info' import React from 'react' +import type { RouterContextType } from '../Router/types.js' import type { Theme } from '../Theme/index.js' import { CloseModalOnRouteChange } from '../../elements/CloseModalOnRouteChange/index.js' @@ -31,6 +32,7 @@ import { LocaleProvider } from '../Locale/index.js' import { ParamsProvider } from '../Params/index.js' import { PreferencesProvider } from '../Preferences/index.js' import { RouteCache } from '../RouteCache/index.js' +import { RouterProvider } from '../Router/index.js' import { RouteTransitionProvider } from '../RouteTransition/index.js' import { SearchParamsProvider } from '../SearchParams/index.js' import { ServerFunctionsProvider } from '../ServerFunctions/index.js' @@ -49,6 +51,7 @@ type Props = { readonly languageOptions: LanguageOptions readonly locale?: Locale['code'] readonly permissions: SanitizedPermissions + readonly router?: RouterContextType readonly serverFunction: ServerFunctionClient readonly switchLanguageServerAction?: (lang: string) => Promise readonly theme: Theme @@ -66,6 +69,7 @@ export const RootProvider: React.FC = ({ languageOptions, locale, permissions, + router, serverFunction, switchLanguageServerAction, theme, @@ -74,7 +78,7 @@ export const RootProvider: React.FC = ({ }) => { const dndContextID = React.useId() - return ( + const content = ( @@ -145,4 +149,10 @@ export const RootProvider: React.FC = ({ ) + + if (router) { + return {content} + } + + return content } diff --git a/packages/ui/src/providers/RouteCache/index.tsx b/packages/ui/src/providers/RouteCache/index.tsx index 36e8bf5ee37..55dd2c52dc1 100644 --- a/packages/ui/src/providers/RouteCache/index.tsx +++ b/packages/ui/src/providers/RouteCache/index.tsx @@ -1,9 +1,9 @@ 'use client' -import { usePathname, useRouter } from 'next/navigation.js' import React, { createContext, use, useCallback, useEffect, useRef } from 'react' import { useEffectEvent } from '../../hooks/useEffectEvent.js' +import { usePathname, useRouter } from '../Router/index.js' export type RouteCacheContext = { cachingEnabled: boolean diff --git a/packages/ui/src/providers/Router/index.tsx b/packages/ui/src/providers/Router/index.tsx new file mode 100644 index 00000000000..6b489596c06 --- /dev/null +++ b/packages/ui/src/providers/Router/index.tsx @@ -0,0 +1,36 @@ +'use client' +import React, { createContext, use } from 'react' + +import type { LinkProps, RouterContextType, RouterInstance } from './types.js' + +export type { LinkProps, RouterContextType, RouterInstance } + +const RouterContext = createContext(null) + +export const RouterProvider: React.FC<{ + children: React.ReactNode + router: RouterContextType +}> = ({ children, router }) => { + return {children} +} + +function useRouterContext(): RouterContextType { + const ctx = use(RouterContext) + if (!ctx) { + throw new Error('RouterProvider is not in the tree. Make sure your admin adapter provides one.') + } + return ctx +} + +export const useRouter = (): RouterInstance => useRouterContext().router + +export const usePathname = (): string => useRouterContext().pathname + +export const useSearchParams = (): URLSearchParams => useRouterContext().searchParams + +export const useParams = (): Record => useRouterContext().params + +export const Link: React.FC = (props) => { + const { Link: AdapterLink } = useRouterContext() + return +} diff --git a/packages/ui/src/providers/Router/types.ts b/packages/ui/src/providers/Router/types.ts new file mode 100644 index 00000000000..5bb36ffbd0a --- /dev/null +++ b/packages/ui/src/providers/Router/types.ts @@ -0,0 +1,36 @@ +import type React from 'react' + +export type LinkProps = { + children?: React.ReactNode + href: string + onClick?: React.MouseEventHandler + prefetch?: boolean + replace?: boolean + scroll?: boolean +} & Omit, 'href' | 'onClick'> + +export type NavigateOptions = { + scroll?: boolean +} + +export type RouterInstance = { + back: () => void + forward: () => void + prefetch: (url: string) => void + push: (url: string, options?: NavigateOptions) => void + refresh: () => void + replace: (url: string, options?: NavigateOptions) => void +} + +/** + * Values provided by a RouterProvider. The adapter creates a component that + * calls framework-specific hooks and places the results here, so that + * `packages/ui` never imports from any framework directly. + */ +export type RouterContextType = { + Link: React.ComponentType + params: Record + pathname: string + router: RouterInstance + searchParams: URLSearchParams +} diff --git a/packages/ui/src/providers/SearchParams/index.tsx b/packages/ui/src/providers/SearchParams/index.tsx index cb66385ea84..3e3dafece1a 100644 --- a/packages/ui/src/providers/SearchParams/index.tsx +++ b/packages/ui/src/providers/SearchParams/index.tsx @@ -1,9 +1,10 @@ 'use client' -import { useSearchParams as useNextSearchParams } from 'next/navigation.js' import * as qs from 'qs-esm' import React, { createContext, use } from 'react' +import { useSearchParams as useNextSearchParams } from '../Router/index.js' + export type SearchParamsContext = { searchParams: qs.ParsedQs stringifyParams: ({ params, replace }: { params: qs.ParsedQs; replace?: boolean }) => string diff --git a/packages/ui/src/providers/Selection/index.tsx b/packages/ui/src/providers/Selection/index.tsx index f55ec5d87a6..897b905c7b7 100644 --- a/packages/ui/src/providers/Selection/index.tsx +++ b/packages/ui/src/providers/Selection/index.tsx @@ -1,7 +1,6 @@ 'use client' import type { Where } from 'payload' -import { useSearchParams } from 'next/navigation.js' import * as qs from 'qs-esm' import React, { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from 'react' @@ -9,6 +8,7 @@ import { parseSearchParams } from '../../utilities/parseSearchParams.js' import { useAuth } from '../Auth/index.js' import { useListQuery } from '../ListQuery/index.js' import { useLocale } from '../Locale/index.js' +import { useSearchParams } from '../Router/index.js' export enum SelectAllStatus { AllAvailable = 'allAvailable', diff --git a/packages/ui/src/providers/ServerFunctions/index.tsx b/packages/ui/src/providers/ServerFunctions/index.tsx index 891cba478bd..9b625ef996b 100644 --- a/packages/ui/src/providers/ServerFunctions/index.tsx +++ b/packages/ui/src/providers/ServerFunctions/index.tsx @@ -5,6 +5,7 @@ import type { Data, DocumentPreferences, DocumentSlots, + DocumentSubViewTypes, FormState, GetFolderResultsComponentAndDataArgs, Params, @@ -12,6 +13,7 @@ import type { ServerFunction, ServerFunctionClient, SlugifyServerFunctionArgs, + ViewTypes, } from 'payload' import type { Slugify } from 'payload/shared' @@ -63,21 +65,23 @@ export type RenderDocumentResult = { type RenderDocumentBaseArgs = { collectionSlug: string disableActions?: boolean - docID: number | string + docID?: number | string + documentSubViewType?: DocumentSubViewTypes drawerSlug?: string initialData?: Data initialState?: FormState overrideEntityVisibility?: boolean paramsOverride?: AdminViewServerPropsOnly['params'] redirectAfterCreate?: boolean - redirectAfterDelete: boolean - redirectAfterDuplicate: boolean + redirectAfterDelete?: boolean + redirectAfterDuplicate?: boolean redirectAfterRestore?: boolean searchParams?: Params /** * Properties specific to the versions view */ versions?: RenderDocumentVersionsProperties + viewType?: ViewTypes } export type RenderDocumentServerFunction = ServerFunction< @@ -245,8 +249,9 @@ export const ServerFunctionsProvider: React.FC<{ })) as Awaited> // TODO: infer this type when `strictNullChecks` is enabled return result - } catch (_err) { - console.error(_err) // eslint-disable-line no-console + } catch (err) { + console.error(err) // eslint-disable-line no-console + throw err } }, [serverFunction], diff --git a/packages/ui/src/providers/ServerNavigation/index.tsx b/packages/ui/src/providers/ServerNavigation/index.tsx new file mode 100644 index 00000000000..299335efeab --- /dev/null +++ b/packages/ui/src/providers/ServerNavigation/index.tsx @@ -0,0 +1,29 @@ +'use client' +import React, { createContext, use } from 'react' + +export type ServerNavigationContextType = { + notFound: () => never + redirect: (url: string) => never +} + +const ServerNavigationContext = createContext(null) + +export const ServerNavigationProvider: React.FC<{ + children: React.ReactNode + notFound: () => never + redirect: (url: string) => never +}> = ({ children, notFound, redirect }) => { + return ( + {children} + ) +} + +export function useServerNavigation(): ServerNavigationContextType { + const ctx = use(ServerNavigationContext) + if (!ctx) { + throw new Error( + 'ServerNavigationProvider is not in the tree. Make sure your admin adapter provides one.', + ) + } + return ctx +} diff --git a/packages/ui/src/providers/Translation/index.tsx b/packages/ui/src/providers/Translation/index.tsx index 01ba55fbd22..181099069ea 100644 --- a/packages/ui/src/providers/Translation/index.tsx +++ b/packages/ui/src/providers/Translation/index.tsx @@ -13,9 +13,10 @@ import type { LanguageOptions } from 'payload' import { importDateFNSLocale, t } from '@payloadcms/translations' import { enUS } from 'date-fns/locale/en-US' -import { useRouter } from 'next/navigation.js' import React, { createContext, use, useEffect, useState } from 'react' +import { useRouter } from '../Router/index.js' + type ContextType< TAdditionalTranslations = {}, TAdditionalClientTranslationKeys extends string = never, diff --git a/packages/ui/src/providers/ViewRenderer/index.spec.ts b/packages/ui/src/providers/ViewRenderer/index.spec.ts new file mode 100644 index 00000000000..e2278de5e03 --- /dev/null +++ b/packages/ui/src/providers/ViewRenderer/index.spec.ts @@ -0,0 +1,40 @@ +import React from 'react' +import { renderToStaticMarkup } from 'react-dom/server' +import { describe, expect, it } from 'vitest' + +import type { ViewComponentRenderer } from '../../utilities/createViewRenderer.js' + +import { ViewRendererProvider, useViewRenderer } from './index.js' + +const RendererProbe = () => { + const renderView = useViewRenderer() + + if (!renderView) { + return null + } + + return renderView({ + Fallback: () => React.createElement('span', null, 'fallback'), + }) +} + +describe('ViewRendererProvider', () => { + it('should expose the configured renderer to descendants', () => { + const renderer: ViewComponentRenderer = () => React.createElement('span', null, 'provided') + + const markup = renderToStaticMarkup( + React.createElement(ViewRendererProvider, { + children: React.createElement(RendererProbe), + renderer, + }), + ) + + expect(markup).toBe('provided') + }) + + it('should return null when no renderer is configured', () => { + const markup = renderToStaticMarkup(React.createElement(RendererProbe)) + + expect(markup).toBe('') + }) +}) diff --git a/packages/ui/src/providers/ViewRenderer/index.tsx b/packages/ui/src/providers/ViewRenderer/index.tsx new file mode 100644 index 00000000000..ad7e6a461ce --- /dev/null +++ b/packages/ui/src/providers/ViewRenderer/index.tsx @@ -0,0 +1,19 @@ +import React from 'react' + +import type { ViewComponentRenderer } from '../../utilities/createViewRenderer.js' + +const ViewRendererContext = React.createContext(null) + +export const ViewRendererProvider = ({ + children, + renderer, +}: { + children: React.ReactNode + renderer: ViewComponentRenderer +}) => { + return {children} +} + +export const useViewRenderer = (): null | ViewComponentRenderer => { + return React.use(ViewRendererContext) +} diff --git a/packages/ui/src/templates/Default/DefaultTemplateShell.tsx b/packages/ui/src/templates/Default/DefaultTemplateShell.tsx new file mode 100644 index 00000000000..62507d0f189 --- /dev/null +++ b/packages/ui/src/templates/Default/DefaultTemplateShell.tsx @@ -0,0 +1,63 @@ +import type { VisibleEntities } from 'payload' + +import React from 'react' + +import { AppHeader } from '../../elements/AppHeader/index.js' +import { BulkUploadProvider } from '../../elements/BulkUpload/index.js' +import { NavToggler } from '../../elements/Nav/NavToggler/index.js' +import { ActionsProvider } from '../../providers/Actions/index.js' +import { EntityVisibilityProvider } from '../../providers/EntityVisibility/index.js' +import { NavHamburger } from './NavHamburger/index.js' +import { Wrapper } from './Wrapper/index.js' + +const baseClass = 'template-default' + +export type DefaultTemplateShellProps = { + actions?: Record + children?: React.ReactNode + className?: string + collectionSlug?: string + CustomAvatar?: React.ReactNode + CustomHeader?: React.ReactNode + CustomIcon?: React.ReactNode + Nav?: React.ReactNode + visibleEntities: VisibleEntities +} + +export const DefaultTemplateShell: React.FC = ({ + actions = {}, + children, + className, + collectionSlug, + CustomAvatar, + CustomHeader, + CustomIcon, + Nav, + visibleEntities, +}) => { + return ( + + + + {CustomHeader} +
+ + + {Nav} +
+ + {children} +
+ +
+ + + + ) +} diff --git a/packages/ui/src/templates/Default/NavHamburger/index.tsx b/packages/ui/src/templates/Default/NavHamburger/index.tsx new file mode 100644 index 00000000000..e795c9b8553 --- /dev/null +++ b/packages/ui/src/templates/Default/NavHamburger/index.tsx @@ -0,0 +1,10 @@ +'use client' +import React from 'react' + +import { Hamburger } from '../../../elements/Hamburger/index.js' +import { useNav } from '../../../elements/Nav/context.js' + +export const NavHamburger: React.FC = () => { + const { navOpen } = useNav() + return +} diff --git a/packages/ui/src/templates/Default/Wrapper/index.scss b/packages/ui/src/templates/Default/Wrapper/index.scss new file mode 100644 index 00000000000..381b2766aec --- /dev/null +++ b/packages/ui/src/templates/Default/Wrapper/index.scss @@ -0,0 +1,58 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .template-default { + min-height: 100vh; + display: grid; + position: relative; + isolation: isolate; + + @media (prefers-reduced-motion) { + transition: none; + } + + &--nav-animate { + transition: grid-template-columns var(--nav-trans-time) linear; + } + + &--nav-open { + .template-default { + &__nav-overlay { + transition: opacity var(--nav-trans-time) linear; + } + } + } + } + + @media (min-width: 1441px) { + .template-default { + grid-template-columns: 0 auto; + + &--nav-open { + grid-template-columns: var(--nav-width) auto; + } + } + } + + @media (max-width: 1440px) { + .template-default--nav-hydrated.template-default--nav-open { + grid-template-columns: var(--nav-width) auto; + } + + .template-default { + grid-template-columns: 1fr auto; + + .nav { + display: none; + } + + &--nav-hydrated { + grid-template-columns: 0 auto; + + .nav { + display: unset; + } + } + } + } +} diff --git a/packages/ui/src/templates/Default/Wrapper/index.tsx b/packages/ui/src/templates/Default/Wrapper/index.tsx new file mode 100644 index 00000000000..d15d34cef34 --- /dev/null +++ b/packages/ui/src/templates/Default/Wrapper/index.tsx @@ -0,0 +1,30 @@ +'use client' +import React from 'react' + +import { useNav } from '../../../elements/Nav/context.js' +import './index.scss' + +export const Wrapper: React.FC<{ + baseClass?: string + children?: React.ReactNode + className?: string +}> = (props) => { + const { baseClass, children, className } = props + const { hydrated, navOpen, shouldAnimate } = useNav() + + return ( +
+ {children} +
+ ) +} diff --git a/packages/ui/src/templates/Default/index.scss b/packages/ui/src/templates/Default/index.scss new file mode 100644 index 00000000000..041455573da --- /dev/null +++ b/packages/ui/src/templates/Default/index.scss @@ -0,0 +1,79 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .template-default { + background-color: var(--theme-bg); + color: var(--theme-text); + + [dir='rtl'] &__nav-toggler-wrapper { + left: unset; + right: 0; + } + + &__nav-toggler-wrapper { + position: sticky; + z-index: var(--z-modal); + top: 0; + left: 0; + height: 0; + width: var(--gutter-h); + display: flex; + justify-content: center; + } + + &__nav-toggler-container { + height: var(--app-header-height); + display: flex; + align-items: center; + } + + &__nav-toggler { + display: flex; + align-items: center; + } + + &__wrap { + min-width: 0; + width: 100%; + flex-grow: 1; + position: relative; + background-color: var(--theme-bg); + &:before { + content: ''; + display: block; + position: absolute; + inset: 0; + background-color: inherit; + opacity: 0; + z-index: var(--z-status); + visibility: hidden; + transition: all var(--nav-trans-time) linear; + } + } + + @include mid-break { + &__nav-toggler-wrapper { + .hamburger { + left: unset; + } + } + } + + @include small-break { + &__nav-toggler-wrapper { + width: unset; + justify-content: unset; + + .hamburger { + display: none; + } + } + + .template-default { + &__wrap { + min-width: 100%; + } + } + } + } +} diff --git a/packages/ui/src/templates/Default/index.tsx b/packages/ui/src/templates/Default/index.tsx new file mode 100644 index 00000000000..273225b49f4 --- /dev/null +++ b/packages/ui/src/templates/Default/index.tsx @@ -0,0 +1,150 @@ +import type { + CustomComponent, + DocumentSubViewTypes, + NavPreferences, + PayloadRequest, + ServerProps, + ViewTypes, + VisibleEntities, +} from 'payload' + +import React from 'react' + +import type { WithViewRenderer } from '../../utilities/createViewRenderer.js' + +import { DefaultNav } from '../../elements/Nav/index.js' +import './index.scss' +import { useViewRenderer } from '../../providers/ViewRenderer/index.js' +import { createViewRenderer } from '../../utilities/createViewRenderer.js' +import { DefaultTemplateShell } from './DefaultTemplateShell.js' + +export type DefaultTemplateProps = { + children?: React.ReactNode + className?: string + collectionSlug?: string + docID?: number | string + documentSubViewType?: DocumentSubViewTypes + globalSlug?: string + navPreferences?: NavPreferences + req?: PayloadRequest + viewActions?: CustomComponent[] + viewType?: ViewTypes + visibleEntities: VisibleEntities +} & ServerProps + +export const DefaultTemplate: React.FC = ({ + children, + className, + collectionSlug, + docID, + documentSubViewType, + globalSlug, + i18n, + locale, + navPreferences, + params, + payload, + permissions, + req, + searchParams, + user, + viewActions, + viewType, + visibleEntities, +}) => { + const { + admin: { + avatar, + components, + components: { header: CustomHeader, Nav: CustomNav } = { + header: undefined, + Nav: undefined, + }, + } = {}, + } = payload.config || {} + const renderView = useViewRenderer() ?? createViewRenderer({ importMap: payload.importMap }) + + const clientProps = { + documentSubViewType, + viewType, + visibleEntities, + } + + const serverProps: { + collectionSlug: string + docID: number | string + globalSlug: string + navPreferences?: NavPreferences + req: PayloadRequest + } & ServerProps & + WithViewRenderer = { + collectionSlug, + docID, + globalSlug, + i18n, + locale, + navPreferences, + params, + payload, + permissions, + req, + searchParams, + user, + viewRenderer: renderView, + } + + const Actions: Record = {} + for (const action of viewActions ?? []) { + if (!action) { + continue + } + const key = typeof action === 'object' ? action.path : action + Actions[key] = renderView({ + clientProps, + Component: action, + serverProps, + }) + } + + const NavComponent = renderView({ + clientProps, + Component: CustomNav, + Fallback: DefaultNav, + serverProps, + }) + + return ( + + {children} + + ) +} + +export { DefaultTemplateShell } from './DefaultTemplateShell.js' diff --git a/packages/ui/src/templates/Minimal/index.scss b/packages/ui/src/templates/Minimal/index.scss new file mode 100644 index 00000000000..0c952499565 --- /dev/null +++ b/packages/ui/src/templates/Minimal/index.scss @@ -0,0 +1,30 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .template-minimal { + display: flex; + width: 100%; + justify-content: center; + align-items: center; + padding: base(3) $baseline; + margin-left: auto; + margin-right: auto; + min-height: 100%; + background-color: var(--theme-bg-color); + color: var(--theme-text); + + &--width-normal { + .template-minimal__wrap { + max-width: base(24); + width: 100%; + } + } + + &--width-wide { + .template-minimal__wrap { + max-width: base(48); + width: 100%; + } + } + } +} diff --git a/packages/ui/src/templates/Minimal/index.tsx b/packages/ui/src/templates/Minimal/index.tsx new file mode 100644 index 00000000000..792574b6e93 --- /dev/null +++ b/packages/ui/src/templates/Minimal/index.tsx @@ -0,0 +1,24 @@ +import React from 'react' + +import './index.scss' + +const baseClass = 'template-minimal' + +export type MinimalTemplateProps = { + children?: React.ReactNode + className?: string + style?: React.CSSProperties + width?: 'normal' | 'wide' +} + +export const MinimalTemplate: React.FC = (props) => { + const { children, className, style = {}, width = 'normal' } = props + + const classes = [className, baseClass, `${baseClass}--width-${width}`].filter(Boolean).join(' ') + + return ( +
+
{children}
+
+ ) +} diff --git a/packages/ui/src/utilities/buildDashboardEntityLinks.spec.ts b/packages/ui/src/utilities/buildDashboardEntityLinks.spec.ts new file mode 100644 index 00000000000..ac3785acba8 --- /dev/null +++ b/packages/ui/src/utilities/buildDashboardEntityLinks.spec.ts @@ -0,0 +1,84 @@ +import type { ClientConfig, SanitizedPermissions, VisibleEntities } from 'payload' + +import { describe, expect, it } from 'vitest' + +import { buildDashboardEntityLinks } from './buildDashboardEntityLinks' + +describe('buildDashboardEntityLinks', () => { + it('should return translated links for readable visible entities', () => { + const clientConfig = { + collections: [ + { + labels: { + plural: { + de: 'Beitraege', + en: 'Posts', + }, + }, + slug: 'posts', + }, + { + labels: { + plural: 'Pages', + }, + slug: 'pages', + }, + ], + globals: [ + { + label: { + de: 'Einstellungen', + en: 'Settings', + }, + slug: 'settings', + }, + ], + routes: { + admin: '/admin', + }, + } as unknown as Pick + + const permissions = { + collections: { + pages: { fields: {}, read: false }, + posts: { fields: {}, read: true }, + }, + globals: { + settings: { fields: {}, read: true }, + }, + } as unknown as SanitizedPermissions + + const visibleEntities = { + collections: ['posts', 'pages'], + globals: ['settings'], + } as VisibleEntities + + const i18n = { + language: 'en', + t: (key: string) => key, + translations: {}, + } as any + + expect( + buildDashboardEntityLinks({ + clientConfig, + i18n, + permissions, + visibleEntities, + }), + ).toEqual([ + { + href: '/admin/collections/posts', + label: 'Posts', + slug: 'posts', + type: 'collection', + }, + { + href: '/admin/globals/settings', + label: 'Settings', + slug: 'settings', + type: 'global', + }, + ]) + }) +}) diff --git a/packages/ui/src/utilities/buildDashboardEntityLinks.ts b/packages/ui/src/utilities/buildDashboardEntityLinks.ts new file mode 100644 index 00000000000..85c0f527dda --- /dev/null +++ b/packages/ui/src/utilities/buildDashboardEntityLinks.ts @@ -0,0 +1,75 @@ +import type { + ClientConfig, + LabelFunction, + SanitizedPermissions, + StaticLabel, + VisibleEntities, +} from 'payload' + +import { getTranslation, type I18nClient } from '@payloadcms/translations' +import { formatAdminURL } from 'payload/shared' + +export type DashboardEntityLink = { + href: string + label: string + slug: string + type: 'collection' | 'global' +} + +type BuildDashboardEntityLinksArgs = { + clientConfig: Pick + i18n: I18nClient + permissions: SanitizedPermissions + visibleEntities: VisibleEntities +} + +const getLabel = ({ i18n, label }: { i18n: I18nClient; label?: LabelFunction | StaticLabel }) => { + if (!label) { + return '' + } + + const resolvedLabel = typeof label === 'function' ? label({ i18n, t: i18n.t }) : label + + return getTranslation(resolvedLabel, i18n) +} + +export const buildDashboardEntityLinks = ({ + clientConfig, + i18n, + permissions, + visibleEntities, +}: BuildDashboardEntityLinksArgs): DashboardEntityLink[] => { + const collectionLinks = clientConfig.collections + .filter((collection) => visibleEntities.collections.includes(collection.slug)) + .filter((collection) => permissions.collections?.[collection.slug]?.read) + .map((collection) => ({ + slug: collection.slug, + type: 'collection' as const, + href: formatAdminURL({ + adminRoute: clientConfig.routes.admin, + path: `/collections/${collection.slug}`, + }), + label: getLabel({ + i18n, + label: collection.labels.plural, + }), + })) + + const globalLinks = clientConfig.globals + .filter((global) => visibleEntities.globals.includes(global.slug)) + .filter((global) => permissions.globals?.[global.slug]?.read) + .map((global) => ({ + slug: global.slug, + type: 'global' as const, + href: formatAdminURL({ + adminRoute: clientConfig.routes.admin, + path: `/globals/${global.slug}`, + }), + label: getLabel({ + i18n, + label: global.label, + }), + })) + + return [...collectionLinks, ...globalLinks] +} diff --git a/packages/ui/src/utilities/createViewRenderer.ts b/packages/ui/src/utilities/createViewRenderer.ts new file mode 100644 index 00000000000..c5e0c8a1f86 --- /dev/null +++ b/packages/ui/src/utilities/createViewRenderer.ts @@ -0,0 +1,38 @@ +import type { ImportMap, PayloadComponent } from 'payload' +import type React from 'react' + +import { RenderServerComponent } from '../elements/RenderServerComponent/index.js' + +export type ViewComponentRendererArgs = { + readonly clientProps?: object + readonly Component?: + | PayloadComponent + | PayloadComponent[] + | React.ComponentType + | React.ComponentType[] + readonly Fallback?: React.ComponentType + readonly key?: string + readonly serverProps?: object +} + +export type ViewComponentRenderer = (args: ViewComponentRendererArgs) => React.ReactNode + +export type WithViewRenderer = { + readonly viewRenderer?: ViewComponentRenderer +} + +export const createViewRenderer = ({ + importMap, +}: { + importMap: ImportMap +}): ViewComponentRenderer => { + return ({ clientProps, Component, Fallback, key, serverProps }) => + RenderServerComponent({ + clientProps, + Component, + Fallback, + importMap, + key, + serverProps, + }) +} diff --git a/packages/ui/src/utilities/getPreferences.ts b/packages/ui/src/utilities/getPreferences.ts new file mode 100644 index 00000000000..97e6811bc8e --- /dev/null +++ b/packages/ui/src/utilities/getPreferences.ts @@ -0,0 +1,42 @@ +import type { DefaultDocumentIDType, Payload } from 'payload' + +import { cache } from 'react' + +export const getPreferences = cache( + async ( + key: string, + payload: Payload, + userID: DefaultDocumentIDType, + userSlug: string, + ): Promise<{ id: DefaultDocumentIDType; value: T }> => { + const result = (await payload + .find({ + collection: 'payload-preferences', + depth: 0, + limit: 1, + pagination: false, + where: { + and: [ + { + key: { + equals: key, + }, + }, + { + 'user.relationTo': { + equals: userSlug, + }, + }, + { + 'user.value': { + equals: userID, + }, + }, + ], + }, + }) + .then((res) => res.docs?.[0])) as { id: DefaultDocumentIDType; value: T } + + return result + }, +) diff --git a/packages/ui/src/utilities/getRequestLanguage.ts b/packages/ui/src/utilities/getRequestLanguage.ts index 1c6813a8361..3f2c197029f 100644 --- a/packages/ui/src/utilities/getRequestLanguage.ts +++ b/packages/ui/src/utilities/getRequestLanguage.ts @@ -1,7 +1,5 @@ -import type { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension/adapters/request-cookies.js' - type GetRequestLanguageArgs = { - cookies: Map | ReadonlyRequestCookies + cookies: Map defaultLanguage?: string headers: Request['headers'] } @@ -14,9 +12,5 @@ export const getRequestLanguage = ({ const acceptLanguage = headers.get('Accept-Language') const cookieLanguage = cookies.get('lng') - return ( - acceptLanguage || - (typeof cookieLanguage === 'string' ? cookieLanguage : cookieLanguage.value) || - defaultLanguage - ) + return acceptLanguage || cookieLanguage || defaultLanguage } diff --git a/packages/ui/src/utilities/getRequestLocale.ts b/packages/ui/src/utilities/getRequestLocale.ts new file mode 100644 index 00000000000..bcd8d77df81 --- /dev/null +++ b/packages/ui/src/utilities/getRequestLocale.ts @@ -0,0 +1,41 @@ +import type { Locale, PayloadRequest } from 'payload' + +import { findLocaleFromCode } from './findLocaleFromCode.js' +import { getPreferences } from './getPreferences.js' +import { upsertPreferences } from './upsertPreferences.js' + +type GetRequestLocalesArgs = { + req: PayloadRequest +} + +export async function getRequestLocale({ req }: GetRequestLocalesArgs): Promise { + if (req.payload.config.localization) { + const localeFromParams = req.query.locale as string | undefined + + if (req.user && localeFromParams) { + await upsertPreferences({ key: 'locale', req, value: localeFromParams }) + } + + return ( + (req.user && + findLocaleFromCode( + req.payload.config.localization, + localeFromParams || + ( + await getPreferences( + 'locale', + req.payload, + req.user.id, + req.user.collection, + ) + )?.value, + )) || + findLocaleFromCode( + req.payload.config.localization, + req.payload.config.localization.defaultLocale || 'en', + ) + ) + } + + return undefined +} diff --git a/packages/ui/src/utilities/getRouteWithoutAdmin.ts b/packages/ui/src/utilities/getRouteWithoutAdmin.ts new file mode 100644 index 00000000000..d68aa62bca0 --- /dev/null +++ b/packages/ui/src/utilities/getRouteWithoutAdmin.ts @@ -0,0 +1,9 @@ +export const getRouteWithoutAdmin = ({ + adminRoute, + route, +}: { + adminRoute: string + route: string +}): string => { + return adminRoute && adminRoute !== '/' ? route.replace(adminRoute, '') : route +} diff --git a/packages/ui/src/utilities/handleAuthRedirect.ts b/packages/ui/src/utilities/handleAuthRedirect.ts new file mode 100644 index 00000000000..be6f00d263b --- /dev/null +++ b/packages/ui/src/utilities/handleAuthRedirect.ts @@ -0,0 +1,47 @@ +import type { TypedUser } from 'payload' + +import { formatAdminURL } from 'payload/shared' +import * as qs from 'qs-esm' + +type Args = { + config + route: string + searchParams: { [key: string]: string | string[] } + user?: TypedUser +} + +export const handleAuthRedirect = ({ config, route, searchParams, user }: Args): string => { + const { + admin: { + routes: { login: loginRouteFromConfig, unauthorized: unauthorizedRoute }, + }, + routes: { admin: adminRoute }, + } = config + + if (searchParams && 'redirect' in searchParams) { + delete searchParams.redirect + } + + const redirectRoute = + (route !== adminRoute ? route : '') + + (Object.keys(searchParams ?? {}).length > 0 + ? `${qs.stringify(searchParams, { addQueryPrefix: true })}` + : '') + + const redirectTo = formatAdminURL({ + adminRoute, + path: user ? unauthorizedRoute : loginRouteFromConfig, + }) + + const parsedLoginRouteSearchParams = qs.parse(redirectTo.split('?')[1] ?? '') + + const searchParamsWithRedirect = `${qs.stringify( + { + ...parsedLoginRouteSearchParams, + ...(redirectRoute ? { redirect: redirectRoute } : {}), + }, + { addQueryPrefix: true }, + )}` + + return `${redirectTo.split('?', 1)[0]}${searchParamsWithRedirect}` +} diff --git a/packages/ui/src/utilities/handleBackToDashboard.tsx b/packages/ui/src/utilities/handleBackToDashboard.tsx index d5b25efc159..02b0d77c9ef 100644 --- a/packages/ui/src/utilities/handleBackToDashboard.tsx +++ b/packages/ui/src/utilities/handleBackToDashboard.tsx @@ -1,10 +1,10 @@ -import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime.js' - import { formatAdminURL } from 'payload/shared' +import type { RouterInstance } from '../providers/Router/types.js' + type BackToDashboardProps = { adminRoute: string - router: AppRouterInstance + router: RouterInstance serverURL?: string } diff --git a/packages/ui/src/utilities/handleGoBack.tsx b/packages/ui/src/utilities/handleGoBack.tsx index 5a4cec75055..04f56f6933a 100644 --- a/packages/ui/src/utilities/handleGoBack.tsx +++ b/packages/ui/src/utilities/handleGoBack.tsx @@ -1,11 +1,11 @@ -import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime.js' - import { formatAdminURL } from 'payload/shared' +import type { RouterInstance } from '../providers/Router/types.js' + type GoBackProps = { adminRoute: string collectionSlug: string - router: AppRouterInstance + router: RouterInstance serverURL?: string } diff --git a/packages/ui/src/utilities/handleServerFunctions.ts b/packages/ui/src/utilities/handleServerFunctions.ts new file mode 100644 index 00000000000..e8aef7d6fd6 --- /dev/null +++ b/packages/ui/src/utilities/handleServerFunctions.ts @@ -0,0 +1,50 @@ +import type { DefaultServerFunctionArgs, ServerFunction } from 'payload' + +import { _internal_renderFieldHandler } from '../forms/fieldSchemasToFormState/serverFunctions/renderFieldServerFn.js' +import { renderBrowseFolderHandler } from '../views/BrowseByFolder/handleServerFunction.js' +import { renderCollectionFolderHandler } from '../views/CollectionFolders/handleServerFunction.js' +import { getDefaultLayoutHandler } from '../views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.js' +import { renderWidgetHandler } from '../views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.js' +import { renderDocumentHandler } from '../views/Document/handleServerFunction.js' +import { renderDocumentSlotsHandler } from '../views/Document/renderDocumentSlots.js' +import { renderListHandler } from '../views/List/handleServerFunction.js' +import { buildFormStateHandler } from './buildFormState.js' +import { buildTableStateHandler } from './buildTableState.js' +import { copyDataFromLocaleHandler } from './copyDataFromLocale.js' +import { getFolderResultsComponentAndDataHandler } from './getFolderResultsComponentAndData.js' +import { schedulePublishHandler } from './schedulePublishHandler.js' +import { slugifyHandler } from './slugify.js' + +export const baseServerFunctions: Record = { + 'copy-data-from-locale': copyDataFromLocaleHandler, + 'form-state': buildFormStateHandler, + 'get-default-layout': getDefaultLayoutHandler, + 'get-folder-results-component-and-data': getFolderResultsComponentAndDataHandler, + 'render-browse-folder': renderBrowseFolderHandler, + 'render-collection-folder': renderCollectionFolderHandler, + 'render-document': renderDocumentHandler, + 'render-document-slots': renderDocumentSlotsHandler, + 'render-field': _internal_renderFieldHandler, + 'render-list': renderListHandler, + 'render-widget': renderWidgetHandler, + 'schedule-publish': schedulePublishHandler, + slugify: slugifyHandler, + 'table-state': buildTableStateHandler, +} + +/** + * Framework-agnostic server function dispatcher. + * Adapters call this after running initReq to get the request context. + */ +export function dispatchServerFunction(args: { + augmentedArgs: DefaultServerFunctionArgs + extraServerFunctions?: Record + name: string +}): Promise | unknown { + const { name, augmentedArgs, extraServerFunctions } = args + const fn = extraServerFunctions?.[name] || baseServerFunctions[name] + if (!fn) { + throw new Error(`Unknown Server Function: ${name}`) + } + return fn(augmentedArgs) +} diff --git a/packages/ui/src/utilities/isCustomAdminView.ts b/packages/ui/src/utilities/isCustomAdminView.ts new file mode 100644 index 00000000000..e7883be9148 --- /dev/null +++ b/packages/ui/src/utilities/isCustomAdminView.ts @@ -0,0 +1,39 @@ +import type { SanitizedConfig } from 'payload' + +import { getRouteWithoutAdmin } from './getRouteWithoutAdmin.js' + +/** + * Returns an array of views marked with 'public: true' in the config + */ +export const isCustomAdminView = ({ + adminRoute, + config, + route, +}: { + adminRoute: string + config: SanitizedConfig + route: string +}): boolean => { + if (config.admin?.components?.views) { + const isPublicAdminRoute = Object.entries(config.admin.components.views).some(([_, view]) => { + const routeWithoutAdmin = getRouteWithoutAdmin({ adminRoute, route }) + + if (view.exact) { + if (routeWithoutAdmin === view.path) { + return true + } + } else { + if ( + view.path && + view.path !== '/' && + (routeWithoutAdmin === view.path || routeWithoutAdmin.startsWith(view.path + '/')) + ) { + return true + } + } + return false + }) + return isPublicAdminRoute + } + return false +} diff --git a/packages/ui/src/utilities/isPathMatchingRoute.ts b/packages/ui/src/utilities/isPathMatchingRoute.ts new file mode 100644 index 00000000000..193fc0042a8 --- /dev/null +++ b/packages/ui/src/utilities/isPathMatchingRoute.ts @@ -0,0 +1,40 @@ +import { pathToRegexp } from 'path-to-regexp' + +export const isPathMatchingRoute = ({ + currentRoute, + exact, + path: viewPath, + sensitive, + strict, +}: { + currentRoute: string + exact?: boolean + path?: string + sensitive?: boolean + strict?: boolean +}) => { + // if no path is defined, we cannot match it so return false early + if (!viewPath) { + return false + } + + const keys = [] + + // run the view path through `pathToRegexp` to resolve any dynamic segments + // i.e. `/admin/custom-view/:id` -> `/admin/custom-view/123` + const regex = pathToRegexp(viewPath, keys, { + sensitive, + strict, + }) + + const match = regex.exec(currentRoute) + const viewRoute = match?.[0] || viewPath + + if (exact) { + return currentRoute === viewRoute + } + + if (!exact) { + return viewRoute.startsWith(currentRoute) + } +} diff --git a/packages/ui/src/utilities/isPublicAdminRoute.ts b/packages/ui/src/utilities/isPublicAdminRoute.ts new file mode 100644 index 00000000000..7b59df516b4 --- /dev/null +++ b/packages/ui/src/utilities/isPublicAdminRoute.ts @@ -0,0 +1,43 @@ +import type { SanitizedConfig } from 'payload' + +import { getRouteWithoutAdmin } from './getRouteWithoutAdmin.js' + +// Routes that require admin authentication +const publicAdminRoutes: (keyof Pick< + SanitizedConfig['admin']['routes'], + 'createFirstUser' | 'forgot' | 'inactivity' | 'login' | 'logout' | 'reset' | 'unauthorized' +>)[] = [ + 'createFirstUser', + 'forgot', + 'login', + 'logout', + 'forgot', + 'inactivity', + 'unauthorized', + 'reset', +] + +export const isPublicAdminRoute = ({ + adminRoute, + config, + route, +}: { + adminRoute: string + config: SanitizedConfig + route: string +}): boolean => { + const isPublicAdminRoute = publicAdminRoutes.some((routeSegment) => { + const segment = config.admin?.routes?.[routeSegment] || routeSegment + const routeWithoutAdmin = getRouteWithoutAdmin({ adminRoute, route }) + + if (routeWithoutAdmin.startsWith(segment)) { + return true + } else if (routeWithoutAdmin.includes('/verify/')) { + return true + } else { + return false + } + }) + + return isPublicAdminRoute +} diff --git a/packages/ui/src/utilities/parseSearchParams.ts b/packages/ui/src/utilities/parseSearchParams.ts index d6631321010..b07fa75b327 100644 --- a/packages/ui/src/utilities/parseSearchParams.ts +++ b/packages/ui/src/utilities/parseSearchParams.ts @@ -1,5 +1,3 @@ -import type { ReadonlyURLSearchParams } from 'next/navigation.js' - import * as qs from 'qs-esm' /** @@ -10,7 +8,7 @@ import * as qs from 'qs-esm' * @param {ReadonlyURLSearchParams} searchParams - The URLSearchParams object to parse. * @returns {qs.ParsedQs} - The parsed query string object. */ -export function parseSearchParams(searchParams: ReadonlyURLSearchParams): qs.ParsedQs { +export function parseSearchParams(searchParams: URLSearchParams): qs.ParsedQs { const search = searchParams.toString() return qs.parse(search, { diff --git a/packages/ui/src/utilities/selectiveCache.ts b/packages/ui/src/utilities/selectiveCache.ts new file mode 100644 index 00000000000..f14dba88d40 --- /dev/null +++ b/packages/ui/src/utilities/selectiveCache.ts @@ -0,0 +1,57 @@ +import { cache } from 'react' + +type CachedValue = object + +// Module-scoped cache container that holds all cached, stable containers +// - these may hold the stable value, or a promise to the stable value +const globalCacheContainer: Record< + string, + ( + ...args: unknown[] + ) => { + value: null | Promise | TValue + } +> = {} + +/** + * Creates a selective cache function that provides more control over React's request-level caching behavior. + * + * @param namespace - A namespace to group related cached values + * @returns A function that manages cached values within the specified namespace + */ +export function selectiveCache(namespace: string) { + // Create a stable namespace container if it doesn't exist + if (!globalCacheContainer[namespace]) { + globalCacheContainer[namespace] = cache((..._args) => ({ + value: null, + })) + } + + /** + * Gets or creates a cached value for a specific key within the namespace + * + * @param key - The key to identify the cached value + * @param factory - A function that produces the value if not cached + * @returns The cached or newly created value + */ + const getCached = async (factory: () => Promise, ...cacheArgs): Promise => { + const stableObjectFn = globalCacheContainer[namespace] + const stableObject = stableObjectFn(...cacheArgs) + + if ( + stableObject?.value && + 'then' in stableObject.value && + typeof stableObject.value?.then === 'function' + ) { + return await stableObject.value + } + + stableObject.value = factory() + + return await stableObject.value + } + + return { + get: getCached, + } +} diff --git a/packages/ui/src/utilities/slugify.ts b/packages/ui/src/utilities/slugify.ts new file mode 100644 index 00000000000..fa64c640bca --- /dev/null +++ b/packages/ui/src/utilities/slugify.ts @@ -0,0 +1,58 @@ +import type { Slugify } from 'payload/shared' + +import { + flattenAllFields, + getFieldByPath, + type ServerFunction, + type SlugifyServerFunctionArgs, + UnauthorizedError, +} from 'payload' +import { slugify as defaultSlugify } from 'payload/shared' + +/** + * This server function is directly related to the {@link https://payloadcms.com/docs/fields/text#slug-field | Slug Field}. + * This is a server function that is used to invoke the user's custom slugify function from the client. + * This pattern is required, as there is no other way for us to pass their function across the client-server boundary. + * - Not through props + * - Not from a server function defined within a server component (see below) + * When a server function contains non-serializable data within its closure, it gets passed through the boundary (and breaks). + * The only way to pass server functions to the client (that contain non-serializable data) is if it is globally defined. + * But we also cannot define this function alongside the server component, as we will not have access to their custom slugify function. + * See `ServerFunctionsProvider` for more details. + */ +export const slugifyHandler: ServerFunction< + SlugifyServerFunctionArgs, + Promise> +> = async (args) => { + const { collectionSlug, data, globalSlug, path, req, valueToSlugify } = args + + if (!req.user) { + throw new UnauthorizedError() + } + + const docConfig = collectionSlug + ? req.payload.collections[collectionSlug]?.config + : globalSlug + ? req.payload.config.globals.find((g) => g.slug === globalSlug) + : null + + if (!docConfig) { + throw new Error() + } + + const { field } = getFieldByPath({ + config: req.payload.config, + fields: flattenAllFields({ fields: docConfig.fields }), + path, + }) + + const customSlugify = ( + typeof field?.custom?.slugify === 'function' ? field.custom.slugify : undefined + ) as Slugify + + const result = customSlugify + ? await customSlugify({ data, req, valueToSlugify }) + : defaultSlugify(valueToSlugify) + + return result +} diff --git a/packages/ui/src/utilities/timestamp.ts b/packages/ui/src/utilities/timestamp.ts new file mode 100644 index 00000000000..3ab2452243e --- /dev/null +++ b/packages/ui/src/utilities/timestamp.ts @@ -0,0 +1,8 @@ +export const timestamp = (label: string) => { + if (!process.env.PAYLOAD_TIME) { + process.env.PAYLOAD_TIME = String(new Date().getTime()) + } + const now = new Date() + // eslint-disable-next-line no-console + console.log(`[${now.getTime() - Number(process.env.PAYLOAD_TIME)}ms] ${label}`) +} diff --git a/packages/ui/src/views/API/LocaleSelector/index.tsx b/packages/ui/src/views/API/LocaleSelector/index.tsx new file mode 100644 index 00000000000..d34c1c4dde3 --- /dev/null +++ b/packages/ui/src/views/API/LocaleSelector/index.tsx @@ -0,0 +1,27 @@ +'use client' +import React from 'react' + +import { SelectField } from '../../../fields/Select/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' + +export const LocaleSelector: React.FC<{ + readonly localeOptions: { + label: Record | string + value: string + }[] + readonly onChange: (value: string) => void +}> = ({ localeOptions, onChange }) => { + const { t } = useTranslation() + + return ( + onChange(value)} + path="locale" + /> + ) +} diff --git a/packages/ui/src/views/API/RenderJSON/index.scss b/packages/ui/src/views/API/RenderJSON/index.scss new file mode 100644 index 00000000000..5ab787c7098 --- /dev/null +++ b/packages/ui/src/views/API/RenderJSON/index.scss @@ -0,0 +1,129 @@ +@import '../../../scss/styles.scss'; + +$tab-width: 24px; + +@layer payload-default { + .query-inspector { + --tab-width: 24px; + + &__json-children { + position: relative; + + &--nested { + & li { + padding-left: 8px; + } + } + + &:before { + content: ''; + position: absolute; + top: 0; + width: 1px; + height: 100%; + border-left: 1px dashed var(--theme-elevation-200); + } + } + + &__row-line { + &--nested { + .query-inspector__json-children { + padding-left: var(--tab-width); + } + } + } + + &__list-wrap { + position: relative; + } + + &__list-toggle { + all: unset; + width: 100%; + text-align: left; + cursor: pointer; + border-radius: 3px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + position: relative; + display: flex; + column-gap: 14px; + row-gap: 10px; + align-items: center; + left: 0; + width: calc(100% + 3px); + background-color: var(--theme-elevation-50); + + &:not(.query-inspector__list-toggle--empty) { + margin-left: calc(var(--tab-width) * -1 - 10px); + } + + svg .stroke { + stroke: var(--theme-elevation-400); + } + + &:hover { + background-color: var(--theme-elevation-100); + } + + &--empty { + cursor: default; + pointer-events: none; + } + } + + &__toggle-row-icon { + &--open { + transform: rotate(0deg); + } + &--closed { + transform: rotate(-90deg); + } + } + + &__value-type { + &--number { + .query-inspector__value { + color: var(--number-color); + } + } + + &--string { + .query-inspector__value { + color: var(--string-color); + } + } + } + + &__bracket { + position: relative; + + &--position-end { + left: 2px; + width: calc(100% - 5px); + } + } + + // Some specific rules targetting the very top of the nested JSON structure or very first items since they need slightly different styling + &__results { + & > .query-inspector__row-line--nested { + & > .query-inspector__list-toggle { + margin-left: 0; + column-gap: 6px; + + .query-inspector__toggle-row-icon { + margin-left: -4px; + } + } + + & > .query-inspector__json-children { + padding-left: calc(var(--base) * 1); + } + + & > .query-inspector__bracket--nested > .query-inspector__bracket--position-end { + padding-left: 16px; + } + } + } + } +} diff --git a/packages/ui/src/views/API/RenderJSON/index.tsx b/packages/ui/src/views/API/RenderJSON/index.tsx new file mode 100644 index 00000000000..b13b4f42e8a --- /dev/null +++ b/packages/ui/src/views/API/RenderJSON/index.tsx @@ -0,0 +1,153 @@ +'use client' +import * as React from 'react' + +import { ChevronIcon } from '../../../icons/Chevron/index.js' +import './index.scss' + +const chars = { + leftCurlyBracket: '\u007B', + leftSquareBracket: '\u005B', + rightCurlyBracket: '\u007D', + rightSquareBracket: '\u005D', +} + +const baseClass = 'query-inspector' + +const Bracket = ({ + type, + comma = false, + position, +}: { + comma?: boolean + position: 'end' | 'start' + type: 'array' | 'object' +}) => { + const rightBracket = type === 'object' ? chars.rightCurlyBracket : chars.rightSquareBracket + const leftBracket = type === 'object' ? chars.leftCurlyBracket : chars.leftSquareBracket + const bracketToRender = position === 'end' ? rightBracket : leftBracket + + return ( + + {bracketToRender} + {position === 'end' && comma ? ',' : null} + + ) +} + +type Args = { + isEmpty?: boolean + object: any[] | Record + objectKey?: string + parentType?: 'array' | 'object' + trailingComma?: boolean +} + +export const RenderJSON = ({ + isEmpty = false, + object, + objectKey, + parentType = 'object', + trailingComma = false, +}: Args) => { + const objectKeys = object ? Object.keys(object) : [] + const objectLength = objectKeys.length + const [isOpen, setIsOpen] = React.useState(true) + const isNested = parentType === 'object' || parentType === 'array' + return ( +
  • + + +
      + {isOpen && + objectKeys.map((key, keyIndex) => { + let value = object[key] + let type = 'string' + const isLastKey = keyIndex === objectLength - 1 + + if (value === null) { + type = 'null' + } else if (value instanceof Date) { + type = 'date' + value = value.toISOString() + } else if (Array.isArray(value)) { + type = 'array' + } else if (typeof value === 'object') { + type = 'object' + } else if (typeof value === 'number') { + type = 'number' + } else if (typeof value === 'boolean') { + type = 'boolean' + } else { + type = 'string' + } + + if (type === 'object' || type === 'array') { + return ( + + ) + } + + if ( + type === 'date' || + type === 'string' || + type === 'null' || + type === 'number' || + type === 'boolean' + ) { + const parentHasKey = Boolean(parentType === 'object' && key) + + const rowClasses = [ + `${baseClass}__row-line`, + `${baseClass}__value-type--${type}`, + `${baseClass}__row-line--${objectKey ? 'nested' : 'top'}`, + ] + .filter(Boolean) + .join(' ') + + return ( +
    • + {parentHasKey ? {`"${key}": `} : null} + + {JSON.stringify(value)} + {isLastKey ? '' : ','} +
      • + ) + } + })} +
    + + {!isEmpty && ( + + + + )} +
    • + ) +} diff --git a/packages/ui/src/views/API/index.client.tsx b/packages/ui/src/views/API/index.client.tsx new file mode 100644 index 00000000000..8df18cbc7f9 --- /dev/null +++ b/packages/ui/src/views/API/index.client.tsx @@ -0,0 +1,224 @@ +'use client' + +import { formatAdminURL, hasDraftsEnabled } from 'payload/shared' +import * as React from 'react' +import { toast } from 'sonner' + +import { CopyToClipboard } from '../../elements/CopyToClipboard/index.js' +import { Gutter } from '../../elements/Gutter/index.js' +import { CheckboxField } from '../../fields/Checkbox/index.js' +import { NumberField } from '../../fields/Number/index.js' +import { Form } from '../../forms/Form/index.js' +import { MinimizeMaximizeIcon } from '../../icons/MinimizeMaximize/index.js' +import { useConfig } from '../../providers/Config/index.js' +import { useDocumentInfo } from '../../providers/DocumentInfo/index.js' +import { useLocale } from '../../providers/Locale/index.js' +import { useSearchParams } from '../../providers/Router/index.js' +import './index.scss' +import { useTranslation } from '../../providers/Translation/index.js' +import { SetDocumentStepNav } from '../Edit/SetDocumentStepNav/index.js' +import { LocaleSelector } from './LocaleSelector/index.js' +import { RenderJSON } from './RenderJSON/index.js' + +const baseClass = 'query-inspector' + +export const APIViewClient: React.FC = () => { + const { id, collectionSlug, globalSlug, initialData, isTrashed } = useDocumentInfo() + + const searchParams = useSearchParams() + const { i18n, t } = useTranslation() + const { code } = useLocale() + + const { + config: { + defaultDepth, + localization, + routes: { api: apiRoute }, + serverURL, + }, + getEntityConfig, + } = useConfig() + + const collectionConfig = getEntityConfig({ collectionSlug }) + const globalConfig = getEntityConfig({ globalSlug }) + + const localeOptions = + localization && + localization.locales.map((locale) => ({ label: locale.label, value: locale.code })) + + let draftsEnabled: boolean = false + let docEndpoint: `/${string}` = undefined + + if (collectionConfig) { + draftsEnabled = hasDraftsEnabled(collectionConfig) + docEndpoint = `/${collectionSlug}/${id}` + } + + if (globalConfig) { + draftsEnabled = hasDraftsEnabled(globalConfig) + docEndpoint = `/globals/${globalSlug}` + } + + const [data, setData] = React.useState(initialData) + const [draft, setDraft] = React.useState(searchParams.get('draft') === 'true') + const [locale, setLocale] = React.useState(searchParams?.get('locale') || code) + const [depth, setDepth] = React.useState( + searchParams.get('depth') || defaultDepth.toString(), + ) + const [authenticated, setAuthenticated] = React.useState(true) + const [fullscreen, setFullscreen] = React.useState(false) + const [origin, setOrigin] = React.useState(serverURL || '') + + // Set the origin to the window.location.origin in useEffect to avoid hydration errors + React.useEffect(() => { + if (!serverURL) { + setOrigin(window.location.origin) + } + }, [serverURL]) + + const trashParam = typeof initialData?.deletedAt === 'string' + + const params = new URLSearchParams({ + depth, + draft: String(draft), + locale, + trash: trashParam ? 'true' : 'false', + }).toString() + + const fetchURL = formatAdminURL({ + apiRoute, + path: `${docEndpoint}?${params}`, + serverURL: origin, + }) + + React.useEffect(() => { + const fetchData = async () => { + try { + const res = await fetch(fetchURL, { + credentials: authenticated ? 'include' : 'omit', + headers: { + 'Accept-Language': i18n.language, + }, + method: 'GET', + }) + + try { + const json = await res.json() + setData(json) + } catch (error) { + toast.error('Error parsing response') + console.error(error) // eslint-disable-line no-console + } + } catch (error) { + toast.error('Error making request') + console.error(error) // eslint-disable-line no-console + } + } + + void fetchData() + }, [i18n.language, fetchURL, authenticated]) + + return ( + + +
    +
    + + API URL + + + {fetchURL} + +
    +
    +
    +
    + {draftsEnabled && ( + setDraft(!draft)} + path="draft" + /> + )} + setAuthenticated(!authenticated)} + path="authenticated" + /> +
    + {localeOptions && } + setDepth(value?.toString())} + path="depth" + /> +
    + +
    +
    +
    + +
    +
    + +
    +
    +     + ) +} diff --git a/packages/ui/src/views/API/index.scss b/packages/ui/src/views/API/index.scss new file mode 100644 index 00000000000..07b5e9016c8 --- /dev/null +++ b/packages/ui/src/views/API/index.scss @@ -0,0 +1 @@ +@import '../../scss/styles.scss'; diff --git a/packages/ui/src/views/API/index.tsx b/packages/ui/src/views/API/index.tsx new file mode 100644 index 00000000000..df81692f596 --- /dev/null +++ b/packages/ui/src/views/API/index.tsx @@ -0,0 +1,9 @@ +import type { DocumentViewServerProps } from 'payload' + +import React from 'react' + +import { APIViewClient } from './index.client.js' + +export function APIView(_props: DocumentViewServerProps) { + return +} diff --git a/packages/ui/src/views/Account/RenderAccount.tsx b/packages/ui/src/views/Account/RenderAccount.tsx new file mode 100644 index 00000000000..e4af614a388 --- /dev/null +++ b/packages/ui/src/views/Account/RenderAccount.tsx @@ -0,0 +1,181 @@ +import type { AdminViewServerProps, DocumentViewServerPropsOnly } from 'payload' + +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import { DocumentHeader } from '../../elements/DocumentHeader/index.js' +import { HydrateAuthProvider } from '../../elements/HydrateAuthProvider/index.js' +import { RenderServerComponent } from '../../elements/RenderServerComponent/index.js' +import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js' +import { EditDepthProvider } from '../../providers/EditDepth/index.js' +import { buildFormState } from '../../utilities/buildFormState.js' +import { getDocPreferences } from '../Document/getDocPreferences.js' +import { getDocumentData } from '../Document/getDocumentData.js' +import { getDocumentPermissions } from '../Document/getDocumentPermissions.js' +import { getIsLocked } from '../Document/getIsLocked.js' +import { getVersions } from '../Document/getVersions.js' +import { DefaultEditView as EditView } from '../Edit/index.js' +import { AccountClient } from './index.client.js' +import { Settings } from './Settings/index.js' + +export async function AccountView({ initPageResult, params, searchParams }: AdminViewServerProps) { + const { + languageOptions, + locale, + permissions, + req, + req: { + i18n, + payload, + payload: { config }, + user, + }, + } = initPageResult + + const { + admin: { theme, user: userSlug }, + routes: { api }, + serverURL, + } = config + + const collectionConfig = payload?.collections?.[userSlug]?.config + + if (collectionConfig && user?.id) { + // Fetch the data required for the view + const data = await getDocumentData({ + id: user.id, + collectionSlug: collectionConfig.slug, + locale, + payload, + req, + user, + }) + + if (!data) { + throw new Error('not-found') + } + + // Get document preferences + const docPreferences = await getDocPreferences({ + id: user.id, + collectionSlug: collectionConfig.slug, + payload, + user, + }) + + // Get permissions + const { + docPermissions, + hasDeletePermission, + hasPublishPermission, + hasSavePermission, + hasTrashPermission, + } = await getDocumentPermissions({ + id: user.id, + collectionConfig, + data, + req, + }) + + // Build initial form state from data + const { state: formState } = await buildFormState({ + id: user.id, + collectionSlug: collectionConfig.slug, + data, + docPermissions, + docPreferences, + locale: locale?.code, + operation: 'update', + renderAllFields: true, + req, + schemaPath: collectionConfig.slug, + skipValidation: true, + }) + + // Fetch document lock state + const { currentEditor, isLocked, lastUpdateTime } = await getIsLocked({ + id: user.id, + collectionConfig, + isEditing: true, + req, + }) + + // Get all versions required for UI + const { hasPublishedDoc, mostRecentVersionIsAutosaved, unpublishedVersionCount, versionCount } = + await getVersions({ + id: user.id, + collectionConfig, + doc: data, + docPermissions, + locale: locale?.code, + payload, + user, + }) + + return ( + + } + apiURL={formatAdminURL({ + apiRoute: api, + path: `/${userSlug}${user?.id ? `/${user.id}` : ''}`, + })} + collectionSlug={userSlug} + currentEditor={currentEditor} + docPermissions={docPermissions} + hasDeletePermission={hasDeletePermission} + hasPublishedDoc={hasPublishedDoc} + hasPublishPermission={hasPublishPermission} + hasSavePermission={hasSavePermission} + hasTrashPermission={hasTrashPermission} + id={user?.id} + initialData={data} + initialState={formState} + isEditing + isLocked={isLocked} + lastUpdateTime={lastUpdateTime} + mostRecentVersionIsAutosaved={mostRecentVersionIsAutosaved} + unpublishedVersionCount={unpublishedVersionCount} + versionCount={versionCount} + > + + + + {RenderServerComponent({ + Component: config.admin?.components?.views?.account?.Component, + Fallback: EditView, + importMap: payload.importMap, + serverProps: { + doc: data, + hasPublishedDoc, + i18n, + initPageResult, + locale, + params, + payload, + permissions, + routeSegments: [], + searchParams, + user, + } satisfies DocumentViewServerPropsOnly, + })} + + + + ) + } + + throw new Error('not-found') +} diff --git a/packages/ui/src/views/Account/ResetPreferences/index.tsx b/packages/ui/src/views/Account/ResetPreferences/index.tsx new file mode 100644 index 00000000000..50fbf2d6cca --- /dev/null +++ b/packages/ui/src/views/Account/ResetPreferences/index.tsx @@ -0,0 +1,89 @@ +'use client' +import type { TypedUser } from 'payload' + +import { formatAdminURL } from 'payload/shared' +import * as qs from 'qs-esm' +import { Fragment, useCallback } from 'react' +import { toast } from 'sonner' + +import { Button } from '../../../elements/Button/index.js' +import { ConfirmationModal } from '../../../elements/ConfirmationModal/index.js' +import { useModal } from '../../../elements/Modal/index.js' +import { useConfig } from '../../../providers/Config/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' + +const confirmResetModalSlug = 'confirm-reset-modal' + +export const ResetPreferences: React.FC<{ + readonly user?: TypedUser +}> = ({ user }) => { + const { openModal } = useModal() + const { t } = useTranslation() + const { + config: { + routes: { api: apiRoute }, + }, + } = useConfig() + + const handleResetPreferences = useCallback(async () => { + if (!user) { + return + } + + const stringifiedQuery = qs.stringify( + { + depth: 0, + where: { + 'user.value': { + equals: user.id, + }, + }, + }, + { addQueryPrefix: true }, + ) + + try { + const res = await fetch( + formatAdminURL({ + apiRoute, + path: `/payload-preferences${stringifiedQuery}`, + }), + { + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + method: 'DELETE', + }, + ) + + const json = await res.json() + const message = json.message + + if (res.ok) { + toast.success(message) + } else { + toast.error(message) + } + } catch (_err) { + // swallow error + } + }, [apiRoute, user]) + + return ( + +
    + +
    + +     + ) +} diff --git a/packages/ui/src/views/Account/Settings/LanguageSelector.tsx b/packages/ui/src/views/Account/Settings/LanguageSelector.tsx new file mode 100644 index 00000000000..a64f62fc368 --- /dev/null +++ b/packages/ui/src/views/Account/Settings/LanguageSelector.tsx @@ -0,0 +1,30 @@ +'use client' +import type { AcceptedLanguages } from '@payloadcms/translations' +import type { LanguageOptions } from 'payload' + +import React from 'react' + +import type { Option as ReactSelectOption } from '../../../elements/ReactSelect/index.js' + +import { ReactSelect } from '../../../elements/ReactSelect/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' + +export const LanguageSelector: React.FC<{ + languageOptions: LanguageOptions +}> = (props) => { + const { languageOptions } = props + + const { i18n, switchLanguage } = useTranslation() + + return ( + ) => { + await switchLanguage(option.value) + }} + options={languageOptions} + value={languageOptions.find((language) => language.value === i18n.language)} + /> + ) +} diff --git a/packages/ui/src/views/Account/Settings/index.scss b/packages/ui/src/views/Account/Settings/index.scss new file mode 100644 index 00000000000..18d6522c68d --- /dev/null +++ b/packages/ui/src/views/Account/Settings/index.scss @@ -0,0 +1,48 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .payload-settings { + position: relative; + margin-bottom: calc(var(--base) * 2); + + h3 { + margin: 0; + } + + &::before, + &::after { + content: ''; + display: block; + height: 1px; + background: var(--theme-elevation-100); + width: calc(100% + calc(var(--base) * 5)); + left: calc(var(--gutter-h) * -1); + top: 0; + position: absolute; + } + + &::after { + display: none; + bottom: 0; + top: unset; + } + + margin-top: calc(var(--base) * 3); + padding-top: calc(var(--base) * 3); + padding-bottom: calc(var(--base) * 3); + display: flex; + flex-direction: column; + gap: var(--base); + + @include mid-break { + margin-bottom: var(--base); + padding-top: calc(var(--base) * 2); + margin-top: calc(var(--base) * 2); + padding-bottom: calc(var(--base) * 2); + + &::after { + display: block; + } + } + } +} diff --git a/packages/ui/src/views/Account/Settings/index.tsx b/packages/ui/src/views/Account/Settings/index.tsx new file mode 100644 index 00000000000..9690b128d08 --- /dev/null +++ b/packages/ui/src/views/Account/Settings/index.tsx @@ -0,0 +1,35 @@ +import type { I18n } from '@payloadcms/translations' +import type { BasePayload, Config, LanguageOptions, TypedUser } from 'payload' + +import React from 'react' + +import { FieldLabel } from '../../../fields/FieldLabel/index.js' +import { ResetPreferences } from '../ResetPreferences/index.js' +import './index.scss' +import { ToggleTheme } from '../ToggleTheme/index.js' +import { LanguageSelector } from './LanguageSelector.js' + +const baseClass = 'payload-settings' + +export const Settings: React.FC<{ + readonly className?: string + readonly i18n: I18n + readonly languageOptions: LanguageOptions + readonly payload: BasePayload + readonly theme: Config['admin']['theme'] + readonly user?: TypedUser +}> = (props) => { + const { className, i18n, languageOptions, theme, user } = props + + return ( +
    +

    {i18n.t('general:payloadSettings')}

    +
    + + +
    + {theme === 'all' && } + +
    + ) +} diff --git a/packages/ui/src/views/Account/ToggleTheme/index.tsx b/packages/ui/src/views/Account/ToggleTheme/index.tsx new file mode 100644 index 00000000000..d5c1c22f73b --- /dev/null +++ b/packages/ui/src/views/Account/ToggleTheme/index.tsx @@ -0,0 +1,46 @@ +'use client' + +import React, { useCallback } from 'react' + +import { RadioGroupField } from '../../../fields/RadioGroup/index.js' +import { useTheme } from '../../../providers/Theme/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' + +export const ToggleTheme: React.FC = () => { + const { autoMode, setTheme, theme } = useTheme() + const { t } = useTranslation() + + const onChange = useCallback( + (newTheme) => { + setTheme(newTheme) + }, + [setTheme], + ) + + return ( + + ) +} diff --git a/packages/ui/src/views/Account/index.client.tsx b/packages/ui/src/views/Account/index.client.tsx new file mode 100644 index 00000000000..764c1ee4174 --- /dev/null +++ b/packages/ui/src/views/Account/index.client.tsx @@ -0,0 +1,23 @@ +'use client' +import React from 'react' + +import { type StepNavItem, useStepNav } from '../../elements/StepNav/index.js' +import { useTranslation } from '../../providers/Translation/index.js' + +export const AccountClient: React.FC = () => { + const { setStepNav } = useStepNav() + const { t } = useTranslation() + + React.useEffect(() => { + const nav: StepNavItem[] = [] + + nav.push({ + label: t('authentication:account'), + url: '/account', + }) + + setStepNav(nav) + }, [setStepNav, t]) + + return null +} diff --git a/packages/ui/src/views/BrowseByFolder/BrowseByFolderView.tsx b/packages/ui/src/views/BrowseByFolder/BrowseByFolderView.tsx new file mode 100644 index 00000000000..60abff0ed36 --- /dev/null +++ b/packages/ui/src/views/BrowseByFolder/BrowseByFolderView.tsx @@ -0,0 +1,24 @@ +import type React from 'react' + +import type { BuildFolderViewArgs } from './buildView.js' + +import { buildBrowseByFolderView } from './buildView.js' + +export type { BuildFolderViewArgs } + +/** + * Framework-agnostic BrowseByFolder server component. + * Throws Error('not-found') instead of calling framework-specific notFound(). + */ +export const BrowseByFolder: React.FC = async (args) => { + try { + const { View } = await buildBrowseByFolderView(args) + return View + } catch (error) { + if (error?.message === 'not-found') { + throw error + } + console.error(error) // eslint-disable-line no-console + throw error + } +} diff --git a/packages/ui/src/views/BrowseByFolder/buildView.tsx b/packages/ui/src/views/BrowseByFolder/buildView.tsx new file mode 100644 index 00000000000..9cb09fa4041 --- /dev/null +++ b/packages/ui/src/views/BrowseByFolder/buildView.tsx @@ -0,0 +1,209 @@ +import type { + AdminViewServerProps, + BuildCollectionFolderViewResult, + FolderListViewClientProps, + FolderListViewServerPropsOnly, + FolderSortKeys, + ListQuery, +} from 'payload' + +import { formatAdminURL, PREFERENCE_KEYS } from 'payload/shared' +import React from 'react' + +import { HydrateAuthProvider } from '../../elements/HydrateAuthProvider/index.js' +import { RenderServerComponent } from '../../elements/RenderServerComponent/index.js' +import { getFolderResultsComponentAndData } from '../../utilities/getFolderResultsComponentAndData.js' +import { upsertPreferences } from '../../utilities/upsertPreferences.js' +import { DefaultBrowseByFolderView } from './index.js' + +export type BuildFolderViewArgs = { + customCellProps?: Record + disableBulkDelete?: boolean + disableBulkEdit?: boolean + enableRowSelections: boolean + folderID?: number | string + isInDrawer?: boolean + overrideEntityVisibility?: boolean + query: ListQuery + /** Framework-specific redirect — throws framework error */ + redirect?: (url: string) => never +} & AdminViewServerProps + +export const buildBrowseByFolderView = async ( + args: BuildFolderViewArgs, +): Promise => { + const { + browseByFolderSlugs: browseByFolderSlugsFromArgs = [], + disableBulkDelete, + disableBulkEdit, + enableRowSelections, + folderID, + initPageResult, + isInDrawer, + params, + query: queryFromArgs, + redirect, + searchParams, + } = args + + const { + locale: fullLocale, + permissions, + req: { + i18n, + payload, + payload: { config }, + query: queryFromReq, + user, + }, + visibleEntities, + } = initPageResult + + if (config.folders === false || config.folders.browseByFolder === false) { + throw new Error('not-found') + } + + const foldersSlug = config.folders.slug + + const allowReadCollectionSlugs = browseByFolderSlugsFromArgs.filter( + (collectionSlug) => + permissions?.collections?.[collectionSlug]?.read && + visibleEntities.collections.includes(collectionSlug), + ) + + const query = + queryFromArgs || + ((queryFromReq + ? { + ...queryFromReq, + relationTo: + typeof queryFromReq?.relationTo === 'string' + ? JSON.parse(queryFromReq.relationTo) + : undefined, + } + : {}) as ListQuery) + + let collectionsToDisplay: string[] = [] + if (folderID && Array.isArray(query?.relationTo)) { + collectionsToDisplay = query.relationTo.filter( + (slug) => allowReadCollectionSlugs.includes(slug) || slug === foldersSlug, + ) + } else if (folderID) { + collectionsToDisplay = [...allowReadCollectionSlugs, foldersSlug] + } else { + collectionsToDisplay = [foldersSlug] + } + + const { + routes: { admin: adminRoute }, + } = config + + const browseByFolderPreferences = await upsertPreferences<{ + sort?: FolderSortKeys + viewPreference?: 'grid' | 'list' + }>({ + key: PREFERENCE_KEYS.BROWSE_BY_FOLDER, + req: initPageResult.req, + value: { + sort: query?.sort as FolderSortKeys, + }, + }) + + const sortPreference: FolderSortKeys = browseByFolderPreferences?.sort || 'name' + const viewPreference = browseByFolderPreferences?.viewPreference || 'grid' + + const { breadcrumbs, documents, folderAssignedCollections, FolderResultsComponent, subfolders } = + await getFolderResultsComponentAndData({ + browseByFolder: true, + collectionsToDisplay, + displayAs: viewPreference, + folderAssignedCollections: collectionsToDisplay.filter((slug) => slug !== foldersSlug) || [], + folderID, + req: initPageResult.req, + sort: sortPreference, + }) + + const resolvedFolderID = breadcrumbs[breadcrumbs.length - 1]?.id + + if ( + !isInDrawer && + ((resolvedFolderID && folderID && folderID !== resolvedFolderID) || + (folderID && !resolvedFolderID)) + ) { + const redirectURL = formatAdminURL({ + adminRoute, + path: config.admin.routes.browseByFolder, + }) + if (redirect) { + redirect(redirectURL) + } + } + + const serverProps: Omit = { + documents, + i18n, + locale: fullLocale, + params, + payload, + permissions, + searchParams, + subfolders, + user, + } + + const allAvailableCollectionSlugs = + folderID && Array.isArray(folderAssignedCollections) && folderAssignedCollections.length + ? allowReadCollectionSlugs.filter((slug) => folderAssignedCollections.includes(slug)) + : allowReadCollectionSlugs + + const availableActiveCollectionFolderSlugs = collectionsToDisplay.filter((slug) => { + if (slug === foldersSlug) { + return permissions?.collections?.[foldersSlug]?.read + } else { + return !folderAssignedCollections || folderAssignedCollections.includes(slug) + } + }) + + const allowCreateCollectionSlugs = ( + resolvedFolderID ? [foldersSlug, ...allAvailableCollectionSlugs] : [foldersSlug] + ).filter((collectionSlug) => { + if (collectionSlug === foldersSlug) { + return permissions?.collections?.[foldersSlug]?.create + } + return ( + permissions?.collections?.[collectionSlug]?.create && + visibleEntities.collections.includes(collectionSlug) + ) + }) + + return { + View: ( + <> + + {RenderServerComponent({ + clientProps: { + activeCollectionFolderSlugs: availableActiveCollectionFolderSlugs, + allCollectionFolderSlugs: allAvailableCollectionSlugs, + allowCreateCollectionSlugs, + baseFolderPath: `/browse-by-folder`, + breadcrumbs, + disableBulkDelete, + disableBulkEdit, + documents, + enableRowSelections, + folderAssignedCollections, + folderFieldName: config.folders.fieldName, + folderID: resolvedFolderID || null, + FolderResultsComponent, + sort: sortPreference, + subfolders, + viewPreference, + } satisfies FolderListViewClientProps, + Fallback: DefaultBrowseByFolderView, + importMap: payload.importMap, + serverProps, + })} + + ), + } +} diff --git a/packages/ui/src/views/BrowseByFolder/handleServerFunction.tsx b/packages/ui/src/views/BrowseByFolder/handleServerFunction.tsx new file mode 100644 index 00000000000..540f87a1d3b --- /dev/null +++ b/packages/ui/src/views/BrowseByFolder/handleServerFunction.tsx @@ -0,0 +1,95 @@ +import type { ListQuery, ServerFunction, VisibleEntities } from 'payload' +import type React from 'react' + +import { canAccessAdmin, isEntityHidden, UnauthorizedError } from 'payload' +import { applyLocaleFiltering } from 'payload/shared' + +import { getClientConfig } from '../../utilities/getClientConfig.js' +import { buildBrowseByFolderView } from './buildView.js' + +export type RenderBrowseFolderServerFnArgs = { + browseByFolderSlugs?: string[] + folderID?: number | string + query?: ListQuery + searchParams?: Record +} + +export type RenderBrowseFolderServerFnReturnType = { + View: React.ReactNode +} + +export const renderBrowseFolderHandler: ServerFunction< + RenderBrowseFolderServerFnArgs, + Promise +> = async (args) => { + const { + browseByFolderSlugs = [], + folderID, + query, + req, + req: { + i18n, + payload, + payload: { config }, + user, + }, + searchParams = {}, + } = args + + if (!req.user) { + throw new UnauthorizedError() + } + + await canAccessAdmin({ req }) + + const clientConfig = getClientConfig({ + config, + i18n, + importMap: payload.importMap, + user, + }) + await applyLocaleFiltering({ clientConfig, config, req }) + + const visibleEntities: VisibleEntities = { + collections: payload.config.collections + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), + globals: payload.config.globals + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), + } + + const { View } = await buildBrowseByFolderView({ + browseByFolderSlugs, + clientConfig, + enableRowSelections: true, + folderID, + i18n, + importMap: payload.importMap, + initPageResult: { + cookies: undefined, + languageOptions: undefined, + locale: + req.locale && clientConfig.localization + ? clientConfig.localization.locales?.find((l) => l.code === req.locale) + : undefined, + permissions: undefined, + req, + translations: undefined, + visibleEntities, + }, + params: { + segments: folderID ? ['browse-by-folder', String(folderID)] : ['browse-by-folder'], + }, + payload, + query: query ?? {}, + redirect: (url: string) => { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw { href: url } + }, + searchParams, + viewType: 'folders', + }) + + return { View } +} diff --git a/packages/ui/src/views/BrowseByFolder/index.tsx b/packages/ui/src/views/BrowseByFolder/index.tsx index a4fae274238..51c70c775d1 100644 --- a/packages/ui/src/views/BrowseByFolder/index.tsx +++ b/packages/ui/src/views/BrowseByFolder/index.tsx @@ -5,7 +5,6 @@ import type { FolderListViewClientProps } from 'payload' import { useDndMonitor } from '@dnd-kit/core' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { PREFERENCE_KEYS } from 'payload/shared' import React, { Fragment } from 'react' @@ -28,6 +27,7 @@ import { useEditDepth } from '../../providers/EditDepth/index.js' import { FolderProvider, useFolder } from '../../providers/Folders/index.js' import { usePreferences } from '../../providers/Preferences/index.js' import { useRouteCache } from '../../providers/RouteCache/index.js' +import { useRouter } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useTranslation } from '../../providers/Translation/index.js' import { useWindowInfo } from '../../providers/WindowInfo/index.js' diff --git a/packages/ui/src/views/CollectionFolder/index.tsx b/packages/ui/src/views/CollectionFolder/index.tsx index 6a2a30511d6..bfcfa1b632f 100644 --- a/packages/ui/src/views/CollectionFolder/index.tsx +++ b/packages/ui/src/views/CollectionFolder/index.tsx @@ -5,7 +5,6 @@ import type { FolderListViewClientProps } from 'payload' import { useDndMonitor } from '@dnd-kit/core' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { formatAdminURL } from 'payload/shared' import React, { Fragment } from 'react' @@ -30,6 +29,7 @@ import { useEditDepth } from '../../providers/EditDepth/index.js' import { FolderProvider, useFolder } from '../../providers/Folders/index.js' import { usePreferences } from '../../providers/Preferences/index.js' import { useRouteCache } from '../../providers/RouteCache/index.js' +import { useRouter } from '../../providers/Router/index.js' import './index.scss' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useTranslation } from '../../providers/Translation/index.js' diff --git a/packages/ui/src/views/CollectionFolders/buildView.tsx b/packages/ui/src/views/CollectionFolders/buildView.tsx new file mode 100644 index 00000000000..e63e70ce8d9 --- /dev/null +++ b/packages/ui/src/views/CollectionFolders/buildView.tsx @@ -0,0 +1,194 @@ +import type { + AdminViewServerProps, + BuildCollectionFolderViewResult, + FolderListViewClientProps, + FolderListViewServerPropsOnly, + FolderSortKeys, + ListQuery, +} from 'payload' + +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import { HydrateAuthProvider } from '../../elements/HydrateAuthProvider/index.js' +import { RenderServerComponent } from '../../elements/RenderServerComponent/index.js' +import { getFolderResultsComponentAndData } from '../../utilities/getFolderResultsComponentAndData.js' +import { upsertPreferences } from '../../utilities/upsertPreferences.js' +import { DefaultCollectionFolderView } from '../CollectionFolder/index.js' + +export type BuildCollectionFolderViewStateArgs = { + disableBulkDelete?: boolean + disableBulkEdit?: boolean + enableRowSelections: boolean + folderID?: number | string + isInDrawer?: boolean + overrideEntityVisibility?: boolean + query: ListQuery + /** Framework-specific redirect — throws framework error */ + redirect?: (url: string) => never +} & AdminViewServerProps + +/** + * Builds the entire view for collection-folder views on the server. + * Framework-agnostic version: accepts optional redirect callback instead of importing from next/navigation. + */ +export const buildCollectionFolderView = async ( + args: BuildCollectionFolderViewStateArgs, +): Promise => { + const { + disableBulkDelete, + disableBulkEdit, + enableRowSelections, + folderID, + initPageResult, + isInDrawer, + overrideEntityVisibility, + params, + query: queryFromArgs, + redirect, + searchParams, + } = args + + const { + collectionConfig, + collectionConfig: { slug: collectionSlug }, + locale: fullLocale, + permissions, + req: { + i18n, + payload, + payload: { config }, + query: queryFromReq, + user, + }, + visibleEntities, + } = initPageResult + + if (!config.folders) { + throw new Error('not-found') + } + + if ( + !permissions?.collections?.[collectionSlug]?.read || + !permissions?.collections?.[config.folders.slug].read + ) { + throw new Error('not-found') + } + + if (collectionConfig) { + if ( + (!visibleEntities.collections.includes(collectionSlug) && !overrideEntityVisibility) || + !config.folders + ) { + throw new Error('not-found') + } + + const query = queryFromArgs || queryFromReq + + const collectionFolderPreferences = await upsertPreferences<{ + sort?: FolderSortKeys + viewPreference?: 'grid' | 'list' + }>({ + key: `${collectionSlug}-collection-folder`, + req: initPageResult.req, + value: { + sort: query?.sort as FolderSortKeys, + }, + }) + + const sortPreference: FolderSortKeys = collectionFolderPreferences?.sort || 'name' + const viewPreference = collectionFolderPreferences?.viewPreference || 'grid' + + const { + routes: { admin: adminRoute }, + } = config + + const { + breadcrumbs, + documents, + folderAssignedCollections, + FolderResultsComponent, + subfolders, + } = await getFolderResultsComponentAndData({ + browseByFolder: false, + collectionsToDisplay: [config.folders.slug, collectionSlug], + displayAs: viewPreference, + folderAssignedCollections: [collectionSlug], + folderID, + req: initPageResult.req, + sort: sortPreference, + }) + + const resolvedFolderID = breadcrumbs[breadcrumbs.length - 1]?.id + + if ( + !isInDrawer && + ((resolvedFolderID && folderID && folderID !== resolvedFolderID) || + (folderID && !resolvedFolderID)) + ) { + const redirectURL = formatAdminURL({ + adminRoute, + path: `/collections/${collectionSlug}/${config.folders.slug}`, + }) + if (redirect) { + redirect(redirectURL) + } + } + + const serverProps: FolderListViewServerPropsOnly = { + collectionConfig, + documents, + i18n, + locale: fullLocale, + params, + payload, + permissions, + searchParams, + subfolders, + user, + } + + const search = query?.search as string + + return { + View: ( + <> + + {RenderServerComponent({ + clientProps: { + allCollectionFolderSlugs: [config.folders.slug, collectionSlug], + allowCreateCollectionSlugs: [ + permissions?.collections?.[config.folders.slug]?.create + ? config.folders.slug + : null, + resolvedFolderID && permissions?.collections?.[collectionSlug]?.create + ? collectionSlug + : null, + ].filter(Boolean), + baseFolderPath: `/collections/${collectionSlug}/${config.folders.slug}`, + breadcrumbs, + collectionSlug, + disableBulkDelete, + disableBulkEdit, + documents, + enableRowSelections, + folderAssignedCollections, + folderFieldName: config.folders.fieldName, + folderID: resolvedFolderID || null, + FolderResultsComponent, + search, + sort: sortPreference, + subfolders, + viewPreference, + } satisfies FolderListViewClientProps, + Fallback: DefaultCollectionFolderView, + importMap: payload.importMap, + serverProps, + })} + + ), + } + } + + throw new Error('not-found') +} diff --git a/packages/ui/src/views/CollectionFolders/handleServerFunction.tsx b/packages/ui/src/views/CollectionFolders/handleServerFunction.tsx new file mode 100644 index 00000000000..145373cc473 --- /dev/null +++ b/packages/ui/src/views/CollectionFolders/handleServerFunction.tsx @@ -0,0 +1,102 @@ +import type { ListQuery, ServerFunction, VisibleEntities } from 'payload' +import type React from 'react' + +import { canAccessAdmin, isEntityHidden, UnauthorizedError } from 'payload' +import { applyLocaleFiltering } from 'payload/shared' + +import { getClientConfig } from '../../utilities/getClientConfig.js' +import { buildCollectionFolderView } from './buildView.js' + +export type RenderCollectionFolderServerFnArgs = { + collectionSlug: string + folderID?: number | string + query?: ListQuery + searchParams?: Record +} + +export type RenderCollectionFolderServerFnReturnType = { + View: React.ReactNode +} + +export const renderCollectionFolderHandler: ServerFunction< + RenderCollectionFolderServerFnArgs, + Promise +> = async (args) => { + const { + collectionSlug, + folderID, + query, + req, + req: { + i18n, + payload, + payload: { config }, + user, + }, + searchParams = {}, + } = args + + if (!req.user) { + throw new UnauthorizedError() + } + + await canAccessAdmin({ req }) + + const clientConfig = getClientConfig({ + config, + i18n, + importMap: payload.importMap, + user, + }) + await applyLocaleFiltering({ clientConfig, config, req }) + + const visibleEntities: VisibleEntities = { + collections: payload.config.collections + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), + globals: payload.config.globals + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), + } + + const { View } = await buildCollectionFolderView({ + clientConfig, + enableRowSelections: true, + folderID, + i18n, + importMap: payload.importMap, + initPageResult: { + collectionConfig: payload?.collections?.[collectionSlug]?.config, + cookies: undefined, + languageOptions: undefined, + locale: + req.locale && clientConfig.localization + ? clientConfig.localization.locales?.find((l) => l.code === req.locale) + : undefined, + permissions: undefined, + req, + translations: undefined, + visibleEntities, + }, + params: { + segments: folderID + ? [ + 'collections', + collectionSlug, + config.folders ? config.folders.slug : 'folders', + String(folderID), + ] + : ['collections', collectionSlug, config.folders ? config.folders.slug : 'folders'], + }, + payload, + query: query ?? {}, + redirect: (url: string) => { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw { href: url } + }, + searchParams, + viewType: 'collection-folders', + }) + + return { View } +} diff --git a/packages/ui/src/views/CollectionFolders/index.tsx b/packages/ui/src/views/CollectionFolders/index.tsx new file mode 100644 index 00000000000..bbb857785cd --- /dev/null +++ b/packages/ui/src/views/CollectionFolders/index.tsx @@ -0,0 +1,24 @@ +import type React from 'react' + +import type { BuildCollectionFolderViewStateArgs } from './buildView.js' + +import { buildCollectionFolderView } from './buildView.js' + +export type { BuildCollectionFolderViewStateArgs } + +/** + * Framework-agnostic CollectionFolderView. + * Throws Error('not-found') instead of calling framework-specific notFound(). + */ +export const CollectionFolderView: React.FC = async (args) => { + try { + const { View } = await buildCollectionFolderView(args) + return View + } catch (error) { + if (error?.message === 'not-found') { + throw error + } + console.error(error) // eslint-disable-line no-console + throw error + } +} diff --git a/packages/ui/src/views/CollectionTrash/index.tsx b/packages/ui/src/views/CollectionTrash/index.tsx new file mode 100644 index 00000000000..b6b5543ecd6 --- /dev/null +++ b/packages/ui/src/views/CollectionTrash/index.tsx @@ -0,0 +1,43 @@ +import type { AdminViewServerProps, ListQuery } from 'payload' +import type React from 'react' + +import { renderListView } from '../List/RenderListView.js' + +type RenderTrashViewArgs = { + customCellProps?: Record + disableBulkDelete?: boolean + disableBulkEdit?: boolean + disableQueryPresets?: boolean + drawerSlug?: string + enableRowSelections: boolean + overrideEntityVisibility?: boolean + query: ListQuery + redirectAfterDelete?: boolean + redirectAfterDuplicate?: boolean + redirectAfterRestore?: boolean +} & AdminViewServerProps + +/** + * Framework-agnostic TrashView. + * Throws Error('not-found') instead of calling framework-specific notFound(). + */ +export const TrashView: React.FC> = async ( + args, +) => { + try { + const { List: TrashList } = await renderListView({ + ...args, + enableRowSelections: true, + trash: true, + viewType: 'trash', + }) + + return TrashList + } catch (error) { + if (error.message === 'not-found') { + throw error + } + console.error(error) // eslint-disable-line no-console + throw error + } +} diff --git a/packages/ui/src/views/CreateFirstUser/index.client.tsx b/packages/ui/src/views/CreateFirstUser/index.client.tsx new file mode 100644 index 00000000000..21516dfe02c --- /dev/null +++ b/packages/ui/src/views/CreateFirstUser/index.client.tsx @@ -0,0 +1,135 @@ +'use client' +import type { + DocumentPreferences, + FormState, + LoginWithUsernameOptions, + SanitizedDocumentPermissions, +} from 'payload' + +import { formatAdminURL } from 'payload/shared' +import React, { useEffect } from 'react' + +import type { FormProps } from '../../forms/Form/index.js' +import type { UserWithToken } from '../../providers/Auth/index.js' + +import { EmailAndUsernameFields } from '../../elements/EmailAndUsername/index.js' +import { ConfirmPasswordField } from '../../fields/ConfirmPassword/index.js' +import { PasswordField } from '../../fields/Password/index.js' +import { Form } from '../../forms/Form/index.js' +import { RenderFields } from '../../forms/RenderFields/index.js' +import { FormSubmit } from '../../forms/Submit/index.js' +import { useAuth } from '../../providers/Auth/index.js' +import { useConfig } from '../../providers/Config/index.js' +import { useServerFunctions } from '../../providers/ServerFunctions/index.js' +import { useTranslation } from '../../providers/Translation/index.js' +import { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js' + +export const CreateFirstUserClient: React.FC<{ + docPermissions: SanitizedDocumentPermissions + docPreferences: DocumentPreferences + initialState: FormState + loginWithUsername?: false | LoginWithUsernameOptions + userSlug: string +}> = ({ docPermissions, docPreferences, initialState, loginWithUsername, userSlug }) => { + const { + config: { + routes: { admin, api: apiRoute }, + }, + getEntityConfig, + } = useConfig() + + const { getFormState } = useServerFunctions() + + const { t } = useTranslation() + const { setUser } = useAuth() + + const abortOnChangeRef = React.useRef(null) + + const collectionConfig = getEntityConfig({ collectionSlug: userSlug }) + + const onChange: FormProps['onChange'][0] = React.useCallback( + async ({ formState: prevFormState, submitted }) => { + const controller = handleAbortRef(abortOnChangeRef) + + const response = await getFormState({ + collectionSlug: userSlug, + docPermissions, + docPreferences, + formState: prevFormState, + operation: 'create', + schemaPath: userSlug, + signal: controller.signal, + skipValidation: !submitted, + }) + + abortOnChangeRef.current = null + + if (response && response.state) { + return response.state + } + }, + [userSlug, getFormState, docPermissions, docPreferences], + ) + + const handleFirstRegister = (data: UserWithToken) => { + setUser(data) + } + + useEffect(() => { + const abortOnChange = abortOnChangeRef.current + + return () => { + abortAndIgnore(abortOnChange) + } + }, []) + + return ( +
    + + + + + {t('general:create')} + + ) +} diff --git a/packages/ui/src/views/CreateFirstUser/index.scss b/packages/ui/src/views/CreateFirstUser/index.scss new file mode 100644 index 00000000000..3b17b5e3f42 --- /dev/null +++ b/packages/ui/src/views/CreateFirstUser/index.scss @@ -0,0 +1,21 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .create-first-user { + display: flex; + flex-direction: column; + gap: base(0.4); + + > form > .field-type { + margin-bottom: var(--base); + + & .form-submit { + margin: 0; + } + } + } + + .emailAndUsername { + margin-bottom: var(--base); + } +} diff --git a/packages/ui/src/views/CreateFirstUser/index.tsx b/packages/ui/src/views/CreateFirstUser/index.tsx new file mode 100644 index 00000000000..44b6119770a --- /dev/null +++ b/packages/ui/src/views/CreateFirstUser/index.tsx @@ -0,0 +1,97 @@ +import type { + AdminViewServerProps, + SanitizedDocumentPermissions, + SanitizedFieldsPermissions, +} from 'payload' + +import React from 'react' + +import { buildFormState } from '../../utilities/buildFormState.js' +// TODO: getDocPreferences is currently in packages/next/src/views/Document/getDocPreferences.js +// It needs to be moved to packages/ui as a separate step +import { getDocPreferences } from '../Document/getDocPreferences.js' +// TODO: getDocumentData is currently in packages/next/src/views/Document/getDocumentData.js +// It needs to be moved to packages/ui as a separate step +import { getDocumentData } from '../Document/getDocumentData.js' +import { CreateFirstUserClient } from './index.client.js' +import './index.scss' + +export async function CreateFirstUserView({ initPageResult }: AdminViewServerProps) { + const { + locale, + req, + req: { + payload: { + collections, + config: { + admin: { user: userSlug }, + }, + }, + }, + } = initPageResult + + const collectionConfig = collections?.[userSlug]?.config + const { auth: authOptions } = collectionConfig + const loginWithUsername = authOptions.loginWithUsername + + // Fetch the data required for the view + const data = await getDocumentData({ + collectionSlug: collectionConfig.slug, + locale, + payload: req.payload, + req, + user: req.user, + }) + + // Get document preferences + const docPreferences = await getDocPreferences({ + collectionSlug: collectionConfig.slug, + payload: req.payload, + user: req.user, + }) + + const baseFields: SanitizedFieldsPermissions = Object.fromEntries( + collectionConfig.fields + .filter((f): f is { name: string } & typeof f => 'name' in f && typeof f.name === 'string') + .map((f) => [f.name, { create: true, read: true, update: true }]), + ) + + // In create-first-user we should always allow all fields + const docPermissionsForForm: SanitizedDocumentPermissions = { + create: true, + delete: true, + fields: baseFields, + read: true, + readVersions: true, + update: true, + } + + // Build initial form state from data + const { state: formState } = await buildFormState({ + collectionSlug: collectionConfig.slug, + data, + docPermissions: docPermissionsForForm, + docPreferences, + locale: locale?.code, + operation: 'create', + renderAllFields: true, + req, + schemaPath: collectionConfig.slug, + skipClientConfigAuth: true, + skipValidation: true, + }) + + return ( +
    +

    {req.t('general:welcome')}

    +

    {req.t('authentication:beginCreateFirstUser')}

    + +
    + ) +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx b/packages/ui/src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx new file mode 100644 index 00000000000..ad658575807 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/DashboardStepNav.tsx @@ -0,0 +1,128 @@ +'use client' +import type { ClientWidget } from 'payload' + +import { useEffect, useId } from 'react' + +import { Button } from '../../../../elements/Button/index.js' +import { DrawerToggler } from '../../../../elements/Drawer/index.js' +import { ItemsDrawer } from '../../../../elements/ItemsDrawer/index.js' +import { type Option as Option, ReactSelect } from '../../../../elements/ReactSelect/index.js' +import { useStepNav } from '../../../../elements/StepNav/index.js' +import { useTranslation } from '../../../../providers/Translation/index.js' + +export function DashboardStepNav({ + addWidget, + cancel, + isEditing, + resetLayout, + saveLayout, + setIsEditing, + widgets, +}: { + addWidget: (slug: string) => void + cancel: () => void + isEditing: boolean + resetLayout: () => Promise + saveLayout: () => Promise + setIsEditing: (isEditing: boolean) => void + widgets: ClientWidget[] +}) { + const { t } = useTranslation() + const { setStepNav } = useStepNav() + const uuid = useId() + const drawerSlug = `widgets-drawer-${uuid}` + + useEffect(() => { + setStepNav([ + { + label: ( + setIsEditing(true)} + onResetLayout={resetLayout} + onSaveChanges={saveLayout} + widgetsDrawerSlug={drawerSlug} + /> + ), + }, + ]) + }, [isEditing, drawerSlug, cancel, resetLayout, saveLayout, setIsEditing, setStepNav]) + + return ( + <> + {isEditing && ( + addWidget(widget.slug)} + searchPlaceholder={t('dashboard:searchWidgets')} + title={t('dashboard:addWidget')} + /> + )} + + ) +} + +export function DashboardBreadcrumbDropdown(props: { + isEditing: boolean + onCancel: () => void + onEditClick: () => void + onResetLayout: () => void + onSaveChanges: () => void + widgetsDrawerSlug: string +}) { + const { isEditing, onCancel, onEditClick, onResetLayout, onSaveChanges, widgetsDrawerSlug } = + props + const { t } = useTranslation() + + if (isEditing) { + return ( +
    + {t('dashboard:editingDashboard')} +
    + + + + + +
    +
    + ) + } + + const options = [ + { label: t('dashboard:editDashboard'), value: 'edit' }, + { label: t('dashboard:resetLayout'), value: 'reset' }, + ] + + const handleChange = (selectedOption: Option | Option[]) => { + // Since isMulti is false, we expect a single Option + const option = Array.isArray(selectedOption) ? selectedOption[0] : selectedOption + + if (option?.value === 'edit') { + onEditClick() + } else if (option?.value === 'reset') { + onResetLayout() + } + } + + return ( + + ) +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx b/packages/ui/src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx new file mode 100644 index 00000000000..de517096df8 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/WidgetConfigDrawer.tsx @@ -0,0 +1,157 @@ +'use client' + +import type { ClientWidget, FormState } from 'payload' + +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { v4 as uuid } from 'uuid' + +import { Drawer } from '../../../../elements/Drawer/index.js' +import { useModal } from '../../../../elements/Modal/index.js' +import { ShimmerEffect } from '../../../../elements/ShimmerEffect/index.js' +import { Form } from '../../../../forms/Form/index.js' +import { RenderFields } from '../../../../forms/RenderFields/index.js' +import { FormSubmit } from '../../../../forms/Submit/index.js' +import { useLocale } from '../../../../providers/Locale/index.js' +import { OperationProvider } from '../../../../providers/Operation/index.js' +import { useServerFunctions } from '../../../../providers/ServerFunctions/index.js' +import { useTranslation } from '../../../../providers/Translation/index.js' +import { abortAndIgnore } from '../../../../utilities/abortAndIgnore.js' +import { extractLocaleData, mergeLocaleData } from './utils/localeUtils.js' + +type WidgetConfigDrawerProps = { + drawerSlug: string + onSave: (data: Record) => void + widget: ClientWidget + widgetData?: Record +} + +const EMPTY_WIDGET_PREFERENCES = { + fields: {}, +} + +export function WidgetConfigDrawer({ + drawerSlug, + onSave, + widget, + widgetData, +}: WidgetConfigDrawerProps) { + const { closeModal, modalState } = useModal() + const { getFormState } = useServerFunctions() + const { t } = useTranslation() + const locale = useLocale() + const localeCode = locale?.code ?? 'en' + const onChangeAbortControllerRef = useRef(null) + + const [initialState, setInitialState] = useState(false) + + const isOpen = Boolean(modalState?.[drawerSlug]?.isOpen) + const formUUID = useMemo(() => uuid(), []) + const widgetLabel = useMemo( + () => (typeof widget.label === 'string' ? widget.label : widget.slug), + [widget.label, widget.slug], + ) + const fields = useMemo(() => widget.fields ?? [], [widget.fields]) + + useEffect(() => { + if (!isOpen || fields.length === 0) { + setInitialState(false) + return + } + + const controller = new AbortController() + + const loadInitialState = async () => { + const localeFilteredData = extractLocaleData(widgetData ?? {}, localeCode, fields) + + const { state } = await getFormState({ + data: localeFilteredData, + docPermissions: { + fields: true, + }, + docPreferences: EMPTY_WIDGET_PREFERENCES, + locale: localeCode, + operation: 'update', + renderAllFields: true, + schemaPath: widget.slug, + signal: controller.signal, + widgetSlug: widget.slug, + }) + + if (state) { + setInitialState(state) + } + } + + void loadInitialState() + + return () => { + abortAndIgnore(controller) + } + }, [fields, getFormState, isOpen, localeCode, widget.slug, widgetData]) + + const onChange = useCallback( + async ({ formState: prevFormState }: { formState: FormState }) => { + abortAndIgnore(onChangeAbortControllerRef.current) + + const controller = new AbortController() + onChangeAbortControllerRef.current = controller + + const { state } = await getFormState({ + docPermissions: { + fields: true, + }, + docPreferences: EMPTY_WIDGET_PREFERENCES, + formState: prevFormState, + operation: 'update', + schemaPath: widget.slug, + signal: controller.signal, + widgetSlug: widget.slug, + }) + + if (!state) { + return prevFormState + } + + return state + }, + [getFormState, widget.slug], + ) + + useEffect(() => { + return () => { + abortAndIgnore(onChangeAbortControllerRef.current) + } + }, []) + + return ( + + {initialState === false ? ( + + ) : ( + +
    { + onSave(mergeLocaleData(widgetData ?? {}, data, localeCode, fields)) + closeModal(drawerSlug) + }} + uuid={formUUID} + > + + {t('fields:saveChanges')} + +     + )} +     + ) +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/WidgetEditControl.tsx b/packages/ui/src/views/Dashboard/Default/ModularDashboard/WidgetEditControl.tsx new file mode 100644 index 00000000000..46fde1f8e2a --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/WidgetEditControl.tsx @@ -0,0 +1,62 @@ +'use client' + +import type { Data } from 'payload' + +import React, { useId } from 'react' + +import { useModal } from '../../../../elements/Modal/index.js' +import { EditIcon } from '../../../../icons/Edit/index.js' +import { useConfig } from '../../../../providers/Config/index.js' +import { useTranslation } from '../../../../providers/Translation/index.js' +import { WidgetConfigDrawer } from './WidgetConfigDrawer.js' + +const getWidgetSlugFromID = (widgetID: string): string => + widgetID.slice(0, widgetID.lastIndexOf('-')) + +export function WidgetEditControl({ + onSave, + widgetData, + widgetID, +}: { + onSave: (data: Data) => void + widgetData?: Record + widgetID: string +}) { + const { t } = useTranslation() + const { openModal } = useModal() + const { widgets: configWidgets = [] } = useConfig().config.admin.dashboard ?? {} + + const widgetSlug = getWidgetSlugFromID(widgetID) + const widgetConfig = configWidgets.find((widget) => widget.slug === widgetSlug) + const hasEditableFields = Boolean(widgetConfig?.fields?.length) + + const drawerID = useId() + const drawerSlug = `widget-editor-${drawerID}` + + if (!hasEditableFields) { + return null + } + + return ( + <> + + + + ) +} diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx b/packages/ui/src/views/Dashboard/Default/ModularDashboard/index.client.tsx similarity index 97% rename from packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx rename to packages/ui/src/views/Dashboard/Default/ModularDashboard/index.client.tsx index e8caf30abad..f690f4f2c42 100644 --- a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/index.client.tsx @@ -5,9 +5,14 @@ import type { ClientWidget, WidgetWidth } from 'payload' import { DndContext, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core' import { snapCenterToCursor } from '@dnd-kit/modifiers' -import { ChevronIcon, Popup, PopupList, useTranslation, XIcon } from '@payloadcms/ui' import React, { useMemo, useState } from 'react' +import { Popup } from '../../../../elements/Popup/index.js' +import * as PopupList from '../../../../elements/Popup/PopupButtonList/index.js' +import { ChevronIcon } from '../../../../icons/Chevron/index.js' +import { XIcon } from '../../../../icons/X/index.js' +import { useTranslation } from '../../../../providers/Translation/index.js' + /** * Custom modifier that only applies snapCenterToCursor for pointer events. * During keyboard navigation, we handle positioning ourselves via the coordinate getter. diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/index.scss b/packages/ui/src/views/Dashboard/Default/ModularDashboard/index.scss new file mode 100644 index 00000000000..f37ef3f7ba5 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/index.scss @@ -0,0 +1,318 @@ +@import '../../../../scss/styles.scss'; + +@layer payload-default { + .modular-dashboard { + .widget-content { + height: 100%; + } + + // In mobile, make the widget full width and hide the size button. + @media (max-width: 768px) { + .widget { + width: 100% !important; + } + + .widget-wrapper__size-btn { + display: none; + } + } + + &.editing { + .widget-content { + user-select: none; + -webkit-user-select: none; + pointer-events: none; + } + + .draggable { + cursor: grab; + } + } + + .drag-overlay { + pointer-events: none; + user-select: none; + } + + &__empty { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + padding: 24px; + } + } + + // Apply grabbing cursor to body when drag-overlay is present + body:has(.drag-overlay) * { + cursor: grabbing; + } + + .widget-wrapper__controls { + opacity: 0; + transition: opacity 0.2s ease; + } + + .widget:focus-visible, + .widget:has(:focus-visible) { + .widget-wrapper__controls { + opacity: 1; + } + } + + // This is used to highlight a newly added widget. + @keyframes widget-highlight { + 0% { + box-shadow: 0 0 0 3px rgba(255, 208, 0, 0.9); + } + 100% { + box-shadow: 0 0 0 3px rgba(255, 208, 0, 0); + } + } + + .widget { + &--highlight { + animation: widget-highlight 1.5s ease-out forwards; + border-radius: 8px; + } + } + + .widget-wrapper { + position: relative; + height: 100%; + width: 100%; + + &--editing { + .widget-wrapper__controls { + // opacity: 0; + transition: opacity 0.2s ease; + } + + &:hover { + .widget-wrapper__controls { + opacity: 1; + } + } + } + + &__controls { + position: absolute; + top: 16px; + right: 16px; + z-index: 10; + + display: flex; + align-items: center; + gap: 8px; + } + + &__delete-btn, + &__edit-btn { + display: flex; + align-items: center; + justify-content: center; + + width: 28px; + height: 28px; + + background: var(--theme-text); + border: none; + border-radius: 4px; + cursor: pointer; + + transition: all 0.2s ease; + + .icon { + width: 16px; + height: 16px; + + .stroke { + stroke: var(--theme-elevation-0); + stroke-width: 2; + } + } + + &:hover { + background: var(--theme-elevation-800); + } + + &:active { + background: var(--theme-elevation-900); + } + + svg { + pointer-events: none; + } + } + + &__size-btn { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 10px; + min-width: auto; + height: 28px; + + background: var(--theme-text); + border: none; + border-radius: 4px; + cursor: pointer; + + transition: all 0.2s ease; + + font-size: 12px; + font-weight: 500; + color: var(--theme-elevation-0); + white-space: nowrap; + + .icon { + width: 12px; + height: 12px; + flex-shrink: 0; + + .stroke { + stroke: var(--theme-elevation-0); + stroke-width: 2; + } + } + + &:hover { + background: var(--theme-elevation-800); + } + + &:active { + background: var(--theme-elevation-900); + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + + &:hover { + background: var(--theme-text); + } + } + + svg { + pointer-events: none; + } + } + + &__size-btn-percentage { + font-size: 12px; + margin-left: auto; + color: var(--theme-elevation-500); + } + } + + // Since popup uses portal and renders to body, we need global styles + // for the size selection buttons in widget wrappers + .popup-button-list:has(.widget-wrapper__size-btn-label) { + .popup__scroll-container { + padding: 0; + } + } + + .popup__content:has(.widget-wrapper__size-btn-label) { + padding: 5px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + } + + .popup-button-list__button:has(.widget-wrapper__size-btn-label) { + display: flex !important; + align-items: center !important; + gap: 20px; + + .widget-wrapper__size-btn-label { + flex: 0 0 auto; + } + + .widget-wrapper__size-btn-percentage { + margin-left: auto !important; + } + } + + .step-nav { + .dashboard-breadcrumb-dropdown { + &__editing { + align-items: center; + display: flex !important; + gap: 12px; + } + + &__actions { + display: flex !important; + gap: 8px; + } + } + + .dashboard-breadcrumb-select { + position: relative; + z-index: 10; + + .rs__control { + background: transparent; + border: none; + box-shadow: none; + padding: 0; + cursor: pointer; + + &:hover { + background: transparent; + } + } + + .rs__indicator-separator { + display: none; + } + + .rs__dropdown-indicator { + padding: 0 4px; + } + + .rs__menu { + position: absolute; + top: 100%; + left: 0; + min-width: max-content; + width: max-content; + z-index: 9999; + border-radius: 4px; + padding: 5px; + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + } + + .rs__menu-list { + padding: 0; + } + + .rs__option { + padding: 4px 8px; + border-radius: 3px; + margin: 0; + } + } + + .rs__control { + box-shadow: none !important; + cursor: pointer !important; + } + + .drawer-toggler--unstyled { + background: transparent; + border: none; + margin: 0; + padding: 0; + outline: none; + box-shadow: none; + + &:hover, + &:focus { + background: transparent; + } + } + } +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/index.tsx b/packages/ui/src/views/Dashboard/Default/ModularDashboard/index.tsx new file mode 100644 index 00000000000..3b2d51bc5a6 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/index.tsx @@ -0,0 +1,67 @@ +import type { TFunction } from '@payloadcms/translations' +import type { ClientWidget, Field, WidgetServerProps } from 'payload' + +import React from 'react' + +import type { DashboardViewServerProps } from '../index.js' +import type { WidgetInstanceClient } from './index.client.js' + +import { RenderServerComponent } from '../../../../elements/RenderServerComponent/index.js' +import { ModularDashboardClient } from './index.client.js' +import { getItemsFromConfig } from './utils/getItemsFromConfig.js' +import { getItemsFromPreferences } from './utils/getItemsFromPreferences.js' +import { extractLocaleData } from './utils/localeUtils.js' +import './index.scss' + +type ServerLayout = WidgetInstanceClient[] + +export async function ModularDashboard(props: DashboardViewServerProps) { + const { defaultLayout = [], widgets = [] } = props.payload.config.admin.dashboard || {} + const { importMap } = props.payload + const { user } = props + const { cookies, locale, permissions, req } = props.initPageResult + const { i18n } = req + + const layout = + (await getItemsFromPreferences(props.payload, user)) ?? + (await getItemsFromConfig(defaultLayout, req, widgets)) + + const serverLayout: ServerLayout = layout.map((layoutItem) => { + const widgetSlug = layoutItem.id.slice(0, layoutItem.id.lastIndexOf('-')) + const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug) + const widgetData = widgetConfig?.fields?.length + ? extractLocaleData(layoutItem.data || {}, req.locale || 'en', widgetConfig.fields as Field[]) + : layoutItem.data || {} + + return { + component: RenderServerComponent({ + Component: widgetConfig?.Component, + importMap, + serverProps: { + cookies, + locale, + permissions, + req, + widgetData, + widgetSlug, + } satisfies WidgetServerProps, + }), + item: layoutItem, + } + }) + + // Resolve function labels to static labels for client components + const clientWidgets: ClientWidget[] = widgets.map((widget) => { + const { Component: _, fields: __, label, ...rest } = widget + return { + ...rest, + label: typeof label === 'function' ? label({ i18n, t: i18n.t as TFunction }) : label, + } + }) + + return ( +
    + +
    + ) +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.tsx b/packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.tsx new file mode 100644 index 00000000000..57adda513af --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/RenderWidget.tsx @@ -0,0 +1,89 @@ +'use client' + +import React, { useCallback, useEffect, useRef } from 'react' + +import type { + RenderWidgetServerFnArgs, + RenderWidgetServerFnReturnType, +} from './renderWidgetServerFn.js' + +import { ShimmerEffect } from '../../../../../elements/ShimmerEffect/index.js' +import { useServerFunctions } from '../../../../../providers/ServerFunctions/index.js' + +/** + * Utility to render a widget on-demand on the client. + */ +export const RenderWidget: React.FC<{ + /** + * Instance-specific data for this widget + */ + widgetData?: Record + /** + * Unique ID for this widget instance (format: "slug-timestamp") + */ + widgetId: string +}> = ({ widgetData, widgetId }) => { + const [Component, setComponent] = React.useState(null) + const { serverFunction } = useServerFunctions() + const requestIDRef = useRef(0) + + const renderWidget = useCallback(() => { + async function render() { + const requestID = ++requestIDRef.current + setComponent(null) + + try { + const widgetSlug = widgetId.slice(0, widgetId.lastIndexOf('-')) + + const result = (await serverFunction({ + name: 'render-widget', + args: { + widgetData, + widgetSlug, + } as RenderWidgetServerFnArgs, + })) as RenderWidgetServerFnReturnType + + if (requestID !== requestIDRef.current) { + return + } + + setComponent(result.component) + } catch (_error) { + if (requestID !== requestIDRef.current) { + return + } + + // Log error but don't expose details to console in production + + // Fallback error component + setComponent( + React.createElement( + 'div', + { + style: { + background: 'var(--theme-error-50)', + border: '1px solid var(--theme-error-200)', + borderRadius: '4px', + color: 'var(--theme-error-text)', + padding: '20px', + textAlign: 'center', + }, + }, + 'Failed to load widget. Please try again later.', + ), + ) + } + } + void render() + }, [serverFunction, widgetData, widgetId]) + + useEffect(() => { + void renderWidget() + }, [renderWidget]) + + if (!Component) { + return + } + + return <>{Component} +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts b/packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts new file mode 100644 index 00000000000..786ce6c1664 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts @@ -0,0 +1,80 @@ +import type { + DashboardConfig, + PayloadRequest, + ServerFunction, + Widget, + WidgetServerProps, +} from 'payload' + +import type { WidgetInstanceClient, WidgetItem } from '../index.client.js' + +import { RenderServerComponent } from '../../../../../elements/RenderServerComponent/index.js' + +export type GetDefaultLayoutServerFnArgs = Record + +export type GetDefaultLayoutServerFnReturnType = { + layout: WidgetInstanceClient[] +} + +/** + * Server function to get the default dashboard layout on-demand. + * Used when resetting the dashboard to its default configuration. + */ +export const getDefaultLayoutHandler: ServerFunction< + GetDefaultLayoutServerFnArgs, + Promise +> = async ({ cookies, locale, permissions, req }) => { + if (!req.user) { + throw new Error('Unauthorized') + } + + const { defaultLayout = [], widgets = [] } = req.payload.config.admin.dashboard || {} + const { importMap } = req.payload + + const layoutItems = await getItemsFromConfig(defaultLayout, req, widgets) + + const layout: WidgetInstanceClient[] = layoutItems.map((layoutItem) => { + const widgetSlug = layoutItem.id.slice(0, layoutItem.id.lastIndexOf('-')) + return { + component: RenderServerComponent({ + Component: widgets.find((widget) => widget.slug === widgetSlug)?.Component, + importMap, + serverProps: { + cookies, + locale, + permissions, + req, + widgetData: layoutItem.data || {}, + widgetSlug, + } satisfies WidgetServerProps, + }), + item: layoutItem, + } + }) + + return { layout } +} + +async function getItemsFromConfig( + defaultLayout: NonNullable, + req: PayloadRequest, + widgets: Pick[], +): Promise { + let widgetInstances + if (typeof defaultLayout === 'function') { + widgetInstances = await defaultLayout({ req }) + } else { + widgetInstances = defaultLayout + } + + return widgetInstances.map((widgetInstance, index) => { + const widget = widgets.find((w) => w.slug === widgetInstance.widgetSlug) + return { + id: `${widgetInstance.widgetSlug}-${index}`, + data: widgetInstance.data, + maxWidth: widget?.maxWidth ?? 'full', + minWidth: widget?.minWidth ?? 'x-small', + width: widgetInstance.width || 'x-small', + } + }) +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts b/packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts new file mode 100644 index 00000000000..a4839713ee7 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts @@ -0,0 +1,107 @@ +import type { Field, ServerFunction, WidgetServerProps } from 'payload' + +import React from 'react' + +import { RenderServerComponent } from '../../../../../elements/RenderServerComponent/index.js' +import { extractLocaleData } from '../utils/localeUtils.js' + +export type RenderWidgetServerFnArgs = { + /** + * Instance-specific data for this widget + */ + widgetData?: Record + /** + * The slug of the widget to render + */ + widgetSlug: string +} + +export type RenderWidgetServerFnReturnType = { + component: React.ReactNode +} + +/** + * Server function to render a widget on-demand. + * Similar to render-field but specifically for dashboard widgets. + */ +export const renderWidgetHandler: ServerFunction< + RenderWidgetServerFnArgs, + RenderWidgetServerFnReturnType +> = ({ cookies, locale, permissions, req, widgetData, widgetSlug }) => { + if (!req.user) { + throw new Error('Unauthorized') + } + + const { widgets } = req.payload.config.admin.dashboard + const { importMap } = req.payload + + // Find the widget configuration + const widgetConfig = widgets.find((widget) => widget.slug === widgetSlug) + + if (!widgetConfig) { + return { + component: React.createElement( + 'div', + { + style: { + background: 'var(--theme-elevation-50)', + border: '1px solid var(--theme-elevation-200)', + borderRadius: '4px', + color: 'var(--theme-text)', + padding: '20px', + textAlign: 'center', + }, + }, + `Widget "${widgetSlug}" not found`, + ), + } + } + + try { + const localeFilteredData = widgetConfig.fields?.length + ? extractLocaleData(widgetData || {}, req.locale || 'en', widgetConfig.fields as Field[]) + : widgetData || {} + + const serverProps: WidgetServerProps = { + cookies, + locale, + permissions, + req, + widgetData: localeFilteredData, + widgetSlug, + } + + // Render the widget server component + const component = RenderServerComponent({ + Component: widgetConfig.Component, + importMap, + serverProps, + }) + + return { component } + } catch (error) { + const errorMessage = error instanceof Error ? error.message : String(error) + + req.payload.logger.error({ + err: error, + msg: `Error rendering widget "${widgetSlug}": ${errorMessage}`, + }) + + return { + component: React.createElement( + 'div', + { + style: { + background: 'var(--theme-error-50)', + border: '1px solid var(--theme-error-200)', + borderRadius: '4px', + color: 'var(--theme-error-text)', + padding: '20px', + textAlign: 'center', + }, + }, + 'Error loading widget', + ), + } + } +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts b/packages/ui/src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts new file mode 100644 index 00000000000..4f286186a34 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/useDashboardLayout.ts @@ -0,0 +1,245 @@ +import type { WidgetWidth } from 'payload' + +import { arrayMove } from '@dnd-kit/sortable' +import { PREFERENCE_KEYS } from 'payload/shared' +import React, { useCallback, useEffect, useState } from 'react' +import { toast } from 'sonner' + +import type { WidgetInstanceClient, WidgetItem } from './index.client.js' +import type { GetDefaultLayoutServerFnReturnType } from './renderWidget/getDefaultLayoutServerFn.js' + +import { ConfirmationModal } from '../../../../elements/ConfirmationModal/index.js' +import { useModal } from '../../../../elements/Modal/index.js' +import { useConfig } from '../../../../providers/Config/index.js' +import { usePreferences } from '../../../../providers/Preferences/index.js' +import { useServerFunctions } from '../../../../providers/ServerFunctions/index.js' +import { useTranslation } from '../../../../providers/Translation/index.js' +import { RenderWidget } from './renderWidget/RenderWidget.js' + +export function useDashboardLayout(initialLayout: WidgetInstanceClient[]) { + const setLayoutPreference = useSetLayoutPreference() + const [isEditing, setIsEditing] = useState(false) + const { widgets = [] } = useConfig().config.admin.dashboard ?? {} + const [currentLayout, setCurrentLayout] = useState(initialLayout) + const { openModal } = useModal() + const cancelModalSlug = 'cancel-dashboard-changes' + const { serverFunction } = useServerFunctions() + const { t } = useTranslation() + + // Sync state when initialLayout prop changes (e.g., when query params change and server component re-renders) + useEffect(() => { + if (!isEditing) { + setCurrentLayout(initialLayout) + } + // do not sync while editing. Depending on `isEditing` in this effect causes an + // unintended rollback when toggling from editing -> view mode after save. + }, [initialLayout]) + + const saveLayout = useCallback(async () => { + try { + const layoutData: WidgetItem[] = currentLayout.map((item) => item.item) + setIsEditing(false) + await setLayoutPreference(layoutData) + } catch { + setIsEditing(true) + toast.error(t('error:failedToSaveLayout')) + } + }, [setLayoutPreference, currentLayout]) + + const resetLayout = useCallback(async () => { + try { + await setLayoutPreference(null) + + const result = (await serverFunction({ + name: 'get-default-layout', + args: {}, + })) as GetDefaultLayoutServerFnReturnType + + setCurrentLayout(result.layout) + setIsEditing(false) + } catch { + toast.error(t('error:failedToResetLayout')) + } + }, [setLayoutPreference, serverFunction]) + + const performCancel = useCallback(() => { + setCurrentLayout(initialLayout) + setIsEditing(false) + }, [initialLayout]) + + const cancel = useCallback(() => { + // Check if layout has changed + const hasChanges = + currentLayout.length !== initialLayout.length || + currentLayout.some((widget, index) => { + const initialWidget = initialLayout[index] + return ( + !initialWidget || + widget.item.id !== initialWidget.item.id || + widget.item.width !== initialWidget.item.width || + JSON.stringify(widget.item.data || {}) !== JSON.stringify(initialWidget.item.data || {}) + ) + }) + + // If there are changes, show confirmation modal + if (hasChanges) { + openModal(cancelModalSlug) + } else { + performCancel() + } + }, [currentLayout, initialLayout, openModal, cancelModalSlug, performCancel]) + + const moveWidget = useCallback( + ({ moveFromIndex, moveToIndex }: { moveFromIndex: number; moveToIndex: number }) => { + if (moveFromIndex === moveToIndex || moveFromIndex < 0 || moveToIndex < 0) { + return + } + + setCurrentLayout((prev) => { + return arrayMove(prev, moveFromIndex, moveToIndex) + }) + }, + [], + ) + + const addWidget = useCallback( + (widgetSlug: string) => { + if (!isEditing) { + return + } + + const widgetId = `${widgetSlug}-${Date.now()}` + const widget = widgets.find((widget) => widget.slug === widgetSlug) + + // Create a new widget instance using RenderWidget + const newWidgetInstance: WidgetInstanceClient = { + component: React.createElement(RenderWidget, { + widgetData: {}, + widgetId, + }), + item: { + id: widgetId, + data: {}, + maxWidth: widget?.maxWidth ?? 'full', + minWidth: widget?.minWidth ?? 'x-small', + width: widget?.minWidth ?? 'x-small', + }, + } + + setCurrentLayout((prev) => [...prev, newWidgetInstance]) + + // Scroll to the newly added widget after it's rendered and highlight it + setTimeout(() => { + const element = document.getElementById(widgetId) + if (element) { + element.scrollIntoView({ + behavior: 'smooth', + block: 'center', + }) + + // Add highlight animation to the widget element + const widget = element.closest('.widget') + if (widget) { + widget.classList.add('widget--highlight') + // Remove the class after animation completes (1.5s fade out) + setTimeout(() => { + widget.classList.remove('widget--highlight') + }, 1500) + } + } + }, 100) + }, + [isEditing, widgets], + ) + + const deleteWidget = useCallback( + (widgetId: string) => { + if (!isEditing) { + return + } + setCurrentLayout((prev) => prev.filter((item) => item.item.id !== widgetId)) + }, + [isEditing], + ) + + const resizeWidget = useCallback( + (widgetId: string, newWidth: WidgetWidth) => { + if (!isEditing) { + return + } + setCurrentLayout((prev) => + prev.map((item) => + item.item.id === widgetId + ? { + ...item, + item: { + ...item.item, + width: newWidth, + } satisfies WidgetItem, + } + : item, + ), + ) + }, + [isEditing], + ) + + const updateWidgetData = useCallback( + (widgetId: string, data: Record) => { + if (!isEditing) { + return + } + + setCurrentLayout((prev) => + prev.map((item) => + item.item.id === widgetId + ? { + component: React.createElement(RenderWidget, { + widgetData: data, + widgetId, + }), + item: { + ...item.item, + data, + } satisfies WidgetItem, + } + : item, + ), + ) + }, + [isEditing], + ) + + const cancelModal = React.createElement(ConfirmationModal, { + body: t('dashboard:discardMessage'), + confirmLabel: t('dashboard:discardConfirmLabel'), + heading: t('dashboard:discardTitle'), + modalSlug: cancelModalSlug, + onConfirm: performCancel, + }) + + return { + addWidget, + cancel, + cancelModal, + currentLayout, + deleteWidget, + isEditing, + moveWidget, + resetLayout, + resizeWidget, + saveLayout, + setIsEditing, + updateWidgetData, + } +} + +function useSetLayoutPreference() { + const { setPreference } = usePreferences() + return useCallback( + async (layout: null | WidgetItem[]) => { + await setPreference(PREFERENCE_KEYS.DASHBOARD_LAYOUT, { layouts: layout }, false) + }, + [setPreference], + ) +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/collisionDetection.ts b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/collisionDetection.ts new file mode 100644 index 00000000000..8b140b2b112 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/collisionDetection.ts @@ -0,0 +1,40 @@ +import type { CollisionDetection } from '@dnd-kit/core' + +/** + * Collision detection that considers the X + * axis only with respect to the position of the pointer (or collisionRect for keyboard) + */ +export const closestInXAxis: CollisionDetection = (args) => { + const collisions: Array<{ data: { value: number }; id: string }> = [] + + // Use pointer coordinates if available (mouse/touch), otherwise use collisionRect center (keyboard) + let x: number + let y: number + + if (args.pointerCoordinates) { + x = args.pointerCoordinates.x + y = args.pointerCoordinates.y + } else if (args.collisionRect) { + // For keyboard navigation, use the center of the collisionRect + x = args.collisionRect.left + args.collisionRect.width / 2 + y = args.collisionRect.top + args.collisionRect.height / 2 + } else { + return [] + } + + for (const container of args.droppableContainers) { + const rect = args.droppableRects.get(container.id) + if (!rect) { + continue + } + + // Only consider widgets in the same row (same Y axis) + if (y >= rect.top && y <= rect.bottom) { + const centerX = rect.left + rect.width / 2 + const distance = Math.abs(x - centerX) + collisions.push({ id: String(container.id), data: { value: distance } }) + } + } + + return collisions.sort((a, b) => a.data.value - b.data.value) +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromConfig.ts b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromConfig.ts new file mode 100644 index 00000000000..6e2ad3be1f1 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromConfig.ts @@ -0,0 +1,27 @@ +import type { DashboardConfig, PayloadRequest, Widget, WidgetInstance } from 'payload' + +import type { WidgetItem } from '../index.client.js' + +export async function getItemsFromConfig( + defaultLayout: NonNullable, + req: PayloadRequest, + widgets: Pick[], +): Promise { + let widgetInstances: WidgetInstance[] + if (typeof defaultLayout === 'function') { + widgetInstances = await defaultLayout({ req }) + } else { + widgetInstances = defaultLayout + } + + return widgetInstances.map((widgetInstance, index) => { + const widget = widgets.find((w) => w.slug === widgetInstance.widgetSlug) + return { + id: `${widgetInstance.widgetSlug}-${index}`, + data: widgetInstance.data, + maxWidth: widget?.maxWidth ?? 'full', + minWidth: widget?.minWidth ?? 'x-small', + width: widgetInstance.width || 'x-small', + } + }) +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromPreferences.ts b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromPreferences.ts new file mode 100644 index 00000000000..285493cd3fa --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/getItemsFromPreferences.ts @@ -0,0 +1,27 @@ +import type { BasePayload, TypedUser } from 'payload' + +import { PREFERENCE_KEYS } from 'payload/shared' + +import type { WidgetItem } from '../index.client.js' + +import { getPreferences } from '../../../../../utilities/getPreferences.js' + +export async function getItemsFromPreferences( + payload: BasePayload, + user: TypedUser, +): Promise { + const savedPreferences = await getPreferences( + PREFERENCE_KEYS.DASHBOARD_LAYOUT, + payload, + user.id, + user.collection, + ) + if ( + !savedPreferences?.value || + typeof savedPreferences.value !== 'object' || + !('layouts' in savedPreferences.value) + ) { + return null + } + return savedPreferences.value.layouts as null | WidgetItem[] +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/localeUtils.ts b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/localeUtils.ts new file mode 100644 index 00000000000..a87390cea11 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/localeUtils.ts @@ -0,0 +1,146 @@ +import type { ClientField, Field } from 'payload' + +import { fieldAffectsData, fieldHasSubFields, tabHasName } from 'payload/shared' + +type AnyField = ClientField | Field + +function isLocalized(field: AnyField): boolean { + return 'localized' in field && Boolean(field.localized) +} + +function getObjectValue(value: unknown): Record { + return typeof value === 'object' && value !== null && !Array.isArray(value) + ? (value as Record) + : {} +} + +/** + * Extracts locale-specific data from widget data stored in preferences. + * + * Localized fields are stored as `{ fieldName: { en: "Hello", de: "Hallo" } }` in preferences. + * This function flattens them to `{ fieldName: "Hello" }` for the given locale, + * which is the format the form state builder expects. + * + * Recursively handles nested field types (group, row, collapsible, tabs). + */ +export function extractLocaleData( + widgetData: Record, + locale: string, + fields: readonly AnyField[], +): Record { + const result: Record = {} + + for (const field of fields) { + if (field.type === 'tabs') { + for (const tab of field.tabs) { + const tabFields = tab.fields as AnyField[] + if (tabHasName(tab)) { + result[tab.name] = extractLocaleData( + getObjectValue(widgetData[tab.name]), + locale, + tabFields, + ) + } else { + Object.assign(result, extractLocaleData(widgetData, locale, tabFields)) + } + } + continue + } + + if (fieldHasSubFields(field) && !fieldAffectsData(field)) { + Object.assign(result, extractLocaleData(widgetData, locale, field.fields as AnyField[])) + continue + } + + if (!fieldAffectsData(field)) { + continue + } + + const { name } = field + const value = widgetData[name] + + if (fieldHasSubFields(field)) { + result[name] = extractLocaleData(getObjectValue(value), locale, field.fields as AnyField[]) + continue + } + + if ( + isLocalized(field) && + value !== undefined && + typeof value === 'object' && + value !== null && + !Array.isArray(value) + ) { + result[name] = (value as Record)[locale] + } else { + result[name] = value + } + } + + return result +} + +/** + * Merges locale-specific form data back into the full widget data structure. + * + * Non-localized fields are stored directly. Localized fields are stored as + * `{ fieldName: { en: "Hello", de: "Hallo" } }` so each locale's value is preserved independently. + * + * Recursively handles nested field types (group, row, collapsible, tabs). + */ +export function mergeLocaleData( + existingData: Record, + formData: Record, + locale: string, + fields: readonly AnyField[], +): Record { + const result: Record = { ...existingData } + + for (const field of fields) { + if (field.type === 'tabs') { + for (const tab of field.tabs) { + const tabFields = tab.fields as AnyField[] + if (tabHasName(tab)) { + result[tab.name] = mergeLocaleData( + getObjectValue(result[tab.name]), + getObjectValue(formData[tab.name]), + locale, + tabFields, + ) + } else { + Object.assign(result, mergeLocaleData(result, formData, locale, tabFields)) + } + } + continue + } + + if (fieldHasSubFields(field) && !fieldAffectsData(field)) { + Object.assign(result, mergeLocaleData(result, formData, locale, field.fields as AnyField[])) + continue + } + + if (!fieldAffectsData(field)) { + continue + } + + const { name } = field + + if (fieldHasSubFields(field)) { + result[name] = mergeLocaleData( + getObjectValue(result[name]), + getObjectValue(formData[name]), + locale, + field.fields as AnyField[], + ) + continue + } + + if (isLocalized(field)) { + result[name] = { ...getObjectValue(result[name]), [locale]: formData[name] } + } else { + result[name] = formData[name] + } + } + + return result +} diff --git a/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/sensors.ts b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/sensors.ts new file mode 100644 index 00000000000..cbba218ce50 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/ModularDashboard/utils/sensors.ts @@ -0,0 +1,332 @@ +import type { KeyboardCoordinateGetter, KeyboardSensorOptions } from '@dnd-kit/core' + +import { + KeyboardCode, + KeyboardSensor, + MouseSensor, + TouchSensor, + useSensor, + useSensors, +} from '@dnd-kit/core' + +type DroppablePosition = { + centerX: number + centerY: number + element: Element + isBeforeDroppable: boolean + rect: DOMRect + row: number +} + +/** + * Get all droppable widget positions, filtering out overlapping "before" droppables + * and assigning row numbers based on Y position. + */ +function getDroppablePositions(): DroppablePosition[] { + const positionTolerance = 5 + const rowTolerance = 10 + const result: DroppablePosition[] = [] + let currentRow = 0 + let currentY: null | number = null + + const allDroppables = Array.from(document.querySelectorAll('.droppable-widget')) + + for (let i = 0; i < allDroppables.length; i++) { + const element = allDroppables[i] + const rect = element.getBoundingClientRect() + + // Skip hidden elements + if (rect.width === 0 || rect.height === 0) { + continue + } + + const centerX = rect.left + rect.width / 2 + const centerY = rect.top + rect.height / 2 + const testId = element.getAttribute('data-testid') || '' + const isBeforeDroppable = testId.endsWith('-before') + + // Skip "before" droppables that overlap with another droppable + if (isBeforeDroppable) { + const hasOverlapping = allDroppables.some((other, otherIndex) => { + if (otherIndex === i) { + return false + } + const otherRect = other.getBoundingClientRect() + const otherCenterX = otherRect.left + otherRect.width / 2 + const otherCenterY = otherRect.top + otherRect.height / 2 + return ( + Math.abs(otherCenterX - centerX) < positionTolerance && + Math.abs(otherCenterY - centerY) < positionTolerance + ) + }) + if (hasOverlapping) { + continue + } + } + + // Assign row number based on Y position change + if (currentY === null) { + currentY = centerY + } else if (Math.abs(centerY - currentY) >= rowTolerance) { + currentRow++ + currentY = centerY + } + + result.push({ + centerX, + centerY, + element, + isBeforeDroppable, + rect, + row: currentRow, + }) + } + + return result +} + +/** + * Find the row with the closest Y position to the given posY. + * Returns the row index, or null if no droppables exist. + */ +function findClosestRow(droppables: DroppablePosition[], posY: number): null | number { + if (droppables.length === 0) { + return null + } + + let closestRow = droppables[0].row + let minYDistance = Infinity + + for (const droppable of droppables) { + const yDistance = Math.abs(droppable.centerY - posY) + if (yDistance < minYDistance) { + minYDistance = yDistance + closestRow = droppable.row + } + } + + return closestRow +} + +/** + * Find the closest droppable within a specific row by X position. + * Returns the droppable and its index, or null if no droppables in that row. + */ +function findClosestDroppableInRow( + droppables: DroppablePosition[], + rowIndex: number, + posX: number, +): { droppable: DroppablePosition; index: number } | null { + let closestIndex = -1 + let minXDistance = Infinity + + for (let i = 0; i < droppables.length; i++) { + const droppable = droppables[i] + if (droppable.row === rowIndex) { + const xDistance = Math.abs(droppable.centerX - posX) + if (xDistance < minXDistance) { + minXDistance = xDistance + closestIndex = i + } + } + } + + if (closestIndex === -1) { + return null + } + + return { droppable: droppables[closestIndex], index: closestIndex } +} + +/** + * Find the target droppable based on direction + * - ArrowRight/Left: Next/previous in DOM order (now that overlapping droppables are filtered) + * - ArrowUp/Down: Closest in adjacent row (row +1 or -1) by X position + */ +function findTargetDroppable( + droppables: DroppablePosition[], + currentCenterX: number, + currentCenterY: number, + direction: string, +): DroppablePosition | null { + // Find the closest row, then the closest droppable in that row + const currentRow = findClosestRow(droppables, currentCenterY) + + if (currentRow === null) { + return null + } + + const currentDroppable = findClosestDroppableInRow(droppables, currentRow, currentCenterX) + + if (!currentDroppable) { + return null + } + + const { index: currentIndex } = currentDroppable + + switch (direction) { + case 'ArrowDown': { + const targetRow = currentRow + 1 + return findClosestDroppableInRow(droppables, targetRow, currentCenterX)?.droppable || null + } + + case 'ArrowLeft': + // Previous in DOM order + return droppables[currentIndex - 1] || null + + case 'ArrowRight': + // Next in DOM order + return droppables[currentIndex + 1] || null + + case 'ArrowUp': { + const targetRow = currentRow - 1 + return findClosestDroppableInRow(droppables, targetRow, currentCenterX)?.droppable || null + } + + default: + return null + } +} + +/** + * Custom coordinate getter that jumps directly to droppable positions + * instead of moving in pixel increments. This works better with scrolling + * and provides more predictable navigation. + */ +const droppableJumpKeyboardCoordinateGetter: KeyboardCoordinateGetter = ( + event, + { context, currentCoordinates }, +) => { + const { collisionRect } = context + const { code } = event + + if (!collisionRect) { + return currentCoordinates + } + + // Only handle arrow keys + if (!['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(code)) { + return currentCoordinates + } + + // Prevent default browser scroll behavior for arrow keys + event.preventDefault() + + // Clear scrollableAncestors to prevent dnd-kit from scrolling instead of moving + // This must be done on every keydown because context is updated by dnd-kit + if (context.scrollableAncestors) { + context.scrollableAncestors.length = 0 + } + + // Get all droppable widgets and their positions + const droppables = getDroppablePositions() + + if (droppables.length === 0) { + return currentCoordinates + } + + // Current position center (viewport coordinates from collisionRect) + const currentCenterX = collisionRect.left + collisionRect.width / 2 + const currentCenterY = collisionRect.top + collisionRect.height / 2 + + // Find the target droppable based on direction + const targetDroppable = findTargetDroppable(droppables, currentCenterX, currentCenterY, code) + + // If we found a target, scroll if needed and calculate the delta + if (targetDroppable) { + const viewportHeight = window.innerHeight + const targetRect = targetDroppable.rect + const scrollPadding = 20 // Extra padding to ensure element is fully visible + + // Check if target droppable is fully visible in viewport + const isAboveViewport = targetRect.top < scrollPadding + const isBelowViewport = targetRect.bottom > viewportHeight - scrollPadding + + // Scroll to make target visible (using instant scroll for synchronous behavior) + if (isAboveViewport) { + const scrollAmount = targetRect.top - scrollPadding + // don't use smooth scroll here, because it will mess up the delta calculation + window.scrollBy({ behavior: 'instant', top: scrollAmount }) + } else if (isBelowViewport) { + const scrollAmount = targetRect.bottom - viewportHeight + scrollPadding + window.scrollBy({ behavior: 'instant', top: scrollAmount }) + } + + // After scroll, recalculate target position (it may have changed due to scroll) + const newTargetRect = targetDroppable.element.getBoundingClientRect() + const newTargetCenterX = newTargetRect.left + newTargetRect.width / 2 + const newTargetCenterY = newTargetRect.top + newTargetRect.height / 2 + + // Calculate delta using current overlay position (which didn't change) and new target position + const deltaX = newTargetCenterX - currentCenterX + const deltaY = newTargetCenterY - currentCenterY + + // Add delta to currentCoordinates to position overlay's center at target's center + return { + x: currentCoordinates.x + deltaX, + y: currentCoordinates.y + deltaY, + } + } + + // No valid target found, stay in place + return currentCoordinates +} + +/** + * Custom KeyboardSensor that only activates when focus is directly on the + * draggable element, not on any of its descendants. This allows interactive + * elements inside draggables (like buttons) to work normally with the keyboard. + */ +class DirectFocusKeyboardSensor extends KeyboardSensor { + static override activators = [ + { + eventName: 'onKeyDown' as const, + handler: ( + event: React.KeyboardEvent, + { + keyboardCodes = { + cancel: [KeyboardCode.Esc], + end: [KeyboardCode.Space, KeyboardCode.Enter], + start: [KeyboardCode.Space, KeyboardCode.Enter], + }, + onActivation, + }: KeyboardSensorOptions, + { active }: { active: { node: React.MutableRefObject } }, + ) => { + const { code } = event.nativeEvent + + // Only activate if focus is directly on the draggable node, not descendants + if (event.target !== active.node.current) { + return false + } + + if (keyboardCodes.start.includes(code)) { + event.preventDefault() + onActivation?.({ event: event.nativeEvent }) + return true + } + + return false + }, + }, + ] +} + +export function useDashboardSensors() { + return useSensors( + useSensor(MouseSensor, { + activationConstraint: { + distance: 5, + }, + }), + useSensor(TouchSensor, { + activationConstraint: { + delay: 200, + tolerance: 5, + }, + }), + useSensor(DirectFocusKeyboardSensor, { + coordinateGetter: droppableJumpKeyboardCoordinateGetter, + }), + ) +} diff --git a/packages/ui/src/views/Dashboard/Default/index.tsx b/packages/ui/src/views/Dashboard/Default/index.tsx new file mode 100644 index 00000000000..04e6697d708 --- /dev/null +++ b/packages/ui/src/views/Dashboard/Default/index.tsx @@ -0,0 +1,75 @@ +import type { AdminViewServerPropsOnly, ClientUser, Locale, ServerProps } from 'payload' + +import React from 'react' + +import type { WithViewRenderer } from '../../../utilities/createViewRenderer.js' +import type { groupNavItems } from '../../../utilities/groupNavItems.js' + +import { Gutter } from '../../../elements/Gutter/index.js' +import { createViewRenderer } from '../../../utilities/createViewRenderer.js' +import { ModularDashboard } from './ModularDashboard/index.js' + +const baseClass = 'dashboard' + +export type DashboardViewClientProps = { + locale: Locale +} + +// Neither DashboardViewClientProps, DashboardViewServerPropsOnly, nor +// DashboardViewServerProps make much sense. They were created +// before the modular dashboard existed, and they are tightly coupled to +// the default layout of collection and global cards. All of their values +// could have been derived from the req object, and the same likely applies +// to other views. These types remain only for backward compatibility. +// It is recommended to use the modular dashboard widgets, which have props +// that are more agnostic to their content. + +export type DashboardViewServerPropsOnly = { + globalData: Array<{ + data: { _isLocked: boolean; _lastEditedAt: string; _userEditing: ClientUser | number | string } + lockDuration?: number + slug: string + }> + /** + * @deprecated + * This prop is deprecated and will be removed in the next major version. + * Components now import their own `Link` directly from `next/link`. + */ + Link?: React.ComponentType + navGroups?: ReturnType +} & AdminViewServerPropsOnly & + WithViewRenderer + +export type DashboardViewServerProps = DashboardViewClientProps & DashboardViewServerPropsOnly + +export function DefaultDashboard(props: DashboardViewServerProps) { + const { i18n, locale, params, payload, permissions, searchParams, user } = props + const { afterDashboard, beforeDashboard } = payload.config.admin.components + const renderView = props.viewRenderer ?? createViewRenderer({ importMap: payload.importMap }) + const serverProps = { + i18n, + locale, + params, + payload, + permissions, + searchParams, + user, + viewRenderer: renderView, + } satisfies ServerProps & WithViewRenderer + + return ( + + {beforeDashboard && + renderView({ + Component: beforeDashboard, + serverProps, + })} + + {afterDashboard && + renderView({ + Component: afterDashboard, + serverProps, + })} + + ) +} diff --git a/packages/ui/src/views/Dashboard/index.tsx b/packages/ui/src/views/Dashboard/index.tsx new file mode 100644 index 00000000000..ca82548a625 --- /dev/null +++ b/packages/ui/src/views/Dashboard/index.tsx @@ -0,0 +1,69 @@ +import type { AdminViewServerProps } from 'payload' +import type React from 'react' + +import { Fragment } from 'react' + +import type { WithViewRenderer } from '../../utilities/createViewRenderer.js' +import type { DashboardViewClientProps, DashboardViewServerPropsOnly } from './Default/index.js' + +import { HydrateAuthProvider } from '../../elements/HydrateAuthProvider/index.js' +import { SetStepNav } from '../../elements/StepNav/SetStepNav.js' +import { createViewRenderer } from '../../utilities/createViewRenderer.js' +import { getGlobalData } from '../../utilities/getGlobalData.js' +import { getNavGroups } from '../../utilities/getNavGroups.js' +import { DefaultDashboard } from './Default/index.js' + +export type RenderDashboardViewArgs = AdminViewServerProps & WithViewRenderer + +export const renderDashboardView = async ( + props: RenderDashboardViewArgs, +): Promise<{ Dashboard: React.ReactNode }> => { + const { + locale, + permissions, + req: { + i18n, + payload: { config }, + payload, + user, + }, + req, + visibleEntities, + } = props.initPageResult + + const globalData = await getGlobalData(req) + const navGroups = getNavGroups(permissions, visibleEntities, config, i18n) + const renderView = props.viewRenderer ?? createViewRenderer({ importMap: payload.importMap }) + + return { + Dashboard: ( + + + + {renderView({ + clientProps: { + locale, + } satisfies DashboardViewClientProps, + Component: config.admin?.components?.views?.dashboard?.Component, + Fallback: DefaultDashboard, + serverProps: { + ...props, + globalData, + i18n, + locale, + navGroups, + payload, + permissions, + user, + visibleEntities, + } satisfies DashboardViewServerPropsOnly, + })} + + ), + } +} + +export async function DashboardView(props: RenderDashboardViewArgs) { + const { Dashboard } = await renderDashboardView(props) + return Dashboard +} diff --git a/packages/ui/src/views/Document/DocumentView.tsx b/packages/ui/src/views/Document/DocumentView.tsx new file mode 100644 index 00000000000..12901b3a2c8 --- /dev/null +++ b/packages/ui/src/views/Document/DocumentView.tsx @@ -0,0 +1,33 @@ +import type { AdminViewServerProps } from 'payload' + +import { renderDocument } from './RenderDocument.js' + +type DocumentViewProps = { + notFound?: () => never + redirect?: (url: string) => never +} & AdminViewServerProps + +/** + * Framework-agnostic DocumentView server component. + * Accepts optional notFound/redirect callbacks (injected via serverProps from the adapter). + * Falls back to error-throwing if callbacks are not provided. + */ +export async function DocumentView({ notFound, redirect, ...props }: DocumentViewProps) { + const _notFound: () => never = + notFound ?? + (() => { + throw new Error('not-found') + }) + const _redirect: (url: string) => never = + redirect ?? + ((url: string) => { + throw new Error(`REDIRECT:${url}`) + }) + + const { Document: RenderedDocument } = await renderDocument({ + ...props, + notFound: _notFound, + redirect: _redirect, + }) + return RenderedDocument +} diff --git a/packages/ui/src/views/Document/RenderDocument.tsx b/packages/ui/src/views/Document/RenderDocument.tsx new file mode 100644 index 00000000000..6d3bd214dbc --- /dev/null +++ b/packages/ui/src/views/Document/RenderDocument.tsx @@ -0,0 +1,463 @@ +import type { + AdminViewServerProps, + CollectionPreferences, + Data, + DocumentViewClientProps, + DocumentViewServerProps, + DocumentViewServerPropsOnly, + EditViewComponent, + PayloadComponent, + RenderDocumentVersionsProperties, +} from 'payload' + +import { isolateObjectProperty } from 'payload' +import { formatAdminURL, hasAutosaveEnabled, hasDraftsEnabled } from 'payload/shared' +import React from 'react' + +import type { WithViewRenderer } from '../../utilities/createViewRenderer.js' + +import { DocumentHeader } from '../../elements/DocumentHeader/index.js' +import { HydrateAuthProvider } from '../../elements/HydrateAuthProvider/index.js' +import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js' +import { EditDepthProvider } from '../../providers/EditDepth/index.js' +import { LivePreviewProvider } from '../../providers/LivePreview/index.js' +import { buildFormState } from '../../utilities/buildFormState.js' +import { createViewRenderer } from '../../utilities/createViewRenderer.js' +import { getPreferences } from '../../utilities/getPreferences.js' +import { handleLivePreview } from '../../utilities/handleLivePreview.js' +import { handlePreview } from '../../utilities/handlePreview.js' +import { isEditing as getIsEditing } from '../../utilities/isEditing.js' +import { NotFoundView } from '../NotFound/index.js' +import { getDocPreferences } from './getDocPreferences.js' +import { getDocumentData } from './getDocumentData.js' +import { getDocumentPermissions } from './getDocumentPermissions.js' +import { getDocumentView } from './getDocumentView.js' +import { getIsLocked } from './getIsLocked.js' +import { getVersions } from './getVersions.js' +import { renderDocumentSlots } from './renderDocumentSlots.js' + +export type ViewToRender = + | EditViewComponent + | PayloadComponent + | React.FC + | React.FC + +/** + * This function is responsible for rendering + * an Edit Document view on the server for both: + * - default document edit views + * - on-demand edit views within drawers + */ +export const renderDocument = async ({ + disableActions, + documentSubViewType, + drawerSlug, + importMap, + initialData, + initPageResult, + overrideEntityVisibility, + params, + redirect, + redirectAfterCreate, + redirectAfterDelete, + redirectAfterDuplicate, + redirectAfterRestore, + searchParams, + versions, + viewRenderer, + viewType, +}: { + drawerSlug?: string + notFound: () => never + overrideEntityVisibility?: boolean + redirect: (url: string) => never + readonly redirectAfterCreate?: boolean + readonly redirectAfterDelete?: boolean + readonly redirectAfterDuplicate?: boolean + readonly redirectAfterRestore?: boolean + versions?: RenderDocumentVersionsProperties +} & AdminViewServerProps & + WithViewRenderer): Promise<{ + data: Data + Document: React.ReactNode +}> => { + const { + collectionConfig, + docID: idFromArgs, + globalConfig, + locale, + permissions, + req, + req: { + i18n, + payload, + payload: { + config, + config: { + routes: { admin: adminRoute, api: apiRoute }, + }, + }, + user, + }, + visibleEntities, + } = initPageResult + const renderView = viewRenderer ?? createViewRenderer({ importMap }) + + const segments = Array.isArray(params?.segments) ? params.segments : [] + const collectionSlug = collectionConfig?.slug || undefined + const globalSlug = globalConfig?.slug || undefined + let isEditing = getIsEditing({ id: idFromArgs, collectionSlug, globalSlug }) + + // Fetch the doc required for the view + let doc = + !idFromArgs && !globalSlug + ? initialData || null + : await getDocumentData({ + id: idFromArgs, + collectionSlug, + globalSlug, + locale, + payload, + req, + segments, + user, + }) + + if (isEditing && !doc) { + // If it's a collection document that doesn't exist, redirect to collection list + if (collectionSlug) { + const redirectURL = formatAdminURL({ + adminRoute, + path: `/collections/${collectionSlug}?notFound=${encodeURIComponent(idFromArgs)}`, + }) + redirect(redirectURL) + } else { + // For globals or other cases, keep the 404 behavior + throw new Error('not-found') + } + } + + const isTrashedDoc = Boolean(doc && 'deletedAt' in doc && typeof doc?.deletedAt === 'string') + + // CRITICAL FIX FOR TRANSACTION RACE CONDITION: + // When running parallel operations with Promise.all, if they share the same req object + // and one operation calls initTransaction() which MUTATES req.transactionID, that mutation + // is visible to all parallel operations. This causes: + // 1. Operation A (e.g., getDocumentPermissions → docAccessOperation) calls initTransaction() + // which sets req.transactionID = Promise, then resolves it to a UUID + // 2. Operation B (e.g., getIsLocked) running in parallel receives the SAME req with the mutated transactionID + // 3. Operation A (does not even know that Operation B even exists and is stil using the transactionID) commits/ends its transaction + // 4. Operation B tries to use the now-expired session → MongoExpiredSessionError! + // + // Solution: Use isolateObjectProperty to create a Proxy that isolates the 'transactionID' property. + // This allows each operation to have its own transactionID without affecting the parent req. + // If parent req already has a transaction, preserve it (don't isolate), since this + // issue only arises when one of the operations calls initTransaction() themselves - + // because then, that operation will also try to commit/end the transaction itself. + + // If the transactionID is already set, the parallel operations will not try to + // commit/end the transaction themselves, so we don't need to isolate the + // transactionID property. + const reqForPermissions = req.transactionID ? req : isolateObjectProperty(req, 'transactionID') + const reqForLockCheck = req.transactionID ? req : isolateObjectProperty(req, 'transactionID') + + const [ + docPreferences, + { + docPermissions, + hasDeletePermission, + hasPublishPermission, + hasSavePermission, + hasTrashPermission, + }, + { currentEditor, isLocked, lastUpdateTime }, + entityPreferences, + ] = await Promise.all([ + // Get document preferences + getDocPreferences({ + id: idFromArgs, + collectionSlug, + globalSlug, + payload, + user, + }), + + // Get permissions - isolated transactionID prevents cross-contamination + getDocumentPermissions({ + id: idFromArgs, + collectionConfig, + data: doc, + globalConfig, + req: reqForPermissions, + }), + + // Fetch document lock state - isolated transactionID prevents cross-contamination + getIsLocked({ + id: idFromArgs, + collectionConfig, + globalConfig, + isEditing, + req: reqForLockCheck, + }), + + // get entity preferences + getPreferences( + collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`, + payload, + req.user.id, + req.user.collection, + ), + ]) + + const operation = (collectionSlug && idFromArgs) || globalSlug ? 'update' : 'create' + + const [ + { hasPublishedDoc, mostRecentVersionIsAutosaved, unpublishedVersionCount, versionCount }, + { state: formState }, + ] = await Promise.all([ + getVersions({ + id: idFromArgs, + collectionConfig, + doc, + docPermissions, + globalConfig, + locale: locale?.code, + payload, + user, + }), + buildFormState({ + id: idFromArgs, + collectionSlug, + data: doc, + docPermissions, + docPreferences, + fallbackLocale: false, + globalSlug, + locale: locale?.code, + operation, + readOnly: isTrashedDoc || isLocked, + renderAllFields: true, + req, + schemaPath: collectionSlug || globalSlug, + skipValidation: true, + }), + ]) + + const documentViewServerProps: DocumentViewServerPropsOnly = { + doc, + hasPublishedDoc, + i18n, + initPageResult, + locale, + params, + payload, + permissions, + routeSegments: segments, + searchParams, + user, + versions, + } + + if ( + !overrideEntityVisibility && + ((collectionSlug && + !visibleEntities?.collections?.find((visibleSlug) => visibleSlug === collectionSlug)) || + (globalSlug && !visibleEntities?.globals?.find((visibleSlug) => visibleSlug === globalSlug))) + ) { + throw new Error('not-found') + } + + const formattedParams = new URLSearchParams() + + if (hasDraftsEnabled(collectionConfig || globalConfig)) { + formattedParams.append('draft', 'true') + } + + if (locale?.code) { + formattedParams.append('locale', locale.code) + } + + const apiQueryParams = `?${formattedParams.toString()}` + + const apiURL = formatAdminURL({ + apiRoute, + path: collectionSlug + ? `/${collectionSlug}/${idFromArgs}${apiQueryParams}` + : globalSlug + ? `/${globalSlug}${apiQueryParams}` + : '', + }) + + let View: ViewToRender = null + + let showHeader = true + + const RootViewOverride = + collectionConfig?.admin?.components?.views?.edit?.root && + 'Component' in collectionConfig.admin.components.views.edit.root + ? collectionConfig?.admin?.components?.views?.edit?.root?.Component + : globalConfig?.admin?.components?.views?.edit?.root && + 'Component' in globalConfig.admin.components.views.edit.root + ? globalConfig?.admin?.components?.views?.edit?.root?.Component + : null + + if (RootViewOverride) { + View = RootViewOverride + showHeader = false + } else { + ;({ View } = getDocumentView({ + collectionConfig, + config, + docPermissions, + globalConfig, + routeSegments: segments, + })) + } + + if (!View) { + View = NotFoundView + } + + /** + * Handle case where autoSave is enabled and the document is being created + * => create document and redirect + */ + const shouldAutosave = hasSavePermission && hasAutosaveEnabled(collectionConfig || globalConfig) + + const validateDraftData = + collectionConfig?.versions?.drafts && collectionConfig?.versions?.drafts?.validate + + let id = idFromArgs + + if (shouldAutosave && !validateDraftData && !idFromArgs && collectionSlug) { + doc = await payload.create({ + collection: collectionSlug, + data: initialData || {}, + depth: 0, + draft: true, + fallbackLocale: false, + locale: locale?.code, + req, + user, + }) + + if (doc?.id) { + id = doc.id + isEditing = getIsEditing({ id: doc.id, collectionSlug, globalSlug }) + + if (!drawerSlug && redirectAfterCreate !== false) { + const redirectURL = formatAdminURL({ + adminRoute, + path: `/collections/${collectionSlug}/${doc.id}`, + }) + + redirect(redirectURL) + } + } else { + throw new Error('not-found') + } + } + + const documentSlots = renderDocumentSlots({ + id, + collectionConfig, + globalConfig, + hasSavePermission, + locale, + permissions, + req, + viewRenderer: renderView, + }) + + // Extract Description from documentSlots to pass to DocumentHeader + const { Description } = documentSlots + + const clientProps: DocumentViewClientProps = { + formState, + ...documentSlots, + documentSubViewType, + viewType, + } + + const { isLivePreviewEnabled, livePreviewConfig, livePreviewURL } = await handleLivePreview({ + collectionSlug, + config, + data: doc, + globalSlug, + operation, + req, + }) + + const { isPreviewEnabled, previewURL } = await handlePreview({ + collectionSlug, + config, + data: doc, + globalSlug, + operation, + req, + }) + + return { + data: doc, + Document: ( + + + {showHeader && !drawerSlug && ( + + )} + + + {renderView({ + clientProps, + Component: View, + serverProps: documentViewServerProps, + })} + + + + ), + } +} diff --git a/packages/ui/src/views/Document/getCustomDocumentViewByKey.tsx b/packages/ui/src/views/Document/getCustomDocumentViewByKey.tsx new file mode 100644 index 00000000000..8b0001946dc --- /dev/null +++ b/packages/ui/src/views/Document/getCustomDocumentViewByKey.tsx @@ -0,0 +1,13 @@ +import type { EditViewComponent, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload' + +export const getCustomDocumentViewByKey = ( + views: + | SanitizedCollectionConfig['admin']['components']['views'] + | SanitizedGlobalConfig['admin']['components']['views'], + customViewKey: string, +): EditViewComponent => { + return typeof views?.edit?.[customViewKey] === 'object' && + 'Component' in views.edit[customViewKey] + ? views?.edit?.[customViewKey].Component + : null +} diff --git a/packages/ui/src/views/Document/getCustomViewByRoute.tsx b/packages/ui/src/views/Document/getCustomViewByRoute.tsx new file mode 100644 index 00000000000..f4041b63138 --- /dev/null +++ b/packages/ui/src/views/Document/getCustomViewByRoute.tsx @@ -0,0 +1,53 @@ +import type { EditViewComponent, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload' + +import { isPathMatchingRoute } from '../../utilities/isPathMatchingRoute.js' + +export const getCustomViewByRoute = ({ + baseRoute, + currentRoute, + views, +}: { + baseRoute: string + currentRoute: string + views: + | SanitizedCollectionConfig['admin']['components']['views'] + | SanitizedGlobalConfig['admin']['components']['views'] +}): { + Component: EditViewComponent + viewKey?: string +} => { + if (typeof views?.edit === 'object') { + let viewKey: string + + const foundViewConfig = Object.entries(views.edit).find(([key, view]) => { + if (typeof view === 'object' && 'path' in view) { + const viewPath = `${baseRoute}${view.path}` + + const isMatching = isPathMatchingRoute({ + currentRoute, + exact: true, + path: viewPath, + }) + + if (isMatching) { + viewKey = key + } + + return isMatching + } + + return false + })?.[1] + + if (foundViewConfig && 'Component' in foundViewConfig) { + return { + Component: foundViewConfig.Component, + viewKey, + } + } + } + + return { + Component: null, + } +} diff --git a/packages/ui/src/views/Document/getDocPreferences.ts b/packages/ui/src/views/Document/getDocPreferences.ts new file mode 100644 index 00000000000..36b1287141d --- /dev/null +++ b/packages/ui/src/views/Document/getDocPreferences.ts @@ -0,0 +1,62 @@ +import type { DocumentPreferences, Payload, TypedUser } from 'payload' + +import { sanitizeID } from '../../utilities/sanitizeID.js' + +type Args = { + collectionSlug?: string + globalSlug?: string + id?: number | string + payload: Payload + user: TypedUser +} + +export const getDocPreferences = async ({ + id, + collectionSlug, + globalSlug, + payload, + user, +}: Args): Promise => { + let preferencesKey + + if (collectionSlug && id) { + preferencesKey = `collection-${collectionSlug}-${id}` + } + + if (globalSlug) { + preferencesKey = `global-${globalSlug}` + } + + if (preferencesKey) { + const preferencesResult = (await payload.find({ + collection: 'payload-preferences', + depth: 0, + limit: 1, + where: { + and: [ + { + key: { + equals: preferencesKey, + }, + }, + { + 'user.relationTo': { + equals: user.collection, + }, + }, + { + 'user.value': { + equals: sanitizeID(user.id), + }, + }, + ], + }, + })) as unknown as { docs: { value: DocumentPreferences }[] } + + if (preferencesResult?.docs?.[0]?.value) { + return preferencesResult.docs[0].value + } + } + + return { fields: {} } +} diff --git a/packages/ui/src/views/Document/getDocumentData.ts b/packages/ui/src/views/Document/getDocumentData.ts new file mode 100644 index 00000000000..9077317de34 --- /dev/null +++ b/packages/ui/src/views/Document/getDocumentData.ts @@ -0,0 +1,76 @@ +import { + type Locale, + logError, + type Payload, + type PayloadRequest, + type TypedUser, + type TypeWithID, +} from 'payload' + +import { sanitizeID } from '../../utilities/sanitizeID.js' + +type Args = { + collectionSlug?: string + globalSlug?: string + id?: number | string + locale?: Locale + payload: Payload + req?: PayloadRequest + segments?: string[] + user?: TypedUser +} + +export const getDocumentData = async ({ + id: idArg, + collectionSlug, + globalSlug, + locale, + payload, + req, + segments, + user, +}: Args): Promise | TypeWithID> => { + const id = sanitizeID(idArg) + let resolvedData: Record | TypeWithID = null + const { transactionID, ...rest } = req + + const isTrashedDoc = segments?.[2] === 'trash' && typeof segments?.[3] === 'string' // id exists at segment 3 + + try { + if (collectionSlug && id) { + resolvedData = await payload.findByID({ + id, + collection: collectionSlug, + depth: 0, + draft: true, + fallbackLocale: false, + locale: locale?.code, + overrideAccess: false, + req: { + ...rest, + }, + trash: isTrashedDoc ? true : false, + user, + }) + } + + if (globalSlug) { + resolvedData = await payload.findGlobal({ + slug: globalSlug, + depth: 0, + draft: true, + fallbackLocale: false, + locale: locale?.code, + overrideAccess: false, + req: { + ...rest, + }, + user, + }) + } + } catch (err) { + logError({ err, payload }) + } + + return resolvedData +} diff --git a/packages/ui/src/views/Document/getDocumentPermissions.tsx b/packages/ui/src/views/Document/getDocumentPermissions.tsx new file mode 100644 index 00000000000..5efa7fe1f1e --- /dev/null +++ b/packages/ui/src/views/Document/getDocumentPermissions.tsx @@ -0,0 +1,152 @@ +import type { + Data, + PayloadRequest, + SanitizedCollectionConfig, + SanitizedDocumentPermissions, + SanitizedGlobalConfig, +} from 'payload' + +import { docAccessOperation, docAccessOperationGlobal, logError } from 'payload' +import { hasDraftsEnabled } from 'payload/shared' + +import { hasSavePermission as getHasSavePermission } from '../../utilities/hasSavePermission.js' +import { isEditing as getIsEditing } from '../../utilities/isEditing.js' + +export const getDocumentPermissions = async (args: { + collectionConfig?: SanitizedCollectionConfig + data: Data + globalConfig?: SanitizedGlobalConfig + /** + * When called for creating a new document, id is not provided. + */ + id?: number | string + req: PayloadRequest +}): Promise<{ + docPermissions: SanitizedDocumentPermissions + hasDeletePermission: boolean + hasPublishPermission: boolean + hasSavePermission: boolean + hasTrashPermission: boolean +}> => { + const { id, collectionConfig, data = {}, globalConfig, req } = args + + let docPermissions: SanitizedDocumentPermissions + let hasPublishPermission = false + let hasTrashPermission = false + let hasDeletePermission = false + + if (collectionConfig) { + try { + docPermissions = await docAccessOperation({ + id, + collection: { + config: collectionConfig, + }, + data: { + ...data, + _status: 'draft', + }, + req, + }) + + if (hasDraftsEnabled(collectionConfig)) { + hasPublishPermission = ( + await docAccessOperation({ + id, + collection: { + config: collectionConfig, + }, + data: { + ...data, + _status: 'published', + }, + req, + }) + ).update + } + + if (collectionConfig.trash) { + const { deletedAt: _, ...dataWithoutDeletedAt } = data || {} + + const [trashPermissionResult, deletePermissionResult] = await Promise.all([ + docAccessOperation({ + id, + collection: { + config: collectionConfig, + }, + data: { + ...data, + deletedAt: new Date().toISOString(), + }, + req, + }), + docAccessOperation({ + id, + collection: { + config: collectionConfig, + }, + data: dataWithoutDeletedAt, + req, + }), + ]) + + hasTrashPermission = trashPermissionResult.delete + hasDeletePermission = deletePermissionResult.delete + } else { + // When trash is not enabled, delete permission is straightforward + hasDeletePermission = 'delete' in docPermissions ? Boolean(docPermissions.delete) : false + hasTrashPermission = false + } + } catch (err) { + logError({ err, payload: req.payload }) + } + } + + if (globalConfig) { + try { + docPermissions = await docAccessOperationGlobal({ + data, + globalConfig, + req, + }) + + if (hasDraftsEnabled(globalConfig)) { + hasPublishPermission = ( + await docAccessOperationGlobal({ + data: { + ...data, + _status: 'published', + }, + globalConfig, + req, + }) + ).update + } + + // Globals don't support trash + hasDeletePermission = false + hasTrashPermission = false + } catch (err) { + logError({ err, payload: req.payload }) + } + } + + const hasSavePermission = getHasSavePermission({ + collectionSlug: collectionConfig?.slug, + docPermissions, + globalSlug: globalConfig?.slug, + isEditing: getIsEditing({ + id, + collectionSlug: collectionConfig?.slug, + globalSlug: globalConfig?.slug, + }), + }) + + return { + docPermissions, + hasDeletePermission, + hasPublishPermission, + hasSavePermission, + hasTrashPermission, + } +} diff --git a/packages/ui/src/views/Document/getDocumentView.tsx b/packages/ui/src/views/Document/getDocumentView.tsx new file mode 100644 index 00000000000..31e8901f22e --- /dev/null +++ b/packages/ui/src/views/Document/getDocumentView.tsx @@ -0,0 +1,393 @@ +import type { + PayloadComponent, + SanitizedCollectionConfig, + SanitizedCollectionPermission, + SanitizedConfig, + SanitizedGlobalConfig, + SanitizedGlobalPermission, +} from 'payload' +import type React from 'react' + +import type { ViewToRender } from './RenderDocument.js' + +import { APIView as DefaultAPIView } from '../API/index.js' +import { DefaultEditView as EditView } from '../Edit/index.js' +import { UnauthorizedViewWithGutter } from '../Unauthorized/index.js' +import { VersionView as DefaultVersionView } from '../Version/index.js' +import { VersionsView as DefaultVersionsView } from '../Versions/index.js' +import { getCustomDocumentViewByKey } from './getCustomDocumentViewByKey.js' +import { getCustomViewByRoute } from './getCustomViewByRoute.js' + +export type ViewFromConfig = { + Component?: React.FC + ComponentConfig?: PayloadComponent +} + +export const getDocumentView = ({ + collectionConfig, + config, + docPermissions, + globalConfig, + routeSegments, +}: { + collectionConfig?: SanitizedCollectionConfig + config: SanitizedConfig + docPermissions: SanitizedCollectionPermission | SanitizedGlobalPermission + globalConfig?: SanitizedGlobalConfig + routeSegments: string[] +}): { + View: ViewToRender + viewKey: string +} | null => { + // Conditionally import and lazy load the default view + let View: ViewToRender = null + let viewKey: string + + const { + routes: { admin: adminRoute }, + } = config + + const views = + (collectionConfig && collectionConfig?.admin?.components?.views) || + (globalConfig && globalConfig?.admin?.components?.views) + + if (!docPermissions?.read) { + throw new Error('not-found') + } + + if (collectionConfig) { + const [collectionEntity, collectionSlug, segment3, segment4, segment5, ...remainingSegments] = + routeSegments + + // --> /collections/:collectionSlug/:id + // --> /collections/:collectionSlug/create + switch (routeSegments.length) { + case 3: { + switch (segment3) { + // --> /collections/:collectionSlug/create + case 'create': { + if ('create' in docPermissions && docPermissions.create) { + View = getCustomDocumentViewByKey(views, 'default') || EditView + } else { + View = UnauthorizedViewWithGutter + } + break + } + + // --> /collections/:collectionSlug/:id + default: { + const baseRoute = [ + adminRoute !== '/' && adminRoute, + 'collections', + collectionSlug, + segment3, + ] + .filter(Boolean) + .join('/') + + const currentRoute = [baseRoute, segment4, segment5, ...remainingSegments] + .filter(Boolean) + .join('/') + + const { Component: CustomViewComponent, viewKey: customViewKey } = getCustomViewByRoute( + { + baseRoute, + currentRoute, + views, + }, + ) + + if (customViewKey) { + viewKey = customViewKey + View = CustomViewComponent + } else { + View = getCustomDocumentViewByKey(views, 'default') || EditView + } + + break + } + } + break + } + + // --> /collections/:collectionSlug/:id/api + // --> /collections/:collectionSlug/:id/versions + // --> /collections/:collectionSlug/:id/ + // --> /collections/:collectionSlug/trash/:id + case 4: { + // --> /collections/:collectionSlug/trash/:id + if (segment3 === 'trash' && segment4) { + View = getCustomDocumentViewByKey(views, 'default') || EditView + break + } + switch (segment4) { + // --> /collections/:collectionSlug/:id/api + case 'api': { + if (collectionConfig?.admin?.hideAPIURL !== true) { + View = getCustomDocumentViewByKey(views, 'api') || DefaultAPIView + } + break + } + + case 'versions': { + // --> /collections/:collectionSlug/:id/versions + if (docPermissions?.readVersions) { + View = getCustomDocumentViewByKey(views, 'versions') || DefaultVersionsView + } else { + View = UnauthorizedViewWithGutter + } + break + } + + // --> /collections/:collectionSlug/:id/ + default: { + const baseRoute = [ + adminRoute !== '/' && adminRoute, + 'collections', + collectionSlug, + segment3, + ] + .filter(Boolean) + .join('/') + + const currentRoute = [baseRoute, segment4, segment5, ...remainingSegments] + .filter(Boolean) + .join('/') + + const { Component: CustomViewComponent, viewKey: customViewKey } = getCustomViewByRoute( + { + baseRoute, + currentRoute, + views, + }, + ) + + if (customViewKey) { + viewKey = customViewKey + View = CustomViewComponent + } + + break + } + } + break + } + + // --> /collections/:collectionSlug/trash/:id/api + // --> /collections/:collectionSlug/trash/:id/versions + // --> /collections/:collectionSlug/trash/:id/ + // --> /collections/:collectionSlug/:id/versions/:version + case 5: { + // --> /collections/:slug/trash/:id/api + if (segment3 === 'trash') { + switch (segment5) { + case 'api': { + if (collectionConfig?.admin?.hideAPIURL !== true) { + View = getCustomDocumentViewByKey(views, 'api') || DefaultAPIView + } + break + } + // --> /collections/:slug/trash/:id/versions + case 'versions': { + if (docPermissions?.readVersions) { + View = getCustomDocumentViewByKey(views, 'versions') || DefaultVersionsView + } else { + View = UnauthorizedViewWithGutter + } + break + } + + default: { + View = getCustomDocumentViewByKey(views, 'default') || EditView + break + } + } + // --> /collections/:collectionSlug/:id/versions/:version + } else if (segment4 === 'versions') { + if (docPermissions?.readVersions) { + View = getCustomDocumentViewByKey(views, 'version') || DefaultVersionView + } else { + View = UnauthorizedViewWithGutter + } + } else { + // --> /collections/:collectionSlug/:id// + const baseRoute = [ + adminRoute !== '/' && adminRoute, + collectionEntity, + collectionSlug, + segment3, + ] + .filter(Boolean) + .join('/') + + const currentRoute = [baseRoute, segment4, segment5, ...remainingSegments] + .filter(Boolean) + .join('/') + + const { Component: CustomViewComponent, viewKey: customViewKey } = getCustomViewByRoute({ + baseRoute, + currentRoute, + views, + }) + + if (customViewKey) { + viewKey = customViewKey + View = CustomViewComponent + } + } + + break + } + + // --> /collections/:collectionSlug/trash/:id/versions/:version + // --> /collections/:collectionSlug/:id/// + default: { + // --> /collections/:collectionSlug/trash/:id/versions/:version + const isTrashedVersionView = segment3 === 'trash' && segment5 === 'versions' + + if (isTrashedVersionView) { + if (docPermissions?.readVersions) { + View = getCustomDocumentViewByKey(views, 'version') || DefaultVersionView + } else { + View = UnauthorizedViewWithGutter + } + } else { + // --> /collections/:collectionSlug/:id/// + const baseRoute = [ + adminRoute !== '/' && adminRoute, + collectionEntity, + collectionSlug, + segment3, + ] + .filter(Boolean) + .join('/') + + const currentRoute = [baseRoute, segment4, segment5, ...remainingSegments] + .filter(Boolean) + .join('/') + + const { Component: CustomViewComponent, viewKey: customViewKey } = getCustomViewByRoute({ + baseRoute, + currentRoute, + views, + }) + + if (customViewKey) { + viewKey = customViewKey + View = CustomViewComponent + } + } + + break + } + } + } + + if (globalConfig) { + const [globalEntity, globalSlug, segment3, ...remainingSegments] = routeSegments + + switch (routeSegments.length) { + // --> /globals/:globalSlug + case 2: { + View = getCustomDocumentViewByKey(views, 'default') || EditView + break + } + + case 3: { + // --> /globals/:globalSlug/api + // --> /globals/:globalSlug/versions + // --> /globals/:globalSlug/ + switch (segment3) { + // --> /globals/:globalSlug/api + case 'api': { + if (globalConfig?.admin?.hideAPIURL !== true) { + View = getCustomDocumentViewByKey(views, 'api') || DefaultAPIView + } + + break + } + + case 'versions': { + // --> /globals/:globalSlug/versions + if (docPermissions?.readVersions) { + View = getCustomDocumentViewByKey(views, 'versions') || DefaultVersionsView + } else { + View = UnauthorizedViewWithGutter + } + break + } + + // --> /globals/:globalSlug/ + default: { + if (docPermissions?.read) { + const baseRoute = [adminRoute, globalEntity, globalSlug, segment3] + .filter(Boolean) + .join('/') + + const currentRoute = [baseRoute, segment3, ...remainingSegments] + .filter(Boolean) + .join('/') + + const { Component: CustomViewComponent, viewKey: customViewKey } = + getCustomViewByRoute({ + baseRoute, + currentRoute, + views, + }) + + if (customViewKey) { + viewKey = customViewKey + + View = CustomViewComponent + } else { + View = EditView + } + } else { + View = UnauthorizedViewWithGutter + } + break + } + } + break + } + + // --> /globals/:globalSlug/versions/:version + // --> /globals/:globalSlug// + default: { + // --> /globals/:globalSlug/versions/:version + if (segment3 === 'versions') { + if (docPermissions?.readVersions) { + View = getCustomDocumentViewByKey(views, 'version') || DefaultVersionView + } else { + View = UnauthorizedViewWithGutter + } + } else { + // --> /globals/:globalSlug// + const baseRoute = [adminRoute !== '/' && adminRoute, 'globals', globalSlug] + .filter(Boolean) + .join('/') + + const currentRoute = [baseRoute, segment3, ...remainingSegments].filter(Boolean).join('/') + + const { Component: CustomViewComponent, viewKey: customViewKey } = getCustomViewByRoute({ + baseRoute, + currentRoute, + views, + }) + + if (customViewKey) { + viewKey = customViewKey + View = CustomViewComponent + } + } + + break + } + } + } + + return { + View, + viewKey, + } +} diff --git a/packages/ui/src/views/Document/getIsLocked.ts b/packages/ui/src/views/Document/getIsLocked.ts new file mode 100644 index 00000000000..cf822e81dfc --- /dev/null +++ b/packages/ui/src/views/Document/getIsLocked.ts @@ -0,0 +1,121 @@ +import type { + PayloadRequest, + SanitizedCollectionConfig, + SanitizedGlobalConfig, + TypedUser, + Where, +} from 'payload' + +import { extractID } from 'payload/shared' + +import { sanitizeID } from '../../utilities/sanitizeID.js' + +type Args = { + collectionConfig?: SanitizedCollectionConfig + globalConfig?: SanitizedGlobalConfig + id?: number | string + isEditing: boolean + req: PayloadRequest +} + +type Result = Promise<{ + currentEditor?: TypedUser + isLocked: boolean + lastUpdateTime?: number +}> + +export const getIsLocked = async ({ + id, + collectionConfig, + globalConfig, + isEditing, + req, +}: Args): Result => { + const entityConfig = collectionConfig || globalConfig + + const entityHasLockingEnabled = + entityConfig?.lockDocuments !== undefined ? entityConfig?.lockDocuments : true + + // Check if the locked-documents collection exists + if (!req.payload.collections?.['payload-locked-documents']) { + // If the collection doesn't exist, locking is not available + return { + isLocked: false, + } + } + + if (!entityHasLockingEnabled || !isEditing) { + return { + isLocked: false, + } + } + + const where: Where = {} + + const lockDurationDefault = 300 // Default 5 minutes in seconds + const lockDuration = + typeof entityConfig.lockDocuments === 'object' + ? entityConfig.lockDocuments.duration + : lockDurationDefault + const lockDurationInMilliseconds = lockDuration * 1000 + + const now = new Date().getTime() + + if (globalConfig) { + where.and = [ + { + globalSlug: { + equals: globalConfig.slug, + }, + }, + { + updatedAt: { + greater_than: new Date(now - lockDurationInMilliseconds), + }, + }, + ] + } else { + where.and = [ + { + 'document.value': { + equals: sanitizeID(id), + }, + }, + { + 'document.relationTo': { + equals: collectionConfig.slug, + }, + }, + { + updatedAt: { + greater_than: new Date(now - lockDurationInMilliseconds), + }, + }, + ] + } + + const { docs } = await req.payload.find({ + collection: 'payload-locked-documents', + depth: 1, + overrideAccess: false, + req, + where, + }) + + if (docs.length > 0) { + const currentEditor = docs[0].user?.value + const lastUpdateTime = new Date(docs[0].updatedAt).getTime() + + if (extractID(currentEditor) !== req.user.id) { + return { + currentEditor, + isLocked: true, + lastUpdateTime, + } + } + } + + return { + isLocked: false, + } +} diff --git a/packages/ui/src/views/Document/getVersions.ts b/packages/ui/src/views/Document/getVersions.ts new file mode 100644 index 00000000000..23bc107c84f --- /dev/null +++ b/packages/ui/src/views/Document/getVersions.ts @@ -0,0 +1,318 @@ +import { + combineQueries, + extractAccessFromPermission, + type Payload, + type SanitizedCollectionConfig, + type SanitizedDocumentPermissions, + type SanitizedGlobalConfig, + type TypedUser, +} from 'payload' +import { hasAutosaveEnabled, hasDraftsEnabled } from 'payload/shared' + +import { sanitizeID } from '../../utilities/sanitizeID.js' +import { traverseForLocalizedFields } from '../../utilities/traverseForLocalizedFields.js' + +type Args = { + collectionConfig?: SanitizedCollectionConfig + /** + * Optional - performance optimization. + * If a document has been fetched before fetching versions, pass it here. + * If this document is set to published, we can skip the query to find out if a published document exists, + * as the passed in document is proof of its existence. + */ + doc?: Record + docPermissions: SanitizedDocumentPermissions + globalConfig?: SanitizedGlobalConfig + id?: number | string + locale?: string + payload: Payload + user: TypedUser +} + +type Result = Promise<{ + hasPublishedDoc: boolean + mostRecentVersionIsAutosaved: boolean + unpublishedVersionCount: number + versionCount: number +}> + +// TODO: in the future, we can parallelize some of these queries +// this will speed up the API by ~30-100ms or so +// Note from the future: I have attempted parallelizing these queries, but it made this function almost 2x slower. +export const getVersions = async ({ + id: idArg, + collectionConfig, + doc, + docPermissions, + globalConfig, + locale, + payload, + user, +}: Args): Result => { + const id = sanitizeID(idArg) + let publishedDoc + let hasPublishedDoc = false + let mostRecentVersionIsAutosaved = false + let unpublishedVersionCount = 0 + let versionCount = 0 + + const entityConfig = collectionConfig || globalConfig + const versionsConfig = entityConfig?.versions + const hasLocalizedFields = traverseForLocalizedFields(entityConfig.fields) + const localizedDraftsEnabled = + hasDraftsEnabled(entityConfig) && + typeof payload.config.localization === 'object' && + hasLocalizedFields + + const shouldFetchVersions = Boolean(versionsConfig && docPermissions?.readVersions) + + if (!shouldFetchVersions) { + // Without readVersions permission, determine published status from the _status field + const hasPublishedDoc = localizedDraftsEnabled + ? doc?._status === 'published' + : doc?._status !== 'draft' + + return { + hasPublishedDoc, + mostRecentVersionIsAutosaved, + unpublishedVersionCount, + versionCount, + } + } + + if (collectionConfig) { + if (!id) { + return { + hasPublishedDoc, + mostRecentVersionIsAutosaved, + unpublishedVersionCount, + versionCount, + } + } + + if (hasDraftsEnabled(collectionConfig)) { + // Find out if a published document exists + if (doc?._status === 'published') { + publishedDoc = doc + } else { + publishedDoc = ( + await payload.find({ + collection: collectionConfig.slug, + depth: 0, + limit: 1, + locale: locale || undefined, + pagination: false, + select: { + updatedAt: true, + }, + user, + where: { + and: [ + { + _status: { + equals: 'published', + }, + }, + { + id: { + equals: id, + }, + }, + ], + }, + }) + )?.docs?.[0] + } + + if (publishedDoc) { + hasPublishedDoc = true + } + + if (hasAutosaveEnabled(collectionConfig)) { + const where: Record = { + and: [ + { + parent: { + equals: id, + }, + }, + ], + } + + if (localizedDraftsEnabled) { + where.and.push({ + snapshot: { + not_equals: true, + }, + }) + } + + const mostRecentVersion = await payload.findVersions({ + collection: collectionConfig.slug, + depth: 0, + limit: 1, + locale, + select: { + autosave: true, + }, + user, + where: combineQueries(where, extractAccessFromPermission(docPermissions.readVersions)), + }) + + if ( + mostRecentVersion.docs[0] && + 'autosave' in mostRecentVersion.docs[0] && + mostRecentVersion.docs[0].autosave + ) { + mostRecentVersionIsAutosaved = true + } + } + + if (publishedDoc?.updatedAt) { + ;({ totalDocs: unpublishedVersionCount } = await payload.countVersions({ + collection: collectionConfig.slug, + locale, + user, + where: combineQueries( + { + and: [ + { + parent: { + equals: id, + }, + }, + { + 'version._status': { + equals: 'draft', + }, + }, + { + updatedAt: { + greater_than: publishedDoc.updatedAt, + }, + }, + ], + }, + extractAccessFromPermission(docPermissions.readVersions), + ), + })) + } + } + + const countVersionsWhere: Record = { + and: [ + { + parent: { + equals: id, + }, + }, + ], + } + + if (localizedDraftsEnabled) { + countVersionsWhere.and.push({ + snapshot: { + not_equals: true, + }, + }) + } + + ;({ totalDocs: versionCount } = await payload.countVersions({ + collection: collectionConfig.slug, + locale, + user, + where: combineQueries( + countVersionsWhere, + extractAccessFromPermission(docPermissions.readVersions), + ), + })) + } + + if (globalConfig) { + // Find out if a published document exists + if (hasDraftsEnabled(globalConfig)) { + if (doc?._status === 'published') { + publishedDoc = doc + } else { + publishedDoc = await payload.findGlobal({ + slug: globalConfig.slug, + depth: 0, + locale, + select: { + updatedAt: true, + }, + user, + }) + } + + if (publishedDoc?._status === 'published') { + hasPublishedDoc = true + } + + if (hasAutosaveEnabled(globalConfig)) { + const mostRecentVersion = await payload.findGlobalVersions({ + slug: globalConfig.slug, + limit: 1, + locale, + select: { + autosave: true, + }, + user, + }) + + if ( + mostRecentVersion.docs[0] && + 'autosave' in mostRecentVersion.docs[0] && + mostRecentVersion.docs[0].autosave + ) { + mostRecentVersionIsAutosaved = true + } + } + + if (publishedDoc?.updatedAt) { + ;({ totalDocs: unpublishedVersionCount } = await payload.countGlobalVersions({ + global: globalConfig.slug, + locale, + user, + where: combineQueries( + { + and: [ + { + 'version._status': { + equals: 'draft', + }, + }, + { + updatedAt: { + greater_than: publishedDoc.updatedAt, + }, + }, + ], + }, + extractAccessFromPermission(docPermissions.readVersions), + ), + })) + } + } + + ;({ totalDocs: versionCount } = await payload.countGlobalVersions({ + global: globalConfig.slug, + locale, + user, + where: localizedDraftsEnabled + ? { + snapshot: { + not_equals: true, + }, + } + : undefined, + })) + } + + return { + hasPublishedDoc, + mostRecentVersionIsAutosaved, + unpublishedVersionCount, + versionCount, + } +} diff --git a/packages/ui/src/views/Document/handleServerFunction.tsx b/packages/ui/src/views/Document/handleServerFunction.tsx new file mode 100644 index 00000000000..be97d205f3d --- /dev/null +++ b/packages/ui/src/views/Document/handleServerFunction.tsx @@ -0,0 +1,143 @@ +import type { DocumentPreferences, VisibleEntities } from 'payload' + +import { canAccessAdmin, isEntityHidden } from 'payload' +import { applyLocaleFiltering } from 'payload/shared' + +import type { RenderDocumentServerFunction } from '../../providers/ServerFunctions/index.js' + +import { getClientConfig } from '../../utilities/getClientConfig.js' +import { renderDocument } from './RenderDocument.js' + +export const renderDocumentHandler: RenderDocumentServerFunction = async (args) => { + const { + collectionSlug, + cookies, + disableActions, + docID, + documentSubViewType, + drawerSlug, + initialData, + locale, + notFound, + overrideEntityVisibility, + paramsOverride, + permissions, + redirect, + redirectAfterCreate, + redirectAfterDelete, + redirectAfterDuplicate, + req, + req: { + i18n, + payload, + payload: { config }, + user, + }, + searchParams = {}, + versions, + viewType, + } = args + + await canAccessAdmin({ req }) + + const clientConfig = getClientConfig({ + config, + i18n, + importMap: req.payload.importMap, + user, + }) + await applyLocaleFiltering({ clientConfig, config, req }) + + let preferences: DocumentPreferences + + if (docID) { + const preferencesKey = `${collectionSlug}-edit-${docID}` + + preferences = await payload + .find({ + collection: 'payload-preferences', + depth: 0, + limit: 1, + where: { + and: [ + { + key: { + equals: preferencesKey, + }, + }, + { + 'user.relationTo': { + equals: user.collection, + }, + }, + { + 'user.value': { + equals: user.id, + }, + }, + ], + }, + }) + .then((res) => res.docs[0]?.value as DocumentPreferences) + } + + const visibleEntities: VisibleEntities = { + collections: payload.config.collections + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), + globals: payload.config.globals + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), + } + + const { data, Document } = await renderDocument({ + clientConfig, + disableActions, + documentSubViewType: documentSubViewType ?? 'default', + drawerSlug, + i18n, + importMap: payload.importMap, + initialData, + initPageResult: { + collectionConfig: payload?.collections?.[collectionSlug]?.config, + cookies, + docID, + globalConfig: payload.config.globals.find((global) => global.slug === collectionSlug), + languageOptions: undefined, // TODO + locale, + permissions, + req, + translations: undefined, // TODO + visibleEntities, + }, + locale, + notFound: + notFound ?? + (() => { + throw new Error('notFound not provided') + }), + overrideEntityVisibility, + params: paramsOverride ?? { + segments: ['collections', collectionSlug, String(docID)], + }, + payload, + permissions, + redirect: + redirect ?? + (() => { + throw new Error('redirect not provided') + }), + redirectAfterCreate, + redirectAfterDelete, + redirectAfterDuplicate, + searchParams, + versions, + viewType: viewType ?? 'document', + }) + + return { + data, + Document, + preferences, + } +} diff --git a/packages/ui/src/views/Document/renderDocumentSlots.tsx b/packages/ui/src/views/Document/renderDocumentSlots.tsx new file mode 100644 index 00000000000..91fe6d941fe --- /dev/null +++ b/packages/ui/src/views/Document/renderDocumentSlots.tsx @@ -0,0 +1,243 @@ +import type { + BeforeDocumentControlsServerPropsOnly, + DocumentSlots, + EditMenuItemsServerPropsOnly, + Locale, + PayloadRequest, + PreviewButtonServerPropsOnly, + PublishButtonServerPropsOnly, + SanitizedCollectionConfig, + SanitizedGlobalConfig, + SanitizedPermissions, + SaveButtonServerPropsOnly, + SaveDraftButtonServerPropsOnly, + ServerFunction, + ServerProps, + StaticDescription, + UnpublishButtonServerPropsOnly, + ViewDescriptionClientProps, + ViewDescriptionServerPropsOnly, +} from 'payload' + +import { hasDraftsEnabled } from 'payload/shared' + +import type { WithViewRenderer } from '../../utilities/createViewRenderer.js' + +import { ViewDescription } from '../../elements/ViewDescription/index.js' +import { createViewRenderer } from '../../utilities/createViewRenderer.js' +import { getDocumentPermissions } from './getDocumentPermissions.js' + +export const renderDocumentSlots: (args: { + collectionConfig?: SanitizedCollectionConfig + globalConfig?: SanitizedGlobalConfig + hasSavePermission: boolean + id?: number | string + locale: Locale + permissions: SanitizedPermissions + req: PayloadRequest + viewRenderer?: WithViewRenderer['viewRenderer'] +}) => DocumentSlots = (args) => { + const { + id, + collectionConfig, + globalConfig, + hasSavePermission, + locale, + permissions, + req, + viewRenderer, + } = args + + const components: DocumentSlots = {} as DocumentSlots + const renderView = viewRenderer ?? createViewRenderer({ importMap: req.payload.importMap }) + + const unsavedDraftWithValidations = undefined + + const isPreviewEnabled = collectionConfig?.admin?.preview || globalConfig?.admin?.preview + + const serverProps: ServerProps = { + id, + i18n: req.i18n, + locale, + payload: req.payload, + permissions, + user: req.user, + // TODO: Add remaining serverProps + } + + const BeforeDocumentControls = + collectionConfig?.admin?.components?.edit?.beforeDocumentControls || + globalConfig?.admin?.components?.elements?.beforeDocumentControls + + if (BeforeDocumentControls) { + components.BeforeDocumentControls = renderView({ + Component: BeforeDocumentControls, + serverProps: serverProps satisfies BeforeDocumentControlsServerPropsOnly, + }) + } + + const EditMenuItems = collectionConfig?.admin?.components?.edit?.editMenuItems + + if (EditMenuItems) { + components.EditMenuItems = renderView({ + Component: EditMenuItems, + serverProps: serverProps satisfies EditMenuItemsServerPropsOnly, + }) + } + + const CustomPreviewButton = + collectionConfig?.admin?.components?.edit?.PreviewButton || + globalConfig?.admin?.components?.elements?.PreviewButton + + if (isPreviewEnabled && CustomPreviewButton) { + components.PreviewButton = renderView({ + Component: CustomPreviewButton, + serverProps: serverProps satisfies PreviewButtonServerPropsOnly, + }) + } + + const LivePreview = + collectionConfig?.admin?.components?.views?.edit?.livePreview || + globalConfig?.admin?.components?.views?.edit?.livePreview + + if (LivePreview?.Component) { + components.LivePreview = renderView({ + Component: LivePreview.Component, + serverProps, + }) + } + + const descriptionFromConfig = + collectionConfig?.admin?.description || globalConfig?.admin?.description + + const staticDescription: StaticDescription = + typeof descriptionFromConfig === 'function' + ? descriptionFromConfig({ t: req.i18n.t }) + : descriptionFromConfig + + const CustomDescription = + collectionConfig?.admin?.components?.Description || + globalConfig?.admin?.components?.elements?.Description + + const hasDescription = CustomDescription || staticDescription + + if (hasDescription) { + components.Description = renderView({ + clientProps: { + collectionSlug: collectionConfig?.slug, + description: staticDescription, + } satisfies ViewDescriptionClientProps, + Component: CustomDescription, + Fallback: ViewDescription, + serverProps: serverProps satisfies ViewDescriptionServerPropsOnly, + }) + } + + if (collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts) { + const CustomStatus = + collectionConfig?.admin?.components?.edit?.Status || + globalConfig?.admin?.components?.elements?.Status + + if (CustomStatus) { + components.Status = renderView({ + Component: CustomStatus, + serverProps, + }) + } + } + + if (hasSavePermission) { + if (hasDraftsEnabled(collectionConfig || globalConfig)) { + const CustomPublishButton = + collectionConfig?.admin?.components?.edit?.PublishButton || + globalConfig?.admin?.components?.elements?.PublishButton + + if (CustomPublishButton) { + components.PublishButton = renderView({ + Component: CustomPublishButton, + serverProps: serverProps satisfies PublishButtonServerPropsOnly, + }) + } + + const CustomUnpublishButton = + collectionConfig?.admin?.components?.edit?.UnpublishButton || + globalConfig?.admin?.components?.elements?.UnpublishButton + + if (CustomUnpublishButton) { + components.UnpublishButton = renderView({ + Component: CustomUnpublishButton, + serverProps: serverProps satisfies UnpublishButtonServerPropsOnly, + }) + } + + const CustomSaveDraftButton = + collectionConfig?.admin?.components?.edit?.SaveDraftButton || + globalConfig?.admin?.components?.elements?.SaveDraftButton + + const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig) + + if ((draftsEnabled || unsavedDraftWithValidations) && CustomSaveDraftButton) { + components.SaveDraftButton = renderView({ + Component: CustomSaveDraftButton, + serverProps: serverProps satisfies SaveDraftButtonServerPropsOnly, + }) + } + } else { + const CustomSaveButton = + collectionConfig?.admin?.components?.edit?.SaveButton || + globalConfig?.admin?.components?.elements?.SaveButton + + if (CustomSaveButton) { + components.SaveButton = renderView({ + Component: CustomSaveButton, + serverProps: serverProps satisfies SaveButtonServerPropsOnly, + }) + } + } + } + + if (collectionConfig?.upload && collectionConfig?.admin?.components?.edit?.Upload) { + components.Upload = renderView({ + Component: collectionConfig.admin.components.edit.Upload, + serverProps, + }) + } + + if (collectionConfig?.upload && collectionConfig.upload.admin?.components?.controls) { + components.UploadControls = renderView({ + Component: collectionConfig.upload.admin.components.controls, + serverProps, + }) + } + + return components +} + +export const renderDocumentSlotsHandler: ServerFunction<{ + collectionSlug: string + id?: number | string +}> = async (args) => { + const { id, collectionSlug, locale, permissions, req } = args + + const collectionConfig = req.payload.collections[collectionSlug]?.config + + if (!collectionConfig) { + throw new Error(req.t('error:incorrectCollection')) + } + + const { hasSavePermission } = await getDocumentPermissions({ + id, + collectionConfig, + data: {}, + req, + }) + + return renderDocumentSlots({ + id, + collectionConfig, + hasSavePermission, + locale, + permissions, + req, + }) +} diff --git a/packages/ui/src/views/Edit/index.tsx b/packages/ui/src/views/Edit/index.tsx index 9f1cfceeabe..5e31ad82498 100644 --- a/packages/ui/src/views/Edit/index.tsx +++ b/packages/ui/src/views/Edit/index.tsx @@ -2,7 +2,6 @@ import type { ClientUser, DocumentViewClientProps } from 'payload' -import { useRouter, useSearchParams } from 'next/navigation.js' import { formatAdminURL, hasAutosaveEnabled } from 'payload/shared' import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { toast } from 'sonner' @@ -30,6 +29,7 @@ import { useEditDepth } from '../../providers/EditDepth/index.js' import { useLivePreviewContext, usePreviewURL } from '../../providers/LivePreview/context.js' import { OperationProvider } from '../../providers/Operation/index.js' import { useRouteCache } from '../../providers/RouteCache/index.js' +import { useRouter, useSearchParams } from '../../providers/Router/index.js' import { useRouteTransition } from '../../providers/RouteTransition/index.js' import { useServerFunctions } from '../../providers/ServerFunctions/index.js' import { UploadControlsProvider } from '../../providers/UploadControls/index.js' diff --git a/packages/ui/src/views/ForgotPassword/ForgotPasswordForm/index.tsx b/packages/ui/src/views/ForgotPassword/ForgotPasswordForm/index.tsx new file mode 100644 index 00000000000..163d32c1ca8 --- /dev/null +++ b/packages/ui/src/views/ForgotPassword/ForgotPasswordForm/index.tsx @@ -0,0 +1,151 @@ +'use client' + +import type { FormState, PayloadRequest } from 'payload' + +import { email, formatAdminURL, text } from 'payload/shared' +import React, { useState } from 'react' + +import type { FormProps } from '../../../forms/Form/index.js' + +import { EmailField } from '../../../fields/Email/index.js' +import { TextField } from '../../../fields/Text/index.js' +import { Form } from '../../../forms/Form/index.js' +import { FormSubmit } from '../../../forms/Submit/index.js' +import { useConfig } from '../../../providers/Config/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' +// TODO: FormHeader is currently in packages/next/src/elements/FormHeader/ +// It needs to be moved to packages/ui/src/elements/FormHeader/ as a separate step +import { FormHeader } from '../../../elements/FormHeader/index.js' + +export const ForgotPasswordForm: React.FC = () => { + const { config, getEntityConfig } = useConfig() + + const { + admin: { user: userSlug }, + routes: { api: apiRoute }, + } = config + + const { t } = useTranslation() + const [hasSubmitted, setHasSubmitted] = useState(false) + const collectionConfig = getEntityConfig({ collectionSlug: userSlug }) + const loginWithUsername = collectionConfig?.auth?.loginWithUsername + + const handleResponse: FormProps['handleResponse'] = (res, successToast, errorToast) => { + res + .json() + .then(() => { + setHasSubmitted(true) + successToast(t('general:submissionSuccessful')) + }) + .catch(() => { + errorToast( + loginWithUsername + ? t('authentication:usernameNotValid') + : t('authentication:emailNotValid'), + ) + }) + } + + const initialState: FormState = loginWithUsername + ? { + username: { + initialValue: '', + valid: true, + value: undefined, + }, + } + : { + email: { + initialValue: '', + valid: true, + value: undefined, + }, + } + + if (hasSubmitted) { + return ( + + ) + } + + return ( +
    + + + {loginWithUsername ? ( + + text(value, { + name: 'username', + type: 'text', + blockData: {}, + data: {}, + event: 'onChange', + path: ['username'], + preferences: { fields: {} }, + req: { + payload: { + config, + }, + t, + } as unknown as PayloadRequest, + required: true, + siblingData: {}, + }) + } + /> + ) : ( + + email(value, { + name: 'email', + type: 'email', + blockData: {}, + data: {}, + event: 'onChange', + path: ['email'], + preferences: { fields: {} }, + req: { payload: { config }, t } as unknown as PayloadRequest, + required: true, + siblingData: {}, + }) + } + /> + )} + {t('general:submit')} + + ) +} diff --git a/packages/ui/src/views/ForgotPassword/index.tsx b/packages/ui/src/views/ForgotPassword/index.tsx new file mode 100644 index 00000000000..04cf19f8d25 --- /dev/null +++ b/packages/ui/src/views/ForgotPassword/index.tsx @@ -0,0 +1,78 @@ +import type { AdminViewServerProps } from 'payload' + +import { formatAdminURL } from 'payload/shared' +import React, { Fragment } from 'react' + +import { Button } from '../../elements/Button/index.js' +import { Link } from '../../elements/Link/index.js' +import { Translation } from '../../elements/Translation/index.js' +// TODO: FormHeader is currently in packages/next/src/elements/FormHeader/ +// It needs to be moved to packages/ui/src/elements/FormHeader/ as a separate step +import { FormHeader } from '../../elements/FormHeader/index.js' +import { ForgotPasswordForm } from './ForgotPasswordForm/index.js' + +export const forgotPasswordBaseClass = 'forgot-password' + +export function ForgotPasswordView({ initPageResult }: AdminViewServerProps) { + const { + req: { + i18n, + payload: { config }, + user, + }, + } = initPageResult + + const { + admin: { + routes: { account: accountRoute, login: loginRoute }, + }, + routes: { admin: adminRoute }, + } = config + + if (user) { + return ( + + ( + + {children} + + ), + }} + i18nKey="authentication:loggedInChangePassword" + t={i18n.t} + /> + } + heading={i18n.t('authentication:alreadyLoggedIn')} + /> + + + ) + } + + return ( + + + + {i18n.t('authentication:backToLogin')} + + + ) +} diff --git a/packages/ui/src/views/List/ListView.tsx b/packages/ui/src/views/List/ListView.tsx new file mode 100644 index 00000000000..d1e17bdf77e --- /dev/null +++ b/packages/ui/src/views/List/ListView.tsx @@ -0,0 +1,19 @@ +import type React from 'react' + +import type { RenderListViewArgs } from './RenderListView.js' + +import { renderListView } from './RenderListView.js' + +export type { RenderListViewArgs } + +/** + * Framework-agnostic ListView server component. + * Wraps renderListView — throws Error('not-found') on error instead of calling framework notFound(). + */ +export const ListView: React.FC = async (args) => { + const { List: RenderedList } = await renderListView({ + ...args, + enableRowSelections: true, + }) + return RenderedList +} diff --git a/packages/ui/src/views/List/RenderListView.tsx b/packages/ui/src/views/List/RenderListView.tsx new file mode 100644 index 00000000000..832215f1c8e --- /dev/null +++ b/packages/ui/src/views/List/RenderListView.tsx @@ -0,0 +1,268 @@ +import type { + AdminViewServerProps, + Column, + ListQuery, + ListViewClientProps, + ListViewServerPropsOnly, + PaginatedDocs, + PayloadComponent, +} from 'payload' + +import React, { Fragment } from 'react' + +import type { WithViewRenderer } from '../../utilities/createViewRenderer.js' + +import { HydrateAuthProvider } from '../../elements/HydrateAuthProvider/index.js' +import { ListQueryProvider } from '../../providers/ListQuery/index.js' +import { createViewRenderer } from '../../utilities/createViewRenderer.js' +import { renderFilters, renderTable } from '../../utilities/renderTable.js' +import { enrichDocsWithVersionStatus } from './enrichDocsWithVersionStatus.js' +import { fetchListViewData } from './fetchListViewData.js' +import { handleGroupBy } from './handleGroupBy.js' +import { DefaultListView } from './index.js' +import { renderListViewSlots } from './renderListViewSlots.js' + +/** + * @internal + */ +export type RenderListViewArgs = { + /** + * Allows providing your own list view component. This will override the default list view component and + * the collection's configured list view component (if any). + */ + ComponentOverride?: + | PayloadComponent + | React.ComponentType + customCellProps?: Record + disableBulkDelete?: boolean + disableBulkEdit?: boolean + disableQueryPresets?: boolean + drawerSlug?: string + enableRowSelections: boolean + overrideEntityVisibility?: boolean + /** + * If not ListQuery is provided, `req.query` will be used. + */ + query?: ListQuery + redirectAfterDelete?: boolean + redirectAfterDuplicate?: boolean + /** + * @experimental This prop is subject to change in future releases. + */ + trash?: boolean +} & AdminViewServerProps & + WithViewRenderer + +/** + * This function is responsible for rendering + * the list view on the server for both: + * - default list view + * - list view within drawers + * + * @internal + */ +export const renderListView = async ( + args: RenderListViewArgs, +): Promise<{ + List: React.ReactNode +}> => { + const { + clientConfig, + ComponentOverride, + customCellProps, + disableBulkDelete, + disableBulkEdit, + disableQueryPresets, + drawerSlug, + enableRowSelections, + initPageResult, + overrideEntityVisibility, + params, + query: queryFromArgs, + searchParams, + trash, + viewRenderer, + viewType, + } = args + + const { + collectionConfig, + collectionConfig: { slug: collectionSlug }, + locale: fullLocale, + permissions, + req, + req: { i18n, payload }, + visibleEntities, + } = initPageResult + + const renderView = viewRenderer ?? createViewRenderer({ importMap: payload.importMap }) + + const listData = await fetchListViewData({ + clientConfig, + collectionSlug, + overrideEntityVisibility, + permissions, + query: queryFromArgs, + req, + searchParams, + trash, + viewType, + visibleEntities, + }) + + const { + collectionPreferences, + columns, + hasCreatePermission, + hasDeletePermission, + hasTrashPermission, + newDocumentURL, + notFoundDocId, + query, + queryPreset, + queryPresetPermissions, + resolvedFilterOptions, + select, + staticDescription, + where, + } = listData + + let { data } = listData + + const clientCollectionConfig = clientConfig.collections.find((c) => c.slug === collectionSlug) + + let Table: React.ReactNode | React.ReactNode[] = null + let columnState: Column[] = [] + + try { + if (listData.isGroupBy) { + ;({ columnState, data, Table } = await handleGroupBy({ + clientCollectionConfig, + clientConfig, + collectionConfig, + collectionSlug, + columns, + customCellProps, + drawerSlug, + enableRowSelections, + fieldPermissions: permissions?.collections?.[collectionSlug]?.fields, + query, + req, + select, + trash, + user: req.user, + viewType, + where, + })) + + data = await enrichDocsWithVersionStatus({ + collectionConfig, + data, + req, + }) + } else { + ;({ columnState, Table } = renderTable({ + clientCollectionConfig, + collectionConfig, + columns, + customCellProps, + data, + drawerSlug, + enableRowSelections, + fieldPermissions: permissions?.collections?.[collectionSlug]?.fields, + i18n: req.i18n, + orderableFieldName: listData.orderableFieldName, + payload: req.payload, + query, + req, + useAsTitle: collectionConfig.admin.useAsTitle, + viewType, + })) + } + } catch (err) { + if ((err as { name?: string }).name !== 'QueryError') { + req.payload.logger.error({ + err, + msg: `There was an error building the list view table for collection ${collectionSlug}`, + }) + throw err + } + } + + const renderedFilters = renderFilters(collectionConfig.fields, req.payload.importMap) + + const serverProps: ListViewServerPropsOnly = { + collectionConfig, + data, + i18n, + limit: query.limit, + listPreferences: collectionPreferences, + listSearchableFields: collectionConfig.admin.listSearchableFields, + locale: fullLocale, + params, + payload, + permissions, + searchParams, + user: req.user, + } + + const listViewSlots = renderListViewSlots({ + clientProps: { + collectionSlug, + hasCreatePermission, + hasDeletePermission, + hasTrashPermission, + newDocumentURL, + }, + collectionConfig, + description: staticDescription, + notFoundDocId, + payload, + serverProps, + viewRenderer: renderView, + }) + + const isInDrawer = Boolean(drawerSlug) + + return { + List: ( + + + + {renderView({ + clientProps: { + ...listViewSlots, + collectionSlug, + columnState, + disableBulkDelete, + disableBulkEdit: collectionConfig.disableBulkEdit ?? disableBulkEdit, + disableQueryPresets, + enableRowSelections, + hasCreatePermission, + hasDeletePermission, + hasTrashPermission, + listPreferences: collectionPreferences, + newDocumentURL, + queryPreset, + queryPresetPermissions, + renderedFilters, + resolvedFilterOptions, + Table, + viewType, + } satisfies ListViewClientProps, + Component: + ComponentOverride ?? collectionConfig?.admin?.components?.views?.list?.Component, + Fallback: DefaultListView, + serverProps, + })} + + + ), + } +} diff --git a/packages/ui/src/views/List/createSerializableValue.ts b/packages/ui/src/views/List/createSerializableValue.ts new file mode 100644 index 00000000000..a6932813a04 --- /dev/null +++ b/packages/ui/src/views/List/createSerializableValue.ts @@ -0,0 +1,13 @@ +// Helper function to create serializable value for client components +export const createSerializableValue = (value: any): string => { + if (value === null || value === undefined) { + return 'null' + } + if (typeof value === 'object' && value?.relationTo && value?.value) { + return `${value.relationTo}:${value.value}` + } + if (typeof value === 'object' && value?.id) { + return String(value.id) + } + return String(value) +} diff --git a/packages/ui/src/views/List/enrichDocsWithVersionStatus.ts b/packages/ui/src/views/List/enrichDocsWithVersionStatus.ts new file mode 100644 index 00000000000..ff1973ebbfe --- /dev/null +++ b/packages/ui/src/views/List/enrichDocsWithVersionStatus.ts @@ -0,0 +1,117 @@ +import type { PaginatedDocs, PayloadRequest, SanitizedCollectionConfig } from 'payload' + +/** + * Enriches list view documents with correct draft status display. + * When draft=true is used in the query, Payload returns the latest draft version if it exists. + * This function checks if draft documents also have a published version to determine "changed" status. + * + * Performance: Uses a single query to find all documents with "changed" status instead of N queries. + */ +export async function enrichDocsWithVersionStatus({ + collectionConfig, + data, + req, +}: { + collectionConfig: SanitizedCollectionConfig + data: PaginatedDocs + req: PayloadRequest +}): Promise { + const draftsEnabled = collectionConfig?.versions?.drafts + + if (!draftsEnabled || !data?.docs?.length) { + return data + } + + // Find all draft documents + // When querying with draft:true, we get the latest draft if it exists + // We need to check if these drafts have a published version + const draftDocs = data.docs.filter((doc) => doc._status === 'draft') + + if (draftDocs.length === 0) { + return data + } + + const draftDocIds = draftDocs.map((doc) => doc.id).filter(Boolean) + + if (draftDocIds.length === 0) { + return data + } + + // OPTIMIZATION: Single query to find all document IDs that have BOTH: + // 1. A draft version (latest=true, _status='draft') + // 2. A published version (_status='published') + // These are the documents with "changed" status + try { + // TODO: This could be more efficient with a findDistinctVersions() API: + // const { values } = await req.payload.findDistinctVersions({ + // collection: collectionConfig.slug, + // field: 'parent', + // where: { + // and: [ + // { parent: { in: draftDocIds } }, + // { 'version._status': { equals: 'published' } }, + // ], + // }, + // }) + // const hasPublishedVersionSet = new Set(values) + // + // For now, we query all published versions but only select the 'parent' field + // to minimize data transfer, then deduplicate with a Set + const publishedVersions = await req.payload.findVersions({ + collection: collectionConfig.slug, + depth: 0, + limit: 0, + pagination: false, + select: { + parent: true, + }, + where: { + and: [ + { + parent: { + in: draftDocIds, + }, + }, + { + 'version._status': { + equals: 'published', + }, + }, + ], + }, + }) + + // Create a Set of document IDs that have published versions + const hasPublishedVersionSet = new Set( + publishedVersions.docs.map((version) => version.parent).filter(Boolean), + ) + + // Enrich documents with display status + const enrichedDocs = data.docs.map((doc) => { + // If it's a draft and has a published version, show "changed" + if (doc._status === 'draft' && hasPublishedVersionSet.has(doc.id)) { + return { + ...doc, + _displayStatus: 'changed' as const, + } + } + + return { + ...doc, + _displayStatus: doc._status as 'draft' | 'published', + } + }) + + return { + ...data, + docs: enrichedDocs, + } + } catch (error) { + // If there's an error querying versions, just return the original data + req.payload.logger.error({ + err: error, + msg: `Error checking version status for collection ${collectionConfig.slug}`, + }) + return data + } +} diff --git a/packages/ui/src/views/List/extractRelationshipDisplayValue.ts b/packages/ui/src/views/List/extractRelationshipDisplayValue.ts new file mode 100644 index 00000000000..ee97d7ff837 --- /dev/null +++ b/packages/ui/src/views/List/extractRelationshipDisplayValue.ts @@ -0,0 +1,25 @@ +import type { ClientCollectionConfig, ClientConfig } from 'payload' + +// Helper function to extract display value from relationship +export const extractRelationshipDisplayValue = ( + relationship: any, + clientConfig: ClientConfig, + relationshipConfig?: ClientCollectionConfig, +): string => { + if (!relationship) { + return '' + } + + // Handle polymorphic relationships + if (typeof relationship === 'object' && relationship?.relationTo && relationship?.value) { + const config = clientConfig.collections.find((c) => c.slug === relationship.relationTo) + return relationship.value?.[config?.admin?.useAsTitle || 'id'] || '' + } + + // Handle regular relationships + if (typeof relationship === 'object' && relationship?.id) { + return relationship[relationshipConfig?.admin?.useAsTitle || 'id'] || '' + } + + return String(relationship) +} diff --git a/packages/ui/src/views/List/extractValueOrRelationshipID.ts b/packages/ui/src/views/List/extractValueOrRelationshipID.ts new file mode 100644 index 00000000000..17e6df50ee0 --- /dev/null +++ b/packages/ui/src/views/List/extractValueOrRelationshipID.ts @@ -0,0 +1,21 @@ +// Helper function to extract value or relationship ID for database queries +export const extractValueOrRelationshipID = (relationship: any): any => { + if (!relationship || typeof relationship !== 'object') { + return relationship + } + + // For polymorphic relationships, preserve structure but ensure IDs are strings + if (relationship?.relationTo && relationship?.value) { + return { + relationTo: relationship.relationTo, + value: String(relationship.value?.id || relationship.value), + } + } + + // For regular relationships, extract ID + if (relationship?.id) { + return String(relationship.id) + } + + return relationship +} diff --git a/packages/ui/src/views/List/fetchListViewData.ts b/packages/ui/src/views/List/fetchListViewData.ts new file mode 100644 index 00000000000..60cf0cadfbc --- /dev/null +++ b/packages/ui/src/views/List/fetchListViewData.ts @@ -0,0 +1,339 @@ +import type { + ClientConfig, + CollectionPreferences, + ColumnPreference, + ListQuery, + PaginatedDocs, + PayloadRequest, + QueryPreset, + ResolvedFilterOptions, + SanitizedCollectionConfig, + SanitizedCollectionPermission, + SanitizedPermissions, + SelectType, + StaticDescription, + ViewTypes, + VisibleEntities, + Where, +} from 'payload' + +import { + appendUploadSelectFields, + combineWhereConstraints, + formatAdminURL, + isNumber, + mergeListSearchAndWhere, + transformColumnsToPreferences, + transformColumnsToSearchParams, +} from 'payload/shared' + +import { getColumns } from '../../utilities/getColumns.js' +import { upsertPreferences } from '../../utilities/upsertPreferences.js' +import { getDocumentPermissions } from '../Document/getDocumentPermissions.js' +import { enrichDocsWithVersionStatus } from './enrichDocsWithVersionStatus.js' +import { resolveAllFilterOptions } from './resolveAllFilterOptions.js' +import { transformColumnsToSelect } from './transformColumnsToSelect.js' + +export type FetchListViewDataArgs = { + clientConfig: ClientConfig + collectionSlug: string + overrideEntityVisibility?: boolean + permissions: SanitizedPermissions + query?: ListQuery + req: PayloadRequest + searchParams?: Record + trash?: boolean + viewType?: ViewTypes + visibleEntities: VisibleEntities +} + +/** + * Serializable data result from the list view data-fetching phase. + * Contains no React nodes — safe to serialize through JSON / TanStack loaders. + */ +export type ListViewData = { + collectionPreferences: CollectionPreferences + collectionSlug: string + columns: ColumnPreference[] + data: PaginatedDocs + hasCreatePermission: boolean + hasDeletePermission: boolean + hasTrashPermission: boolean + isGroupBy: boolean + newDocumentURL: string + notFoundDocId: null | string + orderableFieldName: string | undefined + query: ListQuery + queryPreset: QueryPreset | undefined + queryPresetPermissions: SanitizedCollectionPermission | undefined + resolvedFilterOptions: Map + select: SelectType | undefined + staticDescription: StaticDescription + viewType: undefined | ViewTypes + where: Where +} + +/** + * Extracts the data-fetching logic from the list view builder. + * + * Both Next RSC (`renderListView`) and TanStack loaders (`getPageState`) + * call this to obtain the data the list view needs before any JSX rendering. + * + * For groupBy queries, `data` will be the default empty PaginatedDocs because + * `handleGroupBy` performs its own data fetching alongside table rendering. + */ +export async function fetchListViewData(args: FetchListViewDataArgs): Promise { + const { + clientConfig, + collectionSlug, + overrideEntityVisibility, + permissions, + query: queryFromArgs, + req, + searchParams, + trash, + viewType, + visibleEntities, + } = args + + const { + i18n, + payload, + payload: { config }, + query: queryFromReq, + user, + } = req + + const { + routes: { admin: adminRoute }, + } = config + + const collectionConfig: SanitizedCollectionConfig | undefined = + payload.collections[collectionSlug]?.config + + if ( + !collectionConfig || + !permissions?.collections?.[collectionSlug]?.read || + (!visibleEntities.collections.includes(collectionSlug) && !overrideEntityVisibility) + ) { + throw new Error('not-found') + } + + const query: ListQuery = queryFromArgs || queryFromReq + + const columnsFromQuery: ColumnPreference[] = transformColumnsToPreferences(query?.columns) + + query.queryByGroup = + query?.queryByGroup && typeof query.queryByGroup === 'string' + ? JSON.parse(query.queryByGroup) + : query?.queryByGroup + + const collectionPreferences = await upsertPreferences({ + key: `collection-${collectionSlug}`, + req, + value: { + columns: columnsFromQuery, + groupBy: query?.groupBy, + limit: isNumber(query?.limit) ? Number(query.limit) : undefined, + preset: query?.preset, + sort: query?.sort as string, + }, + }) + + let queryPreset: QueryPreset | undefined + let queryPresetPermissions: SanitizedCollectionPermission | undefined + + if (collectionPreferences?.preset) { + try { + queryPreset = (await payload.findByID({ + id: collectionPreferences?.preset, + collection: 'payload-query-presets', + depth: 0, + overrideAccess: false, + user, + })) as QueryPreset + + if (queryPreset) { + queryPresetPermissions = ( + await getDocumentPermissions({ + id: queryPreset.id, + collectionConfig: req.payload.collections['payload-query-presets'].config, + data: queryPreset, + req, + }) + )?.docPermissions + } + } catch (err) { + req.payload.logger.error(`Error fetching query preset or preset permissions: ${err}`) + } + } + + query.preset = queryPreset?.id + if (queryPreset?.where && !query.where) { + query.where = queryPreset.where + } + query.groupBy = query.groupBy ?? queryPreset?.groupBy ?? collectionPreferences?.groupBy + + const columnPreference = query.columns + ? transformColumnsToPreferences(query.columns) + : (queryPreset?.columns ?? collectionPreferences?.columns) + query.columns = transformColumnsToSearchParams(columnPreference) + + query.page = isNumber(query?.page) ? Number(query.page) : 0 + + query.limit = collectionPreferences?.limit || collectionConfig.admin.pagination.defaultLimit + + query.sort = + collectionPreferences?.sort || + (typeof collectionConfig.defaultSort === 'string' ? collectionConfig.defaultSort : undefined) + + const baseFilterConstraint = await ( + collectionConfig.admin?.baseFilter ?? collectionConfig.admin?.baseListFilter + )?.({ + limit: query.limit, + page: query.page, + req, + sort: query.sort, + }) + + let where = mergeListSearchAndWhere({ + collectionConfig, + search: typeof query?.search === 'string' ? query.search : undefined, + where: combineWhereConstraints([query?.where, baseFilterConstraint]), + }) + + if (trash === true) { + where = { + and: [ + where, + { + deletedAt: { + exists: true, + }, + }, + ], + } + } + + const isGroupBy = Boolean(collectionConfig.admin.groupBy && query.groupBy) + + let data: PaginatedDocs = { + docs: [], + hasNextPage: false, + hasPrevPage: false, + limit: query.limit, + nextPage: null, + page: 1, + pagingCounter: 0, + prevPage: null, + totalDocs: 0, + totalPages: 0, + } + + const clientCollectionConfig = clientConfig.collections.find((c) => c.slug === collectionSlug) + + const columns = getColumns({ + clientConfig, + collectionConfig: clientCollectionConfig, + collectionSlug, + columns: columnPreference, + i18n, + permissions, + }) + + const select = collectionConfig.admin.enableListViewSelectAPI + ? transformColumnsToSelect(columns) + : undefined + + appendUploadSelectFields({ + collectionConfig, + select, + }) + + if (!isGroupBy) { + try { + data = await req.payload.find({ + collection: collectionSlug, + depth: 0, + draft: true, + fallbackLocale: false, + includeLockStatus: true, + limit: query?.limit ? Number(query.limit) : undefined, + locale: req.locale, + overrideAccess: false, + page: query?.page ? Number(query.page) : undefined, + req, + select, + sort: query?.sort, + trash, + user, + where, + }) + + data = await enrichDocsWithVersionStatus({ + collectionConfig, + data, + req, + }) + } catch (err) { + if ((err as { name?: string }).name !== 'QueryError') { + req.payload.logger.error({ + err, + msg: `There was an error fetching the list view data for collection ${collectionSlug}`, + }) + throw err + } + } + } + + const resolvedFilterOptions = await resolveAllFilterOptions({ + fields: collectionConfig.fields, + req, + }) + + const staticDescription = + typeof collectionConfig.admin.description === 'function' + ? collectionConfig.admin.description({ t: i18n.t }) + : collectionConfig.admin.description + + const newDocumentURL = formatAdminURL({ + adminRoute, + path: `/collections/${collectionSlug}/create`, + }) + + const hasCreatePermission = Boolean(permissions?.collections?.[collectionSlug]?.create) + + const { hasDeletePermission, hasTrashPermission } = await getDocumentPermissions({ + collectionConfig, + data: {}, + req, + }) + + const notFoundDocId = typeof searchParams?.notFound === 'string' ? searchParams.notFound : null + + const orderableFieldName = collectionConfig.orderable === true ? '_order' : undefined + + query.where = query?.where ? JSON.parse(JSON.stringify(query?.where || {})) : undefined + + return { + collectionPreferences, + collectionSlug, + columns, + data, + hasCreatePermission, + hasDeletePermission, + hasTrashPermission, + isGroupBy, + newDocumentURL, + notFoundDocId, + orderableFieldName, + query, + queryPreset, + queryPresetPermissions, + resolvedFilterOptions, + select, + staticDescription, + viewType, + where, + } +} diff --git a/packages/ui/src/views/List/handleGroupBy.ts b/packages/ui/src/views/List/handleGroupBy.ts new file mode 100644 index 00000000000..942900b5fa5 --- /dev/null +++ b/packages/ui/src/views/List/handleGroupBy.ts @@ -0,0 +1,223 @@ +import type { + ClientCollectionConfig, + ClientConfig, + Column, + ListQuery, + PaginatedDocs, + PayloadRequest, + SanitizedCollectionConfig, + SanitizedFieldsPermissions, + SelectType, + ViewTypes, + Where, +} from 'payload' + +import { flattenAllFields } from 'payload' + +import { formatDate } from '../../utilities/formatDocTitle/formatDateTitle.js' +import { renderTable } from '../../utilities/renderTable.js' +import { createSerializableValue } from './createSerializableValue.js' +import { extractRelationshipDisplayValue } from './extractRelationshipDisplayValue.js' +import { extractValueOrRelationshipID } from './extractValueOrRelationshipID.js' + +export const handleGroupBy = async ({ + clientCollectionConfig, + clientConfig, + collectionConfig, + collectionSlug, + columns, + customCellProps, + drawerSlug, + enableRowSelections, + fieldPermissions, + query, + req, + select, + trash = false, + user, + viewType, + where: whereWithMergedSearch, +}: { + clientCollectionConfig: ClientCollectionConfig + clientConfig: ClientConfig + collectionConfig: SanitizedCollectionConfig + collectionSlug: string + columns: any[] + customCellProps?: Record + drawerSlug?: string + enableRowSelections?: boolean + fieldPermissions?: SanitizedFieldsPermissions + query?: ListQuery + req: PayloadRequest + select?: SelectType + trash?: boolean + user: any + viewType?: ViewTypes + where: Where +}): Promise<{ + columnState: Column[] + data: PaginatedDocs + Table: null | React.ReactNode | React.ReactNode[] +}> => { + let Table: React.ReactNode | React.ReactNode[] = null + let columnState: Column[] + + const dataByGroup: Record = {} + + // NOTE: is there a faster/better way to do this? + const flattenedFields = flattenAllFields({ fields: collectionConfig.fields }) + + const groupByFieldPath = query.groupBy.replace(/^-/, '') + + const groupByField = flattenedFields.find((f) => f.name === groupByFieldPath) + + // Set up population for relationships + let populate + + if (groupByField?.type === 'relationship' && groupByField.relationTo) { + const relationTo = Array.isArray(groupByField.relationTo) + ? groupByField.relationTo + : [groupByField.relationTo] + + populate = {} + relationTo.forEach((rel) => { + const config = clientConfig.collections.find((c) => c.slug === rel) + populate[rel] = { [config?.admin?.useAsTitle || 'id']: true } + }) + } + + const distinct = await req.payload.findDistinct({ + collection: collectionSlug, + depth: 1, + field: groupByFieldPath, + limit: query?.limit ? Number(query.limit) : undefined, + locale: req.locale, + overrideAccess: false, + page: query?.page ? Number(query.page) : undefined, + populate, + req, + sort: query?.groupBy, + trash, + where: whereWithMergedSearch, + }) + + const data = { + ...distinct, + docs: distinct.values?.map(() => ({})) || [], + values: undefined, + } + + await Promise.all( + (distinct.values || []).map(async (distinctValue, i) => { + const potentiallyPopulatedRelationship = distinctValue[groupByFieldPath] + + // Extract value or relationship ID for database query + const valueOrRelationshipID = extractValueOrRelationshipID(potentiallyPopulatedRelationship) + + const groupData = await req.payload.find({ + collection: collectionSlug, + depth: 0, + draft: true, + fallbackLocale: false, + includeLockStatus: true, + limit: query?.queryByGroup?.[valueOrRelationshipID]?.limit + ? Number(query.queryByGroup[valueOrRelationshipID].limit) + : undefined, + locale: req.locale, + overrideAccess: false, + page: query?.queryByGroup?.[valueOrRelationshipID]?.page + ? Number(query.queryByGroup[valueOrRelationshipID].page) + : undefined, + req, + // Note: if we wanted to enable table-by-table sorting, we could use this: + // sort: query?.queryByGroup?.[valueOrRelationshipID]?.sort, + select, + sort: query?.sort, + trash, + user, + where: { + ...(whereWithMergedSearch || {}), + [groupByFieldPath]: { + equals: valueOrRelationshipID, + }, + }, + }) + + // Extract heading + let heading: string + + if (potentiallyPopulatedRelationship === null) { + heading = req.i18n.t('general:noValue') + } else if (groupByField?.type === 'relationship') { + const relationshipConfig = Array.isArray(groupByField.relationTo) + ? undefined + : clientConfig.collections.find((c) => c.slug === groupByField.relationTo) + heading = extractRelationshipDisplayValue( + potentiallyPopulatedRelationship, + clientConfig, + relationshipConfig, + ) + } else if (groupByField?.type === 'date') { + heading = formatDate({ + date: String(valueOrRelationshipID), + i18n: req.i18n, + pattern: clientConfig.admin.dateFormat, + }) + } else if (groupByField?.type === 'checkbox') { + if (valueOrRelationshipID === true) { + heading = req.i18n.t('general:true') + } + if (valueOrRelationshipID === false) { + heading = req.i18n.t('general:false') + } + } else { + heading = String(valueOrRelationshipID) + } + + // Create serializable value for client + const serializableValue = createSerializableValue(valueOrRelationshipID) + + if (groupData.docs && groupData.docs.length > 0) { + const { columnState: newColumnState, Table: NewTable } = renderTable({ + clientCollectionConfig, + collectionConfig, + columns, + customCellProps, + data: groupData, + drawerSlug, + enableRowSelections, + fieldPermissions, + groupByFieldPath, + groupByValue: serializableValue, + heading: heading || req.i18n.t('general:noValue'), + i18n: req.i18n, + key: `table-${serializableValue}`, + orderableFieldName: collectionConfig.orderable === true ? '_order' : undefined, + payload: req.payload, + query, + useAsTitle: collectionConfig.admin.useAsTitle, + viewType, + }) + + // Only need to set `columnState` once, using the first table's column state + // This will avoid needing to generate column state explicitly for root context that wraps all tables + if (!columnState) { + columnState = newColumnState + } + + if (!Table) { + Table = [] + } + + dataByGroup[serializableValue] = groupData + ;(Table as Array)[i] = NewTable + } + }), + ) + + return { + columnState, + data, + Table, + } +} diff --git a/packages/ui/src/views/List/handleServerFunction.tsx b/packages/ui/src/views/List/handleServerFunction.tsx new file mode 100644 index 00000000000..bf7106a407b --- /dev/null +++ b/packages/ui/src/views/List/handleServerFunction.tsx @@ -0,0 +1,137 @@ +import type { CollectionPreferences, ServerFunction, VisibleEntities } from 'payload' + +import { canAccessAdmin, isEntityHidden, UnauthorizedError } from 'payload' +import { applyLocaleFiltering } from 'payload/shared' + +import type { + RenderListServerFnArgs, + RenderListServerFnReturnType, +} from '../../elements/ListDrawer/types.js' + +import { getClientConfig } from '../../utilities/getClientConfig.js' +import { renderListView } from './RenderListView.js' + +export const renderListHandler: ServerFunction< + RenderListServerFnArgs, + Promise +> = async (args) => { + const { + collectionSlug, + cookies, + disableActions, + disableBulkDelete, + disableBulkEdit, + disableQueryPresets, + drawerSlug, + enableRowSelections, + locale, + overrideEntityVisibility, + permissions, + query, + redirectAfterDelete, + redirectAfterDuplicate, + req, + req: { + i18n, + payload, + payload: { config }, + user, + }, + searchParams, + trash, + viewType, + } = args + + if (!req.user) { + throw new UnauthorizedError() + } + + await canAccessAdmin({ req }) + + const clientConfig = getClientConfig({ + config, + i18n, + importMap: payload.importMap, + user, + }) + await applyLocaleFiltering({ clientConfig, config, req }) + + const preferencesKey = `collection-${collectionSlug}` + + const preferences = await payload + .find({ + collection: 'payload-preferences', + depth: 0, + limit: 1, + where: { + and: [ + { + key: { + equals: preferencesKey, + }, + }, + { + 'user.relationTo': { + equals: user.collection, + }, + }, + { + 'user.value': { + equals: user.id, + }, + }, + ], + }, + }) + .then((res) => res.docs[0]?.value as CollectionPreferences) + + const visibleEntities: VisibleEntities = { + collections: payload.config.collections + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), + globals: payload.config.globals + .map(({ slug, admin: { hidden } }) => (!isEntityHidden({ hidden, user }) ? slug : null)) + .filter(Boolean), + } + + const { List } = await renderListView({ + clientConfig, + disableActions, + disableBulkDelete, + disableBulkEdit, + disableQueryPresets, + drawerSlug, + enableRowSelections, + i18n, + importMap: payload.importMap, + initPageResult: { + collectionConfig: payload?.collections?.[collectionSlug]?.config, + cookies, + globalConfig: payload.config.globals.find((global) => global.slug === collectionSlug), + languageOptions: undefined, // TODO + locale, + permissions, + req, + translations: undefined, // TODO + visibleEntities, + }, + locale, + overrideEntityVisibility, + params: { + segments: ['collections', collectionSlug], + }, + payload, + permissions, + query, + redirectAfterDelete, + redirectAfterDuplicate, + searchParams: searchParams ?? {}, + trash, + viewType: viewType ?? 'list', + }) + + return { + List, + preferences, + } +} diff --git a/packages/ui/src/views/List/index.tsx b/packages/ui/src/views/List/index.tsx index 661ca384068..246ad010fdd 100644 --- a/packages/ui/src/views/List/index.tsx +++ b/packages/ui/src/views/List/index.tsx @@ -3,7 +3,6 @@ import type { ListViewClientProps } from 'payload' import { getTranslation } from '@payloadcms/translations' -import { useRouter } from 'next/navigation.js' import { formatAdminURL, formatFilesize } from 'payload/shared' import React, { Fragment, useEffect } from 'react' @@ -24,6 +23,7 @@ import { ViewDescription } from '../../elements/ViewDescription/index.js' import { useControllableState } from '../../hooks/useControllableState.js' import { useConfig } from '../../providers/Config/index.js' import { useListQuery } from '../../providers/ListQuery/index.js' +import { useRouter } from '../../providers/Router/index.js' import { SelectionProvider } from '../../providers/Selection/index.js' import { TableColumnsProvider } from '../../providers/TableColumns/index.js' import { useTranslation } from '../../providers/Translation/index.js' diff --git a/packages/ui/src/views/List/renderListViewSlots.tsx b/packages/ui/src/views/List/renderListViewSlots.tsx new file mode 100644 index 00000000000..f47bf70c2fc --- /dev/null +++ b/packages/ui/src/views/List/renderListViewSlots.tsx @@ -0,0 +1,122 @@ +import type { + AfterListClientProps, + AfterListTableClientProps, + AfterListTableServerPropsOnly, + BeforeListClientProps, + BeforeListServerPropsOnly, + BeforeListTableClientProps, + BeforeListTableServerPropsOnly, + ListViewServerPropsOnly, + ListViewSlots, + ListViewSlotSharedClientProps, + Payload, + SanitizedCollectionConfig, + StaticDescription, + ViewDescriptionClientProps, + ViewDescriptionServerPropsOnly, +} from 'payload' + +import React from 'react' + +import type { WithViewRenderer } from '../../utilities/createViewRenderer.js' + +import { Banner } from '../../elements/Banner/index.js' +import { createViewRenderer } from '../../utilities/createViewRenderer.js' + +type Args = { + clientProps: ListViewSlotSharedClientProps + collectionConfig: SanitizedCollectionConfig + description?: StaticDescription + notFoundDocId?: null | string + payload: Payload + serverProps: ListViewServerPropsOnly + viewRenderer?: WithViewRenderer['viewRenderer'] +} + +export const renderListViewSlots = ({ + clientProps, + collectionConfig, + description, + notFoundDocId, + payload, + serverProps, + viewRenderer, +}: Args): ListViewSlots => { + const result: ListViewSlots = {} as ListViewSlots + const renderView = viewRenderer ?? createViewRenderer({ importMap: payload.importMap }) + + if (collectionConfig.admin.components?.afterList) { + result.AfterList = renderView({ + clientProps: clientProps satisfies AfterListClientProps, + Component: collectionConfig.admin.components.afterList, + serverProps: serverProps satisfies AfterListTableServerPropsOnly, + }) + } + + const listMenuItems = collectionConfig.admin.components?.listMenuItems + + if (Array.isArray(listMenuItems)) { + result.listMenuItems = [ + renderView({ + clientProps, + Component: listMenuItems, + serverProps, + }), + ] + } + + if (collectionConfig.admin.components?.afterListTable) { + result.AfterListTable = renderView({ + clientProps: clientProps satisfies AfterListTableClientProps, + Component: collectionConfig.admin.components.afterListTable, + serverProps: serverProps satisfies AfterListTableServerPropsOnly, + }) + } + + if (collectionConfig.admin.components?.beforeList) { + result.BeforeList = renderView({ + clientProps: clientProps satisfies BeforeListClientProps, + Component: collectionConfig.admin.components.beforeList, + serverProps: serverProps satisfies BeforeListServerPropsOnly, + }) + } + + // Handle beforeListTable with optional banner + const existingBeforeListTable = collectionConfig.admin.components?.beforeListTable + ? renderView({ + clientProps: clientProps satisfies BeforeListTableClientProps, + Component: collectionConfig.admin.components.beforeListTable, + serverProps: serverProps satisfies BeforeListTableServerPropsOnly, + }) + : null + + // Create banner for document not found + const notFoundBanner = notFoundDocId ? ( + + {serverProps.i18n.t('error:documentNotFound', { id: notFoundDocId })} + + ) : null + + // Combine banner and existing component + if (notFoundBanner || existingBeforeListTable) { + result.BeforeListTable = ( + + {notFoundBanner} + {existingBeforeListTable} + + ) + } + + if (collectionConfig.admin.components?.Description) { + result.Description = renderView({ + clientProps: { + collectionSlug: collectionConfig.slug, + description, + } satisfies ViewDescriptionClientProps, + Component: collectionConfig.admin.components.Description, + serverProps: serverProps satisfies ViewDescriptionServerPropsOnly, + }) + } + + return result +} diff --git a/packages/ui/src/views/List/resolveAllFilterOptions.ts b/packages/ui/src/views/List/resolveAllFilterOptions.ts new file mode 100644 index 00000000000..a0331874fbc --- /dev/null +++ b/packages/ui/src/views/List/resolveAllFilterOptions.ts @@ -0,0 +1,86 @@ +import type { Field, PayloadRequest, ResolvedFilterOptions } from 'payload' + +import { + fieldAffectsData, + fieldHasSubFields, + fieldIsHiddenOrDisabled, + tabHasName, +} from 'payload/shared' + +import { resolveFilterOptions } from '../../utilities/resolveFilterOptions.js' + +export const resolveAllFilterOptions = async ({ + fields, + pathPrefix, + req, + result, +}: { + fields: Field[] + pathPrefix?: string + req: PayloadRequest + result?: Map +}): Promise> => { + const resolvedFilterOptions = !result ? new Map() : result + + await Promise.all( + fields.map(async (field) => { + if (fieldIsHiddenOrDisabled(field)) { + return + } + + const fieldPath = fieldAffectsData(field) + ? pathPrefix + ? `${pathPrefix}.${field.name}` + : field.name + : pathPrefix + + if ( + (field.type === 'relationship' || field.type === 'upload') && + 'filterOptions' in field && + field.filterOptions + ) { + const options = await resolveFilterOptions(field.filterOptions, { + id: undefined, + blockData: undefined, + data: {}, // use empty object to prevent breaking queries when accessing properties of `data` + relationTo: field.relationTo, + req, + siblingData: {}, // use empty object to prevent breaking queries when accessing properties of `siblingData` + user: req.user, + }) + + resolvedFilterOptions.set(fieldPath, options) + } + + if (fieldHasSubFields(field)) { + await resolveAllFilterOptions({ + fields: field.fields, + pathPrefix: fieldPath, + req, + result: resolvedFilterOptions, + }) + } + + if (field.type === 'tabs') { + await Promise.all( + field.tabs.map(async (tab) => { + const tabPath = tabHasName(tab) + ? fieldPath + ? `${fieldPath}.${tab.name}` + : tab.name + : fieldPath + + await resolveAllFilterOptions({ + fields: tab.fields, + pathPrefix: tabPath, + req, + result: resolvedFilterOptions, + }) + }), + ) + } + }), + ) + + return resolvedFilterOptions +} diff --git a/packages/ui/src/views/List/transformColumnsToSelect.ts b/packages/ui/src/views/List/transformColumnsToSelect.ts new file mode 100644 index 00000000000..1f268884da7 --- /dev/null +++ b/packages/ui/src/views/List/transformColumnsToSelect.ts @@ -0,0 +1,14 @@ +import type { ColumnPreference, SelectType } from 'payload' + +import { unflatten } from 'payload/shared' + +export const transformColumnsToSelect = (columns: ColumnPreference[]): SelectType => { + const columnsSelect = columns.reduce((acc, column) => { + if (column.active) { + acc[column.accessor] = true + } + return acc + }, {} as SelectType) + + return unflatten(columnsSelect) +} diff --git a/packages/ui/src/views/Login/LoginField/index.tsx b/packages/ui/src/views/Login/LoginField/index.tsx new file mode 100644 index 00000000000..92fc4c689a9 --- /dev/null +++ b/packages/ui/src/views/Login/LoginField/index.tsx @@ -0,0 +1,78 @@ +'use client' +import type { Validate, ValidateOptions } from 'payload' + +import { email, username } from 'payload/shared' +import React from 'react' + +import { EmailField } from '../../../fields/Email/index.js' +import { TextField } from '../../../fields/Text/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' + +export type LoginFieldProps = { + readonly required?: boolean + readonly type: 'email' | 'emailOrUsername' | 'username' + readonly validate?: Validate +} + +export const LoginField: React.FC = ({ type, required = true }) => { + const { t } = useTranslation() + + if (type === 'email') { + return ( + + ) + } + + if (type === 'username') { + return ( + + ) + } + + if (type === 'emailOrUsername') { + return ( + { + const passesUsername = username(value, options) + const passesEmail = email( + value, + options as ValidateOptions, + ) + + if (!passesEmail && !passesUsername) { + return `${t('general:email')}: ${passesEmail} ${t('general:username')}: ${passesUsername}` + } + + return true + }} + /> + ) + } + + return null +} diff --git a/packages/ui/src/views/Login/LoginForm/index.scss b/packages/ui/src/views/Login/LoginForm/index.scss new file mode 100644 index 00000000000..77ba4a0cedc --- /dev/null +++ b/packages/ui/src/views/Login/LoginForm/index.scss @@ -0,0 +1,10 @@ +@layer payload-default { + .login__form { + &__inputWrap { + display: flex; + flex-direction: column; + gap: var(--base); + margin-bottom: calc(var(--base) / 4); + } + } +} diff --git a/packages/ui/src/views/Login/LoginForm/index.tsx b/packages/ui/src/views/Login/LoginForm/index.tsx new file mode 100644 index 00000000000..00ce075b095 --- /dev/null +++ b/packages/ui/src/views/Login/LoginForm/index.tsx @@ -0,0 +1,121 @@ +'use client' + +import React from 'react' + +const baseClass = 'login__form' + +import type { FormState } from 'payload' + +import { formatAdminURL, getLoginOptions, getSafeRedirect } from 'payload/shared' + +import type { UserWithToken } from '../../../providers/Auth/index.js' +import type { LoginFieldProps } from '../LoginField/index.js' + +import { Link } from '../../../elements/Link/index.js' +import { PasswordField } from '../../../fields/Password/index.js' +import { Form } from '../../../forms/Form/index.js' +import { FormSubmit } from '../../../forms/Submit/index.js' +import { useAuth } from '../../../providers/Auth/index.js' +import { useConfig } from '../../../providers/Config/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' +import { LoginField } from '../LoginField/index.js' +import './index.scss' + +export const LoginForm: React.FC<{ + prefillEmail?: string + prefillPassword?: string + prefillUsername?: string + searchParams: { [key: string]: string | string[] | undefined } +}> = ({ prefillEmail, prefillPassword, prefillUsername, searchParams }) => { + const { config, getEntityConfig } = useConfig() + + const { + admin: { + routes: { forgot: forgotRoute }, + user: userSlug, + }, + routes: { admin: adminRoute, api: apiRoute }, + } = config + + const collectionConfig = getEntityConfig({ collectionSlug: userSlug }) + const { auth: authOptions } = collectionConfig + const loginWithUsername = authOptions.loginWithUsername + const { canLoginWithEmail, canLoginWithUsername } = getLoginOptions(loginWithUsername) + + const [loginType] = React.useState(() => { + if (canLoginWithEmail && canLoginWithUsername) { + return 'emailOrUsername' + } + if (canLoginWithUsername) { + return 'username' + } + return 'email' + }) + + const { t } = useTranslation() + const { setUser } = useAuth() + + const initialState: FormState = { + password: { + initialValue: prefillPassword ?? undefined, + valid: true, + value: prefillPassword ?? undefined, + }, + } + + if (loginWithUsername) { + initialState.username = { + initialValue: prefillUsername ?? undefined, + valid: true, + value: prefillUsername ?? undefined, + } + } else { + initialState.email = { + initialValue: prefillEmail ?? undefined, + valid: true, + value: prefillEmail ?? undefined, + } + } + + const handleLogin = (data: UserWithToken) => { + setUser(data) + } + + return ( +
    +
    + + +
    + + {t('authentication:forgotPasswordQuestion')} + + {t('authentication:login')} + + ) +} diff --git a/packages/ui/src/views/Login/index.scss b/packages/ui/src/views/Login/index.scss new file mode 100644 index 00000000000..37721af4335 --- /dev/null +++ b/packages/ui/src/views/Login/index.scss @@ -0,0 +1,10 @@ +@layer payload-default { + .login { + &__brand { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: calc(var(--base) * 2); + } + } +} diff --git a/packages/ui/src/views/Login/index.tsx b/packages/ui/src/views/Login/index.tsx new file mode 100644 index 00000000000..94caf24efec --- /dev/null +++ b/packages/ui/src/views/Login/index.tsx @@ -0,0 +1,104 @@ +import type { InitPageResult, ServerProps } from 'payload' + +import React, { Fragment } from 'react' + +import { RenderServerComponent } from '../../elements/RenderServerComponent/index.js' +import { LoginForm } from './LoginForm/index.js' +import './index.scss' + +export const loginBaseClass = 'login' + +export type LoginViewProps = { + initPageResult: InitPageResult + /** Logo component to render at the top of the login page */ + Logo?: React.ComponentType + params?: { [key: string]: string | string[] | undefined } + searchParams: { [key: string]: string | string[] | undefined } +} + +export function LoginView({ initPageResult, Logo, params, searchParams }: LoginViewProps) { + const { locale, permissions, req } = initPageResult + + const { + i18n, + payload: { config }, + payload, + user, + } = req + + const { + admin: { components: { afterLogin, beforeLogin } = {}, user: userSlug }, + } = config + + const collectionConfig = payload?.collections?.[userSlug]?.config + + const prefillAutoLogin = + typeof config.admin?.autoLogin === 'object' && config.admin?.autoLogin.prefillOnly + + const prefillUsername = + prefillAutoLogin && typeof config.admin?.autoLogin === 'object' + ? config.admin?.autoLogin.username + : undefined + + const prefillEmail = + prefillAutoLogin && typeof config.admin?.autoLogin === 'object' + ? config.admin?.autoLogin.email + : undefined + + const prefillPassword = + prefillAutoLogin && typeof config.admin?.autoLogin === 'object' + ? config.admin?.autoLogin.password + : undefined + + return ( + + {Logo && ( +
    + +
    + )} + {RenderServerComponent({ + Component: beforeLogin, + importMap: payload.importMap, + serverProps: { + i18n, + locale, + params, + payload, + permissions, + searchParams, + user, + } satisfies ServerProps, + })} + {!collectionConfig?.auth?.disableLocalStrategy && ( + + )} + {RenderServerComponent({ + Component: afterLogin, + importMap: payload.importMap, + serverProps: { + i18n, + locale, + params, + payload, + permissions, + searchParams, + user, + } satisfies ServerProps, + })} +     + ) +} diff --git a/packages/ui/src/views/Logout/LogoutClient.tsx b/packages/ui/src/views/Logout/LogoutClient.tsx new file mode 100644 index 00000000000..306a65f0bb9 --- /dev/null +++ b/packages/ui/src/views/Logout/LogoutClient.tsx @@ -0,0 +1,90 @@ +'use client' +import { formatAdminURL } from 'payload/shared' +import React, { useEffect } from 'react' +import { toast } from 'sonner' + +import { Button } from '../../elements/Button/index.js' +import { LoadingOverlay } from '../../elements/Loading/index.js' +import { useAuth } from '../../providers/Auth/index.js' +import { useConfig } from '../../providers/Config/index.js' +import { useRouter } from '../../providers/Router/index.js' +import { useRouteTransition } from '../../providers/RouteTransition/index.js' +import { useTranslation } from '../../providers/Translation/index.js' +import './index.scss' + +const baseClass = 'logout' + +/** + * This component should **just** be the inactivity route and do nothing with logging the user out. + * + * It currently handles too much, the auth provider should just log the user out and then + * we could remove the useEffect in this file. So instead of the logout button + * being an anchor link, it should be a button that calls `logOut` in the provider. + * + * This view is still useful if cookies attempt to refresh and fail, i.e. the user + * is logged out due to inactivity. + */ +export const LogoutClient: React.FC<{ + adminRoute: string + inactivity?: boolean + redirect: string +}> = (props) => { + const { adminRoute, inactivity, redirect } = props + + const { logOut, user } = useAuth() + const { config } = useConfig() + + const { startRouteTransition } = useRouteTransition() + + const isLoggedIn = React.useMemo(() => { + return Boolean(user?.id) + }, [user?.id]) + + const navigatingToLoginRef = React.useRef(false) + + const [loginRoute] = React.useState(() => + formatAdminURL({ + adminRoute, + path: `/login${ + inactivity && redirect && redirect.length > 0 + ? `?redirect=${encodeURIComponent(redirect)}` + : '' + }`, + }), + ) + + const { t } = useTranslation() + const router = useRouter() + + const handleLogOut = React.useCallback(async () => { + if (!navigatingToLoginRef.current) { + navigatingToLoginRef.current = true + await logOut() + toast.success(t('authentication:loggedOutSuccessfully')) + startRouteTransition(() => router.push(loginRoute)) + return + } + }, [logOut, loginRoute, router, startRouteTransition, t]) + + useEffect(() => { + if (isLoggedIn && !inactivity) { + void handleLogOut() + } else if (!navigatingToLoginRef.current) { + navigatingToLoginRef.current = true + startRouteTransition(() => router.push(loginRoute)) + } + }, [handleLogOut, isLoggedIn, loginRoute, router, startRouteTransition, inactivity]) + + if (!isLoggedIn && inactivity) { + return ( +
    +

    {t('authentication:loggedOutInactivity')}

    + +
    + ) + } + + return +} diff --git a/packages/ui/src/views/Logout/index.scss b/packages/ui/src/views/Logout/index.scss new file mode 100644 index 00000000000..dfdaadb504f --- /dev/null +++ b/packages/ui/src/views/Logout/index.scss @@ -0,0 +1,25 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .logout { + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; + + &__wrap { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: base(0.8); + width: 100%; + max-width: base(36); + + & > * { + margin: 0; + } + } + } +} diff --git a/packages/ui/src/views/Logout/index.tsx b/packages/ui/src/views/Logout/index.tsx new file mode 100644 index 00000000000..8cd0dd0ff16 --- /dev/null +++ b/packages/ui/src/views/Logout/index.tsx @@ -0,0 +1,38 @@ +import type { AdminViewServerProps } from 'payload' + +import React from 'react' + +import { LogoutClient } from './LogoutClient.js' +import './index.scss' + +const baseClass = 'logout' + +export const LogoutView: React.FC< + { + inactivity?: boolean + } & AdminViewServerProps +> = ({ inactivity, initPageResult, searchParams }) => { + const { + req: { + payload: { + config: { + routes: { admin: adminRoute }, + }, + }, + }, + } = initPageResult + + return ( +
    + +
    + ) +} + +export function LogoutInactivity(props: AdminViewServerProps) { + return +} diff --git a/packages/ui/src/views/NotFound/index.scss b/packages/ui/src/views/NotFound/index.scss new file mode 100644 index 00000000000..d426819715f --- /dev/null +++ b/packages/ui/src/views/NotFound/index.scss @@ -0,0 +1,57 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .not-found { + margin-top: var(--base); + display: flex; + + & > * { + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } + } + + &__wrap { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: base(0.8); + max-width: base(36); + } + + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } + } + + &__button { + margin: 0; + } + + &--margin-top-large { + margin-top: calc(var(--base) * 2); + } + + @include large-break { + &--margin-top-large { + margin-top: var(--base); + } + } + + @include small-break { + margin-top: calc(var(--base) / 2); + + &--margin-top-large { + margin-top: calc(var(--base) / 2); + } + } + } +} diff --git a/packages/ui/src/views/NotFound/index.tsx b/packages/ui/src/views/NotFound/index.tsx new file mode 100644 index 00000000000..aba2b3a821d --- /dev/null +++ b/packages/ui/src/views/NotFound/index.tsx @@ -0,0 +1,57 @@ +'use client' +import React, { useEffect } from 'react' + +import { Button } from '../../elements/Button/index.js' +import { Gutter } from '../../elements/Gutter/index.js' +import { useStepNav } from '../../elements/StepNav/index.js' +import { useConfig } from '../../providers/Config/index.js' +import { useTranslation } from '../../providers/Translation/index.js' +import './index.scss' + +const baseClass = 'not-found' + +export const NotFoundClient: React.FC<{ + marginTop?: 'large' +}> = (props) => { + const { marginTop = 'large' } = props + + const { setStepNav } = useStepNav() + const { t } = useTranslation() + + const { + config: { + routes: { admin: adminRoute }, + }, + } = useConfig() + + useEffect(() => { + setStepNav([ + { + label: t('general:notFound'), + }, + ]) + }, [setStepNav, t]) + + return ( +
    + +
    +

    {t('general:nothingFound')}

    +

    {t('general:sorryNotFound')}

    +
    + +     +
    + ) +} + +/** Framework-agnostic NotFoundView that renders the NotFound client */ +export function NotFoundView() { + return +} diff --git a/packages/ui/src/views/ResetPassword/ResetPasswordForm/index.tsx b/packages/ui/src/views/ResetPassword/ResetPasswordForm/index.tsx new file mode 100644 index 00000000000..f354b0a39f0 --- /dev/null +++ b/packages/ui/src/views/ResetPassword/ResetPasswordForm/index.tsx @@ -0,0 +1,94 @@ +'use client' +import { type FormState } from 'payload' +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import { ConfirmPasswordField } from '../../../fields/ConfirmPassword/index.js' +import { HiddenField } from '../../../fields/Hidden/index.js' +import { PasswordField } from '../../../fields/Password/index.js' +import { Form } from '../../../forms/Form/index.js' +import { FormSubmit } from '../../../forms/Submit/index.js' +import { useAuth } from '../../../providers/Auth/index.js' +import { useConfig } from '../../../providers/Config/index.js' +import { useRouter } from '../../../providers/Router/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' + +type Args = { + readonly token: string +} + +export const ResetPasswordForm: React.FC = ({ token }) => { + const i18n = useTranslation() + const { + config: { + admin: { + routes: { login: loginRoute }, + user: userSlug, + }, + routes: { admin: adminRoute, api: apiRoute }, + serverURL, + }, + } = useConfig() + + const history = useRouter() + const { fetchFullUser } = useAuth() + + const onSuccess = React.useCallback(async () => { + const user = await fetchFullUser() + if (user) { + history.push(adminRoute) + } else { + history.push( + formatAdminURL({ + adminRoute, + path: loginRoute, + }), + ) + } + }, [adminRoute, fetchFullUser, history, loginRoute]) + + const initialState: FormState = { + 'confirm-password': { + initialValue: '', + valid: false, + value: '', + }, + password: { + initialValue: '', + valid: false, + value: '', + }, + token: { + initialValue: token, + valid: true, + value: token, + }, + } + + return ( +
    +
    + + + +
    + {i18n.t('authentication:resetPassword')} + + ) +} diff --git a/packages/ui/src/views/ResetPassword/index.scss b/packages/ui/src/views/ResetPassword/index.scss new file mode 100644 index 00000000000..2b5ce074799 --- /dev/null +++ b/packages/ui/src/views/ResetPassword/index.scss @@ -0,0 +1,11 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .reset-password__wrap { + .inputWrap { + display: flex; + flex-direction: column; + gap: base(0.8); + } + } +} diff --git a/packages/ui/src/views/ResetPassword/index.tsx b/packages/ui/src/views/ResetPassword/index.tsx new file mode 100644 index 00000000000..2df43d12ec6 --- /dev/null +++ b/packages/ui/src/views/ResetPassword/index.tsx @@ -0,0 +1,84 @@ +import type { AdminViewServerProps } from 'payload' + +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import { Button } from '../../elements/Button/index.js' +import { Link } from '../../elements/Link/index.js' +import { Translation } from '../../elements/Translation/index.js' +// TODO: FormHeader is currently in packages/next/src/elements/FormHeader/ +// It needs to be moved to packages/ui/src/elements/FormHeader/ as a separate step +import { FormHeader } from '../../elements/FormHeader/index.js' +import { ResetPasswordForm } from './ResetPasswordForm/index.js' +import './index.scss' + +export const resetPasswordBaseClass = 'reset-password' + +export function ResetPassword({ initPageResult, params }: AdminViewServerProps) { + const { req } = initPageResult + + const { + segments: [_, token], + } = params + + const { + i18n, + payload: { config }, + user, + } = req + + const { + admin: { + routes: { account: accountRoute, login: loginRoute }, + }, + routes: { admin: adminRoute }, + } = config + + if (user) { + return ( +
    + ( + + {children} + + ), + }} + i18nKey="authentication:loggedInChangePassword" + t={i18n.t} + /> + } + heading={i18n.t('authentication:alreadyLoggedIn')} + /> + +
    + ) + } + + return ( +
    + + + + {i18n.t('authentication:backToLogin')} + +
    + ) +} diff --git a/packages/ui/src/views/Root/RenderRoot.tsx b/packages/ui/src/views/Root/RenderRoot.tsx new file mode 100644 index 00000000000..4d533d35423 --- /dev/null +++ b/packages/ui/src/views/Root/RenderRoot.tsx @@ -0,0 +1,214 @@ +import type { + AdminViewClientProps, + AdminViewServerPropsOnly, + ImportMap, + InitReqResult, + NavPreferences, +} from 'payload' + +import React from 'react' + +import type { ViewComponentRenderer, WithViewRenderer } from '../../utilities/createViewRenderer.js' +import type { RootPageDescriptor } from './getRootPageDescriptor.js' + +import { getNavPrefs } from '../../elements/Nav/getNavPrefs.js' +import { PageConfigProvider } from '../../providers/Config/index.js' +import { ViewRendererProvider } from '../../providers/ViewRenderer/index.js' +import { DefaultTemplate } from '../../templates/Default/index.js' +import { MinimalTemplate } from '../../templates/Minimal/index.js' +import { createViewRenderer } from '../../utilities/createViewRenderer.js' +import { getRootPageDescriptor } from './getRootPageDescriptor.js' + +export type RenderRootPageArgs = { + importMap: ImportMap + initPageResult: InitReqResult + /** Framework-specific notFound — throws framework error */ + notFound: () => never + /** Framework-specific redirect — throws framework error */ + redirect: (url: string) => never + searchParams: { [key: string]: string | string[] } + segments: string[] + viewRenderer?: ViewComponentRenderer +} + +export type RenderRootPageFromDescriptorArgs = { + descriptor: RootPageDescriptor + navPreferences?: NavPreferences +} & RenderRootPageArgs + +export const renderRootPageFromDescriptor = ({ + descriptor, + importMap, + initPageResult, + navPreferences, + notFound, + redirect, + searchParams, + segments, + viewRenderer, +}: RenderRootPageFromDescriptorArgs): React.ReactNode => { + const { + cookies, + locale, + permissions, + req, + req: { payload }, + } = initPageResult + const { + browseByFolderSlugs, + clientConfig, + collectionConfig, + DefaultView, + documentSubViewType, + globalConfig, + routeParams, + templateClassName, + templateType, + viewActions, + viewType, + visibleEntities, + } = descriptor + + const folderID = routeParams.folderID + + const params = { segments } + const resolvedViewRenderer = viewRenderer ?? createViewRenderer({ importMap }) + type RootViewServerProps = { + notFound: () => never + payload: typeof req.payload + redirect: (url: string) => never + searchParams: { [key: string]: string | string[] } + } & AdminViewServerPropsOnly & + WithViewRenderer + + const RenderedView = resolvedViewRenderer({ + clientProps: { + browseByFolderSlugs, + clientConfig, + documentSubViewType, + viewType, + } satisfies AdminViewClientProps, + Component: DefaultView.payloadComponent, + Fallback: DefaultView.Component, + serverProps: { + clientConfig, + collectionConfig, + docID: routeParams.id, + folderID, + globalConfig, + i18n: req.i18n, + importMap, + initPageResult: { + collectionConfig, + cookies, + docID: routeParams.id, + globalConfig, + languageOptions: Object.entries(req.payload.config.i18n.supportedLanguages || {}).reduce( + (acc, [language, languageConfig]) => { + if (Object.keys(req.payload.config.i18n.supportedLanguages).includes(language)) { + acc.push({ + label: languageConfig.translations.general.thisLanguage, + value: language, + }) + } + + return acc + }, + [], + ), + locale, + permissions, + req, + translations: req.i18n.translations, + visibleEntities, + }, + // Inject framework-specific navigation callbacks so DocumentView and others can use them + notFound, + params, + payload: req.payload, + redirect, + searchParams, + viewActions, + viewRenderer: resolvedViewRenderer, + } satisfies RootViewServerProps, + }) + + return ( + + + {!templateType && {RenderedView}} + {templateType === 'minimal' && ( + {RenderedView} + )} + {templateType === 'default' && ( + + {RenderedView} + + )} + + + ) +} + +/** + * Framework-agnostic root page renderer. + * Receives a pre-computed initPageResult and navigation callbacks from the framework adapter. + */ +export const renderRootPage = async ({ + importMap, + initPageResult, + notFound, + redirect, + searchParams, + segments, + viewRenderer, +}: RenderRootPageArgs): Promise => { + const rootPageResult = await getRootPageDescriptor({ + importMap, + initPageResult, + searchParams, + segments, + }) + + if (rootPageResult.type === 'not-found') { + return notFound() + } + + if (rootPageResult.type === 'redirect') { + return redirect(rootPageResult.url) + } + + const navPreferences = await getNavPrefs(initPageResult.req) + + return renderRootPageFromDescriptor({ + descriptor: rootPageResult.descriptor, + importMap, + initPageResult, + navPreferences, + notFound, + redirect, + searchParams, + segments, + viewRenderer, + }) +} diff --git a/packages/ui/src/views/Root/attachViewActions.ts b/packages/ui/src/views/Root/attachViewActions.ts new file mode 100644 index 00000000000..d9f7e1be1e4 --- /dev/null +++ b/packages/ui/src/views/Root/attachViewActions.ts @@ -0,0 +1,44 @@ +import type { + CustomComponent, + EditConfig, + SanitizedCollectionConfig, + SanitizedGlobalConfig, +} from 'payload' + +export function getViewActions({ + editConfig, + viewKey, +}: { + editConfig: EditConfig + viewKey: keyof EditConfig +}): CustomComponent[] { + if (editConfig && viewKey in editConfig && 'actions' in editConfig[viewKey]) { + return editConfig[viewKey].actions ?? [] + } + + return [] +} + +export function getSubViewActions({ + collectionOrGlobal, + viewKeyArg, +}: { + collectionOrGlobal: SanitizedCollectionConfig | SanitizedGlobalConfig + viewKeyArg?: keyof EditConfig +}): CustomComponent[] { + if (collectionOrGlobal?.admin?.components?.views?.edit) { + let viewKey = viewKeyArg || 'default' + if ('root' in collectionOrGlobal.admin.components.views.edit) { + viewKey = 'root' + } + + const actions = getViewActions({ + editConfig: collectionOrGlobal.admin?.components?.views?.edit, + viewKey, + }) + + return actions + } + + return [] +} diff --git a/packages/ui/src/views/Root/getCustomViewByKey.ts b/packages/ui/src/views/Root/getCustomViewByKey.ts new file mode 100644 index 00000000000..23d3aed6e5e --- /dev/null +++ b/packages/ui/src/views/Root/getCustomViewByKey.ts @@ -0,0 +1,27 @@ +import type { AdminViewServerProps, PayloadComponent, SanitizedConfig } from 'payload' + +import type { ViewFromConfig } from './getRouteData.js' + +export const getCustomViewByKey = ({ + config, + viewKey, +}: { + config: SanitizedConfig + viewKey: string +}): { + view: ViewFromConfig + viewKey: string +} | null => { + const customViewComponent = config.admin.components?.views?.[viewKey] + + if (!customViewComponent) { + return null + } + + return { + view: { + payloadComponent: customViewComponent.Component as PayloadComponent, + }, + viewKey, + } +} diff --git a/packages/ui/src/views/Root/getCustomViewByRoute.ts b/packages/ui/src/views/Root/getCustomViewByRoute.ts new file mode 100644 index 00000000000..7bc4821dca1 --- /dev/null +++ b/packages/ui/src/views/Root/getCustomViewByRoute.ts @@ -0,0 +1,67 @@ +import type { AdminViewConfig, SanitizedConfig } from 'payload' + +import type { ViewFromConfig } from './getRouteData.js' + +import { isPathMatchingRoute } from './isPathMatchingRoute.js' + +export const getCustomViewByRoute = ({ + config, + currentRoute: currentRouteWithAdmin, +}: { + config: SanitizedConfig + currentRoute: string +}): { + view: ViewFromConfig + viewConfig: AdminViewConfig + viewKey: string +} => { + const { + admin: { + components: { views }, + }, + routes: { admin: adminRoute }, + } = config + + let viewKey: string + + const currentRoute = + adminRoute === '/' ? currentRouteWithAdmin : currentRouteWithAdmin.replace(adminRoute, '') + + const foundViewConfig = + (views && + typeof views === 'object' && + Object.entries(views).find(([key, view]) => { + const isMatching = isPathMatchingRoute({ + currentRoute, + exact: view.exact, + path: view.path, + sensitive: view.sensitive, + strict: view.strict, + }) + + if (isMatching) { + viewKey = key + } + + return isMatching + })?.[1]) || + undefined + + if (!foundViewConfig) { + return { + view: { + Component: null, + }, + viewConfig: null, + viewKey: null, + } + } + + return { + view: { + payloadComponent: foundViewConfig.Component, + }, + viewConfig: foundViewConfig, + viewKey, + } +} diff --git a/packages/ui/src/views/Root/getDocumentViewInfo.ts b/packages/ui/src/views/Root/getDocumentViewInfo.ts new file mode 100644 index 00000000000..6e5296a0bda --- /dev/null +++ b/packages/ui/src/views/Root/getDocumentViewInfo.ts @@ -0,0 +1,34 @@ +import type { DocumentSubViewTypes, ViewTypes } from 'payload' + +export function getDocumentViewInfo(segments: string[]): { + documentSubViewType?: DocumentSubViewTypes + viewType: ViewTypes +} { + const [tabSegment, versionSegment] = segments + + if (versionSegment) { + if (tabSegment === 'versions') { + return { + documentSubViewType: 'version', + viewType: 'version', + } + } + } else { + if (tabSegment === 'versions') { + return { + documentSubViewType: 'versions', + viewType: 'document', + } + } else if (tabSegment === 'api') { + return { + documentSubViewType: 'api', + viewType: 'document', + } + } + } + + return { + documentSubViewType: 'default', + viewType: 'document', + } +} diff --git a/packages/ui/src/views/Root/getRootPageDescriptor.spec.ts b/packages/ui/src/views/Root/getRootPageDescriptor.spec.ts new file mode 100644 index 00000000000..d71a8480245 --- /dev/null +++ b/packages/ui/src/views/Root/getRootPageDescriptor.spec.ts @@ -0,0 +1,181 @@ +import type { InitReqResult } from 'payload' + +import { beforeEach, describe, expect, it, vi } from 'vitest' + +import { getRootPageDescriptor } from './getRootPageDescriptor' + +const mockGetRouteData = vi.fn() +const mockGetClientConfig = vi.fn() +const mockGetVisibleEntities = vi.fn() +const mockGetPreferences = vi.fn() + +vi.mock('payload/shared', async (importOriginal) => { + const actual = await importOriginal() + + return { + ...actual, + applyLocaleFiltering: vi.fn(async () => {}), + } +}) + +vi.mock('../../utilities/getClientConfig.js', () => ({ + getClientConfig: (...args: unknown[]) => mockGetClientConfig(...args), +})) + +vi.mock('../../utilities/getPreferences.js', () => ({ + getPreferences: (...args: unknown[]) => mockGetPreferences(...args), +})) + +vi.mock('../../utilities/getVisibleEntities.js', () => ({ + getVisibleEntities: (...args: unknown[]) => mockGetVisibleEntities(...args), +})) + +vi.mock('./getRouteData.js', () => ({ + getRouteData: (...args: unknown[]) => mockGetRouteData(...args), +})) + +const createInitPageResult = (args?: { + collections?: Array<{ admin?: { hidden?: boolean }; slug: string }> + globals?: Array<{ admin?: { hidden?: boolean }; slug: string }> + user?: Record +}): InitReqResult => { + const config = { + admin: { + components: { + actions: [], + }, + routes: { + createFirstUser: '/create-first-user', + }, + user: 'users', + }, + collections: args?.collections ?? [], + globals: args?.globals ?? [], + routes: { + admin: '/admin', + }, + } + + return { + cookies: new Map(), + locale: undefined, + permissions: { + canAccessAdmin: true, + }, + req: { + i18n: { + language: 'en', + translations: {}, + }, + payload: { + config, + db: { + findOne: vi.fn(), + }, + }, + user: args?.user ?? { id: '1' }, + }, + } as unknown as InitReqResult +} + +describe('getRootPageDescriptor', () => { + beforeEach(() => { + mockGetClientConfig.mockReset() + mockGetPreferences.mockReset() + mockGetRouteData.mockReset() + mockGetVisibleEntities.mockReset() + + mockGetClientConfig.mockReturnValue({ + routes: { + admin: '/admin', + }, + }) + + mockGetVisibleEntities.mockReturnValue({ + collections: ['posts'], + globals: ['settings'], + }) + }) + + it('should return a page descriptor for the admin dashboard route', async () => { + mockGetRouteData.mockReturnValue({ + browseByFolderSlugs: [], + DefaultView: { + Component: () => null, + }, + documentSubViewType: undefined, + routeParams: {}, + templateClassName: 'dashboard', + templateType: 'default', + viewActions: undefined, + viewType: 'dashboard', + }) + + const result = await getRootPageDescriptor({ + importMap: {} as never, + initPageResult: createInitPageResult(), + searchParams: {}, + segments: [], + }) + + expect(result).toEqual({ + descriptor: { + browseByFolderSlugs: [], + clientConfig: { + routes: { + admin: '/admin', + }, + }, + collectionConfig: undefined, + DefaultView: { + Component: expect.any(Function), + }, + documentSubViewType: undefined, + globalConfig: undefined, + routeParams: {}, + templateClassName: 'dashboard', + templateType: 'default', + viewActions: undefined, + viewType: 'dashboard', + visibleEntities: { + collections: ['posts'], + globals: ['settings'], + }, + }, + type: 'page', + }) + }) + + it('should return not-found for unknown collection routes', async () => { + const result = await getRootPageDescriptor({ + importMap: {} as never, + initPageResult: createInitPageResult({ + collections: [], + }), + searchParams: {}, + segments: ['collections', 'missing'], + }) + + expect(result).toEqual({ + type: 'not-found', + }) + expect(mockGetRouteData).not.toHaveBeenCalled() + }) + + it('should redirect bare collection routes to the admin root when no custom view exists', async () => { + const result = await getRootPageDescriptor({ + importMap: {} as never, + initPageResult: createInitPageResult({ + collections: [], + }), + searchParams: {}, + segments: ['collections'], + }) + + expect(result).toEqual({ + type: 'redirect', + url: '/admin', + }) + expect(mockGetRouteData).not.toHaveBeenCalled() + }) +}) diff --git a/packages/ui/src/views/Root/getRootPageDescriptor.ts b/packages/ui/src/views/Root/getRootPageDescriptor.ts new file mode 100644 index 00000000000..4b3c6d6c43b --- /dev/null +++ b/packages/ui/src/views/Root/getRootPageDescriptor.ts @@ -0,0 +1,338 @@ +import type { + CollectionPreferences, + ImportMap, + InitReqResult, + SanitizedCollectionConfig, + SanitizedGlobalConfig, +} from 'payload' + +import { applyLocaleFiltering, formatAdminURL } from 'payload/shared' +import * as qs from 'qs-esm' + +import { getClientConfig } from '../../utilities/getClientConfig.js' +import { getPreferences } from '../../utilities/getPreferences.js' +import { getVisibleEntities } from '../../utilities/getVisibleEntities.js' +import { handleAuthRedirect } from '../../utilities/handleAuthRedirect.js' +import { isCustomAdminView } from '../../utilities/isCustomAdminView.js' +import { isPublicAdminRoute } from '../../utilities/isPublicAdminRoute.js' +import { getCustomViewByRoute } from './getCustomViewByRoute.js' +import { getRouteData } from './getRouteData.js' + +export type RootPageDescriptor = { + browseByFolderSlugs: ReturnType['browseByFolderSlugs'] + clientConfig: ReturnType + collectionConfig?: SanitizedCollectionConfig + DefaultView: ReturnType['DefaultView'] + documentSubViewType?: ReturnType['documentSubViewType'] + globalConfig?: SanitizedGlobalConfig + routeParams: ReturnType['routeParams'] + templateClassName: ReturnType['templateClassName'] + templateType: ReturnType['templateType'] + viewActions?: ReturnType['viewActions'] + viewType?: ReturnType['viewType'] + visibleEntities: ReturnType +} + +export type RootPageDescriptorResult = + | { + descriptor: RootPageDescriptor + type: 'page' + } + | { + type: 'not-found' + } + | { + type: 'redirect' + url: string + } + +const getRouteEntityConfigs = (args: { + config: InitReqResult['req']['payload']['config'] + currentRoute: string + segments: string[] +}): + | { + collectionConfig?: SanitizedCollectionConfig + globalConfig?: SanitizedGlobalConfig + type: 'ok' + } + | { + type: 'not-found' + } + | { + type: 'redirect' + url: string + } => { + const { config, currentRoute, segments } = args + const { + routes: { admin: adminRoute }, + } = config + + const isCollectionRoute = segments[0] === 'collections' + const isGlobalRoute = segments[0] === 'globals' + let collectionConfig: SanitizedCollectionConfig = undefined + let globalConfig: SanitizedGlobalConfig = undefined + + if (isCollectionRoute) { + if (segments.length === 1) { + const { viewKey } = getCustomViewByRoute({ + config, + currentRoute: '/collections', + }) + + if (!viewKey) { + return { + type: 'redirect', + url: adminRoute, + } + } + } + + if (segments[1]) { + collectionConfig = config.collections.find(({ slug }) => slug === segments[1]) + } + } + + if (isGlobalRoute) { + if (segments.length === 1) { + const { viewKey } = getCustomViewByRoute({ + config, + currentRoute: '/globals', + }) + + if (!viewKey) { + return { + type: 'redirect', + url: adminRoute, + } + } + } + + if (segments[1]) { + globalConfig = config.globals.find(({ slug }) => slug === segments[1]) + } + } + + if ((isCollectionRoute && !collectionConfig) || (isGlobalRoute && !globalConfig)) { + return { + type: 'not-found', + } + } + + return { + type: 'ok', + collectionConfig, + globalConfig, + } +} + +export const getRootPageDescriptor = async (args: { + importMap: ImportMap + initPageResult: InitReqResult + searchParams: { [key: string]: string | string[] } + segments: string[] +}): Promise => { + const { importMap, initPageResult, searchParams, segments } = args + const { + cookies, + locale, + permissions, + req, + req: { payload }, + } = initPageResult + + const config = payload.config + const { + admin: { + routes: { createFirstUser: createFirstUserRouteValue }, + user: userSlug, + }, + routes: { admin: adminRoute }, + } = config + + const currentRoute = formatAdminURL({ + adminRoute, + path: Array.isArray(segments) && segments.length > 0 ? `/${segments.join('/')}` : null, + }) + + const routeEntityConfigs = getRouteEntityConfigs({ + config, + currentRoute, + segments, + }) + + if (routeEntityConfigs.type === 'redirect') { + return routeEntityConfigs + } + + if (routeEntityConfigs.type === 'not-found') { + return routeEntityConfigs + } + + const { collectionConfig, globalConfig } = routeEntityConfigs + + if ( + !permissions.canAccessAdmin && + !isPublicAdminRoute({ adminRoute, config: payload.config, route: currentRoute }) && + !isCustomAdminView({ adminRoute, config: payload.config, route: currentRoute }) + ) { + return { + type: 'redirect', + url: handleAuthRedirect({ + config: payload.config, + route: currentRoute, + searchParams, + user: req.user, + }), + } + } + + let collectionPreferences: CollectionPreferences = undefined + + if (collectionConfig && segments.length === 2) { + if (config.folders && collectionConfig.folders && segments[1] !== config.folders.slug) { + await getPreferences( + `collection-${collectionConfig.slug}`, + req.payload, + req.user?.id, + config.admin.user, + ).then((res) => { + if (res?.value) { + collectionPreferences = res.value + } + }) + } + } + + const { + browseByFolderSlugs, + DefaultView, + documentSubViewType, + routeParams, + templateClassName, + templateType, + viewActions, + viewType, + } = getRouteData({ + adminRoute, + collectionConfig, + collectionPreferences, + currentRoute, + globalConfig, + payload, + searchParams, + segments, + }) + + // Root consumers rely on req.routeParams being populated before downstream views execute. + req.routeParams = routeParams + + const dbHasUser = + req.user || + (await req.payload.db + .findOne({ + collection: userSlug, + req, + }) + ?.then((doc) => !!doc)) + + if (!DefaultView?.Component && !DefaultView?.payloadComponent) { + if (req.user) { + return { + type: 'not-found', + } + } + + if (dbHasUser) { + return { + type: 'redirect', + url: adminRoute, + } + } + } + + const usersCollection = config.collections.find(({ slug }) => slug === userSlug) + const disableLocalStrategy = usersCollection?.auth?.disableLocalStrategy + const createFirstUserRoute = formatAdminURL({ + adminRoute, + path: createFirstUserRouteValue, + }) + + if (disableLocalStrategy && currentRoute === createFirstUserRoute) { + return { + type: 'redirect', + url: adminRoute, + } + } + + if (!dbHasUser && currentRoute !== createFirstUserRoute && !disableLocalStrategy) { + return { + type: 'redirect', + url: createFirstUserRoute, + } + } + + if (dbHasUser && currentRoute === createFirstUserRoute) { + return { + type: 'redirect', + url: adminRoute, + } + } + + if (!DefaultView?.Component && !DefaultView?.payloadComponent && !dbHasUser) { + return { + type: 'redirect', + url: adminRoute, + } + } + + const clientConfig = getClientConfig({ + config, + i18n: req.i18n, + importMap, + user: viewType === 'createFirstUser' ? true : req.user, + }) + + await applyLocaleFiltering({ clientConfig, config, req }) + + if ( + clientConfig.localization && + req.locale && + !clientConfig.localization.localeCodes.includes(req.locale) + ) { + return { + type: 'redirect', + url: `${currentRoute}${qs.stringify( + { + ...searchParams, + locale: clientConfig.localization.localeCodes.includes( + clientConfig.localization.defaultLocale, + ) + ? clientConfig.localization.defaultLocale + : clientConfig.localization.localeCodes[0], + }, + { addQueryPrefix: true }, + )}`, + } + } + + const visibleEntities = getVisibleEntities({ req }) + + return { + type: 'page', + descriptor: { + browseByFolderSlugs, + clientConfig, + collectionConfig, + DefaultView, + documentSubViewType, + globalConfig, + routeParams, + templateClassName, + templateType, + viewActions, + viewType, + visibleEntities, + }, + } +} diff --git a/packages/ui/src/views/Root/getRouteData.ts b/packages/ui/src/views/Root/getRouteData.ts new file mode 100644 index 00000000000..39734c68980 --- /dev/null +++ b/packages/ui/src/views/Root/getRouteData.ts @@ -0,0 +1,441 @@ +import type { + AdminViewServerProps, + CollectionPreferences, + CollectionSlug, + CustomComponent, + DocumentSubViewTypes, + Payload, + PayloadComponent, + SanitizedCollectionConfig, + SanitizedConfig, + SanitizedGlobalConfig, + ViewTypes, +} from 'payload' +import type React from 'react' + +import { parseDocumentID } from 'payload' +import { formatAdminURL, isNumber } from 'payload/shared' + +import { AccountView } from '../Account/RenderAccount.js' +import { BrowseByFolder } from '../BrowseByFolder/BrowseByFolderView.js' +import { CollectionFolderView } from '../CollectionFolders/index.js' +import { TrashView } from '../CollectionTrash/index.js' +import { CreateFirstUserView } from '../CreateFirstUser/index.js' +import { DashboardView } from '../Dashboard/index.js' +import { DocumentView } from '../Document/DocumentView.js' +import { forgotPasswordBaseClass, ForgotPasswordView } from '../ForgotPassword/index.js' +import { ListView } from '../List/ListView.js' +import { loginBaseClass, LoginView } from '../Login/index.js' +import { LogoutInactivity, LogoutView } from '../Logout/index.js' +import { ResetPassword, resetPasswordBaseClass } from '../ResetPassword/index.js' +import { UnauthorizedView } from '../Unauthorized/index.js' +import { Verify, verifyBaseClass } from '../Verify/index.js' +import { getSubViewActions, getViewActions } from './attachViewActions.js' +import { getCustomViewByKey } from './getCustomViewByKey.js' +import { getCustomViewByRoute } from './getCustomViewByRoute.js' +import { getDocumentViewInfo } from './getDocumentViewInfo.js' +import { isPathMatchingRoute } from './isPathMatchingRoute.js' + +const baseClasses = { + account: 'account', + folders: 'folders', + forgot: forgotPasswordBaseClass, + login: loginBaseClass, + reset: resetPasswordBaseClass, + verify: verifyBaseClass, +} + +type OneSegmentViews = { + [K in Exclude]: React.FC +} + +export type ViewFromConfig = { + Component?: React.FC + payloadComponent?: PayloadComponent +} + +const oneSegmentViews: OneSegmentViews = { + account: AccountView, + browseByFolder: BrowseByFolder, + createFirstUser: CreateFirstUserView, + forgot: ForgotPasswordView, + inactivity: LogoutInactivity, + login: LoginView as React.FC, + logout: LogoutView, + unauthorized: UnauthorizedView, +} + +type GetRouteDataResult = { + browseByFolderSlugs: CollectionSlug[] + collectionConfig?: SanitizedCollectionConfig + DefaultView: ViewFromConfig + documentSubViewType?: DocumentSubViewTypes + globalConfig?: SanitizedGlobalConfig + routeParams: { + collection?: string + folderCollection?: string + folderID?: number | string + global?: string + id?: number | string + token?: string + versionID?: number | string + } + templateClassName: string + templateType: 'default' | 'minimal' + viewActions?: CustomComponent[] + viewType?: ViewTypes +} + +type GetRouteDataArgs = { + adminRoute: string + collectionConfig?: SanitizedCollectionConfig + /** + * User preferences for a collection. + * + * These preferences are normally undefined + * unless the user is on the list view and the + * collection is folder enabled. + */ + collectionPreferences?: CollectionPreferences + currentRoute: string + globalConfig?: SanitizedGlobalConfig + payload: Payload + searchParams: { + [key: string]: string | string[] + } + segments: string[] +} + +export const getRouteData = ({ + adminRoute, + collectionConfig, + collectionPreferences = undefined, + currentRoute, + globalConfig, + payload, + segments, +}: GetRouteDataArgs): GetRouteDataResult => { + const { config } = payload + let ViewToRender: ViewFromConfig = null + let templateClassName: string + let templateType: 'default' | 'minimal' | undefined + let documentSubViewType: DocumentSubViewTypes + let viewType: ViewTypes + const routeParams: GetRouteDataResult['routeParams'] = {} + + const [segmentOne, segmentTwo, segmentThree, segmentFour, segmentFive, segmentSix] = segments + + const isBrowseByFolderEnabled = config.folders && config.folders.browseByFolder + const browseByFolderSlugs = + (isBrowseByFolderEnabled && + config.collections.reduce((acc, { slug, folders }) => { + if (folders && folders.browseByFolder) { + return [...acc, slug] + } + return acc + }, [])) || + [] + + const viewActions: CustomComponent[] = [...(config?.admin?.components?.actions || [])] + + switch (segments.length) { + case 0: { + if (currentRoute === adminRoute) { + ViewToRender = { + Component: DashboardView, + } + templateClassName = 'dashboard' + templateType = 'default' + viewType = 'dashboard' + } + break + } + case 1: { + let viewKey: keyof typeof oneSegmentViews + + if (config.admin.routes) { + const matchedRoute = Object.entries(config.admin.routes).find(([, route]) => { + return isPathMatchingRoute({ + currentRoute, + exact: true, + path: formatAdminURL({ + adminRoute, + path: route, + }), + }) + }) + + if (matchedRoute) { + viewKey = matchedRoute[0] as keyof typeof oneSegmentViews + } + } + + const customView = + (viewKey && getCustomViewByKey({ config, viewKey })) || + getCustomViewByRoute({ config, currentRoute }) + + if (customView?.view?.payloadComponent || customView?.view?.Component) { + ViewToRender = customView.view + + if (viewKey && oneSegmentViews[viewKey]) { + viewType = viewKey as ViewTypes + templateClassName = baseClasses[viewKey] || viewKey + templateType = 'minimal' + + if (viewKey === 'account') { + templateType = 'default' + } + + if (isBrowseByFolderEnabled && viewKey === 'browseByFolder') { + templateType = 'default' + viewType = 'folders' + } + } + } else if (oneSegmentViews[viewKey]) { + ViewToRender = { + Component: oneSegmentViews[viewKey], + } + + viewType = viewKey as ViewTypes + + templateClassName = baseClasses[viewKey] + templateType = 'minimal' + + if (viewKey === 'account') { + templateType = 'default' + } + + if (isBrowseByFolderEnabled && viewKey === 'browseByFolder') { + templateType = 'default' + viewType = 'folders' + } + } + break + } + case 2: { + if (`/${segmentOne}` === config.admin.routes.reset) { + ViewToRender = { + Component: ResetPassword, + } + templateClassName = baseClasses[segmentTwo] + templateType = 'minimal' + viewType = 'reset' + } else if ( + isBrowseByFolderEnabled && + `/${segmentOne}` === config.admin.routes.browseByFolder + ) { + routeParams.folderID = segmentTwo + + ViewToRender = { + Component: oneSegmentViews.browseByFolder, + } + templateClassName = baseClasses.folders + templateType = 'default' + viewType = 'folders' + } else if (collectionConfig) { + routeParams.collection = collectionConfig.slug + + if ( + collectionPreferences?.listViewType && + collectionPreferences.listViewType === 'folders' + ) { + ViewToRender = { + Component: CollectionFolderView as React.FC, + } + + templateClassName = `collection-folders` + templateType = 'default' + viewType = 'collection-folders' + } else { + ViewToRender = { + Component: ListView, + } + + templateClassName = `${segmentTwo}-list` + templateType = 'default' + viewType = 'list' + } + + viewActions.push(...(collectionConfig.admin.components?.views?.list?.actions || [])) + } else if (globalConfig) { + routeParams.global = globalConfig.slug + + ViewToRender = { + Component: DocumentView, + } + + templateClassName = 'global-edit' + templateType = 'default' + viewType = 'document' + + viewActions.push( + ...getViewActions({ + editConfig: globalConfig.admin?.components?.views?.edit, + viewKey: 'default', + }), + ) + } + break + } + default: + if (segmentTwo === 'verify') { + routeParams.collection = segmentOne + routeParams.token = segmentThree + + ViewToRender = { + Component: Verify, + } + + templateClassName = 'verify' + templateType = 'minimal' + viewType = 'verify' + } else if (collectionConfig) { + routeParams.collection = collectionConfig.slug + + if (segmentThree === 'trash' && typeof segmentFour === 'string') { + routeParams.id = segmentFour + routeParams.versionID = segmentSix + + ViewToRender = { + Component: DocumentView, + } + + templateClassName = `collection-default-edit` + templateType = 'default' + + const viewInfo = getDocumentViewInfo([segmentFive, segmentSix]) + viewType = viewInfo.viewType + documentSubViewType = viewInfo.documentSubViewType + + viewActions.push( + ...getSubViewActions({ + collectionOrGlobal: collectionConfig, + viewKeyArg: documentSubViewType, + }), + ) + } else if (segmentThree === 'trash') { + ViewToRender = { + Component: TrashView as React.FC, + } + + templateClassName = `${segmentTwo}-trash` + templateType = 'default' + viewType = 'trash' + + viewActions.push(...(collectionConfig.admin.components?.views?.list?.actions || [])) + } else { + if (config.folders && segmentThree === config.folders.slug && collectionConfig.folders) { + routeParams.folderCollection = segmentThree + routeParams.folderID = segmentFour + + ViewToRender = { + Component: CollectionFolderView as React.FC, + } + + templateClassName = `collection-folders` + templateType = 'default' + viewType = 'collection-folders' + + viewActions.push(...(collectionConfig.admin.components?.views?.list?.actions || [])) + } else { + routeParams.id = segmentThree === 'create' ? undefined : segmentThree + routeParams.versionID = segmentFive + + ViewToRender = { + Component: DocumentView, + } + + templateClassName = `collection-default-edit` + templateType = 'default' + + const viewInfo = getDocumentViewInfo([segmentFour, segmentFive]) + viewType = viewInfo.viewType + documentSubViewType = viewInfo.documentSubViewType + + viewActions.push( + ...getSubViewActions({ + collectionOrGlobal: collectionConfig, + viewKeyArg: documentSubViewType, + }), + ) + } + } + } else if (globalConfig) { + routeParams.global = globalConfig.slug + routeParams.versionID = segmentFour + + ViewToRender = { + Component: DocumentView, + } + + templateClassName = `global-edit` + templateType = 'default' + + const viewInfo = getDocumentViewInfo([segmentThree, segmentFour]) + viewType = viewInfo.viewType + documentSubViewType = viewInfo.documentSubViewType + + viewActions.push( + ...getSubViewActions({ + collectionOrGlobal: globalConfig, + viewKeyArg: documentSubViewType, + }), + ) + } + break + } + + if (!ViewToRender) { + ViewToRender = getCustomViewByRoute({ config, currentRoute })?.view + } + + if (collectionConfig) { + if (routeParams.id) { + routeParams.id = parseDocumentID({ + id: routeParams.id, + collectionSlug: collectionConfig.slug, + payload, + }) + } + + if (routeParams.versionID) { + routeParams.versionID = parseDocumentID({ + id: routeParams.versionID, + collectionSlug: collectionConfig.slug, + payload, + }) + } + } + + if (config.folders && routeParams.folderID) { + routeParams.folderID = parseDocumentID({ + id: routeParams.folderID, + collectionSlug: config.folders.slug, + payload, + }) + } + + if (globalConfig && routeParams.versionID) { + routeParams.versionID = + payload.db.defaultIDType === 'number' && isNumber(routeParams.versionID) + ? Number(routeParams.versionID) + : routeParams.versionID + } + + if (viewActions.length) { + viewActions.reverse() + } + + return { + browseByFolderSlugs, + collectionConfig, + DefaultView: ViewToRender, + documentSubViewType, + globalConfig, + routeParams, + templateClassName, + templateType, + viewActions: viewActions.length ? viewActions : undefined, + viewType, + } +} diff --git a/packages/ui/src/views/Root/isPathMatchingRoute.ts b/packages/ui/src/views/Root/isPathMatchingRoute.ts new file mode 100644 index 00000000000..193fc0042a8 --- /dev/null +++ b/packages/ui/src/views/Root/isPathMatchingRoute.ts @@ -0,0 +1,40 @@ +import { pathToRegexp } from 'path-to-regexp' + +export const isPathMatchingRoute = ({ + currentRoute, + exact, + path: viewPath, + sensitive, + strict, +}: { + currentRoute: string + exact?: boolean + path?: string + sensitive?: boolean + strict?: boolean +}) => { + // if no path is defined, we cannot match it so return false early + if (!viewPath) { + return false + } + + const keys = [] + + // run the view path through `pathToRegexp` to resolve any dynamic segments + // i.e. `/admin/custom-view/:id` -> `/admin/custom-view/123` + const regex = pathToRegexp(viewPath, keys, { + sensitive, + strict, + }) + + const match = regex.exec(currentRoute) + const viewRoute = match?.[0] || viewPath + + if (exact) { + return currentRoute === viewRoute + } + + if (!exact) { + return viewRoute.startsWith(currentRoute) + } +} diff --git a/packages/ui/src/views/Root/renderRootPageFromDescriptor.spec.ts b/packages/ui/src/views/Root/renderRootPageFromDescriptor.spec.ts new file mode 100644 index 00000000000..c447de70e1a --- /dev/null +++ b/packages/ui/src/views/Root/renderRootPageFromDescriptor.spec.ts @@ -0,0 +1,106 @@ +import type { InitReqResult } from 'payload' + +import React from 'react' +import { renderToStaticMarkup } from 'react-dom/server' +import { describe, expect, it, vi } from 'vitest' + +import { renderRootPageFromDescriptor } from './RenderRoot' + +vi.mock('../../providers/Config/index.js', () => ({ + PageConfigProvider: ({ children }: { children: React.ReactNode }) => + React.createElement('page-config', undefined, children), +})) + +vi.mock('../../providers/ViewRenderer/index.js', () => ({ + ViewRendererProvider: ({ children }: { children: React.ReactNode }) => + React.createElement('view-renderer', undefined, children), +})) + +vi.mock('../../templates/Default/index.js', () => ({ + DefaultTemplate: ({ children }: { children: React.ReactNode }) => + React.createElement('default-template', undefined, children), +})) + +vi.mock('../../templates/Minimal/index.js', () => ({ + MinimalTemplate: ({ children }: { children: React.ReactNode }) => + React.createElement('minimal-template', undefined, children), +})) + +describe('renderRootPageFromDescriptor', () => { + it('should wrap the rendered view with the minimal template when requested', () => { + const markup = renderToStaticMarkup( + renderRootPageFromDescriptor({ + descriptor: { + browseByFolderSlugs: [], + clientConfig: { + routes: { + admin: '/admin', + }, + } as never, + collectionConfig: undefined, + DefaultView: { + Component: () => React.createElement('div', undefined, 'view'), + }, + documentSubViewType: undefined, + globalConfig: undefined, + routeParams: {}, + templateClassName: 'login', + templateType: 'minimal', + viewActions: undefined, + viewType: undefined, + visibleEntities: { + collections: [], + globals: [], + }, + }, + importMap: {} as never, + initPageResult: { + cookies: new Map(), + locale: undefined, + permissions: { + canAccessAdmin: true, + }, + req: { + i18n: { + language: 'en', + translations: {}, + }, + payload: { + config: { + i18n: { + supportedLanguages: { + en: { + translations: { + general: { + thisLanguage: 'English', + }, + }, + }, + }, + }, + }, + }, + user: { + id: '1', + }, + }, + } as unknown as InitReqResult, + notFound: () => { + throw new Error('not-found') + }, + redirect: () => { + throw new Error('redirect') + }, + searchParams: {}, + segments: [], + viewRenderer: () => React.createElement('rendered-view', undefined, 'view'), + }), + ) + + expect(markup).toContain('') + expect(markup).toContain('') + expect(markup).toContain('') + expect(markup).toContain('view') + expect(markup).not.toContain('') + }) +}) diff --git a/packages/ui/src/views/Unauthorized/index.scss b/packages/ui/src/views/Unauthorized/index.scss new file mode 100644 index 00000000000..58df6f8b391 --- /dev/null +++ b/packages/ui/src/views/Unauthorized/index.scss @@ -0,0 +1,14 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .unauthorized { + &__button.btn { + margin: 0; + margin-block: 0; + } + + &--with-gutter { + margin-top: var(--base); + } + } +} diff --git a/packages/ui/src/views/Unauthorized/index.tsx b/packages/ui/src/views/Unauthorized/index.tsx new file mode 100644 index 00000000000..c1753a77edd --- /dev/null +++ b/packages/ui/src/views/Unauthorized/index.tsx @@ -0,0 +1,61 @@ +import type { AdminViewServerProps } from 'payload' + +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import { Button } from '../../elements/Button/index.js' +import { Gutter } from '../../elements/Gutter/index.js' +// TODO: FormHeader is currently in packages/next/src/elements/FormHeader/ +// It needs to be moved to packages/ui/src/elements/FormHeader/ as a separate step +import { FormHeader } from '../../elements/FormHeader/index.js' +import './index.scss' + +const baseClass = 'unauthorized' + +export function UnauthorizedView({ initPageResult }: AdminViewServerProps) { + const { + permissions, + req: { + i18n, + payload: { + config: { + admin: { + routes: { logout: logoutRoute }, + }, + routes: { admin: adminRoute }, + }, + }, + user, + }, + } = initPageResult + + return ( +
    + + +
    + ) +} + +export const UnauthorizedViewWithGutter = (props: AdminViewServerProps) => { + return ( + + + + ) +} diff --git a/packages/ui/src/views/Verify/index.client.tsx b/packages/ui/src/views/Verify/index.client.tsx new file mode 100644 index 00000000000..c0819d96fc7 --- /dev/null +++ b/packages/ui/src/views/Verify/index.client.tsx @@ -0,0 +1,36 @@ +'use client' +import React, { useEffect } from 'react' +import { toast } from 'sonner' + +import { useRouter } from '../../providers/Router/index.js' +import { useRouteTransition } from '../../providers/RouteTransition/index.js' + +type Props = { + message: string + redirectTo: string +} +export function ToastAndRedirect({ message, redirectTo }: Props) { + const router = useRouter() + const { startRouteTransition } = useRouteTransition() + const hasToastedRef = React.useRef(false) + + useEffect(() => { + let timeoutID + + if (toast) { + timeoutID = setTimeout(() => { + toast.success(message) + hasToastedRef.current = true + startRouteTransition(() => router.push(redirectTo)) + }, 100) + } + + return () => { + if (timeoutID) { + clearTimeout(timeoutID) + } + } + }, [router, redirectTo, message, startRouteTransition]) + + return null +} diff --git a/packages/ui/src/views/Verify/index.scss b/packages/ui/src/views/Verify/index.scss new file mode 100644 index 00000000000..77b4a8841c0 --- /dev/null +++ b/packages/ui/src/views/Verify/index.scss @@ -0,0 +1,16 @@ +@layer payload-default { + .verify { + display: flex; + align-items: center; + text-align: center; + flex-wrap: wrap; + min-height: 100vh; + + &__brand { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: calc(var(--base) * 2); + } + } +} diff --git a/packages/ui/src/views/Verify/index.tsx b/packages/ui/src/views/Verify/index.tsx new file mode 100644 index 00000000000..8e099f58b66 --- /dev/null +++ b/packages/ui/src/views/Verify/index.tsx @@ -0,0 +1,72 @@ +import type { AdminViewServerProps } from 'payload' + +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +// TODO: Logo is currently in packages/next/src/elements/Logo/ +// It needs to be moved to packages/ui/src/elements/Logo/ as a separate step +import { Logo } from '../../elements/Logo/index.js' +import { ToastAndRedirect } from './index.client.js' +import './index.scss' + +export const verifyBaseClass = 'verify' + +export async function Verify({ initPageResult, params, searchParams }: AdminViewServerProps) { + // /:collectionSlug/verify/:token + + const [collectionSlug, verify, token] = params.segments + const { locale, permissions, req } = initPageResult + + const { + i18n, + payload: { config }, + payload, + user, + } = req + + const { + routes: { admin: adminRoute }, + serverURL, + } = config + + let textToRender + let isVerified = false + + try { + await req.payload.verifyEmail({ + collection: collectionSlug, + token, + }) + + isVerified = true + textToRender = req.t('authentication:emailVerified') + } catch (e) { + textToRender = req.t('authentication:unableToVerify') + } + + if (isVerified) { + return ( + + ) + } + + return ( + +
    + +
    +

    {textToRender}

    +     + ) +} diff --git a/packages/ui/src/views/Version/Default/SelectedLocalesContext.tsx b/packages/ui/src/views/Version/Default/SelectedLocalesContext.tsx new file mode 100644 index 00000000000..2913b82a64e --- /dev/null +++ b/packages/ui/src/views/Version/Default/SelectedLocalesContext.tsx @@ -0,0 +1,13 @@ +'use client' + +import { createContext, use } from 'react' + +type SelectedLocalesContextType = { + selectedLocales: string[] +} + +export const SelectedLocalesContext = createContext({ + selectedLocales: [], +}) + +export const useSelectedLocales = () => use(SelectedLocalesContext) diff --git a/packages/ui/src/views/Version/Default/SetStepNav.tsx b/packages/ui/src/views/Version/Default/SetStepNav.tsx new file mode 100644 index 00000000000..fd8825e7a26 --- /dev/null +++ b/packages/ui/src/views/Version/Default/SetStepNav.tsx @@ -0,0 +1,136 @@ +'use client' + +import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload' +import type React from 'react' + +import { getTranslation } from '@payloadcms/translations' +import { formatAdminURL } from 'payload/shared' +import { useEffect } from 'react' + +import { useStepNav } from '../../../elements/StepNav/index.js' +import { useConfig } from '../../../providers/Config/index.js' +import { useDocumentTitle } from '../../../providers/DocumentTitle/index.js' +import { useLocale } from '../../../providers/Locale/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' + +export const SetStepNav: React.FC<{ + readonly collectionConfig?: ClientCollectionConfig + readonly globalConfig?: ClientGlobalConfig + readonly id?: number | string + readonly isTrashed?: boolean + versionToCreatedAtFormatted?: string + versionToID?: string +}> = ({ + id, + collectionConfig, + globalConfig, + isTrashed, + versionToCreatedAtFormatted, + versionToID, +}) => { + const { config } = useConfig() + const { setStepNav } = useStepNav() + const { i18n, t } = useTranslation() + const locale = useLocale() + const { title } = useDocumentTitle() + + useEffect(() => { + const { + routes: { admin: adminRoute }, + serverURL, + } = config + + if (collectionConfig) { + const collectionSlug = collectionConfig.slug + + const pluralLabel = collectionConfig.labels?.plural + + const docBasePath: `/${string}` = isTrashed + ? `/collections/${collectionSlug}/trash/${id}` + : `/collections/${collectionSlug}/${id}` + + const nav = [ + { + label: getTranslation(pluralLabel, i18n), + url: formatAdminURL({ + adminRoute, + path: `/collections/${collectionSlug}`, + }), + }, + ] + + if (isTrashed) { + nav.push({ + label: t('general:trash'), + url: formatAdminURL({ + adminRoute, + path: `/collections/${collectionSlug}/trash`, + }), + }) + } + + nav.push( + { + label: title, + url: formatAdminURL({ + adminRoute, + path: docBasePath, + }), + }, + { + label: t('version:versions'), + url: formatAdminURL({ + adminRoute, + path: `${docBasePath}/versions`, + }), + }, + { + label: versionToCreatedAtFormatted, + url: undefined, + }, + ) + + setStepNav(nav) + return + } + + if (globalConfig) { + const globalSlug = globalConfig.slug + + setStepNav([ + { + label: globalConfig.label, + url: formatAdminURL({ + adminRoute, + path: `/globals/${globalSlug}`, + }), + }, + { + label: t('version:versions'), + url: formatAdminURL({ + adminRoute, + path: `/globals/${globalSlug}/versions`, + }), + }, + { + label: versionToCreatedAtFormatted, + }, + ]) + } + }, [ + config, + setStepNav, + id, + isTrashed, + locale, + t, + i18n, + collectionConfig, + globalConfig, + title, + versionToCreatedAtFormatted, + versionToID, + ]) + + return null +} diff --git a/packages/ui/src/views/Version/Default/index.scss b/packages/ui/src/views/Version/Default/index.scss new file mode 100644 index 00000000000..65374616733 --- /dev/null +++ b/packages/ui/src/views/Version/Default/index.scss @@ -0,0 +1,170 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .view-version { + width: 100%; + padding-bottom: var(--spacing-view-bottom); + + &__toggle-locales-label { + color: var(--theme-elevation-500); + } + + &-controls-top { + border-bottom: 1px solid var(--theme-elevation-100); + padding: 16px var(--gutter-h) 16px var(--gutter-h); + + &__wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + &-actions { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--base); + } + } + + h2 { + font-size: 18px; + } + } + + &-controls-bottom { + border-bottom: 1px solid var(--theme-elevation-100); + padding: 16px var(--gutter-h) 16px var(--gutter-h); + position: relative; + + // Vertical separator line + &::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 1px; + background-color: var(--theme-elevation-100); + transform: translateX(-50%); // Center the line + } + + &__wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: var(--base); + gap: var(--base); + } + } + + &__time-elapsed { + color: var(--theme-elevation-500); + } + + &__version-from { + display: flex; + flex-direction: column; + gap: 5px; + + &-labels { + display: flex; + flex-direction: row; + justify-content: space-between; + } + } + + &__version-to { + display: flex; + flex-direction: column; + gap: 5px; + + &-labels { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + &-version { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + background: var(--theme-elevation-50); + padding: 8px 12px; + gap: calc(var(--base) / 2); + + h2 { + font-size: 13px; + font-weight: 400; + } + } + } + + &__restore { + div { + margin-block: 0; + } + } + + &__modifiedCheckBox { + margin: 0 0 0 var(--base); + display: flex; + align-items: center; + } + + &__diff-wrap { + padding-top: var(--base); + display: flex; + flex-direction: column; + gap: var(--base); + position: relative; + + // Vertical separator line + &::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 1px; + background-color: var(--theme-elevation-100); + transform: translateX(-50%); // Center the line + z-index: 2; + } + } + + @include mid-break { + &__version-to { + &-version { + flex-direction: column; + align-items: flex-start; + } + } + } + + @include small-break { + &__diff-wrap { + padding-top: calc(var(--base) / 2); + } + + &__version-to, + &__version-from { + &-labels { + flex-direction: column; + align-items: flex-start; + } + } + + &-controls-top { + &__wrapper { + flex-direction: column; + align-items: flex-start; + + .view-version__modifiedCheckBox { + margin-left: 0; + } + } + } + } + } +} diff --git a/packages/ui/src/views/Version/Default/index.tsx b/packages/ui/src/views/Version/Default/index.tsx new file mode 100644 index 00000000000..cbb47156e2e --- /dev/null +++ b/packages/ui/src/views/Version/Default/index.tsx @@ -0,0 +1,283 @@ +'use client' + +import React, { type FormEventHandler, useCallback, useEffect, useMemo, useState } from 'react' + +import type { SelectablePill } from '../../../elements/PillSelector/index.js' +import type { CompareOption, DefaultVersionsViewProps } from './types.js' + +import { Gutter } from '../../../elements/Gutter/index.js' +import { Pill } from '../../../elements/Pill/index.js' +import { CheckboxInput } from '../../../fields/Checkbox/index.js' +import { ChevronIcon } from '../../../icons/Chevron/index.js' +import { useConfig } from '../../../providers/Config/index.js' +import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js' +import { useLocale } from '../../../providers/Locale/index.js' +import { usePathname, useRouter, useSearchParams } from '../../../providers/Router/index.js' +import { useRouteTransition } from '../../../providers/RouteTransition/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' +import { formatTimeToNow } from '../../../utilities/formatDocTitle/formatDateTitle.js' +import { Restore } from '../Restore/index.js' +import './index.scss' +import { SelectComparison } from '../SelectComparison/index.js' +import { type SelectedLocaleOnChange, SelectLocales } from '../SelectLocales/index.js' +import { SelectedLocalesContext } from './SelectedLocalesContext.js' +import { SetStepNav } from './SetStepNav.js' + +const baseClass = 'view-version' + +export const DefaultVersionView: React.FC = ({ + canUpdate, + modifiedOnly: modifiedOnlyProp, + RenderedDiff, + selectedLocales: selectedLocalesFromProps, + versionFromCreatedAt, + versionFromID, + versionFromOptions, + versionToCreatedAt, + versionToCreatedAtFormatted, + VersionToCreatedAtLabel, + versionToID, + versionToStatus, +}) => { + const { config, getEntityConfig } = useConfig() + const { code } = useLocale() + const { i18n, t } = useTranslation() + + const [locales, setLocales] = useState([]) + const [localeSelectorOpen, setLocaleSelectorOpen] = React.useState(false) + + useEffect(() => { + if (config.localization) { + const updatedLocales = config.localization.locales.map((locale) => { + let label = locale.label + if (typeof locale.label !== 'string' && locale.label[code]) { + label = locale.label[code] + } + + return { + name: locale.code, + Label: label, + selected: selectedLocalesFromProps.includes(locale.code), + } as SelectablePill + }) + setLocales(updatedLocales) + } + }, [code, config.localization, selectedLocalesFromProps]) + + const { id: originalDocID, collectionSlug, globalSlug, isTrashed } = useDocumentInfo() + const { startRouteTransition } = useRouteTransition() + + const { collectionConfig, globalConfig } = useMemo(() => { + return { + collectionConfig: getEntityConfig({ collectionSlug }), + globalConfig: getEntityConfig({ globalSlug }), + } + }, [collectionSlug, globalSlug, getEntityConfig]) + + const router = useRouter() + const pathname = usePathname() + const searchParams = useSearchParams() + const [modifiedOnly, setModifiedOnly] = useState(modifiedOnlyProp) + + const updateSearchParams = useCallback( + (args: { + modifiedOnly?: boolean + selectedLocales?: SelectablePill[] + versionFromID?: string + }) => { + // If the selected comparison doc or locales change, update URL params so that version page + // This is so that RSC can update the version comparison state + const current = new URLSearchParams(Array.from(searchParams.entries())) + + if (args?.versionFromID) { + current.set('versionFrom', args?.versionFromID) + } + + if (args?.selectedLocales) { + if (!args.selectedLocales.length) { + current.delete('localeCodes') + } else { + const selectedLocaleCodes: string[] = [] + for (const locale of args.selectedLocales) { + if (locale.selected) { + selectedLocaleCodes.push(locale.name) + } + } + current.set('localeCodes', JSON.stringify(selectedLocaleCodes)) + } + } + + if (args?.modifiedOnly === false) { + current.set('modifiedOnly', 'false') + } else if (args?.modifiedOnly === true) { + current.delete('modifiedOnly') + } + + const search = current.toString() + const query = search ? `?${search}` : '' + + startRouteTransition(() => router.push(`${pathname}${query}`)) + }, + [pathname, router, searchParams, startRouteTransition], + ) + + const onToggleModifiedOnly: FormEventHandler = useCallback( + (event) => { + const newModified = (event.target as HTMLInputElement).checked + setModifiedOnly(newModified) + updateSearchParams({ + modifiedOnly: newModified, + }) + }, + [updateSearchParams], + ) + + const onChangeSelectedLocales: SelectedLocaleOnChange = useCallback( + ({ locales }) => { + setLocales(locales) + updateSearchParams({ + selectedLocales: locales, + }) + }, + [updateSearchParams], + ) + + const onChangeVersionFrom: (val: CompareOption) => void = useCallback( + (val) => { + updateSearchParams({ + versionFromID: val.value, + }) + }, + [updateSearchParams], + ) + + const { localization } = config + + const versionToTimeAgo = useMemo( + () => + t('version:versionAgo', { + distance: formatTimeToNow({ + date: versionToCreatedAt, + i18n, + }), + }), + [versionToCreatedAt, i18n, t], + ) + + const versionFromTimeAgo = useMemo( + () => + versionFromCreatedAt + ? t('version:versionAgo', { + distance: formatTimeToNow({ + date: versionFromCreatedAt, + i18n, + }), + }) + : undefined, + [versionFromCreatedAt, i18n, t], + ) + + return ( +
    + +
    +

    {i18n.t('version:compareVersions')}

    +
    + + + + {localization && ( + } + onClick={() => setLocaleSelectorOpen((localeSelectorOpen) => !localeSelectorOpen)} + pillStyle="light" + size="small" + > + + {t('general:locales')}:{' '} + + + {locales + .filter((locale) => locale.selected) + .map((locale) => locale.name) + .join(', ')} + + + )} +
    +
    + + {localization && ( + + )} +     + +
    +
    +
    + {t('version:comparingAgainst')} + {versionFromTimeAgo && ( + {versionFromTimeAgo} + )} +
    + +
    + +
    +
    + {t('version:currentlyViewing')} + {versionToTimeAgo} +
    +
    + {VersionToCreatedAtLabel} + {canUpdate && !isTrashed && ( + + )} +
    +
    +
    +     + + + locale.name) }}> + {versionToCreatedAt && RenderedDiff} + + +
    + ) +} diff --git a/packages/ui/src/views/Version/Default/types.ts b/packages/ui/src/views/Version/Default/types.ts new file mode 100644 index 00000000000..5017ff2d097 --- /dev/null +++ b/packages/ui/src/views/Version/Default/types.ts @@ -0,0 +1,24 @@ +export type CompareOption = { + label: React.ReactNode | string + value: string +} + +export type VersionPill = { + id: string + Label: React.ReactNode +} + +export type DefaultVersionsViewProps = { + canUpdate: boolean + modifiedOnly: boolean + RenderedDiff: React.ReactNode + selectedLocales: string[] + versionFromCreatedAt?: string + versionFromID?: string + versionFromOptions: CompareOption[] + versionToCreatedAt?: string + versionToCreatedAtFormatted: string + VersionToCreatedAtLabel: React.ReactNode + versionToID?: string + versionToStatus?: string +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.scss new file mode 100644 index 00000000000..f349331f001 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.scss @@ -0,0 +1,81 @@ +@import '../../../../scss/styles.scss'; + +@layer payload-default { + .diff-collapser { + &__toggle-button { + all: unset; + cursor: pointer; + position: relative; + z-index: 1; + display: flex; + align-items: center; + + .icon { + color: var(--theme-elevation-500); + } + + &:hover { + // Apply background color but with padding, thus we use after + &::before { + content: ''; + position: absolute; + top: -(base(0.15)); + left: -(base(0.15)); + right: -(base(0.15)); + bottom: -(base(0.15)); + background-color: var(--theme-elevation-50); + border-radius: var(--style-radius-s); + z-index: -1; + } + + .iterable-diff__label { + background-color: var(--theme-elevation-50); + z-index: 1; + } + } + } + + &__label { + // Add space between label, chevron, and change count + margin: 0 calc(var(--base) * 0.3) 0 0; + display: inline-flex; + height: 100%; + } + + &__field-change-count { + // Reset the font weight of the change count to normal + font-weight: normal; + margin-left: calc(var(--base) * 0.3); + padding: calc(var(--base) * 0.1) calc(var(--base) * 0.2); + background: var(--theme-elevation-100); + border-radius: var(--style-radius-s); + font-size: 0.8rem; + } + + &__content:not(.diff-collapser__content--hide-gutter) { + [dir='ltr'] & { + // Vertical gutter + border-left: 2px solid var(--theme-elevation-100); + // Center-align the gutter with the chevron + margin-left: 3px; + // Content indentation + padding-left: calc(var(--base) * 0.5); + } + [dir='rtl'] & { + // Vertical gutter + border-right: 2px solid var(--theme-elevation-100); + // Center-align the gutter with the chevron + margin-right: 3px; + // Content indentation + padding-right: calc(var(--base) * 0.5); + } + } + + &__content--is-collapsed { + // Hide the content when collapsed. We use display: none instead of + // conditional rendering to avoid loosing children's collapsed state when + // remounting. + display: none; + } + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx new file mode 100644 index 00000000000..c7e8d5b1570 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx @@ -0,0 +1,125 @@ +'use client' +import type { ClientField } from 'payload' + +import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared' +import React, { useState } from 'react' + +import { FieldDiffLabel } from '../../../../elements/FieldDiffLabel/index.js' +import { ChevronIcon } from '../../../../icons/Chevron/index.js' +import { useConfig } from '../../../../providers/Config/index.js' +import { useTranslation } from '../../../../providers/Translation/index.js' +import './index.scss' +import { countChangedFields, countChangedFieldsInRows } from '../utilities/countChangedFields.js' + +const baseClass = 'diff-collapser' + +type Props = { + hideGutter?: boolean + initCollapsed?: boolean + Label: React.ReactNode + locales: string[] | undefined + parentIsLocalized: boolean + valueTo: unknown +} & ( + | { + // fields collapser + children: React.ReactNode + field?: never + fields: ClientField[] + isIterable?: false + valueFrom: unknown + } + | { + // iterable collapser + children: React.ReactNode + field: ClientField + fields?: never + isIterable: true + valueFrom?: unknown + } +) + +export const DiffCollapser: React.FC = ({ + children, + field, + fields, + hideGutter = false, + initCollapsed = false, + isIterable = false, + Label, + locales, + parentIsLocalized, + valueFrom, + valueTo, +}) => { + const { t } = useTranslation() + const [isCollapsed, setIsCollapsed] = useState(initCollapsed) + const { config } = useConfig() + + let changeCount = 0 + + if (isIterable) { + if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) { + throw new Error( + 'DiffCollapser: field must be an array or blocks field when isIterable is true', + ) + } + const valueFromRows = valueFrom ?? [] + const valueToRows = valueTo ?? [] + + if (!Array.isArray(valueFromRows) || !Array.isArray(valueToRows)) { + throw new Error( + 'DiffCollapser: valueFrom and valueTro must be arrays when isIterable is true', + ) + } + + changeCount = countChangedFieldsInRows({ + config, + field, + locales, + parentIsLocalized, + valueFromRows, + valueToRows, + }) + } else { + changeCount = countChangedFields({ + config, + fields, + locales, + parentIsLocalized, + valueFrom, + valueTo, + }) + } + + const contentClassNames = [ + `${baseClass}__content`, + isCollapsed && `${baseClass}__content--is-collapsed`, + hideGutter && `${baseClass}__content--hide-gutter`, + ] + .filter(Boolean) + .join(' ') + + return ( +
    + + + {changeCount > 0 && isCollapsed && ( + + {t('version:changedFieldsCount', { count: changeCount })} + + )} + +
    {children}
    +
    + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx new file mode 100644 index 00000000000..87955d488af --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/RenderVersionFieldsToDiff.tsx @@ -0,0 +1,74 @@ +'use client' +const baseClass = 'render-field-diffs' +import type { VersionField } from 'payload' + +import './index.scss' + +import React, { Fragment, useEffect } from 'react' + +import { ShimmerEffect } from '../../../elements/ShimmerEffect/index.js' + +export const RenderVersionFieldsToDiff = ({ + parent = false, + versionFields, +}: { + /** + * If true, this is the parent render version fields component, not one nested in + * a field with children (e.g. group) + */ + parent?: boolean + versionFields: VersionField[] +}): React.ReactNode => { + const [hasMounted, setHasMounted] = React.useState(false) + + // defer rendering until after the first mount as the CSS is loaded with Emotion + // this will ensure that the CSS is loaded before rendering the diffs and prevent CLS + useEffect(() => { + setHasMounted(true) + }, []) + + return ( +
    + {!hasMounted ? ( + + + + ) : ( + versionFields?.map((field, fieldIndex) => { + if (field.fieldByLocale) { + const LocaleComponents: React.ReactNode[] = [] + for (const [locale, baseField] of Object.entries(field.fieldByLocale)) { + LocaleComponents.push( +
    +
    {baseField.CustomComponent}
    +
    , + ) + } + return ( +
    + {LocaleComponents} +
    + ) + } else if (field.field) { + return ( +
    + {field.field.CustomComponent} +
    + ) + } + + return null + }) + )} +
    + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx new file mode 100644 index 00000000000..83771fd2197 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx @@ -0,0 +1,565 @@ +import type { I18nClient } from '@payloadcms/translations' + +import { dequal } from 'dequal/lite' +import { + type BaseVersionField, + type ClientField, + type ClientFieldSchemaMap, + type Field, + type FieldDiffClientProps, + type FieldDiffServerProps, + type FieldTypes, + type FlattenedBlock, + MissingEditorProp, + type PayloadComponent, + type PayloadRequest, + type SanitizedFieldPermissions, + type SanitizedFieldsPermissions, + type VersionField, +} from 'payload' +import { + fieldIsID, + fieldShouldBeLocalized, + getFieldPaths, + getUniqueListBy, + tabHasName, +} from 'payload/shared' + +import { RenderServerComponent } from '../../../elements/RenderServerComponent/index.js' +import { diffComponents } from './fields/index.js' + +export type BuildVersionFieldsArgs = { + clientSchemaMap: ClientFieldSchemaMap + customDiffComponents: Partial< + Record> + > + entitySlug: string + fields: Field[] + fieldsPermissions: SanitizedFieldsPermissions + i18n: I18nClient + modifiedOnly: boolean + nestingLevel?: number + parentIndexPath: string + parentIsLocalized: boolean + parentPath: string + parentSchemaPath: string + req: PayloadRequest + selectedLocales: string[] + versionFromSiblingData: object + versionToSiblingData: object +} + +/** + * Build up an object that contains rendered diff components for each field. + * This is then sent to the client to be rendered. + * + * Here, the server is responsible for traversing through the document data and building up this + * version state object. + */ +export const buildVersionFields = ({ + clientSchemaMap, + customDiffComponents, + entitySlug, + fields, + fieldsPermissions, + i18n, + modifiedOnly, + nestingLevel = 0, + parentIndexPath, + parentIsLocalized, + parentPath, + parentSchemaPath, + req, + selectedLocales, + versionFromSiblingData, + versionToSiblingData, +}: BuildVersionFieldsArgs): { + versionFields: VersionField[] +} => { + const versionFields: VersionField[] = [] + let fieldIndex = -1 + + for (const field of fields) { + fieldIndex++ + + if (fieldIsID(field)) { + continue + } + + const { indexPath, path, schemaPath } = getFieldPaths({ + field, + index: fieldIndex, + parentIndexPath, + parentPath, + parentSchemaPath, + }) + + const clientField = clientSchemaMap.get(entitySlug + '.' + schemaPath) + + if (!clientField) { + req.payload.logger.error({ + clientFieldKey: entitySlug + '.' + schemaPath, + clientSchemaMapKeys: Array.from(clientSchemaMap.keys()), + msg: 'No client field found for ' + entitySlug + '.' + schemaPath, + parentPath, + parentSchemaPath, + path, + schemaPath, + }) + throw new Error('No client field found for ' + entitySlug + '.' + schemaPath) + } + + const versionField: VersionField = {} + const isLocalized = fieldShouldBeLocalized({ field, parentIsLocalized }) + + const fieldName: null | string = 'name' in field ? field.name : null + + const valueFrom = fieldName ? versionFromSiblingData?.[fieldName] : versionFromSiblingData + const valueTo = fieldName ? versionToSiblingData?.[fieldName] : versionToSiblingData + + if (isLocalized) { + versionField.fieldByLocale = {} + + for (const locale of selectedLocales) { + const localizedVersionField = buildVersionField({ + clientField: clientField as ClientField, + clientSchemaMap, + customDiffComponents, + entitySlug, + field, + i18n, + indexPath, + locale, + modifiedOnly, + nestingLevel, + parentFieldsPermissions: fieldsPermissions, + parentIsLocalized: true, + parentPath, + parentSchemaPath, + path, + req, + schemaPath, + selectedLocales, + valueFrom: valueFrom?.[locale], + valueTo: valueTo?.[locale], + }) + if (localizedVersionField) { + versionField.fieldByLocale[locale] = localizedVersionField + } + } + } else { + const baseVersionField = buildVersionField({ + clientField: clientField as ClientField, + clientSchemaMap, + customDiffComponents, + entitySlug, + field, + i18n, + indexPath, + modifiedOnly, + nestingLevel, + parentFieldsPermissions: fieldsPermissions, + parentIsLocalized: parentIsLocalized || ('localized' in field && field.localized), + parentPath, + parentSchemaPath, + path, + req, + schemaPath, + selectedLocales, + valueFrom, + valueTo, + }) + + if (baseVersionField) { + versionField.field = baseVersionField + } + } + + if ( + versionField.field || + (versionField.fieldByLocale && Object.keys(versionField.fieldByLocale).length) + ) { + versionFields.push(versionField) + } + } + + return { + versionFields, + } +} + +const buildVersionField = ({ + clientField, + clientSchemaMap, + customDiffComponents, + entitySlug, + field, + i18n, + indexPath, + locale, + modifiedOnly, + nestingLevel, + parentFieldsPermissions, + parentIsLocalized, + parentPath, + parentSchemaPath, + path, + req, + schemaPath, + selectedLocales, + valueFrom, + valueTo, +}: { + clientField: ClientField + field: Field + indexPath: string + locale?: string + modifiedOnly?: boolean + nestingLevel: number + parentFieldsPermissions: SanitizedFieldsPermissions + parentIsLocalized: boolean + path: string + schemaPath: string + valueFrom: unknown + valueTo: unknown +} & Omit< + BuildVersionFieldsArgs, + | 'fields' + | 'fieldsPermissions' + | 'parentIndexPath' + | 'versionFromSiblingData' + | 'versionToSiblingData' +>): BaseVersionField | null => { + let hasReadPermission: boolean = false + let fieldPermissions: SanitizedFieldPermissions | undefined = undefined + + if (typeof parentFieldsPermissions === 'boolean') { + hasReadPermission = parentFieldsPermissions + fieldPermissions = parentFieldsPermissions + } else { + if ('name' in field) { + fieldPermissions = parentFieldsPermissions?.[field.name] + if (typeof fieldPermissions === 'boolean') { + hasReadPermission = fieldPermissions + } else if (typeof fieldPermissions?.read === 'boolean') { + hasReadPermission = fieldPermissions.read + } + } else { + // If the field is unnamed and parentFieldsPermissions is an object, its sub-fields will decide their read permissions state. + // As far as this field is concerned, we are allowed to read it, as we need to reach its sub-fields to determine their read permissions. + hasReadPermission = true + } + } + + if (!hasReadPermission) { + // HasReadPermission is only valid if the field has a name. E.g. for a tabs field it would incorrectly return `false`. + return null + } + + if (modifiedOnly && dequal(valueFrom, valueTo)) { + return null + } + + let CustomComponent = customDiffComponents?.[field.type] + if (field?.type === 'richText') { + if (!field?.editor) { + throw new MissingEditorProp(field) // while we allow disabling editor functionality, you should not have any richText fields defined if you do not have an editor + } + + if (typeof field?.editor === 'function') { + throw new Error('Attempted to access unsanitized rich text editor.') + } + + if (field.editor.CellComponent) { + CustomComponent = field.editor.DiffComponent + } + } + if (field?.admin?.components?.Diff) { + CustomComponent = field.admin.components.Diff + } + + const DefaultComponent = diffComponents?.[field.type] + + const baseVersionField: BaseVersionField = { + type: field.type, + fields: [], + path, + schemaPath, + } + + if (field.type === 'tabs' && 'tabs' in field) { + baseVersionField.tabs = [] + let tabIndex = -1 + for (const tab of field.tabs) { + tabIndex++ + const isNamedTab = tabHasName(tab) + + const tabAsField = { ...tab, type: 'tab' } + + const { + indexPath: tabIndexPath, + path: tabPath, + schemaPath: tabSchemaPath, + } = getFieldPaths({ + field: tabAsField, + index: tabIndex, + parentIndexPath: indexPath, + parentPath: path, + parentSchemaPath: schemaPath, + }) + + let tabFieldsPermissions: SanitizedFieldsPermissions = undefined + + // The tabs field does not have its own permissions as it's unnamed => use parentFieldsPermissions + if (typeof parentFieldsPermissions === 'boolean') { + tabFieldsPermissions = parentFieldsPermissions + } else { + if ('name' in tab) { + const tabPermissions = parentFieldsPermissions?.[tab.name] + if (typeof tabPermissions === 'boolean') { + tabFieldsPermissions = tabPermissions + } else { + tabFieldsPermissions = tabPermissions?.fields + } + } else { + tabFieldsPermissions = parentFieldsPermissions + } + } + + const tabVersion = { + name: 'name' in tab ? tab.name : null, + fields: buildVersionFields({ + clientSchemaMap, + customDiffComponents, + entitySlug, + fields: tab.fields, + fieldsPermissions: tabFieldsPermissions, + i18n, + modifiedOnly, + nestingLevel: nestingLevel + 1, + parentIndexPath: isNamedTab ? '' : tabIndexPath, + parentIsLocalized: parentIsLocalized || tab.localized, + parentPath: isNamedTab ? tabPath : 'name' in field ? path : parentPath, + parentSchemaPath: tabSchemaPath, + req, + selectedLocales, + versionFromSiblingData: 'name' in tab ? valueFrom?.[tab.name] : valueFrom, + versionToSiblingData: 'name' in tab ? valueTo?.[tab.name] : valueTo, + }).versionFields, + label: typeof tab.label === 'function' ? tab.label({ i18n, t: i18n.t }) : tab.label, + } + if (tabVersion?.fields?.length) { + baseVersionField.tabs.push(tabVersion) + } + } + + if (modifiedOnly && !baseVersionField.tabs.length) { + return null + } + } // At this point, we are dealing with a `row`, `collapsible`, array`, etc + else if ('fields' in field) { + let subFieldsPermissions: SanitizedFieldsPermissions = undefined + + if ('name' in field && typeof fieldPermissions !== 'undefined') { + // Named fields like arrays + subFieldsPermissions = + typeof fieldPermissions === 'boolean' ? fieldPermissions : fieldPermissions.fields + } else { + // Unnamed fields like collapsible and row inherit directly from parent permissions + subFieldsPermissions = parentFieldsPermissions + } + + if (field.type === 'array' && (valueTo || valueFrom)) { + const maxLength = Math.max( + Array.isArray(valueTo) ? valueTo.length : 0, + Array.isArray(valueFrom) ? valueFrom.length : 0, + ) + baseVersionField.rows = [] + + for (let i = 0; i < maxLength; i++) { + const fromRow = (Array.isArray(valueFrom) && valueFrom?.[i]) || {} + const toRow = (Array.isArray(valueTo) && valueTo?.[i]) || {} + + const versionFields = buildVersionFields({ + clientSchemaMap, + customDiffComponents, + entitySlug, + fields: field.fields, + fieldsPermissions: subFieldsPermissions, + i18n, + modifiedOnly, + nestingLevel: nestingLevel + 1, + parentIndexPath: 'name' in field ? '' : indexPath, + parentIsLocalized: parentIsLocalized || field.localized, + parentPath: ('name' in field ? path : parentPath) + '.' + i, + parentSchemaPath: schemaPath, + req, + selectedLocales, + versionFromSiblingData: fromRow, + versionToSiblingData: toRow, + }).versionFields + + if (versionFields?.length) { + baseVersionField.rows[i] = versionFields + } + } + + if (!baseVersionField.rows?.length && modifiedOnly) { + return null + } + } else { + baseVersionField.fields = buildVersionFields({ + clientSchemaMap, + customDiffComponents, + entitySlug, + fields: field.fields, + fieldsPermissions: subFieldsPermissions, + i18n, + modifiedOnly, + nestingLevel: field.type !== 'row' ? nestingLevel + 1 : nestingLevel, + parentIndexPath: 'name' in field ? '' : indexPath, + parentIsLocalized: parentIsLocalized || ('localized' in field && field.localized), + parentPath: 'name' in field ? path : parentPath, + parentSchemaPath: schemaPath, + req, + selectedLocales, + versionFromSiblingData: valueFrom as object, + versionToSiblingData: valueTo as object, + }).versionFields + + if (modifiedOnly && !baseVersionField.fields?.length) { + return null + } + } + } else if (field.type === 'blocks') { + baseVersionField.rows = [] + + const maxLength = Math.max( + Array.isArray(valueTo) ? valueTo.length : 0, + Array.isArray(valueFrom) ? valueFrom.length : 0, + ) + + for (let i = 0; i < maxLength; i++) { + const fromRow = (Array.isArray(valueFrom) && valueFrom?.[i]) || {} + const toRow = (Array.isArray(valueTo) && valueTo?.[i]) || {} + + const blockSlugToMatch: string = toRow?.blockType ?? fromRow?.blockType + const toBlock = + req.payload.blocks[blockSlugToMatch] ?? + ((field.blockReferences ?? field.blocks).find( + (block) => typeof block !== 'string' && block.slug === blockSlugToMatch, + ) as FlattenedBlock | undefined) + + let fields = [] + + if (toRow.blockType === fromRow.blockType) { + fields = toBlock.fields + } else { + const fromBlockSlugToMatch: string = toRow?.blockType ?? fromRow?.blockType + + const fromBlock = + req.payload.blocks[fromBlockSlugToMatch] ?? + ((field.blockReferences ?? field.blocks).find( + (block) => typeof block !== 'string' && block.slug === fromBlockSlugToMatch, + ) as FlattenedBlock | undefined) + + if (fromBlock) { + fields = getUniqueListBy([...toBlock.fields, ...fromBlock.fields], 'name') + } else { + fields = toBlock.fields + } + } + + let blockFieldsPermissions: SanitizedFieldsPermissions = undefined + + // fieldPermissions will be set here, as the blocks field has a name + if (typeof fieldPermissions === 'boolean') { + blockFieldsPermissions = fieldPermissions + } else if (typeof fieldPermissions?.blocks === 'boolean') { + blockFieldsPermissions = fieldPermissions.blocks + } else { + const permissionsBlockSpecific = fieldPermissions?.blocks?.[blockSlugToMatch] + if (typeof permissionsBlockSpecific === 'boolean') { + blockFieldsPermissions = permissionsBlockSpecific + } else { + blockFieldsPermissions = permissionsBlockSpecific?.fields + } + } + + const versionFields = buildVersionFields({ + clientSchemaMap, + customDiffComponents, + entitySlug, + fields, + fieldsPermissions: blockFieldsPermissions, + i18n, + modifiedOnly, + nestingLevel: nestingLevel + 1, + parentIndexPath: 'name' in field ? '' : indexPath, + parentIsLocalized: parentIsLocalized || ('localized' in field && field.localized), + parentPath: ('name' in field ? path : parentPath) + '.' + i, + parentSchemaPath: schemaPath + '.' + toBlock.slug, + req, + selectedLocales, + versionFromSiblingData: fromRow, + versionToSiblingData: toRow, + }).versionFields + + if (versionFields?.length) { + baseVersionField.rows[i] = versionFields + } + } + + if (!baseVersionField.rows?.length && modifiedOnly) { + return null + } + } + + const clientDiffProps: FieldDiffClientProps = { + baseVersionField: { + ...baseVersionField, + CustomComponent: undefined, + }, + /** + * TODO: Change to valueFrom in 4.0 + */ + comparisonValue: valueFrom, + /** + * @deprecated remove in 4.0. Each field should handle its own diffing logic + */ + diffMethod: 'diffWordsWithSpace', + field: clientField, + fieldPermissions: + typeof fieldPermissions === 'undefined' ? parentFieldsPermissions : fieldPermissions, + parentIsLocalized, + + nestingLevel: nestingLevel ? nestingLevel : undefined, + /** + * TODO: Change to valueTo in 4.0 + */ + versionValue: valueTo, + } + if (locale) { + clientDiffProps.locale = locale + } + + const serverDiffProps: FieldDiffServerProps = { + ...clientDiffProps, + clientField, + field, + i18n, + req, + selectedLocales, + } + + baseVersionField.CustomComponent = RenderServerComponent({ + clientProps: clientDiffProps, + Component: CustomComponent, + Fallback: DefaultComponent, + importMap: req.payload.importMap, + key: 'diff component', + serverProps: serverDiffProps, + }) + + return baseVersionField +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx new file mode 100644 index 00000000000..4ea57478baa --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Collapsible/index.tsx @@ -0,0 +1,46 @@ +'use client' +import type { CollapsibleFieldDiffClientComponent } from 'payload' + +import { getTranslation } from '@payloadcms/translations' +import React from 'react' + +import { useTranslation } from '../../../../../providers/Translation/index.js' +import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js' +import { DiffCollapser } from '../../DiffCollapser/index.js' +import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' + +const baseClass = 'collapsible-diff' + +export const Collapsible: CollapsibleFieldDiffClientComponent = ({ + baseVersionField, + comparisonValue: valueFrom, + field, + parentIsLocalized, + versionValue: valueTo, +}) => { + const { i18n } = useTranslation() + const { selectedLocales } = useSelectedLocales() + + if (!baseVersionField.fields?.length) { + return null + } + + return ( +
    + {getTranslation(field.label, i18n)} + } + locales={selectedLocales} + parentIsLocalized={parentIsLocalized || field.localized} + valueFrom={valueFrom} + valueTo={valueTo} + > + + +
    + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Date/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Date/index.scss new file mode 100644 index 00000000000..3b41515ca11 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Date/index.scss @@ -0,0 +1,12 @@ +@layer payload-default { + .date-diff { + p *[data-match-type='delete'] { + color: unset !important; + background-color: unset !important; + } + p *[data-match-type='create'] { + color: unset !important; + background-color: unset !important; + } + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx new file mode 100644 index 00000000000..21e2fa60bff --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Date/index.tsx @@ -0,0 +1,78 @@ +'use client' +import type { DateFieldDiffClientComponent } from 'payload' + +import React from 'react' + +import { FieldDiffContainer } from '../../../../../elements/FieldDiffContainer/index.js' +import { + escapeDiffHTML, + getHTMLDiffComponents, + unescapeDiffHTML, +} from '../../../../../elements/HTMLDiff/index.js' +import { useConfig } from '../../../../../providers/Config/index.js' +import { useTranslation } from '../../../../../providers/Translation/index.js' +import { formatDate } from '../../../../../utilities/formatDocTitle/formatDateTitle.js' +import './index.scss' + +const baseClass = 'date-diff' + +export const DateDiffComponent: DateFieldDiffClientComponent = ({ + comparisonValue: valueFrom, + field, + locale, + nestingLevel, + versionValue: valueTo, +}) => { + const { i18n } = useTranslation() + const { + config: { + admin: { dateFormat }, + }, + } = useConfig() + + const formattedFromDate = valueFrom + ? formatDate({ + date: typeof valueFrom === 'string' ? new Date(valueFrom) : (valueFrom as Date), + i18n, + pattern: dateFormat, + }) + : '' + + const formattedToDate = valueTo + ? formatDate({ + date: typeof valueTo === 'string' ? new Date(valueTo) : (valueTo as Date), + i18n, + pattern: dateFormat, + }) + : '' + + const escapedFromDate = escapeDiffHTML(formattedFromDate) + const escapedToDate = escapeDiffHTML(formattedToDate) + + const { From, To } = getHTMLDiffComponents({ + fromHTML: + `

    ` + + escapedFromDate + + '

    ', + postProcess: unescapeDiffHTML, + toHTML: + `

    ` + + escapedToDate + + '

    ', + tokenizeByCharacter: false, + }) + + return ( + + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Group/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Group/index.scss new file mode 100644 index 00000000000..6a2af115c2e --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Group/index.scss @@ -0,0 +1,9 @@ +@layer payload-default { + .group-diff { + &__locale-label { + &--no-label { + color: var(--theme-elevation-600); + } + } + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx new file mode 100644 index 00000000000..d4b5edd4928 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Group/index.tsx @@ -0,0 +1,53 @@ +'use client' +import type { GroupFieldDiffClientComponent } from 'payload' + +import { getTranslation } from '@payloadcms/translations' + +import './index.scss' + +import React from 'react' + +import { useTranslation } from '../../../../../providers/Translation/index.js' +import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js' +import { DiffCollapser } from '../../DiffCollapser/index.js' +import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' + +const baseClass = 'group-diff' + +export const Group: GroupFieldDiffClientComponent = ({ + baseVersionField, + comparisonValue: valueFrom, + field, + locale, + parentIsLocalized, + versionValue: valueTo, +}) => { + const { i18n } = useTranslation() + const { selectedLocales } = useSelectedLocales() + + return ( +
    + + {locale && {locale}} + {getTranslation(field.label, i18n)} + + ) : ( + + <{i18n.t('version:noLabelGroup')}> + + ) + } + locales={selectedLocales} + parentIsLocalized={parentIsLocalized || field.localized} + valueFrom={valueFrom} + valueTo={valueTo} + > + + +
    + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss new file mode 100644 index 00000000000..96b430610b0 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss @@ -0,0 +1,59 @@ +@layer payload-default { + .iterable-diff { + &-label-container { + position: relative; + height: 20px; + display: flex; + flex-direction: row; + height: 100%; + } + + &-label-prefix { + background-color: var(--theme-bg); + position: relative; + width: calc(var(--base) * 0.5); + height: 16px; + margin-left: calc((var(--base) * -0.5) - 5px); + margin-right: calc(var(--base) * 0.5); + + &::before { + content: ''; + position: absolute; + left: 1px; + top: 8px; + transform: translateY(-50%); + width: 6px; + height: 6px; + background-color: var(--theme-elevation-200); + border-radius: 50%; + margin-right: 5px; + } + } + &__label { + font-weight: 400; + color: var(--theme-elevation-600); + } + + &__locale-label { + background: var(--theme-elevation-100); + border-radius: var(--style-radius-s); + padding: calc(var(--base) * 0.2); + // border-radius: $style-radius-m; + [dir='ltr'] & { + margin-right: calc(var(--base) * 0.25); + } + [dir='rtl'] & { + margin-left: calc(var(--base) * 0.25); + } + } + + // Space between each row + &__row:not(:first-of-type) { + margin-top: calc(var(--base) * 0.5); + } + + &__no-rows { + color: var(--theme-elevation-400); + } + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx new file mode 100644 index 00000000000..ce16e3fc9a0 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx @@ -0,0 +1,121 @@ +'use client' + +import type { FieldDiffClientProps } from 'payload' + +import { getTranslation } from '@payloadcms/translations' +import { fieldIsArrayType, fieldIsBlockType } from 'payload/shared' +import React from 'react' + +import './index.scss' +import { useConfig } from '../../../../../providers/Config/index.js' +import { useTranslation } from '../../../../../providers/Translation/index.js' +import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js' +import { DiffCollapser } from '../../DiffCollapser/index.js' +import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' +import { getFieldsForRowComparison } from '../../utilities/getFieldsForRowComparison.js' + +const baseClass = 'iterable-diff' + +export const Iterable: React.FC = ({ + baseVersionField, + comparisonValue: valueFrom, + field, + locale, + parentIsLocalized, + versionValue: valueTo, +}) => { + const { i18n, t } = useTranslation() + const { selectedLocales } = useSelectedLocales() + const { config } = useConfig() + + if (!fieldIsArrayType(field) && !fieldIsBlockType(field)) { + throw new Error(`Expected field to be an array or blocks type but got: ${field.type}`) + } + + const valueToRowCount = Array.isArray(valueTo) ? valueTo.length : 0 + const valueFromRowCount = Array.isArray(valueFrom) ? valueFrom.length : 0 + const maxRows = Math.max(valueToRowCount, valueFromRowCount) + + return ( +
    + + {locale && {locale}} + {getTranslation(field.label, i18n)} + + ) + } + locales={selectedLocales} + parentIsLocalized={parentIsLocalized} + valueFrom={valueFrom} + valueTo={valueTo} + > + {maxRows > 0 && ( +
    + {Array.from({ length: maxRows }, (_, i) => { + const valueToRow = valueTo?.[i] || {} + const valueFromRow = valueFrom?.[i] || {} + + const { fields, versionFields } = getFieldsForRowComparison({ + baseVersionField, + config, + field, + row: i, + valueFromRow, + valueToRow, + }) + + if (!versionFields?.length) { + // Rows without a diff create "holes" in the baseVersionField.rows (=versionFields) array - this is to maintain the correct row indexes. + // It does mean that this row has no diff and should not be rendered => skip it. + return null + } + + const rowNumber = String(i + 1).padStart(2, '0') + const rowLabel = fieldIsArrayType(field) + ? `${t('general:item')} ${rowNumber}` + : `${t('fields:block')} ${rowNumber}` + + return ( +
    + +
    + {rowLabel} +
    + } + locales={selectedLocales} + parentIsLocalized={parentIsLocalized || field.localized} + valueFrom={valueFromRow} + valueTo={valueToRow} + > + + +
    + ) + })} +
    + )} + {maxRows === 0 && ( +
    + {i18n.t('version:noRowsFound', { + label: + 'labels' in field && field.labels?.plural + ? getTranslation(field.labels.plural, i18n) + : i18n.t('general:rows'), + })} +
    + )} + +
    + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts new file mode 100644 index 00000000000..fe7d7084c9b --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts @@ -0,0 +1,100 @@ +import type { PayloadRequest, RelationshipField, TypeWithID } from 'payload' + +import { + fieldAffectsData, + fieldIsPresentationalOnly, + fieldShouldBeLocalized, + flattenTopLevelFields, +} from 'payload/shared' + +import type { RelationshipValue } from './index.js' + +export const generateLabelFromValue = async ({ + field, + locale, + parentIsLocalized, + req, + value, +}: { + field: RelationshipField + locale: string + parentIsLocalized: boolean + req: PayloadRequest + value: RelationshipValue +}): Promise => { + let relatedDoc: number | string | TypeWithID + let relationTo: string = field.relationTo as string + let valueToReturn: string = '' + + if (typeof value === 'object' && 'relationTo' in value) { + relatedDoc = value.value + relationTo = value.relationTo + } else { + // Non-polymorphic relationship or deleted document + relatedDoc = value + } + + const relatedCollection = req.payload.collections[relationTo].config + + const useAsTitle = relatedCollection?.admin?.useAsTitle + + const flattenedRelatedCollectionFields = flattenTopLevelFields(relatedCollection.fields, { + moveSubFieldsToTop: true, + }) + + const useAsTitleField = flattenedRelatedCollectionFields.find( + (f) => fieldAffectsData(f) && !fieldIsPresentationalOnly(f) && f.name === useAsTitle, + ) + let titleFieldIsLocalized = false + + if (useAsTitleField && fieldAffectsData(useAsTitleField)) { + titleFieldIsLocalized = fieldShouldBeLocalized({ field: useAsTitleField, parentIsLocalized }) + } + + if (typeof relatedDoc?.[useAsTitle] !== 'undefined') { + valueToReturn = relatedDoc[useAsTitle] + } else if (typeof relatedDoc === 'string' || typeof relatedDoc === 'number') { + // When relatedDoc is just an ID (due to maxDepth: 0), fetch the document to get the title + try { + const fetchedDoc = await req.payload.findByID({ + id: relatedDoc, + collection: relationTo, + depth: 0, + locale: titleFieldIsLocalized ? locale : undefined, + req, + select: { + [useAsTitle]: true, + }, + }) + + if (fetchedDoc?.[useAsTitle]) { + valueToReturn = fetchedDoc[useAsTitle] + } else { + valueToReturn = `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}` + } + } catch (error) { + // Document might have been deleted or user doesn't have access + valueToReturn = `${req.i18n.t('general:untitled')} - ID: ${relatedDoc}` + } + } else { + valueToReturn = String(typeof relatedDoc === 'object' ? relatedDoc.id : relatedDoc) + } + + if ( + typeof valueToReturn === 'object' && + valueToReturn && + titleFieldIsLocalized && + valueToReturn?.[locale] + ) { + valueToReturn = valueToReturn[locale] + } + + if ( + (valueToReturn && typeof valueToReturn === 'object' && valueToReturn !== null) || + typeof valueToReturn !== 'string' + ) { + valueToReturn = JSON.stringify(valueToReturn) + } + + return valueToReturn +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss new file mode 100644 index 00000000000..291ae9ccddd --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss @@ -0,0 +1,91 @@ +@import '../../../../../scss/styles.scss'; + +@layer payload-default { + .relationship-diff-container .field-diff-content { + padding: 0; + background: unset; + } + + .relationship-diff-container--hasOne { + .relationship-diff { + min-width: 100%; + max-width: fit-content; + } + } + + .relationship-diff-container--hasMany .field-diff-content { + background: var(--theme-elevation-50); + padding: 10px; + + .html-diff { + display: flex; + min-width: 0; + max-width: max-content; + flex-wrap: wrap; + gap: calc(var(--base) * 0.5); + } + + .relationship-diff { + padding: calc(var(--base) * 0.15) calc(var(--base) * 0.3); + } + } + + .relationship-diff { + @extend %body; + display: flex; + align-items: center; + border-radius: $style-radius-s; + border: 1px solid var(--theme-elevation-150); + position: relative; + font-family: var(--font-body); + max-height: calc(var(--base) * 3); + padding: calc(var(--base) * 0.35); + + &[data-match-type='create'] { + border-color: var(--diff-create-pill-border); + color: var(--diff-create-parent-color); + + * { + color: var(--diff-create-parent-color); + } + } + + &[data-match-type='delete'] { + border-color: var(--diff-delete-pill-border); + color: var(--diff-delete-parent-color); + background-color: var(--diff-delete-pill-bg); + text-decoration-line: none !important; + + * { + color: var(--diff-delete-parent-color); + text-decoration-line: none; + } + + .relationship-diff__info { + text-decoration-line: line-through; + } + } + + &__info { + font-weight: 500; + } + + &__pill { + border-radius: $style-radius-s; + margin: 0 calc(var(--base) * 0.4) 0 calc(var(--base) * 0.2); + padding: 0 calc(var(--base) * 0.1); + background-color: var(--theme-elevation-150); + color: var(--theme-elevation-750); + } + + &[data-match-type='create'] .relationship-diff__pill { + background-color: var(--diff-create-parent-bg); + color: var(--diff-create-pill-color); + } + + &[data-match-type='delete'] .relationship-diff__pill { + background-color: var(--diff-delete-parent-bg); + color: var(--diff-delete-pill-color); + } + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx new file mode 100644 index 00000000000..a4d50ef0cb1 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx @@ -0,0 +1,337 @@ +import type { + PayloadRequest, + RelationshipField, + RelationshipFieldDiffServerComponent, + TypeWithID, +} from 'payload' + +import { getTranslation, type I18nClient } from '@payloadcms/translations' +import React from 'react' + +import { FieldDiffContainer } from '../../../../../elements/FieldDiffContainer/index.js' +import './index.scss' +import { getHTMLDiffComponents } from '../../../../../elements/HTMLDiff/index.js' +import { generateLabelFromValue } from './generateLabelFromValue.js' + +const baseClass = 'relationship-diff' + +export type RelationshipValue = + | { relationTo: string; value: number | string | TypeWithID } + | (number | string | TypeWithID) + +export const Relationship: RelationshipFieldDiffServerComponent = ({ + comparisonValue: valueFrom, + field, + i18n, + locale, + nestingLevel, + parentIsLocalized, + req, + versionValue: valueTo, +}) => { + const hasMany = + ('hasMany' in field && field.hasMany) || + // Check data structure (handles block swaps where schema may not match data) + Array.isArray(valueFrom) || + Array.isArray(valueTo) + const polymorphic = Array.isArray(field.relationTo) + + if (hasMany) { + return ( + + ) + } + + return ( + + ) +} + +export const SingleRelationshipDiff: React.FC<{ + field: RelationshipField + i18n: I18nClient + locale: string + nestingLevel?: number + parentIsLocalized: boolean + polymorphic: boolean + req: PayloadRequest + valueFrom: RelationshipValue + valueTo: RelationshipValue +}> = async (args) => { + const { + field, + i18n, + locale, + nestingLevel, + parentIsLocalized, + polymorphic, + req, + valueFrom, + valueTo, + } = args + + const ReactDOMServer = (await import('react-dom/server')).default + + const localeToUse = + locale ?? + (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? + 'en' + + // Generate titles asynchronously before creating components + const [titleFrom, titleTo] = await Promise.all([ + valueFrom + ? generateLabelFromValue({ + field, + locale: localeToUse, + parentIsLocalized, + req, + value: valueFrom, + }) + : Promise.resolve(null), + valueTo + ? generateLabelFromValue({ + field, + locale: localeToUse, + parentIsLocalized, + req, + value: valueTo, + }) + : Promise.resolve(null), + ]) + + const FromComponent = valueFrom ? ( + + ) : null + const ToComponent = valueTo ? ( + + ) : null + + const fromHTML = FromComponent ? ReactDOMServer.renderToStaticMarkup(FromComponent) : `

    ` + const toHTML = ToComponent ? ReactDOMServer.renderToStaticMarkup(ToComponent) : `

    ` + + const diff = getHTMLDiffComponents({ + fromHTML, + toHTML, + tokenizeByCharacter: false, + }) + + return ( + + ) +} + +const ManyRelationshipDiff: React.FC<{ + field: RelationshipField + i18n: I18nClient + locale: string + nestingLevel?: number + parentIsLocalized: boolean + polymorphic: boolean + req: PayloadRequest + valueFrom: RelationshipValue[] | undefined + valueTo: RelationshipValue[] | undefined +}> = async ({ + field, + i18n, + locale, + nestingLevel, + parentIsLocalized, + polymorphic, + req, + valueFrom, + valueTo, +}) => { + const ReactDOMServer = (await import('react-dom/server')).default + + const fromArr = Array.isArray(valueFrom) ? valueFrom : [] + const toArr = Array.isArray(valueTo) ? valueTo : [] + + const localeToUse = + locale ?? + (req.payload.config?.localization && req.payload.config?.localization?.defaultLocale) ?? + 'en' + + // Generate all titles asynchronously before creating components + const [titlesFrom, titlesTo] = await Promise.all([ + Promise.all( + fromArr.map((val) => + generateLabelFromValue({ + field, + locale: localeToUse, + parentIsLocalized, + req, + value: val, + }), + ), + ), + Promise.all( + toArr.map((val) => + generateLabelFromValue({ + field, + locale: localeToUse, + parentIsLocalized, + req, + value: val, + }), + ), + ), + ]) + + const makeNodes = (list: RelationshipValue[], titles: string[]) => + list.map((val, idx) => ( + + )) + + const fromNodes = + fromArr.length > 0 ? makeNodes(fromArr, titlesFrom) :

    + + const toNodes = + toArr.length > 0 ? makeNodes(toArr, titlesTo) :

    + + const fromHTML = ReactDOMServer.renderToStaticMarkup(fromNodes) + const toHTML = ReactDOMServer.renderToStaticMarkup(toNodes) + + const diff = getHTMLDiffComponents({ + fromHTML, + toHTML, + tokenizeByCharacter: false, + }) + + return ( + + ) +} + +const RelationshipDocumentDiff = ({ + field, + i18n, + locale, + parentIsLocalized, + polymorphic, + relationTo, + req, + showPill = false, + title, + value, +}: { + field: RelationshipField + i18n: I18nClient + locale: string + parentIsLocalized: boolean + polymorphic: boolean + relationTo: string + req: PayloadRequest + showPill?: boolean + title: null | string + value: RelationshipValue +}) => { + let pillLabel: null | string = null + if (showPill) { + const collectionConfig = req.payload.collections[relationTo].config + pillLabel = collectionConfig.labels?.singular + ? getTranslation(collectionConfig.labels.singular, i18n) + : collectionConfig.slug + } + + return ( +
    + {pillLabel && ( + + {pillLabel} + + )} + + {title} + +
    + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx new file mode 100644 index 00000000000..db73c912dc0 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Row/index.tsx @@ -0,0 +1,16 @@ +'use client' +import type { RowFieldDiffClientComponent } from 'payload' + +import React from 'react' + +import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' + +const baseClass = 'row-diff' + +export const Row: RowFieldDiffClientComponent = ({ baseVersionField }) => { + return ( +
    + +
    + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss new file mode 100644 index 00000000000..8ebe408f32f --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Select/index.scss @@ -0,0 +1,4 @@ +@layer payload-default { + .select-diff { + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx new file mode 100644 index 00000000000..1cd5ec2841e --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx @@ -0,0 +1,122 @@ +'use client' +import type { I18nClient } from '@payloadcms/translations' +import type { Option, SelectField, SelectFieldDiffClientComponent } from 'payload' + +import { getTranslation } from '@payloadcms/translations' +import React from 'react' + +import { FieldDiffContainer } from '../../../../../elements/FieldDiffContainer/index.js' +import { + escapeDiffHTML, + getHTMLDiffComponents, + unescapeDiffHTML, +} from '../../../../../elements/HTMLDiff/index.js' +import { useTranslation } from '../../../../../providers/Translation/index.js' +import './index.scss' + +const baseClass = 'select-diff' + +const getOptionsToRender = ( + value: string, + options: SelectField['options'], + hasMany: boolean, +): Option | Option[] => { + if (hasMany && Array.isArray(value)) { + return value.map( + (val) => + options.find((option) => (typeof option === 'string' ? option : option.value) === val) || + String(val), + ) + } + return ( + options.find((option) => (typeof option === 'string' ? option : option.value) === value) || + String(value) + ) +} + +/** + * Translates option labels while ensuring they are strings. + * If `options.label` is a JSX element, it falls back to `options.value` because `DiffViewer` + * expects all values to be strings. + */ +const getTranslatedOptions = (options: Option | Option[], i18n: I18nClient): string => { + if (Array.isArray(options)) { + return options + .map((option) => { + if (typeof option === 'string') { + return option + } + const translatedLabel = getTranslation(option.label, i18n) + + // Ensure the result is a string, otherwise use option.value + return typeof translatedLabel === 'string' ? translatedLabel : option.value + }) + .join(', ') + } + + if (typeof options === 'string') { + return options + } + + const translatedLabel = getTranslation(options.label, i18n) + + return typeof translatedLabel === 'string' ? translatedLabel : options.value +} + +export const Select: SelectFieldDiffClientComponent = ({ + comparisonValue: valueFrom, + diffMethod, + field, + locale, + nestingLevel, + versionValue: valueTo, +}) => { + const { i18n } = useTranslation() + + const options = 'options' in field && field.options + + const renderedValueFrom = + typeof valueFrom !== 'undefined' + ? getTranslatedOptions( + getOptionsToRender( + typeof valueFrom === 'string' ? valueFrom : JSON.stringify(valueFrom), + options, + field.hasMany, + ), + i18n, + ) + : '' + + const renderedValueTo = + typeof valueTo !== 'undefined' + ? getTranslatedOptions( + getOptionsToRender( + typeof valueTo === 'string' ? valueTo : JSON.stringify(valueTo), + options, + field.hasMany, + ), + i18n, + ) + : '' + + const { From, To } = getHTMLDiffComponents({ + fromHTML: '

    ' + escapeDiffHTML(renderedValueFrom) + '

    ', + postProcess: unescapeDiffHTML, + toHTML: '

    ' + escapeDiffHTML(renderedValueTo) + '

    ', + tokenizeByCharacter: true, + }) + + return ( + + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.scss new file mode 100644 index 00000000000..02f067d9c9b --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.scss @@ -0,0 +1,9 @@ +@layer payload-default { + .tabs-diff { + // Space between each tab or tab locale + &__tab:not(:first-of-type), + &__tab-locale:not(:first-of-type) { + margin-top: var(--base); + } + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx new file mode 100644 index 00000000000..31a0a34117e --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx @@ -0,0 +1,120 @@ +'use client' +import type { + ClientTab, + FieldDiffClientProps, + TabsFieldClient, + TabsFieldDiffClientComponent, + VersionTab, +} from 'payload' + +import { getTranslation } from '@payloadcms/translations' +import React from 'react' + +import { useTranslation } from '../../../../../providers/Translation/index.js' +import './index.scss' +import { useSelectedLocales } from '../../../Default/SelectedLocalesContext.js' +import { DiffCollapser } from '../../DiffCollapser/index.js' +import { RenderVersionFieldsToDiff } from '../../RenderVersionFieldsToDiff.js' + +const baseClass = 'tabs-diff' + +export const Tabs: TabsFieldDiffClientComponent = (props) => { + const { baseVersionField, comparisonValue: valueFrom, field, versionValue: valueTo } = props + const { selectedLocales } = useSelectedLocales() + + return ( +
    + {baseVersionField.tabs.map((tab, i) => { + if (!tab?.fields?.length) { + return null + } + const fieldTab = field.tabs?.[i] + if (!fieldTab) { + return null + } + return ( +
    + {(() => { + if ('name' in fieldTab && selectedLocales && fieldTab.localized) { + // Named localized tab + return selectedLocales.map((locale, index) => { + const localizedTabProps: TabProps = { + ...props, + comparisonValue: valueFrom?.[tab.name]?.[locale], + fieldTab, + locale, + tab, + versionValue: valueTo?.[tab.name]?.[locale], + } + return ( +
    +
    + +
    +
    + ) + }) + } else if ('name' in tab && tab.name) { + // Named tab + const namedTabProps: TabProps = { + ...props, + comparisonValue: valueFrom?.[tab.name], + fieldTab, + tab, + versionValue: valueTo?.[tab.name], + } + return + } else { + // Unnamed tab + return + } + })()} +
    + ) + })} +
    + ) +} + +type TabProps = { + fieldTab: ClientTab + tab: VersionTab +} & FieldDiffClientProps + +const Tab: React.FC = ({ + comparisonValue: valueFrom, + fieldTab, + locale, + parentIsLocalized, + tab, + versionValue: valueTo, +}) => { + const { i18n } = useTranslation() + const { selectedLocales } = useSelectedLocales() + + if (!tab.fields?.length) { + return null + } + + return ( + + {locale && {locale}} + {getTranslation(tab.label, i18n)} + + ) + } + locales={selectedLocales} + parentIsLocalized={parentIsLocalized || fieldTab.localized} + valueFrom={valueFrom} + valueTo={valueTo} + > + + + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss new file mode 100644 index 00000000000..dcb659cc593 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Text/index.scss @@ -0,0 +1,4 @@ +@layer payload-default { + .text-diff { + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx new file mode 100644 index 00000000000..9748629c261 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx @@ -0,0 +1,98 @@ +'use client' +import type { TextFieldDiffClientComponent } from 'payload' + +import React from 'react' + +import { FieldDiffContainer } from '../../../../../elements/FieldDiffContainer/index.js' +import { + escapeDiffHTML, + getHTMLDiffComponents, + unescapeDiffHTML, +} from '../../../../../elements/HTMLDiff/index.js' +import { useTranslation } from '../../../../../providers/Translation/index.js' +import './index.scss' + +const baseClass = 'text-diff' + +function formatValue(value: unknown): { + tokenizeByCharacter: boolean + value: string +} { + if (typeof value === 'string') { + return { tokenizeByCharacter: true, value: escapeDiffHTML(value) } + } + if (typeof value === 'number') { + return { + tokenizeByCharacter: true, + value: String(value), + } + } + if (typeof value === 'boolean') { + return { + tokenizeByCharacter: false, + value: String(value), + } + } + + if (value && typeof value === 'object') { + return { + tokenizeByCharacter: false, + value: `
    ${escapeDiffHTML(JSON.stringify(value, null, 2))}
    `, + } + } + + return { + tokenizeByCharacter: true, + value: undefined, + } +} + +export const Text: TextFieldDiffClientComponent = ({ + comparisonValue: valueFrom, + field, + locale, + nestingLevel, + versionValue: valueTo, +}) => { + const { i18n } = useTranslation() + + let placeholder = '' + + if (valueTo == valueFrom) { + placeholder = `` + } + + const formattedValueFrom = formatValue(valueFrom) + const formattedValueTo = formatValue(valueTo) + + let tokenizeByCharacter = true + if (formattedValueFrom.value?.length) { + tokenizeByCharacter = formattedValueFrom.tokenizeByCharacter + } else if (formattedValueTo.value?.length) { + tokenizeByCharacter = formattedValueTo.tokenizeByCharacter + } + + const renderedValueFrom = formattedValueFrom.value ?? placeholder + const renderedValueTo: string = formattedValueTo.value ?? placeholder + + const { From, To } = getHTMLDiffComponents({ + fromHTML: '

    ' + renderedValueFrom + '

    ', + postProcess: unescapeDiffHTML, + toHTML: '

    ' + renderedValueTo + '

    ', + tokenizeByCharacter, + }) + + return ( + + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss new file mode 100644 index 00000000000..37cf022916f --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Upload/index.scss @@ -0,0 +1,121 @@ +@import '../../../../../scss/styles.scss'; + +@layer payload-default { + .upload-diff-container .field-diff-content { + padding: 0; + background: unset; + } + + .upload-diff-hasMany { + display: flex; + flex-direction: column; + gap: calc(var(--base) * 0.4); + } + + .upload-diff { + @extend %body; + min-width: 100%; + max-width: fit-content; + display: flex; + align-items: center; + background-color: var(--theme-elevation-50); + border-radius: $style-radius-s; + border: 1px solid var(--theme-elevation-150); + position: relative; + font-family: var(--font-body); + max-height: calc(var(--base) * 3); + padding: calc(var(--base) * 0.1); + + &[data-match-type='create'] { + border-color: var(--diff-create-pill-border); + color: var(--diff-create-parent-color); + + * { + color: var(--diff-create-parent-color); + } + + .upload-diff__thumbnail { + border-radius: 0px; + border-color: var(--diff-create-pill-border); + background-color: none; + } + } + + &[data-match-type='delete'] { + border-color: var(--diff-delete-pill-border); + text-decoration-line: none; + color: var(--diff-delete-parent-color); + background-color: var(--diff-delete-pill-bg); + + * { + text-decoration-line: none; + color: var(--diff-delete-parent-color); + } + + .upload-diff__thumbnail { + border-radius: 0px; + border-color: var(--diff-delete-pill-border); + background-color: none; + } + } + + &__card { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + } + + &__thumbnail { + width: calc(var(--base) * 3 - base(0.8) * 2); + height: calc(var(--base) * 3 - base(0.8) * 2); + position: relative; + overflow: hidden; + flex-shrink: 0; + border-radius: 0px; + border: 1px solid var(--theme-elevation-100); + + img, + svg { + position: absolute; + object-fit: cover; + width: 100%; + height: 100%; + border-radius: 0px; + } + } + + &__info { + flex-grow: 1; + display: flex; + align-items: flex-start; + flex-direction: column; + padding: calc(var(--base) * 0.25) calc(var(--base) * 0.6); + justify-content: space-between; + font-weight: 400; + + strong { + font-weight: 500; + } + } + + &__pill { + border-radius: $style-radius-s; + margin-left: calc(var(--base) * 0.6); + padding: 0 calc(var(--base) * 0.1); + + background-color: var(--theme-elevation-150); + color: var(--theme-elevation-750); + } + + &[data-match-type='create'] .upload-diff__pill { + background-color: var(--diff-create-parent-bg); + color: var(--diff-create-pill-color); + } + + &[data-match-type='delete'] .upload-diff__pill { + background-color: var(--diff-delete-parent-bg); + color: var(--diff-delete-pill-color); + } + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx new file mode 100644 index 00000000000..c9b10f29c17 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/Upload/index.tsx @@ -0,0 +1,308 @@ +import type { + FileData, + PayloadRequest, + TypeWithID, + UploadField, + UploadFieldDiffServerComponent, +} from 'payload' + +import { getTranslation, type I18nClient } from '@payloadcms/translations' +import React from 'react' + +import { FieldDiffContainer } from '../../../../../elements/FieldDiffContainer/index.js' +import { getHTMLDiffComponents } from '../../../../../elements/HTMLDiff/index.js' +import './index.scss' +import { File } from '../../../../../graphics/File/index.js' + +const baseClass = 'upload-diff' + +type NonPolyUploadDoc = (FileData & TypeWithID) | number | string +type PolyUploadDoc = { relationTo: string; value: (FileData & TypeWithID) | number | string } + +type UploadDoc = NonPolyUploadDoc | PolyUploadDoc + +export const Upload: UploadFieldDiffServerComponent = (args) => { + const { + comparisonValue: valueFrom, + field, + i18n, + locale, + nestingLevel, + req, + versionValue: valueTo, + } = args + const hasMany = 'hasMany' in field && field.hasMany && Array.isArray(valueTo) + const polymorphic = Array.isArray(field.relationTo) + + if (hasMany) { + return ( + + ) + } + + return ( + + ) +} + +export const HasManyUploadDiff: React.FC<{ + field: UploadField + i18n: I18nClient + locale: string + nestingLevel?: number + polymorphic: boolean + req: PayloadRequest + valueFrom: Array + valueTo: Array +}> = async (args) => { + const { field, i18n, locale, nestingLevel, polymorphic, req, valueFrom, valueTo } = args + const ReactDOMServer = (await import('react-dom/server')).default + + let From: React.ReactNode = '' + let To: React.ReactNode = '' + + const showCollectionSlug = Array.isArray(field.relationTo) + + const getUploadDocKey = (uploadDoc: UploadDoc): number | string => { + if (typeof uploadDoc === 'object' && 'relationTo' in uploadDoc) { + // Polymorphic case + const value = uploadDoc.value + return typeof value === 'object' ? value.id : value + } + // Non-polymorphic case + return typeof uploadDoc === 'object' ? uploadDoc.id : uploadDoc + } + + const FromComponents = valueFrom + ? valueFrom.map((uploadDoc) => ( + + )) + : null + const ToComponents = valueTo + ? valueTo.map((uploadDoc) => ( + + )) + : null + + const diffResult = getHTMLDiffComponents({ + fromHTML: + `
    ` + + (FromComponents + ? FromComponents.map( + (component) => `
    ${ReactDOMServer.renderToStaticMarkup(component)}
    `, + ).join('') + : '') + + '
    ', + toHTML: + `
    ` + + (ToComponents + ? ToComponents.map( + (component) => `
    ${ReactDOMServer.renderToStaticMarkup(component)}
    `, + ).join('') + : '') + + '
    ', + tokenizeByCharacter: false, + }) + From = diffResult.From + To = diffResult.To + + return ( + + ) +} + +export const SingleUploadDiff: React.FC<{ + field: UploadField + i18n: I18nClient + locale: string + nestingLevel?: number + polymorphic: boolean + req: PayloadRequest + valueFrom: UploadDoc + valueTo: UploadDoc +}> = async (args) => { + const { field, i18n, locale, nestingLevel, polymorphic, req, valueFrom, valueTo } = args + + const ReactDOMServer = (await import('react-dom/server')).default + + let From: React.ReactNode = '' + let To: React.ReactNode = '' + + const showCollectionSlug = Array.isArray(field.relationTo) + + const FromComponent = valueFrom ? ( + + ) : null + const ToComponent = valueTo ? ( + + ) : null + + const fromHtml = FromComponent + ? ReactDOMServer.renderToStaticMarkup(FromComponent) + : '

    ' + '' + '

    ' + const toHtml = ToComponent + ? ReactDOMServer.renderToStaticMarkup(ToComponent) + : '

    ' + '' + '

    ' + + const diffResult = getHTMLDiffComponents({ + fromHTML: fromHtml, + toHTML: toHtml, + tokenizeByCharacter: false, + }) + From = diffResult.From + To = diffResult.To + + return ( + + ) +} + +const UploadDocumentDiff = (args: { + i18n: I18nClient + polymorphic: boolean + relationTo: string | string[] + req: PayloadRequest + showCollectionSlug?: boolean + uploadDoc: UploadDoc +}) => { + const { i18n, polymorphic, relationTo, req, showCollectionSlug, uploadDoc } = args + + let thumbnailSRC: string = '' + + const value = polymorphic + ? (uploadDoc as { relationTo: string; value: FileData & TypeWithID }).value + : (uploadDoc as FileData & TypeWithID) + + if (value && typeof value === 'object' && 'thumbnailURL' in value) { + thumbnailSRC = + (typeof value.thumbnailURL === 'string' && value.thumbnailURL) || + (typeof value.url === 'string' && value.url) || + '' + } + + let filename: string + if (value && typeof value === 'object') { + filename = value.filename + } else { + filename = `${i18n.t('general:untitled')} - ID: ${uploadDoc as number | string}` + } + + let pillLabel: null | string = null + + if (showCollectionSlug) { + let collectionSlug: string + if (polymorphic && typeof uploadDoc === 'object' && 'relationTo' in uploadDoc) { + collectionSlug = uploadDoc.relationTo + } else { + collectionSlug = typeof relationTo === 'string' ? relationTo : relationTo[0] + } + const uploadConfig = req.payload.collections[collectionSlug].config + pillLabel = uploadConfig.labels?.singular + ? getTranslation(uploadConfig.labels.singular, i18n) + : uploadConfig.slug + } + + let id: number | string | undefined + if (polymorphic && typeof uploadDoc === 'object' && 'relationTo' in uploadDoc) { + const polyValue = uploadDoc.value + id = typeof polyValue === 'object' ? polyValue.id : polyValue + } else if (typeof uploadDoc === 'object' && 'id' in uploadDoc) { + id = uploadDoc.id + } else if (typeof uploadDoc === 'string' || typeof uploadDoc === 'number') { + id = uploadDoc + } + + const alt = + (value && typeof value === 'object' && (value as { alt?: string }).alt) || filename || '' + + return ( +
    +
    +
    + {thumbnailSRC?.length ? {alt} : } +
    + {pillLabel && ( +
    + {pillLabel} +
    + )} +
    + {filename} +
    +
    +
    + ) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/fields/index.ts b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/index.ts new file mode 100644 index 00000000000..cc00eeab186 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/fields/index.ts @@ -0,0 +1,40 @@ +import type { FieldDiffClientProps, FieldDiffServerProps, FieldTypes } from 'payload' + +import { Collapsible } from './Collapsible/index.js' +import { DateDiffComponent } from './Date/index.js' +import { Group } from './Group/index.js' +import { Iterable } from './Iterable/index.js' +import { Relationship } from './Relationship/index.js' +import { Row } from './Row/index.js' +import { Select } from './Select/index.js' +import { Tabs } from './Tabs/index.js' +import { Text } from './Text/index.js' +import { Upload } from './Upload/index.js' + +export const diffComponents: Record< + FieldTypes, + React.ComponentType +> = { + array: Iterable, + blocks: Iterable, + checkbox: Text, + code: Text, + collapsible: Collapsible, + date: DateDiffComponent, + email: Text, + group: Group, + join: null, + json: Text, + number: Text, + point: Text, + radio: Select, + relationship: Relationship, + richText: Text, + row: Row, + select: Select, + tabs: Tabs, + text: Text, + textarea: Text, + ui: null, + upload: Upload, +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/index.scss b/packages/ui/src/views/Version/RenderFieldsToDiff/index.scss new file mode 100644 index 00000000000..adeeefc5cb9 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/index.scss @@ -0,0 +1,24 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .render-field-diffs { + display: flex; + flex-direction: column; + gap: var(--base); + + [role='banner'] { + display: none !important; + } + + &__field { + overflow-wrap: anywhere; + display: flex; + flex-direction: column; + gap: var(--base); + } + + @include small-break { + gap: calc(var(--base) / 2); + } + } +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/index.tsx b/packages/ui/src/views/Version/RenderFieldsToDiff/index.tsx new file mode 100644 index 00000000000..a2e90a8424c --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/index.tsx @@ -0,0 +1,8 @@ +import { buildVersionFields, type BuildVersionFieldsArgs } from './buildVersionFields.js' +import { RenderVersionFieldsToDiff } from './RenderVersionFieldsToDiff.js' + +export const RenderDiff = (args: BuildVersionFieldsArgs): React.ReactNode => { + const { versionFields } = buildVersionFields(args) + + return +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.spec.ts b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.spec.ts new file mode 100644 index 00000000000..f3ed248ec75 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.spec.ts @@ -0,0 +1,540 @@ +import type { ClientField } from 'payload' +import { describe, it, expect } from 'vitest' + +import { countChangedFields, countChangedFieldsInRows } from './countChangedFields.js' + +describe('countChangedFields', () => { + // locales can be undefined when not configured in payload.config.js + const locales = undefined + it('should return 0 when no fields have changed', () => { + const fields: ClientField[] = [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'number' }, + ] + const valueFrom = { a: 'original', b: 123 } + const valueTo = { a: 'original', b: 123 } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(0) + }) + + it('should count simple changed fields', () => { + const fields: ClientField[] = [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'number' }, + ] + const valueFrom = { a: 'original', b: 123 } + const valueTo = { a: 'changed', b: 123 } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(1) + }) + + it('should count previously undefined fields', () => { + const fields: ClientField[] = [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'number' }, + ] + const valueFrom = {} + const valueTo = { a: 'new', b: 123 } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(2) + }) + + it('should not count the id field because it is not displayed in the version view', () => { + const fields: ClientField[] = [ + { name: 'id', type: 'text' }, + { name: 'a', type: 'text' }, + ] + const valueFrom = { id: 'original', a: 'original' } + const valueTo = { id: 'changed', a: 'original' } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(0) + }) + + it('should count changed fields inside collapsible fields', () => { + const fields: ClientField[] = [ + { + type: 'collapsible', + label: 'A collapsible field', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ] + const valueFrom = { a: 'original', b: 'original', c: 'original' } + const valueTo = { a: 'changed', b: 'changed', c: 'original' } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(2) + }) + + it('should count changed fields inside row fields', () => { + const fields: ClientField[] = [ + { + type: 'row', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ] + const valueFrom = { a: 'original', b: 'original', c: 'original' } + const valueTo = { a: 'changed', b: 'changed', c: 'original' } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(2) + }) + + it('should count changed fields inside group fields', () => { + const fields: ClientField[] = [ + { + type: 'group', + name: 'group', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ] + const valueFrom = { group: { a: 'original', b: 'original', c: 'original' } } + const valueTo = { group: { a: 'changed', b: 'changed', c: 'original' } } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(2) + }) + + it('should count changed fields inside unnamed tabs ', () => { + const fields: ClientField[] = [ + { + type: 'tabs', + tabs: [ + { + label: 'Unnamed tab', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ], + }, + ] + const valueFrom = { a: 'original', b: 'original', c: 'original' } + const valueTo = { a: 'changed', b: 'changed', c: 'original' } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(2) + }) + + it('should count changed fields inside named tabs ', () => { + const fields: ClientField[] = [ + { + type: 'tabs', + tabs: [ + { + name: 'namedTab', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ], + }, + ] + const valueFrom = { namedTab: { a: 'original', b: 'original', c: 'original' } } + const valueTo = { namedTab: { a: 'changed', b: 'changed', c: 'original' } } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(2) + }) + + it('should ignore UI fields', () => { + const fields: ClientField[] = [ + { name: 'a', type: 'text' }, + { + name: 'b', + type: 'ui', + admin: {}, + }, + ] + const valueFrom = { a: 'original', b: 'original' } + const valueTo = { a: 'original', b: 'changed' } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(0) + }) + + it('should count changed fields inside array fields', () => { + const fields: ClientField[] = [ + { + name: 'arrayField', + type: 'array', + fields: [ + { + name: 'a', + type: 'text', + }, + { + name: 'b', + type: 'text', + }, + { + name: 'c', + type: 'text', + }, + ], + }, + ] + const valueFrom = { + arrayField: [ + { a: 'original', b: 'original', c: 'original' }, + { a: 'original', b: 'original' }, + ], + } + const valueTo = { + arrayField: [ + { a: 'changed', b: 'changed', c: 'original' }, + { a: 'changed', b: 'changed', c: 'changed' }, + ], + } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(5) + }) + + it('should count changed fields inside arrays nested inside of collapsibles', () => { + const fields: ClientField[] = [ + { + type: 'collapsible', + label: 'A collapsible field', + fields: [ + { + name: 'arrayField', + type: 'array', + fields: [ + { + name: 'a', + type: 'text', + }, + { + name: 'b', + type: 'text', + }, + { + name: 'c', + type: 'text', + }, + ], + }, + ], + }, + ] + const valueFrom = { arrayField: [{ a: 'original', b: 'original', c: 'original' }] } + const valueTo = { arrayField: [{ a: 'changed', b: 'changed', c: 'original' }] } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(2) + }) + + it('should count changed fields inside blocks fields', () => { + const fields: ClientField[] = [ + { + name: 'blocks', + type: 'blocks', + blocks: [ + { + slug: 'blockA', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ], + }, + ] + const valueFrom = { + blocks: [ + { blockType: 'blockA', a: 'original', b: 'original', c: 'original' }, + { blockType: 'blockA', a: 'original', b: 'original' }, + ], + } + const valueTo = { + blocks: [ + { blockType: 'blockA', a: 'changed', b: 'changed', c: 'original' }, + { blockType: 'blockA', a: 'changed', b: 'changed', c: 'changed' }, + ], + } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(5) + }) + + it('should count changed fields between blocks with different slugs', () => { + const fields: ClientField[] = [ + { + name: 'blocks', + type: 'blocks', + blocks: [ + { + slug: 'blockA', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + { + slug: 'blockB', + fields: [ + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + { name: 'd', type: 'text' }, + ], + }, + ], + }, + ] + const valueFrom = { + blocks: [{ blockType: 'blockA', a: 'removed', b: 'original', c: 'original' }], + } + const valueTo = { + blocks: [{ blockType: 'blockB', b: 'original', c: 'changed', d: 'new' }], + } + + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(3) + }) + + describe('localized fields', () => { + const locales = ['en', 'de'] + it('should count simple localized fields', () => { + const fields: ClientField[] = [ + { name: 'a', type: 'text', localized: true }, + { name: 'b', type: 'text', localized: true }, + ] + const valueFrom = { + a: { en: 'original', de: 'original' }, + b: { en: 'original', de: 'original' }, + } + const valueTo = { + a: { en: 'changed', de: 'original' }, + b: { en: 'original', de: 'original' }, + } + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(1) + }) + + it('should count multiple locales of the same localized field', () => { + const locales = ['en', 'de'] + const fields: ClientField[] = [ + { name: 'a', type: 'text', localized: true }, + { name: 'b', type: 'text', localized: true }, + ] + const valueFrom = { + a: { en: 'original', de: 'original' }, + b: { en: 'original', de: 'original' }, + } + const valueTo = { + a: { en: 'changed', de: 'changed' }, + b: { en: 'original', de: 'original' }, + } + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(2) + }) + + it('should count changed fields inside localized groups fields', () => { + const fields: ClientField[] = [ + { + type: 'group', + name: 'group', + localized: true, + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ] + const valueFrom = { + group: { + en: { a: 'original', b: 'original', c: 'original' }, + de: { a: 'original', b: 'original', c: 'original' }, + }, + } + const valueTo = { + group: { + en: { a: 'changed', b: 'changed', c: 'original' }, + de: { a: 'original', b: 'changed', c: 'original' }, + }, + } + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(3) + }) + it('should count changed fields inside localized tabs', () => { + const fields: ClientField[] = [ + { + type: 'tabs', + tabs: [ + { + name: 'tab', + localized: true, + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ], + }, + ] + const valueFrom = { + tab: { + en: { a: 'original', b: 'original', c: 'original' }, + de: { a: 'original', b: 'original', c: 'original' }, + }, + } + const valueTo = { + tab: { + en: { a: 'changed', b: 'changed', c: 'original' }, + de: { a: 'original', b: 'changed', c: 'original' }, + }, + } + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(3) + }) + + it('should count changed fields inside localized array fields', () => { + const fields: ClientField[] = [ + { + name: 'arrayField', + type: 'array', + localized: true, + fields: [ + { + name: 'a', + type: 'text', + }, + { + name: 'b', + type: 'text', + }, + { + name: 'c', + type: 'text', + }, + ], + }, + ] + const valueFrom = { + arrayField: { + en: [{ a: 'original', b: 'original', c: 'original' }], + de: [{ a: 'original', b: 'original', c: 'original' }], + }, + } + const valueTo = { + arrayField: { + en: [{ a: 'changed', b: 'changed', c: 'original' }], + de: [{ a: 'original', b: 'changed', c: 'original' }], + }, + } + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(3) + }) + + it('should count changed fields inside localized blocks fields', () => { + const fields: ClientField[] = [ + { + name: 'blocks', + type: 'blocks', + localized: true, + blocks: [ + { + slug: 'blockA', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ], + }, + ] + const valueFrom = { + blocks: { + en: [{ blockType: 'blockA', a: 'original', b: 'original', c: 'original' }], + de: [{ blockType: 'blockA', a: 'original', b: 'original', c: 'original' }], + }, + } + const valueTo = { + blocks: { + en: [{ blockType: 'blockA', a: 'changed', b: 'changed', c: 'original' }], + de: [{ blockType: 'blockA', a: 'original', b: 'changed', c: 'original' }], + }, + } + const result = countChangedFields({ valueFrom, fields, valueTo, locales }) + expect(result).toBe(3) + }) + }) +}) + +describe('countChangedFieldsInRows', () => { + it('should count fields in array rows', () => { + const field: ClientField = { + name: 'myArray', + type: 'array', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + } + + const valueFromRows = [{ a: 'original', b: 'original', c: 'original' }] + const valueToRows = [{ a: 'changed', b: 'changed', c: 'original' }] + + const result = countChangedFieldsInRows({ + valueFromRows, + field, + locales: undefined, + valueToRows: valueToRows, + }) + expect(result).toBe(2) + }) + + it('should count fields in blocks', () => { + const field: ClientField = { + name: 'myBlocks', + type: 'blocks', + blocks: [ + { + slug: 'blockA', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ], + } + + const valueFromRows = [{ blockType: 'blockA', a: 'original', b: 'original', c: 'original' }] + const valueToRows = [{ blockType: 'blockA', a: 'changed', b: 'changed', c: 'original' }] + + const result = countChangedFieldsInRows({ + valueFromRows, + field, + locales: undefined, + valueToRows, + }) + expect(result).toBe(2) + }) +}) diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts new file mode 100644 index 00000000000..3c6fcbd1e33 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/countChangedFields.ts @@ -0,0 +1,255 @@ +import type { ArrayFieldClient, BlocksFieldClient, ClientConfig, ClientField } from 'payload' + +import { fieldShouldBeLocalized, groupHasName } from 'payload/shared' + +import { fieldHasChanges } from './fieldHasChanges.js' +import { getFieldsForRowComparison } from './getFieldsForRowComparison.js' + +type Args = { + config: ClientConfig + fields: ClientField[] + locales: string[] | undefined + parentIsLocalized: boolean + valueFrom: unknown + valueTo: unknown +} + +/** + * Recursively counts the number of changed fields between comparison and + * version data for a given set of fields. + */ +export function countChangedFields({ + config, + fields, + locales, + parentIsLocalized, + valueFrom, + valueTo, +}: Args) { + let count = 0 + + fields.forEach((field) => { + // Don't count the id field since it is not displayed in the UI + if ('name' in field && field.name === 'id') { + return + } + const fieldType = field.type + switch (fieldType) { + // Iterable fields are arrays and blocks fields. We iterate over each row and + // count the number of changed fields in each. + case 'array': + case 'blocks': { + if (locales && fieldShouldBeLocalized({ field, parentIsLocalized })) { + locales.forEach((locale) => { + const valueFromRows = valueFrom?.[field.name]?.[locale] ?? [] + const valueToRows = valueTo?.[field.name]?.[locale] ?? [] + count += countChangedFieldsInRows({ + config, + field, + locales, + parentIsLocalized: parentIsLocalized || field.localized, + valueFromRows, + valueToRows, + }) + }) + } else { + const valueFromRows = valueFrom?.[field.name] ?? [] + const valueToRows = valueTo?.[field.name] ?? [] + count += countChangedFieldsInRows({ + config, + field, + locales, + parentIsLocalized: parentIsLocalized || field.localized, + valueFromRows, + valueToRows, + }) + } + break + } + + // Regular fields without nested fields. + case 'checkbox': + case 'code': + case 'date': + case 'email': + case 'join': + case 'json': + case 'number': + case 'point': + case 'radio': + case 'relationship': + case 'richText': + case 'select': + case 'text': + case 'textarea': + case 'upload': { + // Fields that have a name and contain data. We can just check if the data has changed. + if (locales && fieldShouldBeLocalized({ field, parentIsLocalized })) { + locales.forEach((locale) => { + if ( + fieldHasChanges(valueTo?.[field.name]?.[locale], valueFrom?.[field.name]?.[locale]) + ) { + count++ + } + }) + } else if (fieldHasChanges(valueTo?.[field.name], valueFrom?.[field.name])) { + count++ + } + break + } + // Fields that have nested fields, but don't nest their fields' data. + case 'collapsible': + case 'row': { + count += countChangedFields({ + config, + fields: field.fields, + locales, + parentIsLocalized: parentIsLocalized || field.localized, + valueFrom, + valueTo, + }) + + break + } + + // Fields that have nested fields and nest their fields' data. + case 'group': { + if (groupHasName(field)) { + if (locales && fieldShouldBeLocalized({ field, parentIsLocalized })) { + locales.forEach((locale) => { + count += countChangedFields({ + config, + fields: field.fields, + locales, + parentIsLocalized: parentIsLocalized || field.localized, + valueFrom: valueFrom?.[field.name]?.[locale], + valueTo: valueTo?.[field.name]?.[locale], + }) + }) + } else { + count += countChangedFields({ + config, + fields: field.fields, + locales, + parentIsLocalized: parentIsLocalized || field.localized, + valueFrom: valueFrom?.[field.name], + valueTo: valueTo?.[field.name], + }) + } + } else { + // Unnamed group field: data is NOT nested under `field.name` + count += countChangedFields({ + config, + fields: field.fields, + locales, + parentIsLocalized: parentIsLocalized || field.localized, + valueFrom, + valueTo, + }) + } + break + } + + // Each tab in a tabs field has nested fields. The fields data may be + // nested or not depending on the existence of a name property. + case 'tabs': { + field.tabs.forEach((tab) => { + if ('name' in tab && locales && tab.localized) { + // Named localized tab + locales.forEach((locale) => { + count += countChangedFields({ + config, + fields: tab.fields, + locales, + parentIsLocalized: parentIsLocalized || tab.localized, + valueFrom: valueFrom?.[tab.name]?.[locale], + valueTo: valueTo?.[tab.name]?.[locale], + }) + }) + } else if ('name' in tab) { + // Named tab + count += countChangedFields({ + config, + fields: tab.fields, + locales, + parentIsLocalized: parentIsLocalized || tab.localized, + valueFrom: valueFrom?.[tab.name], + valueTo: valueTo?.[tab.name], + }) + } else { + // Unnamed tab + count += countChangedFields({ + config, + fields: tab.fields, + locales, + parentIsLocalized: parentIsLocalized || tab.localized, + valueFrom, + valueTo, + }) + } + }) + break + } + + // UI fields don't have data and are not displayed in the version view + // so we can ignore them. + case 'ui': { + break + } + + default: { + const _exhaustiveCheck: never = fieldType + throw new Error(`Unexpected field.type in countChangedFields : ${String(fieldType)}`) + } + } + }) + + return count +} + +type countChangedFieldsInRowsArgs = { + config: ClientConfig + field: ArrayFieldClient | BlocksFieldClient + locales: string[] | undefined + parentIsLocalized: boolean + valueFromRows: unknown[] + valueToRows: unknown[] +} + +export function countChangedFieldsInRows({ + config, + field, + locales, + parentIsLocalized, + valueFromRows = [], + valueToRows = [], +}: countChangedFieldsInRowsArgs) { + let count = 0 + let i = 0 + + while (valueFromRows[i] || valueToRows[i]) { + const valueFromRow = valueFromRows?.[i] || {} + const valueToRow = valueToRows?.[i] || {} + + const { fields: rowFields } = getFieldsForRowComparison({ + baseVersionField: { type: 'text', fields: [], path: '', schemaPath: '' }, // Doesn't matter, as we don't need the versionFields output here + config, + field, + row: i, + valueFromRow, + valueToRow, + }) + + count += countChangedFields({ + config, + fields: rowFields, + locales, + parentIsLocalized: parentIsLocalized || field.localized, + valueFrom: valueFromRow, + valueTo: valueToRow, + }) + + i++ + } + return count +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.spec.ts b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.spec.ts new file mode 100644 index 00000000000..72d85c1cb6c --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.spec.ts @@ -0,0 +1,40 @@ +import { describe, it, expect } from 'vitest' + +import { fieldHasChanges } from './fieldHasChanges.js' + +describe('hasChanges', () => { + it('should return false for identical values', () => { + const a = 'value' + const b = 'value' + expect(fieldHasChanges(a, b)).toBe(false) + }) + it('should return true for different values', () => { + const a = 1 + const b = 2 + expect(fieldHasChanges(a, b)).toBe(true) + }) + + it('should return false for identical objects', () => { + const a = { key: 'value' } + const b = { key: 'value' } + expect(fieldHasChanges(a, b)).toBe(false) + }) + + it('should return true for different objects', () => { + const a = { key: 'value' } + const b = { key: 'differentValue' } + expect(fieldHasChanges(a, b)).toBe(true) + }) + + it('should handle undefined values', () => { + const a = { key: 'value' } + const b = undefined + expect(fieldHasChanges(a, b)).toBe(true) + }) + + it('should handle null values', () => { + const a = { key: 'value' } + const b = null + expect(fieldHasChanges(a, b)).toBe(true) + }) +}) diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts new file mode 100644 index 00000000000..fa2a0659b7d --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/fieldHasChanges.ts @@ -0,0 +1,3 @@ +export function fieldHasChanges(a: unknown, b: unknown) { + return JSON.stringify(a) !== JSON.stringify(b) +} diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.spec.ts b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.spec.ts new file mode 100644 index 00000000000..44a8216a102 --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.spec.ts @@ -0,0 +1,108 @@ +import type { ArrayFieldClient, BlocksFieldClient, ClientField } from 'payload' +import { describe, it, expect } from 'vitest' + +import { getFieldsForRowComparison } from './getFieldsForRowComparison' + +describe('getFieldsForRowComparison', () => { + describe('array fields', () => { + it('should return fields from array field', () => { + const arrayFields: ClientField[] = [ + { name: 'title', type: 'text' }, + { name: 'description', type: 'textarea' }, + ] + + const field: ArrayFieldClient = { + type: 'array', + name: 'items', + fields: arrayFields, + } + + const { fields } = getFieldsForRowComparison({ + field, + valueToRow: {}, + valueFromRow: {}, + row: 0, + baseVersionField: { fields: [], path: 'items', schemaPath: 'items', type: 'array' }, + config: {} as any, + }) + + expect(fields).toEqual(arrayFields) + }) + }) + + describe('blocks fields', () => { + it('should return combined fields when block types match', () => { + const blockAFields: ClientField[] = [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + ] + + const field: BlocksFieldClient = { + type: 'blocks', + name: 'myBlocks', + blocks: [ + { + slug: 'blockA', + fields: blockAFields, + }, + ], + } + + const valueToRow = { blockType: 'blockA' } + const valueFromRow = { blockType: 'blockA' } + + const { fields } = getFieldsForRowComparison({ + field, + valueToRow, + valueFromRow, + row: 0, + baseVersionField: { fields: [], path: 'myBlocks', schemaPath: 'myBlocks', type: 'blocks' }, + config: {} as any, + }) + + expect(fields).toEqual(blockAFields) + }) + + it('should return unique combined fields when block types differ', () => { + const field: BlocksFieldClient = { + type: 'blocks', + name: 'myBlocks', + blocks: [ + { + slug: 'blockA', + fields: [ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + ], + }, + { + slug: 'blockB', + fields: [ + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ], + }, + ], + } + + const valueToRow = { blockType: 'blockA' } + const valueFromRow = { blockType: 'blockB' } + + const { fields } = getFieldsForRowComparison({ + field, + valueToRow, + valueFromRow, + row: 0, + baseVersionField: { fields: [], path: 'myBlocks', schemaPath: 'myBlocks', type: 'blocks' }, + config: {} as any, + }) + + // Should contain all unique fields from both blocks + expect(fields).toEqual([ + { name: 'a', type: 'text' }, + { name: 'b', type: 'text' }, + { name: 'c', type: 'text' }, + ]) + }) + }) +}) diff --git a/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts new file mode 100644 index 00000000000..4ef258c097f --- /dev/null +++ b/packages/ui/src/views/Version/RenderFieldsToDiff/utilities/getFieldsForRowComparison.ts @@ -0,0 +1,89 @@ +import type { + ArrayFieldClient, + BaseVersionField, + BlocksFieldClient, + ClientBlock, + ClientConfig, + ClientField, + VersionField, +} from 'payload' + +import { getUniqueListBy } from 'payload/shared' + +/** + * Get the fields for a row in an iterable field for comparison. + * - Array fields: the fields of the array field, because the fields are the same for each row. + * - Blocks fields: the union of fields from the comparison and version row, + * because the fields from the version and comparison rows may differ. + */ +export function getFieldsForRowComparison({ + baseVersionField, + config, + field, + row, + valueFromRow, + valueToRow, +}: { + baseVersionField: BaseVersionField + config: ClientConfig + field: ArrayFieldClient | BlocksFieldClient + row: number + valueFromRow: any + valueToRow: any +}): { fields: ClientField[]; versionFields: VersionField[] } { + let fields: ClientField[] = [] + let versionFields: VersionField[] = [] + + if (field.type === 'array' && 'fields' in field) { + fields = field.fields + versionFields = baseVersionField.rows?.length + ? baseVersionField.rows[row] + : baseVersionField.fields + } else if (field.type === 'blocks') { + if (valueToRow?.blockType === valueFromRow?.blockType) { + const matchedBlock: ClientBlock = + config?.blocksMap?.[valueToRow?.blockType] ?? + (((('blocks' in field || 'blockReferences' in field) && + (field.blockReferences ?? field.blocks)?.find( + (block) => typeof block !== 'string' && block.slug === valueToRow?.blockType, + )) || { + fields: [], + }) as ClientBlock) + + fields = matchedBlock.fields + versionFields = baseVersionField.rows?.length + ? baseVersionField.rows[row] + : baseVersionField.fields + } else { + const matchedVersionBlock = + config?.blocksMap?.[valueToRow?.blockType] ?? + (((('blocks' in field || 'blockReferences' in field) && + (field.blockReferences ?? field.blocks)?.find( + (block) => typeof block !== 'string' && block.slug === valueToRow?.blockType, + )) || { + fields: [], + }) as ClientBlock) + + const matchedComparisonBlock = + config?.blocksMap?.[valueFromRow?.blockType] ?? + (((('blocks' in field || 'blockReferences' in field) && + (field.blockReferences ?? field.blocks)?.find( + (block) => typeof block !== 'string' && block.slug === valueFromRow?.blockType, + )) || { + fields: [], + }) as ClientBlock) + + fields = getUniqueListBy( + [...matchedVersionBlock.fields, ...matchedComparisonBlock.fields], + 'name', + ) + + // buildVersionFields already merged the fields of the version and comparison rows together + versionFields = baseVersionField.rows?.length + ? baseVersionField.rows[row] + : baseVersionField.fields + } + } + + return { fields, versionFields } +} diff --git a/packages/ui/src/views/Version/RenderVersion.tsx b/packages/ui/src/views/Version/RenderVersion.tsx new file mode 100644 index 00000000000..cb645178576 --- /dev/null +++ b/packages/ui/src/views/Version/RenderVersion.tsx @@ -0,0 +1,444 @@ +import type { + DocumentViewServerProps, + Locale, + SanitizedCollectionPermission, + SanitizedGlobalPermission, + TypeWithVersion, +} from 'payload' + +import { hasDraftsEnabled } from 'payload/shared' +import React from 'react' + +import type { CompareOption } from './Default/types.js' + +import { formatDate } from '../../utilities/formatDocTitle/formatDateTitle.js' +import { getClientConfig } from '../../utilities/getClientConfig.js' +import { getClientSchemaMap } from '../../utilities/getClientSchemaMap.js' +import { getSchemaMap } from '../../utilities/getSchemaMap.js' +import { DefaultVersionView } from './Default/index.js' +import { fetchLatestVersion, fetchVersion, fetchVersions } from './fetchVersions.js' +import { RenderDiff } from './RenderFieldsToDiff/index.js' +import { getVersionLabel } from './VersionPillLabel/getVersionLabel.js' +import { VersionPillLabel } from './VersionPillLabel/VersionPillLabel.js' + +export async function VersionView(props: DocumentViewServerProps) { + const { hasPublishedDoc, i18n, initPageResult, routeSegments, searchParams } = props + + const { + collectionConfig, + docID: id, + globalConfig, + permissions, + req, + req: { payload, payload: { config, config: { localization } } = {}, user } = {}, + } = initPageResult + + const versionToID = routeSegments[routeSegments.length - 1] + + const collectionSlug = collectionConfig?.slug + const globalSlug = globalConfig?.slug + + const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig) + + // Resolve user's current locale for version label comparison (not 'all') + const userLocale = + (searchParams.locale as string) || + (req.locale !== 'all' ? req.locale : localization && localization.defaultLocale) + + const localeCodesFromParams = searchParams.localeCodes + ? JSON.parse(searchParams.localeCodes as string) + : null + + const versionFromIDFromParams = searchParams.versionFrom as string + + const modifiedOnly: boolean = searchParams.modifiedOnly === 'false' ? false : true + + const docPermissions: SanitizedCollectionPermission | SanitizedGlobalPermission = collectionSlug + ? permissions.collections[collectionSlug] + : permissions.globals[globalSlug] + + const versionTo = await fetchVersion<{ + _status?: string + }>({ + id: versionToID, + collectionSlug, + depth: 1, + globalSlug, + locale: 'all', + overrideAccess: false, + req, + user, + }) + + if (!versionTo) { + throw new Error('not-found') + } + + const [ + previousVersionResult, + versionFromResult, + currentlyPublishedVersion, + latestDraftVersion, + previousPublishedVersionResult, + ] = await Promise.all([ + // Previous version (the one before the versionTo) + fetchVersions({ + collectionSlug, + // If versionFromIDFromParams is provided, the previous version is only used in the version comparison dropdown => depth 0 is enough. + // If it's not provided, this is used as `versionFrom` in the comparison, which expects populated data => depth 1 is needed. + depth: versionFromIDFromParams ? 0 : 1, + draft: true, + globalSlug, + limit: 1, + locale: 'all', + overrideAccess: false, + parentID: id, + req, + sort: '-updatedAt', + user, + where: { + and: [ + { + updatedAt: { + less_than: versionTo.updatedAt, + }, + }, + ], + }, + }), + // Version from ID from params + (versionFromIDFromParams + ? fetchVersion({ + id: versionFromIDFromParams, + collectionSlug, + depth: 1, + globalSlug, + locale: 'all', + overrideAccess: false, + req, + user, + }) + : Promise.resolve(null)) as Promise>, + // Currently published version - do note: currently published != latest published, as an unpublished version can be the latest published + hasPublishedDoc + ? fetchLatestVersion({ + collectionSlug, + depth: 0, + globalSlug, + locale: req.locale, + overrideAccess: false, + parentID: id, + req, + status: 'published', + user, + }) + : Promise.resolve(null), + // Latest draft version + draftsEnabled + ? fetchLatestVersion({ + collectionSlug, + depth: 0, + globalSlug, + locale: 'all', + overrideAccess: false, + parentID: id, + req, + status: 'draft', + user, + }) + : Promise.resolve(null), + // Previous published version + // Only query for published versions if drafts are enabled (since _status field only exists with drafts) + draftsEnabled + ? fetchVersions({ + collectionSlug, + depth: 0, + draft: true, + globalSlug, + limit: 1, + locale: 'all', + overrideAccess: false, + parentID: id, + req, + sort: '-updatedAt', + user, + where: { + and: [ + { + updatedAt: { + less_than: versionTo.updatedAt, + }, + }, + { + 'version._status': { + equals: 'published', + }, + }, + ], + }, + }) + : Promise.resolve(null), + ]) + + const previousVersion: null | TypeWithVersion = previousVersionResult?.docs?.[0] ?? null + + const versionFrom = + versionFromResult || + // By default, we'll compare the previous version. => versionFrom = version previous to versionTo + previousVersion + + // Previous published version before the versionTo + const previousPublishedVersion = previousPublishedVersionResult?.docs?.[0] ?? null + + let selectedLocales: string[] = [] + if (localization) { + let locales: Locale[] = [] + if (localeCodesFromParams) { + for (const code of localeCodesFromParams) { + const locale = localization.locales.find((locale) => locale.code === code) + if (!locale) { + continue + } + locales.push(locale) + } + } else { + locales = localization.locales + } + + if (localization.filterAvailableLocales) { + locales = (await localization.filterAvailableLocales({ locales, req })) || [] + } + + selectedLocales = locales.map((locale) => locale.code) + } + + const schemaMap = getSchemaMap({ + collectionSlug, + config, + globalSlug, + i18n, + }) + + const clientSchemaMap = getClientSchemaMap({ + collectionSlug, + config: getClientConfig({ + config: payload.config, + i18n, + importMap: payload.importMap, + user, + }), + globalSlug, + i18n, + payload, + schemaMap, + }) + const RenderedDiff = RenderDiff({ + clientSchemaMap, + customDiffComponents: {}, + entitySlug: collectionSlug || globalSlug, + fields: (collectionConfig || globalConfig)?.fields, + fieldsPermissions: docPermissions?.fields, + i18n, + modifiedOnly, + parentIndexPath: '', + parentIsLocalized: false, + parentPath: '', + parentSchemaPath: '', + req, + selectedLocales, + versionFromSiblingData: { + ...versionFrom?.version, + updatedAt: versionFrom?.updatedAt, + }, + versionToSiblingData: { + ...versionTo.version, + updatedAt: versionTo.updatedAt, + }, + }) + + const versionToCreatedAtFormatted = versionTo.updatedAt + ? formatDate({ + date: + typeof versionTo.updatedAt === 'string' + ? new Date(versionTo.updatedAt) + : (versionTo.updatedAt as Date), + i18n, + pattern: config.admin.dateFormat, + }) + : '' + + const formatPill = ({ + doc, + labelOverride, + labelStyle, + labelSuffix, + }: { + doc: TypeWithVersion + labelOverride?: string + labelStyle?: 'pill' | 'text' + labelSuffix?: React.ReactNode + }): React.ReactNode => { + return ( + + ) + } + + // SelectComparison Options: + // + // Previous version: always, unless doesn't exist. Can be the same as previously published + // Latest draft: only if no newer published exists (latestDraftVersion) + // Currently published: always, if exists + // Previously published: if there is a prior published version older than versionTo + // Specific Version: only if not already present under other label (= versionFrom) + + let versionFromOptions: { + doc: TypeWithVersion + labelOverride?: string + updatedAt: Date + value: string + }[] = [] + + // Previous version + if (previousVersion?.id) { + versionFromOptions.push({ + doc: previousVersion, + labelOverride: i18n.t('version:previousVersion'), + updatedAt: new Date(previousVersion.updatedAt), + value: previousVersion.id, + }) + } + + // Latest Draft + const publishedNewerThanDraft = + currentlyPublishedVersion?.updatedAt > latestDraftVersion?.updatedAt + if (latestDraftVersion && !publishedNewerThanDraft) { + versionFromOptions.push({ + doc: latestDraftVersion, + updatedAt: new Date(latestDraftVersion.updatedAt), + value: latestDraftVersion.id, + }) + } + + // Currently Published + if (currentlyPublishedVersion) { + versionFromOptions.push({ + doc: currentlyPublishedVersion, + updatedAt: new Date(currentlyPublishedVersion.updatedAt), + value: currentlyPublishedVersion.id, + }) + } + + // Previous Published + if (previousPublishedVersion && currentlyPublishedVersion?.id !== previousPublishedVersion.id) { + versionFromOptions.push({ + doc: previousPublishedVersion, + labelOverride: i18n.t('version:previouslyPublished'), + updatedAt: new Date(previousPublishedVersion.updatedAt), + value: previousPublishedVersion.id, + }) + } + + // Specific Version + if (versionFrom?.id && !versionFromOptions.some((option) => option.value === versionFrom.id)) { + // Only add "specific version" if it is not already in the options + versionFromOptions.push({ + doc: versionFrom, + labelOverride: i18n.t('version:specificVersion'), + updatedAt: new Date(versionFrom.updatedAt), + value: versionFrom.id, + }) + } + + versionFromOptions = versionFromOptions.sort((a, b) => { + // Sort by updatedAt, newest first + if (a && b) { + return b.updatedAt.getTime() - a.updatedAt.getTime() + } + return 0 + }) + + const versionToIsVersionFrom = versionFrom?.id === versionTo.id + + const versionFromComparisonOptions: CompareOption[] = [] + + for (const option of versionFromOptions) { + const isVersionTo = option.value === versionTo.id + + if (isVersionTo && !versionToIsVersionFrom) { + // Don't offer selecting a versionFrom that is the same as versionTo, unless it's already selected + continue + } + + const alreadyAdded = versionFromComparisonOptions.some( + (existingOption) => existingOption.value === option.value, + ) + if (alreadyAdded) { + continue + } + + const otherOptionsWithSameID = versionFromOptions.filter( + (existingOption) => existingOption.value === option.value && existingOption !== option, + ) + + // Merge options with same ID to the same option + const labelSuffix = otherOptionsWithSameID?.length ? ( + + {' ('} + {otherOptionsWithSameID.map((optionWithSameID, index) => { + const label = + optionWithSameID.labelOverride || + getVersionLabel({ + currentLocale: userLocale, + currentlyPublishedVersion, + latestDraftVersion, + t: i18n.t, + version: optionWithSameID.doc, + }).label + + return ( + + {index > 0 ? ', ' : ''} + {label} + + ) + })} + {')'} + + ) : undefined + + versionFromComparisonOptions.push({ + label: formatPill({ + doc: option.doc, + labelOverride: option.labelOverride, + labelSuffix, + }), + value: option.value, + }) + } + + return ( + + ) +} diff --git a/packages/ui/src/views/Version/Restore/index.scss b/packages/ui/src/views/Version/Restore/index.scss new file mode 100644 index 00000000000..55fd5ad6874 --- /dev/null +++ b/packages/ui/src/views/Version/Restore/index.scss @@ -0,0 +1,84 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .restore-version { + cursor: pointer; + display: flex; + min-width: max-content; + + .popup-button { + display: flex; + } + + &__chevron { + background-color: var(--theme-elevation-150); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + cursor: pointer; + + .stroke { + stroke-width: 1px; + } + + &:hover { + background: var(--theme-elevation-100); + } + } + + .btn { + margin-block: 0; + } + + &__restore-as-draft-button { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + margin-right: 2px; + + &:focus { + border-radius: 0; + outline-offset: 0; + } + } + + &__modal { + @include blur-bg; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + + &__toggle { + @extend %btn-reset; + } + } + + &__wrapper { + z-index: 1; + position: relative; + display: flex; + flex-direction: column; + gap: base(0.8); + padding: base(2); + max-width: base(36); + } + + &__content { + display: flex; + flex-direction: column; + gap: base(0.4); + + > * { + margin: 0; + } + } + + &__controls { + display: flex; + gap: base(0.4); + + .btn { + margin: 0; + } + } + } +} diff --git a/packages/ui/src/views/Version/Restore/index.tsx b/packages/ui/src/views/Version/Restore/index.tsx new file mode 100644 index 00000000000..dc6d9d7f3d3 --- /dev/null +++ b/packages/ui/src/views/Version/Restore/index.tsx @@ -0,0 +1,151 @@ +'use client' + +import type { ClientCollectionConfig, ClientGlobalConfig, SanitizedCollectionConfig } from 'payload' + +import { getTranslation } from '@payloadcms/translations' +import { formatAdminURL } from 'payload/shared' +import React, { Fragment, useCallback, useState } from 'react' +import { toast } from 'sonner' + +import { Button } from '../../../elements/Button/index.js' +import { ConfirmationModal } from '../../../elements/ConfirmationModal/index.js' +import { useModal } from '../../../elements/Modal/index.js' +import * as PopupList from '../../../elements/Popup/PopupButtonList/index.js' +import { useConfig } from '../../../providers/Config/index.js' +import { useRouter } from '../../../providers/Router/index.js' +import { useRouteTransition } from '../../../providers/RouteTransition/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' +import { requests } from '../../../utilities/api.js' +import './index.scss' + +const baseClass = 'restore-version' +const modalSlug = 'restore-version' + +type Props = { + className?: string + collectionConfig?: ClientCollectionConfig + globalConfig?: ClientGlobalConfig + label: SanitizedCollectionConfig['labels']['singular'] + originalDocID: number | string + status?: string + versionDateFormatted: string + versionID: string +} + +export const Restore: React.FC = ({ + className, + collectionConfig, + globalConfig, + label, + originalDocID, + status, + versionDateFormatted, + versionID, +}) => { + const { + config: { + routes: { admin: adminRoute, api: apiRoute }, + }, + } = useConfig() + + const { toggleModal } = useModal() + const router = useRouter() + const { i18n, t } = useTranslation() + const [draft, setDraft] = useState(false) + const { startRouteTransition } = useRouteTransition() + + const restoreMessage = t( + globalConfig ? 'version:aboutToRestoreGlobal' : 'version:aboutToRestore', + { + label: getTranslation(label, i18n), + versionDate: versionDateFormatted, + }, + ) + + const canRestoreAsDraft = status !== 'draft' && collectionConfig?.versions?.drafts + + const handleRestore = useCallback(async () => { + let fetchURL = formatAdminURL({ + apiRoute, + path: '', + }) + let redirectURL: string + + if (collectionConfig) { + fetchURL = `${fetchURL}/${collectionConfig.slug}/versions/${versionID}?draft=${draft}` + redirectURL = formatAdminURL({ + adminRoute, + path: `/collections/${collectionConfig.slug}/${originalDocID}`, + }) + } + + if (globalConfig) { + fetchURL = `${fetchURL}/globals/${globalConfig.slug}/versions/${versionID}?draft=${draft}` + redirectURL = formatAdminURL({ + adminRoute, + path: `/globals/${globalConfig.slug}`, + }) + } + + const res = await requests.post(fetchURL, { + headers: { + 'Accept-Language': i18n.language, + }, + }) + + if (res.status === 200) { + const json = await res.json() + toast.success(json.message) + return startRouteTransition(() => router.push(redirectURL)) + } else { + toast.error(t('version:problemRestoringVersion')) + } + }, [ + apiRoute, + collectionConfig, + globalConfig, + i18n.language, + versionID, + draft, + adminRoute, + originalDocID, + startRouteTransition, + router, + t, + ]) + + return ( + +
    + +
    + +     + ) +} diff --git a/packages/ui/src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx b/packages/ui/src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx new file mode 100644 index 00000000000..e9b68076cd0 --- /dev/null +++ b/packages/ui/src/views/Version/SelectComparison/VersionDrawer/CreatedAtCell.tsx @@ -0,0 +1,48 @@ +'use client' +import type { CreatedAtCellProps } from '../../../Versions/cells/CreatedAt/index.js' + +import { useModal } from '../../../../elements/Modal/index.js' +import { useConfig } from '../../../../providers/Config/index.js' +import { usePathname, useRouter, useSearchParams } from '../../../../providers/Router/index.js' +import { useRouteTransition } from '../../../../providers/RouteTransition/index.js' +import { useTranslation } from '../../../../providers/Translation/index.js' +import { formatDate } from '../../../../utilities/formatDocTitle/formatDateTitle.js' + +export const VersionDrawerCreatedAtCell: React.FC = ({ + rowData: { id, updatedAt } = {}, +}) => { + const { + config: { + admin: { dateFormat }, + }, + } = useConfig() + const { closeAllModals } = useModal() + const router = useRouter() + const pathname = usePathname() + const searchParams = useSearchParams() + const { startRouteTransition } = useRouteTransition() + + const { i18n } = useTranslation() + + return ( + + ) +} diff --git a/packages/ui/src/views/Version/SelectComparison/VersionDrawer/index.scss b/packages/ui/src/views/Version/SelectComparison/VersionDrawer/index.scss new file mode 100644 index 00000000000..7a4efd22c49 --- /dev/null +++ b/packages/ui/src/views/Version/SelectComparison/VersionDrawer/index.scss @@ -0,0 +1,18 @@ +@import '../../../../scss/styles.scss'; + +@layer payload-default { + .version-drawer { + .table { + width: 100%; + } + + .created-at-cell { + // Button reset, + underline + background: none; + border: none; + cursor: pointer; + padding: 0; + text-decoration: underline; + } + } +} diff --git a/packages/ui/src/views/Version/SelectComparison/VersionDrawer/index.tsx b/packages/ui/src/views/Version/SelectComparison/VersionDrawer/index.tsx new file mode 100644 index 00000000000..7da1f159808 --- /dev/null +++ b/packages/ui/src/views/Version/SelectComparison/VersionDrawer/index.tsx @@ -0,0 +1,197 @@ +'use client' +import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react' +import { toast } from 'sonner' + +import { Drawer } from '../../../../elements/Drawer/index.js' +import { LoadingOverlay } from '../../../../elements/Loading/index.js' +import { useModal } from '../../../../elements/Modal/index.js' +import { useDocumentInfo } from '../../../../providers/DocumentInfo/index.js' +import { useEditDepth } from '../../../../providers/EditDepth/index.js' +import { useSearchParams } from '../../../../providers/Router/index.js' +import { useServerFunctions } from '../../../../providers/ServerFunctions/index.js' +import './index.scss' +import { useTranslation } from '../../../../providers/Translation/index.js' + +export const baseClass = 'version-drawer' +export const formatVersionDrawerSlug = ({ + depth, + uuid, +}: { + depth: number + uuid: string // supply when creating a new document and no id is available +}) => `version-drawer_${depth}_${uuid}` + +export const VersionDrawerContent: React.FC<{ + collectionSlug?: string + docID?: number | string + drawerSlug: string + globalSlug?: string +}> = (props) => { + const { collectionSlug, docID, drawerSlug, globalSlug } = props + const { isTrashed } = useDocumentInfo() + const { closeModal } = useModal() + const searchParams = useSearchParams() + const prevSearchParams = useRef(searchParams) + + const { renderDocument } = useServerFunctions() + + const [DocumentView, setDocumentView] = useState(undefined) + const [isLoading, setIsLoading] = useState(true) + const hasRenderedDocument = useRef(false) + const { t } = useTranslation() + + const getDocumentView = useCallback( + (docID?: number | string) => { + const fetchDocumentView = async () => { + setIsLoading(true) + + try { + const isGlobal = Boolean(globalSlug) + const entitySlug = collectionSlug ?? globalSlug + + const result = await renderDocument({ + collectionSlug: entitySlug, + docID, + drawerSlug, + paramsOverride: { + segments: [ + isGlobal ? 'globals' : 'collections', + entitySlug, + ...(isTrashed ? ['trash'] : []), + isGlobal ? undefined : String(docID), + 'versions', + ].filter(Boolean), + }, + redirectAfterDelete: false, + redirectAfterDuplicate: false, + searchParams: Object.fromEntries(searchParams.entries()), + versions: { + disableGutter: true, + useVersionDrawerCreatedAtCell: true, + }, + }) + + if (result?.Document) { + setDocumentView(result.Document) + setIsLoading(false) + } + } catch (error) { + toast.error(error?.message || t('error:unspecific')) + closeModal(drawerSlug) + // toast.error(data?.errors?.[0].message || t('error:unspecific')) + } + } + + void fetchDocumentView() + }, + [ + closeModal, + collectionSlug, + drawerSlug, + globalSlug, + isTrashed, + renderDocument, + searchParams, + t, + ], + ) + + useEffect(() => { + if (!hasRenderedDocument.current || prevSearchParams.current !== searchParams) { + prevSearchParams.current = searchParams + getDocumentView(docID) + hasRenderedDocument.current = true + } + }, [docID, getDocumentView, searchParams]) + + if (isLoading) { + return + } + + return DocumentView +} +export const VersionDrawer: React.FC<{ + collectionSlug?: string + docID?: number | string + drawerSlug: string + globalSlug?: string +}> = (props) => { + const { collectionSlug, docID, drawerSlug, globalSlug } = props + const { t } = useTranslation() + + return ( + + + + ) +} + +export const useVersionDrawer = ({ + collectionSlug, + docID, + globalSlug, +}: { + collectionSlug?: string + docID?: number | string + globalSlug?: string +}) => { + const drawerDepth = useEditDepth() + const uuid = useId() + const { closeModal, modalState, openModal, toggleModal } = useModal() + const [isOpen, setIsOpen] = useState(false) + + const drawerSlug = formatVersionDrawerSlug({ + depth: drawerDepth, + uuid, + }) + + useEffect(() => { + setIsOpen(Boolean(modalState[drawerSlug]?.isOpen)) + }, [modalState, drawerSlug]) + + const toggleDrawer = useCallback(() => { + toggleModal(drawerSlug) + }, [toggleModal, drawerSlug]) + + const closeDrawer = useCallback(() => { + closeModal(drawerSlug) + }, [drawerSlug, closeModal]) + + const openDrawer = useCallback(() => { + openModal(drawerSlug) + }, [drawerSlug, openModal]) + + const MemoizedDrawer = useMemo(() => { + return () => ( + + ) + }, [collectionSlug, docID, drawerSlug, globalSlug]) + + return useMemo( + () => ({ + closeDrawer, + Drawer: MemoizedDrawer, + drawerDepth, + drawerSlug, + isDrawerOpen: isOpen, + openDrawer, + toggleDrawer, + }), + [MemoizedDrawer, closeDrawer, drawerDepth, drawerSlug, isOpen, openDrawer, toggleDrawer], + ) +} diff --git a/packages/ui/src/views/Version/SelectComparison/index.scss b/packages/ui/src/views/Version/SelectComparison/index.scss new file mode 100644 index 00000000000..ca14deba4cc --- /dev/null +++ b/packages/ui/src/views/Version/SelectComparison/index.scss @@ -0,0 +1,9 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .compare-version { + &-moreVersions { + color: var(--theme-elevation-500); + } + } +} diff --git a/packages/ui/src/views/Version/SelectComparison/index.tsx b/packages/ui/src/views/Version/SelectComparison/index.tsx new file mode 100644 index 00000000000..d2c837d5fca --- /dev/null +++ b/packages/ui/src/views/Version/SelectComparison/index.tsx @@ -0,0 +1,68 @@ +'use client' + +import React, { memo, useCallback, useMemo } from 'react' + +import type { CompareOption } from '../Default/types.js' +import type { Props } from './types.js' + +import { ReactSelect } from '../../../elements/ReactSelect/index.js' +import { fieldBaseClass } from '../../../fields/shared/index.js' +import './index.scss' +import { useTranslation } from '../../../providers/Translation/index.js' +import { useVersionDrawer } from './VersionDrawer/index.js' + +const baseClass = 'compare-version' + +export const SelectComparison: React.FC = memo((props) => { + const { + collectionSlug, + docID, + globalSlug, + onChange: onChangeFromProps, + versionFromID, + versionFromOptions, + } = props + const { t } = useTranslation() + + const { Drawer, openDrawer } = useVersionDrawer({ collectionSlug, docID, globalSlug }) + + const options = useMemo(() => { + return [ + ...versionFromOptions, + { + label: {t('version:moreVersions')}, + value: 'more', + }, + ] + }, [t, versionFromOptions]) + + const currentOption = useMemo( + () => versionFromOptions.find((option) => option.value === versionFromID), + [versionFromOptions, versionFromID], + ) + + const onChange = useCallback( + (val: CompareOption) => { + if (val.value === 'more') { + openDrawer() + return + } + onChangeFromProps(val) + }, + [onChangeFromProps, openDrawer], + ) + + return ( +
    + + +
    + ) +}) diff --git a/packages/ui/src/views/Version/SelectComparison/types.ts b/packages/ui/src/views/Version/SelectComparison/types.ts new file mode 100644 index 00000000000..703b73b12c4 --- /dev/null +++ b/packages/ui/src/views/Version/SelectComparison/types.ts @@ -0,0 +1,30 @@ +import type { PaginatedDocs, SanitizedCollectionConfig } from 'payload' + +import type { CompareOption } from '../Default/types.js' + +export type Props = { + collectionSlug?: string + docID?: number | string + globalSlug?: string + onChange: (val: CompareOption) => void + versionFromID?: string + versionFromOptions: CompareOption[] +} + +type CLEAR = { + required: boolean + type: 'CLEAR' +} + +type ADD = { + collection: SanitizedCollectionConfig + data: PaginatedDocs + type: 'ADD' +} + +export type Action = ADD | CLEAR + +export type ValueWithRelation = { + relationTo: string + value: string +} diff --git a/packages/ui/src/views/Version/SelectLocales/index.tsx b/packages/ui/src/views/Version/SelectLocales/index.tsx new file mode 100644 index 00000000000..192e6729de9 --- /dev/null +++ b/packages/ui/src/views/Version/SelectLocales/index.tsx @@ -0,0 +1,42 @@ +'use client' + +import React from 'react' + +import { AnimateHeight } from '../../../elements/AnimateHeight/index.js' +import { PillSelector, type SelectablePill } from '../../../elements/PillSelector/index.js' + +const baseClass = 'select-version-locales' + +export type SelectedLocaleOnChange = (args: { locales: SelectablePill[] }) => void +export type Props = { + locales: SelectablePill[] + localeSelectorOpen: boolean + onChange: SelectedLocaleOnChange +} + +export const SelectLocales: React.FC = ({ locales, localeSelectorOpen, onChange }) => { + return ( + + { + const newLocales = locales.map((locale) => { + if (locale.name === pill.name) { + return { + ...locale, + selected: !pill.selected, + } + } else { + return locale + } + }) + onChange({ locales: newLocales }) + }} + pills={locales} + /> + + ) +} diff --git a/packages/ui/src/views/Version/VersionPillLabel/VersionPillLabel.tsx b/packages/ui/src/views/Version/VersionPillLabel/VersionPillLabel.tsx new file mode 100644 index 00000000000..aa60086ad1c --- /dev/null +++ b/packages/ui/src/views/Version/VersionPillLabel/VersionPillLabel.tsx @@ -0,0 +1,124 @@ +'use client' + +import type { TypeWithVersion } from 'payload' + +import React from 'react' + +import { Pill } from '../../../elements/Pill/index.js' +import { useConfig } from '../../../providers/Config/index.js' +import { useLocale } from '../../../providers/Locale/index.js' +import { useTranslation } from '../../../providers/Translation/index.js' +import { formatDate } from '../../../utilities/formatDocTitle/formatDateTitle.js' +import './index.scss' +import { getVersionLabel } from './getVersionLabel.js' + +const baseClass = 'version-pill-label' + +const renderPill = (label: React.ReactNode, pillStyle: Parameters[0]['pillStyle']) => { + return ( + + {label} + + ) +} + +export const VersionPillLabel: React.FC<{ + currentlyPublishedVersion?: TypeWithVersion + disableDate?: boolean + + doc: { + [key: string]: unknown + id: number | string + publishedLocale?: string + updatedAt?: string + version: { + [key: string]: unknown + _status: 'draft' | 'published' + updatedAt: string + } + } + /** + * By default, the date is displayed first, followed by the version label. + * @default false + */ + labelFirst?: boolean + labelOverride?: React.ReactNode + /** + * @default 'pill' + */ + labelStyle?: 'pill' | 'text' + labelSuffix?: React.ReactNode + latestDraftVersion?: TypeWithVersion +}> = ({ + currentlyPublishedVersion, + disableDate = false, + doc, + labelFirst = false, + labelOverride, + labelStyle = 'pill', + labelSuffix, + latestDraftVersion, +}) => { + const { + config: { + admin: { dateFormat }, + localization, + }, + } = useConfig() + const { i18n, t } = useTranslation() + const { code: currentLocale } = useLocale() + + const { label, pillStyle } = getVersionLabel({ + currentLocale, + currentlyPublishedVersion, + latestDraftVersion, + t, + version: doc, + }) + const labelText: React.ReactNode = ( + + {labelOverride || label} + {labelSuffix} + + ) + + const showDate = !disableDate && doc.updatedAt + const formattedDate = showDate + ? formatDate({ date: doc.updatedAt, i18n, pattern: dateFormat }) + : null + + const localeCode = Array.isArray(doc.publishedLocale) + ? doc.publishedLocale[0] + : doc.publishedLocale + + const locale = + localization && localization?.locales + ? localization.locales.find((loc) => loc.code === localeCode) + : null + const localeLabel = locale ? locale?.label?.[i18n?.language] || locale?.label : null + + return ( +
    + {labelFirst ? ( + + {labelStyle === 'pill' ? ( + renderPill(labelText, pillStyle) + ) : ( + {labelText} + )} + {showDate && {formattedDate}} + + ) : ( + + {showDate && {formattedDate}} + {labelStyle === 'pill' ? ( + renderPill(labelText, pillStyle) + ) : ( + {labelText} + )} + + )} + {localeLabel && {localeLabel}} +
    + ) +} diff --git a/packages/ui/src/views/Version/VersionPillLabel/getVersionLabel.ts b/packages/ui/src/views/Version/VersionPillLabel/getVersionLabel.ts new file mode 100644 index 00000000000..1b57fc022e2 --- /dev/null +++ b/packages/ui/src/views/Version/VersionPillLabel/getVersionLabel.ts @@ -0,0 +1,86 @@ +import type { TFunction } from '@payloadcms/translations' + +import type { Pill } from '../../../elements/Pill/index.js' + +type Args = { + currentLocale?: string + currentlyPublishedVersion?: { + id: number | string + publishedLocale?: string + updatedAt: string + version: { + updatedAt: string + } + } + latestDraftVersion?: { + id: number | string + updatedAt: string + } + t: TFunction + version: { + id: number | string + publishedLocale?: string + version: { _status?: 'draft' | 'published'; updatedAt: string } + } +} + +/** + * Gets the appropriate version label and version pill styling + * given existing versions and the current version status. + */ +export function getVersionLabel({ + currentLocale, + currentlyPublishedVersion, + latestDraftVersion, + t, + version, +}: Args): { + label: string + name: 'currentDraft' | 'currentlyPublished' | 'draft' | 'previouslyPublished' | 'published' + pillStyle: Parameters[0]['pillStyle'] +} { + const status = version.version._status + + if (status === 'draft') { + const publishedNewerThanDraft = + currentlyPublishedVersion?.updatedAt > latestDraftVersion?.updatedAt + + if (publishedNewerThanDraft) { + return { + name: 'draft', + label: t('version:draft'), + pillStyle: 'light', + } + } + + const isCurrentDraft = version.id === latestDraftVersion?.id + + return { + name: isCurrentDraft ? 'currentDraft' : 'draft', + label: isCurrentDraft ? t('version:currentDraft') : t('version:draft'), + pillStyle: 'light', + } + } + + const publishedInAnotherLocale = + status === 'published' && version.publishedLocale && currentLocale !== version.publishedLocale + + if (publishedInAnotherLocale) { + return { + name: 'currentDraft', + label: t('version:currentDraft'), + pillStyle: 'light', + } + } + + const isCurrentlyPublished = + currentlyPublishedVersion && version.id === currentlyPublishedVersion.id + + return { + name: isCurrentlyPublished ? 'currentlyPublished' : 'previouslyPublished', + label: isCurrentlyPublished + ? t('version:currentlyPublished') + : t('version:previouslyPublished'), + pillStyle: isCurrentlyPublished ? 'success' : 'light', + } +} diff --git a/packages/ui/src/views/Version/VersionPillLabel/index.scss b/packages/ui/src/views/Version/VersionPillLabel/index.scss new file mode 100644 index 00000000000..1bbd531f354 --- /dev/null +++ b/packages/ui/src/views/Version/VersionPillLabel/index.scss @@ -0,0 +1,26 @@ +@import '../../../scss/styles.scss'; + +@layer payload-default { + .version-pill-label { + display: flex; + align-items: center; + gap: calc(var(--base) / 2); + + &-text { + font-weight: 500; + } + + &-date { + color: var(--theme-elevation-500); + } + } + + @include small-break { + .version-pill-label { + // Column + flex-direction: column; + align-items: flex-start; + gap: 0; + } + } +} diff --git a/packages/ui/src/views/Version/fetchVersions.ts b/packages/ui/src/views/Version/fetchVersions.ts new file mode 100644 index 00000000000..858f40f3964 --- /dev/null +++ b/packages/ui/src/views/Version/fetchVersions.ts @@ -0,0 +1,206 @@ +import { + logError, + type PaginatedDocs, + type PayloadRequest, + type SelectType, + type Sort, + type TypedUser, + type TypeWithVersion, + type Where, +} from 'payload' + +export const fetchVersion = async ({ + id, + collectionSlug, + depth, + globalSlug, + locale, + overrideAccess, + req, + select, + user, +}: { + collectionSlug?: string + depth?: number + globalSlug?: string + id: number | string + locale?: 'all' | ({} & string) + overrideAccess?: boolean + req: PayloadRequest + select?: SelectType + user?: TypedUser +}): Promise> => { + try { + if (collectionSlug) { + return (await req.payload.findVersionByID({ + id: String(id), + collection: collectionSlug, + depth, + locale, + overrideAccess, + req, + select, + user, + })) as TypeWithVersion + } else if (globalSlug) { + return (await req.payload.findGlobalVersionByID({ + id: String(id), + slug: globalSlug, + depth, + locale, + overrideAccess, + req, + select, + user, + })) as TypeWithVersion + } + } catch (err) { + logError({ err, payload: req.payload }) + return null + } +} + +export const fetchVersions = async ({ + collectionSlug, + depth, + draft, + globalSlug, + limit, + locale, + overrideAccess, + page, + parentID, + req, + select, + sort, + user, + where: whereFromArgs, +}: { + collectionSlug?: string + depth?: number + draft?: boolean + globalSlug?: string + limit?: number + locale?: 'all' | ({} & string) + overrideAccess?: boolean + page?: number + parentID?: number | string + req: PayloadRequest + select?: SelectType + sort?: Sort + user?: TypedUser + where?: Where +}): Promise>> => { + const where: Where = { and: [...(whereFromArgs ? [whereFromArgs] : [])] } + + try { + if (collectionSlug) { + if (parentID) { + where.and.push({ + parent: { + equals: parentID, + }, + }) + } + return (await req.payload.findVersions({ + collection: collectionSlug, + depth, + draft, + limit, + locale, + overrideAccess, + page, + req, + select, + sort, + user, + where, + })) as PaginatedDocs> + } else if (globalSlug) { + return (await req.payload.findGlobalVersions({ + slug: globalSlug, + depth, + limit, + locale, + overrideAccess, + page, + req, + select, + sort, + user, + where, + })) as PaginatedDocs> + } + } catch (err) { + logError({ err, payload: req.payload }) + + return null + } +} + +export const fetchLatestVersion = async ({ + collectionSlug, + depth, + globalSlug, + locale, + overrideAccess, + parentID, + req, + select, + status, + user, + where, +}: { + collectionSlug?: string + depth?: number + globalSlug?: string + locale?: 'all' | ({} & string) + overrideAccess?: boolean + parentID?: number | string + req: PayloadRequest + select?: SelectType + status: 'draft' | 'published' + user?: TypedUser + where?: Where +}): Promise> => { + // Get the entity config to check if drafts are enabled + const entityConfig = collectionSlug + ? req.payload.collections[collectionSlug]?.config + : globalSlug + ? req.payload.globals[globalSlug]?.config + : undefined + + // Only query by _status if drafts are enabled (since _status field only exists with drafts) + const draftsEnabled = entityConfig?.versions?.drafts + + const and: Where[] = [ + ...(draftsEnabled + ? [ + { + 'version._status': { + equals: status, + }, + }, + ] + : []), + ...(where ? [where] : []), + ] + + const latest = await fetchVersions({ + collectionSlug, + depth, + draft: true, + globalSlug, + limit: 1, + locale, + overrideAccess, + parentID, + req, + select, + sort: '-updatedAt', + user, + where: { and }, + }) + + return latest?.docs?.length ? (latest.docs[0] as TypeWithVersion) : null +} diff --git a/packages/ui/src/views/Version/index.tsx b/packages/ui/src/views/Version/index.tsx new file mode 100644 index 00000000000..851e01c3fad --- /dev/null +++ b/packages/ui/src/views/Version/index.tsx @@ -0,0 +1 @@ +export { VersionView } from './RenderVersion.js' diff --git a/packages/ui/src/views/Versions/RenderVersions.tsx b/packages/ui/src/views/Versions/RenderVersions.tsx new file mode 100644 index 00000000000..34e2408dd08 --- /dev/null +++ b/packages/ui/src/views/Versions/RenderVersions.tsx @@ -0,0 +1,201 @@ +import { type DocumentViewServerProps, type PaginatedDocs, type Where } from 'payload' +import { formatAdminURL, hasDraftsEnabled, isNumber } from 'payload/shared' +import React from 'react' + +import { Gutter } from '../../elements/Gutter/index.js' +import { ListQueryProvider } from '../../providers/ListQuery/index.js' +import { SetDocumentStepNav } from '../Edit/SetDocumentStepNav/index.js' +import { fetchLatestVersion, fetchVersions } from '../Version/fetchVersions.js' +import { VersionDrawerCreatedAtCell } from '../Version/SelectComparison/VersionDrawer/CreatedAtCell.js' +import { buildVersionColumns } from './buildColumns.js' +import { VersionsViewClient } from './index.client.js' +import './index.scss' + +const baseClass = 'versions' + +export async function VersionsView(props: DocumentViewServerProps) { + const { + hasPublishedDoc, + initPageResult: { + collectionConfig, + docID: id, + globalConfig, + req, + req: { + i18n, + payload: { config }, + t, + user, + }, + }, + routeSegments: segments, + searchParams: { limit, page, sort }, + versions: { disableGutter = false, useVersionDrawerCreatedAtCell = false } = {}, + } = props + + const draftsEnabled = hasDraftsEnabled(collectionConfig || globalConfig) + + const collectionSlug = collectionConfig?.slug + const globalSlug = globalConfig?.slug + + const isTrashed = segments[2] === 'trash' + + const { + localization, + routes: { api: apiRoute }, + serverURL, + } = config + + const whereQuery: { + and: Array<{ parent?: { equals: number | string }; snapshot?: { not_equals: boolean } }> + } & Where = { + and: [], + } + if (localization && draftsEnabled) { + whereQuery.and.push({ + snapshot: { + not_equals: true, + }, + }) + } + + const defaultLimit = collectionSlug ? collectionConfig?.admin?.pagination?.defaultLimit : 10 + + const limitToUse = isNumber(limit) ? Number(limit) : defaultLimit + + const versionsData: PaginatedDocs = await fetchVersions({ + collectionSlug, + depth: 0, + globalSlug, + limit: limitToUse, + locale: req.locale, + overrideAccess: false, + page: page ? parseInt(page.toString(), 10) : undefined, + parentID: id, + req, + sort: sort as string, + user, + where: whereQuery, + }) + + if (!versionsData) { + throw new Error('not-found') + } + + const [currentlyPublishedVersion, latestDraftVersion] = await Promise.all([ + hasPublishedDoc + ? fetchLatestVersion({ + collectionSlug, + depth: 0, + globalSlug, + locale: req.locale, + overrideAccess: false, + parentID: id, + req, + select: { + id: true, + updatedAt: true, + version: { + _status: true, + updatedAt: true, + }, + }, + status: 'published', + user, + where: localization + ? { + snapshot: { + not_equals: true, + }, + } + : undefined, + }) + : Promise.resolve(null), + draftsEnabled + ? fetchLatestVersion({ + collectionSlug, + depth: 0, + globalSlug, + locale: req.locale, + overrideAccess: false, + parentID: id, + req, + select: { + id: true, + updatedAt: true, + version: { + _status: true, + updatedAt: true, + }, + }, + status: 'draft', + user, + where: localization + ? { + snapshot: { + not_equals: true, + }, + } + : undefined, + }) + : Promise.resolve(null), + ]) + + const fetchURL = formatAdminURL({ + apiRoute, + path: collectionSlug ? `/${collectionSlug}/versions` : `/${globalSlug}/versions`, + }) + + const columns = buildVersionColumns({ + collectionConfig, + CreatedAtCellOverride: useVersionDrawerCreatedAtCell ? VersionDrawerCreatedAtCell : undefined, + currentlyPublishedVersion, + docID: id, + docs: versionsData?.docs, + globalConfig, + i18n, + isTrashed, + latestDraftVersion, + }) + + const pluralLabel = + typeof collectionConfig?.labels?.plural === 'function' + ? collectionConfig.labels.plural({ i18n, t }) + : (collectionConfig?.labels?.plural ?? globalConfig?.label) + + const GutterComponent = disableGutter ? React.Fragment : Gutter + + return ( + + +
    + + + + + +
    +     + ) +} diff --git a/packages/ui/src/views/Versions/buildColumns.tsx b/packages/ui/src/views/Versions/buildColumns.tsx new file mode 100644 index 00000000000..c7f1c00d8a6 --- /dev/null +++ b/packages/ui/src/views/Versions/buildColumns.tsx @@ -0,0 +1,105 @@ +import type { I18n } from '@payloadcms/translations' +import type { + Column, + PaginatedDocs, + SanitizedCollectionConfig, + SanitizedGlobalConfig, + TypeWithVersion, +} from 'payload' + +import { hasDraftsEnabled } from 'payload/shared' +import React from 'react' + +import { SortColumn } from '../../elements/SortColumn/index.js' +import { AutosaveCell } from './cells/AutosaveCell/index.js' +import { CreatedAtCell, type CreatedAtCellProps } from './cells/CreatedAt/index.js' +import { IDCell } from './cells/ID/index.js' + +export const buildVersionColumns = ({ + collectionConfig, + CreatedAtCellOverride, + currentlyPublishedVersion, + docID, + docs, + globalConfig, + i18n: { t }, + isTrashed, + latestDraftVersion, +}: { + collectionConfig?: SanitizedCollectionConfig + CreatedAtCellOverride?: React.ComponentType + currentlyPublishedVersion?: TypeWithVersion + docID?: number | string + docs: PaginatedDocs>['docs'] + globalConfig?: SanitizedGlobalConfig + i18n: I18n + isTrashed?: boolean + latestDraftVersion?: TypeWithVersion +}): Column[] => { + const entityConfig = collectionConfig || globalConfig + + const CreatedAtCellComponent = CreatedAtCellOverride ?? CreatedAtCell + + const columns: Column[] = [ + { + accessor: 'updatedAt', + active: true, + field: { + name: '', + type: 'date', + }, + Heading: , + renderedCells: docs.map((doc, i) => { + return ( + + ) + }), + }, + { + accessor: 'id', + active: true, + field: { + name: '', + type: 'text', + }, + Heading: , + renderedCells: docs.map((doc, i) => { + return + }), + }, + ] + + if (hasDraftsEnabled(entityConfig)) { + columns.push({ + accessor: '_status', + active: true, + field: { + name: '', + type: 'checkbox', + }, + Heading: , + renderedCells: docs.map((doc, i) => { + return ( + + ) + }), + }) + } + + return columns +} diff --git a/packages/ui/src/views/Versions/cells/AutosaveCell/index.scss b/packages/ui/src/views/Versions/cells/AutosaveCell/index.scss new file mode 100644 index 00000000000..b4d1d7099c5 --- /dev/null +++ b/packages/ui/src/views/Versions/cells/AutosaveCell/index.scss @@ -0,0 +1,9 @@ +@layer payload-default { + .autosave-cell { + &__items { + display: flex; + align-items: center; + gap: calc(var(--base) * 0.5); + } + } +} diff --git a/packages/ui/src/views/Versions/cells/AutosaveCell/index.tsx b/packages/ui/src/views/Versions/cells/AutosaveCell/index.tsx new file mode 100644 index 00000000000..0c5a4d01af9 --- /dev/null +++ b/packages/ui/src/views/Versions/cells/AutosaveCell/index.tsx @@ -0,0 +1,49 @@ +'use client' +import type { TypeWithVersion } from 'payload' + +import React from 'react' + +import { Pill } from '../../../../elements/Pill/index.js' +import { useTranslation } from '../../../../providers/Translation/index.js' +import { VersionPillLabel } from '../../../Version/VersionPillLabel/VersionPillLabel.js' +import './index.scss' + +const baseClass = 'autosave-cell' + +type AutosaveCellProps = { + currentlyPublishedVersion?: TypeWithVersion + latestDraftVersion?: TypeWithVersion + rowData: { + autosave?: boolean + id: number | string + publishedLocale?: string + updatedAt?: string + version: { + [key: string]: unknown + _status: 'draft' | 'published' + updatedAt: string + } + } +} + +export const AutosaveCell: React.FC = ({ + currentlyPublishedVersion, + latestDraftVersion, + rowData, +}) => { + const { t } = useTranslation() + + return ( +
    + {rowData?.autosave && {t('version:autosave')}} + +
    + ) +} diff --git a/packages/ui/src/views/Versions/cells/CreatedAt/index.tsx b/packages/ui/src/views/Versions/cells/CreatedAt/index.tsx new file mode 100644 index 00000000000..5d7512f60be --- /dev/null +++ b/packages/ui/src/views/Versions/cells/CreatedAt/index.tsx @@ -0,0 +1,60 @@ +'use client' +import { formatAdminURL } from 'payload/shared' +import React from 'react' + +import { useConfig } from '../../../../providers/Config/index.js' +import { Link } from '../../../../providers/Router/index.js' +import { useTranslation } from '../../../../providers/Translation/index.js' +import { formatDate } from '../../../../utilities/formatDocTitle/formatDateTitle.js' + +export type CreatedAtCellProps = { + collectionSlug?: string + docID?: number | string + globalSlug?: string + isTrashed?: boolean + rowData?: { + id: number | string + updatedAt: Date | number | string + } +} + +export const CreatedAtCell: React.FC = ({ + collectionSlug, + docID, + globalSlug, + isTrashed, + rowData: { id, updatedAt } = {}, +}) => { + const { + config: { + admin: { dateFormat }, + routes: { admin: adminRoute }, + }, + } = useConfig() + + const { i18n } = useTranslation() + + const trashedDocPrefix = isTrashed ? 'trash/' : '' + + let to: string + + if (collectionSlug) { + to = formatAdminURL({ + adminRoute, + path: `/collections/${collectionSlug}/${trashedDocPrefix}${docID}/versions/${id}`, + }) + } + + if (globalSlug) { + to = formatAdminURL({ + adminRoute, + path: `/globals/${globalSlug}/versions/${id}`, + }) + } + + return ( + + {formatDate({ date: updatedAt, i18n, pattern: dateFormat })} + + ) +} diff --git a/packages/ui/src/views/Versions/cells/ID/index.tsx b/packages/ui/src/views/Versions/cells/ID/index.tsx new file mode 100644 index 00000000000..7b3853fc16f --- /dev/null +++ b/packages/ui/src/views/Versions/cells/ID/index.tsx @@ -0,0 +1,6 @@ +'use client' +import React, { Fragment } from 'react' + +export function IDCell({ id }: { id: number | string }) { + return {id} +} diff --git a/packages/ui/src/views/Versions/index.client.tsx b/packages/ui/src/views/Versions/index.client.tsx new file mode 100644 index 00000000000..30cb5b920f1 --- /dev/null +++ b/packages/ui/src/views/Versions/index.client.tsx @@ -0,0 +1,75 @@ +'use client' +import type { Column, SanitizedCollectionConfig } from 'payload' + +import React from 'react' + +import { LoadingOverlayToggle } from '../../elements/Loading/index.js' +import { Pagination } from '../../elements/Pagination/index.js' +import { PerPage } from '../../elements/PerPage/index.js' +import { Table } from '../../elements/Table/index.js' +import { useListQuery } from '../../providers/ListQuery/index.js' +import { useSearchParams } from '../../providers/Router/index.js' +import { useTranslation } from '../../providers/Translation/index.js' + +export const VersionsViewClient: React.FC<{ + readonly baseClass: string + readonly columns: Column[] + readonly fetchURL: string + readonly paginationLimits?: SanitizedCollectionConfig['admin']['pagination']['limits'] +}> = (props) => { + const { baseClass, columns, paginationLimits } = props + + const { data, handlePageChange, handlePerPageChange } = useListQuery() + + const searchParams = useSearchParams() + const limit = searchParams.get('limit') + + const { i18n } = useTranslation() + + const versionCount = data?.totalDocs || 0 + + return ( + + + {versionCount === 0 && ( +
    + {i18n.t('version:noFurtherVersionsFound')} +
    + )} + {versionCount > 0 && ( + +
    +
    + + {data?.totalDocs > 0 && ( + +
    + {data.page * data.limit - (data.limit - 1)}- + {data.totalPages > 1 && data.totalPages !== data.page + ? data.limit * data.page + : data.totalDocs}{' '} + {i18n.t('general:of')} {data.totalDocs} +
    + +     + )} +
    + + )} + + ) +} diff --git a/packages/ui/src/views/Versions/index.scss b/packages/ui/src/views/Versions/index.scss new file mode 100644 index 00000000000..25a146073be --- /dev/null +++ b/packages/ui/src/views/Versions/index.scss @@ -0,0 +1,110 @@ +@import '../../scss/styles.scss'; + +@layer payload-default { + .versions { + width: 100%; + margin-bottom: calc(var(--base) * 2); + + &__wrap { + padding-top: 0; + padding-bottom: var(--spacing-view-bottom); + margin-top: calc(var(--base) * 0.75); + } + + &__header { + margin-bottom: var(--base); + } + + &__no-versions { + margin-top: calc(var(--base) * 1.5); + } + + &__parent-doc { + .banner__content { + display: flex; + } + } + + &__parent-doc-pills { + [dir='ltr'] & { + margin-left: auto; + } + + [dir='rtl'] & { + margin-right: auto; + } + } + + .table { + table { + width: 100%; + overflow: auto; + } + } + + &__page-controls { + width: 100%; + display: flex; + align-items: center; + } + + .paginator { + margin-bottom: 0; + } + + &__page-info { + [dir='ltr'] & { + margin-right: var(--base); + margin-left: auto; + } + + [dir='rtl'] & { + margin-left: var(--base); + margin-right: auto; + } + } + + @include mid-break { + &__wrap { + padding-top: 0; + margin-top: 0; + } + + // on mobile, extend the table all the way to the viewport edges + // this is to visually indicate overflowing content + .table { + display: flex; + width: calc(100% + calc(var(--gutter-h) * 2)); + max-width: unset; + left: calc(var(--gutter-h) * -1); + position: relative; + padding-left: var(--gutter-h); + + &::after { + content: ''; + height: 1px; + padding-right: var(--gutter-h); + } + } + + &__page-controls { + flex-wrap: wrap; + } + + &__page-info { + [dir='ltr'] & { + margin-left: 0; + } + + [dir='rtl'] & { + margin-right: 0; + } + } + + .paginator { + width: 100%; + margin-bottom: var(--base); + } + } + } +} diff --git a/packages/ui/src/views/Versions/index.tsx b/packages/ui/src/views/Versions/index.tsx new file mode 100644 index 00000000000..4e9cad34461 --- /dev/null +++ b/packages/ui/src/views/Versions/index.tsx @@ -0,0 +1 @@ +export { VersionsView } from './RenderVersions.js' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 51b897a8504..26176aa667c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -147,7 +147,7 @@ importers: version: 8.15.1(@aws-sdk/credential-providers@3.1014.0)(socks@2.8.7) next: specifier: 16.2.1 - version: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + version: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) node-gyp: specifier: 12.2.0 version: 12.2.0 @@ -873,9 +873,6 @@ importers: packages/payload: dependencies: - '@next/env': - specifier: ^15.1.5 - version: 15.5.14 '@payloadcms/translations': specifier: workspace:* version: link:../translations @@ -906,6 +903,12 @@ importers: deepmerge: specifier: 4.3.1 version: 4.3.1 + dotenv: + specifier: 16.4.7 + version: 16.4.7 + dotenv-expand: + specifier: 12.0.1 + version: 12.0.1 file-type: specifier: 19.3.0 version: 19.3.0 @@ -1677,7 +1680,7 @@ importers: version: link:../plugin-cloud-storage uploadthing: specifier: 7.3.0 - version: 7.3.0(express@5.2.1)(next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0))(tailwindcss@4.2.2) + version: 7.3.0(express@5.2.1)(h3@1.15.10)(next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0))(tailwindcss@4.2.2) devDependencies: payload: specifier: workspace:* @@ -1696,6 +1699,31 @@ importers: specifier: workspace:* version: link:../payload + packages/tanstack-start: + dependencies: + '@payloadcms/next': + specifier: workspace:* + version: link:../next + '@payloadcms/translations': + specifier: workspace:* + version: link:../translations + '@payloadcms/ui': + specifier: workspace:* + version: link:../ui + '@tanstack/react-router': + specifier: '>=1.0.0' + version: 1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + payload: + specifier: workspace:* + version: link:../payload + react: + specifier: 19.2.4 + version: 19.2.4 + devDependencies: + '@tanstack/react-start': + specifier: ^1.167.0 + version: 1.167.16(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12)) + packages/translations: dependencies: date-fns: @@ -1735,6 +1763,9 @@ importers: '@dnd-kit/core': specifier: 6.3.1 version: 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@dnd-kit/modifiers': + specifier: 9.0.0 + version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4) '@dnd-kit/sortable': specifier: 10.0.0 version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4) @@ -1774,6 +1805,9 @@ importers: object-to-formdata: specifier: 4.5.1 version: 4.5.1 + path-to-regexp: + specifier: 6.3.0 + version: 6.3.0 qs-esm: specifier: 8.0.1 version: 8.0.1 @@ -1851,6 +1885,52 @@ importers: specifier: workspace:* version: link:../payload + tanstack-app: + dependencies: + '@payloadcms/next': + specifier: workspace:* + version: link:../packages/next + '@payloadcms/richtext-lexical': + specifier: workspace:* + version: link:../packages/richtext-lexical + '@payloadcms/tanstack-start': + specifier: workspace:* + version: link:../packages/tanstack-start + '@payloadcms/ui': + specifier: workspace:* + version: link:../packages/ui + '@tanstack/react-router': + specifier: ^1.167.0 + version: 1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/react-start': + specifier: ^1.167.0 + version: 1.167.16(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12)) + payload: + specifier: workspace:* + version: link:../packages/payload + react: + specifier: 19.2.4 + version: 19.2.4 + react-dom: + specifier: 19.2.4 + version: 19.2.4(react@19.2.4) + devDependencies: + '@vitejs/plugin-react': + specifier: ^4.0.0 + version: 4.5.2(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)) + sass: + specifier: ^1.0.0 + version: 1.77.4 + typescript: + specifier: 5.7.3 + version: 5.7.3 + vite: + specifier: ^7.0.0 + version: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + vite-tsconfig-paths: + specifier: ^5.0.0 + version: 5.1.4(typescript@5.7.3)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)) + templates/blank: dependencies: '@payloadcms/db-mongodb': @@ -1876,7 +1956,7 @@ importers: version: 16.8.1 next: specifier: 16.2.1 - version: 16.2.1(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + version: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) payload: specifier: workspace:* version: link:../../packages/payload @@ -1913,7 +1993,7 @@ importers: version: 9.39.2(jiti@2.6.1) eslint-config-next: specifier: 16.2.1 - version: 16.2.1(@typescript-eslint/parser@8.57.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3))(eslint-plugin-import-x@4.6.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3) + version: 16.2.1(eslint-plugin-import-x@4.6.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3) jsdom: specifier: 28.0.0 version: 28.0.0(@noble/hashes@1.8.0) @@ -2027,7 +2107,7 @@ importers: version: 0.563.0(react@19.2.4) next: specifier: 16.2.1 - version: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + version: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) next-themes: specifier: 0.4.6 version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -2217,7 +2297,7 @@ importers: version: 0.563.0(react@19.2.4) next: specifier: 16.2.1 - version: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + version: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) next-sitemap: specifier: ^4.2.3 version: 4.2.3(next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0)) @@ -2281,7 +2361,7 @@ importers: version: 9.39.2(jiti@2.6.1) eslint-config-next: specifier: 16.2.1 - version: 16.2.1(eslint-plugin-import-x@4.6.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3) + version: 16.2.1(@typescript-eslint/parser@8.57.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3))(eslint-plugin-import-x@4.6.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.7.3) jsdom: specifier: 28.0.0 version: 28.0.0(@noble/hashes@1.8.0) @@ -2460,6 +2540,9 @@ importers: '@payloadcms/storage-vercel-blob': specifier: workspace:* version: link:../packages/storage-vercel-blob + '@payloadcms/tanstack-start': + specifier: workspace:* + version: link:../packages/tanstack-start '@payloadcms/translations': specifier: workspace:* version: link:../packages/translations @@ -2537,7 +2620,7 @@ importers: version: 8.15.1(@aws-sdk/credential-providers@3.1014.0)(socks@2.8.7) next: specifier: 16.2.1 - version: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4) + version: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4) nodemailer: specifier: 7.0.12 version: 7.0.12 @@ -2608,7 +2691,7 @@ importers: version: 4.1.2 changelogen: specifier: ^0.6.2 - version: 0.6.2 + version: 0.6.2(magicast@0.5.2) execa: specifier: 5.1.1 version: 5.1.1 @@ -2657,7 +2740,7 @@ importers: version: 4.1.2 changelogen: specifier: ^0.6.2 - version: 0.6.2 + version: 0.6.2(magicast@0.5.2) create-payload-app: specifier: workspace:* version: link:../../packages/create-payload-app @@ -3196,6 +3279,10 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 + '@babel/code-frame@7.27.1': + resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==} + engines: {node: '>=6.9.0'} + '@babel/code-frame@7.29.0': resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==} engines: {node: '>=6.9.0'} @@ -5590,9 +5677,6 @@ packages: '@next/env@13.5.11': resolution: {integrity: sha512-fbb2C7HChgM7CemdCY+y3N1n8pcTKdqtQLbC7/EQtPdLvlMUT9JX/dBYl8MMZAtYG4uVMyPFHXckb68q/NRwqg==} - '@next/env@15.5.14': - resolution: {integrity: sha512-aXeirLYuASxEgi4X4WhfXsShCFxWDfNn/8ZeC5YXAS2BB4A8FJi1kwwGL6nvMVboE7fZCzmJPNdMvVHc8JpaiA==} - '@next/env@16.2.1': resolution: {integrity: sha512-n8P/HCkIWW+gVal2Z8XqXJ6aB3J0tuM29OcHpCsobWlChH/SITBs1DFBk/HajgrwDkqqBXPbuUuzgDvUekREPg==} @@ -5705,6 +5789,22 @@ packages: resolution: {integrity: sha512-gOBg5YHMfZy+TfHArfVogwgfBeQnKbbGo3pSUyK/gSI0AVu+pEiDVcKlQb0D8Mg1LNRZILZ6XG8I5dJ4KuAd9Q==} engines: {node: ^20.17.0 || >=22.9.0} + '@oozcitak/dom@2.0.2': + resolution: {integrity: sha512-GjpKhkSYC3Mj4+lfwEyI1dqnsKTgwGy48ytZEhm4A/xnH/8z9M3ZVXKr/YGQi3uCLs1AEBS+x5T2JPiueEDW8w==} + engines: {node: '>=20.0'} + + '@oozcitak/infra@2.0.2': + resolution: {integrity: sha512-2g+E7hoE2dgCz/APPOEK5s3rMhJvNxSMBrP+U+j1OWsIbtSpWxxlUjq1lU8RIsFJNYv7NMlnVsCuHcUzJW+8vA==} + engines: {node: '>=20.0'} + + '@oozcitak/url@3.0.0': + resolution: {integrity: sha512-ZKfET8Ak1wsLAiLWNfFkZc/BraDccuTJKR6svTYc7sVjbR+Iu0vtXdiDMY4o6jaFl5TW2TlS7jbLl4VovtAJWQ==} + engines: {node: '>=20.0'} + + '@oozcitak/util@10.0.0': + resolution: {integrity: sha512-hAX0pT/73190NLqBPPWSdBVGtbY6VOhWYK3qqHqtXQ1gK7kS2yz4+ivsN07hpJ6I3aeMtKP6J6npsEKOAzuTLA==} + engines: {node: '>=20.0'} + '@opennextjs/aws@3.9.14': resolution: {integrity: sha512-ZNUY+r3FXr393Jli+wYqNjMllfQ0k7ZBIm8nDz6wIrrCuxX8FsNC4pioLY4ZySQfPGmiKWE6M0IyB7sOBnm58g==} hasBin: true @@ -6709,6 +6809,9 @@ packages: '@rolldown/pluginutils@1.0.0-beta.11': resolution: {integrity: sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==} + '@rolldown/pluginutils@1.0.0-beta.40': + resolution: {integrity: sha512-s3GeJKSQOwBlzdUrj4ISjJj5SfSh+aqn0wjOar4Bx95iV1ETI7F6S/5hLcfAxZ9kXDcyrAkxPlqmd1ZITttf+w==} + '@rollup/plugin-commonjs@28.0.1': resolution: {integrity: sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==} engines: {node: '>=16.0.0 || 14 >= 14.17'} @@ -7758,6 +7861,113 @@ packages: peerDependencies: tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1' + '@tanstack/history@1.161.6': + resolution: {integrity: sha512-NaOGLRrddszbQj9upGat6HG/4TKvXLvu+osAIgfxPYA+eIvYKv8GKDJOrY2D3/U9MRnKfMWD7bU4jeD4xmqyIg==} + engines: {node: '>=20.19'} + + '@tanstack/react-router@1.168.10': + resolution: {integrity: sha512-/RmDlOwDkCug609KdPB3U+U1zmrtadJpvsmRg2zEn8TRCKRNri7dYZIjQZbNg8PgUiRL4T6njrZBV1ChzblNaA==} + engines: {node: '>=20.19'} + peerDependencies: + react: 19.2.4 + react-dom: 19.2.4 + + '@tanstack/react-start-client@1.166.25': + resolution: {integrity: sha512-FvD279zzneUtsfhaTv2c29qhE1Z3wHy3dt3cCjn9LzWZehOgn5Ij78s0YpmQaQ8lSF3YL7CySE3pDk9XHE6YeA==} + engines: {node: '>=22.12.0'} + peerDependencies: + react: 19.2.4 + react-dom: 19.2.4 + + '@tanstack/react-start-server@1.166.25': + resolution: {integrity: sha512-bPLADxlplvcnAcnZvBjJl2MzgUnB85d7Mu5aEkYoOFxhz0WiG6mZp7BDadIJuCd33NYMirsd3XrjfCHNzrMTyg==} + engines: {node: '>=22.12.0'} + peerDependencies: + react: 19.2.4 + react-dom: 19.2.4 + + '@tanstack/react-start@1.167.16': + resolution: {integrity: sha512-vHIhn+FTWfAVhRus1BZEaBZPhnYL+StDuMlShslIBPEGGTCRt11BxNUfV/iDpr7zbxw36Snj7zGfI7DwfjjlDQ==} + engines: {node: '>=22.12.0'} + hasBin: true + peerDependencies: + react: 19.2.4 + react-dom: 19.2.4 + vite: '>=7.0.0' + + '@tanstack/react-store@0.9.3': + resolution: {integrity: sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg==} + peerDependencies: + react: 19.2.4 + react-dom: 19.2.4 + + '@tanstack/router-core@1.168.9': + resolution: {integrity: sha512-18oeEwEDyXOIuO1VBP9ACaK7tYHZUjynGDCoUh/5c/BNhia9vCJCp9O0LfhZXOorDc/PmLSgvmweFhVmIxF10g==} + engines: {node: '>=20.19'} + hasBin: true + + '@tanstack/router-generator@1.166.24': + resolution: {integrity: sha512-vdaGKwuH+r+DPe6R1mjk+TDDmDH6NTG7QqwxHqGEvOH4aGf9sPjhmRKNJZqQr8cPIbfp6u5lXyZ1TeDcSNMVEA==} + engines: {node: '>=20.19'} + + '@tanstack/router-plugin@1.167.12': + resolution: {integrity: sha512-StEHcctCuFI5taSjO+lhR/yQ+EK63BdyYa+ne6FoNQPB3MMrOUrz2ZVnbqILRLkh2b+p2EfBKt65sgAKdKygPQ==} + engines: {node: '>=20.19'} + hasBin: true + peerDependencies: + '@rsbuild/core': '>=1.0.2' + '@tanstack/react-router': ^1.168.10 + vite: '>=5.0.0 || >=6.0.0 || >=7.0.0' + vite-plugin-solid: ^2.11.10 + webpack: '>=5.92.0' + peerDependenciesMeta: + '@rsbuild/core': + optional: true + '@tanstack/react-router': + optional: true + vite: + optional: true + vite-plugin-solid: + optional: true + webpack: + optional: true + + '@tanstack/router-utils@1.161.6': + resolution: {integrity: sha512-nRcYw+w2OEgK6VfjirYvGyPLOK+tZQz1jkYcmH5AjMamQ9PycnlxZF2aEZtPpNoUsaceX2bHptn6Ub5hGXqNvw==} + engines: {node: '>=20.19'} + + '@tanstack/start-client-core@1.167.9': + resolution: {integrity: sha512-2ETQO/bxiZGsoTdPxZb7xR8YqCy5l4kv/QPkwIXuvx/A4BjufngXfgISjXUicXsFRIBZeiFnBzp9A38UMsS2iA==} + engines: {node: '>=22.12.0'} + hasBin: true + + '@tanstack/start-fn-stubs@1.161.6': + resolution: {integrity: sha512-Y6QSlGiLga8cHfvxGGaonXIlt2bIUTVdH6AMjmpMp7+ANNCp+N96GQbjjhLye3JkaxDfP68x5iZA8NK4imgRig==} + engines: {node: '>=22.12.0'} + + '@tanstack/start-plugin-core@1.167.17': + resolution: {integrity: sha512-OkorpOobGOEDVr72QUmkzKjbawKC05CSz+1B3OObB/AxBIIw+lLLhTXbV45QkX2LZA7dcRvPJYZGOH1pkFqA1g==} + engines: {node: '>=22.12.0'} + peerDependencies: + vite: '>=7.0.0' + + '@tanstack/start-server-core@1.167.9': + resolution: {integrity: sha512-vKkslQIihoDDVumF73VXT7PVFmN7Nea0nKhZx7gMbc0m09yPQYYR1dn86/dz14k6/7cDkJ+qKXa09rlVlN/i9Q==} + engines: {node: '>=22.12.0'} + hasBin: true + + '@tanstack/start-storage-context@1.166.23': + resolution: {integrity: sha512-3vEdiYRMx+r+Q7Xqxj3YmADPIpMm7fkKxDa8ITwodGXiw+SBJCGkpBXGUWjOXyXkIyqGHKM5UrReTcVUTkmaug==} + engines: {node: '>=22.12.0'} + + '@tanstack/store@0.9.3': + resolution: {integrity: sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw==} + + '@tanstack/virtual-file-routes@1.161.7': + resolution: {integrity: sha512-olW33+Cn+bsCsZKPwEGhlkqS6w3M2slFv11JIobdnCFKMLG97oAI2kWKdx5/zsywTL8flpnoIgaZZPlQTFYhdQ==} + engines: {node: '>=20.19'} + hasBin: true + '@testing-library/dom@10.4.1': resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==} engines: {node: '>=18'} @@ -8641,6 +8851,10 @@ packages: resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==} engines: {node: '>=12'} + ansis@4.2.0: + resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==} + engines: {node: '>=14'} + anymatch@3.1.3: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} engines: {node: '>= 8'} @@ -8730,6 +8944,10 @@ packages: ast-types-flow@0.0.8: resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==} + ast-types@0.16.1: + resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==} + engines: {node: '>=4'} + astral-regex@2.0.0: resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==} engines: {node: '>=8'} @@ -8791,6 +9009,9 @@ packages: react-native-b4a: optional: true + babel-dead-code-elimination@1.0.12: + resolution: {integrity: sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig==} + babel-plugin-macros@3.1.0: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} @@ -8914,6 +9135,9 @@ packages: body-scroll-lock@4.0.0-beta.0: resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==} + boolbase@1.0.0: + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} + bowser@2.14.1: resolution: {integrity: sha512-tzPjzCxygAKWFOJP011oxFHs57HzIhOEracIgAePE4pqB3LikALKnSzUyU4MGs9/iCEUuHlAJTjTc5M+u7YEGg==} @@ -9079,6 +9303,13 @@ packages: charenc@0.0.2: resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==} + cheerio-select@2.1.0: + resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==} + + cheerio@1.2.0: + resolution: {integrity: sha512-WDrybc/gKFpTYQutKIK6UvfcuxijIZfMfXaYm8NMsPQxSYvf+13fXUJ4rztGGbJcBQ/GF55gvrZ0Bc0bj/mqvg==} + engines: {node: '>=20.18.1'} + chokidar@3.6.0: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} @@ -9269,6 +9500,12 @@ packages: convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + cookie-es@1.2.2: + resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==} + + cookie-es@2.0.0: + resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==} + cookie-signature@1.2.2: resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==} engines: {node: '>=6.6.0'} @@ -9330,6 +9567,9 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} + crossws@0.3.5: + resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==} + crypt@0.0.2: resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==} @@ -9341,10 +9581,17 @@ packages: resolution: {integrity: sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==} engines: {node: '>=12'} + css-select@5.2.2: + resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==} + css-tree@3.2.1: resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + css-what@6.2.2: + resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==} + engines: {node: '>= 6'} + cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -9592,6 +9839,10 @@ packages: dezalgo@1.0.4: resolution: {integrity: sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==} + diff@8.0.4: + resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==} + engines: {node: '>=0.3.1'} + dir-glob@3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} @@ -9614,13 +9865,30 @@ packages: dom-helpers@5.2.1: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} + dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + + domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + + domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + dompurify@3.2.7: resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==} + domutils@3.2.2: + resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==} + dot-prop@9.0.0: resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==} engines: {node: '>=18'} + dotenv-expand@12.0.1: + resolution: {integrity: sha512-LaKRbou8gt0RNID/9RoI+J2rvXsBRPMV7p+ElHlPhcSARbCPDYcYG2s1TIzAfWv4YSgyY5taidWzzs31lNV3yQ==} + engines: {node: '>=12'} + dotenv@16.4.7: resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==} engines: {node: '>=12'} @@ -9781,6 +10049,9 @@ packages: resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==} engines: {node: '>= 0.8'} + encoding-sniffer@0.2.1: + resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==} + end-of-stream@1.4.5: resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==} @@ -9792,6 +10063,10 @@ packages: resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==} engines: {node: '>=8.6'} + entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + entities@6.0.1: resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} engines: {node: '>=0.12'} @@ -10793,6 +11068,19 @@ packages: resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==} engines: {node: '>=10'} + h3@1.15.10: + resolution: {integrity: sha512-YzJeWSkDZxAhvmp8dexjRK5hxziRO7I9m0N53WhvYL5NiWfkUkzssVzY9jvGu0HBoLFW6+duYmNSn6MaZBCCtg==} + + h3@2.0.1-rc.16: + resolution: {integrity: sha512-h+pjvyujdo9way8qj6FUbhaQcHlR8FEq65EhTX9ViT5pK8aLj68uFl4hBkF+hsTJAH+H1END2Yv6hTIsabGfag==} + engines: {node: '>=20.11.1'} + hasBin: true + peerDependencies: + crossws: ^0.4.1 + peerDependenciesMeta: + crossws: + optional: true + happy-dom@20.8.9: resolution: {integrity: sha512-Tz23LR9T9jOGVZm2x1EPdXqwA37G/owYMxRwU0E4miurAtFsPMQ1d2Jc2okUaSjZqAFz2oEn3FLXC5a0a+siyA==} engines: {node: '>=20.0.0'} @@ -10879,6 +11167,9 @@ packages: resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} engines: {node: '>=8'} + htmlparser2@10.1.0: + resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==} + http-cache-semantics@4.2.0: resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==} @@ -10930,6 +11221,10 @@ packages: engines: {node: '>=18'} hasBin: true + iconv-lite@0.6.3: + resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} + engines: {node: '>=0.10.0'} + iconv-lite@0.7.2: resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==} engines: {node: '>=0.10.0'} @@ -11024,6 +11319,9 @@ packages: resolution: {integrity: sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==} engines: {node: '>= 10'} + iron-webcrypto@1.2.1: + resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==} + is-alphabetical@2.0.1: resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==} @@ -11251,6 +11549,10 @@ packages: isarray@2.0.5: resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==} + isbot@5.1.37: + resolution: {integrity: sha512-5bcicX81xf6NlTEV8rWdg7Pk01LFizDetuYGHx6d/f6y3lR2/oo8IfxjzJqn1UdDEyCcwT9e7NRloj8DwCYujQ==} + engines: {node: '>=18'} + isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} @@ -11656,6 +11958,9 @@ packages: resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==} engines: {node: '>=12'} + magicast@0.5.2: + resolution: {integrity: sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==} + make-dir@2.1.0: resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==} engines: {node: '>=6'} @@ -12121,6 +12426,9 @@ packages: engines: {node: ^20.17.0 || >=22.9.0} hasBin: true + node-mock-http@1.0.4: + resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==} + node-releases@2.0.36: resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==} @@ -12165,6 +12473,9 @@ packages: npx-import@1.1.4: resolution: {integrity: sha512-3ShymTWOgqGyNlh5lMJAejLuIv3W1K3fbI5Ewc6YErZU3Sp0PqsNs8UIU1O8z5+KVl/Du5ag56Gza9vdorGEoA==} + nth-check@2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + nypm@0.6.5: resolution: {integrity: sha512-K6AJy1GMVyfyMXRVB88700BJqNUkByijGJM8kEHpLdcAt+vSQAVfkWWHYzuRXHSY6xA2sNc5RjTj0p9rE2izVQ==} engines: {node: '>=18'} @@ -12341,6 +12652,15 @@ packages: resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==} engines: {node: '>=0.10.0'} + parse5-htmlparser2-tree-adapter@7.1.0: + resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==} + + parse5-parser-stream@7.1.2: + resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==} + + parse5@7.3.0: + resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==} + parse5@8.0.0: resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==} @@ -12742,6 +13062,9 @@ packages: resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==} engines: {node: '>=10'} + radix3@1.1.2: + resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==} + range-parser@1.2.1: resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} engines: {node: '>= 0.6'} @@ -12902,6 +13225,10 @@ packages: resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==} engines: {node: '>= 12.13.0'} + recast@0.23.11: + resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==} + engines: {node: '>= 4'} + recharts@3.2.1: resolution: {integrity: sha512-0JKwHRiFZdmLq/6nmilxEZl3pqb4T+aKkOkOi/ZISRZwfBhVMgInxzlYU9D4KnCH3KINScLy68m/OvMXoYGZUw==} engines: {node: '>=18'} @@ -13064,6 +13391,9 @@ packages: engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true + rou3@0.8.1: + resolution: {integrity: sha512-ePa+XGk00/3HuCqrEnK3LxJW7I0SdNg6EFzKUJG73hMAdDcOUC/i/aSz7LSDwLrGr33kal/rqOGydzwl6U7zBA==} + router@2.2.0: resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==} engines: {node: '>= 18'} @@ -13284,6 +13614,16 @@ packages: resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==} engines: {node: '>= 18'} + seroval-plugins@1.5.1: + resolution: {integrity: sha512-4FbuZ/TMl02sqv0RTFexu0SP6V+ywaIe5bAWCCEik0fk17BhALgwvUDVF7e3Uvf9pxmwCEJsRPmlkUE6HdzLAw==} + engines: {node: '>=10'} + peerDependencies: + seroval: ^1.0 + + seroval@1.5.1: + resolution: {integrity: sha512-OwrZRZAfhHww0WEnKHDY8OM0U/Qs8OTfIDWhUD4BLpNJUfXK4cGmjiagGze086m+mhI+V2nD0gfbHEnJjb9STA==} + engines: {node: '>=10'} + serve-static@2.2.1: resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==} engines: {node: '>= 18'} @@ -13518,6 +13858,11 @@ packages: sqids@0.3.0: resolution: {integrity: sha512-lOQK1ucVg+W6n3FhRwwSeUijxe93b51Bfz5PMRMihVf1iVkl82ePQG7V5vwrhzB11v0NtsR25PSZRGiSomJaJw==} + srvx@0.11.13: + resolution: {integrity: sha512-oknN6qduuMPafxKtHucUeG32Q963pjriA5g3/Bl05cwEsUe5VVbIU4qR9LrALHbipSCyBe+VmfDGGydqazDRkw==} + engines: {node: '>=20.16.0'} + hasBin: true + ssri@13.0.1: resolution: {integrity: sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==} engines: {node: ^20.17.0 || >=22.9.0} @@ -14101,6 +14446,9 @@ packages: unbzip2-stream@1.4.3: resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==} + uncrypto@0.1.3: + resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==} + undici-types@5.26.5: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} @@ -14175,6 +14523,10 @@ packages: unplugin@1.0.1: resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==} + unplugin@2.3.11: + resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==} + engines: {node: '>=18.12.0'} + unrs-resolver@1.11.1: resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==} @@ -14307,6 +14659,14 @@ packages: victory-vendor@37.3.6: resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==} + vite-tsconfig-paths@5.1.4: + resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==} + peerDependencies: + vite: '*' + peerDependenciesMeta: + vite: + optional: true + vite-tsconfig-paths@6.0.5: resolution: {integrity: sha512-f/WvY6ekHykUF1rWJUAbCU7iS/5QYDIugwpqJA+ttwKbxSbzNlqlE8vZSrsnxNQciUW+z6lvhlXMaEyZn9MSig==} peerDependencies: @@ -14352,6 +14712,14 @@ packages: yaml: optional: true + vitefu@1.1.3: + resolution: {integrity: sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + vite: + optional: true + vitest@4.0.15: resolution: {integrity: sha512-n1RxDp8UJm6N0IbJLQo+yzLZ2sQCDyl1o0LeugbPWf8+8Fttp29GghsQBjYJVmWq3gBFfe9Hs1spR44vovn2wA==} engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0} @@ -14467,6 +14835,9 @@ packages: webpack-virtual-modules@0.5.0: resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==} + webpack-virtual-modules@0.6.2: + resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==} + webpack@5.105.4: resolution: {integrity: sha512-jTywjboN9aHxFlToqb0K0Zs9SbBoW4zRUlGzI2tYNxVYcEi/IPpn+Xi4ye5jTLvX2YeLuic/IvxNot+Q1jMoOw==} engines: {node: '>=10.13.0'} @@ -14477,10 +14848,19 @@ packages: webpack-cli: optional: true + whatwg-encoding@3.1.1: + resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==} + engines: {node: '>=18'} + deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation + whatwg-mimetype@3.0.0: resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==} engines: {node: '>=12'} + whatwg-mimetype@4.0.0: + resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==} + engines: {node: '>=18'} + whatwg-mimetype@5.0.0: resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==} engines: {node: '>=20'} @@ -14621,6 +15001,10 @@ packages: resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==} engines: {node: '>=18'} + xmlbuilder2@4.0.3: + resolution: {integrity: sha512-bx8Q1STctnNaaDymWnkfQLKofs0mGNN7rLLapJlGuV3VlvegD7Ls4ggMjE3aUSWItCCzU0PEv45lI87iSigiCA==} + engines: {node: '>=20.0'} + xmlchars@2.2.0: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} @@ -16084,6 +16468,12 @@ snapshots: '@nicolo-ribaudo/chokidar-2': 2.1.8-no-fsevents.3 chokidar: 3.6.0 + '@babel/code-frame@7.27.1': + dependencies: + '@babel/helper-validator-identifier': 7.28.5 + js-tokens: 4.0.0 + picocolors: 1.1.1 + '@babel/code-frame@7.29.0': dependencies: '@babel/helper-validator-identifier': 7.28.5 @@ -16333,11 +16723,21 @@ snapshots: '@babel/core': 7.27.3 '@babel/helper-plugin-utils': 7.28.6 + '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@babel/helper-plugin-utils': 7.28.6 + '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.27.3)': dependencies: '@babel/core': 7.27.3 '@babel/helper-plugin-utils': 7.28.6 + '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@babel/helper-plugin-utils': 7.28.6 + '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.27.3)': dependencies: '@babel/core': 7.27.3 @@ -18454,8 +18854,6 @@ snapshots: '@next/env@13.5.11': {} - '@next/env@15.5.14': {} - '@next/env@16.2.1': {} '@next/eslint-plugin-next@15.5.14': @@ -18546,6 +18944,23 @@ snapshots: '@npmcli/redact@4.0.0': {} + '@oozcitak/dom@2.0.2': + dependencies: + '@oozcitak/infra': 2.0.2 + '@oozcitak/url': 3.0.0 + '@oozcitak/util': 10.0.0 + + '@oozcitak/infra@2.0.2': + dependencies: + '@oozcitak/util': 10.0.0 + + '@oozcitak/url@3.0.0': + dependencies: + '@oozcitak/infra': 2.0.2 + '@oozcitak/util': 10.0.0 + + '@oozcitak/util@10.0.0': {} + '@opennextjs/aws@3.9.14(next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4))': dependencies: '@ast-grep/napi': 0.40.0 @@ -18562,7 +18977,7 @@ snapshots: cookie: 1.1.1 esbuild: 0.25.4 express: 5.2.1 - next: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4) + next: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4) path-to-regexp: 6.3.0 urlpattern-polyfill: 10.1.0 yaml: 2.8.3 @@ -18578,7 +18993,7 @@ snapshots: cloudflare: 4.5.0 enquirer: 2.4.1 glob: 12.0.0 - next: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4) + next: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4) ts-tqdm: 0.8.6 wrangler: 4.61.1(@cloudflare/workers-types@4.20260218.0)(bufferutil@4.1.0)(utf-8-validate@6.0.6) yargs: 18.0.0 @@ -19629,6 +20044,8 @@ snapshots: '@rolldown/pluginutils@1.0.0-beta.11': {} + '@rolldown/pluginutils@1.0.0-beta.40': {} + '@rollup/plugin-commonjs@28.0.1(rollup@3.29.5)': dependencies: '@rollup/pluginutils': 5.3.0(rollup@3.29.5) @@ -19973,7 +20390,7 @@ snapshots: '@sentry/vercel-edge': 8.55.0 '@sentry/webpack-plugin': 2.22.7(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12)) chalk: 3.0.0 - next: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4) + next: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4) resolve: 1.22.8 rollup: 3.29.5 stacktrace-parser: 0.1.11 @@ -20000,7 +20417,7 @@ snapshots: '@sentry/vercel-edge': 8.55.0 '@sentry/webpack-plugin': 2.22.7(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12)) chalk: 3.0.0 - next: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + next: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) resolve: 1.22.8 rollup: 3.29.5 stacktrace-parser: 0.1.11 @@ -20027,7 +20444,7 @@ snapshots: '@sentry/vercel-edge': 9.47.1(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0)) '@sentry/webpack-plugin': 3.6.1(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12)) chalk: 3.0.0 - next: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + next: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) resolve: 1.22.8 rollup: 4.59.0 stacktrace-parser: 0.1.11 @@ -21030,43 +21447,291 @@ snapshots: postcss-selector-parser: 6.0.10 tailwindcss: 4.2.2 - '@testing-library/dom@10.4.1': + '@tanstack/history@1.161.6': {} + + '@tanstack/react-router@1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: - '@babel/code-frame': 7.29.0 - '@babel/runtime': 7.29.2 - '@types/aria-query': 5.0.4 - aria-query: 5.3.0 - dom-accessibility-api: 0.5.16 - lz-string: 1.5.0 - picocolors: 1.1.1 - pretty-format: 27.5.1 + '@tanstack/history': 1.161.6 + '@tanstack/react-store': 0.9.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/router-core': 1.168.9 + isbot: 5.1.37 + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) - '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + '@tanstack/react-start-client@1.166.25(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: - '@babel/runtime': 7.29.2 - '@testing-library/dom': 10.4.1 + '@tanstack/react-router': 1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/router-core': 1.168.9 + '@tanstack/start-client-core': 1.167.9 react: 19.2.4 react-dom: 19.2.4(react@19.2.4) - optionalDependencies: - '@types/react': 19.2.14 - '@types/react-dom': 19.2.3(@types/react@19.2.14) - '@tokenizer/inflate@0.2.7': + '@tanstack/react-start-server@1.166.25(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: - debug: 4.4.3 - fflate: 0.8.2 - token-types: 6.1.2 + '@tanstack/history': 1.161.6 + '@tanstack/react-router': 1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/router-core': 1.168.9 + '@tanstack/start-client-core': 1.167.9 + '@tanstack/start-server-core': 1.167.9 + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) transitivePeerDependencies: - - supports-color - - '@tokenizer/token@0.3.0': {} - - '@tootallnate/once@2.0.0': {} + - crossws - '@ts-morph/common@0.22.0': + '@tanstack/react-start@1.167.16(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12))': dependencies: - fast-glob: 3.3.3 - minimatch: 9.0.9 + '@tanstack/react-router': 1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/react-start-client': 1.166.25(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/react-start-server': 1.166.25(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/router-utils': 1.161.6 + '@tanstack/start-client-core': 1.167.9 + '@tanstack/start-plugin-core': 1.167.17(@tanstack/react-router@1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12)) + '@tanstack/start-server-core': 1.167.9 + pathe: 2.0.3 + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + transitivePeerDependencies: + - '@rsbuild/core' + - crossws + - supports-color + - vite-plugin-solid + - webpack + + '@tanstack/react-start@1.167.16(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12))': + dependencies: + '@tanstack/react-router': 1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/react-start-client': 1.166.25(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/react-start-server': 1.166.25(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@tanstack/router-utils': 1.161.6 + '@tanstack/start-client-core': 1.167.9 + '@tanstack/start-plugin-core': 1.167.17(@tanstack/react-router@1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12)) + '@tanstack/start-server-core': 1.167.9 + pathe: 2.0.3 + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + transitivePeerDependencies: + - '@rsbuild/core' + - crossws + - supports-color + - vite-plugin-solid + - webpack + + '@tanstack/react-store@0.9.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + dependencies: + '@tanstack/store': 0.9.3 + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) + use-sync-external-store: 1.6.0(react@19.2.4) + + '@tanstack/router-core@1.168.9': + dependencies: + '@tanstack/history': 1.161.6 + cookie-es: 2.0.0 + seroval: 1.5.1 + seroval-plugins: 1.5.1(seroval@1.5.1) + + '@tanstack/router-generator@1.166.24': + dependencies: + '@tanstack/router-core': 1.168.9 + '@tanstack/router-utils': 1.161.6 + '@tanstack/virtual-file-routes': 1.161.7 + prettier: 3.5.3 + recast: 0.23.11 + source-map: 0.7.6 + tsx: 4.21.0 + zod: 3.25.76 + transitivePeerDependencies: + - supports-color + + '@tanstack/router-plugin@1.167.12(@tanstack/react-router@1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12))': + dependencies: + '@babel/core': 7.29.0 + '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0) + '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0) + '@babel/template': 7.28.6 + '@babel/traverse': 7.29.0 + '@babel/types': 7.29.0 + '@tanstack/router-core': 1.168.9 + '@tanstack/router-generator': 1.166.24 + '@tanstack/router-utils': 1.161.6 + '@tanstack/virtual-file-routes': 1.161.7 + chokidar: 3.6.0 + unplugin: 2.3.11 + zod: 3.25.76 + optionalDependencies: + '@tanstack/react-router': 1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + webpack: 5.105.4(@swc/core@1.15.3)(esbuild@0.25.12) + transitivePeerDependencies: + - supports-color + + '@tanstack/router-plugin@1.167.12(@tanstack/react-router@1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12))': + dependencies: + '@babel/core': 7.29.0 + '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0) + '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0) + '@babel/template': 7.28.6 + '@babel/traverse': 7.29.0 + '@babel/types': 7.29.0 + '@tanstack/router-core': 1.168.9 + '@tanstack/router-generator': 1.166.24 + '@tanstack/router-utils': 1.161.6 + '@tanstack/virtual-file-routes': 1.161.7 + chokidar: 3.6.0 + unplugin: 2.3.11 + zod: 3.25.76 + optionalDependencies: + '@tanstack/react-router': 1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + webpack: 5.105.4(@swc/core@1.15.3)(esbuild@0.25.12) + transitivePeerDependencies: + - supports-color + + '@tanstack/router-utils@1.161.6': + dependencies: + '@babel/core': 7.29.0 + '@babel/generator': 7.29.1 + '@babel/parser': 7.29.2 + '@babel/types': 7.29.0 + ansis: 4.2.0 + babel-dead-code-elimination: 1.0.12 + diff: 8.0.4 + pathe: 2.0.3 + tinyglobby: 0.2.15 + transitivePeerDependencies: + - supports-color + + '@tanstack/start-client-core@1.167.9': + dependencies: + '@tanstack/router-core': 1.168.9 + '@tanstack/start-fn-stubs': 1.161.6 + '@tanstack/start-storage-context': 1.166.23 + seroval: 1.5.1 + + '@tanstack/start-fn-stubs@1.161.6': {} + + '@tanstack/start-plugin-core@1.167.17(@tanstack/react-router@1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12))': + dependencies: + '@babel/code-frame': 7.27.1 + '@babel/core': 7.29.0 + '@babel/types': 7.29.0 + '@rolldown/pluginutils': 1.0.0-beta.40 + '@tanstack/router-core': 1.168.9 + '@tanstack/router-generator': 1.166.24 + '@tanstack/router-plugin': 1.167.12(@tanstack/react-router@1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12)) + '@tanstack/router-utils': 1.161.6 + '@tanstack/start-client-core': 1.167.9 + '@tanstack/start-server-core': 1.167.9 + cheerio: 1.2.0 + exsolve: 1.0.8 + pathe: 2.0.3 + picomatch: 4.0.4 + source-map: 0.7.6 + srvx: 0.11.13 + tinyglobby: 0.2.15 + ufo: 1.6.3 + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + vitefu: 1.1.3(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)) + xmlbuilder2: 4.0.3 + zod: 3.25.76 + transitivePeerDependencies: + - '@rsbuild/core' + - '@tanstack/react-router' + - crossws + - supports-color + - vite-plugin-solid + - webpack + + '@tanstack/start-plugin-core@1.167.17(@tanstack/react-router@1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12))': + dependencies: + '@babel/code-frame': 7.27.1 + '@babel/core': 7.29.0 + '@babel/types': 7.29.0 + '@rolldown/pluginutils': 1.0.0-beta.40 + '@tanstack/router-core': 1.168.9 + '@tanstack/router-generator': 1.166.24 + '@tanstack/router-plugin': 1.167.12(@tanstack/react-router@1.168.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12)) + '@tanstack/router-utils': 1.161.6 + '@tanstack/start-client-core': 1.167.9 + '@tanstack/start-server-core': 1.167.9 + cheerio: 1.2.0 + exsolve: 1.0.8 + pathe: 2.0.3 + picomatch: 4.0.4 + source-map: 0.7.6 + srvx: 0.11.13 + tinyglobby: 0.2.15 + ufo: 1.6.3 + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + vitefu: 1.1.3(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)) + xmlbuilder2: 4.0.3 + zod: 3.25.76 + transitivePeerDependencies: + - '@rsbuild/core' + - '@tanstack/react-router' + - crossws + - supports-color + - vite-plugin-solid + - webpack + + '@tanstack/start-server-core@1.167.9': + dependencies: + '@tanstack/history': 1.161.6 + '@tanstack/router-core': 1.168.9 + '@tanstack/start-client-core': 1.167.9 + '@tanstack/start-storage-context': 1.166.23 + h3-v2: h3@2.0.1-rc.16 + seroval: 1.5.1 + transitivePeerDependencies: + - crossws + + '@tanstack/start-storage-context@1.166.23': + dependencies: + '@tanstack/router-core': 1.168.9 + + '@tanstack/store@0.9.3': {} + + '@tanstack/virtual-file-routes@1.161.7': {} + + '@testing-library/dom@10.4.1': + dependencies: + '@babel/code-frame': 7.29.0 + '@babel/runtime': 7.29.2 + '@types/aria-query': 5.0.4 + aria-query: 5.3.0 + dom-accessibility-api: 0.5.16 + lz-string: 1.5.0 + picocolors: 1.1.1 + pretty-format: 27.5.1 + + '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + dependencies: + '@babel/runtime': 7.29.2 + '@testing-library/dom': 10.4.1 + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) + optionalDependencies: + '@types/react': 19.2.14 + '@types/react-dom': 19.2.3(@types/react@19.2.14) + + '@tokenizer/inflate@0.2.7': + dependencies: + debug: 4.4.3 + fflate: 0.8.2 + token-types: 6.1.2 + transitivePeerDependencies: + - supports-color + + '@tokenizer/token@0.3.0': {} + + '@tootallnate/once@2.0.0': {} + + '@ts-morph/common@0.22.0': + dependencies: + fast-glob: 3.3.3 + minimatch: 9.0.9 mkdirp: 3.0.1 path-browserify: 1.0.1 @@ -21662,6 +22327,18 @@ snapshots: utf-8-validate: 6.0.6 ws: 8.20.0(bufferutil@4.1.0)(utf-8-validate@6.0.6) + '@vitejs/plugin-react@4.5.2(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))': + dependencies: + '@babel/core': 7.29.0 + '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0) + '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0) + '@rolldown/pluginutils': 1.0.0-beta.11 + '@types/babel__core': 7.20.5 + react-refresh: 0.17.0 + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + transitivePeerDependencies: + - supports-color + '@vitejs/plugin-react@4.5.2(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))': dependencies: '@babel/core': 7.29.0 @@ -22128,6 +22805,8 @@ snapshots: ansi-styles@6.2.3: {} + ansis@4.2.0: {} + anymatch@3.1.3: dependencies: normalize-path: 3.0.0 @@ -22254,6 +22933,10 @@ snapshots: ast-types-flow@0.0.8: {} + ast-types@0.16.1: + dependencies: + tslib: 2.8.1 + astral-regex@2.0.0: {} async-function@1.0.0: {} @@ -22300,6 +22983,15 @@ snapshots: b4a@1.8.0: {} + babel-dead-code-elimination@1.0.12: + dependencies: + '@babel/core': 7.27.3 + '@babel/parser': 7.29.2 + '@babel/traverse': 7.29.0 + '@babel/types': 7.29.0 + transitivePeerDependencies: + - supports-color + babel-plugin-macros@3.1.0: dependencies: '@babel/runtime': 7.29.2 @@ -22435,6 +23127,8 @@ snapshots: body-scroll-lock@4.0.0-beta.0: {} + boolbase@1.0.0: {} + bowser@2.14.1: {} brace-expansion@1.1.12: @@ -22513,7 +23207,7 @@ snapshots: bytes@3.1.2: {} - c12@3.3.3: + c12@3.3.3(magicast@0.5.2): dependencies: chokidar: 5.0.0 confbox: 0.2.4 @@ -22527,6 +23221,8 @@ snapshots: perfect-debounce: 2.1.0 pkg-types: 2.3.0 rc9: 2.1.2 + optionalDependencies: + magicast: 0.5.2 cacache@20.0.4: dependencies: @@ -22608,9 +23304,9 @@ snapshots: chalk@5.6.2: {} - changelogen@0.6.2: + changelogen@0.6.2(magicast@0.5.2): dependencies: - c12: 3.3.3 + c12: 3.3.3(magicast@0.5.2) confbox: 0.2.4 consola: 3.4.2 convert-gitmoji: 0.1.5 @@ -22636,6 +23332,29 @@ snapshots: charenc@0.0.2: {} + cheerio-select@2.1.0: + dependencies: + boolbase: 1.0.0 + css-select: 5.2.2 + css-what: 6.2.2 + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.2.2 + + cheerio@1.2.0: + dependencies: + cheerio-select: 2.1.0 + dom-serializer: 2.0.0 + domhandler: 5.0.3 + domutils: 3.2.2 + encoding-sniffer: 0.2.1 + htmlparser2: 10.1.0 + parse5: 7.3.0 + parse5-htmlparser2-tree-adapter: 7.1.0 + parse5-parser-stream: 7.1.2 + undici: 7.24.4 + whatwg-mimetype: 4.0.0 + chokidar@3.6.0: dependencies: anymatch: 3.1.3 @@ -22821,6 +23540,11 @@ snapshots: convert-source-map@2.0.0: {} + cookie-es@1.2.2: + optional: true + + cookie-es@2.0.0: {} + cookie-signature@1.2.2: {} cookie@0.7.2: {} @@ -22884,17 +23608,32 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + crossws@0.3.5: + dependencies: + uncrypto: 0.1.3 + optional: true + crypt@0.0.2: {} crypto-random-string@2.0.0: {} css-functions-list@3.3.3: {} + css-select@5.2.2: + dependencies: + boolbase: 1.0.0 + css-what: 6.2.2 + domhandler: 5.0.3 + domutils: 3.2.2 + nth-check: 2.1.1 + css-tree@3.2.1: dependencies: mdn-data: 2.27.1 source-map-js: 1.2.1 + css-what@6.2.2: {} + cssesc@3.0.0: {} cssfilter@0.0.10: {} @@ -23096,6 +23835,8 @@ snapshots: asap: 2.0.6 wrappy: 1.0.2 + diff@8.0.4: {} + dir-glob@3.0.1: dependencies: path-type: 4.0.0 @@ -23117,14 +23858,36 @@ snapshots: '@babel/runtime': 7.29.2 csstype: 3.1.3 + dom-serializer@2.0.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + + domelementtype@2.3.0: {} + + domhandler@5.0.3: + dependencies: + domelementtype: 2.3.0 + dompurify@3.2.7: optionalDependencies: '@types/trusted-types': 2.0.7 + domutils@3.2.2: + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + dot-prop@9.0.0: dependencies: type-fest: 4.41.0 + dotenv-expand@12.0.1: + dependencies: + dotenv: 16.4.7 + dotenv@16.4.7: {} drizzle-kit@0.31.7: @@ -23218,6 +23981,11 @@ snapshots: encodeurl@2.0.0: {} + encoding-sniffer@0.2.1: + dependencies: + iconv-lite: 0.6.3 + whatwg-encoding: 3.1.1 + end-of-stream@1.4.5: dependencies: once: 1.4.0 @@ -23232,6 +24000,8 @@ snapshots: ansi-colors: 4.1.3 strip-ansi: 6.0.1 + entities@4.5.0: {} + entities@6.0.1: {} entities@7.0.1: {} @@ -24550,7 +25320,7 @@ snapshots: geist@1.7.0(next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0)): dependencies: - next: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + next: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) generator-function@2.0.1: {} @@ -24785,6 +25555,24 @@ snapshots: dependencies: duplexer: 0.1.2 + h3@1.15.10: + dependencies: + cookie-es: 1.2.2 + crossws: 0.3.5 + defu: 6.1.4 + destr: 2.0.5 + iron-webcrypto: 1.2.1 + node-mock-http: 1.0.4 + radix3: 1.1.2 + ufo: 1.6.3 + uncrypto: 0.1.3 + optional: true + + h3@2.0.1-rc.16: + dependencies: + rou3: 0.8.1 + srvx: 0.11.13 + happy-dom@20.8.9(bufferutil@4.1.0)(utf-8-validate@6.0.6): dependencies: '@types/node': 22.19.9 @@ -24863,6 +25651,13 @@ snapshots: html-tags@3.3.1: {} + htmlparser2@10.1.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.2.2 + entities: 7.0.1 + http-cache-semantics@4.2.0: {} http-errors@2.0.1: @@ -24921,6 +25716,10 @@ snapshots: husky@9.0.11: {} + iconv-lite@0.6.3: + dependencies: + safer-buffer: 2.1.2 + iconv-lite@0.7.2: dependencies: safer-buffer: 2.1.2 @@ -25004,6 +25803,9 @@ snapshots: ipaddr.js@2.2.0: {} + iron-webcrypto@1.2.1: + optional: true + is-alphabetical@2.0.1: {} is-alphanumerical@2.0.1: @@ -25205,6 +26007,8 @@ snapshots: isarray@2.0.5: {} + isbot@5.1.37: {} + isexe@2.0.0: {} isexe@3.1.5: {} @@ -25622,6 +26426,13 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + magicast@0.5.2: + dependencies: + '@babel/parser': 7.29.2 + '@babel/types': 7.29.0 + source-map-js: 1.2.1 + optional: true + make-dir@2.1.0: dependencies: pify: 4.0.1 @@ -25661,7 +26472,7 @@ snapshots: commander: 11.1.0 redis: 4.7.1 optionalDependencies: - next: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + next: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) md5@2.3.0: dependencies: @@ -26152,7 +26963,7 @@ snapshots: '@next/env': 13.5.11 fast-glob: 3.3.3 minimist: 1.2.8 - next: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + next: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4): dependencies: @@ -26215,88 +27026,6 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@16.2.1(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0): - dependencies: - '@next/env': 16.2.1 - '@swc/helpers': 0.5.15 - baseline-browser-mapping: 2.10.10 - caniuse-lite: 1.0.30001780 - postcss: 8.4.31 - react: 19.2.4 - react-dom: 19.2.4(react@19.2.4) - styled-jsx: 5.1.6(@babel/core@7.29.0)(react@19.2.4) - optionalDependencies: - '@next/swc-darwin-arm64': 16.2.1 - '@next/swc-darwin-x64': 16.2.1 - '@next/swc-linux-arm64-gnu': 16.2.1 - '@next/swc-linux-arm64-musl': 16.2.1 - '@next/swc-linux-x64-gnu': 16.2.1 - '@next/swc-linux-x64-musl': 16.2.1 - '@next/swc-win32-arm64-msvc': 16.2.1 - '@next/swc-win32-x64-msvc': 16.2.1 - '@opentelemetry/api': 1.9.0 - '@playwright/test': 1.58.2 - sass: 1.98.0 - sharp: 0.34.5 - transitivePeerDependencies: - - '@babel/core' - - babel-plugin-macros - - next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.77.4): - dependencies: - '@next/env': 16.2.1 - '@swc/helpers': 0.5.15 - baseline-browser-mapping: 2.10.10 - caniuse-lite: 1.0.30001780 - postcss: 8.4.31 - react: 19.2.4 - react-dom: 19.2.4(react@19.2.4) - styled-jsx: 5.1.6(react@19.2.4) - optionalDependencies: - '@next/swc-darwin-arm64': 16.2.1 - '@next/swc-darwin-x64': 16.2.1 - '@next/swc-linux-arm64-gnu': 16.2.1 - '@next/swc-linux-arm64-musl': 16.2.1 - '@next/swc-linux-x64-gnu': 16.2.1 - '@next/swc-linux-x64-musl': 16.2.1 - '@next/swc-win32-arm64-msvc': 16.2.1 - '@next/swc-win32-x64-msvc': 16.2.1 - '@opentelemetry/api': 1.9.0 - '@playwright/test': 1.58.2 - babel-plugin-react-compiler: 19.1.0-rc.3 - sass: 1.77.4 - sharp: 0.34.5 - transitivePeerDependencies: - - '@babel/core' - - babel-plugin-macros - - next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0): - dependencies: - '@next/env': 16.2.1 - '@swc/helpers': 0.5.15 - baseline-browser-mapping: 2.10.10 - caniuse-lite: 1.0.30001780 - postcss: 8.4.31 - react: 19.2.4 - react-dom: 19.2.4(react@19.2.4) - styled-jsx: 5.1.6(react@19.2.4) - optionalDependencies: - '@next/swc-darwin-arm64': 16.2.1 - '@next/swc-darwin-x64': 16.2.1 - '@next/swc-linux-arm64-gnu': 16.2.1 - '@next/swc-linux-arm64-musl': 16.2.1 - '@next/swc-linux-x64-gnu': 16.2.1 - '@next/swc-linux-x64-musl': 16.2.1 - '@next/swc-win32-arm64-msvc': 16.2.1 - '@next/swc-win32-x64-msvc': 16.2.1 - '@opentelemetry/api': 1.9.0 - '@playwright/test': 1.58.2 - sass: 1.98.0 - sharp: 0.34.5 - transitivePeerDependencies: - - '@babel/core' - - babel-plugin-macros - node-abi@3.89.0: dependencies: semver: 7.7.4 @@ -26344,6 +27073,9 @@ snapshots: transitivePeerDependencies: - supports-color + node-mock-http@1.0.4: + optional: true + node-releases@2.0.36: {} nodemailer@7.0.12: {} @@ -26390,6 +27122,10 @@ snapshots: semver: 7.7.4 validate-npm-package-name: 4.0.0 + nth-check@2.1.1: + dependencies: + boolbase: 1.0.0 + nypm@0.6.5: dependencies: citty: 0.2.1 @@ -26597,6 +27333,19 @@ snapshots: parse-passwd@1.0.0: {} + parse5-htmlparser2-tree-adapter@7.1.0: + dependencies: + domhandler: 5.0.3 + parse5: 7.3.0 + + parse5-parser-stream@7.1.2: + dependencies: + parse5: 7.3.0 + + parse5@7.3.0: + dependencies: + entities: 6.0.1 + parse5@8.0.0: dependencies: entities: 6.0.1 @@ -26912,6 +27661,9 @@ snapshots: quick-lru@5.1.1: {} + radix3@1.1.2: + optional: true + range-parser@1.2.1: {} raw-body@3.0.2: @@ -27104,6 +27856,14 @@ snapshots: real-require@0.2.0: {} + recast@0.23.11: + dependencies: + ast-types: 0.16.1 + esprima: 4.0.1 + source-map: 0.6.1 + tiny-invariant: 1.3.3 + tslib: 2.8.1 + recharts@3.2.1(@types/react@19.2.9)(react-dom@19.2.4(react@19.2.4))(react-is@17.0.2)(react@19.2.4)(redux@5.0.1): dependencies: '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.9)(react@19.2.4)(redux@5.0.1))(react@19.2.4) @@ -27323,6 +28083,8 @@ snapshots: '@rollup/rollup-win32-x64-msvc': 4.59.0 fsevents: 2.3.3 + rou3@0.8.1: {} + router@2.2.0: dependencies: debug: 4.4.3 @@ -27539,6 +28301,12 @@ snapshots: transitivePeerDependencies: - supports-color + seroval-plugins@1.5.1(seroval@1.5.1): + dependencies: + seroval: 1.5.1 + + seroval@1.5.1: {} + serve-static@2.2.1: dependencies: encodeurl: 2.0.0 @@ -27875,6 +28643,8 @@ snapshots: sqids@0.3.0: {} + srvx@0.11.13: {} + ssri@13.0.1: dependencies: minipass: 7.1.3 @@ -28081,18 +28851,6 @@ snapshots: optionalDependencies: '@babel/core': 7.27.3 - styled-jsx@5.1.6(@babel/core@7.29.0)(react@19.2.4): - dependencies: - client-only: 0.0.1 - react: 19.2.4 - optionalDependencies: - '@babel/core': 7.29.0 - - styled-jsx@5.1.6(react@19.2.4): - dependencies: - client-only: 0.0.1 - react: 19.2.4 - stylelint@16.26.1(typescript@5.7.3): dependencies: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) @@ -28551,6 +29309,9 @@ snapshots: buffer: 5.7.1 through: 2.3.8 + uncrypto@0.1.3: + optional: true + undici-types@5.26.5: {} undici-types@6.21.0: {} @@ -28620,6 +29381,13 @@ snapshots: webpack-sources: 3.3.4 webpack-virtual-modules: 0.5.0 + unplugin@2.3.11: + dependencies: + '@jridgewell/remapping': 2.3.5 + acorn: 8.16.0 + picomatch: 4.0.4 + webpack-virtual-modules: 0.6.2 + unrs-resolver@1.11.1: dependencies: napi-postinstall: 0.3.4 @@ -28652,7 +29420,7 @@ snapshots: escalade: 3.2.0 picocolors: 1.1.1 - uploadthing@7.3.0(express@5.2.1)(next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0))(tailwindcss@4.2.2): + uploadthing@7.3.0(express@5.2.1)(h3@1.15.10)(next@16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0))(tailwindcss@4.2.2): dependencies: '@effect/platform': 0.69.8(effect@3.10.3) '@uploadthing/mime-types': 0.3.2 @@ -28660,7 +29428,8 @@ snapshots: effect: 3.10.3 optionalDependencies: express: 5.2.1 - next: 16.2.1(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) + h3: 1.15.10 + next: 16.2.1(@babel/core@7.27.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@19.1.0-rc.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0) tailwindcss: 4.2.2 uri-js@4.4.1: @@ -28754,6 +29523,17 @@ snapshots: d3-time: 3.1.0 d3-timer: 3.0.1 + vite-tsconfig-paths@5.1.4(typescript@5.7.3)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)): + dependencies: + debug: 4.4.3 + globrex: 0.1.2 + tsconfck: 3.1.6(typescript@5.7.3) + optionalDependencies: + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + transitivePeerDependencies: + - supports-color + - typescript + vite-tsconfig-paths@6.0.5(typescript@5.7.3)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)): dependencies: debug: 4.4.3 @@ -28821,6 +29601,14 @@ snapshots: tsx: 4.21.0 yaml: 2.8.3 + vitefu@1.1.3(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)): + optionalDependencies: + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.77.4)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + + vitefu@1.1.3(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)): + optionalDependencies: + vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3) + vitest@4.0.15(@opentelemetry/api@1.9.0)(@types/node@22.15.30)(@vitest/ui@4.0.15)(happy-dom@20.8.9(bufferutil@4.1.0)(utf-8-validate@6.0.6))(jiti@2.6.1)(jsdom@28.0.0(@noble/hashes@1.8.0))(lightningcss@1.30.2)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3): dependencies: '@vitest/expect': 4.0.15 @@ -28996,6 +29784,8 @@ snapshots: webpack-virtual-modules@0.5.0: {} + webpack-virtual-modules@0.6.2: {} + webpack@5.105.4(@swc/core@1.15.3)(esbuild@0.25.12): dependencies: '@types/eslint-scope': 3.7.7 @@ -29028,8 +29818,14 @@ snapshots: - esbuild - uglify-js + whatwg-encoding@3.1.1: + dependencies: + iconv-lite: 0.6.3 + whatwg-mimetype@3.0.0: {} + whatwg-mimetype@4.0.0: {} + whatwg-mimetype@5.0.0: {} whatwg-url@14.2.0: @@ -29187,6 +29983,13 @@ snapshots: xml-name-validator@5.0.0: {} + xmlbuilder2@4.0.3: + dependencies: + '@oozcitak/dom': 2.0.2 + '@oozcitak/infra': 2.0.2 + '@oozcitak/util': 10.0.0 + js-yaml: 4.1.1 + xmlchars@2.2.0: {} xss@1.0.15: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index b44e0eba8be..547934ab002 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,5 +1,6 @@ packages: - 'packages/*' + - 'tanstack-app' - 'tools/*' - 'test' - 'templates/blank' diff --git a/tanstack-app/.gitignore b/tanstack-app/.gitignore new file mode 100644 index 00000000000..825b8e2c4ae --- /dev/null +++ b/tanstack-app/.gitignore @@ -0,0 +1,6 @@ +app.config.timestamp_*.js +*.output +.tanstack/ +.output/ +app/importMap.js +app/routeTree.gen.ts diff --git a/tanstack-app/app.config.ts b/tanstack-app/app.config.ts new file mode 100644 index 00000000000..5ca0f204290 --- /dev/null +++ b/tanstack-app/app.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from '@tanstack/react-start/config' +import tsConfigPaths from 'vite-tsconfig-paths' + +export default defineConfig({ + tsr: { + appDirectory: './app', + }, + vite: { + plugins: [ + tsConfigPaths({ + projects: ['./tsconfig.json'], + }), + ], + }, +}) diff --git a/tanstack-app/app/client.tsx b/tanstack-app/app/client.tsx new file mode 100644 index 00000000000..89d8446ef6d --- /dev/null +++ b/tanstack-app/app/client.tsx @@ -0,0 +1,14 @@ +import { StartClient } from '@tanstack/react-start/client' +import { StrictMode } from 'react' +import { hydrateRoot } from 'react-dom/client' + +import { getRouter } from './router.js' + +const router = getRouter() + +hydrateRoot( + document, + + + , +) diff --git a/tanstack-app/app/importMap.ts b/tanstack-app/app/importMap.ts new file mode 100644 index 00000000000..e68f7450ec0 --- /dev/null +++ b/tanstack-app/app/importMap.ts @@ -0,0 +1,3 @@ +// This file is auto-generated on dev start by the runInit script. +// Do not edit manually. +export const importMap = {} diff --git a/tanstack-app/app/routeTree.gen.ts b/tanstack-app/app/routeTree.gen.ts new file mode 100644 index 00000000000..701d3a6886a --- /dev/null +++ b/tanstack-app/app/routeTree.gen.ts @@ -0,0 +1,86 @@ +/* eslint-disable */ + +// @ts-nocheck + +// noinspection JSUnusedGlobalSymbols + +// This file was automatically generated by TanStack Router. +// You should NOT make any changes in this file as it will be overwritten. +// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. + +import { Route as rootRouteImport } from './routes/__root' +import { Route as AdminIndexRouteImport } from './routes/admin.index' +import { Route as AdminSplatRouteImport } from './routes/admin.$' + +const AdminIndexRoute = AdminIndexRouteImport.update({ + id: '/admin/', + path: '/admin/', + getParentRoute: () => rootRouteImport, +} as any) +const AdminSplatRoute = AdminSplatRouteImport.update({ + id: '/admin/$', + path: '/admin/$', + getParentRoute: () => rootRouteImport, +} as any) + +export interface FileRoutesByFullPath { + '/admin/$': typeof AdminSplatRoute + '/admin/': typeof AdminIndexRoute +} +export interface FileRoutesByTo { + '/admin/$': typeof AdminSplatRoute + '/admin': typeof AdminIndexRoute +} +export interface FileRoutesById { + __root__: typeof rootRouteImport + '/admin/$': typeof AdminSplatRoute + '/admin/': typeof AdminIndexRoute +} +export interface FileRouteTypes { + fileRoutesByFullPath: FileRoutesByFullPath + fullPaths: '/admin/$' | '/admin/' + fileRoutesByTo: FileRoutesByTo + to: '/admin/$' | '/admin' + id: '__root__' | '/admin/$' | '/admin/' + fileRoutesById: FileRoutesById +} +export interface RootRouteChildren { + AdminSplatRoute: typeof AdminSplatRoute + AdminIndexRoute: typeof AdminIndexRoute +} + +declare module '@tanstack/react-router' { + interface FileRoutesByPath { + '/admin/': { + id: '/admin/' + path: '/admin' + fullPath: '/admin/' + preLoaderRoute: typeof AdminIndexRouteImport + parentRoute: typeof rootRouteImport + } + '/admin/$': { + id: '/admin/$' + path: '/admin/$' + fullPath: '/admin/$' + preLoaderRoute: typeof AdminSplatRouteImport + parentRoute: typeof rootRouteImport + } + } +} + +const rootRouteChildren: RootRouteChildren = { + AdminSplatRoute: AdminSplatRoute, + AdminIndexRoute: AdminIndexRoute, +} +export const routeTree = rootRouteImport + ._addFileChildren(rootRouteChildren) + ._addFileTypes() + +import type { getRouter } from './router.tsx' +import type { createStart } from '@tanstack/react-start' +declare module '@tanstack/react-start' { + interface Register { + ssr: true + router: Awaited> + } +} diff --git a/tanstack-app/app/router.tsx b/tanstack-app/app/router.tsx new file mode 100644 index 00000000000..04d5eed5a8a --- /dev/null +++ b/tanstack-app/app/router.tsx @@ -0,0 +1,16 @@ +import { createRouter as createTanStackRouter } from '@tanstack/react-router' + +import { routeTree } from './routeTree.gen.js' + +export function getRouter() { + return createTanStackRouter({ + routeTree, + scrollRestoration: true, + }) +} + +declare module '@tanstack/react-router' { + interface Register { + router: ReturnType + } +} diff --git a/tanstack-app/app/routes/__root.tsx b/tanstack-app/app/routes/__root.tsx new file mode 100644 index 00000000000..82c7e189c3e --- /dev/null +++ b/tanstack-app/app/routes/__root.tsx @@ -0,0 +1,100 @@ +import type { ServerFunctionClient } from 'payload' + +import { ProgressBar } from '@payloadcms/ui' +import { TanStackRootProvider, TanStackRouterProvider } from '@payloadcms/tanstack-start/client' +import type { RootLayoutData } from '@payloadcms/tanstack-start/client' +import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router' +import { createServerFn } from '@tanstack/react-start' +import React from 'react' + +const getRootData = createServerFn({ method: 'GET' }).handler(async (): Promise => { + const [config, { importMap }, { getRootLayoutData }] = await Promise.all([ + import('@payload-config').then((m) => m.default), + import('../importMap.js'), + import('@payloadcms/tanstack-start/server'), + ]) + + return getRootLayoutData({ config, importMap }) +}) + +const handleServerFn = createServerFn({ method: 'POST' }) + .inputValidator((data: unknown) => data as Parameters[0]) + .handler(async ({ data: args }) => { + const [config, { importMap }, { handleServerFunctions }] = await Promise.all([ + import('@payload-config').then((m) => m.default), + import('../importMap.js'), + import('@payloadcms/tanstack-start/server'), + ]) + + return handleServerFunctions({ + args: (args as any)?.args, + config, + importMap, + name: (args as any)?.name, + serverFunctions: (args as any)?.serverFunctions, + }) + }) + +const switchLanguage = createServerFn({ method: 'POST' }) + .inputValidator((data: unknown) => data as { cookiePrefix: string; lang: string }) + .handler(async ({ data: { cookiePrefix, lang } }) => { + const { setCookie } = await import('@tanstack/react-start/server') + setCookie(`${cookiePrefix}-lng`, lang, { path: '/' }) + }) + +const serverFunction: ServerFunctionClient = (args) => handleServerFn({ data: args }) + +export const rootRoute = createRootRoute({ + component: RootComponent, + head: () => ({ + meta: [ + { charSet: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + ], + }), + loader: () => getRootData(), +}) + +export const Route = rootRoute + +function RootComponent() { + const rootData = Route.useLoaderData() + + const switchLanguageAction = React.useCallback( + async (lang: string) => { + await switchLanguage({ data: { cookiePrefix: rootData.cookiePrefix, lang } }) + }, + [rootData.cookiePrefix], + ) + + return ( + + + + + + + + + + + + + + + ) +} diff --git a/tanstack-app/app/routes/admin.$.tsx b/tanstack-app/app/routes/admin.$.tsx new file mode 100644 index 00000000000..c43e2dfe7de --- /dev/null +++ b/tanstack-app/app/routes/admin.$.tsx @@ -0,0 +1,44 @@ +import { TanStackAdminPage } from '@payloadcms/tanstack-start/views' +import { createFileRoute, notFound, redirect } from '@tanstack/react-router' +import React from 'react' + +import { searchParamsToRecord } from '../utilities/searchParams.js' + +export const Route = createFileRoute('/admin/$')({ + loader: async ({ location, params }) => { + const [config, { importMap }, { getPageState }] = await Promise.all([ + import('@payload-config').then((m) => m.default), + import('../importMap.js'), + import('@payloadcms/tanstack-start/views/getPageState'), + ]) + const segments = params._splat?.split('/').filter(Boolean) ?? [] + + try { + return await getPageState({ + config, + importMap, + searchParams: searchParamsToRecord(location.search), + segments, + }) + } catch (error) { + if (error instanceof Error && error.message.startsWith('REDIRECT:')) { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw redirect({ to: error.message.replace('REDIRECT:', '') }) + } + + if (error instanceof Error && error.message === 'not-found') { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw notFound() + } + + throw error + } + }, + component: AdminPage, +}) + +function AdminPage() { + const pageState = Route.useLoaderData() + + return +} diff --git a/tanstack-app/app/routes/admin.index.tsx b/tanstack-app/app/routes/admin.index.tsx new file mode 100644 index 00000000000..9c99ab27165 --- /dev/null +++ b/tanstack-app/app/routes/admin.index.tsx @@ -0,0 +1,42 @@ +import { TanStackAdminPage } from '@payloadcms/tanstack-start/views' +import { createFileRoute, redirect } from '@tanstack/react-router' +import React from 'react' + +import { searchParamsToRecord } from '../utilities/searchParams.js' + +export const Route = createFileRoute('/admin/')({ + loader: async ({ location }) => { + const [config, { importMap }, { getPageState }] = await Promise.all([ + import('@payload-config').then((m) => m.default), + import('../importMap.js'), + import('@payloadcms/tanstack-start/views/getPageState'), + ]) + + try { + return await getPageState({ + config, + importMap, + searchParams: searchParamsToRecord(location.search), + segments: [], + }) + } catch (error) { + if (error instanceof Error && error.message.startsWith('REDIRECT:')) { + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw redirect({ to: error.message.replace('REDIRECT:', '') }) + } + + if (error instanceof Error && error.message === 'not-found') { + throw error + } + + throw error + } + }, + component: AdminIndexPage, +}) + +function AdminIndexPage() { + const pageState = Route.useLoaderData() + + return +} diff --git a/tanstack-app/app/routes/api.$.ts b/tanstack-app/app/routes/api.$.ts new file mode 100644 index 00000000000..d00558022ca --- /dev/null +++ b/tanstack-app/app/routes/api.$.ts @@ -0,0 +1,17 @@ +import config from '@payload-config' +import { + REST_DELETE, + REST_GET, + REST_OPTIONS, + REST_PATCH, + REST_POST, +} from '@payloadcms/tanstack-start/routes' +import { createAPIFileRoute } from '@tanstack/start/api' + +export const APIRoute = createAPIFileRoute('/api/$')({ + DELETE: ({ request }) => REST_DELETE(config)(request), + GET: ({ request }) => REST_GET(config)(request), + OPTIONS: ({ request }) => REST_OPTIONS(config)(request), + PATCH: ({ request }) => REST_PATCH(config)(request), + POST: ({ request }) => REST_POST(config)(request), +}) diff --git a/tanstack-app/app/ssr.tsx b/tanstack-app/app/ssr.tsx new file mode 100644 index 00000000000..c86dc9a94f0 --- /dev/null +++ b/tanstack-app/app/ssr.tsx @@ -0,0 +1,5 @@ +import { createStartHandler } from '@tanstack/react-start/server' + +import { getRouter } from './router.js' + +export default createStartHandler({ createRouter: getRouter }) diff --git a/tanstack-app/app/utilities/searchParams.ts b/tanstack-app/app/utilities/searchParams.ts new file mode 100644 index 00000000000..e9e7eddd339 --- /dev/null +++ b/tanstack-app/app/utilities/searchParams.ts @@ -0,0 +1,22 @@ +export function searchParamsToRecord(search: string): Record { + const params = new URLSearchParams(search) + const result: Record = {} + + for (const [key, value] of params.entries()) { + const existingValue = result[key] + + if (existingValue === undefined) { + result[key] = value + continue + } + + if (Array.isArray(existingValue)) { + existingValue.push(value) + continue + } + + result[key] = [existingValue, value] + } + + return result +} diff --git a/tanstack-app/package.json b/tanstack-app/package.json new file mode 100644 index 00000000000..7866f636c74 --- /dev/null +++ b/tanstack-app/package.json @@ -0,0 +1,28 @@ +{ + "name": "payload-tanstack-app", + "private": true, + "type": "module", + "scripts": { + "build": "vite build", + "dev": "vite dev", + "start": "node .output/server/index.mjs" + }, + "dependencies": { + "@payloadcms/next": "workspace:*", + "@payloadcms/richtext-lexical": "workspace:*", + "@payloadcms/tanstack-start": "workspace:*", + "@payloadcms/ui": "workspace:*", + "@tanstack/react-router": "^1.167.0", + "@tanstack/react-start": "^1.167.0", + "payload": "workspace:*", + "react": "19.1.0", + "react-dom": "19.1.0" + }, + "devDependencies": { + "@vitejs/plugin-react": "^4.0.0", + "sass": "^1.0.0", + "typescript": "5.x", + "vite": "^7.0.0", + "vite-tsconfig-paths": "^5.0.0" + } +} diff --git a/tanstack-app/tsconfig.json b/tanstack-app/tsconfig.json new file mode 100644 index 00000000000..f117f06985d --- /dev/null +++ b/tanstack-app/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "../tsconfig.base.json", + "compilerOptions": { + "strict": false, + "strictNullChecks": true, + "rootDir": ".", + "composite": false, + "baseUrl": ".", + "paths": { + "@payload-config": ["../test/_community/config.ts"] + } + }, + "include": ["app/**/*", "app.config.ts", "vite.config.ts"] +} diff --git a/tanstack-app/vite.config.ts b/tanstack-app/vite.config.ts new file mode 100644 index 00000000000..7fc77dbdde3 --- /dev/null +++ b/tanstack-app/vite.config.ts @@ -0,0 +1,52 @@ +import { tanstackStart } from '@tanstack/react-start/plugin/vite' +import react from '@vitejs/plugin-react' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import { defineConfig, type Plugin } from 'vite' +import tsConfigPaths from 'vite-tsconfig-paths' + +const dirname = path.dirname(fileURLToPath(import.meta.url)) +const uiSrcDir = path.resolve(dirname, '../packages/ui/src') + +function tanstackStartCompatPlugin(): Plugin { + const virtualModuleId = 'tanstack-start-injected-head-scripts:v' + const resolvedId = '\0' + virtualModuleId + return { + name: 'tanstack-start-compat', + load(id) { + if (id === resolvedId) { + return 'export const injectedHeadScripts = undefined' + } + }, + resolveId(id) { + if (id === virtualModuleId) { + return resolvedId + } + }, + } +} + +export default defineConfig({ + css: { + preprocessorOptions: { + scss: { + loadPaths: [path.resolve(uiSrcDir, 'scss')], + silenceDeprecations: ['import'], + }, + }, + }, + optimizeDeps: { + exclude: ['sharp', 'file-type'], + }, + plugins: [ + tanstackStart({ srcDirectory: 'app' } as any), + react(), + tsConfigPaths({ projects: ['./tsconfig.json'] }), + tanstackStartCompatPlugin(), + ], + resolve: { + alias: { + '~@payloadcms/ui/scss': path.resolve(uiSrcDir, 'scss/styles.scss'), + }, + }, +}) diff --git a/test/__helpers/e2e/framework-harness/index.ts b/test/__helpers/e2e/framework-harness/index.ts new file mode 100644 index 00000000000..c1451217a95 --- /dev/null +++ b/test/__helpers/e2e/framework-harness/index.ts @@ -0,0 +1,40 @@ +import type { FrameworkTestHarness } from './types.js' + +import { NextJsTestHarness } from './next.js' + +export type { FrameworkTestHarness, PayloadTestConfig } from './types.js' + +const SUPPORTED_FRAMEWORKS = ['next', 'tanstack-start'] as const +export type SupportedFramework = (typeof SUPPORTED_FRAMEWORKS)[number] + +/** + * Returns the test harness for the current framework. + * + * Framework is selected via PAYLOAD_FRAMEWORK env var (defaults to 'next'). + * + * @example + * ```ts + * // In playwright.config.ts or globalSetup.ts: + * const harness = getTestHarness() + * const { url } = await harness.start({ testDir, suiteName }) + * ``` + */ +export function getTestHarness(): FrameworkTestHarness { + const framework = (process.env.PAYLOAD_FRAMEWORK ?? 'next') as SupportedFramework + + switch (framework) { + case 'next': + return new NextJsTestHarness() + case 'tanstack-start': + throw new Error( + 'TanStack Start test harness is not yet implemented. ' + + 'Implement a TanStackStartTestHarness class following the FrameworkTestHarness interface.', + ) + default: { + const exhaustive: never = framework + throw new Error( + `Unknown PAYLOAD_FRAMEWORK: "${exhaustive}". Valid values: ${SUPPORTED_FRAMEWORKS.join(', ')}`, + ) + } + } +} diff --git a/test/__helpers/e2e/framework-harness/next.ts b/test/__helpers/e2e/framework-harness/next.ts new file mode 100644 index 00000000000..4f73d402400 --- /dev/null +++ b/test/__helpers/e2e/framework-harness/next.ts @@ -0,0 +1,33 @@ +/** + * Next.js framework test harness. + * + * Wraps the existing Next.js dev-server behavior (getNextRootDir + devServer) + * behind the FrameworkTestHarness interface so e2e tests can be written + * framework-agnostically. + */ + +import path from 'path' + +import type { FrameworkTestHarness, PayloadTestConfig } from './types.js' + +import { getNextRootDir } from '../shared/getNextRootDir.js' + +export class NextJsTestHarness implements FrameworkTestHarness { + readonly name = 'next' + + start(config: PayloadTestConfig): Promise<{ adminRoute: string; url: string }> { + const { rootDir, adminRoute } = getNextRootDir(config.suiteName) + + // The Next.js dev server is started by Playwright's globalSetup (not here). + // This method returns the metadata the harness provides to test files. + const port = process.env.PORT ?? '3000' + const url = `http://localhost:${port}` + + return Promise.resolve({ adminRoute, url }) + } + + stop(): Promise { + // Next.js dev server teardown is handled by Playwright's globalTeardown. + return Promise.resolve() + } +} diff --git a/test/__helpers/e2e/framework-harness/types.ts b/test/__helpers/e2e/framework-harness/types.ts new file mode 100644 index 00000000000..c387103e196 --- /dev/null +++ b/test/__helpers/e2e/framework-harness/types.ts @@ -0,0 +1,23 @@ +/** + * Framework-agnostic test harness interface for e2e tests. + * + * Each admin adapter (Next.js, TanStack Start, etc.) provides its own + * harness implementation. Tests select the harness via PAYLOAD_FRAMEWORK + * env var (defaults to 'next'). + */ + +export type PayloadTestConfig = { + /** Test suite name (e.g. 'admin', 'fields') */ + suiteName?: string + /** Absolute path to the test directory containing config.ts */ + testDir: string +} + +export interface FrameworkTestHarness { + /** Framework identifier */ + readonly name: string + /** Start the dev server. Returns the server URL. */ + start(config: PayloadTestConfig): Promise<{ adminRoute: string; url: string }> + /** Stop the dev server */ + stop(): Promise +} diff --git a/test/_community/payload-types.ts b/test/_community/payload-types.ts index 944c99099f4..d4b81957515 100644 --- a/test/_community/payload-types.ts +++ b/test/_community/payload-types.ts @@ -96,6 +96,9 @@ export interface Config { menu: MenuSelect | MenuSelect; }; locale: null; + widgets: { + collections: CollectionsWidget; + }; user: User; jobs: { tasks: unknown; @@ -435,6 +438,16 @@ export interface MenuSelect { createdAt?: T; globalType?: T; } +/** + * This interface was referenced by `Config`'s JSON-Schema + * via the `definition` "collections_widget". + */ +export interface CollectionsWidget { + data?: { + [k: string]: unknown; + }; + width: 'full'; +} /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "auth". diff --git a/test/admin-adapter/config.ts b/test/admin-adapter/config.ts new file mode 100644 index 00000000000..c979405e8a1 --- /dev/null +++ b/test/admin-adapter/config.ts @@ -0,0 +1,10 @@ +import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js' + +export default buildConfigWithDefaults({ + collections: [ + { + slug: 'posts', + fields: [{ name: 'title', type: 'text' }], + }, + ], +}) diff --git a/test/admin-adapter/int.spec.ts b/test/admin-adapter/int.spec.ts new file mode 100644 index 00000000000..bd2d5bc83f3 --- /dev/null +++ b/test/admin-adapter/int.spec.ts @@ -0,0 +1,155 @@ +import type { Payload } from 'payload' + +import path from 'path' +import { fileURLToPath } from 'url' +import { afterAll, beforeAll, describe, expect, it } from 'vitest' + +import { initPayloadInt } from '../__helpers/shared/initPayloadInt.js' + +let payload: Payload + +const filename = fileURLToPath(import.meta.url) +const dirname = path.dirname(filename) + +describe('AdminAdapter', () => { + beforeAll(async () => { + ;({ payload } = await initPayloadInt(dirname)) + }) + + afterAll(async () => { + await payload.destroy() + }) + + describe('lifecycle wiring', () => { + it('should have adminAdapter undefined when no adapter is configured', () => { + // buildConfigWithDefaults does not set admin.adapter, so adminAdapter is undefined + expect(payload.adminAdapter).toBeUndefined() + }) + + it('should have a valid payload instance initialized', () => { + expect(payload).toBeDefined() + expect(payload.collections).toBeDefined() + }) + }) + + describe('config field types', () => { + it('should accept admin.adapter field in buildConfig', async () => { + const { buildConfig, createAdminAdapter } = await import('payload') + + const mockAdapterResult = { + name: 'mock-adapter', + init: ({ payload: p }: { payload: Payload }) => + createAdminAdapter({ + RouterProvider: (() => null) as any, + createRouteHandlers: () => ({}), + deleteCookie: () => {}, + getCookie: () => undefined, + handleServerFunctions: async () => {}, + initReq: () => { + throw new Error('not used') + }, + name: 'mock-adapter', + notFound: (): never => { + throw new Error('not found') + }, + payload: p, + redirect: (): never => { + throw new Error('redirect') + }, + setCookie: () => {}, + }), + } + + const config = await buildConfig({ + admin: { + adapter: mockAdapterResult, + disable: true, + }, + collections: [{ slug: 'test', fields: [] }], + db: (payload as any).config.db, + secret: 'test-secret', + }) + + expect(config.admin?.adapter).toBeDefined() + expect(config.admin?.adapter?.name).toBe('mock-adapter') + expect(typeof config.admin?.adapter?.init).toBe('function') + }) + + it('should call adapter.init and expose result on payload.adminAdapter', async () => { + const { buildConfig, createAdminAdapter } = await import('payload') + + let initCallCount = 0 + + const adapterResult = { + name: 'counting-adapter', + init: ({ payload: p }: { payload: Payload }) => { + initCallCount++ + return createAdminAdapter({ + RouterProvider: (() => null) as any, + createRouteHandlers: () => ({}), + deleteCookie: () => {}, + getCookie: () => undefined, + handleServerFunctions: async () => {}, + initReq: () => { + throw new Error('not used') + }, + name: 'counting-adapter', + notFound: (): never => { + throw new Error('not found') + }, + payload: p, + redirect: (): never => { + throw new Error('redirect') + }, + setCookie: () => {}, + }) + }, + } + + const config = await buildConfig({ + admin: { + adapter: adapterResult, + disable: true, + }, + collections: [{ slug: 'test', fields: [] }], + db: (payload as any).config.db, + secret: 'test-secret', + }) + + // Simulate what Payload.init() does + const adapterInstance = config.admin?.adapter?.init({ payload }) + expect(adapterInstance).toBeDefined() + expect(adapterInstance?.name).toBe('counting-adapter') + expect(initCallCount).toBe(1) + }) + }) + + describe('createAdminAdapter helper', () => { + it('should return the same object it receives (identity helper)', async () => { + const { createAdminAdapter } = await import('payload') + + const adapterShape = { + RouterProvider: (() => null) as any, + createRouteHandlers: () => ({}), + deleteCookie: () => {}, + getCookie: () => undefined, + handleServerFunctions: async () => {}, + initReq: () => { + throw new Error('not used') + }, + name: 'identity-test', + notFound: (): never => { + throw new Error('not found') + }, + payload: null as any, + redirect: (): never => { + throw new Error('redirect') + }, + setCookie: () => {}, + } + + const result = createAdminAdapter(adapterShape) + expect(result).toBe(adapterShape) + }) + }) +}) diff --git a/test/admin-adapter/tanstack-start.int.spec.ts b/test/admin-adapter/tanstack-start.int.spec.ts new file mode 100644 index 00000000000..f1134944d76 --- /dev/null +++ b/test/admin-adapter/tanstack-start.int.spec.ts @@ -0,0 +1,40 @@ +import { describe, expect, it } from 'vitest' + +describe('tanstackStartAdapter', () => { + it('should export tanstackStartAdapter function', async () => { + const { tanstackStartAdapter } = await import('@payloadcms/tanstack-start') + expect(typeof tanstackStartAdapter).toBe('function') + }) + + it('should return AdminAdapterResult with name and init', async () => { + const { tanstackStartAdapter } = await import('@payloadcms/tanstack-start') + const result = tanstackStartAdapter() + expect(result.name).toBe('tanstack-start') + expect(typeof result.init).toBe('function') + }) + + it('should export TanStackRouterProvider', async () => { + const { TanStackRouterProvider } = await import('@payloadcms/tanstack-start') + expect(typeof TanStackRouterProvider).toBe('function') + }) + + it('should export handleServerFunctions from server entrypoint', async () => { + const { handleServerFunctions } = await import('@payloadcms/tanstack-start/server') + expect(typeof handleServerFunctions).toBe('function') + }) + + it('should export initReq from server entrypoint', async () => { + const { initReq } = await import('@payloadcms/tanstack-start/server') + expect(typeof initReq).toBe('function') + }) + + it('should export TanStackAdminPage from views', async () => { + const { TanStackAdminPage } = await import('@payloadcms/tanstack-start/views') + expect(typeof TanStackAdminPage).toBe('function') + }) + + it('should export getPageState from the views entrypoint', async () => { + const { getPageState } = await import('@payloadcms/tanstack-start/views/getPageState') + expect(typeof getPageState).toBe('function') + }) +}) diff --git a/test/admin-root/payload-types.ts b/test/admin-root/payload-types.ts index 5823bcc2f9c..d68583808a1 100644 --- a/test/admin-root/payload-types.ts +++ b/test/admin-root/payload-types.ts @@ -94,6 +94,9 @@ export interface Config { menu: MenuSelect | MenuSelect; }; locale: null; + widgets: { + collections: CollectionsWidget; + }; user: User; jobs: { tasks: unknown; @@ -320,6 +323,16 @@ export interface MenuSelect { createdAt?: T; globalType?: T; } +/** + * This interface was referenced by `Config`'s JSON-Schema + * via the `definition` "collections_widget". + */ +export interface CollectionsWidget { + data?: { + [k: string]: unknown; + }; + width: 'full'; +} /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "auth". diff --git a/test/admin/components/views/CustomDefault/index.tsx b/test/admin/components/views/CustomDefault/index.tsx index e72c24cd668..97cb57d5b9c 100644 --- a/test/admin/components/views/CustomDefault/index.tsx +++ b/test/admin/components/views/CustomDefault/index.tsx @@ -1,4 +1,5 @@ import { DefaultTemplate } from '@payloadcms/next/templates' +import { getNavPrefs } from '@payloadcms/next/utilities' import LinkImport from 'next/link.js' import { redirect } from 'next/navigation.js' import React from 'react' @@ -14,7 +15,11 @@ import './index.scss' const baseClass = 'custom-default-view' -export function CustomDefaultView({ initPageResult, params, searchParams }: AdminViewServerProps) { +export async function CustomDefaultView({ + initPageResult, + params, + searchParams, +}: AdminViewServerProps) { const { permissions, req: { @@ -28,6 +33,7 @@ export function CustomDefaultView({ initPageResult, params, searchParams }: Admi }, visibleEntities, } = initPageResult + const navPreferences = await getNavPrefs(initPageResult.req) // If an unauthorized user tries to navigate straight to this page, // Boot 'em out @@ -39,6 +45,7 @@ export function CustomDefaultView({ initPageResult, params, searchParams }: Admi { + vinxiProcess.kill('SIGINT') + process.exit(0) +}) +process.on('SIGTERM', () => { + vinxiProcess.kill('SIGTERM') + process.exit(0) +}) + +await new Promise((resolve, reject) => { + vinxiProcess.on('error', (err) => reject(err)) + vinxiProcess.on('close', (code) => { + if (!code) { + resolve() + } else { + reject(new Error(`Vinxi exited with code ${code}`)) + } + }) +}) diff --git a/test/initDevAndTest.ts b/test/initDevAndTest.ts index 5f2cf0ec9b0..d9c2645d60a 100644 --- a/test/initDevAndTest.ts +++ b/test/initDevAndTest.ts @@ -19,10 +19,14 @@ export async function initDevAndTest( skipGenImportMap: string, configFile?: string, ): Promise { - const importMapPath: string = path.resolve( - getNextRootDir(testSuiteArg).rootDir, - './app/(payload)/admin/importMap.js', - ) + // Determine target root dir — env var takes precedence (set by dev-tanstack.ts) + const targetRootDir = process.env.ROOT_DIR ?? getNextRootDir(testSuiteArg).rootDir + // TanStack Start apps have app.config.ts; Next.js apps have app/(payload) structure + const isTanstackApp = fs.existsSync(path.resolve(targetRootDir, 'app.config.ts')) + const importMapRelativePath = isTanstackApp + ? './app/importMap.js' + : './app/(payload)/admin/importMap.js' + const importMapPath: string = path.resolve(targetRootDir, importMapRelativePath) try { fs.writeFileSync(importMapPath, 'export const importMap = {}') @@ -48,7 +52,18 @@ export async function initDevAndTest( const configUrl = pathToFileURL(path.resolve(testDir, configFile ?? 'config.ts')).href const config: SanitizedConfig = await (await import(configUrl)).default - process.env.ROOT_DIR = getNextRootDir(testSuiteArg).rootDir + // Only set ROOT_DIR if not already set (dev-tanstack.ts may have set it) + if (!process.env.ROOT_DIR) { + process.env.ROOT_DIR = getNextRootDir(testSuiteArg).rootDir + } + + // For TanStack apps, set importMapFile explicitly so generateImportMap writes to the right path + if (isTanstackApp) { + if (!config.admin.importMap) { + ;(config.admin as any).importMap = {} + } + ;(config.admin.importMap as any).importMapFile = importMapPath + } await generateImportMap(config, { log: true, force: true }) diff --git a/test/package.json b/test/package.json index 16d70275189..225b3a80c76 100644 --- a/test/package.json +++ b/test/package.json @@ -73,6 +73,7 @@ "@payloadcms/storage-s3": "workspace:*", "@payloadcms/storage-uploadthing": "workspace:*", "@payloadcms/storage-vercel-blob": "workspace:*", + "@payloadcms/tanstack-start": "workspace:*", "@payloadcms/translations": "workspace:*", "@payloadcms/ui": "workspace:*", "@sentry/nextjs": "^8.33.1", diff --git a/test/runE2E.ts b/test/runE2E.ts index ca3a70039f5..7f1c006f76e 100644 --- a/test/runE2E.ts +++ b/test/runE2E.ts @@ -22,6 +22,8 @@ if (prod) { } const turbo = process.argv.includes('--no-turbo') ? false : true +const framework = process.env.PAYLOAD_FRAMEWORK ?? 'next' +const isTanstackStart = framework === 'tanstack-start' process.argv = process.argv.filter((arg) => arg !== '--prod' && arg !== '--no-turbo') @@ -148,7 +150,7 @@ async function executePlaywright( ) const spawnDevArgs: string[] = [ - 'dev', + isTanstackStart ? 'dev:tanstack' : 'dev', suiteConfigPath ? `${baseTestFolder}#${suiteConfigPath}` : baseTestFolder, ] if (prod) { diff --git a/test/testHooks.ts b/test/testHooks.ts index a734093b950..b3275753670 100644 --- a/test/testHooks.ts +++ b/test/testHooks.ts @@ -12,7 +12,7 @@ const dirname = path.dirname(filename) * Replace the @payload-config path in tsconfig.base.json using string replacement * to avoid reformatting the entire file. */ -async function replacePayloadConfigPath(rootDir: string, configPath: string) { +export async function replacePayloadConfigPath(rootDir: string, configPath: string) { const tsConfigBasePath = path.resolve(rootDir, './tsconfig.base.json') const tsConfigPath = existsSync(tsConfigBasePath) ? tsConfigBasePath