[#812,package][xl]: initial versioning of the package

packages/components-old/src/components/search/Form.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types';
+
+/**
+ * Search component form that can be customized with change and submit handlers
+ * @param {object} props
+ * {
+ *  handleChange: A form input change event handler. This function is executed when the
+ *                search input or order by input changes.
+ *  handleSubmit: A form submit event handler. This function is executed when the
+ *                search form is submitted.
+ * } 
+ * @returns 
+ */
+const Form = ({ handleSubmit }) => {
+  const [searchQuery, setSearchQuery] = useState("")
+  return (
+    <form onSubmit={(e) => e.preventDefault()} className="items-center">
+      <div className="flex">
+        <input
+          type="text"
+          name="search#q"
+          value={searchQuery}
+          onChange={(e) => { setSearchQuery(e.target.value) }}
+          placeholder="Search"
+          aria-label="Search"
+          className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
+        />
+        <button
+          onClick={() => handleSubmit(searchQuery)}
+          type="button"
+          className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+        >
+          Search
+        </button>
+      </div>
+    </form>
+  );
+};
+
+Form.propTypes = {
+  handleSubmit: PropTypes.func.isRequired
+}
+
+export default Form;

packages/components-old/src/components/search/Item.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import Link from 'next/link';
+import PropTypes from 'prop-types';
+
+/**
+ * Single item from a search result showing info about a dataset.
+ * @param {object} props data package with the following format:
+ * {
+ *  organization: {name: <some name>, title: <some title> },
+ *  title: <Data package title>
+ *  name:  <Data package name>
+ *  description: <description of data package>
+ *  notes: <Notes associated with the data package>
+ * }
+ * @returns React Component
+ */
+const Item = ({ dataset }) => {
+  return (
+    <div className="mb-6">
+      <h3 className="text-xl font-semibold">
+        <Link
+          href={`/@${
+            dataset.organization
+              ? dataset.organization.name
+              : 'dataset'
+          }/${dataset.name}`}
+        >
+          <a className="text-primary">
+            {dataset.title || dataset.name}
+          </a>
+        </Link>
+      </h3>
+      <Link
+        href={`/@${
+          dataset.organization ? dataset.organization.name : 'dataset'
+        }`}
+      >
+        <a className="text-gray-500 block mt-1">
+          {dataset.organization
+            ? dataset.organization.title
+            : 'dataset'}
+        </a>
+      </Link>
+      <div className="leading-relaxed mt-2">
+        {dataset.description || dataset.notes}
+      </div>
+    </div>
+  );
+};
+
+Item.propTypes = {
+  dataset: PropTypes.object.isRequired
+}
+
+export default Item;

packages/components-old/src/components/search/Total.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Displays the total search result
+ * @param {object} props 
+ * {
+ *  count: The total number of search results
+ * } 
+ * @returns React Component
+ */
+const Total = ({ count }) => {
+
+  return (
+    <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
+      {count} results found
+    </h1>
+  );
+};
+
+Total.propTypes = {
+  count: PropTypes.number.isRequired
+}
+
+export default Total;