Forem: pjdev2d

context-dash

pjdev2d — Tue, 26 May 2026 08:52:23 +0000

import { useElementContextMenu } from "@/src/components/base/context-menu";
import { notify } from "@/src/components/base/notify/store";

export const Dashboard = () => {
  const menuRef = useElementContextMenu<
    HTMLButtonElement,
    {
      id: number;
      name: string;
    }
  >({
    mode: "replace",

    payload: {
      id: 101,
      name: "Dashboard Button",
    },

    items: (payload) => [
      {
        id: "edit",

        label: `Edit ${payload?.name}`,

        onClick: () => {
          console.log("EDIT", payload);
        },
      },

      {
        id: "delete",

        label: `Delete ${payload?.id}`,

        onClick: () => {
          console.log("DELETE", payload);
        },
      },
    ],
  });

  return (
    <>
      <button
        onClick={() => {
          notify({
            title: "Success",
            description: "Profile updated",
            variant: "success",
          });
        }}
      >
        Save
      </button>

      <button
        className="bg-red-950 p-5 rounded-md text-white"
        ref={menuRef}
      >
        Right Click Me
      </button>
    </>
  );
};

context menu

pjdev2d — Tue, 26 May 2026 08:51:25 +0000

https://chatgpt.com/share/6a155e06-9860-83e8-81c5-e26d1a207d9c

types

export type ContextMenuItem = {
  id: string;
  label: string;
  onClick?: () => void;

  disabled?: boolean;
  children?: ContextMenuItem[];
};

export type ContextMenuState = {
  isOpen: boolean;
  x: number;
  y: number;
  items: ContextMenuItem[];
};

Store

import { create } from "zustand";
import type { ContextMenuItem, ContextMenuState } from "./types";
import { BASE_MENU_RIGHT_CLICK } from "./base-menu-right-click";

type Store = ContextMenuState & {
  open: (x: number, y: number, items?: ContextMenuItem[]) => void;
  close: () => void;
};

export const useContextMenuStore = create<Store>((set) => ({
  isOpen: false,
  x: 0,
  y: 0,
  items: BASE_MENU_RIGHT_CLICK,

  open: (x, y, items) =>
    set({
      isOpen: true,
      x,
      y,
      items: items ?? BASE_MENU_RIGHT_CLICK,
    }),

  close: () =>
    set({
      isOpen: false,
    }),
}));

page

import type { ContextMenuItem } from "./types";
import { BASE_MENU_RIGHT_CLICK } from "./base-menu-right-click";

type PageMenuMode = "base" | "replace" | "extend";

type PageConfig = {
  mode: PageMenuMode;
  items?: ContextMenuItem[];
};

export function getPageContextMenu(pathname: string): PageConfig {
  switch (pathname) {
    case "/expense":
      return {
        mode: "replace",
        items: [
          {
            id: "add-expense",
            label: "Add Expense",
            onClick: () => console.log("Add Expense"),
          },
          {
            id: "export-expense",
            label: "Export",
            children: [
              {
                id: "pdf",
                label: "PDF",
                onClick: () => {},
              },
              {
                id: "csv",
                label: "CSV",
                onClick: () => {},
              },
            ],
          },
        ],
      };
    case "/income":
      return {
        mode: "extend",
        items: [
          {
            id: "add-income",
            label: "Add Income",
            onClick: () => console.log("Add Income"),
          },
          {
            id: "export-income",
            label: "Export",
            onClick: () => console.log("Export Expense"),
          },
        ],
      };

    default:
      return {
        mode: "base",
      };
  }
}

Element

import type { ContextMenuItem } from "./types";

type ElementMode = "replace" | "extend";

type ElementConfig = {
  mode: ElementMode;
  items: ContextMenuItem[];
};

const registry = new WeakMap<HTMLElement, ElementConfig>();

export function registerElementMenu(
  element: HTMLElement,
  config: ElementConfig,
) {
  registry.set(element, config);
}

export function getElementContextMenu(
  target: EventTarget | null,
): ElementConfig | null {
  if (!(target instanceof HTMLElement)) {
    return null;
  }

  let current: HTMLElement | null = target;

  while (current) {
    const config = registry.get(current);

    if (config) {
      return config;
    }

    current = current.parentElement;
  }

  return null;
}

Element actions

import type { ContextMenuItem } from "./types";

type ExpensePayload = {
  expenseId: number;
  expense?: unknown;
};

type ExpenseHandlers = {
  onEdit: (payload: ExpensePayload) => void;
  onDelete: (payload: ExpensePayload) => void;
};

export function getExpenseMenuItems(
  payload: ExpensePayload,
  handlers: ExpenseHandlers,
): ContextMenuItem[] {
  return [
    {
      id: "edit-expense",
      label: "Edit Expense",

      onClick: () => {
        handlers.onEdit(payload);
      },
    },

    {
      id: "delete-expense",
      label: "Delete Expense",

      onClick: () => {
        handlers.onDelete(payload);
      },
    },
  ];
}

Use-contectMenu

import { useEffect } from "react";
import { useContextMenuStore } from "./store";
import { getPageContextMenu } from "./page";
import { BASE_MENU_RIGHT_CLICK } from "./base-menu-right-click";
import { getElementContextMenu } from "./element";

