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

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

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 {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

// Button.js => Button.css
import { chakra } from "@chakra-ui/magic";
import "@chakra-ui/css/Button.css";

<chakra.button mb="2" mt="2" _hover={{ bg: "red.200", _focus: {} }} />;

<button css={{mb: "2", mt="2", _hover: { bg: "red.200", _focus: {} }} />

const result = interpret(

segunadebayo

{
  "document": {
    "id": "0:0",
    "name": "Document",
    "type": "DOCUMENT",
    "children": [
      {
        "id": "0:1",
        "name": "Page 1",
        "type": "CANVAS",

segunadebayo

async function getComponents(fileKey, token) {
  // Get file
  const file = await fetch(`https://api.figma.com/v1/files/${fileKey}`, {
    headers: { "X-Figma-Token": token }
  }).then((r) => r.json())

  if (file.err === undefined) {
    // Get style ids
    const styleIds = Object.keys(file.styles)

segunadebayo

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

segunadebayo

const menuMachine = Machine(
  {
    id: "menu-machine",
    initial: "idle",
    context: {
      activeDescendantId: null,
      menuId: "",
      buttonId: "",
      onSelect: () => {}
    },

segunadebayo

export interface PaginationOptions {
  total: number;
  current: number;
  noOfSiblings?: number;
}

export function pagination(options: PaginationOptions) {
  const { total, noOfSiblings, current } = validate(options);

  const max = 2 * noOfSiblings + 5;