@aitronos/freddy-plugins 0.3.1 → 0.4.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.4.1 (2025-09-11)
+
+Releasing liscence
+
+## 0.4.0 (2025-09-11)
+
+New web components feature
+
 ## 0.3.1 (2025-09-03)
 
 - Manual version bump (patch)

package/README.md

@@ -1,223 +1,396 @@
-# 🎨 Aitronos Freddy Plugins - Storybook
+# Freddy Plugins
 
-A comprehensive Vue.js component library with Storybook documentation, deployed across multiple environments on Google Cloud Platform.
+A lightweight, dynamic, and feature-rich component library that provides a comprehensive set of UI components, icons, animations, and utilities. Built with Vue 3 and designed to work seamlessly across multiple frameworks including Vue, Angular, React, and vanilla JavaScript applications.
 
-## 🚀 **Live Environments**
+## ✨ Features
 
-| 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 |
+- **🚀 Lightweight**: Optimized bundle size with tree-shaking support
+- **🔄 Dynamic**: Auto-updating components with new features and improvements
+- **🎨 Rich**: 20+ components, 120+ icons, animations, and utilities
+- **🌐 Universal**: Works with Vue, Angular, React, and any JavaScript framework
+- **📱 Responsive**: Mobile-first design with modern CSS
+- **🎯 TypeScript**: Full TypeScript support with type definitions
+- **🎭 Web Components**: Framework-agnostic custom elements
+- **📚 Storybook**: Interactive documentation and live demos
 
-## 🏗️ **Infrastructure & Costs**
+## 📦 Installation
 
-### **Resource Allocation**
+```bash
+# npm
+npm install @aitronos/freddy-plugins
 
-| 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 |
+# yarn
+yarn add @aitronos/freddy-plugins
 
-### **Cost Breakdown**
+# pnpm
+pnpm add @aitronos/freddy-plugins
+```
 
-**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
+## 🔄 Updating to New Version
 
-**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
+To get the latest features, components, and bug fixes, simply update the package:
 
-**Additional Costs:**
-- **Artifact Registry**: ~$5-10/month (Docker images)
-- **Cloud Build**: ~$5-15/month (CI/CD builds)
-- **Network Egress**: ~$5-10/month (traffic)
+```bash
+# npm - Update to latest version
+npm update @aitronos/freddy-plugins
 
-**Total Estimated Monthly Cost: $75-135**
+# npm - Install specific version
+npm install @aitronos/freddy-plugins@2.1.0
 
-### **Cost Optimization**
+# yarn - Update to latest version
+yarn upgrade @aitronos/freddy-plugins
 
-- ✅ **Auto-scaling**: Instances scale to 0 when not in use
-- ✅ **Switzerland region**: Lower latency for European users
-- ✅ **Efficient builds**: Single-stage Docker builds
-- ✅ **Resource limits**: Conservative max instances
+# yarn - Install specific version
+yarn add @aitronos/freddy-plugins@2.1.0
 
-## 🔧 **Technology Stack**
+# pnpm - Update to latest version
+pnpm update @aitronos/freddy-plugins
 
-- **Framework**: Vue.js 3 + TypeScript
-- **Documentation**: Storybook 7
-- **Package Manager**: Yarn 4.7.0
-- **Deployment**: Google Cloud Run
-- **CI/CD**: GitHub Actions
-- **Container Registry**: Artifact Registry
-- **Web Server**: Nginx
-- **Region**: Switzerland (europe-west6)
+# pnpm - Install specific version
+pnpm add @aitronos/freddy-plugins@2.1.0
+```
 
-## 📦 **Components**
+**✨ No code changes needed!** New components and features are automatically available after updating.
 
-### **Core Components**
-- `Button` - Primary action buttons
-- `InputField` - Form input components
-- `Modal` - Dialog and modal components
-- `Dropdown` - Selection components
-- `Pagination` - Navigation components
+## 🎨 Storybook Documentation
 
-### **Specialized Components**
-- `ChatInterface` - Real-time chat components
-- `ApiInteraction` - API testing interface
-- `LoginRegister` - Authentication components
-- `IconLibrary` - Complete icon set (100+ icons)
+Explore all components, icons, and utilities with interactive demos:
 
