fix(editor): added option for consuming application to add samples in their code base, Readme pending

Author: akaash2512

src/main/content/META-INF/vault/filter.xml

@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <workspaceFilter version="1.0">
 	<filter root="/apps/cq/core/content/nav/tools/jcr-hopper" />
-	<filter root="/apps/jcr-hopper" />
+	<filter root="/apps/jcr-hopper">
+		<exclude pattern="/apps/jcr-hopper/script-builder/samples(/.*)?" />
+	</filter>
 	<filter root="/etc/jcr-hopper" />
 </workspaceFilter>

src/main/content/jcr_root/apps/jcr-hopper/script-builder/samples/.content.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<jcr:root
+	xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+	xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
+	xmlns:cq="http://www.day.com/jcr/cq/1.0"
+	xmlns:jcr="http://www.jcp.org/jcr/1.0"
+	xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+	jcr:mixinTypes="granite:PublicArea"
+	jcr:primaryType="nt:folder"
+/>

src/main/frontend/hooks/useSamples.ts

@@ -0,0 +1,36 @@
+import { Sample, SAMPLES } from '../model/samples';
+import { useEffect, useState } from 'react';
+import { Script } from '../model/Script';
+
+export const useSamples = (): [Sample[], boolean] => {
+	const [samples, setSamples] = useState<Sample[]>([]);
+	const [loading, setLoading] = useState(false);
+
+	useEffect(() => {
+		const loadSamples = async () => {
+			setLoading(true);
+			try {
+				const response = await fetch('/apps/jcr-hopper/script-builder/samples/additional-samples.json');
+				if (!response.ok) throw new Error(`Failed to fetch samples: ${response.statusText}`);
+
+				const fetchedData = await response.json();
+				if (Array.isArray(fetchedData)) {
+					const additionalSamples = fetchedData.map(item => ({
+						label: item.label,
+						config: item.config as Script,
+					}));
+					setSamples([...SAMPLES, ...additionalSamples]);
+				} else {
+					console.error('Fetched data is not an array:', fetchedData);
+				}
+			} catch (error) {
+				console.error('Error fetching additional samples:', error);
+			} finally {
+				setLoading(false);
+			}
+		};
+		loadSamples();
+	}, []);
+
+	return [samples, loading];
+};

src/main/frontend/model/samples/index.ts

@@ -18,7 +18,7 @@ import renameNode from './rename-node.json';
 import { Hop, HOP_DEFINITIONS } from '../hops';
 import { Script } from '../Script';
 
-type Sample = { label: string; config: Script };
+export type Sample = { label: string; config: Script };
 
 function suggestionFromDefinition(key: keyof typeof HOP_DEFINITIONS): Sample {
 	return {

src/main/frontend/sections/Toolbar.tsx

@@ -6,7 +6,7 @@ import { useCopyToClipboard } from '@uidotdev/usehooks';
 import { ScriptContext } from '../App';
 import { INITIAL_SCRIPT } from '../model/Script';
 import { Picker } from '../widgets/Picker';
-import { SAMPLES } from '../model/samples';
+import { useSamples } from '../hooks/useSamples';
 
 const Elm = styled('div')`
 	display: flex;
@@ -17,6 +17,31 @@ export const Toolbar: FC = () => {
 	const script = scriptContext.draft;
 
 	const [, copy] = useCopyToClipboard();
+	const [samples] = useSamples();
+
+	const handlePaste = async () => {
+		try {
+			const json = await navigator.clipboard.readText();
+			const state = JSON.parse(json);
+			if (typeof state !== 'object') throw new Error(`Pasted JSON is not an object: ${json}`);
+
+			if (Array.isArray(state)) {
+				script.hops.push(...state);
+				scriptContext.commit();
+			} else {
+				scriptContext.replace({ ...INITIAL_SCRIPT, ...state });
+			}
+		} catch (e) {
+			console.error('Could not paste script', e);
+		}
+	};
+
+	const handleAddHop = (value: string) => {
+		const sampleScript = samples[Number(value)]!.config;
+		script.hops.push(...sampleScript.hops);
+		script.parameters.push(...sampleScript.parameters);
+		scriptContext.commit();
+	};
 
 	return (
 		<Elm className="toolbar">
@@ -29,43 +54,15 @@ export const Toolbar: FC = () => {
 			>
 				Copy
 			</button>
-			<button
-				is="coral-button"
-				icon="paste"
-				onClick={async () => {
-					try {
-						const json = await navigator.clipboard.readText();
-						const state = JSON.parse(json);
-						// Sanity check
-						if (typeof state !== 'object') {
-							throw new Error(`Pasted JSON is not an object: ${json}`);
-						}
-						if (Array.isArray(state)) {
-							// Assume steps were pasted in
-							script.hops.push(...state);
-							scriptContext.commit();
-						} else {
-							// Otherwise, it’s likely a complete script
-							scriptContext.replace({ ...INITIAL_SCRIPT, ...state });
-						}
-					} catch (e) {
-						console.error('Could not paste script', e);
-					}
-				}}
-			>
+			<button is="coral-button" icon="paste" onClick={handlePaste}>
 				Paste
 			</button>
 			<Picker
 				buttonLabel="Add"
 				title="Add Hop to Script"
 				buttonAttributes={{ icon: 'addChildPanel', is: 'coral-button' }}
-				picked={value => {
-					const sampleScript = SAMPLES[Number(value)]!.config;
-					script.hops.push(...sampleScript.hops);
-					script.parameters.push(...sampleScript.parameters);
-					scriptContext.commit();
-				}}
-				items={SAMPLES.map(({ label }, i) => [String(i), label])}
+				picked={handleAddHop}
+				items={samples.map(({ label }, i) => [String(i), label])}
 			/>
 			<span className="flex-spacer"></span>
 			<button is="coral-button" icon="undo" disabled={scriptContext.canUndo ? undefined : true} onClick={scriptContext.undo}>