Add JSDoc documentation for useSonner hook #338

coderabbitai · 2025-01-14T05:07:18Z

Overview

Document the new useSonner hook to improve code maintainability and developer experience.

Requirements

Add JSDoc documentation for:
- useSonner hook
- customSonnerProps type
- customSonner function and its parameters
Include usage examples:
- Success notifications
- Error notifications
- Info notifications
- Custom configurations
Add component integration examples showing:
- Basic usage
- Error handling patterns
- Best practices

Related PR

#334

/cc @AndlerRL

The text was updated successfully, but these errors were encountered:

AndlerRL · 2025-01-14T05:09:11Z

@coderabbitai please elaborate the initial documentation for the new hook. Include the examples as a markdown inside of the apps/masterbots.ai folder.

coderabbitai · 2025-01-14T05:10:44Z

Tip

For best results, initiate chat on the files or code changes.

@AndlerRL I've prepared the documentation for the useSonner hook. Here's how we can proceed:

Create a new file at apps/masterbots.ai/docs/useSonner.md with the following content:

# useSonner Hook Documentation

A custom React hook for displaying toast notifications with consistent styling and icons.

## Installation

```bash
pnpm add sonner

Basic Usage

import { useSonner } from "@/lib/hooks/useSonner";

function MyComponent() {
  const { customSonner } = useSonner();

  const handleSuccess = () => {
    customSonner({ 
      type: "success", 
      text: "Operation completed successfully" 
    });
  };
}

API Reference

`customSonnerProps`

type customSonnerProps = {
  type?: "success" | "error" | "info";
  text?: string | null;
}

Notification Types

Success
- Green border (#83E56A)
- Check icon
- Default message: "Changes have been applied successfully"
Error
- Red border (#F93333)
- Alert triangle icon
- Default message: "Failed to update the information. Please try again"
Info
- Blue border (#388DE2)
- Info icon
- Default message: "Your changes has been applied 5 minutes ago"

Examples

Error Handling

function UserProfile() {
  const { customSonner } = useSonner();

  const updateProfile = async () => {
    try {
      await saveProfile();
      customSonner({ 
        type: "success", 
        text: "Profile updated successfully" 
      });
    } catch (error) {
      customSonner({ 
        type: "error", 
        text: "Failed to update profile" 
      });
    }
  };
}

Information Updates

function AutoSave() {
  const { customSonner } = useSonner();

  useEffect(() => {
    const interval = setInterval(() => {
      saveData();
      customSonner({ 
        type: "info", 
        text: "Draft saved automatically" 
      });
    }, 5000);

    return () => clearInterval(interval);
  }, []);
}

Best Practices

Clear Messages: Provide concise, actionable messages
Appropriate Types: Use the right notification type for the context
Error Details: Include helpful error messages that guide users
Timing: Use appropriate duration for different types of notifications

Component Integration

To use the notifications in your app, add the Toaster component to your layout:

import { Toaster } from "@/components/ui/sonner";

export default function RootLayout() {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}


Would you like me to add any additional sections or examples to the documentation?



<details>
<summary>🔗 Analysis chain</summary>





---





---





---





---





---



@AndlerRL Here's the documentation for the `useSonner` hook. I'll create it in the `apps/masterbots.ai` folder:


bash
pnpm add sonner

Basic Usage

import { useSonner } from '@/lib/hooks/useSonner';

function MyComponent() {
  const { customSonner } = useSonner();

  const handleSuccess = () => {
    customSonner({ 
      type: 'success', 
      text: 'Operation completed successfully' 
    });
  };

  const handleError = () => {
    customSonner({ 
      type: 'error', 
      text: 'Something went wrong' 
    });
  };

  const handleInfo = () => {
    customSonner({ 
      type: 'info', 
      text: 'Your changes have been saved' 
    });
  };

  return (
    // Your component JSX
  );
}

API Reference

`useSonner` Hook

Returns an object containing the customSonner function.

`customSonner` Function

Parameters

type customSonnerProps = {
  type?: 'success' | 'error' | 'info';
  text?: string | null;
}

type (optional): The type of notification. Defaults to 'success'
text (optional): The message to display. Each type has a default message if not provided

Notification Types

Success
- Green border
- Check icon
- Default message: "Changes have been applied successfully"
Error
- Red border
- Alert triangle icon
- Default message: "Failed to update the information. Please try again"
Info
- Blue border
- Info icon
- Default message: "Your changes has been applied 5 minutes ago"

Integration Examples

Error Handling

import { useSonner } from '@/lib/hooks/useSonner';

function UserProfile() {
  const { customSonner } = useSonner();

  const updateProfile = async () => {
    try {
      await saveProfile();
      customSonner({ 
        type: 'success', 
        text: 'Profile updated successfully' 
      });
    } catch (error) {
      customSonner({ 
        type: 'error', 
        text: 'Failed to update profile' 
      });
    }
  };
}

Form Submission

import { useSonner } from '@/lib/hooks/useSonner';

function ContactForm() {
  const { customSonner } = useSonner();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    try {
      await submitForm();
      customSonner({ 
        type: 'success', 
        text: 'Message sent successfully' 
      });
      resetForm();
    } catch (error) {
      customSonner({ 
        type: 'error', 
        text: 'Failed to send message' 
      });
    }
  };
}

Information Updates

import { useSonner } from '@/lib/hooks/useSonner';

function AutoSave() {
  const { customSonner } = useSonner();

  useEffect(() => {
    const interval = setInterval(() => {
      saveData();
      customSonner({ 
        type: 'info', 
        text: 'Draft saved automatically' 
      });
    }, 5000);

    return () => clearInterval(interval);
  }, []);
}

Best Practices

Error Messages: Provide clear, actionable error messages that help users understand what went wrong.
Success Feedback: Use success notifications to confirm that user actions were completed.
Information Updates: Use info notifications for neutral updates that don't require user action.
Message Length: Keep notification messages concise and clear.

Customization

The notifications are styled using Tailwind CSS classes and can be customized through the following classes:

const styles = {
  success: 'border-[#83E56A]',
  error: 'border-[#F93333]',
  info: 'border-[#388DE2]'
};

EOL


---




bash
pnpm add sonner

Basic Usage

import { useSonner } from "@/lib/hooks/useSonner";

function MyComponent() {
  const { customSonner } = useSonner();

  const handleSuccess = () => {
    customSonner({ 
      type: "success", 
      text: "Operation completed successfully" 
    });
  };
}

API Reference

`customSonnerProps`

type customSonnerProps = {
  type?: "success" | "error" | "info";
  text?: string | null;
}

Notification Types

Success
- Green border (#83E56A)
- Check icon
- Default message: "Changes have been applied successfully"
Error
- Red border (#F93333)
- Alert triangle icon
- Default message: "Failed to update the information. Please try again"
Info
- Blue border (#388DE2)
- Info icon
- Default message: "Your changes has been applied 5 minutes ago"

Examples

Error Handling

function UserProfile() {
  const { customSonner } = useSonner();

  const updateProfile = async () => {
    try {
      await saveProfile();
      customSonner({ 
        type: "success", 
        text: "Profile updated successfully" 
      });
    } catch (error) {
      customSonner({ 
        type: "error", 
        text: "Failed to update profile" 
      });
    }
  };
}

Information Updates

function AutoSave() {
  const { customSonner } = useSonner();

  useEffect(() => {
    const interval = setInterval(() => {
      saveData();
      customSonner({ 
        type: "info", 
        text: "Draft saved automatically" 
      });
    }, 5000);

    return () => clearInterval(interval);
  }, []);
}

Best Practices

Clear Messages: Provide concise, actionable messages
Appropriate Types: Use the right notification type for the context
Error Details: Include helpful error messages that guide users
Timing: Use appropriate duration for different types of notifications

Component Integration

To use the notifications in your app, add the Toaster component to your layout:

import { Toaster } from "@/components/ui/sonner";

export default function RootLayout() {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}
```' > apps/masterbots.ai/docs/useSonner.md

