Simplify main demo (#247)

* [docs] Add prettier config

* [docs] Simplify code of the main demo

Author: x0k

.changeset/heavy-toys-play.md

@@ -0,0 +1,5 @@
+---
+"docs2": patch
+---
+
+Simplify code of the main demo

apps/docs2/.prettierignore

@@ -0,0 +1,11 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+.svelte-kit
+dist
+
+# Miscellaneous
+/static/

apps/docs2/.prettierrc

@@ -0,0 +1,15 @@
+{
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

apps/docs2/src/components/themes/basic/wrapper.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Form from './form.svelte'
+</script>
+
+<div class="demo-container">
+  <Form />
+</div>

apps/docs2/src/components/themes/daisyui/form.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
   import { BasicForm, createForm, getValueSnapshot } from "@sjsf/form";
 
-  import { createAstro } from "@/astro.svelte";
-
   import {
     schema,
     uiSchema,
     initialValue,
-    withFile,
     type CreateUser,
+    withFile,
   } from "../data";
   import * as defaults from "./defaults";
 
@@ -21,13 +19,8 @@
     uiSchema,
     onSubmit: ({ name }) => window.alert(`Hello, ${name}`),
   });
-  const astro = createAstro();
 </script>
 
-<BasicForm
-  {form}
-  style="background-color: transparent; margin-bottom: 1rem;"
-  data-theme={astro.darkOrLight}
-/>
+<BasicForm {form} />
 
 <pre>{JSON.stringify(getValueSnapshot(form), withFile, 2)}</pre>

apps/docs2/src/components/themes/daisyui/wrapper.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { createAstro } from "@/astro.svelte";
+
+  import Form from "./form.svelte";
+
+  const astro = createAstro();
+</script>
+
+<div
+  class="demo-container"
+  data-theme={astro.darkOrLight}
+  style="background-color: transparent;"
+>
+  <Form />
+</div>

apps/docs2/src/components/themes/data.ts

@@ -160,7 +160,7 @@ export const uiSchema: UiSchemaRoot = {
 
 export const initialValue: CreateUser = {
   name: "Sarah Johnson",
-  email: "sarah.johnson@invalid",
+  email: "invalid@email",
   age: 28,
   country: "CA",
   skills: ["HTML", "CSS", "JS/TS", "Svelte"],

apps/docs2/src/components/themes/flowbite/form.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import { BasicForm, createForm, getValueSnapshot } from "@sjsf/form";
 
-  import { createAstro } from "@/astro.svelte";
-
   import {
     schema,
     uiSchema,
@@ -21,9 +19,8 @@
     uiSchema,
     onSubmit: ({ name }) => window.alert(`Hello, ${name}`),
   });
-  const astro = createAstro();
 </script>
 
-<BasicForm {form} class="flex flex-col gap-4 mb-4 {astro.darkOrLight}" />
+<BasicForm {form} />
 
 <pre>{JSON.stringify(getValueSnapshot(form), withFile, 2)}</pre>

apps/docs2/src/components/themes/flowbite/wrapper.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { createAstro } from "@/astro.svelte";
+
+  import Form from './form.svelte'
+
+  const astro = createAstro()
+</script>
+
+<div class="demo-container {astro.darkOrLight}">
+  <Form />
+</div>

apps/docs2/src/components/themes/form.svelte

@@ -3,9 +3,9 @@
 
   import type { ActualTheme } from "@/shared";
 
-  import Basic from "./basic/form.svelte";
-  import Daisyui5 from "./daisyui/form.svelte";
-  import Flowbite3 from "./flowbite/form.svelte";
+  import Basic from "./basic/wrapper.svelte";
+  import Daisyui5 from "./daisyui/wrapper.svelte";
+  import Flowbite3 from "./flowbite/wrapper.svelte";
   import Shadcn4 from "./shadcn4/wrapper.svelte";
   import Skeleton4 from "./skeleton4/wrapper.svelte";
 
@@ -23,3 +23,23 @@
 </script>
 
 <ThemeForm />
+<div>
+  <style>
+    .demo-container {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      align-items: stretch;
+      gap: 1rem;
+    }
+    @media (max-width: 1080px) {
+      .demo-container {
+        grid-template-columns: 1fr;
+      }
+    }
+    .demo-container > pre {
+      overflow: auto;
+      display: flex;
+      align-items: center;
+    }
+  </style>
+</div>