diff --git a/README.md b/README.md index 6be8e37..8ca9cd1 100644 --- a/README.md +++ b/README.md @@ -148,12 +148,10 @@ Ready-made blueprints in the [`/examples`](./examples) folder: | [`nextjs-app.json`](./examples/nextjs-app.json) | Next.js app with route groups | | [`nextjs-app-router.json`](./examples/nextjs-app-router.json) | Next.js App Router `src/app` project | | [`nest-api.json`](./examples/nest-api.json) | NestJS REST API starter | -| [`nextjs-app.json`](./examples/nextjs-app.json) | Next.js App Router project | | [`react-native.json`](./examples/react-native.json) | React Native mobile starter | -| [`nest-api.json`](./examples/nest-api.json) | NestJS REST API starter | -| [`t3-stack.json`](./examples/t3-stack.json) | T3 Stack starter | -| [`react-native.json`](./examples/react-native.json) | React Native mobile starter | -| [`turborepo.json`](./examples/turborepo.json) | TurboRepo monorepo starter | +| [`t3-stack.json`](./examples/t3-stack.json) | T3 Stack starter | +| [`turborepo.json`](./examples/turborepo.json) | TurboRepo monorepo starter | +| [`vite-react.json`](./examples/vite-react.json) | Vite + React + TypeScript starter | Generate the React Native starter: diff --git a/examples/vite-react.json b/examples/vite-react.json new file mode 100644 index 0000000..c2de556 --- /dev/null +++ b/examples/vite-react.json @@ -0,0 +1,34 @@ +{ + "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 \n {title}\n \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
\n

{title}

\n
{children}
\n
\n )\n}\n" + }, + "hooks": { + "useFetch.ts": "import { useCallback, useEffect, useState } from 'react'\n\ntype FetchState = {\n data: T | null\n loading: boolean\n error: Error | null\n refetch: () => Promise\n}\n\nexport function useFetch(url: string): FetchState {\n const [data, setData] = useState(null)\n const [loading, setLoading] = useState(true)\n const [error, setError] = useState(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(key: string, initialValue: T) {\n const [value, setValue] = useState(() => {\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
\n

Vite + React

\n

\n Edit src/pages/Home.tsx and save to test HMR.\n

\n \n

This starter was generated with Scaffinity. Add your routes and components to build your app.

\n
\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(path: string): Promise {\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 \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 \n \n \n)\n", + "vite-env.d.ts": "/// \n" + }, + "public": { + "vite.svg": null + }, + "index.html": "\n\n \n \n \n \n Vite + React\n \n \n
\n \n \n\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" +}