[WEB-4320] dev: propel emoji reaction component (#7741)

* dev: animated counter added to propel

* chore: animated counter story added

* chore: propel config updated

* chore: code refactor

* dev: emoji reaction and renderer component added to propel

* dev: emoji reaction story added

* chore: propel config updated

* chore: code refactor

* fix: format error

* chore: lint error resolved

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

packages/i18n/src/locales/ru/translations.json

@@ -2532,4 +2532,4 @@
     "close_button": "Закрыть панель навигации",
     "outline_floating_button": "Открыть структуру"
   }
-}
+}

packages/propel/package.json

@@ -29,6 +29,8 @@
     "./context-menu": "./dist/context-menu/index.js",
     "./dialog": "./dist/dialog/index.js",
     "./emoji-icon-picker": "./dist/emoji-icon-picker/index.js",
+    "./emoji-reaction": "./dist/emoji-reaction/index.js",
+    "./emoji-reaction-picker": "./dist/emoji-reaction-picker/index.js",
     "./icons": "./dist/icons/index.js",
     "./menu": "./dist/menu/index.js",
     "./pill": "./dist/pill/index.js",

packages/propel/src/command/command.tsx

@@ -19,7 +19,7 @@ function CommandInput({ className, ...props }: React.ComponentProps<typeof Comma
   );
 }
 
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+function CommandList({ ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return <CommandPrimitive.List data-slot="command-list" {...props} />;
 }
 
@@ -27,7 +27,7 @@ function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive
   return <CommandPrimitive.Empty data-slot="command-empty" {...props} />;
 }
 
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+function CommandItem({ ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return <CommandPrimitive.Item data-slot="command-item" {...props} />;
 }
 

packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SmilePlus } from "lucide-react";
+import { stringToEmoji } from "../emoji-icon-picker";
+import { EmojiReactionPicker } from "./emoji-reaction-picker";
+
+const meta: Meta<typeof EmojiReactionPicker> = {
+  title: "EmojiReactionPicker",
+  component: EmojiReactionPicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof EmojiReactionPicker>;
+
+const EmojiPickerDemo = (args: React.ComponentProps<typeof EmojiReactionPicker>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
+
+  return (
+    <div className="space-y-4 p-4">
+      <EmojiReactionPicker
+        {...args}
+        isOpen={isOpen}
+        handleToggle={setIsOpen}
+        onChange={(emoji) => {
+          setSelectedEmoji(emoji);
+          console.log("Selected emoji:", emoji);
+        }}
+        label={
+          <span className={`flex items-center justify-center rounded-md px-2 size-8 text-xl`}>
+            {selectedEmoji ? stringToEmoji(selectedEmoji) : <SmilePlus className="h-6 text-custom-text-100" />}
+          </span>
+        }
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <EmojiPickerDemo {...args} />,
+  args: {
+    closeOnSelect: true,
+    searchPlaceholder: "Search emojis...",
+  },
+};

packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo, useCallback } from "react";
+import { EmojiRoot } from "../emoji-icon-picker/emoji/emoji";
+import { emojiToString } from "../emoji-icon-picker/helper";
+import { Popover } from "../popover";
+import { cn } from "../utils/classname";
+import { convertPlacementToSideAndAlign, type TPlacement, type TSide, type TAlign } from "../utils/placement";
+
+export interface EmojiReactionPickerProps {
+  isOpen: boolean;
+  handleToggle: (value: boolean) => void;
+  buttonClassName?: string;
+  closeOnSelect?: boolean;
+  disabled?: boolean;
+  dropdownClassName?: string;
+  label: React.ReactNode;
+  onChange: (emoji: string) => void;
+  placement?: TPlacement;
+  searchDisabled?: boolean;
+  searchPlaceholder?: string;
+  side?: TSide;
+  align?: TAlign;
+}
+
+export const EmojiReactionPicker: React.FC<EmojiReactionPickerProps> = (props) => {
+  const {
+    isOpen,
+    handleToggle,
+    buttonClassName,
+    closeOnSelect = true,
+    disabled = false,
+    dropdownClassName,
+    label,
+    onChange,
+    placement = "bottom-start",
+    searchDisabled = false,
+    searchPlaceholder = "Search",
+    side = "bottom",
+    align = "start",
+  } = props;
+
+  // side and align calculations
+  const { finalSide, finalAlign } = useMemo(() => {
+    if (placement) {
+      const converted = convertPlacementToSideAndAlign(placement);
+      return { finalSide: converted.side, finalAlign: converted.align };
+    }
+    return { finalSide: side, finalAlign: align };
+  }, [placement, side, align]);
+
+  const handleEmojiChange = useCallback(
+    (value: string) => {
+      const emoji = emojiToString(value);
+      onChange(emoji);
+      if (closeOnSelect) handleToggle(false);
+    },
+    [onChange, closeOnSelect, handleToggle]
+  );
+
+  return (
+    <Popover open={isOpen} onOpenChange={handleToggle}>
+      <Popover.Button className={cn("outline-none", buttonClassName)} disabled={disabled}>
+        {label}
+      </Popover.Button>
+      <Popover.Panel
+        positionerClassName="z-50"
+        className={cn(
+          "w-80 bg-custom-background-100 rounded-md border-[0.5px] border-custom-border-300 overflow-hidden",
+          dropdownClassName
+        )}
+        side={finalSide}
+        align={finalAlign}
+        sideOffset={8}
+      >
+        <div className="h-80 overflow-hidden overflow-y-auto">
+          <EmojiRoot
+            onChange={handleEmojiChange}
+            searchPlaceholder={searchPlaceholder}
+            searchDisabled={searchDisabled}
+          />
+        </div>
+      </Popover.Panel>
+    </Popover>
+  );
+};

packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EmojiReaction } from "./emoji-reaction";
+
+const meta: Meta<typeof EmojiReaction> = {
+  title: "EmojiReaction",
+  component: EmojiReaction,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof EmojiReaction>;
+
+export const Single: Story = {
+  args: {
+    emoji: "👍",
+    count: 5,
+    reacted: false,
+    users: ["User 1", "User 2", "User 3"],
+  },
+};
+
+export const Reacted: Story = {
+  args: {
+    emoji: "❤️",
+    count: 12,
+    reacted: true,
+    users: ["User 1", "User 2", "User 3", "User 4", "User 5", "User 6"],
+  },
+};

packages/propel/src/emoji-reaction/emoji-reaction.tsx

@@ -0,0 +1,182 @@
+import * as React from "react";
+import { Plus } from "lucide-react";
+import { AnimatedCounter } from "../animated-counter";
+import { stringToEmoji } from "../emoji-icon-picker";
+import { Tooltip } from "../tooltip";
+import { cn } from "../utils";
+
+export interface EmojiReactionType {
+  emoji: string;
+  count: number;
+  reacted?: boolean;
+  users?: string[];
+}
+
+export interface EmojiReactionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  emoji: string;
+  count: number;
+  reacted?: boolean;
+  users?: string[];
+  onReactionClick?: (emoji: string) => void;
+  className?: string;
+  showCount?: boolean;
+  size?: "sm" | "md" | "lg";
+}
+
+export interface EmojiReactionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  reactions: EmojiReactionType[];
+  onReactionClick?: (emoji: string) => void;
+  onAddReaction?: () => void;
+  className?: string;
+  showAddButton?: boolean;
+  maxDisplayUsers?: number;
+  size?: "sm" | "md" | "lg";
+}
+
+export interface EmojiReactionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  onAddReaction?: () => void;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeClasses = {
+  sm: {
+    button: "px-2 py-1 text-xs gap-1",
+    emoji: "text-sm",
+    count: "text-xs",
+    addButton: "h-6 w-6",
+    addIcon: "h-3 w-3",
+  },
+  md: {
+    button: "px-2.5 py-1.5 text-sm gap-1.5",
+    emoji: "text-base",
+    count: "text-sm",
+    addButton: "h-7 w-7",
+    addIcon: "h-3.5 w-3.5",
+  },
+  lg: {
+    button: "px-3 py-2 text-base gap-2",
+    emoji: "text-lg",
+    count: "text-base",
+    addButton: "h-8 w-8",
+    addIcon: "h-4 w-4",
+  },
+};
+
+const EmojiReaction = React.forwardRef<HTMLButtonElement, EmojiReactionProps>(
+  (
+    { emoji, count, reacted = false, users = [], onReactionClick, className, showCount = true, size = "md", ...props },
+    ref
+  ) => {
+    const sizeClass = sizeClasses[size];
+
+    const handleClick = () => {
+      onReactionClick?.(emoji);
+    };
+
+    const tooltipContent = React.useMemo(() => {
+      if (!users.length) return null;
+
+      const displayUsers = users.slice(0, 5);
+      const remainingCount = users.length - displayUsers.length;
+
+      return (
+        <div className="text-xs">
+          <div className="font-medium mb-1">{stringToEmoji(emoji)}</div>
+          <div>
+            {displayUsers.join(", ")}
+            {remainingCount > 0 && ` and ${remainingCount} more`}
+          </div>
+        </div>
+      );
+    }, [emoji, users]);
+
+    const button = (
+      <button
+        ref={ref}
+        onClick={handleClick}
+        className={cn(
+          "inline-flex items-center rounded-full border transition-all duration-200 hover:scale-105",
+          "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-1",
+          sizeClass.button,
+          reacted
+            ? "bg-custom-primary-100/10 border-custom-primary-100 text-custom-primary-100"
+            : "bg-custom-background-100 border-custom-border-200 text-custom-text-300 hover:border-custom-border-300 hover:bg-custom-background-90",
+          className
+        )}
+        {...props}
+      >
+        <span className={sizeClass.emoji}>{emoji}</span>
+        {showCount && count > 0 && <AnimatedCounter count={count} size={size} className={sizeClass.count} />}
+      </button>
+    );
+
+    if (tooltipContent && users.length > 0) {
+      return <Tooltip tooltipContent={tooltipContent}>{button}</Tooltip>;
+    }
+
+    return button;
+  }
+);
+
+const EmojiReactionButton = React.forwardRef<HTMLButtonElement, EmojiReactionButtonProps>(
+  ({ onAddReaction, className, size = "md", ...props }, ref) => {
+    const sizeClass = sizeClasses[size];
+
+    return (
+      <button
+        ref={ref}
+        onClick={onAddReaction}
+        className={cn(
+          "inline-flex items-center justify-center rounded-full border border-dashed border-custom-border-300",
+          "bg-custom-background-100 text-custom-text-400 transition-all duration-200",
+          "hover:border-custom-primary-100 hover:text-custom-primary-100 hover:bg-custom-primary-100/5",
+          "focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-1",
+          sizeClass.addButton,
+          className
+        )}
+        title="Add reaction"
+        {...props}
+      >
+        <Plus className={sizeClass.addIcon} />
+      </button>
+    );
+  }
+);
+
+const EmojiReactionGroup = React.forwardRef<HTMLDivElement, EmojiReactionGroupProps>(
+  (
+    {
+      reactions,
+      onReactionClick,
+      onAddReaction,
+      className,
+      showAddButton = true,
+      maxDisplayUsers = 5,
+      size = "md",
+      ...props
+    },
+    ref
+  ) => (
+    <div ref={ref} className={cn("flex flex-wrap items-center gap-2", className)} {...props}>
+      {reactions.map((reaction, index) => (
+        <EmojiReaction
+          key={`${reaction.emoji}-${index}`}
+          emoji={reaction.emoji}
+          count={reaction.count}
+          reacted={reaction.reacted}
+          users={reaction.users?.slice(0, maxDisplayUsers)}
+          onReactionClick={onReactionClick}
+          size={size}
+        />
+      ))}
+      {showAddButton && <EmojiReactionButton onAddReaction={onAddReaction} size={size} />}
+    </div>
+  )
+);
+
+EmojiReaction.displayName = "EmojiReaction";
+EmojiReactionButton.displayName = "EmojiReactionButton";
+EmojiReactionGroup.displayName = "EmojiReactionGroup";
+
+export { EmojiReaction, EmojiReactionButton, EmojiReactionGroup };

packages/propel/src/emoji-reaction/index.ts

@@ -0,0 +1,10 @@
+export { EmojiReaction, EmojiReactionGroup, EmojiReactionButton } from "./emoji-reaction";
+export type {
+  EmojiReactionProps,
+  EmojiReactionGroupProps,
+  EmojiReactionButtonProps,
+  EmojiReactionType,
+} from "./emoji-reaction";
+
+export { EmojiReactionPicker } from "./emoji-reaction-picker";
+export type { EmojiReactionPickerProps } from "./emoji-reaction-picker";

packages/propel/tsdown.config.ts

@@ -15,6 +15,8 @@ export default defineConfig({
     "src/context-menu/index.ts",
     "src/dialog/index.ts",
     "src/emoji-icon-picker/index.ts",
+    "src/emoji-reaction/index.ts",
+    "src/emoji-reaction-picker/index.ts",
     "src/icons/index.ts",
     "src/menu/index.ts",
     "src/pill/index.ts",