@grantbii/design-system 1.19.5 → 1.20.0

package/core/organisms/Modal.js

@@ -91,5 +91,5 @@ const ModalFooter = styled.div `
 
   padding: 16px 20px;
 `;
-const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { label: closeText, onClick: onClick, variant: "tertiary" }));
+const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { label: closeText, onClick: onClick, variant: "tertiary", size: "small" }));
 //# sourceMappingURL=Modal.js.map

package/core/organisms/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type JSX,\n  type MouseEventHandler,\n  type ReactNode,\n  useCallback,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Responsive } from \"../atoms\";\nimport { Button, Overlay } from \"../molecules\";\n\ntype ModalProps = {\n  header?: ReactNode;\n  content: JSX.Element;\n  footer?: ReactNode;\n  width?: string;\n  height?: string;\n  onClickClose?: MouseEventHandler<HTMLButtonElement>;\n  closeText?: string;\n};\n\nconst Modal = ({\n  header,\n  content,\n  footer,\n  width,\n  height,\n  onClickClose,\n  closeText,\n}: ModalProps) =>\n  createPortal(\n    <Overlay $centerContent>\n      <ModalWindow $width={width} $height={height}>\n        {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n        <ModalBody>{content}</ModalBody>\n\n        {onClickClose || footer ? (\n          <ModalFooter>\n            {onClickClose ? (\n              <CloseButton onClick={onClickClose} closeText={closeText} />\n            ) : (\n              <></>\n            )}\n\n            {footer ? footer : <></>}\n          </ModalFooter>\n        ) : (\n          <></>\n        )}\n      </ModalWindow>\n    </Overlay>,\n    document.body,\n  );\n\nexport default Modal;\n\nexport const useModal = () => {\n  const [showModal, setShowModal] = useState(false);\n\n  const lockScroll = useCallback(() => {\n    document.body.style.overflow = \"hidden\";\n  }, []);\n\n  const unlockScroll = useCallback(() => {\n    document.body.style.overflow = \"initial\";\n  }, []);\n\n  const openModal = () => {\n    setShowModal(true);\n    lockScroll();\n  };\n\n  const closeModal = () => {\n    setShowModal(false);\n    unlockScroll();\n  };\n\n  return {\n    showModal,\n    openModal,\n    closeModal,\n  };\n};\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n  display: flex;\n  flex-direction: column;\n\n  background-color: ${Color.neutral.white};\n\n  min-height: 100px;\n  max-height: 100vh;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    position: fixed;\n    bottom: 0px;\n    left: 0px;\n\n    width: 100%;\n    height: 100%;\n\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    position: static;\n    bottom: auto;\n    left: auto;\n\n    width: ${({ $width }) => $width};\n    height: ${({ $height }) => $height};\n\n    border-radius: 8px;\n  }\n`;\n\nconst ModalHeader = styled.div`\n  font-weight: 500;\n  font-size: 18px;\n\n  padding: 12px 20px;\n  margin-bottom: 12px;\n\n  border-bottom: 1px solid ${Color.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  height: 100%;\n  overflow-y: auto;\n\n  > * {\n    width: 100%;\n    height: 100%;\n    min-height: 100px;\n\n    padding: 2px 20px;\n    border: none;\n  }\n`;\n\nconst ModalFooter = styled.div`\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n\n  padding: 16px 20px;\n`;\n\ntype CloseButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  closeText?: string;\n};\n\nconst CloseButton = ({ onClick, closeText = \"Close\" }: CloseButtonProps) => (\n  <Button label={closeText} onClick={onClick} variant=\"tertiary\" />\n);\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type JSX,\n  type MouseEventHandler,\n  type ReactNode,\n  useCallback,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Responsive } from \"../atoms\";\nimport { Button, Overlay } from \"../molecules\";\n\ntype ModalProps = {\n  header?: ReactNode;\n  content: JSX.Element;\n  footer?: ReactNode;\n  width?: string;\n  height?: string;\n  onClickClose?: MouseEventHandler<HTMLButtonElement>;\n  closeText?: string;\n};\n\nconst Modal = ({\n  header,\n  content,\n  footer,\n  width,\n  height,\n  onClickClose,\n  closeText,\n}: ModalProps) =>\n  createPortal(\n    <Overlay $centerContent>\n      <ModalWindow $width={width} $height={height}>\n        {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n        <ModalBody>{content}</ModalBody>\n\n        {onClickClose || footer ? (\n          <ModalFooter>\n            {onClickClose ? (\n              <CloseButton onClick={onClickClose} closeText={closeText} />\n            ) : (\n              <></>\n            )}\n\n            {footer ? footer : <></>}\n          </ModalFooter>\n        ) : (\n          <></>\n        )}\n      </ModalWindow>\n    </Overlay>,\n    document.body,\n  );\n\nexport default Modal;\n\nexport const useModal = () => {\n  const [showModal, setShowModal] = useState(false);\n\n  const lockScroll = useCallback(() => {\n    document.body.style.overflow = \"hidden\";\n  }, []);\n\n  const unlockScroll = useCallback(() => {\n    document.body.style.overflow = \"initial\";\n  }, []);\n\n  const openModal = () => {\n    setShowModal(true);\n    lockScroll();\n  };\n\n  const closeModal = () => {\n    setShowModal(false);\n    unlockScroll();\n  };\n\n  return {\n    showModal,\n    openModal,\n    closeModal,\n  };\n};\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n  display: flex;\n  flex-direction: column;\n\n  background-color: ${Color.neutral.white};\n\n  min-height: 100px;\n  max-height: 100vh;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    position: fixed;\n    bottom: 0px;\n    left: 0px;\n\n    width: 100%;\n    height: 100%;\n\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    position: static;\n    bottom: auto;\n    left: auto;\n\n    width: ${({ $width }) => $width};\n    height: ${({ $height }) => $height};\n\n    border-radius: 8px;\n  }\n`;\n\nconst ModalHeader = styled.div`\n  font-weight: 500;\n  font-size: 18px;\n\n  padding: 12px 20px;\n  margin-bottom: 12px;\n\n  border-bottom: 1px solid ${Color.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  height: 100%;\n  overflow-y: auto;\n\n  > * {\n    width: 100%;\n    height: 100%;\n    min-height: 100px;\n\n    padding: 2px 20px;\n    border: none;\n  }\n`;\n\nconst ModalFooter = styled.div`\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n\n  padding: 16px 20px;\n`;\n\ntype CloseButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  closeText?: string;\n};\n\nconst CloseButton = ({ onClick, closeText = \"Close\" }: CloseButtonProps) => (\n  <Button label={closeText} onClick={onClick} variant=\"tertiary\" size=\"small\" />\n);\n"]}

