segunadebayo

import {useRef, useCallback} from 'react';

export type EffectRef<E extends HTMLElement = HTMLElement> = (element: E | null) => void;

export type RefCallback<E extends HTMLElement = HTMLElement> = (element: E) => (() => void) | void;

// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => {};

export function useEffectRef<E extends HTMLElement = HTMLElement>(callback: RefCallback<E>): EffectRef<E> {

segunadebayo

const getAllFocusableElements = (parent) => Array.from(parent.querySelectorAll('*')).filter(elm => elm.tabIndex > -1).sort((a,b) => a.tabIndex > b.tabIndex ? 1 : a.tabIndex < b.tabIndex ? -1 : 0);

segunadebayo

import { createMachine } from "@ui-machines/core"
import { useMachine } from "@ui-machines/react"

type State = {
  value: "idle" | "ticking" | "paused"
}

type Context = {
  value: number
  laps: number[]

segunadebayo

import {
  cssVar,
  defineStyle,
  defineStyleConfig,
} from "@chakra-ui/styled-system"
import { transparentize } from "@chakra-ui/theme-tools"

const baseStyle = defineStyle({
  px: 1,
  textTransform: "uppercase",

segunadebayo

const settings = {
  primaryColor: "#red",
  font: "UI Big",
};

const content = {
  hero: {
    title: "Expert homeschooling service",
 desc: "Keep your kids learning at home with online or in-person lessons taught by exceptional teachers",

segunadebayo

Assets

Rename assets to chunks

A chunk will look like this

const file = {
  base: ``,
  utilities: ``,

segunadebayo

/* Non-atomic */

.css-Box {
  background: red;
  font-size: 10px;
}

.css-Tab {
 background: red;

segunadebayo

const variants = {
 'with-indicator': definePartsStyle((props) => {
    const sizes = {
      md: {
        tablist: {
          h: 11,
          px: 1,
        },
        tab: {
          fontSize: 'sm',

segunadebayo

import fs from "fs"
import Discord from "discord.js"
import { config } from "dotenv"
import ora from "ora"
import { outdent } from "outdent"

config()

const CHANNELS = {
  ANNOUNCEMENT: process.env.CHANNEL_ID,

segunadebayo

import { useRef } from "react";
import warning from "rc-util/lib/warning";
/**
 * Keep input cursor in the correct position if possible.
 * Is this necessary since we have `formatter` which may mass the content?
 */
export default function useCursor(
  input: HTMLInputElement,
  focused: boolean
): [() => void, () => void] {