feat: export toast utility from sonner component for reuse

Author: AshishKumar4

c-code-react-runner/src/components/ui/sonner.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { Toaster as Sonner, toast } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
@@ -28,4 +28,4 @@ const Toaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { Toaster }
+export { Toaster, toast }

template_catalog.json

@@ -33,6 +33,40 @@
       "usage": "# Usage instructions\n\n- Built with\n    * React Router 6 for declarative client-side routing\n    * ShadCN UI (v2.3.0) for customizable and accessible UI components built on Radix UI primitives\n    * Tailwind CSS for utility-first styling\n    * Lucide Icons (React) for modern and lightweight iconography\n    * ESLint with sensible defaults and TypeScript support\n    * Cloudflare Workers for serving and server-side processing\n\n- Restrictions:\n  * When including `tailwind.config.js`, **hardcode custom colors** directly in the config file – do **not** define them in `index.css` unless specified\n\n- Styling:\n  * Must generate **fully responsive** and accessible layouts\n  * Use Shadcn preinstalled components rather than writing custom ones when possible\n  * Use **Tailwind's spacing, layout, and typography utilities** for all custom components\n\n- Components\n  * All Shadcn components are available and can be imported from @/components/ui/...\n  * Do not write custom components if shadcn components are available\n  * Icons from Lucide should be imported directly from `lucide-react`\n\n**NOTE: ErrorBoundary and related Error handling components and code are already implemented but hidden**\n\n- Animation:\n  * Use `framer-motion`'s `motion` components to animate sections on scroll or page load\n  * You can integrate variants and transitions using Tailwind utility classes alongside motion props\n\nComponents available:\n```sh\n$ ls -1 src/components/ui\naccordion.tsx\nalert-dialog.tsx\nalert.tsx\naspect-ratio.tsx\navatar.tsx\nbadge.tsx\nbreadcrumb.tsx\nbutton.tsx\ncalendar.tsx\ncard.tsx\ncarousel.tsx\nchart.tsx\ncheckbox.tsx\ncollapsible.tsx\ncommand.tsx\ncontext-menu.tsx\ndialog.tsx\ndrawer.tsx\ndropdown-menu.tsx\nform.tsx\nhover-card.tsx\ninput-otp.tsx\ninput.tsx\nlabel.tsx\nmenubar.tsx\nnavigation-menu.tsx\npagination.tsx\npopover.tsx\nprogress.tsx\nradio-group.tsx\nresizable.tsx\nscroll-area.tsx\nselect.tsx\nseparator.tsx\nsheet.tsx\nsidebar.tsx\nskeleton.tsx\nslider.tsx\nsonner.tsx\nswitch.tsx\ntable.tsx\ntabs.tsx\ntextarea.tsx\ntoast.tsx\ntoggle-group.tsx\ntoggle.tsx\ntooltip.tsx\n```\n\nUsage Example:\n```tsx file=\"example.tsx\"\n        import { Button } from '@/components/ui/button'\n        import { CardContent, Card } from '@/components/ui/card'\n        import { MousePointerClickIcon } from 'lucide-react';\n        // custom hook for example ignore\n        import { useStopwatch } from '../hooks/useStopwatch'\n\n        export function Stopwatch({ initialTime = 0 }) {\n        const { time, isRunning, start, pause, reset } = useStopwatch(initialTime);\n\n        return (\n          <Card className=\"w-full max-w-md\">\n            <CardContent className=\"flex flex-col items-center justify-center gap-4 p-4\">\n              <div \n                className=\"text-6xl font-bold tabular-nums\" \n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n              >\n                {time}\n              </div>\n              <div className=\"flex gap-4\">\n                <Button \n                  onClick={isRunning ? pause : start}\n                  aria-pressed={isRunning}\n                >\n                  <MousePointerClickIcon className=\"text-yellow-400 size-4\" />\n                  {isRunning ? 'Pause' : 'Start'}\n                </Button>\n                <Button \n                  onClick={reset}\n                  disabled={time === 0 && !isRunning}\n                >\n                  Reset\n                </Button>\n              </div>\n            </CardContent>\n          </Card>\n        )\n        }\n```\n\nThe backend routes (worker logic) are defined in the `worker/index.ts` file. For any server-side processing, define appropriate routes, types and controllers in the worker, **BUT BE CAREFUL** You can easily break everything so make sure you follow the **exact** pattern in the worker file to add any new routes"
     }
   },
