Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\nAlways import utilities with version pins to avoid breaking changes:\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n1. **parseProject** - Extract information about the current project from import.meta.url:\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\n2. **readFile** - Read files from within the project:\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n3. **serveFile** - Serve project files with proper content types:\n```ts\n// Serve a file from the project with proper Content-Type header\napp.get(\"/public/style.css\", c => serveFile(\"/frontend/style.css\", import.meta.url));\n```\n\n4. **listFiles** - List all files in the project:\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n5. **fetchTranspiledJavaScript** - Fetch and transpile TypeScript to JavaScript:\n```ts\nconst jsCode = await fetchTranspiledJavaScript(\"https://esm.town/v/username/project/path/to/file.ts\");\n```\n\n6. **testServer** - Create a test server for running test suites:\n```ts\nexport default testServer([\n {\n name: \"Feature Tests\",\n tests: [\n {\n name: \"should add numbers correctly\",\n function: () => {\n expect(1 + 1).toBe(2);\n },\n }\n ],\n }\n]);\n```\n\n## Val Town Platform Specifics\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link with `import.meta.url.replace(\"esm.town\", \"val.town\")` and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; avoid catches that merely log or return 500s - let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma\n- When facing client-side render issues, check if all React dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n // Use the serveFile utility to handle content types automatically\n app.get(\"/public/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Be careful with error handling as Hono tends to swallow errors\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Frontend Best Practices\n- Structure as a standard client-side React app\n- Use SVG for favicons (Val Town only supports text files)\n- Separate components into individual files\n- Access bootstrapped data from `window.__INITIAL_DATA__`\n- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma\n- Follow the React component pattern from the example project\n- Handle API calls properly with proper error catching\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n- Follow the queries and migrations pattern from the example\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:**\n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n - Properly handle CORS if needed for external access",[183],"868eda70-4d8d-11f0-b958-76b3cceeab13","ui-kit","868edb7e-4d8d-11f0-b958-76b3cceeab13",166,["D",1750393069165],"directory",[189],"a527b656-3c43-11f0-baed-9e149126039e","shared","f51258e7-ba5a-41ab-9356-127b9178fe98",["D",1748492167939],[196],"9dba5c4a-3c46-11f0-b3a3-9e149126039e","frontend","2c2592a9-213d-42d8-b3c8-e300bf3eaa04",28,["D",1748493443987],[201],"397162ac-3c45-11f0-9e6e-9e149126039e","docs","3679b36a-3c45-11f0-9e6e-9e149126039e",5,["D",1748492846253],[207],"018e8d82-3c46-11f0-b1b1-9e149126039e","backend","b913e97a-f723-4624-98c5-8a0153655046",23,["D",1748493181993],[213],"e2b98a54-44e4-11f0-b4e2-76b3cceeab13",".storybook","e2b98b30-44e4-11f0-b4e2-76b3cceeab13",131,["D",1749441029546],[219],"pulls","branches","envVars",{"_230":232,"_233":22},"connections",{"_230":22,"_231":22},"count","unfilledCount",4,"emptyCount",{"_27":218,"_13":219,"_153":220,"_155":-5,"_156":93,"_157":221,"_159":53,"_54":786,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":787,"_108":788},{"_27":779,"_13":585,"_153":780,"_155":220,"_156":93,"_157":781,"_159":53,"_54":782,"_90":22,"_162":320,"_163":783,"_165":20,"_166":-5,"_303":784,"_108":785},{"_27":771,"_13":772,"_153":773,"_155":220,"_156":93,"_157":774,"_159":53,"_54":775,"_90":22,"_162":120,"_163":776,"_165":20,"_166":-5,"_303":777,"_108":778},{"_27":763,"_13":764,"_153":765,"_155":220,"_156":93,"_157":766,"_159":53,"_54":767,"_90":22,"_162":320,"_163":768,"_165":20,"_166":-5,"_303":769,"_108":770},{"_27":212,"_13":213,"_153":214,"_155":-5,"_156":93,"_157":215,"_159":53,"_54":760,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":761,"_108":762},{"_27":756,"_13":739,"_153":733,"_155":214,"_156":93,"_157":215,"_159":53,"_54":757,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":758,"_108":759},{"_27":748,"_13":749,"_153":750,"_155":733,"_156":93,"_157":751,"_159":53,"_54":752,"_90":651,"_162":320,"_163":753,"_165":20,"_166":-5,"_303":754,"_108":755},{"_27":740,"_13":741,"_153":742,"_155":733,"_156":93,"_157":743,"_159":53,"_54":744,"_90":24,"_162":320,"_163":745,"_165":20,"_166":-5,"_303":746,"_108":747},{"_27":730,"_13":731,"_153":732,"_155":733,"_156":93,"_157":734,"_159":53,"_54":735,"_90":24,"_162":320,"_163":736,"_165":20,"_166":-5,"_303":737,"_108":738},{"_27":725,"_13":716,"_153":709,"_155":214,"_156":93,"_157":726,"_159":53,"_54":727,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":728,"_108":729},{"_27":717,"_13":718,"_153":719,"_155":709,"_156":93,"_157":720,"_159":53,"_54":721,"_90":24,"_162":320,"_163":722,"_165":20,"_166":-5,"_303":723,"_108":724},{"_27":706,"_13":707,"_153":708,"_155":709,"_156":93,"_157":710,"_159":53,"_54":711,"_90":712,"_162":320,"_163":713,"_165":20,"_166":-5,"_303":714,"_108":715},{"_27":698,"_13":699,"_153":700,"_155":214,"_156":93,"_157":701,"_159":53,"_54":702,"_90":24,"_162":320,"_163":703,"_165":20,"_166":-5,"_303":704,"_108":705},{"_27":689,"_13":406,"_153":69,"_155":214,"_156":93,"_157":690,"_159":53,"_54":691,"_90":692,"_162":693,"_163":694,"_165":20,"_166":695,"_303":696,"_108":697},{"_27":206,"_13":207,"_153":208,"_155":-5,"_156":93,"_157":209,"_159":53,"_54":686,"_90":24,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":687,"_108":688},{"_27":679,"_13":680,"_153":681,"_155":208,"_156":93,"_157":98,"_159":53,"_54":682,"_90":651,"_162":120,"_163":683,"_165":20,"_166":-5,"_303":684,"_108":685},{"_27":671,"_13":672,"_153":673,"_155":208,"_156":93,"_157":674,"_159":53,"_54":675,"_90":651,"_162":120,"_163":676,"_165":20,"_166":-5,"_303":677,"_108":678},{"_27":663,"_13":664,"_153":665,"_155":208,"_156":93,"_157":666,"_159":53,"_54":667,"_90":651,"_162":120,"_163":668,"_165":20,"_166":-5,"_303":669,"_108":670},{"_27":655,"_13":656,"_153":657,"_155":208,"_156":93,"_157":658,"_159":53,"_54":659,"_90":24,"_162":120,"_163":660,"_165":20,"_166":-5,"_303":661,"_108":662},{"_27":647,"_13":648,"_153":649,"_155":208,"_156":93,"_157":623,"_159":53,"_54":650,"_90":651,"_162":120,"_163":652,"_165":20,"_166":-5,"_303":653,"_108":654},{"_27":639,"_13":640,"_153":641,"_155":208,"_156":93,"_157":642,"_159":53,"_54":643,"_90":22,"_162":120,"_163":644,"_165":20,"_166":-5,"_303":645,"_108":646},{"_27":200,"_13":201,"_153":202,"_155":-5,"_156":93,"_157":203,"_159":53,"_54":636,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":637,"_108":638},{"_27":627,"_13":628,"_153":629,"_155":202,"_156":93,"_157":630,"_159":53,"_54":631,"_90":632,"_162":120,"_163":633,"_165":20,"_166":-5,"_303":634,"_108":635},{"_27":618,"_13":619,"_153":620,"_155":202,"_156":93,"_157":621,"_159":53,"_54":622,"_90":623,"_162":320,"_163":624,"_165":20,"_166":-5,"_303":625,"_108":626},{"_27":610,"_13":611,"_153":612,"_155":202,"_156":93,"_157":613,"_159":53,"_54":614,"_90":22,"_162":120,"_163":615,"_165":20,"_166":-5,"_303":616,"_108":617},{"_27":195,"_13":196,"_153":197,"_155":-5,"_156":93,"_157":24,"_159":53,"_54":607,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":608,"_108":609},{"_27":600,"_13":429,"_153":601,"_155":197,"_156":93,"_157":602,"_159":53,"_54":603,"_90":209,"_162":320,"_163":604,"_165":20,"_166":-5,"_303":605,"_108":606},{"_27":188,"_13":189,"_153":190,"_155":-5,"_156":93,"_157":191,"_159":53,"_54":597,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":598,"_108":599},{"_27":592,"_13":219,"_153":578,"_155":190,"_156":93,"_157":593,"_159":53,"_54":594,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":595,"_108":596},{"_27":584,"_13":585,"_153":586,"_155":578,"_156":93,"_157":587,"_159":53,"_54":588,"_90":22,"_162":320,"_163":589,"_165":20,"_166":-5,"_303":590,"_108":591},{"_27":575,"_13":576,"_153":577,"_155":578,"_156":93,"_157":579,"_159":53,"_54":580,"_90":22,"_162":320,"_163":581,"_165":20,"_166":-5,"_303":582,"_108":583},{"_27":570,"_13":404,"_153":398,"_155":190,"_156":93,"_157":571,"_159":53,"_54":572,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":573,"_108":574},{"_27":565,"_13":437,"_153":431,"_155":398,"_156":93,"_157":566,"_159":53,"_54":567,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":568,"_108":569},{"_27":557,"_13":558,"_153":559,"_155":431,"_156":93,"_157":560,"_159":53,"_54":561,"_90":24,"_162":320,"_163":562,"_165":20,"_166":-5,"_303":563,"_108":564},{"_27":549,"_13":550,"_153":551,"_155":431,"_156":93,"_157":552,"_159":53,"_54":553,"_90":161,"_162":320,"_163":554,"_165":20,"_166":-5,"_303":555,"_108":556},{"_27":541,"_13":542,"_153":543,"_155":431,"_156":93,"_157":544,"_159":53,"_54":545,"_90":161,"_162":320,"_163":546,"_165":20,"_166":-5,"_303":547,"_108":548},{"_27":533,"_13":534,"_153":535,"_155":431,"_156":93,"_157":536,"_159":53,"_54":537,"_90":24,"_162":320,"_163":538,"_165":20,"_166":-5,"_303":539,"_108":540},{"_27":525,"_13":526,"_153":527,"_155":431,"_156":93,"_157":528,"_159":53,"_54":529,"_90":161,"_162":320,"_163":530,"_165":20,"_166":-5,"_303":531,"_108":532},{"_27":517,"_13":518,"_153":519,"_155":431,"_156":93,"_157":520,"_159":53,"_54":521,"_90":161,"_162":320,"_163":522,"_165":20,"_166":-5,"_303":523,"_108":524},{"_27":509,"_13":510,"_153":511,"_155":431,"_156":93,"_157":512,"_159":53,"_54":513,"_90":24,"_162":320,"_163":514,"_165":20,"_166":-5,"_303":515,"_108":516},{"_27":501,"_13":502,"_153":503,"_155":431,"_156":93,"_157":504,"_159":53,"_54":505,"_90":161,"_162":320,"_163":506,"_165":20,"_166":-5,"_303":507,"_108":508},{"_27":493,"_13":494,"_153":495,"_155":431,"_156":93,"_157":496,"_159":53,"_54":497,"_90":24,"_162":320,"_163":498,"_165":20,"_166":-5,"_303":499,"_108":500},{"_27":485,"_13":486,"_153":487,"_155":431,"_156":93,"_157":488,"_159":53,"_54":489,"_90":161,"_162":320,"_163":490,"_165":20,"_166":-5,"_303":491,"_108":492},{"_27":477,"_13":478,"_153":479,"_155":431,"_156":93,"_157":480,"_159":53,"_54":481,"_90":22,"_162":320,"_163":482,"_165":20,"_166":-5,"_303":483,"_108":484},{"_27":469,"_13":470,"_153":471,"_155":431,"_156":93,"_157":472,"_159":53,"_54":473,"_90":24,"_162":320,"_163":474,"_165":20,"_166":-5,"_303":475,"_108":476},{"_27":461,"_13":462,"_153":463,"_155":431,"_156":93,"_157":464,"_159":53,"_54":465,"_90":22,"_162":320,"_163":466,"_165":20,"_166":-5,"_303":467,"_108":468},{"_27":453,"_13":454,"_153":455,"_155":431,"_156":93,"_157":456,"_159":53,"_54":457,"_90":24,"_162":320,"_163":458,"_165":20,"_166":-5,"_303":459,"_108":460},{"_27":445,"_13":446,"_153":447,"_155":431,"_156":93,"_157":448,"_159":53,"_54":449,"_90":22,"_162":320,"_163":450,"_165":20,"_166":-5,"_303":451,"_108":452},{"_27":438,"_13":439,"_153":440,"_155":431,"_156":93,"_157":91,"_159":53,"_54":441,"_90":24,"_162":320,"_163":442,"_165":20,"_166":-5,"_303":443,"_108":444},{"_27":428,"_13":429,"_153":430,"_155":431,"_156":93,"_157":432,"_159":53,"_54":433,"_90":24,"_162":320,"_163":434,"_165":20,"_166":-5,"_303":435,"_108":436},{"_27":423,"_13":422,"_153":416,"_155":398,"_156":93,"_157":424,"_159":53,"_54":425,"_90":22,"_162":193,"_163":-5,"_165":20,"_166":-5,"_303":426,"_108":427},{"_27":413,"_13":414,"_153":415,"_155":416,"_156":93,"_157":417,"_159":53,"_54":418,"_90":22,"_162":120,"_163":419,"_165":20,"_166":-5,"_303":420,"_108":421},{"_27":405,"_13":406,"_153":407,"_155":398,"_156":93,"_157":408,"_159":53,"_54":409,"_90":22,"_162":320,"_163":410,"_165":20,"_166":-5,"_303":411,"_108":412},{"_27":395,"_13":396,"_153":397,"_155":398,"_156":93,"_157":399,"_159":53,"_54":400,"_90":22,"_162":320,"_163":401,"_165":20,"_166":-5,"_303":402,"_108":403},{"_27":387,"_13":388,"_153":389,"_155":190,"_156":93,"_157":390,"_159":53,"_54":391,"_90":22,"_162":120,"_163":392,"_165":20,"_166":-5,"_303":393,"_108":394},{"_27":379,"_13":380,"_153":381,"_155":190,"_156":93,"_157":382,"_159":53,"_54":383,"_90":22,"_162":120,"_163":384,"_165":20,"_166":-5,"_303":385,"_108":386},{"_27":372,"_13":169,"_153":373,"_155":190,"_156":93,"_157":374,"_159":53,"_54":375,"_90":22,"_162":120,"_163":376,"_165":20,"_166":-5,"_303":377,"_108":378},{"_27":364,"_13":365,"_153":366,"_155":190,"_156":93,"_157":367,"_159":53,"_54":368,"_90":22,"_162":120,"_163":369,"_165":20,"_166":-5,"_303":370,"_108":371},{"_27":356,"_13":357,"_153":358,"_155":190,"_156":93,"_157":359,"_159":53,"_54":360,"_90":22,"_162":320,"_163":361,"_165":20,"_166":-5,"_303":362,"_108":363},{"_27":348,"_13":349,"_153":350,"_155":190,"_156":93,"_157":351,"_159":53,"_54":352,"_90":22,"_162":320,"_163":353,"_165":20,"_166":-5,"_303":354,"_108":355},{"_27":340,"_13":341,"_153":342,"_155":190,"_156":93,"_157":343,"_159":53,"_54":344,"_90":22,"_162":120,"_163":345,"_165":20,"_166":-5,"_303":346,"_108":347},{"_27":332,"_13":333,"_153":334,"_155":190,"_156":93,"_157":335,"_159":53,"_54":336,"_90":22,"_162":120,"_163":337,"_165":20,"_166":-5,"_303":338,"_108":339},{"_27":324,"_13":325,"_153":326,"_155":190,"_156":93,"_157":327,"_159":53,"_54":328,"_90":22,"_162":320,"_163":329,"_165":20,"_166":-5,"_303":330,"_108":331},{"_27":315,"_13":316,"_153":317,"_155":190,"_156":93,"_157":318,"_159":53,"_54":319,"_90":22,"_162":320,"_163":321,"_165":20,"_166":-5,"_303":322,"_108":323},{"_27":182,"_13":183,"_153":184,"_155":-5,"_156":93,"_157":24,"_159":53,"_54":312,"_90":22,"_162":120,"_163":186,"_165":20,"_166":-5,"_303":313,"_108":314},{"_27":175,"_13":176,"_153":177,"_155":-5,"_156":93,"_157":178,"_159":53,"_54":309,"_90":24,"_162":120,"_163":180,"_165":20,"_166":-5,"_303":310,"_108":311},{"_27":168,"_13":169,"_153":170,"_155":-5,"_156":93,"_157":171,"_159":53,"_54":306,"_90":161,"_162":120,"_163":173,"_165":20,"_166":-5,"_303":307,"_108":308},{"_27":151,"_13":152,"_153":154,"_155":-5,"_156":93,"_157":158,"_159":53,"_54":302,"_90":161,"_162":120,"_163":164,"_165":20,"_166":-5,"_303":304,"_108":305},["D",1749441030650],"children",[],[152],["D",1748493484473],[],[169],["D",1748667949184],[],[176],["D",1748492167939],[],[183],"874c38ea-4d8d-11f0-825e-76b3cceeab13","vitest.config.ts","874c39b2-4d8d-11f0-825e-76b3cceeab13",191,["D",1750393070407],"script","import { defineConfig } from 'vitest/config';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n plugins: [react()],\n test: {\n environment: 'jsdom',\n setupFiles: ['./src/setupTests.ts'],\n globals: true,\n css: true,\n coverage: {\n reporter: ['text', 'html'],\n exclude: [\n '**/*.d.ts',\n '**/*.stories.*',\n '**/index.ts',\n '**/setupTests.ts',\n ],\n },\n include: [\n 'src/**/*.test.{ts,tsx}',\n 'src/**/*.spec.{ts,tsx}',\n 'src/**/__tests__/*.{ts,tsx}',\n 'src/components/**/*.test.{ts,tsx}',\n ],\n },\n});\n",[],[189,316],"87482a7a-4d8d-11f0-ade6-76b3cceeab13","vite.config.ts","87482b2e-4d8d-11f0-ade6-76b3cceeab13",190,["D",1750393070380],"import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport dts from 'vite-plugin-dts'\nimport { resolve } from 'path'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n react(),\n dts({\n insertTypesEntry: true,\n }),\n ],\n build: {\n lib: {\n entry: resolve(__dirname, 'src/index.ts'),\n name: 'PersonalShopperUIKit',\n formats: ['es'],\n fileName: 'index',\n },\n rollupOptions: {\n external: ['react', 'react-dom', 'react/jsx-runtime'],\n output: {\n globals: {\n react: 'React',\n 'react-dom': 'ReactDOM',\n 'react/jsx-runtime': 'react/jsx-runtime',\n },\n },\n },\n },\n resolve: {\n alias: {\n '@': resolve(__dirname, './src'),\n },\n },\n})\n",[],[189,325],"8721c984-4d8d-11f0-ade6-76b3cceeab13","tsconfig.node.json","8721ca4c-4d8d-11f0-ade6-76b3cceeab13",182,["D",1750393070118],"{\n \"compilerOptions\": {\n \"composite\": true,\n \"skipLibCheck\": true,\n \"module\": \"ESNext\",\n \"moduleResolution\": \"bundler\",\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true\n },\n \"include\": [\"vite.config.ts\", \".storybook/**/*\"]\n}\n",[],[189,333],"8744acba-4d8d-11f0-bb34-76b3cceeab13","tsconfig.json","8744ad82-4d8d-11f0-bb34-76b3cceeab13",189,["D",1750393070359],"{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react-jsx\",\n\n /* Linting */\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noFallthroughCasesInSwitch\": true,\n\n /* Path mapping */\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n },\n\n /* Library build */\n \"declaration\": true,\n \"declarationMap\": true,\n \"outDir\": \"./dist\"\n },\n \"include\": [\n \"src/**/*\",\n \"components/**/*\"\n ],\n \"exclude\": [\n \"node_modules\",\n \"dist\",\n \"storybook-static\"\n ],\n \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n",[],[189,341],"87250ea0-4d8d-11f0-a09a-76b3cceeab13","tailwind.config.js","87250f36-4d8d-11f0-a09a-76b3cceeab13",183,["D",1750393070119],"/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n \"./.storybook/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n colors: {\n primary: {\n 50: '#eff6ff',\n 100: '#dbeafe',\n 200: '#bfdbfe',\n 300: '#93c5fd',\n 400: '#60a5fa',\n 500: '#3b82f6',\n 600: '#2563eb',\n 700: '#1d4ed8',\n 800: '#1e40af',\n 900: '#1e3a8a',\n },\n secondary: {\n 50: '#f9fafb',\n 100: '#f3f4f6',\n 200: '#e5e7eb',\n 300: '#d1d5db',\n 400: '#9ca3af',\n 500: '#6b7280',\n 600: '#4b5563',\n 700: '#374151',\n 800: '#1f2937',\n 900: '#111827',\n },\n success: {\n 50: '#f0fdf4',\n 100: '#dcfce7',\n 200: '#bbf7d0',\n 300: '#86efac',\n 400: '#4ade80',\n 500: '#22c55e',\n 600: '#16a34a',\n 700: '#15803d',\n 800: '#166534',\n 900: '#14532d',\n },\n warning: {\n 50: '#fffbeb',\n 100: '#fef3c7',\n 200: '#fde68a',\n 300: '#fcd34d',\n 400: '#fbbf24',\n 500: '#f59e0b',\n 600: '#d97706',\n 700: '#b45309',\n 800: '#92400e',\n 900: '#78350f',\n },\n error: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n },\n },\n fontFamily: {\n sans: [\n '-apple-system',\n 'BlinkMacSystemFont',\n 'Segoe UI',\n 'Roboto',\n 'Oxygen',\n 'Ubuntu',\n 'Cantarell',\n 'Fira Sans',\n 'Droid Sans',\n 'Helvetica Neue',\n 'sans-serif',\n ],\n },\n spacing: {\n '18': '4.5rem',\n '88': '22rem',\n },\n maxWidth: {\n '8xl': '88rem',\n '9xl': '96rem',\n },\n animation: {\n 'fade-in': 'fadeIn 0.5s ease-in-out',\n 'slide-up': 'slideUp 0.3s ease-out',\n 'slide-down': 'slideDown 0.3s ease-out',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0' },\n '100%': { opacity: '1' },\n },\n slideUp: {\n '0%': { transform: 'translateY(10px)', opacity: '0' },\n '100%': { transform: 'translateY(0)', opacity: '1' },\n },\n slideDown: {\n '0%': { transform: 'translateY(-10px)', opacity: '0' },\n '100%': { transform: 'translateY(0)', opacity: '1' },\n },\n },\n },\n },\n plugins: [],\n}\n",[],[189,349],"87546a42-4d8d-11f0-ae04-76b3cceeab13","postcss.config.js","87546b82-4d8d-11f0-ae04-76b3cceeab13",192,["D",1750393070462],"export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n",[],[189,357],"873c5af6-4d8d-11f0-a392-76b3cceeab13","package.json","873c5ba0-4d8d-11f0-a392-76b3cceeab13",188,["D",1750393070292],"{\n \"name\": \"personal-shopper-ui-kit\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"type\": \"module\",\n \"main\": \"./dist/index.js\",\n \"module\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.ts\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.ts\"\n }\n },\n \"files\": [\n \"dist\"\n ],\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"preview\": \"vite preview\",\n \"test\": \"vitest run\",\n \"test:watch\": \"vitest\",\n \"storybook\": \"storybook dev -p 6006\",\n \"build-storybook\": \"storybook build\",\n \"lint\": \"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0\",\n \"type-check\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n \"devDependencies\": {\n \"@storybook/addon-essentials\": \"^7.6.7\",\n \"@storybook/addon-interactions\": \"^7.6.7\",\n \"@storybook/addon-links\": \"^7.6.7\",\n \"@storybook/blocks\": \"^7.6.7\",\n \"@storybook/react\": \"^7.6.7\",\n \"@storybook/react-vite\": \"^7.6.7\",\n \"@storybook/testing-library\": \"^0.2.2\",\n \"@testing-library/jest-dom\": \"^6.1.5\",\n \"@testing-library/react\": \"^14.1.2\",\n \"@testing-library/user-event\": \"^14.5.1\",\n \"@types/react\": \"^18.2.45\",\n \"@types/react-dom\": \"^18.2.18\",\n \"@typescript-eslint/eslint-plugin\": \"^6.14.0\",\n \"@typescript-eslint/parser\": \"^6.14.0\",\n \"@vitejs/plugin-react\": \"^4.2.1\",\n \"autoprefixer\": \"^10.4.16\",\n \"eslint\": \"^8.55.0\",\n \"eslint-plugin-react\": \"^7.37.5\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.5\",\n \"eslint-plugin-storybook\": \"^0.6.15\",\n \"identity-obj-proxy\": \"^3.0.0\",\n \"jsdom\": \"^26.1.0\",\n \"postcss\": \"^8.4.32\",\n \"storybook\": \"^7.6.7\",\n \"tailwindcss\": \"^3.3.6\",\n \"typescript\": \"^5.2.2\",\n \"vite\": \"^5.0.8\",\n \"vite-plugin-dts\": \"^3.6.4\",\n \"vitest\": \"^1.4.0\"\n },\n \"peerDependencies\": {\n \"react\": \">=18.0.0\",\n \"react-dom\": \">=18.0.0\"\n },\n \"packageManager\": \"pnpm@8.15.4+sha512.0bd3a9be9eb0e9a692676deec00a303ba218ba279d99241475616b398dbaeedd11146f92c2843458f557b1d127e09d4c171e105bdcd6b61002b39685a8016b9e\"\n}\n",[],[189,365],"8731de50-4d8d-11f0-aae6-76b3cceeab13","8731df0e-4d8d-11f0-aae6-76b3cceeab13",185,["D",1750393070234],"# Personal Shopper UI Kit\n\nA React component library for the Personal Shopper application, built with Vite, TypeScript, and Tailwind CSS.\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\npnpm install\n```\n\n### Development\n\nStart Storybook for component development:\n\n```bash\npnpm storybook\n```\n\nBuild the library:\n\n```bash\npnpm build\n```\n\nRun type checking:\n\n```bash\npnpm type-check\n```\n\nRun linting:\n\n```bash\npnpm lint\n```\n\n## 📦 Components\n\nThis UI kit includes the following components:\n\n- **Dashboard** - Main dashboard layout with location picker and action cards\n- **DashboardCard** - Reusable card component for dashboard metrics\n- **CurrentLocationIndicator** - Shows current store location or prompts to select one\n- **LocationSearch** - Search and select Kroger store locations by zip code\n- **LoginPage** - OAuth login page for Kroger authentication\n- **Navbar** - Application navigation bar with user info and logout\n- **ShoppingListCreator** - Create and manage shopping lists\n\n## 🛠 Technology Stack\n\n- **React 18** - UI library\n- **TypeScript** - Type safety\n- **Vite** - Build tool and dev server\n- **Tailwind CSS** - Utility-first CSS framework\n- **Storybook** - Component development and documentation\n- **ESLint** - Code linting\n\n## 📁 Project Structure\n\n```\nui-kit/\n├── .storybook/ # Storybook configuration\n├── components/ # React components\n│ ├── *.tsx # Component implementations\n│ ├── *.stories.tsx # Storybook stories\n│ └── types.ts # Component type definitions\n├── src/\n│ ├── components/ # Future home for components (migration)\n│ ├── styles/ # Global styles and CSS\n│ └── index.ts # Main library exports\n├── dist/ # Built library output\n└── storybook-static/ # Built Storybook output\n```\n\n## 🎨 Styling\n\nThis library uses Tailwind CSS for styling. The configuration includes:\n\n- Custom color palette for branding\n- Extended spacing and sizing utilities\n- Custom animations and transitions\n- Component-specific utility classes\n\n### Custom Tailwind Classes\n\n```css\n.btn-primary # Primary button styling\n.btn-secondary # Secondary button styling\n.card # Card container styling\n.form-input # Form input styling\n```\n\n## 📖 Storybook\n\nEach component has corresponding Storybook stories for development and documentation. Stories include:\n\n- Default state examples\n- Various prop combinations\n- Interactive controls for testing\n- Documentation and usage examples\n\nAccess Storybook at `http://localhost:6006` when running `pnpm storybook`.\n\n## 🔧 Build Configuration\n\n### Vite Configuration\n\n- Library mode for component distribution\n- TypeScript declaration generation\n- React plugin for JSX transform\n- Path aliases for cleaner imports\n\n### TypeScript Configuration\n\n- Strict type checking enabled\n- JSX React runtime\n- Declaration file generation\n- Path mapping for imports\n\n## 📝 Usage\n\n### Installing as a Dependency\n\nOnce published, install the UI kit in your project:\n\n```bash\npnpm add personal-shopper-ui-kit\n```\n\n### Importing Components\n\n```tsx\nimport { Dashboard, Navbar, LoginPage } from 'personal-shopper-ui-kit';\nimport type { DashboardProps } from 'personal-shopper-ui-kit';\n```\n\n### Including Styles\n\nMake sure to import the CSS in your main application:\n\n```tsx\nimport 'personal-shopper-ui-kit/dist/style.css';\n```\n\n## 🤝 Contributing\n\n1. Make changes to components in the `components/` directory\n2. Update or add Storybook stories for new features\n3. Run `pnpm type-check` and `pnpm lint` before committing\n4. Test components in Storybook before integration\n\n## 📄 License\n\nThis project is part of the Personal Shopper application and follows the same licensing terms.",[],[189,169],"873573ee-4d8d-11f0-a2e6-76b3cceeab13",".gitignore","87357484-4d8d-11f0-a2e6-76b3cceeab13",186,["D",1750393070257],"# Dependencies\nnode_modules/\n.pnpm-store/\n\n# Build outputs\ndist/\nbuild/\n*.tsbuildinfo\n\n# Storybook\nstorybook-static/\n\n# Environment variables\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# Logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Coverage directory used by tools like istanbul\ncoverage/\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# ESLint cache\n.eslintcache\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Microbundle cache\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n.parcel-cache\n\n# Next.js build output\n.next\n\n# Nuxt.js build / generate output\n.nuxt\ndist\n\n# Gatsby files\n.cache/\npublic\n\n# Vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n\n# TernJS port file\n.tern-port\n\n# Stores VSCode versions used for testing VSCode extensions\n.vscode-test\n\n# Temporary folders\ntmp/\ntemp/\n\n# IDE files\n.vscode/\n.idea/\n*.swp\n*.swo\n*~\n\n# OS generated files\n.DS_Store\n.DS_Store?\n._*\n.Spotlight-V100\n.Trashes\nehthumbs.db\nThumbs.db\n",[],[189,380],"872aa892-4d8d-11f0-a392-76b3cceeab13",".eslintrc.cjs","872aa928-4d8d-11f0-a392-76b3cceeab13",184,["D",1750393070188],"module.exports = {\n root: true,\n env: {\n browser: true,\n es2020: true,\n node: true,\n },\n extends: [\n \"eslint:recommended\",\n \"plugin:@typescript-eslint/recommended\",\n \"plugin:react/recommended\",\n \"plugin:react-hooks/recommended\",\n ],\n ignorePatterns: [\n \"dist\",\n \".eslintrc.cjs\",\n \"storybook-static\",\n \"vite.config.ts\",\n ],\n parser: \"@typescript-eslint/parser\",\n parserOptions: {\n ecmaVersion: \"latest\",\n sourceType: \"module\",\n ecmaFeatures: {\n jsx: true,\n },\n project: \"./tsconfig.json\",\n },\n rules: {\n \"prefer-const\": \"error\",\n \"no-var\": \"error\",\n \"object-shorthand\": \"error\",\n \"prefer-template\": \"error\",\n \"no-unused-vars\": \"off\", // Disable for now to avoid conflicts\n \"react/react-in-jsx-scope\": \"off\",\n \"react/prop-types\": \"off\",\n },\n settings: {\n react: {\n version: \"detect\",\n },\n },\n};\n",[],[189,388],"8757b030-4d8d-11f0-863f-76b3cceeab13","setupTests.ts","8757b102-4d8d-11f0-863f-76b3cceeab13","86b5cd92-4d8d-11f0-9d77-76b3cceeab13",193,["D",1750393070483],"import \"@testing-library/jest-dom\";\n\n// Mock window.alert for tests (Vitest)\nbeforeAll(() => {\n window.alert = vi.fn();\n});\n\n// Only mock setSelectionRange as a no-op for Vitest/jsdom\nbeforeAll(() => {\n Object.defineProperty(HTMLTextAreaElement.prototype, \"setSelectionRange\", {\n writable: true,\n value: () => {},\n });\n});\n",[],[189,404,396],"src","878032a8-4d8d-11f0-a7ec-76b3cceeab13","index.ts","87803352-4d8d-11f0-a7ec-76b3cceeab13",201,["D",1750393070747],"// Main library exports\nexport { Dashboard } from \"src/components/Dashboard\";\nexport { DashboardCard } from \"src/components/DashboardCard\";\nexport { CurrentLocationIndicator } from \"src/components/CurrentLocationIndicator\";\nexport { LocationSearch } from \"src/components/LocationSearch\";\nexport { LoginPage } from \"src/components/LoginPage\";\nexport { Navbar } from \"src/components/Navbar\";\nexport { ShoppingListCreator } from \"src/components/ShoppingListCreator\";\nexport { ProductCard } from \"src/components/ProductCard\";\n\n// Type exports\nexport type {\n DashboardProps,\n DashboardCardProps,\n CurrentLocationIndicatorProps,\n LocationSearchProps,\n NavbarProps,\n} from \"src/components/types\";\nexport type { ProductCardProps, Product } from \"src/components/ProductCard\";\n\n// Re-export shared types for convenience\nexport type { UserData, Location } from \"../../shared/types\";\n",[],[189,404,406],"877016ac-4d8d-11f0-a392-76b3cceeab13","globals.css","87701742-4d8d-11f0-a392-76b3cceeab13","86c69a6e-4d8d-11f0-b958-76b3cceeab13",198,["D",1750393070485],"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* Custom base styles */\n@layer base {\n * {\n box-sizing: border-box;\n }\n\n html,\n body {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button {\n font-family: inherit;\n }\n}\n\n/* Custom component styles */\n@layer components {\n .btn-primary {\n @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;\n }\n\n .btn-secondary {\n @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;\n }\n\n .card {\n @apply bg-white overflow-hidden shadow rounded-lg;\n }\n\n .form-input {\n @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm;\n }\n}\n\n/* Custom utility styles */\n@layer utilities {\n .text-balance {\n text-wrap: balance;\n }\n}\n",[],[189,404,422,414],"styles","86c699c4-4d8d-11f0-b958-76b3cceeab13",169,["D",1750393069531],[285],[189,404,422],"871abfa4-4d8d-11f0-aae6-76b3cceeab13","types.ts","e312bb92-44e4-11f0-bb93-76b3cceeab13","86d722f8-4d8d-11f0-bcd0-76b3cceeab13",180,["D",1750393069755],"import { ReactNode } from \"react\";\nimport { UserData, Location } from \"../../shared/types.ts\";\n\nexport interface DashboardCardProps {\n title: string;\n count: string | number;\n icon: ReactNode;\n actionText: string;\n onAction: () => void;\n}\n\nexport interface NavbarProps {\n userData: UserData;\n}\n\nexport interface DashboardProps {\n userData: UserData;\n}\n\nexport interface LocationSearchProps {\n onLocationSelected?: () => void;\n}\n\nexport interface CurrentLocationIndicatorProps {\n location: Location | null;\n onClick: () => void;\n}\n",[],[189,404,437,429],"components","1bfd5c80-4d8e-11f0-8ebd-76b3cceeab13","ShoppingListCreator.tsx","87cfa3ec-4d8d-11f0-be1b-76b3cceeab13",["D",1750393319539],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\n\ntype ShoppingListCreatorProps = {\n initialValue?: string | string[];\n onChange?: (value: string[]) => void;\n onCursorLineChange?: (lineNumber: number) => void;\n};\n\n/**\n * Utility to process textarea value into array of items.\n * Removes leading '*' and trims whitespace from each line.\n */\nfunction parseItems(value: string): string[] {\n return value\n .split(\"\\n\")\n .map((line) => line.replace(/^\\s*\\*\\s?/, \"\").trim())\n .filter((line) => line.length > 0);\n}\n\n/**\n * Converts an array of strings (or a string) into textarea value,\n * ensuring each line starts with '* ' and is trimmed.\n */\nfunction toTextareaValue(val: string | string[] | undefined): string {\n if (Array.isArray(val)) {\n return val\n .map((item) => {\n const clean = String(item)\n .replace(/^\\s*\\*\\s?/, \"\")\n .trim();\n return clean.length > 0 ? `* ${clean}` : \"\";\n })\n .filter(Boolean)\n .join(\"\\n\");\n }\n if (typeof val === \"string\") {\n return val;\n }\n return \"\";\n}\n\nexport function ShoppingListCreator({\n initialValue = \"\",\n onChange,\n onCursorLineChange,\n}: ShoppingListCreatorProps): JSX.Element {\n const [value, setValue] = useState(() => toTextareaValue(initialValue));\n const lastLineRef = useRef(null);\n\n // Expose processed items array\n const items = parseItems(value);\n\n const handleChange = (e: React.ChangeEvent) => {\n setValue(e.target.value);\n if (onChange) {\n onChange(parseItems(e.target.value));\n }\n // Also check cursor position on change\n maybeNotifyCursorLine(e.target);\n };\n\n const handleSelect = (e: React.SyntheticEvent) => {\n maybeNotifyCursorLine(e.target as HTMLTextAreaElement);\n };\n\n // Helper to determine line number and call onCursorLineChange if changed\n const maybeNotifyCursorLine = (textarea: HTMLTextAreaElement) => {\n const cursorPos = textarea.selectionStart;\n const textUptoCursor = textarea.value.slice(0, cursorPos);\n const lineNumber = textUptoCursor.split(\"\\n\").length; // 1-based\n if (lastLineRef.current !== lineNumber) {\n lastLineRef.current = lineNumber;\n if (onCursorLineChange) {\n onCursorLineChange(lineNumber);\n }\n }\n };\n\n return (\n

\n Shopping List\n

\n\n {/* Shopping List Textarea */}\n

\n \n

\n );\n}\n",[],[189,404,437,439],"87784f20-4d8d-11f0-a7ec-76b3cceeab13","ShoppingListCreator.stories.tsx","87784ff2-4d8d-11f0-a7ec-76b3cceeab13",200,["D",1750393070695],"import React from \"react\";\nimport { Meta, StoryObj } from \"@storybook/react\";\nimport { ShoppingListCreator } from \"./ShoppingListCreator\";\n\nconst meta: Meta = {\n title: \"Components/ShoppingListCreator\",\n component: ShoppingListCreator,\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const Default: Story = {\n render: () => {\n const [items, setItems] = React.useState([]);\n const [cursorLine, setCursorLine] = React.useState(null);\n\n return (\n

\n {\n setItems(value);\n // eslint-disable-next-line no-console\n console.log(\"onChange:\", value);\n }}\n onCursorLineChange={(line) => {\n setCursorLine(line);\n // eslint-disable-next-line no-console\n console.log(\"onCursorLineChange: line\", line);\n }}\n />\n

\n Current items:\n

\n              {JSON.stringify(items, null, 2)}\n

Remixes1

Remixes
1