@aurelia/storybook 2.1.0 → 2.3.0

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

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

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

@@ -1,15 +0,0 @@
-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/src/services/weather-service.ts

@@ -1,15 +0,0 @@
-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/src/stories/feedback-form.stories.ts

@@ -1,52 +0,0 @@
-import { fn, userEvent, within } from 'storybook/test';
-import { FeedbackForm } from '../components/feedback-form';
-
-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],
-  }),
-};
-
-export default meta;
-
-type Story = typeof 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/src/stories/hello-world.stories.ts

@@ -1,53 +0,0 @@
-import { HelloWorld } from '../hello-world';
-import { fn, userEvent, within } from 'storybook/test';
-
-const meta = {
-  title: 'Example/HelloWorld',
-  component: HelloWorld,
-  render: () => ({
-    template: `<hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>`,
-  }),
-  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: () => ({
-    template: `<hello-world></hello-world>`
-  })
-};
-
-export const WithCustomTemplate = {
-  render: () => ({
-    template: `<hello-world message.bind="message">Click me!</hello-world>`
-  }),
-  args: {
-    message: 'This is a custom message'
-  }
-};

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

@@ -1,81 +0,0 @@
-import { fn, userEvent, within } from 'storybook/test';
-import { NotificationCenter, NotificationItem } from '../components/notification-center';
-
-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) => ({
-    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,
-    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/src/stories/stat-card.stories.ts

@@ -1,65 +0,0 @@
-import { fn, userEvent, within } from 'storybook/test';
-import { StatCard } from '../components/stat-card';
-
-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,
-  }),
-};
-
-export default meta;
-
-type Story = typeof 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/src/stories/weather-widget.stories.ts

@@ -1,57 +0,0 @@
-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';
-
-const mockService: WeatherService = {
-  async getWeather(location: string): Promise<WeatherSummary> {
-    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,
-    };
-  },
-};
-
-const meta = {
-  title: 'Dashboard/WeatherWidget',
-  component: WeatherWidget,
-  parameters: {
-    layout: 'centered',
-  },
-  render: (args) => ({
-    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',
-  },
-};
-
-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/test/my-app.spec.ts

@@ -1,15 +0,0 @@
-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/test/setup.ts

@@ -1,29 +0,0 @@
-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/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "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/tsconfig.vitest.json

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

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

@@ -1,17 +0,0 @@
-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/vitest.config.ts

@@ -1,15 +0,0 @@
-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"]
-    },
-  }),
-);

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

@@ -1,14 +0,0 @@
-const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-  ],
-  framework: {
-    name: '@aurelia/storybook',
-    options: {},
-  },
-  core: {
-    builder: '@storybook/builder-webpack5',
-  },
-  docs: {},
-};
-export default config; 

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

@@ -1,3 +0,0 @@
-// .storybook/preview.ts
-// Import the render function from the plugin package.
-export { render, renderToCanvas } from '@aurelia/storybook'; 

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

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

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

@@ -1,29 +0,0 @@
-# examples
-
-This project is bootstrapped by [aurelia/new](https://github.com/aurelia/new).
-
-## Start dev web server
-
-    npm start
-
-## Build the app in production mode
-
-    npm run build
-
-It builds all files to dist folder. To deploy to production server, copy all the `dist/*` files to production root folder.
-
-For example
-```
-dist/index.html
-dist/foo.12345.js
-```
-Copy to production root folder
-```
-root_folder/index.html
-root_folder/foo.12345.js
-```
-
-
-## Analyze webpack bundle
-
-    npm run analyze

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

@@ -1,25 +0,0 @@
-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-webpack/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <title>Aurelia</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <base href="/">
-</head>
-
-<body>
-  <my-app></my-app>
-</body>
-
-</html>