@storybook/ember 7.0.0-alpha.5 → 7.0.0-alpha.50

package/README.md

@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-ember-app
-npx sb init
+npx storybook init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.parameters = void 0;
-Object.defineProperty(exports, "renderToDOM", {
+Object.defineProperty(exports, "renderToCanvas", {
   enumerable: true,
   get: function () {
-    return _render.renderToDOM;
+    return _render.renderToCanvas;
   }
 });
 

package/dist/cjs/client/preview/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = exports.forceReRender = exports.configure = exports.clearDecorators = exports.addParameters = exports.addDecorator = void 0;
+exports.storiesOf = exports.raw = exports.forceReRender = exports.configure = void 0;
 
 var _coreClient = require("@storybook/core-client");
 
@@ -15,30 +15,20 @@ const {
   configure: coreConfigure,
   clientApi,
   forceReRender
-} = (0, _coreClient.start)(_render.renderToDOM);
+} = (0, _coreClient.start)(_render.renderToCanvas);
 exports.forceReRender = forceReRender;
 const {
-  setAddon,
-  addDecorator,
-  addParameters,
-  clearDecorators,
-  getStorybook,
   raw
 } = clientApi;
 exports.raw = raw;
-exports.getStorybook = getStorybook;
-exports.clearDecorators = clearDecorators;
-exports.addParameters = addParameters;
-exports.addDecorator = addDecorator;
-exports.setAddon = setAddon;
-const framework = 'ember';
+const FRAMEWORK = 'ember';
 
 const storiesOf = (kind, m) => clientApi.storiesOf(kind, m).addParameters({
-  framework
+  framework: FRAMEWORK
 });
 
 exports.storiesOf = storiesOf;
 
-const configure = (loadable, m) => coreConfigure(framework, loadable, m);
+const configure = (loadable, m) => coreConfigure(FRAMEWORK, loadable, m);
 
 exports.configure = configure;

package/dist/cjs/client/preview/render.js

@@ -3,19 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderToDOM = renderToDOM;
+exports.renderToCanvas = renderToCanvas;
 
 var _global = _interopRequireDefault(require("global"));
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+var _tsDedent = require("ts-dedent");
+
+var _component = _interopRequireDefault(require("@ember/component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// @ts-expect-error (Converted from ts-ignore)
 const {
   window: globalWindow,
   document
 } = _global.default;
-const rootEl = document.getElementById('root');
+const rootEl = document.getElementById('storybook-root');
 
 const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`);
 
@@ -45,7 +48,7 @@ function render(options, el) {
     const appInstancePrivate = app.buildInstance();
     return appInstancePrivate.boot().then(() => appInstancePrivate);
   }).then(instance => {
-    instance.register('component:story-mode', Ember.Component.extend(Object.assign({
+    instance.register('component:story-mode', _component.default.extend(Object.assign({
       layout: template || options
     }, context)));
     const component = instance.lookup('component:story-mode');
@@ -63,19 +66,19 @@ function render(options, el) {
   });
 }
 
-function renderToDOM({
+function renderToCanvas({
   storyFn,
   kind,
   name,
   showMain,
   showError
-}, domElement) {
+}, canvasElement) {
   const element = storyFn();
 
   if (!element) {
     showError({
       title: `Expecting a Ember element from the story: "${name}" of "${kind}".`,
-      description: (0, _tsDedent.default)`
+      description: (0, _tsDedent.dedent)`
         Did you forget to return the Ember element from the story?
         Use "() => hbs('{{component}}')" or "() => { return {
           template: hbs\`{{component}}\`
@@ -86,5 +89,5 @@ function renderToDOM({
   }
 
   showMain();
-  render(element, domElement);
+  render(element, canvasElement);
 }

package/dist/cjs/client/preview/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/index.js

@@ -3,18 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "addDecorator", {
-  enumerable: true,
-  get: function () {
-    return _preview.addDecorator;
-  }
-});
-Object.defineProperty(exports, "addParameters", {
-  enumerable: true,
-  get: function () {
-    return _preview.addParameters;
-  }
-});
 Object.defineProperty(exports, "configure", {
   enumerable: true,
   get: function () {
@@ -27,24 +15,12 @@ Object.defineProperty(exports, "forceReRender", {
     return _preview.forceReRender;
   }
 });
-Object.defineProperty(exports, "getStorybook", {
-  enumerable: true,
-  get: function () {
-    return _preview.getStorybook;
-  }
-});
 Object.defineProperty(exports, "raw", {
   enumerable: true,
   get: function () {
     return _preview.raw;
   }
 });
-Object.defineProperty(exports, "setAddon", {
-  enumerable: true,
-  get: function () {
-    return _preview.setAddon;
-  }
-});
 Object.defineProperty(exports, "storiesOf", {
   enumerable: true,
   get: function () {

package/dist/cjs/preset.js

@@ -4,12 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.core = exports.addons = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const addons = [require.resolve('./server/framework-preset-babel-ember'), require.resolve('./server/framework-preset-ember-docs')];
 exports.addons = addons;
 
-const core = async config => {
+const core = async (config, options) => {
+  const framework = await options.presets.apply('framework');
   return Object.assign({}, config, {
-    builder: require.resolve('@storybook/builder-webpack5')
+    builder: {
+      name: _path.default.dirname(require.resolve(_path.default.join('@storybook/builder-webpack5', 'package.json'))),
+      options: typeof framework === 'string' ? {} : framework.options.builder || {}
+    }
   });
 };
 

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,4 +1,4 @@
-export { renderToDOM } from './render';
+export { renderToCanvas } from './render';
 export const parameters = {
   framework: 'ember'
 };

package/dist/esm/client/preview/index.js

@@ -1,22 +1,17 @@
 import { start } from '@storybook/core-client';
 import './globals';
-import { renderToDOM } from './render';
+import { renderToCanvas } from './render';
 const {
   configure: coreConfigure,
   clientApi,
   forceReRender
-} = start(renderToDOM);
+} = start(renderToCanvas);
 export const {
-  setAddon,
-  addDecorator,
-  addParameters,
-  clearDecorators,
-  getStorybook,
   raw
 } = clientApi;
-const framework = 'ember';
+const FRAMEWORK = 'ember';
 export const storiesOf = (kind, m) => clientApi.storiesOf(kind, m).addParameters({
-  framework
+  framework: FRAMEWORK
 });
-export const configure = (loadable, m) => coreConfigure(framework, loadable, m);
+export const configure = (loadable, m) => coreConfigure(FRAMEWORK, loadable, m);
 export { forceReRender };

package/dist/esm/client/preview/render.js

@@ -1,10 +1,13 @@
 import global from 'global';
-import dedent from 'ts-dedent';
+import { dedent } from 'ts-dedent';
+// @ts-expect-error (Converted from ts-ignore)
+import Component from '@ember/component'; // eslint-disable-line import/no-unresolved
+
 const {
   window: globalWindow,
   document
 } = global;
-const rootEl = document.getElementById('root');
+const rootEl = document.getElementById('storybook-root');
 
 const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`);
 
@@ -34,7 +37,7 @@ function render(options, el) {
     const appInstancePrivate = app.buildInstance();
     return appInstancePrivate.boot().then(() => appInstancePrivate);
   }).then(instance => {
-    instance.register('component:story-mode', Ember.Component.extend(Object.assign({
+    instance.register('component:story-mode', Component.extend(Object.assign({
       layout: template || options
     }, context)));
     const component = instance.lookup('component:story-mode');
@@ -52,13 +55,13 @@ function render(options, el) {
   });
 }
 
-export function renderToDOM({
+export function renderToCanvas({
   storyFn,
   kind,
   name,
   showMain,
   showError
-}, domElement) {
+}, canvasElement) {
   const element = storyFn();
 
   if (!element) {
@@ -75,5 +78,5 @@ export function renderToDOM({
   }
 
   showMain();
-  render(element, domElement);
+  render(element, canvasElement);
 }

package/dist/esm/client/preview/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -1,3 +1,4 @@
-export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw } from './client/preview'; // optimization: stop HMR propagation in webpack
+/// <reference types="webpack-env" />
+export { storiesOf, configure, forceReRender, raw } from './client/preview'; // optimization: stop HMR propagation in webpack
 
 module?.hot?.decline();

package/dist/esm/preset.js

@@ -1,6 +1,11 @@
+import path from 'path';
 export const addons = [require.resolve('./server/framework-preset-babel-ember'), require.resolve('./server/framework-preset-ember-docs')];
-export const core = async config => {
+export const core = async (config, options) => {
+  const framework = await options.presets.apply('framework');
   return Object.assign({}, config, {
-    builder: require.resolve('@storybook/builder-webpack5')
+    builder: {
+      name: path.dirname(require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))),
+      options: typeof framework === 'string' ? {} : framework.options.builder || {}
+    }
   });
 };

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
-export { renderToDOM } from './render';
+export { renderToCanvas } from './render';
 export declare const parameters: {
-    framework: string;
+    framework: "ember";
 };

package/dist/types/src/client/preview/index.d.ts

@@ -1,9 +1,7 @@
 import './globals';
-declare const forceReRender: (() => never) | (() => void);
-export declare const setAddon: ((addon: any) => void) | (() => never), addDecorator: (() => never) | ((decorator: import("@storybook/csf").DecoratorFunction<import("./types").EmberFramework, import("@storybook/csf").Args>) => void), addParameters: (({ globals, globalTypes, ...parameters }: import("@storybook/csf").Parameters & {
-    globals?: import("@storybook/csf").Globals | undefined;
-    globalTypes?: import("@storybook/csf").GlobalTypes | undefined;
-}) => void) | (() => never), clearDecorators: (() => void) | (() => never), getStorybook: (() => never) | (() => import("lib/client-api/dist/types/ClientApi").GetStorybookKind<import("./types").EmberFramework>[]), raw: (() => never) | (() => import("lib/store/dist/types").BoundStory<import("./types").EmberFramework>[]);
-export declare const storiesOf: (kind: string, m: any) => import("lib/addons/dist/types").StoryApi<import("./types").OptionsArgs>;
-export declare const configure: (loadable: any, m: any) => void;
+import type { EmberRenderer } from './types';
+declare const forceReRender: () => void;
+export declare const raw: ((...args: any[]) => never) | (() => import("lib/types/dist").Store_BoundStory<EmberRenderer>[]);
+export declare const storiesOf: (kind: string, m: any) => import("lib/types/dist").Addon_StoryApi<import("./types").OptionsArgs>;
+export declare const configure: (loadable: any, m: any) => any;
 export { forceReRender };

package/dist/types/src/client/preview/render.d.ts

@@ -1,3 +1,3 @@
-import { RenderContext } from '@storybook/store';
-import { EmberFramework } from './types';
-export declare function renderToDOM({ storyFn, kind, name, showMain, showError }: RenderContext<EmberFramework>, domElement: Element): void;
+import type { Store_RenderContext } from '@storybook/types';
+import type { EmberRenderer } from './types';
+export declare function renderToCanvas({ storyFn, kind, name, showMain, showError }: Store_RenderContext<EmberRenderer>, canvasElement: EmberRenderer['canvasElement']): void;

package/dist/types/src/client/preview/types.d.ts

@@ -1,4 +1,5 @@
-export type { RenderContext } from '@storybook/core-client';
+import type { WebRenderer } from '@storybook/types';
+export type { RenderContext } from '@storybook/types';
 export interface ShowErrorArgs {
     title: string;
     description: string;
@@ -8,7 +9,11 @@ export interface OptionsArgs {
     context: any;
     element: any;
 }
-export declare type EmberFramework = {
+/**
+ * @deprecated Use `EmberRenderer` instead.
+ */
+export declare type EmberFramework = EmberRenderer;
+export interface EmberRenderer extends WebRenderer {
     component: any;
     storyResult: OptionsArgs;
-};
+}

package/dist/types/src/index.d.ts

@@ -1 +1 @@
-export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw, } from './client/preview';
+export { storiesOf, configure, forceReRender, raw } from './client/preview';

package/dist/types/src/preset.d.ts

@@ -1,11 +1,4 @@
-import type { StorybookConfig } from '@storybook/core-common';
-export declare const addons: StorybookConfig['addons'];
-export declare const core: (config: StorybookConfig['core']) => Promise<{
-    builder: string;
-    disableWebpackDefaults?: boolean | undefined;
-    channelOptions?: Partial<import("telejson").Options> | undefined;
-    disableProjectJson?: boolean | undefined;
-    disableTelemetry?: boolean | undefined;
-    enableCrashReports?: boolean | undefined;
-    crossOriginIsolated?: boolean | undefined;
-}>;
+import type { PresetProperty } from '@storybook/types';
+import type { StorybookConfig } from './types';
+export declare const addons: PresetProperty<'addons', StorybookConfig>;
+export declare const core: PresetProperty<'core', StorybookConfig>;

package/dist/types/src/server/framework-preset-babel-ember.d.ts

@@ -1,4 +1,4 @@
 import type { TransformOptions } from '@babel/core';
-import type { StorybookConfig, Options } from '@storybook/core-common';
+import type { StorybookConfig, Options } from '@storybook/types';
 export declare function babel(config: TransformOptions, options: Options): TransformOptions;
 export declare const previewAnnotations: StorybookConfig['previewAnnotations'];

package/dist/types/src/server/framework-preset-ember-docs.d.ts

@@ -1,2 +1,2 @@
-import type { StorybookConfig } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/types';
 export declare const previewAnnotations: StorybookConfig['previewAnnotations'];

package/dist/types/src/types.d.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsReact } from '@storybook/core-webpack';
+import type { StorybookConfigWebpack, BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder } from '@storybook/builder-webpack5';
+declare type FrameworkName = '@storybook/ember-webpack5';
+declare type BuilderName = '@storybook/builder-webpack5';
+export declare type FrameworkOptions = {
+    builder?: BuilderOptions;
+};
+declare type StorybookConfigFramework = {
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+    core?: StorybookConfigBase['core'] & {
+        builder?: BuilderName | {
+            name: BuilderName;
+            options: BuilderOptions;
+        };
+    };
+    typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> & StorybookConfigBase['typescript'];
+};
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export declare type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
+export {};

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.50",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
   "bugs": {
@@ -21,31 +21,38 @@
   "types": "dist/types/index.d.ts",
   "files": [
     "dist/**/*",
+    "template/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.5",
-    "@storybook/core-client": "7.0.0-alpha.5",
-    "@storybook/core-common": "7.0.0-alpha.5",
-    "@storybook/docs-tools": "7.0.0-alpha.5",
-    "@storybook/store": "7.0.0-alpha.5",
-    "core-js": "^3.8.2",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-client": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/docs-tools": "7.0.0-alpha.50",
+    "@storybook/store": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "read-pkg-up": "^7.0.1",
     "ts-dedent": "^2.0.0"
   },
+  "devDependencies": {
+    "ember-source": "~3.28.1",
+    "typescript": "~4.6.3"
+  },
   "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.16.0"
+    "ember-source": "~3.28.1"
   },
   "engines": {
     "node": ">=10.13.0"
@@ -53,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3dd46982823b34d9f37be917b6247631081feff7"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }

package/template/cli/1-Button.stories.js

@@ -0,0 +1,61 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+// More on default export: https://storybook.js.org/docs/ember/writing-stories/introduction#default-export
+export default {
+  title: 'Button',
+  render: (args) => ({
+    template: hbs`<button {{action onClick}}>{{label}}</button>`,
+    context: args,
+  }),
+  // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes
+  argTypes: {
+    label: { control: 'text' },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args
+export const Text = {
+  args: {
+    label: 'Button',
+    onClick: action('onClick'),
+  },
+};
+
+export const Emoji = {
+  args: {
+    label: '😀 😎 👍 💯',
+  },
+};
+
+export const TextWithAction = {
+  render: () => ({
+    template: hbs`
+    <button {{action onClick}}>
+      Trigger Action
+    </button>
+  `,
+    context: {
+      onClick: () => action('This was clicked')(),
+    },
+  }),
+  name: 'With an action',
+  parameters: {
+    notes: 'My notes on a button with emojis',
+  },
+};
+
+export const ButtonWithLinkToAnotherStory = {
+  render: () => ({
+    template: hbs`
+    <button {{action onClick}}>
+      Go to Welcome Story
+    </button>
+  `,
+    context: {
+      onClick: linkTo('example-introduction--page'),
+    },
+  }),
+  name: 'button with link to another story',
+};

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.