Skip to content

Instantly share code, notes, and snippets.

@adevinwild
adevinwild / extend-validator.ts
Created July 30, 2024 11:54
A new way to extend core validators in Medusa v1.x
import { registerOverriddenValidators } from '@medusajs/medusa'
import { type Constructor } from '@medusajs/types'
type DecoratorFunction = MethodDecorator | PropertyDecorator
type ExtensionDefinition = {
[key: string]: DecoratorFunction | DecoratorFunction[]
}
function extendValidator<Base extends Constructor<any>>(
@adevinwild
adevinwild / product.ts
Created June 28, 2024 10:09
An implementation of the RedisCacheService on the ProductService for Medusa 1.20.x
import type RedisCacheService from '@medusajs/cache-redis/dist/services/redis-cache';
import { ProductService as MedusaProductService, Product } from '@medusajs/medusa';
import { CreateProductInput, FindProductConfig, ProductSelector, UpdateProductInput } from '@medusajs/medusa/dist/types/product';
import type { Redis } from 'ioredis';
type InjectedDependencies = {
cacheService: RedisCacheService
redisClient: Redis
}
@adevinwild
adevinwild / file-upload.tsx
Last active March 7, 2024 10:39
A simple and reusable file upload component made for React with TailwindCSS
import { useRef, useState, type ChangeEvent, type DragEvent } from "react";
import { cn } from "~/lib/utils";
type FileUploadProps = {
onUpload?: (_files: File[]) => void;
accept: string[];
error?: string;
className?: string;
multiple?: boolean;
text?: React.ReactElement | string;
@adevinwild
adevinwild / tailwind.config.js
Created February 26, 2024 14:28
Animated your icons SVGs with a simple keyframe
/** @type {import('tailwindcss').Config} */
export default {
// Other values...
theme: {
extend: {
keyframes: {
svg: {
from: {
strokeDasharray: "1000",
strokeDashoffset: "1000",
@adevinwild
adevinwild / animated-number-display.tsx
Last active February 26, 2024 10:24
An animated number made with Framer Motion and TailwindCSS
import { memo, useEffect, useRef, useState } from 'react'
import { useAnimate } from 'framer-motion'
import { cn } from '~/utils/cn'
/**
* @name AnimatedNumberDisplay
* @description A component that animates a number from an initial value to a new value
*
* @param {Object} props - The options for the component
* @param {string | number} props.initialValue - The initial value of the number
@adevinwild
adevinwild / stepper.tsx
Created February 22, 2024 20:19
A simple Stepper made with TailwindCSS, you'll need `tailwind-merge` and `clsx` (`cn` function we can found for example inside `shadcn/ui`)
"use client";
import React, {
Fragment,
createContext,
useContext,
type HTMLAttributes,
type ReactNode,
} from "react";
@adevinwild
adevinwild / scroll-area.tsx
Last active February 4, 2024 09:42
A shadcn/ui like scroll area that adds a little gradient inside the list with TailwindCSS
import clsx from "clsx";
import {
useEffect,
useRef,
useState,
type HTMLAttributes,
type ReactNode,
type RefObject,
} from "react";
@adevinwild
adevinwild / link-with-before-unload.tsx
Created January 30, 2024 13:59
A component to override the Next.js 13+ Link App Router component to block internal changes based on a URL parameter.
@adevinwild
adevinwild / dev-indicator.tsx
Created December 31, 2023 07:24
A simple dev indicator for React using TailwindCSS
const isDev = process.env.NODE_ENV === "development";
const DevIndicator = () => {
if (!isDev) {
return null;
}
return (
<>
<div className="w-full h-full fixed ring-4 opacity-80 ring-orange-300 ring-inset z-[9999]"></div>
@adevinwild
adevinwild / react-quick-classname.code-snippets
Created October 6, 2023 13:16
VSCode - Quickly add React className attribute
{
"Add React className": {
"scope": "javascript,javascriptreact,typescriptreact",
"prefix": "cn",
"body": [
"className='${1}'"
],
"description": "Quickly add a React className attribute"
}
}