# Verify the file was created
ls -l apps/masterbots.ai/docs/useSonner.md

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for useSonner hook implementation
ast-grep --pattern 'export const useSonner = $_'

# Search for customSonner function
ast-grep --pattern 'export const customSonner = $_'

# Search for customSonnerProps type
ast-grep --pattern 'export type customSonnerProps = $_'

# Find any existing documentation or examples
fd -e md -e mdx . apps/masterbots.ai

Length of output: 5834

Script:

#!/bin/bash
# Find files containing sonner or useSonner
rg -l "sonner|useSonner"

# Once we find the files, we'll examine their contents

Length of output: 26

Script:

#!/bin/bash
# List all TypeScript/JavaScript files in the project
fd -e ts -e tsx -e js -e jsx

# Let's also check if there's a PR that introduced this hook
gh pr view 334 --json files

Length of output: 16829

Script:

#!/bin/bash
# Get the contents of the useSonner hook and sonner component
cat apps/masterbots.ai/lib/hooks/useSonner.tsx
cat apps/masterbots.ai/components/ui/sonner.tsx

Length of output: 249

Script:

#!/bin/bash
# Fetch the PR content for the specific files
gh pr view 334 --json files,additions,deletions,body

# Try to get the file content from the PR
gh pr diff 334

Length of output: 57271

