@grantbii/design-system 1.0.51 → 1.0.52

package/core/organisms/GrantMatch.d.ts

@@ -1,12 +1,9 @@
-type MatchQuery = {
-    files: File[];
-    text: string;
-};
+import { GrantMatchQuery } from "@grantbii/ui-base/match/models";
 type GrantMatchProps = {
-    query: MatchQuery;
+    query: GrantMatchQuery;
     updateQueryFiles: (newFiles: File[]) => void;
     updateQueryText: (newText: string) => void;
-    onPerformGrantMatch: (query: MatchQuery) => void;
+    onPerformGrantMatch: (query: GrantMatchQuery) => void;
     onResetGrantMatch: () => void;
 };
 declare const GrantMatch: ({ query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;

package/core/organisms/GrantMatch.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isGrantMatchActive } from "@grantbii/ui-base/match/mappings";
 import { useState } from "react";
 import styled from "styled-components";
 import { Badge, Button, Textarea } from "../atoms";
@@ -7,7 +8,8 @@ import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
 const GrantMatch = ({ query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, }) => {
     const { showModal, openModal, closeModal } = useModal();
     const { performGrantMatch, resetGrantMatch, removeUploadedFile, removeQueryText, } = useGrantMatch(query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, closeModal);
-    return (_jsxs(Container, { children: [_jsx(GrantMatchButtons, { active: isQueryActive(query), onClickMatch: () => openModal(), onClickReset: () => resetGrantMatch() }), isQueryActive(query) ? (_jsx(QueryItems, { uploadedFiles: query.files, removeUploadedFile: removeUploadedFile, queryText: query.text, removeQueryText: removeQueryText })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeFiles: query.files, activeText: query.text, performGrantMatch: performGrantMatch, onClickCancel: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
+    const isActive = isGrantMatchActive(query);
+    return (_jsxs(Container, { children: [_jsx(GrantMatchButtons, { isActive: isActive, onClickMatch: () => openModal(), onClickReset: () => resetGrantMatch() }), isActive ? (_jsx(QueryItems, { uploadedFiles: query.files, removeUploadedFile: removeUploadedFile, queryText: query.text, removeQueryText: removeQueryText })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeFiles: query.files, activeText: query.text, performGrantMatch: performGrantMatch, onClickCancel: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
 };
 export default GrantMatch;
 export const useMatchQuery = () => {
@@ -19,7 +21,7 @@ export const useMatchQuery = () => {
         updateQueryText: (newText) => setText(newText),
     };
 };
-const useGrantMatch = (matchQuery, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, closeModal) => {
+const useGrantMatch = (query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, closeModal) => {
     const performGrantMatch = (newFiles, newText) => {
         updateQueryFiles(newFiles);
         updateQueryText(newText);
@@ -32,10 +34,10 @@ const useGrantMatch = (matchQuery, updateQueryFiles, updateQueryText, onPerformG
         onResetGrantMatch();
     };
     const removeUploadedFile = (fileName) => {
-        const newFiles = matchQuery.files.filter((file) => file.name !== fileName);
+        const newFiles = query.files.filter((file) => file.name !== fileName);
         updateQueryFiles(newFiles);
-        const newQuery = { files: newFiles, text: matchQuery.text };
-        if (isQueryActive(newQuery)) {
+        const newQuery = { files: newFiles, text: query.text };
+        if (isGrantMatchActive(newQuery)) {
             onPerformGrantMatch(newQuery);
         }
         else {
@@ -44,8 +46,8 @@ const useGrantMatch = (matchQuery, updateQueryFiles, updateQueryText, onPerformG
     };
     const removeQueryText = () => {
         updateQueryText("");
-        const newQuery = { files: matchQuery.files, text: "" };
-        if (isQueryActive(newQuery)) {
+        const newQuery = { files: query.files, text: "" };
+        if (isGrantMatchActive(newQuery)) {
             onPerformGrantMatch(newQuery);
         }
         else {
@@ -59,7 +61,6 @@ const useGrantMatch = (matchQuery, updateQueryFiles, updateQueryText, onPerformG
         removeQueryText,
     };
 };
-const isQueryActive = (query) => query.files.length !== 0 || query.text.trim() !== "";
 const Container = styled.div `
   display: flex;
   flex-direction: column;
@@ -70,13 +71,13 @@ const Container = styled.div `
   width: 100%;
   max-width: 100vw;
 `;
-const GrantMatchButtons = ({ active, onClickMatch, onClickReset, }) => (_jsxs(Buttons, { children: [_jsx(GrantMatchButton, { active: active, onClick: onClickMatch }), active ? (_jsx(Button, { text: "Reset", onClick: onClickReset, color: Colors.typography.blackMedium, underline: true })) : (_jsx(_Fragment, {}))] }));
+const GrantMatchButtons = ({ isActive, onClickMatch, onClickReset, }) => (_jsxs(Buttons, { children: [_jsx(GrantMatchButton, { isActive: isActive, onClick: onClickMatch }), isActive ? (_jsx(Button, { text: "Reset", onClick: onClickReset, color: Colors.typography.blackMedium, underline: true })) : (_jsx(_Fragment, {}))] }));
 const Buttons = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
 `;
-const GrantMatchButton = ({ active, onClick }) => (_jsxs(BaseGrantMatchButton, { type: "button", "$active": active, onClick: onClick, children: [_jsx(Icons.GrantMatchIcon, { size: 20 }), _jsx("p", { children: "Find grants that match your needs" }), _jsx(Icons.MagnifyingGlassIcon, { size: 20 })] }));
+const GrantMatchButton = ({ isActive, onClick }) => (_jsxs(BaseGrantMatchButton, { type: "button", "$isActive": isActive, onClick: onClick, children: [_jsx(Icons.GrantMatchIcon, { size: 20 }), _jsx("p", { children: "Find grants that match your needs" }), _jsx(Icons.MagnifyingGlassIcon, { size: 20 })] }));
 const BaseGrantMatchButton = styled.button `
   display: flex;
   align-items: center;
@@ -92,7 +93,7 @@ const BaseGrantMatchButton = styled.button `
   color: ${Colors.typography.blackMedium};
   background-color: ${Colors.base.white};
   border: 1px solid
-    ${({ $active }) => ($active ? Colors.accent.yellow1 : Colors.neutral.grey3)};
+    ${({ $isActive }) => $isActive ? Colors.accent.yellow1 : Colors.neutral.grey3};
 `;
 const QueryItems = ({ uploadedFiles, removeUploadedFile, queryText, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [uploadedFiles.map((file) => {
             var _a;

package/core/organisms/YesNoOptions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { LogicOption } from "@grantbii/ui-base/grant/enums";
 import styled from "styled-components";
 import { RadioButton } from "../atoms";
-import { LogicOption } from "@grantbii/ui-base/enums";
 const YesNoOptions = ({ name, yesProps, noProps, unsureProps, }) => (_jsxs(RadioGroup, { children: [_jsx(RadioButton, Object.assign({}, yesProps, { id: `${name}-yes`, label: LogicOption.YES, value: LogicOption.YES, name: name })), _jsx(RadioButton, Object.assign({}, noProps, { id: `${name}-no`, label: LogicOption.NO, value: LogicOption.NO, name: name })), unsureProps ? (_jsx(RadioButton, Object.assign({}, unsureProps, { id: `${name}-unsure`, label: LogicOption.UNSURE, value: LogicOption.UNSURE, name: name }))) : (_jsx(_Fragment, {}))] }));
 export default YesNoOptions;
 const RadioGroup = styled.div `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "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.13",
+    "@grantbii/ui-base": "1.0.14",
     "@phosphor-icons/react": "^2.1.10",
     "country-flag-icons": "^1.5.19",
     "next": "^15.3.5",

package/stories/molecules/RadioButtons.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RadioButtons } from "@/.";
-import { Location } from "@grantbii/ui-base/enums";
+import { Location } from "@grantbii/ui-base/grant/enums";
 import { useState } from "react";
 const RadioButtonsExample = ({ controlled }) => {
     const [location, setLocation] = useState("");

package/stories/organisms/GrantMatch.stories.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GrantMatch } from "@/.";
 import { useMatchQuery } from "@/core/organisms/GrantMatch";
+import styled from "styled-components";
 const GrantMatchExample = () => {
     const matchQuery = useMatchQuery();
-    return (_jsx(GrantMatch, Object.assign({}, matchQuery, { onPerformGrantMatch: () => console.log("finding grants..."), onResetGrantMatch: () => console.log("resetting grant match...") })));
+    return (_jsx(Container, { children: _jsx(GrantMatch, Object.assign({}, matchQuery, { onPerformGrantMatch: () => console.log("finding grants..."), onResetGrantMatch: () => console.log("resetting grant match...") })) }));
 };
+const Container = styled.div `
+  width: 90vw;
+`;
 const meta = {
     title: "Organisms/Grant Match",
     component: GrantMatchExample,