frutjam 0.0.6 → 0.0.8-alpha.1

package/README.md

@@ -1,78 +0,0 @@
-## 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";
-```
-
-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/src/index.ts

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

package/src/plugins/notification/config.ts

@@ -1,14 +0,0 @@
-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,124 +0,0 @@
-/*
-* Notification
-* @version: 0.0.2
-* @author: Nezanuha
-* @license: Licensed under MIT
-* Copyright 2024 Nezanuha
-*/
-
-import { NotificationOptions } from './interfaces';
-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, 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.init();
-    }
-
-    render() {
-        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);
-            }
-
-            // Check if the element being appended is not the same as the container itself
-            if (this.element !== container) {
-                container.appendChild(this.element);
-            }
-
-
-            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(() => {
-            this.toggleNotification(this.element); // Pass the current element to toggleNotification
-            this.timeoutId = null;
-        }, this.arriveTime);
-    
-        if (this.autoClose === true) {
-            this.timeoutId = setTimeout(() => {
-                this.toggleNotification(this.element, 'close'); // Pass the current element to toggleNotification
-                this.timeoutId = null;
-            }, this.escapeTime);
-        }
-    }
-
-    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 {
-            console.error("Container is null or not an HTMLElement.");
-        }
-    }     
-}

package/src/plugins/notification/interfaces.ts

@@ -1,22 +0,0 @@
-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

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

package/src/plugins/popover/index.ts

@@ -1,45 +0,0 @@
-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

@@ -1,12 +0,0 @@
-@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
-    }
-}

package/src/plugins/tabs/index.ts

@@ -1,112 +0,0 @@
-
-/*
-* Tabs
-* @version: 0.0.2
-* @author: Nezanuha
-* @license: Licensed under MIT
-* Copyright 2024 Nezanuha
-*/
-
-import { TabOptions } from "./types";
-
-export default class Tabs {
-    private tabs: HTMLElement[];
-    private tabContents: HTMLElement[];
-    private options: TabOptions;
-
-    constructor(options?: TabOptions) {
-        this.tabs = Array.from(document.querySelectorAll('.tab'));
-        this.tabContents = Array.from(document.querySelectorAll('.tab-content'));
-        this.options = options || {};
-
-        this.init();
-        this.handleInitialTabState();
-    }
-
-    private init() {
-        this.tabs.forEach(tab => {
-            tab.addEventListener('click', () => this.toggleTab(tab));
-        });
-    }
-
-    private toggleTab(selectedTab: HTMLElement) {
-        const tabId = selectedTab.dataset.tab;
-
-        if (!tabId || selectedTab.classList.contains('disabled')) return;
-
-        this.tabs.forEach(tab => {
-            tab.classList.remove('active');
-        });
-        selectedTab.classList.add('active');
-
-        this.tabContents.forEach(content => {
-            if (content.id === tabId) {
-                content.style.display = 'block';
-                this.animateTab(content);
-                if (this.options.onTabActive) {
-                    this.options.onTabActive(tabId);
-                }
-            } else {
-                content.style.display = 'none';
-            }
-        });
-    }
-
-    private animateTab(content: HTMLElement) {
-        // Implement your animation logic here
-        content.style.opacity = '0';
-        setTimeout(() => {
-            content.style.opacity = '1';
-        }, 300);
-    }
-
-    private handleInitialTabState() {
-        if (this.options.disableTabs === 'all') {
-            this.disableAllTabs();
-        } else if (Array.isArray(this.options.disableTabs)) {
-            this.disableTabs(this.options.disableTabs);
-        } else if (this.options.enableTabs === 'all') {
-            this.enableAllTabs();
-        } else if (Array.isArray(this.options.enableTabs)) {
-            this.enableTabs(this.options.enableTabs);
-        }
-    }
-
-    private disableAllTabs() {
-        this.tabs.forEach(tab => {
-            tab.classList.add('disabled');
-        });
-    }
-
-    private enableAllTabs() {
-        this.tabs.forEach(tab => {
-            tab.classList.remove('disabled');
-        });
-    }
-
-    enableTabs(tabIds?: string[] | 'all') {
-        if (tabIds === 'all') {
-            this.enableAllTabs();
-        } else if (Array.isArray(tabIds)) {
-            tabIds.forEach(tabId => {
-                const tab = this.tabs.find(tab => tab.dataset.tab === tabId);
-                if (tab) {
-                    tab.classList.remove('disabled');
-                }
-            });
-        }
-    }
-
-    disableTabs(tabIds?: string[] | 'all') {
-        if (tabIds === 'all') {
-            this.disableAllTabs();
-        } else if (Array.isArray(tabIds)) {
-            tabIds.forEach(tabId => {
-                const tab = this.tabs.find(tab => tab.dataset.tab === tabId);
-                if (tab) {
-                    tab.classList.add('disabled');
-                }
-            });
-        }
-    }
-}

package/src/plugins/tabs/types.ts

@@ -1,7 +0,0 @@
-type TabOptions = {
-    disableTabs?: string[] | 'all'; // Array of tab IDs to disable or 'all' to disable all tabs
-    enableTabs?: string[] | 'all'; // Array of tab IDs to enable or 'all' to enable all tabs
-    onTabActive?: (tabId: string) => void;
-};
-
-export type { TabOptions }