@valbuild/next 0.85.1 → 0.86.0

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <p align="center">
-    <a href="https://app.val.build">
+    <a href="https://admin.val.build">
 <svg width="100" height="100" viewBox="0 0 944 944" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="472" cy="472" r="472" fill="#1D1C28"/>
 <g filter="url(#filter0_d_14_601)">
@@ -196,7 +196,7 @@ export default async function Home() {
 
 # Remote Mode
 
-Enable remote mode to allow editors to update content online (outside of local development) by creating a project at [app.val.build](https://app.val.build).
+Enable remote mode to allow editors to update content online (outside of local development) by creating a project at [admin.val.build](https://admin.val.build).
 
 **NOTE**: Your content remains yours. Hosting content from your repository does not require a subscription. However, to edit content online, a subscription is needed — unless your project is a public repository or qualifies for the free tier. Visit the [pricing page](https://val.build/pricing) for details.
 
@@ -204,11 +204,11 @@ Enable remote mode to allow editors to update content online (outside of local d
 
 ## Remote Mode Configuration
 
-Once your project is set up in [app.val.build](https://app.val.build), configure your application to use it by setting the following:
+Once your project is set up in [admin.val.build](https://admin.val.build), configure your application to use it by setting the following:
 
 ### Environment Variables
 
-- **`VAL_API_KEY`**: This is the API key used to authenticate server side API requests. You can find it under Settings in your project on [app.val.build](https://app.val.build).
+- **`VAL_API_KEY`**: This is the API key used to authenticate server side API requests. You can find it under Settings in your project on [admin.val.build](https://admin.val.build).
 - **`VAL_SECRET`**: In addition to the VAL_API_KEY, you need to generate a random secret to secure communication between the UX client and your Next.js application. You can use any random string for this, but if you have openssl installed you can run the following command: `openssl rand -hex 16`
 
 ### `val.config` Properties
@@ -363,6 +363,73 @@ s.object({
 });
 ```
 
+#### Page router
+
+You can configure Val to track your page structure and display content as navigable web pages in the editor interface.
+
+For editors, this creates an intuitive page-based editing experience where they can navigate through your site structure and edit content directly within the context of each page.
+
+You can use the `.router` method on `record` to achieve this.
+
+When using the `.router` with the `nextAppRouter`, it will automatically generate routes based on your record keys and integrate seamlessly with Next.js App Router conventions.
+
+#### Example:
+
+```ts
+import { s, c, nextAppRouter } from "../val.config";
+
+const pageSchema = s.object({ title: s.string() });
+const pagesSchema = s.record(pageSchema).router(nextAppRouter);
+
+// NOTE: to use router(nextAppRouter) - the module must be a sibling of the page.tsx. In other words it must with page.val.ts or page.val.js
+export default c.define("/app/[slug]/page.val.ts", pageSchema, {
+  "/test-page": {
+    // This is the full pathname of the page - it must match the pattern of the Next JS route of the page.tsx you are consuming this from
+    title: "Test page",
+  },
+});
+```
+
+To consume a page route from a NextJS "page component", it is recommended you use `fetchValRoute` or `useValRoute`.
+
+NOTE: to be refactor proof (i.e. not break when changing the route), you should always provide the params of the NextJS page component.
+
+#### Example fetchValRoute
+
+```ts
+export default async function MyPage({ params }: { params:
+ Promise<{ slug: string }> // use params: Promise<unknown> if this page route has no params
+}) {
+  const page = await fetchValRoute(pageVal, params)
+  return <MyPageComponent {...page}>
+}
+```
+
+### Custom render
+
+You can customize how records are displayed in the Val editor interface by using the `.render` method on `record`. This allows you to control how individual record items appear in the editor's preview.
+
+The only currently supported layout is `list`, which provides a customizable list view for record previews.
+
+#### Example
+
+```ts
+const pagesSchema = s
+  .record(s.object({ title: s.string(), image: s.image() }))
+  .router(nextAppRouter)
+  .render({
+    layout: "list", // Use list layout for record preview
+    select({ key, val }) {
+      return {
+        // Capitalize the first letter of the key for display
+        title: key?.[0]?.toUpperCase() + key?.slice(1),
+        // Show the image from the record
+        image: val.image,
+      };
+    },
+  });
+```
+
 ## RichText
 
 <details>
@@ -706,3 +773,18 @@ const authors = useVal(otherVal); // s.record(s.object({ name: s.string() }))
 
 const nameOfAuthor = authors[articleVal.author].name;
 ```
+
+# Custom validation
+
+All schema can use the `validate` method to show custom validation errors to editors.
+
+## Example
+
+```ts
+s.string().validate((val) => {
+  if (val.startsWith("something")) {
+    return "Cannot have something in this string";
+  }
+  return false; // no validation error
+});
+```

package/package.json

@@ -8,7 +8,7 @@
     "next",
     "react"
   ],
-  "version": "0.85.1",
+  "version": "0.86.0",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
@@ -45,11 +45,11 @@
     "exports": true
   },
   "dependencies": {
-    "@valbuild/core": "~0.85.1",
-    "@valbuild/react": "~0.85.1",
-    "@valbuild/server": "~0.85.1",
-    "@valbuild/shared": "~0.85.1",
-    "@valbuild/ui": "~0.85.1",
+    "@valbuild/core": "~0.86.0",
+    "@valbuild/react": "~0.86.0",
+    "@valbuild/server": "~0.86.0",
+    "@valbuild/shared": "~0.86.0",
+    "@valbuild/ui": "~0.86.0",
     "client-only": "^0.0.1",
     "server-only": "^0.0.1"
   },