Skip to content

Instantly share code, notes, and snippets.

View finom's full-sized avatar

Andrey Gubanov finom

176 followers · 5 following
View GitHub Profile
@finom
finom / storybook.html
Created May 12, 2026 16:13
StarlingAIX design system storybook v0.1 (draft)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Starling AIX — Storybook (Draft)</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Text:ital@0;1&display=swap" rel="stylesheet" />
<style>
@finom
finom / NiceGradient.js
Last active October 6, 2024 20:56
Nice looking iOS-like linear gradients preset for react native based on https://www.behance.net/gallery/62158409/Gradients-Color-Style
/*
Usage:
<NiceGradient index={9} style={StyleSheet.absoluteFill} />
Where index is an index from gradients array (0...14) based on https://www.behance.net/gallery/62158409/Gradients-Color-Style
*/
import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';
export const gradients = [
['#FF6CAB', '#7366FF'],
@finom
finom / createComponentPortal.tsx
Created October 3, 2023 11:49
Allows to create portals within react components
import React, {
createContext,
useState,
useContext,
ReactNode,
FunctionComponent,
Dispatch,
SetStateAction,
} from 'react';
@finom
finom / authGuard.ts
Last active June 20, 2023 11:23
A beautiful way to add NestJS decorator vibes for NextJS app API route to check for authorisation or anything else
import { NextRequest, NextResponse } from 'next/server';
import { checkAuth } from './checkAuth'; // define it by yourself
const httpMethods = ['GET', 'POST', 'PUT', 'DELETE'] as const;
type MethodMap<T> = { GET?: T; POST?: T; PUT?: T; DELETE?: T };
export default function authGuard(options?: MethodMap<boolean>) {
return function AuthGuard(given: Function) {
const ctr = given as Omit<Function, 'prototype'> & {
@finom
finom / useClickOutside.ts
Created October 7, 2022 19:21
import { useEffect, useRef } from 'react';
/**
*
* @example
* const ref = useClickOutside<HTMLDivElement>((evt: MouseEvent) => console.log('blah'))
* <div ref={ref} />
*/
type ClickEvent = MouseEvent & { target: HTMLElement };
@finom
finom / QuerySelector.ts
Created October 5, 2022 18:15
QuerySelector react element
import { useEffect } from 'react';
interface Props {
selector: string;
className?: string;
onClick: (evt: Event) => void;
}
const QuerySelector = ({
selector,
@finom
finom / Touchable.js
Last active December 16, 2020 17:09
[finom/react-native-touchable] A universal Touchable (React Native) which behaves like TouchableOpacity on iOS but like TouchableNativeFeedback on Android
import { TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native';
import { createElement } from 'react';
// use TouchableNativeFeedback for android and TouchableOpacity for ios
// use TouchableOpacity with activeOpacity=1 for both platforms if disabled=true
const Touchable = ({
disabled,
onPress,
...props
}) => {
@finom
finom / useArrayState.js
Last active June 29, 2020 18:32
[finom/use-array-state] A hook for creating observable-like immutable arrays based on useState
/*
A hook for creating observable-like immutable arrays based on useState
in other words allows to call push, pull, slice... methods which are going to deliver
a new array every time and trigger component to re-render
Usage:
const [array, arrayRef] = useArrayState(initialValue = []);
arrayRef.push(foo); // triggers component to re-render and makes 'array' to update
@finom
finom / useBooleanState.js
Last active June 29, 2020 12:38
[finom/use-boolean-state] Simplifies boolean useState creation
/*
Usage:
const [value, setTrue, setFalse] = useBooleanState(initialValue);
*/
import { useState, useCallback } from "react";
export default function useBooleanState(initialValue) {
const [value, onSetValue] = useState(initialValue);
const onSetTrue = useCallback(() => onSetValue(true), []);
@finom
finom / addeventlistener.js
Created August 22, 2014 13:32
Simple addEventListener polyfill for IE8
( function( win, doc, s_add, s_rem ) {
if( doc[s_add] ) return;
Element.prototype[ s_add ] = win[ s_add ] = doc[ s_add ] = function( on, fn, self ) {
return (self = this).attachEvent( 'on' + on, function(e){
var e = e || win.event;
e.target = e.target || e.srcElement;
e.preventDefault = e.preventDefault || function(){e.returnValue = false};
e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true};
e.which = e.button ? ( e.button === 2 ? 3 : e.button === 4 ? 2 : e.button ) : e.keyCode;
fn.call(self, e);