@aitronos/freddy-plugins 0.4.0 → 0.4.1

package/CHANGELOG.md

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

package/README.md

@@ -1,273 +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**
-
-| 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              |
+```bash
+# npm
+npm install @aitronos/freddy-plugins
 
-### **Cost Breakdown**
+# yarn
+yarn add @aitronos/freddy-plugins
 
-**Google Cloud Run Pricing (Switzerland - europe-west6):**
+# pnpm
+pnpm add @aitronos/freddy-plugins
+```
 
-- **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:**
+To get the latest features, components, and bug fixes, simply update the package:
 
-- **Development**: $15-25 (low traffic, testing)
-- **Staging**: $15-25 (pre-production testing)
-- **Production**: $30-50 (live traffic)
-- **Total Estimated**: $60-100/month
+```bash
+# npm - Update to latest version
+npm update @aitronos/freddy-plugins
 
-**Additional Costs:**
+# npm - Install specific version
+npm install @aitronos/freddy-plugins@2.1.0
 
-- **Artifact Registry**: ~$5-10/month (Docker images)
-- **Cloud Build**: ~$5-15/month (CI/CD builds)
-- **Network Egress**: ~$5-10/month (traffic)
+# yarn - Update to latest version
+yarn upgrade @aitronos/freddy-plugins
 
-**Total Estimated Monthly Cost: $75-135**
+# yarn - Install specific version
+yarn add @aitronos/freddy-plugins@2.1.0
 
-### **Cost Optimization**
+# pnpm - Update to latest version
+pnpm update @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
+# pnpm - Install specific version
+pnpm add @aitronos/freddy-plugins@2.1.0
+```
 
-## 🔧 **Technology Stack**
+**✨ No code changes needed!** New components and features are automatically available after updating.
 
-- **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
-- **Web Server**: Nginx
-- **Region**: Switzerland (europe-west6)
+## 🎨 Storybook Documentation
 
-## 📦 **Components**
+Explore all components, icons, and utilities with interactive demos:
 
-### **Core Components**
+**[📚 View Storybook →](https://aitronos-freddy-plugins.vercel.app/)**
 
-- `Button` - Primary action buttons
-- `InputField` - Form input components
-- `Modal` - Dialog and modal components
-- `Dropdown` - Selection components
-- `Pagination` - Navigation components
+The Storybook provides:
 
-### **Specialized Components**
+- Live component demos
+- Interactive controls and props
+- Code examples for each component
+- Icon gallery with search functionality
+- Animation showcases
+- Utility function documentation
 
-- `ChatInterface` - Real-time chat components
-- `ApiInteraction` - API testing interface
-- `LoginRegister` - Authentication components
-- `IconLibrary` - Complete icon set (100+ icons)
+## 🅰️ Angular Usage
 
-### **Utility Components**
+### Installation & Setup
 
-- `Spinner` - Loading indicators
-- `ToastMessage` - Notification system
-- `Tooltip` - Information overlays
-- `CodeBlock` - Syntax highlighting
+```bash
+npm install @aitronos/freddy-plugins
+```
 
-## 🚀 **Deployment Process**
+### Import Web Components
 
-### **Automated CI/CD Pipeline**
+**Option 1: Global Registration (Recommended)**
 
-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
+```typescript
+// main.ts
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
 
-### **Environment-Specific Deployments**
+// Import web components and CSS
+import "@aitronos/freddy-plugins/web-components";
+import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
 
-```bash
-# Development (develop branch)
-git push origin develop
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
+```
 
-# Staging (staging branch)
-git push origin staging
+**Option 2: Component-level Import**
 
-# Production (main branch)
-git push origin main
+```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 {}
 ```
 
-## 🛠️ **Local Development**
+### Using Components in Templates
 
-```bash
-# Install dependencies
-yarn install
+```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
 
-# Start Storybook locally
-yarn storybook
+```typescript
+// app.component.ts
+import { Component } from "@angular/core";
+import { sanitizeHTML } from "@aitronos/freddy-plugins/web-components";
 
-# Build library
-yarn build
+@Component({
+  selector: "app-root",
+  template: ` <div [innerHTML]="sanitizedHtml"></div> `,
+})
+export class AppComponent {
+  rawHtml = "<p>This is <strong>safe</strong> HTML!</p>";
 
-# Build web components
-yarn build:webcomponents
+  get sanitizedHtml() {
+    return sanitizeHTML(this.rawHtml);
+  }
+}
+```
 
-# Build both library and web components
-yarn build:all
+### Styling
 
-# Build Storybook
-yarn build-storybook
+```css
+/* styles.css */
+freddy-button {
+  margin: 10px;
+}
 
-# Run tests
-yarn test
+icon-search {
+  color: #007bff;
+  font-size: 24px;
+}
 
-# Type checking
-yarn vue-tsc --noEmit
+/* Custom theming with CSS variables */
+.my-custom-freddy-button {
+  --freddy-button-bg-color: #28a745;
+  --freddy-button-text-color: white;
+}
 ```
 
-## 🌐 **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.
+## ⚛️ React Usage
 
-### Quick Start
+### Installation & Setup
 
 ```bash
 npm install @aitronos/freddy-plugins
 ```
 
-```javascript
-// Import web components
+### Import Web Components
+
+```tsx
+// App.tsx
+import React from "react";
 import "@aitronos/freddy-plugins/web-components";
-import "@aitronos/freddy-plugins/web-components.css";
+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;
 ```
 
-```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>
+### 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;
 ```
 
-For detailed web components documentation, see [WEB_COMPONENTS.md](./WEB_COMPONENTS.md).
-
-## 📋 **Project Structure**
-
+### 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
+  }
+}
 ```
-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
-```
-
-## 🔐 **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
+## 🟢 Vue Usage
 
