Snippets.

import { cn } from '@/lib/cn'

type Props = React.ComponentProps<'button'> & {
  variant?: 'solid' | 'ghost'
}

export function Button({ variant = 'solid', className, ...rest }: Props) {
  return (
    <button
      className={cn(
        'inline-flex items-center gap-2 rounded-full',
        'px-5 py-3 text-sm font-medium transition-colors',
        'disabled:pointer-events-none disabled:opacity-50',
        variant === 'solid' && 'bg-stone-900 text-stone-50',
        variant === 'ghost' && 'border border-stone-300',
        className,
      )}
      {...rest}
    />
  )
}

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

import { useEffect, useRef, useState } from 'react'

export function useReveal<T extends HTMLElement>() {
  const ref = useRef<T>(null)
  const [shown, setShown] = useState(false)

  useEffect(() => {
    const el = ref.current
    if (!el) return
    const io = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return
      setShown(true)
      io.unobserve(el)
    }, { rootMargin: '-12% 0px' })
    io.observe(el)
    return () => io.disconnect()
  }, [])

  return { ref, shown }
}

import { useEffect, useState } from 'react'

export function useDebouncedValue<T>(value: T, ms = 300) {
  const [debounced, setDebounced] = useState(value)

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), ms)
    return () => clearTimeout(id)
  }, [value, ms])

  return debounced
}

// const q = useDebouncedValue(input, 250)
// useQuery({ queryKey: ['search', q], ... })

import { cn } from '@/lib/cn'

export function Skeleton({ className }: { className?: string }) {
  return (
    <div
      aria-hidden
      className={cn(
        'animate-pulse rounded bg-stone-200',
        'motion-reduce:animate-none',
        className,
      )}
    />
  )
}

// <Skeleton className="h-3 w-4/5" />

h1, h2, h3 { text-wrap: balance; }
p, li      { text-wrap: pretty; }

/* never ship an animation without this */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

// the old way: a flat list of hostnames
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ["ecoplease-edit.site"],
  },
};

module.exports = nextConfig;

// https://nextjs.org/docs/messages/next-image-unconfigured-host
const config = {
  images: {
    remotePatterns: [
      {
        hostname: "jalan-karbon-bucket.s3.ap-southeast-1.amazonaws.com",
      },
    ],
  },
};

<div className="grid grid-cols-2 grid-rows-[auto]">
  <div className="h-[auto/fit]" />
</div>

.numbers   { font-variant: tabular-nums; }
.title     { text-wrap: balance; }
.overlay   { mix-blend-mode: difference; }
.container { height: 100svh; }

p { word-break: break-word; }

export default function formatTime(time: number): string {
  const minutes = Math.floor(time / 60);
  const seconds = time % 60;

  return `${minutes.toString().padStart(2, "0")}:${seconds
    .toString()
    .padStart(2, "0")}`;
}

import { type ClassValue } from "clsx";
import { forwardRef, type ReactNode, type Ref } from "react";

type MainLayoutProps<T extends SelectOption> = React.HTMLAttributes<HTMLDivElement> & {
  backgroundColor?: ClassValue;
  isFullWidth?: boolean;
  isAddTopPadding?: boolean;
  isDisableMaxWidth?: boolean;
  isAddVerticalPadding?: boolean;
  isOverflowHidden?: boolean;
  options?: T;
};

const MainLayoutComponent = forwardRef(
  <T extends SelectOption>(
    { ...props }: MainLayoutProps<T>,
    ref: Ref<HTMLDivElement>,
  ) => {
    return (
      <div ref={ref} {...props}>
        {props.children}
      </div>
    );
  },
);

MainLayoutComponent.displayName = "MainLayout";

export const MainLayout = MainLayoutComponent as <T extends SelectOption>(
  props: MainLayoutProps<T> & { ref?: Ref<HTMLDivElement> },
) => ReactNode;

import { createServer } from "http";
import { parse } from "url";
import next from "next";

const dev = process.env.NODE_ENV !== "production";
const hostname = "localhost";
const port = 8080;
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

