From 54bbaf134faa65c60bf55d70ca613bdf81b74027 Mon Sep 17 00:00:00 2001
From: Philippe Ndiaye <philippe.ndiaye@upfluence.com>
Date: Mon, 5 Jan 2026 18:30:24 +0100
Subject: [PATCH] storybook: wrap component stories w/ a parent Storybook
 component while preserving ctx

---
 .storybook/preview.js                    | 16 ++++++++-
 tests/dummy/app/components/storybook.hbs |  1 +
 tests/dummy/app/components/storybook.ts  | 45 ++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 tests/dummy/app/components/storybook.hbs
 create mode 100644 tests/dummy/app/components/storybook.ts

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 720efc6ac..c4d4ff5d2 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,7 @@
-import './styles/preview.less';
 import { themes } from '@storybook/theming';
+import { hbs } from 'ember-cli-htmlbars';
+
+import './styles/preview.less';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -24,3 +26,15 @@ export const parameters = {
     theme: themes.dark
   }
 };
+
+export const decorators = [
+  (storyFn, { globals }) => {
+    return {
+      template: hbs`<Storybook @globals={{this.globals}} @story={{this.story}}/>`,
+      context: {
+        globals,
+        story: storyFn()
+      }
+    };
+  }
+];
diff --git a/tests/dummy/app/components/storybook.hbs b/tests/dummy/app/components/storybook.hbs
new file mode 100644
index 000000000..a9540b5f4
--- /dev/null
+++ b/tests/dummy/app/components/storybook.hbs
@@ -0,0 +1 @@
+<this.storyComponent @__ctx={{this.storyComponentArgs}} />
\ No newline at end of file
diff --git a/tests/dummy/app/components/storybook.ts b/tests/dummy/app/components/storybook.ts
new file mode 100644
index 000000000..1f35f8eda
--- /dev/null
+++ b/tests/dummy/app/components/storybook.ts
@@ -0,0 +1,45 @@
+import { setComponentTemplate } from '@ember/component';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import type { IntlService } from 'ember-intl';
+
+interface Globals {}
+
+interface StorybookArgs {
+  story: {
+    template: any;
+    context: Record<string, unknown>;
+  };
+  globals: Globals;
+}
+
+export default class StorybookComponent extends Component<StorybookArgs> {
+  @service declare intl: IntlService;
+
+  constructor(owner: any, args: StorybookArgs) {
+    super(owner, args);
+
+    this.intl.setLocale('en-us');
+  }
+
+  get storyComponent() {
+    class StoryComponent extends Component {}
+
+    Object.keys(this.storyComponentArgs).forEach((key) => {
+      Object.defineProperty(StoryComponent.prototype, key, {
+        get() {
+          return (this as any).args.__ctx?.[key];
+        }
+      });
+    });
+
+    setComponentTemplate(this.args.story.template, StoryComponent);
+
+    return StoryComponent;
+  }
+
+  get storyComponentArgs() {
+    return this.args.story.context ?? {};
+  }
+}