Component architecture

.eslintrc.cjs

@@ -38,7 +38,7 @@ module.exports = {
 		'vue/no-undef-components': [
 			'error',
 			{
-				ignorePatterns: [],
+				ignorePatterns: ['.*-.*'],
 			},
 		],
 	},

src/frontend/Comments/BaseCommentsLogInto.vue

@@ -0,0 +1,5 @@
+<template><PkpButton>Log in to comment</PkpButton></template>
+
+<script setup>
+import PkpButton from '../components/PkpButton/PkpButton.vue';
+</script>

src/frontend/Comments/BaseCommentsMessage.vue

@@ -0,0 +1,11 @@
+<template>
+	<div>
+		<slot :message="message"></slot>
+	</div>
+</template>
+<script setup>
+import {provide} from 'vue';
+
+const props = defineProps({message: {type: Object, required: true}});
+provide('currentMessage', props.message);
+</script>

src/frontend/Comments/BaseCommentsMessageActions.vue

@@ -0,0 +1,9 @@
+<template>
+	<DropdownActions button-variant="ellipsis" :items="items" />
+</template>
+<script setup>
+import {ref} from 'vue';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+
+const items = ref([]);
+</script>

src/frontend/Comments/BaseCommentsMessageAuthor.vue

@@ -0,0 +1,3 @@
+<template>
+	<div><slot></slot></div>
+</template>

src/frontend/Comments/BaseCommentsMessageAuthorAffiliation.vue

@@ -0,0 +1,8 @@
+<template>
+	<span>{{ currentMessage.author.affiliation }}</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const currentMessage = inject('currentMessage');
+</script>

src/frontend/Comments/BaseCommentsMessageAuthorName.vue

@@ -0,0 +1,8 @@
+<template>
+	<span>{{ currentMessage.author.name }}</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const currentMessage = inject('currentMessage');
+</script>

src/frontend/Comments/BaseCommentsMessageAuthorOrcid.vue

@@ -0,0 +1,8 @@
+<template>
+	<span>{{ currentMessage.author.orcid }}</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const currentMessage = inject('currentMessage');
+</script>

src/frontend/Comments/BaseCommentsMessageBody.vue

@@ -0,0 +1,11 @@
+<template>
+	<span>
+		{{ currentMessage.body }}
+	</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+const currentMessage = inject('currentMessage');
+
+console.log('currentMessage:', currentMessage);
+</script>

src/frontend/Comments/BaseCommentsMessageDate.vue

@@ -0,0 +1,8 @@
+<template>
+	<span>{{ currentMessage.date }}</span>
+</template>
+<script setup>
+import {inject} from 'vue';
+
+const currentMessage = inject('currentMessage');
+</script>

src/frontend/Comments/BaseCommentsMessageProvider.vue

@@ -0,0 +1,16 @@
+<template>
+	<slot />
+</template>
+
+<script setup>
+import {provide} from 'vue';
+
+const props = defineProps({
+	message: {
+		type: Object,
+		required: true,
+	},
+});
+console.log('providing:', props.message);
+provide('currentMessage', props.message);
+</script>

src/frontend/Comments/BaseCommentsMessages.vue

@@ -0,0 +1,31 @@
+<template>
+	<div>
+		<template v-for="message in messages">
+			<slot name="item" :message="message"></slot>
+		</template>
+	</div>
+</template>
+<script setup>
+const messages = [
+	{
+		id: 1,
+		date: '2023-01-01',
+		body: 'This is a great article!',
+		author: {
+			name: 'John Doe',
+			orcid: '0000-0001-2345-6789',
+			affiliation: 'University of Example',
+		},
+	},
+	{
+		id: 2,
+		date: '2023-01-02',
+		body: 'Interesting points raised here.',
+		author: {
+			name: 'Jane Smith',
+			orcid: '0000-0002-3456-7890',
+			affiliation: 'Research Institute',
+		},
+	},
+];
+</script>

src/frontend/Comments/BaseCommentsNew.vue

@@ -0,0 +1,5 @@
+<template>
+	<div>
+		<slot></slot>
+	</div>
+</template>

src/frontend/Comments/BaseCommentsNewInput.vue

