@grantbii/design-system 1.0.69 → 1.0.70

package/core/organisms/GrantMatch.d.ts

@@ -1,12 +1,8 @@
-import { GrantFilters } from "@grantbii/ui-base/grant/models";
 import { GrantMatchQuery } from "@grantbii/ui-base/match/models";
 type GrantMatchProps = {
     activeQuery: GrantMatchQuery;
     updateActiveQuery: (newQuery: GrantMatchQuery) => void;
-    removeActiveQueryFile: (fileName: string) => void;
-    removeActiveQueryText: () => void;
-    resetActiveQuery: () => void;
 };
-declare const GrantMatch: ({ activeQuery, updateActiveQuery, removeActiveQueryFile, removeActiveQueryText, resetActiveQuery, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
+declare const GrantMatch: ({ activeQuery, updateActiveQuery }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
 export default GrantMatch;
-export declare const useGrantMatchActiveQuery: (filters: GrantFilters, performGrantMatch: (newQuery: GrantMatchQuery, filters: GrantFilters) => void, resetGrantMatch: () => void) => GrantMatchProps;
+export declare const useGrantMatchActiveQuery: (performGrantMatch: (newQuery: GrantMatchQuery) => void, resetGrantMatch: () => void) => GrantMatchProps;

package/core/organisms/GrantMatch.js

@@ -1,35 +1,42 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { isGrantMatchActive } from "@grantbii/ui-base/match/mappings";
+import { checkGrantMatchActive } from "@grantbii/ui-base/match/mappings";
 import { useState } from "react";
 import styled from "styled-components";
 import { Badge, Button, Textarea } from "../atoms";
 import { Colors, Icons, Responsive, Typography } from "../foundations";
 import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
-const GrantMatch = ({ activeQuery, updateActiveQuery, removeActiveQueryFile, removeActiveQueryText, resetActiveQuery, }) => {
+const GrantMatch = ({ activeQuery, updateActiveQuery }) => {
+    // TODO: refactor into useGrantMatch
     const { showModal, openModal, closeModal } = useModal();
     const [queryText, setQueryText] = useState(activeQuery.text);
     const updateQueryText = (newText) => setQueryText(newText);
-    const onClickSearch = () => updateActiveQuery(Object.assign(Object.assign({}, activeQuery), { text: queryText }));
+    const { removeActiveQueryFile, removeActiveQueryText, resetActiveQuery } = useGrantMatch(activeQuery, updateActiveQuery);
+    const onClickSearch = () => updateActiveQuery({ files: activeQuery.files, text: queryText });
     const onClickReset = () => {
         updateQueryText("");
         resetActiveQuery();
     };
-    return (_jsxs(BaseGrantMatch, { children: [_jsx(GrantMatchActions, { queryText: queryText, updateQueryText: updateQueryText, onClickSearch: onClickSearch, onClickFileDrop: () => openModal(), onClickReset: onClickReset, isActive: activeQuery.text !== "" }), activeQuery.files.length > 0 ? (_jsxs(ActiveQueryRow, { children: [_jsx(ActiveQueryFiles, { activeQuery: activeQuery, removeQueryFile: removeActiveQueryFile, removeQueryText: removeActiveQueryText }), _jsx(SmallScreenResetButton, { onClick: onClickReset })] })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, closeModal: closeModal })) : (_jsx(_Fragment, {}))] }));
+    return (_jsxs(BaseGrantMatch, { children: [_jsx(GrantMatchActions, { queryText: queryText, updateQueryText: updateQueryText, onClickSearch: onClickSearch, onClickFileDrop: () => openModal(), onClickReset: onClickReset, isActive: checkGrantMatchActive(activeQuery) }), activeQuery.files.length > 0 ? (_jsxs(ActiveQueryRow, { children: [_jsx(ActiveQueryFiles, { activeQuery: activeQuery, removeQueryFile: removeActiveQueryFile, removeQueryText: removeActiveQueryText }), _jsx(SmallScreenResetButton, { onClick: onClickReset })] })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, closeModal: closeModal })) : (_jsx(_Fragment, {}))] }));
 };
 export default GrantMatch;