+  {
+    "name": "vite-cf-DO-KV-runner",
+    "language": "typescript",
+    "frameworks": [
+      "@dnd-kit",
+      "@hookform/resolvers",
+      "autoprefixer",
+      "class-variance-authority",
+      "cloudflare",
+      "clsx",
+      "cmdk",
+      "date-fns",
+      "framer-motion",
+      "hono",
+      "immer",
+      "input-otp",
+      "next",
+      "postcss",
+      "react",
+      "recharts",
+      "sonner",
+      "tailwind",
+      "tw-animate-css",
+      "typescript",
+      "vaul",
+      "vite",
+      "zod",
+      "zustand"
+    ],
+    "description": {
+      "selection": "[DEPRECATED]\n# THIS TEMPLATE IS DEPRECATED. PLEASE DO NOT USE IT. THIS IS ONLY MEANT FOR BACKWARD COMPATIBILITY WITH OLDER APPS",
+      "usage": "# AI Development Guidelines\n\n## Architecture Overview\nThis is a **Cloudflare Workers** template with React frontend, demonstrating:\n- **Frontend**: React Router 6 with TypeScript and ShadCN UI\n- **Backend**: Hono-based Worker with Durable Objects + KV storage\n- **Shared Types**: Type-safe APIs with mock data fallback system\n\n## ⚠️ IMPORTANT: Demo Content\n**The existing demo pages, mock data, and API endpoints are FOR TEMPLATE UNDERSTANDING ONLY.**\n- Replace `HomePage.tsx` and `DemoPage.tsx` with actual application pages\n- Remove or replace mock data in `shared/mock-data.ts` with real data structures\n- Remove or replace demo API endpoints (`/api/demo`, `/api/seed`) and implement actual business logic\n- The counter example is just to show DO patterns - replace with real functionality\n\n## Tech Stack\n- React Router 6 for client-side routing\n- ShadCN UI (v2.3.0) built on Radix UI primitives\n- Tailwind CSS for styling\n- Lucide Icons for iconography\n- Hono framework for Workers API\n- TypeScript with shared interfaces\n\n## Development Restrictions\n- **Tailwind Colors**: Hardcode custom colors in `tailwind.config.js`, NOT in `index.css`\n- **Components**: Use existing ShadCN components instead of writing custom ones\n- **Icons**: Import from `lucide-react` directly\n- **Error Handling**: ErrorBoundary components are pre-implemented\n- **Worker Patterns**: Follow exact patterns in `worker/index.ts` to avoid breaking functionality\n\n## Styling Guidelines\n- Generate **fully responsive** and accessible layouts\n- Use ShadCN preinstalled components when available\n- Use Tailwind's spacing, layout, and typography utilities\n- Integrate `framer-motion` for animations with Tailwind classes\n\nComponents available:\n```sh\n$ ls -1 src/components/ui\naccordion.tsx\nalert-dialog.tsx\nalert.tsx\naspect-ratio.tsx\navatar.tsx\nbadge.tsx\nbreadcrumb.tsx\nbutton.tsx\ncalendar.tsx\ncard.tsx\ncarousel.tsx\nchart.tsx\ncheckbox.tsx\ncollapsible.tsx\ncommand.tsx\ncontext-menu.tsx\ndialog.tsx\ndrawer.tsx\ndropdown-menu.tsx\nform.tsx\nhover-card.tsx\ninput-otp.tsx\ninput.tsx\nlabel.tsx\nmenubar.tsx\nnavigation-menu.tsx\npagination.tsx\npopover.tsx\nprogress.tsx\nradio-group.tsx\nresizable.tsx\nscroll-area.tsx\nselect.tsx\nseparator.tsx\nsheet.tsx\nsidebar.tsx\nskeleton.tsx\nslider.tsx\nsonner.tsx\nswitch.tsx\ntable.tsx\ntabs.tsx\ntextarea.tsx\ntoast.tsx\ntoggle-group.tsx\ntoggle.tsx\ntooltip.tsx\n```\n\n## Code Organization\n\n### Frontend Structurew\n- `src/pages/HomePage.tsx` - Homepage for user to see while you are working on the app\n- `src/pages/DemoPage.tsx` - Main demo showcasing KV + DO features\n- `src/components/ThemeToggle.tsx` - Theme switching component\n- `src/hooks/useTheme.ts` - Theme management hook\n\n### Backend Structure  \n- `worker/index.ts` - Main Worker entry point (**DO NOT MODIFY core patterns**)\n- `worker/userRoutes.ts` - Add new API routes here following existing patterns\n- `worker/durableObject.ts` - DO implementation (counter with increment/decrement)\n- `worker/core-utils.ts` - Core types and utilities (**DO NOT MODIFY**)\n\n### Shared Code\n- `shared/types.ts` - TypeScript interfaces for API responses and data models\n- `shared/mock-data.ts` - **DEMO ONLY** - Replace with real data structures\n- `shared/seed-utils.ts` - **DEMO ONLY** - Remove when implementing real data sources\n\n## API Patterns\n\n### Adding New Endpoints\nFollow this exact pattern in `worker/userRoutes.ts`:\n```typescript\n// KV endpoint with mock fallback\napp.get('/api/my-data', async (c) => {\n  const items = await c.env.KVStore.get('my_key');\n  const data: MyType[] = items ? JSON.parse(items) : MOCK_FALLBACK;\n  return c.json({ success: true, data } satisfies ApiResponse<MyType[]>);\n});\n\n// Durable Object endpoint\napp.post('/api/counter/action', async (c) => {\n  const stub = c.env.GlobalDurableObject.get(c.env.GlobalDurableObject.idFromName(\"global\"));\n  const data = await stub.myMethod() as number;\n  return c.json({ success: true, data } satisfies ApiResponse<number>);\n});\n```\n\n### Type Safety Requirements\n- All API responses must use `ApiResponse<T>` interface\n- Share types between frontend and backend via `shared/types.ts`\n- Mock data must match TypeScript interfaces exactly\n\n## Available Bindings\n**CRITICAL**: Only use these Cloudflare bindings:\n- `GlobalDurableObject` - Durable object for stateful operations\n- `KVStore` - KV namespace for data persistence\n\n## Frontend Integration\n- Use direct `fetch()` calls to `/api/*` endpoints\n- Handle loading states and errors appropriately  \n- Leverage shared types for type-safe API responses\n- Components should be responsive and use ShadCN UI patterns"
+    }
+  },
   {
     "name": "vite-cf-DO-runner",
     "language": "typescript",

vite-cf-DO-KV-runner/src/components/ui/sonner.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { Toaster as Sonner, toast } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
@@ -28,4 +28,4 @@ const Toaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { Toaster }
+export { Toaster, toast }

vite-cf-DO-runner/src/components/ui/sonner.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { Toaster as Sonner, toast } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
@@ -28,4 +28,4 @@ const Toaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { Toaster }
+export { Toaster, toast }

vite-cfagents-runner/src/components/ui/sonner.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { Toaster as Sonner, toast } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
@@ -28,4 +28,4 @@ const Toaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { Toaster }
+export { Toaster, toast }