gustavosmanc / cute-alert

Simple open source JavaScript library that aims to provide beautiful alerts and toasts to your website.

Cute Alert

Simple open source JavaScript library that aims to provide beautiful alerts and toasts to your website. Alerts inspired by Igor Ferrão de Souza's design.

Visit the documentation for more detailed instructions or Storybook if you want to play around / check out the library.

Table of Contents

1. Getting Started
   • Installation
     • Alerts
     • Toasts
   • Usage
2. TypeScript
3. Contributing
   • Setting up the project
   • Unit tests
   • Setting up the docs

Getting started

Installation

npm install cute-alert

Usage

Alerts

import { cuteAlert } from 'cute-alert'

cuteAlert({
  type: 'success',
  title: 'Title',
  description: 'Description',
  timer: 5000,
  primaryButtonText: 'Confirm',
  secondaryButtonText: 'Cancel'
})

Check out the documentation for more detailed instructions.

Toasts

import { cuteToast } from 'cute-alert'

cuteToast({
  type: 'success',
  title: 'Title',
  description: 'Description',
  timer: 5000
})

Check out the documentation for more detailed instructions.

TypeScript

Cute alert has built-in TypeScript support and provides a set of default exported types that you can import as named imports into your project like:

import type {
  AlertOptions,
  ToastOptions,
  AlertResolveValue,
  ToastResolveValue,
  AlertResolve,
  ToastResolve
} from 'cute-alert'

Contributing

Before pushing a PR, take into account the following checklist:

• I have linked an issue or discussion.
• I have added tests (if necessary).
• I have updated the documentation accordingly (if necessary).
• My commits are following the conventional commits specification.

Setting up the project

1. Fork the repository and clone it.

2. Install the dependencies on the repository:

   npm install

3. Start storybook:

   npm run storybook

Unit tests

Running unit tests:

npm run test

Updating snapshots:

npm run test:update-snapshots

Coverage:

npm run coverage

Setting up the docs

Make sure you have the latest Ruby version installed.

1. Open up your terminal and install the bundler gem on version 2.4.22:

   gem install bundler -v 2.4.22

2. Go to the docs folder and install the dependencies:

   bundle install

3. Run bundle exec jekyll serve to serve the docs locally.

cute-alert's Issues

typescript definitions

I started to use this project by importing it as an npm git dependency, but I found that the internals of the alerts actually interrogated the scripts and tried to pluck the svgs off of that, so I decided it wasn't worth the hassle to rewrite it to use base64 versions (since I'm bundling this).

Anyway, I did make a typescript definition file for the project, and I wanted to share it with you. Here's the definitions:

declare module 'cute-alert/cute-alert' {
  export declare type AlertType =
    | 'warning'
    | 'error'
    | 'success'
    | 'question'
    | 'info';

  export declare interface AlertArgs {
    type: AlertType;
    title: string;
    message: string;
    img: string;
    buttonText?: string;
    confirmText?: string;
    vibrate?: number | number[];
    playSound?: string;
    cancelText?: string;
    closeStyle: string;
  }

  export declare interface ToastArgs {
    type: AlertType;
    message: string;
    timer?: number;
    vibrate?: number | number[] | undefined;
    playSound?: string;
  }

  export function cuteAlert(
    args: AlertArgs,
  ): Promise<'confirm' | 'ok' | 'close' | void>;
  export function cuteToast(args: ToastArgs): Promise<void>;
}

new instances duplicate on page

This really is great, thanks first of all!
Second, If I confirm box, and choose cancel, then go into it again, it duplicates the confirmation box.
It's as if the first never disposes properly. So I have one confirmation box to close, then I have to close it again - you can also see the background gets darker each time you load a new one.

Do you have a dispose event I could use to ensure each new call is only done so once?

Uncaught (in promise) ReferenceError: img is not defined

