@storybook/ember 9.2.0-alpha.2 → 10.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.
package/README.md CHANGED
@@ -15,18 +15,18 @@ cd my-ember-app
15
15
  npx storybook@latest init
16
16
  ```
17
17
 
18
- For more information visit: [storybook.js.org](https://storybook.js.org)
18
+ For more information visit: [storybook.js.org](https://storybook.js.org?ref=readme)
19
19
 
20
20
  ---
21
21
 
22
- Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
23
- You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook?renderer=ember) of your Storybook and deploy it anywhere you want.
22
+ Storybook also comes with a lot of [addons](https://storybook.js.org/addons?ref=readme) and a great API to customize as you wish.
23
+ You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook?renderer=ember&ref=readme) of your Storybook and deploy it anywhere you want.
24
24
 
25
25
  ## Docs
26
26
 
27
- - [Basics](https://storybook.js.org/docs/get-started/install?renderer=ember)
28
- - [Configurations](https://storybook.js.org/docs/configure?renderer=ember)
29
- - [Addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons?renderer=ember)
27
+ - [Basics](https://storybook.js.org/docs/get-started/install?renderer=ember&ref=readme)
28
+ - [Configurations](https://storybook.js.org/docs/configure?renderer=ember&ref=readme)
29
+ - [Addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons?renderer=ember&ref=readme)
30
30
 
31
31
  ## Working with polyfills
32
32
 
@@ -51,3 +51,5 @@ export default {
51
51
  [...]
52
52
  };
53
53
  ```
54
+
55
+ Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).
@@ -0,0 +1,17 @@
1
+ import CJS_COMPAT_NODE_URL_ghcrmklaf6n from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_ghcrmklaf6n from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_ghcrmklaf6n from "node:module";
4
+
5
+ var __filename = CJS_COMPAT_NODE_URL_ghcrmklaf6n.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_ghcrmklaf6n.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_ghcrmklaf6n.createRequire(import.meta.url);
8
+
9
+ // ------------------------------------------------------------
10
+ // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
+ // ------------------------------------------------------------
12
+ var __defProp = Object.defineProperty;
13
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
14
+
15
+ export {
16
+ __name
17
+ };
package/dist/index.d.ts CHANGED
@@ -1 +1,54 @@
1
- export * from './types';
1
+ import { StorybookConfig as StorybookConfig$2, Options, CompatibleString, TypescriptOptions as TypescriptOptions$1 } from 'storybook/internal/types';
2
+ import { BuilderOptions, StorybookConfigWebpack, TypescriptOptions } from '@storybook/builder-webpack5';
3
+
4
+ type RulesConfig = any;
5
+ type ModuleConfig = {
6
+ rules?: RulesConfig[];
7
+ };
8
+ type ResolveConfig = {
9
+ extensions?: string[];
10
+ mainFields?: (string | string[])[] | undefined;
11
+ alias?: any;
12
+ };
13
+ interface WebpackConfiguration {
14
+ plugins?: any[];
15
+ module?: ModuleConfig;
16
+ resolve?: ResolveConfig;
17
+ optimization?: any;
18
+ devtool?: false | string;
19
+ }
20
+ type StorybookConfig$1<TWebpackConfiguration = WebpackConfiguration> = StorybookConfig$2 & {
21
+ /**
22
+ * Modify or return a custom Webpack config after the Storybook's default configuration has run
23
+ * (mostly used by addons).
24
+ */
25
+ webpack?: (config: TWebpackConfiguration, options: Options) => TWebpackConfiguration | Promise<TWebpackConfiguration>;
26
+ /** Modify or return a custom Webpack config after every addon has run. */
27
+ webpackFinal?: (config: TWebpackConfiguration, options: Options) => TWebpackConfiguration | Promise<TWebpackConfiguration>;
28
+ };
29
+
30
+ type FrameworkName = CompatibleString<'@storybook/ember-webpack5'>;
31
+ type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
32
+ type FrameworkOptions = {
33
+ builder?: BuilderOptions;
34
+ };
35
+ type StorybookConfigFramework = {
36
+ framework: FrameworkName | {
37
+ name: FrameworkName;
38
+ options: FrameworkOptions;
39
+ };
40
+ core?: StorybookConfig$1['core'] & {
41
+ builder?: BuilderName | {
42
+ name: BuilderName;
43
+ options: BuilderOptions;
44
+ };
45
+ };
46
+ typescript?: Partial<TypescriptOptions & TypescriptOptions$1> & StorybookConfig$1['typescript'];
47
+ };
48
+ /** The interface for Storybook configuration in `main.ts` files. */
49
+ type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
50
+ declare global {
51
+ var __EMBER_GENERATED_DOC_JSON__: any;
52
+ }
53
+
54
+ export type { FrameworkOptions, StorybookConfig };
package/dist/index.js CHANGED
@@ -1,17 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./types"), exports);
@@ -1,2 +1,56 @@
1
- import type { StorybookConfig } from '../types';
2
- export declare function defineMain(config: StorybookConfig): StorybookConfig;
1
+ import { StorybookConfig as StorybookConfig$2, Options, CompatibleString, TypescriptOptions as TypescriptOptions$1 } from 'storybook/internal/types';
2
+ import { StorybookConfigWebpack, BuilderOptions, TypescriptOptions } from '@storybook/builder-webpack5';
3
+
4
+ type RulesConfig = any;
5
+ type ModuleConfig = {
6
+ rules?: RulesConfig[];
7
+ };
8
+ type ResolveConfig = {
9
+ extensions?: string[];
10
+ mainFields?: (string | string[])[] | undefined;
11
+ alias?: any;
12
+ };
13
+ interface WebpackConfiguration {
14
+ plugins?: any[];
15
+ module?: ModuleConfig;
16
+ resolve?: ResolveConfig;
17
+ optimization?: any;
18
+ devtool?: false | string;
19
+ }
20
+ type StorybookConfig$1<TWebpackConfiguration = WebpackConfiguration> = StorybookConfig$2 & {
21
+ /**
22
+ * Modify or return a custom Webpack config after the Storybook's default configuration has run
23
+ * (mostly used by addons).
24
+ */
25
+ webpack?: (config: TWebpackConfiguration, options: Options) => TWebpackConfiguration | Promise<TWebpackConfiguration>;
26
+ /** Modify or return a custom Webpack config after every addon has run. */
27
+ webpackFinal?: (config: TWebpackConfiguration, options: Options) => TWebpackConfiguration | Promise<TWebpackConfiguration>;
28
+ };
29
+
30
+ type FrameworkName = CompatibleString<'@storybook/ember-webpack5'>;
31
+ type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
32
+ type FrameworkOptions = {
33
+ builder?: BuilderOptions;
34
+ };
35
+ type StorybookConfigFramework = {
36
+ framework: FrameworkName | {
37
+ name: FrameworkName;
38
+ options: FrameworkOptions;
39
+ };
40
+ core?: StorybookConfig$1['core'] & {
41
+ builder?: BuilderName | {
42
+ name: BuilderName;
43
+ options: BuilderOptions;
44
+ };
45
+ };
46
+ typescript?: Partial<TypescriptOptions & TypescriptOptions$1> & StorybookConfig$1['typescript'];
47
+ };
48
+ /** The interface for Storybook configuration in `main.ts` files. */
49
+ type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
50
+ declare global {
51
+ var __EMBER_GENERATED_DOC_JSON__: any;
52
+ }
53
+
54
+ declare function defineMain(config: StorybookConfig): StorybookConfig;
55
+
56
+ export { defineMain };
@@ -1,6 +1,23 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.defineMain = defineMain;
1
+ import CJS_COMPAT_NODE_URL_ghcrmklaf6n from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_ghcrmklaf6n from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_ghcrmklaf6n from "node:module";
4
+
5
+ var __filename = CJS_COMPAT_NODE_URL_ghcrmklaf6n.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_ghcrmklaf6n.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_ghcrmklaf6n.createRequire(import.meta.url);
8
+
9
+ // ------------------------------------------------------------
10
+ // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
+ // ------------------------------------------------------------
12
+ import {
13
+ __name
14
+ } from "../_node-chunks/chunk-AS4G5YLZ.js";
15
+
16
+ // src/node/index.ts
4
17
  function defineMain(config) {
5
- return config;
18
+ return config;
6
19
  }
