feat: tup-700 core components node pkg use pkg

react/.eslintignore

@@ -1,5 +1,3 @@
 dist/
 build/
 coverage/
-src/core-components/
-src/core-wrappers/

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
@@ -28,7 +31,7 @@ module.exports = {
   coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: ['src/core-components/', 'src/core-wrappers'],
+  // coveragePathIgnorePatterns: ['src/some-components/', 'src/some-wrappers'],
 
   // Indicates which provider should be used to instrument code for coverage
   // coverageProvider: "babel",
@@ -160,10 +163,10 @@ module.exports = {
   // ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  testPathIgnorePatterns: [
-    '<rootDir>/src/core-components/',
-    '<rootDir>/src/core-wrappers/',
-  ],
+  // testPathIgnorePatterns: [
+  //   '<rootDir>/src/some-components/',
+  //   '<rootDir>/src/some-wrappers/',
+  // ],
 
   // The regexp pattern or array of patterns that Jest uses to detect test files
   // testRegex: [],
@@ -181,10 +184,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.3-beta.0",
     "@tacc/core-styles": "^2.24.1",
     "@testing-library/react": "^13.4.0",
     "@turf/turf": "^6.5.0",
@@ -61,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.tsx

@@ -1,19 +1,18 @@
 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 { Formik, Form, Field } from 'formik';
 import * as Yup from 'yup';
 import useCreateProject from '@hazmapper/hooks/projects/useCreateProject';
 import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
 import { useNavigate } from 'react-router-dom';
 import { ProjectRequest } from '@hazmapper/types';
 import {
-  FieldWrapperFormik,
   FormikInput,
   FormikTextarea,
   FormikCheck,
-} from '../../core-wrappers';
+} from '@tacc/core-components';
 
 type CreateMapModalProps = {
   isOpen: boolean;
@@ -115,21 +114,26 @@ const CreateMapModal = ({
             }, [values.name, values.system_file, setFieldValue, previousName]);
 
             return (
-              <Form className="c-form">
-                <FieldWrapperFormik name="map-form-info" label="">
-                  <FormikInput
+              <Form className="c-form" name="map-form-info">
+                {/* TODO: Remove superfluous empty tag, and re-nest markup */}
+                {/* NOTE: Added to simplify diff of PR #239 */}
+                <>
+                  <Field
+                    component={FormikInput}
                     name="name"
                     label="Name"
                     required
                     data-testid="name-input"
                   />
-                  <FormikTextarea
+                  <Field
+                    component={FormikTextarea}
                     name="description"
                     label="Description"
                     required
                   />
                   <div className={`${styles['field-wrapper']}`}>
-                    <FormikInput
+                    <Field
+                      component={FormikInput}
                       name="system_file"
                       label="Custom File Name"
                       required
@@ -140,20 +144,22 @@ const CreateMapModal = ({
                     </span>
                   </div>
                   <div className={`${styles['field-wrapper-alt']}`}>
-                    <FormikInput
+                    <Field
+                      component={FormikInput}
                       name="save-location"
                       label="Save Location"
                       value={`/${userData?.username}`}
                       readOnly
                       disabled
                     />
                   </div>
-                  <FormikCheck
+                  <Field
+                    component={FormikCheck}
                     name="syncFolder"
                     label="Sync Folder"
                     description="When enabled, files in this folder are automatically synced into the map periodically."
                   />
-                </FieldWrapperFormik>
+                </>
                 {errorMessage && (
                   <div className="c-form__errors">{errorMessage}</div>
                 )}

react/src/components/MapProjectNavBar/MapProjectNavBar.tsx

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

react/src/components/Projects/ProjectListing.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useProjectsWithDesignSafeInformation } from '@hazmapper/hooks';
-import { Button, LoadingSpinner, Icon } from '@core-components';
+import { Button, LoadingSpinner, Icon } from '@tacc/core-components';
 import CreateMapModal from '../CreateMapModal/CreateMapModal';
 import { useNavigate } from 'react-router-dom';