utilidades-js 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,23 @@
-# Temporary Holding Version
+# etec-utils
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Biblioteca JavaScript simples para uso direto pela Vercel.
+
+## URL pública
+
+```js
+import * as utils from "https://etec-utils.vercel.app/main.js";
+```
+
+## Exemplos
+
+```js
+utils.createNotify()
+    .setText("Olá!")
+    .setTime(5)
+    .setType("success")
+    .show();
+
+utils.gid("editor");
+
+utils.random(1, 10);
+```

package/index.d.ts

@@ -0,0 +1,67 @@
+export interface RandomIntBuilder {
+    setMin(value: number): this;
+    setMax(value: number): this;
+    value(): number;
+}
+
+export interface RandomFloatBuilder {
+    setMin(value: number): this;
+    setMax(value: number): this;
+    setCases(value: number): this;
+    /** Retorna o número decimal como string, pois a implementação usa toFixed(). */
+    value(): string;
+}
+
+export interface NormalizeBuilder {
+    toLower(): this;
+    toUpper(): this;
+    firstUpper(): this;
+    /** Remove diacríticos e retorna o texto normalizado. */
+    get(): string;
+}
+
+export interface NotifyBuilder {
+    setText(value: string): this;
+    setTime(value: number): this;
+    setType(value: "info" | "success" | "warning" | "error" | string): this;
+    show(): this;
+}
+
+export interface NotifyContainer {
+    setStyle(styles: Partial<CSSStyleDeclaration> & Record<string, string>): this;
+    get(): HTMLDivElement;
+}
+
+export interface ModalInput {
+    id?: string;
+    type?: string;
+    placeholder?: string;
+}
+
+export interface ModalBuilder {
+    setName(value: string): this;
+    setContent(value: string): this;
+    setTitle(value: string): this;
+    setDescription(value: string): this;
+    setCallback(value: (event: MouseEvent) => void): this;
+    setButtonText(value: string): this;
+    inputs(elements: ModalInput[]): this;
+    show(): void;
+}
+
+export interface ModalContainer {
+    get(): HTMLDivElement;
+    getOverlay(): HTMLDivElement;
+}
+
+export function gid(id: string): HTMLElement | null;
+export function randomInt(): RandomIntBuilder;
+export function randomFloat(): RandomFloatBuilder;
+export function isPrime(n: number): boolean;
+export function isEven(n: number): boolean;
+export function isOdd(n: number): boolean;
+export function normalize(text?: string): NormalizeBuilder;
+export function notifyContainer(): NotifyContainer;
+export function createNotify(): NotifyBuilder;
+export function modalContainer(): ModalContainer;
+export function createModal(): ModalBuilder;

package/main.js

@@ -0,0 +1 @@
+export * from "./modules.js";

package/modal/modal.js

@@ -0,0 +1,167 @@
+export function modalContainer() {
+    let container = document.getElementById("modalContainer");
+    let overlay = document.getElementById("modalOverlay");
+
+    if (!container) {
+        container = document.createElement("div");
+        container.id = "modalContainer";
+
+        document.body.appendChild(container);
+    }
+
+    if (!overlay) {
+        overlay = document.createElement("div");
+        overlay.id = "modalOverlay";
+
+        document.body.appendChild(overlay);
+    }
+
+    return {
+        get() {
+            return container;
+        },
+        getOverlay() {
+            return overlay;
+        }
+    };
+}
+
+export function createModal() {
+    const options = {
+        name: "Meu Modal",
+        title: "Modal sem título",
+        content: "Este modal não tem informações",
+        description: "Modal criado com utilidades-js",
+        buttonText: "Fechar modal",
+        callback: () => console.log("botão clicado"),
+        inputs: []
+    };
+
+    const modal = {
+        setName(value) {
+            options.name = value;
+            return this;
+        },
+        setContent(value) {
+            options.content = value;
+            return this;
+        },
+
+        setTitle(value) {
+            options.title = value;
+            return this;
+        },
+
+        setDescription(value) {
+            options.description = value;
+            return this;
+        },
+
+        setCallback(value) {
+            options.callback = value;
+            return this;
+        },
+
+        setButtonText(value) {
+            options.buttonText = value;
+            return this;
+        },
+
+        inputs(elements) {
+            options.inputs = elements;
+            return this;
+        },
+
+        show() {
+            const { get, getOverlay } = modalContainer();
+
+            const container = get();
+            const overlay = getOverlay();
+
+            container.innerHTML = "";
+
+            const modalElement = document.createElement("div");
+            modalElement.classList.add("modal");
+
+            modalElement.innerHTML = `
+                <div class="top">
+                    <p>${options.title}</p>
+                    <button id="close-modal">X</button>
+                </div>
+
+                <div class="content">
+                    ${options.content}
+                </div>
+
+                <div class="inputs"></div>
+
+                <div class="bottom">
+                    ${options.description}
+                    <button id="modal-action">
+                        ${options.buttonText}
+                    </button>
+                </div>
+            `;
+
+            const inputsContainer = modalElement.querySelector(".inputs");
+
+            options.inputs.forEach(input => {
+                const element = document.createElement("input");
+
+
+                element.id = input.id ?? "";
+                element.type = input.type ?? "text";
+                element.placeholder = input.placeholder ?? "";
+
+                inputsContainer.appendChild(element);
+            });
+
+            container.appendChild(modalElement);
+
+            overlay.style.display = "block";
+
+            const closeButton =
+                modalElement.querySelector("#close-modal");
+
+            const actionButton =
+                modalElement.querySelector("#modal-action");
+
+            function closeModal() {
+                modalElement.remove();
+                overlay.style.display = "none";
+            }
+
+            closeButton.addEventListener("click", closeModal);
+
+            if (typeof options.callback === "function") {
+                actionButton.addEventListener(
+                    "click",
+                    options.callback
+                );
+            }
+
+            actionButton.addEventListener("click", closeModal);
+
+            overlay.onclick = closeModal;
+        }
+    };
+
+    return modal;
+}
+
+function loadStyle() {
+    if (document.getElementById("modalStyle")) return;
+
+    const style = document.createElement("link");
+
+    style.id = "modalStyle";
+    style.rel = "stylesheet";
+    style.href = new URL("./modalStyle.css", import.meta.url).href;
+    document.head.appendChild(style);
+}
+
+function init() {
+    loadStyle();
+}
+
+init();

