@storybook/ember 7.0.0-alpha.8 → 7.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/client/docs/config.js +0 -3
  3. package/dist/cjs/client/docs/index.js +0 -1
  4. package/dist/cjs/client/docs/jsondoc.js +1 -17
  5. package/dist/cjs/client/preview/config.js +2 -4
  6. package/dist/cjs/client/preview/docs/config.js +0 -2
  7. package/dist/cjs/client/preview/docs/index.js +0 -1
  8. package/dist/cjs/client/preview/docs/jsondoc.js +1 -17
  9. package/dist/cjs/client/preview/globals.js +0 -2
  10. package/dist/cjs/client/preview/index.js +3 -21
  11. package/dist/cjs/client/preview/render.js +10 -22
  12. package/dist/cjs/client/preview/types.js +5 -1
  13. package/dist/cjs/index.js +2 -27
  14. package/dist/cjs/preset.js +0 -5
  15. package/dist/cjs/server/framework-preset-babel-ember.js +0 -14
  16. package/dist/cjs/server/framework-preset-ember-docs.js +0 -4
  17. package/dist/esm/client/docs/jsondoc.js +1 -9
  18. package/dist/esm/client/preview/config.js +1 -1
  19. package/dist/esm/client/preview/docs/jsondoc.js +1 -9
  20. package/dist/esm/client/preview/index.js +3 -8
  21. package/dist/esm/client/preview/render.js +9 -17
  22. package/dist/esm/client/preview/types.js +1 -0
  23. package/dist/esm/index.js +4 -1
  24. package/dist/esm/server/framework-preset-babel-ember.js +0 -9
  25. package/dist/types/src/client/preview/config.d.ts +1 -1
  26. package/dist/types/src/client/preview/index.d.ts +5 -7
  27. package/dist/types/src/client/preview/render.d.ts +3 -3
  28. package/dist/types/src/client/preview/types.d.ts +8 -3
  29. package/dist/types/src/index.d.ts +1 -1
  30. package/dist/types/src/preset.d.ts +1 -1
  31. package/dist/types/src/server/framework-preset-babel-ember.d.ts +1 -1
  32. package/dist/types/src/server/framework-preset-ember-docs.d.ts +1 -1
  33. package/dist/types/src/types.d.ts +5 -5
  34. package/jest.config.js +7 -0
  35. package/package.json +18 -12
  36. package/template/cli/Button.stories.js +60 -0
  37. package/LICENSE +0 -21
package/README.md CHANGED
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
12
12
 
13
13
  ```sh
14
14
  cd my-ember-app
15
- npx sb init
15
+ npx storybook init
16
16
  ```
17
17
 
