Added more examples to the docs

website/components/CodeEditor/CodeEditor.tsx

@@ -27,7 +27,7 @@ export function CodeEditor(props: CodeEditorProps) {
         recompileDelay: 800,
       }}
     >
-      <SandpackLayout style={{ height: '460px' }}>
+      <SandpackLayout style={{ height: '600px' }}>
         <SandpackCodeEditor
           showTabs
           showInlineErrors

website/components/CodeEditorTabs.tsx

@@ -0,0 +1,28 @@
+import { CodeEditor } from '@site/components/CodeEditor/CodeEditor';
+import { Bridges } from '@site/components/CodeEditor/dependencies';
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+
+type CodeEditorTabsProps = {
+  zod: Record<string, string>;
+  json: Record<string, string>;
+  simple: Record<string, string>;
+};
+
+export function CodeEditorTabs(props: CodeEditorTabsProps) {
+  const { zod, json, simple } = props;
+
+  return (
+    <Tabs>
+      <TabItem value="zod" label="Zod" default>
+        <CodeEditor bridge={Bridges.Zod} files={zod} />
+      </TabItem>
+      <TabItem value="json-schema" label="JSON Schema">
+        <CodeEditor bridge={Bridges.JSONSchema} files={json} />
+      </TabItem>
+      <TabItem value="simpl-schema" label="Simple Schema">
+        <CodeEditor bridge={Bridges.SimpleSchema} files={simple} />
+      </TabItem>
+    </Tabs>
+  );
+}

website/docs/examples/basic-usage.mdx

@@ -1,14 +1,13 @@
 ---
 title: 'Basic usage'
 sidebar_position: 1
+hide_table_of_contents: true
 ---
 
 import { ajvValidatorFile } from '@site/components/CodeEditor/ajvValidatorFile';
-import { CodeEditor } from '@site/components/CodeEditor/CodeEditor';
+import { CodeEditorTabs } from '@site/components/CodeEditorTabs';
 
