@grantbii/design-system 1.19.5 → 1.20.0

package/core/organisms/GrantMatch/GrantMatchModal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Button, Textarea } from \"../../molecules\";\nimport FileDrop, { useFileDrop } from \"../../organisms/FileDrop\";\nimport Modal from \"../../organisms/Modal\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype GrantMatchModalProps = {\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n};\n\nconst GrantMatchModal = ({\n  findGrantsCallback,\n  closeModalCallback,\n}: GrantMatchModalProps) => {\n  const { activeQuery, closeModal } = useGrantMatchContext();\n  const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(\n    activeQuery.files,\n  );\n\n  const onClickClose = () => {\n    if (closeModalCallback) {\n      closeModalCallback();\n    }\n\n    closeModal();\n  };\n\n  return (\n    <Modal\n      header={<ModalHeader />}\n      content={\n        <ModalContent\n          files={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      }\n      footer={\n        <FindGrantsButton\n          files={files}\n          findGrantsCallback={findGrantsCallback}\n        />\n      }\n      onClickClose={onClickClose}\n      width=\"600px\"\n      height=\"560px\"\n    />\n  );\n};\n\nexport default GrantMatchModal;\n\nconst ModalHeader = () => (\n  <BaseModalHeader>\n    <GrantMatchLogo\n      src={grantMatchLogo}\n      alt=\"Grant Match\"\n      width={64}\n      height={64}\n    />\n    <p>Let us get you matched to the most suitable grant</p>\n  </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 16px;\n`;\n\nconst GrantMatchLogo = styled(Image)`\n  width: 24px;\n  height: 24px;\n\n  box-shadow: 0px 0px 5px 5px #ffe2b680;\n  border-radius: 120px;\n`;\n\ntype ModalContentProps = {\n  files: File[];\n  uploadFiles: (acceptedFiles: File[]) => void;\n  removeFile: (fileName: string) => void;\n  errorMessage?: string;\n};\n\nconst ModalContent = ({\n  files,\n  uploadFiles,\n  removeFile,\n  errorMessage,\n}: ModalContentProps) => {\n  const { queryText, updateQueryText } = useGrantMatchContext();\n\n  return (\n    <BaseContent>\n      <ModalFileDrop>\n        <p>Upload Files (e.g. Project Plan, Proposal, Company Docs)</p>\n        <FileDrop\n          uploadedFiles={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      </ModalFileDrop>\n\n      <ModalQueryText>\n        <label htmlFor={QUERY_TEXTAREA_ID}>Tell us what you intend to do</label>\n        <Textarea\n          id={QUERY_TEXTAREA_ID}\n          value={queryText}\n          onChange={(event) => updateQueryText(event.target.value)}\n          placeholder=\"Give a summary of your project, specifying the key activities you will do & what you intend to achieve\"\n        />\n      </ModalQueryText>\n    </BaseContent>\n  );\n};\n\nconst QUERY_TEXTAREA_ID = \"query-textarea\";\n\nconst BaseContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nconst ModalFileDrop = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ModalQueryText = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\ntype FindGrantsButtonProps = {\n  files: File[];\n  findGrantsCallback?: () => void;\n};\n\nconst FindGrantsButton = ({\n  files,\n  findGrantsCallback,\n}: FindGrantsButtonProps) => {\n  const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();\n  const hasQuery = queryText.trim() !== \"\" || files.length > 0;\n\n  const onClick = () => {\n    if (findGrantsCallback) {\n      findGrantsCallback();\n    }\n\n    updateActiveQuery({ files, text: queryText });\n    closeModal();\n  };\n\n  return (\n    <Button\n      label=\"Find My Grants\"\n      onClick={onClick}\n      variant=\"secondary\"\n      disabled={!hasQuery}\n    />\n  );\n};\n"]}

package/core/organisms/GrantMatch/SearchBar.d.ts

