gxrsti/alert

Customizable toast component for React.

👋🏻 hey there, i'm gxrsti

... and i'm working on adding more stuff onto here

maybe check back later? cheers 🙏🏻

alert's Issues

Add Install Instructions To Website

We need a section which shows how to install the package.

Something like npm install alert, yarn install alert and so on. Feel free to get inspiration from other packages.

Add `toast.error()` function

Similar to toast.success() we need an option to toast an error.

Add Light/Dark Mode To Demo Website

Shadcn/ui offers theming through their ThemeProvider here.

This should be added to our demo website with a toggle to switch the themes.
Default should be "system".

Toaster Needs Client Side Parent

When importing Toaster, a ReactServerComponentsError gets raised. This is forcing the users to render their parent component client side.

Possible solution could be to add 'use client' to the index.ts, needs to be tested.

Dependabot Not Working

Dependabot is not working in this project, and the issue may be related to our use of pnpm and workspaces.

Expected Behavior:

Dependabot should submit prs to update dependencies for root and website directory when new versions are available.

Current Behavior:

Dependabot is not detecting or updating dependencies, it also doesn't provide errors.

`Position` Property doesn't affect `Toaster` Component

The position property can currently be provided to the Toaster component, but it does not have any impact on the positioning of toasts.

It should change the placement of the Toaster. Animations and directions of the toasts inside can be ignored for now.

Improve Feature Showcase Of Website

Currently, the demo website is just some buttons and selects. We need an actual landing page, a layout, some text and to showcase the features including code snippets.

This is not a concrete issue, feel free to improve it as you would like to. I'm open for anything and will give feedback!

Add Footer To Website

We need a very simple footer for the demo website.

It should look something like this:

"Gersti" should be a link to my github profile, the github link should point to this repo.

Enhance Contributing.md

Requesting an improvement to the Contributing. md file to provide more comprehensive and detailed guidelines for contributors.

Add Copy Button To Codeblocks On Website

The <Codeblock/> component needs an icon button to copy the code to the clipboard.

I would suggest to put it in the top right corner of an codeblock!

Write Comments For Better Code Documentation

Effective code comments are essential for understanding and maintaining the codebase. Also users get an brief explanation of what a function does.

This issue aims to improve the codebase's readability and maintainability by adding code comments.

Example:

Error/Success Toast Brakes Animations

When toasting error or success toasts, it looks like something gets rerendered to often and leads to multiple / not intended animations.

Needs to be investigated and fixed.

Comments For Better Code Documentation

#18

Add Build and Test Workflow

We currently do not have workflows set up for this library when pull requests are opened. Establishing automated workflows will improve our development process and ensure code quality.

For now a simple build and test check would be enough. If you have any other ideas feel free to suggest/implement them.

`Position` Select Box For Demo Website

A select box should be added to the demo website. Users should be able to select a position which gets set for the <Toaster/> component.

Note: Please use the shadcn/ui select.

docs: Add a contribution section in main Readme.md

Having a redirection for contribution.md would be better for new contributors.

Adding a section for the same with some description would be easy for developers to get started

Bump version to 6.0.0

Hey, would you mind bumping the package version to v6, and optionally (ideally) unpublishing 5.1.5? That would reduce the potential for people to install the old version, unless they're jumping major versions without bothering to check, in which case, there's no help for them. npm unpublish [email protected] && npm version major.

Design Icon/Logo For This Package

Perhaps there is a talented and creative person here who could design a minimalist icon for this package – your help would be highly greatly appreciated!

I am open for anything!

Add More Test Cases

All components and functions need to be tested. That way we can ensure the library's reliability.
It's important to ensure that new features and changes do not introduce regressions or unexpected behavior.

Please find useful test cases for and write tests for it. Currently existing tests are located under /test.

Props do not work

position,style...
none of them work properly

Add Theming To Toaster Component

We need to support lightand dark mode.

Users should be able to provide a theme property to the <Toaster/>. Available options should be 'light' and 'dark'. Default value needs to be 'light'.

Based on the theme, the background and color of the toasts need to be adjusted.

Add `toast.promise()` function

Similar to toast.success() or toast.error() we need an option to create a toast which shows a loading indicator while the promise is pending and success or error based on if the promise was fulfilled or rejected.

Here is an example how the function should work:

const promise = () => new Promise((resolve) => setTimeout(resolve, 2000));

toast.promise(promise, {
  loading: 'Loading...',
  success: 'Success',
  error: 'Error',
});

Allow Changing Direction Of Toasts

A new property called reverse should be added to the component. It should toggle the direction of the toasts. Normally toasts should add to the bottom. If reverse is true, toasts should be added to the top.

Additionally, please add a toggle to the demo website which allows users to toggle the direction!

Create Figma For Demo Website

We need to create a Figma file for the demo website of this package. This should server as a reference for the UI/UX design and layout of the demo website. This website should of course showcase all components/features.

Maybe there are some creative people who want to work on this, I would greatly appreciate it!