pffigueiredo

import { Dispatch, Reducer, useReducer } from 'react';

type Nullable<T> = T | null | undefined;

type FetchMachineState<DataT, ErrorT> = {
  status: 'idle' | 'loading' | 'success' | 'failure';
  data: Nullable<DataT>;
  error: Nullable<ErrorT>;
};

pffigueiredo

import { RefObject, useEffect, useState } from 'react';
import throttle from 'utils/throttle';

export default function useOnScreen(
  elementRef: RefObject<HTMLElement>
): boolean {
  const [isVisible, setIsVisible] = useState(false);

  const onScroll = throttle(() => {
    if (!elementRef.current) {

pffigueiredo

import React from 'react';
import styled from 'styled-components';

const IconWrapper = styled('div')`
  html[dir='rtl'] &.flip-icon {
    transform: scaleX(-1);
  }
`;

const Icon = ({ name, onClick, noFlip }) => {

pffigueiredo

import React, { useState } from "react";

const LEFT_TO_RIGHT_MARK = "‎\u200e"; // marks the input with LTR despite the specified direction

function InputLTR() {
  const [cardNumber, setCardNumber] = useState("");

  function onInputChange(event) {
    const newCardNumber = event.target.value.replace(LEFT_TO_RIGHT_MARK, "");
    setCardNumber(newCardNumber);

pffigueiredo

import React from 'react';
import { AppProps } from 'next/app';
import { StyleSheetManager } from 'styled-components';
import { StylisPlugin } from 'styled-components';
import stylisRTLPlugin from 'stylis-plugin-rtl';
import { useTranslation } from 'react-i18next';

const App = (props: AppProps): JSX.Element => {
  const { Component, pageProps, router } = props;

pffigueiredo

type NestedKeyOf<ObjectType extends object> = 
{[Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object 
? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}`
: `${Key}`
}[keyof ObjectType & (string | number)];

pffigueiredo

function useTraceUpdate(props) {
  const prev = React.useRef(props);
  React.useEffect(() => {
    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
      if (prev.current[k] !== v) {
        ps[k] = [prev.current[k], v];
      }
      return ps;
    }, {});
    if (Object.keys(changedProps).length > 0) {

pffigueiredo

import React from "react";

export function useFetchReducer(initialData = null) {
  const initialState = {
    status: "idle",
    data: initialData,
    error: null
  };

  function fetchReducer(currentState, action) {

pffigueiredo

// prettify intersection on types, like `a & b & c`
type Prettify<T> = {[K in keyof T]: T[K]} & {};

// autocomplete that also accepts string
// so you still have intellisense but it's open to any string
type AutoComplete<T extends string> = T | (string & {});

// the value of objects
type ValueOf<T extends object> = T[keyof T];

pffigueiredo

// When conditional types act on a generic type, they become distributive when given a union type
// So `("a" | "b") extends any` it's actually `"a" extends any | "b" extends any`
type IsUnion<T, C = T> = T extends C ? ([C] extends [T] ? false : true) : never;