@grantbii/design-system 1.0.55 → 1.0.57

package/core/organisms/GrantMatch.d.ts

@@ -1,15 +1,14 @@
 import { GrantMatchQuery } from "@grantbii/ui-base/match/models";
+type GrantMatchProps = GrantMatchQueryProps & {
+    isModalFullScreen?: boolean;
+};
+declare const GrantMatch: ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
+export default GrantMatch;
 type GrantMatchQueryProps = {
     query: GrantMatchQuery;
-    updateQueryFiles: (newFiles: File[]) => void;
+    updateQuery: (newQuery: GrantMatchQuery) => void;
     removeQueryFile: (fileName: string) => void;
-    updateQueryText: (newText: string) => void;
     removeQueryText: () => void;
     resetQuery: () => void;
 };
-type GrantMatchProps = GrantMatchQueryProps & {
-    isModalFullScreen?: boolean;
-};
-declare const GrantMatch: ({ query, updateQueryFiles, removeQueryFile, updateQueryText, removeQueryText, resetQuery, isModalFullScreen, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
-export default GrantMatch;
-export declare const useGrantMatchQueryItems: () => GrantMatchQueryProps;
+export declare const useGrantMatchQueryItems: (performGrantMatch: (newQuery: GrantMatchQuery) => void, resetGrantMatch: () => void) => GrantMatchQueryProps;

package/core/organisms/GrantMatch.js

@@ -5,38 +5,64 @@ import styled from "styled-components";
 import { Badge, Button, Textarea } from "../atoms";
 import { Colors, Icons } from "../foundations";
 import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
-const GrantMatch = ({ query, updateQueryFiles, removeQueryFile, updateQueryText, removeQueryText, resetQuery, isModalFullScreen, }) => {
+const GrantMatch = ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }) => {
     const { showModal, openModal, closeModal } = useModal();
     const isActive = isGrantMatchActive(query);
-    const performGrantMatch = (newFiles, newText) => {
-        updateQueryFiles(newFiles);
-        updateQueryText(newText);
+    const updateActiveQuery = (newQuery) => {
+        updateQuery(newQuery);
         closeModal();
     };
-    return (_jsxs(Container, { children: [_jsx(GrantMatchButtons, { isActive: isActive, onClickMatch: () => openModal(), onClickReset: () => resetQuery() }), isActive ? (_jsx(QueryItems, { queryFiles: query.files, removeQueryFile: removeQueryFile, queryText: query.text, removeQueryText: removeQueryText })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeFiles: query.files, activeText: query.text, performGrantMatch: performGrantMatch, onClickCancel: () => closeModal(), isFullScreen: isModalFullScreen })) : (_jsx(_Fragment, {}))] }));
+    return (_jsxs(BaseGrantMatch, { children: [_jsx(GrantMatchButtons, { isActive: isActive, onClickMatch: () => openModal(), onClickReset: () => resetQuery() }), isActive ? (_jsx(QueryItems, { activeQuery: query, removeQueryFile: removeQueryFile, removeQueryText: removeQueryText })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeQuery: query, updateActiveQuery: updateActiveQuery, onClickCancel: () => closeModal(), isFullScreen: isModalFullScreen })) : (_jsx(_Fragment, {}))] }));
 };
 export default GrantMatch;
-const BLANK_GRANT_MATCH_QUERY = { files: [], text: "" };
-export const useGrantMatchQueryItems = () => {
+export const useGrantMatchQueryItems = (performGrantMatch, resetGrantMatch) => {
     const [query, setQuery] = useState(() => (Object.assign({}, BLANK_GRANT_MATCH_QUERY)));
-    const updateQueryFiles = (files) => setQuery(({ text }) => ({ files, text }));
-    const removeQueryFile = (fileName) => setQuery(({ files, text }) => ({
-        files: files.filter((file) => file.name !== fileName),
-        text,
-    }));
-    const updateQueryText = (text) => setQuery(({ files }) => ({ files, text }));
-    const removeQueryText = () => setQuery(({ files }) => ({ files, text: "" }));
-    const resetQuery = () => setQuery(Object.assign({}, BLANK_GRANT_MATCH_QUERY));
+    const updateQuery = (newQuery) => {
+        setQuery(Object.assign({}, newQuery));
+        if (isGrantMatchActive(newQuery)) {
+            performGrantMatch(newQuery);
+        }
+        else {
+            resetGrantMatch();
+        }
+    };
+    const removeQueryFile = (fileName) => {
+        const newQuery = {
+            files: query.files.filter((file) => file.name !== fileName),
+            text: query.text,
+        };
+        updateQuery(newQuery);
+        if (isGrantMatchActive(newQuery)) {
+            performGrantMatch(newQuery);
+        }
+        else {
+            resetGrantMatch();
+        }
+    };
+    const removeQueryText = () => {
+        const newQuery = { files: query.files, text: "" };
+        updateQuery(newQuery);
+        if (isGrantMatchActive(newQuery)) {
+            performGrantMatch(newQuery);
+        }
+        else {
+            resetGrantMatch();
+        }
+    };
+    const resetQuery = () => {
+        setQuery(Object.assign({}, BLANK_GRANT_MATCH_QUERY));
+        resetGrantMatch();
+    };
     return {
         query,
-        updateQueryFiles,
+        updateQuery,
         removeQueryFile,
-        updateQueryText,
         removeQueryText,
         resetQuery,
     };
 };
-const Container = styled.div `
+const BLANK_GRANT_MATCH_QUERY = { files: [], text: "" };
+const BaseGrantMatch = styled.div `
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -70,10 +96,10 @@ const BaseGrantMatchButton = styled.button `
   border: 1px solid
     ${({ $isActive }) => $isActive ? Colors.accent.yellow1 : Colors.neutral.grey3};
 `;
-const QueryItems = ({ queryFiles, removeQueryFile, queryText, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [queryFiles.map((file) => {
+const QueryItems = ({ activeQuery, removeQueryFile, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [activeQuery.files.map((file) => {
             var _a;
             return (_jsx(Badge, { text: file.name, Icon: (_a = FILE_TYPE_ICON_MAP[file.type]) !== null && _a !== void 0 ? _a : Icons.FileIcon, onClickClose: () => removeQueryFile(file.name), textWidthPixels: 160 }, file.name));
-        }), queryText === "" ? (_jsx(_Fragment, {})) : (_jsx(Badge, { text: "Additional Information", Icon: Icons.TextAaIcon, onClickClose: () => removeQueryText(), textWidthPixels: 180 }, "additional-information-query-item"))] }));
+        }), activeQuery.text === "" ? (_jsx(_Fragment, {})) : (_jsx(Badge, { text: "Additional Information", Icon: Icons.TextAaIcon, onClickClose: () => removeQueryText(), textWidthPixels: 180 }, "additional-information-query-item"))] }));
 const BaseQueryItems = styled.div `
   display: flex;
   align-items: center;
@@ -91,11 +117,10 @@ const BaseQueryItems = styled.div `
 const FILE_TYPE_ICON_MAP = {
     "application/pdf": Icons.FilePdfIcon,
 };
