From e087e0353e89f0ad49aaf23fdcaee2f9249e5a64 Mon Sep 17 00:00:00 2001
From: Vlad Furman <Blowlyge@gmail.com>
Date: Fri, 19 Jul 2024 17:27:27 +0300
Subject: [PATCH] fix: api refactoring

---
 src/components/Reactions/README.md            | 58 +++++++--------
 src/components/Reactions/Reaction.tsx         | 13 ++--
 src/components/Reactions/Reactions.tsx        | 70 ++++++++++---------
 .../__stories__/Reactions.stories.tsx         | 21 +++++-
 .../Reactions/__tests__/Reactions.test.tsx    | 11 ---
 .../Reactions/__tests__/mock/mockHooks.tsx    | 16 ++---
 src/components/Reactions/context.ts           |  4 +-
 src/components/Reactions/hooks.ts             |  4 +-
 8 files changed, 104 insertions(+), 93 deletions(-)

diff --git a/src/components/Reactions/README.md b/src/components/Reactions/README.md
index ad5d410..dd2c7e7 100644
--- a/src/components/Reactions/README.md
+++ b/src/components/Reactions/README.md
@@ -8,7 +8,7 @@ Component for user reactions (e.g. 👍, 😊, 😎 etc) as new GitHub comments
 import React from 'react';
 
 import {PaletteOption} from '@gravity-ui/uikit';
-import {ReactionProps, Reactions} from '@gravity-ui/components';
+import {ReactionStateProps, Reactions} from '@gravity-ui/components';
 
 const user = {
     spongeBob: {name: 'Sponge Bob'},
@@ -30,11 +30,11 @@ const YourComponent = () => {
         [option.cool.value]: [user.spongeBob],
     });
 
