@storybook/addon-ondevice-notes 6.0.1-alpha.0 → 6.0.1-alpha.5

package/dist/components/Markdown/Markdown.d.ts

@@ -1,14 +1,12 @@
 /**
  * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
  */
-import { Component, ReactElement } from 'react';
+import React from 'react';
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import { ParserRules } from 'simple-markdown';
 export declare type Props = {
-    children: string;
+    children?: string;
     errorHandler?: (errors: any[], children: string) => void;
-    rules: ParserRules;
-    styles: {
+    styles?: {
         view?: ViewStyle;
         text?: TextStyle;
         image?: ImageStyle;
@@ -17,13 +15,5 @@ export declare type Props = {
 export declare type DefaultProps = Props & {
     styles: Object;
 };
-declare class Markdown extends Component<Props> {
-    static defaultProps: DefaultProps;
-    shouldComponentUpdate: (nextProps: Props) => boolean;
-    /** Post processes rules to strip out unwanted styling options
-     *  while keeping the default 'paragraph' and 'text' rules
-     */
-    _renderContent: (children: string) => ReactElement;
-    render(): JSX.Element;
-}
-export default Markdown;
+declare const _default: React.MemoExoticComponent<({ children, errorHandler, styles }: Props) => JSX.Element>;
+export default _default;

package/dist/components/Markdown/Markdown.js

@@ -1,26 +1,16 @@
 /**
  * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
  */
-import React, { Component } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import SimpleMarkdown from 'simple-markdown';
 // @ts-ignore
 import initialRules from './rules';
 import initialStyles from './styles';
-class Markdown extends Component {
-    static defaultProps = {
-        children: '',
-        rules: {},
-        styles: initialStyles,
-    };
-    shouldComponentUpdate = (nextProps) => this.props.children !== nextProps.children || this.props.styles !== nextProps.styles;
-    // @TODO: Rewrite this part to prevent text from overriding other rules
-    /** Post processes rules to strip out unwanted styling options
-     *  while keeping the default 'paragraph' and 'text' rules
-     */
-    _renderContent = (children) => {
+const Markdown = ({ children = '', errorHandler, styles = initialStyles }) => {
+    const _renderContent = () => {
         try {
-            const mergedStyles = { ...initialStyles, ...this.props.styles };
+            const mergedStyles = Object.assign(Object.assign({}, initialStyles), styles);
             const rules = initialRules(mergedStyles);
             // @TODO: Add another \n?
             const blockSource = `${children}\n\n`;
@@ -30,12 +20,10 @@ class Markdown extends Component {
             return SimpleMarkdown.outputFor(rules, 'react')(tree);
         }
         catch (errors) {
-            this.props.errorHandler ? this.props.errorHandler(errors, children) : console.error(errors);
+            errorHandler ? errorHandler(errors, children) : console.error(errors);
         }
         return null;
     };
-    render() {
-        return <View style={[this.props.styles.view]}>{this._renderContent(this.props.children)}</View>;
-    }
-}
-export default Markdown;
+    return React.createElement(View, { style: [styles.view] }, _renderContent());
+};
+export default React.memo(Markdown);

package/dist/components/Markdown/rules.js

@@ -4,22 +4,14 @@
 import { createElement } from 'react';
 import { Image, Text, View, Linking, } from 'react-native';
 import SimpleMarkdown from 'simple-markdown';
-export default (styles) => ({
-    ...SimpleMarkdown.defaultRules,
-    autolink: {
-        ...SimpleMarkdown.defaultRules.autolink,
-        react: (node, output, state) => {
+export default (styles) => (Object.assign(Object.assign({}, SimpleMarkdown.defaultRules), { autolink: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.autolink), { react: (node, output, state) => {
             state.withinText = true;
             return createElement(Text, {
                 key: state.key,
                 style: styles.link,
                 onPress: () => null,
             }, output(node.content, state));
-        },
-    },
-    blockQuote: {
-        ...SimpleMarkdown.defaultRules.blockQuote,
-        react: (node, output, state) => {
+        } }), blockQuote: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.blockQuote), { react: (node, output, state) => {
             state.withinText = true;
             const blockBar = createElement(View, {
                 key: state.key,
@@ -33,51 +25,31 @@ export default (styles) => ({
                 key: state.key,
                 style: [styles.blockQuoteSection, styles.blockQuote],
             }, [blockBar, blockText]);
-        },
-    },
-    br: {
-        ...SimpleMarkdown.defaultRules.br,
-        react: (node, output, state) => {
+        } }), br: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.br), { react: (node, output, state) => {
             return createElement(Text, {
                 key: state.key,
                 style: styles.br,
             }, '\n\n');
-        },
-    },
-    codeBlock: {
-        ...SimpleMarkdown.defaultRules.codeBlock,
-        react: (node, output, state) => {
+        } }), codeBlock: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.codeBlock), { react: (node, output, state) => {
             state.withinText = true;
             return createElement(Text, {
                 key: state.key,
                 style: styles.codeBlock,
             }, null);
-        },
-    },
-    del: {
-        ...SimpleMarkdown.defaultRules.del,
-        react: (node, output, state) => {
+        } }), del: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.del), { react: (node, output, state) => {
             state.withinText = true;
             return createElement(Text, {
                 key: state.key,
                 style: styles.del,
             }, output(node.content, state));
-        },
-    },
-    em: {
-        ...SimpleMarkdown.defaultRules.em,
-        react: (node, output, state) => {
+        } }), em: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.em), { react: (node, output, state) => {
             state.withinText = true;
             return createElement(Text, {
                 key: state.key,
                 style: styles.em,
             }, output(node.content, state));
-        },
-    },
-    heading: {
-        ...SimpleMarkdown.defaultRules.heading,
-        react: (node, output, parentState) => {
-            const state = { ...parentState };
+        } }), heading: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.heading), { react: (node, output, parentState) => {
+            const state = Object.assign({}, parentState);
             state.withinText = true;
             const stylesToApply = [styles.heading, styles[`heading${node.level}`]];
             state.stylesToApply = stylesToApply;
@@ -85,35 +57,19 @@ export default (styles) => ({
                 key: state.key,
                 style: stylesToApply,
             }, output(node.content, state));
-        },
-    },
-    hr: {
-        ...SimpleMarkdown.defaultRules.hr,
-        react: (node, output, state) => createElement(View, { key: state.key, style: styles.hr }),
-    },
-    image: {
-        ...SimpleMarkdown.defaultRules.image,
-        react: (node, output, state) => createElement(Image, {
+        } }), hr: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.hr), { react: (node, output, state) => createElement(View, { key: state.key, style: styles.hr }) }), image: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.image), { react: (node, output, state) => createElement(Image, {
             key: state.key,
             resizeMode: 'contain',
             source: { uri: node.target },
             style: (node.target.match(/youtu|vimeo/) ? styles.video : styles.image),
             //styles.resizeMode ? styles.resizeMode :
-        }),
-    },
-    inlineCode: {
-        ...SimpleMarkdown.defaultRules.inlineCode,
-        react: (node, output, state) => {
+        }) }), inlineCode: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.inlineCode), { react: (node, output, state) => {
             state.withinText = true;
             return createElement(Text, {
                 key: state.key,
                 style: styles.inlineCode,
             }, node.content);
-        },
-    },
-    link: {
-        ...SimpleMarkdown.defaultRules.link,
-        react: (node, output, state) => {
+        } }), link: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.link), { react: (node, output, state) => {
             state.withinText = true;
             const openUrl = (url) => {
                 Linking.openURL(url).catch((error) => console.warn('An error occurred: ', error));
@@ -123,11 +79,7 @@ export default (styles) => ({
                 key: state.key,
                 onPress: () => openUrl(node.target),
             }, output(node.content, state));
-        },
-    },
-    list: {
-        ...SimpleMarkdown.defaultRules.list,
-        react: (node, output, state) => {
+        } }), list: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.list), { react: (node, output, state) => {
             const items = node.items.map((item, i) => {
                 let bullet;
                 if (node.ordered) {
@@ -143,35 +95,19 @@ export default (styles) => ({
                 }, [bullet, listItemText]);
             });
             return createElement(View, { key: state.key, style: styles.list }, items);
-        },
-    },
-    newline: {
-        ...SimpleMarkdown.defaultRules.newline,
-        react: (node, output, state) => createElement(Text, {
+        } }), newline: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.newline), { react: (node, output, state) => createElement(Text, {
             key: state.key,
             style: styles.newline,
-        }, '\n'),
-    },
-    paragraph: {
-        ...SimpleMarkdown.defaultRules.paragraph,
-        react: (node, output, state) => createElement(View, {
+        }, '\n') }), paragraph: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.paragraph), { react: (node, output, state) => createElement(View, {
             key: state.key,
             style: styles.paragraph,
-        }, output(node.content, state)),
-    },
-    strong: {
-        ...SimpleMarkdown.defaultRules.strong,
-        react: (node, output, state) => {
+        }, output(node.content, state)) }), strong: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.strong), { react: (node, output, state) => {
             state.withinText = true;
             return createElement(Text, {
                 key: state.key,
                 style: styles.strong,
             }, output(node.content, state));
-        },
-    },
-    table: {
-        ...SimpleMarkdown.defaultRules.table,
-        react: (node, output, state) => {
+        } }), table: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.table), { react: (node, output, state) => {
             const headers = node.header.map((content, i) => createElement(Text, {
                 style: styles.tableHeaderCell,
                 key: i,
@@ -187,12 +123,8 @@ export default (styles) => ({
                 return createElement(View, { key: r, style: rowStyles }, cells);
             });
             return createElement(View, { key: state.key, style: styles.table }, [header, rows]);
-        },
-    },
-    text: {
-        ...SimpleMarkdown.defaultRules.text,
-        react: (node, output, parentState) => {
-            const state = { ...parentState };
+        } }), text: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.text), { react: (node, output, parentState) => {
+            const state = Object.assign({}, parentState);
             // Breaking words up in order to allow for text reflowing in flexbox
             // let words = node.content.split(' ');
             // words = words.map((word: string, i: number) => {
@@ -204,21 +136,13 @@ export default (styles) => ({
                 key: state.key,
                 style: textStyles,
             }, node.content);
-        },
-    },
-    u: {
-        ...SimpleMarkdown.defaultRules.u,
-        react: (node, output, state) => {
+        } }), u: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.u), { react: (node, output, state) => {
             state.withinText = true;
             return createElement(Text, {
                 key: state.key,
                 style: styles.u,
             }, output(node.content, state));
-        },
-    },
-    url: {
-        ...SimpleMarkdown.defaultRules.url,
-        react: (node, output, state) => {
+        } }), url: Object.assign(Object.assign({}, SimpleMarkdown.defaultRules.url), { react: (node, output, state) => {
             state.withinText = true;
             const openURL = (url) => {
                 Linking.openURL(url).catch((error) => console.warn('An error occurred: ', error));
@@ -228,6 +152,4 @@ export default (styles) => ({
                 style: styles.url,
                 onPress: () => openURL(node.target),
             }, output(node.content, state));
-        },
-    },
-});
+        } }) }));

package/dist/components/Notes.js

@@ -21,9 +21,8 @@ export const Notes = ({ active, api }) => {
     }
     const text = story.parameters[PARAM_KEY];
     const textAfterFormatted = text ? text.trim() : '';
-    return (<View style={styles.container}>
-      <Markdown>{textAfterFormatted}</Markdown>
-    </View>);
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(Markdown, null, textAfterFormatted)));
 };
 const styles = StyleSheet.create({
     container: { padding: 10, flex: 1 },

package/dist/register.js

@@ -6,7 +6,7 @@ addons.register('storybook/notes', (api) => {
     const channel = addons.getChannel();
     addons.addPanel('storybook/notes/panel', {
         title: 'Notes',
-        render: ({ active, key }) => <Notes key={key} channel={channel} api={api} active={active}/>,
+        render: ({ active, key }) => React.createElement(Notes, { key: key, channel: channel, api: api, active: active }),
         paramKey: PARAM_KEY,
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "6.0.1-alpha.0",
+  "version": "6.0.1-alpha.5",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d1902e4b183a703f0a1bc24879acb0693ab616cf"
+  "gitHead": "6f8419cefb00be5cf88132a626b768ec8a332515"
 }