package/modal/modalStyle.css

@@ -0,0 +1,120 @@
+#modalContainer {
+    position: fixed;
+    z-index: 100000000000000000000000;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: min(90%, 500px);
+}
+
+#modalOverlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000000000;
+    background: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(3px);
+}
+
+.modal {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 24px;
+    background: #fff;
+    border-radius: 16px;
+    border: 1px solid #e5e5e5;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
+    font-family: Arial, sans-serif;
+}
+
+.top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 15px;
+    margin-bottom: 20px;
+}
+
+.top p {
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+    color: #222;
+}
+
+.top #close-modal {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: none;
+    border-radius: 10px;
+    background: #f1f1f1;
+    color: #555;
+    font-size: 18px;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.top #close-modal:hover {
+    background: #e5e5e5;
+    color: #111;
+}
+
+.content {
+    margin-bottom: 20px;
+    color: #666;
+    line-height: 1.5;
+}
+
+.inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.inputs input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 12px 14px;
+    border: 1px solid #d6d6d6;
+    border-radius: 10px;
+    outline: none;
+    font-size: 15px;
+    transition: 0.2s;
+}
+
+.inputs input:focus {
+    border-color: #666;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
+}
+
+.bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 15px;
+    padding-top: 18px;
+    border-top: 1px solid #eee;
+    color: #777;
+    font-size: 14px;
+}
+
+.bottom #modal-action {
+    width: 100%;
+    padding: 10px 18px;
+    border: none;
+    border-radius: 10px;
+    background: #222;
+    color: white;
+    font-size: 14px;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.bottom #modal-action:hover {
+    background: #444;
+}
+
+.bottom #modal-action:active {
+    transform: scale(0.97);
+}

package/modules.js

@@ -0,0 +1,6 @@
+export * from "./notify/notify.js";
+export * from "./utils/gid.js";
+export * from "./utils/random.js";
+export * from "./utils/numbers.js";
+export * from "./utils/normalize.js";
+export * from "./modal/modal.js";

package/notify/notify.js

@@ -0,0 +1,114 @@
+export function notifyContainer() {
+    let container = document.getElementById("notifyContainer");
+
+    if (!container) {
+        container = document.createElement("div");
+        container.id = "notifyContainer";
+
+        document.body.appendChild(container);
+    }
+
+    return {
+        setStyle(styles) {
+            for (const property in styles) {
+                container.style[property] = styles[property];
+            }
+
+            return this;
+        },
+
+        get() {
+            return container;
+        }
+    };
+}
+
+function loadStyle() {
+    if (document.getElementById("notifyStyle")) return;
+
+    const style = document.createElement("link");
+
+    style.id = "notifyStyle";
+    style.rel = "stylesheet";
+    style.href = new URL("./notifyStyle.css", import.meta.url).href;
+
+    document.head.appendChild(style);
+}
+
+export function createNotify() {
+    const options = {
+        text: "",
+        time: 10,
+        type: "success"
+    };
+
+    return {
+        setText(value) {
+            options.text = value;
+            return this;
+        },
+
+        setTime(value) {
+            options.time = value;
+            return this;
+        },
+
+        setType(value) {
+            options.type = value;
+            return this;
+        },
+
+        show() {
+            const container = notifyContainer().get();
+
+            const notify = document.createElement("div");
+
+            notify.className = `notify ${options.type}`;
+
+            let displayTime = options.time;
+
+            notify.innerHTML = `
+                <p>${options.text}</p>
+                <p>${displayTime}s</p>
+            `;
+
+            container.appendChild(notify);
+
+            const index = container.children.length;
+
+            setTimeout(() => {
+                requestAnimationFrame(() => {
+                    notify.classList.add("active");
+                });
+            }, index * 100);
+
+            const interval = setInterval(() => {
+                displayTime--;
+
+                notify.innerHTML = `
+                    <p>${options.text}</p>
+                    <p>${displayTime}s</p>
+                `;
+            }, 1000);
+
+            setTimeout(() => {
+                clearInterval(interval);
+
+                notify.classList.remove("active");
+
+                setTimeout(() => {
+                    notify.remove();
+                }, 300);
+            }, options.time * 1000);
+
+            return this;
+        }
+    };
+}
+
+function init() {
+    loadStyle();
+    notifyContainer();
+}
+
+init();

