Skip to content

Commit

Permalink
Added a vanilla React Native example app.
Browse files Browse the repository at this point in the history
For #1012. Includes storyshots and the use of addon-options
  • Loading branch information
tmeasday committed Jun 6, 2017
1 parent 77b68a5 commit 39892ea
Show file tree
Hide file tree
Showing 57 changed files with 3,134 additions and 0 deletions.
3 changes: 3 additions & 0 deletions examples/ReactNativeVanilla/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["react-native"]
}
6 changes: 6 additions & 0 deletions examples/ReactNativeVanilla/.buckconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

[android]
target = Google Inc.:Google APIs:23

[maven_repositories]
central = https://repo1.maven.org/maven2
47 changes: 47 additions & 0 deletions examples/ReactNativeVanilla/.flowconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*

; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
.*/Libraries/react-native/ReactNative.js

[include]

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow
flow/

[options]
emoji=true

module.system=haste

experimental.strict_type_args=true

munge_underscores=true

module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

unsafe.enable_getters_and_setters=true

[version]
^0.42.0
1 change: 1 addition & 0 deletions examples/ReactNativeVanilla/.gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*.pbxproj -text
53 changes: 53 additions & 0 deletions examples/ReactNativeVanilla/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
# OSX
#
.DS_Store

# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace

# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml

# node.js
#
node_modules/
npm-debug.log
yarn-error.log

# BUCK
buck-out/
\.buckd/
*.keystore

# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md

fastlane/report.xml
fastlane/Preview.html
fastlane/screenshots
1 change: 1 addition & 0 deletions examples/ReactNativeVanilla/.watchmanconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
151 changes: 151 additions & 0 deletions examples/ReactNativeVanilla/__tests__/__snapshots__/storyshots.js.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Button with some emoji 1`] = `
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#F5FCFF",
"flex": 1,
"justifyContent": "center",
}
}
>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
>
😀 😎 👍 💯
</Text>
</View>
</View>
`;

exports[`Storyshots Button with text 1`] = `
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#F5FCFF",
"flex": 1,
"justifyContent": "center",
}
}
>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"backgroundColor": "transparent",
},
undefined,
]
}
testID={undefined}
tvParallaxProperties={undefined}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
>
Hello Button
</Text>
</View>
</View>
`;

exports[`Storyshots Welcome to Storybook 1`] = `
<View
style={
Object {
"flex": 1,
"justifyContent": "center",
"padding": 24,
}
}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Object {
"fontSize": 18,
"marginBottom": 18,
}
}
>
Welcome to React Native Storybook
</Text>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Object {
"fontSize": 12,
"lineHeight": 18,
"marginBottom": 10,
}
}
>
This is a UI Component development environment for your React Native app. Here you can display and interact with your UI components as stories. A story is a single state of one or more UI components. You can have as many stories as you want. In other words a story is like a visual test case.
</Text>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Object {
"fontSize": 12,
"lineHeight": 18,
"marginBottom": 10,
}
}
>
We have added some stories inside the "storybook/stories" directory for examples. Try editing the "storybook/stories/Welcome.js" file to edit this message.
</Text>
</View>
`;
12 changes: 12 additions & 0 deletions examples/ReactNativeVanilla/__tests__/index.android.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import 'react-native';
import React from 'react';
import Index from '../index.android.js';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
const tree = renderer.create(
<Index />
);
});
12 changes: 12 additions & 0 deletions examples/ReactNativeVanilla/__tests__/index.ios.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import 'react-native';
import React from 'react';
import Index from '../index.ios.js';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
const tree = renderer.create(
<Index />
);
});
4 changes: 4 additions & 0 deletions examples/ReactNativeVanilla/__tests__/storyshots.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import path from 'path';
import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';

initStoryshots();
65 changes: 65 additions & 0 deletions examples/ReactNativeVanilla/android/app/BUCK
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
# To learn about Buck see [Docs](https://buckbuild.com/).
# To run your application with Buck:
# - install Buck
# - `npm start` - to start the packager
# - `cd android`
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
# - `buck install -r android/app` - compile, install and run application
#

lib_deps = []

for jarfile in glob(['libs/*.jar']):
name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
lib_deps.append(':' + name)
prebuilt_jar(
name = name,
binary_jar = jarfile,
)

for aarfile in glob(['libs/*.aar']):
name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
lib_deps.append(':' + name)
android_prebuilt_aar(
name = name,
aar = aarfile,
)

android_library(
name = "all-libs",
exported_deps = lib_deps,
)

android_library(
name = "app-code",
srcs = glob([
"src/main/java/**/*.java",
]),
deps = [
":all-libs",
":build_config",
":res",
],
)

android_build_config(
name = "build_config",
package = "com.reactnativevanilla",
)

android_resource(
name = "res",
package = "com.reactnativevanilla",
res = "src/main/res",
)

android_binary(
name = "app",
keystore = "//android/keystores:debug",
manifest = "src/main/AndroidManifest.xml",
package_type = "debug",
deps = [
":app-code",
],
)
Loading

0 comments on commit 39892ea

Please sign in to comment.