export function useContextMenu() {
  const open = useContextMenuStore((s) => s.open);
  const close = useContextMenuStore((s) => s.close);

  useEffect(() => {
    const handleRightClick = (e: MouseEvent) => {
      e.preventDefault();
      // Since we use createHashRouter, the path is in the hash (e.g. '#/expense').
      // window.location.pathname will always be "/" in a hash router.
      const hash = window.location.hash;
      const path = hash.replace(/^#/, "").split("?")[0] || "/";
      const pageConfig = getPageContextMenu(path);

      let finalMenu = BASE_MENU_RIGHT_CLICK;

      if (pageConfig.mode === "replace") {
        finalMenu = pageConfig.items || [];
      }
      if (pageConfig.mode === "extend") {
        const baseIds = new Set(BASE_MENU_RIGHT_CLICK.map((i) => i.id));

        const extraItems = (pageConfig.items || []).filter(
          (item) => !baseIds.has(item.id),
        );

        finalMenu = [...BASE_MENU_RIGHT_CLICK, ...extraItems];
      }
      // Element Context Menu
      const elementConfig = getElementContextMenu(e.target);

      if (elementConfig) {
        if (elementConfig.mode === "replace") {
          finalMenu = elementConfig.items;
        }

        if (elementConfig.mode === "extend") {
          finalMenu = [
            ...finalMenu,
            ...elementConfig.items.filter(
              (item) => !finalMenu.some((existing) => existing.id === item.id),
            ),
          ];
        }
      }
      open(e.clientX, e.clientY, finalMenu);
    };

    const handleClick = () => close();

    window.addEventListener("contextmenu", handleRightClick);
    window.addEventListener("click", handleClick);

    return () => {
      window.removeEventListener("contextmenu", handleRightClick);
      window.removeEventListener("click", handleClick);
    };
  }, [open, close]);
}

use-element-CM

import { useCallback, useRef } from "react";
import { registerElementMenu } from "./element";
import type { ContextMenuItem } from "./types";

type Config<TPayload = unknown> = {
  mode: "replace" | "extend";

  payload?: TPayload;

  items: ContextMenuItem[] | ((payload?: TPayload) => ContextMenuItem[]);
};

export function useElementContextMenu<
  T extends HTMLElement = HTMLElement,
  TPayload = unknown,
>(config: Config<TPayload>) {
  const elementRef = useRef<T | null>(null);

  const setRef = useCallback(
    (node: T | null) => {
      if (node) {
        elementRef.current = node;

        const resolvedItems =
          typeof config.items === "function"
            ? config.items(config.payload)
            : config.items;

        registerElementMenu(node, {
          ...config,
          items: resolvedItems,
        });
      } else {
        elementRef.current = null;
      }
    },
    [config],
  );

  return setRef;
}

render-richt click menu

import { useState, useEffect, useCallback } from "react";
import { useFloating, autoUpdate, offset, flip, shift } from "@floating-ui/react";
import { useContextMenuStore } from "./store";
import { Potral } from "../overlay/portal";
import { cn } from "@/src/utils";
import type { ContextMenuItem } from "./types";

function SubMenuItem({ item, close }: { item: ContextMenuItem; close: () => void }) {
  const [isOpen, setIsOpen] = useState(false);
  const { refs, floatingStyles } = useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
    placement: "right-start",
    middleware: [
      offset({ mainAxis: 4, crossAxis: -4 }),
      flip({ fallbackPlacements: ["left-start"] }),
      shift({ padding: 8 }),
    ],
    whileElementsMounted: autoUpdate,
  });

  return (
    <div
      ref={refs.setReference}
      onMouseEnter={() => setIsOpen(true)}
      onMouseLeave={() => setIsOpen(false)}
      className="relative"
    >
      <div
        className={cn(
          "hover:bg-gray-100 active:bg-gray-200 px-3 py-2 rounded text-gray-700 text-sm cursor-pointer flex justify-between items-center",
          item.disabled && "opacity-50 cursor-not-allowed hover:bg-transparent active:bg-transparent",
          isOpen && "bg-gray-100",
        )}
      >
        <span>{item.label}</span>
        <span className="text-xs text-gray-400">&gt;</span>
      </div>

      {isOpen && (
        <div
          ref={refs.setFloating}
          style={floatingStyles}
          className="z-[10000] bg-white shadow-lg p-1 border border-gray-200 rounded-md min-w-[180px]"
        >
          {item.children?.map((child) => (
            <div
              key={child.id}
              onClick={(e) => {
                e.stopPropagation();
                if (child.disabled) return;
                child.onClick?.();
                close();
              }}
              className={cn(
                "rounded px-3 py-2 text-sm cursor-pointer hover:bg-gray-100",
                child.disabled && "cursor-not-allowed text-gray-400 hover:bg-transparent",
              )}
            >
              {child.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export function RenderRightClickMenu() {
  const { isOpen, x, y, items, close } = useContextMenuStore();

  const { refs, floatingStyles, update } = useFloating({
    placement: "bottom-start",
    middleware: [
      offset(0),
      flip({
        fallbackPlacements: ["bottom-end", "top-start", "top-end"],
      }),
      shift({ padding: 8 }),
    ],
    whileElementsMounted: autoUpdate,
  });

  useEffect(() => {
    if (isOpen) {
      refs.setReference({
        getBoundingClientRect() {
          return {
            width: 0,
            height: 0,
            x: x,
            y: y,
            top: y,
            left: x,
            right: x,
            bottom: y,
          };
        },
      });
      update();
    }
  }, [isOpen, x, y, refs, update]);

  if (!isOpen) return null;

  return (
    <Potral>
      <div
        ref={refs.setFloating}
        style={floatingStyles}
        className="z-[9999] bg-white shadow-lg p-1 border border-gray-200 rounded-md min-w-[180px]"
      >
        {items.map((item) => {
          if (item.children?.length) {
            return <SubMenuItem key={item.id} item={item} close={close} />;
          }

          return (
            <div
              key={item.id}
              onClick={() => {
                if (item.disabled) return;
                item.onClick?.();
                close();
              }}
              className={cn(
                "hover:bg-gray-100 active:bg-gray-200 px-3 py-2 rounded text-gray-700 text-sm cursor-pointer",
                item.disabled && "opacity-50 cursor-not-allowed hover:bg-transparent active:bg-transparent",
              )}
            >
              {item.label}
            </div>
          );
        })}
      </div>
    </Potral>
  );
}

base menu

import type { ContextMenuItem } from "./types";

export const BASE_MENU_RIGHT_CLICK: ContextMenuItem[] = [
  {
    id: "refresh",
    label: "Refresh",
    onClick: () => window.location.reload(),
  },
  {
    id: "back",
    label: "Back",
    onClick: () => window.history.back(),
  },
  {
    id: "forward",
    label: "Forward",
    onClick: () => window.history.forward(),
  },
];

INDEX

export { useContextMenu } from "./use-context-menu";
export { RenderRightClickMenu } from "./render-right-click-menu";
export { useContextMenuStore } from "./store";
export {useElementContextMenu} from "./use-element-context-menu";

md - context menu

pjdev2d — Tue, 26 May 2026 08:07:38 +0000

# Context Menu System – Architecture Review Notes

## Current Architecture Score

| Area | Score |
|-------|-------|
| Architecture | 8.5 / 10 |
| Correctness | 8 / 10 |
| Production Readiness | 6.5 / 10 |

---

# Issue 1 — Hover Gap Flicker

## Problem

Current implementation:

tsx
onMouseEnter(() => setIsOpen(true))
onMouseLeave(() => setIsOpen(false))


Scenario:

Export >
moving mouse
↓
gap between parent and submenu
↓
submenu closes unexpectedly


This creates unstable submenu UX.

Production desktop applications avoid this.

---

## Solution

Use Floating UI interaction hooks:

tsx
useHover()
safePolygon()


Future direction:

tsx
useHover(context,{
handleClose:safePolygon()
})


Benefits:

- Prevent submenu closing while cursor moves
- Better hover experience
- Desktop application quality interactions

Priority: HIGH

---

# Issue 2 — Nested Submenu Limitation

## Problem

Current rendering supports:

Export >
PDF
CSV


But fails for:

Export >
CSV >
Daily
Monthly


Current renderer only handles one submenu level.

---

## Solution

Convert submenu rendering into recursive rendering.

Future architecture:

SubMenuItem
└── SubMenuItem
└── SubMenuItem
└── Infinite levels


Benefits:

- Unlimited submenu nesting
- Cleaner architecture
- Better scalability

Priority: HIGH

---

# Issue 3 — Missing Size Middleware

## Problem

Current middleware:

ts
middleware:[
offset(),
flip(),
shift()
]


Large menus can overflow viewport.

Example:

200 menu items
↓
menu exceeds viewport height


Current system does not control menu sizing.

---

## Solution

Add Floating UI:

tsx
size()


Example direction:

tsx
size({
apply({
availableHeight,
elements
}){
Object.assign(
elements.floating.style,
{
maxHeight:
${availableHeight}px
}
)
}
})


Benefits:

- Dynamic max height
- Automatic scrolling
- Better viewport handling

Priority: MEDIUM

---

# Issue 4 — Floating Logic Duplication

## Problem

Current system:

SubMenuItem

RenderRightClickMenu


Both know positioning internals.

Future additions:

Tooltip
Hover Card
Dropdown
Command Menu


May duplicate Floating UI logic.

---

## Solution

Create shared floating abstraction.

Future architecture:

floating-layer/

useFloatingLayer()

context-menu/

tooltip/

hover-card/

dropdown/


Benefits:

- Single positioning engine
- Shared collision handling
- Easier maintenance
- Cleaner architecture

Priority: MEDIUM

---

# Issue 5 — Possible Redundant Update Calls

## Problem

Current implementation:

tsx
update()


inside:

tsx
useEffect()


Current system already uses:

tsx
autoUpdate()


Manual updates may create unnecessary work.

---

## Solution

Validate whether manual update calls are required.

Keep only if measurements prove necessary.

Benefits:

- Less work per render
- Cleaner Floating UI integration

Priority: LOW

---

# Recommended Upgrade Order

1. safePolygon hover handling

2. Recursive submenu rendering

3. Floating UI size middleware

4. Shared floating abstraction

---

# Future Architecture Goal

Final architecture target:

Interaction Layer
↓

Context Resolution Layer
(Base > Page > Element)

↓

Menu Resolution Layer

↓

Floating Layer Engine

↓

Context Menu
Tooltip
Hover Card
Dropdown
Quick Actions
Command Palette


Single positioning system.

Multiple UI consumers.

---

# Future AI Prompt

Review my React + Floating UI context menu architecture as a senior frontend architect with 10+ years experience.

Analyze:

- scalability
- collision detection
- submenu behavior
- hover interactions
- recursive rendering capability
- viewport handling
- edge collision detection
- Floating UI middleware usage
- abstraction quality
- state architecture
- performance concerns
- accessibility considerations
- maintainability
- production readiness

Identify:

- architectural weaknesses
- UX issues
- performance bottlenecks
- missing production features

Provide:

- priority ordering
- production-grade improvements
- future scalability recommendations

Avoid beginner suggestions and review like a senior frontend architect building desktop-quality web applications.

pagination

pjdev2d — Mon, 25 May 2026 14:29:57 +0000

import { useState } from "react";

export function usePagination(initialPage = 1) {
  const [page, setPage] = useState(initialPage);

  const nextPage = () => {
    setPage((prev) => prev + 1);
  };

  const prevPage = () => {
    setPage((prev) => Math.max(prev - 1, 1));
  };

  return {
    page,
    setPage,
    nextPage,
    prevPage,
  };
}


/* 

const pagination = usePagination();

const { data } = useUsers({
  page: pagination.page,
});


<Pagination
  page={pagination.page}
  totalPages={data.meta.totalPages}
  onNext={pagination.nextPage}
  onPrev={pagination.prevPage}
/>

*/

types

export interface PaginationProps {
  page: number;
  totalPages: number;

  onNext: () => void;
  onPrev: () => void;
}

pagination.tsx

import { ChevronLeft, ChevronRight } from "lucide-react";
import type { PaginationProps } from "./types";

export function Pagination({
  page,
  totalPages,
  onNext,
  onPrev,
}: PaginationProps) {
  const isFirstPage = page <= 1;
  const isLastPage = page >= totalPages;

  return (
    <div className="flex justify-end items-center gap-3">
      <button
        type="button"
        onClick={onPrev}
        disabled={isFirstPage}
        className="flex justify-center items-center disabled:opacity-50 border rounded-md w-9 h-9 disabled:cursor-not-allowed"
      >
        <ChevronLeft size={18} />
      </button>

      <p className="text-sm">
        Page {page} of {totalPages}
      </p>

      <button
        type="button"
        onClick={onNext}
        disabled={isLastPage}
        className="flex justify-center items-center disabled:opacity-50 border rounded-md w-9 h-9 disabled:cursor-not-allowed"
      >
        <ChevronRight size={18} />
      </button>
    </div>
  );
}

notify

pjdev2d — Mon, 25 May 2026 12:51:30 +0000

constants

import type { NotifyPosition, NotifyVariant } from "./types";

export const notifyPositionClasses: Record<NotifyPosition, string> = {
  "top-left": "top-4 left-4",
  "top-center": "top-4 left-1/2 -translate-x-1/2",
  "top-right": "top-4 right-4",
  "bottom-left": "bottom-4 left-4",
  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
  "bottom-right": "bottom-4 right-4",
};

export const notifyVariantClasses: Record<NotifyVariant, string> = {
  default: "border-neutral-200 bg-white text-black",

  success: "border-green-200 bg-green-50 text-green-950",

  error: "border-red-200 bg-red-50 text-red-950",

  warning: "border-yellow-200 bg-yellow-50 text-yellow-950",

  info: "border-blue-200 bg-blue-50 text-blue-950",
};

INDEX

export { NotifyContainer } from "./notify-container";
export { notify, dismiss } from "./store";

card

import { dismiss } from "./store";
import type { NotifyItem } from "./types";
import { notifyVariantClasses } from "./constants";
import { cn } from "@/src/utils";

interface NotifyCardProps {
  item: NotifyItem;
}

export function NotifyCard({ item }: NotifyCardProps) {
  return (
    <div
      className={cn(
        "shadow-xl p-4 border rounded-xl min-w-[320px]",
        notifyVariantClasses[item?.variant || "default"],
      )}
    >
      <div className="flex justify-between items-start gap-4">
        <div>
          {item.title && <h3 className="font-semibold">{item.title}</h3>}

          {item.description && (
            <p className="text-neutral-500 text-sm">{item.description}</p>
          )}
        </div>

        <button onClick={() => dismiss()}>✕</button>
      </div>
    </div>
  );
}

container

import { useEffect, useState } from "react";
import type { NotifyItem } from "./types";
import { subscribe } from "./store";
import { notifyPositionClasses } from "./constants";
import { cn } from "@/src/utils";
import { NotifyCard } from "./notify-card";
import { Potral } from "../overlay";

export function NotifyContainer() {
  const [item, setItem] = useState<NotifyItem | null>(null);
  const [visible, setVisible] = useState(false);
  const [renderItem, setRenderItem] = useState<NotifyItem | null>(null);

  useEffect(() => {
    return subscribe(setItem);
  }, []);

  useEffect(() => {
    if (item) {
      setRenderItem(item);

      requestAnimationFrame(() => {
        setVisible(true);
      });
    } else {
      setVisible(false);

      const timeout = setTimeout(() => {
        setRenderItem(null);
      }, 300);

      return () => clearTimeout(timeout);
    }
  }, [item]);

  if (!renderItem) return null;

  return (
    <Potral>
      <div
        key={renderItem.id}
        className={cn(
          "z-[9999] fixed transition-all duration-300",
          visible ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0",
          notifyPositionClasses[renderItem.position || "top-center"],
        )}
      >
        <NotifyCard item={renderItem} />
      </div>
    </Potral>
  );
}

Store

import type { NotifyItem } from "./types";

type Listener = (item: NotifyItem | null) => void;
let memoryState: NotifyItem | null = null;
let listener: Listener | null = null;

function dispatch() {
  listener?.(memoryState);
}

export function subscribe(l: Listener) {
  listener = l;

  listener(memoryState);

  return () => {
    listener = null;
  };
}

export function notify(item: Omit<NotifyItem, "id">) {
  const newItem: NotifyItem = {
    id: crypto.randomUUID(),
    ...item,
  };

  memoryState = newItem;

  dispatch();

  return newItem.id;
}

export function dismiss() {
  memoryState = null;

  dispatch();
}

types

export type NotifyPosition =
  | "top-left"
  | "top-center"
  | "top-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

export type NotifyVariant =
  | "default"
  | "success"
  | "error"
  | "info"
  | "warning";

export interface NotifyItem {
  id: string;
  title?: string;
  description?: string;
  position?: NotifyPosition;
  variant?: NotifyVariant;
}

calling

import { RouterProvider } from "react-router-dom";
import { router } from "./router";
import { NotifyContainer, ToastContainer } from "./components/base";

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <ToastContainer />
      <NotifyContainer />
    </>
  );
}

export default App;

app provider

pjdev2d — Fri, 22 May 2026 08:29:08 +0000

import type { Provider as Props } from "@/root.config";
import { createContext, useContext, useState } from "react";
import { Modal, SidePanel } from "../components/base";
import { APP_PROVIDER_TYPE } from "../utils";

const AppContext = createContext<Props.AppContextProps | undefined>(undefined);
export const AppProvider = ({ children }: Props.ProviderProps) => {
  const [stack, setStack] = useState<
    {
      id: Props.BaseProps["id"];
      type: Props.BaseProps["type"];
      content?: Props.BaseProps["providerContent"];
      options?: Props.BaseProps["options"];
    }[]
  >([]);

  const open = (
    type: Props.BaseProps["type"],
    content?: Props.BaseProps["providerContent"],
    options?: Props.BaseProps["options"],
  ) => {
    const id = Math.random().toString();
    setStack((prev) => [...prev, { id, type, content, options }]);
  };
  const close = (id: Props.BaseProps["id"]) => {
    setStack((prev) => prev.filter((i) => i.id !== id));
  };

  return (
    <AppContext.Provider value={{ open, close }}>
      {children}
      {stack.map((item) => (
        <div key={item.id}>
          {item.type === APP_PROVIDER_TYPE.MODAL && (
            <Modal options={item.options || {}} onClose={() => close(item.id)}>
              {item.content &&
                item.content({
                  close: () => close(item.id),
                })}
            </Modal>
          )}
          {item.type === APP_PROVIDER_TYPE.SIDE_PANEL && (
            <SidePanel
              options={item.options || {}}
              onClose={() => close(item.id)}
            >
              {item.content?.({
                close: () => close(item.id),
              })}
            </SidePanel>
          )}
        </div>
      ))}
    </AppContext.Provider>
  );
};

export const useAppProvider = () => {
  const context = useContext(AppContext);
  if (!context) throw new Error("useApp must be used within AppProviders");
  return context;
};

MAIN

  <StrictMode>
    <AppProvider>
      <App />
    </AppProvider>
  </StrictMode>,

INTERFACE

import { type ReactNode } from "react";

export namespace Provider {
  export interface BaseProps {
    children: ReactNode;
    id: string;
    type: string;
    content: ReactNode;
    custom: () => ReactNode;
    providerContent: (helpers: { close: () => void }) => ReactNode;
    options?: {
      [key: string]: unknown;
      onSide?: "left" | "right" | undefined;
    };
  }
  export interface AppContextProps {
    open: (
      type: BaseProps["type"],
      content?: BaseProps["providerContent"],
      options?: BaseProps["options"],
    ) => void;
    close: (id: BaseProps["id"]) => void;
  }
  export interface ProviderProps {
    children: BaseProps["children"];
  }
}

modals

pjdev2d — Fri, 22 May 2026 08:27:24 +0000

import { X } from "lucide-react";
import { Btn } from "./button";
import { Flex } from "./layout";
import { cn } from "@/src/utils";

interface Props {
  children: React.ReactNode;
  className?: string;
  title?: string;
  description?: string;
  footer?: React.ReactNode;
  close?: () => void;
}
export function ModalCard({
  children,
  title,
  description,
  footer,
  className,
  close,
}: Props) {
  return (
    <Flex
      direction="column"
      className={cn(
        " bg-white max-h-[90vh] max-w-[90vw] rounded-xl overflow-hidden",
        className,
      )}
    >
      <Flex
        direction="row"
        items="center"
        justify="between"
        className="w-full p-4 border-b"
      >
        <Flex direction="column">
          {title && <span className="font-semibold">{title}</span>}
          {description && <span>{description}</span>}
        </Flex>
        <Btn variant="solid-icon" rounded="full" onClick={close}>
          <X strokeWidth={2.5} />
        </Btn>
      </Flex>

      <div className="w-full min-w-0 overflow-auto p-4">{children}</div>

      <div className="flex justify-end w-full p-4 border-t">{footer}</div>
    </Flex>
  );
}

modal

import { Backdrop } from "./backdrop";
import { type Provider as Props } from "@/root.config";
import { Potral } from "./portal";

interface ModalBaseProps {
  children?: Props.BaseProps["children"];
  onClose?: () => void;
  options: Props.BaseProps["options"];
}

export const Modal = ({ children, onClose, options }: ModalBaseProps) => {
  return (
    <Potral>
      <Backdrop {...options} onClose={onClose}>
        <div className="relative z-10000">{children}</div>
      </Backdrop>
    </Potral>
  );
};

import { X } from "lucide-react";
import { Btn } from "./button";
import { Flex } from "./layout";
import { cn } from "@/src/utils";

interface Props {
  children: React.ReactNode;
  title?: string;
  description?: string;
  className?: string;
  close?: () => void;
}
export function SidePanelCard({
  children,
  title,
  description,
  className,
  close,
}: Props) {
  return (
    <Flex
      direction="column"
      className={cn(
        " bg-white min-h-screen min-w-10 overflow-hidden",
        className,
      )}
    >
      <Flex
        direction="row"
        items="center"
        justify="between"
        className="w-full p-4 border-b"
      >
        <Flex direction="column">
          {title && <span className="font-semibold">{title}</span>}
          {description && <span>{description}</span>}
        </Flex>
        <Btn variant="solid-icon" rounded="full" onClick={close}>
          <X strokeWidth={2.5} />
        </Btn>
      </Flex>

      <Flex direction="row" className="min-h-0 w-auto overflow-y-auto p-4">
        {children}
      </Flex>
    </Flex>
  );
}

sidepanel

import type { ReactNode } from "react";
import { Backdrop } from "./backdrop";
import { type Provider as Props } from "@/root.config";
import { Potral } from "./portal";

interface SidePanelBaseProps {
  children?: ReactNode | string;
  onClose?: () => void;
  options: Props.BaseProps["options"];
}

export function SidePanel({ children, onClose, options }: SidePanelBaseProps) {
  const justify = options?.onSide === "left" ? "start" : "end";
  return (
    <>
      <Potral>
        <Backdrop justify={justify} onClose={() => onClose?.()}>
          <div className="relative z-10000">{children}</div>
        </Backdrop>
      </Potral>
    </>
  );
}

callings

export const Dashboard = () => {
  const { open } = useAppProvider();

  const handleOpenModal = () => {
    open(APP_PROVIDER_TYPE.MODAL, ({ close }) => (
      <ModalCard close={close}> this is modal</ModalCard>
    ));
  };

  const handleOpenSidepanel = () => {
    open(APP_PROVIDER_TYPE.SIDE_PANEL, ({ close }) => (
      <SidePanelCard close={close}>this is side panel</SidePanelCard>
    ));
  };

  return (
    <>
      <Btn
        onClick={() => handleOpenModal()}
        variant="solid"
        className="px-4 py-2 text-sm rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition"
      >
        Trigger Global Modal
      </Btn>

      <Btn
        onClick={handleOpenSidepanel}
        variant="solid"
        className="px-4 py-2 text-sm rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition"
      >
        Trigger Global Sidepanel
      </Btn>
    </>
  );
};

sidepanel

pjdev2d — Thu, 21 May 2026 13:29:55 +0000

 const handleOpenSidepanel = () => {
    open(APP_PROVIDER_TYPE.sidepanel, ({ close }) => (
      <div className="w-96">
        <Btn
          onClick={close}
          variant="outline"
          className="px-4 py-2 text-sm rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition"
        >
          Cancel
        </Btn>
      </div>
    ));
  };
 <Btn
        onClick={handleOpenSidepanel}
        variant="solid"
        className="px-4 py-2 text-sm rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition"
      >
        Trigger Global Sidepanel
      </Btn>

other

 {item.type === APP_PROVIDER_TYPE.sidepanel && (
            <SidePanel
              options={item.options || {}}
              onClose={() => close(item.id)}
            >
              {item.content({
                close: () => close(item.id),
              })}
            </SidePanel>
          )}

import type { ReactNode } from "react";
import { Backdrop } from "./backdrop";
import { type Provider as Props } from "@/root.config";
import { Potral } from "./portal";
import { Flex } from "../layout";

interface SidePanelBaseProps {
  children?: ReactNode | string;
  onClose?: () => void;
  options: Props.BaseProps["options"];
}

export function SidePanel({ children, onClose, options }: SidePanelBaseProps) {
  return (
    <>
      <Potral>
        <Backdrop justify="end" {...options} onClose={() => onClose?.()}>
          <Flex
            direction="column"
            justify="start"
            items="center"
            className="bg-white h-full relative w-fit"
          >
            {children}
          </Flex>
        </Backdrop>
      </Potral>
    </>
  );
}

Flow of modal context

pjdev2d — Thu, 21 May 2026 08:11:41 +0000

create btn (any where)

 <Btn onClick={handleOpenModal} variant="solid"> Open Modal </Btn>

handleOpenModal => contains the code of main component we will pass

provider_type
(close)=>(react node main)
options{}

now call

    const { open } = useAppProvider();

we only have open because we already passing close in modal

AppProvider => contains the main code of provider so that it can be called anywhere

 <AppContext.Provider value={{ open, close }}>
      {children}
      {stack.map((item) => (
        <div key={item.id}>
          {item.type === APP_PROVIDER_TYPE.modal && (
            <Modal options={item.options || {}} onClose={() => close(item.id)}>
              {item.content({
                close: () => close(item.id),
              })}
            </Modal>
          )}
          {/* You can add PANEL here later! */}
        </div>
      ))}
    </AppContext.Provider>

this modal comp is the main comp which contains the actual react node

export const Modal = ({ children, onClose, options }: ModalBaseProps) => {
  return (
    <Potral>
      <Backdrop {...options} onClose={onClose}>
        {children}
      </Backdrop>
    </Potral>
  );
};

potral here will potral the actual content at the bottom of code seperately and backdrop is just another comp that creates a backdrop screen in which main content will render

R Learning

pjdev2d — Wed, 20 May 2026 10:37:15 +0000

React Core Concepts Roadmap

If you want to become genuinely strong in React, focus less on “learning more libraries” and more on mastering the core concepts deeply.

These are the concepts that actually matter.

1. Components & Composition

The foundation of React.

Understand:

reusable components
props
composition patterns
controlled vs uncontrolled components
lifting state up

Core mindset:

Small reusable pieces > giant components

This is one of the biggest differences between beginner and advanced React code.

2. State Management

You must deeply understand:

local state
derived state
shared state
server state

And especially:

Not everything should go into state

A huge beginner mistake is overusing state.

3. Rendering Behavior

This is SUPER important.

Learn:

what causes rerenders
parent/child rerenders
reconciliation
React rendering cycle
batching
render vs commit phase

This knowledge explains:

performance issues
weird UI behavior
unnecessary rerenders

4. Hooks Deeply

Not just syntax.

Really understand:

useState
useEffect
useMemo
useCallback
useRef
useContext

Especially:

useEffect

Most React bugs come from misunderstanding effects.

Learn:

dependency arrays
stale closures
cleanup functions
synchronization mindset

5. Server State vs Client State

This is modern React architecture.

Understand difference between:

Client state

UI-only state.

Examples:

modal open
active tab
input value

Server state

Data from backend.

Examples:

users
notifications
products

This leads to tools like:

TanStack Query

6. Data Fetching & Caching

One of the most important modern skills.

Learn:

fetching lifecycle
loading states
background refetching
optimistic updates
cache invalidation
stale data
retries

This becomes critical in real apps.

7. React Architecture

Learn how to structure apps.

Understand:

folder structure
separation of concerns
reusable patterns
feature-based architecture
UI vs business logic

This matters more than fancy libraries.

8. Forms

Forms are deceptively difficult.

Learn:

controlled inputs
validation
async submit handling
optimistic form updates

Eventually:

React Hook Form

9. Async UI Thinking

Modern React is mostly async.

Understand:

promises
race conditions
concurrent requests
request cancellation
optimistic UI
suspense mindset

10. Performance

Very important later.

Learn:

memoization
virtualization
code splitting
lazy loading
avoiding unnecessary renders

But only AFTER understanding rendering deeply.

11. React Mental Model

This is the most important thing.

React is NOT:

"change DOM directly"

React is:

UI = function(state)

You describe UI based on state.

React handles updates.

This mental model changes everything.

12. Thinking in React

Advanced React developers think in:

state flow
data ownership
synchronization
UI transitions
component boundaries

not:

“where do I put this code?”

Biggest milestone in React learning

Beginner React

learns syntax

Intermediate React

builds features

Advanced React

understands rendering and state architecture

Senior React

designs predictable async UI systems

Recommended Learning Order

Components
State
Rendering
Hooks deeply
Async behavior
Server state
Caching
Architecture
Performance
Advanced patterns

What Actually Makes React Hard

Not JSX.

Not hooks syntax.

The hard part is:

managing async state predictably

That’s the real React skill ceiling.

t2 - comp

pjdev2d — Tue, 19 May 2026 07:57:21 +0000

New Comps

card comp
hover card
dropdown menu on click
context menu (right click & btn click)
bread crumbs (clickable / unclickables)
progress bar
custom scroll bar
toggle switch (like bookmark)

Major Comps

Nav menu (position + collaspe + sub meus)
skeleton effect
tab switch
accordin
slider

-- hydration & page reload logic for url params

https://chatgpt.com/share/6a145bce-80c4-83a8-8c57-a5d98cee7140

skeleton

np

pjdev2d — Mon, 18 May 2026 12:36:54 +0000

ChatGPT - Publish NPM Package Steps

Shared via ChatGPT

chatgpt.com

#!/usr/bin/env node

const { Command } = require("commander");
const fs = require("fs-extra");
const path = require("path");
const babel = require("@babel/core");
const presetTypescript = require("@babel/preset-typescript");
const { execSync } = require("child_process");
const registry = require("../registry.json");

const program = new Command();

/* -----------------------------
   INQUIRER (FIXED SAFE WRAPPER)
------------------------------*/
const prompt = async (questions) => {
  const inquirer = await import("inquirer");
  return inquirer.default.prompt(questions);
};

/* =============================
   ADD COMMAND
============================= */
program
  .command("add <name>")
  .description("Add components or utilities")
  .action(async (name) => {
    try {
      const cwd = process.cwd();
      console.log("\n🚀 Starting installation...\n");

      const isTsProject = fs.existsSync(path.join(cwd, "tsconfig.json"));

      let templatePath = "";
      let outputDir = "";
      let extension = "tsx";

      /* ---------------- COMPONENTS ---------------- */
      if (!name.startsWith("utils/")) {
        templatePath = path.join(__dirname, `../templates/${name}.tsx`);
        outputDir = path.join(cwd, "src/components/pejay-ui");
        extension = "tsx";
      } else {

      /* ---------------- UTILITIES ---------------- */
        const utilName = name.split("/")[1];
        templatePath = path.join(__dirname, `../utils/${utilName}.ts`);
        outputDir = path.join(cwd, "src/utils/pejay-ui");
        extension = "ts";
      }

      if (!fs.existsSync(templatePath)) {
        console.log(`❌ "${name}" not found`);
        return;
      }

      const code = await fs.readFile(templatePath, "utf8");

      let finalCode = code;
      let outputExt = extension;

      /* ---------------- TRANSFORM ---------------- */
      if (!isTsProject) {
        const transformed = babel.transformSync(code, {
          presets: [presetTypescript],
          filename: `file.${extension}`,
        });

        if (!transformed?.code) {
          throw new Error("Babel transform failed");
        }

        finalCode = transformed.code;
        outputExt = extension === "tsx" ? "jsx" : "js";
      }

      await fs.ensureDir(outputDir);

      const itemName = name.includes("/") ? name.split("/")[1] : name;
      const outputPath = path.join(outputDir, `${itemName}.${outputExt}`);

      await fs.writeFile(outputPath, finalCode);
      console.log(`✅ Created ${itemName}.${outputExt}`);

      /* ---------------- DEPENDENCIES ---------------- */
      const itemRegistry = registry[name];

      if (itemRegistry?.dependencies?.length) {
        for (const dependency of itemRegistry.dependencies) {
          const depName = dependency.includes("/")
            ? dependency.split("/")[1]
            : dependency;

          const depPath = path.join(__dirname, `../utils/${depName}.ts`);

          if (!fs.existsSync(depPath)) continue;

          let depCode = await fs.readFile(depPath, "utf8");

          if (!isTsProject) {
            const transformed = babel.transformSync(depCode, {
              presets: [presetTypescript],
              filename: `${depName}.ts`,
            });

            depCode = transformed.code;
          }

          const utilDir = path.join(cwd, "src/utils/pejay-ui");
          await fs.ensureDir(utilDir);

          const ext = isTsProject ? "ts" : "js";
          const outPath = path.join(utilDir, `${depName}.${ext}`);

          if (!fs.existsSync(outPath)) {
            await fs.writeFile(outPath, depCode);
            console.log(`📦 Added dependency ${depName}`);
          }
        }
      }

      /* ---------------- STATE SAVE ---------------- */
      const statePath = path.join(cwd, ".pejay-ui.json");

      let state = {};
      if (fs.existsSync(statePath)) {
        state = JSON.parse(await fs.readFile(statePath, "utf8"));
      }

      state.installed = state.installed || {};

      state.installed[name] = {
        files: [`src/components/pejay-ui/${itemName}.${outputExt}`],
        uses:
          itemRegistry?.dependencies?.map((d) =>
            d.includes("/") ? d.split("/")[1] : d,
          ) || [],
      };

      await fs.writeFile(statePath, JSON.stringify(state, null, 2));

      console.log(`\n🎉 ${name} installed successfully\n`);
    } catch (err) {
      console.error("\n❌ Add failed\n", err);
    }
  });

/* =============================
   REMOVE COMMAND (SAFE VERSION)
============================= */
program
  .command("remove <name>")
  .description("Remove components or utilities safely")
  .action(async (name) => {
    try {
      const cwd = process.cwd();
      console.log("\n🧹 Starting removal...\n");

      const itemRegistry = registry[name];

      if (!itemRegistry) {
        console.log(`❌ "${name}" not found in registry`);
        return;
      }

      const isTsProject = fs.existsSync(path.join(cwd, "tsconfig.json"));
      const itemName = name.includes("/") ? name.split("/")[1] : name;

      const componentDir = path.join(cwd, "src/components/pejay-ui");
      const utilsDir = path.join(cwd, "src/utils/pejay-ui");

      let removedAny = false;

      /* ---------------- REMOVE COMPONENT ---------------- */
      const exts = isTsProject ? ["tsx", "ts"] : ["jsx", "js"];

      for (const ext of exts) {
        const file = path.join(componentDir, `${itemName}.${ext}`);

        if (fs.existsSync(file)) {
          await fs.remove(file);
          console.log(`🗑️ Removed ${file}`);
          removedAny = true;
        }
      }

      /* ---------------- LOAD STATE ---------------- */
      const statePath = path.join(cwd, ".pejay-ui.json");

      let state = {};
      if (fs.existsSync(statePath)) {
        state = JSON.parse(await fs.readFile(statePath, "utf8"));
      }

      state.installed = state.installed || {};

      /* ---------------- BUILD USAGE MAP ---------------- */
      const usageMap = new Map();

      for (const comp of Object.values(state.installed)) {
        for (const u of comp.uses || []) {
          usageMap.set(u, (usageMap.get(u) || 0) + 1);
        }
      }

      /* ---------------- SAFE UTILITY REMOVE ---------------- */
      if (itemRegistry.dependencies?.length) {
        for (const dep of itemRegistry.dependencies) {
          const utilName = dep.includes("/") ? dep.split("/")[1] : dep;

          const usage = usageMap.get(utilName) || 0;

          if (usage > 1) {
            console.log(`⛔ Skipping ${utilName} (used by other components)`);
            continue;
          }

          const { confirm } = await prompt([
            {
              type: "confirm",
              name: "confirm",
              message: `Remove utility "${utilName}"?`,
              default: false,
            },
          ]);

          if (!confirm) continue;

          for (const ext of exts) {
            const file = path.join(utilsDir, `${utilName}.${ext}`);

            if (fs.existsSync(file)) {
              await fs.remove(file);
              console.log(`🗑️ Removed ${file}`);
              removedAny = true;
            }
          }
        }
      }

      /* ---------------- REMOVE PACKAGES ---------------- */
      // Only collect packages from deps that NO other component still uses
      const pkgs = [];

      for (const dep of itemRegistry.dependencies || []) {
        const utilName = dep.includes("/") ? dep.split("/")[1] : dep;
        const usage = usageMap.get(utilName) || 0;

        // usage > 1 means another component still needs this dep → skip its packages
        if (usage > 1) {
          console.log(`⛔ Keeping packages for ${utilName} (used by other components)`);
          continue;
        }

        const reg = registry[dep];
        if (reg?.packages) pkgs.push(...reg.packages);
      }

      if (pkgs.length) {
        const unique = [...new Set(pkgs)];

        const { ok } = await prompt([
          {
            type: "confirm",
            name: "ok",
            message: `Uninstall packages: ${unique.join(", ")}?`,
            default: false,
          },
        ]);

        if (ok) {
          execSync(`npm uninstall ${unique.join(" ")}`, {
            cwd,
            stdio: "inherit",
          });
        }
      }

      /* ---------------- CLEAN STATE ---------------- */
      if (state.installed[name]) {
        delete state.installed[name];
        await fs.writeFile(statePath, JSON.stringify(state, null, 2));
      }

      console.log(`\n🎉 ${name} removed successfully\n`);
    } catch (err) {
      console.error("\n❌ Remove failed\n", err);
    }
  });

program.parse();

{
  "name": "demo-dev2d-cli",
  "version": "1.0.0",
  "description": "CLI to install reusable React components like shadcn/ui",
  "main": "bin/index.js",
  "bin": {
    "demo-dev2d-cli": "./bin/index.js"
  },
  "files": [
    "bin",
    "templates",
    "utils",
    "registry.json"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "demo-auth",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.29.0",
    "@babel/preset-react": "^7.28.5",
    "@babel/preset-typescript": "^7.28.5",
    "@types/react": "^19.2.14",
    "clsx": "^2.1.1",
    "commander": "^14.0.3",
    "fs-extra": "^11.3.5",
    "inquirer": "^13.4.3",
    "react": "^19.2.6",
    "tailwind-merge": "^3.6.0"
  }
}

{
  "input": {
    "dependencies": ["utils/cn"]
  },

  "utils/cn": {
    "packages": ["clsx", "tailwind-merge"]
  }
}