@@ -0,0 +1,4 @@
+<template><PkpTextarea /></template>
+<script setup>
+import PkpTextarea from '../components/PkpTextarea/PkpTextarea.vue';
+</script>

src/frontend/Comments/BaseCommentsNewSubmit.vue

@@ -0,0 +1,5 @@
+<template><PkpButton>Submit</PkpButton></template>
+
+<script setup>
+import PkpButton from '../components/PkpButton/PkpButton.vue';
+</script>

src/frontend/Comments/BaseCommentsVersion.vue

@@ -0,0 +1,6 @@
+<template>
+	<AccordionItem><slot /></AccordionItem>
+</template>
+<script setup>
+import {AccordionItem} from 'reka-ui';
+</script>

src/frontend/Comments/BaseCommentsVersionContent.vue

@@ -0,0 +1,6 @@
+<template>
+	<AccordionContent><slot></slot></AccordionContent>
+</template>
+<script setup>
+import {AccordionContent} from 'reka-ui';
+</script>

src/frontend/Comments/BaseCommentsVersionHeader.vue

@@ -0,0 +1,8 @@
+<template>
+	<AccordionHeader>
+		<slot></slot>
+	</AccordionHeader>
+</template>
+<script setup>
+import {AccordionHeader} from 'reka-ui';
+</script>

src/frontend/Comments/BaseCommentsVersionHeaderChevron.vue

@@ -0,0 +1 @@
+<template><span>▼</span></template>

src/frontend/Comments/BaseCommentsVersionHeaderLabel.vue

@@ -0,0 +1 @@
+<template><span>Version N</span></template>

src/frontend/Comments/BaseCommentsVersionHeaderTrigger.vue

@@ -0,0 +1,8 @@
+<template>
+	<AccordionTrigger>
+		<slot></slot>
+	</AccordionTrigger>
+</template>
+<script setup>
+import {AccordionTrigger} from 'reka-ui';
+</script>

src/frontend/Comments/BaseCommentsVersions.vue

@@ -0,0 +1,6 @@
+<template>
+	<AccordionRoot collapsible type="multiple"><slot></slot></AccordionRoot>
+</template>
+<script setup>
+import {AccordionRoot} from 'reka-ui';
+</script>

src/frontend/Comments/Comments.stories.js

@@ -0,0 +1,15 @@
+import Comments from './PkpComments.vue';
+
+export default {
+	title: 'Comments',
+	component: Comments,
+	render: (args) => ({
+		components: {Comments},
+		setup() {
+			return {args};
+		},
+		template: '<Comments v-bind="args"></Comments>',
+	}),
+};
+
+export const Primary = {};

src/frontend/Comments/PkpComments copy.vue