package/core/organisms/SearchBar.d.ts

@@ -0,0 +1,10 @@
+import type { GrantMatchQuery } from "@grantbii/ui-core/match/entities";
+type SearchBarProps = {
+    activeQuery: GrantMatchQuery;
+    updateActiveQuery: (query: GrantMatchQuery) => void;
+    queryText: string;
+    updateQueryText: (newText: string) => void;
+    textSearchCallback?: () => void;
+};
+declare const SearchBar: ({ activeQuery, updateActiveQuery, queryText, updateQueryText, textSearchCallback, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
+export default SearchBar;

package/core/organisms/SearchBar.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Color, Responsive, SystemIcon } from "../atoms";
+import { Button } from "../molecules";
+const SearchBar = ({ activeQuery, updateActiveQuery, queryText, updateQueryText, textSearchCallback, }) => {
+    const resetSearch = () => {
+        updateQueryText("");
+        updateActiveQuery({ files: activeQuery.files, text: "" });
+    };
+    const executeSearch = () => {
+        textSearchCallback?.();
+        updateActiveQuery({ files: activeQuery.files, text: queryText });
+    };
+    return (_jsxs(BaseSearchBar, { children: [_jsxs(TextSearchArea, { "$showBorder": activeQuery.text !== "", children: [_jsx(TextInput, { queryText: queryText, updateQueryText: updateQueryText, executeSearch: executeSearch }), queryText === "" ? (_jsx(ResetButtonPlaceholder, {})) : (_jsx(ResetButton, { resetSearch: resetSearch }))] }), _jsx(Button, { Icon: SystemIcon.MagnifyingGlassIcon, onClick: executeSearch, size: "small" })] }));
+};
+export default SearchBar;
+const BaseSearchBar = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+
+  width: 100%;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    border-radius: 0px;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    border-radius: 12px;
+  }
+`;
+const TextSearchArea = styled.div `
+  display: flex;
+  align-items: center;
+
+  height: 40px;
+  width: 100%;
+
+  background-color: ${Color.neutral.grey4};
+  border: 1px solid ${Color.neutral.grey2};
+  border-radius: 8px;
+
+  &:focus-within {
+    background-color: ${Color.neutral.white};
+    border: 1px solid ${Color.accent.yellow1};
+  }
+`;
+const TextInput = ({ queryText, updateQueryText, executeSearch, }) => {
+    const onKeyDown = (event) => {
+        if (event.key === "Enter" && !event.repeat) {
+            event.preventDefault();
+            executeSearch();
+        }
+    };
+    return (_jsx(BaseTextInput, { value: queryText, onChange: (event) => updateQueryText(event.target.value), onKeyDown: onKeyDown, placeholder: "Search grant or describe your project" }));
+};
+const BaseTextInput = styled.input `
+  width: 100%;
+  margin-left: 16px;
+
+  text-overflow: ellipsis;
+
+  background-color: transparent;
+  outline: none;
+  border: none;
+`;
+const ResetButton = ({ resetSearch }) => (_jsx(BaseResetButton, { type: "button", onClick: resetSearch, children: _jsx(SystemIcon.XIcon, { size: 14, color: Color.neutral.black }) }));
+const BaseResetButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 38px;
+  min-width: 38px;
+  height: 38px;
+
+  border-radius: 8px;
+`;
+const ResetButtonPlaceholder = styled.div `
+  width: 38px;
+  height: 38px;
+
+  border-radius: 8px;
+`;
+//# sourceMappingURL=SearchBar.js.map

