qwikifiers · ditadi · Mar 25, 2024 · Mar 25, 2024 · Mar 26, 2024
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -1,5 +1,8 @@
 {
   "name": "@qwik-ui/website",
   "description": "The Qwik UI Website",
-  "private": true
+  "private": true,
+  "dependencies": {
+    "qwik-sonner": "0.2.2"
+  }
 }
diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
@@ -27,6 +27,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     RadioGroup: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,
     Skeleton: ComponentStatus.Beta,
+    Toast: ComponentStatus.Draft,
     Tabs: ComponentStatus.Beta,
     Textarea: ComponentStatus.Draft,
   },

diff --git a/apps/website/src/routes/docs/styled/menu.md b/apps/website/src/routes/docs/styled/menu.md
@@ -28,5 +28,6 @@
 - [RadioGroup](/docs/styled/radio-group)
 - [Separator](/docs/styled/separator)
 - [Skeleton](/docs/styled/skeleton)
+- [Toast](/docs/styled/toast)
 - [Tabs](/docs/styled/tabs)
 - [Textarea](/docs/styled/textarea)
diff --git a/apps/website/src/routes/docs/styled/toast/ToastContainer.tsx b/apps/website/src/routes/docs/styled/toast/ToastContainer.tsx
diff --git a/apps/website/src/routes/docs/styled/toast/examples/hero.tsx b/apps/website/src/routes/docs/styled/toast/examples/hero.tsx
@@ -0,0 +1,25 @@
+import { toast } from 'qwik-sonner';
+import { component$, $ } from '@builder.io/qwik';
+import { Button } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return (
+    <div>
+      <Button
+        onClick$={() => {
+          toast('Event has been created', {
+            description: 'Sunday, December 03, 2023 at 9:00 AM',
+            action: {
+              label: 'Undo',
+              onClick: $(() => {
+                toast('Event has been deleted');
+              }),
+            },
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </div>
+  );
+});
diff --git a/apps/website/src/routes/docs/styled/toast/index.mdx b/apps/website/src/routes/docs/styled/toast/index.mdx
@@ -4,9 +4,63 @@ title: Qwik UI | Styled Toast Component
 
 import { statusByComponent } from '~/_state/component-statuses';
 
+<StatusBanner status={statusByComponent.styled.Toast} />
+
 # Toast
 
-Nothing like a smell of breakfast in the morning. That's why we like the Qwik UI Styled toast component.
-It will make your app look delicious while keeping your users informed, like on what they can have for desert! nom nom nom...
+A succinct message that is displayed temporarily.
 
-<StatusBanner status={statusByComponent.styled.Toast} />
+<Showcase name="hero" />
+
+## Installation
+
+### Run the following cli command or copy/paste the component code into your project
+
+```sh
+qwik-ui add toast
+```
+
+### Add the Toaster component
+
+src/root.tsx
+
+```tsx
+import { Toaster } from './components/ui/toast/toast';
+
+import { component$ } from '@builder.io/qwik';
+import {
+  QwikCityProvider,
+  RouterOutlet,
+  ServiceWorkerRegister,
+} from '@builder.io/qwik-city';
+import { RouterHead } from './components/router-head/router-head';
+
+import './global.css';
+
+export default component$(() => {
+  return (
+    <QwikCityProvider>
+      <head>
+        <meta charSet="utf-8" />
+        <link rel="manifest" href="/manifest.json" />
+        <RouterHead />
+      </head>
+      <body lang="en">
+        <RouterOutlet />
+        <ServiceWorkerRegister />
+        <Toaster /> /* Add the Toaster Component /*
+      </body>
+    </QwikCityProvider>
+  );
+});
+```
+
+## Usage
+
+```tsx
+import { toast } from 'qwik-sonner';
+```
+
+```tsx
+toast('Event has been created.');
+```
diff --git a/apps/website/src/routes/layout.tsx b/apps/website/src/routes/layout.tsx
@@ -12,7 +12,7 @@ import docsStyles from './docs.css?inline';
 import { MDXProvider } from '~/_state/MDXProvider';
 import { components } from '~/components/mdx-components';
 import { DashboardTableOfContents } from '~/components/toc/toc';
-import { ScrollArea } from '@qwik-ui/styled';
+import { ScrollArea, Toaster } from '@qwik-ui/styled';
 
 export default component$(() => {
   const { headings } = useContent();
@@ -46,6 +46,7 @@ export default component$(() => {
           </div>
         </div>
       </MDXProvider>
+      <Toaster />
       <footer></footer>
     </>
   );

diff --git a/package.json b/package.json
@@ -178,6 +178,7 @@
     "prettier-plugin-tailwindcss": "0.4.1",
     "pretty-quick": "^3.1.3",
     "qwik-nx": "^1.0.8",
+    "qwik-sonner": "0.2.2",
     "qwik-themes": "^0.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/kit-styled/components-registry.json b/packages/kit-styled/components-registry.json
@@ -91,6 +91,12 @@
       "componentFolder": "skeleton",
       "files": ["skeleton.tsx"]
     },
+    {
+      "displayName": "Toast",
+      "type": "toast",
+      "componentFolder": "toast",
+      "files": ["toast.tsx"]
+    },
     {
       "displayName": "Tabs",
       "type": "tabs",

diff --git a/packages/kit-styled/package.json b/packages/kit-styled/package.json
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@qwik-ui/headless": "0.3.3",
-    "@qwik-ui/utils": "0.2.1"
+    "@qwik-ui/utils": "0.2.1",
+    "qwik-sonner": "0.2.2"
   }
 }
diff --git a/packages/kit-styled/src/components/toast/toast.tsx b/packages/kit-styled/src/components/toast/toast.tsx
@@ -0,0 +1,23 @@
+import { component$ } from '@builder.io/qwik';
+import { Toaster as Sonner } from 'qwik-sonner';
+
+type ToasterProps = typeof Sonner;
+export const Toaster = component$<ToasterProps>(({ ...props }) => {
+  return (
+    <Sonner
+      class="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-[.toast]:shadow',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:shadow',
+        },
+      }}
+      {...props}
+    />
+  );
+});
diff --git a/packages/kit-styled/src/index.ts b/packages/kit-styled/src/index.ts
@@ -13,6 +13,7 @@ export * from './components/popover/popover';
 export * from './components/radio-group/radio-group';
 export * from './components/separator/separator';
 export * from './components/skeleton/skeleton';
+export * from './components/toast/toast';
 export * from './components/tabs/tabs';
 export * from './components/textarea/textarea';
 export * from './components/toggle/toggle';