void app.prepare().then(() => {
  createServer((req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url ?? "", true);
      const { pathname, query } = parsedUrl;

      if (pathname === "/a") {
        void app.render(req, res, "/a", query);
      } else if (pathname === "/b") {
        void app.render(req, res, "/b", query);
      } else {
        void handle(req, res, parsedUrl);
      }
    } catch (err) {
      console.error("Error occurred handling", req.url, err);
      res.statusCode = 500;
      res.end("internal server error");
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://${hostname}:${port}`);
  });
});

import React, { useRef } from "react";
import { useForm } from "react-hook-form";

type Inputs = {
  firstName: string,
  lastName: string,
};

export default function App() {
  const { register, handleSubmit } = useForm<Inputs>();
  const firstNameRef = useRef<HTMLInputElement | null>(null);
  const onSubmit = data => console.log(data);
  const { ref, ...rest } = register("firstName");

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...rest} name="firstName" ref={(e) => {
        ref(e)
        firstNameRef.current = e // you can still assign to ref
      }} />

      <button>Submit</button>
    </form>
  );
}

type Color = "primary" | "secondary" | string;
// hover shows: type Color = string

// ------

type Color = "primary" | "secondary" | (string & {});
// hover shows: type Color = "primary" | "secondary" | (string & {})

"use server";

import { revalidatePath } from "next/cache";

export async function revalidate(path: string) {
  return revalidatePath(path);
}

const [isScrollUp, setIsScrollUp] = useState(true);

useEffect(() => {
  const threshold = 50;
  let lastScrollY = window.scrollY;
  let ticking = false;

  const updateScrollDir = () => {
    const scrollY = window.scrollY;

    if (Math.abs(scrollY - lastScrollY) < threshold) {
      ticking = false;
      return;
    }
    if (!isOpen) setIsScrollUp(scrollY < lastScrollY);
    lastScrollY = scrollY > 0 ? scrollY : 0;
    ticking = false;
  };
  const onScroll = () => {
    if (!ticking) {
      window.requestAnimationFrame(updateScrollDir);
      ticking = true;
    }
  };
  window.addEventListener("scroll", onScroll);

  return () => window.removeEventListener("scroll", onScroll);
}, [isOpen]);

// title truncates to the column width
<div className="grid flex-1 grid-cols-1 gap-1">
  <Paragraph className="truncate font-medium">{title}</Paragraph>
  <Paragraph className="text-label-primary">{description}</Paragraph>
</div>

// title takes what it needs, description gets the rest
<div className="grid flex-1 grid-cols-[auto_1fr] gap-1">
  <Paragraph className="font-medium">{title}</Paragraph>
  <Paragraph className="text-label-primary">{description}</Paragraph>
</div>

<div className="grid grid-cols-[2fr_1fr] gap-1">
  {/* min-w-0 is important to prevent column from expanding
  if the user input long text without space */}
  <Textarea className="min-w-0" />
  <div>
    <Paragraph>{description}</Paragraph>
  </div>
</div>

type Item = {
  image: string,
  description: string,
}

const imageSelectorField = <T extends Record<string, unknown>>(
  key: Extract<keyof T, string>,
) => [
  `${key}.filename_disk`,
  `${key}.description`,
  `${key}.width`,
  `${key}.height`,
];

const getImageDetail = imageSelectorField<Item>("image") // Type Safe
const getImageDetail2 = imageSelectorField<Item>("unknown") // ERROR

<div className="-m-0.75 flex max-h-60 flex-col gap-2 overflow-y-auto p-0.75">
  {data?.map(() => (<Button>...</Button>))}
</div>

{
  "devDependencies": {
    "ajv": "^8.17.1"
  }
}

import { useCallback, useSyncExternalStore } from 'react'

export function useMediaQuery(query: string) {
  const subscribe = useCallback((notify) => {
    const mql = window.matchMedia(query)
    mql.addEventListener('change', notify)
    return () => mql.removeEventListener('change', notify)
  }, [query])

  return useSyncExternalStore(
    subscribe,
    () => window.matchMedia(query).matches,
    () => false, // server snapshot
  )
}

