chaance

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

chaance

/**
 * @typedef {Object} ClassifyProps
 * @property {React.ElementType} [as] - Element to render
 * @property {import('clsx').ClassValue} [className] - Composable classnames passed to clsx
 */

/**
 * @param {ClassifyProps} props
 */
function Classify({ as: El = "div", ...props }) {

chaance

import * as React from 'react';
import omit from 'lodash.omit';
import { cssReset, isUndefined } from '@interop-ui/utils';
import { forwardRef, createStyleObj } from '@interop-ui/react-utils';

/* -------------------------------------------------------------------------------------------------
 * Flex
 * -----------------------------------------------------------------------------------------------*/

const FLEX_NAME = 'Flex';

chaance

/**
 * Given a desired minimum contrast ratio, a base color, and an array of colors,
 * return the first color in the array with an acceptable level of contrast
 * against the base color.
 * @param options 
 */
function getFirstUsableColorBasedOnContrastRatio(options: {
	ratio: number;
	baseColor: Color;
	colors: Color[];

chaance

fn slice_out_of_array() {
    let a = [1, 2, 3, 4, 5];
    let nice_slice = &a[1..4];
}

chaance

Listbox has turned out to be a real test for us in many ways. Primarily, it
challenges our desire for maximum composability, a key goal for all of the
Reach UI components. A listbox select component essentially consists of:

- A button the user clicks when a listbox is closed
- A list of options in a popover that is displayed after a user clicks

This sounds a lot like MenuButton from a UI perspective, but two key
differences:

chaance

:root {
  /* smallest screens */
  --line-height: 1.2;
  --font-size: 13px;
  --rhythm: calc(var(--line-height) * var(--font-size));
}

/* larger phones */
@media screen and (min-width: 400px) {
  html {

chaance

import React from 'react';

export type Breakpoints = {
  [key: string]: number;
};

export type MediaQueries<BP extends Breakpoints, T> = {
  [key in keyof BP]: T;
};

chaance

// this goes in you root types directory, filename is the [name-of-your-module].d.ts
import '@emotion/react';
import { MyCustomTheme } from './theme';

declare module '@emotion/react' {
  export interface Theme extends MyCustomTheme {}
}

chaance

function useDebounce<F extends Function>(
  func: F,
  delay: number,
  immediate?: boolean
) {
  let debouncedFunc = useRef(func);
  useEffect(() => {
    let timeout: number | null;
    debouncedFunc.current = (((...args: any[]) => {
      let callNow = immediate && timeout == null;