frutjam 0.0.1 → 0.0.2

package/package.json

@@ -1,34 +1,38 @@
-{
-  "name": "frutjam",
-  "version": "0.0.1",
-  "description": "Frutjam includes prebuilt UI components and plugins that are completely open-source",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "repository": {
-    "type": "github",
-    "url": "git+https://github.com/nezanuha/frutjam.git"
-  },
-  "scripts": {
-    "build": "tsup",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "frutjam",
-    "Nezanuha"
-  ],
-  "author": "Nezanuha",
-  "license": "MIT",
-  "homepage": "https://frutjam.com",
-  "bugs": {
-    "url": "https://github.com/nezanuha/frutjam/issues"
-  },
-  "files": [
-    "src/**/*"
-  ],
-  "devDependencies": {
-    "esbuild": "^0.20.2",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.5"
-  }
-}
+{
+  "name": "frutjam",
+  "version": "0.0.2",
+  "description": "Frutjam includes prebuilt UI components and plugins that are completely open-source",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "github",
+    "url": "git+https://github.com/nezanuha/frutjam.git"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "frutjam",
+    "Nezanuha"
+  ],
+  "author": "Nezanuha",
+  "license": "MIT",
+  "homepage": "https://frutjam.com",
+  "bugs": {
+    "url": "https://github.com/nezanuha/frutjam/issues"
+  },
+  "files": [
+    "src/**/*"
+  ],
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "esbuild": "^0.20.2",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  }
+}

package/src/index.ts

@@ -1 +1,3 @@
-export { default as Notification } from './plugins/notification'
+export { default as Notification } from './plugins/notification'
+// export { default as TelephoneInput } from './plugins/telephoneInput'
+// export { default as Popover } from './plugins/popover'

package/src/plugins/notification/config.ts

@@ -0,0 +1,14 @@
+import { NotificationConfig } from "./interfaces";
+
+export const config: NotificationConfig = {
+    arriveFrom: {
+        right: 'translate-x-full',
+        left: '-translate-x-full',
+        bottom: 'translate-y-full',
+        top: '-translate-y-full',
+    },
+    effects: {
+        slide: 'duration-300',
+        fade: 'opacity-0 duration-300',
+    },
+};

package/src/plugins/notification/index.ts

@@ -1,74 +1,124 @@
+/*
+* Notification
+* @version: 0.0.2
+* @author: Nezanuha
+* @license: Licensed under MIT
+* Copyright 2023 Nezanuha
+*/
+
 import { NotificationOptions } from './interfaces';
