necolas

'use strict';

/**
 * Base component driver
 *
 * Related docs:
 *   https://theintern.github.io/leadfoot/Command.html
 *   https://theintern.github.io/leadfoot/Element.html
 *
 * @param {leadfoot/Command} remote

necolas

.abcd {
  align-items: center;
}

.efgh {
  background: blue;
}

.ijkl {
  color: red;

necolas

import React from 'react';
import styles from './styles.css.js';

class Button extends React.Component{
  render() {
    return (
      <button className={styles.button}>
        <span className={styles.icon} />
        Button
      </button>

necolas

import ReactWebStyle, {WebComponent} from 'react-web-style';
import React, {PropTypes} from 'react';

import {Text, View} from 'react-web-sdk';

const styles = {
  root: {
    borderColor: 'red',
    padding: '10px',
    position: 'absolute',

necolas

import styles from './styles.css';
import testIDs from './testIDs';

export render = (text) => (
  <button className={styles.button} data-test-id={testsIDs.button}>
    <span className={styles.icon}></span>
    {text}
  </button>
);

necolas

/**
 * This module is aliased to 'react-native' in our webpack config.
 
 * RNW currently uses inline styles. Our existing CSS – written using `css-modules`
 * and processed by `post-css` – needs to override RNW's default component styles
 * when RNW is being used to render the app. A postcss transform was added to our
 * webpack config to append `!important` to (almost) every CSS declaration.
 */

import findNodeHandle from 'react-native-web/dist/modules/findNodeHandle';

necolas

import createHoverMonitor from './createHoverMonitor';
import { element, func, oneOfType } from 'prop-types';
import React, { Component } from 'react';

const hover = createHoverMonitor();

/**
 * Use:
 * <Hoverable>
 *   {(hover) => <View style={hover && styles.hovered} />}

necolas

import i18n from './i18n';
import theme from './theme';
import { bool, string } from 'prop-types';
import { I18nManager, StyleSheet, Text } from 'react-native';
import React, { Component } from 'react';

/**
 * React Component
 */
class AppText extends Component {

necolas

import NextLink from 'next/link';
import React from 'react';
import { Text } from 'react-native-web';

// https://github.com/zeit/next.js#with-link
// Combines the Next.js <Link> with React Native's <Text> component.
// Enables use like this:
//
//    <Link
//      href={href}

necolas

/**
 * OnLayout is built upon: View (and ResizeObserver), StyleSheet
 */
 
const elementBreakpoints = {
  small: { minWidth: 200 },
  medium: { minWidth: 300 }
  large: { minWidth: 500 }
};