Skip to content

Instantly share code, notes, and snippets.

Mike Cavaliere mcavaliere

Block or report user

Report or block mcavaliere

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@mcavaliere
mcavaliere / rn-design-systems-clean-component.js
Last active Apr 25, 2018
React Native Design Systems: A Cleaner Component
View rn-design-systems-clean-component.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Styles from './Card.style';
class Card extends Component {
render() {
return (
<View style={ Styles.container }>
<View style={ Styles.titleContainer }>
@mcavaliere
mcavaliere / rn-design-systems-component-styles.js
Last active Apr 25, 2018
React Native Design Systems: Component Styles
View rn-design-systems-component-styles.js
import Constants from '../../global/constants';
import Colors from '../../global/styles/colors';
import Typography from '../../global/styles/typography';
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
titleContainer: {
backgroundColor: Colors.green,
padding: Constants.GAP
},
@mcavaliere
mcavaliere / rn-design-systems-color-constants.js
Last active Apr 25, 2018
React Native Design Systems: Color Constants
View rn-design-systems-color-constants.js
import Constants from '../constants';
export default const Colors = {
black: {
default: '#232323',
absolute: '#000000'
},
white: {
default: '#ffffff'
@mcavaliere
mcavaliere / rn-design-systems-messy-cascade.js
Last active Apr 25, 2018
React Native Design Systems: Messy Cascading Example
View rn-design-systems-messy-cascade.js
class MessyCardComponent extends Component {
render() {
return (
<View style={[ CardComponentStyles.container, LayoutStyles.wideMargin, GlobalStyles.shadedBox ]}>
<View style={[ CardComponentStyles.headingBar, LayoutStyles.smPadding, BackgroundColors.mediumGreen ]}>
<Text style={[ TypographyStyles.heading1, Colors.textAbsoluteBlack ]}>{ this.props.title }</Text>
</View>
<View style={[ CardComponentStyles.contentContainer, BackgroundColors.offWhite ]}>
<Text style={[ TypographyStyles.bodyText, Colors.textAbsoluteBlack ]}>{ this.props.children }</Text>
</View>
@mcavaliere
mcavaliere / rn-design-systems-simple-component-with-cascade.js
Last active Apr 25, 2018
React Native Design Systems: SimpleComponentWithCascade
View rn-design-systems-simple-component-with-cascade.js
class SimpleComponentWithCascade extends Component {
render() {
return (
<View style={[ ComponentStyles.container, LayoutStyles.marginBottom ]}>
<View style={[ ComponentStyles.heading, LayoutStyles.paddingSm ]}>
<Text style={[ ComponentStyles.headingText, TypographyStyles.heading3, TextColors.black ]}>{ this.props.title }</Text>
</View>
<View style={[ ComponentStyles.body, LayoutStyles.paddingSm ]}>
<Text style={[ ComponentStyles.bodyText, TypographyStyles.bodyText, TextColors.darkGrey ]}>{ this.props.bodyText }</Text>
</View>
@mcavaliere
mcavaliere / rn-design-systems-simple-component-without-literals.js
Last active Apr 25, 2018
React Native Design Systems: SimpleComponentWithoutLiterals
View rn-design-systems-simple-component-without-literals.js
let Style = StyleSheet.create({
container: { borderRadius: 5 },
heading: { backgroundColor: 'beige', padding: 5 },
headingText: { color: 'black', fontSize: 16, fontWeight: 'bold' },
body: { padding: 5 },
bodyText: { color: 'black', fontSize: 12 }
})
class SimpleComponentWithoutLiterals extends Component {
render() {
@mcavaliere
mcavaliere / rn-design-systems-simple-component.js
Last active Apr 25, 2018
React Native Design Systems: SimpleComponent
View rn-design-systems-simple-component.js
class SimpleComponent extends Component {
render() {
return (
<View style={{ borderRadius: 5 }}>
<View style={{ backgroundColor: 'beige', padding: 5 }}>
<Text style={{ color: 'black', fontSize: 16, fontWeight: 'bold' }}>{ this.props.title }</Text>
</View>
<View style={{ padding: 5 }}>
<Text style={{ color: 'black', fontSize: 12 }}>{ this.props.bodyText }</Text>
</View>
View namespacing-utilities-usage.js
// /javascripts/myapp/ui/fancyslider.js
MyApp.ns("MyApp.UI.FancySlider");
MyApp.UI.FancySlider = function() {
// ...
};
View namespacing-utilities.js
var MyApp = {};
MyApp.namespace = function() {
var ln = arguments.length, i, value, split, x, xln, parts, object;
for (i = 0; i &lt; ln; i++) {
value = arguments[i];
parts = value.split(".");
object = window[parts[0]] = Object(window[parts[0]]);
View namespacing-strategy.js
// Top level. All reusable code goes somewhere under this main object.
var MyApp = {};
// Widgets, and any components that manipulate the DOM.
MyApp.UI = {};
// Classes that have reusable logic or calculation.
MyApp.Lib = {};
// Custom code that works with external javascript libraries in a reusable way.
You can’t perform that action at this time.