Skip to content

Instantly share code, notes, and snippets.

View pedronauck's full-sized avatar
🦀

Pedro Nauck pedronauck

🦀
View GitHub Profile
@pedronauck
pedronauck / rescss.jsx
Created April 24, 2018 21:01
lib to add responsive css-in-js
import styled from 'react-emotion'
import { rescss } from 'rescss'
const mq = resprops([
'@media(min-width: 420px)',
'@media(min-width: 920px)',
'@media(min-width: 1120px)'
])
const Text = styled('div')`
import React from 'react'
import pose from 'react-pose'
const AnimatedDiv = pose('div')({
opened: { scale: 1 },
closed: { scale: 2 },
})
export const MyComponent = ({ opened }) => (
<AnimatedDiv state="opened">
@pedronauck
pedronauck / cloudSettings
Last active October 26, 2017 19:31
Visual Studio Code Settings Sync Gist
{"lastUpload":"2017-10-26T19:31:38.634Z","extensionVersion":"v2.8.3"}
@pedronauck
pedronauck / fuse.ts
Created October 14, 2017 21:16
Fusebox config example
import {
FuseBox,
BabelPlugin,
QuantumPlugin,
WebIndexPlugin,
TypeScriptHelpers,
Sparky,
} from 'fuse-box'
import * as path from 'path'
@pedronauck
pedronauck / base.ts
Created October 10, 2017 15:17
style variables
import { injectGlobal, css } from 'emotion'
import { lighten } from 'polished'
import * as colors from './colors'
import { looks, base, fontWeights } from './theme'
const Lato = 'Lato:100,300,400,700,900'
const Mukta = 'Mukta:200,300,400,500,600,700,800'
const Raleway = 'Raleway:100,200,300,400,500,600,700,800,900'
@pedronauck
pedronauck / pipe.ts
Created October 2, 2017 05:10
A simple pipe function implementation
const isFn = (val: any): boolean => typeof val === "function"
const isUndef = (val: any): boolean => typeof val === "undefined"
interface PipeFn {
(arg: any): (fn: (arg: any): any) => PipeFn | any
}
const pipe = (arg: any) => (fn: (arg: any): any) =>
isFn(fn) || !isUndef(fn) ? pipe(fn(arg)) : arg
@pedronauck
pedronauck / my-module.js
Created February 8, 2017 12:42
Todo Duck example
import { List, fromJS } from 'immutable';
import { createSelector } from 'reselect';
import { createAction, handleActions } from 'redux-actions';
import { takeLatest, takeEvery, take, fork, put, select } from 'redux-saga/effects';
import * as todos from 'ducks/entities/todos';
/**
* Constants
**/
import { combineReducers } from 'redux';
// Define the context to search files
const CONTEXT = require.context('./', true, /\.\/(.*)\/index.js?$/i);
// Populate a object with the reducer
const importReducer = (req) => (obj, path) => {
const [, componentName] = path.match(/\.\/(.*)\/index.js?$/i);
const reducer = {
[componentName]: req(path).default
@pedronauck
pedronauck / filter.js
Created December 18, 2016 20:53
Common array methods write in a recursive way
const filterResursive = (arr, fn, index = 0, result = []) => {
fn(arr[index], index) && result.push(arr[index]);
return index < arr.length ? filterResursive(arr, fn, index += 1, result) : result;
};
const filter = (arr, fn) => filterResursive(arr, fn);
module.exports = filter;
@pedronauck
pedronauck / parser.jsx
Created November 30, 2016 15:03
Propose to create a inline css parser to React Components
import { css } from 'css-tm';
const yellow = '#FC0';
const button = css`
background: ${yellow};
`;
const title = (size) => css`
font-size: ${size}px;