From d4b1fde9cf16d5d7db1abd9986a4459d107f4c70 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 17 Jun 2017 08:23:16 -0700 Subject: [PATCH] Rewrite interactive documentation Ref #491 --- README.md | 36 +- docs/apis/NetInfo.md | 2 +- docs/storybook/.storybook/addons.js | 1 + docs/storybook/.storybook/config.js | 15 +- .../.storybook/decorator-centered.js | 4 +- docs/storybook/UIExplorer.js | 84 -- .../apis/AppRegistry/AppRegistryDocs.js | 107 +++ docs/storybook/apis/AppState/AppStateDocs.js | 80 ++ .../apis/AppState/examples/StateChanges.js | 39 + .../apis/AsyncStorage/AsyncStorageDocs.js | 132 +++ .../storybook/apis/Clipboard/ClipboardDocs.js | 49 + .../apis/Clipboard/ClipboardExample.js | 61 -- .../apis/Clipboard/examples/SetString.js | 41 + .../apis/Dimensions/DimensionsDocs.js | 33 + .../apis/I18nManager/I18nManagerDocs.js | 66 ++ .../apis/I18nManager/I18nManagerExample.js | 98 -- .../apis/I18nManager/examples/RTLToggle.js | 83 ++ docs/storybook/apis/Linking/LinkingDocs.js | 39 + docs/storybook/apis/Linking/LinkingExample.js | 47 - .../apis/Linking/examples/OpenURL.js | 42 + docs/storybook/apis/NetInfo/NetInfoDocs.js | 75 ++ .../apis/PanResponder/PanResponderDocs.js | 44 + .../DraggableCircle.js} | 92 +- .../apis/PixelRatio/PixelRatioDocs.js | 62 ++ docs/storybook/apis/Platform/PlatformDocs.js | 64 ++ .../apis/StyleSheet/StyleSheetDocs.js | 94 ++ .../storybook/apis/Vibration/VibrationDocs.js | 62 ++ .../ActivityIndicatorDocs.js | 67 ++ .../ActivityIndicatorExample.js | 147 --- .../examples/PropAnimating.js | 21 + .../ActivityIndicator/examples/PropColor.js | 33 + .../examples/PropHidesWhenStopped.js | 67 ++ .../ActivityIndicator/examples/PropSize.js | 32 + .../storybook/components/Button/ButtonDocs.js | 75 ++ .../components/Button/ButtonExample.js | 95 -- .../components/Button/examples/PropColor.js | 22 + .../Button/examples/PropDisabled.js | 13 + .../components/Button/examples/PropOnPress.js | 28 + docs/storybook/components/Button/helpers.js | 20 + docs/storybook/components/Image/ImageDocs.js | 158 ++++ .../components/Image/ImageExample.js | 570 ------------ .../Image/examples/MultipleSources.js | 72 ++ .../components/Image/examples/NetworkImage.js | 84 ++ .../components/Image/examples/PropChildren.js | 30 + .../Image/examples/PropDefaultSource.js | 17 + .../Image/examples/PropDraggable.js | 26 + .../components/Image/examples/PropOnError.js | 11 + .../components/Image/examples/PropOnLoad.js | 13 + .../Image/examples/PropOnLoadEnd.js | 13 + .../Image/examples/PropOnLoadStart.js | 13 + .../Image/examples/PropResizeMode.js | 84 ++ .../components/Image/examples/PropSource.js | 47 + .../Image/examples/StaticGetSize.js | 66 ++ .../Image/examples/StaticPrefetch.js | 96 ++ docs/storybook/components/Image/helpers.js | 30 + .../components/Image/{ => sources}/bunny.png | Bin .../components/Image/sources/index.js | 28 + .../{ => sources}/uie_thumb_normal@2x.png | Bin .../{ => sources}/uie_thumb_selected@2x.png | Bin .../ProgressBar/ProgressBarExample.js | 163 ---- .../components/ProgressBar/ProgressDocs.js | 78 ++ .../ProgressBar/examples/CustomSize.js | 27 + .../ProgressBar/examples/PropColor.js | 22 + .../ProgressBar/examples/PropIndeterminate.js | 10 + .../ProgressBar/examples/PropProgress.js | 48 + .../ProgressBar/examples/PropTrackColor.js | 18 + .../components/ProgressBar/helpers.js | 20 + .../components/ScrollView/ScrollViewDocs.js | 172 ++++ .../ScrollView/ScrollViewExample.js | 75 -- .../ScrollView/examples/Horizontal.js | 65 ++ .../ScrollView/examples/ScrollTo.js | 57 ++ .../ScrollView/examples/ScrollToEnd.js | 57 ++ .../storybook/components/Switch/SwitchDocs.js | 139 +++ .../components/Switch/SwitchExample.js | 208 ----- .../components/Switch/examples/CustomSize.js | 42 + .../Switch/examples/PropActiveThumbColor.js | 24 + .../Switch/examples/PropActiveTrackColor.js | 24 + .../Switch/examples/PropDisabled.js | 19 + .../Switch/examples/PropOnValueChange.js | 59 ++ .../Switch/examples/PropThumbColor.js | 24 + .../Switch/examples/PropTrackColor.js | 24 + .../components/Switch/examples/PropValue.js | 19 + docs/storybook/components/Switch/helpers.js | 36 + docs/storybook/components/Text/TextDocs.js | 265 ++++++ .../components/Text/examples/PropChildren.js | 66 ++ .../Text/examples/PropNumberOfLines.js | 27 + .../components/Text/examples/PropOnLayout.js | 10 + .../components/Text/examples/PropOnPress.js | 52 ++ .../Text/examples/PropSelectable.js | 12 + .../{TextExample.js => examples/legacy.js} | 132 +-- .../components/TextInput/TextInputDocs.js | 367 ++++++++ .../components/TextInput/TextInputExample.js | 839 ------------------ .../examples/AutoExpandingTextInput.js | 62 ++ .../TextInput/examples/PropAutoCapitalize.js | 25 + .../TextInput/examples/PropAutoFocus.js | 11 + .../TextInput/examples/PropBlurOnSubmit.js | 55 ++ .../TextInput/examples/PropClearButtonMode.js | 25 + .../examples/PropClearTextOnFocus.js | 26 + .../TextInput/examples/PropEditable.js | 20 + .../TextInput/examples/PropKeyboardType.js | 33 + .../TextInput/examples/PropMaxLength.js | 25 + .../TextInput/examples/PropMultiline.js | 15 + .../TextInput/examples/PropNumberOfLines.js | 25 + .../TextInput/examples/PropOnBlur.js | 12 + .../TextInput/examples/PropOnChange.js | 12 + .../TextInput/examples/PropOnChangeText.js | 12 + .../TextInput/examples/PropOnFocus.js | 12 + .../TextInput/examples/PropOnKeyPress.js | 12 + .../examples/PropOnSelectionChange.js | 121 +++ .../TextInput/examples/PropOnSubmitEditing.js | 12 + .../TextInput/examples/PropPlaceholder.js | 15 + .../TextInput/examples/PropSecureTextEntry.js | 17 + .../examples/PropSelectTextOnFocus.js | 26 + .../TextInput/examples/PropSelection.js | 12 + .../TextInput/examples/PropStyle.js | 12 + .../components/TextInput/examples/Rewrite.js | 69 ++ .../TextInput/examples/TextInputEvents.js | 71 ++ .../storybook/components/TextInput/helpers.js | 60 ++ .../components/Touchable/TouchableExample.js | 549 ------------ .../Touchable/TouchableHighlightDocs.js | 89 ++ .../Touchable/TouchableOpacityDocs.js | 71 ++ .../Touchable/TouchableWithoutFeedbackDocs.js | 105 +++ .../examples/CustomStyleOverrides.js | 60 ++ .../Touchable/examples/PropDisabled.js | 81 ++ .../Touchable/examples/PropHitSlop.js | 65 ++ .../components/Touchable/examples/legacy.js | 246 +++++ docs/storybook/components/View/ViewDocs.js | 748 ++++++++++++++++ .../View/examples/PropPointerEvents.js | 25 + .../components/View/examples/PropStyle.js | 10 + .../components/View/examples/ZIndex.js | 68 ++ .../{ViewExample.js => examples/legacy.js} | 126 +-- .../transforms.js} | 12 +- docs/storybook/components/View/helpers.js | 7 + docs/storybook/ui-explorer/AppText.js | 31 + docs/storybook/ui-explorer/Code.js | 16 + docs/storybook/ui-explorer/DocItem.js | 85 ++ docs/storybook/ui-explorer/StyleList.js | 45 + docs/storybook/ui-explorer/TextList.js | 38 + docs/storybook/ui-explorer/UIExplorer.js | 82 ++ docs/storybook/ui-explorer/index.js | 13 + package.json | 3 +- yarn.lock | 275 ++---- 142 files changed, 6880 insertions(+), 3497 deletions(-) create mode 100644 docs/storybook/.storybook/addons.js delete mode 100644 docs/storybook/UIExplorer.js create mode 100644 docs/storybook/apis/AppRegistry/AppRegistryDocs.js create mode 100644 docs/storybook/apis/AppState/AppStateDocs.js create mode 100644 docs/storybook/apis/AppState/examples/StateChanges.js create mode 100644 docs/storybook/apis/AsyncStorage/AsyncStorageDocs.js create mode 100644 docs/storybook/apis/Clipboard/ClipboardDocs.js delete mode 100644 docs/storybook/apis/Clipboard/ClipboardExample.js create mode 100644 docs/storybook/apis/Clipboard/examples/SetString.js create mode 100644 docs/storybook/apis/Dimensions/DimensionsDocs.js create mode 100644 docs/storybook/apis/I18nManager/I18nManagerDocs.js delete mode 100644 docs/storybook/apis/I18nManager/I18nManagerExample.js create mode 100644 docs/storybook/apis/I18nManager/examples/RTLToggle.js create mode 100644 docs/storybook/apis/Linking/LinkingDocs.js delete mode 100644 docs/storybook/apis/Linking/LinkingExample.js create mode 100644 docs/storybook/apis/Linking/examples/OpenURL.js create mode 100644 docs/storybook/apis/NetInfo/NetInfoDocs.js create mode 100644 docs/storybook/apis/PanResponder/PanResponderDocs.js rename docs/storybook/apis/PanResponder/{PanResponderExample.js => examples/DraggableCircle.js} (56%) create mode 100644 docs/storybook/apis/PixelRatio/PixelRatioDocs.js create mode 100644 docs/storybook/apis/Platform/PlatformDocs.js create mode 100644 docs/storybook/apis/StyleSheet/StyleSheetDocs.js create mode 100644 docs/storybook/apis/Vibration/VibrationDocs.js create mode 100644 docs/storybook/components/ActivityIndicator/ActivityIndicatorDocs.js delete mode 100644 docs/storybook/components/ActivityIndicator/ActivityIndicatorExample.js create mode 100644 docs/storybook/components/ActivityIndicator/examples/PropAnimating.js create mode 100644 docs/storybook/components/ActivityIndicator/examples/PropColor.js create mode 100644 docs/storybook/components/ActivityIndicator/examples/PropHidesWhenStopped.js create mode 100644 docs/storybook/components/ActivityIndicator/examples/PropSize.js create mode 100644 docs/storybook/components/Button/ButtonDocs.js delete mode 100644 docs/storybook/components/Button/ButtonExample.js create mode 100644 docs/storybook/components/Button/examples/PropColor.js create mode 100644 docs/storybook/components/Button/examples/PropDisabled.js create mode 100644 docs/storybook/components/Button/examples/PropOnPress.js create mode 100644 docs/storybook/components/Button/helpers.js create mode 100644 docs/storybook/components/Image/ImageDocs.js delete mode 100644 docs/storybook/components/Image/ImageExample.js create mode 100644 docs/storybook/components/Image/examples/MultipleSources.js create mode 100644 docs/storybook/components/Image/examples/NetworkImage.js create mode 100644 docs/storybook/components/Image/examples/PropChildren.js create mode 100644 docs/storybook/components/Image/examples/PropDefaultSource.js create mode 100644 docs/storybook/components/Image/examples/PropDraggable.js create mode 100644 docs/storybook/components/Image/examples/PropOnError.js create mode 100644 docs/storybook/components/Image/examples/PropOnLoad.js create mode 100644 docs/storybook/components/Image/examples/PropOnLoadEnd.js create mode 100644 docs/storybook/components/Image/examples/PropOnLoadStart.js create mode 100644 docs/storybook/components/Image/examples/PropResizeMode.js create mode 100644 docs/storybook/components/Image/examples/PropSource.js create mode 100644 docs/storybook/components/Image/examples/StaticGetSize.js create mode 100644 docs/storybook/components/Image/examples/StaticPrefetch.js create mode 100644 docs/storybook/components/Image/helpers.js rename docs/storybook/components/Image/{ => sources}/bunny.png (100%) create mode 100644 docs/storybook/components/Image/sources/index.js rename docs/storybook/components/Image/{ => sources}/uie_thumb_normal@2x.png (100%) rename docs/storybook/components/Image/{ => sources}/uie_thumb_selected@2x.png (100%) delete mode 100644 docs/storybook/components/ProgressBar/ProgressBarExample.js create mode 100644 docs/storybook/components/ProgressBar/ProgressDocs.js create mode 100644 docs/storybook/components/ProgressBar/examples/CustomSize.js create mode 100644 docs/storybook/components/ProgressBar/examples/PropColor.js create mode 100644 docs/storybook/components/ProgressBar/examples/PropIndeterminate.js create mode 100644 docs/storybook/components/ProgressBar/examples/PropProgress.js create mode 100644 docs/storybook/components/ProgressBar/examples/PropTrackColor.js create mode 100644 docs/storybook/components/ProgressBar/helpers.js create mode 100644 docs/storybook/components/ScrollView/ScrollViewDocs.js delete mode 100644 docs/storybook/components/ScrollView/ScrollViewExample.js create mode 100644 docs/storybook/components/ScrollView/examples/Horizontal.js create mode 100644 docs/storybook/components/ScrollView/examples/ScrollTo.js create mode 100644 docs/storybook/components/ScrollView/examples/ScrollToEnd.js create mode 100644 docs/storybook/components/Switch/SwitchDocs.js delete mode 100644 docs/storybook/components/Switch/SwitchExample.js create mode 100644 docs/storybook/components/Switch/examples/CustomSize.js create mode 100644 docs/storybook/components/Switch/examples/PropActiveThumbColor.js create mode 100644 docs/storybook/components/Switch/examples/PropActiveTrackColor.js create mode 100644 docs/storybook/components/Switch/examples/PropDisabled.js create mode 100644 docs/storybook/components/Switch/examples/PropOnValueChange.js create mode 100644 docs/storybook/components/Switch/examples/PropThumbColor.js create mode 100644 docs/storybook/components/Switch/examples/PropTrackColor.js create mode 100644 docs/storybook/components/Switch/examples/PropValue.js create mode 100644 docs/storybook/components/Switch/helpers.js create mode 100644 docs/storybook/components/Text/TextDocs.js create mode 100644 docs/storybook/components/Text/examples/PropChildren.js create mode 100644 docs/storybook/components/Text/examples/PropNumberOfLines.js create mode 100644 docs/storybook/components/Text/examples/PropOnLayout.js create mode 100644 docs/storybook/components/Text/examples/PropOnPress.js create mode 100644 docs/storybook/components/Text/examples/PropSelectable.js rename docs/storybook/components/Text/{TextExample.js => examples/legacy.js} (75%) create mode 100644 docs/storybook/components/TextInput/TextInputDocs.js delete mode 100644 docs/storybook/components/TextInput/TextInputExample.js create mode 100644 docs/storybook/components/TextInput/examples/AutoExpandingTextInput.js create mode 100644 docs/storybook/components/TextInput/examples/PropAutoCapitalize.js create mode 100644 docs/storybook/components/TextInput/examples/PropAutoFocus.js create mode 100644 docs/storybook/components/TextInput/examples/PropBlurOnSubmit.js create mode 100644 docs/storybook/components/TextInput/examples/PropClearButtonMode.js create mode 100644 docs/storybook/components/TextInput/examples/PropClearTextOnFocus.js create mode 100644 docs/storybook/components/TextInput/examples/PropEditable.js create mode 100644 docs/storybook/components/TextInput/examples/PropKeyboardType.js create mode 100644 docs/storybook/components/TextInput/examples/PropMaxLength.js create mode 100644 docs/storybook/components/TextInput/examples/PropMultiline.js create mode 100644 docs/storybook/components/TextInput/examples/PropNumberOfLines.js create mode 100644 docs/storybook/components/TextInput/examples/PropOnBlur.js create mode 100644 docs/storybook/components/TextInput/examples/PropOnChange.js create mode 100644 docs/storybook/components/TextInput/examples/PropOnChangeText.js create mode 100644 docs/storybook/components/TextInput/examples/PropOnFocus.js create mode 100644 docs/storybook/components/TextInput/examples/PropOnKeyPress.js create mode 100644 docs/storybook/components/TextInput/examples/PropOnSelectionChange.js create mode 100644 docs/storybook/components/TextInput/examples/PropOnSubmitEditing.js create mode 100644 docs/storybook/components/TextInput/examples/PropPlaceholder.js create mode 100644 docs/storybook/components/TextInput/examples/PropSecureTextEntry.js create mode 100644 docs/storybook/components/TextInput/examples/PropSelectTextOnFocus.js create mode 100644 docs/storybook/components/TextInput/examples/PropSelection.js create mode 100644 docs/storybook/components/TextInput/examples/PropStyle.js create mode 100644 docs/storybook/components/TextInput/examples/Rewrite.js create mode 100644 docs/storybook/components/TextInput/examples/TextInputEvents.js create mode 100644 docs/storybook/components/TextInput/helpers.js delete mode 100644 docs/storybook/components/Touchable/TouchableExample.js create mode 100644 docs/storybook/components/Touchable/TouchableHighlightDocs.js create mode 100644 docs/storybook/components/Touchable/TouchableOpacityDocs.js create mode 100644 docs/storybook/components/Touchable/TouchableWithoutFeedbackDocs.js create mode 100644 docs/storybook/components/Touchable/examples/CustomStyleOverrides.js create mode 100644 docs/storybook/components/Touchable/examples/PropDisabled.js create mode 100644 docs/storybook/components/Touchable/examples/PropHitSlop.js create mode 100644 docs/storybook/components/Touchable/examples/legacy.js create mode 100644 docs/storybook/components/View/ViewDocs.js create mode 100644 docs/storybook/components/View/examples/PropPointerEvents.js create mode 100644 docs/storybook/components/View/examples/PropStyle.js create mode 100644 docs/storybook/components/View/examples/ZIndex.js rename docs/storybook/components/View/{ViewExample.js => examples/legacy.js} (56%) rename docs/storybook/components/View/{ViewTransformsExample.js => examples/transforms.js} (90%) create mode 100644 docs/storybook/components/View/helpers.js create mode 100644 docs/storybook/ui-explorer/AppText.js create mode 100644 docs/storybook/ui-explorer/Code.js create mode 100644 docs/storybook/ui-explorer/DocItem.js create mode 100644 docs/storybook/ui-explorer/StyleList.js create mode 100644 docs/storybook/ui-explorer/TextList.js create mode 100644 docs/storybook/ui-explorer/UIExplorer.js create mode 100644 docs/storybook/ui-explorer/index.js diff --git a/README.md b/README.md index 0eb9728e..493b7c8f 100644 --- a/README.md +++ b/README.md @@ -32,10 +32,13 @@ npm install --save react@15.6 react-dom@15.6 react-native-web NOTE: React Native for Web supports React/ReactDOM 15.4, 15.5, or 15.6. -Read the [Getting Started](docs/guides/getting-started.md) guide. +Then read the [Getting Started](docs/guides/getting-started.md) guide. ## Documentation +The [UI Explorer](https://necolas.github.io/react-native-web/storybook/) +interactively documents all the APIs and Components. + Guides: * [Getting started](docs/guides/getting-started.md) @@ -46,36 +49,6 @@ Guides: * [Advanced use](docs/guides/advanced.md) * [Known issues](docs/guides/known-issues.md) -Exported modules: - -* Components - * [`ActivityIndicator`](docs/components/ActivityIndicator.md) - * [`Button`](docs/components/Button.md) - * [`Image`](docs/components/Image.md) - * [`ProgressBar`](docs/components/ProgressBar.md) - * [`ScrollView`](docs/components/ScrollView.md) - * [`Switch`](docs/components/Switch.md) - * [`Text`](docs/components/Text.md) - * [`TextInput`](docs/components/TextInput.md) - * [`TouchableHighlight`](http://facebook.github.io/react-native/releases/0.22/docs/touchablehighlight.html) (mirrors React Native) - * [`TouchableOpacity`](http://facebook.github.io/react-native/releases/0.22/docs/touchableopacity.html) (mirrors React Native) - * [`TouchableWithoutFeedback`](docs/components/TouchableWithoutFeedback.md) - * [`View`](docs/components/View.md) -* APIs - * [`Animated`](http://facebook.github.io/react-native/releases/0.20/docs/animated.html) (mirrors React Native) - * [`AppRegistry`](docs/apis/AppRegistry.md) - * [`AppState`](docs/apis/AppState.md) - * [`AsyncStorage`](docs/apis/AsyncStorage.md) - * [`Clipboard`](docs/apis/Clipboard.md) - * [`Dimensions`](docs/apis/Dimensions.md) - * [`I18nManager`](docs/apis/I18nManager.md) - * [`NetInfo`](docs/apis/NetInfo.md) - * [`PanResponder`](http://facebook.github.io/react-native/releases/0.20/docs/panresponder.html#content) (mirrors React Native) - * [`PixelRatio`](docs/apis/PixelRatio.md) - * [`Platform`](docs/apis/Platform.md) - * [`StyleSheet`](docs/apis/StyleSheet.md) - * [`Vibration`](docs/apis/Vibration.md) - ## Example code ```js @@ -121,6 +94,7 @@ AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-ro * [react-native-web-player](https://github.com/dabbott/react-native-web-player) * [react-native-web-starter](https://github.com/grabcode/react-native-web-starter) * [react-native-web-webpack](https://github.com/ndbroadbent/react-native-web-webpack) +* [react-sketchapp](https://github.com/airbnb/react-sketchapp) * [react-web](https://github.com/taobaofed/react-web) * [reactxp](https://github.com/microsoft/reactxp) diff --git a/docs/apis/NetInfo.md b/docs/apis/NetInfo.md index a2fdf7f4..479e3391 100644 --- a/docs/apis/NetInfo.md +++ b/docs/apis/NetInfo.md @@ -32,7 +32,7 @@ static **removeEventListener**(eventName: ChangeEventName, handler: Function) **isConnected**: bool = true Available on all user agents. Asynchronously fetch a boolean to determine -internet connectivity. +internet connectivity. Use this if you are only interested with whether the device has internet connectivity. **isConnected.addEventListener**(eventName: ChangeEventName, handler: Function) diff --git a/docs/storybook/.storybook/addons.js b/docs/storybook/.storybook/addons.js new file mode 100644 index 00000000..5f71001b --- /dev/null +++ b/docs/storybook/.storybook/addons.js @@ -0,0 +1 @@ +import '@kadira/storybook-addon-options/register'; diff --git a/docs/storybook/.storybook/config.js b/docs/storybook/.storybook/config.js index 1c8c7859..0eed4a77 100644 --- a/docs/storybook/.storybook/config.js +++ b/docs/storybook/.storybook/config.js @@ -1,10 +1,21 @@ -import { configure, addDecorator } from '@kadira/storybook'; +import { setOptions } from '@kadira/storybook-addon-options'; import centered from './decorator-centered'; +import { configure, addDecorator } from '@kadira/storybook'; -const context = require.context('../', true, /Example\.js$/); +const context = require.context('../', true, /Docs\.js$/); addDecorator(centered); +setOptions({ + name: 'React Native Web', + url: 'https://necolas.github.io/react-native-web', + goFullScreen: false, + showLeftPanel: true, + showDownPanel: false, + showSearchBox: false, + downPanelInRight: false +}); + function loadStories() { context.keys().forEach(context); } diff --git a/docs/storybook/.storybook/decorator-centered.js b/docs/storybook/.storybook/decorator-centered.js index 2ef5befb..643591f9 100644 --- a/docs/storybook/.storybook/decorator-centered.js +++ b/docs/storybook/.storybook/decorator-centered.js @@ -3,7 +3,9 @@ import { StyleSheet, View } from 'react-native'; const styles = StyleSheet.create({ root: { - minHeight: '100vh' + minHeight: '100vh', + maxWidth: 680, + marginHorizontal: 'auto' } }); diff --git a/docs/storybook/UIExplorer.js b/docs/storybook/UIExplorer.js deleted file mode 100644 index 17765541..00000000 --- a/docs/storybook/UIExplorer.js +++ /dev/null @@ -1,84 +0,0 @@ -/* eslint-disable react/prop-types */ - -import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; - -/** - * Examples explorer - */ -const AppText = ({ style, ...rest }) => ; -const Link = ({ uri }) => - - API documentation - ; -const Title = ({ children }) => {children}; -const Description = ({ children }) => {children}; - -const Example = ({ example: { description, render, title } }) => - - {title} - {description && {description}} - {render && - - Example - {render()} - } - ; - -const UIExplorer = ({ description, examples, title, url }) => - - {title} - {description && {description}} - {url && } - {examples.map((example, i) => )} - ; - -const styles = StyleSheet.create({ - root: { - padding: '1rem', - flex: 1 - }, - baseText: { - fontFamily: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif, ' + - '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', // emoji fonts - lineHeight: '1.3125em' - }, - title: { - fontSize: '2rem' - }, - description: { - color: '#657786', - fontSize: '1.3125rem', - marginTop: 'calc(0.5 * 1.3125rem)' - }, - link: { - color: '#1B95E0', - marginTop: 'calc(0.5 * 1.3125rem)' - }, - example: { - marginTop: 'calc(2 * 1.3125rem)' - }, - exampleTitle: { - fontSize: '1.3125rem' - }, - exampleDescription: { - fontSize: '1rem', - marginTop: 'calc(0.5 * 1.3125rem)' - }, - exampleRenderBox: { - borderColor: '#E6ECF0', - borderWidth: 1, - padding: '1.3125rem', - marginTop: '1.3125rem' - }, - exampleText: { - color: '#AAB8C2', - fontSize: '0.8rem', - fontWeight: 'bold', - marginBottom: 'calc(0.5 * 1.3125rem)', - textTransform: 'uppercase' - } -}); - -export default UIExplorer; diff --git a/docs/storybook/apis/AppRegistry/AppRegistryDocs.js b/docs/storybook/apis/AppRegistry/AppRegistryDocs.js new file mode 100644 index 00000000..d78996f7 --- /dev/null +++ b/docs/storybook/apis/AppRegistry/AppRegistryDocs.js @@ -0,0 +1,107 @@ +/** + * @flow + */ + +import React from 'react'; +import { storiesOf } from '@kadira/storybook'; +import UIExplorer, { AppText, Code, DocItem } from '../../ui-explorer'; + +const sections = [ + { + title: 'Methods', + entries: [ + , + + + Register multiple applications. AppConfig is of type + {'{ appKey: string; component: ComponentProvider; run?: Function }'}. + + } + name="static registerConfig" + typeInfo="(config: Array) => avoid" + />, + + Register a component provider under the given appKey. + } + example={{ + code: 'AppRegistry.registerComponent("MyApp", () => AppComponent)' + }} + name="static registerComponent" + typeInfo="(appKey: string, getComponentFunc: ComponentProvider) => void" + />, + + + Register a custom render function for an application. The + function will receive the appParameters passed + to runApplication. + + } + name="static registerRunnable" + typeInfo="(appKey: string, run: Function) => void" + />, + + , + + + Runs the application that was registered under appKey. The + appParameters must include the rootTag into which the + application is rendered, and optionally any initialProps. + + } + example={{ + code: `AppRegistry.runApplication('MyApp', { + initialProps: {}, + rootTag: document.getElementById('react-root') +})` + }} + name="static runApplication" + typeInfo="(appKey: string, appParameters?: object) => void" + />, + + + To "stop" an application when a view should be destroyed, call{' '} + AppRegistry.unmountApplicationComponentAtRootTag with the tag that was + passed into runApplication. + + } + name="static unmountApplicationComponentAtRootTag" + typeInfo="(rootTag: HTMLElement) => void" + /> + ] + } +]; + +storiesOf('APIs', module).add('AppRegistry', () => + + AppRegistry is the control point for registering, running, + prerendering, and unmounting all apps. App root components should + register themselves with AppRegistry.registerComponent. Apps can be + run by invoking AppRegistry.runApplication + + } + sections={sections} + title="AppRegistry" + url="apis/AppRegistry" + /> +); diff --git a/docs/storybook/apis/AppState/AppStateDocs.js b/docs/storybook/apis/AppState/AppStateDocs.js new file mode 100644 index 00000000..b7b747b6 --- /dev/null +++ b/docs/storybook/apis/AppState/AppStateDocs.js @@ -0,0 +1,80 @@ +/* eslint-disable react/jsx-sort-props */ + +/** + * @flow + */ + +import React from 'react'; +import StateChangesExample from './examples/StateChanges'; +import { storiesOf } from '@kadira/storybook'; +import UIExplorer, { AppText, Code, DocItem } from '../../ui-explorer'; + +const sections = [ + { + title: 'Properties', + entries: [ + , + + + ] + }, + { + title: 'Methods', + entries: [ + + Add a handler to AppState changes by listening to the + change event type and providing the handler. The + handler is called with the app state value. + + } + />, + + + Remove a handler by passing the change event type and the{' '} + handler. + + } + /> + ] + }, + { + title: 'Example', + entries: [ + + }} + /> + ] + } +]; + +storiesOf('APIs', module).add('AppState', () => + + AppState can tell you if the app is in the foreground or background, + and notify you when the state changes. States: active (the app is + running in the foreground), background (the app is running in the + background, i.e., the user has not focused the app's tab). + + } + sections={sections} + title="AppState" + url="apis/AppState" + /> +); diff --git a/docs/storybook/apis/AppState/examples/StateChanges.js b/docs/storybook/apis/AppState/examples/StateChanges.js new file mode 100644 index 00000000..f7167281 --- /dev/null +++ b/docs/storybook/apis/AppState/examples/StateChanges.js @@ -0,0 +1,39 @@ +/** + * @flow + */ + +import React, { PureComponent } from 'react'; +import { AppState, Text, View } from 'react-native'; + +export default class StateChanges extends PureComponent { + state = { + active: 0, + background: 0, + currentState: AppState.currentState + }; + + componentDidMount() { + AppState.addEventListener('change', this._handleAppStateChange); + } + + componentWillUnmount() { + AppState.removeEventListener('change', this._handleAppStateChange); + } + + _handleAppStateChange = currentState => { + this.setState(state => ({ + currentState, + [currentState]: state[currentState] + 1 + })); + }; + + render() { + return ( + + Active count: {this.state.active} + Background count: {this.state.background} + Current state is: {this.state.currentState} + + ); + } +} diff --git a/docs/storybook/apis/AsyncStorage/AsyncStorageDocs.js b/docs/storybook/apis/AsyncStorage/AsyncStorageDocs.js new file mode 100644 index 00000000..0af4796f --- /dev/null +++ b/docs/storybook/apis/AsyncStorage/AsyncStorageDocs.js @@ -0,0 +1,132 @@ +/** + * @flow + */ + +import React from 'react'; +import { storiesOf } from '@kadira/storybook'; +import UIExplorer, { AppText, Code, DocItem } from '../../ui-explorer'; + +const sections = [ + { + title: 'Methods', + entries: [ + + Erases all AsyncStorage. You probably don't want to call this - use + removeItem or multiRemove to clear only + your own keys instead. Returns a Promise object. + + } + name="static clear" + typeInfo="function" + />, + + , + + , + + , + + + multiGet results in an array of key-value pair arrays + that matches the input format of multiSet. Returns a + Promise object. + + } + example={{ + code: 'multiGet(["k1", "k2"]) -> [["k1", "val1"], ["k2", "val2"]]' + }} + name="static multiGet" + typeInfo="(keys: Array) => {}" + />, + + + multiMerge takes an array of key-value array pairs that match the output of{' '} + multiGet. + It merges existing values with input values, assuming they are stringified JSON. Returns + a Promise object. + + } + name="static multiMerge" + typeInfo="(keyValuePairs: Array>) => {}" + />, + + , + + + multiSet takes an array of key-value array pairs that + match the output of multiGet. Returns a Promise + object. + + } + example={{ + code: 'multiSet([["k1", "val1"], ["k2", "val2"]]);' + }} + name="static multiSet" + typeInfo="(keyValuePairs: Array>) => {}" + />, + + , + + + ] + } +]; + +storiesOf('APIs', module).add('AsyncStorage', () => + + AsyncStorage is a simple, unencrypted, asynchronous, persistent, + key-value storage system that is global to the domain. It's a facade + over, and should be used instead of window.localStorage to + provide an asynchronous API and multi functions. Each method returns + a Promise object. + , + + It is recommended that you use an abstraction on top + of AsyncStorage instead of AsyncStorage directly + for anything more than light usage since it operates globally. + , + + The batched functions are useful for executing a lot of operations at + once, allowing for optimizations to provide the convenience of a + single promise after all operations are complete. + + ]} + sections={sections} + title="AsyncStorage" + url="apis/AsyncStorage" + /> +); diff --git a/docs/storybook/apis/Clipboard/ClipboardDocs.js b/docs/storybook/apis/Clipboard/ClipboardDocs.js new file mode 100644 index 00000000..8cbdf6ea --- /dev/null +++ b/docs/storybook/apis/Clipboard/ClipboardDocs.js @@ -0,0 +1,49 @@ +/** + * @flow + */ + +import React from 'react'; +import SetStringExample from './examples/SetString'; +import { storiesOf } from '@kadira/storybook'; +import UIExplorer, { DocItem } from '../../ui-explorer'; + +const sections = [ + { + title: 'Methods', + entries: [ + , + + + }} + name="static setString" + typeInfo="(string) => boolean" + />, + + + ] + } +]; + +storiesOf('APIs', module).add('Clipboard', () => + +); diff --git a/docs/storybook/apis/Clipboard/ClipboardExample.js b/docs/storybook/apis/Clipboard/ClipboardExample.js deleted file mode 100644 index 9133900a..00000000 --- a/docs/storybook/apis/Clipboard/ClipboardExample.js +++ /dev/null @@ -1,61 +0,0 @@ -import { storiesOf } from '@kadira/storybook'; -import UIExplorer from '../../UIExplorer'; -import { Button, Clipboard, StyleSheet, TextInput, View } from 'react-native'; -import React, { Component } from 'react'; - -const styles = StyleSheet.create({ - buttonBox: { - maxWidth: 300 - }, - textInput: { - borderColor: '#AAB8C2', - borderWidth: 1, - height: 200, - marginTop: 20, - padding: 10 - } -}); - -class ClipboardExample extends Component { - render() { - return ( - - -