-### **Utility Components**
-- `Spinner` - Loading indicators
-- `ToastMessage` - Notification system
-- `Tooltip` - Information overlays
-- `CodeBlock` - Syntax highlighting
+**[📚 View Storybook →](https://aitronos-freddy-plugins.vercel.app/)**
 
-## 🚀 **Deployment Process**
+The Storybook provides:
 
-### **Automated CI/CD Pipeline**
+- Live component demos
+- Interactive controls and props
+- Code examples for each component
+- Icon gallery with search functionality
+- Animation showcases
+- Utility function documentation
 
-1. **Push to branch** triggers GitHub Actions
-2. **Build Storybook** locally in container
-3. **Verify build** success (check storybook-static)
-4. **Build Docker image** with built files
-5. **Push to Artifact Registry**
-6. **Deploy to Cloud Run** with environment config
+## 🅰️ Angular Usage
 
-### **Environment-Specific Deployments**
+### Installation & Setup
 
 ```bash
-# Development (develop branch)
-git push origin develop
+npm install @aitronos/freddy-plugins
+```
 
-# Staging (staging branch)  
-git push origin staging
+### Import Web Components
 
-# Production (main branch)
-git push origin main
+**Option 1: Global Registration (Recommended)**
+
+```typescript
+// main.ts
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
+
+// Import web components and CSS
+import "@aitronos/freddy-plugins/web-components";
+import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
 ```
 
-## 🛠️ **Local Development**
+**Option 2: Component-level Import**
+
+```typescript
+// app.component.ts
+import { Component } from "@angular/core";
+import "@aitronos/freddy-plugins/web-components";
+import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
+
+@Component({
+  selector: "app-root",
+  template: `
+    <div>
+      <h1>My Angular App</h1>
+      <freddy-button>Click me!</freddy-button>
+      <icon-search></icon-search>
+    </div>
+  `,
+})
+export class AppComponent {}
+```
 
-```bash
-# Install dependencies
-yarn install
+### Using Components in Templates
+
+```html
+<!-- app.component.html -->
+<div class="container">
+  <!-- Buttons -->
+  <freddy-button>Primary Button</freddy-button>
+  <freddy-button [disabled]="true">Disabled Button</freddy-button>
+
+  <!-- Icons -->
+  <icon-search></icon-search>
+  <icon-user></icon-user>
+  <icon-settings></icon-settings>
+
+  <!-- Form Components -->
+  <freddy-input-field
+    [placeholder]="'Enter your name'"
+    [value]="name"
+    (input)="onNameChange($event)"
+  >
+  </freddy-input-field>
+
+  <!-- Modals -->
+  <freddy-modal-box [isOpen]="showModal">
+    <h2>Modal Title</h2>
+    <p>Modal content goes here</p>
+  </freddy-modal-box>
+</div>
+```
+
+### Using Utilities
+
+```typescript
+// app.component.ts
+import { Component } from "@angular/core";
+import { sanitizeHTML } from "@aitronos/freddy-plugins/web-components";
 
-# Start Storybook locally
-yarn storybook
+@Component({
+  selector: "app-root",
+  template: ` <div [innerHTML]="sanitizedHtml"></div> `,
+})
+export class AppComponent {
+  rawHtml = "<p>This is <strong>safe</strong> HTML!</p>";
 
-# Build Storybook
-yarn build-storybook
+  get sanitizedHtml() {
+    return sanitizeHTML(this.rawHtml);
+  }
+}
+```
+
+### Styling
 
-# Run tests
-yarn test
+```css
+/* styles.css */
+freddy-button {
+  margin: 10px;
+}
 
-# Type checking
-yarn vue-tsc --noEmit
+icon-search {
+  color: #007bff;
+  font-size: 24px;
+}
+
+/* Custom theming with CSS variables */
+.my-custom-freddy-button {
+  --freddy-button-bg-color: #28a745;
+  --freddy-button-text-color: white;
+}
 ```
 
-## 📋 **Project Structure**
+## ⚛️ React Usage
+
+### Installation & Setup
 
+```bash
+npm install @aitronos/freddy-plugins
 ```
-src/
-├── components/          # Vue components
-│   ├── Button.vue
-│   ├── InputField.vue
-│   └── ...
-├── stories/            # Storybook stories
-│   ├── components/
-│   └── icons/
-├── icons/              # Icon components
-├── services/           # API services
-└── helpers/            # Utility functions
 
-deployment/
-├── docker/             # Docker configuration
-├── nginx/              # Nginx configuration
-├── scripts/            # Deployment scripts
-└── config.json         # Environment config
+### Import Web Components
+
+```tsx
+// App.tsx
+import React from "react";
+import "@aitronos/freddy-plugins/web-components";
+import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
+
+function App() {
+  return (
+    <div>
+      <h1>My React App</h1>
+      <freddy-button>Click me!</freddy-button>
+      <icon-search></icon-search>
+    </div>
+  );
+}
+
+export default App;
 ```
 
-## 🔐 **Security & Performance**
+### Using Components
+
+```tsx
+// components/MyComponent.tsx
+import React from "react";
+import { sanitizeHTML } from "@aitronos/freddy-plugins/web-components";
+
+const MyComponent = () => {
+  const handleClick = (event: CustomEvent) => {
+    console.log("Button clicked:", event.detail);
+  };
+
+  return (
+    <div>
+      <freddy-button onClick={handleClick}>Click me!</freddy-button>
+
+      <freddy-input-field
+        placeholder="Enter text..."
+        onInput={(e) => console.log(e.detail.value)}
+      />
+
+      <div
+        dangerouslySetInnerHTML={{
+          __html: sanitizeHTML("<p>Safe HTML content</p>"),
+        }}
+      />
+    </div>
+  );
+};
+
+export default MyComponent;
+```
 
-### **Security Features**
-- ✅ **HTTPS only** - All traffic encrypted
-- ✅ **Security headers** - XSS, CSRF protection
-- ✅ **Content Security Policy** - Resource restrictions
-- ✅ **No sensitive data** - Public component library
+### TypeScript Support
+
+```typescript
+// types.d.ts
+declare namespace JSX {
+  interface IntrinsicElements {
+    "freddy-button": {
+      disabled?: boolean;
+      onClick?: (event: CustomEvent) => void;
+      children?: React.ReactNode;
+    };
+    "icon-search": {
+      size?: string;
+      color?: string;
+    };
+    // ... other components
+  }
+}
+```
 
-### **Performance Optimizations**
-- ✅ **Gzip compression** - Reduced transfer size
-- ✅ **Static asset caching** - 1-year cache headers
-- ✅ **CDN distribution** - Global edge locations
-- ✅ **Auto-scaling** - Handles traffic spikes
+## 🟢 Vue Usage
 
-## 🌐 **Custom Domains**
+### Installation
 
-### **DNS Configuration**
-Add these CNAME records in Hostpoint.ch:
+```bash
+npm install @aitronos/freddy-plugins
+```
 
+### Using in Vue 3
+
+```vue
+<!-- App.vue -->
+<template>
+  <div>
+    <h1>My Vue App</h1>
+    <freddy-button @click="handleClick">Click me!</freddy-button>
+    <icon-search></icon-search>
+  </div>
+</template>
+
+<script setup lang="ts">
+import "@aitronos/freddy-plugins/web-components";
+import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
+
+const handleClick = (event: CustomEvent) => {
+  console.log("Button clicked:", event.detail);
+};
+</script>
 ```
-dev-components.aitronos.com → freddy-storybook-dev-147074626467.europe-west6.run.app
-staging-components.aitronos.com → freddy-storybook-staging-147074626467.europe-west6.run.app
-components.aitronos.com → freddy-storybook-prod-147074626467.europe-west6.run.app
+
+### Using Vue Components (Alternative)
+
+```vue
+<!-- MyComponent.vue -->
+<template>
+  <div>
+    <Button>Vue Component</Button>
+    <IconSearch />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Button, IconSearch } from "@aitronos/freddy-plugins";
+import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
+</script>
 ```
 
-### **SSL Certificates**
-- Automatically managed by Google Cloud
-- Custom domains require verification in Google Cloud Console
+## 🎯 Available Components
 
-## 📊 **Monitoring & Analytics**
+### Core Components
 
-### **Health Checks**
-- **Endpoint**: `/health` - Returns 200 OK
-- **Auto-restart**: Failed instances restart automatically
-- **Logging**: Cloud Run logs available in Google Cloud Console
+- `freddy-button` - Interactive freddy-buttons with multiple variants
+- `freddy-input-field` - Form input fields
+- `freddy-modal-box` - Modal dialogs
+- `freddy-dropdown` - Dropdown menus
+- `freddy-pagination` - Pagination controls
+- `freddy-tab-list` - Tab navigation
+- `freddy-switch` - Toggle switches
+- `freddy-checkbox` - Custom checkboxes
+- `freddy-spinner` - Loading spinners
+- `freddy-skeleton-loader` - Skeleton loading states
 
-### **Performance Metrics**
-- **Response time**: < 200ms average
-- **Uptime**: 99.9% SLA with Cloud Run
-- **Availability**: Multi-zone deployment
+### Icons (120+ available)
 
-## 🚨 **Troubleshooting**
+- `icon-search` - Search icon
+- `icon-user` - User icon
+- `icon-settings` - Settings icon
+- `icon-home` - Home icon
+- `icon-arrow-left` - Arrow left
+- `icon-arrow-right` - Arrow right
+- `icon-plus` - Plus icon
+- `icon-edit` - Edit icon
+- `icon-delete` - Delete icon
+- And many more...
 
-### **Common Issues**
+### Animations
 
-**Build Failures:**
-```bash
-# Check TypeScript errors
-yarn vue-tsc --noEmit
+- `freddy-anime-spaceman` - Spaceman animation
+
+### Utilities
+
+- `sanitizeHTML()` - HTML sanitization
+- Helper functions for dates, validation, colors
+- Vue directives and plugins
 
