@vexcms/next 0.1.0-alpha.11 → 0.1.0-alpha.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +46 -48
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,87 +1,85 @@
1
- # @vexcms/admin-next
1
+ # @vexcms/next
2
2
 
3
- The admin panel for [VEX CMS](https://github.com/ianyimi/vex), built for Next.js. Provides a complete content management interface with collection CRUD, media management, versioning, live preview, access control, and user impersonation.
3
+ The Next.js adapter for [VEX CMS](https://github.com/ianyimi/vex). Provides the server and client components that render the admin panel — collection CRUD, media management, and role-based access control — plus config functions re-exported from `@vexcms/react`.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- pnpm add @vexcms/admin-next
8
+ pnpm add @vexcms/next@alpha
9
9
  ```
10
10
 
11
11
  ## Quick Setup
12
12
 
13
13
  ```tsx
14
- // app/admin/[[...path]]/page.tsx
15
- import { AdminLayout, AdminPage } from "@vexcms/admin-next"
14
+ // app/admin/layout.tsx
15
+ import { NextAdminLayout } from "@vexcms/next/client"
16
16
  import config from "@/vex.config"
17
+ import { getCurrentUser } from "@/auth/serverUtils"
17
18
 
18
- export default function Admin({ params }) {
19
+ export default async function AdminRootLayout({ children }: { children: React.ReactNode }) {
20
+ const user = await getCurrentUser()
19
21
  return (
20
- <AdminLayout config={config} user={user}>
21
- <AdminPage config={config} path={params.path} />
22
- </AdminLayout>
22
+ <NextAdminLayout config={config} user={user ?? undefined}>
23
+ {children}
24
+ </NextAdminLayout>
23
25
  )
24
26
  }
25
27
  ```
26
28
 
29
+ ```tsx
30
+ // app/admin/[[...path]]/page.tsx
31
+ import { NextAdminPage } from "@vexcms/next/server"
32
+ import config from "@/vex.config"
33
+
34
+ export default function AdminPage({
35
+ params,
36
+ }: {
37
+ params: Promise<{ path?: string[] }>
38
+ }) {
39
+ return <NextAdminPage config={config} params={params} />
40
+ }
41
+ ```
42
+
43
+ `NextAdminPage` and `NextAdminLayout` are exported from separate subpaths (`/server` and `/client`) rather than the package root, because an async server component and a `"use client"` component cannot share one bundle.
44
+
27
45
  ## Features
28
46
 
29
47
  ### Collection Management
30
48
 
31
- - **List view** — Paginated data table with search, sorting, bulk delete, and configurable columns
32
- - **Edit view** — Auto-generated forms from collection schema with field validation via TanStack React Form
33
- - **Create/delete** — Dialogs for document creation and deletion with permission checks
34
- - **Bidirectional pagination** — Instant access to first and last pages
49
+ - **List view** — Data table with Load More pagination, row selection, and bulk delete
50
+ - **Edit view** — Auto-generated forms from the collection schema, submitted via TanStack React Form
51
+ - **Create dialog** — Modal for document creation, gated by a `create` permission check
35
52
 
36
53
  ### Media Management
37
54
 
38
55
  - **Grid/list views** — Browse media files with thumbnails
39
- - **Upload** — Drag-and-drop upload with file type detection
40
- - **Media picker** — Inline picker for upload and relationship fields with search and pagination
41
- - **Image dimensions** — Auto-detected on upload
42
-
43
- ### Versioning & Drafts
44
-
45
- - **Draft/publish workflow** — Status badges, publish/unpublish actions
46
- - **Version history** — Dropdown to view, restore, or delete previous versions
47
- - **Autosave** — Configurable auto-save interval for draft documents
56
+ - **Upload** — Drag-and-drop or click-to-upload through the collection's configured storage adapter
57
+ - **Media picker** — Inline picker for upload fields, with a client-side search filter and Load More pagination
48
58
 
49
- ### Live Preview
59
+ ### Roadmap note
50
60
 
51
- - **Side-by-side panel** — Preview content changes in an iframe alongside the editor
52
- - **Responsive breakpoints** — Test at different screen sizes
53
- - **Snapshot system** — Transient preview data without saving to database
61
+ Versioning, drafts, and live preview are not implemented yet — both are in progress on the [roadmap](https://docs.vexcms.dev). A global's `versions.drafts` option parses and is stored on the resolved config, but it is not enforced: every read still returns the live document. See [docs.vexcms.dev](https://docs.vexcms.dev) for current status.
54
62
 
55
63
  ### Access Control
56
64
 
57
- - **Permission provider** — React context for role-based access control
58
- - **Field-level permissions** — Read-only fields based on user roles
59
- - **Collection-level permissions** — Control create, read, update, delete per collection
60
- - **UI enforcement** — Buttons and actions hidden/disabled based on permissions
61
-
62
- ### User Impersonation
63
-
64
- - **Impersonation banner** — Shows when an admin is viewing as another user
65
- - **User switching** — Select from impersonatable users list
65
+ - **Access provider** — `VexAccessProvider` supplies the RBAC access matrix to the admin panel via React context
66
+ - **Collection-level permissions** — `usePermission` gates create, read, update, and delete per collection and per global
67
+ - **UI enforcement** — Buttons and actions are disabled or hidden when the current user lacks permission
66
68
 
67
69
  ### Admin Layout
68
70
 
69
- - **Sidebar navigation** — Collections grouped by `admin.group`, with auth and media sections
70
- - **Theme support** — Light/dark mode
71
- - **User menu** — Profile, sign out, impersonation controls
71
+ - **Sidebar navigation** — Links grouped into Collections, Globals, and Media sections
72
+ - **Theme support** — Light, dark, and system modes via `ThemeToggle`
72
73
 
73
74
  ## Exports
74
75
 
75
- | Export | Description |
76
- |--------|-------------|
77
- | `AdminPage` | Main routing component — renders the correct view based on URL path |
78
- | `AdminLayout` | Server-side layout wrapper with sidebar and theme |
79
- | `PermissionProvider` | React context provider for RBAC |
80
- | `usePermission` | Hook to check a single action permission |
81
- | `usePermissions` | Hook to check all CRUD permissions for a resource |
82
- | `usePermissionContext` | Hook to access the full permission context |
83
- | `ImpersonationBanner` | Banner component for admin impersonation |
84
- | `useMediaPickerState` | Hook for media picker state management |
76
+ | Export | From | Description |
77
+ |--------|------|-------------|
78
+ | `NextAdminPage` | `@vexcms/next/server` | Async server component that routes the admin panel by URL path (dashboard, list, edit) |
79
+ | `NextAdminLayout` | `@vexcms/next/client` | Client component rendering the admin shell (sidebar, theme, breadcrumbs) around page content |
80
+ | `defineConfig`, `defineCollection`, `relationship`, `text`, `number`, `select`, `date`, `url`, `checkbox` | `@vexcms/next` | Config functions re-exported from `@vexcms/react` |
81
+
82
+ The compiled stylesheet is available at `@vexcms/next/styles`.
85
83
 
86
84
  ## Peer Dependencies
87
85
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vexcms/next",
3
- "version": "0.1.0-alpha.11",
3
+ "version": "0.1.0-alpha.12",
4
4
  "description": "Next.js adapter and admin routes for VexCMS",
5
5
  "keywords": [
6
6
  "cms",
@@ -51,8 +51,8 @@
51
51
  },
52
52
  "dependencies": {
53
53
  "lucide-react": "0.577.0",
54
- "@vexcms/core": "0.1.0-alpha.11",
55
- "@vexcms/react": "0.1.0-alpha.11"
54
+ "@vexcms/core": "0.1.0-alpha.12",
55
+ "@vexcms/react": "0.1.0-alpha.12"
56
56
  },
57
57
  "devDependencies": {
58
58
  "@convex-dev/react-query": "0.1.0",