@grantbii/design-system 1.19.6 → 1.20.0

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,3 +1,4 @@
 export { default as Dropdown, type DropdownProps } from "./Dropdown";
 export { default as FileDrop, useFileDrop } from "./FileDrop";
 export { default as Modal, useModal } from "./Modal";
+export { default as SearchBar } from "./SearchBar";

package/core/organisms/index.js

@@ -1,4 +1,5 @@
 export { default as Dropdown } from "./Dropdown";
 export { default as FileDrop, useFileDrop } from "./FileDrop";
 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,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 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/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/templates/GrantMatch/index.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useModal } from "../../organisms/Modal";
+import { Color, Responsive } from "../../atoms";
+import { SearchBar, useModal } from "../../organisms";
 import ActiveQueryFiles from "./ActiveQueryFiles";
 import GrantMatchModal from "./GrantMatchModal";
-import SearchBar from "./SearchBar";
+import OpenModalButton from "./OpenModalButton";
 import { GrantMatchContext } from "./context";
 const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGrantsCallback, closeModalCallback, openModalCallback, }) => {
     const { showModal, openModal, closeModal } = useModal();
@@ -26,7 +27,7 @@ const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGr
         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, {}))] }) }));
+    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 `
@@ -37,6 +38,32 @@ const BaseGrantMatch = styled.div `
   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: [],

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,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,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CAAC,EACF;QACE,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CACF,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 { useMemo, 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  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        <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"]}
+{"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/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.19.6",
+  "version": "1.20.0",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

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"]}