Storybook for HTML snippets

README.md

@@ -72,8 +72,9 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 -   [React Native](app/react-native)
 -   [Vue](app/vue)
 -   [Angular](app/angular)
--   [Polymer](app/polymer) <sup>release candidate</sup>
+-   [Polymer](app/polymer)
 -   [Mithril](app/mithril) <sup>alpha</sup>
+-   [HTML](app/html) <sup>alpha</sup>
 
 ### Sub Projects
 

app/html/.npmignore

@@ -0,0 +1,3 @@
+docs
+src
+.babelrc

app/html/README.md

@@ -0,0 +1,26 @@
+# Storybook for HTML <sup>alpha</sup>
+
+* * *
+
+Storybook for HTML is a UI development environment for your plain HTML snippets.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/app/html/docs/demo.png)
+
+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
+npm i -g @storybook/cli
+cd my-app
+getstorybook --html
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+* * *
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.

app/html/bin/build.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server/build');

app/html/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');

app/html/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@storybook/html",
+  "version": "4.0.0-alpha.3",
+  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
+  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/html",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/core": "4.0.0-alpha.3",
+    "@storybook/react-dev-utils": "^5.0.0",
+    "airbnb-js-shims": "^1.4.1",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-macros": "^2.2.0",
+    "babel-plugin-transform-regenerator": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-minify": "^0.4.0",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "common-tags": "^1.4.0",
+    "core-js": "^2.5.5",
+    "dotenv-webpack": "^1.5.5",
+    "global": "^4.3.2",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.6.0",
+    "webpack-hot-middleware": "^2.22.1"
+  },
+  "peerDependencies": {
+    "babel-core": "^6.26.0 || ^7.0.0-0",
+    "babel-runtime": ">=6.0.0"
+  },
+  "devDependencies": {
+    "html-loader": "^0.5.5",
+    "markdown-loader": "^2.0.2"
+  }
+}

app/html/src/client/index.js

@@ -0,0 +1,8 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+} from './preview';

app/html/src/client/preview/index.js

@@ -0,0 +1,17 @@
+import { start } from '@storybook/core/client';
+
+import render from './render';
+
+const { clientApi, configApi, forceReRender } = start(render);
+
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
+
+export const { configure } = configApi;
+export { forceReRender };

app/html/src/client/preview/render.js

@@ -0,0 +1,25 @@
+import { document, Node } from 'global';
+import { stripIndents } from 'common-tags';
+
+const rootElement = document.getElementById('root');
+
+export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
+  const component = story();
+
+  if (typeof component === 'string') {
+    rootElement.innerHTML = component;
+  } else if (component instanceof Node) {
+    rootElement.innerHTML = '';
+    rootElement.appendChild(component);
+  } else {
+    showError({
+      message: `Expecting an HTML snippet or DOM node from the story: "${selectedStory}" of "${selectedKind}".`,
+      stack: stripIndents`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `,
+    });
+    return;
+  }
+  showMain();
+}

app/html/src/server/build.js

@@ -0,0 +1,12 @@
+import { buildStatic } from '@storybook/core/server';
+import path from 'path';
+import packageJson from '../../package.json';
+import getBaseConfig from './config/webpack.config.prod';
+import loadConfig from './config';
+
+buildStatic({
+  packageJson,
+  getBaseConfig,
+  loadConfig,
+  defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
+});

app/html/src/server/config.js

@@ -0,0 +1,8 @@
+import { configLoaderCreator } from '@storybook/core/server';
+import defaultConfig from './config/babel';
+
+const configLoader = configLoaderCreator({
+  defaultBabelConfig: defaultConfig,
+});
+
+export default configLoader;

app/html/src/server/config/babel.js

@@ -0,0 +1,28 @@
+module.exports = {
+  // Don't try to find .babelrc because we want to force this configuration.
+  babelrc: false,
+  presets: [
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
+      },
+    ],
+    require.resolve('babel-preset-stage-0'),
+  ],
+  plugins: [
+    require.resolve('babel-plugin-macros'),
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
+};

app/html/src/server/config/babel.prod.js

@@ -0,0 +1,33 @@
+module.exports = {
+  // Don't try to find .babelrc because we want to force this configuration.
+  babelrc: false,
+  presets: [
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: false,
+      },
+    ],
+    require.resolve('babel-preset-stage-0'),
+    [
+      require.resolve('babel-preset-minify'),
+      {
+        mangle: false,
+      },
+    ],
+  ],
+  plugins: [
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
+};

