@aurelia/storybook 2.1.0 → 2.2.1

package/apps/hello-world/package.json

@@ -1,23 +1,23 @@
 {
   "name": "apptasks-video",
   "description": "An Aurelia 2 client application.",
-  "version": "0.1.0",
+  "version": "2.2.1",
   "repository": {
     "type": "git",
     "url": "???"
   },
   "license": "UNLICENSED",
   "dependencies": {
-    "@aurelia/router": "^2.0.0-beta.25",
-    "@aurelia/validation": "^2.0.0-beta.25",
-    "@aurelia/validation-html": "^2.0.0-beta.25",
-    "aurelia": "^2.0.0-beta.25"
+    "@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.0.0",
-    "@aurelia/testing": "^2.0.0-beta.25",
-    "@aurelia/vite-plugin": "^2.0.0-beta.25",
-    "@storybook/builder-vite": "^10.0.0",
+    "@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",
@@ -29,7 +29,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.83.4",
-    "storybook": "^10.0.0",
+    "storybook": "^10.2.0",
     "stylelint": "^16.12.0",
     "stylelint-config-standard": "^36.0.1",
     "stylus": "^0.64.0",

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

@@ -17,11 +17,11 @@ export class NotificationCenter {
   @bindable() onDismiss?: (notification: NotificationItem) => void;
 
   get visibleNotifications() {
-    return this.notifications.slice(0, this.maxVisible);
+    return (this.notifications ?? []).slice(0, this.maxVisible);
   }
 
   dismiss(notification: NotificationItem) {
-    this.notifications = this.notifications.filter((note) => note.id !== notification.id);
+    this.notifications = (this.notifications ?? []).filter((note) => note.id !== notification.id);
     this.onDismiss?.(notification);
   }
 }

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

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

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

@@ -20,7 +20,8 @@ export class WeatherWidget {
     try {
       this.state = 'loading';
       this.error = '';
-      this.report = await this.service.getWeather(this.location);
+      const location = this.location ?? 'Seattle, WA';
+      this.report = await this.service.getWeather(location);
       this.state = 'ready';
     } catch (err) {
       this.state = 'error';

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

@@ -1,25 +1,31 @@
+import { defineAureliaStory } from '@aurelia/storybook';
 import { fn, userEvent, within } from 'storybook/test';
 import { FeedbackForm } from '../components/feedback-form';
 
+type FeedbackFormArgs = {
+  topics: string[];
+  submitting?: boolean;
+  onSubmit?: (payload: unknown) => void;
+};
+
 const meta = {
   title: 'Dashboard/FeedbackForm',
   component: FeedbackForm,
   parameters: {
     layout: 'centered',
   },
-  render: (args) => ({
-    template: `<feedback-form topics.bind="topics"
-                              submitting.bind="submitting"
-                              on-submit.bind="onSubmit"></feedback-form>`,
-    props: args,
-    components: [FeedbackForm],
-  }),
+  render: (args: FeedbackFormArgs) =>
+    defineAureliaStory({
+      template: `<feedback-form topics.bind="topics"
+                                submitting.bind="submitting"
+                                on-submit.bind="onSubmit"></feedback-form>`,
+      props: args,
+      components: [FeedbackForm],
+    }),
 };
 
 export default meta;
 
-type Story = typeof meta;
-
 export const DefaultForm = {
   args: {
     topics: ['Bug report', 'Feature request', 'General question'],

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

@@ -1,12 +1,20 @@
+import { defineAureliaStory } from '@aurelia/storybook';
 import { HelloWorld } from '../hello-world';
 import { fn, userEvent, within } from 'storybook/test';
 
+type HelloWorldArgs = {
+  message?: string;
+  onIncrement?: () => void;
+};
+
 const meta = {
   title: 'Example/HelloWorld',
   component: HelloWorld,
-  render: () => ({
-    template: `<hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>`,
-  }),
+  render: (args: HelloWorldArgs) =>
+    defineAureliaStory({
+      template: `<hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>`,
+      props: args,
+    }),
   argTypes: {
     message: { control: 'text' },
     onIncrement: { action: 'increment' }
@@ -38,15 +46,18 @@ export const InteractiveHelloWorld = {
 };
 
 export const NoArgs = {
-  render: () => ({
-    template: `<hello-world></hello-world>`
-  })
+  render: () =>
+    defineAureliaStory({
+      template: `<hello-world></hello-world>`,
+    })
 };
 
 export const WithCustomTemplate = {
-  render: () => ({
-    template: `<hello-world message.bind="message">Click me!</hello-world>`
-  }),
+  render: (args: HelloWorldArgs) =>
+    defineAureliaStory({
+      template: `<hello-world message.bind="message">Click me!</hello-world>`,
+      props: args,
+    }),
   args: {
     message: 'This is a custom message'
   }

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

@@ -1,6 +1,14 @@
+import { defineAureliaStory } from '@aurelia/storybook';
 import { fn, userEvent, within } from 'storybook/test';
 import { NotificationCenter, NotificationItem } from '../components/notification-center';
 
+type NotificationCenterArgs = {
+  notifications: NotificationItem[];
+  maxVisible?: number;
+  showTimestamp?: boolean;
+  onDismiss?: (item: NotificationItem) => void;
+};
+
 const baseNotifications: NotificationItem[] = [
   {
     id: 1,
@@ -35,20 +43,19 @@ const baseNotifications: NotificationItem[] = [
 const meta = {
   title: 'Dashboard/NotificationCenter',
   component: NotificationCenter,
-  render: (args) => ({
-    template: `<notification-center notifications.bind="notifications"
-                                     max-visible.bind="maxVisible"
-                                     on-dismiss.bind="onDismiss"
-                                     show-timestamp.bind="showTimestamp"></notification-center>`,
-    props: args,
-    components: [NotificationCenter],
-  }),
+  render: (args: NotificationCenterArgs) =>
+    defineAureliaStory({
+      template: `<notification-center notifications.bind="notifications"
+                                       max-visible.bind="maxVisible"
+                                       on-dismiss.bind="onDismiss"
+                                       show-timestamp.bind="showTimestamp"></notification-center>`,
+      props: args,
+      components: [NotificationCenter],
+    }),
 };
 
 export default meta;
 
-type Story = typeof meta;
-
 export const DefaultNotifications = {
   args: {
     notifications: baseNotifications,

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

@@ -1,29 +1,39 @@
+import { defineAureliaStory } from '@aurelia/storybook';
 import { fn, userEvent, within } from 'storybook/test';
 import { StatCard } from '../components/stat-card';
 
+type StatCardArgs = {
+  title: string;
+  value: number | string;
+  unit?: string;
+  change?: number;
+  changeCopy?: string;
+  description?: string;
+  onRefresh?: () => void;
+};
+
 const meta = {
   title: 'Dashboard/StatCard',
   component: StatCard,
   parameters: {
     layout: 'centered',
   },
-  render: (args) => ({
-    components: [StatCard],
-    template: `<stat-card title.bind="title"
-                          value.bind="value"
-                          unit.bind="unit"
-                          change.bind="change"
-                          change-copy.bind="changeCopy"
-                          description.bind="description"
-                          on-refresh.bind="onRefresh"></stat-card>`,
-    props: args,
-  }),
+  render: (args: StatCardArgs) =>
+    defineAureliaStory({
+      components: [StatCard],
+      template: `<stat-card title.bind="title"
+                            value.bind="value"
+                            unit.bind="unit"
+                            change.bind="change"
+                            change-copy.bind="changeCopy"
+                            description.bind="description"
+                            on-refresh.bind="onRefresh"></stat-card>`,
+      props: args,
+    }),
 };
 
 export default meta;
 
-type Story = typeof meta;
-
 export const DefaultCard = {
   args: {
     title: 'Active users',

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

@@ -1,16 +1,22 @@
+import { defineAureliaStory } from '@aurelia/storybook';
 import { Registration } from 'aurelia';
 import { fn, userEvent, within } from 'storybook/test';
 import { WeatherWidget } from '../components/weather-widget';
 import { IWeatherService, WeatherService, WeatherSummary } from '../services/weather-service';
 
+type WeatherWidgetArgs = {
+  location: string;
+};
+
 const mockService: WeatherService = {
   async getWeather(location: string): Promise<WeatherSummary> {
+    const safeLocation = location ?? '';
     return {
-      location,
-      condition: location.includes('Berlin') ? 'Cloudy' : 'Sunny',
-      temperature: location.includes('Berlin') ? 16 : 24,
-      high: location.includes('Berlin') ? 18 : 27,
-      low: location.includes('Berlin') ? 11 : 19,
+      location: safeLocation,
+      condition: safeLocation.includes('Berlin') ? 'Cloudy' : 'Sunny',
+      temperature: safeLocation.includes('Berlin') ? 16 : 24,
+      high: safeLocation.includes('Berlin') ? 18 : 27,
+      low: safeLocation.includes('Berlin') ? 11 : 19,
     };
   },
 };
@@ -21,18 +27,17 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  render: (args) => ({
-    template: `<weather-widget location.bind="location"></weather-widget>`,
-    props: args,
-    components: [WeatherWidget],
-    items: [Registration.instance(IWeatherService, mockService)],
-  }),
+  render: (args: WeatherWidgetArgs) =>
+    defineAureliaStory({
+      template: `<weather-widget location.bind="location"></weather-widget>`,
+      props: args,
+      components: [WeatherWidget],
+      items: [Registration.instance(IWeatherService, mockService)],
+    }),
 };
 
 export default meta;
 
-type Story = typeof meta;
-
 export const DefaultWeather = {
   args: {
     location: 'Seattle, WA',

package/apps/hello-world-rsbuild/.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from 'storybook/internal/types';
+
+const config: StorybookConfig = {
+  stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+  addons: [
+  ],
+  framework: {
+    name: '@aurelia/storybook',
+    options: {},
+  },
+  core: {
+    builder: 'storybook-builder-rsbuild',
+  },
+};
+
+export default config;

package/apps/hello-world-rsbuild/.storybook/preview.ts

@@ -0,0 +1 @@
+export { render, renderToCanvas } from '@aurelia/storybook';

package/apps/hello-world-rsbuild/.stylelintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "stylelint-config-standard"
+  ]
+}

package/apps/hello-world-rsbuild/README.md

@@ -0,0 +1,28 @@
+# Aurelia Storybook Hello World
+
+This project is bootstrapped by [aurelia/new](https://github.com/aurelia/new).
+
+## Start dev web server
+
+    npm start
+
+## Start Storybook
+
+    npm run storybook
+
+## Build the app in production mode
+
+    npm run build
+
+## Build Storybook
+
+    npm run build-storybook
+
+## Unit Tests
+
+    npm run test
+
+Run unit tests in watch mode.
+
+    npm run test:watch
+

package/apps/hello-world-rsbuild/eslint.config.mjs

@@ -0,0 +1,25 @@
+import eslint from "@eslint/js";
+import tseslint from 'typescript-eslint';
+import tsParser from "@typescript-eslint/parser";
+import globals from "globals";
+
+export default [
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ["**/*.ts"],
+
+    languageOptions: {
+      globals: {
+        ...globals.builtin,
+        ...globals.nodeBuiltin,
+        ...globals.browser,
+        ...globals.node,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 2019,
+      sourceType: "module",
+    },
+  }
+];

package/apps/hello-world-rsbuild/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Aurelia</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script type="module" src="/src/main.ts"></script>
+  <base href="/">
+</head>
+
+<body>
+  <my-app></my-app>
+</body>
+
+</html>
+