Skip to content

feat: add Vite + React blueprint to examples #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MasRama wants to merge 1 commit into from
Closed

feat: add Vite + React blueprint to examples #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
34 changes: 34 additions & 0 deletions examples/vite-react.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <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"
}
Loading