@aurelia/storybook 0.1.1 → 1.0.1

package/apps/hello-world/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "apptasks-video",
+  "description": "An Aurelia 2 client application.",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "???"
+  },
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@aurelia/router": "^2.0.0-beta.24",
+    "@aurelia/validation": "^2.0.0-beta.24",
+    "@aurelia/validation-html": "^2.0.0-beta.24",
+    "aurelia": "^2.0.0-beta.24"
+  },
+  "devDependencies": {
+    "@aurelia/storybook": "file:../..",
+    "@aurelia/testing": "^2.0.0-beta.24",
+    "@aurelia/vite-plugin": "^2.0.0-beta.24",
+    "@storybook/addon-actions": "^9.0.0",
+    "@storybook/addon-links": "^9.0.0",
+    "@storybook/builder-vite": "^9.0.0",
+    "@storybook/test": "^9.0.0-alpha.2",
+    "storybook": "^9.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^22.10.2",
+    "eslint": "^9.17.0",
+    "globals": "^15.14.0",
+    "jsdom": "^25.0.1",
+    "node-html-parser": "^7.0.1",
+    "sass": "^1.83.4",
+    "stylelint": "^16.12.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylus": "^0.64.0",
+    "tailwindcss": "^4.0.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^6.0.3",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vitest": "^2.1.8"
+  },
+  "scripts": {
+    "lint:js": "eslint src test",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "lint": "npm run lint:js && npm run lint:css",
+    "pretest": "npm run lint",
+    "start": "vite",
+    "build": "vite build",
+    "test": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "type": "module",
+  "overrides": {
+    "vite-plugin-node-polyfills": {
+      "vite": "^6.0.0"
+    }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}

package/apps/hello-world/src/hello-world.html

@@ -0,0 +1,6 @@
+<div style="border: 1px solid #ccc; padding: 16px; border-radius: 4px;">
+  <h1>${message}</h1>
+  <p>Counter: ${counter}</p>
+  <button click.trigger="increment()">Increment</button>
+  <au-slot></au-slot>
+</div>

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

@@ -0,0 +1,17 @@
+import { bindable } from 'aurelia';
+
+export class HelloWorld {
+  @bindable() message = 'Hello from Aurelia!';
+  // New reactive counter property to track number of clicks
+  counter = 0;
+  // New bindable event callback for the increment action
+  @bindable() onIncrement;
+
+  // Method to increment the counter and fire the onIncrement callback if provided.
+  increment() {
+    this.counter++;
+    if (this.onIncrement) {
+      this.onIncrement(this.counter);
+    }
+  }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { HelloWorld } from '../hello-world';
+import { action } from '@storybook/addon-actions';
+import { 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 Storybook!",
+    onIncrement: action('increment')
+  }
+};
+
+export const InteractiveHelloWorld = {
+  args: {
+    message: "Try clicking the button!",
+    onIncrement: action('increment')
+  },
+  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/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/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/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "node",
+    "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

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

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

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

package/apps/hello-world/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"]
+    },
+  }),
+);

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

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

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

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

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

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

package/apps/hello-world-webpack/.yarnrc.yml

@@ -0,0 +1,2 @@
+# For compatibility in yarn 2+
+nodeLinker: node-modules

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

@@ -0,0 +1,29 @@
+# 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

@@ -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-webpack/index.html

@@ -0,0 +1,15 @@
+<!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>