fix: Add eslint config for playground and fix lint errors

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Author: Copilot

apps/playground/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

apps/playground/package.json

@@ -19,14 +19,19 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.1.1",
     "autoprefixer": "^10.4.23",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"
   }
 }

apps/playground/src/App.tsx

@@ -9,21 +9,26 @@ type ViewportSize = 'desktop' | 'tablet' | 'mobile';
 export default function Playground() {
   const [selectedExample, setSelectedExample] = useState<ExampleKey>('dashboard');
   const [code, setCode] = useState(examples['dashboard']);
-  const [schema, setSchema] = useState<any>(null);
+  const [schema, setSchema] = useState<Record<string, unknown> | null>(null);
   const [jsonError, setJsonError] = useState<string | null>(null);
   const [viewportSize, setViewportSize] = useState<ViewportSize>('desktop');
   const [copied, setCopied] = useState(false);
 
   // Real-time JSON parsing
   useEffect(() => {
-    try {
-      const parsed = JSON.parse(code);
-      setSchema(parsed);
-      setJsonError(null);
-    } catch (e) {
-      setJsonError((e as Error).message);
-      // Keep previous schema on error
-    }
+    // Parse JSON in a microtask to avoid synchronous setState in effect
+    const timer = setTimeout(() => {
+      try {
+        const parsed = JSON.parse(code);
+        setSchema(parsed);
+        setJsonError(null);
+      } catch (e) {
+        setJsonError((e as Error).message);
+        // Keep previous schema on error
+      }
+    }, 0);
+    
+    return () => clearTimeout(timer);
   }, [code]);
 
   const handleExampleChange = (key: ExampleKey) => {