Merge pull request #5 from pheralb/next

v0.2.3 🚀

.github/workflows/check.yml

@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - main
+      - next
   pull_request:
     branches:
       - main
+      - next
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -29,20 +31,6 @@ jobs:
           version: 8
           run_install: false
 
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
       - name: Install dependencies
         run: pnpm install
 
@@ -67,20 +55,6 @@ jobs:
           version: 8
           run_install: false
 
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
       - name: Install dependencies
         run: pnpm install
 

docs/src/components/examples/toast.tsx

@@ -4,7 +4,13 @@ import type { ToastVariant as Variant } from '@pheralb/toast';
 import { toast } from '@pheralb/toast';
 import { useRef, useState } from 'react';
 import JSConfetti from 'js-confetti';
-import { CheckCheckIcon, CopyIcon, PartyPopperIcon } from 'lucide-react';
+import {
+  CheckCheckIcon,
+  CircleAlertIcon,
+  CircleCheckIcon,
+  CopyIcon,
+  PartyPopperIcon,
+} from 'lucide-react';
 
 import { Button } from '@/ui/button';
 import { CopyCodeBtnStyles } from '@/ui/copyCodeBtn';
@@ -75,10 +81,12 @@ const ToastVariantExamples = () => {
 
   const handleChangeVariant = (variant: Variant) => {
     setToastVariant(variant);
-    toast[variant as keyof typeof toast]({
-      text: `A ${variant} toast 🚀`,
-      description: '✨ @pheralb/toast',
-    });
+    if (variant !== 'loading') {
+      toast[variant]({
+        text: `A ${variant} toast 🚀`,
+        description: '✨ @pheralb/toast',
+      });
+    }
   };
 
   const handleDefault = () => {
@@ -149,4 +157,79 @@ const ToastActionsExamples = () => {
   );
 };
 
-export { ToastVariantExamples, ToastActionsExamples };
+const ToastLoadingExample = () => {
+  const runFunction = async () => {
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true);
+      }, 2000);
+    });
+  };
+
+  const runErrorFunction = async () => {
+    await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        reject(new Error('Test error'));
+      }, 2000);
+    });
+  };
+
+  const handleToastLoading = (success: boolean) => {
+    if (success) {
+      toast.loading({
+        text: 'Loading',
+        options: {
+          promise: runFunction,
+          success: 'Ready',
+          error: 'Error',
+          autoDismiss: true,
+          onSuccess: () => {
+            console.log('Success');
+          },
+          onError: () => {
+            console.log('Error');
+          },
+        },
+      });
+    } else {
+      toast.loading({
+        text: 'Loading',
+        options: {
+          promise: runErrorFunction,
+          success: 'Ready',
+          error: 'Error',
+          autoDismiss: true,
+          onSuccess: () => {
+            console.log('Success');
+          },
+          onError: () => {
+            console.log('Error');
+          },
+        },
+      });
+    }
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Button
+        className="mb-2"
+        variant="outline"
+        onClick={() => handleToastLoading(true)}
+      >
+        <CircleCheckIcon size={16} />
+        <span>Show a Loading Toast (Success)</span>
+      </Button>
+      <Button
+        className="mb-2"
+        variant="outline"
+        onClick={() => handleToastLoading(false)}
+      >
+        <CircleAlertIcon size={16} />
+        <span>Show a Loading Toast (Error)</span>
+      </Button>
+    </div>
+  );
+};
+
+export { ToastVariantExamples, ToastActionsExamples, ToastLoadingExample };

docs/src/components/header.astro

@@ -19,6 +19,7 @@ import { ModeToggle } from '@/components/theme/modeToggle';
       <MobileMenu client:load />
       <a
         href="/"
+        title="pheralb/toast"
         class="group flex items-center space-x-3 font-medium tracking-tight transition-opacity duration-75 hover:opacity-80"
       >
         <Logo width={22} className="group-hover:animate-pulse" />
@@ -32,7 +33,9 @@ import { ModeToggle } from '@/components/theme/modeToggle';
         SocialLinks.map((link) =>
           link.routes.map((route) => (
             <a
+              title={route.title}
               href={route.path}
+              target="_blank"
               class={buttonVariants({
                 variant: 'ghost',
                 size: 'icon',

docs/src/components/theme/modeToggle.tsx

@@ -50,7 +50,7 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" title="Toggle theme">
           {theme === 'dark' ? (
             <Sun size={20} strokeWidth={1.5} />
           ) : (

docs/src/content/docs/toast.mdx

@@ -7,6 +7,7 @@ category: 'API'
 import {
   ToastVariantExamples,
   ToastActionsExamples,
+  ToastLoadingExample,
 } from '../../components/examples/toast';
 
 > 💡 Make sure you add the [`<Toaster />`](/toaster) provider to your app first.
@@ -39,6 +40,65 @@ toast.default({
 });
 ```
 
+- `toast.loading`: Show a toast with loading state and will update automatically after the promise resolves or fails:
+
+<ToastLoadingExample client:only="react" />
+
+```tsx
+toast.loading({
+  // Initial message:
+  text: 'Loading',
+  options: {
+    promise: yourFunction(),
+    success: 'Ready',
+    error: 'Error',
+    // Close toast automatically (the duration depends by delayDuration property):
+    autoDismiss: true,
+    // Optional:
+    onSuccess: () => {
+      console.log('Success');
+    },
+    // Optional:
+    onError: () => {
+      console.log('Error');
+    },
+  },
+});
+```
+
+> ✨ For example, you can use [Next.js Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) to show a loading toast while fetching data from an API:
+
+```tsx
+// 📃 actions/testAction.ts
+'use server';
+
+export const testAction = async (name: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return {
+    name: `Hello, ${name}!`,
+  };
+};
+
+// 📃 components/Example.tsx
+
+import { testAction } from '@/actions/testAction';
+import { toast } from '@pheralb/toast';
+
+toast.loading({
+  text: 'Getting data',
+  options: {
+    promise: testAction(),
+    success: 'Ready',
+    error: 'Error',
+    autoDismiss: false,
+    onSuccess: (data) => {
+      console.log(`Success: ${data.name}`);
+      // Success: Hello, pheralb!
+    },
+  },
+});
+```
+
 ## API Reference
 
 The `toast.variant` function accepts the following options:

examples/nextjs/src/actions/testAction.ts

@@ -0,0 +1,16 @@
+'use server';
+
+export const testAction = async (name: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return {
+    data: `Hello, ${name}!`,
+  };
+};
+
+export const testErrorAction = async () => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      reject(new Error('Test error'));
+    }, 1000);
+  });
+};

examples/nextjs/src/app/layout.tsx

@@ -18,8 +18,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={inter.className}>
-      <body className="bg-white text-black dark:bg-neutral-900 dark:text-white">
+    <html lang="en">
+      <body
+        className={`${inter.className} bg-white text-black dark:bg-neutral-900 dark:text-white`}
+      >
         <ThemeProvider
           attribute="class"
           defaultTheme="system"