style: format

agrc · Jun 12, 2024 · e0a1d10 · e0a1d10
1 parent 7bb6f57
commit e0a1d10
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 52 deletions.
diff --git a/firebase.json b/firebase.json
@@ -1,11 +1,7 @@
 {
   "hosting": {
     "public": "dist",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "headers": [
       {
         "source": "*.html",

diff --git a/index.html b/index.html
@@ -1,22 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <title>Utah Parcels</title>
 
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <title>Utah Parcels</title>
+    <meta name="description" content="Navigate the map and tools to find information about Utah Parcels." />
+    <meta name="keywords" content="utah, map, map of utah, utah data, gis, utah gis, parcels, utah parcels" />
 
-  <meta name="description" content="Navigate the map and tools to find information about Utah Parcels." />
-  <meta name="keywords" content="utah, map, map of utah, utah data, gis, utah gis, parcels, utah parcels" />
-
-  <!-- CSS -->
-  <link rel="shortcut icon" href="https://gis.utah.gov/images/favicon.ico" />
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
+    <!-- CSS -->
+    <link rel="shortcut icon" href="https://gis.utah.gov/images/favicon.ico" />
+  </head>
 
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>
diff --git a/src/MapView.jsx b/src/MapView.jsx
@@ -73,7 +73,7 @@ const ParcelMap = ({ ga, setMapView, toggleSidebar, fullScreen, setActiveParcel,
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setActiveParcel, setGraphic]
+    [setActiveParcel, setGraphic],
   );
 
   const updateHash = useCallback(() => {
@@ -187,7 +187,7 @@ const ParcelMap = ({ ga, setMapView, toggleSidebar, fullScreen, setActiveParcel,
     <section
       className={clsx(
         { 'mx-2': fullScreen, 'mr-2': !fullScreen },
-        'relative mb-2 border border-gray-300 shadow cursor-pointer grid-area-map bg-gradient-to-br from-gray-50 to-gray-100'
+        'relative mb-2 border border-gray-300 shadow cursor-pointer grid-area-map bg-gradient-to-br from-gray-50 to-gray-100',
       )}
     >
       <div className="w-full h-full" ref={mapDiv}>

diff --git a/src/PageElements.jsx b/src/PageElements.jsx
@@ -1,4 +1,15 @@
-import { Dialog, Listbox, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  Label,
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import clsx from 'clsx';
 import escapeRegExp from 'lodash.escaperegexp';
 import { Fragment, useEffect, useState } from 'react';
@@ -67,7 +78,7 @@ export function Sidebar({ children, isOpen }) {
     <section
       className={clsx(
         { hidden: !isOpen },
-        'px-3 mb-2 ml-2 overflow-scroll border border-gray-300 shadow bg-gray-50 grid-area-sidebar'
+        'px-3 mb-2 ml-2 overflow-scroll border border-gray-300 shadow bg-gray-50 grid-area-sidebar',
       )}
     >
       <div className="relative">
@@ -124,7 +135,7 @@ export function TypeAhead({ label, layer, field, onSuccess }) {
         <input
           className={clsx(
             { 'rounded-t': items.length > 0 && isOpen, rounded: items.length > 0 && !isOpen },
-            'block w-full px-3 py-2 mt-1 text-base text-gray-700 bg-white border border-gray-400 focus:outline-none focus:border-indigo-500'
+            'block w-full px-3 py-2 mt-1 text-base text-gray-700 bg-white border border-gray-400 focus:outline-none focus:border-indigo-500',
           )}
           {...getInputProps()}
           autoComplete="never"
@@ -147,7 +158,7 @@ export function TypeAhead({ label, layer, field, onSuccess }) {
                   'text-indigo-900 bg-indigo-100': highlightedIndex === index,
                   'text-gray-900': highlightedIndex !== index,
                 },
-                'relative pl-4 cursor-default select-none'
+                'relative pl-4 cursor-default select-none',
               )}
               key={`${item}${index}`}
               {...getItemProps({ item, index })}
@@ -186,7 +197,7 @@ const TypeAheadHighlight = ({ text = '', highlight = '' }) => {
         </span>
       ) : (
         <span key={i}>{part}</span>
-      )
+      ),
     );
 };
 
@@ -213,21 +224,21 @@ export function ParcelTypeAhead({ county = '', onSuccess }) {
       <div className="text-lg font-semibold">Find a parcel</div>
       <Listbox value={selectedCounty} onChange={setSelectedCounty}>
         <div className="relative mt-1">
-          <Listbox.Label>County</Listbox.Label>
-          <Listbox.Button className="relative w-full px-3 py-2 mt-1 mb-2 text-base text-left text-gray-700 bg-white border border-gray-400 rounded h-11 focus:outline-none focus:border-indigo-500">
+          <Label>County</Label>
+          <ListboxButton className="relative w-full px-3 py-2 mt-1 mb-2 text-base text-left text-gray-700 bg-white border border-gray-400 rounded h-11 focus:outline-none focus:border-indigo-500">
             <span className="block truncate">{selectedCounty}</span>
             <span className="absolute top-[13px] right-0 flex items-center pr-2 pointer-events-none">
               <span className="w-5 h-5 text-gray-400 esri-icon-down" aria-hidden="true" />
             </span>
-          </Listbox.Button>
+          </ListboxButton>
           <Transition as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
-            <Listbox.Options className="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <ListboxOptions className="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none">
               {counties.map((county, i) => (
-                <Listbox.Option
+                <ListboxOption
                   className={({ active }) =>
                     clsx(
                       { 'text-indigo-900 bg-indigo-100': active, 'text-gray-900': !active },
-                      'relative pl-10 pr-4 cursor-default select-none'
+                      'relative pl-10 pr-4 cursor-default select-none',
                     )
                   }
                   key={i}
@@ -246,9 +257,9 @@ export function ParcelTypeAhead({ county = '', onSuccess }) {
                       ) : null}
                     </>
                   )}
-                </Listbox.Option>
+                </ListboxOption>
               ))}
-            </Listbox.Options>
+            </ListboxOptions>
           </Transition>
         </div>
       </Listbox>
@@ -270,9 +281,9 @@ export function Disclaimer() {
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <Dialog as="div" className="fixed inset-0 z-10 overflow-y-auto" onClose={close}>
+      <Dialog className="fixed inset-0 z-10 overflow-y-auto" onClose={close}>
         <div className="min-h-screen px-4 text-center">
-          <Transition.Child
+          <TransitionChild
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -281,14 +292,14 @@ export function Disclaimer() {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className="fixed inset-0 bg-gray-800/95" />
-          </Transition.Child>
+            <div className="fixed inset-0 bg-gray-800/95" />
+          </TransitionChild>
 
           {/* This element is to trick the browser into centering the modal contents. */}
           <span className="inline-block h-screen align-middle" aria-hidden="true">
             &#8203;
           </span>
-          <Transition.Child
+          <TransitionChild
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 scale-95"
@@ -297,10 +308,10 @@ export function Disclaimer() {
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <div className="inline-block w-full max-w-3xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
-              <Dialog.Title as="h3" className="text-3xl font-medium leading-6 text-center text-gray-900">
+            <DialogPanel className="inline-block w-full max-w-3xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
+              <DialogTitle as="h3" className="text-3xl font-medium leading-6 text-center text-gray-900">
                 Disclaimer
-              </Dialog.Title>
+              </DialogTitle>
               <div className="mt-2 space-y-4">
                 <p className="text-sm text-gray-500">
                   No warranties or certification, express or implied, are provided for the statewide tax parcel dataset
@@ -334,8 +345,8 @@ export function Disclaimer() {
                   I agree
                 </button>
               </div>
-            </div>
-          </Transition.Child>
+            </DialogPanel>
+          </TransitionChild>
         </div>
       </Dialog>
     </Transition>

diff --git a/src/hooks.jsx b/src/hooks.jsx
@@ -17,7 +17,7 @@ export function useGraphicManager(mapView) {
         mapView.graphics.remove(graphics);
       }
     },
-    [mapView]
+    [mapView],
   );
 
   useEffect(() => {
@@ -78,7 +78,7 @@ export function useHash() {
         window.location.hash = newHash;
       }
     },
-    [hash]
+    [hash],
   );
 
   return [hash, updateHash];

diff --git a/src/main.jsx b/src/main.jsx
@@ -8,5 +8,5 @@ import 'react-toastify/dist/ReactToastify.css';
 createRoot(document.getElementById('app')).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );
diff --git a/src/styles/basic.scss b/src/styles/basic.scss
@@ -1,7 +1,20 @@
 // _varibales.scss
 // font family
-$font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+$font-family:
+  ui-sans-serif,
+  system-ui,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  'Noto Sans',
+  sans-serif,
+  'Apple Color Emoji',
+  'Segoe UI Emoji',
+  'Segoe UI Symbol',
+  'Noto Color Emoji';
 
 // @arcgis/core font paths for vite to resolve
 $icomoon-font-path: './../../node_modules/@arcgis/core/assets/esri/themes/base/icons/fonts/';