Skip to content

Instantly share code, notes, and snippets.

View createdbymahmood's full-sized avatar

Mahmood Bagheri createdbymahmood

View GitHub Profile
@createdbymahmood
createdbymahmood / craco.config.js
Created September 11, 2021 16:20
Linaria usage with CRA 4.x configurations
const CracoAlias = require('craco-alias');
const WebpackBar = require('webpackbar');
const { getLoader, loaderByName } = require('@craco/craco');
const transformBabelLoader = require('./internals/transformBabelLoader');
module.exports = {
style: {
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
@createdbymahmood
createdbymahmood / FormWizard.tsx
Created July 26, 2021 16:07
Building a form wizard on top of my route implementation approach
import { useHistory, useRouteMatch } from 'react-router-dom';
import {
StateMachineProvider,
createStore,
useStateMachine,
} from 'little-state-machine';
import { RouteFactory, Route } from 'services/router/RouteFactory';
import { useForm } from 'react-hook-form';
function updateAction(state, payload) {
import RouteFactory from 'app/routes';
export default function App() {
return <RouteFactory />;
}
@createdbymahmood
createdbymahmood / pruneObject.ts
Created April 30, 2021 10:15
Remove all empty values from an object
import flat, { unflatten } from "flat";
import { reduceRight } from "lodash";
import {
pipe,
reject,
isNil,
isEqual,
get,
fromPairs,
entries,
@createdbymahmood
createdbymahmood / Search.ts
Last active January 3, 2021 20:52
Fuzzy Search in JS/TS World!
/* picked from cypress-realworld-app */
import Fuse from "fuse.js";
import { flow, map, curry } from "lodash/fp";
type IItems = {
title: string;
body: string;
};
export const performSearch = (items: object[], options: {}, query: string) =>
type PathImpl<T, K extends keyof T> = K extends string
? T[K] extends Record<string, any>
? T[K] extends ArrayLike<any>
? K | `${K}.${PathImpl<T[K], Exclude<keyof T[K], keyof any[]>>}`
: K | `${K}.${PathImpl<T[K], keyof T[K]>}`
: K
: never;
type Path<T> = PathImpl<T, keyof T> | keyof T;
import { PartialDeep } from "type-fest";
export type RouteConfigProps = PartialDeep<{
layout: {
include: boolean;
topbar: boolean;
};
accessKey: string;
}>;
@createdbymahmood
createdbymahmood / accessKeys.ts
Created December 18, 2020 16:34
acl for pages in next js
export const accesKeys = {
guest: {
home: true,
users: true,
user: true,
},
};
@createdbymahmood
createdbymahmood / composableHoc.tsx
Last active December 16, 2020 14:12
composable hoc
export const composableHoc = (prop: string) => {
return function <T>(Component: ComponentType<T>) {
return function (props: T): JSX.Element {
return <Component {...props} />;
};
};
};
import { useState, RefObject, useLayoutEffect } from "react";
import useWindowSize from "./useWindowSize";
export function useOverflow(
ref: RefObject<HTMLElement>
): {
refXOverflowing: boolean;
refYOverflowing: boolean;
refXScrollBegin: boolean;