package/notify/notifyStyle.css

@@ -0,0 +1,73 @@
+#notifyContainer,
+.notify {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    overflow-x: hidden;
+}
+
+#notifyContainer {
+    width: 320px;
+    max-height: 160px;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    overflow-y: auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 5px;
+    scrollbar-width: thin;
+}
+
+.notify {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 70px;
+    width: 100%;
+    padding: 16px 18px;
+    border-radius: 14px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    background-color: rgb(199, 199, 255);
+    color: #202035;
+    transform: translateX(120%);
+    opacity: 0;
+    transition:
+        transform 0.35s ease,
+        opacity 0.35s ease;
+}
+
+.notify.active {
+    transform: translateX(0);
+    opacity: 1;
+}
+
+.notify p {
+    margin: 0;
+}
+
+.notify p:first-child {
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.notify p:last-child {
+    margin-top: 5px;
+
+    font-size: 12px;
+    opacity: 0.65;
+}
+
+.notify.success {
+    background-color: rgb(104, 255, 104);
+}
+
+.notify.warning {
+    background-color: orange;
+}
+
+.notify.error {
+    background-color: rgb(255, 52, 52);
+}

package/package.json

@@ -1,6 +1,30 @@
 {
   "name": "utilidades-js",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Biblioteca JavaScript com utilitários para DOM, notificações, modais e números.",
+  "type": "module",
+  "main": "./main.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./main.js"
+    }
+  },
+  "files": [
+    "main.js",
+    "modules.js",
+    "index.d.ts",
+    "notify/",
+    "modal/",
+    "utils/"
+  ],
+  "keywords": [
+    "javascript",
+    "utilities",
+    "dom",
+    "notifications",
+    "modal"
+  ],
+  "license": "MIT"
+}

package/utils/gid.js

@@ -0,0 +1,3 @@
+export function gid(id) {
+    return document.getElementById(id);
+}

package/utils/normalize.js

@@ -0,0 +1,28 @@
+export function normalize(text = "Nenhum texto informado") {
+
+    return {
+
+        toLower() {
+            text = text.toLowerCase();
+            return this;
+        },
+
+        toUpper() {
+            text = text.toUpperCase();
+            return this;
+        },
+
+        firstUpper() {
+            text = text.charAt(0).toUpperCase() + text.slice(1);
+            return this;
+        },
+
+        get() {
+            return text
+                .normalize("NFD")
+                .replace(/[\u0300-\u036f]/g, "");
+        }
+
+    };
+
+}

package/utils/numbers.js

@@ -0,0 +1,17 @@
+export function isPrime(n) {
+    if (n < 2) return false;
+
+    for (let i = 2; i <= Math.sqrt(n); i++) {
+        if (n % i === 0) return false;
+    }
+
+    return true;
+}
+
+export function isEven(n) {
+    return n % 2 === 0;
+}
+
+export function isOdd(n) {
+    return n % 2 !== 0;
+}

package/utils/random.js

@@ -0,0 +1,46 @@
+export function randomInt() {
+    let min = 0;
+    let max = 100;
+
+    return {
+        setMin(value) {
+            min = value;
+            return this;
+        },
+
+        setMax(value) {
+            max = value;
+            return this;
+        },
+
+        value() {
+            return Math.floor(
+                Math.random() * (max - min + 1)
+            ) + min;
+        }
+    };
+}
+
+export function randomFloat() {
+    let min = 0;
+    let max = 100;
+    let cases = 2
+
+    return {
+        setMin(value) {
+            min = value;
+            return this;
+        },
+        setMax(value) {
+            max = value;
+            return this
+        },
+        setCases(value) {
+            cases = value
+            return this
+        },
+        value() {
+            return (Math.random() * (max - min) + min).toFixed(cases)
+        }
+    }
+}