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

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 styled from 'styled-components';

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

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

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