feat: tup-700 @tacc/core-components node pkg

react/.eslintignore

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

react/jest.config.cjs

@@ -28,7 +28,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",
@@ -157,10 +157,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: [],

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": "file:../../tacc-core-components-0.0.1.tgz",
     "@tacc/core-styles": "^2.24.1",
     "@testing-library/react": "^13.4.0",
     "@turf/turf": "^6.5.0",

react/src/components/CreateMapModal/CreateMapModal.tsx

@@ -1,19 +1,23 @@
 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 '../../hooks/projects/useCreateProject';
 import useAuthenticatedUser from '../../hooks/user/useAuthenticatedUser';
 import { useNavigate } from 'react-router-dom';
 import { ProjectRequest } from '../../types';
 import {
-  FieldWrapperFormik,
   FormikInput,
   FormikTextarea,
   FormikCheck,
-} from '../../core-wrappers';
+} from '@tacc/core-components';
+// import {
+//   FormikInput,
+//   FormikTextarea,
+//   FormikCheck,
+// } from '../../core-wrappers';
 
 type CreateMapModalProps = {
   isOpen: boolean;
@@ -115,21 +119,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 +149,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 '../../utils/panels';
 
 import assetsImage from '../../assets/assets.png';

react/src/components/Projects/ProjectListing.tsx

@@ -5,7 +5,7 @@ import {
   useProjects,
   mergeDesignSafeProject,
 } from '../../hooks';
-import { Button, LoadingSpinner } from '../../core-components';
+import { Button, LoadingSpinner } from '@tacc/core-components';
 import CreateMapModal from '../CreateMapModal/CreateMapModal';
 
 export const ProjectListing: React.FC = () => {