Skip to content

Instantly share code, notes, and snippets.

View pffigueiredo's full-sized avatar

Pedro Figueiredo pffigueiredo

View GitHub Profile
@pffigueiredo
pffigueiredo / grid.tsx
Created August 21, 2023 13:56
Grid React component
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
pffigueiredo / kubectl-commands.txt
Created April 3, 2023 19:43
Kubectl sheet cheat
// 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
pffigueiredo / IsUnion.ts
Last active March 6, 2023 16:55
Type to figure out if it's an union
// 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
pffigueiredo / prettify.ts
Last active February 7, 2023 15:23
Useful types to hack around
// 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];
import React from "react";
export function useFetchReducer(initialData = null) {
const initialState = {
status: "idle",
data: initialData,
error: null
};
function fetchReducer(currentState, action) {
@pffigueiredo
pffigueiredo / useTraceUpdate.js
Last active November 3, 2023 11:24
React hook to debug what props are triggering a re-render
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
pffigueiredo / NestedKeyOf.ts
Created December 17, 2021 15:38
NestedKeyOf
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
pffigueiredo / AppStyling.tsx
Created August 9, 2021 17:08
_app file using stylis plugin
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
pffigueiredo / InputLTR.js
Last active May 17, 2021 10:24
Usage of the Left-to-Right mark to enforce LTR behaviour despite the specified direction.
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
pffigueiredo / Icon.js
Created May 11, 2021 14:49
RTL Compatible Icon
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 }) => {