package/core/organisms/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport type { KeyboardEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, SystemIcon } from \"../atoms\";\nimport { Button } from \"../molecules\";\n\ntype SearchBarProps = {\n  activeQuery: GrantMatchQuery;\n  updateActiveQuery: (query: GrantMatchQuery) => void;\n  queryText: string;\n  updateQueryText: (newText: string) => void;\n  textSearchCallback?: () => void;\n};\n\nconst SearchBar = ({\n  activeQuery,\n  updateActiveQuery,\n  queryText,\n  updateQueryText,\n  textSearchCallback,\n}: SearchBarProps) => {\n  const resetSearch = () => {\n    updateQueryText(\"\");\n    updateActiveQuery({ files: activeQuery.files, text: \"\" });\n  };\n\n  const executeSearch = () => {\n    textSearchCallback?.();\n    updateActiveQuery({ files: activeQuery.files, text: queryText });\n  };\n\n  return (\n    <BaseSearchBar>\n      <TextSearchArea $showBorder={activeQuery.text !== \"\"}>\n        <TextInput\n          queryText={queryText}\n          updateQueryText={updateQueryText}\n          executeSearch={executeSearch}\n        />\n\n        {queryText === \"\" ? (\n          <ResetButtonPlaceholder />\n        ) : (\n          <ResetButton resetSearch={resetSearch} />\n        )}\n      </TextSearchArea>\n\n      <Button\n        Icon={SystemIcon.MagnifyingGlassIcon}\n        onClick={executeSearch}\n        size=\"small\"\n      />\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  gap: 8px;\n\n  width: 100%;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    border-radius: 12px;\n  }\n`;\n\nconst TextSearchArea = styled.div<{ $showBorder: boolean }>`\n  display: flex;\n  align-items: center;\n\n  height: 40px;\n  width: 100%;\n\n  background-color: ${Color.neutral.grey4};\n  border: 1px solid ${Color.neutral.grey2};\n  border-radius: 8px;\n\n  &:focus-within {\n    background-color: ${Color.neutral.white};\n    border: 1px solid ${Color.accent.yellow1};\n  }\n`;\n\ntype TextInputProps = {\n  queryText: string;\n  updateQueryText: (newText: string) => void;\n  executeSearch: () => void;\n};\n\nconst TextInput = ({\n  queryText,\n  updateQueryText,\n  executeSearch,\n}: TextInputProps) => {\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" && !event.repeat) {\n      event.preventDefault();\n      executeSearch();\n    }\n  };\n\n  return (\n    <BaseTextInput\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 BaseTextInput = styled.input`\n  width: 100%;\n  margin-left: 16px;\n\n  text-overflow: ellipsis;\n\n  background-color: transparent;\n  outline: none;\n  border: none;\n`;\n\ntype ResetButtonProps = {\n  resetSearch: () => void;\n};\n\nconst ResetButton = ({ resetSearch }: ResetButtonProps) => (\n  <BaseResetButton type=\"button\" onClick={resetSearch}>\n    <SystemIcon.XIcon size={14} color={Color.neutral.black} />\n  </BaseResetButton>\n);\n\nconst BaseResetButton = styled.button`\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 ResetButtonPlaceholder = styled.div`\n  width: 38px;\n  height: 38px;\n\n  border-radius: 8px;\n`;\n"]}

package/core/organisms/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Dropdown, type DropdownProps } from "./Dropdown";
 export { default as FileDrop, useFileDrop } from "./FileDrop";
-export { default as GrantMatch, useGrantMatchActiveQuery } from "./GrantMatch";
 export { default as Modal, useModal } from "./Modal";
