Skip to content

Instantly share code, notes, and snippets.

@KonradSzwarc
KonradSzwarc / button.styles.ts
Created August 12, 2022 10:17
Tailwind CSS variants
import type { ButtonProps } from './button';
type Props = Required<ButtonProps>;
export const baseClasses =
'inline-flex items-center border font-medium rounded-md enabled:shadow-sm active:enabled:translate-y-px focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500';
export const sizeClasses: Record<Props['size'], string> = {
xs: 'px-3 h-6 text-xs',
sm: 'px-4 h-8 text-sm',
@KonradSzwarc
KonradSzwarc / opaque.ts
Created March 24, 2022 15:00
Opaque types that can be nested in each other.
declare const t: unique symbol;
declare const t1: unique symbol;
declare const t2: unique symbol;
interface Extend0<Token> {
readonly [t]: Token;
}
interface Extend1<Token> {
readonly [t1]: Token;
@KonradSzwarc
KonradSzwarc / map-builder.ts
Created December 28, 2021 17:15
Creates object with specyfied value types that can be extended by new key-value pairs.
const mapBuilder = <ValueType = never>() => {
const addFactory = <Values extends Record<string, ValueType>>(values: Values) => ({
add: <Key extends string>(key: Key, data: ValueType) =>
addFactory({ ...values, [key]: data } as Record<keyof Values | Key, ValueType>),
build: () => values,
});
return addFactory({});
};
@KonradSzwarc
KonradSzwarc / prepare-commit-msg
Created July 26, 2021 10:10
Script that suffixes commit message with the issue ID taken from a branch name.
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
COMMIT_MSG_FILE=$1
COMMIT_SOURCE=$2
BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD 2>/dev/null)
CHORE_BRANCH_REGEX='^chore-.+$'
VALID_BRANCH_REGEX='^issue-[0-9]+-.+$'
COMMIT_MESSAGE=$(<$COMMIT_MSG_FILE)
@KonradSzwarc
KonradSzwarc / withHook.tsx
Created May 26, 2021 12:07
HOC that allows to use React hooks with class components.
import React, { ReactElement, ComponentType } from 'react';
function withHook<HookReturn extends Record<string, unknown>>(use: () => HookReturn) {
return <Props extends Record<string, unknown>>(
Component: ComponentType<Props & HookReturn>,
): ComponentType<Props> => {
const WrappedComponent = (props: Props): ReactElement<Props & HookReturn> => {
const hookProps = use();
return <Component {...props} {...hookProps} />;
@KonradSzwarc
KonradSzwarc / createAction.ts
Created December 26, 2020 18:02
Function that generates redux action creator
type ResolveType<T> = T extends (...args: any[]) => Record<string, unknown>
? T
: { [K in keyof T]: T[K] };
export function createAction<
Type extends string,
Args extends any[] = [],
Return extends Record<string, unknown> = Record<string, unknown>
>(
type: Type,
@KonradSzwarc
KonradSzwarc / omit.ts
Created August 1, 2020 08:54
Type-safe omit function.
export const omit = <T extends Record<string, unknown>, K extends [...(keyof T)[]]>(
originalObject: T,
keysToOmit: K,
): {
[K2 in Exclude<keyof T, K[number]>]: T[K2];
} => {
const clonedObject = { ...originalObject };
for (const path of keysToOmit) {
delete clonedObject[path];
@KonradSzwarc
KonradSzwarc / createAsyncState.ts
Created June 12, 2020 23:01
Redux utility function that creates a state slice for asynchronous data.
export type AsyncState<T> = {
status: 'idle' | 'loading' | 'success' | 'failure';
data: T;
error: string | null;
};
export const createAsyncState = <T>(initialData: T): AsyncState<T> => ({
status: 'idle',
data: initialData,
error: null,
@KonradSzwarc
KonradSzwarc / makeStyles.ts
Created June 12, 2020 22:59
Custom implementation of the Material UI makeStyles function that uses a custom Theme type.
import makeMuiStyles from '@material-ui/styles/makeStyles';
import { ClassNameMap, Styles, WithStylesOptions } from '@material-ui/styles/withStyles';
import { Theme } from './types';
export const makeStyles = <Props extends {} | undefined = undefined, ClassKey extends string = string>(
styles: Styles<Theme, Props extends undefined ? {} : Props, ClassKey>,
options?: Omit<WithStylesOptions<Theme>, 'withTheme'>,
) => {
return makeMuiStyles(styles, options) as Props extends undefined