feat(sonner): add sonner component (#301)

Author: xiaoluoboding

apps/www/.vitepress/theme/config/docs.ts

@@ -299,6 +299,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/slider',
           items: [],
         },
+        {
+          title: 'Sonner',
+          href: '/docs/components/sonner',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Switch',
           href: '/docs/components/switch',

apps/www/.vitepress/theme/layout/DocsLayout.vue

@@ -6,6 +6,7 @@ import EditLink from '../components/EditLink.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { Badge } from '@/lib/registry/default/ui/badge'
 import RadixIconsCode from '~icons/radix-icons/code'
+import RadixIconsExternalLink from '~icons/radix-icons/external-link'
 import ChevronRightIcon from '~icons/lucide/chevron-right'
 
 const $route = useRoute()
@@ -81,6 +82,10 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
           </div>
 
           <div class="flex items-center space-x-2 pt-4">
+            <a v-if="frontmatter.docs" :href="frontmatter.docs" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
+              <RadixIconsExternalLink class="mr-1" />
+              Docs
+            </a>
             <a v-if="frontmatter.source" :href="sourceLink + frontmatter.source" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
               <RadixIconsCode class="mr-1" />
               Component Source

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -17,6 +17,7 @@ import RadixIconsSun from '~icons/radix-icons/sun'
 import { useConfigStore } from '@/stores/config'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
 import { Toaster as DefaultToaster } from '@/lib/registry/default/ui/toast'
+import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
 import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
 
 import File from '~icons/radix-icons/file'
@@ -287,6 +288,7 @@ watch(() => $route.path, (n) => {
       </DialogContent>
     </Dialog>
     <DefaultToaster />
+    <NewYorkSonner :theme="isDark ? 'dark' : 'light'" />
     <NewYorkToaster />
   </div>
 </template>

apps/www/__registry__/index.ts

@@ -576,6 +576,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/SliderDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/SliderDemo.vue'],
     },
+    SonnerDemo: {
+      name: 'SonnerDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/SonnerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SonnerDemo.vue'],
+    },
     SwitchDemo: {
       name: 'SwitchDemo',
       type: 'components:example',
@@ -1467,6 +1474,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/SliderDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/SliderDemo.vue'],
     },
+    SonnerDemo: {
+      name: 'SonnerDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/SonnerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SonnerDemo.vue'],
+    },
     SwitchDemo: {
       name: 'SwitchDemo',
       type: 'components:example',

apps/www/package.json

@@ -37,6 +37,7 @@
     "v-calendar": "^3.1.2",
     "vee-validate": "4.12.4",
     "vue": "^3.4.15",
+    "vue-sonner": "^1.0.2",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.4"
   },

apps/www/src/content/docs/components/sonner.md

@@ -0,0 +1,63 @@
+---
+title: Sonner
+description: An opinionated toast component for Vue.
+docs: https://vue-sonner.vercel.app
+source: apps/www/src/lib/registry/default/ui/sonner 
+---
+
+<ComponentPreview name="SonnerDemo" />
+
+## About
+
+The Sonner component is provided by [vue-sonner](https://vue-sonner.vercel.app/), which is a Vue port of Sonner, originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React.
+
+## Installation
+
+<Steps>
+
+### Run the following command
+
+```bash
+npx shadcn-vue@latest add sonner
+```
+
+### Add the Toaster component
+
+Add the following `Toaster` component to your `App.vue` file:
+
+```vue title="App.vue" {2,6}
+<script setup lang="ts">
+import { Toaster } from '@/components/ui/sonner'
+</script>
+
+<template>
+  <Toaster />
+</template>
+```
+  
+</Steps>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { Button } from '@/components/ui/button'
+</script>
+
+<template>
+  <Button
+    variant="outline" @click="() => {
+      toast('Event has been created', {
+        description: 'Sunday, December 03, 2023 at 9:00 AM',
+        action: {
+          label: 'Undo',
+          onClick: () => console.log('Undo'),
+        },
+      })
+    }"
+  >
+    Add to calander
+  </Button>
+</template>
+```

apps/www/src/lib/registry/default/example/SonnerDemo.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button
+    variant="outline" @click="() => {
+      toast('Event has been created', {
+        description: 'Sunday, December 03, 2023 at 9:00 AM',
+        action: {
+          label: 'Undo',
+          onClick: () => console.log('Undo'),
+        },
+      })
+    }"
+  >
+    Add to calander
+  </Button>
+</template>

apps/www/src/lib/registry/default/ui/sonner/Sonner.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { Toaster as Sonner, type ToasterProps } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    :class-names="{
+      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',
+      cancelButton:
+        'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+    }"
+    v-bind="props"
+  />
+</template>

apps/www/src/lib/registry/default/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'

apps/www/src/lib/registry/new-york/example/SonnerDemo.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button
+    variant="outline" @click="() => {
+      toast('Event has been created', {
+        description: 'Sunday, December 03, 2023 at 9:00 AM',
+        action: {
+          label: 'Undo',
+          onClick: () => console.log('Undo'),
+        },
+      })
+    }"
+  >
+    Add to calander
+  </Button>
+</template>