@storybook/addon-ondevice-notes
Version:
Write notes for your react-native Storybook stories.
76 lines (75 loc) • 3.2 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
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/internal/core-events");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_markdown_display_1 = __importDefault(require("react-native-markdown-display"));
const ErrorBoundary_1 = require("../ErrorBoundary");
const manager_api_1 = require("storybook/internal/manager-api");
const react_native_theming_1 = require("@storybook/react-native-theming");
exports.PARAM_KEY = 'notes';
const Notes = ({ active, api }) => {
const theme = (0, react_native_theming_1.useTheme)();
const [story, setStory] = (0, react_1.useState)();
(0, react_1.useEffect)(() => {
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]);
const themedMarkdownStyles = (0, react_1.useMemo)(() => ({
body: {
color: theme.color.defaultText,
},
hr: {
backgroundColor: theme.color.defaultText,
},
table: {
borderColor: theme.color.defaultText,
},
tr: {
borderColor: theme.color.defaultText,
},
blocklink: {
borderColor: theme.color.defaultText,
},
code_inline: {
color: theme.color.defaultText,
backgroundColor: theme.background.app,
},
code_block: {
color: theme.color.defaultText,
backgroundColor: theme.background.app,
},
fence: {
color: theme.color.defaultText,
backgroundColor: theme.background.app,
},
blockquote: {
borderColor: theme.color.defaultText,
backgroundColor: theme.background.app,
},
}), [theme.color.defaultText, theme.background.app]);
if (!active || !story) {
return null;
}
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: textAfterFormatted && ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(react_native_markdown_display_1.default, { style: themedMarkdownStyles, children: textAfterFormatted }) })) }));
};
exports.Notes = Notes;
const styles = react_native_1.StyleSheet.create({
container: { flex: 1, padding: 10 },
});