-# Verify Storybook build
-yarn build-storybook
+## 🎨 Styling
+
+**Important**: Always import the CSS file for proper styling:
+
+```javascript
+import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
 ```
 
-**Deployment Issues:**
-```bash
-# Check GitHub Actions logs
-# Verify GCP_SA_KEY secret is set
-# Ensure Docker build succeeds locally
+### Custom Theming
+
+```css
+/* Using CSS custom properties */
+freddy-button {
+  --freddy-button-bg-color: #007bff;
+  --freddy-button-text-color: white;
+  --freddy-button-border-radius: 8px;
+}
+
+icon-search {
+  --icon-color: #28a745;
+  --icon-size: 24px;
+}
 ```
 
-**Domain Issues:**
-- Verify DNS propagation (can take 24-48 hours)
-- Check custom domain verification in Google Cloud Console
-- Ensure CNAME records are correct
+## 📚 Documentation
+
+- **[Storybook Demo](https://aitronos-freddy-plugins.vercel.app/)** - Interactive component documentation
+- **[GitHub Repository](https://github.com/aitronos/freddy-plugins)** - Source code and issues
+- **[NPM Package](https://www.npmjs.com/package/@aitronos/freddy-plugins)** - Package information
+
+## 🤝 Support & Help
+
+- **GitHub Issues**: [Report bugs or request features](https://github.com/aitronos/freddy-plugins/issues)
+- **Discussions**: [Community discussions](https://github.com/aitronos/freddy-plugins/discussions)
+- **Email**: support@aitronos.com
 
-## 📞 **Support**
+## 🎉 Hurray!
 
-- **Repository**: [GitHub](https://github.com/Freddy-Development/Aitronos.Freddy.Plugins)
-- **Documentation**: [Storybook](https://components.aitronos.com)
-- **Issues**: [GitHub Issues](https://github.com/Freddy-Development/Aitronos.Freddy.Plugins/issues)
+You're all set! Freddy Plugins provides everything you need to build beautiful, consistent user interfaces across any framework. Start building amazing apps with our comprehensive component library!
 
 ---
 
-**Last Updated**: July 2025  
-**Version**: 1.0.0  
-**Maintainer**: Aitronos Development Team
+**Made with ❤️ by the Aitronos team**