@grantbii/design-system 1.0.69 → 1.0.71

package/core/foundations/responsive.d.ts

@@ -1,3 +1,5 @@
 export declare const WIDTH_BREAKPOINTS: {
     laptop: string;
 };
+export declare const SmallScreenOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BigScreenOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/foundations/responsive.js

@@ -1,3 +1,22 @@
+import styled from "styled-components";
 export const WIDTH_BREAKPOINTS = {
     laptop: "1024px",
 };
+export const SmallScreenOnly = styled.div `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
+`;
+export const BigScreenOnly = styled.div `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+`;

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,56 +1,35 @@
 "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 { BigScreenOnly, SmallScreenOnly } from "../foundations/responsive";
 import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
-const GrantMatch = ({ activeQuery, updateActiveQuery, removeActiveQueryFile, removeActiveQueryText, resetActiveQuery, }) => {
+const GrantMatch = ({ activeQuery, updateActiveQuery }) => {
     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 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, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, openModal: openModal }), activeQuery.files.length > 0 ? (_jsxs(ActiveQueryRow, { children: [_jsx(ActiveQueryFiles, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery }), _jsx(SmallScreenOnly, { children: _jsx(ResetButton, { updateActiveQuery: updateActiveQuery, updateQueryText: updateQueryText }) })] })) : (_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();
         }
     };
-    const removeActiveQueryFile = (fileName) => {
-        const newQuery = {
-            files: activeQuery.files.filter((file) => file.name !== fileName),
-            text: activeQuery.text,
-        };
-        updateActiveQuery(newQuery);
-    };
-    const removeActiveQueryText = () => {
-        const newQuery = { files: activeQuery.files, text: "" };
-        updateActiveQuery(newQuery);
-    };
-    const resetActiveQuery = () => updateActiveQuery(Object.assign({}, BLANK_GRANT_MATCH_QUERY));
-    return {
-        activeQuery,
-        updateActiveQuery,
-        removeActiveQueryFile,
-        removeActiveQueryText,
-        resetActiveQuery,
-    };
+    return { activeQuery, updateActiveQuery };
 };
-const BLANK_GRANT_MATCH_QUERY = { files: [], text: "" };
 const BaseGrantMatch = styled.div `
   display: flex;
   flex-direction: column;
@@ -59,7 +38,11 @@ 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 = ({ activeQuery, updateActiveQuery, queryText, updateQueryText, openModal, }) => {
+    const isActive = checkGrantMatchActive(activeQuery);
+    const onClickSearch = () => updateActiveQuery({ files: activeQuery.files, text: queryText });
+    return (_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: () => openModal() })] })] }), isActive ? (_jsx(BigScreenOnly, { children: _jsx(ResetButton, { updateActiveQuery: updateActiveQuery, updateQueryText: updateQueryText }) })) : (_jsx(_Fragment, {}))] }));
+};
 const Actions = styled.div `
   display: flex;
   align-items: center;
@@ -68,6 +51,7 @@ const Actions = styled.div `
 const SearchBar = styled.div `
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   padding: 6px 16px;
 
@@ -89,10 +73,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,26 +130,10 @@ const BaseFileDropButton = styled.button `
   }
 `;
 const FileDropButtonText = styled.p `
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: none;
-  }
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: inline;
-  }
-`;
-const SmallScreenResetButton = ({ onClick }) => (_jsx(SmallScreenReset, { children: _jsx(ResetButton, { onClick: onClick }) }));
-const SmallScreenReset = styled.div `
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: inline;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: none;
-  }
-`;
-const BigScreenResetButton = ({ onClick }) => (_jsx(BigScreenReset, { children: _jsx(ResetButton, { onClick: onClick }) }));
-const BigScreenReset = styled.div `
   @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
     display: none;
   }
@@ -162,16 +142,31 @@ const BigScreenReset = styled.div `
     display: inline;
   }
 `;
-const ResetButton = ({ onClick }) => (_jsx(Button, { text: "Reset", onClick: onClick, color: Colors.typography.blackMedium, underline: true }));
+const ResetButton = ({ updateActiveQuery, updateQueryText, }) => {
+    const onClickReset = () => {
+        updateQueryText("");
+        updateActiveQuery({ files: [], text: "" });
+    };
+    return (_jsx(Button, { text: "Reset", onClick: onClickReset, color: Colors.typography.blackMedium, underline: true }));
+};
 const ActiveQueryRow = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
-const ActiveQueryFiles = ({ activeQuery, removeQueryFile, }) => (_jsx(BaseActiveQueryFiles, { 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));
-    }) }));
+const ActiveQueryFiles = ({ activeQuery, updateActiveQuery, }) => {
+    const removeActiveQueryFile = (fileName) => {
+        const newQuery = {
+            files: activeQuery.files.filter((file) => file.name !== fileName),
+            text: activeQuery.text,
+        };
+        updateActiveQuery(newQuery);
+    };
+    return (_jsx(BaseActiveQueryFiles, { children: activeQuery.files.map((file) => {
+            var _a;
+            return (_jsx(Badge, { text: file.name.substring(0, file.name.lastIndexOf(".")), Icon: (_a = FILE_TYPE_ICON_MAP[file.type]) !== null && _a !== void 0 ? _a : Icons.FileIcon, onClickClose: () => removeActiveQueryFile(file.name), textWidthPixels: 160 }, file.name));
+        }) }));
+};
 const BaseActiveQueryFiles = styled.div `
   display: flex;
   align-items: center;

package/core/organisms/index.d.ts

@@ -1,3 +1,3 @@
-export { default as GrantMatch } from "./GrantMatch";
+export { default as GrantMatch, useGrantMatchActiveQuery } from "./GrantMatch";
 export { default as TallyModal } from "./TallyModal";
 export { default as YesNoOptions } from "./YesNoOptions";

package/core/organisms/index.js

@@ -1,3 +1,3 @@
-export { default as GrantMatch } from "./GrantMatch";
+export { default as GrantMatch, useGrantMatchActiveQuery } from "./GrantMatch";
 export { default as TallyModal } from "./TallyModal";
 export { default as YesNoOptions } from "./YesNoOptions";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.69",
+  "version": "1.0.71",
   "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;