sebald

import React, { useCallback, useContext, useRef, useState } from 'react';
import { useField as useAriaField } from '@react-aria/label';
import { useTextField } from '@react-aria/textfield';

const FieldContext = React.createContext<any>({});

const useFieldProvider = (props: any) => {
  const [hasDescription, setHasDescription] = useState(false);

  const field = useAriaField({ label: true, description: hasDescription });

sebald

import * as CSS from 'csstype';

// System
// ---------------

/**
 * Aliases for defining spacing via system props.
 * See: https://styled-system.com/api#space
 */
export type SpaceAliases =

sebald

export enum FetchStatus {
  Init,
  Fetching,
  Aborted,
  Success,
  Error,
}

export type FetchEvent<T = any> =
  | {

sebald

How we incorporate next and cloudfront (2018-04-21)

Feel free to contact me at [email protected] or tweet at me @statisticsftw

This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!

It assumes some knowledge of AWS.

Goals

sebald

function get_current_branch () {
  git branch 2>/dev/null | grep '^*' | colrm 1 2
}

function branch_exists () {
  git rev-parse --verify --quiet $1
}

function is_git_clean () {
  git status --porcelain

sebald

// WARNING: Completely untested code. it might not work and/or it might have
// things that don't work well. Just made for illustrational purposes

// redux-observable shines the most with complex async stuff, like WebSockets
// but many of us will still use it for more modest things like AJAX requests.
// In these cases, there can be a ton of repetitive boilerplate. So this is a
// simple example of applying some abstractions and conventions to make it easier.
// THAT SAID, since abstractions cause indirection it can make it harder for
// someone to come along later and know how something works. Weigh the costs
// and remember, this example isn't a suggestion of the actual code you should

sebald

import React from 'react';
import { css as EmotionCSS } from 'react-emotion';

import { jsxstyleFactory } from './jsxstyleFactory';

const cx = (css, styles, className) =>
  EmotionCSS([{ ...css, ...styles }, className]);

const jsxstyle = jsxstyleFactory(cx);
export const Box = jsxstyle.Box;

sebald

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

sebald

Say we have a prop.users of the shape:

const users = [
    {username: 'bob', age: 30, tags: [{name: 'work', id: 1}, {name: 'boring', id: 2}]},
    {username: 'jim', age: 25, tags: [{name: 'home', id: 3}, {name: 'fun', id: 4}]},
    {username: 'jane', age: 30, tags: [{name: 'vacation', id: 5}, {name: 'fun', id: 4}]}
];

sebald

declare module 'material-ui-icons/AccessAlarm' {
  import SvgIcon from 'material-ui/SvgIcon';
  export default class AccessAlarm extends SvgIcon {}
}

declare module 'material-ui-icons/AccessAlarms' {
  import SvgIcon from 'material-ui/SvgIcon';
  export default class AccessAlarms extends SvgIcon {}
}