+export { default as SearchBar } from "./SearchBar";

package/core/organisms/index.js

@@ -1,5 +1,5 @@
 export { default as Dropdown } from "./Dropdown";
 export { default as FileDrop, useFileDrop } from "./FileDrop";
-export { default as GrantMatch, useGrantMatchActiveQuery } from "./GrantMatch";
 export { default as Modal, useModal } from "./Modal";
+export { default as SearchBar } from "./SearchBar";
 //# sourceMappingURL=index.js.map

package/core/organisms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as GrantMatch, useGrantMatchActiveQuery } from \"./GrantMatch\";\nexport { default as Modal, useModal } from \"./Modal\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as SearchBar } from \"./SearchBar\";\n"]}

package/core/{organisms → templates}/GrantMatch/ActiveQueryFiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveQueryFiles.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/ActiveQueryFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,MAAC,eAAe,eACd,KAAC,UAAU,KAAG,EACd,KAAC,gBAAgB,KAAG,IACJ,CACnB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAEhC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG;YACf,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;YACjE,IAAI,EAAE,WAAW,CAAC,IAAI;SACvB,CAAC;QAEF,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,cACZ,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,KAAC,KAAK,IAEJ,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EACzD,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,QAAQ,EAC1D,YAAY,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EACpD,gBAAgB,EAAE,GAAG,IAJhB,IAAI,CAAC,IAAI,CAKd,CACH,CAAC,GACa,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBhC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,EACvE,OAAO,EAAC,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { SystemIcon } from \"../../atoms\";\nimport { Badge, Button } from \"../../molecules\";\nimport { FILE_TYPE_ICON_MAP } from \"../../shared\";\nimport { useGrantMatchContext } from \"./context\";\n\nconst ActiveQueryFiles = () => (\n  <BaseActiveFiles>\n    <FileBadges />\n    <ResetFilesButton />\n  </BaseActiveFiles>\n);\n\nexport default ActiveQueryFiles;\n\nconst BaseActiveFiles = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nconst FileBadges = () => {\n  const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n  const removeActiveQueryFile = (fileName: string) => {\n    const newQuery = {\n      files: activeQuery.files.filter((file) => file.name !== fileName),\n      text: activeQuery.text,\n    };\n\n    updateActiveQuery(newQuery);\n  };\n\n  return (\n    <BaseFileBadges>\n      {activeQuery.files.map((file) => (\n        <Badge\n          key={file.name}\n          label={file.name.substring(0, file.name.lastIndexOf(\".\"))}\n          Icon={FILE_TYPE_ICON_MAP[file.type] ?? SystemIcon.FileIcon}\n          onClickClose={() => removeActiveQueryFile(file.name)}\n          labelWidthPixels={160}\n        />\n      ))}\n    </BaseFileBadges>\n  );\n};\n\nconst BaseFileBadges = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  width: 100%;\n\n  overflow-x: auto;\n\n  /* hide scrollbar but still allow for scrolling */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* TODO: fade effect on overflow-x */\n`;\n\nconst ResetFilesButton = () => {\n  const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n  return (\n    <Button\n      label=\"Reset\"\n      onClick={() => updateActiveQuery({ files: [], text: activeQuery.text })}\n      variant=\"text\"\n    />\n  );\n};\n"]}
+{"version":3,"file":"ActiveQueryFiles.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/ActiveQueryFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,MAAC,eAAe,eACd,KAAC,UAAU,KAAG,EACd,KAAC,gBAAgB,KAAG,IACJ,CACnB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAEhC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG;YACf,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;YACjE,IAAI,EAAE,WAAW,CAAC,IAAI;SACvB,CAAC;QAEF,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,cACZ,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,KAAC,KAAK,IAEJ,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EACzD,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,QAAQ,EAC1D,YAAY,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EACpD,gBAAgB,EAAE,GAAG,IAJhB,IAAI,CAAC,IAAI,CAKd,CACH,CAAC,GACa,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBhC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,EACvE,OAAO,EAAC,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { SystemIcon } from \"../../atoms\";\nimport { Badge, Button } from \"../../molecules\";\nimport { FILE_TYPE_ICON_MAP } from \"../../shared\";\nimport { useGrantMatchContext } from \"./context\";\n\nconst ActiveQueryFiles = () => (\n  <BaseActiveFiles>\n    <FileBadges />\n    <ResetFilesButton />\n  </BaseActiveFiles>\n);\n\nexport default ActiveQueryFiles;\n\nconst BaseActiveFiles = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n\nconst FileBadges = () => {\n  const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n  const removeActiveQueryFile = (fileName: string) => {\n    const newQuery = {\n      files: activeQuery.files.filter((file) => file.name !== fileName),\n      text: activeQuery.text,\n    };\n\n    updateActiveQuery(newQuery);\n  };\n\n  return (\n    <BaseFileBadges>\n      {activeQuery.files.map((file) => (\n        <Badge\n          key={file.name}\n          label={file.name.substring(0, file.name.lastIndexOf(\".\"))}\n          Icon={FILE_TYPE_ICON_MAP[file.type] ?? SystemIcon.FileIcon}\n          onClickClose={() => removeActiveQueryFile(file.name)}\n          labelWidthPixels={160}\n        />\n      ))}\n    </BaseFileBadges>\n  );\n};\n\nconst BaseFileBadges = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  width: 100%;\n\n  overflow-x: auto;\n\n  /* hide scrollbar but still allow for scrolling */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* TODO: fade effect on overflow-x */\n`;\n\nconst ResetFilesButton = () => {\n  const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n  return (\n    <Button\n      label=\"Reset\"\n      onClick={() => updateActiveQuery({ files: [], text: activeQuery.text })}\n      variant=\"text\"\n    />\n  );\n};\n"]}

