npm - @boomitra/carbon-calculator - Versions diffs - 0.2.1 → 0.2.2 - Mend

@boomitra/carbon-calculator 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +15 -13
package/QUICK_START.md +0 -195
package/WIDGET_INTEGRATION_GUIDE.md +0 -367
package/dist/index.html +0 -35
package/dist/vite.svg +0 -1

package/package.json CHANGED Viewed

@@ -1,17 +1,4 @@
 {
-  "name": "@boomitra/carbon-calculator",
-  "version": "0.2.1",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "dist/assets/index-DxrxmbE-.js",
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE",
-    "QUICK_START.md",
-    "WIDGET_INTEGRATION_GUIDE.md"
-  ],
   "browserslist": {
     "development": [
       "last 1 chrome version",
@@ -39,6 +26,17 @@
     "react-router-dom": "^7.5.0",
     "web-vitals": "^4.2.4"
   },
+  "main": "dist/package/index.cjs.js",
+  "module": "dist/package/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/package/index.es.js",
+      "require": "./dist/package/index.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
     "react": ">=17 <20",
     "react-dom": ">=17 <20"
@@ -59,6 +57,10 @@
   "eslintConfig": {
     "root": true
   },
+  "name": "@boomitra/carbon-calculator",
+  "private": false,
+  "type": "module",
+  "version": "0.2.2",
   "scripts": {
     "start": "vite",
     "build": "vite build",

package/QUICK_START.md DELETED Viewed

@@ -1,195 +0,0 @@
-# 🚀 Quick Start - Inject Calculator into Another Project
-## ✅ What's Already Done
-Your widget has been successfully built! Here's what you have:
-- **Built Widget File**: `dist/carbon-calculator-widget.iife.js` (500.83 KB, gzipped: 188.34 KB)
-- **Test Page**: `test-widget.html` (working at http://localhost:8000/test-widget.html)
-- **Full Documentation**: `WIDGET_INTEGRATION_GUIDE.md`
----
-## 📋 3 Simple Steps to Inject into Any Project
-### Step 1: Get the Widget File
-```bash
-# The widget is already built in:
-dist/carbon-calculator-widget.iife.js
-```
-### Step 2: Upload to Your Server
-Upload `dist/carbon-calculator-widget.iife.js` to:
-- Your website's `/assets/` or `/js/` folder
-- A CDN (AWS S3, Cloudflare, etc.)
-- Any publicly accessible URL
-### Step 3: Add 2 Lines of Code
-Add these to any HTML page where you want the calculator:
-```html
-<!-- Load the widget -->
-<script src="https://your-domain.com/path/to/carbon-calculator-widget.iife.js"></script>
-<!-- Display the widget -->
-<carbon-calculator-widget></carbon-calculator-widget>
-```
-**That's it!** 🎉
----
-## 💡 Real-World Examples
-### Example 1: Plain HTML Website
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>My Website</title>
-</head>
-<body>
-    <h1>Calculate Your Carbon Footprint</h1>
-    <!-- Widget goes here -->
-    <carbon-calculator-widget></carbon-calculator-widget>
-    <!-- Load widget script -->
-    <script src="/assets/carbon-calculator-widget.iife.js"></script>
-</body>
-</html>
-```
-### Example 2: WordPress
-1. Upload `carbon-calculator-widget.iife.js` to your theme's folder or media library
-2. Edit your page in HTML mode and add:
-```html
-<script src="/wp-content/themes/your-theme/carbon-calculator-widget.iife.js"></script>
-<carbon-calculator-widget></carbon-calculator-widget>
-```
-### Example 3: React App
-```jsx
-import { useEffect } from 'react';
-function CalculatorPage() {
-  useEffect(() => {
-    const script = document.createElement('script');
-    script.src = '/carbon-calculator-widget.iife.js';
-    document.body.appendChild(script);
-  }, []);
-  return (
-    <div>
-      <h1>Carbon Calculator</h1>
-      <carbon-calculator-widget></carbon-calculator-widget>
-    </div>
-  );
-}
-```
-### Example 4: Shopify
-1. Upload the file to Shopify Files
-2. In your theme editor, add a Custom HTML section:
-```html
-<script src="{{ 'carbon-calculator-widget.iife.js' | asset_url }}"></script>
-<carbon-calculator-widget></carbon-calculator-widget>
-```
----
-## 🧪 Testing Locally (Already Set Up!)
-You can test the widget right now:
-1. **Test Page**: http://localhost:8000/test-widget.html
-2. **Preview Build**: http://localhost:4173/
-Both are currently running! Open either URL in your browser to see the widget in action.
----
-## 🎨 Customizing the Container
-You can style the widget container (but not the widget internals due to Shadow DOM):
-```html
-<div style="max-width: 900px; margin: 50px auto;">
-    <carbon-calculator-widget></carbon-calculator-widget>
-</div>
-```
-Or with CSS:
-```css
-carbon-calculator-widget {
-    display: block;
-    max-width: 1000px;
-    margin: 0 auto;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-}
-```
----
-## 📦 Files You Need
-Only **ONE** file is needed to inject the widget anywhere:
-```
-dist/carbon-calculator-widget.iife.js
-```
-This file contains:
-- ✅ All JavaScript code
-- ✅ All CSS styles (inlined)
-- ✅ React and dependencies
-- ✅ Material-UI components
-- ✅ Everything needed to run
----
-## 🔄 Rebuilding After Changes
-If you make changes to the calculator and want to update the widget:
-```bash
-# 1. Make your changes to the source code
-# 2. Rebuild the widget
-npm run build
-# 3. Test it
-npm run preview
-# or
-python3 -m http.server 8000
-# 4. Upload the new dist/carbon-calculator-widget.iife.js to your server
-```
----
-## ✨ Key Features
-- **🔒 Isolated**: Uses Shadow DOM - won't conflict with your site's styles
-- **📱 Responsive**: Works on all screen sizes
-- **🚀 Fast**: Single file, optimized and gzipped
-- **🌐 Universal**: Works with any framework or plain HTML
-- **💪 Self-contained**: No external dependencies needed
----
-## 🆘 Need Help?
-- **Full Guide**: See `WIDGET_INTEGRATION_GUIDE.md`
-- **Test Page**: Open `test-widget.html` to see a working example
-- **Source Code**: Check `src/widget.jsx` to see how it works
----
-## 📊 Current Status
-✅ Widget built successfully
-✅ Test page created and working
-✅ Local servers running for testing
-✅ Ready to deploy!
-**Next Step**: Upload `dist/carbon-calculator-widget.iife.js` to your target website and add the 2 lines of code! 🚀

package/WIDGET_INTEGRATION_GUIDE.md DELETED Viewed

@@ -1,367 +0,0 @@
-# Carbon Calculator Widget - Integration Guide
-This guide explains how to build and integrate the Carbon Calculator widget into any website or application.
----
-## 📦 Step 1: Build the Widget
-First, you need to build the widget into a single JavaScript file that can be embedded anywhere.
-### Build Command
-```bash
-npm run build
-```
-This will create a production-ready widget file in the `dist/` folder:
-- **File**: `dist/carbon-calculator-widget.iife.js`
-- **Format**: IIFE (Immediately Invoked Function Expression) - works in any browser
-- **Size**: Single file with all CSS and JS bundled together
----
-## 🚀 Step 2: Deploy the Widget File
-You have several options for hosting the widget:
-### Option A: CDN (Recommended for Production)
-Upload `carbon-calculator-widget.iife.js` to a CDN like:
-- AWS S3 + CloudFront
-- Vercel
-- Netlify
-- Any static file hosting service
-### Option B: Local Server
-Place the file on your web server in a publicly accessible directory.
-### Option C: Same Domain
-If integrating into your own website, copy the file to your public assets folder.
----
-## 🔧 Step 3: Integrate into Another Project
-Once the widget is built and hosted, you can embed it in **any HTML page** with just 2 lines of code:
-### Basic Integration
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Website with Carbon Calculator</title>
-</head>
-<body>
-    <h1>Welcome to My Website</h1>
-    <!-- 1️⃣ Load the widget script -->
-    <script src="https://your-cdn.com/carbon-calculator-widget.iife.js"></script>
-    <!-- 2️⃣ Add the widget anywhere on your page -->
-    <carbon-calculator-widget></carbon-calculator-widget>
-</body>
-</html>
-```
-### Alternative: Legacy Container Method
-If you prefer using a div with an ID:
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Website with Carbon Calculator</title>
-</head>
-<body>
-    <h1>Welcome to My Website</h1>
-    <!-- The widget will automatically inject itself into this div -->
-    <div id="boomitra-carbon-calculator"></div>
-    <!-- Load the widget script -->
-    <script src="https://your-cdn.com/carbon-calculator-widget.iife.js"></script>
-</body>
-</html>
-```
----
-## 🎨 Step 4: Styling & Customization
-### Shadow DOM Isolation
-The widget uses **Shadow DOM**, which means:
-- ✅ Your website's CSS won't break the widget
-- ✅ The widget's CSS won't affect your website
-- ✅ Complete style isolation and encapsulation
-### Custom Positioning
-You can wrap the widget in a container and style it:
-```html
-<div style="max-width: 800px; margin: 50px auto; padding: 20px;">
-    <carbon-calculator-widget></carbon-calculator-widget>
-</div>
-```
-Or use CSS:
-```css
-carbon-calculator-widget {
-    display: block;
-    max-width: 900px;
-    margin: 0 auto;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-}
-```
----
-## 📋 Complete Integration Examples
-### Example 1: WordPress Site
-```html
-<!-- Add to your WordPress page/post in HTML mode -->
-<script src="https://your-cdn.com/carbon-calculator-widget.iife.js"></script>
-<carbon-calculator-widget></carbon-calculator-widget>
-```
-### Example 2: React Application
-```jsx
-import { useEffect } from 'react';
-function MyComponent() {
-  useEffect(() => {
-    // Load the widget script dynamically
-    const script = document.createElement('script');
-    script.src = 'https://your-cdn.com/carbon-calculator-widget.iife.js';
-    script.async = true;
-    document.body.appendChild(script);
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
-  return (
-    <div>
-      <h1>My React App</h1>
-      <carbon-calculator-widget></carbon-calculator-widget>
-    </div>
-  );
-}
-```
-### Example 3: Next.js Application
-```jsx
-// pages/calculator.js
-import Head from 'next/head';
-import { useEffect } from 'react';
-export default function CalculatorPage() {
-  useEffect(() => {
-    const script = document.createElement('script');
-    script.src = 'https://your-cdn.com/carbon-calculator-widget.iife.js';
-    script.async = true;
-    document.body.appendChild(script);
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
-  return (
-    <>
-      <Head>
-        <title>Carbon Calculator</title>
-      </Head>
-      <main>
-        <h1>Calculate Your Carbon Footprint</h1>
-        <carbon-calculator-widget></carbon-calculator-widget>
-      </main>
-    </>
-  );
-}
-```
-### Example 4: Vue.js Application
-```vue
-<template>
-  <div>
-    <h1>My Vue App</h1>
-    <carbon-calculator-widget></carbon-calculator-widget>
-  </div>
-</template>
-<script>
-export default {
-  name: 'CalculatorPage',
-  mounted() {
-    const script = document.createElement('script');
-    script.src = 'https://your-cdn.com/carbon-calculator-widget.iife.js';
-    script.async = true;
-    document.body.appendChild(script);
-  }
-}
-</script>
-```
-### Example 5: Plain HTML with Local File
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Carbon Calculator Demo</title>
-</head>
-<body>
-    <div style="max-width: 1000px; margin: 50px auto; padding: 20px;">
-        <h1>Carbon Footprint Calculator</h1>
-        <p>Calculate your environmental impact below:</p>
-        <carbon-calculator-widget></carbon-calculator-widget>
-    </div>
-    <!-- Load from local file -->
-    <script src="/path/to/carbon-calculator-widget.iife.js"></script>
-</body>
-</html>
-```
----
-## 🧪 Step 5: Testing Locally
-Before deploying, you can test the widget locally:
-### 1. Build the widget
-```bash
-npm run build
-```
-### 2. Preview the build
-```bash
-npm run preview
-```
-This will start a local server (usually at `http://localhost:4173`) where you can test the built widget.
-### 3. Create a test HTML file
-Create `test-widget.html` in your project root:
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Widget Test</title>
-</head>
-<body>
-    <h1>Testing Carbon Calculator Widget</h1>
-    <carbon-calculator-widget></carbon-calculator-widget>
-    <script src="./dist/carbon-calculator-widget.iife.js"></script>
-</body>
-</html>
-```
-### 4. Serve the test file
-Use a simple HTTP server:
-```bash
-# Using Python
-python3 -m http.server 8000
-# Using Node.js (if you have http-server installed)
-npx http-server -p 8000
-```
-Then open `http://localhost:8000/test-widget.html` in your browser.
----
-## ✅ Verification Checklist
-After integration, verify:
-- [ ] Widget loads without console errors
-- [ ] All styles are applied correctly
-- [ ] Calculator functionality works (input fields, calculations)
-- [ ] Widget is responsive on mobile devices
-- [ ] Widget doesn't conflict with your site's existing styles
-- [ ] No JavaScript errors in browser console
----
-## 🔍 Troubleshooting
-### Widget doesn't appear
-- Check browser console for errors
-- Verify the script URL is correct and accessible
-- Ensure the script is loaded before the widget element
-### Styles are missing
-- The widget uses Shadow DOM, so styles are bundled
-- Check if the build process completed successfully
-- Verify the CSS was inlined during build
-### Widget conflicts with site styles
-- This shouldn't happen due to Shadow DOM isolation
-- If it does, check if you're using any global CSS that targets custom elements
----
-## 📊 Browser Support
-The widget supports all modern browsers:
-- ✅ Chrome/Edge (latest)
-- ✅ Firefox (latest)
-- ✅ Safari (latest)
-- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
-**Note**: Internet Explorer is not supported (requires Shadow DOM support).
----
-## 🚢 Production Deployment Checklist
-Before deploying to production:
-1. [ ] Run `npm run build` to create production bundle
-2. [ ] Test the built widget locally
-3. [ ] Upload `dist/carbon-calculator-widget.iife.js` to your CDN/server
-4. [ ] Update the script URL in your integration code
-5. [ ] Test on staging environment
-6. [ ] Verify on multiple browsers and devices
-7. [ ] Check performance and load times
-8. [ ] Deploy to production
----
-## 📝 Summary
-**Quick Start:**
-1. Build: `npm run build`
-2. Upload: `dist/carbon-calculator-widget.iife.js` to your server
-3. Embed: Add script tag and `<carbon-calculator-widget>` element
-That's it! Your carbon calculator is now a portable widget that can be embedded anywhere! 🎉

package/dist/index.html DELETED Viewed

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Carbon Calculator Widget Test</title>
-    <style>
-      body {
-        font-family: sans-serif;
-        padding: 40px;
-        background: #f0f0f0;
-      }
-      .host-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        background: white;
-        padding: 20px;
-        border-radius: 8px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-      }
-    </style>
-  </head>
-  <body>
-    <h1>External Website Hosting the Widget</h1>
-    <p>Below is the calculator, isolated in Shadow DOM:</p>
-    <div class="host-container">
-      <!-- The target div as requested -->
-      <div id="boomitra-carbon-calculator"></div>
-    </div>
-    <!-- Load the built script -->
-    <script src="../dist/carbon-calculator-widget.iife.js"></script>
-  </body>
-</html>

package/dist/vite.svg DELETED Viewed

@@ -1 +0,0 @@

- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>