get preact files into root

src/components/AddLibrary.jsx

@@ -0,0 +1,145 @@
+import { h, Component } from 'preact';
+import { jsLibs, cssLibs } from '../libraryList';
+import { trackEvent } from '../analytics';
+import { LibraryAutoSuggest } from './LibraryAutoSuggest';
+
+export default class AddLibrary extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			css: props.css || '',
+			js: props.js || ''
+		};
+	}
+	onSelectChange(e) {
+		const target = e.target;
+		if (!target.value) {
+			return;
+		}
+		const type = target.selectedOptions[0].dataset.type;
+		if (type === 'js') {
+			this.setState({
+				js: `${this.state.js}\n${target.value}`
+			});
+		} else {
+			this.setState({
+				css: `${this.state.css}\n${target.value}`
+			});
+		}
+
+		trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label);
+		this.props.onChange({ js: this.state.js, css: this.state.css });
+		// Reset the select to the default value
+		target.value = '';
+	}
+	textareaBlurHandler(e, textarea) {
+		const target = e ? e.target : textarea;
+		const type = target.dataset.lang;
+		if (type === 'js') {
+			this.setState({
+				js: target.value || ''
+			});
+		} else {
+			this.setState({
+				css: target.value || ''
+			});
+		}
+
+		// trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label);
+		this.props.onChange({ js: this.state.js, css: this.state.css });
+	}
+	suggestionSelectHandler(value) {
+		const textarea = value.match(/\.js$/)
+			? window.externalJsTextarea
+			: window.externalCssTextarea;
+		textarea.value = `${textarea.value}\n${value}`;
+		window.externalLibrarySearchInput.value = '';
+		this.textareaBlurHandler(null, textarea);
+	}
+	render() {
+		return (
+			<div>
+				<h1>Add Library</h1>
+
+				<div class="flex">
+					<svg style="width: 30px; height: 30px;fill:#999">
+						<use xlinkHref="#search" />
+					</svg>
+					<LibraryAutoSuggest
+						fullWidth
+						onSelect={this.suggestionSelectHandler.bind(this)}
+					>
+						<input
+							type="text"
+							id="externalLibrarySearchInput"
+							class="full-width"
+							placeholder="Type here to search libraries"
+						/>
+					</LibraryAutoSuggest>
+				</div>
+				<div class="tar opacity--70">
+					<small>Powered by cdnjs</small>
+				</div>
+				<div style="margin:20px 0;">
+					Choose from popular libraries:
+					<select
+						name=""
+						id="js-add-library-select"
+						onChange={this.onSelectChange.bind(this)}
+					>
+						<option value="">-------</option>
+						<optgroup label="JavaScript Libraries">
+							{jsLibs.map(lib => (
+								<option data-type={lib.type} value={lib.url}>
+									{lib.label}
+								</option>
+							))}
+						</optgroup>
+						<optgroup label="CSS Libraries">
+							{cssLibs.map(lib => (
+								<option data-type={lib.type} value={lib.url}>
+									{lib.label}
+								</option>
+							))}
+						</optgroup>
+					</select>
+				</div>
+
+				<h3 class="mb-0">JS</h3>
+				<p class="mt-0 help-text">Put each library in new line</p>
+
+				<p style="font-size: 0.8em;" class="show-when-extension opacity--70">
+					Note: You can load external scripts from following domains: localhost,
+					https://ajax.googleapis.com, https://code.jquery.com,
+					https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com,
+					https://cdn77.com, https://maxcdn.bootstrapcdn.com,
+					https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in
+				</p>
+
+				<textarea
+					onBlur={this.textareaBlurHandler.bind(this)}
+					data-lang="js"
+					class="full-width"
+					id="externalJsTextarea"
+					cols="30"
+					rows="5"
+					placeholder="Put each library in new line"
+					value={this.state.js}
+				/>
+
+				<h3 class="mb-0">CSS</h3>
+				<p class="mt-0 help-text">Put each library in new line</p>
+				<textarea
+					onBlur={this.textareaBlurHandler.bind(this)}
+					data-lang="css"
+					class="full-width"
+					id="externalCssTextarea"
+					cols="30"
+					rows="5"
+					placeholder="Put each library in new line"
+					value={this.state.css}
+				/>
+			</div>
+		);
+	}
+}