Merge branch 'next' into prop-table-default-false

CHANGELOG.md

@@ -1,3 +1,29 @@
+## 6.0.0-alpha.0 (January 21, 2020)
+
+### Features
+
+* Addon-a11y: Support manual run ([#8883](https://github.com/storybookjs/storybook/pull/8883))
+* Addon-cssresources: Disable SyntaxHighlighter for long code ([#9360](https://github.com/storybookjs/storybook/pull/9360))
+* Core: Improve monorepo support ([#8822](https://github.com/storybookjs/storybook/pull/8822))
+
+### Bug Fixes
+
+* Fixed Angular button example story ([#9540](https://github.com/storybookjs/storybook/pull/9540))
+* Core: Fix generated entry to import at top of file ([#9398](https://github.com/storybookjs/storybook/pull/9398))
+* Preact: Fix story function typescript type ([#9123](https://github.com/storybookjs/storybook/pull/9123))
+* UI: Make canvas link a link ([#9257](https://github.com/storybookjs/storybook/pull/9257))
+
+### Maintenance
+
+* Typescript: Migrate ember ([#9020](https://github.com/storybookjs/storybook/pull/9020))
+* Next 6.0.0 ([#9212](https://github.com/storybookjs/storybook/pull/9212))
+* Lock yarn version ([#9138](https://github.com/storybookjs/storybook/pull/9138))
+* REMOVE subscription_store ([#9228](https://github.com/storybookjs/storybook/pull/9228))
+
+### Dependency Upgrades
+
+* Update husky to v4 ([#9509](https://github.com/storybookjs/storybook/pull/9509))
+
 ## 5.3.7 (January 20, 2020)
 
 ### Bug Fixes

README.md

@@ -116,6 +116,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)  | -                                                 | [![Marionette.js](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)                         |

addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -184,4 +184,7 @@ class HighlightToggle extends Component<ToggleProps> {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(HighlightToggle);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(HighlightToggle);

addons/contexts/src/manager/components/ToolBar.test.tsx

@@ -27,10 +27,7 @@ describe('Tests on addon-contexts component: ToolBar', () => {
         icon: 'box' as const,
         nodeId: 'Some Context B',
         options: { cancelable: true, deep: false, disable: false },
-        params: [
-          { name: 'Some Param X', props: {} },
-          { name: 'Some Param Y', props: {} },
-        ],
+        params: [{ name: 'Some Param X', props: {} }, { name: 'Some Param Y', props: {} }],
         title: 'Some Context B',
       },
     ];

addons/contexts/src/manager/components/ToolBarControl.test.tsx

@@ -9,10 +9,7 @@ describe('Tests on addon-contexts component: ToolBarControl', () => {
     icon: 'box' as const,
     nodeId: 'Some Context',
     options: { cancelable: true, deep: false, disable: false },
-    params: [
-      { name: 'A', props: {} },
-      { name: 'B', props: {} },
-    ],
+    params: [{ name: 'A', props: {} }, { name: 'B', props: {} }],
     title: 'Some Context',
     selected: '',
     setSelected: jest.fn,

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.3.7",
+    "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.3.7",
+        "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/polymer/src/client/index.js → app/marionette/src/client/index.js

@@ -7,6 +7,7 @@ export {
   getStorybook,
   forceReRender,
   raw,
+  load,
 } from './preview';
 
 if (module && module.hot && 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/framework-preset-marionette.js

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

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;

app/polymer/package.json

@@ -23,6 +23,7 @@
     "*.d.ts"
   ],
   "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
@@ -32,6 +33,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/addons": "5.3.7",
     "@storybook/core": "5.3.7",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "core-js": "^3.0.1",

app/polymer/src/client/index.ts

@@ -0,0 +1,16 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+  raw,
+} from './preview';
+
+// tsc wants to use NodeModule instead of WebpackModule
+declare const module: any;
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}

app/polymer/src/client/preview/index.js → app/polymer/src/client/preview/index.ts

@@ -15,7 +15,9 @@ export const {
 } = clientApi;
 
 const framework = 'polymer';
-export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const configure = (...args) => coreConfigure(...args, framework);
+
+export const storiesOf = (...args: any[]) =>
+  clientApi.storiesOf(...args).addParameters({ framework });
+export const configure = (...args: any[]) => coreConfigure(...args, framework);
 
 export { forceReRender };

app/polymer/src/client/preview/render.js → app/polymer/src/client/preview/render.ts

@@ -1,6 +1,7 @@
 import { document } from 'global';
 import dedent from 'ts-dedent';
 import { render, TemplateResult } from 'lit-html';
+import { RenderMainArgs } from './types';
 
 const rootElement = document.getElementById('root');
 
@@ -11,7 +12,7 @@ export default function renderMain({
   showMain,
   showError,
   forceRender,
-}) {
+}: RenderMainArgs) {
   const element = storyFn();
 
   if (!element) {

app/polymer/src/client/preview/types.ts

@@ -0,0 +1,28 @@
+import { TemplateResult } from 'lit-html';
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export type StoryFnPolymerReturnType = string | Node | TemplateResult;
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: (...args: any[]) => StoryFnPolymerReturnType;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  showException: (err: Error) => void;
+  forceRender: boolean;
+}

app/polymer/src/server/build.ts

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

app/polymer/src/server/framework-preset-polymer.js → app/polymer/src/server/framework-preset-polymer.ts

@@ -1,6 +1,6 @@
-import { IgnorePlugin } from 'webpack';
+import { Configuration, IgnorePlugin, RuleSetUseItem } from 'webpack';
 
-export function webpack(config) {
+export function webpack(config: Configuration) {
   return {
     ...config,
     module: {
@@ -10,7 +10,7 @@ export function webpack(config) {
         {
           test: /\.html$/,
           use: [
-            ...config.module.rules[0].use,
+            ...(config.module.rules[0].use as RuleSetUseItem[]),
             {
               loader: require.resolve('polymer-webpack-loader'),
               options: { processStyleLinks: true },

app/polymer/src/server/index.ts

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