package/core/{organisms → templates}/GrantMatch/GrantMatchModal.js

@@ -59,6 +59,6 @@ const FindGrantsButton = ({ files, findGrantsCallback, }) => {
         updateActiveQuery({ files, text: queryText });
         closeModal();
     };
-    return (_jsx(Button, { label: "Find My Grants", onClick: onClick, variant: "secondary", disabled: !hasQuery }));
+    return (_jsx(Button, { label: "Find My Grants", disabled: !hasQuery, onClick: onClick, variant: "secondary", size: "small" }));
 };
 //# sourceMappingURL=GrantMatchModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/templates/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      disabled={!hasQuery}\n      onClick={onClick}\n      variant=\"secondary\"\n      size=\"small\"\n    />\n  );\n};\n"]}

package/core/templates/GrantMatch/OpenModalButton.d.ts

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

package/core/templates/GrantMatch/OpenModalButton.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Color, Responsive, SystemIcon, Typography } from "../../atoms";
+import { applyTypography } from "../../integrations";
+import { useGrantMatchContext } from "./context";
+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" })] }));
+};
+export default OpenModalButton;
+const BaseOpenModalButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  height: 40px;
+
+  border-radius: 8px;
+
+  background-color: ${Color.neutral.grey3};
+  color: ${Color.typography.blackHigh};
+
+  ${applyTypography(Typography.bodySecondaryRegular)}
+
+  &:hover {
+    background-color: ${Color.accent.blue3};
+  }
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    width: 40px;
+    min-width: 40px;
+    padding: 0px;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    width: auto;
+    min-width: 90px;
+    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=OpenModalButton.js.map

package/core/templates/GrantMatch/OpenModalButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenModalButton.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/OpenModalButton.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAMjD,MAAM,eAAe,GAAG,CAAC,EAAE,iBAAiB,EAAwB,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAE7C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,iBAAiB,EAAE,CAAC;YACtB,iBAAiB,EAAE,CAAC;QACtB,CAAC;QAED,SAAS,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,mBAAmB,IAAC,OAAO,EAAE,WAAW,aACvC,KAAC,UAAU,CAAC,eAAe,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,KAAC,mBAAmB,4BAAgC,IAChC,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;sBAUnB,KAAK,CAAC,OAAO,CAAC,KAAK;WAC9B,KAAK,CAAC,UAAU,CAAC,SAAS;;IAEjC,eAAe,CAAC,UAAU,CAAC,oBAAoB,CAAC;;;wBAG5B,KAAK,CAAC,MAAM,CAAC,KAAK;;;oBAGtB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;qBAMlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;CAKvD,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;oBAMhB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;qBAIlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;CAGvD,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Color, Responsive, SystemIcon, Typography } from \"../../atoms\";\nimport { applyTypography } from \"../../integrations\";\nimport { useGrantMatchContext } from \"./context\";\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\nexport default OpenModalButton;\n\nconst BaseOpenModalButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n\n  height: 40px;\n\n  border-radius: 8px;\n\n  background-color: ${Color.neutral.grey3};\n  color: ${Color.typography.blackHigh};\n\n  ${applyTypography(Typography.bodySecondaryRegular)}\n\n  &:hover {\n    background-color: ${Color.accent.blue3};\n  }\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 40px;\n    min-width: 40px;\n    padding: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: auto;\n    min-width: 90px;\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 → templates}/GrantMatch/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAWlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC5C,IAAI,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAA0B,EAAE;IAC9D,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;IAC3E,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { createContext, useContext } from \"react\";\n\ntype GrantMatchCommonProps = {\n  activeQuery: GrantMatchQuery;\n  updateActiveQuery: (query: GrantMatchQuery) => void;\n  queryText: string;\n  updateQueryText: (newText: string) => void;\n  openModal: () => void;\n  closeModal: () => void;\n};\n\nexport const GrantMatchContext = createContext<GrantMatchCommonProps | null>(\n  null,\n);\n\nexport const useGrantMatchContext = (): GrantMatchCommonProps => {\n  const context = useContext(GrantMatchContext);\n\n  if (!context) {\n    throw new Error(\"useGrantMatchContext must be used within its Provider\");\n  }\n\n  return context;\n};\n"]}
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAWlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC5C,IAAI,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAA0B,EAAE;IAC9D,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;IAC3E,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { createContext, useContext } from \"react\";\n\ntype GrantMatchCommonProps = {\n  activeQuery: GrantMatchQuery;\n  updateActiveQuery: (query: GrantMatchQuery) => void;\n  queryText: string;\n  updateQueryText: (newText: string) => void;\n  openModal: () => void;\n  closeModal: () => void;\n};\n\nexport const GrantMatchContext = createContext<GrantMatchCommonProps | null>(\n  null,\n);\n\nexport const useGrantMatchContext = (): GrantMatchCommonProps => {\n  const context = useContext(GrantMatchContext);\n\n  if (!context) {\n    throw new Error(\"useGrantMatchContext must be used within its Provider\");\n  }\n\n  return context;\n};\n"]}