-### Zod
-
-export const zodFiles = {
+export const zod = {
   '/App.tsx': `import { AutoForm } from 'uniforms-antd';
 import { ZodBridge } from 'uniforms-bridge-zod';
 import { z } from 'zod';
@@ -29,11 +28,7 @@ export default function App() {
 }`
 };
 
-<CodeEditor bridge="zod" files={zodFiles} />
-
-### JSON Schema
-
-export const jsonSchemaFiles = {
+export const json = {
   '/App.tsx': `import { AutoForm } from 'uniforms-antd';
 import { schema } from './userSchema';
 
@@ -69,11 +64,7 @@ export const schema = new JSONSchemaBridge({
   '/validator.ts': ajvValidatorFile
 };
 
-<CodeEditor bridge="json-schema" files={jsonSchemaFiles} />
-
-### SimpleSchema
-
-export const simpleSchemaFiles = {
+export const simple = {
   '/App.tsx': `import { AutoForm } from 'uniforms-antd';
 import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2';
 import SimpleSchema from 'simpl-schema';
@@ -94,4 +85,4 @@ export default function App() {
 }`
 }
 
-<CodeEditor bridge="simpl-schema" files={simpleSchemaFiles} />
+<CodeEditorTabs zod={zod} json={json} simple={simple} />

website/docs/examples/field-props.mdx

@@ -0,0 +1,134 @@
+---
+title: 'Passing field props via components'
+sidebar_position: 4
+hide_table_of_contents: true
+---
+
+import { ajvValidatorFile } from '@site/components/CodeEditor/ajvValidatorFile';
+import { CodeEditorTabs } from '@site/components/CodeEditorTabs';
+
+export const zod = {
+  '/App.tsx': `import { AutoForm, AutoField, ErrorsField, SubmitField } from 'uniforms-antd';
+import { ZodBridge } from 'uniforms-bridge-zod';
+import { z } from 'zod';
+
+enum Role {
+  Member = 'Member',
+  Staff = 'Staff',
+}
+
+const userSchema = z.object({
+  username: z.string(),
+  password: z.string(),
+  role: z.nativeEnum(Role),
+});
+
+const schema = new ZodBridge({ schema: userSchema });
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    >
+      <AutoField name="username" />
+      <AutoField name="password" type="password" />
+      <AutoField name="role" checkboxes />
+      <ErrorsField />
+      <SubmitField />
+    </AutoForm>
+  );
+}`
+};
+
+export const json = {
+  '/App.tsx': `import { AutoForm, AutoField, ErrorsField, SubmitField } from 'uniforms-antd';
+import { schema } from './userSchema';
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    >
+      <AutoField name="username" />
+      <AutoField name="password" type="password" />
+      <AutoField name="role" checkboxes />
+      <ErrorsField />
+      <SubmitField />
+    </AutoForm>
+  );
+}`,
+  '/userSchema.ts': `import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
+import { JSONSchemaType } from 'ajv';
+import { createValidator } from './validator';
+
+enum Role {
+  Member = 'Member',
+  Staff = 'Staff',
+}
+
+type FormData = {
+  username: string;
+  password: string;
+  role: Role;
+};
+
+const userSchema: JSONSchemaType<FormData> = {
+  type: 'object',
+  properties: {
+    username: { type: 'string' },
+    password: { type: 'string' },
+    role: {
+      type: 'string',
+      enum: [Role.Member, Role.Staff],
+    },
+  },
+  required: ['username', 'password', 'role'],
+};
+
+export const schema = new JSONSchemaBridge({
+  schema: userSchema,
+  validator: createValidator(userSchema),
+});`,
+  '/validator.ts': ajvValidatorFile
+};
+
+export const simple = {
+  '/App.tsx': `import { AutoForm, AutoField, ErrorsField, SubmitField } from 'uniforms-antd';
+import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2';
+import SimpleSchema from 'simpl-schema';
+
+enum Role {
+  Member = 'Member',
+  Staff = 'Staff',
+}
+
+const userSchema = new SimpleSchema({
+  username: String,
+  password: String,
+  role: {
+    type: String,
+    allowedValues: [Role.Member, Role.Staff],
+  },
+});
+
+const schema = new SimpleSchema2Bridge({ schema: userSchema });
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    >
+      <AutoField name="username" />
+      <AutoField name="password" type="password" />
+      <AutoField name="role" checkboxes />
+      <ErrorsField />
+      <SubmitField />
+    </AutoForm>
+  );
+}`
+}
+
+<CodeEditorTabs zod={zod} json={json} simple={simple} />

website/docs/examples/form-layout.mdx

@@ -0,0 +1,157 @@
+---
+title: 'Form layout'
+sidebar_position: 2
+hide_table_of_contents: true
+---
+
+import { ajvValidatorFile } from '@site/components/CodeEditor/ajvValidatorFile';
+import { CodeEditorTabs } from '@site/components/CodeEditorTabs';
+
+export const zod = {
+  '/App.tsx': `import {
+  AutoForm,
+  AutoField,
+  AutoFields,
+  ErrorsField,
+  SubmitField,
+} from 'uniforms-antd';
+import { ZodBridge } from 'uniforms-bridge-zod';
+import { z } from 'zod';
+
+const userSchema = z.object({
+  firstName: z.string(),
+  lastName: z.string(),
+  username: z.string(),
+  email: z.string().email(),
+});
+
+const schema = new ZodBridge({ schema: userSchema });
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    >
+      <div
+        style={{
+          display: 'flex',
+          gap: '10px',
+        }}
+      >
+        <AutoField name="firstName" />
+        <AutoField name="lastName" />
+      </div>
+      <AutoFields fields={['username', 'email']} />
+      <ErrorsField />
+      <SubmitField />
+    </AutoForm>
+  );
+}
+`
+};
+
+export const json = {
+  '/App.tsx': `import {
+  AutoForm,
+  AutoField,
+  AutoFields,
+  ErrorsField,
+  SubmitField,
+} from 'uniforms-antd';
+import { schema } from './userSchema';
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    >
+      <div
+        style={{
+          display: 'flex',
+          gap: '10px',
+        }}
+      >
+        <AutoField name="firstName" />
+        <AutoField name="lastName" />
+      </div>
+      <AutoFields fields={['username', 'email']} />
+      <ErrorsField />
+      <SubmitField />
+    </AutoForm>
+  );
+}`,
+  '/userSchema.ts': `import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
+import { JSONSchemaType } from 'ajv';
+import { createValidator } from './validator';
+
+type FormData = {
+  firstName: string;
+  lastName: string;
+  username: string;
+  email: string;
+};
+
+const userSchema: JSONSchemaType<FormData> = {
+  type: 'object',
+  properties: {
+    firstName: { type: 'string' },
+    lastName: { type: 'string' },
+    username: { type: 'string' },
+    email: { type: 'string' },
+  },
+  required: ['firstName', 'lastName', 'username', 'email'],
+};
+
+export const schema = new JSONSchemaBridge({
+  schema: userSchema,
+  validator: createValidator(userSchema),
+});`,
+  '/validator.ts': ajvValidatorFile
+};
+
+export const simple = {
+  '/App.tsx': `import {
+  AutoForm,
+  AutoField,
+  AutoFields,
+  ErrorsField,
+  SubmitField,
+} from 'uniforms-antd';
+import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2';
+import SimpleSchema from 'simpl-schema';
+
+const userSchema = new SimpleSchema({
+  firstName: String,
+  lastName: String,
+  username: String,
+  email: String,
+});
+
+const schema = new SimpleSchema2Bridge({ schema: userSchema });
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    >
+      <div
+        style={{
+          display: 'flex',
+          gap: '10px',
+        }}
+      >
+        <AutoField name="firstName" />
+        <AutoField name="lastName" />
+      </div>
+      <AutoFields fields={['username', 'email']} />
+      <ErrorsField />
+      <SubmitField />
+    </AutoForm>
+  );
+}`
+}
+
+<CodeEditorTabs zod={zod} json={json} simple={simple} />