@aurelia/storybook 2.0.0 → 2.1.0

package/apps/hello-world/src/stories/feedback-form.stories.ts

@@ -0,0 +1,52 @@
+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,6 +1,5 @@
 import { HelloWorld } from '../hello-world';
-import { fn } from '@storybook/test';
-import { userEvent, within } from '@storybook/test';
+import { fn, userEvent, within } from 'storybook/test';
 
 const meta = {
   title: 'Example/HelloWorld',
@@ -18,14 +17,14 @@ export default meta;
 
 export const DefaultHelloWorld = {
   args: {
-    message: "Hello frof",
+    message: 'Hello from Aurelia Storybook',
     onIncrement: fn()
   }
 };
 
 export const InteractiveHelloWorld = {
   args: {
-    message: "fsdfdddsdsdsdsdddddfdddd",
+    message: 'Try clicking the button!',
     onIncrement: fn()
   },
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
@@ -49,6 +48,6 @@ export const WithCustomTemplate = {
     template: `<hello-world message.bind="message">Click me!</hello-world>`
   }),
   args: {
-    message: "This is a custom messageddd"
+    message: 'This is a custom message'
   }
 };

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "skipLibCheck": true,
     "target": "ES2017",
     "esModuleInterop": true,
@@ -10,8 +10,9 @@
     "sourceMap": true
   },
   "include": [
-    "src"
-, "aurelia-sfc-plugin.js"  ],
+    "src",
+    "aurelia-sfc-plugin.js"
+  ],
   "files": [
     "src/resource.d.ts"
   ]

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

@@ -1,5 +1,4 @@
 import { defineConfig } from 'vite';
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import aurelia from '@aurelia/vite-plugin';
 
 export default defineConfig({
@@ -14,6 +13,5 @@ export default defineConfig({
     aurelia({
       useDev: true,
     }),
-    nodePolyfills(),
   ],
 });

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

@@ -1,7 +1,6 @@
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-links"
   ],
   framework: {
     name: '@aurelia/storybook',