vite-react.json

{
  "src": {
    "components": {
      "Button.tsx": "import React from 'react'\n\ntype ButtonProps = {\n  title: string\n  onClick?: () => void\n  variant?: 'primary' | 'secondary'\n}\n\nexport default function Button({ title, onClick, variant = 'primary' }: ButtonProps) {\n  return (\n    <button\n      onClick={onClick}\n      style={{\n        ...styles.base,\n        ...(variant === 'primary' ? styles.primary : styles.secondary)\n      }}\n    >\n      {title}\n    </button>\n  )\n}\n\nconst styles = {\n  base: {\n    borderRadius: 8,\n    paddingHorizontal: 18,\n    paddingVertical: 12,\n    fontSize: 16,\n    fontWeight: 600,\n    border: 'none',\n    cursor: 'pointer'\n  },\n  primary: {\n    backgroundColor: '#2563eb',\n    color: '#ffffff'\n  },\n  secondary: {\n    backgroundColor: '#475569',\n    color: '#ffffff'\n  }\n}\n",
      "Card.tsx": "import React from 'react'\n\ntype CardProps = {\n  title: string\n  children: React.ReactNode\n}\n\nexport default function Card({ title, children }: CardProps) {\n  return (\n    <div style={{\n      borderRadius: 12,\n      border: '1px solid #e2e8f0',\n      padding: 24,\n      backgroundColor: '#ffffff'\n    }}>\n      <h2 style={{ margin: '0 0 12px 0', fontSize: 20, fontWeight: 700, color: '#0f172a' }}>{title}</h2>\n      <div style={{ color: '#475569', fontSize: 16, lineHeight: 24 }}>{children}</div>\n    </div>\n  )\n}\n"
    },
    "hooks": {
      "useFetch.ts": "import { useCallback, useEffect, useState } from 'react'\n\ntype FetchState<T> = {\n  data: T | null\n  loading: boolean\n  error: Error | null\n  refetch: () => Promise<void>\n}\n\nexport function useFetch<T = unknown>(url: string): FetchState<T> {\n  const [data, setData] = useState<T | null>(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState<Error | null>(null)\n\n  const fetchData = useCallback(async () => {\n    setLoading(true)\n    setError(null)\n\n    try {\n      const response = await fetch(url)\n\n      if (!response.ok) {\n        throw new Error(`Request failed with ${response.status}`)\n      }\n\n      const json = (await response.json()) as T\n      setData(json)\n    } catch (requestError) {\n      setError(\n        requestError instanceof Error\n          ? requestError\n          : new Error('Unknown request error')\n      )\n    } finally {\n      setLoading(false)\n    }\n  }, [url])\n\n  useEffect(() => {\n    void fetchData()\n  }, [fetchData])\n\n  return { data, loading, error, refetch: fetchData }\n}\n",
      "useLocalStorage.ts": "import { useCallback, useState } from 'react'\n\nexport function useLocalStorage<T>(key: string, initialValue: T) {\n  const [value, setValue] = useState<T>(() => {\n    try {\n      const stored = window.localStorage.getItem(key)\n      return stored ? (JSON.parse(stored) as T) : initialValue\n    } catch {\n      return initialValue\n    }\n  })\n\n  const setStoredValue = useCallback(\n    (next: T) => {\n      setValue(next)\n      try {\n        window.localStorage.setItem(key, JSON.stringify(next))\n      } catch {\n        // ignore write errors (quota, private mode)\n      }\n    },\n    [key]\n  )\n\n  return [value, setStoredValue] as const\n}\n"
    },
    "pages": {
      "Home.tsx": "import Button from '../components/Button'\nimport Card from '../components/Card'\n\nexport default function Home() {\n  return (\n    <main style={{ maxWidth: 720, margin: '0 auto', padding: 24 }}>\n      <h1 style={{ fontSize: 32, fontWeight: 700, color: '#0f172a' }}>Vite + React</h1>\n      <p style={{ color: '#475569', fontSize: 18, lineHeight: 28, marginBottom: 24 }}>\n        Edit <code>src/pages/Home.tsx</code> and save to test HMR.\n      </p>\n      <Card title=\"Getting started\">\n        <p>This starter was generated with Scaffinity. Add your routes and components to build your app.</p>\n        <Button title=\"Learn Vite\" onClick={() => window.open('https://vitejs.dev', '_blank')} />\n      </Card>\n    </main>\n  )\n}\n"
    },
    "services": {
      "api.ts": "export const API_URL = import.meta.env.VITE_API_URL ?? 'https://api.example.com'\n\nexport async function getJson<T = unknown>(path: string): Promise<T> {\n  const response = await fetch(`${API_URL}${path}`)\n\n  if (!response.ok) {\n    throw new Error(`API request failed with ${response.status}`)\n  }\n\n  return (await response.json()) as T\n}\n"
    },
    "styles": {
      "globals.css": ":root {\n  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n  color-scheme: light dark;\n}\n\nbody {\n  margin: 0;\n  background-color: #f8fafc;\n  color: #0f172a;\n}\n"
    },
    "App.tsx": "import Home from './pages/Home'\n\nexport default function App() {\n  return <Home />\n}\n",
    "main.tsx": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App'\nimport './styles/globals.css'\n\nReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n)\n",
    "vite-env.d.ts": "/// <reference types=\"vite/client\" />\n"
  },
  "public": {
    "vite.svg": null
  },
  "index.html": "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite + React</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/src/main.tsx\"></script>\n  </body>\n</html>\n",
  "vite.config.ts": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n  plugins: [react()],\n  server: {\n    port: 5173,\n  },\n})\n",
  "tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"useDefineForClassFields\": true,\n    \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"ESNext\",\n    \"skipLibCheck\": true,\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react-jsx\",\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noFallthroughCasesInSwitch\": true\n  },\n  \"include\": [\"src\"]\n}\n",
  "package.json": "{\n  \"name\": \"vite-react-app\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"tsc && vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"dependencies\": {\n    \"react\": \"latest\",\n    \"react-dom\": \"latest\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"latest\",\n    \"@types/react-dom\": \"latest\",\n    \"@vitejs/plugin-react\": \"latest\",\n    \"typescript\": \"latest\",\n    \"vite\": \"latest\"\n  }\n}\n",
  ".env.example": "VITE_API_URL=https://api.example.com\n",
  ".gitignore": "node_modules\ndist\n.env\n.env.local\n*.local\n.DS_Store\n",
  "README.md": "# Vite + React App\n\nA Vite + React + TypeScript starter generated with [Scaffinity](https://github.com/devi5040/scaffinity).\n\n## Getting Started\n\n```bash\nnpm install\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) to view the app.\n\n## Scripts\n\n- `npm run dev` — start the Vite dev server\n- `npm run build` — type-check and build for production\n- `npm run preview` — preview the production build locally\n"
}