20
+ __name(defineMain, "defineMain");
21
+ export {
22
+ defineMain
23
+ };
package/dist/preset.js CHANGED
@@ -1,50 +1,64 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.core = exports.webpackFinal = exports.addons = void 0;
4
- const node_path_1 = require("node:path");
5
- const common_1 = require("storybook/internal/common");
6
- const builder_webpack5_1 = require("@storybook/builder-webpack5");
7
- const getAbsolutePath = (input) => (0, node_path_1.dirname)(require.resolve((0, node_path_1.join)(input, 'package.json')));
8
- exports.addons = [
9
- require.resolve('./server/framework-preset-babel-ember'),
1
+ import CJS_COMPAT_NODE_URL_ghcrmklaf6n from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_ghcrmklaf6n from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_ghcrmklaf6n from "node:module";
4
+
5
+ var __filename = CJS_COMPAT_NODE_URL_ghcrmklaf6n.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_ghcrmklaf6n.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_ghcrmklaf6n.createRequire(import.meta.url);
8
+
9
+ // ------------------------------------------------------------
10
+ // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
+ // ------------------------------------------------------------
12
+ import {
13
+ __name
14
+ } from "./_node-chunks/chunk-AS4G5YLZ.js";
15
+
16
+ // src/preset.ts
17
+ import { getProjectRoot, resolvePathInStorybookCache } from "storybook/internal/common";
18
+ import { getVirtualModules } from "@storybook/builder-webpack5";
19
+ var addons = [
20
+ import.meta.resolve("@storybook/ember/server/framework-preset-babel-ember")
10
21
  ];
11
- const webpackFinal = async (baseConfig, options) => {
12
- const { virtualModules } = await (0, builder_webpack5_1.getVirtualModules)(options);
13
- const babelOptions = await options.presets.apply('babel', {}, options);
14
- const typescriptOptions = await options.presets.apply('typescript', {}, options);
15
- return {
16
- ...baseConfig,
17
- module: {
18
- ...baseConfig.module,
19
- rules: [
20
- ...(baseConfig.module?.rules ?? []),
21
- {
22
- test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
23
- use: [
24
- {
25
- loader: require.resolve('babel-loader'),
26
- options: {
27
- cacheDirectory: (0, common_1.resolvePathInStorybookCache)('babel'),
28
- ...babelOptions,
29
- },
30
- },
31
- ],
32
- include: [(0, common_1.getProjectRoot)()],
33
- exclude: [/node_modules/, ...Object.keys(virtualModules)],
34
- },
35
- ],
36
- },
37
- };
22
+ var webpackFinal = /* @__PURE__ */ __name(async (baseConfig, options) => {
23
+ const { virtualModules } = await getVirtualModules(options);
24
+ const babelOptions = await options.presets.apply("babel", {}, options);
25
+ const typescriptOptions = await options.presets.apply("typescript", {}, options);
26
+ return {
27
+ ...baseConfig,
28
+ module: {
29
+ ...baseConfig.module,
30
+ rules: [
31
+ ...baseConfig.module?.rules ?? [],
32
+ {
33
+ test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
34
+ use: [
35
+ {
36
+ loader: import.meta.resolve("babel-loader"),
37
+ options: {
38
+ cacheDirectory: resolvePathInStorybookCache("babel"),
39
+ ...babelOptions
40
+ }
41
+ }
42
+ ],
43
+ include: [getProjectRoot()],
44
+ exclude: [/node_modules/, ...Object.keys(virtualModules)]
45
+ }
46
+ ]
47
+ }
48
+ };
49
+ }, "webpackFinal");
50
+ var core = /* @__PURE__ */ __name(async (config, options) => {
51
+ const framework = await options.presets.apply("framework");
52
+ return {
53
+ ...config,
54
+ builder: {
55
+ name: import.meta.resolve("@storybook/builder-webpack5"),
56
+ options: typeof framework === "string" ? {} : framework.options.builder || {}
57
+ }
58
+ };
59
+ }, "core");
60
+ export {
61
+ addons,
62
+ core,
63
+ webpackFinal
38
64
  };
39
- exports.webpackFinal = webpackFinal;
40
- const core = async (config, options) => {
41
- const framework = await options.presets.apply('framework');
42
- return {
43
- ...config,
44
- builder: {
45
- name: getAbsolutePath('@storybook/builder-webpack5'),
46
- options: typeof framework === 'string' ? {} : framework.options.builder || {},
47
- },
48
- };
49
- };
50
- exports.core = core;
@@ -1,49 +1,79 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.previewAnnotations = exports.babel = void 0;
4
- const ember_template_compiler_js_1 = require("ember-source/dist/ember-template-compiler.js");
5
- const util_1 = require("../util");
6
- let emberOptions;
1
+ import CJS_COMPAT_NODE_URL_ghcrmklaf6n from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_ghcrmklaf6n from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_ghcrmklaf6n from "node:module";
4
+
5
+ var __filename = CJS_COMPAT_NODE_URL_ghcrmklaf6n.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_ghcrmklaf6n.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_ghcrmklaf6n.createRequire(import.meta.url);
8
+
9
+ // ------------------------------------------------------------
10
+ // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
+ // ------------------------------------------------------------
12
+ import {
13
+ __name
14
+ } from "../_node-chunks/chunk-AS4G5YLZ.js";
15
+
16
+ // src/server/framework-preset-babel-ember.ts
17
+ import { precompile } from "ember-source/dist/ember-template-compiler.js";
18
+
19
+ // src/util.ts
20
+ import { dirname, join } from "node:path";
21
+ import { getProjectRoot } from "storybook/internal/common";
22
+ import { findUpSync } from "find-up";
23
+ var findDistFile = /* @__PURE__ */ __name((cwd, relativePath) => {
24
+ const nearestPackageJson = findUpSync("package.json", { cwd, stopAt: getProjectRoot() });
25
+ if (!nearestPackageJson) {
26
+ throw new Error(`Could not find package.json in: ${cwd}`);
27
+ }
28
+ const packageDir = dirname(nearestPackageJson);
29
+ return join(packageDir, "dist", relativePath);
30
+ }, "findDistFile");
31
+
32
+ // src/server/framework-preset-babel-ember.ts
33
+ var emberOptions;
7
34
  function precompileWithPlugins(string, options) {
8
- const precompileOptions = options;
9
- if (emberOptions && emberOptions.polyfills) {
10
- precompileOptions.plugins = { ast: emberOptions.polyfills };
11
- }
12
- return (0, ember_template_compiler_js_1.precompile)(string, precompileOptions);
35
+ const precompileOptions = options;
36
+ if (emberOptions && emberOptions.polyfills) {
37
+ precompileOptions.plugins = { ast: emberOptions.polyfills };
38
+ }
39
+ return precompile(string, precompileOptions);
13
40
  }
14
- const babel = (config, options) => {
15
- if (options && options.presetsList) {
16
- options.presetsList.forEach((e, index) => {
17
- if (e.preset && e.preset.emberOptions) {
18
- emberOptions = e.preset.emberOptions;
19
- if (options.presetsList) {
20
- delete options.presetsList[index].preset.emberOptions;
21
- }
22
- }
23
- });
24
- }
25
- const babelConfigPlugins = config?.plugins || [];
26
- const extraPlugins = [
27
- [
28
- require.resolve('babel-plugin-htmlbars-inline-precompile'),
29
- {
30
- precompile: precompileWithPlugins,
31
- modules: {
32
- 'ember-cli-htmlbars': 'hbs',
33
- 'ember-cli-htmlbars-inline-precompile': 'default',
34
- 'htmlbars-inline-precompile': 'default',
35
- },
36
- },
37
- ],
38
- [require.resolve('babel-plugin-ember-modules-api-polyfill')],
39
- ];
40
- return {
41
- ...config,
42
- plugins: [...babelConfigPlugins, ...extraPlugins],
43
- };
41
+ __name(precompileWithPlugins, "precompileWithPlugins");
42
+ var babel = /* @__PURE__ */ __name((config, options) => {
43
+ if (options && options.presetsList) {
44
+ options.presetsList.forEach((e, index) => {
45
+ if (e.preset && e.preset.emberOptions) {
46
+ emberOptions = e.preset.emberOptions;
47
+ if (options.presetsList) {
48
+ delete options.presetsList[index].preset.emberOptions;
49
+ }
50
+ }
51
+ });
52
+ }
53
+ const babelConfigPlugins = config?.plugins || [];
54
+ const extraPlugins = [
55
+ [
56
+ import.meta.resolve("babel-plugin-htmlbars-inline-precompile"),
57
+ {
58
+ precompile: precompileWithPlugins,
59
+ modules: {
60
+ "ember-cli-htmlbars": "hbs",
61
+ "ember-cli-htmlbars-inline-precompile": "default",
62
+ "htmlbars-inline-precompile": "default"
63
+ }
64
+ }
65
+ ],
66
+ [import.meta.resolve("babel-plugin-ember-modules-api-polyfill")]
67
+ ];
68
+ return {
69
+ ...config,
70
+ plugins: [...babelConfigPlugins, ...extraPlugins]
71
+ };
72
+ }, "babel");
73
+ var previewAnnotations = /* @__PURE__ */ __name((entry = []) => {
74
+ return [...entry, findDistFile(__dirname, "client/preview/config")];
75
+ }, "previewAnnotations");
76
+ export {
77
+ babel,
78
+ previewAnnotations
44
79
  };
45
- exports.babel = babel;
46
- const previewAnnotations = (entry = []) => {
47
- return [...entry, (0, util_1.findDistFile)(__dirname, 'client/preview/config')];
48
- };
49
- exports.previewAnnotations = previewAnnotations;
package/package.json CHANGED
@@ -1,7 +1,14 @@
1
1
  {
2
2
  "name": "@storybook/ember",
3
- "version": "9.2.0-alpha.2",
4
- "description": "Storybook for Ember: Develop, document, and test Ember components in isolation",
3
+ "version": "10.0.0-beta.0",
4
+ "description": "Storybook for Ember: Develop, document, and test UI components in isolation",
5
+ "keywords": [
6
+ "storybook",
7
+ "storybook-framework",
8
+ "ember",
9
+ "component",
10
+ "components"
11
+ ],
5
12
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
6
13
  "bugs": {
7
14
  "url": "https://github.com/storybookjs/storybook/issues"
@@ -16,26 +23,20 @@
16
23
  "url": "https://opencollective.com/storybook"
17
24
  },
18
25
  "license": "MIT",
26
+ "type": "module",
19
27
  "exports": {
20
28
  ".": {
21
29
  "types": "./dist/index.d.ts",
22
- "node": "./dist/index.js",
23
- "import": "./dist/index.mjs",
24
- "require": "./dist/index.js"
30
+ "default": "./dist/index.js"
25
31
  },
26
- "./preset": "./preset.js",
27
32
  "./node": {
28
33
  "types": "./dist/node/index.d.ts",
29
- "node": "./dist/node/index.js",
30
- "import": "./dist/node/index.js",
31
- "require": "./dist/node/index.js"
34
+ "default": "./dist/node/index.js"
32
35
  },
33
36
  "./package.json": "./package.json",
34
- "./*": "./*"
37
+ "./preset": "./dist/preset.js",
38
+ "./server/framework-preset-babel-ember": "./dist/server/framework-preset-babel-ember.js"
35
39
  },
36
- "main": "dist/index.js",
37
- "module": "dist/index.mjs",
38
- "types": "dist/index.d.ts",
39
40
  "files": [
40
41
  "dist/**/*",
41
42
  "template/cli/**/*",
@@ -45,11 +46,11 @@
45
46
  "!src/**/*"
46
47
  ],
47
48
  "scripts": {
48
- "check": "jiti ../../../scripts/prepare/check.ts",
49
- "prep": "jiti ../../../scripts/prepare/tsc.ts"
49
+ "check": "jiti ../../../scripts/check/check-package.ts",
50
+ "prep": "jiti ../../../scripts/build/build-package.ts"
50
51
  },
51
52
  "dependencies": {
52
- "@storybook/builder-webpack5": "9.2.0-alpha.2",
53
+ "@storybook/builder-webpack5": "10.0.0-beta.0",
53
54
  "@storybook/global": "^5.0.0",
54
55
  "babel-loader": "9.1.3",
55
56
  "find-up": "^7.0.0"
@@ -63,16 +64,12 @@
63
64
  "babel-plugin-ember-modules-api-polyfill": "^3.5.0",
64
65
  "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
65
66
  "ember-source": "~3.28.1 || >=4.0.0",
66
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
67
- "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
68
- "storybook": "^9.2.0-alpha.2"
69
- },
70
- "engines": {
71
- "node": ">=20.0.0"
67
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
68
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
69
+ "storybook": "^10.0.0-beta.0"
72
70
  },
73
71
  "publishConfig": {
74
72
  "access": "public"
75
73
  },
76
- "bundler": {},
77
- "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
74
+ "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae16"
78
75
  }
package/preset.js CHANGED
@@ -1 +1 @@
1
- module.exports = require('./dist/preset');
1
+ export * from './dist/preset.js';
@@ -1,14 +0,0 @@
1
- import type { ArgTypesEnhancer } from 'storybook/internal/types';
2
- import './globals';
3
- export { renderToCanvas } from './render';
4
- export declare const parameters: {
5
- renderer: string;
6
- docs: {
7
- story: {
8
- iframeHeight: string;
9
- };
10
- extractArgTypes: (componentName: string) => any;
11
- extractComponentDescription: (componentName: string) => any;
12
- };
13
- };
14
- export declare const argTypesEnhancers: ArgTypesEnhancer[];
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.argTypesEnhancers = exports.parameters = exports.renderToCanvas = void 0;
4
- const docs_tools_1 = require("storybook/internal/docs-tools");
5
- require("./globals");
6
- const jsondoc_1 = require("./jsondoc");
7
- var render_1 = require("./render");
8
- Object.defineProperty(exports, "renderToCanvas", { enumerable: true, get: function () { return render_1.renderToCanvas; } });
9
- exports.parameters = {
10
- renderer: 'ember',
11
- docs: {
12
- story: { iframeHeight: '80px' },
13
- extractArgTypes: jsondoc_1.extractArgTypes,
14
- extractComponentDescription: jsondoc_1.extractComponentDescription,
15
- },
16
- };
17
- exports.argTypesEnhancers = [docs_tools_1.enhanceArgTypes];
@@ -1,13 +0,0 @@
1
- import { enhanceArgTypes } from 'storybook/internal/docs-tools';
2
- import './globals';
3
- import { extractArgTypes, extractComponentDescription } from './jsondoc';
4
- export { renderToCanvas } from './render';
5
- export const parameters = {
6
- renderer: 'ember',
7
- docs: {
8
- story: { iframeHeight: '80px' },
9
- extractArgTypes,
10
- extractComponentDescription,
11
- },
12
- };
13
- export const argTypesEnhancers = [enhanceArgTypes];
@@ -1 +0,0 @@
1
- export {};
@@ -1,5 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const global_1 = require("@storybook/global");
4
- global_1.global.STORYBOOK_NAME = process.env.STORYBOOK_NAME;
5
- global_1.global.STORYBOOK_ENV = 'ember';
@@ -1,3 +0,0 @@
1
- import { global } from '@storybook/global';
2
- global.STORYBOOK_NAME = process.env.STORYBOOK_NAME;
3
- global.STORYBOOK_ENV = 'ember';
@@ -1,3 +0,0 @@
1
- export declare const getJSONDoc: () => any;
2
- export declare const extractArgTypes: (componentName: string) => any;
3
- export declare const extractComponentDescription: (componentName: string) => any;
@@ -1,48 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.extractComponentDescription = exports.extractArgTypes = exports.getJSONDoc = void 0;
4
- const global_1 = require("@storybook/global");
5
- const getJSONDoc = () => {
6
- return global_1.global.__EMBER_GENERATED_DOC_JSON__;
7
- };
8
- exports.getJSONDoc = getJSONDoc;
9
- const extractArgTypes = (componentName) => {
10
- const json = (0, exports.getJSONDoc)();
11
- if (!(json && json.included)) {
12
- return null;
13
- }
14
- const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
15
- if (!componentDoc) {
16
- return null;
17
- }
18
- return componentDoc.attributes.arguments.reduce((acc, prop) => {
19
- acc[prop.name] = {
20
- name: prop.name,
21
- defaultValue: prop.defaultValue,
22
- description: prop.description,
23
- table: {
24
- defaultValue: { summary: prop.defaultValue },
25
- type: {
26
- summary: prop.type,
27
- required: prop.tags.length
28
- ? prop.tags.some((tag) => tag.name === 'required')
29
- : false,
30
- },
31
- },
32
- };
33
- return acc;
34
- }, {});
35
- };
36
- exports.extractArgTypes = extractArgTypes;
37
- const extractComponentDescription = (componentName) => {
38
- const json = (0, exports.getJSONDoc)();
39
- if (!(json && json.included)) {
40
- return null;
41
- }
42
- const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
43
- if (!componentDoc) {
44
- return null;
45
- }
46
- return componentDoc.attributes.description;
47
- };
48
- exports.extractComponentDescription = extractComponentDescription;
@@ -1,42 +0,0 @@
1
- import { global } from '@storybook/global';
2
- export const getJSONDoc = () => {
3
- return global.__EMBER_GENERATED_DOC_JSON__;
4
- };
5
- export const extractArgTypes = (componentName) => {
6
- const json = getJSONDoc();
7
- if (!(json && json.included)) {
8
- return null;
9
- }
10
- const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
11
- if (!componentDoc) {
12
- return null;
13
- }
14
- return componentDoc.attributes.arguments.reduce((acc, prop) => {
15
- acc[prop.name] = {
16
- name: prop.name,
17
- defaultValue: prop.defaultValue,
18
- description: prop.description,
19
- table: {
20
- defaultValue: { summary: prop.defaultValue },
21
- type: {
22
- summary: prop.type,
23
- required: prop.tags.length
24
- ? prop.tags.some((tag) => tag.name === 'required')
25
- : false,
26
- },
27
- },
28
- };
29
- return acc;
30
- }, {});
31
- };
32
- export const extractComponentDescription = (componentName) => {
33
- const json = getJSONDoc();
34
- if (!(json && json.included)) {
35
- return null;
36
- }
37
- const componentDoc = json.included.find((doc) => doc.attributes.name === componentName);
38
- if (!componentDoc) {
39
- return null;
40
- }
41
- return componentDoc.attributes.description;
42
- };
@@ -1,3 +0,0 @@
1
- import type { RenderContext } from 'storybook/internal/types';
2
- import type { EmberRenderer } from './types';
3
- export declare function renderToCanvas({ storyFn, kind, name, showMain, showError }: RenderContext<EmberRenderer>, canvasElement: EmberRenderer['canvasElement']): void;
@@ -1,68 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.renderToCanvas = renderToCanvas;
4
- const global_1 = require("@storybook/global");
5
- const ts_dedent_1 = require("ts-dedent");
6
- const { document } = global_1.global;
7
- const rootEl = document.getElementById('storybook-root');
8
- function loadEmberApp() {
9
- const config = global_1.global.require(`${global_1.global.STORYBOOK_NAME}/config/environment`);
10
- return global_1.global.require(`${global_1.global.STORYBOOK_NAME}/app`).default.create({
11
- autoboot: false,
12
- rootElement: rootEl,
13
- ...config.APP,
14
- });
15
- }
16
- const app = loadEmberApp();
17
- let lastPromise = app.boot();
18
- let hasRendered = false;
19
- let isRendering = false;
20
- function render(options, el) {
21
- if (isRendering) {
22
- return;
23
- }
24
- isRendering = true;
25
- const { template, context = {}, element } = options;
26
- if (hasRendered) {
27
- lastPromise = lastPromise.then((instance) => instance.destroy());
28
- }
29
- lastPromise = lastPromise
30
- .then(() => {
31
- const appInstancePrivate = app.buildInstance();
32
- return appInstancePrivate.boot().then(() => appInstancePrivate);
33
- })
34
- .then((instance) => {
35
- instance.register('component:story-mode', Ember.Component.extend({
36
- layout: template || options,
37
- ...context,
38
- }));
39
- const component = instance.lookup('component:story-mode');
40
- if (element) {
41
- component.appendTo(element);
42
- element.appendTo(el);
43
- }
44
- else {
45
- component.appendTo(el);
46
- }
47
- hasRendered = true;
48
- isRendering = false;
49
- return instance;
50
- });
51
- }
52
- function renderToCanvas({ storyFn, kind, name, showMain, showError }, canvasElement) {
53
- const element = storyFn();
54
- if (!element) {
55
- showError({
56
- title: `Expecting a Ember element from the story: "${name}" of "${kind}".`,
57
- description: (0, ts_dedent_1.dedent) `
58
- Did you forget to return the Ember element from the story?
59
- Use "() => hbs('{{component}}')" or "() => { return {
60
- template: hbs\`{{component}}\`
61
- } }" when defining the story.
62
- `,
63
- });
64
- return;
65
- }
66
- showMain();
67
- render(element, canvasElement);
68
- }
@@ -1,65 +0,0 @@
1
- import { global } from '@storybook/global';
2
- import { dedent } from 'ts-dedent';
3
- const { document } = global;
4
- const rootEl = document.getElementById('storybook-root');
5
- function loadEmberApp() {
6
- const config = global.require(`${global.STORYBOOK_NAME}/config/environment`);
7
- return global.require(`${global.STORYBOOK_NAME}/app`).default.create({
8
- autoboot: false,
9
- rootElement: rootEl,
10
- ...config.APP,
11
- });
12
- }
13
- const app = loadEmberApp();
14
- let lastPromise = app.boot();
15
- let hasRendered = false;
16
- let isRendering = false;
17
- function render(options, el) {
18
- if (isRendering) {
19
- return;
20
- }
21
- isRendering = true;
22
- const { template, context = {}, element } = options;
23
- if (hasRendered) {
24
- lastPromise = lastPromise.then((instance) => instance.destroy());
25
- }
26
- lastPromise = lastPromise
27
- .then(() => {
28
- const appInstancePrivate = app.buildInstance();
29
- return appInstancePrivate.boot().then(() => appInstancePrivate);
30
- })
31
- .then((instance) => {
32
- instance.register('component:story-mode', Ember.Component.extend({
33
- layout: template || options,
34
- ...context,
35
- }));
36
- const component = instance.lookup('component:story-mode');
37
- if (element) {
38
- component.appendTo(element);
39
- element.appendTo(el);
40
- }
41
- else {
42
- component.appendTo(el);
43
- }
44
- hasRendered = true;
45
- isRendering = false;
46
- return instance;
47
- });
48
- }
49
- export function renderToCanvas({ storyFn, kind, name, showMain, showError }, canvasElement) {
50
- const element = storyFn();
51
- if (!element) {
52
- showError({
53
- title: `Expecting a Ember element from the story: "${name}" of "${kind}".`,
54
- description: dedent `
55
- Did you forget to return the Ember element from the story?
56
- Use "() => hbs('{{component}}')" or "() => { return {
57
- template: hbs\`{{component}}\`
58
- } }" when defining the story.
59
- `,
60
- });
61
- return;
62
- }
63
- showMain();
64
- render(element, canvasElement);
65
- }
@@ -1,15 +0,0 @@
1
- import type { WebRenderer } from 'storybook/internal/types';
2
- export type { RenderContext } from 'storybook/internal/types';
3
- export interface ShowErrorArgs {
4
- title: string;
5
- description: string;
6
- }
7
- export interface OptionsArgs {
8
- template: any;
9
- context: any;
10
- element: any;
11
- }
12
- export interface EmberRenderer extends WebRenderer {
13
- component: any;
14
- storyResult: OptionsArgs;
15
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1 +0,0 @@
1
- export {};
package/dist/index.mjs DELETED
@@ -1 +0,0 @@
1
- export * from './types';
@@ -1,3 +0,0 @@
1
- export function defineMain(config) {
2
- return config;
3
- }
package/dist/preset.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { PresetProperty } from 'storybook/internal/types';
2
- import type { StorybookConfig } from './types';
3
- export declare const addons: PresetProperty<'addons'>;
4
- export declare const webpackFinal: StorybookConfig['webpackFinal'];
5
- export declare const core: PresetProperty<'core'>;
package/dist/preset.mjs DELETED
@@ -1,45 +0,0 @@
1
- import { dirname, join } from 'node:path';
2
- import { getProjectRoot, resolvePathInStorybookCache } from 'storybook/internal/common';
3
- import { getVirtualModules } from '@storybook/builder-webpack5';
4
- const getAbsolutePath = (input) => dirname(require.resolve(join(input, 'package.json')));
5
- export const addons = [
6
- require.resolve('./server/framework-preset-babel-ember'),
7
- ];
8
- export const webpackFinal = async (baseConfig, options) => {
9
- const { virtualModules } = await getVirtualModules(options);
10
- const babelOptions = await options.presets.apply('babel', {}, options);
11
- const typescriptOptions = await options.presets.apply('typescript', {}, options);
12
- return {
13
- ...baseConfig,
14
- module: {
15
- ...baseConfig.module,
16
- rules: [
17
- ...(baseConfig.module?.rules ?? []),
18
- {
19
- test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
20
- use: [
21
- {
22
- loader: require.resolve('babel-loader'),
23
- options: {
24
- cacheDirectory: resolvePathInStorybookCache('babel'),
25
- ...babelOptions,
26
- },
27
- },
28
- ],
29
- include: [getProjectRoot()],
30
- exclude: [/node_modules/, ...Object.keys(virtualModules)],
31
- },
32
- ],
33
- },
34
- };
35
- };
36
- export const core = async (config, options) => {
37
- const framework = await options.presets.apply('framework');
38
- return {
39
- ...config,
40
- builder: {
41
- name: getAbsolutePath('@storybook/builder-webpack5'),
42
- options: typeof framework === 'string' ? {} : framework.options.builder || {},
43
- },
44
- };
45
- };
@@ -1,3 +0,0 @@
1
- import type { PresetProperty, PresetPropertyFn } from 'storybook/internal/types';
2
- export declare const babel: PresetPropertyFn<'babel'>;
3
- export declare const previewAnnotations: PresetProperty<'previewAnnotations'>;
@@ -1,44 +0,0 @@
1
- import { precompile } from 'ember-source/dist/ember-template-compiler.js';
2
- import { findDistFile } from '../util';
3
- let emberOptions;
4
- function precompileWithPlugins(string, options) {
5
- const precompileOptions = options;
6
- if (emberOptions && emberOptions.polyfills) {
7
- precompileOptions.plugins = { ast: emberOptions.polyfills };
8
- }
9
- return precompile(string, precompileOptions);
10
- }
11
- export const babel = (config, options) => {
12
- if (options && options.presetsList) {
13
- options.presetsList.forEach((e, index) => {
14
- if (e.preset && e.preset.emberOptions) {
15
- emberOptions = e.preset.emberOptions;
16
- if (options.presetsList) {
17
- delete options.presetsList[index].preset.emberOptions;
18
- }
19
- }
20
- });
21
- }
22
- const babelConfigPlugins = config?.plugins || [];
23
- const extraPlugins = [
24
- [
25
- require.resolve('babel-plugin-htmlbars-inline-precompile'),
26
- {
27
- precompile: precompileWithPlugins,
28
- modules: {
29
- 'ember-cli-htmlbars': 'hbs',
30
- 'ember-cli-htmlbars-inline-precompile': 'default',
31
- 'htmlbars-inline-precompile': 'default',
32
- },
33
- },
34
- ],
35
- [require.resolve('babel-plugin-ember-modules-api-polyfill')],
36
- ];
37
- return {
38
- ...config,
39
- plugins: [...babelConfigPlugins, ...extraPlugins],
40
- };
41
- };
42
- export const previewAnnotations = (entry = []) => {
43
- return [...entry, findDistFile(__dirname, 'client/preview/config')];
44
- };
package/dist/types.d.ts DELETED
@@ -1,27 +0,0 @@
1
- import type { CompatibleString } from 'storybook/internal/types';
2
- import type { BuilderOptions, StorybookConfigWebpack, TypescriptOptions as TypescriptOptionsBuilder } from '@storybook/builder-webpack5';
3
- import type { StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsReact } from '@storybook/core-webpack';
4
- type FrameworkName = CompatibleString<'@storybook/ember-webpack5'>;
5
- type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
6
- export type FrameworkOptions = {
7
- builder?: BuilderOptions;
8
- };
9
- type StorybookConfigFramework = {
10
- framework: FrameworkName | {
11
- name: FrameworkName;
12
- options: FrameworkOptions;
13
- };
14
- core?: StorybookConfigBase['core'] & {
15
- builder?: BuilderName | {
16
- name: BuilderName;
17
- options: BuilderOptions;
18
- };
19
- };
20
- typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> & StorybookConfigBase['typescript'];
21
- };
22
- /** The interface for Storybook configuration in `main.ts` files. */
23
- export type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
24
- declare global {
25
- var __EMBER_GENERATED_DOC_JSON__: any;
26
- }
27
- export {};
package/dist/types.js DELETED
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
package/dist/types.mjs DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/util.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const findDistFile: (cwd: string, relativePath: string) => string;
package/dist/util.js DELETED
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.findDistFile = void 0;
4
- const node_path_1 = require("node:path");
5
- const common_1 = require("storybook/internal/common");
6
- const find_up_1 = require("find-up");
7
- const findDistFile = (cwd, relativePath) => {
8
- const nearestPackageJson = (0, find_up_1.findUpSync)('package.json', { cwd, stopAt: (0, common_1.getProjectRoot)() });
9
- if (!nearestPackageJson) {
10
- throw new Error(`Could not find package.json in: ${cwd}`);
11
- }
12
- const packageDir = (0, node_path_1.dirname)(nearestPackageJson);
13
- return (0, node_path_1.join)(packageDir, 'dist', relativePath);
14
- };
15
- exports.findDistFile = findDistFile;
package/dist/util.mjs DELETED
@@ -1,11 +0,0 @@
1
- import { dirname, join } from 'node:path';
2
- import { getProjectRoot } from 'storybook/internal/common';
3
- import { findUpSync } from 'find-up';
4
- export const findDistFile = (cwd, relativePath) => {
5
- const nearestPackageJson = findUpSync('package.json', { cwd, stopAt: getProjectRoot() });
6
- if (!nearestPackageJson) {
7
- throw new Error(`Could not find package.json in: ${cwd}`);
8
- }
9
- const packageDir = dirname(nearestPackageJson);
10
- return join(packageDir, 'dist', relativePath);
11
- };