[wip] storybook: wrap component stories w/ a parent Storybook component while preserving ctx

.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()
+      }
+    };
+  }
+];

tests/dummy/app/components/storybook.hbs

@@ -0,0 +1 @@
+<this.storyComponent @__ctx={{this.storyComponentArgs}} />

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 ?? {};
+  }
+}