@@ -1,6 +0,0 @@
-type SearchBarProps = {
-    textSearchCallback?: () => void;
-    openModalCallback?: () => void;
-};
-declare const SearchBar: ({ textSearchCallback, openModalCallback, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
-export default SearchBar;

package/core/organisms/GrantMatch/SearchBar.js

@@ -1,168 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from "styled-components";
-import { applyTypography } from "../../../core/integrations";
-import { Color, Responsive, SystemIcon, Typography } from "../../atoms";
-import { useGrantMatchContext } from "./context";
-const SearchBar = ({ textSearchCallback, openModalCallback, }) => {
-    const { activeQuery, queryText } = useGrantMatchContext();
-    return (_jsxs(BaseSearchBar, { children: [_jsxs(TextSearchArea, { "$showBorder": activeQuery.text !== "", children: [_jsx(QueryTextInput, {}), queryText !== "" ? (_jsx(ResetTextButton, {})) : (_jsx(ResetTextButtonPlaceholder, {}))] }), _jsx(TextSearchButton, { textSearchCallback: textSearchCallback }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }));
-};
-export default SearchBar;
-const BaseSearchBar = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  width: 100%;
-
-  color: ${Color.typography.blackHigh};
-  background-color: ${Color.neutral.white};
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    gap: 8px;
-    padding: 0px;
-
-    box-shadow: none;
-    border-radius: 0px;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    gap: 16px;
-    padding: 12px 16px;
-
-    box-shadow: 0px 0px 40px 0px #00000008;
-    border-radius: 12px;
-  }
-`;
-const TextSearchArea = styled.div `
-  display: flex;
-  align-items: center;
-
-  width: 100%;
-
-  background-color: ${Color.neutral.grey4};
-  border-radius: 8px;
-
-  border: 1px solid
-    ${({ $showBorder }) => $showBorder ? Color.brand.grantbiiYellow : Color.neutral.grey4};
-`;
-const QueryTextInput = () => {
-    const { activeQuery, updateActiveQuery, queryText, updateQueryText } = useGrantMatchContext();
-    const onKeyDown = (event) => {
-        if (event.key === "Enter" && !event.repeat) {
-            event.preventDefault();
-            updateActiveQuery({ files: activeQuery.files, text: queryText });
-        }
-    };
-    return (_jsx(BaseQueryTextInput, { value: queryText, onChange: (event) => updateQueryText(event.target.value), onKeyDown: onKeyDown, placeholder: "Search grant or describe your project" }));
-};
-const BaseQueryTextInput = styled.input `
-  width: 100%;
-  margin-left: 16px;
-  outline: none;
-  border: none;
-
-  background-color: ${Color.neutral.grey4};
-  text-overflow: ellipsis;
-`;
-const IconOnlyButton = css `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 38px;
-  min-width: 38px;
-  height: 38px;
-
-  border-radius: 8px;
-`;
-const ResetTextButton = () => {
-    const { activeQuery, updateActiveQuery, updateQueryText } = useGrantMatchContext();
-    const onClick = () => {
-        updateQueryText("");
-        updateActiveQuery({ files: activeQuery.files, text: "" });
-    };
-    return (_jsx(BaseResetTextButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { size: 20, color: Color.neutral.grey1 }) }));
-};
-const BaseResetTextButton = styled.button `
-  ${IconOnlyButton}
-
-  background-color: ${Color.neutral.grey4};
-  border: 1px solid ${Color.neutral.grey4};
-`;
-const ResetTextButtonPlaceholder = styled.div `
-  width: 40px;
-  height: 40px;
-
-  background-color: ${Color.neutral.grey4};
-  border-radius: 8px;
-`;
-const TextSearchButton = ({ textSearchCallback }) => {
-    const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();
-    const onClickSearch = () => {
-        if (textSearchCallback) {
-            textSearchCallback();
-        }
-        updateActiveQuery({ files: activeQuery.files, text: queryText });
-    };
-    return (_jsx(BaseSearchButton, { type: "button", onClick: onClickSearch, children: _jsx(SystemIcon.MagnifyingGlassIcon, { size: 20, color: Color.neutral.white }) }));
-};
-const BaseSearchButton = styled.button `
-  ${IconOnlyButton}
-
-  background-color: ${Color.brand.grantbiiBlue};
-  border: 1px solid ${Color.brand.grantbiiBlue};
-`;
-const OpenModalButton = ({ openModalCallback }) => {
-    const { openModal } = useGrantMatchContext();
-    const onClickOpen = () => {
-        if (openModalCallback) {
-            openModalCallback();
-        }
-        openModal();
-    };
-    return (_jsxs(BaseOpenModalButton, { onClick: onClickOpen, children: [_jsx(SystemIcon.FileArrowUpIcon, { size: 20 }), _jsx(OpenModalButtonText, { children: "File Drop" })] }));
-};
-const BaseOpenModalButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-
-  height: 38px;
-
-  border: 1px solid ${Color.neutral.grey3};
-  border-radius: 8px;
-
-  background-color: ${Color.neutral.grey3};
-  color: ${Color.typography.blackHigh};
-
-  ${applyTypography(Typography.bodySecondaryRegular)}
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    width: 38px;
-    min-width: 38px;
-    padding: 0px;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    width: auto;
-    min-width: 88px;
-    padding: 2px 16px;
-  }
-`;
-const OpenModalButtonText = styled.p `
-  font-weight: 500;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: none;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: inline;
-  }
-`;
-//# sourceMappingURL=SearchBar.js.map

package/core/organisms/GrantMatch/SearchBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { applyTypography } from \"../../../core/integrations\";\nimport { Color, Responsive, SystemIcon, Typography } from \"../../atoms\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype SearchBarProps = {\n  textSearchCallback?: () => void;\n  openModalCallback?: () => void;\n};\n\nconst SearchBar = ({\n  textSearchCallback,\n  openModalCallback,\n}: SearchBarProps) => {\n  const { activeQuery, queryText } = useGrantMatchContext();\n\n  return (\n    <BaseSearchBar>\n      <TextSearchArea $showBorder={activeQuery.text !== \"\"}>\n        <QueryTextInput />\n\n        {queryText !== \"\" ? (\n          <ResetTextButton />\n        ) : (\n          <ResetTextButtonPlaceholder />\n        )}\n      </TextSearchArea>\n\n      <TextSearchButton textSearchCallback={textSearchCallback} />\n      <OpenModalButton openModalCallback={openModalCallback} />\n    </BaseSearchBar>\n  );\n};\n\nexport default SearchBar;\n\nconst BaseSearchBar = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 100%;\n\n  color: ${Color.typography.blackHigh};\n  background-color: ${Color.neutral.white};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 8px;\n    padding: 0px;\n\n    box-shadow: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 16px;\n    padding: 12px 16px;\n\n    box-shadow: 0px 0px 40px 0px #00000008;\n    border-radius: 12px;\n  }\n`;\n\nconst TextSearchArea = styled.div<{ $showBorder: boolean }>`\n  display: flex;\n  align-items: center;\n\n  width: 100%;\n\n  background-color: ${Color.neutral.grey4};\n  border-radius: 8px;\n\n  border: 1px solid\n    ${({ $showBorder }) =>\n      $showBorder ? Color.brand.grantbiiYellow : Color.neutral.grey4};\n`;\n\nconst QueryTextInput = () => {\n  const { activeQuery, updateActiveQuery, queryText, updateQueryText } =\n    useGrantMatchContext();\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" && !event.repeat) {\n      event.preventDefault();\n      updateActiveQuery({ files: activeQuery.files, text: queryText });\n    }\n  };\n\n  return (\n    <BaseQueryTextInput\n      value={queryText}\n      onChange={(event) => updateQueryText(event.target.value)}\n      onKeyDown={onKeyDown}\n      placeholder=\"Search grant or describe your project\"\n    />\n  );\n};\n\nconst BaseQueryTextInput = styled.input`\n  width: 100%;\n  margin-left: 16px;\n  outline: none;\n  border: none;\n\n  background-color: ${Color.neutral.grey4};\n  text-overflow: ellipsis;\n`;\n\nconst IconOnlyButton = css`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 38px;\n  min-width: 38px;\n  height: 38px;\n\n  border-radius: 8px;\n`;\n\nconst ResetTextButton = () => {\n  const { activeQuery, updateActiveQuery, updateQueryText } =\n    useGrantMatchContext();\n\n  const onClick = () => {\n    updateQueryText(\"\");\n    updateActiveQuery({ files: activeQuery.files, text: \"\" });\n  };\n\n  return (\n    <BaseResetTextButton type=\"button\" onClick={onClick}>\n      <SystemIcon.XIcon size={20} color={Color.neutral.grey1} />\n    </BaseResetTextButton>\n  );\n};\n\nconst BaseResetTextButton = styled.button`\n  ${IconOnlyButton}\n\n  background-color: ${Color.neutral.grey4};\n  border: 1px solid ${Color.neutral.grey4};\n`;\n\nconst ResetTextButtonPlaceholder = styled.div`\n  width: 40px;\n  height: 40px;\n\n  background-color: ${Color.neutral.grey4};\n  border-radius: 8px;\n`;\n\ntype TextSearchButtonProps = {\n  textSearchCallback?: () => void;\n};\n\nconst TextSearchButton = ({ textSearchCallback }: TextSearchButtonProps) => {\n  const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();\n\n  const onClickSearch = () => {\n    if (textSearchCallback) {\n      textSearchCallback();\n    }\n\n    updateActiveQuery({ files: activeQuery.files, text: queryText });\n  };\n\n  return (\n    <BaseSearchButton type=\"button\" onClick={onClickSearch}>\n      <SystemIcon.MagnifyingGlassIcon size={20} color={Color.neutral.white} />\n    </BaseSearchButton>\n  );\n};\n\nconst BaseSearchButton = styled.button`\n  ${IconOnlyButton}\n\n  background-color: ${Color.brand.grantbiiBlue};\n  border: 1px solid ${Color.brand.grantbiiBlue};\n`;\n\ntype OpenModalButtonProps = {\n  openModalCallback?: () => void;\n};\n\nconst OpenModalButton = ({ openModalCallback }: OpenModalButtonProps) => {\n  const { openModal } = useGrantMatchContext();\n\n  const onClickOpen = () => {\n    if (openModalCallback) {\n      openModalCallback();\n    }\n\n    openModal();\n  };\n\n  return (\n    <BaseOpenModalButton onClick={onClickOpen}>\n      <SystemIcon.FileArrowUpIcon size={20} />\n      <OpenModalButtonText>File Drop</OpenModalButtonText>\n    </BaseOpenModalButton>\n  );\n};\n\nconst BaseOpenModalButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n\n  height: 38px;\n\n  border: 1px solid ${Color.neutral.grey3};\n  border-radius: 8px;\n\n  background-color: ${Color.neutral.grey3};\n  color: ${Color.typography.blackHigh};\n\n  ${applyTypography(Typography.bodySecondaryRegular)}\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 38px;\n    min-width: 38px;\n    padding: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: auto;\n    min-width: 88px;\n    padding: 2px 16px;\n  }\n`;\n\nconst OpenModalButtonText = styled.p`\n  font-weight: 500;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    display: none;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    display: inline;\n  }\n`;\n"]}