-    // And then convert that mapping into an array of ReactionProps
+    // And then convert that mapping into an array of ReactionStateProps
     const reactions = React.useMemo(
         () =>
             Object.entries(usersReacted).map(
-                ([value, users]): ReactionProps => ({
+                ([value, users]): ReactionStateProps => ({
                     value,
                     counter: users.length,
                     selected: users.some(({name}) => name === currentUser.name),
@@ -44,8 +44,8 @@ const YourComponent = () => {
     );
 
     // You can then handle clicking on a reaction with changing the inital mapping,
-    // and the array of ReactionProps will change accordingly
-    const onClickReaction = React.useCallback(
+    // and the array of ReactionStateProps will change accordingly
+    const onToggle = React.useCallback(
         (value: string) => {
             if (!usersReacted[value]) {
                 // If the reaction is not present yet
@@ -75,7 +75,7 @@ const YourComponent = () => {
     );
 
     return (
-        <Reactions palette={{options}} reactions={reactions} onClickReaction={onClickReaction} />
+        <Reactions palette={{options}} reactions={reactions} onToggle={onToggle} />
     );
 };
 ```
@@ -86,29 +86,23 @@ For more code examples go to [Reactions.stories.tsx](https://github.com/gravity-
 
 **ReactionsProps** (main component props — Reactions' list):
 
-| Property          | Type                      | Required | Default | Description                                                                                    |
-| :---------------- | :------------------------ | :------: | :------ | :--------------------------------------------------------------------------------------------- |
-| `reactions`       | `ReactionProps[]`         |  `true`  |         | List of Reactions to display                                                                   |
-| `palette`         | `ReactionsPaletteProps`   |  `true`  |         | Notifications' palette props — it's a `Palette` component with available reactions to the user |
-| `onClickReaction` | `(value: string) => void` |          |         | Fires when a user clicks on a Reaction (in a Palette or in the Reactions' list)                |
-| `size`            | `ButtonSize`              |          | `m`     | Buttons's size                                                                                 |
-| `disabled`        | `boolean`                 |          | `false` | If the buttons' are disabled                                                                   |
-| `qa`              | `string`                  |          |         | `qa` attribute for testing                                                                     |
-| `className`       | `string`                  |          |         | HTML class attribute                                                                           |
-| `style`           | `React.CSSProperties`     |          |         | HTML style attribute                                                                           |
-
-**ReactionProps** (single reaction props) extends `Palette`'s `PaletteOption` `disabled` and `value` props:
-
-| Property   | Type                   | Required | Default | Description                                                   |
-| :--------- | :--------------------- | :------: | :------ | :------------------------------------------------------------ |
-| `selected` | `boolean`              |          |         | Is reaction selected by the user                              |
-| `counter`  | `React.ReactNode`      |          |         | How many users used this reaction                             |
-| `tooltip`  | `ReactionTooltipProps` |          |         | Reaction's tooltip with the list of reacted users for example |
-
-**ReactionTooltipProps** — notification's type extends `Pick<PopoverProps, 'strategy' | 'placement' | 'modifiers'>`:
-
-| Property        | Type              | Required | Default | Description                                                                                                                                                                      |
-| :-------------- | :---------------- | :------: | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `content`       | `React.ReactNode` |  `true`  |         | Tooltip's content                                                                                                                                                                |
-| `className`     | `string`          |          |         | Tooltip content's HTML class attribute                                                                                                                                           |
-| `canClosePopup` | `() => boolean`   |          |         | Fires when the `onMouseLeave` callback is called. Usage example: you have some popup inside a tooltip, you hover on it, you don't want the tooltip to be closed because of that. |
+| Property         | Type                      | Required | Default | Description                                                                                    |
+| :--------------- | :------------------------ | :------: | :------ | :--------------------------------------------------------------------------------------------- |
+| `reactions`      | `PaletteOption[]`         |  `true`  |         | List of all available reactions                                                                |
+| `reactionsState` | `ReactionStateProps[]`    |  `true`  |         | List of reactions that were used                                                               |
+| `paletteProps`   | `ReactionsPaletteProps`   |  `true`  |         | Notifications' palette props — it's a `Palette` component with available reactions to the user |
+| `onToggle`       | `(value: string) => void` |          |         | Fires when a user clicks on a Reaction (in a Palette or in the Reactions' list)                |
+| `size`           | `ButtonSize`              |          | `m`     | Buttons's size                                                                                 |
+| `readOnly`       | `boolean`                 |          | `false` | readOnly state (usage example: only signed in users can react)                                 |
+| `qa`             | `string`                  |          |         | `qa` attribute for testing                                                                     |
+| `className`      | `string`                  |          |         | HTML class attribute                                                                           |
+| `style`          | `React.CSSProperties`     |          |         | HTML style attribute                                                                           |
+
+**ReactionStateProps** (single reaction props):
+
+| Property   | Type              | Required | Default | Description                                                   |
+| :--------- | :---------------- | :------: | :------ | :------------------------------------------------------------ |
+| `value`    | `string`          |          |         | Reaction's unique value (ID)                                  |
+| `selected` | `boolean`         |          |         | Is reaction selected by the user                              |
+| `counter`  | `React.ReactNode` |          |         | How many users used this reaction                             |
+| `tooltip`  | `React.ReactNode` |          |         | Reaction's tooltip with the list of reacted users for example |
diff --git a/src/components/Reactions/Reaction.tsx b/src/components/Reactions/Reaction.tsx
index b8fb789..96a01ca 100644
--- a/src/components/Reactions/Reaction.tsx
+++ b/src/components/Reactions/Reaction.tsx
@@ -7,7 +7,13 @@ import {block} from '../utils/cn';
 import {useReactionsContext} from './context';
 import {useReactionsPopup} from './hooks';
 
-export interface ReactionProps extends Pick<PaletteOption, 'disabled' | 'value'> {
+export type ReactionProps = Pick<PaletteOption, 'value' | 'content' | 'title'>;
+
+export interface ReactionStateProps {
+    /**
+     * Reaction's unique value (ID).
+     */
+    value: string;
     /**
      * Should be true when the user used this reaction.
      */
@@ -25,7 +31,7 @@ export interface ReactionProps extends Pick<PaletteOption, 'disabled' | 'value'>
 }
 
 interface ReactionInnerProps extends Pick<PaletteOption, 'content'> {
-    reaction: ReactionProps;
+    reaction: ReactionStateProps;
     size: ButtonSize;
     onClick?: (value: string) => void;
 }
@@ -42,7 +48,7 @@ const popupDefaultPlacement: PopoverProps['placement'] = [
 const b = block('reactions');
 
 export function Reaction(props: ReactionInnerProps) {
-    const {value, disabled, selected, counter, tooltip} = props.reaction;
+    const {value, selected, counter, tooltip} = props.reaction;
     const {size, content, onClick} = props;
 
     const onClickCallback = React.useCallback(() => onClick?.(value), [onClick, value]);
@@ -55,7 +61,6 @@ export function Reaction(props: ReactionInnerProps) {
         <Button
             className={b('reaction-button', {size})}
             ref={buttonRef}
-            disabled={disabled}
             size={size}
             selected={selected}
             view="outlined"
diff --git a/src/components/Reactions/Reactions.tsx b/src/components/Reactions/Reactions.tsx
index 5fccc20..0281a8e 100644
--- a/src/components/Reactions/Reactions.tsx
+++ b/src/components/Reactions/Reactions.tsx
@@ -16,31 +16,39 @@ import xor from 'lodash/xor';
 
 import {block} from '../utils/cn';
 
-import {Reaction, ReactionProps} from './Reaction';
+import {Reaction, ReactionProps, ReactionStateProps} from './Reaction';
 import {ReactionsContextProvider, ReactionsContextTooltipProps} from './context';
 
 import './Reactions.scss';
 
 const b = block('reactions');
 
-export type ReactionsPaletteProps = Omit<
+export type ReactionsPaletteProps = Pick<
     PaletteProps,
-    'value' | 'defaultValue' | 'onUpdate' | 'size' | 'disabled' | 'multiple'
+    'columns' | 'rowClassName' | 'optionClassName'
 >;
 
-export interface ReactionsProps extends Pick<PaletteProps, 'size' | 'disabled'>, QAProps, DOMProps {
+export interface ReactionsProps extends Pick<PaletteProps, 'size'>, QAProps, DOMProps {
     /**
-     * Users' reactions.
+     * All available reactions.
      */
     reactions: ReactionProps[];
+    /**
+     * Users' reactions.
+     */
+    reactionsState: ReactionStateProps[];
     /**
      * Reactions' palette props.
      */
-    palette: ReactionsPaletteProps;
+    paletteProps?: ReactionsPaletteProps;
+    /**
+     * Reactions' readonly state (when a user is unable to react for some reason).
+     */
+    readOnly?: boolean;
     /**
      * Callback for clicking on a reaction in the Palette or directly in the reactions' list.
      */
-    onClickReaction?: (value: string) => void;
+    onToggle?: (value: string) => void;
 }
 
 const buttonSizeToIconSize = {
@@ -53,13 +61,14 @@ const buttonSizeToIconSize = {
 
 export function Reactions({
     reactions,
+    reactionsState,
     className,
     style,
     size = 'm',
-    disabled,
-    palette,
+    paletteProps,
+    readOnly,
     qa,
-    onClickReaction,
+    onToggle,
 }: ReactionsProps) {
     const [currentHoveredReaction, setCurrentHoveredReaction] = React.useState<
         ReactionsContextTooltipProps | undefined
@@ -67,45 +76,42 @@ export function Reactions({
 
     const paletteOptionsMap = React.useMemo(
         () =>
-            palette.options
-                ? palette.options.reduce<Record<PaletteOption['value'], PaletteOption>>(
-                      (acc, current) => {
-                          // eslint-disable-next-line no-param-reassign
-                          acc[current.value] = current;
-                          return acc;
-                      },
-                      {},
-                  )
-                : {},
-        [palette.options],
+            reactions.reduce<Record<PaletteOption['value'], PaletteOption>>((acc, current) => {
+                // eslint-disable-next-line no-param-reassign
+                acc[current.value] = current;
+                return acc;
+            }, {}),
+        [reactions],
     );
 
     const paletteValue = React.useMemo(
-        () => reactions.filter((reaction) => reaction.selected).map((reaction) => reaction.value),
-        [reactions],
+        () =>
+            reactionsState
+                .filter((reaction) => reaction.selected)
+                .map((reaction) => reaction.value),
+        [reactionsState],
     );
 
     const onUpdatePalette = React.useCallback(
         (updated: string[]) => {
             const diffValues = xor(paletteValue, updated);
             for (const diffValue of diffValues) {
-                onClickReaction?.(diffValue);
+                onToggle?.(diffValue);
             }
         },
-        [onClickReaction, paletteValue],
+        [onToggle, paletteValue],
     );
 
     const paletteContent = React.useMemo(
         () => (
             <Palette
-                {...palette}
+                {...paletteProps}
                 value={paletteValue}
-                disabled={disabled}
                 size={size}
                 onUpdate={onUpdatePalette}
             />
         ),
-        [paletteValue, disabled, size, palette, onUpdatePalette],
+        [paletteValue, size, paletteProps, onUpdatePalette],
     );
 
     return (
@@ -117,22 +123,22 @@ export function Reactions({
         >
             <Flex className={b(null, className)} style={style} gap={1} wrap={true} qa={qa}>
                 {/* Reactions' list */}
-                {reactions.map((reaction) => {
+                {reactionsState.map((reaction) => {
                     const content = paletteOptionsMap[reaction.value]?.content ?? '?';
 
                     return (
                         <Reaction
                             key={reaction.value}
                             content={content}
-                            reaction={disabled ? {...reaction, disabled} : reaction}
+                            reaction={reaction}
                             size={size}
-                            onClick={onClickReaction}
+                            onClick={readOnly ? undefined : onToggle}
                         />
                     );
                 })}
 
                 {/* Add reaction button */}
-                {disabled ? null : (
+                {readOnly ? null : (
                     <Popover
                         content={paletteContent}
                         tooltipContentClassName={b('add-reaction-popover')}
diff --git a/src/components/Reactions/__stories__/Reactions.stories.tsx b/src/components/Reactions/__stories__/Reactions.stories.tsx
index e529194..5cf7359 100644
--- a/src/components/Reactions/__stories__/Reactions.stories.tsx
+++ b/src/components/Reactions/__stories__/Reactions.stories.tsx
@@ -15,8 +15,25 @@ export const Default: StoryFn = () => {
     return <Reactions {...useMockReactions()} />;
 };
 
-export const Disabled: StoryFn = () => {
-    return <Reactions {...useMockReactions()} disabled={true} />;
+export const Readonly: StoryFn = () => {
+    const {reactions, reactionsState, onToggle} = useMockReactions();
+
+    return (
+        <Reactions
+            reactions={reactions}
+            reactionsState={reactionsState.map((reaction) => ({
+                ...reaction,
+                tooltip: (
+                    <Flex direction="column" gap={2}>
+                        <Text variant="subheader-1">You must be singed in to react</Text>
+                        {reaction.tooltip}
+                    </Flex>
+                ),
+            }))}
+            onToggle={onToggle}
+            readOnly={true}
+        />
+    );
 };
 
 export const Size: StoryFn = () => {
diff --git a/src/components/Reactions/__tests__/Reactions.test.tsx b/src/components/Reactions/__tests__/Reactions.test.tsx
index e888c5f..45da5db 100644
--- a/src/components/Reactions/__tests__/Reactions.test.tsx
+++ b/src/components/Reactions/__tests__/Reactions.test.tsx
@@ -32,17 +32,6 @@ describe('Reactions', () => {
         },
     );
 
-    test('all buttons are disabled when disabled=true prop is given', () => {
-        render(<TestReactions qa={qaId} disabled={true} />);
-
-        const $component = screen.getByTestId(qaId);
-        const $reactions = within($component).getAllByRole('button');
-
-        $reactions.forEach(($reaction: HTMLElement) => {
-            expect($reaction).toBeDisabled();
-        });
-    });
-
     test('show given reaction', () => {
         render(<TestReactions qa={qaId} />);
 
diff --git a/src/components/Reactions/__tests__/mock/mockHooks.tsx b/src/components/Reactions/__tests__/mock/mockHooks.tsx
index 80aa787..935b885 100644
--- a/src/components/Reactions/__tests__/mock/mockHooks.tsx
+++ b/src/components/Reactions/__tests__/mock/mockHooks.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Flex, Text, User} from '@gravity-ui/uikit';
 
-import {ReactionProps} from '../../Reaction';
+import {ReactionStateProps} from '../../Reaction';
 import {Reactions, ReactionsProps} from '../../Reactions';
 
 import {
@@ -41,7 +41,7 @@ const renderUsersReacted = (users: ReactionsMockUser[]) => {
     );
 };
 
-const getTooltip = (users: ReactionsMockUser[]): ReactionProps['tooltip'] =>
+const getTooltip = (users: ReactionsMockUser[]): ReactionStateProps['tooltip'] =>
     renderUsersReacted(users);
 
 export function useMockReactions(): ReactionsProps {
@@ -54,10 +54,10 @@ export function useMockReactions(): ReactionsProps {
         [option.sad.value]: [user.squidward],
     });
 
-    const reactions = React.useMemo(
+    const reactionsState = React.useMemo(
         () =>
             Object.entries(usersReacted).map(
-                ([value, users]): ReactionProps => ({
+                ([value, users]): ReactionStateProps => ({
                     value,
                     counter: users.length,
                     tooltip: getTooltip(users),
@@ -67,7 +67,7 @@ export function useMockReactions(): ReactionsProps {
         [usersReacted],
     );
 
-    const onClickReaction = React.useCallback(
+    const onToggle = React.useCallback(
         (value: string) => {
             if (!usersReacted[value]) {
                 setUsersReacted((current) => ({...current, [value]: [currentUser]}));
@@ -93,9 +93,9 @@ export function useMockReactions(): ReactionsProps {
     );
 
     return {
-        palette: {options},
-        reactions,
-        onClickReaction,
+        reactions: options,
+        reactionsState,
+        onToggle,
     };
 }
 
diff --git a/src/components/Reactions/context.ts b/src/components/Reactions/context.ts
index 9f21f0d..0e4ad30 100644
--- a/src/components/Reactions/context.ts
+++ b/src/components/Reactions/context.ts
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import type {ReactionProps} from './Reaction';
+import type {ReactionStateProps} from './Reaction';
 
 export interface ReactionsContextTooltipProps {
-    reaction: ReactionProps;
+    reaction: ReactionStateProps;
     ref: React.RefObject<HTMLButtonElement>;
     open: boolean;
 }
diff --git a/src/components/Reactions/hooks.ts b/src/components/Reactions/hooks.ts
index bafce81..eaf8c97 100644
--- a/src/components/Reactions/hooks.ts
+++ b/src/components/Reactions/hooks.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {ReactionProps} from './Reaction';
+import type {ReactionStateProps} from './Reaction';
 import {useReactionsContext} from './context';
 
 const DELAY = {
@@ -10,7 +10,7 @@ const DELAY = {
 } as const;
 
 export function useReactionsPopup(
-    reaction: ReactionProps,
+    reaction: ReactionStateProps,
     ref: React.RefObject<HTMLButtonElement>,
 ) {
     const {value} = reaction;