Merge branch 'next' into 7101-module-story-format

addons/docs/README.md

@@ -0,0 +1,3 @@
+# Storybook Docs
+
+Living documentation for your components.

addons/docs/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@storybook/addon-docs",
+  "version": "5.2.0-alpha.23",
+  "description": "Superior documentation for your components",
+  "keywords": [
+    "addon",
+    "notes",
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/docs",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/docs"
+  },
+  "license": "MIT",
+  "main": "dist/public_api.js",
+  "types": "dist/public_api.d.ts",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.2.0-alpha.23",
+    "@storybook/api": "5.2.0-alpha.23"
+  },
+  "devDependencies": {
+    "@types/util-deprecate": "^1.0.0",
+    "@types/webpack-env": "^1.13.7"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

addons/docs/register.js

@@ -0,0 +1 @@
+require('./dist/register.js');

addons/docs/src/register.ts

@@ -0,0 +1,12 @@
+import addons, { types } from '@storybook/addons';
+import { ADDON_ID, PANEL_ID } from './shared';
+
+addons.register(ADDON_ID, api => {
+  addons.add(PANEL_ID, {
+    type: types.TAB,
+    title: 'Docs',
+    route: ({ storyId }) => `/docs/${storyId}`,
+    match: ({ viewMode }) => viewMode === 'docs',
+    render: () => null,
+  });
+});

addons/docs/src/shared.ts

@@ -0,0 +1,3 @@
+export const ADDON_ID = 'storybook/docs';
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const PARAM_KEY = `docs`;

addons/docs/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**.test.ts"]
+}

addons/info/src/components/Story.js

