feat: advanced search map component

.prettierrc

@@ -1,5 +1,6 @@
 {
   "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson", "prettier-plugin-tailwindcss"],
   "printWidth": 120,
-  "singleQuote": true
+  "singleQuote": true,
+  "tailwindFunctions": ["clsx", "tv", "twMerge", "twJoin"]
 }

.storybook/main.ts

@@ -2,16 +2,24 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
   addons: [
     '@storybook/addon-onboarding',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
   ],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 export default config;

.storybook/preview.ts

@@ -10,6 +10,8 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ['autodocs'],
 };
 
 export default preview;

.vscode/settings.json

@@ -27,6 +27,7 @@
     "plss",
     "PROJECTCATEGORYFUNDING",
     "sgid",
+    "shapefile",
     "sitla",
     "srid",
     "tagname",

package.json

@@ -56,14 +56,14 @@
     "@storybook/addon-interactions": "^8.4.6",
     "@storybook/addon-links": "^8.4.6",
     "@storybook/addon-onboarding": "^8.4.6",
-    "@storybook/blocks": "^8.4.5",
+    "@storybook/blocks": "^8.4.6",
     "@storybook/react": "^8.4.6",
     "@storybook/react-vite": "^8.4.6",
-    "@storybook/test": "^8.4.5",
+    "@storybook/test": "^8.4.6",
     "@types/eslint__js": "^8.42.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.6",
     "autoprefixer": "^10.4.20",
@@ -75,19 +75,19 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc-5c56b873-20241107",
     "eslint-plugin-storybook": "^0.11.1",
     "globals": "^15.13.0",
-    "lucide-react": "^0.462.0",
+    "lucide-react": "^0.464.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.1",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-packagejson": "^2.5.6",
     "prettier-plugin-tailwindcss": "^0.6.9",
-    "storybook": "^8.4.5",
-    "tailwindcss": "^3.4.15",
+    "storybook": "^8.4.6",
+    "tailwindcss": "^3.4.16",
     "tailwindcss-react-aria-components": "^1.2.0",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.16.0",
+    "typescript-eslint": "^8.17.0",
     "vite": "^5.4.11",
     "vite-plugin-package-version": "^1.1.0",
-    "vitest": "^2.1.5"
+    "vitest": "^2.1.8"
   }
 }

search.html

@@ -0,0 +1,5 @@
+<div class="agrc-container">
+  <noscript> You need to enable JavaScript to run this app. </noscript>
+  <div id="root"></div>
+  <script type="module" src="/src/mainSearch.tsx"></script>
+</div>

src/App.tsx

@@ -100,7 +100,7 @@ export default function App() {
         <div className="relative flex flex-1 flex-col rounded border border-b-0 border-zinc-200 dark:border-0 dark:border-zinc-700">
           <div className="relative flex-1">
             <ErrorBoundary FallbackComponent={ErrorFallback}>
-              <MapContainer />
+              <MapContainer configuration="edit" />
             </ErrorBoundary>
             <Drawer
               type="tray"

src/AppSearch.tsx

@@ -0,0 +1,26 @@
+import esriConfig from '@arcgis/core/config.js';
+
+import { ErrorBoundary } from 'react-error-boundary';
+import { AreaOfInterest, MapContainer } from './components';
+
+const ErrorFallback = ({ error }: { error: Error }) => {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+    </div>
+  );
+};
+
+esriConfig.assetsPath = import.meta.env.MODE === 'production' ? '/wri/js/ugrc/assets' : '/js/ugrc/assets';
+
+export default function App() {
+  return (
+    <section className="dark:bg-zinc-800 dark:text-zinc-200">
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <AreaOfInterest />
+        <MapContainer configuration="search" />
+      </ErrorBoundary>
+    </section>
+  );
+}

src/components/AreaOfInterest.tsx

@@ -0,0 +1,23 @@
+import { Button, ToggleButton } from '@ugrc/utah-design-system';
+import { useRef } from 'react';
+
+export const AreaOfInterest = () => {
+  const areaOfInterestNode = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="px-2">
+      <h2>Area of Interest</h2>
+      <div className="flex w-fit gap-2 py-3">
+        <span>
+          <ToggleButton onChange={(value) => (areaOfInterestNode.current!.value = value.toString())}>
+            Draw a polygon
+          </ToggleButton>
+        </span>
+        <span>
+          <Button isDisabled>Upload a shapefile</Button>
+        </span>
+      </div>
+      <input ref={areaOfInterestNode} id="aoiGeometry" type="text" className="hidden" />
+    </div>
+  );
+};

src/components/MapContainer.tsx

