task/WG-246: new CreateMapModal layout w/ core-wrappers (#208)

* task/WG-74: Create Map React Modal * recreating lock file * working POST request and unit tests added * made system_path dynamic to current user that's logged in * fixing unit tests and modifying auth.ts file for AuthenticatedUser * adding tacc-core-styles to Modal * fixing lint issues and unit test * refactoring usePost and useCreateProject to be more efficient * renaming MapModal comp and adding error message to modal * adding useAuthenticatedUser hook and replacing redux * Refactoring CreateMapModal to handle its own states and errors instead of MainMenu * fixing MainMenu comp to match master * Updating comments and type cleanup * removing actions and submitting state management * Modifying error message handling * Updating CreateMapModal test to reflect new error handling * updating package.json to fix conflicts with lock file * task/WG-246: Using core-wrapper comps for modal layout * updating config and unit tests for new wrapper components * removing Wizard wrapper comp and updating modal layout * fixing lint for css file * removing justify-content-center from buttons and upgrading tacc-core-styles version * fixing formatting and cssminifying side effects from core-styles upgrade * adding UI suggestions * adding alt Save Location UI * Refactoring FormikCheck's styling/layout * removing unused css rules from CreateMapModal module css file * fixing horizontal scroll and adding hazmapper suffix and mobile friendly --------- Co-authored-by: Taylor Grafft <[email protected]> Co-authored-by: Taylor Grafft <[email protected]> Co-authored-by: Taylor Grafft <[email protected]> Co-authored-by: Taylor Grafft <[email protected]> Co-authored-by: Taylor Grafft <[email protected]> Co-authored-by: Taylor Grafft <[email protected]> Co-authored-by: Taylor Grafft <[email protected]> Co-authored-by: Taylor Grafft <[email protected]>
TACC-Cloud · Feb 28, 2024 · 41a026c · 41a026c
1 parent 821879a
commit 41a026c
Show file tree

Hide file tree

Showing 12 changed files with 16,266 additions and 16,475 deletions.
diff --git a/react/.prettierignore b/react/.prettierignore
@@ -2,5 +2,3 @@ node_modules
 build
 coverage
 dist
-package-lock.json
-package.json
diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -1,87 +1,87 @@
 {
-    "name": "hazmapper",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build --base=./",
-        "preview": "vite preview",
-        "test": "jest",
-        "lint": "npm run lint:js && npm run prettier:check",
-        "lint:fix": "npm run lint:js:fix && npm run prettier:fix",
-        "lint:js": "eslint . --ext .js,.jsx,.ts,.tsx",
-        "lint:js:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
-        "lint:rules": "eslint --print-config src/index.tsx",
-        "prettier:check": "prettier --single-quote --check .",
-        "prettier:fix": "prettier --single-quote --write ."
-    },
-    "eslintConfig": {
-        "extends": "react-app"
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "dependencies": {
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.21.0",
-        "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
-        "@reduxjs/toolkit": "^1.8.4",
-        "@tacc/core-styles": "^2.22.3",
-        "@testing-library/react": "^13.4.0",
-        "@turf/turf": "^6.5.0",
-        "@types/geojson": "^7946.0.14",
-        "@types/leaflet.markercluster": "^1.5.1",
-        "axios": "^1.6.2",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-jsx-a11y": "^6.6.1",
-        "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "formik": "^2.4.5",
-        "leaflet": "^1.9.3",
-        "prettier": "^2.7.1",
-        "prop-types": "^15.8.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-dropzone": "^14.2.3",
-        "react-esri-leaflet": "^2.0.1",
-        "react-leaflet": "^4.2.0",
-        "react-query": "^3.39.3",
-        "react-redux": "^8.0.2",
-        "react-resize-detector": "^9.1.1",
-        "react-router-dom": "^6.3.0",
-        "react-step-wizard": "^5.3.11",
-        "react-table": "^7.8.0",
-        "reactstrap": "^9.2.1",
-        "uuid": "^9.0.1",
-        "yup": "^1.3.3"
-    },
-    "devDependencies": {
-        "@redux-devtools/core": "^3.13.1",
-        "@types/jest": "^29.0.5",
-        "@types/leaflet": "^1.9.0",
-        "@types/react": "^18.0.17",
-        "@types/react-dom": "^18.0.6",
-        "@typescript-eslint/eslint-plugin": "^5.38.0",
-        "@typescript-eslint/parser": "^5.38.0",
-        "@vitejs/plugin-react": "^2.0.1",
-        "eslint": "^8.23.1",
-        "eslint-plugin-react": "^7.31.8",
-        "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.0.5",
-        "jest-environment-jsdom": "^29.0.5",
-        "ts-jest": "^29.0.5",
-        "typescript": "^4.6.4",
-        "vite": "^3.0.7"
-    }
+  "name": "hazmapper",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build --base=./",
+    "preview": "vite preview",
+    "test": "jest",
+    "lint": "npm run lint:js && npm run prettier:check",
+    "lint:fix": "npm run lint:js:fix && npm run prettier:fix",
+    "lint:js": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:js:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+    "lint:rules": "eslint --print-config src/index.tsx",
+    "prettier:check": "prettier --single-quote --check .",
+    "prettier:fix": "prettier --single-quote --write ."
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
+    "@reduxjs/toolkit": "^1.8.4",
+    "@tacc/core-styles": "^2.24.1",
+    "@testing-library/react": "^13.4.0",
+    "@turf/turf": "^6.5.0",
+    "@types/geojson": "^7946.0.14",
+    "@types/leaflet.markercluster": "^1.5.1",
+    "axios": "^1.6.2",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "formik": "^2.4.5",
+    "leaflet": "^1.9.3",
+    "postcss-nesting": "^12.0.3",
+    "prettier": "^2.7.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-esri-leaflet": "^2.0.1",
+    "react-leaflet": "^4.2.0",
+    "react-query": "^3.39.3",
+    "react-redux": "^8.0.2",
+    "react-resize-detector": "^9.1.1",
+    "react-router-dom": "^6.3.0",
+    "react-table": "^7.8.0",
+    "reactstrap": "^9.2.1",
+    "uuid": "^9.0.1",
+    "yup": "^1.3.3"
+  },
+  "devDependencies": {
+    "@redux-devtools/core": "^3.13.1",
+    "@types/jest": "^29.0.5",
+    "@types/leaflet": "^1.9.0",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.38.0",
+    "@typescript-eslint/parser": "^5.38.0",
+    "@vitejs/plugin-react": "^2.0.1",
+    "eslint": "^8.23.1",
+    "eslint-plugin-react": "^7.31.8",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.0.5",
+    "jest-environment-jsdom": "^29.0.5",
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.7"
+  }
 }