-import { TimeoutId } from './types';
+import type { ArriveFrom, TimeoutId } from './types';
+import "./styles.css"
+import { config } from './config';
 
 export default class Notification {
     effect: string;
     escapeTime: number;
     arriveTime: number;
     autoClose: boolean;
+    arriveFrom: ArriveFrom;
     element: HTMLElement | null;
     timeoutId: TimeoutId;
 
-    constructor({ effect = 'fade', escapeTime = 3000, arriveTime = 200, autoClose = true, element = null }: NotificationOptions = {}) {
+    constructor({ effect = 'fade', escapeTime = 3000, arriveTime = 200, autoClose = true, arriveFrom = 'right', element = null }: NotificationOptions = {}) {
         this.effect = effect;
         this.arriveTime = arriveTime;
         this.autoClose = autoClose;
+        this.arriveFrom = arriveFrom;
         this.escapeTime = escapeTime;
         this.element = element;
         this.timeoutId = null; // Initialize timeout ID as null
         this.render();
-        this.action();
+        this.init();
     }
 
     render() {
-        if (this.element) {
-            document.querySelector("body")?.insertAdjacentElement('beforeend', this.element);
+        if (typeof this.element === 'string') {
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = this.element;
+            this.element = tempDiv.firstChild as HTMLElement;
+            this.element.setAttribute("data-fj", "user-element");
         }
-    }
+    
+        // Inside the render method of the Notification class
+        if (this.element instanceof HTMLElement) {
+            let container = document.querySelector<HTMLElement>("[data-fj='notification']");
+            if (!container) {
+                container = document.createElement('div');
+                container.setAttribute('data-fj', 'notification');
+                document.querySelector("body")?.insertAdjacentElement('beforeend', container);
+            }
 
-    action() {
-        document.querySelectorAll("[data-fj='toggle-btn']").forEach((event) => {
-            event.addEventListener("click", (e) => {
-                const self = e.target as HTMLElement;
-                const container = self.closest<HTMLElement>("[data-fj='notification']");
-                if (container) {
-                    this.toggleNotification(container);
-                }
+            // Check if the element being appended is not the same as the container itself
+            if (this.element !== container) {
+                container.appendChild(this.element);
+            }
 
-                // Clear the timeout when the click event occurs
-                if (this.timeoutId !== null) {
-                    clearTimeout(this.timeoutId);
-                    this.timeoutId = null;
-                }
-            });
-        });
 
-        // Set the timeout to toggle the class after arriveTime
+            if (this.effect == 'slide') {
+                const arriveFromClass = config.arriveFrom[this.arriveFrom];
+                this.element.classList.add(arriveFromClass, 'duration-300');
+            } else {
+                this.element.classList.add('opacity-0', 'duration-300');
+            }
+        } else {
+            console.error("No element provided. Element must be either an HTMLElement or a string representing raw HTML.");
+        }
+        
+    
         this.timeoutId = setTimeout(() => {
-            const notificationsContainer = document.querySelectorAll<HTMLElement>("[data-fj='notification']");
-            notificationsContainer.forEach((container) => {
-                this.toggleNotification(container);
-            });
-            this.timeoutId = null; // Reset timeout ID after it's triggered
+            this.toggleNotification(this.element); // Pass the current element to toggleNotification
+            this.timeoutId = null;
         }, this.arriveTime);
-
+    
         if (this.autoClose === true) {
             this.timeoutId = setTimeout(() => {
-                const notificationsContainer = document.querySelectorAll<HTMLElement>("[data-fj='notification']");
-                notificationsContainer.forEach((container) => {
-                    this.toggleNotification(container);
-                });
-                this.timeoutId = null; // Reset timeout ID after it's triggered
+                this.toggleNotification(this.element, 'close'); // Pass the current element to toggleNotification
+                this.timeoutId = null;
             }, this.escapeTime);
         }
     }
 
-    toggleNotification(container: HTMLElement) {
-        if (this.effect == 'slide') {
-            container.classList.toggle("translate-x-0");
+    init() {
+        const handleClick = (e: MouseEvent) => {
+            const self = e.target as HTMLElement;
+            const userElement = self.closest<HTMLElement>("[data-fj='user-element']");
+            if (userElement) {
+                this.toggleNotification(userElement, 'close');
+            }
+    
+            if (this.timeoutId !== null) {
+                clearTimeout(this.timeoutId);
+                this.timeoutId = null;
+            }
+        };
+    
+        // Add event listeners only once for all toggle buttons
+        const toggleButtons = document.querySelectorAll<HTMLElement>("[data-fj='toggle-btn']");
+        toggleButtons.forEach(button => {
+            // Check if the event listener is already added before adding it again
+            if (!button.dataset.clickEventAdded) {
+                button.dataset.clickEventAdded = "true"; // Set a flag to indicate that the event listener is added
+                button.addEventListener("click", handleClick);
+            }
+        });
+    }
+
+    toggleNotification(container: HTMLElement | null, type?: string) {
+        if (container instanceof HTMLElement) {
+            if (this.effect == 'slide') {
+                const arriveFromClass = config.arriveFrom[this.arriveFrom];
+                container.classList.toggle(arriveFromClass, !container.classList.contains(arriveFromClass));
+            } else {
+                container.classList.toggle("opacity-0", !container.classList.contains("opacity-0"));
+            }
+            if (type === 'close') {
+                setTimeout(() => {
+                    container.remove();
+                }, 300);
+            }
         } else {
-            container.classList.toggle("opacity-100");
+            console.error("Container is null or not an HTMLElement.");
         }
-        // Add other toggle logic here if needed
-    }
+    }     
 }

package/src/plugins/notification/interfaces.ts

@@ -1,9 +1,23 @@
-import { TimeoutId } from './types';
+import type { ArriveFrom, TimeoutId } from './types';
 
 export interface NotificationOptions {
     effect?: string;
     escapeTime?: number;
     arriveTime?: number;
     autoClose?: boolean;
+    arriveFrom?: ArriveFrom; // Use the ArriveFrom type here
     element?: HTMLElement | null;
+}
+
+// Define your Config interface or type with index signature for effects
+export interface NotificationConfig {
+    arriveFrom: {
+        right: string;
+        left: string;
+        bottom: string;
+        top: string;
+    };
+    effects: {
+        [key: string]: string; // Index signature for effects
+    };
 }

package/src/plugins/notification/styles.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities{
+    [data-fj='notification'] {
+        @apply overflow-hidden m-6 max-h-max
+    }    
+}

package/src/plugins/notification/types.ts

@@ -1 +1,5 @@
-export type TimeoutId = ReturnType<typeof setTimeout> | null;
+type ArriveFrom = 'right' | 'left' | 'bottom' | 'top';
+
+type TimeoutId = ReturnType<typeof setTimeout> | null;
+
+export type { ArriveFrom, TimeoutId }

package/src/plugins/popover/index.ts

@@ -0,0 +1,45 @@
+import "./styles.css"
+export default class Popover {
+  autoPopup: boolean;
+  popupTime: number;
+  timeoutId: number | null;
+
+  constructor({ autoPopup = false, popupTime = 2000 }: { autoPopup?: boolean; popupTime?: number } = {}) {
+      this.autoPopup = autoPopup;
+      this.popupTime = popupTime;
+      this.timeoutId = null;
+      this.action();
+  }
+
+  action(): void {
+      document.querySelectorAll<HTMLElement>(".fj-popover-toggle").forEach((event) => {
+          event.addEventListener("click", (e) => {
+              const self = e.target as HTMLElement;
+              const popoverContent = self.closest(".fj-popover")!.querySelector(".fj-popover-content") as HTMLElement | null;
+              if (popoverContent) {
+                  this.togglePopover(popoverContent);
+              }
+
+              if (this.timeoutId !== null) {
+                  clearTimeout(this.timeoutId);
+                  this.timeoutId = null;
+              }
+          });
+      });
+
+      if (this.autoPopup === true) {
+          this.timeoutId = window.setTimeout(() => {
+              const popoverContents = document.querySelectorAll<HTMLElement>(".fj-popover .fj-popover-content");
+              popoverContents.forEach((popoverContent) => {
+                  this.togglePopover(popoverContent);
+              });
+              this.timeoutId = null;
+          }, this.popupTime);
+      }
+  }
+
+  togglePopover(popoverContent: HTMLElement): void {
+      popoverContent.classList.toggle("translate-y-0");
+      // Add other toggle logic here if needed
+  }
+}

package/src/plugins/popover/styles.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities{
+    .fj-popover{
+        @apply flex flex-col gap-3 justify-end items-end
+    }
+    .fj-popover-content{
+        @apply max-w-lg w-full z-50 translate-y-[40rem] duration-300
+    }
+}