@stevederico/skateboard-ui 2.12.0 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+2.14.0
+
+  Switch icons to Lucide React
+  Update DynamicIcon Lucide loader
+  Remove Tabler icon imports
+
+2.13.0
+
+  Fix DynamicIcon per-icon imports
+  Remove lucide-react from views
+  Switch views to Tabler icons
+
 2.12.0
 
   Add skip-to-content link

package/core/DynamicIcon.jsx

@@ -14,64 +14,96 @@ function toPascalCase(str) {
     .join("");
 }
 
-let iconsModule = null;
-let iconsPromise = null;
+/**
+ * Convert a PascalCase or camelCase string to kebab-case.
+ *
+ * @param {string} str - Input string
+ * @returns {string} kebab-case version
+ */
+function toKebabCase(str) {
+  return str
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
+    .toLowerCase();
+}
+
+/** Cache of resolved icon components keyed by name */
+const iconCache = new Map();
+
+/** Cache of in-flight import promises keyed by module name */
+const importCache = new Map();
 
 /**
- * Lazily load the lucide-react module on first use.
- * Subsequent calls return the cached module immediately.
+ * Load a single Lucide icon by its kebab-case file name (e.g. "arrow-right").
+ * Each icon is imported individually (~1KB) instead of loading the entire
+ * icon library. Results are cached for instant subsequent lookups.
  *
- * @returns {Promise<Object>} The lucide-react module
+ * @param {string} kebabName - kebab-case icon file name
+ * @param {string} cacheKey - PascalCase name used as cache key
+ * @returns {Promise<React.ComponentType|null>} Icon component or null
  */
