Merge remote-tracking branch 'origin/next' into next

# Conflicts:
#	.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt

.eslintignore

@@ -9,6 +9,7 @@ built-storybooks
 lib/cli/test
 *.bundle.js
 *.js.map
+*.ts
 
 !.remarkrc.js
 !.babelrc.js

.eslintrc.js

@@ -78,7 +78,7 @@ module.exports = {
  'react/jsx-filename-extension': [
  warn,
  {
- extensions: ['.js', '.jsx'],
+ extensions: ['.js', '.jsx', '.tsx'],
  },
  ],
  'react/jsx-no-bind': [

addons/notes/package.json

@@ -16,17 +16,22 @@
  "url": "https://github.com/storybooks/storybook.git"
  },
  "license": "MIT",
- "main": "dist/index.js",
- "jsnext:main": "src/index.js",
+ "main": "dist/public_api.js",
+ "types": "dist/public_api.d.ts",
+ "jsnext:main": "src/public_api.ts",
  "scripts": {
  "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
  "@emotion/styled": "^0.10.6",
  "@storybook/addons": "4.1.0-alpha.11",
- "marked": "^0.5.1",
+ "marked": "^0.5.2",
  "prop-types": "^15.6.2"
  },
+ "devDependencies": {
+ "@types/marked": "^0.5.0",
+ "@types/prop-types": "^15.5.7"
+ },
  "peerDependencies": {
  "react": "*"
  },

addons/notes/src/index.js → addons/notes/src/index.ts

@@ -1,22 +1,25 @@
 import addons, { makeDecorator } from '@storybook/addons';
-import marked from 'marked';
-
-function renderMarkdown(text, options) {
- return marked(text, { ...marked.defaults, ...options });
-}
+import { parse as renderMarkdown } from 'marked';
 
+// todo resolve any after @storybook/addons and @storybook/channels are migrated to TypeScript
 export const withNotes = makeDecorator({
  name: 'withNotes',
  parameterName: 'notes',
  skipIfNoParametersOrOptions: true,
  allowDeprecatedUsage: true,
- wrapper: (getStory, context, { options, parameters }) => {
+ wrapper: (getStory: (context: any) => any, context: any, { options, parameters }: any) => {
  const channel = addons.getChannel();
 
  const storyOptions = parameters || options;
 
  const { text, markdown, markdownOptions } =
- typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
+ typeof storyOptions === 'string'
+ ? {
+ text: storyOptions,
+ markdown: undefined,
+ markdownOptions: undefined,
+ }
+ : storyOptions;
 
  if (!text && !markdown) {
  throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter');
@@ -28,7 +31,7 @@ export const withNotes = makeDecorator({
  },
 });
 
-export const withMarkdownNotes = (text, options) =>
+export const withMarkdownNotes = (text: string, options: any) =>
  withNotes({
  markdown: text,
  markdownOptions: options,

addons/notes/src/public_api.ts

@@ -0,0 +1 @@
+export * from '.';

addons/notes/src/register.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import addons from '@storybook/addons';
+import * as PropTypes from 'prop-types';
+
+import styled from '@emotion/styled';
+
+// todo this is going to be refactored after the migration of @storybook/channel to TypeScript
+interface NotesChannel {
+ emit: any;
+ on(listener: string, callback: (text: string) => void): any;
+ removeListener(listener: string, callback: (text: string) => void): void;
+}
+
+interface NotesApi {
+ setQueryParams: any; // todo check correct definition
+ getQueryParam(queryParamName: string): any;
+
+ onStory(callback: () => void): () => void;
+}
+
+interface NotesProps {
+ active: boolean;
+ channel: NotesChannel;
+ api: NotesApi;
+}
+
+interface NotesState {
+ text: string;
+}
+
+const Panel = styled.div({
+ padding: 10,
+ boxSizing: 'border-box',
+ width: '100%',
+});
+
+export class Notes extends React.Component<NotesProps, NotesState> {
+
+ static propTypes = {
+ active: PropTypes.bool.isRequired,
+ channel: PropTypes.shape({
+ on: PropTypes.func,
+ emit: PropTypes.func,
+ removeListener: PropTypes.func,
+ }).isRequired,
+ api: PropTypes.shape({
+ onStory: PropTypes.func,
+ getQueryParam: PropTypes.func,
+ setQueryParams: PropTypes.func,
+ }).isRequired,
+ };
+
+ stopListeningOnStory: () => void;
+ isUnmounted = false;
+
+ readonly state: NotesState = { text: '' };
+
+ constructor(props: NotesProps) {
+ super(props);
+ this.onAddNotes = this.onAddNotes.bind(this);
+ }
+
+ componentDidMount() {
+ const { channel, api } = this.props;
+ // Listen to the notes and render it.
+ channel.on('storybook/notes/add_notes', this.onAddNotes);
+
+ // Clear the current notes on every story change.
+ this.stopListeningOnStory = api.onStory(() => {
+ this.onAddNotes('');
+ });
+ }
+
+ // This is some cleanup tasks when the Notes panel is unmounting.
+ componentWillUnmount() {
+ if (this.stopListeningOnStory) {
+ this.stopListeningOnStory();
+ }
+
+ this.isUnmounted = true;
+ const { channel } = this.props;
+ channel.removeListener('storybook/notes/add_notes', this.onAddNotes);
+ }
+
+ onAddNotes(text: string) {
+ this.setState({ text });
+ }
+
+ render() {
+ const { active } = this.props;
+ const { text } = this.state;
+ const textAfterFormatted = text
+ ? text
+ .trim()
+ .replace(/(<\S+.*>)\n/g, '$1')
+ .replace(/\n/g, '<br />')
+ : '';
+
+ return active ? (
+ <Panel
+ className="addon-notes-container"
+ dangerouslySetInnerHTML={{ __html: textAfterFormatted }}
+ />
+ ) : null;
+ }
+}
+
+addons.register('storybook/notes', (api: any) => {
+ const channel = addons.getChannel();
+ addons.addPanel('storybook/notes/panel', {
+ title: 'Notes',
+ render: ({ active }: { active: boolean }) => <Notes channel={channel} api={api} active={active}/>,
+ });
+});

addons/notes/src/typings.d.ts

@@ -0,0 +1,5 @@
+// Fixes 'noImplicitAny' lint error because @storybook/addons isn't migrated to typescript yet
+declare module '@storybook/addons';
+
+// Only necessary for 0.x.x. Version 10.x.x has definition files included
+declare module '@emotion/styled';

addons/notes/tsconfig.json

@@ -0,0 +1,13 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "rootDir": "./src"
+ },
+ "include": [
+ "src/**/*.ts",
+ "src/**/*.tsx"
+ ],
+ "exclude": [
+ "src/__tests__/**/*"
+ ]
+}

package.json

@@ -59,6 +59,9 @@
  "@babel/preset-flow": "^7.0.0",
  "@babel/preset-react": "^7.0.0",
  "@emotion/snapshot-serializer": "^0.8.2",
+ "@types/jest": "^23.3.9",
+ "@types/node": "^10.12.5",
+ "@types/react": "^16.7.3",
  "babel-core": "^7.0.0-bridge.0",
  "babel-eslint": "^10.0.1",
  "babel-jest": "^23.6.0",

tsconfig.json

@@ -1,11 +1,19 @@
 {
  "compileOnSave": false,
  "compilerOptions": {
+ "baseUrl": ".",
+ "declaration": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "skipLibCheck": true,
  "noImplicitAny": true,
+ "jsx": "react",
+ "module": "commonjs",
  "target": "es5",
+ "types": [
+ "node",
+ "jest"
+ ],
  "lib": [
  "es2016",
  "dom"

tslint.json

@@ -97,7 +97,8 @@
  "prefer-const": true,
  "quotemark": [
  true,
- "single"
+ "single",
+ "jsx-double"
  ],
  "radix": true,
  "semicolon": [