Ember: Add docs preset to framework

addons/docs/ember/index.js

@@ -1 +1,6 @@
-module.exports = require('../dist/esm/frameworks/ember');
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setJSONDoc = (jsondoc) => {
+  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+};

app/ember/package.json

@@ -42,9 +42,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@ember/test-helpers": "^2.1.4",
     "@storybook/core": "6.5.0-alpha.47",
     "@storybook/core-common": "6.5.0-alpha.47",
+    "@storybook/docs-tools": "6.5.0-alpha.47",
     "@storybook/store": "6.5.0-alpha.47",
     "core-js": "^3.8.2",
     "global": "^4.4.0",

app/ember/src/client/docs/config.js

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

app/ember/src/client/preview/docs/index.js

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

app/ember/src/client/preview/docs/jsondoc.js

@@ -0,0 +1,50 @@
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setJSONDoc = (jsondoc) => {
+  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+};
+export const getJSONDoc = () => {
+  return window.__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;
+};

app/ember/src/server/framework-preset-ember-docs.ts

@@ -0,0 +1,6 @@
+import type { StorybookConfig } from '@storybook/core-common';
+import { findDistEsm } from '@storybook/core-common';
+
+export const config: StorybookConfig['config'] = (entry = []) => {
+  return [...entry, findDistEsm(__dirname, 'client/docs/config')];
+};

app/ember/src/server/options.ts

@@ -4,5 +4,8 @@ import type { LoadOptions } from '@storybook/core-common';
 export default {
   packageJson: sync({ cwd: __dirname }).packageJson,
   framework: 'ember',
-  frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
+  frameworkPresets: [
+    require.resolve('./framework-preset-babel-ember.js'),
+    require.resolve('./framework-preset-ember-docs.js'),
+  ],
 } as LoadOptions;