binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4320] refactor: migrate emoji reactions to propel (#8039)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-11-06 18:25:43 +05:30 • committed by GitHub
parent d709465a89
commit fd38b9b6d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 433 additions and 563 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/propel/src/animated-counter/animated-counter.tsx
View file

@ -8,9 +8,9 @@ export interface AnimatedCounterProps {
}
const sizeClasses = {
sm: "text-xs h-4 w-4",
md: "text-sm h-5 w-5",
lg: "text-base h-6 w-6",
sm: "text-xs",
md: "text-sm",
lg: "text-base",
};
export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({ count, className, size = "md" }) => {
@ -44,7 +44,7 @@ export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({ count, classNa
const sizeClass = sizeClasses[size];
return (
<div className={cn("relative inline-flex items-center justify-center overflow-hidden", sizeClass)}>
<div className={cn("relative inline-flex items-center justify-center overflow-hidden min-w-2", sizeClass)}>
{/* Previous number sliding out */}
{isAnimating && (
<span

1
packages/propel/src/emoji-icon-picker/emoji-picker.tsx
View file

@ -106,6 +106,7 @@ export const EmojiPicker: React.FC<TCustomEmojiPicker> = (props) => {
side={finalSide}
align={finalAlign}
sideOffset={8}
data-prevent-outside-click="true"
>
<Tabs.Root defaultValue={defaultOpen}>
<Tabs.List className="grid grid-cols-2 gap-1 px-3.5 pt-3">

48
packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
View file

@ -18,6 +18,12 @@ export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
isOpen: false,
handleToggle: () => {},
onChange: () => {},
label: "Pick Emoji",
},
render() {
const [isOpen, setIsOpen] = useState(false);
const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
@ -46,6 +52,12 @@ export const Default: Story = {
};
export const WithCustomLabel: Story = {
args: {
isOpen: false,
handleToggle: () => {},
onChange: () => {},
label: "Add Reaction",
},
render() {
const [isOpen, setIsOpen] = useState(false);
const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
@ -71,6 +83,12 @@ export const WithCustomLabel: Story = {
};
export const InlineReactions: Story = {
args: {
isOpen: false,
handleToggle: () => {},
onChange: () => {},
label: "Add",
},
render() {
const [isOpen, setIsOpen] = useState(false);
const [reactions, setReactions] = useState<EmojiReactionType[]>([
@ -128,6 +146,12 @@ export const InlineReactions: Story = {
};
export const DifferentPlacements: Story = {
args: {
isOpen: false,
handleToggle: () => {},
onChange: () => {},
label: "Placements",
},
render() {
const [isOpen1, setIsOpen1] = useState(false);
const [isOpen2, setIsOpen2] = useState(false);
@ -182,6 +206,12 @@ export const DifferentPlacements: Story = {
};
export const SearchDisabled: Story = {
args: {
isOpen: false,
handleToggle: () => {},
onChange: () => {},
label: "No Search",
},
render() {
const [isOpen, setIsOpen] = useState(false);
const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
@ -207,6 +237,12 @@ export const SearchDisabled: Story = {
};
export const CustomSearchPlaceholder: Story = {
args: {
isOpen: false,
handleToggle: () => {},
onChange: () => {},
label: "Custom Search",
},
render() {
const [isOpen, setIsOpen] = useState(false);
const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
@ -232,6 +268,12 @@ export const CustomSearchPlaceholder: Story = {
};
export const CloseOnSelectDisabled: Story = {
args: {
isOpen: false,
handleToggle: () => {},
onChange: () => {},
label: "Select Multiple",
},
render() {
const [isOpen, setIsOpen] = useState(false);
const [selectedEmojis, setSelectedEmojis] = useState<string[]>([]);
@ -279,6 +321,12 @@ export const CloseOnSelectDisabled: Story = {
};
export const InMessageContext: Story = {
args: {
isOpen: false,
handleToggle: () => {},
onChange: () => {},
label: "Message",
},
render() {
const [isOpen, setIsOpen] = useState(false);
const [reactions, setReactions] = useState<EmojiReactionType[]>([

1
packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
View file

@ -70,6 +70,7 @@ export const EmojiReactionPicker: React.FC<EmojiReactionPickerProps> = (props) =
side={finalSide}
align={finalAlign}
sideOffset={8}
data-prevent-outside-click="true"
>
<div className="h-80 overflow-hidden overflow-y-auto">
<EmojiRoot

89
packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
View file

@ -33,6 +33,10 @@ export const Reacted: Story = {
};
export const Interactive: Story = {
args: {
emoji: "👍",
count: 0,
},
render() {
const [reacted, setReacted] = useState(false);
const [count, setCount] = useState(5);
@ -75,28 +79,11 @@ export const WithoutCount: Story = {
},
};
export const Sizes: Story = {
render() {
return (
<div className="flex flex-col gap-4 items-center">
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-text-400">Small</span>
<EmojiReaction emoji="👍" count={5} size="sm" users={["Alice", "Bob"]} />
</div>
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-text-400">Medium (default)</span>
<EmojiReaction emoji="👍" count={5} size="md" users={["Alice", "Bob"]} />
</div>
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-text-400">Large</span>
<EmojiReaction emoji="👍" count={5} size="lg" users={["Alice", "Bob"]} />
</div>
</div>
);
},
};
export const MultipleReactions: Story = {
args: {
emoji: "👍",
count: 0,
},
render() {
const [reactions, setReactions] = useState<EmojiReactionType[]>([
{ emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
@ -137,6 +124,10 @@ export const MultipleReactions: Story = {
};
export const AddButton: Story = {
args: {
emoji: "➕",
count: 0,
},
render() {
const handleAdd = () => {
alert("Add reaction clicked");
@ -146,28 +137,11 @@ export const AddButton: Story = {
},
};
export const AddButtonSizes: Story = {
render() {
return (
<div className="flex gap-4 items-center">
<div className="flex flex-col gap-2 items-center">
<span className="text-xs text-custom-text-400">Small</span>
<EmojiReactionButton size="sm" />
</div>
<div className="flex flex-col gap-2 items-center">
<span className="text-xs text-custom-text-400">Medium</span>
<EmojiReactionButton size="md" />
</div>
<div className="flex flex-col gap-2 items-center">
<span className="text-xs text-custom-text-400">Large</span>
<EmojiReactionButton size="lg" />
</div>
</div>
);
},
};
export const ReactionGroup: Story = {
args: {
emoji: "👍",
count: 0,
},
render() {
const [reactions, setReactions] = useState<EmojiReactionType[]>([
{ emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
@ -205,34 +179,11 @@ export const ReactionGroup: Story = {
},
};
export const ReactionGroupSizes: Story = {
render() {
const reactions: EmojiReactionType[] = [
{ emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob"] },
{ emoji: "❤️", count: 12, reacted: true, users: ["Charlie", "David"] },
{ emoji: "🎉", count: 3, reacted: false, users: ["Emma"] },
];
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-text-400">Small</span>
<EmojiReactionGroup reactions={reactions} size="sm" />
</div>
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-text-400">Medium</span>
<EmojiReactionGroup reactions={reactions} size="md" />
</div>
<div className="flex flex-col gap-2">
<span className="text-xs text-custom-text-400">Large</span>
<EmojiReactionGroup reactions={reactions} size="lg" />
</div>
</div>
);
},
};
export const InMessageContext: Story = {
args: {
emoji: "👍",
count: 0,
},
render() {
const [reactions, setReactions] = useState<EmojiReactionType[]>([
{ emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },

98
packages/propel/src/emoji-reaction/emoji-reaction.tsx
View file

@ -1,7 +1,7 @@
import * as React from "react";
import { Plus } from "lucide-react";
import { AnimatedCounter } from "../animated-counter";
import { stringToEmoji } from "../emoji-icon-picker";
import { AddReactionIcon } from "../icons";
import { Tooltip } from "../tooltip";
import { cn } from "../utils";
@ -20,7 +20,6 @@ export interface EmojiReactionProps extends React.ButtonHTMLAttributes<HTMLButto
onReactionClick?: (emoji: string) => void;
className?: string;
showCount?: boolean;
size?: "sm" | "md" | "lg";
}
export interface EmojiReactionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@ -30,46 +29,15 @@ export interface EmojiReactionGroupProps extends React.HTMLAttributes<HTMLDivEle
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];
({ emoji, count, reacted = false, users = [], onReactionClick, className, showCount = true, ...props }, ref) => {
const handleClick = () => {
onReactionClick?.(emoji);
};
@ -96,9 +64,7 @@ const EmojiReaction = React.forwardRef<HTMLButtonElement, EmojiReactionProps>(
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,
"inline-flex items-center rounded-full border px-1.5 text-xs gap-0.5 transition-all duration-200",
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",
@ -106,8 +72,8 @@ const EmojiReaction = React.forwardRef<HTMLButtonElement, EmojiReactionProps>(
)}
{...props}
>
<span className={sizeClass.emoji}>{emoji}</span>
{showCount && count > 0 && <AnimatedCounter count={count} size={size} className={sizeClass.count} />}
<span className="text-base leading-unset">{emoji}</span>
{showCount && count > 0 && <AnimatedCounter count={count} size="sm" className="text-xs leading-normal" />}
</button>
);
@ -120,42 +86,29 @@ const EmojiReaction = React.forwardRef<HTMLButtonElement, EmojiReactionProps>(
);
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>
);
}
({ onAddReaction, className, ...props }, ref) => (
<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",
"h-6 w-6",
className
)}
title="Add reaction"
{...props}
>
<AddReactionIcon className="h-3 w-3" />
</button>
)
);
const EmojiReactionGroup = React.forwardRef<HTMLDivElement, EmojiReactionGroupProps>(
(
{
reactions,
onReactionClick,
onAddReaction,
className,
showAddButton = true,
maxDisplayUsers = 5,
size = "md",
...props
},
{ reactions, onReactionClick, onAddReaction, className, showAddButton = true, maxDisplayUsers = 5, ...props },
ref
) => (
<div ref={ref} className={cn("flex flex-wrap items-center gap-2", className)} {...props}>
@ -167,10 +120,9 @@ const EmojiReactionGroup = React.forwardRef<HTMLDivElement, EmojiReactionGroupPr
reacted={reaction.reacted}
users={reaction.users?.slice(0, maxDisplayUsers)}
onReactionClick={onReactionClick}
size={size}
/>
))}
{showAddButton && <EmojiReactionButton onAddReaction={onAddReaction} size={size} />}
{showAddButton && <EmojiReactionButton onAddReaction={onAddReaction} />}
</div>
)
);

21
packages/propel/src/icons/actions/add-reaction-icon.tsx Normal file
View file

@ -0,0 +1,21 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const AddReactionIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M7.74205 1.11803C8.08705 1.11822 8.36704 1.39797 8.36705 1.74303C8.36705 2.08808 8.08706 2.36783 7.74205 2.36803C6.19489 2.36804 4.64941 2.95774 3.46959 4.13756C1.11022 6.49693 1.11033 10.3221 3.46959 12.6815C5.829 15.0409 9.65407 15.0409 12.0135 12.6815C13.424 11.271 13.9923 9.33686 13.7157 7.50279C13.6644 7.16166 13.899 6.84336 14.2401 6.79185C14.5814 6.74037 14.8995 6.97593 14.951 7.31725C15.2842 9.52673 14.6003 11.8624 12.8973 13.5653C10.0497 16.4129 5.43337 16.4129 2.5858 13.5653C-0.261624 10.7177 -0.26172 6.10129 2.5858 3.25377C4.00945 1.83012 5.87693 1.11804 7.74205 1.11803ZM5.57408 9.36705C5.57469 9.36783 5.57576 9.36938 5.57701 9.37096C5.58126 9.37632 5.58935 9.38606 5.60045 9.39928C5.62309 9.42625 5.65949 9.4679 5.70884 9.51939C5.80839 9.62327 5.9578 9.76446 6.15123 9.90514C6.54052 10.1882 7.08107 10.452 7.74205 10.452C8.40303 10.4519 8.94362 10.1882 9.33287 9.90514C9.52624 9.76448 9.67573 9.62324 9.77525 9.51939C9.82463 9.46786 9.86106 9.42619 9.88365 9.39928C9.89492 9.38584 9.90289 9.37626 9.90709 9.37096C9.90903 9.36851 9.90964 9.36657 9.91002 9.36607L9.90904 9.36705C10.1164 9.09209 10.5074 9.03728 10.7831 9.244C11.0248 9.42531 11.098 9.74773 10.9735 10.0106L10.9081 10.119L10.9051 10.1229C10.9039 10.1246 10.902 10.1265 10.9003 10.1288C10.8967 10.1334 10.8921 10.1393 10.8866 10.1463C10.8753 10.1606 10.86 10.18 10.8407 10.203C10.8021 10.2489 10.7477 10.3114 10.6776 10.3846C10.5376 10.5308 10.3321 10.7232 10.0672 10.9159C9.53994 11.2993 8.74724 11.7019 7.74205 11.702C6.73657 11.702 5.94323 11.2994 5.41588 10.9159C5.15117 10.7234 4.94653 10.5307 4.8065 10.3846C4.73627 10.3113 4.681 10.2489 4.64244 10.203C4.62313 10.18 4.6078 10.1606 4.59654 10.1463C4.59098 10.1393 4.58643 10.1334 4.58287 10.1288C4.58108 10.1264 4.57927 10.1246 4.57798 10.1229C4.57738 10.1221 4.57653 10.1216 4.57603 10.121L4.57506 10.119C4.36799 9.84291 4.42405 9.45114 4.70006 9.244C4.9759 9.03712 5.3668 9.09167 5.57408 9.36705ZM5.8397 5.45689C6.32285 5.50596 6.69989 5.91397 6.70006 6.41002C6.70006 6.93918 6.27117 7.36883 5.74205 7.369C5.21278 7.369 4.78306 6.93929 4.78306 6.41002C4.78324 5.8809 5.21288 5.45201 5.74205 5.45201L5.8397 5.45689ZM9.8397 5.45689C10.3228 5.50596 10.6999 5.91395 10.7001 6.41002C10.7001 6.93921 10.2711 7.36883 9.74205 7.369C9.21284 7.369 8.78306 6.93932 8.78306 6.41002C8.78324 5.88087 9.21294 5.45201 9.74205 5.45201L9.8397 5.45689Z"
fill={color}
/>
<path
d="M12.2486 4.875V3.5H10.8736C10.5284 3.5 10.2486 3.22018 10.2486 2.875C10.2486 2.52982 10.5284 2.25 10.8736 2.25H12.2486V0.875C12.2486 0.529822 12.5284 0.25 12.8736 0.25C13.2188 0.25 13.4986 0.529822 13.4986 0.875V2.25H14.8736C15.2188 2.25 15.4986 2.52982 15.4986 2.875C15.4986 3.22018 15.2188 3.5 14.8736 3.5H13.4986V4.875C13.4986 5.22018 13.2188 5.5 12.8736 5.5C12.5284 5.5 12.2486 5.22018 12.2486 4.875Z"
fill={color}
/>
</IconWrapper>
);
};

1
packages/propel/src/icons/actions/index.ts
View file

@ -1,2 +1,3 @@
export * from "./add-icon";
export * from "./add-reaction-icon";
export * from "./close-icon";

1
packages/propel/src/icons/constants.tsx
View file

@ -1,6 +1,7 @@
import { Icon } from "./icon";
export const ActionsIconsMap = [
{ icon: <Icon name="action.add" />, title: "AddIcon" },
{ icon: <Icon name="action.add-reaction" />, title: "AddReactionIcon" },
{ icon: <Icon name="action.close" />, title: "CloseIcon" },
];

2
packages/propel/src/icons/registry.ts
View file

@ -1,3 +1,4 @@
import { AddReactionIcon } from "./actions";
import { AddIcon } from "./actions/add-icon";
import { CloseIcon } from "./actions/close-icon";
import { ChevronDownIcon } from "./arrows/chevron-down";
@ -112,6 +113,7 @@ export const ICON_REGISTRY = {
// Action icons
"action.add": AddIcon,
"action.add-reaction": AddReactionIcon,
"action.close": CloseIcon,
// Arrow icons