@newtonedev/editor 0.1.5 → 0.1.6

package/src/preview/ComponentDetailView.tsx

@@ -3,19 +3,22 @@ import { useTokens } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import { getComponent } from "@newtonedev/components";
 import { ComponentRenderer } from "./ComponentRenderer";
+import { IconBrowserView } from "./IconBrowserView";
 
 interface ComponentDetailViewProps {
   readonly componentId: string;
   readonly selectedVariantId: string | null;
-  readonly propOverrides?: Record<string, unknown>;
   readonly onSelectVariant: (variantId: string) => void;
+  readonly propOverrides?: Record<string, unknown>;
+  readonly onPropOverride?: (name: string, value: unknown) => void;
 }
 
 export function ComponentDetailView({
   componentId,
   selectedVariantId,
-  propOverrides,
   onSelectVariant,
+  propOverrides,
+  onPropOverride,
 }: ComponentDetailViewProps) {
   const tokens = useTokens();
   const component = getComponent(componentId);
@@ -23,6 +26,46 @@ export function ComponentDetailView({
 
   if (!component) return null;
 
+  if (componentId === "icon" && propOverrides && onPropOverride) {
+    return (
+      <div
+        style={{
+          padding: "32px 0 0",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div style={{ padding: "0 32px", marginBottom: 24 }}>
+          <h2
+            style={{
+              fontSize: 22,
+              fontWeight: 700,
+              color: srgbToHex(tokens.textPrimary.srgb),
+              margin: 0,
+              marginBottom: 4,
+            }}
+          >
+            {component.name}
+          </h2>
+          <p
+            style={{
+              fontSize: 14,
+              color: srgbToHex(tokens.textSecondary.srgb),
+              margin: 0,
+            }}
+          >
+            {component.description}
+          </p>
+        </div>
+        <IconBrowserView
+          selectedIconName={(propOverrides.name as string) ?? "add"}
+          onIconSelect={(name) => onPropOverride("name", name)}
+        />
+      </div>
+    );
+  }
+
   const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
 
   return (
@@ -99,11 +142,7 @@ export function ComponentDetailView({
               >
                 <ComponentRenderer
                   componentId={componentId}
-                  props={
-                    isSelected && propOverrides
-                      ? { ...variant.props, ...propOverrides }
-                      : variant.props
-                  }
+                  props={variant.props}
                 />
               </div>
               <span

package/src/preview/IconBrowserView.tsx

@@ -0,0 +1,187 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Icon, useTokens, ICON_CATALOG } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+
+interface IconBrowserViewProps {
+  readonly selectedIconName: string;
+  readonly onIconSelect: (name: string) => void;
+}
+
+export function IconBrowserView({
+  selectedIconName,
+  onIconSelect,
+}: IconBrowserViewProps) {
+  const tokens = useTokens();
+  const [search, setSearch] = useState("");
+  const [hoveredIcon, setHoveredIcon] = useState<string | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const filteredCategories = useMemo(() => {
+    const q = search.toLowerCase().trim();
+    if (!q) return ICON_CATALOG;
+    return ICON_CATALOG
+      .map((cat) => ({
+        ...cat,
+        icons: cat.icons.filter((name) => name.includes(q)),
+      }))
+      .filter((cat) => cat.icons.length > 0);
+  }, [search]);
+
+  // Scroll to selected icon when it changes externally (user types in sidebar)
+  useEffect(() => {
+    if (!selectedIconName || !scrollRef.current) return;
+    const el = scrollRef.current.querySelector(
+      `[data-icon="${selectedIconName}"]`,
+    );
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [selectedIconName]);
+
+  const accentColor = srgbToHex(tokens.accent.fill.srgb);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+      }}
+    >
+      {/* Search */}
+      <div style={{ padding: "0 32px", flexShrink: 0 }}>
+        <div style={{ position: "relative" }}>
+          <Icon
+            name="search"
+            size={18}
+            color={srgbToHex(tokens.textTertiary.srgb)}
+            style={{
+              position: "absolute",
+              left: 10,
+              top: 9,
+              pointerEvents: "none",
+            }}
+          />
+          <input
+            type="text"
+            placeholder="Search icons..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{
+              width: "100%",
+              padding: "8px 12px 8px 34px",
+              borderRadius: 8,
+              border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+              backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+              color: srgbToHex(tokens.textPrimary.srgb),
+              fontSize: 13,
+              boxSizing: "border-box",
+              outline: "none",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Icon grid */}
+      <div
+        ref={scrollRef}
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "16px 32px 32px",
+        }}
+      >
+        {filteredCategories.length === 0 && (
+          <p
+            style={{
+              fontSize: 13,
+              color: srgbToHex(tokens.textTertiary.srgb),
+              textAlign: "center",
+              marginTop: 32,
+            }}
+          >
+            No icons found
+          </p>
+        )}
+
+        {filteredCategories.map((category) => (
+          <div key={category.id} style={{ marginBottom: 24 }}>
+            <h3
+              style={{
+                fontSize: 12,
+                fontWeight: 600,
+                color: srgbToHex(tokens.textSecondary.srgb),
+                textTransform: "uppercase",
+                letterSpacing: 0.5,
+                margin: "0 0 8px",
+              }}
+            >
+              {category.label}
+            </h3>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))",
+                gap: 6,
+              }}
+            >
+              {category.icons.map((name) => {
+                const isSelected = selectedIconName === name;
+                const isHovered = hoveredIcon === name;
+
+                const borderColor = isSelected
+                  ? accentColor
+                  : isHovered
+                    ? `${accentColor}66`
+                    : "transparent";
+
+                return (
+                  <button
+                    key={name}
+                    data-icon={name}
+                    onClick={() => onIconSelect(name)}
+                    onMouseEnter={() => setHoveredIcon(name)}
+                    onMouseLeave={() => setHoveredIcon(null)}
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: 4,
+                      padding: "8px 4px 6px",
+                      borderRadius: 8,
+                      border: `2px solid ${borderColor}`,
+                      backgroundColor: isSelected
+                        ? srgbToHex(tokens.backgroundElevated.srgb)
+                        : "transparent",
+                      cursor: "pointer",
+                      transition: "border-color 150ms ease",
+                    }}
+                  >
+                    <Icon name={name} size={40} />
+                    <span
+                      style={{
+                        fontSize: 10,
+                        color: isSelected
+                          ? accentColor
+                          : srgbToHex(tokens.textTertiary.srgb),
+                        fontWeight: isSelected ? 600 : 400,
+                        maxWidth: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {name}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}