package/core/templates/GrantMatch/index.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { checkGrantMatchActive } from "@grantbii/ui-core/match/validations";
+import { useMemo, useState } from "react";
+import styled from "styled-components";
+import { Color, Responsive } from "../../atoms";
+import { SearchBar, useModal } from "../../organisms";
+import ActiveQueryFiles from "./ActiveQueryFiles";
+import GrantMatchModal from "./GrantMatchModal";
+import OpenModalButton from "./OpenModalButton";
+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);
+    const commonProps = useMemo(() => ({
+        activeQuery,
+        updateActiveQuery,
+        queryText,
+        updateQueryText,
+        openModal,
+        closeModal,
+    }), [
+        activeQuery,
+        updateActiveQuery,
+        queryText,
+        updateQueryText,
+        openModal,
+        closeModal,
+    ]);
+    return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, textSearchCallback: textSearchCallback }), _jsx(OpenModalButton, { 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;
+`;
+const SearchBarContainer = 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;
+  }
+`;
+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/templates/GrantMatch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { checkGrantMatchActive } from \"@grantbii/ui-core/match/validations\";\nimport { useMemo, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive } from \"../../atoms\";\nimport { SearchBar, useModal } from \"../../organisms\";\nimport ActiveQueryFiles from \"./ActiveQueryFiles\";\nimport GrantMatchModal from \"./GrantMatchModal\";\nimport OpenModalButton from \"./OpenModalButton\";\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  const commonProps = useMemo(\n    () => ({\n      activeQuery,\n      updateActiveQuery,\n      queryText,\n      updateQueryText,\n      openModal,\n      closeModal,\n    }),\n    [\n      activeQuery,\n      updateActiveQuery,\n      queryText,\n      updateQueryText,\n      openModal,\n      closeModal,\n    ],\n  );\n\n  return (\n    <GrantMatchContext.Provider value={commonProps}>\n      <BaseGrantMatch>\n        <SearchBarContainer>\n          <SearchBar\n            activeQuery={activeQuery}\n            updateActiveQuery={updateActiveQuery}\n            queryText={queryText}\n            updateQueryText={updateQueryText}\n            textSearchCallback={textSearchCallback}\n          />\n          <OpenModalButton openModalCallback={openModalCallback} />\n        </SearchBarContainer>\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\nconst SearchBarContainer = 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\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"]}

package/core/templates/index.d.ts

@@ -1 +1,2 @@
 export { default as ErrorFallback } from "./ErrorFallback";
+export { default as GrantMatch, useGrantMatchActiveQuery } from "./GrantMatch";

package/core/templates/index.js

@@ -1,2 +1,3 @@
 export { default as ErrorFallback } from "./ErrorFallback";
+export { default as GrantMatch, useGrantMatchActiveQuery } from "./GrantMatch";
 //# sourceMappingURL=index.js.map

