add changeset

.changeset/plenty-walls-marry.md

@@ -0,0 +1,5 @@
+---
+"jazz-inspector": patch
+---
+
+install clsx, remove lucide-react

packages/jazz-inspector/package.json

@@ -19,10 +19,10 @@
     "@twind/core": "^1.1.3",
     "@twind/preset-autoprefix": "^1.0.7",
     "@twind/preset-tailwind": "^1.1.4",
+    "clsx": "^2.0.0",
     "cojson": "workspace:*",
     "jazz-react-core": "workspace:*",
-    "jazz-tools": "workspace:*",
-    "lucide-react": "^0.274.0"
+    "jazz-tools": "workspace:*"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"

packages/jazz-inspector/src/ui/icon.tsx

@@ -1,25 +1,10 @@
-import {
-  CheckIcon,
-  ChevronDown,
-  ChevronRight,
-  ClipboardIcon,
-  LinkIcon,
-  type LucideIcon,
-  TrashIcon,
-  UserIcon,
-  XIcon,
-} from "lucide-react";
 import { classNames } from "../utils.js";
+import { ChevronDownIcon } from "./icons/chevron-down-icon.js";
+import { DeleteIcon } from "./icons/delete-icon.js";
 
 const icons = {
-  auth: UserIcon,
-  check: CheckIcon,
-  chevronRight: ChevronRight,
-  chevronDown: ChevronDown,
-  close: XIcon,
-  copy: ClipboardIcon,
-  delete: TrashIcon,
-  link: LinkIcon,
+  chevronDown: ChevronDownIcon,
+  delete: DeleteIcon,
 };
 
 // copied from tailwind line height https://tailwindcss.com/docs/font-size
@@ -59,17 +44,15 @@ const strokeWidths = {
 
 export function Icon({
   name,
-  icon,
   size = "md",
   className,
   ...svgProps
 }: {
   name?: string;
-  icon?: LucideIcon;
   size?: keyof typeof sizes;
   className?: string;
 } & React.SVGProps<SVGSVGElement>) {
-  if (!icon && (!name || !icons.hasOwnProperty(name))) {
+  if (!name || !icons.hasOwnProperty(name)) {
     throw new Error(`Icon not found: ${name}`);
   }
 

packages/jazz-inspector/src/ui/icons/chevron-down-icon.tsx

@@ -0,0 +1,16 @@
+export function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}

packages/jazz-inspector/src/ui/icons/delete-icon.tsx

@@ -0,0 +1,19 @@
+export function DeleteIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className="lucide lucide-trash-icon lucide-trash"
+    >
+      <path d="M3 6h18" />
+      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+    </svg>
+  );
+}

packages/jazz-inspector/src/ui/icons/link-icon.tsx

@@ -1,4 +1,4 @@
-import { classNames } from "./utils.js";
+import { classNames } from "../../utils.js";
 
 export function LinkIcon() {
   return (

packages/jazz-inspector/src/viewer/table-viewer.tsx

@@ -1,13 +1,13 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
 import type { JsonObject } from "cojson";
 import { useMemo, useState } from "react";
-import { LinkIcon } from "../link-icon.js";
 import { Button } from "../ui/button.js";
+import { Icon } from "../ui/icon.js";
+import { classNames } from "../utils.js";
 import { PageInfo } from "./types.js";
 import { useResolvedCoValues } from "./use-resolve-covalue.js";
 import { ValueRenderer } from "./value-renderer.js";
 
-import { classNames } from "../utils.js";
 export function TableView({
   data,
   node,
@@ -87,7 +87,7 @@ export function TableView({
                     ])
                   }
                 >
-                  <LinkIcon />
+                  <Icon name="link" />
                 </Button>
               </td>
               {keys.map((key) => (

packages/jazz-inspector/src/viewer/value-renderer.tsx

@@ -1,7 +1,7 @@
 import { CoID, JsonValue, LocalNode, RawCoValue } from "cojson";
 import React, { useEffect, useState } from "react";
-import { LinkIcon } from "../link-icon.js";
 import { Button } from "../ui/button.js";
+import { Icon } from "../ui/icon.js";
 import { classNames } from "../utils.js";
 import {
   isBrowserImage,
@@ -35,7 +35,7 @@ export function ValueRenderer({
     const content = (
       <>
         {json}
-        {onCoIDClick && <LinkIcon />}
+        {onCoIDClick && <Icon name="link" />}
       </>
     );
 

pnpm-lock.yaml

@@ -1709,6 +1709,9 @@ importers:
       '@twind/preset-tailwind':
         specifier: ^1.1.4
         version: 1.1.4(@twind/core@1.1.3(typescript@5.6.3))(typescript@5.6.3)
+      clsx:
+        specifier: ^2.0.0
+        version: 2.1.1
       cojson:
         specifier: workspace:*
         version: link:../cojson
@@ -1718,9 +1721,6 @@ importers:
       jazz-tools:
         specifier: workspace:*
         version: link:../jazz-tools
-      lucide-react:
-        specifier: ^0.274.0
-        version: 0.274.0(react@18.3.1)
       react:
         specifier: 18.3.1
         version: 18.3.1