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.

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}

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;
+module.exports = TagInput;

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;