-### **Performance Optimizations**
+### Installation
 
-- ✅ **Gzip compression** - Reduced transfer size
-- ✅ **Static asset caching** - 1-year cache headers
-- ✅ **CDN distribution** - Global edge locations
-- ✅ **Auto-scaling** - Handles traffic spikes
+```bash
+npm install @aitronos/freddy-plugins
+```
 
-## 🌐 **Custom Domains**
+### Using in Vue 3
 
-### **DNS Configuration**
+```vue
+<!-- App.vue -->
+<template>
+  <div>
+    <h1>My Vue App</h1>
+    <freddy-button @click="handleClick">Click me!</freddy-button>
+    <icon-search></icon-search>
+  </div>
+</template>
 
-Add these CNAME records in Hostpoint.ch:
+<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**
+## 🎯 Available Components
 
-- Automatically managed by Google Cloud
-- Custom domains require verification in Google Cloud Console
+### Core Components
 
-## 📊 **Monitoring & Analytics**
+- `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
 
-### **Health Checks**
+### Icons (120+ available)
 
-- **Endpoint**: `/health` - Returns 200 OK
-- **Auto-restart**: Failed instances restart automatically
-- **Logging**: Cloud Run logs available in Google Cloud Console
+- `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...
 
-### **Performance Metrics**
+### Animations
 
-- **Response time**: < 200ms average
-- **Uptime**: 99.9% SLA with Cloud Run
-- **Availability**: Multi-zone deployment
+- `freddy-anime-spaceman` - Spaceman animation
 
-## 🚨 **Troubleshooting**
+### Utilities
 
-### **Common Issues**
+- `sanitizeHTML()` - HTML sanitization
+- Helper functions for dates, validation, colors
+- Vue directives and plugins
 
-**Build Failures:**
+## 🎨 Styling
 
-```bash
-# Check TypeScript errors
-yarn vue-tsc --noEmit
+**Important**: Always import the CSS file for proper styling:
 
-# Verify Storybook build
-yarn build-storybook
+```javascript
+import "@aitronos/freddy-plugins/dist/freddy-plugins.css";
 ```
 
-**Deployment Issues:**
+### Custom Theming
 
-```bash
-# Check GitHub Actions logs
-# Verify GCP_SA_KEY secret is set
-# Ensure Docker build succeeds locally
+```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:**
+## 📚 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
 
-- Verify DNS propagation (can take 24-48 hours)
-- Check custom domain verification in Google Cloud Console
-- Ensure CNAME records are correct
+- **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**