@grantbii/design-system 1.0.50 → 1.0.51

package/core/foundations/flags.d.ts

@@ -0,0 +1 @@
+export * from "country-flag-icons/react/3x2";

package/core/foundations/flags.js

@@ -0,0 +1 @@
+export * from "country-flag-icons/react/3x2";

package/core/foundations/icons.d.ts

@@ -0,0 +1,5 @@
+export * from "@phosphor-icons/react";
+type GrantMatchIconProps = {
+    size?: number;
+};
+export declare const GrantMatchIcon: ({ size }: GrantMatchIconProps) => import("react/jsx-runtime").JSX.Element;

package/core/foundations/icons.js

@@ -0,0 +1,4 @@
+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 }));

package/core/foundations/index.d.ts

@@ -1,5 +1,5 @@
-export * as Icons from "@phosphor-icons/react";
-export * as Flags from "country-flag-icons/react/3x2";
 export * as Breakpoints from "./breakpoints";
 export * as Colors from "./colors";
+export * as Flags from "./flags";
+export * as Icons from "./icons";
 export type * from "./types";

package/core/foundations/index.js

@@ -1,4 +1,4 @@
-export * as Icons from "@phosphor-icons/react";
-export * as Flags from "country-flag-icons/react/3x2";
 export * as Breakpoints from "./breakpoints";
 export * as Colors from "./colors";
+export * as Flags from "./flags";
+export * as Icons from "./icons";

package/core/organisms/GrantMatch.d.ts

@@ -0,0 +1,21 @@
+type MatchQuery = {
+    files: File[];
+    text: string;
+};
+type GrantMatchProps = {
+    query: MatchQuery;
+    updateQueryFiles: (newFiles: File[]) => void;
+    updateQueryText: (newText: string) => void;
+    onPerformGrantMatch: (query: MatchQuery) => void;
+    onResetGrantMatch: () => 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;
+};

package/core/organisms/GrantMatch.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+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 { 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, {}))] }));
+};
+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 = (matchQuery, 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 = matchQuery.files.filter((file) => file.name !== fileName);
+        updateQueryFiles(newFiles);
+        const newQuery = { files: newFiles, text: matchQuery.text };
+        if (isQueryActive(newQuery)) {
+            onPerformGrantMatch(newQuery);
+        }
+        else {
+            onResetGrantMatch();
+        }
+    };
+    const removeQueryText = () => {
+        updateQueryText("");
+        const newQuery = { files: matchQuery.files, text: "" };
+        if (isQueryActive(newQuery)) {
+            onPerformGrantMatch(newQuery);
+        }
+        else {
+            onResetGrantMatch();
+        }
+    };
+    return {
+        performGrantMatch,
+        resetGrantMatch,
+        removeUploadedFile,
+        removeQueryText,
+    };
+};
+const isQueryActive = (query) => query.files.length !== 0 || query.text.trim() !== "";
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  padding: 16px 16px 0px 16px;
+
+  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 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 BaseGrantMatchButton = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  height: 20px;
+  padding: 10px 16px;
+  border-radius: 200px;
+
+  font-size: 14px;
+  font-weight: 500;
+
+  color: ${Colors.typography.blackMedium};
+  background-color: ${Colors.base.white};
+  border: 1px solid
+    ${({ $active }) => ($active ? Colors.accent.yellow1 : Colors.neutral.grey3)};
+`;
+const QueryItems = ({ uploadedFiles, removeUploadedFile, queryText, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [uploadedFiles.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"))] }));
+const BaseQueryItems = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  overflow-x: auto;
+
+  /* hide scrollbar but still allow for scrolling */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const FILE_TYPE_ICON_MAP = {
+    "application/pdf": Icons.FilePdfIcon,
+};
+const GrantMatchModal = ({ activeFiles, activeText, performGrantMatch, onClickCancel, }) => {
+    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 }));
+};
+const Header = () => (_jsxs(BaseHeader, { children: [_jsx(Icons.GrantMatchIcon, { size: 24 }), _jsx("div", { children: "Grant Match" })] }));
+const BaseHeader = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const Content = ({ files, uploadFiles, removeFile, queryText, updateQueryText, }) => {
+    const additionalInformationId = "grant-match-additional-information";
+    return (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(QueryText, { children: [_jsx("label", { htmlFor: additionalInformationId, children: "Additional Information" }), _jsx(Textarea, { id: additionalInformationId, value: queryText, onChange: (event) => updateQueryText(event.target.value) })] })] }));
+};
+const BaseContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+const QueryText = styled.div `
+  display: flex;
+  flex-direction: column;
+`;

package/core/organisms/index.d.ts

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

package/core/organisms/index.js

@@ -1,2 +1,3 @@
+export { default as GrantMatch } 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.50",
+  "version": "1.0.51",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+declare const GrantMatchExample: () => 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;

package/stories/organisms/GrantMatch.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GrantMatch } from "@/.";
+import { useMatchQuery } from "@/core/organisms/GrantMatch";
+const GrantMatchExample = () => {
+    const matchQuery = useMatchQuery();
+    return (_jsx(GrantMatch, Object.assign({}, matchQuery, { onPerformGrantMatch: () => console.log("finding grants..."), onResetGrantMatch: () => console.log("resetting grant match...") })));
+};
+const meta = {
+    title: "Organisms/Grant Match",
+    component: GrantMatchExample,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const Example = {
+    args: {},
+};