@grantbii/design-system 1.0.52 → 1.0.54

package/core/atoms/BrandLogo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Image from "next/image";
-import darkLogo from "../../public/logos/brand_logo-dark.webp";
-import lightLogo from "../../public/logos/brand_logo-light.webp";
+import darkLogo from "./logos/brand_logo-dark.webp";
+import lightLogo from "./logos/brand_logo-light.webp";
 const BrandLogo = ({ width = 250, height = 80, isDarkTheme = true, alt = "Grantbii", }) => (_jsx(Image, { src: isDarkTheme ? darkLogo : lightLogo, alt: alt, width: width, height: height, priority: true }));
 export default BrandLogo;

package/core/foundations/icons.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export * from "@phosphor-icons/react";
 import Image from "next/image";
-export const GrantMatchIcon = ({ size = 20 }) => (_jsx(Image, { src: "/icons/grant_match.webp", alt: "Grant Match", width: size, height: size }));
+import grantMatchIcon from "./icons/grant_match.webp";
+export const GrantMatchIcon = ({ size = 20 }) => (_jsx(Image, { src: grantMatchIcon, alt: "Grant Match", width: size, height: size }));

package/core/global/GlobalStyle.d.ts

@@ -1,3 +1,3 @@
-import "../../public/fonts/satoshi/css/satoshi.css";
+import "./fonts/satoshi/css/satoshi.css";
 declare const GlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
 export default GlobalStyle;

package/core/global/GlobalStyle.js

@@ -1,8 +1,8 @@
 "use client";
 import { createGlobalStyle } from "styled-components";
-import "../../public/fonts/satoshi/css/satoshi.css";
 import { LAPTOP_WIDTH_PIXELS } from "../foundations/breakpoints";
 import * as Colors from "../foundations/colors";
+import "./fonts/satoshi/css/satoshi.css";
 const GlobalStyle = createGlobalStyle `
   html,
   body {

package/core/organisms/GrantMatch.d.ts

@@ -1,18 +1,15 @@
 import { GrantMatchQuery } from "@grantbii/ui-base/match/models";
-type GrantMatchProps = {
+type GrantMatchQueryProps = {
     query: GrantMatchQuery;
     updateQueryFiles: (newFiles: File[]) => void;
+    removeQueryFile: (fileName: string) => void;
     updateQueryText: (newText: string) => void;
-    onPerformGrantMatch: (query: GrantMatchQuery) => void;
-    onResetGrantMatch: () => void;
+    removeQueryText: () => void;
+    resetQuery: () => void;
 };
-declare const GrantMatch: ({ query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
-export default GrantMatch;
-export declare const useMatchQuery: () => {
-    query: {
-        files: File[];
-        text: string;
-    };
-    updateQueryFiles: (newFiles: File[]) => void;
-    updateQueryText: (newText: string) => 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;

package/core/organisms/GrantMatch.js

@@ -5,60 +5,35 @@ 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, updateQueryText, onPerformGrantMatch, onResetGrantMatch, }) => {
+const GrantMatch = ({ query, updateQueryFiles, removeQueryFile, updateQueryText, removeQueryText, resetQuery, isModalFullScreen, }) => {
     const { showModal, openModal, closeModal } = useModal();
-    const { performGrantMatch, resetGrantMatch, removeUploadedFile, removeQueryText, } = useGrantMatch(query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, closeModal);
     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 = () => {
-    const [files, setFiles] = useState([]);
-    const [text, setText] = useState("");
-    return {
-        query: { files, text },
-        updateQueryFiles: (newFiles) => setFiles(newFiles),
-        updateQueryText: (newText) => setText(newText),
-    };
-};
-const useGrantMatch = (query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, closeModal) => {
     const performGrantMatch = (newFiles, newText) => {
         updateQueryFiles(newFiles);
         updateQueryText(newText);
-        onPerformGrantMatch({ files: newFiles, text: newText });
         closeModal();
     };
-    const resetGrantMatch = () => {
-        updateQueryFiles([]);
-        updateQueryText("");
-        onResetGrantMatch();
-    };
-    const removeUploadedFile = (fileName) => {
-        const newFiles = query.files.filter((file) => file.name !== fileName);
-        updateQueryFiles(newFiles);
-        const newQuery = { files: newFiles, text: query.text };
-        if (isGrantMatchActive(newQuery)) {
-            onPerformGrantMatch(newQuery);
-        }
-        else {
-            onResetGrantMatch();
-        }
-    };
-    const removeQueryText = () => {
-        updateQueryText("");
-        const newQuery = { files: query.files, text: "" };
-        if (isGrantMatchActive(newQuery)) {
-            onPerformGrantMatch(newQuery);
-        }
-        else {
-            onResetGrantMatch();
-        }
-    };
+    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, {}))] }));
+};
+export default GrantMatch;
+const BLANK_GRANT_MATCH_QUERY = { files: [], text: "" };
+export const useGrantMatchQueryItems = () => {
+    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));
     return {
-        performGrantMatch,
-        resetGrantMatch,
-        removeUploadedFile,
+        query,
+        updateQueryFiles,
+        removeQueryFile,
+        updateQueryText,
         removeQueryText,
+        resetQuery,
     };
 };
 const Container = styled.div `
