feat: integrate utah design system package

.vscode/settings.json

@@ -4,6 +4,7 @@
     "isbot",
     "packagejson",
     "tailwindcss",
-    "typecheck"
+    "typecheck",
+    "utds"
   ]
 }

app/routes/_index.tsx

@@ -1,41 +1,37 @@
+import Graphic from '@arcgis/core/Graphic';
 import type { MetaFunction } from '@remix-run/node';
+import { useState } from 'react';
+import Sherlock, {
+  LocatorSuggestProvider,
+} from 'utah-design-system/src/Sherlock';
 
 export const meta: MetaFunction = () => {
   return [
-    { title: 'New Remix App' },
-    { name: 'description', content: 'Welcome to Remix!' },
+    { title: 'Utah Address Verification' },
+    {
+      name: 'description',
+      content: 'Verify addresses within the State of Utah',
+    },
   ];
 };
 
 export default function Index() {
+  const url: string =
+    'https://masquerade.ugrc.utah.gov/arcgis/rest/services/UtahLocator/GeocodeServer';
+  const [matches, setMatches] = useState<Graphic[] | null>(null);
+
   return (
-    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
-      <h1>Welcome to Remix</h1>
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/blog"
-            rel="noreferrer"
-          >
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/jokes"
-            rel="noreferrer"
-          >
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
-      </ul>
+    <div className="p-10 font-sans">
+      <Sherlock
+        label="Locator Suggestion"
+        maxResultsToDisplay={5}
+        onSherlockMatch={(matches: Graphic[]) => setMatches(matches)}
+        placeHolder="search by address..."
+        provider={new LocatorSuggestProvider(url, 3857)}
+      />
+      <pre className="max-h-64 overflow-auto">
+        {JSON.stringify(matches, null, '  ')}
+      </pre>
     </div>
   );
 }

app/tailwind.css

@@ -1,3 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import 'utah-design-system/src/index.css';