18
18
  For more information visit: [storybook.js.org](https://storybook.js.org)
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.parameters = exports.argTypesEnhancers = void 0;
7
-
8
7
  var _docsTools = require("@storybook/docs-tools");
9
-
10
8
  var _jsondoc = require("./jsondoc");
11
-
12
9
  const parameters = {
13
10
  docs: {
14
11
  iframeHeight: 80,
@@ -9,5 +9,4 @@ Object.defineProperty(exports, "setJSONDoc", {
9
9
  return _jsondoc.setJSONDoc;
10
10
  }
11
11
  });
12
-
13
12
  var _jsondoc = require("./jsondoc");
@@ -4,35 +4,26 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.setJSONDoc = exports.getJSONDoc = exports.extractComponentDescription = exports.extractArgTypes = void 0;
7
-
8
7
  /* eslint-disable no-underscore-dangle */
9
-
10
8
  /* global window */
9
+
11
10
  const setJSONDoc = jsondoc => {
12
11
  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
13
12
  };
14
-
15
13
  exports.setJSONDoc = setJSONDoc;
16
-
17
14
  const getJSONDoc = () => {
18
15
  return window.__EMBER_GENERATED_DOC_JSON__;
19
16
  };
20
-
21
17
  exports.getJSONDoc = getJSONDoc;
22
-
23
18
  const extractArgTypes = componentName => {
24
19
  const json = getJSONDoc();
25
-
26
20
  if (!(json && json.included)) {
27
21
  return null;
28
22
  }
29
-
30
23
  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
31
-
32
24
  if (!componentDoc) {
33
25
  return null;
34
26
  }
35
-
36
27
  return componentDoc.attributes.arguments.reduce((acc, prop) => {
37
28
  acc[prop.name] = {
38
29
  name: prop.name,
@@ -51,23 +42,16 @@ const extractArgTypes = componentName => {
51
42
  return acc;
52
43
  }, {});
53
44
  };
54
-
55
45
  exports.extractArgTypes = extractArgTypes;
56
-
57
46
  const extractComponentDescription = componentName => {
58
47
  const json = getJSONDoc();
59
-
60
48
  if (!(json && json.included)) {
61
49
  return null;
62
50
  }
63
-
64
51
  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
65
-
66
52
  if (!componentDoc) {
67
53
  return null;
68
54
  }
69
-
70
55
  return componentDoc.attributes.description;
71
56
  };
72
-
73
57
  exports.extractComponentDescription = extractComponentDescription;
@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.parameters = void 0;
7
- Object.defineProperty(exports, "renderToDOM", {
7
+ Object.defineProperty(exports, "renderToCanvas", {
8
8
  enumerable: true,
9
9
  get: function () {
10
- return _render.renderToDOM;
10
+ return _render.renderToCanvas;
11
11
  }
12
12
  });
13
-
14
13
  var _render = require("./render");
15
-
16
14
  const parameters = {
17
15
  framework: 'ember'
18
16
  };
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.parameters = void 0;
7
-
8
7
  var _jsondoc = require("./jsondoc");
9
-
10
8
  const parameters = {
11
9
  docs: {
12
10
  iframeHeight: 80,
@@ -9,5 +9,4 @@ Object.defineProperty(exports, "setJSONDoc", {
9
9
  return _jsondoc.setJSONDoc;
10
10
  }
11
11
  });
12
-
13
12
  var _jsondoc = require("./jsondoc");
@@ -4,35 +4,26 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.setJSONDoc = exports.getJSONDoc = exports.extractComponentDescription = exports.extractArgTypes = void 0;
7
-
8
7
  /* eslint-disable no-underscore-dangle */
9
-
10
8
  /* global window */
9
+
11
10
  const setJSONDoc = jsondoc => {
12
11
  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
13
12
  };
14
-
15
13
  exports.setJSONDoc = setJSONDoc;
16
-
17
14
  const getJSONDoc = () => {
18
15
  return window.__EMBER_GENERATED_DOC_JSON__;
19
16
  };
20
-
21
17
  exports.getJSONDoc = getJSONDoc;
22
-
23
18
  const extractArgTypes = componentName => {
24
19
  const json = getJSONDoc();
25
-
26
20
  if (!(json && json.included)) {
27
21
  return null;
28
22
  }
29
-
30
23
  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
31
-
32
24
  if (!componentDoc) {
33
25
  return null;
34
26
  }
35
-
36
27
  return componentDoc.attributes.arguments.reduce((acc, prop) => {
37
28
  acc[prop.name] = {
38
29
  name: prop.name,
@@ -51,23 +42,16 @@ const extractArgTypes = componentName => {
51
42
  return acc;
52
43
  }, {});
53
44
  };
54
-
55
45
  exports.extractArgTypes = extractArgTypes;
56
-
57
46
  const extractComponentDescription = componentName => {
58
47
  const json = getJSONDoc();
59
-
60
48
  if (!(json && json.included)) {
61
49
  return null;
62
50
  }
63
-
64
51
  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
65
-
66
52
  if (!componentDoc) {
67
53
  return null;
68
54
  }
69
-
70
55
  return componentDoc.attributes.description;
71
56
  };
72
-
73
57
  exports.extractComponentDescription = extractComponentDescription;
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  var _global = _interopRequireDefault(require("global"));
4
-
5
4
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
6
-
7
5
  const {
8
6
  window: globalWindow
9
7
  } = _global.default;
@@ -3,42 +3,24 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = exports.forceReRender = exports.configure = exports.clearDecorators = exports.addParameters = exports.addDecorator = void 0;
7
-
8
- var _coreClient = require("@storybook/core-client");
9
-
6
+ exports.storiesOf = exports.raw = exports.forceReRender = exports.configure = void 0;
7
+ var _previewApi = require("@storybook/preview-api");
10
8
  require("./globals");
11
-
12
9
  var _render = require("./render");
13
-
14
10
  const {
15
11
  configure: coreConfigure,
16
12
  clientApi,
17
13
  forceReRender
18
- } = (0, _coreClient.start)(_render.renderToDOM);
14
+ } = (0, _previewApi.start)(_render.renderToCanvas);
19
15
  exports.forceReRender = forceReRender;
20
16
  const {
21
- setAddon,
22
- addDecorator,
23
- addParameters,
24
- clearDecorators,
25
- getStorybook,
26
17
  raw
27
18
  } = clientApi;
28
19
  exports.raw = raw;
29
- exports.getStorybook = getStorybook;
30
- exports.clearDecorators = clearDecorators;
31
- exports.addParameters = addParameters;
32
- exports.addDecorator = addDecorator;
33
- exports.setAddon = setAddon;
34
20
  const FRAMEWORK = 'ember';
35
-
36
21
  const storiesOf = (kind, m) => clientApi.storiesOf(kind, m).addParameters({
37
22
  framework: FRAMEWORK
38
23
  });
39
-
40
24
  exports.storiesOf = storiesOf;
41
-
42
25
  const configure = (loadable, m) => coreConfigure(FRAMEWORK, loadable, m);
43
-
44
26
  exports.configure = configure;
@@ -3,31 +3,26 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.renderToDOM = renderToDOM;
7
-
6
+ exports.renderToCanvas = renderToCanvas;
8
7
  var _global = _interopRequireDefault(require("global"));
9
-
10
- var _tsDedent = _interopRequireDefault(require("ts-dedent"));
11
-
8
+ var _tsDedent = require("ts-dedent");
9
+ var _component = _interopRequireDefault(require("@ember/component"));
12
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ // @ts-expect-error (Converted from ts-ignore)
13
12
 
14
13
  const {
15
14
  window: globalWindow,
16
15
  document
17
16
  } = _global.default;
18
- const rootEl = document.getElementById('root');
19
-
17
+ const rootEl = document.getElementById('storybook-root');
20
18
  const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`);
21
-
22
19
  const app = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/app`).default.create(Object.assign({
23
20
  autoboot: false,
24
21
  rootElement: rootEl
25
22
  }, config.APP));
26
-
27
23
  let lastPromise = app.boot();
28
24
  let hasRendered = false;
29
25
  let isRendering = false;
30
-
31
26
  function render(options, el) {
32
27
  if (isRendering) return;
33
28
  isRendering = true;
@@ -36,46 +31,40 @@ function render(options, el) {
36
31
  context = {},
37
32
  element
38
33
  } = options;
39
-
40
34
  if (hasRendered) {
41
35
  lastPromise = lastPromise.then(instance => instance.destroy());
42
36
  }
43
-
44
37
  lastPromise = lastPromise.then(() => {
45
38
  const appInstancePrivate = app.buildInstance();
46
39
  return appInstancePrivate.boot().then(() => appInstancePrivate);
47
40
  }).then(instance => {
48
- instance.register('component:story-mode', Ember.Component.extend(Object.assign({
41
+ instance.register('component:story-mode', _component.default.extend(Object.assign({
49
42
  layout: template || options
50
43
  }, context)));
51
44
  const component = instance.lookup('component:story-mode');
52
-
53
45
  if (element) {
54
46
  component.appendTo(element);
55
47
  element.appendTo(el);
56
48
  } else {
57
49
  component.appendTo(el);
58
50
  }
59
-
60
51
  hasRendered = true;
61
52
  isRendering = false;
62
53
  return instance;
63
54
  });
64
55
  }
65
-
66
- function renderToDOM({
56
+ function renderToCanvas({
67
57
  storyFn,
68
58
  kind,
69
59
  name,
70
60
  showMain,
71
61
  showError
72
- }, domElement) {
62
+ }, canvasElement) {
73
63
  const element = storyFn();
74
-
75
64
  if (!element) {
76
65
  showError({
77
66
  title: `Expecting a Ember element from the story: "${name}" of "${kind}".`,
78
- description: (0, _tsDedent.default)`
67
+ description: (0, _tsDedent.dedent)`
79
68
  Did you forget to return the Ember element from the story?
80
69
  Use "() => hbs('{{component}}')" or "() => { return {
81
70
  template: hbs\`{{component}}\`
@@ -84,7 +73,6 @@ function renderToDOM({
84
73
  });
85
74
  return;
86
75
  }
87
-
88
76
  showMain();
89
- render(element, domElement);
77
+ render(element, canvasElement);
90
78
  }
@@ -1 +1,5 @@
1
- "use strict";
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/dist/cjs/index.js CHANGED
@@ -3,18 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "addDecorator", {
7
- enumerable: true,
8
- get: function () {
9
- return _preview.addDecorator;
10
- }
11
- });
12
- Object.defineProperty(exports, "addParameters", {
13
- enumerable: true,
14
- get: function () {
15
- return _preview.addParameters;
16
- }
17
- });
18
6
  Object.defineProperty(exports, "configure", {
19
7
  enumerable: true,
20
8
  get: function () {
@@ -27,32 +15,19 @@ Object.defineProperty(exports, "forceReRender", {
27
15
  return _preview.forceReRender;
28
16
  }
29
17
  });
30
- Object.defineProperty(exports, "getStorybook", {
31
- enumerable: true,
32
- get: function () {
33
- return _preview.getStorybook;
34
- }
35
- });
36
18
  Object.defineProperty(exports, "raw", {
37
19
  enumerable: true,
38
20
  get: function () {
39
21
  return _preview.raw;
40
22
  }
41
23
  });
42
- Object.defineProperty(exports, "setAddon", {
43
- enumerable: true,
44
- get: function () {
45
- return _preview.setAddon;
46
- }
47
- });
48
24
  Object.defineProperty(exports, "storiesOf", {
49
25
  enumerable: true,
50
26
  get: function () {
51
27
  return _preview.storiesOf;
52
28
  }
53
29
  });
54
-
55
30
  var _preview = require("./client/preview");
56
-
31
+ var _module, _module$hot;
57
32
  // optimization: stop HMR propagation in webpack
58
- module?.hot?.decline();
33
+ (_module = module) === null || _module === void 0 ? void 0 : (_module$hot = _module.hot) === null || _module$hot === void 0 ? void 0 : _module$hot.decline();
@@ -4,14 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.core = exports.addons = void 0;
7
-
8
7
  var _path = _interopRequireDefault(require("path"));
9
-
10
8
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
-
12
9
  const addons = [require.resolve('./server/framework-preset-babel-ember'), require.resolve('./server/framework-preset-ember-docs')];
13
10
  exports.addons = addons;
14
-
15
11
  const core = async (config, options) => {
16
12
  const framework = await options.presets.apply('framework');
17
13
  return Object.assign({}, config, {
@@ -21,5 +17,4 @@ const core = async (config, options) => {
21
17
  }
22
18
  });
23
19
  };
24
-
25
20
  exports.core = core;
@@ -5,37 +5,26 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.babel = babel;
7
7
  exports.previewAnnotations = void 0;
8
-
9
8
  var _emberTemplateCompiler = require("ember-source/dist/ember-template-compiler");
10
-
11
9
  var _coreCommon = require("@storybook/core-common");
12
-
13
10
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
14
-
15
11
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
16
-
17
12
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
18
-
19
13
  var emberOptions;
20
-
21
14
  function precompileWithPlugins(string, options) {
22
15
  var precompileOptions = options;
23
-
24
16
  if (emberOptions && emberOptions.polyfills) {
25
17
  precompileOptions.plugins = {
26
18
  ast: emberOptions.polyfills
27
19
  };
28
20
  }
29
-
30
21
  return (0, _emberTemplateCompiler.precompile)(string, precompileOptions);
31
22
  }
32
-
33
23
  function babel(config, options) {
34
24
  if (options && options.presetsList) {
35
25
  options.presetsList.forEach(function (e, index) {
36
26
  if (e.preset && e.preset.emberOptions) {
37
27
  emberOptions = e.preset.emberOptions;
38
-
39
28
  if (options.presetsList) {
40
29
  // eslint-disable-next-line no-param-reassign
41
30
  delete options.presetsList[index].preset.emberOptions;
@@ -43,7 +32,6 @@ function babel(config, options) {
43
32
  }
44
33
  });
45
34
  }
46
-
47
35
  var babelConfigPlugins = config.plugins || [];
48
36
  var extraPlugins = [[require.resolve('babel-plugin-htmlbars-inline-precompile'), {
49
37
  precompile: precompileWithPlugins,
@@ -57,9 +45,7 @@ function babel(config, options) {
57
45
  plugins: [...babelConfigPlugins, ...extraPlugins]
58
46
  });
59
47
  }
60
-
61
48
  var previewAnnotations = function (entry = []) {
62
49
  return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/preview/config')];
63
50
  };
64
-
65
51
  exports.previewAnnotations = previewAnnotations;
@@ -4,14 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.previewAnnotations = void 0;
7
-
8
7
  var _coreCommon = require("@storybook/core-common");
9
-
10
8
  var _docsTools = require("@storybook/docs-tools");
11
-
12
9
  var previewAnnotations = function (entry = [], options) {
13
10
  if (!(0, _docsTools.hasDocsOrControls)(options)) return entry;
14
11
  return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/docs/config')];
15
12
  };
16
-
17
13
  exports.previewAnnotations = previewAnnotations;
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable no-underscore-dangle */
2
-
3
2
  /* global window */
3
+
4
4
  export const setJSONDoc = jsondoc => {
5
5
  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
6
6
  };
@@ -9,17 +9,13 @@ export const getJSONDoc = () => {
9
9
  };
10
10
  export const extractArgTypes = componentName => {
11
11
  const json = getJSONDoc();
12
-
13
12
  if (!(json && json.included)) {
14
13
  return null;
15
14
  }
16
-
17
15
  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
18
-
19
16
  if (!componentDoc) {
20
17
  return null;
21
18
  }
22
-
23
19
  return componentDoc.attributes.arguments.reduce((acc, prop) => {
24
20
  acc[prop.name] = {
25
21
  name: prop.name,
@@ -40,16 +36,12 @@ export const extractArgTypes = componentName => {
40
36
  };
41
37
  export const extractComponentDescription = componentName => {
42
38
  const json = getJSONDoc();
43
-
44
39
  if (!(json && json.included)) {
45
40
  return null;
46
41
  }
47
-
48
42
  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
49
-
50
43
  if (!componentDoc) {
51
44
  return null;
52
45
  }
53
-
54
46
  return componentDoc.attributes.description;
55
47
  };
@@ -1,4 +1,4 @@
1
- export { renderToDOM } from './render';
1
+ export { renderToCanvas } from './render';
2
2
  export const parameters = {
3
3
  framework: 'ember'
4
4
  };
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable no-underscore-dangle */
2
-
3
2
  /* global window */
3
+
4
4
  export const setJSONDoc = jsondoc => {
5
5
  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
6
6
  };
@@ -9,17 +9,13 @@ export const getJSONDoc = () => {
9
9
  };
10
10
  export const extractArgTypes = componentName => {
11
11
  const json = getJSONDoc();
12
-
13
12
  if (!(json && json.included)) {
14
13
  return null;
15
14
  }
16
-
17
15
  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
18
-
19
16
  if (!componentDoc) {
20
17
  return null;
21
18
  }
22
-
23
19
  return componentDoc.attributes.arguments.reduce((acc, prop) => {
24
20
  acc[prop.name] = {
25
21
  name: prop.name,
@@ -40,16 +36,12 @@ export const extractArgTypes = componentName => {
40
36
  };
41
37
  export const extractComponentDescription = componentName => {
42
38
  const json = getJSONDoc();
43
-
44
39
  if (!(json && json.included)) {
45
40
  return null;
46
41
  }
47
-
48
42
  const componentDoc = json.included.find(doc => doc.attributes.name === componentName);
49
-
50
43
  if (!componentDoc) {
51
44
  return null;
52
45
  }
53
-
54
46
  return componentDoc.attributes.description;
55
47
  };
@@ -1,17 +1,12 @@
1
- import { start } from '@storybook/core-client';
1
+ import { start } from '@storybook/preview-api';
2
2
  import './globals';
3
- import { renderToDOM } from './render';
3
+ import { renderToCanvas } from './render';
4
4
  const {
5
5
  configure: coreConfigure,
6
6
  clientApi,
7
7
  forceReRender
8
- } = start(renderToDOM);
8
+ } = start(renderToCanvas);
9
9
  export const {
10
- setAddon,
11
- addDecorator,
12
- addParameters,
13
- clearDecorators,
14
- getStorybook,
15
10
  raw
16
11
  } = clientApi;
17
12
  const FRAMEWORK = 'ember';
@@ -1,22 +1,21 @@
1
1
  import global from 'global';
2
- import dedent from 'ts-dedent';
2
+ import { dedent } from 'ts-dedent';
3
+ // @ts-expect-error (Converted from ts-ignore)
4
+ import Component from '@ember/component'; // eslint-disable-line import/no-unresolved
5
+
3
6
  const {
4
7
  window: globalWindow,
5
8
  document
6
9
  } = global;
7
- const rootEl = document.getElementById('root');
8
-
10
+ const rootEl = document.getElementById('storybook-root');
9
11
  const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`);
10
-
11
12
  const app = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/app`).default.create(Object.assign({
12
13
  autoboot: false,
13
14
  rootElement: rootEl
14
15
  }, config.APP));
15
-
16
16
  let lastPromise = app.boot();
17
17
  let hasRendered = false;
18
18
  let isRendering = false;
19
-
20
19
  function render(options, el) {
21
20
  if (isRendering) return;
22
21
  isRendering = true;
@@ -25,42 +24,36 @@ function render(options, el) {
25
24
  context = {},
26
25
  element
27
26
  } = options;
28
-
29
27
  if (hasRendered) {
30
28
  lastPromise = lastPromise.then(instance => instance.destroy());
31
29
  }
32
-
33
30
  lastPromise = lastPromise.then(() => {
34
31
  const appInstancePrivate = app.buildInstance();
35
32
  return appInstancePrivate.boot().then(() => appInstancePrivate);
36
33
  }).then(instance => {
37
- instance.register('component:story-mode', Ember.Component.extend(Object.assign({
34
+ instance.register('component:story-mode', Component.extend(Object.assign({
38
35
  layout: template || options
39
36
  }, context)));
40
37
  const component = instance.lookup('component:story-mode');
41
-
42
38
  if (element) {
43
39
  component.appendTo(element);
44
40
  element.appendTo(el);
45
41
  } else {
46
42
  component.appendTo(el);
47
43
  }
48
-
49
44
  hasRendered = true;
50
45
  isRendering = false;
51
46
  return instance;
52
47
  });
53
48
  }
54
-
55
- export function renderToDOM({
49
+ export function renderToCanvas({
56
50
  storyFn,
57
51
  kind,
58
52
  name,
59
53
  showMain,
60
54
  showError
61
- }, domElement) {
55
+ }, canvasElement) {
62
56
  const element = storyFn();
63
-
64
57
  if (!element) {
65
58
  showError({
66
59
  title: `Expecting a Ember element from the story: "${name}" of "${kind}".`,
@@ -73,7 +66,6 @@ export function renderToDOM({
73
66
  });
74
67
  return;
75
68
  }
76
-
77
69
  showMain();
78
- render(element, domElement);
70
+ render(element, canvasElement);
79
71
  }
@@ -0,0 +1 @@
1
+ export {};
package/dist/esm/index.js CHANGED
@@ -1,3 +1,6 @@
1
- export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw } from './client/preview'; // optimization: stop HMR propagation in webpack
1
+ /// <reference types="webpack-env" />
2
2
 
3
+ export { storiesOf, configure, forceReRender, raw } from './client/preview';
4
+
5
+ // optimization: stop HMR propagation in webpack
3
6
  module?.hot?.decline();
@@ -1,31 +1,23 @@
1
1
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
2
-
3
2
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
-
5
3
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
-
7
4
  import { precompile } from 'ember-source/dist/ember-template-compiler';
8
5
  import { findDistEsm } from '@storybook/core-common';
9
6
  var emberOptions;
10
-
11
7
  function precompileWithPlugins(string, options) {
12
8
  var precompileOptions = options;
13
-
14
9
  if (emberOptions && emberOptions.polyfills) {
15
10
  precompileOptions.plugins = {
16
11
  ast: emberOptions.polyfills
17
12
  };
18
13
  }
19
-
20
14
  return precompile(string, precompileOptions);
21
15
  }
22
-
23
16
  export function babel(config, options) {
24
17
  if (options && options.presetsList) {
25
18
  options.presetsList.forEach(function (e, index) {
26
19
  if (e.preset && e.preset.emberOptions) {
27
20
  emberOptions = e.preset.emberOptions;
28
-
29
21
  if (options.presetsList) {
30
22
  // eslint-disable-next-line no-param-reassign
31
23
  delete options.presetsList[index].preset.emberOptions;
@@ -33,7 +25,6 @@ export function babel(config, options) {
33
25
  }
34
26
  });
35
27
  }
36
-
37
28
  var babelConfigPlugins = config.plugins || [];
38
29
  var extraPlugins = [[require.resolve('babel-plugin-htmlbars-inline-precompile'), {
39
30
  precompile: precompileWithPlugins,
@@ -1,4 +1,4 @@
1
- export { renderToDOM } from './render';
1
+ export { renderToCanvas } from './render';
2
2
  export declare const parameters: {
3
3
  framework: "ember";
4
4
  };
@@ -1,9 +1,7 @@
1
1
  import './globals';
2
- declare const forceReRender: (() => never) | (() => void);
3
- 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 & {
4
- globals?: import("@storybook/csf").Globals | undefined;
5
- globalTypes?: import("@storybook/csf").GlobalTypes | undefined;
6
- }) => 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>[]);
7
- export declare const storiesOf: (kind: string, m: any) => import("lib/addons/dist/types").StoryApi<import("./types").OptionsArgs>;
8
- export declare const configure: (loadable: any, m: any) => void;
2
+ import type { EmberRenderer } from './types';
3
+ declare const forceReRender: () => void;
4
+ export declare const raw: ((...args: any[]) => never) | (() => import("lib/types/dist").BoundStory<EmberRenderer>[] | undefined);
5
+ export declare const storiesOf: (kind: string, m: any) => import("lib/types/dist").Addon_StoryApi<import("./types").OptionsArgs>;
6
+ export declare const configure: (loadable: any, m: any) => any;
9
7
  export { forceReRender };
@@ -1,3 +1,3 @@
1
- import { RenderContext } from '@storybook/store';
2
- import { EmberFramework } from './types';
3
- export declare function renderToDOM({ storyFn, kind, name, showMain, showError }: RenderContext<EmberFramework>, domElement: Element): void;
1
+ import type { RenderContext } from '@storybook/types';
2
+ import type { EmberRenderer } from './types';
3
+ export declare function renderToCanvas({ storyFn, kind, name, showMain, showError }: RenderContext<EmberRenderer>, canvasElement: EmberRenderer['canvasElement']): void;
@@ -1,4 +1,5 @@
1
- export type { RenderContext } from '@storybook/core-client';
1
+ import type { WebRenderer } from '@storybook/types';
2
+ export type { RenderContext } from '@storybook/types';
2
3
  export interface ShowErrorArgs {
3
4
  title: string;
4
5
  description: string;
@@ -8,7 +9,11 @@ export interface OptionsArgs {
8
9
  context: any;
9
10
  element: any;
10
11
  }
11
- export declare type EmberFramework = {
12
+ /**
13
+ * @deprecated Use `EmberRenderer` instead.
14
+ */
15
+ export type EmberFramework = EmberRenderer;
16
+ export interface EmberRenderer extends WebRenderer {
12
17
  component: any;
13
18
  storyResult: OptionsArgs;
14
- };
19
+ }
@@ -1 +1 @@
1
- export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw, } from './client/preview';
1
+ export { storiesOf, configure, forceReRender, raw } from './client/preview';
@@ -1,4 +1,4 @@
1
- import type { PresetProperty } from '@storybook/core-common';
1
+ import type { PresetProperty } from '@storybook/types';
2
2
  import type { StorybookConfig } from './types';
3
3
  export declare const addons: PresetProperty<'addons', StorybookConfig>;
4
4
  export declare const core: PresetProperty<'core', StorybookConfig>;
@@ -1,4 +1,4 @@
1
1
  import type { TransformOptions } from '@babel/core';
2
- import type { StorybookConfig, Options } from '@storybook/core-common';
2
+ import type { StorybookConfig, Options } from '@storybook/types';
3
3
  export declare function babel(config: TransformOptions, options: Options): TransformOptions;
4
4
  export declare const previewAnnotations: StorybookConfig['previewAnnotations'];
@@ -1,2 +1,2 @@
1
- import type { StorybookConfig } from '@storybook/core-common';
1
+ import type { StorybookConfig } from '@storybook/types';
2
2
  export declare const previewAnnotations: StorybookConfig['previewAnnotations'];
@@ -1,11 +1,11 @@
1
1
  import type { StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsReact } from '@storybook/core-webpack';
2
2
  import type { StorybookConfigWebpack, BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder } from '@storybook/builder-webpack5';
3
- declare type FrameworkName = '@storybook/ember-webpack5';
4
- declare type BuilderName = '@storybook/builder-webpack5';
5
- export declare type FrameworkOptions = {
3
+ type FrameworkName = '@storybook/ember-webpack5';
4
+ type BuilderName = '@storybook/builder-webpack5';
5
+ export type FrameworkOptions = {
6
6
  builder?: BuilderOptions;
7
7
  };
8
- declare type StorybookConfigFramework = {
8
+ type StorybookConfigFramework = {
9
9
  framework: FrameworkName | {
10
10
  name: FrameworkName;
11
11
  options: FrameworkOptions;
@@ -21,5 +21,5 @@ declare type StorybookConfigFramework = {
21
21
  /**
22
22
  * The interface for Storybook configuration in `main.ts` files.
23
23
  */
24
- export declare type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
24
+ export type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
25
25
  export {};
package/jest.config.js ADDED
@@ -0,0 +1,7 @@
1
+ const path = require('path');
2
+ const baseConfig = require('../../jest.config.node');
3
+
4
+ module.exports = {
5
+ ...baseConfig,
6
+ displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
7
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/ember",
3
- "version": "7.0.0-alpha.8",
3
+ "version": "7.0.0-beta.0",
4
4
  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
5
5
  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
6
6
  "bugs": {
@@ -21,31 +21,37 @@
21
21
  "types": "dist/types/index.d.ts",
22
22
  "files": [
23
23
  "dist/**/*",
24
+ "template/**/*",
24
25
  "README.md",
25
26
  "*.js",
26
27
  "*.d.ts"
27
28
  ],
28
29
  "scripts": {
29
- "prepare": "node ../../scripts/prepare.js"
30
+ "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
31
+ "prep": "node ../../../scripts/prepare.js"
30
32
  },
31
33
  "dependencies": {
32
- "@storybook/builder-webpack5": "7.0.0-alpha.8",
33
- "@storybook/core-client": "7.0.0-alpha.8",
34
- "@storybook/core-common": "7.0.0-alpha.8",
35
- "@storybook/docs-tools": "7.0.0-alpha.8",
36
- "@storybook/store": "7.0.0-alpha.8",
37
- "core-js": "^3.8.2",
34
+ "@storybook/builder-webpack5": "7.0.0-beta.0",
35
+ "@storybook/core-common": "7.0.0-beta.0",
36
+ "@storybook/docs-tools": "7.0.0-beta.0",
37
+ "@storybook/preview-api": "7.0.0-beta.0",
38
+ "@storybook/types": "7.0.0-beta.0",
38
39
  "global": "^4.4.0",
39
- "react": "16.14.0",
40
- "react-dom": "16.14.0",
41
40
  "read-pkg-up": "^7.0.1",
42
41
  "ts-dedent": "^2.0.0"
43
42
  },
43
+ "devDependencies": {
44
+ "ember-source": "~3.28.1",
45
+ "typescript": "~4.9.3"
46
+ },
44
47
  "peerDependencies": {
45
48
  "@babel/core": "*",
49
+ "@types/ember__component": "4.0.8",
46
50
  "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
47
51
  "babel-plugin-htmlbars-inline-precompile": "2 || 3",
48
- "ember-source": "^3.16.0"
52
+ "ember-source": "~3.28.1",
53
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
54
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
49
55
  },
50
56
  "engines": {
51
57
  "node": ">=10.13.0"
@@ -53,5 +59,5 @@
53
59
  "publishConfig": {
54
60
  "access": "public"
55
61
  },
56
- "gitHead": "24725501c32a073cebc6bf2674a47357136fbe3a"
62
+ "gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
57
63
  }
@@ -0,0 +1,60 @@
1
+ import { hbs } from 'ember-cli-htmlbars';
2
+ import { action } from '@storybook/addon-actions';
3
+ import { linkTo } from '@storybook/addon-links';
4
+
5
+ // More on how to set up stories at: https://storybook.js.org/docs/7.0/ember/writing-stories/introduction
6
+ export default {
7
+ title: 'Example/Button',
8
+ render: (args) => ({
9
+ template: hbs`<button {{action onClick}}>{{label}}</button>`,
10
+ context: args,
11
+ }),
12
+ argTypes: {
13
+ label: { control: 'text' },
14
+ },
15
+ };
16
+
17
+ // More on writing stories with args: https://storybook.js.org/docs/7.0/ember/writing-stories/args
18
+ export const Text = {
19
+ args: {
20
+ label: 'Button',
21
+ onClick: action('onClick'),
22
+ },
23
+ };
24
+
25
+ export const Emoji = {
26
+ args: {
27
+ label: '😀 😎 👍 💯',
28
+ },
29
+ };
30
+
31
+ export const TextWithAction = {
32
+ render: () => ({
33
+ template: hbs`
34
+ <button {{action onClick}}>
35
+ Trigger Action
36
+ </button>
37
+ `,
38
+ context: {
39
+ onClick: () => action('This was clicked')(),
40
+ },
41
+ }),
42
+ name: 'With an action',
43
+ parameters: {
44
+ notes: 'My notes on a button with emojis',
45
+ },
46
+ };
47
+
48
+ export const ButtonWithLinkToAnotherStory = {
49
+ render: () => ({
50
+ template: hbs`
51
+ <button {{action onClick}}>
52
+ Go to Welcome Story
53
+ </button>
54
+ `,
55
+ context: {
56
+ onClick: linkTo('example-introduction--page'),
57
+ },
58
+ }),
59
+ name: 'button with link to another story',
60
+ };
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- The MIT License (MIT)
2
-
3
- Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in
13
- all copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
- THE SOFTWARE.