shilman

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript

gabesoft

function gbr --description "Git browse commits"
    set -l log_line_to_hash "echo {} | grep -o '[a-f0-9]\{7\}' | head -1"
    set -l view_commit "$log_line_to_hash | xargs -I % sh -c 'git show --color=always % | diff-so-fancy | less -R'"
    set -l copy_commit_hash "$log_line_to_hash | xclip"
    set -l git_checkout "$log_line_to_hash | xargs -I % sh -c 'git checkout %'"
    set -l open_cmd "open"

    if test (uname) = Linux
        set open_cmd "xdg-open"
    end

robert-stuttaford

(require '[cljs.build.api :as api]
         '[clojure.string :as string]
         '[figwheel-sidecar.repl-api :as figwheel]
         '[figwheel-sidecar.components.nrepl-server :as figwheel.nrepl])

(def source-dir "src")

(def compiler-config
  {:main          'app.main
   :output-to     "target/app.js"

threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

jlongster

Head Over Heels for Snapshot Testing

Tests are interesting, because you're trying to test code. But to write tests, you have to write code. Who tests the tests? For tests to be worth it you need to be sure that for each line of code you add, the value being added is more than the liability.

Value > Liability

Because belive me, tests are a liability. First, they are code that

tj

// Package preact provides bindings to the preact library.
package preact

import "github.com/gopherjs/gopherjs/js"

var preact = js.Global.Get("preact")

// Attrs of an element.
type Attrs map[string]interface{}

bendc

const randomInterval = (() => {
  const random = (min, max) => Math.random() * (max - min) + min;
  return (callback, min, max) => {
    const time = {
      start: performance.now(),
      total: random(min, max)
    };
    const tick = now => {
      if (time.total <= now - time.start) {
        time.start = now;                                                                                     

tkh44

import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, matchPath } from 'react-router-dom'
import { Motion } from 'data-driven-motion' // https://github.com/tkh44/data-driven-motion

const WOBBLY_SPRING = { stiffness: 200, damping: 15, precision: 0.1 }

const AnimationExample = () => (
  <Router>
    <div>
      <ul>

ryanflorence

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'

import { Route, Link, Redirect } from './Zero'

const paths = [ 'one', 'two', 'three' ]

class App extends Component {
  render() {

developit

import preact from 'preact';
import createFoo from './foo';
import createBar from './bar';

export const Foo = createFoo(preact);
export const Bar = createBar(preact);