From 3fcbe02e38d15b5b20333e9f9f9b1f471cfda2a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Mon, 3 Jul 2023 15:05:11 +0200 Subject: [PATCH 01/24] Add ember template --- code/lib/cli/src/sandbox-templates.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index cea75614ae81..81199ee0f0bd 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -471,6 +471,16 @@ const baseTemplates = { // TODO: The community template does not provide standard stories, which is required for e2e tests. skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench'], }, + 'ember/default-js': { + name: 'Create Ember app (Javascript)', + script: 'npx --package ember-cli ember new {{beforeDir}}', + inDevelopment: true, + expected: { + framework: '@storybook/ember', + renderer: '@storybook/ember', + builder: '@storybook/builder-webpack5', + }, + }, } satisfies Record; /** From fbd6c2f4f64fe804fdadeadcb78e0c6d80effbf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Mon, 3 Jul 2023 16:53:08 +0200 Subject: [PATCH 02/24] Add framework name parameter when calling the baseGenerator --- code/lib/cli/src/generators/EMBER/index.ts | 3 ++- code/lib/cli/src/project_types.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/generators/EMBER/index.ts b/code/lib/cli/src/generators/EMBER/index.ts index 313dcf8691fd..98c041c952f7 100644 --- a/code/lib/cli/src/generators/EMBER/index.ts +++ b/code/lib/cli/src/generators/EMBER/index.ts @@ -16,7 +16,8 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'babel-plugin-htmlbars-inline-precompile', ], staticDir: 'dist', - } + }, + 'ember' ); }; diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index 8f1f07b3ae0f..0a0073d84664 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -22,7 +22,7 @@ export const externalFrameworks: ExternalFramework[] = [ ]; // Should match @storybook/ -export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid'; +export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid' | 'ember'; // Should match @storybook/ export type SupportedRenderers = From b25d83d0e5857c0fdf8b74c895bac6b9d9570dfa Mon Sep 17 00:00:00 2001 From: Nicolas Lepage <19571875+nlepage@users.noreply.github.com> Date: Mon, 3 Jul 2023 16:56:21 +0200 Subject: [PATCH 03/24] Remove findDistEsm --- code/frameworks/ember/package.json | 1 + .../ember/src/server/framework-preset-babel-ember.ts | 4 ++-- .../ember/src/server/framework-preset-ember-docs.ts | 4 ++-- .../src/utils/findDistEsm.ts => frameworks/ember/src/util.ts} | 4 ++-- code/lib/core-common/src/index.ts | 1 - code/yarn.lock | 1 + 6 files changed, 8 insertions(+), 7 deletions(-) rename code/{lib/core-common/src/utils/findDistEsm.ts => frameworks/ember/src/util.ts} (69%) diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 43954dc5e6d5..79e84148c2c9 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -38,6 +38,7 @@ "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", + "find-up": "^5.0.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts index 54f31c0fd739..cdb83bf6dbfa 100644 --- a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts +++ b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts @@ -1,6 +1,6 @@ import { precompile } from 'ember-source/dist/ember-template-compiler'; -import { findDistEsm } from '@storybook/core-common'; import type { PresetProperty } from '@storybook/types'; +import { findDistFile } from '../util'; let emberOptions: any; @@ -50,5 +50,5 @@ export const babel: PresetProperty<'babel'> = (config, options) => { }; export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => { - return [...entry, findDistEsm(__dirname, 'client/preview/config')]; + return [...entry, findDistFile(__dirname, 'client/preview/config')]; }; diff --git a/code/frameworks/ember/src/server/framework-preset-ember-docs.ts b/code/frameworks/ember/src/server/framework-preset-ember-docs.ts index 24e1a97a1cc9..dc0ca70367e5 100644 --- a/code/frameworks/ember/src/server/framework-preset-ember-docs.ts +++ b/code/frameworks/ember/src/server/framework-preset-ember-docs.ts @@ -1,8 +1,8 @@ import type { PresetProperty } from '@storybook/types'; -import { findDistEsm } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; +import { findDistFile } from '../util'; export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; - return [...entry, findDistEsm(__dirname, 'client/docs/config')]; + return [...entry, findDistFile(__dirname, 'client/docs/config')]; }; diff --git a/code/lib/core-common/src/utils/findDistEsm.ts b/code/frameworks/ember/src/util.ts similarity index 69% rename from code/lib/core-common/src/utils/findDistEsm.ts rename to code/frameworks/ember/src/util.ts index 51a34e1669fb..eeecd1e91c9d 100644 --- a/code/lib/core-common/src/utils/findDistEsm.ts +++ b/code/frameworks/ember/src/util.ts @@ -1,12 +1,12 @@ import path from 'path'; import { sync as findUpSync } from 'find-up'; -export const findDistEsm = (cwd: string, relativePath: string) => { +export const findDistFile = (cwd: string, relativePath: string) => { const nearestPackageJson = findUpSync('package.json', { cwd }); if (!nearestPackageJson) { throw new Error(`Could not find package.json in: ${cwd}`); } const packageDir = path.dirname(nearestPackageJson); - return path.join(packageDir, 'dist', 'esm', relativePath); + return path.join(packageDir, 'dist', relativePath); }; diff --git a/code/lib/core-common/src/index.ts b/code/lib/core-common/src/index.ts index 7296dc814a2c..2af1d1100798 100644 --- a/code/lib/core-common/src/index.ts +++ b/code/lib/core-common/src/index.ts @@ -5,7 +5,6 @@ export * from './presets'; export * from './utils/cache'; export * from './utils/check-addon-order'; export * from './utils/envs'; -export * from './utils/findDistEsm'; export * from './utils/common-glob-options'; export * from './utils/get-builder-options'; export * from './utils/get-framework-name'; diff --git a/code/yarn.lock b/code/yarn.lock index b20f98adbe2a..27939bd4dfc2 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5722,6 +5722,7 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" ember-source: "npm:~3.28.1" + find-up: "npm:^5.0.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: From 2b868c084d91eba2f8bc293847a986ad6bffce37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Mon, 3 Jul 2023 17:17:00 +0200 Subject: [PATCH 04/24] Use webpack5 by default with ember --- code/lib/cli/src/detect.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts index 733ed65e2974..f8fe7eb9903d 100644 --- a/code/lib/cli/src/detect.ts +++ b/code/lib/cli/src/detect.ts @@ -131,6 +131,7 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp case ProjectType.ANGULAR: case ProjectType.REACT_NATIVE: // technically react native doesn't use webpack, we just want to set something case ProjectType.NEXTJS: + case ProjectType.EMBER: return CoreBuilder.Webpack5; default: // eslint-disable-next-line no-case-declarations From 20064d5cf9debf88c8c09d56e7aa8192b1d587cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Tue, 4 Jul 2023 09:26:10 +0200 Subject: [PATCH 05/24] Disable framework-preset-ember-docs for now --- code/frameworks/ember/src/preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 998edbfa7405..aaddfb99b3e4 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -7,7 +7,7 @@ const getAbsolutePath = (input: I): I => export const addons: PresetProperty<'addons'> = [ require.resolve('./server/framework-preset-babel-ember'), - require.resolve('./server/framework-preset-ember-docs'), +// require.resolve('./server/framework-preset-ember-docs'), ]; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { From 94722453a60dfe577ff6fbb2f1d6186084aacbbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Tue, 4 Jul 2023 09:26:32 +0200 Subject: [PATCH 06/24] Try to restore the previous integration --- code/frameworks/ember/src/client/preview/render.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/code/frameworks/ember/src/client/preview/render.ts b/code/frameworks/ember/src/client/preview/render.ts index 84121a6cd7bf..419a5a9124ba 100644 --- a/code/frameworks/ember/src/client/preview/render.ts +++ b/code/frameworks/ember/src/client/preview/render.ts @@ -1,16 +1,17 @@ import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; import type { RenderContext } from '@storybook/types'; -// @ts-expect-error (Converted from ts-ignore) -import Component from '@ember/component'; // eslint-disable-line import/no-unresolved import type { OptionsArgs, EmberRenderer } from './types'; -const { document } = global; +const { window: globalWindow, document } = global; + +declare let Ember: any; const rootEl = document.getElementById('storybook-root'); -const config = global.require(`${global.STORYBOOK_NAME}/config/environment`); -const app = global.require(`${global.STORYBOOK_NAME}/app`).default.create({ +console.log(globalWindow); +const config = globalWindow.require(`${global.STORYBOOK_NAME}/config/environment`); +const app = globalWindow.require(`${global.STORYBOOK_NAME}/app`).default.create({ autoboot: false, rootElement: rootEl, ...config.APP, @@ -38,7 +39,7 @@ function render(options: OptionsArgs, el: EmberRenderer['canvasElement']) { .then((instance: any) => { instance.register( 'component:story-mode', - Component.extend({ + Ember.Component.extend({ layout: template || options, ...context, }) From be94cfdb277131f07ea0a4c2053c2f2660d41590 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Mon, 10 Jul 2023 10:26:25 +0200 Subject: [PATCH 07/24] Switch to ember-cli 3.28 --- code/lib/cli/src/sandbox-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 81199ee0f0bd..c17ebc61a52d 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -473,7 +473,7 @@ const baseTemplates = { }, 'ember/default-js': { name: 'Create Ember app (Javascript)', - script: 'npx --package ember-cli ember new {{beforeDir}}', + script: 'npx --package ember-cli@3.28.5 ember new {{beforeDir}}', inDevelopment: true, expected: { framework: '@storybook/ember', From eec3ee417c2e766dc88191b96a1ed928bb8f4f84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Tue, 11 Jul 2023 14:55:13 +0200 Subject: [PATCH 08/24] Fix global use --- code/frameworks/ember/src/client/preview/config.ts | 2 ++ code/frameworks/ember/src/client/preview/globals.ts | 6 ++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/code/frameworks/ember/src/client/preview/config.ts b/code/frameworks/ember/src/client/preview/config.ts index c3ad2801c19a..85a89d8e241c 100644 --- a/code/frameworks/ember/src/client/preview/config.ts +++ b/code/frameworks/ember/src/client/preview/config.ts @@ -1,3 +1,5 @@ +import './globals'; + export { renderToCanvas } from './render'; export const parameters = { renderer: 'ember' as const }; diff --git a/code/frameworks/ember/src/client/preview/globals.ts b/code/frameworks/ember/src/client/preview/globals.ts index 7291f2881442..a5e544512aa3 100644 --- a/code/frameworks/ember/src/client/preview/globals.ts +++ b/code/frameworks/ember/src/client/preview/globals.ts @@ -1,4 +1,6 @@ import { global } from '@storybook/global'; -global.STORYBOOK_NAME = process.env.STORYBOOK_NAME; -global.STORYBOOK_ENV = 'ember'; +const { window: globalWindow } = global; + +globalWindow.STORYBOOK_NAME = process.env.STORYBOOK_NAME; +globalWindow.STORYBOOK_ENV = 'ember'; From f81ab9435b2cf397bf196b5339227188ea586883 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Tue, 11 Jul 2023 14:57:57 +0200 Subject: [PATCH 09/24] Extract a loadEmberApp function --- .../ember/src/client/preview/render.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/code/frameworks/ember/src/client/preview/render.ts b/code/frameworks/ember/src/client/preview/render.ts index 419a5a9124ba..2f63e42edf5b 100644 --- a/code/frameworks/ember/src/client/preview/render.ts +++ b/code/frameworks/ember/src/client/preview/render.ts @@ -9,14 +9,16 @@ declare let Ember: any; const rootEl = document.getElementById('storybook-root'); -console.log(globalWindow); -const config = globalWindow.require(`${global.STORYBOOK_NAME}/config/environment`); -const app = globalWindow.require(`${global.STORYBOOK_NAME}/app`).default.create({ - autoboot: false, - rootElement: rootEl, - ...config.APP, -}); +function loadEmberApp() { + const config = globalWindow.require(`${global.STORYBOOK_NAME}/config/environment`); + return globalWindow.require(`${global.STORYBOOK_NAME}/app`).default.create({ + autoboot: false, + rootElement: rootEl, + ...config.APP, + }); +} +const app = loadEmberApp(); let lastPromise = app.boot(); let hasRendered = false; let isRendering = false; From 581590e4e6b887d01982a73fbd2ec1044bb729db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Thu, 13 Jul 2023 10:14:04 +0200 Subject: [PATCH 10/24] Update peer dependencies --- code/frameworks/ember/package.json | 9 +++++---- code/yarn.lock | 5 ++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 79e84148c2c9..e65d38fda9b7 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -47,10 +47,11 @@ }, "peerDependencies": { "@babel/core": "*", - "@types/ember__component": "4.0.8", - "babel-plugin-ember-modules-api-polyfill": "^2.12.0", - "babel-plugin-htmlbars-inline-precompile": "2 || 3", - "ember-source": "~3.28.1" + "babel-plugin-ember-modules-api-polyfill": "^3.5.0", + "babel-plugin-htmlbars-inline-precompile": "^5.3.1", + "ember-source": "~3.28.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "engines": { "node": ">=16.0.0" diff --git a/code/yarn.lock b/code/yarn.lock index 27939bd4dfc2..46576355ab87 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5727,9 +5727,8 @@ __metadata: typescript: "npm:^5.3.2" 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 + babel-plugin-ember-modules-api-polyfill: ^3.5.0 + babel-plugin-htmlbars-inline-precompile: ^5.3.1 ember-source: ~3.28.1 languageName: unknown linkType: soft From 21a961e2e0ff698667c56c06b67e0c45524db808 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Thu, 13 Jul 2023 10:30:17 +0200 Subject: [PATCH 11/24] Add empty components and stories template directories --- code/frameworks/ember/template/components/.gitkeep | 0 code/frameworks/ember/template/stories/.gitkeep | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 code/frameworks/ember/template/components/.gitkeep create mode 100644 code/frameworks/ember/template/stories/.gitkeep diff --git a/code/frameworks/ember/template/components/.gitkeep b/code/frameworks/ember/template/components/.gitkeep new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/code/frameworks/ember/template/stories/.gitkeep b/code/frameworks/ember/template/stories/.gitkeep new file mode 100644 index 000000000000..e69de29bb2d1 From ad47e3c264085e96bd031859222e188f4098ae91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Thu, 13 Jul 2023 11:00:43 +0200 Subject: [PATCH 12/24] Fix docs addon --- code/addons/docs/ember/README.md | 2 +- .../frameworks/ember/src/client/docs/index.js | 1 - .../ember/src/client/docs/jsondoc.js | 50 ------------------- .../ember/src/client/preview/docs/config.js | 9 ---- .../config.js => preview/docs/config.ts} | 6 ++- .../ember/src/client/preview/docs/index.js | 1 - .../preview/docs/{jsondoc.js => jsondoc.ts} | 17 +++---- code/frameworks/ember/src/preset.ts | 2 +- .../src/server/framework-preset-ember-docs.ts | 2 +- code/frameworks/ember/src/types.ts | 5 ++ 10 files changed, 20 insertions(+), 75 deletions(-) delete mode 100644 code/frameworks/ember/src/client/docs/index.js delete mode 100644 code/frameworks/ember/src/client/docs/jsondoc.js delete mode 100644 code/frameworks/ember/src/client/preview/docs/config.js rename code/frameworks/ember/src/client/{docs/config.js => preview/docs/config.ts} (59%) delete mode 100644 code/frameworks/ember/src/client/preview/docs/index.js rename code/frameworks/ember/src/client/preview/docs/{jsondoc.js => jsondoc.ts} (58%) diff --git a/code/addons/docs/ember/README.md b/code/addons/docs/ember/README.md index 29af33a3b433..e1d907435883 100644 --- a/code/addons/docs/ember/README.md +++ b/code/addons/docs/ember/README.md @@ -51,7 +51,7 @@ Next, add the following to your `.storybook/preview.js` to load the generated js ```js import { setJSONDoc } from '@storybook/addon-docs/ember'; -import docJson from '../storybook-docgen/index.json'; +import docJson from '../dist/storybook-docgen/index.json'; setJSONDoc(docJson); ``` diff --git a/code/frameworks/ember/src/client/docs/index.js b/code/frameworks/ember/src/client/docs/index.js deleted file mode 100644 index fab7166db9d7..000000000000 --- a/code/frameworks/ember/src/client/docs/index.js +++ /dev/null @@ -1 +0,0 @@ -export { setJSONDoc } from './jsondoc'; diff --git a/code/frameworks/ember/src/client/docs/jsondoc.js b/code/frameworks/ember/src/client/docs/jsondoc.js deleted file mode 100644 index 9e7269af8d45..000000000000 --- a/code/frameworks/ember/src/client/docs/jsondoc.js +++ /dev/null @@ -1,50 +0,0 @@ -/* eslint-disable no-underscore-dangle */ -import { global } from '@storybook/global'; - -export const setJSONDoc = (jsondoc) => { - global.__EMBER_GENERATED_DOC_JSON__ = jsondoc; -}; -export const getJSONDoc = () => { - return global.__EMBER_GENERATED_DOC_JSON__; -}; - -export const extractArgTypes = (componentName) => { - const json = getJSONDoc(); - if (!(json && json.included)) { - return null; - } - const componentDoc = json.included.find((doc) => doc.attributes.name === componentName); - - if (!componentDoc) { - return null; - } - return componentDoc.attributes.arguments.reduce((acc, prop) => { - acc[prop.name] = { - name: prop.name, - defaultValue: prop.defaultValue, - description: prop.description, - table: { - defaultValue: { summary: prop.defaultValue }, - type: { - summary: prop.type, - required: prop.tags.length ? prop.tags.some((tag) => tag.name === 'required') : false, - }, - }, - }; - return acc; - }, {}); -}; - -export const extractComponentDescription = (componentName) => { - const json = getJSONDoc(); - if (!(json && json.included)) { - return null; - } - const componentDoc = json.included.find((doc) => doc.attributes.name === componentName); - - if (!componentDoc) { - return null; - } - - return componentDoc.attributes.description; -}; diff --git a/code/frameworks/ember/src/client/preview/docs/config.js b/code/frameworks/ember/src/client/preview/docs/config.js deleted file mode 100644 index a4868993b8c7..000000000000 --- a/code/frameworks/ember/src/client/preview/docs/config.js +++ /dev/null @@ -1,9 +0,0 @@ -import { extractArgTypes, extractComponentDescription } from './jsondoc'; - -export const parameters = { - docs: { - story: { iframeHeight: '80px' }, - extractArgTypes, - extractComponentDescription, - }, -}; diff --git a/code/frameworks/ember/src/client/docs/config.js b/code/frameworks/ember/src/client/preview/docs/config.ts similarity index 59% rename from code/frameworks/ember/src/client/docs/config.js rename to code/frameworks/ember/src/client/preview/docs/config.ts index 22fdb2cd80e3..c1ac3a894012 100644 --- a/code/frameworks/ember/src/client/docs/config.js +++ b/code/frameworks/ember/src/client/preview/docs/config.ts @@ -1,7 +1,9 @@ +import type { ArgTypesEnhancer } from '@storybook/types'; import { enhanceArgTypes } from '@storybook/docs-tools'; + import { extractArgTypes, extractComponentDescription } from './jsondoc'; -export const parameters = { +export const parameters: {} = { docs: { story: { iframeHeight: '80px' }, extractArgTypes, @@ -9,4 +11,4 @@ export const parameters = { }, }; -export const argTypesEnhancers = [enhanceArgTypes]; +export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes]; diff --git a/code/frameworks/ember/src/client/preview/docs/index.js b/code/frameworks/ember/src/client/preview/docs/index.js deleted file mode 100644 index fab7166db9d7..000000000000 --- a/code/frameworks/ember/src/client/preview/docs/index.js +++ /dev/null @@ -1 +0,0 @@ -export { setJSONDoc } from './jsondoc'; diff --git a/code/frameworks/ember/src/client/preview/docs/jsondoc.js b/code/frameworks/ember/src/client/preview/docs/jsondoc.ts similarity index 58% rename from code/frameworks/ember/src/client/preview/docs/jsondoc.js rename to code/frameworks/ember/src/client/preview/docs/jsondoc.ts index 9e7269af8d45..a714fa5365a7 100644 --- a/code/frameworks/ember/src/client/preview/docs/jsondoc.js +++ b/code/frameworks/ember/src/client/preview/docs/jsondoc.ts @@ -1,24 +1,21 @@ /* eslint-disable no-underscore-dangle */ import { global } from '@storybook/global'; -export const setJSONDoc = (jsondoc) => { - global.__EMBER_GENERATED_DOC_JSON__ = jsondoc; -}; export const getJSONDoc = () => { return global.__EMBER_GENERATED_DOC_JSON__; }; -export const extractArgTypes = (componentName) => { +export const extractArgTypes = (componentName: string) => { const json = getJSONDoc(); if (!(json && json.included)) { return null; } - const componentDoc = json.included.find((doc) => doc.attributes.name === componentName); + const componentDoc = json.included.find((doc: any) => doc.attributes.name === componentName); if (!componentDoc) { return null; } - return componentDoc.attributes.arguments.reduce((acc, prop) => { + return componentDoc.attributes.arguments.reduce((acc: any, prop: any) => { acc[prop.name] = { name: prop.name, defaultValue: prop.defaultValue, @@ -27,7 +24,9 @@ export const extractArgTypes = (componentName) => { defaultValue: { summary: prop.defaultValue }, type: { summary: prop.type, - required: prop.tags.length ? prop.tags.some((tag) => tag.name === 'required') : false, + required: prop.tags.length + ? prop.tags.some((tag: any) => tag.name === 'required') + : false, }, }, }; @@ -35,12 +34,12 @@ export const extractArgTypes = (componentName) => { }, {}); }; -export const extractComponentDescription = (componentName) => { +export const extractComponentDescription = (componentName: string) => { const json = getJSONDoc(); if (!(json && json.included)) { return null; } - const componentDoc = json.included.find((doc) => doc.attributes.name === componentName); + const componentDoc = json.included.find((doc: any) => doc.attributes.name === componentName); if (!componentDoc) { return null; diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index aaddfb99b3e4..998edbfa7405 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -7,7 +7,7 @@ const getAbsolutePath = (input: I): I => export const addons: PresetProperty<'addons'> = [ require.resolve('./server/framework-preset-babel-ember'), -// require.resolve('./server/framework-preset-ember-docs'), + require.resolve('./server/framework-preset-ember-docs'), ]; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { diff --git a/code/frameworks/ember/src/server/framework-preset-ember-docs.ts b/code/frameworks/ember/src/server/framework-preset-ember-docs.ts index dc0ca70367e5..577978ef8652 100644 --- a/code/frameworks/ember/src/server/framework-preset-ember-docs.ts +++ b/code/frameworks/ember/src/server/framework-preset-ember-docs.ts @@ -4,5 +4,5 @@ import { findDistFile } from '../util'; export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; - return [...entry, findDistFile(__dirname, 'client/docs/config')]; + return [...entry, findDistFile(__dirname, 'client/preview/docs/config')]; }; diff --git a/code/frameworks/ember/src/types.ts b/code/frameworks/ember/src/types.ts index e75995bf27a7..a00e2741a03f 100644 --- a/code/frameworks/ember/src/types.ts +++ b/code/frameworks/ember/src/types.ts @@ -43,3 +43,8 @@ export type StorybookConfig = Omit< > & StorybookConfigWebpack & StorybookConfigFramework; + +declare global { + // eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention, no-var, vars-on-top + var __EMBER_GENERATED_DOC_JSON__: any; +} From c81bacca986f313325bdaeb18c08c8645de9d4b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Thu, 13 Jul 2023 11:11:58 +0200 Subject: [PATCH 13/24] Fix link --- code/frameworks/ember/template/cli/Button.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/ember/template/cli/Button.stories.js b/code/frameworks/ember/template/cli/Button.stories.js index c32f8a065659..e768675232e4 100644 --- a/code/frameworks/ember/template/cli/Button.stories.js +++ b/code/frameworks/ember/template/cli/Button.stories.js @@ -55,7 +55,7 @@ export const ButtonWithLinkToAnotherStory = { `, context: { - onClick: linkTo('example-introduction--page'), + onClick: linkTo('Example/Introduction'), }, }), name: 'button with link to another story', From 7ad4c8e9c06b4651d0b79e6944f360732c2b2167 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Sat, 15 Jul 2023 15:55:01 +0200 Subject: [PATCH 14/24] Use global env. --- code/frameworks/ember/src/client/preview/globals.ts | 6 ++---- code/frameworks/ember/src/client/preview/render.ts | 6 +++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/code/frameworks/ember/src/client/preview/globals.ts b/code/frameworks/ember/src/client/preview/globals.ts index a5e544512aa3..7291f2881442 100644 --- a/code/frameworks/ember/src/client/preview/globals.ts +++ b/code/frameworks/ember/src/client/preview/globals.ts @@ -1,6 +1,4 @@ import { global } from '@storybook/global'; -const { window: globalWindow } = global; - -globalWindow.STORYBOOK_NAME = process.env.STORYBOOK_NAME; -globalWindow.STORYBOOK_ENV = 'ember'; +global.STORYBOOK_NAME = process.env.STORYBOOK_NAME; +global.STORYBOOK_ENV = 'ember'; diff --git a/code/frameworks/ember/src/client/preview/render.ts b/code/frameworks/ember/src/client/preview/render.ts index 2f63e42edf5b..030314d910f8 100644 --- a/code/frameworks/ember/src/client/preview/render.ts +++ b/code/frameworks/ember/src/client/preview/render.ts @@ -3,15 +3,15 @@ import { dedent } from 'ts-dedent'; import type { RenderContext } from '@storybook/types'; import type { OptionsArgs, EmberRenderer } from './types'; -const { window: globalWindow, document } = global; +const { document } = global; declare let Ember: any; const rootEl = document.getElementById('storybook-root'); function loadEmberApp() { - const config = globalWindow.require(`${global.STORYBOOK_NAME}/config/environment`); - return globalWindow.require(`${global.STORYBOOK_NAME}/app`).default.create({ + const config = global.require(`${global.STORYBOOK_NAME}/config/environment`); + return global.require(`${global.STORYBOOK_NAME}/app`).default.create({ autoboot: false, rootElement: rootEl, ...config.APP, From ebe052d4a0363787a9529179db0d1468425fbd0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Mon, 17 Jul 2023 09:04:54 +0200 Subject: [PATCH 15/24] Test with ember 4.12. --- code/frameworks/ember/package.json | 2 +- code/lib/cli/src/sandbox-templates.ts | 2 +- code/yarn.lock | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index e65d38fda9b7..d72d9de238a4 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -49,7 +49,7 @@ "@babel/core": "*", "babel-plugin-ember-modules-api-polyfill": "^3.5.0", "babel-plugin-htmlbars-inline-precompile": "^5.3.1", - "ember-source": "~3.28.1", + "ember-source": "~3.28.1 || ^4.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index c17ebc61a52d..be9d1b7efd85 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -473,7 +473,7 @@ const baseTemplates = { }, 'ember/default-js': { name: 'Create Ember app (Javascript)', - script: 'npx --package ember-cli@3.28.5 ember new {{beforeDir}}', + script: 'npx --package ember-cli@4.12.1 ember new {{beforeDir}}', inDevelopment: true, expected: { framework: '@storybook/ember', diff --git a/code/yarn.lock b/code/yarn.lock index 46576355ab87..f60a4cfaf723 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5729,7 +5729,9 @@ __metadata: "@babel/core": "*" babel-plugin-ember-modules-api-polyfill: ^3.5.0 babel-plugin-htmlbars-inline-precompile: ^5.3.1 - ember-source: ~3.28.1 + ember-source: ~3.28.1 || ^4.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft From a5a1a088fbc08ed638f1326a9896bd31b9e0dd28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Mon, 17 Jul 2023 10:26:05 +0200 Subject: [PATCH 16/24] Update hbs templates to work with newer releases of ember --- code/frameworks/ember/template/cli/Button.stories.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/code/frameworks/ember/template/cli/Button.stories.js b/code/frameworks/ember/template/cli/Button.stories.js index e768675232e4..3a1bc2f593eb 100644 --- a/code/frameworks/ember/template/cli/Button.stories.js +++ b/code/frameworks/ember/template/cli/Button.stories.js @@ -6,7 +6,7 @@ import { linkTo } from '@storybook/addon-links'; export default { title: 'Example/Button', render: (args) => ({ - template: hbs``, + template: hbs``, context: args, }), argTypes: { @@ -27,13 +27,14 @@ export const Text = { export const Emoji = { args: { label: '😀 😎 👍 💯', + onClick: action('onClick'), }, }; export const TextWithAction = { render: () => ({ template: hbs` - `, @@ -50,12 +51,12 @@ export const TextWithAction = { export const ButtonWithLinkToAnotherStory = { render: () => ({ template: hbs` - `, context: { - onClick: linkTo('Example/Introduction'), + onClick: linkTo('Configure your project'), }, }), name: 'button with link to another story', From 5c8acb23abde7c158f5630a91ce6f7cd93d3debe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Tue, 18 Jul 2023 09:33:39 +0200 Subject: [PATCH 17/24] Split ember 3 and ember 4 templates --- code/lib/cli/src/sandbox-templates.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index be9d1b7efd85..573e41f0ce09 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -471,8 +471,18 @@ const baseTemplates = { // TODO: The community template does not provide standard stories, which is required for e2e tests. skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench'], }, + 'ember/3-js': { + name: 'Create Ember 3 app (Javascript)', + script: 'npx --package ember-cli@3.28.1 ember new {{beforeDir}}', + inDevelopment: true, + expected: { + framework: '@storybook/ember', + renderer: '@storybook/ember', + builder: '@storybook/builder-webpack5', + }, + }, 'ember/default-js': { - name: 'Create Ember app (Javascript)', + name: 'Create Ember 4 app (Javascript)', script: 'npx --package ember-cli@4.12.1 ember new {{beforeDir}}', inDevelopment: true, expected: { From 735affa87c43828d06229d3a41f88d1667ad95ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Thu, 27 Jul 2023 09:28:08 +0200 Subject: [PATCH 18/24] Add empty components file to avoid the build to fail --- code/frameworks/ember/template/components/{.gitkeep => index.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename code/frameworks/ember/template/components/{.gitkeep => index.js} (100%) diff --git a/code/frameworks/ember/template/components/.gitkeep b/code/frameworks/ember/template/components/index.js similarity index 100% rename from code/frameworks/ember/template/components/.gitkeep rename to code/frameworks/ember/template/components/index.js From 1fa0aca2b88d8287f0806e68c4306dcff0f9950b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Wed, 16 Aug 2023 14:21:46 +0200 Subject: [PATCH 19/24] Proxy @storybook/ember-cli-storybook on verdaccio --- scripts/verdaccio.yaml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index 89bb067a5d39..e0139f305f0b 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -120,6 +120,10 @@ packages: access: $all publish: $all proxy: npmjs + '@storybook/ember-cli-storybook': + access: $all + publish: $all + proxy: npmjs # storybook packages are NOT proxied to global registry # allowing us to republish any version during tests From 4090ac4efe147b1af7fe9dc83fded49e2a139404 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Wed, 16 Aug 2023 14:30:58 +0200 Subject: [PATCH 20/24] Fix the ember sandbox template to work without any manual updates --- code/lib/cli/src/sandbox-templates.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 573e41f0ce09..bfda21c2308c 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -483,7 +483,8 @@ const baseTemplates = { }, 'ember/default-js': { name: 'Create Ember 4 app (Javascript)', - script: 'npx --package ember-cli@4.12.1 ember new {{beforeDir}}', + script: + 'npx --package ember-cli@4.12.1 ember new {{beforeDir}} --yarn && cd {{beforeDir}} && yarn add --dev @storybook/ember-cli-storybook && yarn build', inDevelopment: true, expected: { framework: '@storybook/ember', From 18f71ddf45a8200e21b65a98396cb76ce83f7322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Wed, 16 Aug 2023 14:35:32 +0200 Subject: [PATCH 21/24] Add ember/default-js to normal tests --- code/lib/cli/src/sandbox-templates.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index bfda21c2308c..cd1298d8a23e 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -610,6 +610,7 @@ export const normal: TemplateKey[] = [ 'bench/react-vite-default-ts-nodocs', 'bench/react-vite-default-ts-test-build', 'bench/react-webpack-18-ts-test-build', + 'ember/default-js', ]; export const merged: TemplateKey[] = [ From 4f416d83243492bec10c14755cafce2d78e06e4e Mon Sep 17 00:00:00 2001 From: gossi Date: Sat, 9 Sep 2023 20:33:16 +0200 Subject: [PATCH 22/24] Additional fixes to ember for sb7 --- code/frameworks/ember/src/index.ts | 2 +- code/frameworks/ember/template/cli/Button.stories.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/frameworks/ember/src/index.ts b/code/frameworks/ember/src/index.ts index fc8faa13668a..30a9049586ce 100644 --- a/code/frameworks/ember/src/index.ts +++ b/code/frameworks/ember/src/index.ts @@ -1,6 +1,6 @@ /// -import './client/preview'; +export * from './types'; // optimization: stop HMR propagation in webpack if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/frameworks/ember/template/cli/Button.stories.js b/code/frameworks/ember/template/cli/Button.stories.js index 3a1bc2f593eb..61de1a4f9cc9 100644 --- a/code/frameworks/ember/template/cli/Button.stories.js +++ b/code/frameworks/ember/template/cli/Button.stories.js @@ -6,13 +6,13 @@ import { linkTo } from '@storybook/addon-links'; export default { title: 'Example/Button', render: (args) => ({ - template: hbs``, + template: hbs``, context: args, }), argTypes: { label: { control: 'text' }, }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/ember/writing-docs/autodocs tags: ['autodocs'], }; @@ -34,7 +34,7 @@ export const Emoji = { export const TextWithAction = { render: () => ({ template: hbs` - `, @@ -51,12 +51,12 @@ export const TextWithAction = { export const ButtonWithLinkToAnotherStory = { render: () => ({ template: hbs` - `, context: { - onClick: linkTo('Configure your project'), + onClick: linkTo('example-button--docs'), }, }), name: 'button with link to another story', From c3d59e543ae8be6e364e26a09eef1aa13e519cea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= Date: Tue, 31 Oct 2023 14:27:09 +0100 Subject: [PATCH 23/24] Update name --- code/lib/cli/src/sandbox-templates.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index cd1298d8a23e..f566609b1b92 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -472,7 +472,7 @@ const baseTemplates = { skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench'], }, 'ember/3-js': { - name: 'Create Ember 3 app (Javascript)', + name: 'Create Ember 3 app (Webpack | Javascript)', script: 'npx --package ember-cli@3.28.1 ember new {{beforeDir}}', inDevelopment: true, expected: { @@ -482,7 +482,7 @@ const baseTemplates = { }, }, 'ember/default-js': { - name: 'Create Ember 4 app (Javascript)', + name: 'Create Ember 4 app (Webpack | Javascript)', script: 'npx --package ember-cli@4.12.1 ember new {{beforeDir}} --yarn && cd {{beforeDir}} && yarn add --dev @storybook/ember-cli-storybook && yarn build', inDevelopment: true, From aac2526a710fddc09e771cf176420354d308d01c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 10 Dec 2023 16:52:15 +0800 Subject: [PATCH 24/24] Fix template formatting --- code/lib/cli/src/sandbox-templates.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index f566609b1b92..ba9a54e6c000 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -472,7 +472,7 @@ const baseTemplates = { skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench'], }, 'ember/3-js': { - name: 'Create Ember 3 app (Webpack | Javascript)', + name: 'Ember v3 (Webpack | JavaScript)', script: 'npx --package ember-cli@3.28.1 ember new {{beforeDir}}', inDevelopment: true, expected: { @@ -482,7 +482,7 @@ const baseTemplates = { }, }, 'ember/default-js': { - name: 'Create Ember 4 app (Webpack | Javascript)', + name: 'Ember v4 (Webpack | JavaScript)', script: 'npx --package ember-cli@4.12.1 ember new {{beforeDir}} --yarn && cd {{beforeDir}} && yarn add --dev @storybook/ember-cli-storybook && yarn build', inDevelopment: true,