@grantbii/design-system 1.0.71 → 1.0.73

package/core/organisms/GrantMatch.js

@@ -1,209 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 }) => {
-    const { showModal, openModal, closeModal } = useModal();
-    const [queryText, setQueryText] = useState(activeQuery.text);
-    const updateQueryText = (newText) => setQueryText(newText);
-    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;
-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 };
-};
-const BaseGrantMatch = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  width: 100%;
-  max-width: 100vw;
-`;
-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;
-  gap: 8px;
-`;
-const SearchBar = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  padding: 6px 16px;
-
-  background-color: ${Colors.base.white};
-  color: ${Colors.typography.blackHigh};
-
-  border: 1px solid
-    ${({ $isActive }) => $isActive ? Colors.accent.yellow1 : Colors.neutral.grey3};
-  border-radius: 12px;
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    gap: 8px;
-    width: 100%;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    gap: 16px;
-    width: auto;
-  }
-`;
-const Input = styled.input `
-  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;
-  align-items: center;
-  justify-content: center;
-
-  height: 32px;
-  width: 32px;
-  min-width: 32px;
-
-  background-color: ${Colors.neutral.grey3};
-
-  border-radius: 8px;
-`;
-const FileDropButton = ({ onClick }) => (_jsxs(BaseFileDropButton, { onClick: onClick, 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;
-
-  background-color: ${Colors.base.white};
-  color: ${Colors.accent.blue1};
-
-  border: 1px solid ${Colors.accent.blue1};
-  border-radius: 8px;
-
-  @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;
-  }
-`;
-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, 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;
-  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 GrantMatchModal = ({ activeQuery, updateActiveQuery, queryText, updateQueryText, closeModal, }) => {
-    const { files, uploadFiles, removeFile } = useFileDrop(activeQuery.files);
-    const onClickFind = () => {
-        updateActiveQuery({ files, text: queryText });
-        closeModal();
-    };
-    return (_jsx(Modal, { header: _jsx("div", { children: "Grant Match" }), content: _jsx(Content, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, queryText: queryText, updateQueryText: updateQueryText }), footer: _jsx(Button, { text: "Find My Grants", onClick: onClickFind, backgroundColor: Colors.accent.yellow1 }), onClickCancel: () => closeModal(), width: "480px", height: "600px" }));
-};
-const Content = ({ files, uploadFiles, removeFile, queryText, updateQueryText, }) => (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(QueryText, { 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 QueryText = styled.div `
-  display: flex;
-  flex-direction: column;
-`;