add titles, isFirst

Author: stutrek

docs/src/app/demos/building/layout.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Very Long Building Form',
+};
+export default function Layout({ children }: PropsWithChildren) {
+    return <>{children}</>;
+}

docs/src/app/demos/layout.tsx

@@ -1,5 +1,13 @@
 import type { PropsWithChildren } from 'react';
 import { Header } from '../header';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: {
+        template: '%s | Demos',
+        default: 'Demos',
+    },
+};
 
 export default function DemoLayout({ children }: PropsWithChildren) {
     return (

docs/src/app/demos/petrock/layout.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Pet Rock Registration',
+};
+export default function Layout({ children }: PropsWithChildren) {
+    return <>{children}</>;
+}

docs/src/app/demos/two-pager/layout.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+    title: 'Small Form',
+};
+export default function Layout({ children }: PropsWithChildren) {
+    return <>{children}</>;
+}

docs/src/app/demos/two-pager/page.tsx

@@ -24,7 +24,6 @@ const FirstPage = (props: FormComponentProps<FormModel>) => {
                 {...register('name', {
                     // required: true,
                     validate: (v) => {
-                        console.log(v);
                         if (!v) {
                             return 'Name is required';
                         }
@@ -75,13 +74,11 @@ const sequence: SequenceChild<
     {
         id: 'first',
         isComplete: (data) => !!data.name?.length,
-        validate: () => undefined,
         Component: FirstPage,
     },
     {
         id: 'second',
         isComplete: (data) => !!data.pet?.length,
-        validate: () => undefined,
         Component: SecondPage,
     },
 ] as const;

docs/src/app/docs/api/page.md renamed to docs/src/app/docs/api/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+    title: 'API Reference'
+}
+
 # API
 
 The API consists of a few items:
@@ -124,6 +128,7 @@ export function MyMultiPageForm() {
         goBack, // goes back one page
         goTo, // goes to a page by id
         isFinal, // if this is the last page
+        isFirst, // if this is the first page in the sequence
 	} = useMultiPageHookForm<MyDataType, MyComponentProps>({
 		hookForm,
 		pages: [myPage, mySequence],

docs/src/app/docs/complex-flows/page.md renamed to docs/src/app/docs/complex-flows/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+    title: 'Complex Flows'
+}
+
 # Large and Complex Flows
 
 Let's say you are building an onboarding flow for an app that allows users to search doctors and schedule appointments. There are a lot of details in this flow, including insurances, video, existing software, and more. Bureaucracy has made this hard on everyone. There are parts of this form that require specialized knowledge of insurances and bureaucracy, health care specialties, and even software integration. Different team members may need to review various parts of this workflow due to specialized knowledge requirements.

docs/src/app/docs/page.md renamed to docs/src/app/docs/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+    title: 'Getting Started'
+}
+
 # Getting Started
 
 This guide will help you get started using React Multi Page Form in combination with React Hook Form and TypeScript. For other form libraries, such as Formik or React Final Form, you will need to implement page level validation in an `onBeforePageChange` listener and a `getCurrentData` method. If you're not using typescript, you can skip the schema and component prop types.

docs/src/app/docs/testing/page.md renamed to docs/src/app/docs/testing/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+    title: 'Testing Your Code'
+}
+
 # Testing Forms and Sequences
 
 React Multi Page Forms provides two tools to make testing and development easier.

docs/src/app/docs/using/page.md renamed to docs/src/app/docs/using/page.mdx

@@ -1,3 +1,7 @@
+export const metadata = {
+    title: 'Using'
+}
+
 # Using React Multi Page Form
 
 ## `isComplete` vs `validate`