@grantbii/design-system 1.0.56 → 1.0.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/core/organisms/GrantMatch.d.ts +4 -8
  2. package/core/organisms/GrantMatch.js +49 -20
  3. package/package.json +1 -1
  4. package/stories/organisms/GrantMatch.stories.js +16 -6
  5. package/tsconfig.tsbuildinfo +1 -1
package/core/organisms/GrantMatch.d.ts CHANGED
@@ -1,18 +1,14 @@
1
1
  import { GrantMatchQuery } from "@grantbii/ui-base/match/models";
2
- type GrantMatchProps = {
3
- query: GrantMatchQuery;
4
- onPerformGrantMatch: (newQuery: GrantMatchQuery) => void;
5
- removeQueryFile: (fileName: string) => void;
6
- removeQueryText: () => void;
7
- resetQuery: () => void;
2
+ type GrantMatchProps = GrantMatchQueryProps & {
8
3
  isModalFullScreen?: boolean;
9
4
  };
10
- declare const GrantMatch: ({ query, onPerformGrantMatch, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
5
+ declare const GrantMatch: ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
11
6
  export default GrantMatch;
12
- export declare const useGrantMatchQueryItems: () => {
7
+ type GrantMatchQueryProps = {
13
8
  query: GrantMatchQuery;
14
9
  updateQuery: (newQuery: GrantMatchQuery) => void;
15
10
  removeQueryFile: (fileName: string) => void;
16
11
  removeQueryText: () => void;
17
12
  resetQuery: () => void;
18
13
  };
14
+ export declare const useGrantMatchQueryItems: (performGrantMatch: (newQuery: GrantMatchQuery) => void, resetGrantMatch: () => void) => GrantMatchQueryProps;
package/core/organisms/GrantMatch.js CHANGED
@@ -5,26 +5,54 @@ import styled from "styled-components";
5
5
  import { Badge, Button, Textarea } from "../atoms";
6
6
  import { Colors, Icons } from "../foundations";
7
7
  import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
8
- const GrantMatch = ({ query, onPerformGrantMatch, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }) => {
8
+ const GrantMatch = ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }) => {
9
9
  const { showModal, openModal, closeModal } = useModal();
10
10
  const isActive = isGrantMatchActive(query);
11
- const performGrantMatch = (newQuery) => {
12
- onPerformGrantMatch(newQuery);
11
+ const updateActiveQuery = (newQuery) => {
12
+ updateQuery(newQuery);
13
13
  closeModal();
14
14
  };
15
- 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, {}))] }));
15
+ 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, {}))] }));
16
16
  };
17
17
  export default GrantMatch;
18
- const BLANK_GRANT_MATCH_QUERY = { files: [], text: "" };
19
- export const useGrantMatchQueryItems = () => {
18
+ export const useGrantMatchQueryItems = (performGrantMatch, resetGrantMatch) => {
20
19
  const [query, setQuery] = useState(() => (Object.assign({}, BLANK_GRANT_MATCH_QUERY)));
21
- const updateQuery = (newQuery) => setQuery(Object.assign({}, newQuery));
22
- const removeQueryFile = (fileName) => setQuery(({ files, text }) => ({
23
- files: files.filter((file) => file.name !== fileName),
24
- text,
25
- }));
26
- const removeQueryText = () => setQuery(({ files }) => ({ files, text: "" }));
27
- const resetQuery = () => setQuery(Object.assign({}, BLANK_GRANT_MATCH_QUERY));
20
+ const updateQuery = (newQuery) => {
21
+ setQuery(Object.assign({}, newQuery));
22
+ if (isGrantMatchActive(newQuery)) {
23
+ performGrantMatch(newQuery);
24
+ }
25
+ else {
26
+ resetGrantMatch();
27
+ }
28
+ };
29
+ const removeQueryFile = (fileName) => {
30
+ const newQuery = {
31
+ files: query.files.filter((file) => file.name !== fileName),
32
+ text: query.text,
33
+ };
34
+ updateQuery(newQuery);
35
+ if (isGrantMatchActive(newQuery)) {
36
+ performGrantMatch(newQuery);
37
+ }
38
+ else {
39
+ resetGrantMatch();
40
+ }
41
+ };
42
+ const removeQueryText = () => {
43
+ const newQuery = { files: query.files, text: "" };
44
+ updateQuery(newQuery);
45
+ if (isGrantMatchActive(newQuery)) {
46
+ performGrantMatch(newQuery);
47
+ }
48
+ else {
49
+ resetGrantMatch();
50
+ }
51
+ };
52
+ const resetQuery = () => {
53
+ setQuery(Object.assign({}, BLANK_GRANT_MATCH_QUERY));
54
+ resetGrantMatch();
55
+ };
28
56
  return {
29
57
  query,
30
58
  updateQuery,
@@ -33,7 +61,8 @@ export const useGrantMatchQueryItems = () => {
33
61
  resetQuery,
34
62
  };
35
63
  };
36
- const Container = styled.div `
64
+ const BLANK_GRANT_MATCH_QUERY = { files: [], text: "" };
65
+ const BaseGrantMatch = styled.div `
37
66
  display: flex;
38
67
  flex-direction: column;
39
68
  gap: 8px;
@@ -67,10 +96,10 @@ const BaseGrantMatchButton = styled.button `
67
96
  border: 1px solid
68
97
  ${({ $isActive }) => $isActive ? Colors.accent.yellow1 : Colors.neutral.grey3};
69
98
  `;
70
- const QueryItems = ({ queryFiles, removeQueryFile, queryText, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [queryFiles.map((file) => {
99
+ const QueryItems = ({ activeQuery, removeQueryFile, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [activeQuery.files.map((file) => {
71
100
  var _a;
72
101
  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));
73
- }), queryText === "" ? (_jsx(_Fragment, {})) : (_jsx(Badge, { text: "Additional Information", Icon: Icons.TextAaIcon, onClickClose: () => removeQueryText(), textWidthPixels: 180 }, "additional-information-query-item"))] }));
102
+ }), activeQuery.text === "" ? (_jsx(_Fragment, {})) : (_jsx(Badge, { text: "Additional Information", Icon: Icons.TextAaIcon, onClickClose: () => removeQueryText(), textWidthPixels: 180 }, "additional-information-query-item"))] }));
74
103
  const BaseQueryItems = styled.div `
75
104
  display: flex;
76
105
  align-items: center;
@@ -88,10 +117,10 @@ const BaseQueryItems = styled.div `
88
117
  const FILE_TYPE_ICON_MAP = {
89
118
  "application/pdf": Icons.FilePdfIcon,
90
119
  };