@@ -95,10 +70,10 @@ const BaseGrantMatchButton = styled.button `
   border: 1px solid
     ${({ $isActive }) => $isActive ? Colors.accent.yellow1 : Colors.neutral.grey3};
 `;
-const QueryItems = ({ uploadedFiles, removeUploadedFile, queryText, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [uploadedFiles.map((file) => {
+const QueryItems = ({ queryFiles, removeQueryFile, queryText, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [queryFiles.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: () => removeUploadedFile(file.name), textWidthPixels: 160 }, file.name));
-        }), queryText === "" ? (_jsx(_Fragment, {})) : (_jsx(Badge, { text: "Additional Information", Icon: Icons.TextAaIcon, onClickClose: () => removeQueryText(), textWidthPixels: 160 }, "additional-information-query-item"))] }));
+            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"))] }));
 const BaseQueryItems = styled.div `
   display: flex;
   align-items: center;
@@ -116,11 +91,11 @@ const BaseQueryItems = styled.div `
 const FILE_TYPE_ICON_MAP = {
     "application/pdf": Icons.FilePdfIcon,
 };
-const GrantMatchModal = ({ activeFiles, activeText, performGrantMatch, onClickCancel, }) => {
+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 }));
+    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 Header = () => (_jsxs(BaseHeader, { children: [_jsx(Icons.GrantMatchIcon, { size: 24 }), _jsx("div", { children: "Grant Match" })] }));
 const BaseHeader = styled.div `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -12,7 +12,7 @@
   "scripts": {
     "lint": "next lint",
     "prepare": "husky",
-    "build": "npx tsc && cp -r ./public ./dist && cp ./package.json ./dist && cp README.md ./dist",
+    "build": "npx tsc && cp ./package.json ./dist && cp README.md ./dist",
     "postpublish": "rm -rf dist/",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -28,27 +28,27 @@
     "styled-components": "^6.1.19"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
-    "@eslint/js": "^9.32.0",
+    "@chromatic-com/storybook": "^4.1.0",
+    "@eslint/js": "^9.33.0",
     "@next/eslint-plugin-next": "^15.4.2",
-    "@storybook/addon-a11y": "^9.0.17",
-    "@storybook/addon-docs": "^9.0.17",
-    "@storybook/addon-onboarding": "^9.0.17",
-    "@storybook/addon-vitest": "^9.0.17",
-    "@storybook/nextjs-vite": "^9.0.17",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-onboarding": "^9.1.2",
+    "@storybook/addon-vitest": "^9.1.2",
+    "@storybook/nextjs-vite": "^9.1.2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.32.0",
-    "eslint-config-next": "15.4.5",
-    "eslint-plugin-storybook": "^9.1.0",
+    "eslint": "^9.33.0",
+    "eslint-config-next": "15.4.6",
+    "eslint-plugin-storybook": "^9.1.2",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
-    "playwright": "^1.54.1",
+    "lint-staged": "^16.1.5",
+    "playwright": "^1.54.2",
     "prettier": "^3.6.2",
-    "storybook": "^9.1.0",
+    "storybook": "^9.1.2",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4"
   },

package/stories/organisms/GrantMatch.stories.d.ts

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from "@storybook/nextjs-vite";
-declare const GrantMatchExample: () => import("react/jsx-runtime").JSX.Element;
+type GrantMatchExampleProps = {
+    isModalFullScreen?: boolean;
+};
+declare const GrantMatchExample: ({ isModalFullScreen }: GrantMatchExampleProps) => import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof GrantMatchExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Example: Story;
+export declare const PopUp: Story;
+export declare const FullScreen: Story;

package/stories/organisms/GrantMatch.stories.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GrantMatch } from "@/.";
-import { useMatchQuery } from "@/core/organisms/GrantMatch";
+import { useGrantMatchQueryItems } from "@/core/organisms/GrantMatch";
 import styled from "styled-components";
-const GrantMatchExample = () => {
-    const matchQuery = useMatchQuery();
-    return (_jsx(Container, { children: _jsx(GrantMatch, Object.assign({}, matchQuery, { onPerformGrantMatch: () => console.log("finding grants..."), onResetGrantMatch: () => console.log("resetting grant match...") })) }));
+const GrantMatchExample = ({ isModalFullScreen }) => {
+    const grantMatchProps = useGrantMatchQueryItems();
+    return (_jsx(Container, { children: _jsx(GrantMatch, Object.assign({}, grantMatchProps, { isModalFullScreen: isModalFullScreen })) }));
 };
 const Container = styled.div `
   width: 90vw;
@@ -18,6 +18,9 @@ const meta = {
     },
 };
 export default meta;
-export const Example = {
+export const PopUp = {
     args: {},
 };
+export const FullScreen = {
+    args: { isModalFullScreen: true },
+};