@boomitra/carbon-calculator 0.2.13 → 0.2.14

package/README.md

@@ -1,2 +1,111 @@
-# carbon-calculator
-Frontend Repo
+# Carbon Calculator
+
+A versatile Carbon Calculator available as both a React package and a standalone embeddable widget.
+
+## 📦 Usage as a React Package
+
+If you have an existing React application, you can install and use the component directly.
+
+### 1. Installation
+
+```bash
+npm install @boomitra/carbon-calculator
+```
+
+### 2. Integration
+
+Import the component and its styles in your application:
+
+```jsx
+import React from 'react';
+import CarbonCalculator from '@boomitra/carbon-calculator';
+import '@boomitra/carbon-calculator/style.css'; // Don't forget the styles!
+
+function App() {
+  return (
+    <div className="App">
+      <h1>Carbon Footprint Calculator</h1>
+      <CarbonCalculator />
+    </div>
+  );
+}
+
+export default App;
+```
+
+---
+
+## 🌐 Usage as an Embedded Widget
+
+You can embed the calculator into **any website** (HTML, WordPress, Webflow, Wix, etc.) using a simple script tag.
+
+### 1. Build the Widget
+
+To generate the standalone widget file:
+
+```bash
+npm run build:widget
+```
+
+This will create the widget file at: `dist-embed/carbon-calculator-widget.iife.js`
+
+### 2. Embed in HTML
+
+Add the following code to your website where you want the calculator to appear.
+
+
+
+```html
+<!-- Load the Widget Script -->
+<!-- Replace source with the actual path to your hosted file or CDN URL -->
+<script src="./dist-embed/carbon-calculator-widget.iife.js"></script>
+
+<!-- Add the Widget Element -->
+<carbon-calculator-widget></carbon-calculator-widget>
+```
+
+### Styling
+
+The widget uses **Shadow DOM** to encapsulate its styles, ensuring:
+- Your website's CSS won't break the widget.
+- The widget's CSS won't affect your website.
+
+You can style the positioning of the widget container using standard CSS:
+
+```css
+carbon-calculator-widget {
+  display: block;
+  max-width: 800px;
+  margin: 0 auto;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+```
+
+For more detailed integration guides (WordPress, Wix, etc.), see [WIDGET_INTEGRATION_GUIDE.md](./WIDGET_INTEGRATION_GUIDE.md).
+
+---
+
+## 🛠️ Development
+
+### Setup
+
+```bash
+npm install
+```
+
+### Run Locally
+
+```bash
+npm start
+```
+Runs the app in development mode at `http://localhost:5173`.
+
+### Build Commands
+
+- **Build Package**: `npm run build`
+  - Outputs to `dist-package/`
+  - Used for publishing to npm (ESM + CommonJS).
+  
+- **Build Widget**: `npm run build:widget`
+  - Outputs to `dist-embed/`
+  - Used for standalone embedding.