@grantbii/design-system 1.0.71 → 1.0.73

package/core/atoms/Badge.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { Colors, Icons } from "../foundations";
+import { Colors, Icons, Responsive, Typography } from "../foundations";
 const Badge = ({ text, Icon, iconSize = 20, iconWeight = "regular", onClickClose, textWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$isCloseable": !!onClickClose, "$widthPixels": textWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeText, { children: text })] }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
 export default Badge;
 const BaseBadge = styled.div `
@@ -38,7 +38,14 @@ const BadgeText = styled.p `
   text-overflow: ellipsis;
 
   font-weight: 500;
-  font-size: 14px;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${Typography.HELPER_FONT_SIZES.small};
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${Typography.HELPER_FONT_SIZES.big};
+  }
 `;
 const Button = styled.button `
   display: flex;

package/core/atoms/Checkbox.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { LabelInput } from "./shared";
+import { LabelledInput } from "./shared";
 const Checkbox = (_a) => {
     var { id, label, labelBefore = false } = _a, checkboxProps = __rest(_a, ["id", "label", "labelBefore"]);
-    return (_jsxs(LabelInput, { children: [labelBefore ? _jsx("label", { htmlFor: `${id}-checkbox`, children: label }) : _jsx(_Fragment, {}), _jsx("input", Object.assign({}, checkboxProps, { id: `${id}-checkbox`, type: "checkbox" })), labelBefore ? _jsx(_Fragment, {}) : _jsx("label", { htmlFor: `${id}-checkbox`, children: label })] }));
+    return (_jsxs(LabelledInput, { children: [labelBefore ? _jsx("label", { htmlFor: `${id}-checkbox`, children: label }) : _jsx(_Fragment, {}), _jsx("input", Object.assign({}, checkboxProps, { id: `${id}-checkbox`, type: "checkbox" })), labelBefore ? _jsx(_Fragment, {}) : _jsx("label", { htmlFor: `${id}-checkbox`, children: label })] }));
 };
 export default Checkbox;

package/core/atoms/RadioButton.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LabelInput } from "./shared";
+import { LabelledInput } from "./shared";
 const RadioButton = (_a) => {
     var { id, label } = _a, radioButtonProps = __rest(_a, ["id", "label"]);
-    return (_jsxs(LabelInput, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: `${id}-radio-button`, type: "radio" })), _jsx("label", { htmlFor: `${id}-radio-button`, children: label })] }));
+    return (_jsxs(LabelledInput, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: `${id}-radio-button`, type: "radio" })), _jsx("label", { htmlFor: `${id}-radio-button`, children: label })] }));
 };
 export default RadioButton;

package/core/atoms/shared.d.ts

@@ -4,4 +4,4 @@ export declare const BaseButton: import("styled-components/dist/types").IStyledC
     $color?: string;
     $width?: string;
 }>> & string;
-export declare const LabelInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LabelledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/atoms/shared.js

@@ -19,7 +19,7 @@ export const BaseButton = styled.div `
   color: ${({ $color = Colors.typography.whiteHigh }) => $color};
   background-color: ${({ $underline = false, $backgroundColor = Colors.main.grantbiiBlue, }) => ($underline ? "transparent" : $backgroundColor)};
 `;
