@rebasepro/ui 0.17.3 → 0.18.0

package/src/icons/LucideIconByName.tsx

@@ -1,117 +0,0 @@
-"use client";
-
-import React from "react";
-import type { LucideIcon } from "lucide-react";
-
-/**
- * Rendering a Lucide icon chosen at runtime, without shipping all 1,600 of them
- * on the login screen.
- *
- * `@rebasepro/ui` used to re-export lucide's whole `icons` map:
- *
- *     export { icons as lucideIcons } from "lucide-react";
- *
- * That map is an object literal holding a reference to every icon component in
- * the library, so a tree-shaker cannot drop a single one — reaching the map
- * reaches all of them. Two callers reached it, both by name lookup: `getIcon`
- * in `@rebasepro/app` (a collection's `icon: "ShoppingCart"`) and the admin's
- * icon picker. That put 822 kB of SVG components into the entry chunk's static
- * graph, `modulepreload`ed before authentication.
- *
- * The ~130 icons the product's own chrome uses are still plain named imports
- * from `lucide-react`, which tree-shake to just those. Only the by-name lookup
- * goes through here, and it pays for the map once, asynchronously, the first
- * time a runtime-chosen icon is rendered.
- */
-
-type IconsMap = Record<string, LucideIcon | undefined>;
-
-let loaded: IconsMap | undefined;
-let pending: Promise<IconsMap> | undefined;
-
-/**
- * The full lucide icon map, fetched on first use and cached for the session.
- *
- * Prefer {@link LucideIconByName}. This is here for callers that need to know
- * whether a name resolves, such as the icon picker's grid.
- */
-export function loadLucideIcons(): Promise<IconsMap> {
-    if (loaded) return Promise.resolve(loaded);
-    pending ??= import("lucide-react").then(({ icons }) => {
-        loaded = icons as unknown as IconsMap;
-        return loaded;
-    });
-    return pending;
-}
-
-/** The map if it has already been fetched, otherwise `undefined`. Never fetches. */
-export function getLoadedLucideIcons(): IconsMap | undefined {
-    return loaded;
-}
-
-/**
- * Subscribe to the icon map.
- *
- * Returns it synchronously once loaded — including on the very first render of
- * every icon after the first one anywhere, which is what stops a page full of
- * icons from each flashing its placeholder.
- */
-export function useLucideIcons(): IconsMap | undefined {
-    const [map, setMap] = React.useState<IconsMap | undefined>(loaded);
-    React.useEffect(() => {
-        if (map) return;
-        let cancelled = false;
-        loadLucideIcons()
-            .then(resolved => { if (!cancelled) setMap(resolved); })
-            .catch(error => console.error("[rebase] could not load the icon set", error));
-        return () => { cancelled = true; };
-    }, [map]);
-    return map;
-}
-
-function toPascalCase(str: string): string {
-    return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join("");
-}
-
-/**
- * The same resolution order the two call sites used against the eager map:
- * exact name, then PascalCase, then `CircleAlert` as the visible "unknown icon".
- */
-export function resolveLucideIcon(icons: IconsMap, name: string): LucideIcon | undefined {
-    return icons[name] ?? icons[toPascalCase(name)] ?? icons.CircleAlert;
-}
-
-export type LucideIconByNameProps = {
-    /**
-     * A PascalCase lucide icon name, e.g. `"ShoppingCart"`. Whether a name
-     * exists can be answered ahead of the fetch with `iconKeys`, which is a
-     * plain string array and costs nothing.
-     */
-    name: string;
-    size?: number;
-    className?: string;
-    /** Rendered while the icon set is in flight. Defaults to a blank box of `size`. */
-    fallback?: React.ReactNode;
-};
-
-/**
- * An icon named at runtime. Renders `fallback` until the icon set arrives.
- */
-export const LucideIconByName = React.memo(
-    function LucideIconByName({ name, size, className, fallback }: LucideIconByNameProps) {
-        const icons = useLucideIcons();
-        const Icon = icons ? resolveLucideIcon(icons, name) : undefined;
-
-        if (!Icon) {
-            if (fallback !== undefined) return <>{fallback}</>;
-            // A box of the right size, so the layout does not jump when the
-            // icon lands.
-            return <span aria-hidden={true}
-                className={"inline-block shrink-0"}
-                style={{ width: size, height: size }}/>;
-        }
-
-        return <Icon size={size}
-            className={className}/>;
-    }
-);

package/src/icons/cool_icon_keys.ts

@@ -1,12 +0,0 @@
-export const coolIconKeys: string[] = [
-    "Rows4", "Video",
-    "Plane", "LayoutDashboard", "LayoutGrid", "Square", "Snowflake",
-    "CircleDashed", "AlignCenterHorizontal", "Disc", "Infinity",
-    "Maximize", "Play", "Sparkles", "Music",
-    "Wallet", "Layout", "Zap", "Circle", "Coffee",
-    "ImageOff", "Sun", "Cable", "CalendarDays",
-    "Dices", "Shapes", "Cloud", "Palette",
-    "CreditCard", "Headphones", "Egg", "Disc3", "Flag",
-    "Bandage", "Thermometer", "Hexagon", "Network", "Library", "Pizza",
-    "Cpu", "Plug", "Files", "Globe", "SignalZero",
-    "Gamepad2", "CloudLightning", "ListTree", "Command"];