@aurelia/storybook 2.0.0 → 2.1.0

package/apps/hello-world/package.json

@@ -14,13 +14,10 @@
     "aurelia": "^2.0.0-beta.25"
   },
   "devDependencies": {
-    "@aurelia/storybook": "^1.0.2",
+    "@aurelia/storybook": "^2.0.0",
     "@aurelia/testing": "^2.0.0-beta.25",
     "@aurelia/vite-plugin": "^2.0.0-beta.25",
-    "@storybook/addon-actions": "^9.0.0",
-    "@storybook/addon-links": "^9.0.0",
-    "@storybook/builder-vite": "^9.0.0",
-    "@storybook/test": "^9.0.0-alpha.2",
+    "@storybook/builder-vite": "^10.0.0",
     "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^22.10.2",
     "@types/react": "^19.1.8",
@@ -32,7 +29,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.83.4",
-    "storybook": "^9.0.0",
+    "storybook": "^10.0.0",
     "stylelint": "^16.12.0",
     "stylelint-config-standard": "^36.0.1",
     "stylus": "^0.64.0",
@@ -40,9 +37,8 @@
     "tslib": "^2.8.1",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.1",
-    "vite": "^6.0.3",
-    "vite-plugin-node-polyfills": "^0.22.0",
-    "vitest": "^2.1.8"
+    "vite": "^7.0.0",
+    "vitest": "^4.0.0"
   },
   "scripts": {
     "lint:js": "eslint src test",
@@ -55,11 +51,5 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
-  "type": "module",
-  "overrides": {
-    "vite-plugin-node-polyfills": {
-      "vite": "^6.0.0"
-    }
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "type": "module"
 }

package/apps/hello-world/src/components/feedback-form.html

@@ -0,0 +1,111 @@
+<style>
+  .feedback-form {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    padding: 28px;
+    border-radius: 18px;
+    background: #fff;
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
+    max-width: 420px;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  .feedback-form label {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 14px;
+    color: #0f172a;
+    font-weight: 600;
+  }
+
+  .feedback-form input,
+  .feedback-form select,
+  .feedback-form textarea {
+    border-radius: 12px;
+    border: 1px solid rgba(15, 23, 42, 0.15);
+    padding: 12px 14px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #0f172a;
+    background: #f8fafc;
+    transition: border 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .feedback-form input:focus,
+  .feedback-form select:focus,
+  .feedback-form textarea:focus {
+    outline: none;
+    border-color: #2563eb;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
+    background: #fff;
+  }
+
+  .feedback-form__actions {
+    display: flex;
+    gap: 12px;
+  }
+
+  .feedback-form__actions button {
+    flex: 1;
+    border: none;
+    border-radius: 12px;
+    padding: 12px 16px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .feedback-form__actions button:first-child {
+    background: linear-gradient(135deg, #2563eb, #4f46e5);
+    color: #fff;
+    box-shadow: 0 15px 30px rgba(79, 70, 229, 0.3);
+  }
+
+  .feedback-form__actions button:first-child:disabled {
+    opacity: 0.65;
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  .feedback-form__actions button:last-child {
+    background: #e2e8f0;
+    color: #0f172a;
+  }
+
+  .feedback-form__success {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #059669;
+    text-align: center;
+  }
+</style>
+<form class="feedback-form" submit.trigger="submit($event)" aria-live="polite">
+  <label>
+    Name
+    <input type="text" value.two-way="form.name" placeholder="Ada Lovelace" required />
+  </label>
+  <label>
+    Email
+    <input type="email" value.two-way="form.email" placeholder="ada@example.com" required />
+  </label>
+  <label>
+    Topic
+    <select value.two-way="form.topic">
+      <option repeat.for="topic of topics" value.bind="topic">${topic}</option>
+    </select>
+  </label>
+  <label>
+    Message
+    <textarea rows="4" value.two-way="form.message"></textarea>
+  </label>
+  <div class="feedback-form__actions">
+    <button type="submit" disabled.bind="submitting">${submitting ? 'Sending...' : 'Send feedback'}</button>
+    <button type="button" click.trigger="reset()" disabled.bind="submitting">Reset</button>
+  </div>
+  <p if.bind="submitted" class="feedback-form__success">Thank you for the feedback!</p>
+</form>

package/apps/hello-world/src/components/feedback-form.ts

@@ -0,0 +1,45 @@
+import { bindable } from 'aurelia';
+
+export interface FeedbackPayload {
+  name: string;
+  email: string;
+  topic: string;
+  message: string;
+}
+
+export class FeedbackForm {
+  @bindable() topics: string[] = ['Bug report', 'Feature idea', 'General praise'];
+  @bindable() submitting = false;
+  @bindable() onSubmit?: (payload: FeedbackPayload) => Promise<void> | void;
+
+  form: FeedbackPayload = {
+    name: '',
+    email: '',
+    topic: 'Bug report',
+    message: '',
+  };
+
+  submitted = false;
+
+  async submit(event?: Event) {
+    event?.preventDefault();
+    if (this.submitting) {
+      return;
+    }
+
+    this.submitting = true;
+    await this.onSubmit?.({ ...this.form });
+    this.submitting = false;
+    this.submitted = true;
+  }
+
+  reset() {
+    this.form = {
+      name: '',
+      email: '',
+      topic: this.topics[0] ?? '',
+      message: '',
+    };
+    this.submitted = false;
+  }
+}

package/apps/hello-world/src/components/notification-center.html

@@ -0,0 +1,119 @@
+<style>
+  .notification-center {
+    width: 420px;
+    border-radius: 20px;
+    background: #0f172a;
+    color: #f8fafc;
+    padding: 20px 24px;
+    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.45);
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  .notification-center__header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 18px;
+  }
+
+  .notification-center__header h2 {
+    margin: 0;
+    font-size: 20px;
+  }
+
+  .notification-center__count {
+    font-size: 13px;
+    opacity: 0.7;
+    align-self: center;
+  }
+
+  .notification-center__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .notification-center__item {
+    display: flex;
+    justify-content: space-between;
+    padding: 14px 16px;
+    border-radius: 14px;
+    background: rgba(148, 163, 184, 0.12);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    gap: 12px;
+  }
+
+  .notification-center__item strong {
+    display: block;
+    font-size: 15px;
+    margin-bottom: 4px;
+  }
+
+  .notification-center__item p {
+    margin: 0 0 6px;
+    font-size: 14px;
+    opacity: 0.9;
+  }
+
+  .notification-center__item small {
+    font-size: 12px;
+    opacity: 0.6;
+  }
+
+  .notification-center__item button {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    color: inherit;
+    border-radius: 999px;
+    padding: 4px 12px;
+    height: fit-content;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+
+  .notification-center__item button:hover,
+  .notification-center__item button:focus-visible {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .notification-center__item.success {
+    border-color: rgba(45, 212, 191, 0.4);
+  }
+
+  .notification-center__item.warning {
+    border-color: rgba(249, 115, 22, 0.4);
+  }
+
+  .notification-center__item.error {
+    border-color: rgba(239, 68, 68, 0.4);
+  }
+
+  .notification-center__empty {
+    text-align: center;
+    padding: 16px;
+    background: rgba(148, 163, 184, 0.1);
+    border-radius: 12px;
+    font-size: 14px;
+  }
+</style>
+<section class="notification-center">
+  <header class="notification-center__header">
+    <h2>Notifications</h2>
+    <span class="notification-center__count">${notifications.length} total</span>
+  </header>
+  <ul class="notification-center__list">
+    <li repeat.for="note of visibleNotifications" class="notification-center__item ${note.level}">
+      <div>
+        <strong>${note.title}</strong>
+        <p>${note.message}</p>
+        <small if.bind="showTimestamp">${note.timestamp}</small>
+      </div>
+      <button type="button" click.trigger="dismiss(note)">Dismiss</button>
+    </li>
+    <li if.bind="visibleNotifications.length === 0" class="notification-center__empty">
+      You're all caught up!
+    </li>
+  </ul>
+</section>

package/apps/hello-world/src/components/notification-center.ts

@@ -0,0 +1,27 @@
+import { bindable } from 'aurelia';
+
+export type NotificationLevel = 'info' | 'success' | 'warning' | 'error';
+
+export interface NotificationItem {
+  id: number;
+  title: string;
+  message: string;
+  level: NotificationLevel;
+  timestamp?: string;
+}
+
+export class NotificationCenter {
+  @bindable() notifications: NotificationItem[] = [];
+  @bindable() maxVisible = 4;
+  @bindable() showTimestamp = true;
+  @bindable() onDismiss?: (notification: NotificationItem) => void;
+
+  get visibleNotifications() {
+    return this.notifications.slice(0, this.maxVisible);
+  }
+
+  dismiss(notification: NotificationItem) {
+    this.notifications = this.notifications.filter((note) => note.id !== notification.id);
+    this.onDismiss?.(notification);
+  }
+}

package/apps/hello-world/src/components/stat-card.html

@@ -0,0 +1,107 @@
+<style>
+  .stat-card {
+    border-radius: 16px;
+    padding: 20px 24px;
+    background: linear-gradient(135deg, #1f3d8f, #3c74ff);
+    color: #fff;
+    box-shadow: 0 20px 45px rgba(13, 32, 94, 0.35);
+    max-width: 360px;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  .stat-card__header {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .stat-card__label {
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-size: 12px;
+    opacity: 0.8;
+    margin: 0 0 6px;
+  }
+
+  .stat-card__value {
+    font-size: 44px;
+    margin: 0;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .stat-card__unit {
+    font-size: 20px;
+    margin-left: 6px;
+    opacity: 0.85;
+  }
+
+  .stat-card__refresh {
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.12);
+    color: #fff;
+    padding: 6px 12px;
+    border-radius: 999px;
+    font-size: 12px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background 0.2s ease, border 0.2s ease;
+  }
+
+  .stat-card__refresh:focus-visible,
+  .stat-card__refresh:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.7);
+  }
+
+  .stat-card__description {
+    margin: 18px 0 12px;
+    font-size: 15px;
+    opacity: 0.9;
+  }
+
+  .stat-card__footer {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border-radius: 999px;
+    padding: 6px 14px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .stat-card__footer.positive {
+    background: rgba(20, 235, 178, 0.2);
+    color: #14ebb2;
+  }
+
+  .stat-card__footer.negative {
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+  }
+
+  .stat-card__footer.neutral {
+    background: rgba(255, 255, 255, 0.2);
+    color: #fff;
+  }
+</style>
+<section class="stat-card" aria-live="polite">
+  <header class="stat-card__header">
+    <div>
+      <p class="stat-card__label">${title}</p>
+      <h2 class="stat-card__value">
+        ${value}<span if.bind="unit" class="stat-card__unit">${unit}</span>
+      </h2>
+    </div>
+    <button type="button" class="stat-card__refresh" click.trigger="refresh()" title="Refresh metric" aria-label="Refresh metric">
+      Refresh
+    </button>
+  </header>
+  <p class="stat-card__description">${description}</p>
+  <footer class="stat-card__footer ${changeState}">
+    <strong>${changeLabel}</strong>
+    <span>${changeCopy}</span>
+  </footer>
+</section>

package/apps/hello-world/src/components/stat-card.ts

@@ -0,0 +1,33 @@
+import { bindable } from 'aurelia';
+
+type TrendState = 'positive' | 'negative' | 'neutral';
+
+export class StatCard {
+  @bindable() title = 'Active users';
+  @bindable() value: number | string = 0;
+  @bindable() unit = '';
+  @bindable() change = 0; // percent delta
+  @bindable() description = '';
+  @bindable() changeCopy = 'vs last week';
+  @bindable() onRefresh?: () => void;
+
+  refresh() {
+    this.onRefresh?.();
+  }
+
+  get changeLabel() {
+    const rounded = Number(this.change).toFixed(1).replace(/\.0$/, '');
+    const sign = this.change > 0 ? '+' : '';
+    return `${sign}${rounded}%`;
+  }
+
+  get changeState(): TrendState {
+    if (this.change > 0) {
+      return 'positive';
+    }
+    if (this.change < 0) {
+      return 'negative';
+    }
+    return 'neutral';
+  }
+}

package/apps/hello-world/src/components/weather-widget.html

@@ -0,0 +1,89 @@
+<style>
+  .weather-widget {
+    width: 320px;
+    border-radius: 24px;
+    padding: 22px;
+    background: linear-gradient(160deg, #fef3c7, #fcd34d);
+    color: #1f2937;
+    box-shadow: 0 20px 45px rgba(244, 114, 10, 0.25);
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  .weather-widget header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 14px;
+  }
+
+  .weather-widget header h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  .weather-widget button {
+    border: none;
+    background: rgba(255, 255, 255, 0.4);
+    color: #92400e;
+    border-radius: 12px;
+    padding: 6px 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+
+  .weather-widget button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .weather-widget button:not(:disabled):hover,
+  .weather-widget button:not(:disabled):focus-visible {
+    background: rgba(255, 255, 255, 0.6);
+  }
+
+  .weather-widget__state {
+    padding: 16px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .weather-widget__state--error {
+    background: rgba(248, 113, 113, 0.3);
+    color: #991b1b;
+  }
+
+  .weather-widget__body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    font-weight: 600;
+  }
+
+  .weather-widget__temp {
+    font-size: 64px;
+    margin: 0;
+    font-weight: 700;
+  }
+
+  .weather-widget__body small {
+    font-size: 14px;
+    opacity: 0.8;
+  }
+</style>
+<section class="weather-widget" aria-live="polite">
+  <header>
+    <h2>${location}</h2>
+    <button type="button" click.trigger="refresh()" disabled.bind="state === 'loading'">Refresh</button>
+  </header>
+  <div if.bind="state === 'loading'" class="weather-widget__state">Loading latest data...</div>
+  <div if.bind="state === 'error'" class="weather-widget__state weather-widget__state--error">${error}</div>
+  <div if.bind="state === 'ready'" class="weather-widget__body">
+    <p class="weather-widget__temp">${report.temperature}&deg;</p>
+    <p>${report.condition}</p>
+    <small>High ${report.high}&deg; - Low ${report.low}&deg;</small>
+  </div>
+</section>

package/apps/hello-world/src/components/weather-widget.ts

@@ -0,0 +1,30 @@
+import { bindable } from 'aurelia';
+import { IWeatherService, WeatherSummary, WeatherService } from '../services/weather-service';
+
+export class WeatherWidget {
+  static inject = [IWeatherService];
+
+  constructor(private readonly service: WeatherService) {}
+
+  @bindable() location = 'Seattle, WA';
+
+  report: WeatherSummary | null = null;
+  state: 'idle' | 'loading' | 'ready' | 'error' = 'idle';
+  error = '';
+
+  binding() {
+    void this.refresh();
+  }
+
+  async refresh() {
+    try {
+      this.state = 'loading';
+      this.error = '';
+      this.report = await this.service.getWeather(this.location);
+      this.state = 'ready';
+    } catch (err) {
+      this.state = 'error';
+      this.error = err instanceof Error ? err.message : 'Unable to load weather data.';
+    }
+  }
+}

package/apps/hello-world/src/hello-world.html

@@ -1,6 +1,48 @@
-<div style="border: 1px solid #ccc; padding: 16px; border-radius: 4px;">
+<style>
+  .hello-card {
+    max-width: 360px;
+    padding: 32px;
+    border-radius: 24px;
+    background: linear-gradient(135deg, #ec4899, #a855f7);
+    color: #fff;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    box-shadow: 0 25px 45px rgba(168, 85, 247, 0.35);
+  }
+
+  .hello-card h1 {
+    margin: 0 0 12px;
+    font-size: 28px;
+    font-weight: 600;
+  }
+
+  .hello-card p {
+    margin: 0 0 18px;
+    font-size: 16px;
+    opacity: 0.95;
+  }
+
+  .hello-card button {
+    border: none;
+    border-radius: 16px;
+    padding: 12px 18px;
+    font-size: 15px;
+    font-weight: 600;
+    background: #fff;
+    color: #a855f7;
+    cursor: pointer;
+    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.25);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .hello-card button:hover,
+  .hello-card button:focus-visible {
+    transform: translateY(-2px);
+    box-shadow: 0 18px 32px rgba(255, 255, 255, 0.35);
+  }
+</style>
+<div class="hello-card">
   <h1>${message}</h1>
   <p>Counter: ${counter}</p>
   <button click.trigger="increment()">Increment</button>
   <au-slot></au-slot>
-</div>
+</div>

package/apps/hello-world/src/services/weather-service.ts

@@ -0,0 +1,15 @@
+import { DI } from 'aurelia';
+
+export interface WeatherSummary {
+  location: string;
+  condition: string;
+  temperature: number;
+  high: number;
+  low: number;
+}
+
+export interface WeatherService {
+  getWeather(location: string): Promise<WeatherSummary>;
+}
+
+export const IWeatherService = DI.createInterface<WeatherService>('IWeatherService');