@modernman00/shared-js-lib

npm Usage Guide for @modernman00/shared-js-lib This guide explains how to install and use the @modernman00/shared-js-lib package, now available on the npm registry, in your Node.js or JavaScript project. Installation To install the package from npm, run the following command in your project directory: npm install @modernman00/shared-js-lib

This installs the latest published version from the npm registry. Ensure you have an internet connection and npm access to the @modernman00 scope (authentication may be required if the package is private).

Usage The package exports various utility functions from its modules (e.g., Http.js, Utility.js). Import and use them as follows: Example: Using fetchData from Http.js Assume Http.js exports a function to fetch data using Axios: import { fetchData } from '@modernman00/shared-js-lib';

async function getUserData() { try { const userData = await fetchData('/api/users/1', { method: 'GET' }); console.log(userData); } catch (error) { console.error('Error fetching data:', error.message); } }

getUserData();

Example: Using sanitizeInput from Utility.js Assume Utility.js exports a sanitization function: import { sanitizeInput } from '@modernman00/shared-js-lib';

const cleanInput = sanitizeInput('alert("xss")'); console.log(cleanInput); // Sanitized output

Example: SweetAlert2 Notifications & Modals

import { swalToast, swalSuccess, swalError, swalConfirm } from '@modernman00/shared-js-lib';

// Fast non-blocking toast at top-end
await swalToast('Profile updated successfully!');

// Prominent success or error modal
await swalSuccess('Your application has been submitted.', false);
await swalError('Payment processing failed. Please check your card.');

// Interactive confirmation dialog
const proceed = await swalConfirm('Delete Account', 'Are you sure? This cannot be undone.');
if (proceed) {
  // perform deletion
}

Example: Framework-Agnostic Button Spinners

import { setButtonLoading, clearButtonLoading, withButtonSpinner } from '@modernman00/shared-js-lib';

// Manual trigger
setButtonLoading('submitButton'); // Disables button & shows smooth SVG spinner
// ... do work
clearButtonLoading('submitButton'); // Restores original text & enables button

// Automatic wrapper with guaranteed cleanup:
await withButtonSpinner('submitButton', async () => {
  await apiCall();
});

Example: Modern Form Submission (postFormData)

import { postFormData } from '@modernman00/shared-js-lib';

// Modern clean syntax: auto-handles button spinner & SweetAlert2 without needing a notification element!
await postFormData('/event/update', 'glbVenueForm', {
  button: '#glbVenueSaveBtn', // auto-spins & disables button, restores in finally{}
  css: 'bootstrap',          // or 'bulma', 'tailwind'
  redirect: null             // optional redirect URL
});

Example: Advanced Enterprise Features

import {
  withSubmissionLock,
  setupNetworkListeners,
  attachInlineValidation,
  copyToClipboard,
  setupAuthExpiryInterceptor
} from '@modernman00/shared-js-lib';

// 1. Double Submit Protection Lock
await withSubmissionLock('payout_action', async () => {
  await submitPayment();
});

// 2. Automatic Online/Offline Connection Alerts
setupNetworkListeners(); // Automatically alerts user when connection drops or reconnects

// 3. Real-Time Inline Field Validation with Micro-Feedback
attachInlineValidation('userEmail', { type: 'email' });
attachInlineValidation('userPassword', { type: 'password' });

// 4. One-Click Copy-to-Clipboard with SweetAlert2 Toast
await copyToClipboard('INVITE-2026-XYZ', 'Invite code copied to clipboard!');

// 5. Global 401 Session Expiry Interceptor & Re-login Modal
setupAuthExpiryInterceptor({ loginUrl: '/auth/login' });

Configuration

Ensure your project uses ES Modules by adding "type": "module" to your package.json, or use a bundler like Laravel Mix/Webpack. If using Laravel Mix, configure an alias in webpack.mix.js:const mix = require('laravel-mix'); const path = require('path');

mix.js('resources/js/app.js', 'public/js') .webpackConfig({ resolve: { alias: { '@shared': path.resolve(__dirname, 'node_modules/@modernman00/shared-js-lib') } } });

Updating the Package To update to the latest version, run: npm update @modernman00/shared-js-lib

Check the latest version on the npm website (https://www.npmjs.com/package/@modernman00/shared-js-lib) or with: npm info @modernman00/shared-js-lib version

If a specific version is needed, install it directly: npm install @modernman00/[email protected]

Rebuild assets if using a bundler: npm run dev

Troubleshooting

Installation Fails: Ensure you have npm access and the package is published. Use verbose mode for details:npm install @modernman00/shared-js-lib --verbose

TypeScript Errors: Add declaration files (e.g., Http.d.ts) to the package if needed, and republish. Permission Issues: If the package is scoped and private, log in to npm:npm login