Merge pull request #10 from codewithkyle/v2.0.0

V2.0.0

Author: codewithkyle

.gitignore

@@ -3,9 +3,15 @@ node_modules
 
 # Compiled files
 # -----------
-notification-manager.d.ts
-notification-manager.js
-notification-manager.js.map
-notify.d.ts
 notify.js
-notify.js.map
+notify.js.map
+notify.d.ts
+notifier.js
+notifier.js.map
+notifier.d.ts
+snackbar-component.js
+snackbar-component.js.map
+snackbar-component.d.ts
+toast-component.js
+toast-component.js.map
+toast-component.d.ts

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   refactored elements into web components
+
 ## [1.2.2] - 2020-04-17
 
 ### Fixed

README.md

@@ -1,6 +1,6 @@
 # Notify.js
 
-Notify.js is a utility library helping to manage simple [snackbar notifications](https://material.io/develop/web/components/snackbars/). Checkout the [live demo](https://components.codewithkyle.com/snackbars/dark-snackbar) to see the library in action.
+Notify.js is a hyper-lightweight utility library helping to manage simple [snackbar](https://material.io/develop/web/components/snackbars/) and [toaster](https://www.carbondesignsystem.com/components/notification/code/) notifications.
 
 ## Installation
 
@@ -14,41 +14,44 @@ npm i --save @codewithkyle/notifyjs
 
 There are two ways to use this package. You can create a Notification Manager or use the global manager. Each manager has a queue and new notifications are placed in the queue in the order that they're requested. The queue can be skipped by settings the `force` value to true.
 
-### Global Manager
+### Notification Manager
 
-Import the global `notify()` function:
+Import the manager:
 
 ```typescript
-import { notify } from "@codewithkyle/notifyjs";
+import { Notifier } from "@codewithkyle/notifyjs";
+const notifier = new Notifier();
 ```
 
-Submit a notification to the global manager:
+Create a snackbar or toast notification:
 
 ```typescript
-notify({
-    message: "All notifications require a message",
+notifier.snackbar({
+    message: "All snackbar notifications require a message",
+});
+notifier.toast({
+    title: "Toast notificaitons require a title",
+    message: "And they require a message",
 });
 ```
 
-### Custom Manager
-
-Import the `NotificationManager` class:
-
-```typescript
-import { NotificationManager } from "@codewithkyle/notifyjs";
-```
+### Global Manager
 
-Create a new instance of the class:
+Import the notification type:
 
 ```typescript
-const customManager = new NotificationManager();
+import { snackbar, toast } from "@codewithkyle/notifyjs";
 ```
 
-Call the `notify()` method:
+Create a notification:
 
 ```typescript
-customManager.notify({
-    message: "All notifications require a message",
+notifier.snackbar({
+    message: "All snackbar notifications require a message",
+});
+notifier.toast({
+    title: "Toast notificaitons require a title",
+    message: "And they require a message",
 });
 ```
 
@@ -57,7 +60,7 @@ customManager.notify({
 ```typescript
 interface NotificationOptions {
     message: string;
-    duration?: number;
+    duration?: number; // in seconds
     closeable?: boolean;
     buttons?: Array<{
         label: string;
@@ -70,17 +73,6 @@ interface NotificationOptions {
 }
 ```
 
-### Duration
-
-The duration value can be set to `Infinity` if a users interaction is required. Otherwise enter the number of seconds the notification should be displayed for.
-
-```typescript
-notify({
-    message: "This notification will last 3 seconds",
-    duration: 3,
-});
-```
-
 ### User Interaction
 
 Notify.js also allows for user interactions via a button element. The action requires a custom label for the button along with a callback function that will be called when the `click` event is fired on the button.
@@ -99,17 +91,6 @@ notify({
 });
 ```
 
-### Closeable
-
-Notifications can be closeable by setting the `closeable` value to true.
-
-```typescript
-notify({
-    message: "The user will have to close this notification",
-    closeable: true,
-});
-```
-
 ### HTML Structure
 
 ```html
@@ -131,7 +112,7 @@ type ToasterNotification = {
     title: string;
     message: string;
     closeable?: boolean;
-    icon?: string; // svg
+    icon?: string; // svg or img
     duration?: number; // in seconds
     classes?: string[];
 };
@@ -155,7 +136,3 @@ type ToasterNotification = {
     </toast-component>
 </toaster-component>
 ```
-
-## Stylesheets
-
-This library doesn't provide/force any CSS, for a material design styled snackbar notification [click here](https://github.com/codewithkyle/notifyjs/blob/master/test/snackbar.css).

package.json

@@ -1,16 +1,22 @@
 {
     "name": "@codewithkyle/notifyjs",
-    "version": "1.2.2",
+    "version": "2.0.0",
     "description": "A simple JavaScript library for creating and managing toaster & snackbar notifications",
     "main": "notify.js",
     "types": "notify.d.ts",
     "files": [
         "notify.js",
         "notify.js.map",
         "notify.d.ts",
-        "notification-manager.js",
-        "notification-manager.js.map",
-        "notification-manager.d.ts"
+        "notifier.js",
+        "notifier.js.map",
+        "notifier.d.ts",
+        "snackbar-component.js",
+        "snackbar-component.js.map",
+        "snackbar-component.d.ts",
+        "toast-component.js",
+        "toast-component.js.map",
+        "toast-component.d.ts"
     ],
     "scripts": {
         "compile": "tsc",
@@ -19,6 +25,8 @@
     "keywords": [
         "snackbar",
         "notification",
+        "toaster",
+        "web-components",
         "lightweight"
     ],
     "author": "Kyle Andrews",