@aitronos/freddy-plugins 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.4.0 (2025-09-10)
+
+- Manual version bump (minor)
+
 ## 0.3.1 (2025-09-03)
 
 - Manual version bump (patch)

package/README.md

@@ -4,36 +4,39 @@ A comprehensive Vue.js component library with Storybook documentation, deployed
 
 ## 🚀 **Live Environments**
 
-| Environment | URL | Branch | Status |
-|-------------|-----|--------|--------|
-| **Development** | [dev-components.aitronos.com](https://dev-components.aitronos.com) | `develop` | ✅ Live |
-| **Staging** | [staging-components.aitronos.com](https://staging-components.aitronos.com) | `staging` | 🚧 Pending |
-| **Production** | [components.aitronos.com](https://components.aitronos.com) | `main` | 🚧 Pending |
+| Environment     | URL                                                                        | Branch    | Status     |
+| --------------- | -------------------------------------------------------------------------- | --------- | ---------- |
+| **Development** | [dev-components.aitronos.com](https://dev-components.aitronos.com)         | `develop` | ✅ Live    |
+| **Staging**     | [staging-components.aitronos.com](https://staging-components.aitronos.com) | `staging` | 🚧 Pending |
+| **Production**  | [components.aitronos.com](https://components.aitronos.com)                 | `main`    | 🚧 Pending |
 
 ## 🏗️ **Infrastructure & Costs**
 
 ### **Resource Allocation**
 
-| Environment | Memory | CPU | Max Instances | Estimated Cost/Month |
-|-------------|--------|-----|---------------|---------------------|
-| **Development** | 1Gi | 1 | 10 | ~$15-25 |
-| **Staging** | 1Gi | 1 | 10 | ~$15-25 |
-| **Production** | 2Gi | 2 | 20 | ~$30-50 |
+| Environment     | Memory | CPU | Max Instances | Estimated Cost/Month |
+| --------------- | ------ | --- | ------------- | -------------------- |
+| **Development** | 1Gi    | 1   | 10            | ~$15-25              |
+| **Staging**     | 1Gi    | 1   | 10            | ~$15-25              |
+| **Production**  | 2Gi    | 2   | 20            | ~$30-50              |
 
 ### **Cost Breakdown**
 
 **Google Cloud Run Pricing (Switzerland - europe-west6):**
+
 - **CPU**: $0.00002400 per vCPU-second
 - **Memory**: $0.00000250 per GiB-second
 - **Requests**: $0.40 per million requests
 
 **Estimated Monthly Costs:**
+
 - **Development**: $15-25 (low traffic, testing)
 - **Staging**: $15-25 (pre-production testing)
 - **Production**: $30-50 (live traffic)
 - **Total Estimated**: $60-100/month
 
 **Additional Costs:**
+
 - **Artifact Registry**: ~$5-10/month (Docker images)
 - **Cloud Build**: ~$5-15/month (CI/CD builds)
 - **Network Egress**: ~$5-10/month (traffic)
@@ -52,6 +55,7 @@ A comprehensive Vue.js component library with Storybook documentation, deployed
 - **Framework**: Vue.js 3 + TypeScript
 - **Documentation**: Storybook 7
 - **Package Manager**: Yarn 4.7.0
+- **Web Components**: Vue 3 Custom Elements (Angular/React support)
 - **Deployment**: Google Cloud Run
 - **CI/CD**: GitHub Actions
 - **Container Registry**: Artifact Registry
@@ -61,6 +65,7 @@ A comprehensive Vue.js component library with Storybook documentation, deployed
 ## 📦 **Components**
 
 ### **Core Components**
+
 - `Button` - Primary action buttons
 - `InputField` - Form input components
 - `Modal` - Dialog and modal components
@@ -68,12 +73,14 @@ A comprehensive Vue.js component library with Storybook documentation, deployed
 - `Pagination` - Navigation components
 
 ### **Specialized Components**
+
 - `ChatInterface` - Real-time chat components
 - `ApiInteraction` - API testing interface
 - `LoginRegister` - Authentication components
 - `IconLibrary` - Complete icon set (100+ icons)
 
 ### **Utility Components**
+
 - `Spinner` - Loading indicators
 - `ToastMessage` - Notification system
 - `Tooltip` - Information overlays
@@ -96,7 +103,7 @@ A comprehensive Vue.js component library with Storybook documentation, deployed
 # Development (develop branch)
 git push origin develop
 
-# Staging (staging branch)  
+# Staging (staging branch)
 git push origin staging
 
 # Production (main branch)
@@ -112,6 +119,15 @@ yarn install
 # Start Storybook locally
 yarn storybook
 
+# Build library
+yarn build
+
+# Build web components
+yarn build:webcomponents
+
+# Build both library and web components
+yarn build:all
+
 # Build Storybook
 yarn build-storybook
 
@@ -122,6 +138,31 @@ yarn test
 yarn vue-tsc --noEmit
 ```
 
+## 🌐 **Web Components Support**
+
+This library now supports web components, allowing you to use Vue 3 components in Angular, React, and any other framework that supports custom elements.
+
+### Quick Start
+
+```bash
+npm install @aitronos/freddy-plugins
+```
+
+```javascript
+// Import web components
+import "@aitronos/freddy-plugins/web-components";
+import "@aitronos/freddy-plugins/web-components.css";
+```
+
+```html
+<!-- Use as custom elements -->
+<freddy-button label="Click me" hierarchy="primary"></freddy-button>
+<freddy-input-field label="Email" type="email"></freddy-input-field>
+<freddy-icon-search size="24" color="#666"></freddy-icon-search>
+```
+
+For detailed web components documentation, see [WEB_COMPONENTS.md](./WEB_COMPONENTS.md).
+
 ## 📋 **Project Structure**
 
 ```
@@ -147,12 +188,14 @@ deployment/
 ## 🔐 **Security & Performance**
 
 ### **Security Features**
+
 - ✅ **HTTPS only** - All traffic encrypted
 - ✅ **Security headers** - XSS, CSRF protection
 - ✅ **Content Security Policy** - Resource restrictions
 - ✅ **No sensitive data** - Public component library
 
 ### **Performance Optimizations**
+
 - ✅ **Gzip compression** - Reduced transfer size
 - ✅ **Static asset caching** - 1-year cache headers
 - ✅ **CDN distribution** - Global edge locations
@@ -161,6 +204,7 @@ deployment/
 ## 🌐 **Custom Domains**
 
 ### **DNS Configuration**
+
 Add these CNAME records in Hostpoint.ch:
 
 ```
@@ -170,17 +214,20 @@ components.aitronos.com → freddy-storybook-prod-147074626467.europe-west6.run.
 ```
 
 ### **SSL Certificates**
+
 - Automatically managed by Google Cloud
 - Custom domains require verification in Google Cloud Console
 
 ## 📊 **Monitoring & Analytics**
 
 ### **Health Checks**
+
 - **Endpoint**: `/health` - Returns 200 OK
 - **Auto-restart**: Failed instances restart automatically
 - **Logging**: Cloud Run logs available in Google Cloud Console
 
 ### **Performance Metrics**
+
 - **Response time**: < 200ms average
 - **Uptime**: 99.9% SLA with Cloud Run
 - **Availability**: Multi-zone deployment
@@ -190,6 +237,7 @@ components.aitronos.com → freddy-storybook-prod-147074626467.europe-west6.run.
 ### **Common Issues**
 
 **Build Failures:**
+
 ```bash
 # Check TypeScript errors
 yarn vue-tsc --noEmit
@@ -199,6 +247,7 @@ yarn build-storybook
 ```
 
 **Deployment Issues:**
+
 ```bash
 # Check GitHub Actions logs
 # Verify GCP_SA_KEY secret is set
@@ -206,6 +255,7 @@ yarn build-storybook
 ```
 
 **Domain Issues:**
+
 - Verify DNS propagation (can take 24-48 hours)
 - Check custom domain verification in Google Cloud Console
 - Ensure CNAME records are correct

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aitronos/freddy-plugins",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -13,6 +13,14 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./web-components": {
+      "types": "./dist/web-components.d.ts",
+      "import": "./dist/web-components.js",
+      "require": "./dist/web-components.umd.js"
+    },
+    "./web-components.css": {
+      "default": "./dist/freddy-plugins.css"
+    },
     "./*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*.js",
@@ -39,10 +47,12 @@
   "scripts": {
     "dev": "vite",
     "build": "yarn clean && yarn generate:icons-export && yarn generate:animations-exports && yarn generate:components-exports && yarn generate:components-stories && yarn generate:icon-stories && vue-tsc -p tsconfig.build.json && vite build",
+    "build:webcomponents": "yarn clean && yarn generate:icons-export && yarn generate:animations-exports && yarn generate:components-exports && yarn generate:components-stories && yarn generate:icon-stories && vue-tsc -p tsconfig.build.json && BUILD_TARGET=webcomponents vite build",
+    "build:all": "yarn build && yarn build:webcomponents",
     "preview": "vite preview",
     "visualize-build": "ANALYZE=true yarn build",
     "clean": "rimraf dist",
-    "prepublishOnly": "yarn build",
+    "prepublishOnly": "yarn build:all",
     "publish:package": "yarn npm publish --access public",
     "storybook": "yarn fetch:versions && storybook dev -p 6006",
     "fetch:versions": "node src/scripts/get-versions.js",
@@ -59,7 +69,7 @@
     "version:patch": "node scripts/bump-version.js patch",
     "version:minor": "node scripts/bump-version.js minor",
     "version:major": "node scripts/bump-version.js major",
-    "publish:manual": "yarn build && yarn npm publish --access public",
+    "publish:manual": "yarn build:all && yarn npm publish --access public",
     "test:build": "./scripts/test-build.sh",
     "test:quick": "./scripts/quick-test.sh"
   },
@@ -90,6 +100,7 @@
     "@vitest/browser": "^3.1.1",
     "@vitest/coverage-v8": "^3.1.2",
     "@vue/tsconfig": "^0.7.0",
+    "@vue/web-component-wrapper": "^1.3.0",
     "concurrently": "^9.1.2",
     "cpx": "^1.5.0",
     "gh-pages": "^6.3.0",