Merge pull request #124 from aurelia/feature/storybook-integration

feat(cli): adds storybook integration

Author: Vheissu

__test__/questions.spec.js

@@ -54,3 +54,41 @@ test('TailwindCSS question comes before unit testing question', t => {
   t.true(testingQuestionIndex >= 0, 'Unit testing question should exist');
   t.true(tailwindQuestionIndex < testingQuestionIndex, 'TailwindCSS question should come before unit testing question');
 });
+
+test('Storybook question is properly included', t => {
+  const storybookQuestion = questions.find(q => 
+    q.message && q.message.includes('Storybook')
+  );
+  
+  t.truthy(storybookQuestion, 'Storybook question should exist');
+  t.is(storybookQuestion.message, 'Do you want to add Storybook?');
+  t.true(Array.isArray(storybookQuestion.choices), 'Storybook question should have choices');
+  t.is(storybookQuestion.choices.length, 2, 'Storybook question should have 2 choices');
+  
+  // Check "No" option
+  const noChoice = storybookQuestion.choices[0];
+  t.is(noChoice.title, 'No');
+  t.is(noChoice.value, undefined);
+  
+  // Check "Yes" option
+  const yesChoice = storybookQuestion.choices[1];
+  t.is(yesChoice.value, 'storybook');
+  t.is(yesChoice.title, 'Yes');
+  t.truthy(yesChoice.hint);
+  t.true(yesChoice.hint.includes('Vite or Webpack'));
+  t.truthy(yesChoice.if);
+  t.is(yesChoice.if, '(app && (vite || webpack)) || (plugin && webpack)');
+});
+
+test('Storybook question comes after e2e testing question', t => {
+  const e2eQuestionIndex = questions.findIndex(q => 
+    q.message && q.message.includes('e2e test')
+  );
+  const storybookQuestionIndex = questions.findIndex(q => 
+    q.message && q.message.includes('Storybook')
+  );
+  
+  t.true(e2eQuestionIndex >= 0, 'E2E testing question should exist');
+  t.true(storybookQuestionIndex >= 0, 'Storybook question should exist');
+  t.true(storybookQuestionIndex > e2eQuestionIndex, 'Storybook question should come after e2e testing question');
+});

__test__/storybook.spec.js

