@storybook/ember 0.0.0-pr-23609-sha-f47ef339

package/README.md

@@ -0,0 +1,53 @@
+# Storybook for Ember
+
+Storybook for Ember is a UI development environment for your Ember components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-ember-app
+npx storybook@latest init
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/docs/ember/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+
+## Docs
+
+- [Basics](https://storybook.js.org/docs/ember/get-started/introduction)
+- [Configurations](https://storybook.js.org/docs/ember/configure/overview)
+- [Addons](https://storybook.js.org/docs/ember/configure/storybook-addons)
+
+## Working with polyfills
+
+If you need to use a polyfill that is already in use in our Ember application,
+you will need to add some options to have Storybook working with them.
+
+In this example we'll use the [named-block-polyfill](https://github.com/ember-polyfills/ember-named-blocks-polyfill).
+This example also assume that you already have the package in your `package.json`.
+
+In your `.storybook/main.js` you can add the following lines:
+
+```javascript
+import namedBlockPolyfill from 'ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin';
+
+export default {
+  framework: {
+    name: '@storybook/ember',
+    options: {
+      polyfills: [namedBlockPolyfill],
+    }
+  },
+  [...]
+};
+```

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

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

package/dist/client/preview/config.js

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

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

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

package/dist/client/preview/globals.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const global_1 = require("@storybook/global");
+global_1.global.STORYBOOK_NAME = process.env.STORYBOOK_NAME;
+global_1.global.STORYBOOK_ENV = 'ember';

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

@@ -0,0 +1,7 @@
+import './globals';
+import type { EmberRenderer } from './types';
+declare const forceReRender: () => void;
+export declare const raw: ((...args: any[]) => never) | (() => import("lib/types/dist").BoundStory<EmberRenderer>[] | undefined);
+export declare const storiesOf: (kind: string, m: any) => import("lib/types/dist").Addon_StoryApi<import("./types").OptionsArgs>;
+export declare const configure: (...args: any[]) => any;
+export { forceReRender };

package/dist/client/preview/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.forceReRender = exports.configure = exports.storiesOf = exports.raw = void 0;
+const preview_api_1 = require("@storybook/preview-api");
+require("./globals");
+const render_1 = require("./render");
+const { configure: coreConfigure, clientApi, forceReRender } = (0, preview_api_1.start)(render_1.renderToCanvas);
+exports.forceReRender = forceReRender;
+exports.raw = clientApi.raw;
+const RENDERER = 'ember';
+const storiesOf = (kind, m) => clientApi.storiesOf(kind, m).addParameters({ renderer: RENDERER });
+exports.storiesOf = storiesOf;
+const configure = (...args) => coreConfigure(RENDERER, ...args);
+exports.configure = configure;

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

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

package/dist/client/preview/render.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToCanvas = void 0;
+const global_1 = require("@storybook/global");
+const ts_dedent_1 = require("ts-dedent");
+// @ts-expect-error (Converted from ts-ignore)
+const component_1 = __importDefault(require("@ember/component")); // eslint-disable-line import/no-unresolved
+const { document } = global_1.global;
+const rootEl = document.getElementById('storybook-root');
+const config = global_1.global.require(`${global_1.global.STORYBOOK_NAME}/config/environment`);
+const app = global_1.global.require(`${global_1.global.STORYBOOK_NAME}/app`).default.create({
+    autoboot: false,
+    rootElement: rootEl,
+    ...config.APP,
+});
+let lastPromise = app.boot();
+let hasRendered = false;
+let isRendering = false;
+function render(options, el) {
+    if (isRendering)
+        return;
+    isRendering = true;
+    const { template, context = {}, element } = options;
+    if (hasRendered) {
+        lastPromise = lastPromise.then((instance) => instance.destroy());
+    }
+    lastPromise = lastPromise
+        .then(() => {
+        const appInstancePrivate = app.buildInstance();
+        return appInstancePrivate.boot().then(() => appInstancePrivate);
+    })
+        .then((instance) => {
+        instance.register('component:story-mode', component_1.default.extend({
+            layout: template || options,
+            ...context,
+        }));
+        const component = instance.lookup('component:story-mode');
+        if (element) {
+            component.appendTo(element);
+            element.appendTo(el);
+        }
+        else {
+            component.appendTo(el);
+        }
+        hasRendered = true;
+        isRendering = false;
+        return instance;
+    });
+}
+function renderToCanvas({ storyFn, kind, name, showMain, showError }, canvasElement) {
+    const element = storyFn();
+    if (!element) {
+        showError({
+            title: `Expecting a Ember element from the story: "${name}" of "${kind}".`,
+            description: (0, ts_dedent_1.dedent) `
+        Did you forget to return the Ember element from the story?
+        Use "() => hbs('{{component}}')" or "() => { return {
+          template: hbs\`{{component}}\`
+        } }" when defining the story.
+      `,
+        });
+        return;
+    }
+    showMain();
+    render(element, canvasElement);
+}
+exports.renderToCanvas = renderToCanvas;

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

@@ -0,0 +1,19 @@
+import type { WebRenderer } from '@storybook/types';
+export type { RenderContext } from '@storybook/types';
+export interface ShowErrorArgs {
+    title: string;
+    description: string;
+}
+export interface OptionsArgs {
+    template: any;
+    context: any;
+    element: any;
+}
+/**
+ * @deprecated Use `EmberRenderer` instead.
+ */
+export type EmberFramework = EmberRenderer;
+export interface EmberRenderer extends WebRenderer {
+    component: any;
+    storyResult: OptionsArgs;
+}

package/dist/client/preview/types.js

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

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { storiesOf, configure, forceReRender, raw } from './client/preview';

package/dist/index.js

@@ -0,0 +1,12 @@
+"use strict";
+/// <reference types="webpack-env" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.raw = exports.forceReRender = exports.configure = exports.storiesOf = void 0;
+var preview_1 = require("./client/preview");
+Object.defineProperty(exports, "storiesOf", { enumerable: true, get: function () { return preview_1.storiesOf; } });
+Object.defineProperty(exports, "configure", { enumerable: true, get: function () { return preview_1.configure; } });
+Object.defineProperty(exports, "forceReRender", { enumerable: true, get: function () { return preview_1.forceReRender; } });
+Object.defineProperty(exports, "raw", { enumerable: true, get: function () { return preview_1.raw; } });
+// optimization: stop HMR propagation in webpack
+if (typeof module !== 'undefined')
+    module?.hot?.decline();

package/dist/index.mjs

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

package/dist/preset.d.ts

@@ -0,0 +1,4 @@
+import type { PresetProperty } from '@storybook/types';
+import type { StorybookConfig } from './types';
+export declare const addons: PresetProperty<'addons', StorybookConfig>;
+export declare const core: PresetProperty<'core', StorybookConfig>;

package/dist/preset.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.core = exports.addons = void 0;
+const path_1 = require("path");
+const getAbsolutePath = (input) => (0, path_1.dirname)(require.resolve((0, path_1.join)(input, 'package.json')));
+exports.addons = [
+    require.resolve('./server/framework-preset-babel-ember'),
+    require.resolve('./server/framework-preset-ember-docs'),
+];
+const core = async (config, options) => {
+    const framework = await options.presets.apply('framework');
+    return {
+        ...config,
+        builder: {
+            name: getAbsolutePath('@storybook/builder-webpack5'),
+            options: typeof framework === 'string' ? {} : framework.options.builder || {},
+        },
+    };
+};
+exports.core = core;

package/dist/preset.mjs

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

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

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

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.previewAnnotations = exports.babel = void 0;
+const ember_template_compiler_1 = require("ember-source/dist/ember-template-compiler");
+const core_common_1 = require("@storybook/core-common");
+let emberOptions;
+function precompileWithPlugins(string, options) {
+    const precompileOptions = options;
+    if (emberOptions && emberOptions.polyfills) {
+        precompileOptions.plugins = { ast: emberOptions.polyfills };
+    }
+    return (0, ember_template_compiler_1.precompile)(string, precompileOptions);
+}
+function babel(config, options) {
+    if (options && options.presetsList) {
+        options.presetsList.forEach((e, index) => {
+            if (e.preset && e.preset.emberOptions) {
+                emberOptions = e.preset.emberOptions;
+                if (options.presetsList) {
+                    // eslint-disable-next-line no-param-reassign
+                    delete options.presetsList[index].preset.emberOptions;
+                }
+            }
+        });
+    }
+    const babelConfigPlugins = config.plugins || [];
+    const extraPlugins = [
+        [
+            require.resolve('babel-plugin-htmlbars-inline-precompile'),
+            {
+                precompile: precompileWithPlugins,
+                modules: {
+                    'ember-cli-htmlbars': 'hbs',
+                    'ember-cli-htmlbars-inline-precompile': 'default',
+                    'htmlbars-inline-precompile': 'default',
+                },
+            },
+        ],
+        [require.resolve('babel-plugin-ember-modules-api-polyfill')],
+    ];
+    return {
+        ...config,
+        plugins: [...babelConfigPlugins, ...extraPlugins],
+    };
+}
+exports.babel = babel;
+const previewAnnotations = (entry = []) => {
+    return [...entry, (0, core_common_1.findDistEsm)(__dirname, 'client/preview/config')];
+};
+exports.previewAnnotations = previewAnnotations;

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

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

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

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

package/dist/types.d.ts

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

package/dist/types.js

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

package/dist/types.mjs

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

package/jest.config.js

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

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@storybook/ember",
+  "version": "0.0.0-pr-23609-sha-f47ef339",
+  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/ember"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "../../../scripts/prepare/check.ts",
+    "prep": "../../../scripts/prepare/tsc.ts"
+  },
+  "dependencies": {
+    "@storybook/builder-webpack5": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/core-common": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/docs-tools": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/global": "^5.0.0",
+    "@storybook/preview-api": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/types": "0.0.0-pr-23609-sha-f47ef339",
+    "ts-dedent": "^2.0.0"
+  },
+  "devDependencies": {
+    "ember-source": "~3.28.1",
+    "typescript": "~4.9.3"
+  },
+  "peerDependencies": {
+    "@babel/core": "*",
+    "@types/ember__component": "4.0.8",
+    "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
+    "babel-plugin-htmlbars-inline-precompile": "2 || 3",
+    "ember-source": "~3.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"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {},
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+}

package/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

package/src/client/docs/config.js

@@ -0,0 +1,12 @@
+import { enhanceArgTypes } from '@storybook/docs-tools';
+import { extractArgTypes, extractComponentDescription } from './jsondoc';
+
+export const parameters = {
+  docs: {
+    story: { iframeHeight: '80px' },
+    extractArgTypes,
+    extractComponentDescription,
+  },
+};
+
+export const argTypesEnhancers = [enhanceArgTypes];

package/src/client/docs/index.js

@@ -0,0 +1 @@
+export { setJSONDoc } from './jsondoc';

package/src/client/docs/jsondoc.js

@@ -0,0 +1,50 @@
+/* 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;
+};

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

@@ -0,0 +1,9 @@
+import { extractArgTypes, extractComponentDescription } from './jsondoc';
+
+export const parameters = {
+  docs: {
+    story: { iframeHeight: '80px' },
+    extractArgTypes,
+    extractComponentDescription,
+  },
+};

package/src/client/preview/docs/index.js

@@ -0,0 +1 @@
+export { setJSONDoc } from './jsondoc';

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

@@ -0,0 +1,50 @@
+/* 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;
+};

package/src/typings.d.ts

@@ -0,0 +1,4 @@
+declare module 'ember-source/dist/ember-template-compiler';
+
+declare var STORYBOOK_ENV: 'ember';
+declare var STORYBOOK_NAME: any;

package/template/cli/Button.stories.js

@@ -0,0 +1,62 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+// More on how to set up stories at: https://storybook.js.org/docs/ember/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  render: (args) => ({
+    template: hbs`<button {{action onClick}}>{{label}}</button>`,
+    context: args,
+  }),
+  argTypes: {
+    label: { control: 'text' },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/ember/writing-stories/args
+export const Text = {
+  args: {
+    label: 'Button',
+    onClick: action('onClick'),
+  },
+};
+
+export const Emoji = {
+  args: {
+    label: '😀 😎 👍 💯',
+  },
+};
+
+export const TextWithAction = {
+  render: () => ({
+    template: hbs`
+    <button {{action onClick}}>
+      Trigger Action
+    </button>
+  `,
+    context: {
+      onClick: () => action('This was clicked')(),
+    },
+  }),
+  name: 'With an action',
+  parameters: {
+    notes: 'My notes on a button with emojis',
+  },
+};
+
+export const ButtonWithLinkToAnotherStory = {
+  render: () => ({
+    template: hbs`
+    <button {{action onClick}}>
+      Go to Welcome Story
+    </button>
+  `,
+    context: {
+      onClick: linkTo('example-introduction--page'),
+    },
+  }),
+  name: 'button with link to another story',
+};