@storybook/ember 8.0.0-alpha.2 → 8.0.0-alpha.3

package/dist/client/preview/config.d.ts

@@ -1,3 +1,4 @@
+import './globals';
 export { renderToCanvas } from './render';
 export declare const parameters: {
     renderer: "ember";

package/dist/client/preview/config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parameters = exports.renderToCanvas = void 0;
+require("./globals");
 var render_1 = require("./render");
 Object.defineProperty(exports, "renderToCanvas", { enumerable: true, get: function () { return render_1.renderToCanvas; } });
 exports.parameters = { renderer: 'ember' };

package/dist/client/preview/docs/config.d.ts

@@ -0,0 +1,3 @@
+import type { ArgTypesEnhancer } from '@storybook/types';
+export declare const parameters: {};
+export declare const argTypesEnhancers: ArgTypesEnhancer[];

package/dist/client/preview/docs/config.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.argTypesEnhancers = exports.parameters = void 0;
+const docs_tools_1 = require("@storybook/docs-tools");
+const jsondoc_1 = require("./jsondoc");
+exports.parameters = {
+    docs: {
+        story: { iframeHeight: '80px' },
+        extractArgTypes: jsondoc_1.extractArgTypes,
+        extractComponentDescription: jsondoc_1.extractComponentDescription,
+    },
+};
+exports.argTypesEnhancers = [docs_tools_1.enhanceArgTypes];

package/dist/client/preview/docs/jsondoc.d.ts

@@ -0,0 +1,3 @@
+export declare const getJSONDoc: () => any;
+export declare const extractArgTypes: (componentName: string) => any;
+export declare const extractComponentDescription: (componentName: string) => any;

package/dist/client/preview/docs/jsondoc.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractComponentDescription = exports.extractArgTypes = exports.getJSONDoc = void 0;
+/* eslint-disable no-underscore-dangle */
+const global_1 = require("@storybook/global");
+const getJSONDoc = () => {
+    return global_1.global.__EMBER_GENERATED_DOC_JSON__;
+};
+exports.getJSONDoc = getJSONDoc;
+const extractArgTypes = (componentName) => {
+    const json = (0, exports.getJSONDoc)();
+    if (!(json && json.included)) {
+        return null;
+    }
+    const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
+    if (!componentDoc) {
+        return null;
+    }
+    return componentDoc.attributes.arguments.reduce((acc, prop) => {
+        acc[prop.name] = {
+            name: prop.name,
+            defaultValue: prop.defaultValue,
+            description: prop.description,
+            table: {
+                defaultValue: { summary: prop.defaultValue },
+                type: {
+                    summary: prop.type,
+                    required: prop.tags.length
+                        ? prop.tags.some((tag) => tag.name === 'required')
+                        : false,
+                },
+            },
+        };
+        return acc;
+    }, {});
+};
+exports.extractArgTypes = extractArgTypes;
+const extractComponentDescription = (componentName) => {
+    const json = (0, exports.getJSONDoc)();
+    if (!(json && json.included)) {
+        return null;
+    }
+    const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
+    if (!componentDoc) {
+        return null;
+    }
+    return componentDoc.attributes.description;
+};
+exports.extractComponentDescription = extractComponentDescription;

package/dist/client/preview/render.js

@@ -1,21 +1,19 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToCanvas = void 0;
 const global_1 = require("@storybook/global");
 const ts_dedent_1 = require("ts-dedent");
-// @ts-expect-error (Converted from ts-ignore)
-const component_1 = __importDefault(require("@ember/component")); // eslint-disable-line import/no-unresolved
 const { document } = global_1.global;
 const rootEl = document.getElementById('storybook-root');
-const config = global_1.global.require(`${global_1.global.STORYBOOK_NAME}/config/environment`);
-const app = global_1.global.require(`${global_1.global.STORYBOOK_NAME}/app`).default.create({
-    autoboot: false,
-    rootElement: rootEl,
-    ...config.APP,
-});
+function loadEmberApp() {
+    const config = global_1.global.require(`${global_1.global.STORYBOOK_NAME}/config/environment`);
+    return global_1.global.require(`${global_1.global.STORYBOOK_NAME}/app`).default.create({
+        autoboot: false,
+        rootElement: rootEl,
+        ...config.APP,
+    });
+}
+const app = loadEmberApp();
 let lastPromise = app.boot();
 let hasRendered = false;
 let isRendering = false;
@@ -33,7 +31,7 @@ function render(options, el) {
         return appInstancePrivate.boot().then(() => appInstancePrivate);
     })
         .then((instance) => {
-        instance.register('component:story-mode', component_1.default.extend({
+        instance.register('component:story-mode', Ember.Component.extend({
             layout: template || options,
             ...context,
         }));

package/dist/index.d.ts

@@ -1 +1 @@
-import './client/preview';
+export * from './types';

package/dist/index.js

@@ -1,7 +1,21 @@
 "use strict";
 /// <reference types="webpack-env" />
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-require("./client/preview");
+__exportStar(require("./types"), exports);
 // optimization: stop HMR propagation in webpack
 if (typeof module !== 'undefined')
     module?.hot?.decline();

package/dist/index.mjs

@@ -1,5 +1,5 @@
 /// <reference types="webpack-env" />
-import './client/preview';
+export * from './types';
 // optimization: stop HMR propagation in webpack
 if (typeof module !== 'undefined')
     module?.hot?.decline();

package/dist/server/framework-preset-babel-ember.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.previewAnnotations = exports.babel = void 0;
 const ember_template_compiler_1 = require("ember-source/dist/ember-template-compiler");
-const core_common_1 = require("@storybook/core-common");
+const util_1 = require("../util");
 let emberOptions;
 function precompileWithPlugins(string, options) {
     const precompileOptions = options;
@@ -45,6 +45,6 @@ const babel = (config, options) => {
 };
 exports.babel = babel;
 const previewAnnotations = (entry = []) => {
-    return [...entry, (0, core_common_1.findDistEsm)(__dirname, 'client/preview/config')];
+    return [...entry, (0, util_1.findDistFile)(__dirname, 'client/preview/config')];
 };
 exports.previewAnnotations = previewAnnotations;

package/dist/server/framework-preset-ember-docs.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.previewAnnotations = void 0;
-const core_common_1 = require("@storybook/core-common");
 const docs_tools_1 = require("@storybook/docs-tools");
+const util_1 = require("../util");
 const previewAnnotations = (entry = [], options) => {
     if (!(0, docs_tools_1.hasDocsOrControls)(options))
         return entry;
-    return [...entry, (0, core_common_1.findDistEsm)(__dirname, 'client/docs/config')];
+    return [...entry, (0, util_1.findDistFile)(__dirname, 'client/preview/docs/config')];
 };
 exports.previewAnnotations = previewAnnotations;

package/dist/types.d.ts

@@ -22,4 +22,7 @@ type StorybookConfigFramework = {
  * The interface for Storybook configuration in `main.ts` files.
  */
 export type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
+declare global {
+    var __EMBER_GENERATED_DOC_JSON__: any;
+}
 export {};

package/dist/util.d.ts

@@ -0,0 +1 @@
+export declare const findDistFile: (cwd: string, relativePath: string) => string;

package/dist/util.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findDistFile = void 0;
+const path_1 = __importDefault(require("path"));
+const find_up_1 = require("find-up");
+const findDistFile = (cwd, relativePath) => {
+    const nearestPackageJson = (0, find_up_1.sync)('package.json', { cwd });
+    if (!nearestPackageJson) {
+        throw new Error(`Could not find package.json in: ${cwd}`);
+    }
+    const packageDir = path_1.default.dirname(nearestPackageJson);
+    return path_1.default.join(packageDir, 'dist', relativePath);
+};
+exports.findDistFile = findDistFile;

package/dist/util.mjs

@@ -0,0 +1,10 @@
+import path from 'path';
+import { sync as findUpSync } from 'find-up';
+export const findDistFile = (cwd, relativePath) => {
+    const nearestPackageJson = findUpSync('package.json', { cwd });
+    if (!nearestPackageJson) {
+        throw new Error(`Could not find package.json in: ${cwd}`);
+    }
+    const packageDir = path.dirname(nearestPackageJson);
+    return path.join(packageDir, 'dist', relativePath);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
@@ -32,12 +32,13 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "8.0.0-alpha.2",
-    "@storybook/core-common": "8.0.0-alpha.2",
-    "@storybook/docs-tools": "8.0.0-alpha.2",
+    "@storybook/builder-webpack5": "8.0.0-alpha.3",
+    "@storybook/core-common": "8.0.0-alpha.3",
+    "@storybook/docs-tools": "8.0.0-alpha.3",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "8.0.0-alpha.2",
-    "@storybook/types": "8.0.0-alpha.2",
+    "@storybook/preview-api": "8.0.0-alpha.3",
+    "@storybook/types": "8.0.0-alpha.3",
+    "find-up": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -46,13 +47,14 @@
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "@types/ember__component": "4.0.8",
-    "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
-    "babel-plugin-htmlbars-inline-precompile": "2 || 3",
-    "ember-source": "~3.28.1"
+    "babel-plugin-ember-modules-api-polyfill": "^3.5.0",
+    "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
+    "ember-source": "~3.28.1 || ^4.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"

package/template/cli/Button.stories.js

@@ -6,13 +6,13 @@ import { linkTo } from '@storybook/addon-links';
 export default {
   title: 'Example/Button',
   render: (args) => ({
-    template: hbs`<button {{action onClick}}>{{label}}</button>`,
+    template: hbs`<button {{on "click" this.onClick}}>{{this.label}}</button>`,
     context: args,
   }),
   argTypes: {
     label: { control: 'text' },
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/ember/writing-docs/autodocs
   tags: ['autodocs'],
 };
 
@@ -27,13 +27,14 @@ export const Text = {
 export const Emoji = {
   args: {
     label: '😀 😎 👍 💯',
+    onClick: action('onClick'),
   },
 };
 
 export const TextWithAction = {
   render: () => ({
     template: hbs`
-    <button {{action onClick}}>
+    <button {{on "click" this.onClick}}>
       Trigger Action
     </button>
   `,
@@ -50,12 +51,12 @@ export const TextWithAction = {
 export const ButtonWithLinkToAnotherStory = {
   render: () => ({
     template: hbs`
-    <button {{action onClick}}>
+    <button {{on "click" this.onClick}}>
       Go to Welcome Story
     </button>
   `,
     context: {
-      onClick: linkTo('example-introduction--page'),
+      onClick: linkTo('example-button--docs'),
     },
   }),
   name: 'button with link to another story',