-export const LabelInput = styled.div `
+export const LabelledInput = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;

package/core/organisms/GrantMatch/ActiveQueryFiles.d.ts

@@ -0,0 +1,2 @@
+declare const ActiveQueryFiles: () => import("react/jsx-runtime").JSX.Element;
+export default ActiveQueryFiles;

package/core/organisms/GrantMatch/ActiveQueryFiles.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Badge, Button } from "../../atoms";
+import { Colors, Icons } from "../../foundations";
+import { useGrantMatchContext } from "./context";
+const ActiveQueryFiles = () => (_jsxs(BaseActiveFiles, { children: [_jsx(FileBadges, {}), _jsx(ResetFilesButton, {})] }));
+export default ActiveQueryFiles;
+const BaseActiveFiles = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const FileBadges = () => {
+    const { activeQuery, updateActiveQuery } = useGrantMatchContext();
+    const removeActiveQueryFile = (fileName) => {
+        const newQuery = {
+            files: activeQuery.files.filter((file) => file.name !== fileName),
+            text: activeQuery.text,
+        };
+        updateActiveQuery(newQuery);
+    };
+    return (_jsx(BaseFileBadges, { 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 BaseFileBadges = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  width: 100%;
+
+  overflow-x: auto;
+
+  /* hide scrollbar but still allow for scrolling */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* TODO: fade effect on overflow-x */
+`;
+const FILE_TYPE_ICON_MAP = {
+    "application/pdf": Icons.FilePdfIcon,
+};
+const ResetFilesButton = () => {
+    const { activeQuery, updateActiveQuery } = useGrantMatchContext();
+    return (_jsx(Button, { text: "Reset", onClick: () => updateActiveQuery({ files: [], text: activeQuery.text }), color: Colors.typography.blackMedium, underline: true }));
+};

package/core/organisms/GrantMatch/GrantMatchModal.d.ts

@@ -0,0 +1,2 @@
+declare const GrantMatchModal: () => import("react/jsx-runtime").JSX.Element;
+export default GrantMatchModal;

package/core/organisms/GrantMatch/GrantMatchModal.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Button, Textarea } from "../../atoms";
+import { Colors } from "../../foundations";
+import { FileDrop, Modal, useFileDrop } from "../../molecules";
+import { useGrantMatchContext } from "./context";
+const GrantMatchModal = () => {
+    const { activeQuery, closeModal } = useGrantMatchContext();
+    const { files, uploadFiles, removeFile } = useFileDrop(activeQuery.files);
+    return (_jsx(Modal, { header: _jsx("div", { children: "Grant Match" }), content: _jsx(ModalContent, { files: files, uploadFiles: uploadFiles, removeFile: removeFile }), footer: _jsx(FindGrantsButton, { files: files }), onClickCancel: () => closeModal(), width: "480px", height: "600px" }));
+};
+export default GrantMatchModal;
+const ModalContent = ({ files, uploadFiles, removeFile, }) => {
+    const { queryText, updateQueryText } = useGrantMatchContext();
+    return (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(ModalQueryText, { children: [_jsx("label", { htmlFor: QUERY_TEXTAREA_ID, children: "Search Grants Opportunities" }), _jsx(Textarea, { id: QUERY_TEXTAREA_ID, value: queryText, onChange: (event) => updateQueryText(event.target.value), placeholder: "Explore by grant name or share what your project is about..." })] })] }));
+};
+const QUERY_TEXTAREA_ID = "query-textarea";
+const BaseContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+const ModalQueryText = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const FindGrantsButton = ({ files }) => {
+    const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();
+    const onClick = () => {
+        updateActiveQuery({ files, text: queryText });
+        closeModal();
+    };
+    return (_jsx(Button, { text: "Find My Grants", onClick: onClick, backgroundColor: Colors.accent.yellow1 }));
+};

package/core/organisms/GrantMatch/SearchBar.d.ts

@@ -0,0 +1,2 @@
+declare const SearchBar: () => import("react/jsx-runtime").JSX.Element;
+export default SearchBar;

