New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
ignite-dev-screens
Advanced tools
ignite-dev-screens - npm Package Compare versions
Comparing version 2.3.1 to 2.4.0
| { | ||
| "name": "ignite-dev-screens", | ||
| "version": "2.3.1", | ||
| "version": "2.4.0", | ||
| "license": "MIT", | ||
@@ -5,0 +5,0 @@ "files": [ |
@@ -73,16 +73,18 @@ import React from 'react' | ||
| <ScrollView style={styles.container} ref='container'> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.api} style={styles.logo} /> | ||
| <Text style={styles.titleText}>API</Text> | ||
| <View style={styles.scrollContent}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.api} style={styles.logo} /> | ||
| <Text style={styles.titleText}>API</Text> | ||
| </View> | ||
| <View style={styles.section}> | ||
| <Text style={styles.sectionText}> | ||
| Testing API with Postman or APIary.io verifies the server works. | ||
| The API Test screen is the next step; a simple in-app way to verify and debug your in-app API functions. | ||
| </Text> | ||
| <Text style={styles.sectionText}> | ||
| Create new endpoints in Services/Api.js then add example uses to endpoints array in Containers/APITestingScreen.js | ||
| </Text> | ||
| </View> | ||
| {this.renderButtons()} | ||
| </View> | ||
| <View style={styles.section}> | ||
| <Text style={styles.sectionText}> | ||
| Testing API with Postman or APIary.io verifies the server works. | ||
| The API Test screen is the next step; a simple in-app way to verify and debug your in-app API functions. | ||
| </Text> | ||
| <Text style={styles.sectionText}> | ||
| Create new endpoints in Services/Api.js then add example uses to endpoints array in Containers/APITestingScreen.js | ||
| </Text> | ||
| </View> | ||
| {this.renderButtons()} | ||
| <APIResult ref='result' /> | ||
@@ -89,0 +91,0 @@ </ScrollView> |
@@ -36,17 +36,18 @@ // An All Components Screen is a great way to dev and quick-test components | ||
| <ScrollView showsVerticalScrollIndicator={false} style={styles.container}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.components} style={styles.logo} /> | ||
| <Text style={styles.titleText}>Components</Text> | ||
| <View style={styles.scrollContent}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.components} style={styles.logo} /> | ||
| <Text style={styles.titleText}>Components</Text> | ||
| </View> | ||
| <View style={styles.description}> | ||
| {this.renderAndroidWarning()} | ||
| <Text style={styles.sectionText}> | ||
| Sometimes called a 'Style Guide', or 'Pattern Library', Examples Screen is filled with usage examples | ||
| of fundamental components for a given application. Use this merge-friendly way for your team | ||
| to show/use/test components. Examples are registered inside each component's file for quick changes and usage identification. | ||
| </Text> | ||
| </View> | ||
| {ExamplesRegistry.renderComponentExamples()} | ||
| </View> | ||
| <View style={styles.description}> | ||
| {this.renderAndroidWarning()} | ||
| <Text style={styles.sectionText}> | ||
| Sometimes called a 'Style Guide', or 'Pattern Library', Examples Screen is filled with usage examples | ||
| of fundamental components for a given application. Use this merge-friendly way for your team | ||
| to show/use/test components. Examples are registered inside each component's file for quick changes and usage identification. | ||
| </Text> | ||
| </View> | ||
| {ExamplesRegistry.renderComponentExamples()} | ||
| </ScrollView> | ||
@@ -53,0 +54,0 @@ </View> |
@@ -132,17 +132,19 @@ // An All Components Screen is a great way to dev and quick-test components | ||
| <ScrollView style={styles.container}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.deviceInfo} style={styles.logo} /> | ||
| <Text style={styles.titleText}>Device Info</Text> | ||
| <View style={styles.scrollContent}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.deviceInfo} style={styles.logo} /> | ||
| <Text style={styles.titleText}>Device Info</Text> | ||
| </View> | ||
| <View style={styles.section}> | ||
| <Text style={styles.sectionText} > | ||
| Dedicated to identifying specifics of the device. All info useful for identifying outlying behaviour specific to a device. | ||
| </Text> | ||
| </View> | ||
| <View style={{padding: 10}}> | ||
| {this.renderCard('Device Hardware', HARDWARE_DATA)} | ||
| {this.renderCard('Device OS', OS_DATA)} | ||
| {this.renderCard('App Info', APP_DATA)} | ||
| {this.renderCard('Net Info', this.netInfo())} | ||
| </View> | ||
| </View> | ||
| <View style={styles.section}> | ||
| <Text style={styles.sectionText} > | ||
| Dedicated to identifying specifics of the device. All info useful for identifying outlying behaviour specific to a device. | ||
| </Text> | ||
| </View> | ||
| <View style={{padding: 10}}> | ||
| {this.renderCard('Device Hardware', HARDWARE_DATA)} | ||
| {this.renderCard('Device OS', OS_DATA)} | ||
| {this.renderCard('App Info', APP_DATA)} | ||
| {this.renderCard('Net Info', this.netInfo())} | ||
| </View> | ||
| </ScrollView> | ||
@@ -149,0 +151,0 @@ </View> |
@@ -26,2 +26,5 @@ import Fonts from './Fonts' | ||
| }, | ||
| scrollContent: { | ||
| paddingBottom: 18 | ||
| }, | ||
| section: { | ||
@@ -28,0 +31,0 @@ margin: Metrics.section, |
@@ -21,34 +21,36 @@ // An All Components Screen is a great way to dev and quick-test components | ||
| <ScrollView showsVerticalScrollIndicator={false} style={styles.container}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.faq} style={styles.logo} /> | ||
| <Text style={styles.titleText}>FAQ</Text> | ||
| <View style={styles.scrollContent}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.faq} style={styles.logo} /> | ||
| <Text style={styles.titleText}>FAQ</Text> | ||
| </View> | ||
| <View style={styles.description}> | ||
| <Text style={styles.sectionText}> | ||
| Have questions? We direct you to answers. This is a small taste of where to get more information depending on what it is that you want to know. | ||
| </Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>What are these screens?</Text> | ||
| <Text style={styles.sectionText}>We like to use these screens when we develop apps. They are optional and out of the way to help you along your app creation process. Each screen has an explanation of what it provides. More info can be found on our website http://infinite.red/ignite</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>Got Docs?</Text> | ||
| <Text style={styles.sectionText}>The GitHub page has a docs folder that can help you from beginner to expert! We'll be working to release some instructional video docs as well.</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>I don't see the answer to my question in docs</Text> | ||
| <Text style={styles.sectionText}>Besides our docs, we have a friendly community Slack. Get an invite from http://community.infinite.red and you'll find a community of people in the #ignite channel ready to help!</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>What can I customize?</Text> | ||
| <Text style={styles.sectionText}>Everything! We're open source with MIT license. We also make it easy to change whatever you like. Check on our guides for making your very own plugins and boilerplates with Ignite.</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>I love you</Text> | ||
| <Text style={styles.sectionText}> | ||
| We love you, too. Don't forget to tweet us 😘 | ||
| @infinite_red OR @ir_ignite | ||
| </Text> | ||
| </View> | ||
| </View> | ||
| <View style={styles.description}> | ||
| <Text style={styles.sectionText}> | ||
| Have questions? We direct you to answers. This is a small taste of where to get more information depending on what it is that you want to know. | ||
| </Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>What are these screens?</Text> | ||
| <Text style={styles.sectionText}>We like to use these screens when we develop apps. They are optional and out of the way to help you along your app creation process. Each screen has an explanation of what it provides. More info can be found on our website http://infinite.red/ignite</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>Got Docs?</Text> | ||
| <Text style={styles.sectionText}>The GitHub page has a docs folder that can help you from beginner to expert! We'll be working to release some instructional video docs as well.</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>I don't see the answer to my question in docs</Text> | ||
| <Text style={styles.sectionText}>Besides our docs, we have a friendly community Slack. Get an invite from http://community.infinite.red and you'll find a community of people in the #ignite channel ready to help!</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>What can I customize?</Text> | ||
| <Text style={styles.sectionText}>Everything! We're open source with MIT license. We also make it easy to change whatever you like. Check on our guides for making your very own plugins and boilerplates with Ignite.</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>I love you</Text> | ||
| <Text style={styles.sectionText}> | ||
| We love you, too. Don't forget to tweet us 😘 | ||
| @infinite_red OR @ir_ignite | ||
| </Text> | ||
| </View> | ||
| </ScrollView> | ||
@@ -55,0 +57,0 @@ </View> |
@@ -6,3 +6,3 @@ // Fair Warning: PluginExamples has a good bit of Ignite automation in editing. | ||
| import { View, ScrollView, Text, TouchableOpacity, Image } from 'react-native' | ||
| import { StackNavigator } from 'react-navigation' | ||
| import { createStackNavigator } from 'react-navigation' | ||
| import { Images } from './DevTheme' | ||
@@ -12,2 +12,4 @@ | ||
| import ExamplesRegistry from '../../App/Services/ExamplesRegistry' | ||
| import '../Examples/Components/animatableExample.js' | ||
| import '../Examples/Components/vectorExample.js' | ||
@@ -31,17 +33,18 @@ // Styles | ||
| <ScrollView style={styles.container}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.usageExamples} style={styles.logo} /> | ||
| <Text style={styles.titleText}>Plugin Examples</Text> | ||
| </View> | ||
| <View style={styles.section}> | ||
| <Text style={styles.sectionText} > | ||
| The Plugin Examples screen is a playground for 3rd party libs and logic proofs. | ||
| Items on this screen can be composed of multiple components working in concert. Functionality demos of libs and practices | ||
| </Text> | ||
| </View> | ||
| <View style={styles.scrollContent}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.usageExamples} style={styles.logo} /> | ||
| <Text style={styles.titleText}>Plugin Examples</Text> | ||
| </View> | ||
| <View style={styles.section}> | ||
| <Text style={styles.sectionText} > | ||
| The Plugin Examples screen is a playground for 3rd party libs and logic proofs. | ||
| Items on this screen can be composed of multiple components working in concert. Functionality demos of libs and practices | ||
| </Text> | ||
| </View> | ||
| {ExamplesRegistry.renderPluginExamples()} | ||
| {ExamplesRegistry.renderPluginExamples()} | ||
| <View style={styles.screenButtons} /> | ||
| <View style={styles.screenButtons} /> | ||
| </View> | ||
| </ScrollView> | ||
@@ -53,3 +56,3 @@ </View> | ||
| export default StackNavigator({ | ||
| export default createStackNavigator({ | ||
| PluginExamplesScreen: {screen: PluginExamplesScreen} | ||
@@ -56,0 +59,0 @@ }, { |
@@ -5,3 +5,3 @@ import React from 'react' | ||
| import ButtonBox from './ButtonBox' | ||
| import { StackNavigator } from 'react-navigation' | ||
| import { createStackNavigator } from 'react-navigation' | ||
| // Screens | ||
@@ -85,3 +85,3 @@ import APITestingScreen from './APITestingScreen' | ||
| export default StackNavigator({ | ||
| export default createStackNavigator({ | ||
| PresentationScreen: {screen: PresentationScreen}, | ||
@@ -88,0 +88,0 @@ APITestingScreen: {screen: APITestingScreen}, |
@@ -66,26 +66,27 @@ import React from 'react' | ||
| <ScrollView style={styles.container}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.theme} style={styles.logo} /> | ||
| <Text style={styles.titleText}>Themes</Text> | ||
| </View> | ||
| <View style={styles.section} key='colors-header'> | ||
| <Text style={styles.sectionText} key='colors'>List of Theme specific settings. Auto-generated from Themes folder.</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>Colors</Text> | ||
| </View> | ||
| <View style={styles.colorsContainer}> | ||
| {this.renderColors()} | ||
| </View> | ||
| <View style={styles.scrollContent}> | ||
| <View style={{alignItems: 'center', paddingTop: 60}}> | ||
| <Image source={Images.theme} style={styles.logo} /> | ||
| <Text style={styles.titleText}>Themes</Text> | ||
| </View> | ||
| <View style={styles.section} key='colors-header'> | ||
| <Text style={styles.sectionText} key='colors'>List of Theme specific settings. Auto-generated from Themes folder.</Text> | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>Colors</Text> | ||
| </View> | ||
| <View style={styles.colorsContainer}> | ||
| {this.renderColors()} | ||
| </View> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>Fonts</Text> | ||
| </View> | ||
| {this.renderFonts()} | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>Fonts</Text> | ||
| </View> | ||
| {this.renderFonts()} | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>Styles</Text> | ||
| <View style={styles.sectionHeaderContainer}> | ||
| <Text style={styles.sectionHeader}>Styles</Text> | ||
| </View> | ||
| {this.renderStyles()} | ||
| </View> | ||
| {this.renderStyles()} | ||
| </ScrollView> | ||
@@ -92,0 +93,0 @@ </View> |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.1%
779997
- Lines of code
- increased by1.45%
1189
No dependency changes