Initial commit

skills/fluxwing-component-creator/templates/alert.uxm

@@ -0,0 +1,204 @@
+{
+  "id": "alert",
+  "type": "alert",
+  "version": "1.0.0",
+  "metadata": {
+    "name": "Alert/Notification Component",
+    "description": "Alert and notification messages for user feedback, system status, and important information display",
+    "author": "UXscii Team",
+    "created": "2024-01-15T00:00:00Z",
+    "modified": "2024-01-15T00:00:00Z",
+    "tags": ["alert", "notification", "message", "feedback"],
+    "category": "feedback",
+    "fidelity": "detailed"
+  },
+  "props": {
+    "title": "Success!",
+    "message": "Your changes have been saved successfully.",
+    "variant": "success",
+    "icon": "✓",
+    "dismissible": true,
+    "persistent": false,
+    "position": "top-right",
+    "duration": 5000,
+    "actions": [
+      {
+        "text": "Undo",
+        "action": "undo"
+      },
+      {
+        "text": "View",
+        "action": "view"
+      }
+    ],
+    "showProgress": false,
+    "bordered": true,
+    "compact": false
+  },
+  "behavior": {
+    "states": [
+      {
+        "name": "visible",
+        "properties": {
+          "opacity": 1,
+          "transform": "translateX(0)",
+          "zIndex": 1000
+        }
+      },
+      {
+        "name": "entering",
+        "properties": {
+          "opacity": 0.5,
+          "transform": "translateX(100%)",
+          "transition": "all 0.3s ease"
+        }
+      },
+      {
+        "name": "exiting",
+        "properties": {
+          "opacity": 0,
+          "transform": "translateX(100%)",
+          "transition": "all 0.3s ease"
+        }
+      },
+      {
+        "name": "hidden",
+        "properties": {
+          "display": "none"
+        }
+      }
+    ],
+    "interactions": [
+      {
+        "trigger": "click",
+        "action": "dismiss-alert",
+        "condition": "dismissible && target.isCloseButton"
+      },
+      {
+        "trigger": "click",
+        "action": "execute-action",
+        "condition": "target.isActionButton"
+      },
+      {
+        "trigger": "keydown",
+        "action": "dismiss-alert",
+        "condition": "key === 'Escape' && dismissible"
+      },
+      {
+        "trigger": "timeout",
+        "action": "auto-dismiss",
+        "condition": "!persistent && duration > 0"
+      }
+    ],
+    "timing": {
+      "autoDismiss": true,
+      "defaultDuration": 5000,
+      "pauseOnHover": true,
+      "resumeOnLeave": true
+    },
+    "accessibility": {
+      "role": "alert",
+      "focusable": true,
+      "keyboardSupport": ["Escape", "Tab", "Enter"],
+      "ariaLabel": "{{variant}} alert: {{title}}"
+    }
+  },
+  "layout": {
+    "display": "block",
+    "positioning": "fixed",
+    "spacing": {
+      "padding": {
+        "top": 2,
+        "right": 3,
+        "bottom": 2,
+        "left": 3
+      },
+      "margin": {
+        "bottom": 1
+      }
+    },
+    "sizing": {
+      "minWidth": 30,
+      "maxWidth": 50,
+      "height": "auto"
+    }
+  },
+  "ascii": {
+    "templateFile": "alert.md",
+    "width": 50,
+    "height": 8,
+    "variables": [
+      {
+        "name": "title",
+        "type": "string",
+        "defaultValue": "Success!",
+        "description": "Alert title/heading text",
+        "required": false,
+        "validation": {
+          "max": 50
+        }
+      },
+      {
+        "name": "message",
+        "type": "string",
+        "defaultValue": "Operation completed successfully.",
+        "description": "Main alert message content",
+        "required": true,
+        "validation": {
+          "max": 200
+        }
+      },
+      {
+        "name": "variant",
+        "type": "string",
+        "defaultValue": "success",
+        "description": "Alert type and styling",
+        "validation": {
+          "enum": ["success", "warning", "error", "info", "default"]
+        }
+      },
+      {
+        "name": "icon",
+        "type": "string",
+        "defaultValue": "✓",
+        "description": "Icon character for alert type",
+        "validation": {
+          "max": 5
+        }
+      },
+      {
+        "name": "dismissible",
+        "type": "boolean",
+        "defaultValue": true,
+        "description": "Whether alert can be manually dismissed"
+      },
+      {
+        "name": "persistent",
+        "type": "boolean",
+        "defaultValue": false,
+        "description": "Whether alert stays until manually dismissed"
+      },
+      {
+        "name": "actions",
+        "type": "array",
+        "defaultValue": [],
+        "description": "Action buttons for the alert",
+        "validation": {
+          "max": 3
+        }
+      },
+      {
+        "name": "compact",
+        "type": "boolean",
+        "defaultValue": false,
+        "description": "Use minimal spacing and height"
+      },
+      {
+        "name": "bordered",
+        "type": "boolean",
+        "defaultValue": true,
+        "description": "Show border around alert"
+      }
+    ]
+  }
+}