From e8e16f4d66c1daab22d110cc264a2f99c55963ce Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Tue, 17 Sep 2024 14:46:56 -0500
Subject: [PATCH] Initial commit: Rename component, set basic structure

No actual functionality implemented yet, just renames the component from "StringArrayEditor" to "TagInput", for brevity at the possible cost of clarity.  For now, the original StringArrayEditor is kept and named "TagInput-class.jsx" so that I can reference it as I work on the functional component.
---
 .../editor/metadataEditor/metadataEditor.jsx  |  6 +++---
 .../tagInput-class.jsx}                       |  6 +++---
 client/homebrew/editor/tagInput/tagInput.jsx  | 21 +++++++++++++++++++
 3 files changed, 27 insertions(+), 6 deletions(-)
 rename client/homebrew/editor/{stringArrayEditor/stringArrayEditor.jsx => tagInput/tagInput-class.jsx} (97%)
 create mode 100644 client/homebrew/editor/tagInput/tagInput.jsx

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 0f1f6ad54..6ee607eab 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -6,7 +6,7 @@ const _     = require('lodash');
 const request = require('../../utils/request-middleware.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
-const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
+const TagInput = require('../tagInput/tagInput.jsx');
 
 
 const Themes = require('themes/themes.json');
@@ -344,7 +344,7 @@ const MetadataEditor = createClass({
 				{this.renderThumbnail()}
 			</div>
 
-			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
+			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
 				values={this.props.metadata.tags}
 				onChange={(e)=>this.handleFieldChange('tags', e)}/>
@@ -368,7 +368,7 @@ const MetadataEditor = createClass({
 
 			{this.renderAuthors()}
 
-			<StringArrayEditor label='invited authors' valuePatterns={[/.+/]}
+			<TagInput label='invited authors' valuePatterns={[/.+/]}
 				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
 				placeholder='invite author' unique={true}
 				values={this.props.metadata.invitedAuthors}
diff --git a/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx b/client/homebrew/editor/tagInput/tagInput-class.jsx
similarity index 97%
rename from client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
rename to client/homebrew/editor/tagInput/tagInput-class.jsx
index 8f06ae561..b7acf31d0 100644
--- a/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
+++ b/client/homebrew/editor/tagInput/tagInput-class.jsx
@@ -2,8 +2,8 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 
-const StringArrayEditor = createClass({
-	displayName     : 'StringArrayEditor',
+const TagInput = createClass({
+	displayName     : 'TagInput',
 	getDefaultProps : function() {
 		return {
 			label         : '',
@@ -146,4 +146,4 @@ const StringArrayEditor = createClass({
 	}
 });
 
-module.exports = StringArrayEditor;
\ No newline at end of file
+module.exports = TagInput;
\ No newline at end of file
diff --git a/client/homebrew/editor/tagInput/tagInput.jsx b/client/homebrew/editor/tagInput/tagInput.jsx
new file mode 100644
index 000000000..289432175
--- /dev/null
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -0,0 +1,21 @@
+const React = require('react');
+const { useState, useRef, useEffect } = React;
+const _     = require('lodash');
+
+const TagInput = ({unique, ...props})=>{
+
+	const [temporaryValue, setTemporaryValue] = useState('');
+
+	return (
+		<div className='field tag-input'>
+			<label>{props.label}
+				<input type='text'
+					className={`value`}
+					placeholder={props.placeholder}
+					value={temporaryValue} />
+			</label>
+		</div>
+	)
+}
+
+module.exports = TagInput;
\ No newline at end of file