Add/app marionette js

README.md

@@ -115,6 +115,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
 | [Vue](app/vue)                   | [v5.1.0](https://storybooks-vue.netlify.com/)     | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue)                            |
 | [Angular](app/angular)           | [v5.1.0](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular)                |
 | [Polymer](app/polymer)           | [v5.1.0](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dm/@storybook/polymer.svg)](app/polymer)                |
+| [Marionette.js](app/marionette)  | -                                                 | [![Mithril](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette)                |
 | [Mithril](app/mithril)           | [v5.1.0](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril)                |
 | [Marko](app/marko)               | [v5.1.0](https://storybooks-marko.netlify.com/)   | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko)                      |
 | [HTML](app/html)                 | [v5.1.0](https://storybooks-html.netlify.com/)    | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html)                         |

app/marionette/README.md

@@ -0,0 +1,25 @@
+# Storybook for Marionette.js 
+
+---
+
+Storybook for Marionette.js is a UI development environment for your Marionette.js components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
+
+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
+cd my-app
+npx -p @storybook/cli sb init
+```
+
+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/marionette/bin/build.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+require('../dist/server/build');

app/marionette/bin/index.js

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

app/marionette/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@storybook/marionette",
+    "version": "5.2.0-rc.4",
+    "description": "Storybook for Marionette: Develop Marionette.js component in isolation with Hot Reloading.",
+    "keywords": [
+        "storybook"
+    ],
+    "homepage": "https://github.com/storybookjs/storybook/tree/master/app/marionette",
+    "bugs": {
+        "url": "https://github.com/storybookjs/storybook/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/storybookjs/storybook.git",
+        "directory": "app/marionette"
+    },
+    "license": "MIT",
+    "main": "dist/client/index.js",
+    "bin": {
+        "build-storybook": "./bin/build.js",
+        "start-storybook": "./bin/index.js",
+        "storybook-server": "./bin/index.js"
+    },
+    "scripts": {
+        "prepare": "node ../../scripts/prepare.js"
+    },
+    "dependencies": {
+        "@storybook/core": "5.2.0-rc.4",
+        "common-tags": "^1.8.0",
+        "core-js": "^3.0.1",
+        "global": "^4.3.2",
+        "html-loader": "^0.5.5",
+        "regenerator-runtime": "^0.12.1"
+    },
+    "devDependencies": {
+        "backbone.marionette": "*"
+    },
+    "peerDependencies": {
+        "babel-loader": "^7.0.0 || ^8.0.0",
+        "backbone.marionette": "*"
+    },
+    "engines": {
+        "node": ">=8.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

app/marionette/src/client/index.js

@@ -0,0 +1,15 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+  raw,
+  load,
+} from './preview';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}

app/marionette/src/client/preview/element_check.js

@@ -0,0 +1,18 @@
+import Marionette from 'backbone.marionette';
+
+const allMarionetteViewConstructors = [
+  'View',
+  'CompositeView',
+  'CollectionView',
+  'NextCollectionView',
+];
+const viewConstructorsSupportedByMarionette = allMarionetteViewConstructors
+  .filter(constructorName => constructorName in Marionette)
+  .map(constructorName => Marionette[constructorName]);
+
+// accepts an element and return true if renderable else return false
+const isMarionetteRenderable = element => {
+  return viewConstructorsSupportedByMarionette.find(Constructor => element instanceof Constructor);
+};
+
+export default isMarionetteRenderable;

app/marionette/src/client/preview/globals.js

@@ -0,0 +1,3 @@
+import { window } from 'global';
+
+window.STORYBOOK_ENV = 'marionette';

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

@@ -0,0 +1,22 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+import render from './render';
+
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+
+export const {
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+  raw,
+} = clientApi;
+
+const framework = 'marionette';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
+export const { configure } = configApi;
+export { forceReRender };

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

@@ -0,0 +1,40 @@
+import { document } from 'global';
+import { stripIndents } from 'common-tags';
+import Marionette from 'backbone.marionette';
+import isMarionetteRenderable from './element_check';
+
+const rootEl = document.getElementById('root');
+const rootRegion = new Marionette.Region({ el: rootEl });
+
+function render(view) {
+  rootRegion.show(view);
+}
+
+export default function renderMain({ storyFn, selectedKind, selectedStory, showMain, showError }) {
+  const element = storyFn();
+
+  if (!element) {
+    showError({
+      title: `Expecting a Marionette View from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Did you forget to return the React element from the story?
+        Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
+      `,
+    });
+    return;
+  }
+
+  if (!isMarionetteRenderable(element)) {
+    showError({
+      title: `Expecting a valid Marionette View from the story: "${selectedStory}" of "${selectedKind}".`,
+      description: stripIndents`
+        Seems like you are not returning a correct Marionette View from the story.
+        Could you double check that?
+      `,
+    });
+    return;
+  }
+
+  render(element);
+  showMain();
+}

app/marionette/src/server/build.js

@@ -0,0 +1,4 @@
+import { buildStatic } from '@storybook/core/server';
+import options from './options';
+
+buildStatic(options);

app/marionette/src/server/framework-preset-marionette.js

@@ -0,0 +1,3 @@
+export function webpack(config) {
+  return config;
+}

app/marionette/src/server/index.js

@@ -0,0 +1,4 @@
+import { buildDev } from '@storybook/core/server';
+import options from './options';
+
+buildDev(options);

app/marionette/src/server/options.js

@@ -0,0 +1,6 @@
+import packageJson from '../../package.json';
+
+export default {
+  packageJson,
+  frameworkPresets: [require.resolve('./framework-preset-marionette.js')],
+};

app/marionette/standalone.js

@@ -0,0 +1,8 @@
+const build = require('@storybook/core/standalone');
+const frameworkOptions = require('./dist/server/options').default;
+
+async function buildStandalone(options) {
+  return build(options, frameworkOptions);
+}
+
+module.exports = buildStandalone;

docs/src/new-components/basics/tooltip/TooltipLinkList.js

@@ -7,7 +7,7 @@ const List = styled.div`
   min-width: 180px;
   overflow: hidden;
   overflow-y: auto;
-  maxHeight: ${10.5 * 32 /* 10.5 items */};
+  maxheight: ${10.5 * 32 /* 10.5 items */};
 `;
 
 function TooltipLinkList({ links, LinkWrapper }) {

lib/cli/generators/MARIONETTE/index.js

@@ -0,0 +1,37 @@
+import fse from 'fs-extra';
+import path from 'path';
+import npmInit from '../../lib/npm_init';
+import {
+  getVersion,
+  getPackageJson,
+  writePackageJson,
+  getBabelDependencies,
+  installDependencies,
+} from '../../lib/helpers';
+
+export default async npmOptions => {
+  const storybookVersion = await getVersion(npmOptions, '@storybook/marionette');
+  fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
+
+  let packageJson = getPackageJson();
+  if (!packageJson) {
+    await npmInit();
+    packageJson = getPackageJson();
+  }
+
+  packageJson.dependencies = packageJson.dependencies || {};
+  packageJson.devDependencies = packageJson.devDependencies || {};
+
+  packageJson.scripts = packageJson.scripts || {};
+  packageJson.scripts.storybook = 'start-storybook -p 6006';
+  packageJson.scripts['build-storybook'] = 'build-storybook';
+
+  writePackageJson(packageJson);
+
+  const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
+
+  installDependencies(npmOptions, [
+    `@storybook/marionette@${storybookVersion}`,
+    ...babelDependencies,
+  ]);
+};

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

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/marionette';
+
+// 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/MARIONETTE/template/stories/index.stories.js

@@ -0,0 +1,20 @@
+import Marionette from 'backbone.marionette';
+
+import { storiesOf } from '@storybook/marionette';
+
+storiesOf('Demo', module).add(
+  'button',
+  () =>
+    new Marionette.View({
+      template: () => '<button id="my_button">some button</button>',
+      ui: {
+        button: '#my_button',
+      },
+      triggers: {
+        'click @ui.button': 'click',
+      },
+      onClick() {
+        console.log('button clicked');
+      },
+    })
+);

lib/cli/lib/detect.js

@@ -89,6 +89,12 @@ function detectFramework(dependencies) {
   ) {
     return types.MITHRIL;
   }
+  if (
+    (dependencies.dependencies && dependencies.dependencies['backbone.marionette']) ||
+    (dependencies.devDependencies && dependencies.devDependencies['backbone.marionette'])
+  ) {
+    return types.MARIONETTE;
+  }
 
   if (
     (dependencies.dependencies && dependencies.dependencies.marko) ||

lib/cli/lib/initiate.js

@@ -23,6 +23,7 @@ import vueGenerator from '../generators/VUE';
 import polymerGenerator from '../generators/POLYMER';
 import webpackReactGenerator from '../generators/WEBPACK_REACT';
 import mithrilGenerator from '../generators/MITHRIL';
+import marionetteGenerator from '../generators/MARIONETTE';
 import markoGenerator from '../generators/MARKO';
 import htmlGenerator from '../generators/HTML';
 import riotGenerator from '../generators/RIOT';
@@ -158,6 +159,11 @@ const installStorybook = (projectType, options) => {
           .then(commandLog('Adding storybook support to your "Mithril" app'))
           .then(end);
 
+      case types.MARIONETTE:
+        return marionetteGenerator(npmOptions)
+          .then(commandLog('Adding storybook support to your "Marionette.js" app'))
+          .then(end);
+
       case types.MARKO:
         return markoGenerator(npmOptions)
           .then(commandLog('Adding storybook support to your "Marko" app'))

lib/cli/lib/project_types.js

@@ -14,6 +14,7 @@ const projectTypes = {
   UPDATE_PACKAGE_ORGANIZATIONS: 'UPDATE_PACKAGE_ORGANIZATIONS',
   POLYMER: 'POLYMER',
   MITHRIL: 'MITHRIL',
+  MARIONETTE: 'MARIONETTE',
   MARKO: 'MARKO',
   HTML: 'HTML',
   RIOT: 'RIOT',
@@ -33,6 +34,7 @@ export const supportedFrameworks = [
   'mithril',
   'riot',
   'ember',
+  'marionette',
   'marko',
   'meteor',
   'preact',

lib/cli/package.json

@@ -63,6 +63,7 @@
     "@storybook/channels": "5.2.0-rc.4",
     "@storybook/ember": "5.2.0-rc.4",
     "@storybook/html": "5.2.0-rc.4",
+    "@storybook/marionette": "file:./../../app/marionette",
     "@storybook/marko": "5.2.0-rc.4",
     "@storybook/mithril": "5.2.0-rc.4",
     "@storybook/polymer": "5.2.0-rc.4",

lib/components/src/tabs/tabs.tsx

@@ -13,7 +13,7 @@ import { Placeholder } from '../placeholder/placeholder';
 import { FlexBar } from '../bar/bar';
 import { TabButton } from '../bar/button';
 
-const ignoreSsrWarning = 
+const ignoreSsrWarning =
   '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
 
 export interface WrapperProps {

lib/components/src/tooltip/ListItem.tsx

@@ -8,9 +8,11 @@ export interface TitleProps {
   loading?: boolean;
   disabled?: boolean;
 }
-const Title = styled(({ active, loading, disabled, ...rest }: TitleProps) => (
-  <span {...rest}></span>
-))<{ active: boolean; loading: boolean; disabled: boolean }>(
+const Title = styled(({ active, loading, disabled, ...rest }: TitleProps) => <span {...rest} />)<{
+  active: boolean;
+  loading: boolean;
+  disabled: boolean;
+}>(
   ({ theme }) => ({
     color: theme.color.defaultText,
     // Previously was theme.typography.weight.normal but this weight does not exists in Theme