makki-toast 1.0.0 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Daniel Jimenez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,111 @@
-# Makki Toast 
+<a href="https://daniel-jimenez.tech/makki-toast/"><img alt="makki toast - Try it" src="https://daniel-jimenez.tech/images/makkitoast.png"/></a>
+<div align="center">
+  <img src="https://badgen.net/npm/v/makki-toast" alt="NPM Version" />
+  <img src="https://img.shields.io/bundlephobia/minzip/makki-toast" alt="Minzip size"/>
+  <img src="https://img.shields.io/npm/dt/makki-toast" alt="Download" />
+  <img src="https://img.shields.io/github/license/DanielJimenezC/makki-toast-package" alt="Licence" />
+  
+</div>
+<br />
+<div align="center">
+  <strong>Creative makki toast.</strong>
+</div>
+<div align="center">Easy to use, customizable & compatible with dark mode.</div>
+<br />
+<div align="center">
+  <a href="https://daniel-jimenez.tech/makki-toast/">Website</a> 
+  <span> · </span>
+  <a href="https://daniel-jimenez.tech/makki-toast/#/docs">Documentation</a> 
+</div>
+<br />
+<div align="center">
+  <sub>Build by <a href="https://daniel-jimenez.tech">Daniel Jimenez</a></sub>
+</div>
+<br />
 
-Fancy makki toast
+## Features
 