@@ -38,7 +38,7 @@ const stylesheetBase = {
     background: 'white',
     top: 0,
     left: 0,
-    height: '110vh',
+    height: '100vh',
     width: '100vw',
     overflow: 'auto',
     zIndex: 99999,

addons/notes/README.md

@@ -102,3 +102,18 @@ When using Markdown, you can also embed gifs from Giphy into your Markdown. Curr
 
 <Giphy gif='cheese' />
 ```
+
+## Multiple Notes Sections
+
+If you need to display different notes for different consumers of your storybook (e.g design, developers), you can configure multiple notes pages. The following will render a tab with unique notes for both `Introduction` and `Design`.
+
+```js
+import { storiesOf } from '@storybook/react';
+import Component from './Component';
+import intro from './intro.md';
+import design from './design.md';
+
+storiesOf('Component', module).add('With Markdown', () => <Component />, {
+  notes: { Introduction: intro, 'Design Notes': design },
+});
+```

addons/notes/src/Panel.tsx

@@ -9,6 +9,8 @@ import {
   Placeholder,
   DocumentFormatting,
   Link,
+  TabWrapper,
+  TabsState,
 } from '@storybook/components';
 import Markdown from 'markdown-to-jsx';
 import Giphy from './giphy';
@@ -31,14 +33,14 @@ interface Props {
   api: API;
 }
 
-function read(param: Parameters | undefined): string | undefined {
+function read(param: Parameters | undefined): Record<string, string> | string | undefined {
   if (!param) {
     return undefined;
   }
   if (typeof param === 'string') {
     return param;
   }
-  if ('disabled' in param) {
+  if ('disable' in param) {
     return undefined;
   }
   if ('text' in param) {
@@ -47,6 +49,9 @@ function read(param: Parameters | undefined): string | undefined {
   if ('markdown' in param) {
     return param.markdown;
   }
+  if (typeof param === 'object') {
+    return param;
+  }
   return undefined;
 }
 
@@ -110,7 +115,10 @@ interface Overrides {
 }
 type Options = typeof defaultOptions & Overrides;
 
-const mapper = ({ state, api }: Combo): { value?: string; options: Options } => {
+const mapper = ({
+  state,
+  api,
+}: Combo): { value?: string | Record<string, string>; options: Options } => {
   const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce(
     (acc, [k, v]) => ({ ...acc, [k]: v.render }),
     {}
@@ -133,29 +141,66 @@ const NotesPanel = ({ active }: Props) => {
 
   return (
     <Consumer filter={mapper}>
-      {({ options, value }: { options: Options; value?: string }) => {
-        return value ? (
-          <Panel className="addon-notes-container">
-            <DocumentFormatting>
-              <Markdown options={options}>{formatter(value)}</Markdown>
-            </DocumentFormatting>
-          </Panel>
-        ) : (
-          <Placeholder>
-            <Fragment>No notes yet</Fragment>
-            <Fragment>
-              Learn how to{' '}
-              <Link
-                href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
-                target="_blank"
-                withArrow
-                secondary
-                cancel={false}
-              >
-                document components in Markdown
-              </Link>
-            </Fragment>
-          </Placeholder>
+      {({ options, value }: { options: Options; value?: string | Record<string, string> }) => {
+        if (!value) {
+          return (
+            <Placeholder>
+              <Fragment>No notes yet</Fragment>
+              <Fragment>
+                Learn how to{' '}
+                <Link
+                  href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
+                  target="_blank"
+                  withArrow
+                  secondary
+                  cancel={false}
+                >
+                  document components in Markdown
+                </Link>
+              </Fragment>
+            </Placeholder>
+          );
+        }
+
+        if (typeof value === 'string' || Object.keys(value).length === 1) {
+          const md = typeof value === 'object' ? Object.values(value)[0] : value;
+
+          return (
+            <Panel className="addon-notes-container">
+              <DocumentFormatting>
+                <Markdown options={options}>{formatter(md)}</Markdown>
+              </DocumentFormatting>
+            </Panel>
+          );
+        }
+
+        const groups: { title: string; render: (props: { active: boolean }) => void }[] = [];
+
+        Object.entries(value).forEach(([title, docs]) => {
+          groups.push({
+            title,
+            render: ({ active: isActive }) => (
+              <TabWrapper key={title} active={isActive}>
+                <Panel>
+                  <DocumentFormatting>
+                    <Markdown options={options}>{formatter(docs)}</Markdown>
+                  </DocumentFormatting>
+                </Panel>
+              </TabWrapper>
+            ),
+          });
+        });
+
+        return (
+          <div className="addon-notes-container">
+            <TabsState>
+              {groups.map(group => (
+                <div id={group.title} key={group.title} title={group.title}>
+                  {group.render}
+                </div>
+              ))}
+            </TabsState>
+          </div>
         );
       }}
     </Consumer>

addons/notes/src/shared.ts

@@ -11,5 +11,11 @@ interface MarkdownParameter {
 interface DisabledParameter {
   disable: boolean;
 }
+type TabsParameter = Record<string, string>;
 
-export type Parameters = string | TextParameter | MarkdownParameter | DisabledParameter;
+export type Parameters =
+  | string
+  | TextParameter
+  | MarkdownParameter
+  | DisabledParameter
+  | TabsParameter;

docs/package.json

@@ -18,7 +18,7 @@
     "@storybook/components": "5.2.0-alpha.23",
     "@storybook/theming": "5.2.0-alpha.23",
     "babel-loader": "^6.4.1",
-    "babel-plugin-styled-components": "^1.10.0",
+    "babel-plugin-styled-components": "^1.10.1",
     "bootstrap": "^4.3.1",
     "common-tags": "^1.8.0",
     "gatsby": "^1.9.279",

docs/src/pages/configurations/custom-webpack-config/index.md

@@ -153,7 +153,7 @@ The webpack config [is configurable](/configurations/custom-webpack-config/), an
   <div></div>
 
 - Create a `.storybook/webpack.config.js` file.
-- Edit it's contents:
+- Edit its contents:
   ```js
   module.exports = async ({ config }) => console.dir(config.plugins, { depth: null }) || config;
   ```

docs/src/pages/presets/preset-gallery/index.md

@@ -11,7 +11,11 @@ Storybook-maintained presets are available in the [Presets repo](https://github.
 
 ### [Typescript](https://github.com/storybookjs/presets/tree/master/packages/preset-typescript)
 
-Write your stories in typescript with a single line of configuration.
+One-line Typescript w/ docgen configuration for storybook.
+
+### [SCSS](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)
+
+One-line SCSS configuration for storybook.
 
 ## Community presets
 

docs/yarn.lock

@@ -1009,15 +1009,15 @@ babel-plugin-macros@^2.0.0:
     cosmiconfig "^5.2.0"
     resolve "^1.10.0"
 
-"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
-  integrity sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==
+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.1.tgz#cc89ac5a13476ce675e13fbe53a826f9bb0ca4cd"
+  integrity sha512-F6R2TnPGNN6iuXCs0xQ+EsrunwNoWI55J5I8Pkd/+fzzbv1I4gFgTaZepMOVpLobYWU2XaLIm+73L0zD3CnOdQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-module-imports" "^7.0.0"
     babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.10"
+    lodash "^4.17.11"
 
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"

examples-native/crna-kitchen-sink/package.json

@@ -37,7 +37,7 @@
     "babel-preset-expo": "^5.1.1",
     "core-js": "^3.0.1",
     "expo-cli": "^2.17.1",
-    "jest-expo": "^32.0.0",
+    "jest-expo": "^33.0.2",
     "react-test-renderer": "16.5.1",
     "schedule": "^0.5.0"
   },

examples/official-storybook/addons.js

@@ -1,5 +1,6 @@
 import '@storybook/addon-storysource/register';
 import '@storybook/addon-design-assets/register';
+import '@storybook/addon-docs/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-events/register';

examples/official-storybook/package.json

@@ -22,6 +22,7 @@
     "@storybook/addon-contexts": "5.2.0-alpha.23",
     "@storybook/addon-cssresources": "5.2.0-alpha.23",
     "@storybook/addon-design-assets": "5.2.0-alpha.23",
+    "@storybook/addon-docs": "5.2.0-alpha.23",
     "@storybook/addon-events": "5.2.0-alpha.23",
     "@storybook/addon-graphql": "5.2.0-alpha.23",
     "@storybook/addon-info": "5.2.0-alpha.23",