@@ -0,0 +1,119 @@
+const test = require('ava');
+const fs = require('fs');
+const path = require('path');
+
+test('Storybook configuration files exist', t => {
+  // Check main config
+  const mainPath = path.join(__dirname, '..', 'common', 'storybook-main.ext__if_storybook');
+  t.true(fs.existsSync(mainPath), 'Storybook main config should exist');
+  
+  // Check preview config
+  const previewPath = path.join(__dirname, '..', 'common', 'storybook-preview.ext__if_storybook');
+  t.true(fs.existsSync(previewPath), 'Storybook preview config should exist');
+  
+  // Check README
+  const readmePath = path.join(__dirname, '..', 'storybook__if_storybook', 'README.md');
+  t.true(fs.existsSync(readmePath), 'Storybook README should exist');
+});
+
+test('Storybook configuration includes both Vite and Webpack setups', t => {
+  const mainPath = path.join(__dirname, '..', 'common', 'storybook-main.ext__if_storybook');
+  const content = fs.readFileSync(mainPath, 'utf8');
+  
+  t.true(content.includes('@aurelia/storybook'), 'Should use Aurelia Storybook framework');
+  t.true(content.includes('@storybook/builder-vite'), 'Should use Vite builder');
+  t.true(content.includes('@storybook/builder-webpack5'), 'Should use Webpack5 builder');
+  t.true(content.includes('@storybook/addon-links'), 'Should include links addon');
+  t.true(content.includes('viteFinal'), 'Should have viteFinal configuration');
+  t.true(content.includes('@aurelia/runtime-html'), 'Should exclude Aurelia runtime from optimization');
+  t.true(content.includes('/* @if vite */'), 'Should have Vite conditional');
+  t.true(content.includes('/* @if webpack */'), 'Should have Webpack conditional');
+});
+
+test('Storybook Webpack configuration is included', t => {
+  const mainPath = path.join(__dirname, '..', 'common', 'storybook-main.ext__if_storybook');
+  const content = fs.readFileSync(mainPath, 'utf8');
+  
+  t.true(content.includes('docs: {}'), 'Should have docs configuration');
+});
+
+test('Storybook preview configuration is correct', t => {
+  const previewPath = path.join(__dirname, '..', 'common', 'storybook-preview.ext__if_storybook');
+  const content = fs.readFileSync(previewPath, 'utf8');
+  
+  t.true(content.includes("export { render, renderToCanvas } from '@aurelia/storybook'"), 
+    'Should export render functions from Aurelia Storybook plugin');
+});
+
+test('Storybook story files exist and are properly structured', t => {
+  // Check app-min story file
+  const appMinStoryPath = path.join(__dirname, '..', 'app-min', 'src', 'my-app.stories.ext__if_storybook');
+  t.true(fs.existsSync(appMinStoryPath), 'App-min story file should exist');
+  
+  const appMinContent = fs.readFileSync(appMinStoryPath, 'utf8');
+  t.true(appMinContent.includes('/* @if vite */'), 'Should have Vite conditional');
+  t.true(appMinContent.includes('/* @if webpack */'), 'Should have Webpack conditional');
+  t.true(appMinContent.includes('import { MyApp }'), 'Should import MyApp component');
+  
+  // Check app-with-router story file
+  const routerStoryPath = path.join(__dirname, '..', 'app-with-router', 'src', 'welcome-page.stories.ext__if_storybook');
+  t.true(fs.existsSync(routerStoryPath), 'Router app story file should exist');
+  
+  // Check plugin story file
+  const pluginStoryPath = path.join(__dirname, '..', 'plugin-min', 'src', 'hello-world.stories.ext__if_storybook');
+  t.true(fs.existsSync(pluginStoryPath), 'Plugin story file should exist');
+});
+
+test('Vite package.json includes correct Storybook dependencies', t => {
+  const vitePackagePath = path.join(__dirname, '..', 'vite', 'package.json');
+  const content = fs.readFileSync(vitePackagePath, 'utf8');
+  
+  t.true(content.includes('"@aurelia/storybook": "^1.0.2"'), 'Should include Aurelia Storybook plugin v1.0.2');
+  t.true(content.includes('"storybook": "^9.0.0"'), 'Should include Storybook 9');
+  t.true(content.includes('"@storybook/builder-vite": "^9.0.0"'), 'Should include Vite builder');
+  t.true(content.includes('"@storybook/addon-links": "^9.0.0"'), 'Should include links addon');
+  t.true(content.includes('"@storybook/addon-actions": "^9.0.0"'), 'Should include actions addon');
+  t.true(content.includes('"@storybook/test": "^9.0.0-alpha.2"'), 'Should include test utilities');
+  
+  // Check scripts
+  t.true(content.includes('"storybook": "storybook dev -p 6006"'), 'Should include storybook dev script');
+  t.true(content.includes('"build-storybook": "storybook build"'), 'Should include build script');
+});
+
+test('Webpack package.json includes correct Storybook dependencies', t => {
+  const webpackPackagePath = path.join(__dirname, '..', 'webpack', 'package.json');
+  const content = fs.readFileSync(webpackPackagePath, 'utf8');
+  
+  t.true(content.includes('"@aurelia/storybook": "^1.0.2"'), 'Should include Aurelia Storybook plugin v1.0.2');
+  t.true(content.includes('"storybook": "^9.0.0"'), 'Should include Storybook 9');
+  t.true(content.includes('"@storybook/builder-webpack5": "^9.0.0"'), 'Should include Webpack5 builder');
+  t.true(content.includes('"@storybook/addon-links": "^9.0.0"'), 'Should include links addon');
+  
+  // Check scripts
+  t.true(content.includes('"storybook": "storybook dev -p 6006"'), 'Should include storybook dev script');
+  t.true(content.includes('"build-storybook": "storybook build"'), 'Should include build script');
+});
+
+test('Storybook README contains helpful information', t => {
+  const readmePath = path.join(__dirname, '..', 'storybook__if_storybook', 'README.md');
+  const content = fs.readFileSync(readmePath, 'utf8');
+  
+  t.true(content.includes('# Storybook Integration'), 'Should have main heading');
+  t.true(content.includes('npm run storybook'), 'Should include dev command');
+  t.true(content.includes('npm run build-storybook'), 'Should include build command');
+  t.true(content.includes('http://localhost:6006'), 'Should mention default port');
+  t.true(content.includes('.stories.ts'), 'Should explain story file naming');
+  t.true(content.includes('Aurelia Storybook'), 'Should reference the plugin');
+});
+
+test('After task includes Storybook setup logic', t => {
+  const afterPath = path.join(__dirname, '..', 'after.js');
+  const content = fs.readFileSync(afterPath, 'utf8');
+  
+  t.true(content.includes("if (features.includes('storybook'))"), 'Should check for storybook feature');
+  t.true(content.includes("fs.mkdirSync('.storybook')"), 'Should create .storybook directory');
+  t.true(content.includes('storybook-main'), 'Should reference storybook-main file');
+  t.true(content.includes('storybook-preview'), 'Should reference storybook-preview file');
+  t.true(content.includes('.storybook/main'), 'Should move to .storybook/main');
+  t.true(content.includes('.storybook/preview'), 'Should move to .storybook/preview');
+}); 