package/core/organisms/GrantMatch/SearchBar.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { Colors, Icons, Responsive, Typography } from "../../foundations";
+import { useGrantMatchContext } from "./context";
+const SearchBar = () => {
+    const { activeQuery } = useGrantMatchContext();
+    return (_jsxs(BaseSearchBar, { "$hasActiveQueryText": activeQuery.text !== "", children: [_jsx(QueryTextInput, {}), _jsxs(Buttons, { children: [_jsx(ResetTextButton, {}), _jsx(SearchButton, {}), _jsx(FileDropButton, {})] })] }));
+};
+export default SearchBar;
+const BaseSearchBar = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  background-color: ${Colors.base.white};
+  color: ${Colors.typography.blackHigh};
+
+  border: 1px solid
+    ${({ $hasActiveQueryText }) => $hasActiveQueryText ? Colors.main.grantbiiOrange : Colors.neutral.grey3};
+  border-radius: 12px;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 8px;
+    width: 100%;
+    padding: 6px 16px;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 10px;
+    width: 480px;
+    padding: 10px;
+  }
+`;
+const QueryTextInput = () => {
+    const { activeQuery, updateActiveQuery, queryText, updateQueryText } = useGrantMatchContext();
+    const onKeyDown = (event) => {
+        if (event.key === "Enter" && !event.repeat) {
+            event.preventDefault();
+            updateActiveQuery({ files: activeQuery.files, text: queryText });
+        }
+    };
+    return (_jsx(BaseQueryTextInput, { value: queryText, onChange: (event) => updateQueryText(event.target.value), onKeyDown: onKeyDown, placeholder: "Find grants that match your needs" }));
+};
+const BaseQueryTextInput = styled.input `
+  border: none;
+  outline: none;
+
+  width: 100%;
+`;
+const Buttons = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const BaseIconButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 32px;
+  width: 32px;
+  min-width: 32px;
+
+  border-radius: 8px;
+`;
+const ResetTextButton = () => {
+    const { activeQuery, updateActiveQuery, updateQueryText } = useGrantMatchContext();
+    const onClick = () => {
+        updateQueryText("");
+        updateActiveQuery({ files: activeQuery.files, text: "" });
+    };
+    return (_jsx(BaseResetTextButton, { type: "button", onClick: onClick, children: _jsx(Icons.XIcon, { size: 16, color: Colors.neutral.grey1 }) }));
+};
+const BaseResetTextButton = styled(BaseIconButton) `
+  background-color: ${Colors.base.white};
+`;
+const SearchButton = () => {
+    const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();
+    const onClick = () => updateActiveQuery({ files: activeQuery.files, text: queryText });
+    return (_jsx(BaseSearchButton, { type: "button", onClick: onClick, children: _jsx(Icons.MagnifyingGlassIcon, { size: 16, color: Colors.neutral.grey1 }) }));
+};
+const BaseSearchButton = styled(BaseIconButton) `
+  background-color: ${Colors.neutral.grey3};
+`;
+const FileDropButton = () => {
+    const { activeQuery, openModal } = useGrantMatchContext();
+    return (_jsxs(BaseFileDropButton, { onClick: () => openModal(), "$hasActiveQueryFiles": activeQuery.files.length > 0, children: [_jsx(Icons.FileArrowUpIcon, { size: 16 }), _jsx(FileDropButtonText, { children: "File Drop" })] }));
+};
+const BaseFileDropButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+
+  height: 31px;
+  min-width: 31px;
+
+  border: 1px solid ${Colors.main.grantbiiOrange};
+  border-radius: 8px;
+
+  ${({ $hasActiveQueryFiles }) => $hasActiveQueryFiles
+    ? css `
+          background-color: ${Colors.main.grantbiiOrange};
+          color: ${Colors.typography.whiteHigh};
+        `
+    : css `
+          background-color: ${Colors.base.white};
+          color: ${Colors.main.grantbiiOrange};
+        `}
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    padding: 0px;
+    font-size: ${Typography.HELPER_FONT_SIZES.small};
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    padding: 0px 8px;
+    font-size: ${Typography.HELPER_FONT_SIZES.big};
+  }
+`;
+const FileDropButtonText = styled.p `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+`;

package/core/organisms/GrantMatch/context.d.ts

@@ -0,0 +1,12 @@
+import { GrantMatchQuery } from "@grantbii/ui-base/match/models";
+type GrantMatchCommonProps = {
+    activeQuery: GrantMatchQuery;
+    updateActiveQuery: (query: GrantMatchQuery) => void;
+    queryText: string;
+    updateQueryText: (newText: string) => void;
+    openModal: () => void;
+    closeModal: () => void;
+};
+export declare const GrantMatchContext: import("react").Context<GrantMatchCommonProps | null>;
+export declare const useGrantMatchContext: () => GrantMatchCommonProps;
+export {};

package/core/organisms/GrantMatch/context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const GrantMatchContext = createContext(null);
+export const useGrantMatchContext = () => {
+    const context = useContext(GrantMatchContext);
+    if (!context) {
+        throw new Error("useGrantMatchContext must be used within its Provider");
+    }
+    return context;
+};

package/core/organisms/GrantMatch/index.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkGrantMatchActive } from "@grantbii/ui-base/match/mappings";
+import { useState } from "react";
+import styled from "styled-components";
+import { useModal } from "../../molecules";
+import ActiveQueryFiles from "./ActiveQueryFiles";
+import GrantMatchModal from "./GrantMatchModal";
+import SearchBar from "./SearchBar";
+import { GrantMatchContext } from "./context";
+const GrantMatch = ({ activeQuery, updateActiveQuery }) => {
+    const { showModal, openModal, closeModal } = useModal();
+    const [queryText, setQueryText] = useState(activeQuery.text);
+    const updateQueryText = (newText) => setQueryText(newText);
+    const commonProps = {
+        activeQuery,
+        updateActiveQuery,
+        queryText,
+        updateQueryText,
+        openModal,
+        closeModal,
+    };
+    return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsx(SearchBar, {}), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), showModal ? _jsx(GrantMatchModal, {}) : _jsx(_Fragment, {})] }) }));
+};
+export default GrantMatch;
+const BaseGrantMatch = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  width: 100%;
+  max-width: 100vw;
+`;
+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 };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.71",
+  "version": "1.0.73",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -18,10 +18,10 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@grantbii/ui-base": "1.0.19",
+    "@grantbii/ui-base": "1.0.20",
     "@phosphor-icons/react": "^2.1.10",
     "country-flag-icons": "^1.5.19",
