mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-07 21:41:46 +08:00
60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
|
|
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',
|
|
},
|
|
};
|
|
|
|
const PreviewHelp = () =>
|
|
<div style={styles.main}>
|
|
<h1>Welcome to storybook</h1>
|
|
<p>This is a UI component dev environment for your app.</p>
|
|
<p>
|
|
We've added some basic stories inside the <span style={styles.code}>
|
|
storybook/stories
|
|
</span>{' '}
|
|
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.
|
|
</p>
|
|
<p>
|
|
To see your Storybook stories on the device, you should start your mobile app for the{' '}
|
|
<span style={styles.code}><platform></span> of your choice (typically ios or android).
|
|
(Note that due to an implementation detail, your stories will only show up in the left-pane
|
|
after your device has connected to this storybook server.)
|
|
</p>
|
|
<p>
|
|
For <span style={styles.code}>create-react-native-app</span> apps:
|
|
</p>
|
|
<div style={styles.codeBlock}>
|
|
<pre style={styles.instructionsCode}>npm run <platform></pre>
|
|
</div>
|
|
<p>
|
|
For <span style={styles.code}>react-native init</span> apps:
|
|
</p>
|
|
<div style={styles.codeBlock}>
|
|
<pre style={styles.instructionsCode}>npm run <platform></pre>
|
|
</div>
|
|
</div>;
|
|
|
|
export { PreviewHelp as default };
|