Feat/tup 700 core components node pkg use pkg fixes

react/jest.config.cjs

@@ -3,8 +3,11 @@
  * https://jestjs.io/docs/configuration
  */
 
-// https://stackoverflow.com/questions/73504569/syntaxerror-unexpected-token-export-from-react-leaflet-while-using-jest
-const esModules = ['@react-leaflet', 'react-leaflet'].join('|');
+const esModules = [
+  '@react-leaflet',
+  'react-leaflet',
+  '@tacc/core-components',
+].join('|');
 
 module.exports = {
   // All imported modules in your tests should be mocked automatically
@@ -85,6 +88,7 @@ module.exports = {
     '^utils(.*)$': '<rootDir>/src/utils$1',
     '^hooks(.*)$': '<rootDir>/src/hooks$1',
     '^react-leaflet$': require.resolve('react-leaflet'),
+    '^@hazmapper/(.*)$': '<rootDir>/src/$1',
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -178,10 +182,10 @@ module.exports = {
   // timers: "real",
 
   // A map from regular expressions to paths to transformers
-  transform: { '^.+\\.(js|jsx)?$': 'babel-jest' },
+  transform: { '^.+\\.(js|jsx|mjs)?$': 'babel-jest' },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
+  transformIgnorePatterns: [`/node_modules/(?!(${esModules}))`],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

react/package.json

@@ -37,7 +37,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
     "@reduxjs/toolkit": "^1.8.4",
-    "@tacc/core-components": "file:../../tacc-core-components-0.0.1.tgz",
+    "@tacc/core-components": "^0.0.3-beta.0",
     "@tacc/core-styles": "^2.24.1",
     "@testing-library/react": "^13.4.0",
     "@turf/turf": "^6.5.0",
@@ -62,7 +62,7 @@
     "react-leaflet": "^4.2.0",
     "react-query": "^3.39.3",
     "react-redux": "^8.0.2",
-    "react-resize-detector": "^9.1.1",
+    "react-resize-detector": "^7.1.2",
     "react-router-dom": "^6.3.0",
     "react-table": "^7.8.0",
     "reactstrap": "^9.2.1",

react/src/components/CreateMapModal/CreateMapModal.test.tsx

@@ -12,7 +12,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { act } from 'react-dom/test-utils';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
-jest.mock('../../hooks/user/useAuthenticatedUser', () => ({
+jest.mock('@hazmapper/hooks/user/useAuthenticatedUser', () => ({
   __esModule: true,
   default: () => ({
     data: { username: 'mockUser' },
@@ -21,7 +21,7 @@ jest.mock('../../hooks/user/useAuthenticatedUser', () => ({
   }),
 }));
 
-jest.mock('../../hooks/projects/useCreateProject', () => ({
+jest.mock('@hazmapper/hooks/projects/useCreateProject', () => ({
   __esModule: true,
   default: () => ({
     mutate: jest.fn((data, { onSuccess, onError }) => {

react/src/components/CreateMapModal/CreateMapModal.tsx

@@ -4,20 +4,15 @@ import { Button } from '@tacc/core-components';
 import styles from './CreateMapModal.module.css';
 import { Formik, Form, Field } from 'formik';
 import * as Yup from 'yup';
-import useCreateProject from '../../hooks/projects/useCreateProject';
-import useAuthenticatedUser from '../../hooks/user/useAuthenticatedUser';
+import useCreateProject from '@hazmapper/hooks/projects/useCreateProject';
+import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
 import { useNavigate } from 'react-router-dom';
-import { ProjectRequest } from '../../types';
+import { ProjectRequest } from '@hazmapper/types';
 import {
   FormikInput,
   FormikTextarea,
   FormikCheck,
 } from '@tacc/core-components';
-// import {
-//   FormikInput,
-//   FormikTextarea,
-//   FormikCheck,
-// } from '../../core-wrappers';
 
 type CreateMapModalProps = {
   isOpen: boolean;

react/src/components/Map/Map.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-leaflet';
 import { TiledMapLayer } from 'react-esri-leaflet';
 import MarkerClusterGroup from '@changey/react-leaflet-markercluster';
-import { TileServerLayer, FeatureCollection } from '../../types';
+import { TileServerLayer, FeatureCollection } from '@hazmapper/types';
 import * as L from 'leaflet';
 import * as turf from '@turf/turf';
 import { LatLngTuple, MarkerCluster } from 'leaflet';

react/src/components/MapProjectNavBar/MapProjectNavBar.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { useLocation } from 'react-router-dom';
 import styles from './MapProjectNavBar.module.css';
 import { QueryNavItem } from '@tacc/core-components';
-import { queryPanelKey, Panel } from '../../utils/panels';
+import { queryPanelKey, Panel } from '@hazmapper/utils/panels';
+// TODO:not needed but can help illustate the `error useLocation() in the context of a <Router>` and how its in the tacc/core-components lib
+//import { QueryNavItem } from './QueryNavItem';
 
 import assetsImage from '../../assets/assets.png';
 import pointCloudImage from '../../assets/point-clouds.png';

react/src/components/MapProjectNavBar/QueryNavItem.module.css

@@ -0,0 +1,58 @@
+@import url('@tacc/core-styles/src/lib/_imports/tools/media-queries.css');
+
+.nav-link {
+  text-decoration: none !important;
+  min-width: var(--min-width);
+  border: none;
+  padding-left: var(--horizontal-buffer);
+  color: #707070;
+  cursor: pointer;
+  display: block;
+}
+
+.nav-content {
+  height: 34px;
+  text-decoration: none;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  display: flex;
+  align-items: center;
+}
+
+.nav-content:hover {
+  background: var(--global-color-accent--weak);
+}
+
+.nav-active {
+  background: var(--global-color-accent--weak);
+}
+
+.nav-text {
+  font-size: 1.2rem;
+  font-weight: 500;
+  pointer-events: none;
+  color: var(--global-color-primary--x-dark);
+  text-decoration: none;
+}
+
+.nav-icon {
+  margin-right: 1rem;
+}
+
+@media (--narrow-and-below) {
+  .nav-icon {
+    margin-right: unset;
+    margin: 0.25em;
+  }
+
+  .nav-content {
+    text-align: center;
+    flex-direction: column;
+    height: unset;
+    padding-block: 0.25em;
+  }
+
+  .nav-content > span {
+    width: min-content;
+  }
+}

react/src/components/MapProjectNavBar/QueryNavItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { Icon } from '@tacc/core-components';
+import styles from './QueryNavItem.module.css';
+
+// Alternate nav item with active state set by a prop
+export const QueryNavItem: React.FC<
+  React.PropsWithChildren<{
+    to: string;
+    icon?: string;
+    end?: boolean;
+    active: boolean;
+    className?: string;
+  }>
+> = ({ to, icon, end, className, active, children }) => {
+  return (
+    <NavLink to={to} end={end} className={`${styles['nav-link']} ${className}`}>
+      <div
+        className={`${styles['nav-content']} ${
+          active ? styles['nav-active'] : ''
+        }`}
+      >
+        {icon && <Icon name={icon} size="xs" className={styles['nav-icon']} />}
+        {/* we'll want to set name based on the app */}
+        <span className={styles['nav-text']}>{children}</span>
+      </div>
+    </NavLink>
+  );
+};

react/src/components/Projects/ProjectListing.tsx

@@ -1,11 +1,6 @@
 import React, { useState } from 'react';
-import { Project, DesignSafeProject } from '../../types';
-import {
-  useDsProjects,
-  useProjects,
-  mergeDesignSafeProject,
-} from '../../hooks';
-import { Button, LoadingSpinner } from '@tacc/core-components';
+import { useProjectsWithDesignSafeInformation } from '@hazmapper/hooks';
+import { Button, LoadingSpinner, Icon } from '@tacc/core-components';
 import CreateMapModal from '../CreateMapModal/CreateMapModal';
 import { useNavigate } from 'react-router-dom';
 
@@ -21,15 +16,7 @@ export const ProjectListing: React.FC = () => {
     setIsModalOpen(!isModalOpen);
   };
 
-  const { data, isLoading, isError } = useProjects();
-  let projectsData: Array<Project> = [];
-  let dsData: Array<DesignSafeProject> = [];
-  const resp = useDsProjects();
-  dsData = resp?.data?.projects ?? [];
-  projectsData = data ?? [];
-
-  const combinedProj = mergeDesignSafeProject(projectsData, dsData);
-  projectsData = combinedProj;
+  const { data, isLoading, isError } = useProjectsWithDesignSafeInformation();
 
   if (isLoading) {
     return <LoadingSpinner />;
@@ -40,30 +27,40 @@ export const ProjectListing: React.FC = () => {
   }
 
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>Map</th>
-          <th>Project</th>
-          <th>
-            <CreateMapModal isOpen={isModalOpen} toggle={toggleModal} />
-            <Button onClick={toggleModal} size="small">
-              Create a New Map
-            </Button>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {projectsData?.map((proj) => (
-          <tr key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
-            <td>{proj.name}</td>
-            <td>
-              {proj.ds_project_id} {proj.ds_project_title}
-            </td>
-            <td></td>
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th>Map</th>
+            <th>Project</th>
+            <th>
+              <CreateMapModal isOpen={isModalOpen} toggle={toggleModal} />
+              <Button onClick={toggleModal} size="small">
+                Create a New Map
+              </Button>
+            </th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {data?.map((proj) => (
+            <tr key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
+              <td>{proj.name}</td>
+              <td>
+                {proj.ds_project?.value.projectId}{' '}
+                {proj.ds_project?.value.title}
+              </td>
+              <td>
+                <Button>
+                  <Icon name="edit-document"></Icon>
+                </Button>
+                <Button>
+                  <Icon name="trash"></Icon>
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
   );
 };

react/src/components/Systems/SystemSelect.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { SystemSelect } from './SystemSelect';
 import systemsFixture from './Systems.fixture';
 
-jest.mock('../../hooks', () => {
+jest.mock('@hazmapper/hooks', () => {
   return {
     useSystems: () => {
       return {

react/src/components/Systems/SystemSelect.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { useSystems } from '../../hooks';
-import { System } from '../../types';
+import { useSystems } from '@hazmapper/hooks';
+import { System } from '@hazmapper/types';
 
 interface SystemSelectProps {
   onSystemSelect: (selectedSystem: string) => void;

react/src/hooks/environment/useAppConfiguration.ts

@@ -8,7 +8,7 @@ import {
   MapillaryConfiguration,
   GeoapiBackendEnvironment,
   DesignSafePortalEnvironment,
-} from '../../types';
+} from '@hazmapper/types';
 import useBasePath from './useBasePath';
 
 /**

react/src/hooks/features/useFeatures.ts

@@ -1,5 +1,5 @@
 import { UseQueryResult } from 'react-query';
-import { FeatureCollection } from '../../types';
+import { FeatureCollection } from '@hazmapper/types';
 import { useGet } from '../../requests';
 
 interface UseFeaturesParams {

react/src/hooks/index.ts

@@ -1,4 +1,8 @@
-export { useProjects, useProject } from './projects/useProjects';
+export {
+  useProjects,
+  useProject,
+  useProjectsWithDesignSafeInformation,
+} from './projects/useProjects';
 export { default as useFeatures } from './features/useFeatures';
 export { useTileServers } from './tileServers/useTileServers';
 export { default as useSystems } from './systems/useSystems';

react/src/hooks/projects/index.ts

@@ -1,5 +1,5 @@
 export {
-  mergeDesignSafeProject,
+  useProjectsWithDesignSafeInformation,
   useProjects,
   useDsProjects,
 } from './useProjects';

react/src/hooks/projects/useCreateProject.ts

@@ -1,5 +1,5 @@
 import { usePost } from '../../requests';
-import { ApiService, Project, ProjectRequest } from '../../types';
+import { ApiService, Project, ProjectRequest } from '@hazmapper/types';
 
 const useCreateProject = () => {
   const endpoint = '/projects/';