export function Segmented({ options, name, value, onChange }) {
  return (
    <div role="radiogroup"
         className="inline-flex rounded-full bg-stone-200 p-1">
      {options.map((o) => (
        <label key={o}
          className="cursor-pointer rounded-full px-4 py-2
                     text-sm has-checked:bg-white">
          <input type="radio" name={name} value={o}
                 checked={value === o}
                 onChange={() => onChange(o)}
                 className="sr-only" />
          {o}
        </label>
      ))}
    </div>
  )
}

# where did it all go?
docker system df -v | head -20
du -sh /var/lib/docker/* | sort -h

# dangling images and stopped containers only
docker image prune -f
docker container prune -f

# everything not used by a running container
# (read that again before you run it)
docker system prune -af --volumes

'use client'
import { useState } from 'react'

export function CopyButton({ value }: { value: string }) {
  const [copied, setCopied] = useState(false)

  async function copy() {
    await navigator.clipboard.writeText(value)
    setCopied(true)
    setTimeout(() => setCopied(false), 1600)
  }

  return (
    <button onClick={copy} aria-live="polite">
      {copied ? 'Copied ✓' : 'Copy'}
    </button>
  )
}

import { queryOptions } from '@tanstack/react-query'

export const eventQueries = {
  all: () => ['events'] as const,
  detail: (id: string) =>
    queryOptions({
      queryKey: [...eventQueries.all(), id],
      queryFn: () => fetchEvent(id),
      staleTime: 60_000,
    }),
}

// server: await qc.prefetchQuery(eventQueries.detail(id))
// client: useSuspenseQuery(eventQueries.detail(id))

export function assertNever(value: never): never {
  throw new Error(`Unhandled case: ${JSON.stringify(value)}`)
}

type Status = 'queued' | 'running' | 'failed'

function label(s: Status) {
  switch (s) {
    case 'queued':  return 'Waiting'
    case 'running': return 'In progress'
    case 'failed':  return 'Failed'
    default: return assertNever(s)
  }
}

// useRef typescript
const anchor = useRef() as MutableRefObject<HTMLAnchorElement>;
const containerRef = useRef() as { current: HTMLDivElement };

// onChange typescript
import { ComponentProps } from "react"

const MyInput = ({
  onChange
}: {
  onChange: ComponentProps<"input">["onChange"]
}) => (
  <div>
    <input onChange={onChange} />
  </div>
);

<div className="flex items-stretch">
  <div className="h-auto" />
  <div className="h-auto" />
</div>

import PersonImage from "@/src/assets/person-image.webp"

// cover: crop to fill the parent
<div className="relative">
  <Image src={PersonImage} fill className="h-full w-full object-cover" />
</div>

// contain: parent needs an explicit size
<div className="relative h-10 w-32">
  <Image src={PersonImage} fill className="h-full w-full object-contain" />
</div>

// remote source (host must be in next.config images)
<div className="relative">
  <Image src={`https://${BASE_URL}/person-image.webp`} fill className="h-full w-full object-cover" />
</div>

window.onbeforeunload = function () { return "Leave page?"; };

import { type ClassValue } from "clsx";
import { forwardRef, useCallback } from "react";

interface MainLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
  backgroundColor?: ClassValue;
  isFullWidth?: boolean;
  isAddTopPadding?: boolean;
  isDisableMaxWidth?: boolean;
  isAddVerticalPadding?: boolean;
  isOverflowHidden?: boolean;
}

const MainLayout = forwardRef<HTMLDivElement, MainLayoutProps>(
  ({ ...props }, ref) => {
    const handleFocus = useCallback(() => {
      if (ref && typeof ref !== "function" && ref.current) {
        ref.current.focus();
      }
    }, [ref]);

    return (
      <div ref={ref} {...props}>
        {props.children}
      </div>
    );
  },
);

MainLayout.displayName = "MainLayout";

import { cn } from "@/lib/utils";

const CustomButton = ({
  className,
  children,
  ...rest
}: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
  return (
    <button className={cn("rounded-full", className)} {...rest}>
      {children}
    </button>
  );
};
export default CustomButton;

export const CustomDiv = ({
  className,
}: {
  className: React.HTMLAttributes<HTMLDivElement>["className"];
}) => {
  return <div className={className}>SomeDiv</div>;
};

const Component = () => {
  const animationControl = useAnimationControls();
  const motionVar: Variants = {
    animate: {
      opacity: 1,
    },
    exit: {
      opacity: 0,
    },
  };

  return (
    <motion.div
      variants={motionVar}
      animate={animationControl}
      onClick={() => animationControl.start("animate")}
      initial={"exit"}
    >
      Hello World
    </motion.div>
  );
};

const PlainPlayIcon = () => (
  // add this class name for possible fix
  <svg
    fill="currentColor"
    viewBox="0 0 29 32"
    xmlns="http://www.w3.org/2000/svg"
    className="h-full w-full"
  >
    <path d="..." fill="currentColor" fillOpacity="0.85" />
  </svg>
);

const Icon = () => (
  // add both h-8 and w-8 for possible fix
  <button className="aspect-square h-8 w-8 rounded-full">
    <PlainPlayIcon />
  </button>
);

"scripts": {
  "postinstall": "prisma generate && npm rebuild argon2 --build-from-source"
}

const inputRefs = useRef<Array<RefObject<HTMLInputElement>>>([]);
inputRefs.current = Array.from({ length: pinLen }).map(
  (_, index) => (inputRefs.current[index] = createRef())
);

"use client";

import { MutableRefObject, PropsWithChildren, useRef, useState } from "react";
import DropdownArrow from "../common/icons/DropdownArrow";

type Props = { title: string };

function DropdownItem({ title, children }: PropsWithChildren<Props>) {
  const [isOpen, setIsOpen] = useState(false);
  const itemRef = useRef() as MutableRefObject<HTMLDivElement>;

  return (
    <div className="rounded-lg bg-white p-4 shadow-[0px_2px_8px_0px_rgba(0,0,0,0.15)]">
      <div
        data-testid="dropdown-trigger"
        className="flex cursor-pointer items-center justify-between"
        onClick={() => setIsOpen((prev) => !prev)}
      >
        <p className="flex-1 py-2 pr-2 text-sm font-semibold sm:text-base">
          {title}
        </p>
        <div
          data-testid="dropdown-arrow"
          className={`${
            isOpen ? "rotate-180" : ""
          } flex aspect-square w-6 items-center justify-center transition-transform duration-200 ease-out`}
        >
          <DropdownArrow />
        </div>
      </div>
      <div
        className="overflow-hidden transition-all duration-500 ease-in-out"
        style={
          isOpen
            ? { maxHeight: itemRef.current.clientHeight }
            : { maxHeight: 0 }
        }
      >
        <div
          className={`border-t-solid flex h-full w-full flex-col gap-3 ${
            isOpen ? "border-opacity-100" : "border-opacity-0"
          } border-t-[1px] border-[#D2D2D2] pb-2 pt-4 text-sm transition-all duration-200 ease-out sm:text-base`}
          ref={itemRef}
        >
          {children}
        </div>
      </div>
    </div>
  );
}

export default DropdownItem;

<div className="h-0 overflow-hidden pt-4 transition-all duration-300 ease-in-out [interpolate-size:allow-keywords] group-hover:h-auto">
  <p className="h5">{service.description}</p>
</div>

export const profileFormSchema = z
  .object({
    profileEmail: z
      .email("invalidEmail")
      .max(255, "emailTooLong")
      .optional()
      .or(z.literal("")), // Prevent error on literal ""
    websiteUrl: z.url().max(255, "inputTooLong").optional().or(z.literal("")),
    customButtonUrl: z
      .url()
      .max(255, "inputTooLong")
      .optional()
      .or(z.literal("")),
  })

import type { DefaultValues } from "react-hook-form";
import type { QuestionItemDto } from "@/schema";
import type { CreateOkkAssessmentFormFields } from "../_static/schemas";

export default function transformOkkQuestionResponseToForm(
  questions?: QuestionItemDto[],
  currentLayer?: number
): DefaultValues<CreateOkkAssessmentFormFields> {
  return {
    assessments: questions?.map((question) => ({
      assessmentId: question.id,
      currentUserLayer: currentLayer,
      isRequireFile: !!question.isEvidenceRequired,
      deviationAction: question.deviationAction
    }))
  };
}

<DialogContent
  onOpenAutoFocus={(e) => e.preventDefault()}
>
  {/* ... */}
</DialogContent>