Add importer

Author: janslifka

package.json

@@ -13,7 +13,7 @@
     "dev": "concurrently -k \"npm run build:watch\" \"npm run serve:dist\"",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json}\" && eslint src --fix",
     "lint": "eslint src",
-    "serve:dist": "vite preview --strictPort --port 4173",
+    "serve:dist": "vite preview --strictPort --port 4202",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {

src/components/.gitkeep

@@ -0,0 +1,81 @@
+import { ChangeEvent, useState } from 'react'
+import { ProjectImporterComponentProps } from '@ds-wizard/plugin-sdk/elements'
+import { ProjectImporter } from '@ds-wizard/plugin-sdk/project-importer'
+import { SettingsData } from '../data/settings-data'
+import { importMaDMP } from '../importer/madmp-importer'
+
+export default function ImporterComponent({
+    onImport,
+}: ProjectImporterComponentProps<SettingsData, null>) {
+    const [error, setError] = useState<string | null>(null)
+
+    const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0]
+        if (!file) return
+
+        const reader = new FileReader()
+        reader.onload = (e) => {
+            try {
+                const content = e.target?.result
+                if (typeof content !== 'string') {
+                    throw new Error('File content is not a string')
+                }
+
+                const json = JSON.parse(content)
+                const importer = new ProjectImporter()
+
+                importMaDMP(importer, json)
+
+                setError(null)
+                onImport(importer.getEvents())
+            } catch {
+                setError(
+                    'Error reading or parsing file. Make sure you selected a valid JSON document.',
+                )
+            }
+        }
+        reader.readAsText(file)
+    }
+
+    return (
+        <div className="col col-detail mx-auto">
+            <div id="importer">
+                <div className="mb-3">
+                    <h2>maDMP Importer</h2>
+                </div>
+                <div className="mb-3">
+                    {error && (
+                        <div id="error">
+                            <div className="alert alert-danger" role="alert" id="error-alert">
+                                {error}
+                            </div>
+                        </div>
+                    )}
+                    <div className="form-group">
+                        <label htmlFor="file-input" className="form-label">
+                            Select maDMP (JSON)
+                        </label>
+                        <input
+                            type="file"
+                            id="file-input"
+                            accept="application/json"
+                            className={`form-control${error ? ' is-invalid' : ''}`}
+                            onChange={handleFileChange}
+                        />
+                        <p className="mt-2 text-muted">
+                            Choose a machine-actionable Data Management Plan in JSON format that
+                            conforms to the{' '}
+                            <a
+                                href="https://github.com/RDA-DMP-Common/RDA-DMP-Common-Standard"
+                                target="_blank"
+                            >
+                                RDA DMP Common Standard
+                            </a>
+                            .
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/ImporterComponent.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { SettingsData } from '@/data/settings-data'
+import { SettingsComponentProps } from '@ds-wizard/plugin-sdk/elements'
+
+export default function SettingsComponent({
+    settings,
+    onSettingsChange,
+}: SettingsComponentProps<SettingsData>) {
+    const rows = Math.min(12, Math.max(4, settings.extraKmPatterns.split('\n').length))
+
+    return (
+        <div>
+            <div className="form-group">
+                <label>Additional KM Patterns:</label>
+                <textarea
+                    className="form-control"
+                    rows={rows}
+                    value={settings.extraKmPatterns}
+                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                        onSettingsChange({ ...settings, extraKmPatterns: e.target.value })
+                    }
+                />
+                <p className="text-muted mt-2">
+                    maDMP Importer works with Common DSW Knowledge Model (
+                    <code>dsw:root:^2.4.0</code>) and Life Sciences DSW Knowledge Model{' '}
+                    <code>dsw:lifesciencies:^2.4.0</code>. If you have knowledge models based on
+                    these, you can add them here so that they can work with maDMP Importer as well.
+                    Add one pattern per line.
+                </p>
+            </div>
+        </div>
+    )
+}

src/components/SettingsComponent.tsx

@@ -3,10 +3,14 @@ import { makeJsonCodec } from '@ds-wizard/plugin-sdk/utils'
 
 // Define the plugin settings data here or delete if not needed
 
-export const SettingsDataSchema = z.object({})
+export const SettingsDataSchema = z.object({
+    extraKmPatterns: z.string(),
+})
 
 export type SettingsData = z.infer<typeof SettingsDataSchema>
 
-export const DefaultSettingsData: SettingsData = {}
+export const DefaultSettingsData: SettingsData = {
+    extraKmPatterns: '',
+}
 
 export const SettingsDataCodec = makeJsonCodec(SettingsDataSchema, DefaultSettingsData)