Merge pull request #26 from mediamonks/feature/storybook-2

Add Storybook and other updates

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
       {
         js: 'never',
         ts: 'never',
+        hbs: 'never',
       },
     ],
     // allow debugger during development

.gitignore

@@ -59,4 +59,3 @@ node_modules/
 ### Project
 
 /dist/
-bundlesize-profile.*

README.md

@@ -97,10 +97,9 @@ yarn build html      # or yarn compile:html
 * `src/app/bundle.js` Webpack entry that will include all js and css files referenced from all
   template files.
 * `src/app/polyfills.js` List of polyfills to include in the bundles.
-* `src/app/component/layout/index/index.hbs` Template file to list all the pages, used during
-  development.
+* `src/app/component/layout/index/index.hbs` Template file to list all the pages.
 * `src/app/component/layout/app/app.hbs` Template file that is used for all pages, contains basic
-  page layout.
+  page layout (e.g. header, footer and wrapper).
 * `src/app/component/` Contains all components, each folder is made up of:
   * `component-name.hbs` The template file, can import a stylesheet using the html `link` tag, and a
     script using the html `script` tag.
@@ -110,7 +109,7 @@ yarn build html      # or yarn compile:html
     DOM attribute.
 * `src/app/component/blocks/` Contains all _block_ components. They are dynamically rendered based
   on the blocks entry in the json data file.
-* `src/app/util/components.ts` Helper function for registering, updating and initializing
+* `src/app/muban/componentUtils.ts` Helper function for registering, updating and initializing
   components.
 * `src/app/style` Folder containing global styles. All components will include their own stylesheet.
 * `src/app/style/main.scss` Main stylesheet file, only for setting up global styles.