package/core/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default as ErrorFallback } from \"./ErrorFallback\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default as ErrorFallback } from \"./ErrorFallback\";\nexport { default as GrantMatch, useGrantMatchActiveQuery } from \"./GrantMatch\";\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.19.5",
+  "version": "1.20.0",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -58,7 +58,7 @@
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "storybook": "10.3.5",
-    "styled-components": "6.4.0",
+    "styled-components": "6.4.1",
     "typescript": "6.0.3",
     "vitest": "4.1.5"
   },

package/stories/organisms/SearchBar.stories.d.ts

@@ -0,0 +1,6 @@
+import { SearchBar } from "@/.";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+declare const meta: Meta<typeof SearchBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/stories/organisms/SearchBar.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchBar } from "@/.";
+import { useState } from "react";
+const SearchBarExample = () => {
+    const [activeQuery, setActiveQuery] = useState(emptyQuery);
+    const updateActiveQuery = (newQuery) => setActiveQuery(newQuery);
+    const [queryText, setQueryText] = useState("");
+    const updateQueryText = (newText) => setQueryText(newText);
+    return (_jsx(SearchBar, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText }));
+};
+const emptyQuery = {
+    text: "",
+    files: [],
+};
+const meta = {
+    title: "Organisms/SearchBar",
+    component: SearchBarExample,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+//# sourceMappingURL=SearchBar.stories.js.map

package/stories/organisms/SearchBar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../stories/organisms/SearchBar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB,UAAU,CAAC,CAAC;IAC5E,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE,CACtD,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEnE,OAAO,CACL,KAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,GAChC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC","sourcesContent":["import { SearchBar } from \"@/.\";\nimport type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\nconst SearchBarExample = () => {\n  const [activeQuery, setActiveQuery] = useState<GrantMatchQuery>(emptyQuery);\n  const updateActiveQuery = (newQuery: GrantMatchQuery) =>\n    setActiveQuery(newQuery);\n\n  const [queryText, setQueryText] = useState(\"\");\n  const updateQueryText = (newText: string) => setQueryText(newText);\n\n  return (\n    <SearchBar\n      activeQuery={activeQuery}\n      updateActiveQuery={updateActiveQuery}\n      queryText={queryText}\n      updateQueryText={updateQueryText}\n    />\n  );\n};\n\nconst emptyQuery = {\n  text: \"\",\n  files: [],\n};\n\nconst meta: Meta<typeof SearchBar> = {\n  title: \"Organisms/SearchBar\",\n  component: SearchBarExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {},\n};\n"]}

package/stories/{organisms → templates}/GrantMatch.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GrantMatch } from "@/.";
-import { useGrantMatchActiveQuery } from "@/core/organisms/GrantMatch";
+import { useGrantMatchActiveQuery } from "@/core/templates/GrantMatch";
 import {} from "@grantbii/ui-core/match/entities";
 import { useState } from "react";
 import styled from "styled-components";
