Here's a working document of the proposed functionality and structure for rj so that we may "Command React".
❯ rj -h
rj, Command React
Usage
github-repositories REPO_NAME | sed 's/.* //' | xargs -L1 git clone |
import React from 'react' | |
import classNames from 'classnames' | |
export default ({ isLoading, className, ...otherProps }) => { | |
const cx = classNames(className, { 'bg-green': !isLoading }, { 'bg-yellow': isLoading }) | |
return <div className={cx} {...otherProps} /> | |
} |
{ | |
"title": "Full Bleed Background", | |
"slug": "If not the dasherized version of the title like it currently works, i.e., full-bleed-background", | |
"slug": "my-custom-slug", | |
"category": "article", | |
"featured": true, | |
"tags": [ | |
"long-form", | |
"content", | |
"image" |
.pa0 { padding: 0rem; } | |
.ma0 { margin: 0rem; } | |
.pl0 { padding-left: 0rem; } | |
.ml0 { margin-left: 0rem; } | |
.pr0 { padding-right: 0rem; } | |
.mr0 { margin-right: 0rem; } | |
.pt0 { padding-top: 0rem; } | |
.mt0 { margin-top: 0rem; } | |
.pb0 { padding-bottom: 0rem; } | |
.mb0 { margin-bottom: 0rem; } |
import Ember from 'ember'; | |
export default Ember.Mixin.create({ | |
kind: null, | |
classNameBindings: [ | |
'hasEmotion:white', | |
'hasEmotion:hover-white', | |
'hasEmotion:focus-white', | |
'isAngry:bg-bad', |
var fs = require('fs') | |
var _ = require('lodash') | |
var path = require('path') | |
var glob = require('glob') | |
var titleize = require('titleize') | |
var fm = require('json-front-matter') | |
var rmHtmlExt = require('remove-html-extension') | |
glob('src/components/**/*.html', {}, function (err, components) { | |
if (err) { |
var margin = { top: 50, right: 0, bottom: 100, left: 30 }, | |
width = 960 - margin.left - margin.right, | |
height = 430 - margin.top - margin.bottom, | |
gridSize = Math.floor(width / 24), | |
legendElementWidth = gridSize*2, | |
buckets = 9, | |
colors = ['#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494','#081d58'], // alternatively colorbrewer.YlGnBu[9] | |
days = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], | |
times = ['1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12a', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p', '12p']; |
Work in progress
Functional, unidirectional state management for React based on redux
.
redux
is great for predictably handling state but doesn't leverage Higher Order Components out of the box.
rehoc
provides functional, HOCs that can be used to cleanly "connect" your containers to state and action dispatchers.
<div class='mw6 center ph2 pv3 pv4-m pv5-l'> | |
<h2><%= @user.stripe_customer_token ? 'Change' : 'Add a' %> credit card</h2> | |
<%= form_tag @user, method: :put, id: 'payment-form' do %> | |
<span class="payment-errors"></span> | |
<div class="mt3"> | |
<label> | |
<span class="b db">Card Number</span> | |
<input type="text" size="20" data-stripe="number" class="pa2 input-reset ba bg-transparent"> |