@@ -121,3 +120,12 @@ yarn build html      # or yarn compile:html
 * `.modernizrrc` config file for Modernizrrc used by `modernizr-loader`, config rules can
   be found [here](https://github.com/Modernizr/Modernizr/blob/master/lib/config-all.json).
 * `template/*` Template files for seng-generator, for creating pages, blocks and components.
+
+## Storybook
+
+Storybook is a web-app that lets you preview and interact with the components in your project.
+You can create presets that render your component with custom HTML, and pass different properties
+by providing a json object.
+
+Please read the
+[extended documentation](docs/storybook.md) for more information.

build-tools/config/index.js

@@ -56,6 +56,19 @@ module.exports = {
     enableTSLintLoader: false,
     enableStyleLintPlugin: false,
   },
+  storybook: {
+    env: {
+      NODE_ENV: JSON.stringify('development'),
+    },
+    port: 9002,
+    publicPath: '/',
+    staticPath: path.join(projectRoot, 'src/storybook/static'),
+    buildPath: path.join(distPath, 'storybook'),
+    // enables specific linters during webpack compilation, which will error your compile
+    enableESLintLoader: false,
+    enableTSLintLoader: false,
+    enableStyleLintPlugin: false,
+  },
   distPath,
   buildPath: path.join(distPath, 'site'),
   // enable for local HTTPS dev-server

build-tools/config/storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from 'storybook/utils/utils';
+
+const context = require.context('app/component/', true, /preset\.js$/);
+
+function loadStories() {
+  context.keys().forEach(context);
+}
+
+configure(loadStories);

build-tools/config/storybook/webpack.config.base.js

@@ -0,0 +1,67 @@
+/**
+ * Webpack config used during development
+ */
+const path = require('path');
+const merge = require('webpack-merge');
+const config = require('../index');
+
+const {
+  getBabelLoaderConfig,
+  getHbsInlineLoaderConfig,
+  getESLintLoader,
+  getTSLintLoader,
+  getStyleLintPlugin,
+} = require('../webpack/webpack-helpers');
+
+const projectRoot = path.resolve(__dirname, '../../../');
+const port = process.env.PORT || config.storybook.port;
+
+module.exports = merge(require('../webpack/webpack.config.base'), {
+  entry: {
+    storybook: [
+      './src/app/polyfills.js',
+      './src/storybook/storybook.js',
+      './build-tools/config/storybook/config.js',
+    ],
+    story: [
+      './src/app/polyfills.js',
+      './src/storybook/story.js',
+      './build-tools/config/storybook/config.js',
+    ],
+  },
+  output: {
+    path: config.storybook.buildPath,
+    publicPath: config.storybook.publicPath,
+  },
+  resolve: {
+    extensions: ['.hbs', '.ts', '.js', '.json'],
+  },
+  module: {
+    rules: [
+      {
+        test: /preset\.js$/,
+        include: [
+          /src[\/\\]app/,
+        ],
+        use: [
+          {
+            loader :'preset-loader',
+            options: {},
+          },
+          getHbsInlineLoaderConfig(),
+          getBabelLoaderConfig(),
+        ]
+      },
+      getESLintLoader(config.storybook.enableESLintLoader),
+      getTSLintLoader(config.storybook.enableTSLintLoader),
+      {
+        test: /\.js$/,
+        enforce: 'pre',
+        loader: 'source-map-loader'
+      },
+    ]
+  },
+  plugins: [
+    getStyleLintPlugin(config.storybook.enableStyleLintPlugin),
+  ].filter(_ => _),
+});

build-tools/config/storybook/webpack.config.dist.js

@@ -0,0 +1,78 @@
+/**
+ * Webpack config used during development
+ */
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ImageminPlugin = require('imagemin-webpack-plugin').default;
+const imageminMozjpeg = require('imagemin-mozjpeg');
+
+const config = require('../index');
+
+const {
+  getStyleRules,
+  getCodeRules,
+  getHandlebarsRules,
+} = require('../webpack/webpack-helpers');
+
+const projectRoot = path.resolve(__dirname, '../../../');
+const port = process.env.PORT || config.storybook.port;
+
+module.exports = merge(require('./webpack.config.base'), {
+  output: {
+    path: config.storybook.buildPath,
+    publicPath: config.storybook.publicPath,
+  },
+  module: {
+    rules: [
+      ...getHandlebarsRules({ development: true }),
+      ...getCodeRules(),
+      ...getStyleRules({ development: false }),
+    ]
+  },
+  plugins: [
+    // enable HMR globally
+    new webpack.HotModuleReplacementPlugin(),
+
+    new webpack.DefinePlugin({
+      'process.env': config.dist.env,
+    }),
+
+    new CopyWebpackPlugin([
+      {
+        // copy files to public root (not versioned)
+        context: config.dist.staticPath,
+        from: '**/*',
+        to: config.storybook.buildPath,
+      },
+      {
+        // copy files to public root (not versioned)
+        context: config.storybook.staticPath,
+        from: '**/*',
+        to: config.storybook.buildPath,
+      },
+    ]),
+
+    new ExtractTextPlugin({
+      filename: 'asset/[name].css',
+      allChunks : true,
+    }),
+
+    new ImageminPlugin({
+      disable: !config.dist.enableImageOptimization,
+      svgo: null,
+      gifsicle: null,
+      jpegtran: null,
+      optipng: !config.dist.enablePNGQuant ? { optimizationLevel: 3 } : null,
+      pngquant: config.dist.enablePNGQuant ? { quality: '65' } : null,
+      plugins: [
+        imageminMozjpeg({
+          quality: 85,
+          progressive: true
+        })
+      ],
+    }),
+  ].filter(_ => _),
+});

build-tools/config/storybook/webpack.config.js

@@ -0,0 +1,72 @@
+/**
+ * Webpack config used during development
+ */
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const config = require('../index');
+
+const {
+  getStyleRules,
+  getCodeRules,
+  getHandlebarsRules,
+} = require('../webpack/webpack-helpers');
+
+const projectRoot = path.resolve(__dirname, '../../../');
+const port = process.env.PORT || config.storybook.port;
+
+module.exports = merge(require('./webpack.config.base'), {
+  output: {
+    path: config.storybook.buildPath,
+    publicPath: config.storybook.publicPath,
+  },
+  plugins: [
+    // enable HMR globally
+    new webpack.HotModuleReplacementPlugin(),
+
+    new webpack.DefinePlugin({
+      'process.env': config.dist.env,
+    }),
+  ].filter(_ => _),
+  module: {
+    rules: [
+      ...getHandlebarsRules({ development: true }),
+      ...getCodeRules(),
+      ...getStyleRules({ development: true }),
+    ]
+  },
+  devServer: {
+    hotOnly: true,
+    publicPath: config.storybook.publicPath,
+    contentBase: config.storybook.staticPath,
+    compress: true,
+    host: '0.0.0.0',
+    port,
+    disableHostCheck: true,
+    overlay: true,
+    noInfo: true,
+    before(app) {
+      // render basic default index.html for all html files (path will be picked by JS)
+      app.use((req, res, next) => {
+        if (req.path.includes('storybook.html')) {
+          res.send(fs.readFileSync(path.resolve(projectRoot, 'src/storybook/storybook.html'), 'utf-8'));
+        } else if (req.path.includes('story.html')) {
+          res.send(fs.readFileSync(path.resolve(projectRoot, 'src/storybook/story.html'), 'utf-8'));
+        } else {
+          next();
+        }
+      });
+
+      // also render index.html on /
+      app.get('/', function(req, res) {
+        res.send(fs.readFileSync(path.resolve(projectRoot, 'src/storybook/storybook.html'), 'utf-8'));
+      });
+    },
+    https: (config.useHttps ? {
+      key: fs.readFileSync(path.resolve(projectRoot, 'build-tools/ssl/key.pem')),
+      cert: fs.readFileSync(path.resolve(projectRoot, 'build-tools/ssl/cert.pem')),
+    } : false),
+  },
+  devtool: 'eval-source-map'
+});