serifcolakel

/**
 * @description This is a test for the `InferValueFromColor` type.
 * @example
 * type Color = '#fff';
 * type Value = InferValueFromColor<Color>; // Value is 'fff'
 * @example
 * type Color = '#fff' | '#000';
 * type Value = InferValueFromColor<Color>; // Value is 'fff' | '000'
 * @example
 * type Color = '#fff' | '#000' | '#aaa';

serifcolakel

[
    {
        "id": "1f600",
        "name": "grinning face",
        "shortName": ":grinning:",
        "fallback": "😀",
        "type": "STANDARD",
        "category": "PEOPLE",
        "order": 10001,
        "representation": {

serifcolakel

const colors = ["text-yellow-500", "text-violet-500", "text-red-500"] as const;

/**
 * Extracts the color value from a string that follows the format `text-{color}-500`.
 * @template S The input string.
 * @param {S} input The input string to extract the color from.
 * @returns {ExtractColor<S>} The extracted color value.
 */
type ExtractColor<S extends string> = S extends `text-${infer Color}-500`
  ? Color

serifcolakel

/**
* full article about this gist
* @link https://blog.stackademic.com/building-a-state-management-system-with-react-86d382fa33cd
*/

import { useSyncExternalStore } from 'react';

/**
 * @description An atom is a unit of state in Jotai. It is a container of a value that can be read synchronously and updated asynchronously.
 */

serifcolakel

import React from 'react';

type FormElementBaseProps = {
  children?: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'outline' | 'link';
};

type FormElementProps = FormElementBaseProps &
  (
    | (React.ButtonHTMLAttributes<HTMLButtonElement> & {

serifcolakel

const data = {
  NaMe: "name",
  aGe: 12,
  a: "mask",
};

export type TLiteral = "UPPER" | "LOWER" | "CAPITALIZE" | "UNCAPITALIZE";

export type TransformKeys<T, L extends TLiteral> = {
  [K in keyof T as L extends "UPPER"

serifcolakel

import { test } from 'vitest';
import { useLocalStorage } from './useLocalStorage';

const EMPTY_VALUE = undefined;

test('useLocalStorage hook with string', async ({ expect }) => {
  const TEST_OPTION = {
    KEY: 'test-key-string',
    VALUE: 'test-value',
  };

serifcolakel

export type TUseLocalStorage<T> = [
  () => T | undefined,
  (value: T) => void,
  () => void
];

/**
 * @author Serif Colakel
 * @name useLocalStorage
 * @description See the test for this hook {@link https://gist.github.com/serifcolakel/44cb296dd5cb8983a5e2deb14d962878 Gist Link}

serifcolakel

/* eslint-disable react/jsx-no-useless-fragment */
import React, { type ReactNode } from 'react';

/**
 * @description A component that conditionally renders its children based on a given condition and optional limit.
 */
interface ConditionalRenderProps {
  /**
   * @description The condition to render the children.
   * @default false

serifcolakel

import { RefObject, useEffect, useRef } from 'react';

function useEventListener<K extends keyof MediaQueryListEventMap>(
  eventName: K,
  handler: (event: MediaQueryListEventMap[K]) => void,
  element: RefObject<MediaQueryList>,
  options?: boolean | AddEventListenerOptions,
): void;

function useEventListener<K extends keyof WindowEventMap>(