-Create by Daniel Jimenez
+- **Easy to use**
+- **Customizable**
+- **Dark mode**
+- **Lightweight**
+- **Accessible**
+
+## Installation
+
+#### With NPM
+
+```sh
+npm install makki-toast@latest
+```
+## Getting Started
+
+Add the makki toast and it will take care of render the alerts.
+#### Import Makki Toast
+```jsx
+import { Toast } from 'makki-toast'
+```
+
+#### Info
+```jsx
+const toast = new Toast()
+
+const handleToast = () => {
+  toast.info('Simple text', false)
+}
+```
+
+#### Success
+```jsx
+const toast = new Toast()
+
+const handleToast = () => {
+  toast.success('Simple text', false)
+}
+```
+
+#### Warning
+```jsx
+const toast = new Toast()
+
+const handleToast = () => {
+  toast.warning('Simple text', false)
+}
+```
+
+#### Danger
+```jsx
+const toast = new Toast()
+
+const handleToast = () => {
+  toast.danger('Simple text', false)
+}
+```
+
+#### Custom
+```jsx
+import { Toast } from 'makki-toast'
+
+const App = () => {
+  const toast = new Toast()
+
+  const handleToast = () => {
+    toast.show({
+      autoClose: 5000,
+      darkMode: false,
+      message: 'Simple text',
+      position: 'top-right'
+    })
+  }
+  
+  return (
+    <div>
+      <button onClick={handleToast}>Show Makki Toast</button>
+    </div>
+  )
+}
+```
+
+## Documentation
+
+Find the full documentation on [official documentation](https://daniel-jimenez.tech/makki-toast/#/docs)

package/index.js

@@ -16,7 +16,43 @@ const DEFAULT_VALUES = {
 
 export class Toast {
   show(options) {
-    new ToastAlert(options);
+    new ToastAlert(options)
+  }
+  info(message, theme) {
+    new ToastAlert({
+      autoClose: 5000,
+      darkMode: theme,
+      message: message,
+      status: 'info',
+      position: 'top-right'
+    })
+  }
+  success(message, theme) {
+    new ToastAlert({
+      autoClose: 5000,
+      darkMode: theme,
+      message: message,
+      status: 'success',
+      position: 'top-right'
+    })
+  }
+  warning(message, theme) {
+    new ToastAlert({
+      autoClose: 5000,
+      darkMode: theme,
+      message: message,
+      status: 'warning',
+      position: 'top-right'
+    })
+  }
+  danger(message, theme) {
+    new ToastAlert({
+      autoClose: 5000,
+      darkMode: theme,
+      message: message,
+      status: 'danger',
+      position: 'top-right'
+    })
   }
 }
 
@@ -69,6 +105,8 @@ class ToastAlert {
         this.#toastElement.classList.add('makki-warning')
       else if (value === 'danger')
         this.#toastElement.classList.add('makki-danger')
+      else if (value === 'info')
+        this.#toastElement.classList.add('makki-info')
       else if (value === 'none')
         this.#toastElement.classList.add('makki-none')
     } catch (error) {
@@ -128,7 +166,12 @@ class ToastAlert {
     }
     else if (this.#statusValue === 'danger') {
       iconToast.classList.add('bx')
-      iconToast.classList.add('bx-error-alt')
+      iconToast.classList.add('bx-x')
+      this.#iconElement = iconToast
+    }
+    else if (this.#statusValue === 'info') {
+      iconToast.classList.add('bx')
+      iconToast.classList.add('bx-info-circle')
       this.#iconElement = iconToast
     }
     else if (this.#statusValue === 'none') {
@@ -170,6 +213,8 @@ class ToastAlert {
       bgColor = '#ECC94B'
     else if (this.#statusValue === 'danger')
       bgColor = '#D74B4B'
+    else if (this.#statusValue === 'info')
+      bgColor = '#3182CE'
 
     this.#toastElement.style.setProperty('--makki-progress-bg', bgColor)
     if (value) {
@@ -239,9 +284,9 @@ function getTextColor(bgColor) {
 }
 
 function calcTintColor(or,og,ob) {
-  const r = or + Math.round((255 - or) * 0.25)
-  const g = og + Math.round((255 - og) * 0.25)
-  const b = ob + Math.round((255 - ob) * 0.25)
+  const r = or + Math.round((255 - or) * 0.18)
+  const g = og + Math.round((255 - og) * 0.18)
+  const b = ob + Math.round((255 - ob) * 0.18)
   return { r, g, b }
 }
 
@@ -279,7 +324,7 @@ function validatePosition(position) {
 }
 
 function validateStatus(status) {
-  const styles = ['success', 'warning', 'danger', 'none']
+  const styles = ['success', 'warning', 'danger', 'info', 'none']
   if (!styles.includes(status.toLowerCase()))
     throw new Error('toast status is wrong')
   return

package/package.json

@@ -1,14 +1,25 @@
 {
   "name": "makki-toast",
-  "version": "1.0.0",
-  "description": "Fancy makki toast",
+  "version": "1.2.0",
+  "description": "Easy to use and customizable toast",
+  "author": "Daniel Jimenez <danieljimenezcanales@gmail.com>",
+  "homepage": "https://daniel-jimenez.tech/makki-toast/",
+  "license": "MIT",
+  "repository": "DanielJimenezC/makki-toast-package",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
-    "Toast"
-  ],
-  "author": "Daniel Jimenez",
-  "license": "ISC"
+    "accessible",
+    "alert",
+    "frontend",
+    "makki-toast",
+    "notification",
+    "notify",
+    "react",
+    "toast",
+    "ui",
+    "web"
+  ]
 }

package/style.css

@@ -12,6 +12,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  z-index: 99;
 }
 
 .makki-toast-container[data-position^="top-"] {
@@ -150,6 +151,22 @@
   opacity: 1;
 }
 
+.makki-info.makki-light-toast {
+  background-color: #2768A5;
+  color: #EDF2F7;
+}
+
+.makki-info.makki-dark-toast {
+  background-color: #5A9BD8;
+  color: #EDF2F7;
+}
+
+.makki-info.makki-light-toast:hover,
+.makki-info.makki-dark-toast:hover {
+  background-color: #3182CE;
+  opacity: 1;
+}
+
 .makki-light-toast.makki-none,
 .makki-dark-toast.makki-none {
   background-color: var(--makki-toast-bg-color);