after.js

@@ -1,6 +1,8 @@
 // Use "after" task to ask user to install deps.
 
 const {execSync} = require('child_process');
+const fs = require('fs');
+const path = require('path');
 
 function isAvailable(bin) {
   try {
@@ -21,7 +23,7 @@ module.exports = async function({
   const c = ansiColors;
   let depsInstalled = false;
   let packageManager = undefined;
-
+  
   if (!unattended) {
     const choices = [
       {title: 'No'},
@@ -58,6 +60,45 @@ module.exports = async function({
     _log(c.inverse(` npx makes aurelia new-project-name${here ? ' --here' : ''} -s ${notDefaultFeatures.length ? (notDefaultFeatures.join(',') + ' ') : ''}`));
   }
 
+  // Setup Storybook directory and files
+  if (features.includes('storybook')) {
+    try {
+      // Navigate to project directory if we're not in it already
+      const projectDir = here ? '.' : properties.name;
+      const originalCwd = process.cwd();
+      
+      if (!here && fs.existsSync(projectDir)) {
+        process.chdir(projectDir);
+      }
+      
+      // Create .storybook directory
+      if (!fs.existsSync('.storybook')) {
+        fs.mkdirSync('.storybook');
+      }
+
+      // Move and rename storybook configuration files
+      const extension = features.includes('typescript') ? '.ts' : '.js';
+      
+      const mainFile = `storybook-main${extension}`;
+      const previewFile = `storybook-preview${extension}`;
+      
+      if (fs.existsSync(mainFile)) {
+        fs.renameSync(mainFile, `.storybook/main${extension}`);
+      }
+      
+      if (fs.existsSync(previewFile)) {
+        fs.renameSync(previewFile, `.storybook/preview${extension}`);
+      }
+      
+      // Return to original directory
+      if (!here && originalCwd !== process.cwd()) {
+        process.chdir(originalCwd);
+      }
+    } catch (error) {
+      _log(c.yellow(`Warning: Could not setup .storybook directory: ${error.message}`));
+    }
+  }
+
   _log(`\n${c.underline.bold('Get Started')}`);
   if (!here) _log('cd ' + properties.name);
 

app-min/src/my-app.stories.ext__if_storybook

@@ -0,0 +1,56 @@
+/* @if vite */
+import { MyApp } from './my-app';
+//import { action } from '@storybook/addon-actions';
+//import { userEvent, within } from '@storybook/test';
+
+const meta = {
+  title: 'Example/MyApp',
+  component: MyApp,
+  render: () => ({
+    template: `<my-app message.bind="message"></my-app>`,
+  }),
+  argTypes: {
+    message: { control: 'text' }
+  }
+};
+
+export default meta;
+
+export const Default = {
+  args: {
+    message: 'Hello from Storybook!'
+  }
+};
+
+export const CustomMessage = {
+  args: {
+    message: 'This is a custom message for testing'
+  }
+};
+
+export const WelcomeMessage = {
+  args: {
+    message: 'Welcome to your Aurelia 2 + Storybook setup!'
+  }
+};
+
+export const NoArgs = {
+  render: () => ({
+    template: `<my-app></my-app>`
+  })
+};
+/* @endif */
+/* @if webpack */
+import { MyApp } from './my-app';
+
+export default {
+  title: 'MyApp',
+  component: MyApp,
+};
+
+export const Default = () => ({
+  Component: MyApp,
+  template: '<my-app></my-app>',
+  props: {}
+});
+/* @endif */ 

app-with-router/src/welcome-page.stories.ext__if_storybook

@@ -0,0 +1,54 @@
+/* @if vite */
+import { WelcomePage } from './welcome-page';
+
+const meta = {
+  title: 'Pages/WelcomePage',
+  component: WelcomePage,
+  render: () => ({
+    template: `<welcome-page message.bind="message"></welcome-page>`,
+  }),
+  argTypes: {
+    message: { control: 'text' }
+  }
+};
+
+export default meta;
+
+export const Default = {
+  args: {
+    message: 'Welcome to Aurelia 2!'
+  }
+};
+
+export const CustomWelcome = {
+  args: {
+    message: 'Welcome to your amazing Aurelia app!'
+  }
+};
+
+export const StorybookWelcome = {
+  args: {
+    message: 'Welcome to Storybook + Aurelia 2!'
+  }
+};
+
+export const LongMessage = {
+  args: {
+    message: 'Welcome to this comprehensive demonstration of Aurelia 2 components in Storybook!'
+  }
+};
+/* @endif */
+/* @if webpack */
+import { WelcomePage } from './welcome-page';
+
+export default {
+  title: 'WelcomePage',
+  component: WelcomePage,
+};
+
+export const Default = () => ({
+  Component: WelcomePage,
+  template: '<welcome-page></welcome-page>',
+  props: {}
+});
+/* @endif */ 

common/storybook-main.ext__if_storybook

@@ -0,0 +1,48 @@
+/* @if vite */
+import type { StorybookConfig } from 'storybook/internal/types';
+import { mergeConfig, type InlineConfig } from 'vite';
+
+const config: StorybookConfig & { viteFinal?: (config: InlineConfig, options: { configType: string }) => InlineConfig | Promise<InlineConfig> } = {
+  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+  addons: [
+    '@storybook/addon-links'
+  ],
+  framework: {
+    name: '@aurelia/storybook',
+    options: {},
+  },
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  viteFinal: async (viteConfig) => {
+    viteConfig.optimizeDeps = viteConfig.optimizeDeps || {};
+    viteConfig.optimizeDeps.exclude = viteConfig.optimizeDeps.exclude || [];
+    if (!viteConfig.optimizeDeps.exclude.includes('@aurelia/runtime-html')) {
+      viteConfig.optimizeDeps.exclude.push('@aurelia/runtime-html');
+    }
+    return mergeConfig(viteConfig, {
+      // ...any additional Vite configuration
+    });
+  },
+};
+
+export default config;
+/* @endif */
+/* @if webpack */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links"
+  ],
+  framework: {
+    name: '@aurelia/storybook',
+    options: {},
+  },
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  docs: {},
+};
+
+export default config;
+/* @endif */ 

common/storybook-preview.ext__if_storybook

@@ -0,0 +1,2 @@
+// Import the render function from the Aurelia Storybook plugin
+export { render, renderToCanvas } from '@aurelia/storybook';