@aurelia/storybook 2.1.0 → 2.2.1

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

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

package/apps/hello-world-rsbuild/src/my-app.html

@@ -0,0 +1 @@
+<h1>Hello World</h1>

package/apps/hello-world-rsbuild/src/my-app.ts

@@ -0,0 +1,3 @@
+export class MyApp {
+  // Your app logic
+}

package/apps/hello-world-rsbuild/src/resource.d.ts

@@ -0,0 +1,15 @@
+declare module '*.html' {
+  import { IContainer, PartialBindableDefinition } from 'aurelia';
+  export const name: string;
+  export const template: string;
+  export default template;
+  export const dependencies: string[];
+  export const containerless: boolean | undefined;
+  export const bindables: Record<string, PartialBindableDefinition>;
+  export const shadowOptions: { mode: 'open' | 'closed' } | undefined;
+  export function register(container: IContainer): void;
+}
+
+declare module '*.css';
+
+declare module '*.au';

package/apps/hello-world-rsbuild/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');

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

@@ -0,0 +1,58 @@
+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: FeedbackFormArgs) =>
+    defineAureliaStory({
+      template: `<feedback-form topics.bind="topics"
+                                submitting.bind="submitting"
+                                on-submit.bind="onSubmit"></feedback-form>`,
+      props: args,
+      components: [FeedbackForm],
+    }),
+};
+
+export default meta;
+
+export const DefaultForm = {
+  args: {
+    topics: ['Bug report', 'Feature request', 'General question'],
+    onSubmit: fn(),
+    submitting: false,
+  },
+};
+
+export const SubmittingState = {
+  args: {
+    topics: ['Design review', 'Accessibility', 'Performance'],
+    submitting: true,
+    onSubmit: fn(),
+  },
+};
+
+export const FillAndSubmit = {
+  args: {
+    topics: ['Beta feedback', 'Success story'],
+    onSubmit: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByLabelText('Name'), 'Jordan');
+    await userEvent.type(canvas.getByLabelText('Email'), 'jordan@example.com');
+    await userEvent.selectOptions(canvas.getByLabelText('Topic'), 'Success story');
+    await userEvent.type(canvas.getByLabelText('Message'), 'The new timeline view is great');
+    await userEvent.click(canvas.getByRole('button', { name: /send feedback/i }));
+  },
+};

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

@@ -0,0 +1,64 @@
+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: (args: HelloWorldArgs) =>
+    defineAureliaStory({
+      template: `<hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>`,
+      props: args,
+    }),
+  argTypes: {
+    message: { control: 'text' },
+    onIncrement: { action: 'increment' }
+  }
+};
+
+export default meta;
+
+export const DefaultHelloWorld = {
+  args: {
+    message: 'Hello from Aurelia Storybook',
+    onIncrement: fn()
+  }
+};
+
+export const InteractiveHelloWorld = {
+  args: {
+    message: 'Try clicking the button!',
+    onIncrement: fn()
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    // Simulate three button clicks
+    await userEvent.click(button);
+    await userEvent.click(button);
+    await userEvent.click(button);
+  }
+};
+
+export const NoArgs = {
+  render: () =>
+    defineAureliaStory({
+      template: `<hello-world></hello-world>`,
+    })
+};
+
+export const WithCustomTemplate = {
+  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-rsbuild/src/stories/notification-center.stories.ts

@@ -0,0 +1,88 @@
+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,
+    title: 'Build succeeded',
+    message: 'Main pipeline finished in 4m 12s.',
+    level: 'success',
+    timestamp: 'Today - 09:24',
+  },
+  {
+    id: 2,
+    title: 'New comment',
+    message: 'Samira replied to your review on PR #512.',
+    level: 'info',
+    timestamp: 'Today - 08:51',
+  },
+  {
+    id: 3,
+    title: 'Usage warning',
+    message: 'API quota is at 85% of the monthly allocation.',
+    level: 'warning',
+    timestamp: 'Yesterday - 17:05',
+  },
+  {
+    id: 4,
+    title: 'Error spike',
+    message: 'Synthetic tests detected an uptick in 500s.',
+    level: 'error',
+    timestamp: 'Yesterday - 15:33',
+  },
+];
+
+const meta = {
+  title: 'Dashboard/NotificationCenter',
+  component: 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;
+
+export const DefaultNotifications = {
+  args: {
+    notifications: baseNotifications,
+    maxVisible: 3,
+    showTimestamp: true,
+    onDismiss: fn(),
+  },
+};
+
+export const CompactList = {
+  args: {
+    notifications: baseNotifications.slice(0, 2),
+    maxVisible: 2,
+    onDismiss: fn(),
+    showTimestamp: false,
+  },
+};
+
+export const Interactions = {
+  args: {
+    notifications: baseNotifications,
+    maxVisible: 4,
+    onDismiss: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const dismissButtons = await canvas.findAllByRole('button', { name: /dismiss/i });
+    await userEvent.click(dismissButtons[0]);
+  },
+};

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

@@ -0,0 +1,75 @@
+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: 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;
+
+export const DefaultCard = {
+  args: {
+    title: 'Active users',
+    value: 1284,
+    unit: '',
+    change: 12.5,
+    changeCopy: 'vs last week',
+    description: 'Rolling 7-day average of unique user sessions.',
+    onRefresh: fn(),
+  },
+};
+
+export const NegativeTrend = {
+  args: {
+    title: 'NPS score',
+    value: 42,
+    change: -6.3,
+    changeCopy: 'vs previous survey',
+    description: 'Direct feedback collected from in-app survey responses.',
+    onRefresh: fn(),
+  },
+};
+
+export const ManualRefreshDemo = {
+  args: {
+    title: 'Deploy success rate',
+    value: '99.2',
+    unit: '%',
+    change: 1.1,
+    changeCopy: 'vs last 24h',
+    description: 'Completed deploys without rollbacks.',
+    onRefresh: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const refreshButton = await canvas.findByRole('button', { name: /refresh metric/i });
+    await userEvent.click(refreshButton);
+  },
+};

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

@@ -0,0 +1,62 @@
+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: 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,
+    };
+  },
+};
+
+const meta = {
+  title: 'Dashboard/WeatherWidget',
+  component: WeatherWidget,
+  parameters: {
+    layout: 'centered',
+  },
+  render: (args: WeatherWidgetArgs) =>
+    defineAureliaStory({
+      template: `<weather-widget location.bind="location"></weather-widget>`,
+      props: args,
+      components: [WeatherWidget],
+      items: [Registration.instance(IWeatherService, mockService)],
+    }),
+};
+
+export default meta;
+
+export const DefaultWeather = {
+  args: {
+    location: 'Seattle, WA',
+  },
+};
+
+export const EuropeanCity = {
+  args: {
+    location: 'Berlin, Germany',
+  },
+};
+
+export const RefreshInteraction = {
+  args: {
+    location: 'Lisbon, Portugal',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const refreshButton = await canvas.findByRole('button', { name: /refresh/i });
+    await userEvent.click(refreshButton);
+  },
+};

