@aurelia/storybook 2.2.1 → 2.3.0

package/apps/hello-world-webpack/src/my-app.css

@@ -1,3 +0,0 @@
-.message {
-  background-color: lightblue;
-}

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

@@ -1 +0,0 @@
-<div class="message">${message}</div>

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

@@ -1,17 +0,0 @@
-import { defineAureliaStory } from '@aurelia/storybook';
-import { MyApp } from './my-app';
-
-const meta = {
-  title: 'Example/MyApp',
-  component: MyApp,
-  render: () =>
-    defineAureliaStory({
-      template: `<my-app></my-app>`,
-    }),
-};
-
-export default meta;
-
-export const Default = {
-  args: {}
-}; 

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

@@ -1,3 +0,0 @@
-export class MyApp {
-  public message = 'Hello World!';
-}

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

@@ -1,13 +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';

package/apps/hello-world-webpack/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-webpack/src/stories/feedback-form.stories.ts

@@ -1,58 +0,0 @@
-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-webpack/src/stories/hello-world.stories.ts

@@ -1,64 +0,0 @@
-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-webpack/src/stories/notification-center.stories.ts

@@ -1,88 +0,0 @@
-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-webpack/src/stories/stat-card.stories.ts

@@ -1,75 +0,0 @@
-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-webpack/src/stories/weather-widget.stories.ts

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

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

package/apps/hello-world-webpack/webpack.config.js