-// TODO: refactor
-export const useGrantMatchActiveQuery = (filters, performGrantMatch, resetGrantMatch) => {
-    const [activeQuery, setActiveQuery] = useState(() => (Object.assign({}, BLANK_GRANT_MATCH_QUERY)));
-    const updateActiveQuery = (query) => {
-        setActiveQuery(Object.assign({}, query));
-        if (isGrantMatchActive(query)) {
-            performGrantMatch(query, filters);
+export const useGrantMatchActiveQuery = (performGrantMatch, resetGrantMatch) => {
+    const [activeQuery, setActiveQuery] = useState({
+        files: [],
+        text: "",
+    });
+    const updateActiveQuery = (newQuery) => {
+        setActiveQuery(Object.assign({}, newQuery));
+        if (checkGrantMatchActive(newQuery)) {
+            performGrantMatch(newQuery);
         }
         else {
             resetGrantMatch();
         }
     };
+    return { activeQuery, updateActiveQuery };
+};
+const useGrantMatch = (activeQuery, updateActiveQuery) => {
     const removeActiveQueryFile = (fileName) => {
         const newQuery = {
             files: activeQuery.files.filter((file) => file.name !== fileName),
@@ -41,16 +48,13 @@ export const useGrantMatchActiveQuery = (filters, performGrantMatch, resetGrantM
         const newQuery = { files: activeQuery.files, text: "" };
         updateActiveQuery(newQuery);
     };
-    const resetActiveQuery = () => updateActiveQuery(Object.assign({}, BLANK_GRANT_MATCH_QUERY));
+    const resetActiveQuery = () => updateActiveQuery({ files: [], text: "" });
     return {
-        activeQuery,
-        updateActiveQuery,
         removeActiveQueryFile,
         removeActiveQueryText,
         resetActiveQuery,
     };
 };
-const BLANK_GRANT_MATCH_QUERY = { files: [], text: "" };
 const BaseGrantMatch = styled.div `
   display: flex;
   flex-direction: column;
@@ -59,7 +63,7 @@ const BaseGrantMatch = styled.div `
   width: 100%;
   max-width: 100vw;
 `;
-const GrantMatchActions = ({ queryText, updateQueryText, onClickSearch, onClickFileDrop, onClickReset, isActive, }) => (_jsxs(Actions, { children: [_jsxs(SearchBar, { "$isActive": isActive, children: [_jsx(Input, { value: queryText, onChange: (event) => updateQueryText(event.target.value), placeholder: "Find grants that match your needs" }), _jsx(SearchButton, { onClick: onClickSearch }), _jsx(FileDropButton, { onClick: onClickFileDrop })] }), isActive ? _jsx(BigScreenResetButton, { onClick: onClickReset }) : _jsx(_Fragment, {})] }));
+const GrantMatchActions = ({ queryText, updateQueryText, onClickSearch, onClickFileDrop, onClickReset, isActive, }) => (_jsxs(Actions, { children: [_jsxs(SearchBar, { "$isActive": isActive, children: [_jsx(Input, { value: queryText, onChange: (event) => updateQueryText(event.target.value), placeholder: "Find grants that match your needs" }), _jsxs(SearchButtons, { children: [_jsx(SearchButton, { onClick: onClickSearch }), _jsx(FileDropButton, { onClick: onClickFileDrop })] })] }), isActive ? _jsx(BigScreenResetButton, { onClick: onClickReset }) : _jsx(_Fragment, {})] }));
 const Actions = styled.div `
   display: flex;
   align-items: center;
@@ -68,6 +72,7 @@ const Actions = styled.div `
 const SearchBar = styled.div `
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   padding: 6px 16px;
 
@@ -89,10 +94,22 @@ const SearchBar = styled.div `
   }
 `;
 const Input = styled.input `
-  width: 300px;
+  width: 280px;
   border: none;
   outline: none;
 `;
+const SearchButtons = styled.div `
+  display: flex;
+  align-items: center;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 8px;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 16px;
+  }
+`;
 const SearchButton = ({ onClick }) => (_jsx(BaseSearchButton, { type: "button", onClick: onClick, children: _jsx(Icons.MagnifyingGlassIcon, { size: 16, color: Colors.neutral.grey1 }) }));
 const BaseSearchButton = styled.button `
   display: flex;
@@ -134,6 +151,10 @@ const BaseFileDropButton = styled.button `
   }
 `;
 const FileDropButtonText = styled.p `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
   @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
     display: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.69",
+  "version": "1.0.70",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -18,7 +18,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@grantbii/ui-base": "1.0.18",
+    "@grantbii/ui-base": "1.0.19",
     "@phosphor-icons/react": "^2.1.10",
     "country-flag-icons": "^1.5.19",
     "next": "^15.5.0",

package/stories/organisms/GrantMatch.stories.js

@@ -12,7 +12,7 @@ const GrantMatchExample = () => {
         setTimeout(() => setStatus(`found grants with ${printableQuery}`), 3000);
     };
     const resetGrantMatch = () => setStatus("pending query");
-    const grantMatchQueryProps = useGrantMatchActiveQuery({}, performGrantMatch, resetGrantMatch);
+    const grantMatchQueryProps = useGrantMatchActiveQuery(performGrantMatch, resetGrantMatch);
     return (_jsxs(Container, { children: [_jsx(GrantMatch, Object.assign({}, grantMatchQueryProps)), _jsxs("p", { children: ["Status: ", status] })] }));
 };
 const Container = styled.div `
@@ -22,17 +22,12 @@ const Container = styled.div `
 
   padding: 16px;
 `;
-// width: ${({ $screenSize }) => ($screenSize === "small" ? "360px" : "90vw")};
-// height: ${({ $screenSize }) => ($screenSize === "small" ? "600px" : "100vh")};
-// border: ${({ $screenSize }) =>
-//   $screenSize === "small" ? `1px solid ${Colors.neutral.grey2}` : "none"};
-// border-radius: 32px;
 const meta = {
     title: "Organisms/Grant Match",
     component: GrantMatchExample,
     tags: ["autodocs"],
     parameters: {
-        layout: "centered",
+        layout: "fullscreen",
     },
 };
 export default meta;