@aurelia/storybook 2.2.1 → 2.3.0

package/apps/hello-world/package.json

@@ -1,55 +0,0 @@
-{
-  "name": "apptasks-video",
-  "description": "An Aurelia 2 client application.",
-  "version": "2.2.1",
-  "repository": {
-    "type": "git",
-    "url": "???"
-  },
-  "license": "UNLICENSED",
-  "dependencies": {
-    "@aurelia/router": "^2.0.0-rc.0",
-    "@aurelia/validation": "^2.0.0-rc.0",
-    "@aurelia/validation-html": "^2.0.0-rc.0",
-    "aurelia": "^2.0.0-rc.0"
-  },
-  "devDependencies": {
-    "@aurelia/storybook": "^2.2.1",
-    "@aurelia/testing": "^2.0.0-rc.0",
-    "@aurelia/vite-plugin": "^2.0.0-rc.0",
-    "@storybook/builder-vite": "^10.2.0",
-    "@tailwindcss/vite": "^4.0.0",
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "eslint": "^9.17.0",
-    "globals": "^15.14.0",
-    "jsdom": "^25.0.1",
-    "node-html-parser": "^7.0.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "sass": "^1.83.4",
-    "storybook": "^10.2.0",
-    "stylelint": "^16.12.0",
-    "stylelint-config-standard": "^36.0.1",
-    "stylus": "^0.64.0",
-    "tailwindcss": "^4.0.0",
-    "tslib": "^2.8.1",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.1",
-    "vite": "^7.0.0",
-    "vitest": "^4.0.0"
-  },
-  "scripts": {
-    "lint:js": "eslint src test",
-    "lint:css": "stylelint \"src/**/*.css\"",
-    "lint": "npm run lint:js && npm run lint:css",
-    "pretest": "npm run lint",
-    "start": "vite",
-    "build": "vite build",
-    "test": "vitest",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "type": "module"
-}

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

@@ -1,111 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-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

@@ -1,119 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-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

@@ -1,107 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-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 numeric = typeof this.change === 'number' ? this.change : Number(this.change);
-    if (!Number.isFinite(numeric)) {
-      return '0%';
-    }
-    const rounded = numeric.toFixed(1).replace(/\.0$/, '');
-    const sign = numeric > 0 ? '+' : '';
-    return `${sign}${rounded}%`;
-  }
-
-  get changeState(): TrendState {
-    const numeric = typeof this.change === 'number' ? this.change : Number(this.change);
-    if (!Number.isFinite(numeric)) {
-      return 'neutral';
-    }
-    if (numeric > 0) {
-      return 'positive';
-    }
-    if (numeric < 0) {
-      return 'negative';
-    }
-    return 'neutral';
-  }
-}

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

@@ -1,89 +0,0 @@
-<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

@@ -1,31 +0,0 @@
-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 = '';
-      const location = this.location ?? 'Seattle, WA';
-      this.report = await this.service.getWeather(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,48 +0,0 @@
-<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>

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

@@ -1,17 +0,0 @@
-import { bindable } from 'aurelia';
-
-export class HelloWorld {
-  @bindable() message = 'Hello from Aurelia!';
-  // New reactive counter property to track number of clicks
-  counter = 0;
-  // New bindable event callback for the increment action
-  @bindable() onIncrement;
-
-  // Method to increment the counter and fire the onIncrement callback if provided.
-  increment() {
-    this.counter++;
-    if (this.onIncrement) {
-      this.onIncrement(this.counter);
-    }
-  }
-}

package/apps/hello-world/src/main.ts

@@ -1,6 +0,0 @@
-import Aurelia from 'aurelia';
-import { MyApp } from './my-app';
-
-Aurelia
-  .app(MyApp)
-  .start();