@@ -1,111 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
-const Dotenv = require('dotenv-webpack');
-const TerserPlugin = require('terser-webpack-plugin');
-
-
-const cssLoader = {
-  loader: 'css-loader'
-};
-
-const postcssLoader = {
-  loader: 'postcss-loader',
-  options: {
-    postcssOptions: {
-      plugins: ['autoprefixer']
-    }
-  }
-};
-
-module.exports = function(env, { analyze }) {
-  const production = env.production || process.env.NODE_ENV === 'production';
-  return {
-    target: 'web',
-    mode: production ? 'production' : 'development',
-    devtool: production ? undefined : 'eval-source-map',
-    optimization: {
-      minimizer: [
-        new TerserPlugin({
-          terserOptions: {
-            // Terser fast minify mode
-            // https://github.com/terser-js/terser#terser-fast-minify-mode
-            // It's a good balance on size and speed to turn off compress.
-            // Also bypass some terser bug.
-            compress: false
-          },
-        }),
-      ],
-    },
-    entry: {
-      entry: './src/main.ts',
-    },
-    output: {
-      clean: true,
-      path: path.resolve(__dirname, 'dist'),
-      filename: production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
-    },
-    resolve: {
-      extensions: ['.ts', '.js'],
-      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
-      alias: production ? {
-        // add your production aliases here
-      } : {
-        ...getAureliaDevAliases()
-        // add your development aliases here
-      }
-    },
-    devServer: {
-      historyApiFallback: true,
-      open: !process.env.CI,
-      port: 9000
-    },
-    module: {
-      rules: [
-        { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset' },
-        { test: /\.(woff|woff2|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,  type: 'asset' },
-        { test: /\.css$/i, use: [ 'style-loader', cssLoader, postcssLoader ] },
-        { test: /\.ts$/i, use: ['ts-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
-        {
-          test: /[/\\]src[/\\].+\.html$/i,
-          use: '@aurelia/webpack-loader',
-          exclude: /node_modules/
-        }
-      ]
-    },
-    plugins: [
-      new HtmlWebpackPlugin({ template: 'index.html', favicon: 'favicon.ico' }),
-      new Dotenv({
-        path: `./.env${production ? '' :  '.' + (process.env.NODE_ENV || 'development')}`,
-      }),
-      analyze && new BundleAnalyzerPlugin()
-    ].filter(p => p)
-  }
-}
-
-function getAureliaDevAliases() {
-  return [
-    'aurelia',
-    'fetch-client',
-    'kernel',
-    'metadata',
-    'platform',
-    'platform-browser',
-    'route-recognizer',
-    'router',
-    'router-lite',
-    'runtime',
-    'runtime-html',
-    'testing',
-    'state',
-    'ui-virtualization'
-  ].reduce((map, pkg) => {
-    const name = pkg === 'aurelia' ? pkg : `@aurelia/${pkg}`;
-    try {
-      const packageLocation = require.resolve(name);
-      map[name] = path.resolve(packageLocation, `../../esm/index.dev.mjs`);
-    } catch {/**/}
-    return map;
-  }, {});
-}

package/jest.config.cjs

@@ -1,9 +0,0 @@
-module.exports = {
-  preset: "ts-jest",
-  testEnvironment: "jsdom",
-  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
-  transform: {
-    "^.+\\.tsx?$": ["ts-jest"],
-  },
-  testMatch: ["**/__tests__/**/*.test.ts?(x)"]
-};

package/rollup.config.mjs

@@ -1,52 +0,0 @@
-import typescript from '@rollup/plugin-typescript';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import { glob } from 'glob';
-
-const external = [
-  '@aurelia/runtime-html',
-  '@aurelia/vite-plugin',
-  '@storybook/builder-vite',
-  '@rsbuild/core',
-  'aurelia',
-  'react',
-  'react-dom',
-  'storybook/internal/types',
-  'storybook/theming'
-];
-
-// Get all TypeScript files from src directory
-const srcFiles = glob
-  .sync('src/**/*.ts', { ignore: ['src/preview/types.ts', 'src/preview/storybook-types.ts'] })
-  .reduce((acc, file) => {
-  const key = file.replace(/^src\//, '').replace(/\.ts$/, '');
-  acc[key] = file;
-  return acc;
-}, {});
-
-const createConfig = (input, output) => ({
-  input,
-  output: {
-    file: output,
-    format: 'esm',
-    sourcemap: true,
-    exports: 'named'
-  },
-  plugins: [
-    typescript({
-      tsconfig: './tsconfig.json',
-      declaration: false,
-      outDir: 'dist'
-    }),
-    resolve(),
-    commonjs()
-  ],
-  external
-});
-
-// Create configs for all source files - ESM only for Storybook v10
-const configs = Object.entries(srcFiles).map(([name, input]) =>
-  createConfig(input, `dist/${name}.js`)
-);
-
-export default configs;

package/scripts/sync-versions.cjs

@@ -1,55 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const checkOnly = process.argv.includes('--check');
-
-const rootPath = path.resolve(__dirname, '..');
-const rootPkgPath = path.join(rootPath, 'package.json');
-const rootPkg = JSON.parse(fs.readFileSync(rootPkgPath, 'utf8'));
-const version = rootPkg.version;
-
-const exampleDirs = [
-  'apps/hello-world',
-  'apps/hello-world-webpack',
-  'apps/hello-world-rsbuild',
-];
-
-let failed = false;
-
-for (const dir of exampleDirs) {
-  const pkgPath = path.join(rootPath, dir, 'package.json');
-  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-  let changed = false;
-
-  if (pkg.version !== version) {
-    if (checkOnly) {
-      failed = true;
-    } else {
-      pkg.version = version;
-      changed = true;
-    }
-  }
-
-  for (const depKey of ['dependencies', 'devDependencies', 'peerDependencies']) {
-    if (pkg[depKey] && pkg[depKey]['@aurelia/storybook']) {
-      const desired = `^${version}`;
-      if (pkg[depKey]['@aurelia/storybook'] !== desired) {
-        if (checkOnly) {
-          failed = true;
-        } else {
-          pkg[depKey]['@aurelia/storybook'] = desired;
-          changed = true;
-        }
-      }
-    }
-  }
-
-  if (!checkOnly && changed) {
-    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
-  }
-}
-
-if (checkOnly && failed) {
-  console.error('Example app versions are out of sync with root package.json.');
-  process.exit(1);
-}