package/core/organisms/GrantMatch/index.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { checkGrantMatchActive } from "@grantbii/ui-core/match/validations";
-import { useState } from "react";
-import styled from "styled-components";
-import { useModal } from "../../organisms/Modal";
-import ActiveQueryFiles from "./ActiveQueryFiles";
-import GrantMatchModal from "./GrantMatchModal";
-import SearchBar from "./SearchBar";
-import { GrantMatchContext } from "./context";
-const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGrantsCallback, closeModalCallback, openModalCallback, }) => {
-    const { showModal, openModal, closeModal } = useModal();
-    const [queryText, setQueryText] = useState(activeQuery.text);
-    const updateQueryText = (newText) => setQueryText(newText);
-    // TODO: refactor away?
-    const commonProps = {
-        activeQuery,
-        updateActiveQuery,
-        queryText,
-        updateQueryText,
-        openModal,
-        closeModal,
-    };
-    return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsx(SearchBar, { textSearchCallback: textSearchCallback, openModalCallback: openModalCallback }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), showModal ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
-};
-export default GrantMatch;
-const BaseGrantMatch = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  width: 100%;
-  max-width: 100vw;
-`;
-export const useGrantMatchActiveQuery = (performGrantMatch, resetGrantMatch) => {
-    const [activeQuery, setActiveQuery] = useState({
-        files: [],
-        text: "",
-    });
-    const updateActiveQuery = (newQuery) => {
-        setActiveQuery({ ...newQuery });
-        if (checkGrantMatchActive(newQuery)) {
-            performGrantMatch(newQuery);
-        }
-        else {
-            resetGrantMatch();
-        }
-    };
-    return { activeQuery, updateActiveQuery };
-};
-//# sourceMappingURL=index.js.map

package/core/organisms/GrantMatch/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAW9C,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,GACD,EAAE,EAAE;IACpB,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEnE,uBAAuB;IACvB,MAAM,WAAW,GAAG;QAClB,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC5C,MAAC,cAAc,eACb,KAAC,SAAS,IACR,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,GACpC,EAED,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,mBAAK,EAE3D,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,eAAe,IACd,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACc,GACU,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,iBAAsD,EACtD,eAA2B,EACV,EAAE;IACnB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB;QAC9D,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,EAAE;KACT,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,cAAc,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;QAEhC,IAAI,qBAAqB,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAC5C,CAAC,CAAC","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { checkGrantMatchActive } from \"@grantbii/ui-core/match/validations\";\nimport { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { useModal } from \"../../organisms/Modal\";\nimport ActiveQueryFiles from \"./ActiveQueryFiles\";\nimport GrantMatchModal from \"./GrantMatchModal\";\nimport SearchBar from \"./SearchBar\";\nimport { GrantMatchContext } from \"./context\";\n\ntype GrantMatchProps = {\n  activeQuery: GrantMatchQuery;\n  updateActiveQuery: (newQuery: GrantMatchQuery) => void;\n  textSearchCallback?: () => void;\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n  openModalCallback?: () => void;\n};\n\nconst GrantMatch = ({\n  activeQuery,\n  updateActiveQuery,\n  textSearchCallback,\n  findGrantsCallback,\n  closeModalCallback,\n  openModalCallback,\n}: GrantMatchProps) => {\n  const { showModal, openModal, closeModal } = useModal();\n  const [queryText, setQueryText] = useState(activeQuery.text);\n  const updateQueryText = (newText: string) => setQueryText(newText);\n\n  // TODO: refactor away?\n  const commonProps = {\n    activeQuery,\n    updateActiveQuery,\n    queryText,\n    updateQueryText,\n    openModal,\n    closeModal,\n  };\n\n  return (\n    <GrantMatchContext.Provider value={commonProps}>\n      <BaseGrantMatch>\n        <SearchBar\n          textSearchCallback={textSearchCallback}\n          openModalCallback={openModalCallback}\n        />\n\n        {activeQuery.files.length > 0 ? <ActiveQueryFiles /> : <></>}\n\n        {showModal ? (\n          <GrantMatchModal\n            findGrantsCallback={findGrantsCallback}\n            closeModalCallback={closeModalCallback}\n          />\n        ) : (\n          <></>\n        )}\n      </BaseGrantMatch>\n    </GrantMatchContext.Provider>\n  );\n};\n\nexport default GrantMatch;\n\nconst BaseGrantMatch = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  width: 100%;\n  max-width: 100vw;\n`;\n\nexport const useGrantMatchActiveQuery = (\n  performGrantMatch: (newQuery: GrantMatchQuery) => void,\n  resetGrantMatch: () => void,\n): GrantMatchProps => {\n  const [activeQuery, setActiveQuery] = useState<GrantMatchQuery>({\n    files: [],\n    text: \"\",\n  });\n\n  const updateActiveQuery = (newQuery: GrantMatchQuery) => {\n    setActiveQuery({ ...newQuery });\n\n    if (checkGrantMatchActive(newQuery)) {\n      performGrantMatch(newQuery);\n    } else {\n      resetGrantMatch();\n    }\n  };\n\n  return { activeQuery, updateActiveQuery };\n};\n"]}