@grantbii/design-system 1.4.0 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/molecules/Modal.d.ts +3 -3
- package/core/molecules/Modal.js +2 -2
- package/core/molecules/Modal.js.map +1 -1
- package/core/organisms/GrantMatch/GrantMatchModal.d.ts +5 -1
- package/core/organisms/GrantMatch/GrantMatchModal.js +12 -3
- package/core/organisms/GrantMatch/GrantMatchModal.js.map +1 -1
- package/core/organisms/GrantMatch/SearchBar.d.ts +5 -1
- package/core/organisms/GrantMatch/SearchBar.js +20 -9
- package/core/organisms/GrantMatch/SearchBar.js.map +1 -1
- package/core/organisms/GrantMatch/index.d.ts +5 -1
- package/core/organisms/GrantMatch/index.js +3 -2
- package/core/organisms/GrantMatch/index.js.map +1 -1
- package/core/organisms/TallyModal.d.ts +1 -1
- package/core/organisms/TallyModal.js +1 -1
- package/core/organisms/TallyModal.js.map +1 -1
- package/core/templates/LoadingFailedSign.d.ts +2 -1
- package/core/templates/LoadingFailedSign.js +10 -7
- package/core/templates/LoadingFailedSign.js.map +1 -1
- package/package.json +8 -8
- package/stories/molecules/Modal.stories.js +1 -1
- package/stories/molecules/Modal.stories.js.map +1 -1
- package/stories/organisms/GrantMatch.stories.d.ts +9 -2
- package/stories/organisms/GrantMatch.stories.js +11 -3
- package/stories/organisms/GrantMatch.stories.js.map +1 -1
- package/stories/organisms/TallyModal.stories.js +1 -1
- package/stories/organisms/TallyModal.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -5,10 +5,10 @@ type ModalProps = {
|
|
|
5
5
|
footer?: ReactNode;
|
|
6
6
|
width?: string;
|
|
7
7
|
height?: string;
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
onClickClose: MouseEventHandler<HTMLButtonElement>;
|
|
9
|
+
closeText?: string;
|
|
10
10
|
};
|
|
11
|
-
declare const Modal: ({ header, content, footer, width, height,
|
|
11
|
+
declare const Modal: ({ header, content, footer, width, height, onClickClose, closeText, }: ModalProps) => import("react").ReactPortal;
|
|
12
12
|
export default Modal;
|
|
13
13
|
export declare const useModal: () => {
|
|
14
14
|
showModal: boolean;
|
package/core/molecules/Modal.js
CHANGED
|
@@ -4,7 +4,7 @@ import styled from "styled-components";
|
|
|
4
4
|
import { Button } from "../atoms";
|
|
5
5
|
import { Colors, Responsive } from "../foundations";
|
|
6
6
|
import { createPortal } from "react-dom";
|
|
7
|
-
const Modal = ({ header, content, footer, width, height,
|
|
7
|
+
const Modal = ({ header, content, footer, width, height, onClickClose, closeText, }) => createPortal(_jsx(Overlay, { children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [_jsx(CloseButton, { onClick: onClickClose, closeText: closeText }), footer ? footer : _jsx(_Fragment, {})] })] }) }), document.body);
|
|
8
8
|
export default Modal;
|
|
9
9
|
export const useModal = () => {
|
|
10
10
|
const [showModal, setShowModal] = useState(false);
|
|
@@ -106,5 +106,5 @@ const ModalFooter = styled.div `
|
|
|
106
106
|
|
|
107
107
|
padding: 24px;
|
|
108
108
|
`;
|
|
109
|
-
const
|
|
109
|
+
const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { text: closeText, onClick: onClick, backgroundColor: Colors.neutral.grey3, color: Colors.typography.blackHigh }));
|
|
110
110
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/molecules/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,WAAW,EACX,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAYzC,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/molecules/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n type JSX,\n type MouseEventHandler,\n type ReactNode,\n useCallback,\n useState,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Button } from \"../atoms\";\nimport { Colors, Responsive } from \"../foundations\";\nimport { createPortal } from \"react-dom\";\n\ntype ModalProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n onClickClose: MouseEventHandler<HTMLButtonElement>;\n closeText?: string;\n};\n\nconst Modal = ({\n header,\n content,\n footer,\n width,\n height,\n onClickClose,\n closeText,\n}: ModalProps) =>\n createPortal(\n <Overlay>\n <ModalWindow $width={width} $height={height}>\n {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n <ModalBody>{content}</ModalBody>\n\n <ModalFooter>\n <CloseButton onClick={onClickClose} closeText={closeText} />\n {footer ? footer : <></>}\n </ModalFooter>\n </ModalWindow>\n </Overlay>,\n document.body,\n );\n\nexport default Modal;\n\nexport const useModal = () => {\n const [showModal, setShowModal] = useState(false);\n\n const lockScroll = useCallback(() => {\n document.body.style.overflow = \"hidden\";\n }, []);\n\n const unlockScroll = useCallback(() => {\n document.body.style.overflow = \"initial\";\n }, []);\n\n const openModal = () => {\n setShowModal(true);\n lockScroll();\n };\n\n const closeModal = () => {\n setShowModal(false);\n unlockScroll();\n };\n\n return {\n showModal,\n openModal,\n closeModal,\n };\n};\n\nconst Overlay = styled.div`\n background-color: ${Colors.semantic.overlay};\n\n z-index: 9999;\n position: fixed;\n top: 0px;\n left: 0px;\n\n width: 100vw;\n height: 100vh;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n`;\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n display: flex;\n flex-direction: column;\n\n background-color: ${Colors.base.white};\n\n min-height: 100px;\n max-height: 100vh;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n position: fixed;\n bottom: 0px;\n left: 0px;\n\n width: 100%;\n height: 100%;\n\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n position: static;\n bottom: auto;\n left: auto;\n\n width: ${({ $width }) => $width};\n height: ${({ $height }) => $height};\n\n border-radius: 6px;\n }\n`;\n\nconst ModalHeader = styled.div`\n font-weight: 500;\n font-size: 18px;\n\n padding: 12px 24px;\n border-bottom: 1px solid ${Colors.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n\n height: 100%;\n padding-top: 24px;\n overflow-y: auto;\n\n > * {\n width: 100%;\n height: 100%;\n min-height: 100px;\n\n padding: 2px 24px;\n border: none;\n }\n`;\n\nconst ModalFooter = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 12px;\n\n padding: 24px;\n`;\n\ntype CloseButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n closeText?: string;\n};\n\nconst CloseButton = ({ onClick, closeText = \"Close\" }: CloseButtonProps) => (\n <Button\n text={closeText}\n onClick={onClick}\n backgroundColor={Colors.neutral.grey3}\n color={Colors.typography.blackHigh}\n />\n);\n"]}
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
type GrantMatchModalProps = {
|
|
2
|
+
findGrantsCallback?: () => void;
|
|
3
|
+
closeModalCallback?: () => void;
|
|
4
|
+
};
|
|
5
|
+
declare const GrantMatchModal: ({ findGrantsCallback, closeModalCallback, }: GrantMatchModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
6
|
export default GrantMatchModal;
|
|
@@ -4,10 +4,16 @@ import { Button, Textarea } from "../../atoms";
|
|
|
4
4
|
import { Colors } from "../../foundations";
|
|
5
5
|
import { FileDrop, Modal, useFileDrop } from "../../molecules";
|
|
6
6
|
import { useGrantMatchContext } from "./context";
|
|
7
|
-
const GrantMatchModal = () => {
|
|
7
|
+
const GrantMatchModal = ({ findGrantsCallback, closeModalCallback, }) => {
|
|
8
8
|
const { activeQuery, closeModal } = useGrantMatchContext();
|
|
9
9
|
const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(activeQuery.files);
|
|
10
|
-
|
|
10
|
+
const onClickClose = () => {
|
|
11
|
+
if (closeModalCallback) {
|
|
12
|
+
closeModalCallback();
|
|
13
|
+
}
|
|
14
|
+
closeModal();
|
|
15
|
+
};
|
|
16
|
+
return (_jsx(Modal, { header: _jsx("div", { children: "Grant Match" }), content: _jsx(ModalContent, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, errorMessage: errorMessage }), footer: _jsx(FindGrantsButton, { files: files, findGrantsCallback: findGrantsCallback }), onClickClose: onClickClose, width: "480px", height: "600px" }));
|
|
11
17
|
};
|
|
12
18
|
export default GrantMatchModal;
|
|
13
19
|
const ModalContent = ({ files, uploadFiles, removeFile, errorMessage, }) => {
|
|
@@ -24,9 +30,12 @@ const ModalQueryText = styled.div `
|
|
|
24
30
|
display: flex;
|
|
25
31
|
flex-direction: column;
|
|
26
32
|
`;
|
|
27
|
-
const FindGrantsButton = ({ files }) => {
|
|
33
|
+
const FindGrantsButton = ({ files, findGrantsCallback, }) => {
|
|
28
34
|
const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();
|
|
29
35
|
const onClick = () => {
|
|
36
|
+
if (findGrantsCallback) {
|
|
37
|
+
findGrantsCallback();
|
|
38
|
+
}
|
|
30
39
|
updateActiveQuery({ files, text: queryText });
|
|
31
40
|
closeModal();
|
|
32
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled from \"styled-components\";\nimport { Button, Textarea } from \"../../atoms\";\nimport { Colors } from \"../../foundations\";\nimport { FileDrop, Modal, useFileDrop } from \"../../molecules\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype GrantMatchModalProps = {\n findGrantsCallback?: () => void;\n closeModalCallback?: () => void;\n};\n\nconst GrantMatchModal = ({\n findGrantsCallback,\n closeModalCallback,\n}: GrantMatchModalProps) => {\n const { activeQuery, closeModal } = useGrantMatchContext();\n const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(\n activeQuery.files,\n );\n\n const onClickClose = () => {\n if (closeModalCallback) {\n closeModalCallback();\n }\n\n closeModal();\n };\n\n return (\n <Modal\n header={<div>Grant Match</div>}\n content={\n <ModalContent\n files={files}\n uploadFiles={uploadFiles}\n removeFile={removeFile}\n errorMessage={errorMessage}\n />\n }\n footer={\n <FindGrantsButton\n files={files}\n findGrantsCallback={findGrantsCallback}\n />\n }\n onClickClose={onClickClose}\n width=\"480px\"\n height=\"600px\"\n />\n );\n};\n\nexport default GrantMatchModal;\n\ntype ModalContentProps = {\n files: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n};\n\nconst ModalContent = ({\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n}: ModalContentProps) => {\n const { queryText, updateQueryText } = useGrantMatchContext();\n\n return (\n <BaseContent>\n <FileDrop\n uploadedFiles={files}\n uploadFiles={uploadFiles}\n removeFile={removeFile}\n errorMessage={errorMessage}\n />\n\n <ModalQueryText>\n <label htmlFor={QUERY_TEXTAREA_ID}>Search Grants Opportunities</label>\n <Textarea\n id={QUERY_TEXTAREA_ID}\n value={queryText}\n onChange={(event) => updateQueryText(event.target.value)}\n placeholder=\"Explore by grant name or share what your project is about...\"\n />\n </ModalQueryText>\n </BaseContent>\n );\n};\n\nconst QUERY_TEXTAREA_ID = \"query-textarea\";\n\nconst BaseContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nconst ModalQueryText = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ntype FindGrantsButtonProps = {\n files: File[];\n findGrantsCallback?: () => void;\n};\n\nconst FindGrantsButton = ({\n files,\n findGrantsCallback,\n}: FindGrantsButtonProps) => {\n const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();\n\n const onClick = () => {\n if (findGrantsCallback) {\n findGrantsCallback();\n }\n\n updateActiveQuery({ files, text: queryText });\n closeModal();\n };\n\n return (\n <Button\n text=\"Find My Grants\"\n onClick={onClick}\n backgroundColor={Colors.accent.yellow1}\n />\n );\n};\n"]}
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
type SearchBarProps = {
|
|
2
|
+
textSearchCallback?: () => void;
|
|
3
|
+
openModalCallback?: () => void;
|
|
4
|
+
};
|
|
5
|
+
declare const SearchBar: ({ textSearchCallback, openModalCallback, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
6
|
export default SearchBar;
|
|
@@ -2,9 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import styled, { css } from "styled-components";
|
|
3
3
|
import { Colors, Icons, Responsive, Typography } from "../../foundations";
|
|
4
4
|
import { useGrantMatchContext } from "./context";
|
|
5
|
-
const SearchBar = () => {
|
|
5
|
+
const SearchBar = ({ textSearchCallback, openModalCallback, }) => {
|
|
6
6
|
const { activeQuery, queryText } = useGrantMatchContext();
|
|
7
|
-
return (_jsxs(BaseSearchBar, { "$hasActiveQueryText": activeQuery.text !== "", children: [_jsx(QueryTextInput, {}), _jsxs(Buttons, { children: [queryText !== "" ? _jsx(ResetTextButton, {}) : _jsx(_Fragment, {}), _jsx(
|
|
7
|
+
return (_jsxs(BaseSearchBar, { "$hasActiveQueryText": activeQuery.text !== "", children: [_jsx(QueryTextInput, {}), _jsxs(Buttons, { children: [queryText !== "" ? _jsx(ResetTextButton, {}) : _jsx(_Fragment, {}), _jsx(TextSearchButton, { textSearchCallback: textSearchCallback }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] })] }));
|
|
8
8
|
};
|
|
9
9
|
export default SearchBar;
|
|
10
10
|
const BaseSearchBar = styled.div `
|
|
@@ -82,20 +82,31 @@ const BaseResetTextButton = styled(BaseIconButton) `
|
|
|
82
82
|
background-color: ${Colors.base.white};
|
|
83
83
|
border: 1px solid ${Colors.base.white};
|
|
84
84
|
`;
|
|
85
|
-
const
|
|
85
|
+
const TextSearchButton = ({ textSearchCallback }) => {
|
|
86
86
|
const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();
|
|
87
|
-
const
|
|
88
|
-
|
|
87
|
+
const onClickSearch = () => {
|
|
88
|
+
if (textSearchCallback) {
|
|
89
|
+
textSearchCallback();
|
|
90
|
+
}
|
|
91
|
+
updateActiveQuery({ files: activeQuery.files, text: queryText });
|
|
92
|
+
};
|
|
93
|
+
return (_jsx(BaseSearchButton, { type: "button", onClick: onClickSearch, children: _jsx(Icons.MagnifyingGlassIcon, { size: 16, color: Colors.neutral.grey1 }) }));
|
|
89
94
|
};
|
|
90
95
|
const BaseSearchButton = styled(BaseIconButton) `
|
|
91
96
|
background-color: ${Colors.neutral.grey4};
|
|
92
97
|
border: 1px solid ${Colors.neutral.grey3};
|
|
93
98
|
`;
|
|
94
|
-
const
|
|
99
|
+
const OpenModalButton = ({ openModalCallback }) => {
|
|
95
100
|
const { activeQuery, openModal } = useGrantMatchContext();
|
|
96
|
-
|
|
101
|
+
const onClickOpen = () => {
|
|
102
|
+
if (openModalCallback) {
|
|
103
|
+
openModalCallback();
|
|
104
|
+
}
|
|
105
|
+
openModal();
|
|
106
|
+
};
|
|
107
|
+
return (_jsxs(BaseOpenModalButton, { onClick: onClickOpen, "$hasActiveQueryFiles": activeQuery.files.length > 0, children: [_jsx(Icons.FileArrowUpIcon, { size: 16 }), _jsx(OpenModalButtonText, { children: "File Drop" })] }));
|
|
97
108
|
};
|
|
98
|
-
const
|
|
109
|
+
const BaseOpenModalButton = styled.button `
|
|
99
110
|
display: flex;
|
|
100
111
|
align-items: center;
|
|
101
112
|
justify-content: center;
|
|
@@ -127,7 +138,7 @@ const BaseFileDropButton = styled.button `
|
|
|
127
138
|
font-size: ${Typography.HELPER_FONT_SIZES.big};
|
|
128
139
|
}
|
|
129
140
|
`;
|
|
130
|
-
const
|
|
141
|
+
const OpenModalButtonText = styled.p `
|
|
131
142
|
overflow: hidden;
|
|
132
143
|
white-space: nowrap;
|
|
133
144
|
text-overflow: ellipsis;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/SearchBar.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../../foundations\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype SearchBarProps = {\n textSearchCallback?: () => void;\n openModalCallback?: () => void;\n};\n\nconst SearchBar = ({\n textSearchCallback,\n openModalCallback,\n}: SearchBarProps) => {\n const { activeQuery, queryText } = useGrantMatchContext();\n\n return (\n <BaseSearchBar $hasActiveQueryText={activeQuery.text !== \"\"}>\n <QueryTextInput />\n\n <Buttons>\n {queryText !== \"\" ? <ResetTextButton /> : <></>}\n <TextSearchButton textSearchCallback={textSearchCallback} />\n <OpenModalButton openModalCallback={openModalCallback} />\n </Buttons>\n </BaseSearchBar>\n );\n};\n\nexport default SearchBar;\n\nconst BaseSearchBar = styled.div<{ $hasActiveQueryText: boolean }>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n background-color: ${Colors.base.white};\n color: ${Colors.typography.blackHigh};\n\n border: 1px solid\n ${({ $hasActiveQueryText }) =>\n $hasActiveQueryText ? Colors.main.grantbiiOrange : Colors.neutral.grey3};\n border-radius: 12px;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 6px;\n padding: 6px;\n width: 100%;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 10px;\n padding: 10px;\n width: 480px;\n }\n`;\n\nconst QueryTextInput = () => {\n const { activeQuery, updateActiveQuery, queryText, updateQueryText } =\n useGrantMatchContext();\n\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && !event.repeat) {\n event.preventDefault();\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n }\n };\n\n return (\n <BaseQueryTextInput\n value={queryText}\n onChange={(event) => updateQueryText(event.target.value)}\n onKeyDown={onKeyDown}\n placeholder=\"Find grants that match your needs\"\n />\n );\n};\n\nconst BaseQueryTextInput = styled.input`\n border: none;\n outline: none;\n\n width: 100%;\n`;\n\nconst Buttons = styled.div`\n display: flex;\n align-items: center;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 6px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 10px;\n }\n`;\n\nconst BaseIconButton = styled.button`\n display: flex;\n align-items: center;\n justify-content: center;\n\n height: 31px;\n width: 31px;\n min-width: 31px;\n\n border-radius: 8px;\n`;\n\nconst ResetTextButton = () => {\n const { activeQuery, updateActiveQuery, updateQueryText } =\n useGrantMatchContext();\n\n const onClick = () => {\n updateQueryText(\"\");\n updateActiveQuery({ files: activeQuery.files, text: \"\" });\n };\n\n return (\n <BaseResetTextButton type=\"button\" onClick={onClick}>\n <Icons.XIcon size={16} color={Colors.neutral.grey1} />\n </BaseResetTextButton>\n );\n};\n\nconst BaseResetTextButton = styled(BaseIconButton)`\n background-color: ${Colors.base.white};\n border: 1px solid ${Colors.base.white};\n`;\n\ntype TextSearchButtonProps = {\n textSearchCallback?: () => void;\n};\n\nconst TextSearchButton = ({ textSearchCallback }: TextSearchButtonProps) => {\n const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();\n\n const onClickSearch = () => {\n if (textSearchCallback) {\n textSearchCallback();\n }\n\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n };\n\n return (\n <BaseSearchButton type=\"button\" onClick={onClickSearch}>\n <Icons.MagnifyingGlassIcon size={16} color={Colors.neutral.grey1} />\n </BaseSearchButton>\n );\n};\n\nconst BaseSearchButton = styled(BaseIconButton)`\n background-color: ${Colors.neutral.grey4};\n border: 1px solid ${Colors.neutral.grey3};\n`;\n\ntype OpenModalButtonProps = {\n openModalCallback?: () => void;\n};\n\nconst OpenModalButton = ({ openModalCallback }: OpenModalButtonProps) => {\n const { activeQuery, openModal } = useGrantMatchContext();\n\n const onClickOpen = () => {\n if (openModalCallback) {\n openModalCallback();\n }\n\n openModal();\n };\n\n return (\n <BaseOpenModalButton\n onClick={onClickOpen}\n $hasActiveQueryFiles={activeQuery.files.length > 0}\n >\n <Icons.FileArrowUpIcon size={16} />\n <OpenModalButtonText>File Drop</OpenModalButtonText>\n </BaseOpenModalButton>\n );\n};\n\nconst BaseOpenModalButton = styled.button<{ $hasActiveQueryFiles: boolean }>`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n\n height: 31px;\n min-width: 31px;\n\n border: 1px solid ${Colors.main.grantbiiOrange};\n border-radius: 8px;\n\n ${({ $hasActiveQueryFiles }) =>\n $hasActiveQueryFiles\n ? css`\n background-color: ${Colors.main.grantbiiOrange};\n color: ${Colors.typography.whiteHigh};\n `\n : css`\n background-color: ${Colors.base.white};\n color: ${Colors.main.grantbiiOrange};\n `}\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n padding: 0px;\n font-size: ${Typography.HELPER_FONT_SIZES.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n padding: 0px 8px;\n font-size: ${Typography.HELPER_FONT_SIZES.big};\n }\n`;\n\nconst OpenModalButtonText = styled.p`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n display: inline;\n }\n`;\n"]}
|
|
@@ -2,7 +2,11 @@ import type { GrantMatchQuery } from "@grantbii/ui-core/match/models";
|
|
|
2
2
|
type GrantMatchProps = {
|
|
3
3
|
activeQuery: GrantMatchQuery;
|
|
4
4
|
updateActiveQuery: (newQuery: GrantMatchQuery) => void;
|
|
5
|
+
textSearchCallback?: () => void;
|
|
6
|
+
findGrantsCallback?: () => void;
|
|
7
|
+
closeModalCallback?: () => void;
|
|
8
|
+
openModalCallback?: () => void;
|
|
5
9
|
};
|
|
6
|
-
declare const GrantMatch: ({ activeQuery, updateActiveQuery }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare const GrantMatch: ({ activeQuery, updateActiveQuery, textSearchCallback, findGrantsCallback, closeModalCallback, openModalCallback, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
11
|
export default GrantMatch;
|
|
8
12
|
export declare const useGrantMatchActiveQuery: (performGrantMatch: (newQuery: GrantMatchQuery) => void, resetGrantMatch: () => void) => GrantMatchProps;
|
|
@@ -7,10 +7,11 @@ import ActiveQueryFiles from "./ActiveQueryFiles";
|
|
|
7
7
|
import GrantMatchModal from "./GrantMatchModal";
|
|
8
8
|
import SearchBar from "./SearchBar";
|
|
9
9
|
import { GrantMatchContext } from "./context";
|
|
10
|
-
const GrantMatch = ({ activeQuery, updateActiveQuery }) => {
|
|
10
|
+
const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGrantsCallback, closeModalCallback, openModalCallback, }) => {
|
|
11
11
|
const { showModal, openModal, closeModal } = useModal();
|
|
12
12
|
const [queryText, setQueryText] = useState(activeQuery.text);
|
|
13
13
|
const updateQueryText = (newText) => setQueryText(newText);
|
|
14
|
+
// TODO: refactor away?
|
|
14
15
|
const commonProps = {
|
|
15
16
|
activeQuery,
|
|
16
17
|
updateActiveQuery,
|
|
@@ -19,7 +20,7 @@ const GrantMatch = ({ activeQuery, updateActiveQuery }) => {
|
|
|
19
20
|
openModal,
|
|
20
21
|
closeModal,
|
|
21
22
|
};
|
|
22
|
-
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, {})] }) }));
|
|
23
|
+
return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsx(SearchBar, { textSearchCallback: textSearchCallback, openModalCallback: openModalCallback }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), showModal ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
|
|
23
24
|
};
|
|
24
25
|
export default GrantMatch;
|
|
25
26
|
const BaseGrantMatch = styled.div `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAW9C,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,GACD,EAAE,EAAE;IACpB,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEnE,uBAAuB;IACvB,MAAM,WAAW,GAAG;QAClB,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC5C,MAAC,cAAc,eACb,KAAC,SAAS,IACR,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,GACpC,EACD,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,mBAAK,EAC3D,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,eAAe,IACd,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACc,GACU,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,iBAAsD,EACtD,eAA2B,EACV,EAAE;IACnB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB;QAC9D,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,EAAE;KACT,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,cAAc,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;QAEhC,IAAI,qBAAqB,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAC5C,CAAC,CAAC","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/models\";\nimport { checkGrantMatchActive } from \"@grantbii/ui-core/match/validations\";\nimport { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { useModal } from \"../../molecules\";\nimport ActiveQueryFiles from \"./ActiveQueryFiles\";\nimport GrantMatchModal from \"./GrantMatchModal\";\nimport SearchBar from \"./SearchBar\";\nimport { GrantMatchContext } from \"./context\";\n\ntype GrantMatchProps = {\n activeQuery: GrantMatchQuery;\n updateActiveQuery: (newQuery: GrantMatchQuery) => void;\n textSearchCallback?: () => void;\n findGrantsCallback?: () => void;\n closeModalCallback?: () => void;\n openModalCallback?: () => void;\n};\n\nconst GrantMatch = ({\n activeQuery,\n updateActiveQuery,\n textSearchCallback,\n findGrantsCallback,\n closeModalCallback,\n openModalCallback,\n}: GrantMatchProps) => {\n const { showModal, openModal, closeModal } = useModal();\n const [queryText, setQueryText] = useState(activeQuery.text);\n const updateQueryText = (newText: string) => setQueryText(newText);\n\n // TODO: refactor away?\n const commonProps = {\n activeQuery,\n updateActiveQuery,\n queryText,\n updateQueryText,\n openModal,\n closeModal,\n };\n\n return (\n <GrantMatchContext.Provider value={commonProps}>\n <BaseGrantMatch>\n <SearchBar\n textSearchCallback={textSearchCallback}\n openModalCallback={openModalCallback}\n />\n {activeQuery.files.length > 0 ? <ActiveQueryFiles /> : <></>}\n {showModal ? (\n <GrantMatchModal\n findGrantsCallback={findGrantsCallback}\n closeModalCallback={closeModalCallback}\n />\n ) : (\n <></>\n )}\n </BaseGrantMatch>\n </GrantMatchContext.Provider>\n );\n};\n\nexport default GrantMatch;\n\nconst BaseGrantMatch = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n width: 100%;\n max-width: 100vw;\n`;\n\nexport const useGrantMatchActiveQuery = (\n performGrantMatch: (newQuery: GrantMatchQuery) => void,\n resetGrantMatch: () => void,\n): GrantMatchProps => {\n const [activeQuery, setActiveQuery] = useState<GrantMatchQuery>({\n files: [],\n text: \"\",\n });\n\n const updateActiveQuery = (newQuery: GrantMatchQuery) => {\n setActiveQuery({ ...newQuery });\n\n if (checkGrantMatchActive(newQuery)) {\n performGrantMatch(newQuery);\n } else {\n resetGrantMatch();\n }\n };\n\n return { activeQuery, updateActiveQuery };\n};\n"]}
|
|
@@ -3,7 +3,7 @@ type TallyModalProps = {
|
|
|
3
3
|
header?: ReactNode;
|
|
4
4
|
tallyId: string;
|
|
5
5
|
prefilledFieldsQueryParams?: string;
|
|
6
|
-
|
|
6
|
+
onClickClose: MouseEventHandler<HTMLButtonElement>;
|
|
7
7
|
};
|
|
8
8
|
declare const TallyModal: ({ tallyId, prefilledFieldsQueryParams, ...modalProps }: TallyModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export default TallyModal;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Modal } from "../molecules";
|
|
3
|
-
const TallyModal = ({ tallyId, prefilledFieldsQueryParams, ...modalProps }) => (_jsx(Modal, { ...modalProps, content: _jsx("iframe", { src: constructIframeSrc(tallyId, prefilledFieldsQueryParams), loading: "lazy" }), width: "640px", height: "
|
|
3
|
+
const TallyModal = ({ tallyId, prefilledFieldsQueryParams, ...modalProps }) => (_jsx(Modal, { ...modalProps, content: _jsx("iframe", { src: constructIframeSrc(tallyId, prefilledFieldsQueryParams), loading: "lazy" }), width: "640px", height: "600px" }));
|
|
4
4
|
export default TallyModal;
|
|
5
5
|
const constructIframeSrc = (tallyId, prefilledFieldsQueryParams) => `https://tally.so/embed/${tallyId}?${TALLY_QUERIES}${prefilledFieldsQueryParams ? `&${prefilledFieldsQueryParams}` : ""}`;
|
|
6
6
|
const TALLY_QUERIES = "alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TallyModal.js","sourceRoot":"","sources":["../../../core/organisms/TallyModal.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AASrC,MAAM,UAAU,GAAG,CAAC,EAClB,OAAO,EACP,0BAA0B,EAC1B,GAAG,UAAU,EACG,EAAE,EAAE,CAAC,CACrB,KAAC,KAAK,OACA,UAAU,EACd,OAAO,EACL,iBACE,GAAG,EAAE,kBAAkB,CAAC,OAAO,EAAE,0BAA0B,CAAC,EAC5D,OAAO,EAAC,MAAM,GACd,EAEJ,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,OAAO,GACd,CACH,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,kBAAkB,GAAG,CACzB,OAAe,EACf,0BAAmC,EACnC,EAAE,CACF,0BAA0B,OAAO,IAAI,aAAa,GAAG,0BAA0B,CAAC,CAAC,CAAC,IAAI,0BAA0B,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAE5H,MAAM,aAAa,GACjB,iEAAiE,CAAC","sourcesContent":["import type { MouseEventHandler, ReactNode } from \"react\";\nimport { Modal } from \"../molecules\";\n\ntype TallyModalProps = {\n header?: ReactNode;\n tallyId: string;\n prefilledFieldsQueryParams?: string;\n
|
|
1
|
+
{"version":3,"file":"TallyModal.js","sourceRoot":"","sources":["../../../core/organisms/TallyModal.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AASrC,MAAM,UAAU,GAAG,CAAC,EAClB,OAAO,EACP,0BAA0B,EAC1B,GAAG,UAAU,EACG,EAAE,EAAE,CAAC,CACrB,KAAC,KAAK,OACA,UAAU,EACd,OAAO,EACL,iBACE,GAAG,EAAE,kBAAkB,CAAC,OAAO,EAAE,0BAA0B,CAAC,EAC5D,OAAO,EAAC,MAAM,GACd,EAEJ,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,OAAO,GACd,CACH,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,kBAAkB,GAAG,CACzB,OAAe,EACf,0BAAmC,EACnC,EAAE,CACF,0BAA0B,OAAO,IAAI,aAAa,GAAG,0BAA0B,CAAC,CAAC,CAAC,IAAI,0BAA0B,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAE5H,MAAM,aAAa,GACjB,iEAAiE,CAAC","sourcesContent":["import type { MouseEventHandler, ReactNode } from \"react\";\nimport { Modal } from \"../molecules\";\n\ntype TallyModalProps = {\n header?: ReactNode;\n tallyId: string;\n prefilledFieldsQueryParams?: string;\n onClickClose: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst TallyModal = ({\n tallyId,\n prefilledFieldsQueryParams,\n ...modalProps\n}: TallyModalProps) => (\n <Modal\n {...modalProps}\n content={\n <iframe\n src={constructIframeSrc(tallyId, prefilledFieldsQueryParams)}\n loading=\"lazy\"\n />\n }\n width=\"640px\"\n height=\"600px\"\n />\n);\n\nexport default TallyModal;\n\nconst constructIframeSrc = (\n tallyId: string,\n prefilledFieldsQueryParams?: string,\n) =>\n `https://tally.so/embed/${tallyId}?${TALLY_QUERIES}${prefilledFieldsQueryParams ? `&${prefilledFieldsQueryParams}` : \"\"}`;\n\nconst TALLY_QUERIES =\n \"alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0\";\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { MouseEventHandler } from "react";
|
|
2
2
|
type LoadingFailedSignProps = {
|
|
3
|
+
errorMessage?: string;
|
|
3
4
|
onClickReload?: MouseEventHandler<HTMLButtonElement>;
|
|
4
5
|
};
|
|
5
|
-
declare const LoadingFailedSign: ({ onClickReload }: LoadingFailedSignProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare const LoadingFailedSign: ({ errorMessage, onClickReload, }: LoadingFailedSignProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export default LoadingFailedSign;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image from "next/image";
|
|
3
|
+
import Link from "next/link";
|
|
3
4
|
import styled from "styled-components";
|
|
4
5
|
import loadFailLogo from "../assets/logos/load_fail_logo.webp";
|
|
5
|
-
import { Colors, Responsive, Typography } from "../foundations";
|
|
6
|
-
import Link from "next/link";
|
|
7
6
|
import { Button } from "../atoms";
|
|
8
|
-
|
|
7
|
+
import { Colors, Responsive, Typography } from "../foundations";
|
|
8
|
+
const LoadingFailedSign = ({ errorMessage = "Failed to load results", onClickReload, }) => (_jsxs(BaseLoadingFailedSign, { children: [_jsx(LoadingFailedImage, { src: loadFailLogo, width: 693, height: 641, alt: errorMessage }), _jsx(LoadingFailedText, { errorMessage: errorMessage }), onClickReload ? (_jsx(Button, { text: "Try Again", onClick: onClickReload, backgroundColor: Colors.base.white, borderColor: Colors.neutral.grey3, color: Colors.typography.blackHigh })) : (_jsx(_Fragment, {}))] }));
|
|
9
9
|
export default LoadingFailedSign;
|
|
10
|
-
const
|
|
10
|
+
const BaseLoadingFailedSign = styled.div `
|
|
11
11
|
display: flex;
|
|
12
12
|
flex-direction: column;
|
|
13
13
|
justify-content: center;
|
|
@@ -17,6 +17,8 @@ const BaseLoadFail = styled.div `
|
|
|
17
17
|
height: 100%;
|
|
18
18
|
padding: 24px;
|
|
19
19
|
|
|
20
|
+
background-color: ${Colors.base.white};
|
|
21
|
+
|
|
20
22
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
21
23
|
gap: 16px;
|
|
22
24
|
|
|
@@ -31,7 +33,7 @@ const BaseLoadFail = styled.div `
|
|
|
31
33
|
border-radius: 12px;
|
|
32
34
|
}
|
|
33
35
|
`;
|
|
34
|
-
const
|
|
36
|
+
const LoadingFailedImage = styled(Image) `
|
|
35
37
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
36
38
|
width: 151px;
|
|
37
39
|
height: 140px;
|
|
@@ -42,7 +44,8 @@ const LoadFailImage = styled(Image) `
|
|
|
42
44
|
height: 160px;
|
|
43
45
|
}
|
|
44
46
|
`;
|
|
45
|
-
const
|
|
47
|
+
const LoadingFailedText = ({ errorMessage }) => (_jsxs(BaseLoadingFailedText, { children: [_jsx(ErrorMessage, { children: errorMessage }), _jsxs(ErrorDescription, { children: ["Please try again in a moment or ", _jsx("br", {}), " contact us at", " ", _jsx(SupportEmailLink, { href: "mailto:support@grantbii.com", children: "support@grantbii.com" })] })] }));
|
|
48
|
+
const BaseLoadingFailedText = styled.div `
|
|
46
49
|
display: flex;
|
|
47
50
|
flex-direction: column;
|
|
48
51
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingFailedSign.js","sourceRoot":"","sources":["../../../core/templates/LoadingFailedSign.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"LoadingFailedSign.js","sourceRoot":"","sources":["../../../core/templates/LoadingFailedSign.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,iBAAiB,GAAG,CAAC,EACzB,YAAY,GAAG,wBAAwB,EACvC,aAAa,GACU,EAAE,EAAE,CAAC,CAC5B,MAAC,qBAAqB,eACpB,KAAC,kBAAkB,IACjB,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,YAAY,GACjB,EAEF,KAAC,iBAAiB,IAAC,YAAY,EAAE,YAAY,GAAI,EAEhD,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IACL,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,aAAa,EACtB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,EACjC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,SAAS,GAClC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACqB,CACzB,CAAC;AAEF,eAAe,iBAAiB,CAAC;AAEjC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;sBAUlB,MAAM,CAAC,IAAI,CAAC,KAAK;;oBAEnB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;;qBAOlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;wBAGhC,MAAM,CAAC,OAAO,CAAC,KAAK;;;CAG3C,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACpB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAMF,MAAM,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,EAAE,EAAE,CAAC,CACtE,MAAC,qBAAqB,eACpB,KAAC,YAAY,cAAE,YAAY,GAAgB,EAC3C,MAAC,gBAAgB,mDACiB,cAAM,oBAAe,GAAG,EACxD,KAAC,gBAAgB,IAAC,IAAI,EAAC,6BAA6B,qCAEjC,IACF,IACG,CACzB,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;oBAGT,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,oBAAoB,CAAC,KAAK;;;qBAGjC,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,oBAAoB,CAAC,GAAG;;CAEnD,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAA;;;oBAGb,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,eAAe,CAAC,KAAK;;;qBAG5B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,eAAe,CAAC,GAAG;;CAE9C,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEpC,CAAC","sourcesContent":["import Image from \"next/image\";\nimport Link from \"next/link\";\nimport type { MouseEventHandler } from \"react\";\nimport styled from \"styled-components\";\nimport loadFailLogo from \"../assets/logos/load_fail_logo.webp\";\nimport { Button } from \"../atoms\";\nimport { Colors, Responsive, Typography } from \"../foundations\";\n\ntype LoadingFailedSignProps = {\n errorMessage?: string;\n onClickReload?: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst LoadingFailedSign = ({\n errorMessage = \"Failed to load results\",\n onClickReload,\n}: LoadingFailedSignProps) => (\n <BaseLoadingFailedSign>\n <LoadingFailedImage\n src={loadFailLogo}\n width={693}\n height={641}\n alt={errorMessage}\n />\n\n <LoadingFailedText errorMessage={errorMessage} />\n\n {onClickReload ? (\n <Button\n text=\"Try Again\"\n onClick={onClickReload}\n backgroundColor={Colors.base.white}\n borderColor={Colors.neutral.grey3}\n color={Colors.typography.blackHigh}\n />\n ) : (\n <></>\n )}\n </BaseLoadingFailedSign>\n);\n\nexport default LoadingFailedSign;\n\nconst BaseLoadingFailedSign = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n width: 100%;\n height: 100%;\n padding: 24px;\n\n background-color: ${Colors.base.white};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 16px;\n\n border: none;\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 24px;\n\n border: 1px solid ${Colors.neutral.grey3};\n border-radius: 12px;\n }\n`;\n\nconst LoadingFailedImage = styled(Image)`\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 151px;\n height: 140px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 173px;\n height: 160px;\n }\n`;\n\ntype LoadingFailedTextProps = {\n errorMessage: string;\n};\n\nconst LoadingFailedText = ({ errorMessage }: LoadingFailedTextProps) => (\n <BaseLoadingFailedText>\n <ErrorMessage>{errorMessage}</ErrorMessage>\n <ErrorDescription>\n Please try again in a moment or <br /> contact us at{\" \"}\n <SupportEmailLink href=\"mailto:support@grantbii.com\">\n support@grantbii.com\n </SupportEmailLink>\n </ErrorDescription>\n </BaseLoadingFailedText>\n);\n\nconst BaseLoadingFailedText = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n\n text-align: center;\n`;\n\nconst ErrorMessage = styled.p`\n font-weight: 700;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.SUBHEADER_FONT_SIZES.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.SUBHEADER_FONT_SIZES.big};\n }\n`;\n\nconst ErrorDescription = styled.p`\n font-weight: 400;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.BODY_FONT_SIZES.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.BODY_FONT_SIZES.big};\n }\n`;\n\nconst SupportEmailLink = styled(Link)`\n text-decoration: underline;\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.2",
|
|
4
4
|
"description": "Grantbii's Design System",
|
|
5
5
|
"homepage": "https://design.grantbii.com",
|
|
6
6
|
"repository": {
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"@chromatic-com/storybook": "4.1.1",
|
|
34
34
|
"@eslint/js": "9.35.0",
|
|
35
35
|
"@next/eslint-plugin-next": "15.5.3",
|
|
36
|
-
"@storybook/addon-a11y": "9.1.
|
|
37
|
-
"@storybook/addon-docs": "9.1.
|
|
38
|
-
"@storybook/addon-onboarding": "9.1.
|
|
39
|
-
"@storybook/addon-vitest": "9.1.
|
|
40
|
-
"@storybook/nextjs-vite": "9.1.
|
|
36
|
+
"@storybook/addon-a11y": "9.1.6",
|
|
37
|
+
"@storybook/addon-docs": "9.1.6",
|
|
38
|
+
"@storybook/addon-onboarding": "9.1.6",
|
|
39
|
+
"@storybook/addon-vitest": "9.1.6",
|
|
40
|
+
"@storybook/nextjs-vite": "9.1.6",
|
|
41
41
|
"@types/node": "22.18.0",
|
|
42
42
|
"@types/react": "19.1.12",
|
|
43
43
|
"@types/react-dom": "19.1.9",
|
|
@@ -45,12 +45,12 @@
|
|
|
45
45
|
"@vitest/coverage-v8": "3.2.4",
|
|
46
46
|
"eslint": "9.35.0",
|
|
47
47
|
"eslint-config-next": "15.5.3",
|
|
48
|
-
"eslint-plugin-storybook": "9.1.
|
|
48
|
+
"eslint-plugin-storybook": "9.1.6",
|
|
49
49
|
"husky": "9.1.7",
|
|
50
50
|
"lint-staged": "16.1.6",
|
|
51
51
|
"playwright": "1.55.0",
|
|
52
52
|
"prettier": "3.6.2",
|
|
53
|
-
"storybook": "9.1.
|
|
53
|
+
"storybook": "9.1.6",
|
|
54
54
|
"typescript": "5.9.2",
|
|
55
55
|
"vitest": "3.2.4"
|
|
56
56
|
},
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { Button, Modal, useModal } from "@/.";
|
|
3
3
|
const ModalExample = (props) => {
|
|
4
4
|
const { showModal, openModal, closeModal } = useModal();
|
|
5
|
-
return (_jsxs("div", { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(Modal, { ...props,
|
|
5
|
+
return (_jsxs("div", { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(Modal, { ...props, onClickClose: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
|
|
6
6
|
};
|
|
7
7
|
const meta = {
|
|
8
8
|
title: "Molecules/Modal",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAY9C,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IAChD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAExD,OAAO,CACL,0BACE,KAAC,MAAM,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EAEhE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,OAAK,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAY9C,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IAChD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAExD,OAAO,CACL,0BACE,KAAC,MAAM,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EAEhE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,OAAK,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,CACvD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,gFAA4D,CAC7D,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,OAAO,EAAE,YAAY;KACtB;CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAClB,0BACE,qdAQI,EAEJ,+NAII,EAEJ,iOAII,IACA,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,OAAO,EAAE,WAAW;KACrB;CACF,CAAC","sourcesContent":["import { Button, Modal, useModal } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport type { JSX, ReactNode } from \"react\";\n\ntype ModalExampleProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n};\n\nconst ModalExample = (props: ModalExampleProps) => {\n const { showModal, openModal, closeModal } = useModal();\n\n return (\n <div>\n <Button text=\"Click to open modal\" onClick={() => openModal()} />\n\n {showModal ? (\n <Modal {...props} onClickClose={() => closeModal()} />\n ) : (\n <></>\n )}\n </div>\n );\n};\n\nconst meta: Meta<typeof ModalExample> = {\n title: \"Molecules/Modal\",\n component: ModalExample,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n header: \"Grantbii\",\n width: \"600px\",\n height: \"360px\",\n};\n\nconst shortContent = (\n <p>Amplifying Business Grant Impact for SMEs & Scale-ups</p>\n);\n\nexport const ShortContent: Story = {\n args: {\n ...baseArgs,\n content: shortContent,\n },\n};\n\nconst longContent = (\n <div>\n <p>\n Grantbii is an AI-powered grant intelligence and matching platform that\n helps grant seekers effortlessly find, match, prep & apply for the right\n business grants - maximizing grant funding success with minimal effort.\n Our platform connects businesses with a trusted Grant Enabler Network -\n solution providers, consulting experts, and delivery partners - ensuring\n that every dollar of grant funding leads to real business transformation\n impact.\n </p>\n\n <p>\n In the future, Grantbii aims to automate the entire grant application\n lifecycle, from discovery to claims submission and guide you through the\n application process with minimal effort on your part.\n </p>\n\n <p>\n To maximize your chances of grant success, you can expect to leverage on\n tools to assess your chances of success and offer expert support to ensure\n your application meets all necessary requirements.\n </p>\n </div>\n);\n\nexport const LongContent: Story = {\n args: {\n ...baseArgs,\n content: longContent,\n },\n};\n"]}
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
|
|
2
|
-
|
|
2
|
+
type Callbacks = {
|
|
3
|
+
textSearchCallback?: () => void;
|
|
4
|
+
findGrantsCallback?: () => void;
|
|
5
|
+
closeModalCallback?: () => void;
|
|
6
|
+
openModalCallback?: () => void;
|
|
7
|
+
};
|
|
8
|
+
declare const GrantMatchExample: (callbacks: Callbacks) => import("react/jsx-runtime").JSX.Element;
|
|
3
9
|
declare const meta: Meta<typeof GrantMatchExample>;
|
|
4
10
|
export default meta;
|
|
5
11
|
type Story = StoryObj<typeof meta>;
|
|
6
|
-
export declare const
|
|
12
|
+
export declare const DefaultExample: Story;
|
|
13
|
+
export declare const WithCallbacks: Story;
|
|
@@ -4,7 +4,7 @@ import { useGrantMatchActiveQuery } from "@/core/organisms/GrantMatch";
|
|
|
4
4
|
import {} from "@grantbii/ui-core/match/models";
|
|
5
5
|
import { useState } from "react";
|
|
6
6
|
import styled from "styled-components";
|
|
7
|
-
const GrantMatchExample = () => {
|
|
7
|
+
const GrantMatchExample = (callbacks) => {
|
|
8
8
|
const [status, setStatus] = useState("pending query");
|
|
9
9
|
const performGrantMatch = (newQuery) => {
|
|
10
10
|
const fileNames = newQuery.files.map((file) => file.name).join(", ");
|
|
@@ -14,7 +14,7 @@ const GrantMatchExample = () => {
|
|
|
14
14
|
};
|
|
15
15
|
const resetGrantMatch = () => setStatus("pending query");
|
|
16
16
|
const grantMatchQueryProps = useGrantMatchActiveQuery(performGrantMatch, resetGrantMatch);
|
|
17
|
-
return (_jsxs(Container, { children: [_jsx(GrantMatch, { ...grantMatchQueryProps }), _jsxs("p", { children: ["Status: ", status] })] }));
|
|
17
|
+
return (_jsxs(Container, { children: [_jsx(GrantMatch, { ...grantMatchQueryProps, ...callbacks }), _jsxs("p", { children: ["Status: ", status] })] }));
|
|
18
18
|
};
|
|
19
19
|
const Container = styled.div `
|
|
20
20
|
display: flex;
|
|
@@ -32,7 +32,15 @@ const meta = {
|
|
|
32
32
|
},
|
|
33
33
|
};
|
|
34
34
|
export default meta;
|
|
35
|
-
export const
|
|
35
|
+
export const DefaultExample = {
|
|
36
36
|
args: {},
|
|
37
37
|
};
|
|
38
|
+
export const WithCallbacks = {
|
|
39
|
+
args: {
|
|
40
|
+
textSearchCallback: () => alert("doing text search"),
|
|
41
|
+
findGrantsCallback: () => alert("finding your grants"),
|
|
42
|
+
closeModalCallback: () => alert("closing modal"),
|
|
43
|
+
openModalCallback: () => alert("opening modal"),
|
|
44
|
+
},
|
|
45
|
+
};
|
|
38
46
|
//# sourceMappingURL=GrantMatch.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrantMatch.stories.js","sourceRoot":"","sources":["../../../stories/organisms/GrantMatch.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAwB,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"GrantMatch.stories.js","sourceRoot":"","sources":["../../../stories/organisms/GrantMatch.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAwB,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AASvC,MAAM,iBAAiB,GAAG,CAAC,SAAoB,EAAE,EAAE;IACjD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;IAEtD,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrE,MAAM,cAAc,GAAG,UAAU,SAAS,eAAe,QAAQ,CAAC,IAAI,GAAG,CAAC;QAE1E,SAAS,CAAC,+BAA+B,cAAc,EAAE,CAAC,CAAC;QAC3D,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,qBAAqB,cAAc,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAEzD,MAAM,oBAAoB,GAAG,wBAAwB,CACnD,iBAAiB,EACjB,eAAe,CAChB,CAAC;IAEF,OAAO,CACL,MAAC,SAAS,eACR,KAAC,UAAU,OAAK,oBAAoB,KAAM,SAAS,GAAI,EACvD,oCAAY,MAAM,IAAK,IACb,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM3B,CAAC;AAEF,MAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC;QACpD,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC;QACtD,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC;QAChD,iBAAiB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC;KAChD;CACF,CAAC","sourcesContent":["import { GrantMatch } from \"@/.\";\nimport { useGrantMatchActiveQuery } from \"@/core/organisms/GrantMatch\";\nimport { type GrantMatchQuery } from \"@grantbii/ui-core/match/models\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\nimport styled from \"styled-components\";\n\ntype Callbacks = {\n textSearchCallback?: () => void;\n findGrantsCallback?: () => void;\n closeModalCallback?: () => void;\n openModalCallback?: () => void;\n};\n\nconst GrantMatchExample = (callbacks: Callbacks) => {\n const [status, setStatus] = useState(\"pending query\");\n\n const performGrantMatch = (newQuery: GrantMatchQuery) => {\n const fileNames = newQuery.files.map((file) => file.name).join(\", \");\n const printableQuery = `files [${fileNames}] and text [${newQuery.text}]`;\n\n setStatus(`trying to find grants using ${printableQuery}`);\n setTimeout(() => setStatus(`found grants with ${printableQuery}`), 1000);\n };\n\n const resetGrantMatch = () => setStatus(\"pending query\");\n\n const grantMatchQueryProps = useGrantMatchActiveQuery(\n performGrantMatch,\n resetGrantMatch,\n );\n\n return (\n <Container>\n <GrantMatch {...grantMatchQueryProps} {...callbacks} />\n <p>Status: {status}</p>\n </Container>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n padding: 16px;\n`;\n\nconst meta: Meta<typeof GrantMatchExample> = {\n title: \"Organisms/Grant Match\",\n component: GrantMatchExample,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"fullscreen\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const DefaultExample: Story = {\n args: {},\n};\n\nexport const WithCallbacks: Story = {\n args: {\n textSearchCallback: () => alert(\"doing text search\"),\n findGrantsCallback: () => alert(\"finding your grants\"),\n closeModalCallback: () => alert(\"closing modal\"),\n openModalCallback: () => alert(\"opening modal\"),\n },\n};\n"]}
|
|
@@ -3,7 +3,7 @@ import { Button, TallyModal, useModal } from "@/.";
|
|
|
3
3
|
import {} from "react";
|
|
4
4
|
const TallyModalExample = (props) => {
|
|
5
5
|
const { showModal, openModal, closeModal } = useModal();
|
|
6
|
-
return (_jsxs(_Fragment, { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(TallyModal, { ...props,
|
|
6
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(TallyModal, { ...props, onClickClose: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
|
|
7
7
|
};
|
|
8
8
|
const meta = {
|
|
9
9
|
title: "Organisms/Tally Modal",
|