Draft/use core components library

react/jest.config.cjs

@@ -4,7 +4,11 @@
  */
 
 // 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 +89,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 +183,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,6 +37,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
     "@reduxjs/toolkit": "^1.8.4",
+    "@tacc/core-components": "^0.0.2",
     "@tacc/core-styles": "^2.24.1",
     "@testing-library/react": "^13.4.0",
     "@turf/turf": "^6.5.0",

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

@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Button } from '../../core-components';
+import { Button } from '@tacc/core-components';
 import styles from './CreateMapModal.module.css';
 import { Formik, Form } 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 {
-  FieldWrapperFormik,
+  FormikFieldWrapper,
   FormikInput,
   FormikTextarea,
   FormikCheck,
-} from '../../core-wrappers';
+} from '@tacc/core-components';
 
 type CreateMapModalProps = {
   isOpen: boolean;
@@ -116,7 +116,7 @@ const CreateMapModal = ({
 
             return (
               <Form className="c-form">
-                <FieldWrapperFormik name="map-form-info" label="">
+                <FormikFieldWrapper name="map-form-info" label="">
                   <FormikInput
                     name="name"
                     label="Name"
@@ -153,7 +153,7 @@ const CreateMapModal = ({
                     label="Sync Folder"
                     description="When enabled, files in this folder are automatically synced into the map periodically."
                   />
-                </FieldWrapperFormik>
+                </FormikFieldWrapper>
                 {errorMessage && (
                   <div className="c-form__errors">{errorMessage}</div>
                 )}

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 import styles from './MapProjectNavBar.module.css';
-import { QueryNavItem } from '../../core-wrappers';
-import { queryPanelKey, Panel } from '../../utils/panels';
+import { QueryNavItem } from '@tacc/core-components';
+import { queryPanelKey, Panel } from '@hazmapper/utils/panels';
 
 import assetsImage from '../../assets/assets.png';
 import pointCloudImage from '../../assets/point-clouds.png';

react/src/components/Projects/ProjectListing.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import { Project, DesignSafeProject } from '../../types';
+import { Project, DesignSafeProject } from '@hazmapper/types';
 import {
   useDsProjects,
   useProjects,
   mergeDesignSafeProject,
-} from '../../hooks';
-import { Button, LoadingSpinner } from '../../core-components';
+} from '@hazmapper/hooks';
+import { Button, LoadingSpinner } from '@tacc/core-components';
 import CreateMapModal from '../CreateMapModal/CreateMapModal';
 import { useNavigate } from 'react-router-dom';
 

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;