@@ -0,0 +1,59 @@
+<template>
+	<PkpBaseCommentsVersions>
+		<PkpBaseCommentsVersion>
+			<PkpBaseCommentsVersionHeader>
+				<PkpBaseCommentsVersionHeaderTrigger>
+					<PkpBaseCommentsVersionHeaderLabel></PkpBaseCommentsVersionHeaderLabel>
+					<PkpBaseCommentsVersionHeaderChevron></PkpBaseCommentsVersionHeaderChevron>
+				</PkpBaseCommentsVersionHeaderTrigger>
+			</PkpBaseCommentsVersionHeader>
+			<PkpBaseCommentsVersionContent>
+				<PkpBaseCommentsLogInto></PkpBaseCommentsLogInto>
+				<PkpBaseCommentsNew>
+					<PkpBaseCommentsNewInput></PkpBaseCommentsNewInput>
+					<PkpBaseCommentsNewSubmit></PkpBaseCommentsNewSubmit>
+				</PkpBaseCommentsNew>
+				<PkpBaseCommentsMessages>
+					<template #item="data">
+						<PkpBaseCommentsMessage v-bind="data">
+							<PkpBaseCommentsMessageDate></PkpBaseCommentsMessageDate>
+							<PkpBaseCommentsMessageActions></PkpBaseCommentsMessageActions>
+							<PkpBaseCommentsMessageBody></PkpBaseCommentsMessageBody>
+
+							<PkpBaseCommentsMessageAuthor>
+								<PkpBaseCommentsMessageAuthorName></PkpBaseCommentsMessageAuthorName>
+								<PkpBaseCommentsMessageAuthorOrcid></PkpBaseCommentsMessageAuthorOrcid>
+								<PkpBaseCommentsMessageAuthorAffiliation></PkpBaseCommentsMessageAuthorAffiliation>
+							</PkpBaseCommentsMessageAuthor>
+						</PkpBaseCommentsMessage>
+					</template>
+				</PkpBaseCommentsMessages>
+			</PkpBaseCommentsVersionContent>
+		</PkpBaseCommentsVersion>
+	</PkpBaseCommentsVersions>
+</template>
+
+<script setup>
+import PkpBaseCommentsVersions from './PkpBaseCommentsVersions.vue';
+import PkpBaseCommentsVersion from './PkpBaseCommentsVersion.vue';
+import PkpBaseCommentsNew from './PkpBaseCommentsNew.vue';
+import PkpBaseCommentsNewInput from './PkpBaseCommentsNewInput.vue';
+import PkpBaseCommentsNewSubmit from './PkpBaseCommentsNewSubmit.vue';
+import PkpBaseCommentsVersionHeader from './PkpBaseCommentsVersionHeader.vue';
+import PkpBaseCommentsVersionHeaderTrigger from './PkpBaseCommentsVersionHeaderTrigger.vue';
+import PkpBaseCommentsVersionHeaderLabel from './PkpBaseCommentsVersionHeaderLabel.vue';
+import PkpBaseCommentsVersionHeaderChevron from './PkpBaseCommentsVersionHeaderChevron.vue';
+
+import PkpBaseCommentsVersionContent from './PkpBaseCommentsVersionContent.vue';
+
+import PkpBaseCommentsLogInto from './PkpBaseCommentsLogInto.vue';
+import PkpBaseCommentsMessages from './PkpBaseCommentsMessages.vue';
+import PkpBaseCommentsMessage from './PkpBaseCommentsMessage.vue';
+import PkpBaseCommentsMessageDate from './PkpBaseCommentsMessageDate.vue';
+import PkpBaseCommentsMessageActions from './PkpBaseCommentsMessageActions.vue';
+import PkpBaseCommentsMessageBody from './PkpBaseCommentsMessageBody.vue';
+import PkpBaseCommentsMessageAuthor from './PkpBaseCommentsMessageAuthor.vue';
+import PkpBaseCommentsMessageAuthorName from './PkpBaseCommentsMessageAuthorName.vue';
+import PkpBaseCommentsMessageAuthorOrcid from './PkpBaseCommentsMessageAuthorOrcid.vue';
+import PkpBaseCommentsMessageAuthorAffiliation from './PkpBaseCommentsMessageAuthorAffiliation.vue';
+</script>

src/frontend/Comments/PkpComments.vue

