Stephen Way stephenway

## button-hooked.js
const styles = {
  button: {
    color: 'red'
  }
}

const Button = () => {
  const {classes} = useStyles(styles)
  return <button className={classes.button}>Test<Button>
}

## conditionalwrap.js
import React from 'react';

const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

const Header = ({shouldLinkToHome}) => (
  <div>
    <ConditionalWrap
      condition={shouldLinkToHome}
      wrap={children => <a href="/">{children}</a>}
    >

## AppBarWithTabs.js
import React from 'react'
import Router from 'next/router'
import AppBarMD from 'material-ui/AppBar'
import Tabs, { Tab } from 'material-ui/Tabs'

const routes = [
  '/',
  '/articles'
]

## README.md

      
              4 files
            
          
              2 forks
            
          
              13 comments
            
          
              34 stars
            
          
                marc-rutkowski
                / README.md
            
            
              Last active
              June 17, 2021 13:17
            
              
                react-storybook with react-boilerplate (content of the .storybook/ directory)
              
          
    react-storybook with react-boilerplate

Explains how to install and configure react-storybook into a project created from the react-boilerplate setup.
Intro

React-boilerplate (rbp) is a good starting point to create React apps, with a focus on performance, best practices and DX.
The community around the repository is amazing and a constant source of learning.

  
## cssImage.php
<?php

/*
Demos:
https://jsbin.com/gakudi/1/edit?output
https://jsbin.com/xunifo/edit?output

Usage:
php cssImage.php scale image output
*/

## dabblet.css
/**
 * Media query to detect full screen mode!
 * Y U NO WORK Chrome??
 * Firefox, you’re lovely.
 */

body {
	background: red;
	font: bold 400% Helvetica Neue, sans-serif;
	color: white;

## gulpfile.js
var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var harp        = require('harp');

/**
 * Serve the Harp Site from the src directory
 */
gulp.task('serve', function () {
  harp.server(__dirname + '/src', {

## gist:89e04beb7843b21c204a
<!doctype html>
<html>
	<head>
		<style>
			img:after { content: attr(data-small url); }

			@media screen and (min-width:400px) {
				img:after { content: attr(data-medium url); }
			}

## slurp.clj
(ns foo.core
  (:refer-clojure :exclude [slurp]))

(defmacro slurp [file]
  (clojure.core/slurp file))

;; In CLJS

(ns bar.core
  (:require [foo.core :include-macros true :refer [slurp]]))

## breakpoints.json
{
  "phone"  : "all and (max-width: 603px)",
  "desktop": "all and (min-width: 1025px)",
  "tablet" : "all and (min-width: 604px) and (max-width: 1024px)"
}
	const styles = {
	button: {
	color: 'red'
	}
	}

	const Button = () => {
	const {classes} = useStyles(styles)
	return <button className={classes.button}>Test<Button>
	}
	import React from 'react';

	const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

	const Header = ({shouldLinkToHome}) => (
	<div>
	<ConditionalWrap
	condition={shouldLinkToHome}
	wrap={children => <a href="/">{children}</a>}
	>
	import React from 'react'
	import Router from 'next/router'
	import AppBarMD from 'material-ui/AppBar'
	import Tabs, { Tab } from 'material-ui/Tabs'

	const routes = [
	'/',
	'/articles'
	]
	<?php

	/*
	Demos:
	https://jsbin.com/gakudi/1/edit?output
	https://jsbin.com/xunifo/edit?output

	Usage:
	php cssImage.php scale image output
	*/
	/**
	* Media query to detect full screen mode!
	* Y U NO WORK Chrome??
	* Firefox, you’re lovely.
	*/

	body {
	background: red;
	font: bold 400% Helvetica Neue, sans-serif;
	color: white;
	var gulp = require('gulp');
	var browserSync = require('browser-sync');
	var reload = browserSync.reload;
	var harp = require('harp');

	/**
	* Serve the Harp Site from the src directory
	*/
	gulp.task('serve', function () {
	harp.server(__dirname + '/src', {
	<!doctype html>
	<html>
	<head>
	<style>
	img:after { content: attr(data-small url); }

	@media screen and (min-width:400px) {
	img:after { content: attr(data-medium url); }
	}
	(ns foo.core
	(:refer-clojure :exclude [slurp]))

	(defmacro slurp [file]
	(clojure.core/slurp file))

	;; In CLJS

	(ns bar.core
	(:require [foo.core :include-macros true :refer [slurp]]))
	{
	"phone" : "all and (max-width: 603px)",
	"desktop": "all and (min-width: 1025px)",
	"tablet" : "all and (min-width: 604px) and (max-width: 1024px)"
	}