@storybook/addon-ondevice-notes 7.0.0-alpha.5 → 7.0.0-alpha.7

package/dist/ErrorBoundary.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+export declare class ErrorBoundary extends React.Component<{
+    children: ReactNode | ReactNode[];
+}, {
+    hasError: boolean;
+}> {
+    constructor(props: any);
+    static getDerivedStateFromError(_error: any): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: any, errorInfo: any): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
+}

package/dist/ErrorBoundary.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+class ErrorBoundary extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(_error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        // You can also log the error to an error reporting service
+        console.warn(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Something went wrong." });
+        }
+        return this.props.children;
+    }
+}
+exports.ErrorBoundary = ErrorBoundary;

package/dist/components/Notes.d.ts

@@ -1,10 +1,8 @@
-import { API } from '@storybook/api';
-import { AddonStore } from '@storybook/manager-api';
+import { RNAddonApi } from '../register';
 export declare const PARAM_KEY = "notes";
 interface NotesProps {
-    channel: ReturnType<AddonStore['getChannel']>;
-    api: API;
     active: boolean;
+    api: RNAddonApi;
 }
 export declare const Notes: ({ active, api }: NotesProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Notes.js

@@ -6,29 +6,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Notes = exports.PARAM_KEY = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const core_events_1 = require("@storybook/core-events");
-const manager_api_1 = require("@storybook/manager-api");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const Markdown_1 = __importDefault(require("./Markdown/Markdown"));
+const react_native_markdown_display_1 = __importDefault(require("react-native-markdown-display"));
+const ErrorBoundary_1 = require("../ErrorBoundary");
+const manager_api_1 = require("@storybook/manager-api");
 exports.PARAM_KEY = 'notes';
 const Notes = ({ active, api }) => {
     const [story, setStory] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
-        if (active) {
-            const selection = api.store().getSelection();
-            setStory(api.store().fromId(selection.storyId));
-        }
-        manager_api_1.addons.getChannel().on(core_events_1.SET_CURRENT_STORY, () => {
-            const selection = api.store().getSelection();
-            setStory(api.store().fromId(selection.storyId));
-        });
+        const selection = api.store().getSelection();
+        const handleSetCurrentStory = ({ storyId }) => {
+            setStory(api.store().fromId(storyId));
+        };
+        // set initial story
+        handleSetCurrentStory({ storyId: selection.storyId });
+        const channel = manager_api_1.addons.getChannel();
+        channel.on(core_events_1.SET_CURRENT_STORY, handleSetCurrentStory);
+        return () => channel.off(core_events_1.SET_CURRENT_STORY, handleSetCurrentStory);
     }, [api, active]);
     if (!active || !story) {
         return null;
     }
