pffigueiredo

import { Box, box } from "@singlestore/fusion/components/layout";
import classNames from "classnames";
import React from "react";

import "./grid.scss";

type DynamicTemplate = {
    type: "dynamic";
    repeat: "auto-fill" | "auto-fit";
    minDimension: `${number}px`;

pffigueiredo

// get live logs
kubectl logs --follow jobworker-75bc57f649-ftwn6 | grep -i 'CENA' -B 4 -A 2

--follow => live logs
-B => number of BEFORE lines
-A => number of AFTER lines

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;

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

import React from "react";

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

  function fetchReducer(currentState, action) {

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

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

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 }) => {