kyleshevlin

// One of my new favorite React Hook patternms is to create handler
// functions for a custom hook using `React.useMemo` instead of
// `React.useCallback`, like so:

function useBool(initialState = false) {
  const [state, setState] = React.useState(initialState)
  
  // Instead of individual React.useCallbacks gathered into an object
  // Let's memoize the whole object. Then, we can destructure the
  // methods we need in our consuming component.

kyleshevlin

const toastMachine = Machine({
  id: 'toast',
  initial: 'poweredOff',
  states: {
    poweredOff: {
      on: { POWER_ON: 'poweredOn.hist' }
    },
    poweredOn: {
      on: { POWER_OFF: 'poweredOff' },
      type: 'parallel',

kyleshevlin

const filterSubStates = filterName => ({
  initial: "disabled",
  states: {
    disabled: {
      on: { [`ENABLE_${filterName}`]: "enabled" }
    },
    enabled: {
      initial: "asc",
      on: {
        [`DISABLE_${filterName}`]: "disabled"

kyleshevlin

const submitEvent = {
  SUBMIT: [
    {
      target: 'submitting',
      cond: 'isValidData',
    },
    { target: 'error' },
  ],
}

kyleshevlin

const lightBulbMachine = Machine({
  id: 'lightBulb',
  initial: 'unlit',
  states: {
    unlit: {
      on: {
        BREAK: 'broken',
        TOGGLE: 'lit'
      }
    },

kyleshevlin

const assetManagerViewMachine = Machine(
  {
    id: "assetManagerView",
    initial: "closed",
    context: {
      assetsSelected: 0
    },
    states: {
      closed: {
        on: {

kyleshevlin

const designerSubChart = {
  initial: 'standard',
  states: {
    standard: {
      on: {
        '': {
          target: 'readOnly',
          cond: 'hasReadOnlyParam'
        },
        ENTER_PREVIEW: 'preview',

kyleshevlin

function createRectFromPortion(portion, areaName) {
  const sqrt = Math.sqrt(portion)
  const upper = Math.ceil(sqrt)
  const lower = Math.floor(sqrt)

  const square = upper ** 2
  const squareDiff = square - portion
  const rect = lower * upper
  const rectDiff = rect - portion

kyleshevlin

import { styled } from '@stitches/react'

const clamp = (min: number, max: number) => (num: number) =>
  Math.min(Math.max(min, num), max)

const optionize = fn => (options = {}) => fn(options)

const hslColor = (hue: number, sat: number, lum: number) => ({
  brighten = 0,
  darken = 0,

kyleshevlin

import { ComponentType, createElement, CSSProperties } from 'react'

interface HasKey {
  key: string
}

type HomogenousListProps<T> = {
  as?: 'ol' | 'ul'
  component: ComponentType<T>
  items?: Array<T>