91
- const GrantMatchModal = ({ activeFiles, activeText, performGrantMatch, onClickCancel, isFullScreen, }) => {
92
- const { files, uploadFiles, removeFile } = useFileDrop(activeFiles);
93
- const [text, setText] = useState(activeText);
94
- 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: () => performGrantMatch({ files, text }), backgroundColor: Colors.accent.yellow1 }), onClickCancel: onClickCancel, isFullScreen: isFullScreen }));
120
+ const GrantMatchModal = ({ activeQuery, updateActiveQuery, onClickCancel, isFullScreen, }) => {
121
+ const { files, uploadFiles, removeFile } = useFileDrop(activeQuery.files);
122
+ const [text, setText] = useState(activeQuery.text);
123
+ 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 }));
95
124
  };
96
125
  const Header = () => (_jsxs(BaseHeader, { children: [_jsx(Icons.GrantMatchIcon, { size: 24 }), _jsx("div", { children: "Grant Match" })] }));
97
126
  const BaseHeader = styled.div `
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@grantbii/design-system",
3
- "version": "1.0.56",
3
+ "version": "1.0.57",
4
4
  "description": "Grantbii's Design System",
5
5
  "homepage": "https://design.grantbii.com",
6
6
  "repository": {
package/stories/organisms/GrantMatch.stories.js CHANGED
@@ -1,16 +1,26 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
2
  import { GrantMatch } from "@/.";
3
3
  import { useGrantMatchQueryItems } from "@/core/organisms/GrantMatch";
4
+ import { useState } from "react";
4
5
  import styled from "styled-components";
5
6
  const GrantMatchExample = ({ isModalFullScreen }) => {
6
- const { query, updateQuery, removeQueryFile, removeQueryText, resetQuery } = useGrantMatchQueryItems();
7
- const onPerformGrantMatch = (newQuery) => {
8
- updateQuery(newQuery);
9
- console.log("finding grants...");
7
+ const [status, setStatus] = useState("Pending input");
8
+ const performGrantMatch = (newQuery) => {
9
+ const fileNames = newQuery.files.map((file) => file.name).join(", ");
10
+ setStatus(`Finding grants using files [${fileNames}] and text [${newQuery.text}]`);
11
+ setTimeout(() => setStatus("Found grants"), 3000);
10
12
  };
11
- return (_jsx(Container, { children: _jsx(GrantMatch, { query: query, onPerformGrantMatch: onPerformGrantMatch, removeQueryFile: removeQueryFile, removeQueryText: removeQueryText, resetQuery: resetQuery, isModalFullScreen: isModalFullScreen }) }));
13
+ const resetGrantMatch = () => setStatus("Pending input");
14
+ const grantMatchQueryProps = useGrantMatchQueryItems(performGrantMatch, resetGrantMatch);
15
+ return (_jsxs(Container, { children: [_jsxs(GrantMatchStatus, { children: ["Status: ", status] }), _jsx(GrantMatch, Object.assign({}, grantMatchQueryProps, { isModalFullScreen: isModalFullScreen }))] }));
12
16
  };
17
+ const GrantMatchStatus = styled.p `
18
+ margin: 0px 16px;
19
+ `;
13
20
  const Container = styled.div `
21
+ display: flex;
22
+ flex-direction: column;
23
+
14
24
  width: 90vw;
15
25
  `;
16
26
  const meta = {