Updated playground (#1353)

vazco · Jul 25, 2024 · 1bfe92a · 1bfe92a
1 parent 6fe2b41
commit 1bfe92a
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 77 deletions.
diff --git a/website/components/Playground.tsx b/website/components/Playground.tsx
@@ -14,6 +14,10 @@ import styles from '../lib/styles';
 import { themes } from '../lib/universal';
 import { compress, parseQuery, updateQuery } from '../lib/utils';
 
+function replacer(key: string, value: any) {
+  return value === undefined ? 'undefined' : value;
+}
+
 export class Playground extends Component<any, any> {
   static getDerivedStateFromError(error: Error) {
     return { error };
@@ -116,7 +120,12 @@ const PlaygroundModelDebug = () => {
       <br />
       <br />
       <pre>
-        <code>{`const model = ${JSON.stringify(model, null, 2)};`}</code>
+        <code>
+          {`const model = ${JSON.stringify(model, replacer, 2)};`.replace(
+            /"undefined"/g,
+            'undefined',
+          )}
+        </code>
       </pre>
     </>
   );
@@ -198,7 +207,7 @@ class PlaygroundProps extends Component<any, any> {
       <PlaygroundWrap theme={theme}>
         <AutoForm
           autosave
-          autosaveDelay={100}
+          autosaveDelay={1000}
           model={value}
           onSubmit={onChange}
           schema={schema}

diff --git a/website/lib/presets.ts b/website/lib/presets.ts
@@ -5,23 +5,23 @@ const presets = {
   'Welcome!': preset`
     new SimpleSchema2Bridge({
       schema: new SimpleSchema({
-          date: { type: Date, defaultValue: new Date() },
-          adult: Boolean,
-          size: {
-            type: String,
-            defaultValue: 'm',
-            allowedValues: ['xs', 's', 'm', 'l', 'xl'],
-          },
-          rating: {
-            type: Number,
-            allowedValues: [1, 2, 3, 4, 5],
-            uniforms: { checkboxes: true },
-          },
-          friends: { type: Array, minCount: 1 },
-          'friends.$': Object,
-          'friends.$.name': { type: String, min: 3 },
-          'friends.$.age': { type: Number, min: 0, max: 150 },
-        })
+        date: { type: Date, defaultValue: new Date() },
+        adult: Boolean,
+        size: {
+          type: String,
+          defaultValue: 'm',
+          allowedValues: ['xs', 's', 'm', 'l', 'xl'],
+        },
+        rating: {
+          type: Number,
+          allowedValues: [1, 2, 3, 4, 5],
+          uniforms: { checkboxes: true },
+        },
+        friends: { type: Array, minCount: 1 },
+        'friends.$': Object,
+        'friends.$.name': { type: String, min: 3 },
+        'friends.$.age': { type: Number, min: 0, max: 150 },
+      }),
     })
   `,
 
@@ -43,7 +43,7 @@ const presets = {
       function createValidator(schema) {
         const validator = ajv.compile(schema);
 
-        return (model) => {
+        return model => {
           validator(model);
 
           if (validator.errors && validator.errors.length) {
@@ -61,83 +61,84 @@ const presets = {
   'Address (SimpleSchema)': preset`
     new SimpleSchema2Bridge({
       schema: new SimpleSchema({
-          city: {
-            type: String,
-            optional: true,
-            max: 50,
-          },
-          state: String,
-          street: { type: String, max: 100 },
-          zip: {
-            type: String,
-            regEx: /^[0-9]{5}$/,
-          },
-        })
+        city: {
+          type: String,
+          optional: true,
+          max: 50,
+        },
+        state: String,
+        street: { type: String, max: 100 },
+        zip: {
+          type: String,
+          regEx: /^[0-9]{5}$/,
+        },
+      }),
     })
   `,
 
   'Address (Zod)': preset`
     new ZodBridge({
       schema: z.object({
-          city: z.string().max(50).optional(),
-          state: z.string(),
-          street: z.string().max(100),
-          zip: z.string().regex(/^[0-9]{5}$/),
-        })
+        city: z.string().max(50).optional(),
+        state: z.string(),
+        street: z.string().max(100),
+        zip: z.string().regex(/^[0-9]{5}$/),
+      }),
     })
   `,
 
   'All Fields (SimpleSchema)': preset`
     new SimpleSchema2Bridge({
       schema: new SimpleSchema({
-          text: { type: String },
-          num: { type: Number },
-          bool: { type: Boolean },
-          nested: { type: Object },
-          'nested.text': { type: String },
-          date: { type: Date },
-          list: { type: Array },
-          'list.$': {
-            type: String,
-            uniforms: { label: 'List Text', placeholder: 'List Text Placeholder' },
-          },
-          select: {
-            type: String,
-            uniforms: {
-              options: [
-                { label: 'Option A', value: 'a' },
-                { label: 'Option B', value: 'b' },
-              ],
-            },
+        text: { type: String },
+        num: { type: Number },
+        bool: { type: Boolean },
+        nested: { type: Object },
+        'nested.text': { type: String },
+        date: { type: Date },
+        list: { type: Array },
+        'list.$': {
+          type: String,
+          uniforms: { label: 'List Text', placeholder: 'List Text Placeholder' },
+        },
+        select: {
+          type: String,
+          uniforms: {
+            options: [
+              { label: 'Option A', value: 'a' },
+              { label: 'Option B', value: 'b' },
+            ],
           },
-          radio: {
-            type: String,
-            uniforms: {
-              checkboxes: true,
-              options: [
-                { label: 'Option A', value: 'a' },
-                { label: 'Option B', value: 'b' },
-              ],
-            },
+        },
+        radio: {
+          type: String,
+          uniforms: {
+            checkboxes: true,
+            options: [
+              { label: 'Option A', value: 'a' },
+              { label: 'Option B', value: 'b' },
+            ],
           },
-        })
+        },
+      }),
     })
   `,
 
   'All Fields (Zod)': preset`
     new ZodBridge({
       schema: z.object({
-          text: z.string(),
-          num: z.number(),
-          bool: z.boolean(),
-          nested: z.object({ text: z.string() }),
-          date: z.date(),
-          // TODO: Custom label and placeholder.
-          list: z.array(z.string()),
-          select: z.enum(['a', 'b']),
-          // TODO: Enums with custom props.
-          radio: z.enum(['a', 'b']),
-        })
+        text: z.string(),
+        num: z.number(),
+        bool: z.boolean(),
+        nested: z.object({ text: z.string() }),
+        date: z.date(),
+        list: z
+          .string()
+          .uniforms({ label: 'List Text', placeholder: 'List Text Placeholder' })
+          .array(),
+        select: z.enum(['a', 'b']),
+        radio: z.enum(['a', 'b']).uniforms({ checkboxes: true }),
+      }),
     })
   `,
 };