-    const text = story.parameters[exports.PARAM_KEY];
+    const text = story?.parameters && story.parameters[exports.PARAM_KEY] ? story.parameters[exports.PARAM_KEY] : '';
+    if (!text)
+        return null;
     const textAfterFormatted = text ? text.trim() : '';
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, children: (0, jsx_runtime_1.jsx)(Markdown_1.default, { children: textAfterFormatted }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, children: textAfterFormatted && ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(react_native_markdown_display_1.default, { children: textAfterFormatted }) })) }));
 };
 exports.Notes = Notes;
 const styles = react_native_1.StyleSheet.create({

package/dist/register.d.ts

@@ -1 +1,24 @@
+import { API } from '@storybook/manager-api';
+import { ComponentType, ReactElement } from 'react';
+import type { Args, StoryContextForLoaders } from '@storybook/csf';
+import type { Renderer } from '@storybook/types';
 export declare const PARAM_KEY = "notes";
+import type { Channel } from '@storybook/channels';
+export interface Selection {
+    storyId: string;
+    viewMode: 'story';
+}
+export interface ReactNativeFramework extends Renderer {
+    component: ComponentType<any>;
+    storyResult: ReactElement<unknown>;
+}
+export type StoryFromId = Omit<StoryContextForLoaders<ReactNativeFramework, Args>, 'viewMode'>;
+type ApiStore = {
+    fromId: (id: any) => StoryFromId;
+    getSelection: () => Selection;
+    _channel: Channel;
+};
+export type RNAddonApi = API & {
+    store: () => ApiStore;
+};
+export {};

package/dist/register.js

@@ -6,11 +6,10 @@ const manager_api_1 = require("@storybook/manager-api");
 const Notes_1 = require("./components/Notes");
 exports.PARAM_KEY = 'notes';
 manager_api_1.addons.register('storybook/notes', (api) => {
-    const channel = manager_api_1.addons.getChannel();
     manager_api_1.addons.add('storybook/notes/panel', {
         type: manager_api_1.types.PANEL,
         title: 'Notes',
-        render: ({ active, key }) => (0, jsx_runtime_1.jsx)(Notes_1.Notes, { channel: channel, api: api, active: active }, key),
+        render: ({ active }) => (0, jsx_runtime_1.jsx)(Notes_1.Notes, { api: api, active: active }),
         paramKey: exports.PARAM_KEY,
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.7",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -29,14 +29,12 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/api": "^7",
-    "@storybook/client-logger": "^7",
-    "@storybook/core-events": "^7",
-    "@storybook/manager-api": "^7",
-    "@storybook/react-native-theming": "^7.0.0-alpha.5",
-    "core-js": "^3.0.1",
-    "prop-types": "^15.7.2",
-    "simple-markdown": "^0.7.3"
+    "@storybook/api": "7.6.0-alpha.2",
+    "@storybook/client-logger": "7.6.0-alpha.2",
+    "@storybook/core-events": "7.6.0-alpha.2",
+    "@storybook/manager-api": "7.6.0-alpha.2",
+    "@storybook/react-native-theming": "^7.0.0-alpha.7",
+    "react-native-markdown-display": "6.1.6"
   },
   "devDependencies": {
     "typescript": "^5.1.3"
@@ -48,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7e6db945d52b15ca54a3d7471158874829ada78d"
+  "gitHead": "1e3f579e09fe88b689fa28f13cb93e77ec1f43f7"
 }

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

@@ -1,19 +0,0 @@
-/**
- * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
- */
-import React from 'react';
-import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-export type Props = {
-    children?: string;
-    errorHandler?: (errors: any[], children: string) => void;
-    styles?: {
-        view?: ViewStyle;
-        text?: TextStyle;
-        image?: ImageStyle;
-    };
-};
-export type DefaultProps = Props & {
-    styles: Object;
-};
-declare const _default: React.MemoExoticComponent<({ children, errorHandler }: Props) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/components/Markdown/Markdown.js

@@ -1,35 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
- */
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const simple_markdown_1 = __importDefault(require("simple-markdown"));
-// @ts-ignore
-const rules_1 = __importDefault(require("./rules"));
-const styles_1 = require("./styles");
-const Markdown = ({ children = '', errorHandler }) => {
-    const styles = (0, styles_1.useThemedStyles)();
-    const _renderContent = () => {
-        try {
-            const rules = (0, rules_1.default)(styles);
-            // @TODO: Add another \n?
-            const blockSource = `${children}\n\n`;
-            const tree = simple_markdown_1.default.parserFor(rules)(blockSource, {
-                inline: false,
-            });
-            return simple_markdown_1.default.outputFor(rules, 'react')(tree);
-        }
-        catch (errors) {
-            errorHandler ? errorHandler(errors, children) : console.error(errors);
-        }
-        return null;
-    };
-    return (0, jsx_runtime_1.jsx)(react_native_1.View, { children: _renderContent() });
-};
-exports.default = react_1.default.memo(Markdown);

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

@@ -1,177 +0,0 @@
-/// <reference types="react" />
-import { Image, Text, View, TextStyle, ViewStyle, ImageStyle, StyleProp } from 'react-native';
-import SimpleMarkdown, { Output, ReactElements, State, SingleASTNode } from 'simple-markdown';
-interface Styles {
-    [key: string]: StyleProp<ViewStyle | TextStyle | ImageStyle>;
-}
-declare const _default: (styles: Styles) => {
-    autolink: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    blockQuote: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    br: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    codeBlock: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    del: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    em: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    heading: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, parentState: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    hr: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    image: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ImageProps, Image>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    inlineCode: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    link: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    list: {
-        react: (node: {
-            items: Array<SingleASTNode>;
-            ordered: boolean;
-        }, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    newline: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    paragraph: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    strong: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    table: {
-        react: (node: {
-            header: Array<SingleASTNode>;
-            cells: Array<Array<SingleASTNode>>;
-        }, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    text: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, parentState: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    u: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    url: {
-        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
-        order: number;
-        match: SimpleMarkdown.MatchFunction;
-        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
-        parse: SimpleMarkdown.SingleNodeParseFunction;
-        html: SimpleMarkdown.HtmlNodeOutput;
-    };
-    Array: SimpleMarkdown.DefaultArrayRule;
-    nptable: SimpleMarkdown.DefaultInRule;
-    lheading: SimpleMarkdown.DefaultInRule;
-    fence: SimpleMarkdown.DefaultInRule;
-    def: SimpleMarkdown.LenientInOutRule;
-    tableSeparator: SimpleMarkdown.DefaultInRule;
-    escape: SimpleMarkdown.DefaultInRule;
-    mailto: SimpleMarkdown.DefaultInRule;
-    reflink: SimpleMarkdown.DefaultInRule;
-    refimage: SimpleMarkdown.DefaultInRule;
-};
-export default _default;

package/dist/components/Markdown/rules.js

@@ -1,238 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
- */
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const simple_markdown_1 = __importDefault(require("simple-markdown"));
-exports.default = (styles) => ({
-    ...simple_markdown_1.default.defaultRules,
-    autolink: {
-        ...simple_markdown_1.default.defaultRules.autolink,
-        react: (node, output, state) => {
-            state.withinText = true;
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.link,
-                onPress: () => null,
-            }, output(node.content, state));
-        },
-    },
-    blockQuote: {
-        ...simple_markdown_1.default.defaultRules.blockQuote,
-        react: (node, output, state) => {
-            state.withinText = true;
-            const blockBar = (0, react_1.createElement)(react_native_1.View, {
-                key: state.key,
-                style: [styles.blockQuoteSectionBar, styles.blockQuoteBar],
-            });
-            const blockText = (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.blockQuoteText,
-            }, output(node.content, state));
-            return (0, react_1.createElement)(react_native_1.View, {
-                key: state.key,
-                style: [styles.blockQuoteSection, styles.blockQuote],
-            }, [blockBar, blockText]);
-        },
-    },
-    br: {
-        ...simple_markdown_1.default.defaultRules.br,
-        react: (node, output, state) => {
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.br,
-            }, '\n\n');
-        },
-    },
-    codeBlock: {
-        ...simple_markdown_1.default.defaultRules.codeBlock,
-        react: (node, output, state) => {
-            state.withinText = true;
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.codeBlock,
-            }, null);
-        },
-    },
-    del: {
-        ...simple_markdown_1.default.defaultRules.del,
-        react: (node, output, state) => {
-            state.withinText = true;
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.del,
-            }, output(node.content, state));
-        },
-    },
-    em: {
-        ...simple_markdown_1.default.defaultRules.em,
-        react: (node, output, state) => {
-            state.withinText = true;
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.em,
-            }, output(node.content, state));
-        },
-    },
-    heading: {
-        ...simple_markdown_1.default.defaultRules.heading,
-        react: (node, output, parentState) => {
-            const state = { ...parentState };
-            state.withinText = true;
-            const stylesToApply = [styles.heading, styles[`heading${node.level}`]];
-            state.stylesToApply = stylesToApply;
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: stylesToApply,
-            }, output(node.content, state));
-        },
-    },
-    hr: {
-        ...simple_markdown_1.default.defaultRules.hr,
-        react: (node, output, state) => (0, react_1.createElement)(react_native_1.View, { key: state.key, style: styles.hr }),
-    },
-    image: {
-        ...simple_markdown_1.default.defaultRules.image,
-        react: (node, output, state) => (0, react_1.createElement)(react_native_1.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: {
-        ...simple_markdown_1.default.defaultRules.inlineCode,
-        react: (node, output, state) => {
-            state.withinText = true;
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.inlineCode,
-            }, node.content);
-        },
-    },
-    link: {
-        ...simple_markdown_1.default.defaultRules.link,
-        react: (node, output, state) => {
-            state.withinText = true;
-            const openUrl = (url) => {
-                react_native_1.Linking.openURL(url).catch((error) => console.warn('An error occurred: ', error));
-            };
-            return (0, react_1.createElement)(react_native_1.Text, {
-                style: node.target.match(/@/) ? styles.mailTo : styles.link,
-                key: state.key,
-                onPress: () => openUrl(node.target),
-            }, output(node.content, state));
-        },
-    },
-    list: {
-        ...simple_markdown_1.default.defaultRules.list,
-        react: (node, output, state) => {
-            const items = node.items.map((item, i) => {
-                let bullet;
-                if (node.ordered) {
-                    bullet = (0, react_1.createElement)(react_native_1.Text, { key: state.key, style: styles.listItemNumber }, `${i + 1} . `);
-                }
-                else {
-                    bullet = (0, react_1.createElement)(react_native_1.Text, { key: state.key, style: styles.listItemBullet }, '\u2022 ');
-                }
-                const listItemText = (0, react_1.createElement)(react_native_1.Text, { key: state.key + 1, style: styles.listItemText }, output(item, state));
-                return (0, react_1.createElement)(react_native_1.View, {
-                    key: i,
-                    style: styles.listItem,
-                }, [bullet, listItemText]);
-            });
-            return (0, react_1.createElement)(react_native_1.View, { key: state.key, style: styles.list }, items);
-        },
-    },
-    newline: {
-        ...simple_markdown_1.default.defaultRules.newline,
-        react: (node, output, state) => (0, react_1.createElement)(react_native_1.Text, {
-            key: state.key,
-            style: styles.newline,
-        }, '\n'),
-    },
-    paragraph: {
-        ...simple_markdown_1.default.defaultRules.paragraph,
-        react: (node, output, state) => (0, react_1.createElement)(react_native_1.View, {
-            key: state.key,
-            style: styles.paragraph,
-        }, output(node.content, state)),
-    },
-    strong: {
-        ...simple_markdown_1.default.defaultRules.strong,
-        react: (node, output, state) => {
-            state.withinText = true;
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.strong,
-            }, output(node.content, state));
-        },
-    },
-    table: {
-        ...simple_markdown_1.default.defaultRules.table,
-        react: (node, output, state) => {
-            const headers = node.header.map((content, i) => (0, react_1.createElement)(react_native_1.Text, {
-                style: styles.tableHeaderCell,
-                key: i,
-            }, output(content, state)));
-            const header = (0, react_1.createElement)(react_native_1.View, { style: styles.tableHeader }, headers);
-            const rows = node.cells.map((row, r) => {
-                const cells = row.map((content, c) => (0, react_1.createElement)(react_native_1.View, {
-                    key: c,
-                    style: styles.tableRowCell,
-                }, output(content, state)));
-                const rowStyles = [styles.tableRow];
-                node.cells.length - 1 === r ? rowStyles.push(styles.tableRowLast) : null;
-                return (0, react_1.createElement)(react_native_1.View, { key: r, style: rowStyles }, cells);
-            });
-            return (0, react_1.createElement)(react_native_1.View, { key: state.key, style: styles.table }, [header, rows]);
-        },
-    },
-    text: {
-        ...simple_markdown_1.default.defaultRules.text,
-        react: (node, output, parentState) => {
-            const state = { ...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) => {
-            //   i !== words.length - 1 ? (word = `${word} `) : null;
-            const textStyles = [styles.text];
-            //   !state.withinText ? textStyles.push(styles.plainText) : null;
-            //   state.stylesToApply ? textStyles.push(state.stylesToApply) : null;
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: textStyles,
-            }, node.content);
-        },
-    },
-    u: {
-        ...simple_markdown_1.default.defaultRules.u,
-        react: (node, output, state) => {
-            state.withinText = true;
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.u,
-            }, output(node.content, state));
-        },
-    },
-    url: {
-        ...simple_markdown_1.default.defaultRules.url,
-        react: (node, output, state) => {
-            state.withinText = true;
-            const openURL = (url) => {
-                react_native_1.Linking.openURL(url).catch((error) => console.warn('An error occurred: ', error));
-            };
-            return (0, react_1.createElement)(react_native_1.Text, {
-                key: state.key,
-                style: styles.url,
-                onPress: () => openURL(node.target),
-            }, output(node.content, state));
-        },
-    },
-});

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

@@ -1,6 +0,0 @@
-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,138 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useThemedStyles = void 0;
-/**
- * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
- */
-const react_native_theming_1 = require("@storybook/react-native-theming");
-const react_1 = require("react");
-const useThemedStyles = () => {
-    const theme = (0, react_native_theming_1.useTheme)();
-    const styles = (0, react_1.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;
-};
-exports.useThemedStyles = useThemedStyles;