From 627fd994114c5371f541b16c3cca9c91619623d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Po=C5=9Bpiech?=
 <37746259+piotrpospiech@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:35:26 +0100
Subject: [PATCH 1/2] added first example to docs - different bridges with antd
 theme

---
 .vscode/settings.json                         |  5 +
 website/components/CodeEditor.tsx             | 70 -------------
 website/components/CodeEditor/CodeEditor.tsx  | 40 ++++++++
 .../components/CodeEditor/ajvValidatorFile.ts | 16 +++
 website/components/CodeEditor/dependencies.ts | 41 ++++++++
 website/docs/examples/_category_.json         |  5 +
 website/docs/examples/basic-usage.mdx         | 97 +++++++++++++++++++
 website/docs/getting-started/basic-usage.mdx  | 25 ++++-
 8 files changed, 227 insertions(+), 72 deletions(-)
 create mode 100644 .vscode/settings.json
 delete mode 100644 website/components/CodeEditor.tsx
 create mode 100644 website/components/CodeEditor/CodeEditor.tsx
 create mode 100644 website/components/CodeEditor/ajvValidatorFile.ts
 create mode 100644 website/components/CodeEditor/dependencies.ts
 create mode 100644 website/docs/examples/_category_.json
 create mode 100644 website/docs/examples/basic-usage.mdx

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..b12b42434
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "[mdx]": {
+    "editor.defaultFormatter": "unifiedjs.vscode-mdx"
+  }
+}
diff --git a/website/components/CodeEditor.tsx b/website/components/CodeEditor.tsx
deleted file mode 100644
index 42794e650..000000000
--- a/website/components/CodeEditor.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
-  SandpackCodeEditor,
-  SandpackLayout,
-  SandpackPreview,
-  SandpackProvider,
-} from '@codesandbox/sandpack-react';
-
-type CodeEditorProps = {
-  files: Record<string, string>;
-  dependencies?: Record<string, string>;
-};
-
-const example = {
-  '/App.js': `import { AutoForm } from 'uniforms-mui';
-import { ZodBridge } from 'uniforms-bridge-zod';
-import { z } from 'zod';
-
-const userSchema = z.object({
-  username: z.string(),
-  password: z.string().min(8),
-});
-
-const schema = new ZodBridge({ schema: userSchema });
-
-export default function App() {
-  return (
-    <AutoForm
-      schema={schema}
-      onSubmit={model => window.alert(JSON.stringify(model, null, 2))}
-    />
-  );
-}`,
-};
-
-const defaultDependencies = {
-  '@mui/material': '^6',
-  '@emotion/react': '^11',
-  '@emotion/styled': '^11',
-  antd: '^5',
-  uniforms: '4.0.0-beta.2',
-  'uniforms-mui': '4.0.0-beta.2',
-  'uniforms-bridge-zod': '4.0.0-beta.2',
-  zod: '^3',
-};
-
-export function CodeEditor(props: CodeEditorProps) {
-  const { files = example, dependencies = defaultDependencies } = props;
-
-  return (
-    <SandpackProvider
-      template="react"
-      customSetup={{ dependencies }}
-      files={files}
-      options={{
-        recompileMode: 'delayed',
-        recompileDelay: 800,
-      }}
-    >
-      <SandpackLayout style={{ height: '460px' }}>
-        {/* <SandpackFileExplorer /> */}
-        <SandpackCodeEditor
-          // showTabs
-          showInlineErrors
-          style={{ height: '100%' }}
-        />
-        <SandpackPreview style={{ height: '100%' }} />
-      </SandpackLayout>
-    </SandpackProvider>
-  );
-}
diff --git a/website/components/CodeEditor/CodeEditor.tsx b/website/components/CodeEditor/CodeEditor.tsx
new file mode 100644
index 000000000..8a31249c2
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/website/components/CodeEditor/ajvValidatorFile.ts b/website/components/CodeEditor/ajvValidatorFile.ts
new file mode 100644
index 000000000..981df3810
--- /dev/null
+++ b/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;
+  };
+}`;
diff --git a/website/components/CodeEditor/dependencies.ts b/website/components/CodeEditor/dependencies.ts
new file mode 100644
index 000000000..d43ea0e23
--- /dev/null
+++ b/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,
+  },
+};
diff --git a/website/docs/examples/_category_.json b/website/docs/examples/_category_.json
new file mode 100644
index 000000000..1f59843e1
--- /dev/null
+++ b/website/docs/examples/_category_.json
@@ -0,0 +1,5 @@
+{
+  "position": 3,
+  "label": "Examples",
+  "collapsible": false
+}
diff --git a/website/docs/examples/basic-usage.mdx b/website/docs/examples/basic-usage.mdx
new file mode 100644
index 000000000..c81c11974
--- /dev/null
+++ b/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} />
diff --git a/website/docs/getting-started/basic-usage.mdx b/website/docs/getting-started/basic-usage.mdx
index 5cc1ad432..f7d0997f3 100644
--- a/website/docs/getting-started/basic-usage.mdx
+++ b/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} />

From e1a97e19722364d7885121f29af978a30ccb5c92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Po=C5=9Bpiech?=
 <37746259+piotrpospiech@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:46:08 +0100
Subject: [PATCH 2/2] fixed prettier

---
 .lintstagedrc.js                              | 2 +-
 .prettierignore                               | 1 +
 website/docs/getting-started/installation.mdx | 9 ---------
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/.lintstagedrc.js b/.lintstagedrc.js
index cdf26317f..25a12a697 100644
--- a/.lintstagedrc.js
+++ b/.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',
 };
diff --git a/.prettierignore b/.prettierignore
index 084ba3075..f73ac0470 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -12,3 +12,4 @@
 /website/build
 /website/node_modules
 .turbo
+*.mdx
diff --git a/website/docs/getting-started/installation.mdx b/website/docs/getting-started/installation.mdx
index 04122fee5..fad7cdb3d 100644
--- a/website/docs/getting-started/installation.mdx
+++ b/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