🧩 WOR-5 Optimize icon block/menu

apps/storybook/src/stories/shared/icon-menu.stories.tsx

@@ -12,12 +12,13 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const defaultIcon: IconInfo = { type: "text", text: "S" }
 const Template: Story["render"] = () => {
-  const [icon, setIcon] = useState<IconInfo>({ type: "text", text: "S" });
+  const [icon, setIcon] = useState<IconInfo>(defaultIcon);
   return (
     <IconMenu
       onSelect={setIcon}
-      onRemove={() => setIcon({ type: "text", text: " " })}
+      onRemove={() => setIcon(defaultIcon)}
     >
       <IconBlock icon={icon} size="lg" />
     </IconMenu>

packages/ui/package.json

@@ -50,6 +50,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@udecode/plate-emoji": "^40.0.0",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",

packages/ui/src/components/shared/hint/index.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 
-import { cn } from "@swy/ui/lib";
 import {
   Tooltip,
   TooltipContent,
@@ -18,7 +17,6 @@ export interface HintProps extends TooltipContentProps {
 
 export const Hint = ({
   children,
-  className,
   triggerProps,
   description,
   asChild,
@@ -31,11 +29,7 @@ export const Hint = ({
         <TooltipTrigger asChild={asChild} className={triggerProps}>
           {children}
         </TooltipTrigger>
-        <TooltipContent
-          side={side}
-          className={cn("font-medium", className)}
-          {...props}
-        >
+        <TooltipContent side={side} {...props}>
           {description}
         </TooltipContent>
       </Tooltip>

packages/ui/src/components/shared/icon-block/create-lucide-icon.ts

@@ -0,0 +1,29 @@
+import { createElement, forwardRef } from "react";
+import { Icon, type IconNode, type LucideProps } from "lucide-react";
+
+import { cn, toPascalCase } from "@swy/ui/lib";
+
+import { iconNodes } from "./data";
+import type { LucideName } from "./types";
+
+/**
+ * Create a Lucide icon component
+ */
+export const createLucideIcon = (name: LucideName) => {
+  const nodeWithKeys = iconNodes[name].map(([elem, attrs], i) => [
+    elem,
+    { ...attrs, key: `${name}-${i}` },
+  ]) as IconNode;
+  const Component = forwardRef<SVGSVGElement, LucideProps>(
+    ({ className, ...props }, ref) =>
+      createElement(Icon, {
+        ref,
+        iconNode: nodeWithKeys,
+        className: cn(`lucide-${name}`, className),
+        ...props,
+      }),
+  );
+
+  Component.displayName = toPascalCase(name);
+  return Component;
+};