Skip to content

Instantly share code, notes, and snippets.

Avatar

Kyle Shevlin kyleshevlin

View GitHub Profile
@kyleshevlin
kyleshevlin / signupMachine.js
Created May 20, 2020
a state chart for a signup form
View signupMachine.js
const submitEvent = {
SUBMIT: [
{
target: 'submitting',
cond: 'isValidData',
},
{ target: 'error' },
],
}
View machine.js
const lightBulbMachine = Machine({
id: 'lightBulb',
initial: 'unlit',
states: {
unlit: {
on: {
BREAK: 'broken',
TOGGLE: 'lit'
}
},
View machine.js
const toastMachine = Machine({
id: 'toast',
initial: 'poweredOff',
states: {
poweredOff: {
on: { POWER_ON: 'poweredOn.hist' }
},
poweredOn: {
on: { POWER_OFF: 'poweredOff' },
type: 'parallel',
View machine.js
const assetManagerViewMachine = Machine(
{
id: "assetManagerView",
initial: "closed",
context: {
assetsSelected: 0
},
states: {
closed: {
on: {
View machine.js
const filterSubStates = filterName => ({
initial: "disabled",
states: {
disabled: {
on: { [`ENABLE_${filterName}`]: "enabled" }
},
enabled: {
initial: "asc",
on: {
[`DISABLE_${filterName}`]: "disabled"
View machine.js
const designerSubChart = {
initial: 'standard',
states: {
standard: {
on: {
'': {
target: 'readOnly',
cond: 'hasReadOnlyParam'
},
ENTER_PREVIEW: 'preview',
@kyleshevlin
kyleshevlin / memoizedHandlers.js
Created Jan 22, 2021
Using React.useMemo to create a `handlers` object
View memoizedHandlers.js
// 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.
View createRectFromPortion.js
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
View index.tsx
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
kyleshevlin / rareCreateElementPreferred.ts
Created May 28, 2021
Sometimes createElement makes more sense
View rareCreateElementPreferred.ts
import { ComponentType, createElement, CSSProperties } from 'react'
interface HasKey {
key: string
}
type HomogenousListProps<T> = {
as?: 'ol' | 'ul'
component: ComponentType<T>
items?: Array<T>