frutjam 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2024 Nezanuha
+
+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 +1,79 @@
-# Welcome to Frutjam
+# Frutjam Useful Prebuilt Plugins & UI Components for TailwindCSS
+
+Frutjam is a powerful library with an array of useful plugins and UI components created exclusively for use with Tailwind CSS. Whether you're creating a web app, a website, or a digital product, Frutjam offers a variety of tools to help you boost your development process and improve user experience. Furthermore, it provides numerous customization options within its plugins, allowing you to design your solutions precisely to your requirements.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [License](#license)
+
+## Documentations
+For detail documentation, visit [frutjam.com](https://frutjam.com)
+	
+## Key Features:
+
+1. **Tailwind CSS Integration:** Frutjam is designed to work easily with Tailwind CSS, a well-known utility-focused CSS framework. This integration allows you to use the full power of Tailwind's utility classes while also benefiting from Frutjam's additional features.
+
+2. **Useful Plugins:** Frutjam is releasing a number of plugins that will enhance your projects' functionality. These plugins include features like notifications, modals, sliders, form elements, and more. Each plugin is intended to be simple to use, adaptable, and compatible with current web development methods.
+
+3. **UI Components:** In addition to plugins, Frutjam provides an extensive collection of UI components that can be simply integrated into your projects. From navigation menus and cards to buttons and input fields, these components are designed to be accessible, responsive, and visually appealing.
+
+4. **Framework & Libraries Support:** Written in TypeScript, Frutjam supports CommonJS (CJS) and ECMAScript Modules (ESM). It is being developed to support new web frameworks and libraries, such as React, Next.js, Vue, and others.
+
+5. **MIT License:** Frutjam is released under the MIT License, allowing you the freedom to use, alter, and distribute the library as needed for both commercial and personal projects.
+
+Whether you're a beginner exploring web development or an experienced developer looking for efficient tools, Frutjam offers a versatile set of resources to streamline your projects and elevate the user experience.
+
+## Getting started
+
+Whether you're a newbie exploring web development or an experienced developer seeking for efficient tools, Frutjam provides a diverse variety of resources to help you streamline your projects and improve the user experience.
+
+## Installation
+
+You can install Frutjam via npm:
+
+```bash
+npm install frutjam
+```
+
+## Usage
+
+Import the `Notification` class from Frutjam:
+
+```typescript
+import { Notification } from "frutjam";
+import "frutjam/dist/notification.css";
+```
+
+Create a new notification instance with custom configurations:
+
+```typescript
+new Notification({
+    effect: "slide",
+    escapeTime: 5000,
+    autoClose: false,
+    arriveFrom: "top",
+    element: "<div class='your-customizable-design-class'><button type='button' data-fj='toggle-btn'>Close</button><!-- Add your other elements here --></div>"
+});
+```
+
+### Configuration Options
+
+- `effect`: Choose between "fade" or "slide" for the notification effect.
+- `escapeTime`: Time in milliseconds before the notification automatically closes.
+- `arriveTime`: specifies the time in milliseconds after which the notification's arrival animation completes.
+- `autoClose`: Boolean to enable or disable automatic closing of the notification.
+- `arriveFrom`: Direction from which the notification should arrive ("left", "right", "top", "bottom").
+- `element`: Customise your own HTML element to be displayed in the notification.
+
+`<button type='button' data-fj='toggle-btn'>Close</button>` 
+To enable manual closing of the current element, set the `data-fj='toggle-btn'` attribute to button.
+
+## License
+
+Frutjam is Open Source project licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
+
+## Support
+
+For any questions or issues, please [open an issue](https://github.com/nezanuha/frutjam/issues) on GitHub.

package/package.json

@@ -1,34 +1,37 @@
-{
-  "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.3",
+  "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",
+    "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 2024 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,22 @@
-import { TimeoutId } from './types';
+import type { ArriveFrom, TimeoutId } from './types';
 
 export interface NotificationOptions {
     effect?: string;
     escapeTime?: number;
     arriveTime?: number;
     autoClose?: boolean;
+    arriveFrom?: ArriveFrom;
     element?: HTMLElement | null;
+}
+
+export interface NotificationConfig {
+    arriveFrom: {
+        right: string;
+        left: string;
+        bottom: string;
+        top: string;
+    };
+    effects: {
+        [key: string]: string;
+    };
 }

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
+    }
+}