djgrant

{
  "files.exclude": {
    "node_modules/": true,
    ".gitignore": true,
    "bun.lockb": true,
    ".vscode": true
  },
  "editor.minimap.enabled": false, // removes minimap
  "editor.renderWhitespace": "none", // removes indent guides
  "editor.renderLineHighlight": "none", // removes line highlight

djgrant

import { useEffect } from "react";
import { useInView } from "react-intersection-observer";

export function useInViewportEffect(
  ref: React.RefObject<Element | null>,
  effect: () => (() => void) | void,
) {
  const { ref: inViewRef, inView } = useInView();

  useEffect(() => {

djgrant

import z from "zod";

// Using z.ZodType to convert simple TypeScript type to Zod type
const b: z.ZodType<string> = z.string();

// Using Zodify, just for fun!
const a: Zodify<string> = z.string();

// Convert object
type RawSchema = {

djgrant

async function readFiles(project: string) {
  async function walkDir(
    dir: string,
    callback: (path: string, content: string) => void
  ) {
    const dirPath = path.join(rootDir, project, dir);
    const files = await fs.readdir(dirPath, { withFileTypes: true });

    for (const file of files) {
      const relativeFilePath = path.join(dir, file.name);

djgrant

/**
 * Enforce sequential ordering of tasks by priority
 *
**/

import PQueue, { DefaultAddOptions } from "p-queue";

class QueueClass {
  _queue: any[];
  _deferredQ: Map<number, any>;

djgrant

Document

• emoji
• icon
• image
• prose
• text

Navigation

• button
• breadcrumb

djgrant

const createPoll = (fn, interval) => {
  const subscribers = {};
  const intervals = {};
  return ({ key, args, onSuccess }) => {
    if (!subscribers[key]) {
      subscribers[key] = [];
    }
    const index = subscribers[key].push(onSuccess) - 1;
    if (!intervals[key]) {
      intervals[key] = setInterval(() => {

djgrant

const scale = [1, 2, 4, 8];
const breakpoints = ['@media (min-width: 20em)', '@media (min-width: 40em)'];

const getValue = value => {
  if (Number.isFinite(value)) {
    value = `${value}px`;
  }
  return value;
}

djgrant

import styled from '@emotion/styled';
import { variant, space, layout, flexbox } from 'styled-system';
import { css, switchProp, ifProp } from './styled-system-utils';

const Box = styled.div(
  space,
  layout,
  flexbox,
  switchProp('gutter', [{ px: [2, 3] }, { px: [3, 4] }, { px: [4, 5] }], 1),
  // Alternatively:

djgrant

import 'jest-dom/extend-expect';
import React from 'react';
import { render, fireEvent, cleanup } from '@testing-library/react';
import Form from './form';

window.FormData = undefined;
require('formdata-polyfill');

describe('Form container', () => {
  afterEach(cleanup);