Skip to content

Instantly share code, notes, and snippets.

@7iomka
7iomka / use-prevent-scroll.tsx
Created November 12, 2023 18:06
Hook usePreventScroll
/*
* ***** FORKED AND MODIFIED FROM https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
* Commit: https://github.com/adobe/react-spectrum/commit/3706c6a504192bf7cb547467671e3c760b0dd14e
* Issue: https://github.com/adobe/react-spectrum/issues/1216
* Copyright 2020 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
@7iomka
7iomka / mantine-v7-migration-notes-and-questions.md
Last active October 15, 2023 12:57
Mantine V7 migration notes & questions

Mantine v7 migration notes & questions

variantColorResolver

  • It is impossible to know from the argument whether the user passed the color prop or it is a default value defined in the button-like component - the value seems have always fallback value. Usecase: I wan't to use currentColor as default value for color only for outline variant and only if user not passed different value with prop, even if this value is the same as default one.

getSize based utils alternative for safe usage?

Example: we like how tabs looks, except that we don't have ability to change spacing between tab pills (data-variant="pill"). For this case we write a simple component-wrapper, with one purpose - to support spacing prop:

@7iomka
7iomka / styles.ts
Created September 24, 2023 16:56
styles
import { createStyles, rem } from '@mantine/core';
import { getSize } from '@steklo24/utils';
interface DynamicTableStylesParams {
hasActions?: boolean;
atStart?: boolean;
atEnd?: boolean;
hasScroll?: boolean;
hasExtraColumnsAtTheEnd?: boolean;
}
@7iomka
7iomka / theme-color-variant.ts
Created September 23, 2023 17:19
Theme-variant
import type { CSSProperties } from 'react';
import type { MantineGradient, MantineColor, MantineTheme } from '@mantine/core';
import { getReadableColor, themeColor } from './theme-color';
export interface VariantInput {
variant: string;
color?: MantineColor;
gradient?: MantineGradient;
primaryFallback?: boolean;
}
@7iomka
7iomka / create-context.tsx
Created September 20, 2023 18:35
Create react context typed
import type { ReactNode } from 'react';
import { useContext, createContext, useMemo } from 'react';
export const createReactContext = <ContextValueType extends object | null>(
rootComponentName: string,
defaultContext?: ContextValueType,
) => {
const Context = createContext<ContextValueType | undefined>(defaultContext);
const Provider = (props: ContextValueType & { children: ReactNode }): JSX.Element => {
@7iomka
7iomka / with-effector-view.tsx
Created September 7, 2023 11:27
effector-view-example-usage
import type { CarouselStylesNames, Embla } from '@mantine/carousel';
import { Carousel } from '@mantine/carousel';
import { useMantineTheme } from '@mantine/core';
import { useCallback, useEffect, useRef, useState } from 'react';
import AutoHeight from 'embla-carousel-auto-height';
import type { CategoryEntity } from '@/shared/api';
import { createView } from '@/shared/lib/view';
import { ImageCard } from '@/shared/ui';
import type { CustomCarouselStylesParams } from '@/shared/lib/mantine';
import { useCarouselStyles } from '@/shared/lib/mantine';
import clsx from 'clsx';
import { Anchor, Button, Loader, LoadingOverlay } from '@mantine/core';
import type { PropsWithChildren } from 'react';
import { useUnit } from 'effector-react';
import { $$viewer } from '@/entities/viewer';
import { Form, FormField, useForm } from '@/shared/form';
import { createView } from '@/shared/lib/view';
import { CustomLink } from '@/shared/ui';
import { createModelProvider2 } from '@/shared/lib/factory';
import { factory } from '../../register.model';
// CAUTION
// - Avoid dynamic factories calls
// - Generic factories are not supported in `useModel`and `modelView` components
// Usage:
// const Root = modelView(factory, () => { ... })
// const model = useModel(factory)
// ... const $$instance = invoke(createSome, {someParams})
'use client';
@7iomka
7iomka / factory.ts
Created September 5, 2023 23:00
Factory generic issue
// CAUTION
// - Avoid dynamic factories calls
// - Generic factories are not supported in `useModel`and `modelView` components
// Usage:
// const Root = modelView(factory, () => { ... })
// const model = useModel(factory)
// ... const $$instance = invoke(createSome, {someParams})
'use client';
@7iomka
7iomka / navigation.model.ts
Created August 8, 2023 09:35
_Next_Router_events
import type { ParsedUrlQuery } from 'querystring';
import { createEvent, attach, createStore, sample, restore } from 'effector';
import type { NextRouter } from 'next/router';
import equal from 'fast-deep-equal';
import { debug } from 'patronum/debug';
import { getUrlWithoutOriginFromUrlObject } from '@xxx/utils';
import { atom } from '@/shared/lib/factory';
import type { PageContext } from '@/shared/lib/nextjs-effector';
import type { NextHistoryState } from './navigation.types';