@escalated-dev/escalated 0.5.0 → 0.7.0

package/README.md

@@ -3,6 +3,11 @@
   Escalated
 </h1>
 
+[![Tests](https://github.com/escalated-dev/escalated/actions/workflows/run-tests.yml/badge.svg)](https://github.com/escalated-dev/escalated/actions/workflows/run-tests.yml)
+[![npm](https://img.shields.io/npm/v/@escalated-dev/escalated)](https://www.npmjs.com/package/@escalated-dev/escalated)
+[![Vue 3](https://img.shields.io/badge/vue-3.x-4FC08D?logo=vue.js&logoColor=white)](https://vuejs.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 Escalated is an embeddable support ticket system with SLA tracking, escalation rules, agent workflows, and a customer portal. This repo contains all the shared frontend assets (Vue 3 + Inertia.js) used across every supported backend framework.
 
 👉 **Learn more, view demos, and compare Cloud vs Self-Hosted options at** **[https://escalated.dev](https://escalated.dev)**
@@ -19,6 +24,10 @@ Pick your framework:
 | **Rails** | [escalated-dev/escalated-rails](https://github.com/escalated-dev/escalated-rails) | `gem "escalated"` |
 | **Django** | [escalated-dev/escalated-django](https://github.com/escalated-dev/escalated-django) | `pip install escalated-django` |
 | **AdonisJS** | [escalated-dev/escalated-adonis](https://github.com/escalated-dev/escalated-adonis) | `npm install @escalated-dev/escalated-adonis` |
+| **WordPress** | [escalated-dev/escalated-wordpress](https://github.com/escalated-dev/escalated-wordpress) | [Download escalated.zip](https://github.com/escalated-dev/escalated-wordpress/releases/latest) |
+| **Filament** | [escalated-dev/escalated-filament](https://github.com/escalated-dev/escalated-filament) | `composer require escalated-dev/escalated-filament` |
+| **React Native** | [escalated-dev/escalated-react-native](https://github.com/escalated-dev/escalated-react-native) | `npm install @escalated-dev/escalated-react-native` |
+| **Flutter** | [escalated-dev/escalated-flutter](https://github.com/escalated-dev/escalated-flutter) | See [pubspec.yaml setup](https://github.com/escalated-dev/escalated-flutter#quick-start) |
 
 Each backend repo has full setup instructions — install command, migrations, config, and frontend integration.
 
@@ -125,6 +134,35 @@ app.use(EscalatedPlugin, { layout: AppLayout })
 
 All the Vue 3 + Inertia.js components that power the Escalated UI. These are identical across Laravel, Rails, Django, and AdonisJS — the backend framework renders them via Inertia.
 
+## 📸 Screenshots
+
+> Screenshots are auto-generated from Storybook via the [component-screenshots](.github/workflows/screenshots.yml) workflow.
+
+<p align="center">
+  <strong>Admin Panel (Dark)</strong><br/>
+  <img src="docs/assets/escalated_admin_1.png" alt="Escalated Admin Panel — dark mode with sidebar navigation, KPI cards, stats, and ticket list" width="800" />
+</p>
+
+<p align="center">
+  <strong>Admin Panel (Light)</strong><br/>
+  <img src="docs/assets/escalated_admin_3.png" alt="Escalated Admin Panel — light mode with sidebar navigation, KPI cards, stats, and ticket list" width="800" />
+</p>
+
+<p align="center">
+  <strong>Ticket Queue</strong><br/>
+  <img src="docs/assets/escalated_ticket_list.png" alt="Escalated Ticket Queue — agent ticket list with filters, search, bulk actions, and SLA indicators" width="800" />
+</p>
+
+<p align="center">
+  <strong>Agent Panel</strong><br/>
+  <img src="docs/assets/escalated_admin_2.png" alt="Escalated Agent Panel — top navigation, stats, and assigned ticket queue" width="800" />
+</p>
+
+<p align="center">
+  <strong>Ticket Detail View</strong><br/>
+  <img src="docs/assets/escalated_ticket_view.png" alt="Escalated Ticket Detail View — conversation thread, reply composer, and ticket sidebar with SLA timer" width="800" />
+</p>
+
 ### Pages
 
 **Customer Portal** — Self-service ticket management
@@ -187,6 +225,70 @@ Reusable building blocks used across the pages above.
 |--------|-------------|
 | `EscalatedPlugin` | Vue plugin for layout injection and CSS theming |
 
+## Plugin Development
+
+Escalated supports framework-agnostic plugins built with the [Plugin SDK](https://github.com/escalated-dev/escalated-plugin-sdk). Plugins are written once in TypeScript and work across all Escalated backends.
+
+### How the Frontend Plugin System Works
+
+The frontend uses `defineEscalatedPlugin()` to register Vue components — custom admin pages, ticket sidebar widgets, or dashboard panels — that are mounted automatically when the plugin is active.
+
+```typescript
+import { defineEscalatedPlugin } from '@escalated-dev/escalated'
+import MySettingsPage from './MySettingsPage.vue'
+
+export default defineEscalatedPlugin({
+  name: 'my-plugin',
+  pages: {
+    'admin/my-plugin/settings': MySettingsPage,
+  },
+})
+```
+
+### How It Connects to the Backend
+
+The backend uses `definePlugin()` from the [Plugin SDK](https://github.com/escalated-dev/escalated-plugin-sdk) to handle TypeScript business logic — subscribing to ticket lifecycle hooks, exposing API endpoints, and persisting data. The frontend and backend entries work together as a single npm package.
+
+```typescript
+// backend entry (index.ts)
+import { definePlugin } from '@escalated-dev/plugin-sdk'
+
+export default definePlugin({
+  name: 'my-plugin',
+  version: '1.0.0',
+  actions: {
+    'ticket.created': async (event, ctx) => {
+      ctx.log.info('New ticket!', event)
+    },
+  },
+})
+```
+
+### Quick Example: Both Entry Points
+
+A published plugin package typically exports both:
+
+```
+my-plugin/
+  index.ts          ← backend: definePlugin() for TypeScript logic
+  frontend.ts       ← frontend: defineEscalatedPlugin() for Vue components
+```
+
+The backend framework (Laravel, Rails, Django, AdonisJS) loads `index.ts` via the [Plugin Runtime](https://github.com/escalated-dev/escalated-plugin-runtime). The Vue app imports `frontend.ts` and registers it with `app.use()`.
+
+### Installing Plugins
+
+```bash
+npm install @escalated-dev/plugin-slack
+npm install @escalated-dev/plugin-jira
+```
+
+### Resources
+
+- [Plugin SDK](https://github.com/escalated-dev/escalated-plugin-sdk) — TypeScript SDK for building plugins
+- [Plugin Runtime](https://github.com/escalated-dev/escalated-plugin-runtime) — Runtime host for plugins
+- [Plugin Development Guide](https://github.com/escalated-dev/escalated-docs) — Full documentation
+
 ## For Package Maintainers
 
 If you're building a new backend integration, this package is available on npm:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",
@@ -21,24 +21,55 @@
   "exports": {
     "./components/*": "./src/components/*",
     "./pages/*": "./src/pages/*",
+    "./locales": "./src/locales/index.js",
+    "./locales/*": "./src/locales/*",
     ".": "./src/index.js"
   },
   "files": [
     "src"
   ],
   "peerDependencies": {
-    "vue": "^3.3.0",
-    "@inertiajs/vue3": "^1.0.0 || ^2.0.0"
+    "@inertiajs/vue3": "^1.0.0 || ^2.0.0",
+    "vue": "^3.3.0"
   },
   "scripts": {
-    "test": "vitest run"
+    "test": "vitest run",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "screenshot": "npx playwright test --config=playwright-screenshots.config.js"
+  },
+  "lint-staged": {
+    "*.{js,vue}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   },
   "devDependencies": {
-    "vue": "^3.5.0",
+    "@eslint/js": "^10.0.1",
     "@inertiajs/vue3": "^2.0.0",
+    "@playwright/test": "^1.50.0",
+    "@storybook/addon-a11y": "^10.2.12",
+    "@storybook/addon-docs": "^10.2.12",
+    "@storybook/vue3-vite": "^10.2.12",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vue/test-utils": "^2.4.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^10.0.1",
+    "eslint-plugin-storybook": "^10.2.12",
+    "eslint-plugin-vue": "^10.8.0",
     "happy-dom": "^15.0.0",
-    "vitest": "^2.0.0"
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "postcss": "^8.5.0",
+    "prettier": "^3.8.1",
+    "storybook": "^10.2.12",
+    "tailwindcss": "^3.4.0",
+    "vitest": "^2.0.0",
+    "vue": "^3.5.0"
   }
 }

package/src/components/ActivityTimeline.stories.js

@@ -0,0 +1,55 @@
+import ActivityTimeline from './ActivityTimeline.vue';
+
+export default {
+    title: 'Components/ActivityTimeline',
+    component: ActivityTimeline,
+};
+
+const sampleActivities = [
+    {
+        id: 1,
+        type: 'status_changed',
+        causer: { name: 'Alice Chen' },
+        properties: { from: 'open', to: 'in_progress' },
+        created_at: new Date(Date.now() - 300000).toISOString(),
+    },
+    {
+        id: 2,
+        type: 'assigned',
+        causer: { name: 'Bob Smith' },
+        properties: { agent_name: 'Alice Chen' },
+        created_at: new Date(Date.now() - 600000).toISOString(),
+    },
+    {
+        id: 3,
+        type: 'priority_changed',
+        causer: { name: 'Alice Chen' },
+        properties: { from: 'medium', to: 'high' },
+        created_at: new Date(Date.now() - 1200000).toISOString(),
+    },
+    {
+        id: 4,
+        type: 'tag_added',
+        causer: { name: 'Alice Chen' },
+        properties: { tag: 'billing' },
+        created_at: new Date(Date.now() - 1800000).toISOString(),
+    },
+    {
+        id: 5,
+        type: 'replied',
+        causer: { name: 'Alice Chen' },
+        properties: {},
+        created_at: new Date(Date.now() - 2400000).toISOString(),
+    },
+    {
+        id: 6,
+        type: 'sla_breached',
+        causer: null,
+        properties: {},
+        created_at: new Date(Date.now() - 3600000).toISOString(),
+    },
+];
+
+export const Default = { args: { activities: sampleActivities } };
+export const Empty = { args: { activities: [] } };
+export const SingleItem = { args: { activities: [sampleActivities[0]] } };

package/src/components/ActivityTimeline.vue

@@ -1,66 +1,83 @@
-<script setup>
-import { computed, inject } from 'vue';
-
-defineProps({
-    activities: { type: Array, required: true },
-});
-
-const dark = inject('esc-dark', computed(() => false));
-
-const typeLabels = {
-    status_changed: 'changed status',
-    assigned: 'assigned ticket',
-    unassigned: 'unassigned ticket',
-    priority_changed: 'changed priority',
-    tag_added: 'added tag',
-    tag_removed: 'removed tag',
-    escalated: 'escalated ticket',
-    sla_breached: 'SLA breached',
-    replied: 'replied',
-    note_added: 'added note',
-    department_changed: 'changed department',
-    reopened: 'reopened ticket',
-    resolved: 'resolved ticket',
-    closed: 'closed ticket',
-};
-
-function formatDate(date) {
-    return new Date(date).toLocaleString();
-}
-
-function describeActivity(activity) {
-    const label = typeLabels[activity.type] || activity.type;
-    const who = activity.causer?.name || 'System';
-    const props = activity.properties || {};
-
-    if (activity.type === 'status_changed' && props.to) {
-        return `${who} ${label} to ${props.to}`;
-    }
-    if (activity.type === 'assigned' && props.agent_name) {
-        return `${who} assigned to ${props.agent_name}`;
-    }
-    if (activity.type === 'priority_changed' && props.to) {
-        return `${who} ${label} to ${props.to}`;
-    }
-    if ((activity.type === 'tag_added' || activity.type === 'tag_removed') && props.tag) {
-        return `${who} ${label} "${props.tag}"`;
-    }
-    if (activity.type === 'department_changed' && props.department) {
-        return `${who} ${label} to ${props.department}`;
-    }
-    return `${who} ${label}`;
-}
-</script>
-
-<template>
-    <div class="space-y-3">
-        <div v-for="activity in activities" :key="activity.id" class="flex gap-3 text-sm">
-            <div :class="['mt-1 h-2 w-2 flex-shrink-0 rounded-full', dark ? 'bg-neutral-600' : 'bg-gray-400']"></div>
-            <div class="flex-1">
-                <p :class="dark ? 'text-neutral-300' : 'text-gray-700'">{{ describeActivity(activity) }}</p>
-                <p :class="['text-xs', dark ? 'text-neutral-600' : 'text-gray-400']">{{ formatDate(activity.created_at) }}</p>
-            </div>
-        </div>
-        <div v-if="!activities?.length" :class="['py-4 text-center text-sm', dark ? 'text-neutral-600' : 'text-gray-500']">No activity yet.</div>
-    </div>
-</template>
+<script setup>
+import { computed, inject } from 'vue';
+
+defineProps({
+    activities: { type: Array, required: true },
+});
+
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const typeLabels = {
+    status_changed: 'changed status',
+    assigned: 'assigned ticket',
+    unassigned: 'unassigned ticket',
+    priority_changed: 'changed priority',
+    tag_added: 'added tag',
+    tag_removed: 'removed tag',
+    escalated: 'escalated ticket',
+    sla_breached: 'SLA breached',
+    replied: 'replied',
+    note_added: 'added note',
+    department_changed: 'changed department',
+    reopened: 'reopened ticket',
+    resolved: 'resolved ticket',
+    closed: 'closed ticket',
+};
+
+function formatDate(date) {
+    return new Date(date).toLocaleString();
+}
+
+function describeActivity(activity) {
+    const label = typeLabels[activity.type] || activity.type;
+    const who = activity.causer?.name || 'System';
+    const props = activity.properties || {};
+
+    if (activity.type === 'status_changed' && props.to) {
+        return `${who} ${label} to ${props.to}`;
+    }
+    if (activity.type === 'assigned' && props.agent_name) {
+        return `${who} assigned to ${props.agent_name}`;
+    }
+    if (activity.type === 'priority_changed' && props.to) {
+        return `${who} ${label} to ${props.to}`;
+    }
+    if ((activity.type === 'tag_added' || activity.type === 'tag_removed') && props.tag) {
+        return `${who} ${label} "${props.tag}"`;
+    }
+    if (activity.type === 'department_changed' && props.department) {
+        return `${who} ${label} to ${props.department}`;
+    }
+    return `${who} ${label}`;
+}
+</script>
+
+<template>
+    <div class="space-y-3" role="feed">
+        <div v-for="activity in activities" :key="activity.id" role="article" class="flex gap-3 text-sm">
+            <div
+                :class="[
+                    'mt-1 h-2 w-2 flex-shrink-0 rounded-full',
+                    dark ? 'bg-[var(--esc-panel-text-muted)]' : 'bg-gray-400',
+                ]"
+            ></div>
+            <div class="flex-1">
+                <p :class="dark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-700'">
+                    {{ describeActivity(activity) }}
+                </p>
+                <p :class="['text-xs', dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-400']">
+                    {{ formatDate(activity.created_at) }}
+                </p>
+            </div>
+        </div>
+        <div
+            v-if="!activities?.length"
+            :class="['py-4 text-center text-sm', dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500']"
+        >
+            No activity yet.
+        </div>
+    </div>
+</template>