@@ -42,7 +42,7 @@ type SelectorOptions = {
   position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 
-export const MapContainer = () => {
+export const MapContainer = ({ configuration }: { configuration: 'search' | 'edit' }) => {
   const mapNode = useRef<HTMLDivElement | null>(null);
   const mapComponent = useRef<EsriMap | null>(null);
   const mapView = useRef<MapView | null>(null);
@@ -101,7 +101,7 @@ export const MapContainer = () => {
     if (isReady) {
       // layers are stacked on top of each other in a reverse order from how they are listed
       // e.g. land ownership is on the very bottom and centroids are on the very top
-      addLayers([
+      const referenceLayers = [
         landOwnership,
         plss,
         streams,
@@ -114,14 +114,18 @@ export const MapContainer = () => {
         forestService,
         sageGrouse,
         stewardship,
-        polygons,
-        lines,
-        points,
-        centroids,
-      ]);
+      ];
+      const operationalLayers = [polygons, lines, points, centroids];
+
+      if (configuration === 'search') {
+        operationalLayers.forEach((x) => (x.visible = false));
+        addLayers(operationalLayers);
+      } else {
+        addLayers(referenceLayers.concat(operationalLayers));
+      }
     }
     setMapView(mapView.current!);
-  }, [isReady, mapView, addLayers, setMapView]);
+  }, [isReady, mapView, addLayers, setMapView, configuration]);
 
   return (
     <>

src/components/NavigationHistory.tsx

@@ -3,7 +3,7 @@ import { Button } from '@ugrc/utah-design-system';
 import { useViewUiPosition } from '@ugrc/utilities/hooks';
 import clsx from 'clsx';
 import { WritableDraft } from 'immer';
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { Redo2Icon, Undo2Icon } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 import { useImmerReducer } from 'use-immer';
 
@@ -92,7 +92,7 @@ export const NavigationHistory = ({
   const backwardIsDisabled = state.index === 0;
   const forwardIsDisabled = state.index >= state.history.length - 1;
   const iconClasses =
-    'size-5 stroke-[1.5] transition-colors duration-150 ease-in-out will-change-transform group-enabled/button:[#6e6e6e] group-enabled/button:group-hover/button:text-[#151515] group-disabled/button:[#cfcfcf] group-disabled/button:opacity-50';
+    'dark:text-zinc-500 size-5 stroke-[1.5] transition-colors duration-150 ease-in-out will-change-transform group-enabled/button:[#6e6e6e] group-enabled/button:group-hover/button:text-[#151515] group-disabled/button:[#cfcfcf] group-disabled/button:opacity-50';
   const buttonContainerClasses =
     'group/icon flex size-[32px] items-center justify-center bg-white shadow-[0_1px_2px_#0000004d]';
   const buttonClasses =
@@ -108,7 +108,7 @@ export const NavigationHistory = ({
           onPress={() => dispatch({ type: 'back' })}
           isDisabled={backwardIsDisabled}
         >
-          <ChevronLeftIcon className={iconClasses} aria-hidden />
+          <Undo2Icon className={iconClasses} aria-hidden />
           <span className="sr-only">Go to previous map extent</span>
         </Button>
       </div>
@@ -120,7 +120,7 @@ export const NavigationHistory = ({
           onPress={() => dispatch({ type: 'forward' })}
           isDisabled={forwardIsDisabled}
         >
-          <ChevronRightIcon className={iconClasses} aria-hidden />
+          <Redo2Icon className={iconClasses} aria-hidden />
           <span className="sr-only">Go to next map extent</span>
         </Button>
       </div>

src/components/ProjectStatus.tsx

@@ -9,13 +9,12 @@ import { areSetsEqual } from './utils';
 const tagStyles = tv({
   variants: {
     status: {
-      draft: 'data-[selected]:bg-zinc-500 data-[selected]:hover:border-zinc-700 data-[selected]:border-gray-200',
-      proposed: 'data-[selected]:bg-zinc-800 data-[selected]:hover:border-zinc-900 data-[selected]:border-gray-200',
-      current: 'data-[selected]:bg-sky-600 data-[selected]:hover:border-sky-800 data-[selected]:border-gray-200',
-      'pending completed':
-        'data-[selected]:bg-yellow-500 data-[selected]:hover:border-yellow-600 data-[selected]:border-gray-200',
-      completed: 'data-[selected]:bg-green-700 data-[selected]:hover:border-green-900 data-[selected]:border-gray-200',
-      cancelled: 'data-[selected]:bg-red-700 data-[selected]:hover:border-red-900 data-[selected]:border-gray-200',
+      draft: 'selected:border-gray-200 selected:bg-zinc-500 selected:hover:border-zinc-700',
+      proposed: 'selected:border-gray-200 selected:bg-zinc-800 selected:hover:border-zinc-900',
+      current: 'selected:border-gray-200 selected:bg-sky-600 selected:hover:border-sky-800',
+      'pending completed': 'selected:border-gray-200 selected:bg-yellow-500 selected:hover:border-yellow-600',
+      completed: 'selected:border-gray-200 selected:bg-green-700 selected:hover:border-green-900',
+      cancelled: 'selected:border-gray-200 selected:bg-red-700 selected:hover:border-red-900',
     },
   },
 });

src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './AreaOfInterest.tsx';
 export * from './CentroidToggle.tsx';
 export * from './FeatureData.tsx';
 export * from './Loaders.tsx';

src/mainSearch.tsx

@@ -0,0 +1,14 @@
+import '@arcgis/core/assets/esri/themes/light/main.css';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './AppSearch';
+import { MapProvider } from './components/contexts';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <MapProvider>
+      <App />
+    </MapProvider>
+  </React.StrictMode>,
+);

tailwind.config.js

@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
+import rac from 'tailwindcss-react-aria-components';
+
 export default {
-  content: ['./node_modules/@ugrc/**/*.{tsx,jsx,js}', './index.html', './src/**/*.{tsx,jsx,js}'],
+  content: ['./node_modules/@ugrc/**/*.{tsx,jsx,js}', './index.html', './search.html', './src/**/*.{tsx,jsx,js}'],
   theme: {
     extend: {
       colors: {
@@ -63,5 +65,5 @@ export default {
       },
     },
   },
-  plugins: [import('tailwindcss-react-aria-components')],
+  plugins: [rac],
 };

vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => {
         input: {
           main: resolve(__dirname, 'map.html'),
           dev: resolve(__dirname, 'index.html'),
+          search: resolve(__dirname, 'search.html'),
         },
       },
     },