@storybook/addon-ondevice-notes 6.5.0-rc.8 → 6.5.0

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

@@ -15,5 +15,5 @@ export type Props = {
 export type DefaultProps = Props & {
     styles: Object;
 };
-declare const _default: React.MemoExoticComponent<({ children, errorHandler, styles }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ children, errorHandler }: Props) => JSX.Element>;
 export default _default;

package/dist/components/Markdown/Markdown.js

@@ -6,12 +6,12 @@ import { View } from 'react-native';
 import SimpleMarkdown from 'simple-markdown';
 // @ts-ignore
 import initialRules from './rules';
-import initialStyles from './styles';
-const Markdown = ({ children = '', errorHandler, styles = initialStyles }) => {
+import { useThemedStyles } from './styles';
+const Markdown = ({ children = '', errorHandler }) => {
+    const styles = useThemedStyles();
     const _renderContent = () => {
         try {
-            const mergedStyles = Object.assign(Object.assign({}, initialStyles), styles);
-            const rules = initialRules(mergedStyles);
+            const rules = initialRules(styles);
             // @TODO: Add another \n?
             const blockSource = `${children}\n\n`;
             const tree = SimpleMarkdown.parserFor(rules)(blockSource, {
@@ -24,6 +24,6 @@ const Markdown = ({ children = '', errorHandler, styles = initialStyles }) => {
         }
         return null;
     };
-    return React.createElement(View, { style: [styles.view] }, _renderContent());
+    return React.createElement(View, null, _renderContent());
 };
 export default React.memo(Markdown);

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

@@ -1,128 +1,6 @@
-declare const _default: {
-    blockQuoteSection: {
-        flexDirection: "row";
-    };
-    blockQuoteSectionBar: {
-        width: number;
-        backgroundColor: string;
-        marginRight: number;
-    };
-    codeBlock: {
-        fontFamily: string;
-        fontWeight: "500";
-    };
-    del: {
-        textDecorationLine: "line-through";
-    };
-    em: {
-        fontStyle: "italic";
-    };
-    heading: {
-        fontWeight: "200";
-    };
-    heading1: {
-        fontSize: number;
-    };
-    heading2: {
-        fontSize: number;
-    };
-    heading3: {
-        fontSize: number;
-    };
-    heading4: {
-        fontSize: number;
-    };
-    heading5: {
-        fontSize: number;
-    };
-    heading6: {
-        fontSize: number;
-    };
-    hr: {
-        backgroundColor: string;
-    };
-    image: {
-        width: number;
-        height: number;
-    };
-    inlineCode: {
-        backgroundColor: string;
-        borderColor: string;
-        borderRadius: number;
-        borderWidth: number;
-        fontFamily: string;
-        fontWeight: "bold";
-    };
-    link: {
-        textDecorationLine: "underline";
-    };
-    list: {
-        width: string;
-    };
-    listItem: {
-        flexDirection: "row";
-        alignItems: "center";
-        width: string;
-    };
-    listItemNumber: {
-        fontWeight: "bold";
-    };
-    listItemBullet: {
-        fontWeight: "bold";
-    };
-    mailTo: {
-        textDecorationLine: "underline";
-    };
-    paragraph: {
-        flexDirection: "row";
-        alignItems: "flex-start";
-        justifyContent: "flex-start";
-    };
-    listItemText: {
-        flexDirection: "row";
-        justifyContent: "flex-start";
-        alignItems: "flex-start";
-        color: string;
-    };
-    strong: {
-        fontWeight: "bold";
-    };
-    table: {
-        borderWidth: number;
-        borderColor: string;
-        borderRadius: number;
-    };
-    tableHeader: {
-        backgroundColor: string;
-        flexDirection: "row";
-        justifyContent: "space-around";
-    };
-    tableHeaderCell: {
-        color: string;
-        fontWeight: "bold";
-        padding: number;
-    };
-    tableRow: {
-        borderBottomWidth: number;
-        borderColor: string;
-        flexDirection: "row";
-        justifyContent: "space-around";
-    };
-    tableRowLast: {
-        borderColor: string;
-    };
-    tableRowCell: {
-        padding: number;
-    };
-    text: {
-        color: string;
-    };
-    u: {
-        textDecorationLine: "underline";
-    };
-    video: {
-        width: number;
-        height: number;
-    };
-};
-export default _default;
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native/types';
+interface Styles {
+    [key: string]: StyleProp<ViewStyle | TextStyle | ImageStyle>;
+}
+export declare const useThemedStyles: () => Styles;
+export {};

package/dist/components/Markdown/styles.js

@@ -1,129 +1,134 @@
 /**
  * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
  */
-import { StyleSheet } from 'react-native';
-export default StyleSheet.create({
-    blockQuoteSection: {
-        flexDirection: 'row',
-    },
-    blockQuoteSectionBar: {
-        width: 3,
-        backgroundColor: '#DDDDDD',
-        marginRight: 15,
-    },
-    codeBlock: {
-        fontFamily: 'Courier',
-        fontWeight: '500',
-    },
-    del: {
-        textDecorationLine: 'line-through',
-    },
-    em: {
-        fontStyle: 'italic',
-    },
-    heading: {
-        fontWeight: '200',
-    },
-    heading1: {
-        fontSize: 32,
-    },
-    heading2: {
-        fontSize: 24,
-    },
-    heading3: {
-        fontSize: 18,
-    },
-    heading4: {
-        fontSize: 16,
-    },
-    heading5: {
-        fontSize: 13,
-    },
-    heading6: {
-        fontSize: 11,
-    },
-    hr: {
-        backgroundColor: '#cccccc',
-    },
-    image: {
-        width: 320,
-        height: 320,
-    },
-    inlineCode: {
-        backgroundColor: '#eeeeee',
-        borderColor: '#dddddd',
-        borderRadius: 3,
-        borderWidth: 1,
-        fontFamily: 'Courier',
-        fontWeight: 'bold',
-    },
-    link: {
-        textDecorationLine: 'underline',
-    },
-    list: { width: '100%' },
-    listItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        width: '100%',
-    },
-    listItemNumber: {
-        fontWeight: 'bold',
-    },
-    listItemBullet: {
-        fontWeight: 'bold',
-    },
-    mailTo: {
-        textDecorationLine: 'underline',
-    },
-    paragraph: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-    },
-    listItemText: {
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-        color: '#222222',
-    },
-    strong: {
-        fontWeight: 'bold',
-    },
-    table: {
-        borderWidth: 1,
-        borderColor: '#222222',
-        borderRadius: 3,
-    },
-    tableHeader: {
-        backgroundColor: '#222222',
-        flexDirection: 'row',
-        justifyContent: 'space-around',
-    },
-    tableHeaderCell: {
-        color: '#ffffff',
-        fontWeight: 'bold',
-        padding: 5,
-    },
-    tableRow: {
-        borderBottomWidth: 1,
-        borderColor: '#222222',
-        flexDirection: 'row',
-        justifyContent: 'space-around',
-    },
-    tableRowLast: {
-        borderColor: 'transparent',
-    },
-    tableRowCell: {
-        padding: 5,
-    },
-    text: {
-        color: '#222222',
-    },
-    u: {
-        textDecorationLine: 'underline',
-    },
-    video: {
-        width: 300,
-        height: 300,
-    },
-});
+import { useTheme } from 'emotion-theming';
+import { useMemo } from 'react';
+export const useThemedStyles = () => {
+    const theme = useTheme();
+    const styles = useMemo(() => ({
+        blockQuoteSection: {
+            flexDirection: 'row',
+        },
+        blockQuoteSectionBar: {
+            width: 3,
+            backgroundColor: '#DDDDDD',
+            marginRight: 15,
+        },
+        codeBlock: {
+            fontWeight: '500',
+        },
+        del: {
+            textDecorationLine: 'line-through',
+        },
+        em: {
+            fontStyle: 'italic',
+        },
+        heading: {
+            fontWeight: '200',
+        },
+        heading1: {
+            fontSize: 32,
+        },
+        heading2: {
+            fontSize: 24,
+        },
+        heading3: {
+            fontSize: 18,
+        },
+        heading4: {
+            fontSize: 16,
+        },
+        heading5: {
+            fontSize: 13,
+        },
+        heading6: {
+            fontSize: 11,
+        },
+        hr: {
+            backgroundColor: '#cccccc',
+        },
+        image: {
+            width: 320,
+            height: 320,
+        },
+        inlineCode: {
+            backgroundColor: '#eeeeee',
+            borderColor: '#dddddd',
+            borderRadius: 3,
+            borderWidth: 1,
+            fontWeight: 'bold',
+        },
+        link: {
+            textDecorationLine: 'underline',
+        },
+        list: { width: '100%' },
+        listItem: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: '100%',
+        },
+        listItemNumber: {
+            fontWeight: 'bold',
+            color: theme.text.primaryColor,
+        },
+        listItemBullet: {
+            fontWeight: 'bold',
+            color: theme.text.primaryColor,
+        },
+        mailTo: {
+            textDecorationLine: 'underline',
+        },
+        paragraph: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'flex-start',
+        },
+        listItemText: {
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            color: theme.text.primaryColor,
+        },
+        strong: {
+            fontWeight: 'bold',
+        },
+        table: {
+            borderWidth: 1,
+            borderColor: theme.text.primaryColor,
+            borderRadius: 3,
+        },
+        tableHeader: {
+            backgroundColor: theme.text.primaryColor,
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+        },
+        tableHeaderCell: {
+            color: theme.backgroundColor,
+            fontWeight: 'bold',
+            padding: 5,
+        },
+        tableRow: {
+            borderBottomWidth: 1,
+            borderColor: theme.text.primaryColor,
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+        },
+        tableRowLast: {
+            borderColor: 'transparent',
+        },
+        tableRowCell: {
+            padding: 5,
+        },
+        text: {
+            color: theme.text.primaryColor,
+        },
+        u: {
+            textDecorationLine: 'underline',
+        },
+        video: {
+            width: 300,
+            height: 300,
+        },
+    }), [theme.backgroundColor, theme.text.primaryColor]);
+    return styles;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "6.5.0-rc.8",
+  "version": "6.5.0",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -35,6 +35,7 @@
     "@storybook/client-logger": "^6.5.14",
     "@storybook/core-events": "^6.5.14",
     "core-js": "^3.0.1",
+    "emotion-theming": "^10.0.19",
     "prop-types": "^15.7.2",
     "simple-markdown": "^0.7.3"
   },
@@ -45,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "75843635fa1be05214dfd4b46dc978a9c538d477"
+  "gitHead": "35d882320519d7130219eb060f3aee86caeacd3a"
 }

package/dist/typings.d.js

@@ -1 +0,0 @@
-"use strict";