Storybook setup

packages/structure-core/.gitignore

@@ -3,6 +3,7 @@
 # compiled output
 /dist/
 /tmp/
+/.storybook/preview-head.html
 
 # dependencies
 /bower_components/

packages/structure-core/.storybook/babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        shippedProposals: true,
+        useBuiltIns: 'usage',
+        corejs: '3',
+        targets: ['last 1 Chrome versions', 'last 1 Firefox versions', 'last 1 Safari versions'],
+      },
+    ],
+  ],
+};
+

packages/structure-core/.storybook/main.js

@@ -0,0 +1,6 @@
+module.exports = {
+  addons: [
+    '@storybook/addon-docs',
+	],
+  stories: ['../stories/**/*.stories.(js|mdx)'],
+};

packages/structure-core/.storybook/preview.js

@@ -0,0 +1,4 @@
+import { setJSONDoc } from '@storybook/addon-docs/ember';
+import json from '../dist/storybook-docgen/index.json';
+
+setJSONDoc(json);

packages/structure-core/blueprints/st-component/files/stories/__name__.stories.js

@@ -0,0 +1,14 @@
+import hbs from 'htmlbars-inline-precompile';
+
+export default {
+  title: 'Structure | <%= angleBracketInvocation %>',
+  component: '<%= classifiedModuleName %>',
+};
+
+// add stories by adding more exported functions
+export let <%= classifiedModuleName %> = () => ({
+  template: hbs`<<%= angleBracketInvocation %> />`,
+  context: {
+    // add items to the component rendering context here
+  }
+});

packages/structure-core/ember-cli-build.js

@@ -4,6 +4,9 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   let app = new EmberAddon(defaults, {
+    'ember-cli-storybook': {
+      enableAddonDocsIntegration: true,
+    }
     // Add options here
   });
 

packages/structure-core/node-tests/blueprints/st-component-test.js

@@ -37,6 +37,14 @@ let expectedTestBlockRenderInvocation = `
       </St::Foo>
     \`)`;
 
+let expectedStoryDefaultExport =`export default {
+  title: 'Structure | St::Foo',
+  component: 'StFoo',
+};`
+
+let expectedStoryExport = `export let StFoo = () => ({
+  template: hbs\`<St::Foo />\`,`;
+
 let td = require('testdouble');
 td.config({ promiseConstructor: require('rsvp').Promise });
 
@@ -124,4 +132,19 @@ describe('Acceptance: ember generate and destroy st-component', function() {
     });
   });
 
+  it(`generates a story file for 'foo'`, function() {
+    return test('foo', file => {
+      expect(file('stories/st/foo.stories.js'))
+        .to.contain(expectedStoryDefaultExport)
+        .to.contain(expectedStoryExport);
+    });
+  });
+
+  it(`generates a story file for 'st/foo'`, function() {
+    return test('st/foo', file => {
+      expect(file('stories/st/foo.stories.js'))
+        .to.contain(expectedStoryDefaultExport)
+        .to.contain(expectedStoryExport);
+    });
+  });
 });

packages/structure-core/package.json

@@ -19,15 +19,23 @@
     "start": "ember serve",
     "test": "ember test",
     "test:all": "ember try:each",
-    "nodetest": "mocha node-tests --recursive"
+    "nodetest": "mocha node-tests --recursive",
+    "storybook": "start-storybook -p 6006 -s dist",
+    "storybook:build": "build-storybook",
+    "storybook:docs-deploy": "yarn build -prod && build-storybook --docs"
   },
   "dependencies": {
     "ember-cli-babel": "^7.11.1",
     "ember-cli-htmlbars": "^4.0.5"
   },
   "devDependencies": {
+    "@babel/core": "^7.7.7",
     "@ember/optional-features": "^1.0.0",
+    "@storybook/addon-docs": "^5.3.0-rc.7",
+    "@storybook/ember": "^5.3.0-rc.7",
+    "@storybook/ember-cli-storybook": "^0.2.0",
     "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.0-beta.6",
     "broccoli-asset-rev": "^3.0.0",
     "chalk": "^3.0.0",
     "ember-auto-import": "^1.5.2",

packages/structure-core/stories/1-welcome.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Welcome" />
+
+# HashiCorp Structure
+[Code home](https://github.com/hashicorp/structure)