Docs - Sandpack configuration

.lintstagedrc.js

@@ -2,6 +2,6 @@ module.exports = {
   '**/*.{js,ts,tsx}': [
     'eslint --cache --cache-location node_modules/.cache/eslint --cache-strategy content',
   ],
-  '**/*.{json,md,mdx,yml}': ['prettier --check'],
+  '**/*.{json,md,yml}': ['prettier --check'],
   '**/*.{ts,tsx}': () => 'pnpm lint:types',
 };

.prettierignore

@@ -12,3 +12,4 @@
 /website/build
 /website/node_modules
 .turbo
+*.mdx

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "[mdx]": {
+    "editor.defaultFormatter": "unifiedjs.vscode-mdx"
+  }
+}

website/components/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,40 @@
+import {
+  SandpackCodeEditor,
+  SandpackLayout,
+  SandpackPreview,
+  SandpackProvider,
+} from '@codesandbox/sandpack-react';
+import {
+  dependencies,
+  Bridges,
+} from '@site/components/CodeEditor/dependencies';
+
+type CodeEditorProps = {
+  files: Record<string, string>;
+  bridge: Bridges;
+};
+
+export function CodeEditor(props: CodeEditorProps) {
+  const { files, bridge } = props;
+
+  return (
+    <SandpackProvider
+      template="react-ts"
+      customSetup={{ dependencies: dependencies[bridge] }}
+      files={files}
+      options={{
+        recompileMode: 'delayed',
+        recompileDelay: 800,
+      }}
+    >
+      <SandpackLayout style={{ height: '460px' }}>
+        <SandpackCodeEditor
+          showTabs
+          showInlineErrors
+          style={{ height: '100%' }}
+        />
+        <SandpackPreview style={{ height: '100%' }} />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+}

website/components/CodeEditor/ajvValidatorFile.ts

@@ -0,0 +1,16 @@
+export const ajvValidatorFile = `import Ajv, { JSONSchemaType } from 'ajv';
+
+const ajv = new Ajv({
+  allErrors: true,
+  useDefaults: true,
+  keywords: ['uniforms'],
+});
+
+export function createValidator<T>(schema: JSONSchemaType<T>) {
+  const validator = ajv.compile(schema);
+
+  return (model: Record<string, unknown>) => {
+    validator(model);
+    return validator.errors?.length ? { details: validator.errors } : null;
+  };
+}`;

website/components/CodeEditor/dependencies.ts

@@ -0,0 +1,41 @@
+export enum Bridges {
+  Zod = 'zod',
+  JSONSchema = 'json-schema',
+  SimpleSchema = 'simpl-schema',
+}
+
+const defaultDependencies = {
+  antd: '^5',
+  uniforms: '4.0.0-beta.2',
+  'uniforms-antd': '4.0.0-beta.2',
+};
+
+const zodDependencies = {
+  'uniforms-bridge-zod': '4.0.0-beta.2',
+  zod: '^3',
+};
+
+const jsonSchemaDependencies = {
+  ajv: '^8',
+  'uniforms-bridge-json-schema': '4.0.0-beta.2',
+};
+
+const simpleSchemaDependencies = {
+  'simpl-schema': '^3',
+  'uniforms-bridge-simple-schema-2': '4.0.0-beta.2',
+};
+
+export const dependencies = {
+  [Bridges.Zod]: {
+    ...defaultDependencies,
+    ...zodDependencies,
+  },
+  [Bridges.JSONSchema]: {
+    ...defaultDependencies,
+    ...jsonSchemaDependencies,
+  },
+  [Bridges.SimpleSchema]: {
+    ...defaultDependencies,
+    ...simpleSchemaDependencies,
+  },
+};

website/docs/examples/_category_.json

@@ -0,0 +1,5 @@
+{
+  "position": 3,
+  "label": "Examples",
+  "collapsible": false
+}

website/docs/examples/basic-usage.mdx

@@ -0,0 +1,97 @@
+---
+title: 'Basic usage'
+sidebar_position: 1
+---
+
+import { ajvValidatorFile } from '@site/components/CodeEditor/ajvValidatorFile';
+import { CodeEditor } from '@site/components/CodeEditor/CodeEditor';
+
+### Zod
+
+export const zodFiles = {
+  '/App.tsx': `import { AutoForm } from 'uniforms-antd';
+import { ZodBridge } from 'uniforms-bridge-zod';
+import { z } from 'zod';
+
+const userSchema = z.object({
+  username: z.string(),
+});
+
+const schema = new ZodBridge({ schema: userSchema });
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    />
+  );
+}`
+};
+
+<CodeEditor bridge="zod" files={zodFiles} />
+
+### JSON Schema
+
+export const jsonSchemaFiles = {
+  '/App.tsx': `import { AutoForm } from 'uniforms-antd';
+import { schema } from './userSchema';
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    />
+  );
+}`,
+  '/userSchema.ts': `import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
+import { JSONSchemaType } from 'ajv'
+import { createValidator } from './validator';
+
+type FormData = {
+  username: string;
+};
+
+const userSchema: JSONSchemaType<FormData> = {
+  type: 'object',
+  properties: {
+    username: { type: 'string' },
+  },
+  required: ['username'],
+};
+
+export const schema = new JSONSchemaBridge({
+  schema: userSchema,
+  validator: createValidator(userSchema),
+});
+`,
+  '/validator.ts': ajvValidatorFile
+};
+
+<CodeEditor bridge="json-schema" files={jsonSchemaFiles} />
+
+### SimpleSchema
+
+export const simpleSchemaFiles = {
+  '/App.tsx': `import { AutoForm } from 'uniforms-antd';
+import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2';
+import SimpleSchema from 'simpl-schema';
+
+const userSchema = new SimpleSchema({
+  username: String
+});
+
+const schema = new SimpleSchema2Bridge({ schema: userSchema });
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    />
+  );
+}`
+}
+
+<CodeEditor bridge="simpl-schema" files={simpleSchemaFiles} />

website/docs/getting-started/basic-usage.mdx

@@ -3,7 +3,7 @@ title: 'Basic usage'
 sidebar_position: 2
 ---
 
-import { CodeEditor } from '../../components/CodeEditor';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
 
 :::info
 This example uses `uniforms-bridge-zod` and `uniforms-antd` packages as this bridge and theme don't require any extra configuration.
@@ -56,4 +56,25 @@ That's it! Now we can render our form and see it in action.
 
 We have created a simple form with a schema. It uses AntD theme and Zod as our schema validator. Check [advanced usage](/docs/gettings-started/advanced-usage) for more complex examples or play around with the example below.
 
-<CodeEditor />
+export const files = {
+  '/App.tsx': `import { AutoForm } from 'uniforms-antd';
+import { ZodBridge } from 'uniforms-bridge-zod';
+import { z } from 'zod';
+
+const userSchema = z.object({
+  username: z.string(),
+});
+
+const schema = new ZodBridge({ schema: userSchema });
+
+export default function App() {
+  return (
+    <AutoForm
+      schema={schema}
+      onSubmit={model => window.alert(JSON.stringify(model))}
+    />
+  );
+}`
+} 
+
+<CodeEditor bridge='zod' files={files} />

website/docs/getting-started/installation.mdx

@@ -15,19 +15,16 @@ npm install uniforms
 ### 2. Install bridge
 
 <Tabs>
-  {/* prettier-ignore */}
   <TabItem value="json-schema" label="JSON Schema">
     ```sh 
     npm install uniforms-bridge-json-schema
     ```
   </TabItem>
-  {/* prettier-ignore */}
   <TabItem value="simple-schema-2" label="SimpleSchema (v2)">
     ```sh 
     npm install uniforms-bridge-simple-schema-2
     ```
   </TabItem>
-  {/* prettier-ignore */}
   <TabItem value="zod" label="Zod" default>
     ```sh 
     npm install uniforms-bridge-zod
@@ -38,37 +35,31 @@ npm install uniforms
 ### 3. Install theme
 
 <Tabs>
-  {/* prettier-ignore */}
   <TabItem value="antd" label="AntD">
     ```sh AntD
     npm install uniforms-antd
     ```
   </TabItem>
-  {/* prettier-ignore */}
   <TabItem value="bootstrap4" label="Bootstrap 4">
     ```sh Bootstrap 4
     npm install uniforms-bootstrap4
     ```
   </TabItem>
-  {/* prettier-ignore */}
   <TabItem value="bootstrap5" label="Bootstrap 5">
     ```sh Bootstrap 5
     npm install uniforms-bootstrap5
     ```
   </TabItem>
-  {/* prettier-ignore */}
   <TabItem value="mui" label="MUI" default>
     ```sh MUI
     npm install uniforms-mui
     ```
   </TabItem>
-  {/* prettier-ignore */}
   <TabItem value="semantic" label="Semantic">
     ```sh Semantic
     npm install uniforms-semantic
     ```
   </TabItem>
-  {/* prettier-ignore */}
   <TabItem value="unstyled" label="Unstyled">
     ```sh Unstyled
     npm install uniforms-unstyled