-function loadIcons() {
-  if (iconsModule) return Promise.resolve(iconsModule);
-  if (!iconsPromise) {
-    iconsPromise = import("lucide-react").then((mod) => {
-      iconsModule = mod;
-      return mod;
+function loadIcon(kebabName, cacheKey) {
+  if (iconCache.has(cacheKey)) return Promise.resolve(iconCache.get(cacheKey));
+  if (importCache.has(cacheKey)) return importCache.get(cacheKey);
+
+  const promise = import(`/node_modules/lucide-react/dist/esm/icons/${kebabName}.js`)
+    .then((mod) => {
+      const Icon = mod.default || null;
+      iconCache.set(cacheKey, Icon);
+      importCache.delete(cacheKey);
+      return Icon;
+    })
+    .catch(() => {
+      iconCache.set(cacheKey, null);
+      importCache.delete(cacheKey);
+      return null;
     });
-  }
-  return iconsPromise;
+
+  importCache.set(cacheKey, promise);
+  return promise;
 }
 
 /**
- * Resolve icon name to a Lucide component from the cached module.
+ * Resolve an icon name in any format to a PascalCase name and kebab-case file path.
+ * e.g. "layout-dashboard" → { pascal: "LayoutDashboard", kebab: "layout-dashboard" }
+ *      "LayoutDashboard"  → { pascal: "LayoutDashboard", kebab: "layout-dashboard" }
  *
- * @param {Object} mod - The lucide-react module
- * @param {string} name - Icon name (kebab-case, snake_case, or PascalCase)
- * @returns {React.ComponentType|null} Icon component or null
+ * Strips legacy "Icon" prefix from Tabler-style names for backwards compatibility.
+ *
+ * @param {string} name - Icon name in any case format
+ * @returns {{ pascal: string, kebab: string }} Resolved icon name pair
  */
-function resolveIcon(mod, name) {
-  if (!mod) return null;
-  const candidates = [
-    name,
-    toPascalCase(name),
-    name.charAt(0).toUpperCase() + name.slice(1),
-  ];
-  for (const candidate of candidates) {
-    if (mod[candidate]) return mod[candidate];
+function toIconName(name) {
+  let stripped = name;
+  if (stripped.startsWith("Icon") && stripped.length > 4 && stripped[4] === stripped[4].toUpperCase()) {
+    stripped = stripped.slice(4);
   }
-  return null;
+  const pascal = /[-_\s]/.test(stripped) ? toPascalCase(stripped) : stripped;
+  const kebab = toKebabCase(pascal);
+  return { pascal, kebab };
 }
 
 /**
- * Check if a name string resolves to a valid Lucide icon.
- * Returns false until the icon module has been loaded.
+ * Check if a name string has been resolved to a valid icon.
+ * Returns false for unloaded or invalid icons.
  *
  * @param {string} name - Icon name to check
- * @returns {boolean} True if name resolves to an icon
+ * @returns {boolean} True if icon is cached and valid
  */
 export function canResolveIcon(name) {
-  if (!iconsModule) return false;
-  return resolveIcon(iconsModule, name) !== null;
+  const { pascal } = toIconName(name);
+  return iconCache.has(pascal) && iconCache.get(pascal) !== null;
 }
 
 /**
- * Render a Lucide icon by name string with lazy loading.
+ * Render a Lucide icon by name string with per-icon lazy loading.
+ *
+ * Each icon is imported individually from lucide-react (~1KB per icon)
+ * instead of loading the entire library. Resolved icons are cached in memory
+ * for instant rendering on subsequent uses.
  *
- * Loads lucide-react on first render via dynamic import, then caches the
- * module for all subsequent uses. Shows nothing while loading (typically
- * under 50ms from cache).
+ * Accepts kebab-case ("layout-dashboard"), PascalCase ("LayoutDashboard"),
+ * or legacy prefixed ("IconLayoutDashboard") names.
  *
  * @param {Object} props
  * @param {string} props.name - Icon name (e.g. "home", "arrow-right", "Settings")
@@ -96,18 +128,16 @@ const DynamicIcon = ({
   className,
   ...props
 }) => {
-  const [Icon, setIcon] = useState(() => {
-    if (iconsModule) return resolveIcon(iconsModule, name);
-    return null;
-  });
+  const { pascal, kebab } = toIconName(name);
+
+  const [Icon, setIcon] = useState(() => iconCache.get(pascal) || null);
 
   useEffect(() => {
     if (Icon) return;
-    loadIcons().then((mod) => {
-      const resolved = resolveIcon(mod, name);
-      setIcon(() => resolved);
+    loadIcon(kebab, pascal).then((resolved) => {
+      if (resolved) setIcon(() => resolved);
     });
-  }, [name, Icon]);
+  }, [pascal, kebab, Icon]);
 
   if (!Icon) return null;
 
@@ -116,7 +146,7 @@ const DynamicIcon = ({
       size={size}
       color={color}
       strokeWidth={strokeWidth}
-      className={cn(className)}
+      className={className}
       {...props}
     />
   );

package/layout/Sidebar.jsx

@@ -15,7 +15,7 @@ import {
   SidebarRail,
   useSidebar,
 } from "../shadcn/ui/sidebar";
-import { Settings } from "lucide-react";
+import { Settings } from 'lucide-react';
 
 /**
  * Desktop navigation sidebar using shadcn primitives.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.12.0",
+  "version": "2.14.0",
   "type": "module",
   "exports": {
     "./Sidebar": {

package/.claude/settings.local.json

@@ -1,16 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(for file in App.jsx AppSidebar.jsx Context.jsx Layout.jsx TabBar.jsx TextView.jsx SettingsView.jsx SignInView.jsx LandingView.jsx UpgradeSheet.jsx PaymentView.jsx SignUpView.jsx)",
-      "Bash(do)",
-      "Bash(if [ -f \"$file\" ])",
-      "Bash(then)",
-      "Bash(node --check:*)",
-      "Bash(echo:*)",
-      "Bash(fi)",
-      "Bash(done)",
-      "Bash(git commit:*)",
-      "Bash(git push:*)"
-    ]
-  }
-}