-const GrantMatchModal = ({ activeFiles, activeText, performGrantMatch, onClickCancel, isFullScreen, }) => {
-    const { files, uploadFiles, removeFile } = useFileDrop(activeFiles);
-    const [queryText, setQueryText] = useState(activeText);
-    const updateQueryText = (newText) => setQueryText(newText);
-    return (_jsx(Modal, { header: _jsx(Header, {}), content: _jsx(Content, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, queryText: queryText, updateQueryText: updateQueryText }), footer: _jsx(Button, { text: "Find My Grants", onClick: () => performGrantMatch(files, queryText), backgroundColor: Colors.accent.yellow1 }), onClickCancel: onClickCancel, isFullScreen: isFullScreen }));
+const GrantMatchModal = ({ activeQuery, updateActiveQuery, onClickCancel, isFullScreen, }) => {
+    const { files, uploadFiles, removeFile } = useFileDrop(activeQuery.files);
+    const [text, setText] = useState(activeQuery.text);
+    return (_jsx(Modal, { header: _jsx(Header, {}), content: _jsx(Content, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, queryText: text, updateQueryText: (newText) => setText(newText) }), footer: _jsx(Button, { text: "Find My Grants", onClick: () => updateActiveQuery({ files, text }), backgroundColor: Colors.accent.yellow1 }), onClickCancel: onClickCancel, isFullScreen: isFullScreen }));
 };
 const Header = () => (_jsxs(BaseHeader, { children: [_jsx(Icons.GrantMatchIcon, { size: 24 }), _jsx("div", { children: "Grant Match" })] }));
 const BaseHeader = styled.div `
@@ -103,10 +128,8 @@ const BaseHeader = styled.div `
   align-items: center;
   gap: 12px;
 `;
-const Content = ({ files, uploadFiles, removeFile, queryText, updateQueryText, }) => {
-    const additionalInformationId = "grant-match-additional-information";
-    return (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(QueryText, { children: [_jsx("label", { htmlFor: additionalInformationId, children: "Additional Information" }), _jsx(Textarea, { id: additionalInformationId, value: queryText, onChange: (event) => updateQueryText(event.target.value) })] })] }));
-};
+const Content = ({ files, uploadFiles, removeFile, queryText, updateQueryText, }) => (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(QueryText, { children: [_jsx("label", { htmlFor: ADDITIONAL_INFORMATION_ID, children: "Additional Information" }), _jsx(Textarea, { id: ADDITIONAL_INFORMATION_ID, value: queryText, onChange: (event) => updateQueryText(event.target.value) })] })] }));
+const ADDITIONAL_INFORMATION_ID = "grant-match-additional-information";
 const BaseContent = styled.div `
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/organisms/GrantMatch.stories.js

@@ -1,12 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { GrantMatch } from "@/.";
 import { useGrantMatchQueryItems } from "@/core/organisms/GrantMatch";
+import { useState } from "react";
 import styled from "styled-components";
 const GrantMatchExample = ({ isModalFullScreen }) => {
-    const grantMatchProps = useGrantMatchQueryItems();
-    return (_jsx(Container, { children: _jsx(GrantMatch, Object.assign({}, grantMatchProps, { isModalFullScreen: isModalFullScreen })) }));
+    const [status, setStatus] = useState("Pending input");
+    const performGrantMatch = (newQuery) => {
+        const fileNames = newQuery.files.map((file) => file.name).join(", ");
+        setStatus(`Finding grants using files [${fileNames}] and text [${newQuery.text}]`);
+        setTimeout(() => setStatus("Found grants"), 3000);
+    };
+    const resetGrantMatch = () => setStatus("Pending input");
+    const grantMatchQueryProps = useGrantMatchQueryItems(performGrantMatch, resetGrantMatch);
+    return (_jsxs(Container, { children: [_jsxs(GrantMatchStatus, { children: ["Status: ", status] }), _jsx(GrantMatch, Object.assign({}, grantMatchQueryProps, { isModalFullScreen: isModalFullScreen }))] }));
 };
+const GrantMatchStatus = styled.p `
+  margin: 0px 16px;
+`;
 const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+
   width: 90vw;
 `;
 const meta = {