Script:

#!/bin/bash
# Create the docs directory if it doesn't exist
mkdir -p apps/masterbots.ai/docs

# Create the documentation file
cat > apps/masterbots.ai/docs/useSonner.md << 'EOL'
# useSonner Hook Documentation

A custom React hook for displaying toast notifications with consistent styling and icons.

## Installation

Length of output: 185

Script:

#!/bin/bash
# Create the docs directory
mkdir -p apps/masterbots.ai/docs

# Write the documentation file using echo statements
echo '# useSonner Hook Documentation

A custom React hook for displaying toast notifications with consistent styling and icons.

## Installation

Length of output: 151

✏️ Learnings added

Learnt from: AndlerRL
URL: https://github.com/bitcashorg/masterbots/issues/338

Timestamp: 2025-01-14T05:10:43.003Z
Learning: The `useSonner` hook in masterbots.ai provides a custom notification system with three types (success, error, info) using the sonner library. Each notification type has specific styling (border colors: success=#83E56A, error=#F93333, info=#388DE2) and icons (check, alert triangle, info).

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

AndlerRL · 2025-01-17T20:35:43Z

@coderabbitai make this documentation shorter. I need to put it at the hook level ( JSDocs) for developers.

coderabbitai · 2025-01-17T20:35:48Z

You are on the CodeRabbit Free Plan. In order to use the Chat feature, please upgrade to CodeRabbit Pro.

luighis · 2025-01-17T23:07:13Z

@AndlerRL #343

coderabbitai bot added documentation Improvements or additions to documentation enhancement New feature or request labels Jan 14, 2025

coderabbitai bot assigned luighis Jan 14, 2025

coderabbitai bot mentioned this issue Jan 14, 2025

New sonner #334

Merged

AndlerRL mentioned this issue Jan 14, 2025

Chatbot Following + Thread Highlight + Bot thread page to blog #337

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add JSDoc documentation for useSonner hook #338

Add JSDoc documentation for useSonner hook #338

coderabbitai bot commented Jan 14, 2025

AndlerRL commented Jan 14, 2025

coderabbitai bot commented Jan 14, 2025

AndlerRL commented Jan 17, 2025

coderabbitai bot commented Jan 17, 2025

luighis commented Jan 17, 2025

Add JSDoc documentation for useSonner hook #338

Add JSDoc documentation for useSonner hook #338

Comments

coderabbitai bot commented Jan 14, 2025

Overview

Requirements

Related PR

AndlerRL commented Jan 14, 2025

coderabbitai bot commented Jan 14, 2025

Basic Usage

API Reference

customSonnerProps

Notification Types

Examples

Error Handling

Information Updates

Best Practices

Component Integration

Basic Usage

API Reference

useSonner Hook

customSonner Function

Parameters

Notification Types

Integration Examples

Error Handling

Form Submission

Information Updates

Best Practices

Customization

Basic Usage

API Reference

customSonnerProps

Notification Types

Examples

Error Handling

Information Updates

Best Practices

Component Integration

AndlerRL commented Jan 17, 2025

coderabbitai bot commented Jan 17, 2025

luighis commented Jan 17, 2025

`customSonnerProps`

`useSonner` Hook

`customSonner` Function

`customSonnerProps`