@aurelia/storybook 2.1.0 → 2.3.0

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

@@ -1,15 +0,0 @@
-import { MyApp } from './my-app';
-
-const meta = {
-  title: 'Example/MyApp',
-  component: MyApp,
-  render: () => ({
-    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,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-webpack/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-webpack/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-webpack/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-webpack/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-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/dist/preview/types.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=types.js.map

package/dist/preview/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/jest.config.js

@@ -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,50 +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',
-  'aurelia',
-  'react',
-  'react-dom',
-  'storybook/internal/core-events',
-  'storybook/internal/types',
-  'storybook/theming'
-];
-
-// Get all TypeScript files from src directory
-const srcFiles = glob.sync('src/**/*.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/src/index.ts

@@ -1,32 +0,0 @@
-import type { StorybookConfig } from 'storybook/internal/types';
-import { renderToCanvas } from './preview/render';
-
-export { renderToCanvas };
-export const render = renderToCanvas;
-
-// Define the framework
-export const framework = {
-  name: '@aurelia/storybook',
-  options: {}
-};
-
-// Framework configuration for Storybook
-export const frameworkOptions = {
-  builder: {
-    name: '@storybook/builder-vite',
-    options: {}
-  }
-};
-
-// Export a complete framework configuration
-export const aureliaFramework = {
-  name: '@aurelia/storybook',
-  options: {},
-  builder: '@storybook/builder-vite'
-};
-
-// Provide external dependencies configuration
-export const externals = {
-  'react': 'React',
-  'react-dom': 'ReactDOM'
-};

package/src/preset.ts

@@ -1,49 +0,0 @@
-// src/preset.ts
-// Minimal preset for Storybook-Aurelia2
-
-import { getRules } from './webpack';
-
-/**
- * Optionally adjust the Vite configuration.
- */
-export async function viteFinal(config: any): Promise<any> {
-    // Configure Vite to properly handle dependencies
-    config.define = config.define || {};
-    config.define['process.env.NODE_ENV'] = JSON.stringify(process.env.NODE_ENV || 'development');
-    
-    // Configure optimization deps
-    config.optimizeDeps = config.optimizeDeps || {};
-    config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
-    
-    // Only exclude Aurelia-specific dependencies that cause issues
-    const excludeList = [
-        '@aurelia/runtime-html'
-    ];
-    
-    excludeList.forEach(dep => {
-        if (!config.optimizeDeps.exclude.includes(dep)) {
-            config.optimizeDeps.exclude.push(dep);
-        }
-    });
-    
-    return config;
-}
-
-/**
- * A function to configure webpack.
- * @param config
- * @returns
- */
-export async function webpackFinal(config: any): Promise<any> {
-    const rules = config.module?.rules;
-    if (rules) {
-        rules.push(...getRules());
-    }
-
-    return config;
-}
-
-// Export a default for compatibility.
-export default { viteFinal, webpackFinal };
-
-export const previewAnnotations = ['./preview.js'];