@schema-forms-data/create 0.2.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 SchemaForms
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# create-schema-form
+
+Scaffold a **SchemaForms Studio** — a Vite + React app with a drag-and-drop form builder, live JSON viewer, and form preview — in one command.
+
+## Usage
+
+```bash
+npx create-schema-form my-app
+cd my-app
+npm install
+npm run dev
+```
+
+Then open **http://localhost:5173**.
+
+## What you get
+
+```
+my-app/
+├── src/
+│   ├── App.tsx           ← Studio shell (builder + JSON + preview)
+│   ├── exampleSchema.ts  ← Starter FormSchema — edit or replace
+│   ├── App.css
+│   ├── index.css
+│   └── main.tsx
+├── index.html
+├── vite.config.ts
+├── tsconfig.json
+└── package.json
+```
+
+### Studio layout
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  SchemaForms Studio                         [JSON] [Preview]  Save  │
+├──────────────┬───────────────────────┬──────────────┬───────────────┤
+│   Palette    │       Canvas          │   Config     │  JSON / Form  │
+│              │  drag fields here     │   Panel      │  Preview      │
+└──────────────┴───────────────────────┴──────────────┴───────────────┘
+```
+
+- **Palette** — drag field types onto the canvas
+- **Canvas** — build multi-step forms visually (Step → Container → Fields)
+- **Config Panel** — configure the selected field
+- **JSON** — see the live `FormSchema` JSON; click **Copy** to grab it
+- **Preview** — actually fill in the form and see the submitted data
+
+Click **Save / Export** to convert the current canvas state to a `FormSchema` and update both panels. The schema is also saved to `localStorage` so it survives a page refresh.
+
+## Packages installed
+
+| Package                       | Role                                                  |
+| ----------------------------- | ----------------------------------------------------- |
+| `@schema-forms-data/core`     | TypeScript types & enums                              |
+| `@schema-forms-data/builder`  | `BuilderProvider`, `Canvas`, `Palette`, `ConfigPanel` |
+| `@schema-forms-data/renderer` | `FormRenderer`                                        |
+
+## Docs
+
+https://schemaforms.github.io/schema-forms-data

package/bin/create-schema-form.js

@@ -0,0 +1,83 @@
+#!/usr/bin/env node
+// @ts-check
+import { mkdir, cp, readFile, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { resolve, join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const GREEN = "\x1b[32m";
+const CYAN = "\x1b[36m";
+const BOLD = "\x1b[1m";
+const RESET = "\x1b[0m";
+
+function log(msg) {
+    process.stdout.write(msg + "\n");
+}
+
+async function main() {
+    const targetName = process.argv[2] || "my-schema-form";
+
+    if (!/^[a-z0-9_-]+$/i.test(targetName)) {
+        log(`\x1b[31mInvalid project name: "${targetName}"\x1b[0m`);
+        log('Use only letters, numbers, hyphens and underscores.');
+        process.exit(1);
+    }
+
+    const targetDir = resolve(process.cwd(), targetName);
+
+    if (existsSync(targetDir)) {
+        log(`\x1b[31mDirectory "${targetName}" already exists.\x1b[0m`);
+        process.exit(1);
+    }
+
+    const templateDir = join(__dirname, "..", "template");
+
+    log(`\n${BOLD}${CYAN}Creating SchemaForms Studio in ${targetDir}${RESET}\n`);
+
+    await mkdir(targetDir, { recursive: true });
+    await cp(templateDir, targetDir, { recursive: true });
+
+    // Rename _package.json → package.json (npm strips package.json from tarballs)
+    const pkgSrc = join(targetDir, "_package.json");
+    const pkgDst = join(targetDir, "package.json");
+    if (existsSync(pkgSrc)) {
+        const raw = await readFile(pkgSrc, "utf8");
+        const pkg = JSON.parse(raw);
+        pkg.name = targetName;
+        await writeFile(pkgDst, JSON.stringify(pkg, null, 2) + "\n");
+        const { unlink } = await import("node:fs/promises");
+        await unlink(pkgSrc);
+    }
+
+    // Rename _gitignore → .gitignore
+    const gitignoreSrc = join(targetDir, "_gitignore");
+    const gitignoreDst = join(targetDir, ".gitignore");
+    if (existsSync(gitignoreSrc)) {
+        const { rename } = await import("node:fs/promises");
+        await rename(gitignoreSrc, gitignoreDst);
+    }
+
+    const pkgManager = detectPackageManager();
+
+    log(`${GREEN}${BOLD}Done!${RESET} Your project is ready.\n`);
+    log(`  ${CYAN}cd ${targetName}${RESET}`);
+    log(`  ${CYAN}${pkgManager} install${RESET}`);
+    log(`  ${CYAN}${pkgManager === "npm" ? "npm run" : pkgManager} dev${RESET}`);
+    log(``);
+    log(`Then open ${BOLD}http://localhost:5173${RESET} to see the studio.`);
+    log(``);
+}
+
+function detectPackageManager() {
+    const agent = process.env.npm_config_user_agent || "";
+    if (agent.startsWith("pnpm")) return "pnpm";
+    if (agent.startsWith("yarn")) return "yarn";
+    return "npm";
+}
+
+main().catch((err) => {
+    process.stderr.write(err.message + "\n");
+    process.exit(1);
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@schema-forms-data/create",
+  "version": "0.2.3",
+  "description": "Scaffold a SchemaForms studio app — builder + JSON viewer + renderer preview",
+  "license": "MIT",
+  "author": "SchemaForms",
+  "homepage": "https://schemaforms.github.io/schema-forms-data",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SchemaForms/schema-forms-data.git",
+    "directory": "packages/create-schema-form"
+  },
+  "keywords": [
+    "create",
+    "scaffold",
+    "schema-forms",
+    "form-builder",
+    "schema-forms-data"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "bin": {
+    "create-schema-form": "./bin/create-schema-form.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18"
+  }
+}

package/template/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.env

package/template/_package.json

@@ -0,0 +1,27 @@
+{
+  "name": "my-schema-form",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@schema-forms-data/core": "^0.2.3",
+    "@schema-forms-data/builder": "^0.2.3",
+    "@schema-forms-data/renderer": "^0.2.3",
+    "lucide-react": "^0.400.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.2"
+  }
+}

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SchemaForms Studio</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/src/App.css

@@ -0,0 +1,214 @@
+/* ── App shell ─────────────────────────────────────────────────── */
+.sf-app {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+/* ── Toolbar ───────────────────────────────────────────────────── */
+.sf-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  height: 52px;
+  background: #1a1a2e;
+  color: #fff;
+  flex-shrink: 0;
+  border-bottom: 1px solid #2a2a4a;
+}
+
+.sf-toolbar-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  flex: 1;
+}
+
+.sf-tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.sf-tab {
+  padding: 5px 14px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+
+.sf-tab:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+}
+
+.sf-tab--active {
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.sf-save-btn {
+  padding: 6px 16px;
+  border-radius: 7px;
+  border: none;
+  background: #6366f1;
+  color: #fff;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.sf-save-btn:hover {
+  background: #4f52d3;
+}
+
+/* ── Body (4-column layout) ────────────────────────────────────── */
+.sf-body {
+  display: grid;
+  grid-template-columns: 200px 1fr 260px 380px;
+  flex: 1;
+  overflow: hidden;
+  gap: 0;
+}
+
+@media (max-width: 960px) {
+  .sf-body {
+    grid-template-columns: 160px 1fr 220px;
+  }
+  .sf-output {
+    display: none;
+  }
+}
+
+/* ── Panel base ────────────────────────────────────────────────── */
+.sf-palette,
+.sf-canvas,
+.sf-config,
+.sf-output {
+  overflow-y: auto;
+  height: 100%;
+}
+
+.sf-palette {
+  border-right: 1px solid #e2e4e9;
+  background: #ffffff;
+  padding: 12px 8px;
+}
+
+.sf-canvas {
+  background: #f0f2f7;
+  padding: 20px;
+}
+
+.sf-config {
+  border-left: 1px solid #e2e4e9;
+  background: #fafafa;
+  padding: 12px;
+}
+
+.sf-output {
+  border-left: 1px solid #e2e4e9;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── JSON panel ────────────────────────────────────────────────── */
+.sf-json-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.sf-json-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid #e2e4e9;
+  font-weight: 600;
+  font-size: 12px;
+  color: #555;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: #fafafa;
+  flex-shrink: 0;
+}
+
+.sf-copy-btn {
+  padding: 3px 10px;
+  border-radius: 5px;
+  border: 1px solid #d0d3da;
+  background: transparent;
+  font-size: 11px;
+  cursor: pointer;
+  color: #555;
+  transition: all 0.12s;
+}
+
+.sf-copy-btn:hover {
+  border-color: #6366f1;
+  color: #6366f1;
+}
+
+.sf-json-pre {
+  flex: 1;
+  overflow: auto;
+  padding: 14px;
+  font-size: 11.5px;
+  line-height: 1.6;
+  font-family: "Fira Code", "Cascadia Code", "Consolas", monospace;
+  color: #2d2d2d;
+  white-space: pre;
+  word-break: keep-all;
+}
+
+/* ── Preview panel ─────────────────────────────────────────────── */
+.sf-preview-wrap {
+  padding: 16px;
+  overflow-y: auto;
+  height: 100%;
+}
+
+.sf-preview-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #888;
+  text-align: center;
+  padding: 24px;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.sf-submitted {
+  padding: 20px;
+}
+
+.sf-submitted h3 {
+  color: #22c55e;
+  margin-bottom: 12px;
+  font-size: 16px;
+}
+
+.sf-submitted pre {
+  background: #f4f5f7;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 11px;
+  overflow-x: auto;
+  margin-bottom: 12px;
+  font-family: "Fira Code", monospace;
+}

package/template/src/App.tsx

@@ -0,0 +1,215 @@
+import React, { useState, useMemo } from "react";
+import {
+  BuilderProvider,
+  Canvas,
+  Palette,
+  ConfigPanel,
+  useBuilder,
+  formSchemaToBuilder,
+  builderToFormSchema,
+} from "@schema-forms-data/builder";
+import type { FormSchema } from "@schema-forms-data/core";
+import { FormSchemaStatus } from "@schema-forms-data/core";
+import { FormRenderer } from "@schema-forms-data/renderer";
+import { exampleSchema } from "./exampleSchema";
+import "./App.css";
+
+type Tab = "json" | "preview";
+
+// ── JSON Panel ──────────────────────────────────────────────────────────────
+function JsonPanel({ schema }: { schema: FormSchema | null }) {
+  const [copied, setCopied] = useState(false);
+  const json = JSON.stringify(schema, null, 2);
+
+  const copy = () => {
+    navigator.clipboard.writeText(json).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  return (
+    <div className="sf-json-panel">
+      <div className="sf-json-header">
+        <span>FormSchema JSON</span>
+        <button className="sf-copy-btn" onClick={copy}>
+          {copied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+      <pre className="sf-json-pre">{json}</pre>
+    </div>
+  );
+}
+
+// ── Preview Panel ────────────────────────────────────────────────────────────
+function PreviewPanel({ schema }: { schema: FormSchema | null }) {
+  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(
+    null,
+  );
+
+  if (!schema) {
+    return (
+      <div className="sf-preview-empty">
+        Build a form and click <strong>Save / Export</strong> to preview it
+        here.
+      </div>
+    );
+  }
+
+  if (submitted) {
+    return (
+      <div className="sf-submitted">
+        <h3>✓ Submitted</h3>
+        <pre>{JSON.stringify(submitted, null, 2)}</pre>
+        <button className="sf-save-btn" onClick={() => setSubmitted(null)}>
+          Fill again
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sf-preview-wrap">
+      <FormRenderer
+        schema={schema}
+        onComplete={(data) => setSubmitted(data as Record<string, unknown>)}
+      />
+    </div>
+  );
+}
+
+// ── StudioInner: lives inside BuilderProvider so it can use useBuilder() ───
+function StudioInner({
+  formName,
+  savedSchema,
+  onSchemaSaved,
+}: {
+  formName: string;
+  savedSchema: FormSchema | null;
+  onSchemaSaved: (schema: FormSchema) => void;
+}) {
+  const { containers, configs } = useBuilder();
+  const [tab, setTab] = useState<Tab>("json");
+
+  const handleSave = () => {
+    const schema = builderToFormSchema({ containers }, configs, {
+      nome: formName,
+      status: FormSchemaStatus.RASCUNHO,
+    }) as FormSchema;
+    onSchemaSaved(schema);
+  };
+
+  return (
+    <div className="sf-app">
+      {/* ── Toolbar ── */}
+      <header className="sf-toolbar">
+        <span className="sf-toolbar-title">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <path d="M3 9h18M9 21V9" />
+          </svg>
+          SchemaForms Studio
+        </span>
+
+        <div className="sf-tabs">
+          <button
+            className={`sf-tab ${tab === "json" ? "sf-tab--active" : ""}`}
+            onClick={() => setTab("json")}
+          >
+            JSON
+          </button>
+          <button
+            className={`sf-tab ${tab === "preview" ? "sf-tab--active" : ""}`}
+            onClick={() => setTab("preview")}
+          >
+            Preview
+          </button>
+        </div>
+
+        <button className="sf-save-btn" onClick={handleSave}>
+          Save / Export
+        </button>
+      </header>
+
+      {/* ── Body ── */}
+      <div className="sf-body">
+        <aside className="sf-palette">
+          <Palette />
+        </aside>
+
+        <main className="sf-canvas">
+          <Canvas />
+        </main>
+
+        <aside className="sf-config">
+          <ConfigPanel />
+        </aside>
+
+        <aside className="sf-output">
+          {tab === "json" ? (
+            <JsonPanel schema={savedSchema} />
+          ) : (
+            <PreviewPanel schema={savedSchema} />
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+// ── App ──────────────────────────────────────────────────────────────────────
+export default function App() {
+  const [savedSchema, setSavedSchema] = useState<FormSchema | null>(() => {
+    try {
+      const stored = localStorage.getItem("sf-studio-schema");
+      return stored ? (JSON.parse(stored) as FormSchema) : exampleSchema;
+    } catch {
+      return exampleSchema;
+    }
+  });
+
+  const handleSchemaSaved = (schema: FormSchema) => {
+    setSavedSchema(schema);
+    try {
+      localStorage.setItem("sf-studio-schema", JSON.stringify(schema));
+    } catch {
+      // ignore quota errors
+    }
+  };
+
+  // Convert saved schema to builder state only on initial mount
+  const { initialContainers, initialConfigs } = useMemo(() => {
+    try {
+      const result = formSchemaToBuilder(savedSchema ?? exampleSchema);
+      return {
+        initialContainers: result.dndState.containers,
+        initialConfigs: result.configs,
+      };
+    } catch {
+      return { initialContainers: undefined, initialConfigs: undefined };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // intentionally runs only on mount
+
+  return (
+    <BuilderProvider
+      initialContainers={initialContainers}
+      initialConfigs={initialConfigs}
+    >
+      <StudioInner
+        formName={savedSchema?.nome ?? "My Form"}
+        savedSchema={savedSchema}
+        onSchemaSaved={handleSchemaSaved}
+      />
+    </BuilderProvider>
+  );
+}

package/template/src/exampleSchema.ts

@@ -0,0 +1,109 @@
+import type { FormSchema } from "@schema-forms-data/core";
+import { FormSchemaStatus, FieldType } from "@schema-forms-data/core";
+
+/**
+ * Example FormSchema used as the initial state in the studio.
+ * Edit this file or drag fields in the builder to change the form.
+ */
+export const exampleSchema: FormSchema = {
+    id: "example-schema",
+    nome: "Example Form",
+    status: FormSchemaStatus.RASCUNHO,
+    steps: [
+        {
+            id: "step-texto",
+            titulo: "Personal Info",
+            ordem: 0,
+            containers: [
+                {
+                    id: "container-details",
+                    titulo: "Your Details",
+                    ordem: 0,
+                    colunas: 2,
+                    campos: [
+                        {
+                            id: "field-texto-firstName",
+                            nome: "firstName",
+                            label: "First Name",
+                            tipo: FieldType.TEXTO,
+                            obrigatorio: true,
+                            tamanho: 6,
+                            ordem: 0,
+                            placeholder: "John",
+                        },
+                        {
+                            id: "field-texto-lastName",
+                            nome: "lastName",
+                            label: "Last Name",
+                            tipo: FieldType.TEXTO,
+                            obrigatorio: true,
+                            tamanho: 6,
+                            ordem: 1,
+                            placeholder: "Doe",
+                        },
+                        {
+                            id: "field-email-email",
+                            nome: "email",
+                            label: "Email",
+                            tipo: FieldType.EMAIL,
+                            obrigatorio: true,
+                            tamanho: 6,
+                            ordem: 2,
+                            placeholder: "john@example.com",
+                        },
+                        {
+                            id: "field-telefone-phone",
+                            nome: "phone",
+                            label: "Phone",
+                            tipo: FieldType.TELEFONE,
+                            obrigatorio: false,
+                            tamanho: 6,
+                            ordem: 3,
+                            placeholder: "(11) 99999-9999",
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: "step-prefs",
+            titulo: "Preferences",
+            ordem: 1,
+            containers: [
+                {
+                    id: "container-prefs",
+                    titulo: "Preferences",
+                    ordem: 0,
+                    colunas: 1,
+                    campos: [
+                        {
+                            id: "field-select-size",
+                            nome: "size",
+                            label: "T-Shirt Size",
+                            tipo: FieldType.SELECT,
+                            obrigatorio: true,
+                            tamanho: 12,
+                            ordem: 0,
+                            opcoes: [
+                                { label: "Small", valor: "S" },
+                                { label: "Medium", valor: "M" },
+                                { label: "Large", valor: "L" },
+                                { label: "X-Large", valor: "XL" },
+                            ],
+                        },
+                        {
+                            id: "field-textarea-bio",
+                            nome: "bio",
+                            label: "Short Bio",
+                            tipo: FieldType.TEXTAREA,
+                            obrigatorio: false,
+                            tamanho: 12,
+                            ordem: 1,
+                            placeholder: "Tell us about yourself…",
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};

package/template/src/index.css

@@ -0,0 +1,16 @@
+/* ── Global reset ──────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  background: #f4f5f7;
+  color: #1a1a2e;
+}

package/template/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/template/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+    plugins: [react()],
+})