#6: no more sonner. Custom toasts and fixed linting issues.

Author: ackzell

package.json

@@ -36,8 +36,7 @@
     "tw-animate-css": "^1.3.7",
     "v-code-diff": "^1.13.1",
     "vaul-vue": "^0.4.1",
-    "vue": "^3.5.18",
-    "vue-sonner": "^2.0.8"
+    "vue": "^3.5.18"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^5.2.1",

pnpm-lock.yaml

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import YVHeader from '@/components/YvHeader.vue';
-
 import YvToasts from './components/toasts/YvToasts.vue';
 // import Drawer from './components/ui/drawer/Drawer.vue';
 import YvFooter from './components/YvFooter.vue';

src/App.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { ref, watchEffect } from 'vue';
-import { toast, useVueSonner } from 'vue-sonner';
+import { useToastsStore } from './useToastsStore';
 
-const { activeToasts } = useVueSonner();
+const { activeToasts, toast } = useToastsStore();
 
 // Store timeout data for each toast
-const toastTimers = ref(new Map<string | number, {
+const toastTimers = ref(new Map<string, {
   timeoutId: number;
   remainingTime: number;
   startTime: number;
@@ -41,7 +41,7 @@ function getToastClasses(type: string) {
   return classes[type as keyof typeof classes] || classes.info;
 }
 
-function handleToastClick(toastId: string | number) {
+function handleToastClick(toastId: string) {
   const timer = toastTimers.value.get(toastId);
   if (timer) {
     timer.stop();
@@ -50,7 +50,7 @@ function handleToastClick(toastId: string | number) {
   toast.dismiss(toastId);
 }
 
-function createAutoDissmiss(toastId: string | number, type: string, duration?: number) {
+function createAutoDissmiss(toastId: string, type: string, duration?: number) {
   // Check if toast should auto-dismiss
   const shouldAutoDismiss = duration !== Infinity && duration !== 0;
   if (!shouldAutoDismiss)
@@ -80,7 +80,7 @@ function createAutoDissmiss(toastId: string | number, type: string, duration?: n
   return timer;
 }
 
-function pauseAutoDissmiss(toastId: string | number) {
+function pauseAutoDissmiss(toastId: string) {
   const timer = toastTimers.value.get(toastId);
   if (timer) {
     // Clear the current timeout
@@ -94,7 +94,7 @@ function pauseAutoDissmiss(toastId: string | number) {
   }
 }
 
-function resumeAutoDissmiss(toastId: string | number) {
+function resumeAutoDissmiss(toastId: string) {
   const timer = toastTimers.value.get(toastId);
   if (timer && timer.remainingTime > 0) {
     // Create new timeout with remaining time
@@ -115,10 +115,10 @@ function resumeAutoDissmiss(toastId: string | number) {
 
 // Watch for changes in active toasts and manage timers
 watchEffect(() => {
-  const activeToastIds = new Set(activeToasts.value.map(t => t.id));
+  const activeToastIds = new Set(activeToasts.map(t => t.id));
 
   // Set up timers for new toasts
-  activeToasts.value.forEach((activeToast) => {
+  activeToasts.forEach((activeToast) => {
     if (!toastTimers.value.has(activeToast.id)) {
       createAutoDissmiss(
         activeToast.id,

src/components/toasts/YvToasts.vue

@@ -0,0 +1,78 @@
+import type { Ref } from 'vue';
+
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+type ToastsStore = {
+  activeToasts: Ref<Toast[]>;
+
+  toast: {
+    success: (title: string, toast?: Omit<Partial<Toast>, 'id'>) => string;
+    error: (title: string, toast?: Omit<Partial<Toast>, 'id'>) => string;
+    warning: (title: string, toast?: Omit<Partial<Toast>, 'id'>) => string;
+    info: (title: string, toast?: Omit<Partial<Toast>, 'id'>) => string;
+
+    dismiss: (id: string) => void;
+  };
+};
+
+type Toast = {
+  id: string;
+  type: ToastType;
+  title: string;
+  description: string;
+  duration?: number;
+};
+
+const defaultToast: Omit<Toast, 'id'> = {
+  type: 'info',
+  title: '',
+  description: '',
+  duration: 4000,
+};
+
+export const useToastsStore = defineStore<'toastStore', ToastsStore>('toastStore', (): ToastsStore => {
+  const activeToasts = ref<Toast[]>([]);
+
+  function addToast(toast: Omit<Partial<Toast>, 'id'>): string {
+    const id = crypto.randomUUID().slice(0, 8);
+    activeToasts.value.push({ id, ...defaultToast, ...toast });
+    return id;
+  };
+
+  function dismiss(id: string): void {
+    const index = activeToasts.value.findIndex(t => t.id === id);
+    if (index > -1)
+      activeToasts.value.splice(index, 1);
+  };
+
+  function success(title: string, toast?: Omit<Partial<Toast>, 'id'>): string {
+    return addToast({ ...toast, title, type: 'success' });
+  };
+
+  function error(title: string, toast?: Omit<Partial<Toast>, 'id'>): string {
+    return addToast({ ...toast, title, type: 'error' });
+  };
+
+  function info(title: string, toast?: Omit<Partial<Toast>, 'id'>): string {
+    return addToast({ ...toast, title, type: 'info' });
+  };
+
+  function warning(title: string, toast?: Omit<Partial<Toast>, 'id'>): string {
+    return addToast({ ...toast, title, type: 'warning' });
+  };
+
+  return {
+    activeToasts,
+
+    toast: {
+      success,
+      error,
+      info,
+      warning,
+      dismiss,
+    },
+  };
+});

src/components/toasts/useToastsStore.ts

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "."
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '.';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '.';
 
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}
+type Props = {
+  variant?: ButtonVariants['variant'];
+  size?: ButtonVariants['size'];
+  class?: HTMLAttributes['class'];
+} & PrimitiveProps;
 
 const props = withDefaults(defineProps<Props>(), {
-  as: "button",
-})
+  as: 'button',
+});
 </script>
 
 <template>

src/components/ui/button/Button.vue

@@ -1,37 +1,37 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 
-export { default as Button } from "./Button.vue"
+export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   },
-)
+);
 
-export type ButtonVariants = VariantProps<typeof buttonVariants>
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

src/components/ui/button/index.ts

@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes["class"]
-}>()
+  defaultValue?: string | number;
+  modelValue?: string | number;
+  class?: HTMLAttributes['class'];
+}>();
 
 const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
-}>()
+  (e: 'update:modelValue', payload: string | number): void;
+}>();
 
-const modelValue = useVModel(props, "modelValue", emits, {
+const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
   defaultValue: props.defaultValue,
-})
+});
 </script>
 
 <template>

src/components/ui/input/Input.vue

@@ -1 +1 @@
-export { default as Input } from "./Input.vue"
+export { default as Input } from './Input.vue';

src/components/ui/input/index.ts

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+import { cn } from '@/lib/utils';
 
 const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes["class"] }
+  SeparatorProps & { class?: HTMLAttributes['class'] }
 >(), {
-  orientation: "horizontal",
+  orientation: 'horizontal',
   decorative: true,
-})
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>