From 743b952db29cf97c309b3a5c9a797d90882c3c2d Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Thu, 23 May 2024 14:16:53 +0300
Subject: [PATCH] pkp/pkp-lib#9840 Add mdx and stories for new component

---
 .../CodeHighlighter/CodeHighlighter.mdx       | 19 +++++
 .../CodeHighlighter.stories.js                | 37 ++++++++
 .../CodeHighlighter/CodeHighlighter.vue       | 84 +++++++++----------
 3 files changed, 97 insertions(+), 43 deletions(-)
 create mode 100644 src/components/CodeHighlighter/CodeHighlighter.mdx
 create mode 100644 src/components/CodeHighlighter/CodeHighlighter.stories.js

diff --git a/src/components/CodeHighlighter/CodeHighlighter.mdx b/src/components/CodeHighlighter/CodeHighlighter.mdx
new file mode 100644
index 000000000..133d61929
--- /dev/null
+++ b/src/components/CodeHighlighter/CodeHighlighter.mdx
@@ -0,0 +1,19 @@
+import {Stories, Meta} from '@storybook/blocks';
+
+import * as CodeHighlighterStories from './CodeHighlighter.stories.js';
+
+<Meta of={CodeHighlighterStories} />
+
+# CodeHighlighter
+
+## Usage
+
+Use this component to display a formatted segment of code
+
+## Supported Languages
+
+The supported languages include:
+
+- XML: `language="xml"`
+
+<Stories />
diff --git a/src/components/CodeHighlighter/CodeHighlighter.stories.js b/src/components/CodeHighlighter/CodeHighlighter.stories.js
new file mode 100644
index 000000000..290383506
--- /dev/null
+++ b/src/components/CodeHighlighter/CodeHighlighter.stories.js
@@ -0,0 +1,37 @@
+import CodeHighlighter from './CodeHighlighter.vue';
+
+export default {
+	title: 'Components/CodeHighlighter',
+	component: CodeHighlighter,
+	render: (args) => ({
+		components: {CodeHighlighter},
+		setup() {
+			return {args};
+		},
+		template: '<code-highlighter :code=args.code :language=args.language />',
+	}),
+};
+
+const sampleXML = `<?xml version="1.0" encoding="UTF-8"?>
+<article>
+<title>Open Access in Research</title>
+<author>
+    <name>Jane Doe</name>
+    <affiliation>University of Knowledge</affiliation>
+</author>
+<journal>
+    <name>Journal of Open Science</name>
+    <year>2023</year>
+</journal>
+<doi>10.1234/jos.2023.001</doi>
+<license type="CC-BY">https://creativecommons.org/licenses/by/4.0/</license>
+<abstract>
+    This paper explores the significance of open access in scientific research.
+</abstract>`;
+
+export const XML = {
+	args: {
+		code: sampleXML,
+		language: 'xml',
+	},
+};
diff --git a/src/components/CodeHighlighter/CodeHighlighter.vue b/src/components/CodeHighlighter/CodeHighlighter.vue
index db7c338d2..836a07e10 100644
--- a/src/components/CodeHighlighter/CodeHighlighter.vue
+++ b/src/components/CodeHighlighter/CodeHighlighter.vue
@@ -1,13 +1,9 @@
 <template>
-    <highlightjs
-        :language="language"
-        :code="code"
-    />
+	<highlightjs :language="language" :code="code" />
 </template>
 
 <script>
-// import hljs from 'highlight.js/lib/core';
-import hljs from 'highlight.js/lib/common';
+import hljs from 'highlight.js/lib/core';
 import hljsVuePlugin from '@highlightjs/vue-plugin';
 
 // Importing the language modules
@@ -16,51 +12,53 @@ import xml from 'highlight.js/lib/languages/xml';
 
 // A map to store language modules
 const languageMap = {
-    xml,
-    // Add more language modules imported above
+	xml,
+	// Add more language modules imported above
 };
 
 const supportedLanguages = Object.keys(languageMap);
 
 export default {
-    components: {
-        highlightjs: hljsVuePlugin.component
-    },
-    props: {
-        code: {
-            type: String,
-            required: true
-        },
+	components: {
+		highlightjs: hljsVuePlugin.component,
+	},
+	props: {
+		code: {
+			type: String,
+			required: true,
+		},
 
-        language: {
-            type: String,
-            required: true,
-            validator(value) {
-                if (!supportedLanguages.includes(value)) {
-                    console.error(`Unsupported language: ${value}. Supported languages are: ${supportedLanguages.join(', ')}`);
-                    return false;
-                }
+		language: {
+			type: String,
+			required: true,
+			validator(value) {
+				if (!supportedLanguages.includes(value)) {
+					console.error(
+						`Unsupported language: ${value}. Supported languages are: ${supportedLanguages.join(', ')}`,
+					);
+					return false;
+				}
 
-                return true;
-            }
-        }
-    },
-    created() {
-        this.loadLanguageModule(this.language);
-    },
-    methods: {
-        loadLanguageModule(language) {
-            const languageModule = languageMap[language];
-            if (languageModule) {
-                hljs.registerLanguage(language, languageModule);
-            } else {
-                console.error(`Language module for ${language} is not available.`);
-            }
-        }
-    }
+				return true;
+			},
+		},
+	},
+	created() {
+		this.loadLanguageModule(this.language);
+	},
+	methods: {
+		loadLanguageModule(language) {
+			const languageModule = languageMap[language];
+			if (languageModule) {
+				hljs.registerLanguage(language, languageModule);
+			} else {
+				console.error(`Language module for ${language} is not available.`);
+			}
+		},
+	},
 };
 </script>
 
 <style>
-    @import 'highlight.js/styles/default.css';
-</style>
\ No newline at end of file
+@import 'highlight.js/styles/default.css';
+</style>