package/apps/hello-world-rsbuild/test/my-app.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it } from 'vitest';
+import { MyApp } from '../src/my-app';
+import { createFixture } from '@aurelia/testing';
+
+describe('my-app', () => {
+  it('should render message', async () => {
+    const { assertText } = await createFixture(
+      '<my-app></my-app>',
+      {},
+      [MyApp],
+    ).started;
+
+    assertText('Hello World!', { compact: true });
+  });
+});

package/apps/hello-world-rsbuild/test/setup.ts

@@ -0,0 +1,29 @@
+import { BrowserPlatform } from '@aurelia/platform-browser';
+import { setPlatform, onFixtureCreated, type IFixture } from '@aurelia/testing';
+import { beforeAll, afterEach } from 'vitest';
+
+// Sets up the Aurelia environment for testing
+function bootstrapTextEnv() {
+  const platform = new BrowserPlatform(window);
+  setPlatform(platform);
+  BrowserPlatform.set(globalThis, platform);
+}
+
+const fixtures: IFixture<object>[] = [];
+beforeAll(() => {
+  bootstrapTextEnv();
+  onFixtureCreated(fixture => {
+    fixtures.push(fixture);
+  });
+});
+
+afterEach(() => {
+  fixtures.forEach(async f => {
+    try {
+      await f.stop(true);
+    } catch {
+      // ignore
+    }
+  });
+  fixtures.length = 0;
+});

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

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "target": "ES2017",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "importHelpers": true,
+    "sourceMap": true
+  },
+  "include": [
+    "src",
+    "aurelia-sfc-plugin.js"
+  ],
+  "files": [
+    "src/resource.d.ts"
+  ]
+}

package/apps/hello-world-rsbuild/tsconfig.vitest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+    "types": [
+      "node",
+      "jsdom"
+    ]
+  }
+}

package/apps/hello-world-rsbuild/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite';
+import aurelia from '@aurelia/vite-plugin';
+
+export default defineConfig({
+  server: {
+    open: !process.env.CI,
+    port: 9000,
+  },
+  esbuild: {
+    target: 'es2022'
+  },
+  plugins: [
+    aurelia({
+      useDev: true,
+    }),
+  ],
+});

package/apps/hello-world-rsbuild/vitest.config.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath } from "node:url";
+import { mergeConfig, defineConfig } from "vitest/config";
+import viteConfig from "./vite.config";
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: "jsdom",
+      watch: false,
+      root: fileURLToPath(new URL("./", import.meta.url)),
+      setupFiles: ["./test/setup.ts"]
+    },
+  }),
+);