@kiva/kv-components 3.52.0 → 3.53.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.53.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.52.1...@kiva/kv-components@3.53.0) (2024-02-26)
+
+
+### Bug Fixes
+
+* indentation in item component ([30aee02](https://github.com/kiva/kv-ui-elements/commit/30aee02d3c2e58c7c98fe6a58689a9824f56ef60))
+* optional chaining for comment object ([bac9ba1](https://github.com/kiva/kv-ui-elements/commit/bac9ba199970966564bfab7d6a2e64bb92fea286))
+* revert profile image and small fixes ([fc8cf74](https://github.com/kiva/kv-ui-elements/commit/fc8cf7440fb355fbfee0e8acfb2a849dd6513a11))
+* using more accurate data for components ([043f1c2](https://github.com/kiva/kv-ui-elements/commit/043f1c2d47a5d22157785b9d972246823572e4fd))
+
+
+### Features
+
+* provisional comment list and item components ([642745c](https://github.com/kiva/kv-ui-elements/commit/642745ce1359e5cc9e3d98d122f26728b3dffda0))
+
+
+
+
+
+## [3.52.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.52.0...@kiva/kv-components@3.52.1) (2024-02-01)
+
+
+### Bug Fixes
+
+* add back in comments container ([36a8a97](https://github.com/kiva/kv-ui-elements/commit/36a8a979aac47c425e32d87cd13160ad68b913cf))
+* another tweak to how events emitted ([029367a](https://github.com/kiva/kv-ui-elements/commit/029367aeb1f38151a7d36e0a2246b82b14489cb3))
+* minor test fix ([c95c486](https://github.com/kiva/kv-ui-elements/commit/c95c4866d05b2e711e8895868d72ddc6bb5b7a43))
+* remove unneeded comment container ([71365b0](https://github.com/kiva/kv-ui-elements/commit/71365b0f6628d1d280f9fbd2b0adbad8688fd57c))
+
+
+
+
+
 # [3.52.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.51.0...@kiva/kv-components@3.52.0) (2024-01-31)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.52.0",
+  "version": "3.53.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "185baa28a3a0e9616ca3ef4cf404b9074d19b373"
+  "gitHead": "f9f7231aa673a793c38ed14e55977ecb1d9dc89b"
 }

package/tests/fixtures/mockFeedActivityData.js

@@ -0,0 +1,79 @@
+const comments = {
+	duration: '6.42ms',
+	results: [
+		{
+			actor: {
+				created_at: '2024-02-01T19:48:26.890734Z',
+				updated_at: '2024-02-01T19:48:26.890734Z',
+				id: '123',
+				data: {},
+			},
+			foreign_id: 'CHALLENGE#test-challenge-id',
+			id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+			latest_reactions: {
+				comment: [
+					{
+						created_at: '2024-02-01T20:12:31.398932Z',
+						updated_at: '2024-02-01T20:12:31.398932Z',
+						id: 'dade3812-6aa0-4c32-90ea-2366dab178a1',
+						user_id: '1de650a5-b12f-4d20-b46c-6e15b0722141',
+						kind: 'comment',
+						activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+						data: {
+							text: 'another guest comment',
+						},
+						parent: '',
+						latest_children: {},
+						children_counts: {},
+					},
+					{
+						created_at: '2024-02-01T20:11:23.931133Z',
+						updated_at: '2024-02-01T20:11:23.931133Z',
+						id: '3de615bb-0d48-4a69-9004-141ee26985eb',
+						user_id: '1de650a5-b12f-4d20-b46c-6e15b0722141',
+						kind: 'comment',
+						activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+						data: {
+							text: 'test as visitor',
+						},
+						parent: '',
+						latest_children: {},
+						children_counts: {},
+					},
+					{
+						created_at: '2024-02-01T20:06:46.651764Z',
+						updated_at: '2024-02-01T20:06:46.651764Z',
+						id: 'e1db4420-159e-4ba2-aab9-704d1cc56dae',
+						user_id: '123',
+						user: {
+							created_at: '2024-02-01T19:48:26.890734Z',
+							updated_at: '2024-02-01T19:48:26.890734Z',
+							id: '123',
+							data: {},
+						},
+						kind: 'comment',
+						activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+						data: {
+							text: 'asd',
+						},
+						parent: '',
+						latest_children: {},
+						children_counts: {},
+					},
+				],
+			},
+			latest_reactions_extra: {
+				comment: {
+					next: '',
+				},
+			},
+			object: 'test-challenge-id',
+			origin: null,
+			target: '',
+			time: '2024-02-01T17:54:24.932762',
+			verb: 'CHALLENGE',
+		},
+	],
+};
+
+export default comments;

package/tests/unit/specs/components/KvCommentsList.spec.js

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import ListComponent from '../../../../vue/KvCommentsList.vue';
+import activityFeed from '../../../fixtures/mockFeedActivityData';
+import { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
+
+const renderList = (props = {}) => {
+	return render(ListComponent, { props });
+};
+
+const comments = activityFeed.results[0].latest_reactions;
+
+describe('KvCommentsList', () => {
+	it('should render comments component', async () => {
+		const { container } = renderList({ comments });
+
+		const { id } = comments.comment[0];
+		expect(container.querySelectorAll(`#${id}`).length).toBe(1);
+	});
+
+	it('should emit comment events', async () => {
+		const { getAllByRole, emitted } = renderList({ comments });
+		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
+		const likeButton = getAllByRole('button', { name: 'Like' })[0];
+		const firstComment = comments.comment[0];
+
+		const TEST_OBJ = {
+			userId: firstComment.user_id,
+			id: firstComment.id,
+			isChild: true,
+		};
+
+		await userEvent.click(replyButton);
+		expect(emitted()[REPLY_COMMENT_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: REPLY_COMMENT_EVENT }]]);
+
+		await userEvent.click(likeButton);
+		expect(emitted()[LIKE_COMMENT_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: LIKE_COMMENT_EVENT }]]);
+	});
+});

package/tests/unit/specs/components/KvCommentsListItem.spec.js

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import KvCommentsListItem from '../../../../vue/KvCommentsListItem.vue';
+import activityFeed from '../../../fixtures/mockFeedActivityData';
+
+const comment = activityFeed.results[0].latest_reactions.comment[0];
+
+const handleClick = jest.fn();
+
+const renderComment = (props = {}) => {
+	return render(KvCommentsListItem, { props });
+};
+
+describe('KvCommentsListItem', () => {
+	it('should render defaults', () => {
+		const { getByRole } = renderComment({ comment });
+		getByRole('button', { name: 'Reply' });
+		getByRole('button', { name: 'Like' });
+	});
+
+	it('should render comment text', () => {
+		const { getByText } = renderComment({ comment });
+		getByText(comment.data.text);
+	});
+
+	it('should handle like button click', async () => {
+		const { getByRole } = renderComment({ comment, handleClick });
+		const likeButton = getByRole('button', { name: 'Like' });
+
+		await userEvent.click(likeButton);
+
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('should handle reply button click', async () => {
+		const { getByRole } = renderComment({ comment, handleClick });
+		const replyButton = getByRole('button', { name: 'Reply' });
+
+		await userEvent.click(replyButton);
+
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+});

package/vue/KvCommentsContainer.vue

@@ -1,19 +1,30 @@
 <template>
-	<kv-comments-add
-		:user-image-url="userImageUrl"
-		:user-display-name="userDisplayName"
-		@add-comment="comment"
-	/>
+	<div>
+		<kv-comments-add
+			:user-image-url="userImageUrl"
+			:user-display-name="userDisplayName"
+			@add-comment="comment"
+		/>
+		<kv-comments-list
+			v-if="comments"
+			:comments="comments"
+			@[REPLY_COMMENT_EVENT]="comment"
+			@[LIKE_COMMENT_EVENT]="comment"
+		/>
+	</div>
 </template>
 
 <script>
 import KvCommentsAdd from './KvCommentsAdd.vue';
+import KvCommentsList from './KvCommentsList.vue';
+import { REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT } from './KvCommentsListItem.vue';
 
 export const ADD_COMMENT_EVENT = 'add-comment';
 
 export default {
 	components: {
 		KvCommentsAdd,
+		KvCommentsList,
 	},
 	props: {
 		/**
@@ -30,14 +41,24 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Activity comments
+		 */
+		comments: {
+			type: Object,
+			default: () => {},
+		},
 	},
 	setup(_props, { emit }) {
 		const comment = (commentValue) => {
 			emit(ADD_COMMENT_EVENT, commentValue);
+			emit(REPLY_COMMENT_EVENT, commentValue);
+			emit(LIKE_COMMENT_EVENT, commentValue);
 		};
-
 		return {
 			comment,
+			REPLY_COMMENT_EVENT,
+			LIKE_COMMENT_EVENT,
 		};
 	},
 };

package/vue/KvCommentsList.vue

@@ -0,0 +1,37 @@
+<template>
+	<div>
+		<KvCommentsListItem
+			v-for="comment in comments.comment"
+			:id="comment.id"
+			:key="comment.id"
+			:nest-level="1"
+			:comment="comment"
+			:handle-click="handleClick"
+		/>
+	</div>
+</template>
+
+<script>
+
+import KvCommentsListItem, { REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT } from './KvCommentsListItem.vue';
+
+export default {
+	components: { KvCommentsListItem },
+	props: {
+		/**
+		 * Activity comments
+		 */
+		comments: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	methods: {
+		handleClick(payload) {
+			if ([REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT].includes(payload.reaction)) {
+				this.$emit(payload.reaction, { ...payload });
+			}
+		},
+	},
+};
+</script>

package/vue/KvCommentsListItem.vue

@@ -0,0 +1,121 @@
+<template>
+	<div>
+		<div
+			class="tw-flex tw-items-center tw-gap-1"
+		>
+			<img
+				v-if="profileImage"
+				class="
+					data-hj-suppress
+					tw-inline-block
+					tw-w-3.5
+					tw-h-3.5
+					tw-rounded-full
+					tw-overflow-hidden
+					tw-object-fill
+				"
+				:src="profileImage"
+				alt="picture"
+			>
+			<p>
+				{{ text }}
+			</p>
+		</div>
+
+		<kv-button
+			variant="ghost"
+			class="tw-font-medium"
+			@click="onClick(REPLY_COMMENT_EVENT)"
+		>
+			Reply
+		</kv-button>
+		<kv-button
+			variant="ghost"
+			class="tw-font-medium"
+			@click="onClick(LIKE_COMMENT_EVENT)"
+		>
+			Like
+		</kv-button>
+		<div
+			v-if="latestChildren"
+			class="tw-my-1"
+		>
+			<p
+				v-for="nested_comment in latestChildren"
+				:key="nested_comment.id"
+				class="tw-ml-3"
+			>
+				<kv-comments-list-item
+					:comment="nested_comment"
+					:nest-level="nestLevel + 1"
+					:handle-click="handleClick"
+				/>
+			</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import KvButton from './KvButton.vue';
+
+export const REPLY_COMMENT_EVENT = 'reply-comment';
+export const LIKE_COMMENT_EVENT = 'like-comment';
+
+export default {
+	name: 'KvCommentsListItem',
+	components: { KvButton },
+	props: {
+		/**
+		 * Activity comment
+		 */
+		comment: {
+			type: Object,
+			default: () => ({}),
+		},
+		/**
+		 * The nest level of the comment
+		 */
+		nestLevel: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * The function to call when a reaction is clicked
+		 */
+		handleClick: {
+			type: Function,
+			default: () => ({}),
+		},
+	},
+	setup(props) {
+		const onClick = (reaction) => {
+			props.handleClick({
+				reaction,
+				id: props.comment?.id ?? null,
+				userId: props.comment?.user_id ?? null,
+				isChild: true,
+			});
+		};
+
+		return {
+			onClick,
+			REPLY_COMMENT_EVENT,
+			LIKE_COMMENT_EVENT,
+		};
+	},
+	computed: {
+		text() {
+			return this.comment?.data?.text ?? '';
+		},
+		userId() {
+			return this.comment?.user_id ?? null;
+		},
+		latestChildren() {
+			return this.comment?.latest_children ?? null;
+		},
+		profileImage() {
+			return this.comment?.user_picture ?? '';
+		},
+	},
+};
+</script>

package/vue/stories/KvCommentsContainer.stories.js

@@ -1,4 +1,5 @@
 import KvCommentsContainer from '../KvCommentsContainer.vue';
+import comments from '../../tests/fixtures/mockFeedActivityData';
 
 export default {
 	title: 'KvCommentsContainer',
@@ -20,4 +21,4 @@ const story = (args) => {
 	return template;
 };
 
-export const Default = story({});
+export const Default = story({ comments });

package/vue/stories/KvCommentsList.stories.js

@@ -0,0 +1,24 @@
+import KvCommentsList from '../KvCommentsList.vue';
+import activityFeed from '../../tests/fixtures/mockFeedActivityData';
+
+export default {
+	title: 'KvCommentsList',
+	component: KvCommentsList,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsList },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<KvCommentsList v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const comments = activityFeed.results[0].latest_reactions;
+
+export const Default = story({ comments });

package/vue/stories/KvCommentsListItem.stories.js

@@ -0,0 +1,24 @@
+import KvCommentsListItem from '../KvCommentsListItem.vue';
+import activityFeed from '../../tests/fixtures/mockFeedActivityData';
+
+export default {
+	title: 'KvCommentsListItem',
+	component: KvCommentsListItem,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsListItem },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<KvCommentsListItem v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const comment = activityFeed.results[0].latest_reactions.comment[0];
+
+export const Default = story({ comment });