diff --git a/react/postcss.config.cjs b/react/postcss.config.cjs
@@ -2,13 +2,13 @@
 
 module.exports = {
   plugins: [
+    require('postcss-nesting'),
     require('postcss-preset-env')({
       stage: false,
       features: {
         'custom-media-queries': true,
         'media-query-ranges': true,
         'custom-selectors': true,
-        'nesting-rules': true,
       },
     }),
     require('postcss-replace')({

diff --git a/react/src/components/CreateMapModal/CreateMapModal.module.css b/react/src/components/CreateMapModal/CreateMapModal.module.css
@@ -9,12 +9,38 @@
   content: '\00D7'; /* Unicode character for 'X' */
 }
 
-.custom-error-message {
-  margin-top: 0.25rem;
-  font-size: 0.8em;
-  color: #dc3545;
+.field-wrapper-alt {
+  margin-top: -0.5rem;
+  margin-bottom: -0.1rem;
+  max-width: 40em;
 }
 
-.form-check-label {
-  font-style: italic;
+.field-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.input-custom-size {
+  flex-grow: 1;
+  width: 37.55rem;
+  padding-right: 90px;
+}
+
+.hazmapper-suffix {
+  position: absolute;
+  right: 0;
+  padding-right: 10px;
+  top: 46%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+
+/* Adding media queries for mobile devices */
+@media (max-width: 440px) {
+  .input-custom-size {
+    width: 115%;
+  }
 }