As the title says I get an error trying to display a Toast - Uncaught (in promise) ReferenceError: img is not defined
line 152 of cute-alert.js
${img !== '' ? '

' : '

'}

CuteAlert works but doesn't display the icon.
My directory structure is:

app/static/cute-alert/img/image files here
js and css are in app/static/cute-alert/

I'm new to javascript so don't know how to troubleshoot this.

Toast bar ios and macos

Add option for close Alert with timer

Add option for close Alert with timer
function cuteAlertAction(type, title, message){ return cuteAlert({ type: type, title: title, message: message, autoClose: true, timer: 2000 }); }

Z-index conflict between cute-alert modes and a modal form.

Would you be able to implement a z-index in the dialog box?

Little comma near image

Its only delete the comma at line 165 from file cute-alert.js because apear at toust.

When adding this project to an addon for Firefox warnings are generated

I am using this beautiful library for my project, but now if I present it to Firefox to publish it as an add-on, there are warnings shown
Unsafe call to body.insertAdjacentHTML for argument 1
Warning: Due to both security and performance concerns, this may not be set using dynamic values which have not been adequately sanitized. This can lead to security issues or fairly serious performance degradation.

cute-alert.js
It would be great if this could be altered so this warning is prevented

Image in alert is undefined, returns 404 error

My folder structure is
public/diary-assets/libraries/cute-alert
with the HTML file + server root being public

Using cuteAlert of the box no image shows:

The path it is trying to load from is:
/diary-assets/libraries/cute-alert/undefined

The problem seems to be line 65:

${img !== '' ? '<img class="alert-img" src="' + src + '/' + img + '" />' : ''}

img is undefined which does not strictly equal ''

Changing line 65 to the following appears to fix the issue:

${img !== '' ? '<img class="alert-img" src="' + src + '/img/' + type + '.svg" />' : ''}

It sees that surely the img filename must be made using the property type and the existing code does not appear to do this.

However I don't understand the original intention of checking if img != '', so maybe my fix breaks some other functionality I am not aware of.

May you make a tutorial to explain how your cade works?

Hi there, Im a newbie of js. Im doing my school project which wants to use your cute-alert. I had imported both files and tried to made the event happen. unfortunately, the alert-box didn't show. it made me so confused.

If the library is included into an addon with manifest, then the svg images are not shown

I have added the library to an add-on I am working on. It does not show the "svg" images included on Chrome and other browsers
You have to add the following lines into the manifest

"web_accessible_resources": [
"/img/*"
],

If you have included the library into an add-on, then the cute-alert.js is not recognised

I have added the library into an add-on without adding the cute-alert.js added into the pages.
That is not necessary if you use a manifest.
To make it work, I altered the following lines in the manifest
// 13-08-2021 Modified the code below to be able to use it in manifest
let src = chrome.extension.getURL('/');
for (let script of scripts) {
if (script.src.includes("cute-alert.js")) {
currScript = script;
src = currScript.src;
src = src.substring(0, src.lastIndexOf("/"));
}
}
This does work for me, but might not work for others, so needs to be tested in a page without using a manifest

Undefined variable 'url' in line number 215

Hi,

As you checking the the 'url' variable in the 215 no line (please see the attached image). It's actually undefined and in the same scope has na url variable so it's showing a console error.

Thank you

how to use it on react js

If the body does not have a parent, then the instruction insertAdjacentHTML('afterend' does not work

If you have a blanc page that only contains a body, then the instruction does not work.
It could be solved by adding a parameter, that contains a location by ID
In that case if you have a container, you can reference the container, and then it does work again

If you want to show the alert on a different page, opened from a base page, then the pop-ups are not shown

It would be great if that could be implemented as a parameter.
I solved it by adding a parameter, and added the myWindow parameter to the document statements
function cuteAlert({
type,
title,
message,
buttonText = "OK",
confirmText = "OK",
cancelText = "Cancel",
myWindow ="",
closeStyle,
}) {

const scripts = myWindow.document.getElementsByTagName("script");

close button

After showing the Dialog want to close the window using Enter button of the keyboard . Is it possible?