(
+ handleRjsfSubmit,
+ {
+ key: 'initial',
+ formId: page._id
+ }
+ )
+ const onSubmit = (formData: any) => {
+ console.log('Form submitted', formData)
+ startTransition(() => {
+ dispatch(formData)
+ })
+ }
+
+ if (state.key === 'submitted') {
+ console.log(state.submissions)
+ return (
+
+ Thank you for your submission!
+ {state.submissions?.length &&
+ state.submissions.map((submission, index) => (
+
+ {submission.id}:
+ {submission.data}
+
+ ))}
+
+
+ {
+ onSubmit(formData)
+ event.preventDefault()
+ }}
+ schema={schema}
+ uiSchema={ui!}
+ widgets={{
+ 'my-custom-widget': MyFieldWidget
+ }}
+ templates={{
+ ArrayFieldTitleTemplate,
+ TitleFieldTemplate,
+ ObjectFieldTemplate,
+ FieldErrorTemplate,
+ ButtonTemplates: {
+ AddButton,
+ MoveUpButton,
+ MoveDownButton,
+ RemoveButton,
+ SubmitButton
+ } as any
+ }}
+ showErrorList="bottom"
+ >
+
+
+
+ )
+}
diff --git a/apps/demo/src/app/[form]/handleRjsfSubmit.action.ts b/apps/demo/src/app/[form]/handleRjsfSubmit.action.ts
new file mode 100644
index 000000000..a4f7ef010
--- /dev/null
+++ b/apps/demo/src/app/[form]/handleRjsfSubmit.action.ts
@@ -0,0 +1,101 @@
+'use server'
+
+import validator from '@rjsf/validator-ajv8'
+import {cms} from '@/cms'
+import {Form} from '@/Form.schema'
+import {getDb} from '@/lib/db'
+
+export type RjsfFormState =
+ | {
+ key: 'initial'
+ formId: string
+ }
+ | {
+ key: 'error'
+ formId: string
+ formData: any
+ errors: any
+ }
+ | {
+ key: 'submitted'
+ formId: string
+ submissions?: any[]
+ }
+
+export async function handleRjsfSubmit(
+ state: RjsfFormState,
+ formData: any
+): Promise {
+ console.log('state', state)
+ console.log('formData', formData)
+
+ const page = await cms.first({type: Form, id: state.formId})
+ if (!page) return state
+
+ // Validate data
+
+ const validationData = validator.validateFormData(
+ formData,
+ page.form.schema,
+ undefined,
+ undefined,
+ page.form.ui
+ )
+
+ if (validationData.errors.length > 0) {
+ console.error(state, formData, validationData.errors)
+ return {
+ key: 'error',
+ formId: state.formId,
+ formData,
+ errors: validationData
+ }
+ }
+
+ const db = getDb()
+ try {
+ await db
+ .prepare(
+ `INSERT INTO submissions (id, form_id, data) VALUES (@id, @form_id, @data)`
+ )
+ .run({
+ id: crypto.randomUUID(),
+ form_id: state.formId,
+ data: JSON.stringify(formData)
+ })
+ } catch (error) {
+ console.error(error)
+ return {
+ key: 'error',
+ formId: state.formId,
+ formData,
+ errors: [
+ {
+ name: 'dbStorageFailed',
+ property: 'general',
+ message: 'Failed writing data to the database. Please try again.',
+ stack: 'Failed writing data to the database. Please try again.'
+ }
+ ]
+ }
+ }
+
+ try {
+ const db = getDb()
+ const submissions = await db
+ .prepare(
+ 'SELECT * FROM submissions WHERE form_id = @form_id ORDER BY inserted_at DESC'
+ )
+ .all({form_id: state.formId})
+ return {
+ key: 'submitted',
+ formId: state.formId,
+ submissions
+ }
+ } catch (e) {}
+
+ return {
+ key: 'submitted',
+ formId: state.formId
+ }
+}
diff --git a/apps/demo/src/app/[form]/page.tsx b/apps/demo/src/app/[form]/page.tsx
new file mode 100644
index 000000000..6966302e2
--- /dev/null
+++ b/apps/demo/src/app/[form]/page.tsx
@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import {notFound} from 'next/navigation.js'
+import {cms} from '@/cms'
+import {Form} from '@/Form.schema'
+import {ThemedForm} from './ThemedForm'
+
+export default async function Home({
+ params
+}: {
+ params: Promise<{form: string}>
+}) {
+ const {form: path} = await params
+ const page = await cms.first({type: Form, url: `/${path}`})
+ if (!page) notFound()
+
+ return (
+
+
+
+
+ {page?.title}
+
+
+ Back
+
+
+
+
+
+
+
Something went wrong!
+
+
+ )
+}
diff --git a/apps/demo/src/app/favicon.ico b/apps/demo/src/app/favicon.ico
new file mode 100644
index 000000000..718d6fea4
Binary files /dev/null and b/apps/demo/src/app/favicon.ico differ
diff --git a/apps/demo/src/app/globals.css b/apps/demo/src/app/globals.css
new file mode 100644
index 000000000..a1f4ddde3
--- /dev/null
+++ b/apps/demo/src/app/globals.css
@@ -0,0 +1,130 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@source "../../../../node_modules/@rjsf/daisyui";
+
+@plugin "daisyui" {
+ themes: all;
+}
+
+/* @source inline("dropdown","btn","input","select","textarea","label","toggle","checkbox","radio","alert","card"); */
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --font-sans: var(--font-geist-sans);
+ --font-mono: var(--font-geist-mono);
+ --color-sidebar-ring: var(--sidebar-ring);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar: var(--sidebar);
+ --color-chart-5: var(--chart-5);
+ --color-chart-4: var(--chart-4);
+ --color-chart-3: var(--chart-3);
+ --color-chart-2: var(--chart-2);
+ --color-chart-1: var(--chart-1);
+ --color-ring: var(--ring);
+ --color-input: var(--input);
+ --color-border: var(--border);
+ --color-destructive: var(--destructive);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-accent: var(--accent);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-muted: var(--muted);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-secondary: var(--secondary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-primary: var(--primary);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-popover: var(--popover);
+ --color-card-foreground: var(--card-foreground);
+ --color-card: var(--card);
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/apps/demo/src/app/layout.tsx b/apps/demo/src/app/layout.tsx
new file mode 100644
index 000000000..f08542d76
--- /dev/null
+++ b/apps/demo/src/app/layout.tsx
@@ -0,0 +1,34 @@
+import type {Metadata} from 'next'
+import {Geist, Geist_Mono} from 'next/font/google'
+import './globals.css'
+
+const geistSans = Geist({
+ variable: '--font-geist-sans',
+ subsets: ['latin']
+})
+
+const geistMono = Geist_Mono({
+ variable: '--font-geist-mono',
+ subsets: ['latin']
+})
+
+export const metadata: Metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app'
+}
+
+export default function RootLayout({
+ children
+}: Readonly<{
+ children: React.ReactNode
+}>) {
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/apps/demo/src/app/not-found.tsx b/apps/demo/src/app/not-found.tsx
new file mode 100644
index 000000000..841cd7ca5
--- /dev/null
+++ b/apps/demo/src/app/not-found.tsx
@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+ return (
+
+
Not Found
+
Could not find requested resource
+
Return Home
+
+
+
+ Form Builder Demo123
+
+
+ Explore different form implementations and capabilities
+
+
+
+
+ {forms.map(form => {
+ return (
+
+ {form.title}
+
+ )
+ })}
+
+
+
{label}
+
My Custom Widget
+
+
+ {tabs.map(t => (
+
+ ))}
+
+
+ {tab === 'builder' && (
+
mutator(value)}
+ />
+ )}
+ {tab === 'schema' && (
+ mutator({schema, ui: uiSchema})}
+ setUiSchema={ui => mutator({schema: formSchema, ui})}
+ />
+ )}
+ {tab === 'preview' && (
+
+ )}
+
+
+
Schema definition
+
+
+
+
+
+
+
+
+