diff --git a/app/react-native/src/manager/components/PreviewHelp.js b/app/react-native/src/manager/components/PreviewHelp.js new file mode 100644 index 000000000000..d826add27b0c --- /dev/null +++ b/app/react-native/src/manager/components/PreviewHelp.js @@ -0,0 +1,70 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +class PreviewHelp extends Component { + render() { + return ( +
+

Welcome to STORYBOOK

+

+ This is a UI component dev environment for your app. +

+

+ We've added some basic stories inside the + {' '} + storybook/stories + {' '} + directory. + {' '} + A story is a single state of one or more UI components. You can have as many stories as you want. Basically a story is like a visual test case. +

+

+ To see your Storybook stories on the device, you should start your mobile app for the + {' '} + <platform> + {' '} + of your choice (typically ios or android). +

+

+ For create-react-native-app apps: +

+
+
npm run <platform>
+
+

+ For react-native init apps: +

+
+
npm run <platform>
+
+
+ ); + } +} + +const styles = { + main: { + margin: 15, + maxWidth: 600, + lineHeight: 1.4, + fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', + }, + + code: { + fontSize: 15, + fontWeight: 600, + padding: '2px 5px', + border: '1px solid #eae9e9', + borderRadius: 4, + backgroundColor: '#f3f2f2', + color: '#3a3a3a', + }, + + codeBlock: { + backgroundColor: '#f3f2f2', + padding: '1px 10px', + margin: '10px 0', + }, +}; + +export default PreviewHelp; diff --git a/app/react-native/src/manager/provider.js b/app/react-native/src/manager/provider.js index 663a5f38c276..f1e541c3cf47 100644 --- a/app/react-native/src/manager/provider.js +++ b/app/react-native/src/manager/provider.js @@ -3,6 +3,7 @@ import { Provider } from '@storybook/ui'; import createChannel from '@storybook/channel-websocket'; import addons from '@storybook/addons'; import uuid from 'uuid'; +import PreviewHelp from './components/PreviewHelp'; export default class ReactProvider extends Provider { constructor({ url: domain, options }) { @@ -47,7 +48,7 @@ export default class ReactProvider extends Provider { ); } - return innerPreview; + return innerPreview || ; } handleAPI(api) {