mfix22

import {createGlobalStyle} from 'styled-components';

// This becomes the source of truth for the application
export default const GlobalStyle = createGlobalStyle`
  :root {
    --primary: cyan;
    --text: #506784;
    --borders: #EBF0F8;
    --page-background: transparent;
    --nav-background: white;

mfix22

A bunch of random, contrived functions with maybe some value. Mostly small proof-of-concepts.

Examples

destructure()

Operates just like const sanitize = ({ id, email, date }) => ({ id, email, date }) but with destructure you can store your included keys in an array, say, in your config.

const keysToInclude = ['id', 'email', 'date']
const sanitize = destructure(keysToInclude)

mfix22

export const space = [
  'var(--x1)',
  'var(--x2)',
  'var(--x3)',
  'var(--x4)',
  'var(--x5)',
  'var(--x6)',
];

export const fonts = {

mfix22

import { ThemeProvider, createGlobalStyle, css } from 'styled-components'

export const CustomStyles = createGlobalStyle`${props =>
  css`
    ${props.children};
  `}`;

// Usage
<ThemeProvider theme={theme}>
  {props.children}

mfix22

Request method: POST
content-type: application/json
Expect: 
User-Agent: GitHub-Hookshot/175c648
X-GitHub-Delivery: 073e7680-f835-11e9-895f-74af0ea0e3c8
X-GitHub-Event: issue_comment
X-Hub-Signature: sha1=ecbcceb5ab92487a80a59837f0051b9b28b659e1

mfix22

import { merge } from 'lodash'
import {ThemeProvider} from 'styled-components'

import { theme, CustomStyles } from './styled' // our design system folder

// This component wraps the Query component from `apollo-client`
import { GetTheme } from './containers'

export default function App(props) {
	return (

mfix22

// No need to import `react` or `styled-components`!
import system from 'system-components'

export const Heading = system(
  {
    is: 'h1',
    // primary, medium, text, etc. are all theme variables!
    fontFamily: 'primary',
    fontSize: 5,
    fontWeight: 'medium',

mfix22

import styled from 'styled-components'


/* 
 * Basic themeable component:
 *
 *   → Customers are able to adjust link color
 *     for this section
 */
export const Container = styled.div`

mfix22

// You can adjust these according to your use case
export const breakpoints = ['32em', '48em', '64em', '80em']

export const colors = {
  rausch: '#FF5A5F',
  babu: '#00A699',
  arches: '#FC642D',
  hof: '#4848484',
  foggy: '#767676',

mfix22

export function replaceWithComponent(regex, mapping, s) {
    const parts = s.split(regex);

    for (let i = 1; i < parts.length; i += 2) {
      parts[i] = mapping(parts[i]);
    }

    return <Fragment>{parts}</Fragment>
}