@@ -24,7 +24,7 @@ const Container = styled.div `
   padding: 16px;
 `;
 const meta = {
-    title: "Organisms/Grant Match",
+    title: "Templates/Grant Match",
     component: GrantMatchExample,
     tags: ["autodocs"],
     parameters: {

package/stories/{organisms → templates}/GrantMatch.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"GrantMatch.stories.js","sourceRoot":"","sources":["../../../stories/organisms/GrantMatch.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAwB,MAAM,kCAAkC,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AASvC,MAAM,iBAAiB,GAAG,CAAC,SAAoB,EAAE,EAAE;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;IAEtD,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrE,MAAM,cAAc,GAAG,UAAU,SAAS,eAAe,QAAQ,CAAC,IAAI,GAAG,CAAC;QAE1E,SAAS,CAAC,+BAA+B,cAAc,EAAE,CAAC,CAAC;QAC3D,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,qBAAqB,cAAc,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAEzD,MAAM,oBAAoB,GAAG,wBAAwB,CACnD,iBAAiB,EACjB,eAAe,CAChB,CAAC;IAEF,OAAO,CACL,MAAC,SAAS,eACR,KAAC,UAAU,OAAK,oBAAoB,KAAM,SAAS,GAAI,EACvD,oCAAY,MAAM,IAAK,IACb,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM3B,CAAC;AAEF,MAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC;QACpD,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC;QACtD,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC;QAChD,iBAAiB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC;KAChD;CACF,CAAC","sourcesContent":["import { GrantMatch } from \"@/.\";\nimport { useGrantMatchActiveQuery } from \"@/core/organisms/GrantMatch\";\nimport { type GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\nimport styled from \"styled-components\";\n\ntype Callbacks = {\n  textSearchCallback?: () => void;\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n  openModalCallback?: () => void;\n};\n\nconst GrantMatchExample = (callbacks: Callbacks) => {\n  const [status, setStatus] = useState(\"pending query\");\n\n  const performGrantMatch = (newQuery: GrantMatchQuery) => {\n    const fileNames = newQuery.files.map((file) => file.name).join(\", \");\n    const printableQuery = `files [${fileNames}] and text [${newQuery.text}]`;\n\n    setStatus(`trying to find grants using ${printableQuery}`);\n    setTimeout(() => setStatus(`found grants with ${printableQuery}`), 1000);\n  };\n\n  const resetGrantMatch = () => setStatus(\"pending query\");\n\n  const grantMatchQueryProps = useGrantMatchActiveQuery(\n    performGrantMatch,\n    resetGrantMatch,\n  );\n\n  return (\n    <Container>\n      <GrantMatch {...grantMatchQueryProps} {...callbacks} />\n      <p>Status: {status}</p>\n    </Container>\n  );\n};\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  padding: 16px;\n`;\n\nconst meta: Meta<typeof GrantMatchExample> = {\n  title: \"Organisms/Grant Match\",\n  component: GrantMatchExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const DefaultExample: Story = {\n  args: {},\n};\n\nexport const WithCallbacks: Story = {\n  args: {\n    textSearchCallback: () => alert(\"doing text search\"),\n    findGrantsCallback: () => alert(\"finding your grants\"),\n    closeModalCallback: () => alert(\"closing modal\"),\n    openModalCallback: () => alert(\"opening modal\"),\n  },\n};\n"]}
+{"version":3,"file":"GrantMatch.stories.js","sourceRoot":"","sources":["../../../stories/templates/GrantMatch.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAwB,MAAM,kCAAkC,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AASvC,MAAM,iBAAiB,GAAG,CAAC,SAAoB,EAAE,EAAE;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;IAEtD,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrE,MAAM,cAAc,GAAG,UAAU,SAAS,eAAe,QAAQ,CAAC,IAAI,GAAG,CAAC;QAE1E,SAAS,CAAC,+BAA+B,cAAc,EAAE,CAAC,CAAC;QAC3D,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,qBAAqB,cAAc,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAEzD,MAAM,oBAAoB,GAAG,wBAAwB,CACnD,iBAAiB,EACjB,eAAe,CAChB,CAAC;IAEF,OAAO,CACL,MAAC,SAAS,eACR,KAAC,UAAU,OAAK,oBAAoB,KAAM,SAAS,GAAI,EACvD,oCAAY,MAAM,IAAK,IACb,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM3B,CAAC;AAEF,MAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC;QACpD,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC;QACtD,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC;QAChD,iBAAiB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC;KAChD;CACF,CAAC","sourcesContent":["import { GrantMatch } from \"@/.\";\nimport { useGrantMatchActiveQuery } from \"@/core/templates/GrantMatch\";\nimport { type GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\nimport styled from \"styled-components\";\n\ntype Callbacks = {\n  textSearchCallback?: () => void;\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n  openModalCallback?: () => void;\n};\n\nconst GrantMatchExample = (callbacks: Callbacks) => {\n  const [status, setStatus] = useState(\"pending query\");\n\n  const performGrantMatch = (newQuery: GrantMatchQuery) => {\n    const fileNames = newQuery.files.map((file) => file.name).join(\", \");\n    const printableQuery = `files [${fileNames}] and text [${newQuery.text}]`;\n\n    setStatus(`trying to find grants using ${printableQuery}`);\n    setTimeout(() => setStatus(`found grants with ${printableQuery}`), 1000);\n  };\n\n  const resetGrantMatch = () => setStatus(\"pending query\");\n\n  const grantMatchQueryProps = useGrantMatchActiveQuery(\n    performGrantMatch,\n    resetGrantMatch,\n  );\n\n  return (\n    <Container>\n      <GrantMatch {...grantMatchQueryProps} {...callbacks} />\n      <p>Status: {status}</p>\n    </Container>\n  );\n};\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  padding: 16px;\n`;\n\nconst meta: Meta<typeof GrantMatchExample> = {\n  title: \"Templates/Grant Match\",\n  component: GrantMatchExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const DefaultExample: Story = {\n  args: {},\n};\n\nexport const WithCallbacks: Story = {\n  args: {\n    textSearchCallback: () => alert(\"doing text search\"),\n    findGrantsCallback: () => alert(\"finding your grants\"),\n    closeModalCallback: () => alert(\"closing modal\"),\n    openModalCallback: () => alert(\"opening modal\"),\n  },\n};\n"]}