add Mithril support in CLI

lib/cli/bin/generate.js

@@ -17,6 +17,7 @@ import updateOrganisationsGenerator from '../generators/UPDATE_PACKAGE_ORGANIZAT
 import vueGenerator from '../generators/VUE';
 import polymerGenerator from '../generators/POLYMER';
 import webpackReactGenerator from '../generators/WEBPACK_REACT';
+import mithrilGenerator from '../generators/MITHRIL';
 
 const logger = console;
 
@@ -157,6 +158,11 @@ const runGenerator = () => {
  .then(commandLog('Adding storybook support to your "Polymer" app'))
  .then(end);
 
+ case types.MITHRIL:
+ return mithrilGenerator()
+ .then(commandLog('Adding storybook support to your "Mithril" app'))
+ .then(end);
+
  default:
  paddedLog(`We couldn't detect your project type. (code: ${projectType})`);
  paddedLog(

lib/cli/generators/MITHRIL/index.js

@@ -0,0 +1,40 @@
+import path from 'path';
+import mergeDirs from 'merge-dirs';
+import { getVersions, getPackageJson, writePackageJson } from '../../lib/helpers';
+
+export default async () => {
+ const [
+ storybookVersion,
+ actionsVersion,
+ linksVersion,
+ addonsVersion,
+ babelCoreVersion,
+ ] = await getVersions(
+ '@storybook/mithril',
+ '@storybook/addon-actions',
+ '@storybook/addon-links',
+ '@storybook/addons',
+ 'babel-core'
+ );
+
+ mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
+
+ const packageJson = getPackageJson();
+
+ packageJson.dependencies = packageJson.dependencies || {};
+ packageJson.devDependencies = packageJson.devDependencies || {};
+ packageJson.devDependencies['@storybook/addon-actions'] = actionsVersion;
+ packageJson.devDependencies['@storybook/addon-links'] = linksVersion;
+ packageJson.devDependencies['@storybook/addons'] = addonsVersion;
+ packageJson.devDependencies['@storybook/mithril'] = storybookVersion;
+
+ if (!packageJson.dependencies['babel-core'] && !packageJson.devDependencies['babel-core']) {
+ packageJson.devDependencies['babel-core'] = babelCoreVersion;
+ }
+
+ packageJson.scripts = packageJson.scripts || {};
+ packageJson.scripts.storybook = 'start-storybook -p 6006';
+ packageJson.scripts['build-storybook'] = 'build-storybook';
+
+ writePackageJson(packageJson);
+};

lib/cli/generators/MITHRIL/template/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

lib/cli/generators/MITHRIL/template/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/mithril';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+ req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

lib/cli/generators/MITHRIL/template/stories/index.stories.js

@@ -0,0 +1,24 @@
+import m from 'mithril';
+
+import { storiesOf } from '@storybook/mithril';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button, Welcome } from '@storybook/mithril/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => ({
+ view: () => m(Welcome, { showApp: linkTo('Button') }),
+}));
+
+storiesOf('Button', module)
+ .add('with text', () => ({
+ view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
+ }))
+ .add('with some emoji', () => ({
+ view: () =>
+ m(
+ Button,
+ { onclick: action('clicked') },
+ m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
+ ),
+ }));

lib/cli/lib/detect.js

@@ -76,6 +76,14 @@ function detectFramework(dependencies) {
  ) {
  return types.POLYMER;
  }
+
+ if (
+ (dependencies.dependencies && dependencies.dependencies.mithril) ||
+ (dependencies.devDependencies && dependencies.devDependencies.mithril)
+ ) {
+ return types.MITHRIL;
+ }
+
  return false;
 }
 
@@ -85,7 +93,7 @@ function isStorybookInstalled(dependencies, force) {
  }
 
  if (!force && dependencies.devDependencies) {
- const supportedFrameworks = ['react', 'react-native', 'vue', 'angular', 'polymer'];
+ const supportedFrameworks = ['react', 'react-native', 'vue', 'angular', 'polymer', 'mithril'];
  if (
  supportedFrameworks.reduce(
  (storybookPresent, framework) =>

lib/cli/lib/project_types.js

@@ -13,4 +13,5 @@ export default {
  ALREADY_HAS_STORYBOOK: 'ALREADY_HAS_STORYBOOK',
  UPDATE_PACKAGE_ORGANIZATIONS: 'UPDATE_PACKAGE_ORGANIZATIONS',
  POLYMER: 'POLYMER',
+ MITHRIL: 'MITHRIL',
 };

lib/cli/package.json

@@ -57,6 +57,7 @@
  "@storybook/channel-postmessage": "3.4.0-rc.3",
  "@storybook/channel-websocket": "3.4.0-rc.3",
  "@storybook/channels": "3.4.0-rc.3",
+ "@storybook/mithril": "3.4.0-rc.3",
  "@storybook/polymer": "3.4.0-rc.3",
  "@storybook/react": "3.4.0-rc.3",
  "@storybook/react-native": "3.4.0-rc.3",

lib/cli/test/fixtures/mithril/package.json

@@ -0,0 +1,14 @@
+{
+ "name": "mithril-fixture",
+ "version": "1.0.0",
+ "main": "index.js",
+ "license": "MIT",
+ "scripts": {
+ "build": "webpack -p dist"
+ },
+ "dependencies": {
+ "mithril": "^1.1.6"
+ },
+ "devDependencies": {
+ }
+}

lib/cli/test/snapshots/mithril/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

lib/cli/test/snapshots/mithril/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/mithril';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+ req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

lib/cli/test/snapshots/mithril/package.json

@@ -0,0 +1,21 @@
+{
+ "name": "mithril-fixture",
+ "version": "1.0.0",
+ "main": "index.js",
+ "license": "MIT",
+ "scripts": {
+ "build": "webpack -p dist",
+ "storybook": "start-storybook -p 6006",
+ "build-storybook": "build-storybook"
+ },
+ "dependencies": {
+ "mithril": "^1.1.6"
+ },
+ "devDependencies": {
+ "@storybook/addon-actions": "^3.4.0-rc.3",
+ "@storybook/addon-links": "^3.4.0-rc.3",
+ "@storybook/addons": "^3.4.0-rc.3",
+ "@storybook/mithril": "3.4.0-rc.3",
+ "babel-core": "^6.26.0"
+ }
+}

lib/cli/test/snapshots/mithril/stories/index.stories.js

@@ -0,0 +1,24 @@
+import m from 'mithril';
+
+import { storiesOf } from '@storybook/mithril';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button, Welcome } from '@storybook/mithril/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => ({
+ view: () => m(Welcome, { showApp: linkTo('Button') }),
+}));
+
+storiesOf('Button', module)
+ .add('with text', () => ({
+ view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
+ }))
+ .add('with some emoji', () => ({
+ view: () =>
+ m(
+ Button,
+ { onclick: action('clicked') },
+ m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
+ ),
+ }));