-    "next": "^15.5.0",
+    "next": "^15.5.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-dropzone": "^14.3.8",
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
     "@eslint/js": "^9.34.0",
-    "@next/eslint-plugin-next": "^15.5.0",
+    "@next/eslint-plugin-next": "^15.5.2",
     "@storybook/addon-a11y": "^9.1.3",
     "@storybook/addon-docs": "^9.1.3",
     "@storybook/addon-onboarding": "^9.1.3",
@@ -39,15 +39,15 @@
     "@storybook/nextjs-vite": "^9.1.3",
     "@types/node": "^20",
     "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.7",
+    "@types/react-dom": "^19.1.8",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.34.0",
-    "eslint-config-next": "15.5.0",
+    "eslint-config-next": "15.5.2",
     "eslint-plugin-storybook": "^9.1.3",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.5",
-    "playwright": "^1.54.2",
+    "playwright": "^1.55.0",
     "prettier": "^3.6.2",
     "storybook": "^9.1.3",
     "typescript": "^5.9.2",

package/stories/organisms/GrantMatch.stories.js

@@ -8,8 +8,8 @@ const GrantMatchExample = () => {
     const performGrantMatch = (newQuery) => {
         const fileNames = newQuery.files.map((file) => file.name).join(", ");
         const printableQuery = `files [${fileNames}] and text [${newQuery.text}]`;
-        setStatus(`finding grants using ${printableQuery}`);
-        setTimeout(() => setStatus(`found grants with ${printableQuery}`), 3000);
+        setStatus(`trying to find grants using ${printableQuery}`);
+        setTimeout(() => setStatus(`found grants with ${printableQuery}`), 1000);
     };
     const resetGrantMatch = () => setStatus("pending query");
     const grantMatchQueryProps = useGrantMatchActiveQuery(performGrantMatch, resetGrantMatch);