mirror of
https://github.com/Novaloop-AG/healthchat-web.git
synced 2026-11-10 01:01:45 +00:00
Zack
62c7fe5408
* Setting up structure for the init refactoring of ReactionsRowButtonTooltip * implemented example to follow for refactoring to MVVM * Refactoring of ReactionsRowButtonTooltipView * updated reactionrowbutton to use our new viewmodel and removed unessecery comments * Updated children from reactnode to propswithchildren * removal of children on the vm have it as a props * implemented constructor into reactionrowbutton to use vm to viewmodel * Removal of old component * Added ViewModel Tests for new viewmodel * Fix issues after merging develop * Updated import placement for eslint failure CI * Add tests for ReactionsRowButton ViewModel integration and click handlers to pass coverage * Added more tests to cover all conditions * Pass MatrixClient as prop instead of using global; replace expect(true).toBe(true) with not.toThrow() * Added new snapshot to reflect modifications on tests * Update images to fit the CI tests * Optimize reactions tooltip viewmodel updates * Removal of module.css for reactionbuttontooltip, we dont need it since we dont use any css * Fixed snapshots to show the tooltip by introducing a boolean to set open to true in Storybook. * Update snapshots --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
/*
|
||
* Copyright 2026 Element Creations Ltd.
|
||
*
|
||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||
* Please see LICENSE files in the repository root for full details.
|
||
*/
|
||
|
||
import React, { type JSX, type PropsWithChildren } from "react";
|
||
|
||
import type { Meta, StoryFn } from "@storybook/react-vite";
|
||
import { useMockedViewModel } from "../../viewmodel";
|
||
import {
|
||
ReactionsRowButtonTooltipView,
|
||
type ReactionsRowButtonTooltipViewSnapshot,
|
||
} from "./ReactionsRowButtonTooltipView";
|
||
|
||
type WrapperProps = ReactionsRowButtonTooltipViewSnapshot & PropsWithChildren;
|
||
|
||
const ReactionsRowButtonTooltipViewWrapper = ({ children, ...snapshotProps }: WrapperProps): JSX.Element => {
|
||
const vm = useMockedViewModel(snapshotProps, {});
|
||
return <ReactionsRowButtonTooltipView vm={vm}>{children}</ReactionsRowButtonTooltipView>;
|
||
};
|
||
|
||
export default {
|
||
title: "MessageBody/ReactionsRowButtonTooltip",
|
||
component: ReactionsRowButtonTooltipViewWrapper,
|
||
tags: ["autodocs"],
|
||
argTypes: {
|
||
formattedSenders: { control: "text" },
|
||
caption: { control: "text" },
|
||
},
|
||
args: {
|
||
children: <button>👍 3</button>,
|
||
},
|
||
} as Meta<typeof ReactionsRowButtonTooltipViewWrapper>;
|
||
|
||
const Template: StoryFn<typeof ReactionsRowButtonTooltipViewWrapper> = (args) => (
|
||
<ReactionsRowButtonTooltipViewWrapper {...args} />
|
||
);
|
||
|
||
export const Default = Template.bind({});
|
||
Default.args = {
|
||
formattedSenders: "Alice, Bob and Charlie",
|
||
caption: ":thumbsup:",
|
||
tooltipOpen: true,
|
||
};
|
||
|
||
export const ManySenders = Template.bind({});
|
||
ManySenders.args = {
|
||
formattedSenders: "Alice, Bob, Charlie, David, Eve, Frank and 2 others",
|
||
caption: ":heart:",
|
||
children: <button>❤️ 8</button>,
|
||
tooltipOpen: true,
|
||
};
|
||
|
||
export const WithoutCaption = Template.bind({});
|
||
WithoutCaption.args = {
|
||
formattedSenders: "Alice and Bob",
|
||
caption: undefined,
|
||
children: <button>🎉 2</button>,
|
||
tooltipOpen: true,
|
||
};
|
||
|
||
export const NoTooltip = Template.bind({});
|
||
NoTooltip.args = {
|
||
formattedSenders: undefined,
|
||
caption: undefined,
|
||
children: <button>👍 1</button>,
|
||
};
|