@@ -0,0 +1,78 @@
+<template>
+	<PkpBaseCommentsVersions>
+		<PkpBaseCommentsVersion class="w-96">
+			<PkpBaseCommentsVersionHeader>
+				<PkpBaseCommentsVersionHeaderTrigger
+					class="group flex w-full justify-between"
+				>
+					<PkpBaseCommentsVersionHeaderLabel></PkpBaseCommentsVersionHeaderLabel>
+					<PkpBaseCommentsVersionHeaderChevron
+						class="inline-block transition-transform duration-300 group-data-[state=open]:rotate-180"
+					></PkpBaseCommentsVersionHeaderChevron>
+				</PkpBaseCommentsVersionHeaderTrigger>
+			</PkpBaseCommentsVersionHeader>
+			<PkpBaseCommentsVersionContent>
+				<PkpBaseCommentsLogInto></PkpBaseCommentsLogInto>
+				<PkpBaseCommentsNew>
+					<PkpBaseCommentsNewInput></PkpBaseCommentsNewInput>
+					<PkpBaseCommentsNewSubmit class="my-2"></PkpBaseCommentsNewSubmit>
+				</PkpBaseCommentsNew>
+				<PkpBaseCommentsMessages class="flex flex-col gap-y-2">
+					<template #item="item">
+						<PkpBaseCommentsMessage
+							v-bind="item"
+							class="rounded bg-default p-4"
+						>
+							<div class="flex justify-between">
+								<PkpBaseCommentsMessageDate
+									class="text-sm-light"
+								></PkpBaseCommentsMessageDate>
+								<PkpBaseCommentsMessageActions></PkpBaseCommentsMessageActions>
+							</div>
+							<PkpBaseCommentsMessageBody
+								class="mt-2 block text-lg-normal"
+							></PkpBaseCommentsMessageBody>
+
+							<PkpBaseCommentsMessageAuthor class="mt-2 flex flex-col">
+								<PkpBaseCommentsMessageAuthorName
+									class="text-base-bold"
+								></PkpBaseCommentsMessageAuthorName>
+								<PkpBaseCommentsMessageAuthorOrcid
+									class="text-xs-normal"
+								></PkpBaseCommentsMessageAuthorOrcid>
+								<PkpBaseCommentsMessageAuthorAffiliation
+									class="text-sm-light"
+								></PkpBaseCommentsMessageAuthorAffiliation>
+							</PkpBaseCommentsMessageAuthor>
+						</PkpBaseCommentsMessage>
+					</template>
+				</PkpBaseCommentsMessages>
+			</PkpBaseCommentsVersionContent>
+		</PkpBaseCommentsVersion>
+	</PkpBaseCommentsVersions>
+</template>
+
+<script setup>
+import PkpBaseCommentsVersions from './PkpBaseCommentsVersions.vue';
+import PkpBaseCommentsVersion from './PkpBaseCommentsVersion.vue';
+import PkpBaseCommentsNew from './PkpBaseCommentsNew.vue';
+import PkpBaseCommentsNewInput from './PkpBaseCommentsNewInput.vue';
+import PkpBaseCommentsNewSubmit from './PkpBaseCommentsNewSubmit.vue';
+import PkpBaseCommentsVersionHeader from './PkpBaseCommentsVersionHeader.vue';
+import PkpBaseCommentsVersionHeaderTrigger from './PkpBaseCommentsVersionHeaderTrigger.vue';
+import PkpBaseCommentsVersionHeaderLabel from './PkpBaseCommentsVersionHeaderLabel.vue';
+import PkpBaseCommentsVersionHeaderChevron from './PkpBaseCommentsVersionHeaderChevron.vue';
+
+import PkpBaseCommentsVersionContent from './PkpBaseCommentsVersionContent.vue';
+
+import PkpBaseCommentsLogInto from './PkpBaseCommentsLogInto.vue';
+import PkpBaseCommentsMessages from './PkpBaseCommentsMessages.vue';
+import PkpBaseCommentsMessage from './PkpBaseCommentsMessage.vue';
+import PkpBaseCommentsMessageDate from './PkpBaseCommentsMessageDate.vue';
+import PkpBaseCommentsMessageActions from './PkpBaseCommentsMessageActions.vue';
+import PkpBaseCommentsMessageBody from './PkpBaseCommentsMessageBody.vue';
+import PkpBaseCommentsMessageAuthor from './PkpBaseCommentsMessageAuthor.vue';
+import PkpBaseCommentsMessageAuthorName from './PkpBaseCommentsMessageAuthorName.vue';
+import PkpBaseCommentsMessageAuthorOrcid from './PkpBaseCommentsMessageAuthorOrcid.vue';
+import PkpBaseCommentsMessageAuthorAffiliation from './PkpBaseCommentsMessageAuthorAffiliation.vue';
+</script>

src/frontend/Comments/usePkpCommentsStore.js

@@ -0,0 +1,20 @@
+import {defineStore} from 'pinia';
+import {ref} from 'vue';
+export const usePkpCommentsStore = defineStore('comments', () => {
+	const messages = ref([
+		{
+			body: 'blabla',
+			author: {name: 'name author', affiliation: 'affiliation', orcid: null},
+		},
+		{
+			body: 'blabla 2',
+			author: {
+				name: 'name author 2',
+				affiliation: 'affiliation 2',
+				orcid: null,
+			},
+		},
+	]);
+
+	return {messages};
+});

src/frontend/components/PkpButton/BaseButton.vue

@@ -0,0 +1,14 @@
+<template>
+	<button v-bind="$attrs" :data-type="isSecondary ? 'secondary' : 'primary'">
+		<slot />
+	</button>
+</template>
+
+<script setup>
+defineProps({
+	isSecondary: {
+		type: Boolean,
+		default: false,
+	},
+});
+</script>