diff --git a/package-lock.json b/package-lock.json index a273c91..ea6ce21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,7 @@ "@typescript-eslint/parser": "^5.47.1", "@vitest/coverage-v8": "^1.6.0", "autoprefixer": "^10.4.7", + "daisyui": "^4.12.10", "eslint": "^8.30.0", "eslint-config-next": "^14.2.4", "husky": "^8.0.3", @@ -4825,6 +4826,16 @@ "node": ">= 8" } }, + "node_modules/css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "node_modules/css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -4910,6 +4921,15 @@ "resolved": "https://registry.npmjs.org/csv-stringify/-/csv-stringify-5.6.5.tgz", "integrity": "sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==" }, + "node_modules/culori": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz", + "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + } + }, "node_modules/d3-array": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz", @@ -4928,6 +4948,25 @@ "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz", "integrity": "sha512-RhGS1u2vavcO7ay7ZNAPo4xeDh/VYeGof3x5ZLJBQgYhLegxr3s5IykvWmJ94FTU6mcbtp4sloqZ54mP6R4Utw==" }, + "node_modules/daisyui": { + "version": "4.12.10", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz", + "integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==", + "dev": true, + "dependencies": { + "css-selector-tokenizer": "^0.8", + "culori": "^3", + "picocolors": "^1", + "postcss-js": "^4" + }, + "engines": { + "node": ">=16.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/daisyui" + } + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -6109,6 +6148,12 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, + "node_modules/fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "node_modules/fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", @@ -14420,6 +14465,16 @@ "which": "^2.0.1" } }, + "css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -14489,6 +14544,12 @@ "resolved": "https://registry.npmjs.org/csv-stringify/-/csv-stringify-5.6.5.tgz", "integrity": "sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==" }, + "culori": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz", + "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==", + "dev": true + }, "d3-array": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz", @@ -14507,6 +14568,18 @@ "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz", "integrity": "sha512-RhGS1u2vavcO7ay7ZNAPo4xeDh/VYeGof3x5ZLJBQgYhLegxr3s5IykvWmJ94FTU6mcbtp4sloqZ54mP6R4Utw==" }, + "daisyui": { + "version": "4.12.10", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz", + "integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==", + "dev": true, + "requires": { + "css-selector-tokenizer": "^0.8", + "culori": "^3", + "picocolors": "^1", + "postcss-js": "^4" + } + }, "damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -15421,6 +15494,12 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, + "fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", diff --git a/package.json b/package.json index 4d63a75..ced4ac5 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "@typescript-eslint/parser": "^5.47.1", "@vitest/coverage-v8": "^1.6.0", "autoprefixer": "^10.4.7", + "daisyui": "^4.12.10", "eslint": "^8.30.0", "eslint-config-next": "^14.2.4", "husky": "^8.0.3", diff --git a/src/UI/NextPageButtonLink.tsx b/src/UI/NextPageButtonLink.tsx deleted file mode 100644 index 53410b1..0000000 --- a/src/UI/NextPageButtonLink.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import Link from "next/link"; -import { TiInputChecked } from "react-icons/ti"; - -interface NextPageButtonLinkProps { - pageName: string; - msg: string; - disabled?: boolean; - query?: { [key: string]: string }; - text: string; - successMessage: boolean; - whiteDesignButton: boolean; -} - -export const NextPageButtonLink = ({ - pageName, - msg, - disabled, - query, - text, - successMessage, - whiteDesignButton, -}: NextPageButtonLinkProps) => { - const href = { pathname: `./${pageName}`, query: query }; - return ( -
- {successMessage ? ( -

- {" "} - - - {" "} - {text} -

- ) : ( -

- {text} -

- )} - - {whiteDesignButton ? ( - - ) : ( - - )} - -
- ); -}; diff --git a/src/components/AboutThisEngagement.tsx b/src/components/AboutThisEngagement.tsx index d436bff..a75354a 100644 --- a/src/components/AboutThisEngagement.tsx +++ b/src/components/AboutThisEngagement.tsx @@ -3,14 +3,14 @@ import React from "react"; const AboutThisEngagementPortal = () => { return ( <> -

+

About this Engagement Portal

-

+

This engagement portal is designed to help our project team understand:{" "}

-
    +
    1. Demographic information of those who participate in the project.
      2. diff --git a/src/components/AddressSearch.tsx b/src/components/AddressSearch.tsx index d723964..4eea59b 100644 --- a/src/components/AddressSearch.tsx +++ b/src/components/AddressSearch.tsx @@ -11,12 +11,13 @@ import PlanningAreaGeojson from "../data/Statewide_Planning_Regions.json"; import DHHLGeojson from "../data/DHHL_WGS84.json"; import * as turf from "@turf/turf"; import { FeatureCollection, Feature, Polygon } from "geojson"; -import ProgressBar from "./ProgressBar"; import * as ELG from "esri-leaflet-geocoder"; import Link from "next/link"; -import { GrLinkNext } from "react-icons/gr"; -import { IoMdArrowBack } from "react-icons/io"; import { api } from "../utils/api"; +import NextButton from "./NextButton"; +import PrevButton from "./PrevButton"; +import PageHeader from "./PageHeader"; +import PageLayout from "./PageLayout"; declare global { interface Window { @@ -258,87 +259,110 @@ const AddressSearch: React.FC = () => { setZipCode(zip); setCensusTract(censusTract); + if (censusTract === "Not Found") { + setIsland("Not Found"); + setCounty("Not Found"); + } setPlanningRegion(featurePlanningRegion); setDhhlRegion(dhhlRegion); setComplete(true); }; return ( -
      -
      -

      - Step 1: Type in your address -

      - {complete ? ( - - ) : ( - - )} -
      - - {suggestions.length > 0 && ( -
      - {suggestions.map((suggestion, index) => ( -
      handleSuggestionClick(suggestion)} - > - {suggestion.text} -
      - ))} -
      - )} -
      -

      + <> + + +

      +
      + + {suggestions.length > 0 && ( +
        + {suggestions.map((suggestion, index) => ( +
      • handleSuggestionClick(suggestion)} + > + {suggestion.text} +
        • + ))} +
      + )} +
      +
      +
      +
      +

      Your address will not be recorded, but will be used to return the following information commonly used in planning:

      - {zipCode &&

      ZIP Code: {zipCode}

      } - {censusTract && ( -

      Census Tract: {censusTract}

      - )} - {island &&

      Island: {island}

      } - {county &&

      County: {county}

      } - {planningRegion && ( -

      - Planning Region: {planningRegion} - {dhhlRegion === "Yes" ? "-DHHL" : ""} -

      - )} +
      + {zipCode && ( +
      + ZIP Code: + {zipCode} +
      + )} + {censusTract && ( +
      + Census Tract: + {censusTract} +
      + )} + {island && ( +
      + Island: + {island} +
      + )} + {county && ( +
      + County: + {county} +
      + )} + {planningRegion && ( +
      + Planning Region: + + {planningRegion} + {dhhlRegion === "Yes" ? "-DHHL" : ""} + +
      + )} +
      -
      +
      +
      +
      - + {complete ? ( - + /> ) : ( - + )}
      -
      -
      -
      + + + ); }; diff --git a/src/components/InfoModal.tsx b/src/components/InfoModal.tsx new file mode 100644 index 0000000..292c130 --- /dev/null +++ b/src/components/InfoModal.tsx @@ -0,0 +1,39 @@ +import React, { useState } from "react"; +import { MdOpenInNew } from "react-icons/md"; + +interface InfoModalProps { + children: React.ReactNode; + title: string; +} + +const InfoModal = ({ children, title }: InfoModalProps) => { + const [isModalOpen, setIsModalOpen] = useState(false); + return ( + <> + + {isModalOpen && ( + +
      + + {children} +
      + +
      +
      +       + )} + + ); +}; + +export default InfoModal; diff --git a/src/components/InfoPopup.tsx b/src/components/InfoPopup.tsx deleted file mode 100644 index 85ba1c2..0000000 --- a/src/components/InfoPopup.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useState } from "react"; -import { BsChevronDown } from "react-icons/bs"; -import { IoCloseSharp } from "react-icons/io5"; - -interface InfoPopupProps { - title: string; - PopupInfo: React.FC; -} - -const InfoPopup = ({ title, PopupInfo }: InfoPopupProps) => { - const [showMore, setShowMore] = useState(false); - - const toggleMoreInformation = () => { - setShowMore(!showMore); - }; - return ( - <> -
      -

      - {title} -

      - {!showMore && ( -
      - -
      - )} -
      - - {showMore && ( -
      - - -
      - )} - - ); -}; - -export default InfoPopup; diff --git a/src/components/Infobox.tsx b/src/components/Infobox.tsx new file mode 100644 index 0000000..61b4a83 --- /dev/null +++ b/src/components/Infobox.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { TiInputChecked } from "react-icons/ti"; + +interface InfoboxProps { + greenCheck: boolean; + message: string; +} + +const Infobox = ({ greenCheck, message }: InfoboxProps) => { + return ( + <> +

      + {greenCheck ? ( + + + + ) : null} + {message} +

      + + ); +}; + +export default Infobox; diff --git a/src/components/NextButton.tsx b/src/components/NextButton.tsx new file mode 100644 index 0000000..efa54cc --- /dev/null +++ b/src/components/NextButton.tsx @@ -0,0 +1,25 @@ +import Link from "next/link"; +import React from "react"; + +interface NextButtonProps { + onClick?: () => void; + text: string; + disabled?: boolean; + className?: string; +} + +const NextButton = ({ + onClick, + text, + disabled, + className, +}: NextButtonProps) => { + const style = className ? className : "btn-primary btn text-primary-content"; + return ( + + ); +}; + +export default NextButton; diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx new file mode 100644 index 0000000..187733a --- /dev/null +++ b/src/components/PageHeader.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +interface PageHeaderProps { + title: string; +} + +const PageHeader = ({ title }: PageHeaderProps) => { + return ( +

      + {title} +

      + ); +}; + +export default PageHeader; diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx new file mode 100644 index 0000000..fde162c --- /dev/null +++ b/src/components/PageLayout.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +interface PageLayoutProps { + children: React.ReactNode; +} + +const PageLayout = ({ children }: PageLayoutProps) => { + return ( +
      +
      + {children} +
      +
      + ); +}; + +export default PageLayout; diff --git a/src/components/PrevButton.tsx b/src/components/PrevButton.tsx new file mode 100644 index 0000000..8a88280 --- /dev/null +++ b/src/components/PrevButton.tsx @@ -0,0 +1,22 @@ +import Link from "next/link"; +import React from "react"; + +interface PrevButtonProps { + onClick?: () => void; + text: string; + disabled?: boolean; +} + +const PrevButton = ({ onClick, text, disabled }: PrevButtonProps) => { + return ( + + ); +}; + +export default PrevButton; diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx deleted file mode 100644 index 952331b..0000000 --- a/src/components/ProgressBar.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; - -interface ProgressBarProps { - completed: number; -} - -const ProgressBar = ({ completed }: ProgressBarProps) => { - const fillerStyles = { - height: "100%", - width: `${completed}%`, - backgroundColor: "yellowGreen", - borderRadius: "inherit", - transition: "width 1s ease-in-out", - minHeight: "100%", - }; - - return ( -
      -
      -
      - ); -}; - -export default ProgressBar; diff --git a/src/components/SummaryQuestionAnswer.tsx b/src/components/SummaryQuestionAnswer.tsx index a521ebc..a960459 100644 --- a/src/components/SummaryQuestionAnswer.tsx +++ b/src/components/SummaryQuestionAnswer.tsx @@ -14,7 +14,7 @@ export default function SummaryQuestionAnswer({ return (

    2. {question}

      -

      {answer}

      +

      {answer}

      3. ); } diff --git a/src/components/WhatIsHierr.tsx b/src/components/WhatIsHierr.tsx index 0608b79..87382c5 100644 --- a/src/components/WhatIsHierr.tsx +++ b/src/components/WhatIsHierr.tsx @@ -2,7 +2,7 @@ import React from "react"; const Goals = () => { return ( -
        +
        1. Support competitive project proposals designed to address economic hardships experienced by residents during the COVID-19 pandemic. @@ -21,7 +21,7 @@ const Goals = () => { const ByTheEndOfThisProject = () => { return ( -