app/html/src/server/config/globals.js

@@ -0,0 +1,4 @@
+import { window } from 'global';
+
+window.STORYBOOK_REACT_CLASSES = {};
+window.STORYBOOK_ENV = 'HTML';

app/html/src/server/config/polyfills.js

@@ -0,0 +1,3 @@
+import 'core-js/es6/symbol';
+import 'core-js/fn/array/iterator';
+import 'airbnb-js-shims';

app/html/src/server/config/utils.js

@@ -0,0 +1,35 @@
+import path from 'path';
+
+export const includePaths = [path.resolve('./')];
+
+export const excludePaths = [path.resolve('node_modules')];
+
+export const nodeModulesPaths = path.resolve('./node_modules');
+
+export const nodePaths = (process.env.NODE_PATH || '')
+  .split(process.platform === 'win32' ? ';' : ':')
+  .filter(Boolean)
+  .map(p => path.resolve('./', p));
+
+// Load environment variables starts with STORYBOOK_ to the client side.
+export function loadEnv(options = {}) {
+  const defaultNodeEnv = options.production ? 'production' : 'development';
+  const env = {
+    NODE_ENV: JSON.stringify(process.env.NODE_ENV || defaultNodeEnv),
+    // This is to support CRA's public folder feature.
+    // In production we set this to dot(.) to allow the browser to access these assests
+    // even when deployed inside a subpath. (like in GitHub pages)
+    // In development this is just empty as we always serves from the root.
+    PUBLIC_URL: JSON.stringify(options.production ? '.' : ''),
+  };
+
+  Object.keys(process.env)
+    .filter(name => /^STORYBOOK_/.test(name))
+    .forEach(name => {
+      env[name] = JSON.stringify(process.env[name]);
+    });
+
+  return {
+    'process.env': env,
+  };
+}

app/html/src/server/config/webpack.config.js

@@ -0,0 +1,109 @@
+import path from 'path';
+import webpack from 'webpack';
+import Dotenv from 'dotenv-webpack';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
+import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
+import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import {
+  managerPath,
+  getPreviewHeadHtml,
+  getManagerHeadHtml,
+  indexHtmlPath,
+  iframeHtmlPath,
+} from '@storybook/core/server';
+
+import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
+import babelLoaderConfig from './babel';
+import { version } from '../../../package.json';
+
+export default function(configDir) {
+  const config = {
+    mode: 'development',
+    devtool: 'cheap-module-source-map',
+    entry: {
+      manager: [require.resolve('./polyfills'), managerPath],
+      preview: [
+        require.resolve('./polyfills'),
+        require.resolve('./globals'),
+        `${require.resolve('webpack-hot-middleware/client')}?reload=true`,
+      ],
+    },
+    output: {
+      path: path.join(__dirname, 'dist'),
+      filename: 'static/[name].bundle.js',
+      publicPath: '/',
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        filename: 'index.html',
+        chunks: ['manager'],
+        chunksSortMode: 'none',
+        data: {
+          managerHead: getManagerHeadHtml(configDir),
+          version,
+        },
+        template: indexHtmlPath,
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'iframe.html',
+        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
+        data: {
+          previewHead: getPreviewHeadHtml(configDir),
+        },
+        template: iframeHtmlPath,
+      }),
+      new InterpolateHtmlPlugin(process.env),
+      new webpack.DefinePlugin(loadEnv()),
+      new webpack.HotModuleReplacementPlugin(),
+      new CaseSensitivePathsPlugin(),
+      new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+      new webpack.ProgressPlugin(),
+      new Dotenv({ silent: true }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          loader: require.resolve('babel-loader'),
+          query: babelLoaderConfig,
+          include: includePaths,
+          exclude: excludePaths,
+        },
+        {
+          test: /\.html$/,
+          use: [
+            {
+              loader: require.resolve('html-loader'),
+            },
+          ],
+        },
+        {
+          test: /\.md$/,
+          use: [
+            {
+              loader: require.resolve('html-loader'),
+            },
+            {
+              loader: require.resolve('markdown-loader'),
+            },
+          ],
+        },
+      ],
+    },
+    resolve: {
+      // Since we ship with json-loader always, it's better to move extensions to here
+      // from the default config.
+      extensions: ['.js', '.json'],
+      // Add support to NODE_PATH. With this we could avoid relative path imports.
+      // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
+      modules: ['node_modules'].concat(nodePaths),
+    },
+    performance: {
+      hints: false,
+    },
+  };
+
+  return config;
+}