@grantbii/design-system 1.26.0 → 1.28.0
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/README.md +1 -1
- package/core/archive/TallyModal.d.ts +1 -1
- package/core/archive/TallyModal.js +39 -5
- package/core/archive/TallyModal.js.map +1 -1
- package/core/molecules/Button.d.ts +2 -2
- package/core/molecules/Button.js.map +1 -1
- package/core/molecules/index.d.ts +1 -1
- package/core/molecules/index.js +1 -1
- package/core/molecules/index.js.map +1 -1
- package/core/organisms/Modal.d.ts +4 -9
- package/core/organisms/Modal.js +11 -44
- package/core/organisms/Modal.js.map +1 -1
- package/core/organisms/SearchBar.d.ts +4 -2
- package/core/organisms/SearchBar.js +2 -2
- package/core/organisms/SearchBar.js.map +1 -1
- package/core/organisms/index.d.ts +1 -1
- package/core/organisms/index.js.map +1 -1
- package/core/templates/GrantMatch/GrantMatchModal.js +49 -22
- package/core/templates/GrantMatch/GrantMatchModal.js.map +1 -1
- package/core/templates/GrantMatch/index.js +5 -13
- package/core/templates/GrantMatch/index.js.map +1 -1
- package/package.json +10 -10
- package/stories/archive/TallyModal.stories.js +2 -2
- package/stories/archive/TallyModal.stories.js.map +1 -1
- package/stories/organisms/Modal.stories.d.ts +5 -8
- package/stories/organisms/Modal.stories.js +30 -17
- package/stories/organisms/Modal.stories.js.map +1 -1
- package/stories/organisms/SearchBar.stories.d.ts +1 -0
- package/stories/organisms/SearchBar.stories.js +5 -2
- package/stories/organisms/SearchBar.stories.js.map +1 -1
- package/stories/templates/GrantMatch.stories.js +0 -3
- package/stories/templates/GrantMatch.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -9,33 +9,25 @@ import GrantMatchModal from "./GrantMatchModal";
|
|
|
9
9
|
import OpenModalButton from "./OpenModalButton";
|
|
10
10
|
import { GrantMatchContext } from "./context";
|
|
11
11
|
const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGrantsCallback, closeModalCallback, openModalCallback, }) => {
|
|
12
|
-
const {
|
|
12
|
+
const { isModalOpen, openModal, closeModal } = useModal();
|
|
13
13
|
const [queryText, setQueryText] = useState(activeQuery.text);
|
|
14
|
-
const updateQueryText = (newText) => setQueryText(newText);
|
|
15
14
|
const commonProps = useMemo(() => ({
|
|
16
15
|
activeQuery,
|
|
17
16
|
updateActiveQuery,
|
|
18
17
|
queryText,
|
|
19
|
-
updateQueryText,
|
|
18
|
+
updateQueryText: setQueryText,
|
|
20
19
|
openModal,
|
|
21
20
|
closeModal,
|
|
22
|
-
}), [
|
|
23
|
-
activeQuery,
|
|
24
|
-
updateActiveQuery,
|
|
25
|
-
queryText,
|
|
26
|
-
updateQueryText,
|
|
27
|
-
openModal,
|
|
28
|
-
closeModal,
|
|
29
|
-
]);
|
|
21
|
+
}), [activeQuery, updateActiveQuery, queryText, openModal, closeModal]);
|
|
30
22
|
const handleSearch = () => {
|
|
31
23
|
updateActiveQuery({ files: activeQuery.files, text: queryText });
|
|
32
24
|
textSearchCallback?.();
|
|
33
25
|
};
|
|
34
26
|
const handleReset = () => {
|
|
35
|
-
|
|
27
|
+
setQueryText("");
|
|
36
28
|
updateActiveQuery({ files: activeQuery.files, text: "" });
|
|
37
29
|
};
|
|
38
|
-
return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { queryText: queryText, onChangeQueryText: (event) => setQueryText(event.target.value), handlePressEnter: () => handleSearch(), onClickSearch: () => handleSearch(), onClickReset: () => handleReset(), size: "small" }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}),
|
|
30
|
+
return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { queryText: queryText, onChangeQueryText: (event) => setQueryText(event.target.value), handlePressEnter: () => handleSearch(), onClickSearch: () => handleSearch(), onClickReset: () => handleReset(), size: "small" }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), isModalOpen ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
|
|
39
31
|
};
|
|
40
32
|
export default GrantMatch;
|
|
41
33
|
const BaseGrantMatch = styled.div `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,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,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { checkGrantMatchActive } from \"@grantbii/ui-core/match/validations\";\nimport { useMemo, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, Spacing } from \"../../atoms\";\nimport { SearchBar, useModal } from \"../../organisms\";\nimport ActiveQueryFiles from \"./ActiveQueryFiles\";\nimport GrantMatchModal from \"./GrantMatchModal\";\nimport OpenModalButton from \"./OpenModalButton\";\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 { isModalOpen, openModal, closeModal } = useModal();\n const [queryText, setQueryText] = useState(activeQuery.text);\n\n const commonProps = useMemo(\n () => ({\n activeQuery,\n updateActiveQuery,\n queryText,\n updateQueryText: setQueryText,\n openModal,\n closeModal,\n }),\n [activeQuery, updateActiveQuery, queryText, openModal, closeModal],\n );\n\n const handleSearch = () => {\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n textSearchCallback?.();\n };\n\n const handleReset = () => {\n setQueryText(\"\");\n updateActiveQuery({ files: activeQuery.files, text: \"\" });\n };\n\n return (\n <GrantMatchContext.Provider value={commonProps}>\n <BaseGrantMatch>\n <SearchBarContainer>\n <SearchBar\n queryText={queryText}\n onChangeQueryText={(event) => setQueryText(event.target.value)}\n handlePressEnter={() => handleSearch()}\n onClickSearch={() => handleSearch()}\n onClickReset={() => handleReset()}\n size=\"small\"\n />\n <OpenModalButton openModalCallback={openModalCallback} />\n </SearchBarContainer>\n\n {activeQuery.files.length > 0 ? <ActiveQueryFiles /> : <></>}\n\n {isModalOpen ? (\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: ${Spacing.px8};\n\n width: 100%;\n max-width: 100vw;\n`;\n\nconst SearchBarContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n\n color: ${Color.typography.blackHigh};\n background-color: ${Color.neutral.white};\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n gap: ${Spacing.px8};\n padding: 0px;\n\n box-shadow: none;\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n gap: ${Spacing.px16};\n padding: ${Spacing.px12} ${Spacing.px16};\n\n box-shadow: 0px 0px ${Spacing.px40} 0px #00000008;\n border-radius: ${Spacing.px12};\n }\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"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
3
|
"author": "Grantbii",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.28.0",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@phosphor-icons/react": "2.1.10",
|
|
24
|
-
"country-flag-icons": "1.6.
|
|
24
|
+
"country-flag-icons": "1.6.20",
|
|
25
25
|
"react-dropzone": "15.0.0",
|
|
26
26
|
"react-spinners": "0.17.0"
|
|
27
27
|
},
|
|
@@ -43,24 +43,24 @@
|
|
|
43
43
|
"@types/node": "22.19.17",
|
|
44
44
|
"@types/react": "19.2.17",
|
|
45
45
|
"@types/react-dom": "19.2.3",
|
|
46
|
-
"@vitest/browser": "4.1.
|
|
47
|
-
"@vitest/browser-playwright": "4.1.
|
|
48
|
-
"@vitest/coverage-v8": "4.1.
|
|
46
|
+
"@vitest/browser": "4.1.9",
|
|
47
|
+
"@vitest/browser-playwright": "4.1.9",
|
|
48
|
+
"@vitest/coverage-v8": "4.1.9",
|
|
49
49
|
"eslint": "9.39.4",
|
|
50
50
|
"eslint-config-next": "16.2.9",
|
|
51
51
|
"eslint-config-prettier": "10.1.8",
|
|
52
52
|
"eslint-plugin-storybook": "10.4.6",
|
|
53
53
|
"husky": "9.1.7",
|
|
54
54
|
"lint-staged": "17.0.8",
|
|
55
|
-
"next": "16.2.
|
|
56
|
-
"playwright": "1.61.
|
|
57
|
-
"prettier": "3.
|
|
55
|
+
"next": "16.2.10",
|
|
56
|
+
"playwright": "1.61.1",
|
|
57
|
+
"prettier": "3.9.4",
|
|
58
58
|
"react": "19.2.7",
|
|
59
59
|
"react-dom": "19.2.7",
|
|
60
60
|
"storybook": "10.4.6",
|
|
61
|
-
"styled-components": "6.4.
|
|
61
|
+
"styled-components": "6.4.3",
|
|
62
62
|
"typescript": "6.0.3",
|
|
63
|
-
"vitest": "4.1.
|
|
63
|
+
"vitest": "4.1.9"
|
|
64
64
|
},
|
|
65
65
|
"lint-staged": {
|
|
66
66
|
"**/*.{html,css,json,md,yaml}": [
|
|
@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { Button, TallyModal, useModal } from "@/.";
|
|
3
3
|
import {} from "react";
|
|
4
4
|
const TallyModalExample = (props) => {
|
|
5
|
-
const {
|
|
6
|
-
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }),
|
|
5
|
+
const { isModalOpen, openModal, closeModal } = useModal();
|
|
6
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }), isModalOpen ? (_jsx(TallyModal, { ...props, onClickClose: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
|
|
7
7
|
};
|
|
8
8
|
const meta = {
|
|
9
9
|
title: "Archive/Tally Modal",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TallyModal.stories.js","sourceRoot":"","sources":["../../../stories/archive/TallyModal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEnD,OAAO,EAAkB,MAAM,OAAO,CAAC;AAQvC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IAC1D,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"TallyModal.stories.js","sourceRoot":"","sources":["../../../stories/archive/TallyModal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEnD,OAAO,EAAkB,MAAM,OAAO,CAAC;AAQvC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IAC1D,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE1D,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EACjE,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,UAAU,OAAK,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,CAC5D,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC","sourcesContent":["import { Button, TallyModal, useModal } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { type ReactNode } from \"react\";\n\ntype TallyModalExampleProps = {\n header?: ReactNode;\n tallyId: string;\n prefilledFieldsQueryParams?: string;\n};\n\nconst TallyModalExample = (props: TallyModalExampleProps) => {\n const { isModalOpen, openModal, closeModal } = useModal();\n\n return (\n <>\n <Button label=\"Click to open modal\" onClick={() => openModal()} />\n {isModalOpen ? (\n <TallyModal {...props} onClickClose={() => closeModal()} />\n ) : (\n <></>\n )}\n </>\n );\n};\n\nconst meta: Meta<typeof TallyModalExample> = {\n title: \"Archive/Tally Modal\",\n component: TallyModalExample,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Example: Story = {\n args: {\n header: \"Apply with us\",\n tallyId: \"3jAj5Q\",\n },\n};\n"]}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
|
|
2
|
-
import type {
|
|
3
|
-
type
|
|
4
|
-
header?: ReactNode;
|
|
5
|
-
content: JSX.Element;
|
|
6
|
-
footer?: ReactNode;
|
|
2
|
+
import type { PropsWithChildren } from "react";
|
|
3
|
+
type ModalDemoProps = {
|
|
7
4
|
width?: string;
|
|
8
5
|
height?: string;
|
|
9
|
-
};
|
|
10
|
-
declare const
|
|
11
|
-
declare const meta: Meta<typeof
|
|
6
|
+
} & PropsWithChildren;
|
|
7
|
+
declare const ModalDemo: ({ width, height, children }: ModalDemoProps) => import("react").JSX.Element;
|
|
8
|
+
declare const meta: Meta<typeof ModalDemo>;
|
|
12
9
|
export default meta;
|
|
13
10
|
type Story = StoryObj<typeof meta>;
|
|
14
11
|
export declare const ShortContent: Story;
|
|
@@ -1,32 +1,45 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { Button, Modal, useModal } from "@/.";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { applyTypography, Button, Modal, Spacing, SystemIcon, Typography, useModal, } from "@/.";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
const ModalDemo = ({ width, height, children }) => {
|
|
5
|
+
const { isModalOpen, openModal, closeModal } = useModal();
|
|
6
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }), isModalOpen ? (_jsx(Modal, { width: width, height: height, children: _jsxs(ModalContent, { children: [_jsx(ModalHeader, { onClickClose: () => closeModal() }), children] }) })) : (_jsx(_Fragment, {}))] }));
|
|
6
7
|
};
|
|
8
|
+
const ModalContent = styled.div `
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
gap: ${Spacing.px8};
|
|
12
|
+
|
|
13
|
+
padding: ${Spacing.px20};
|
|
14
|
+
`;
|
|
15
|
+
const ModalHeader = ({ onClickClose }) => (_jsxs(BaseModalHeader, { children: [_jsx(ModalTitle, { children: "Sample Modal Header" }), _jsx(Button, { onClick: onClickClose, Icon: SystemIcon.XIcon, variant: "ghost" })] }));
|
|
16
|
+
const BaseModalHeader = styled.div `
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: space-between;
|
|
19
|
+
align-items: center;
|
|
20
|
+
`;
|
|
21
|
+
const ModalTitle = styled.h3 `
|
|
22
|
+
${applyTypography(Typography.heading3)}
|
|
23
|
+
`;
|
|
7
24
|
const meta = {
|
|
8
25
|
title: "Organisms/Modal",
|
|
9
|
-
component:
|
|
26
|
+
component: Modal,
|
|
10
27
|
tags: ["autodocs"],
|
|
28
|
+
render: (args) => _jsx(ModalDemo, { ...args }),
|
|
29
|
+
args: {
|
|
30
|
+
width: "600px",
|
|
31
|
+
height: "360px",
|
|
32
|
+
},
|
|
11
33
|
};
|
|
12
34
|
export default meta;
|
|
13
|
-
const baseArgs = {
|
|
14
|
-
header: "Grantbii",
|
|
15
|
-
width: "600px",
|
|
16
|
-
height: "360px",
|
|
17
|
-
};
|
|
18
|
-
const shortContent = (_jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }));
|
|
19
35
|
export const ShortContent = {
|
|
20
36
|
args: {
|
|
21
|
-
|
|
22
|
-
content: shortContent,
|
|
37
|
+
children: _jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }),
|
|
23
38
|
},
|
|
24
39
|
};
|
|
25
|
-
const longContent = (_jsxs("div", { children: [_jsx("p", { children: "Grantbii is an AI-powered grant intelligence and matching platform that helps grant seekers effortlessly find, match, prep & apply for the right business grants - maximizing grant funding success with minimal effort. Our platform connects businesses with a trusted Grant Enabler Network - solution providers, consulting experts, and delivery partners - ensuring that every dollar of grant funding leads to real business transformation impact." }), _jsx("p", { children: "In the future, Grantbii aims to automate the entire grant application lifecycle, from discovery to claims submission and guide you through the application process with minimal effort on your part." }), _jsx("p", { children: "To maximize your chances of grant success, you can expect to leverage on tools to assess your chances of success and offer expert support to ensure your application meets all necessary requirements." })] }));
|
|
26
40
|
export const LongContent = {
|
|
27
41
|
args: {
|
|
28
|
-
|
|
29
|
-
content: longContent,
|
|
42
|
+
children: (_jsxs("div", { children: [_jsx("p", { children: "Grantbii is an AI-powered grant intelligence and matching platform that helps grant seekers effortlessly find, match, prep & apply for the right business grants - maximizing grant funding success with minimal effort. Our platform connects businesses with a trusted Grant Enabler Network - solution providers, consulting experts, and delivery partners - ensuring that every dollar of grant funding leads to real business transformation impact." }), _jsx("p", { children: "In the future, Grantbii aims to automate the entire grant application lifecycle, from discovery to claims submission and guide you through the application process with minimal effort on your part." }), _jsx("p", { children: "To maximize your chances of grant success, you can expect to leverage on tools to assess your chances of success and offer expert support to ensure your application meets all necessary requirements." })] })),
|
|
30
43
|
},
|
|
31
44
|
};
|
|
32
45
|
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/organisms/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/organisms/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,MAAM,KAAK,CAAC;AAGb,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAkB,EAAE,EAAE;IAChE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE1D,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EAEjE,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,YACjC,MAAC,YAAY,eACX,KAAC,WAAW,IAAC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,EAChD,QAAQ,IACI,GACT,CACT,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGtB,OAAO,CAAC,GAAG;;aAEP,OAAO,CAAC,IAAI;CACxB,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,EAAoB,EAAE,EAAE,CAAC,CAC1D,MAAC,eAAe,eACd,KAAC,UAAU,sCAAiC,EAC5C,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,CAAC,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,IACzD,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;IACxB,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;CACvC,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,IAAI,GAAI;IACzC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;KAChB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,QAAQ,EAAE,gFAA4D;KACvE;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,0BACE,qdAQI,EAEJ,+NAII,EAEJ,iOAII,IACA,CACP;KACF;CACF,CAAC","sourcesContent":["import {\n applyTypography,\n Button,\n Modal,\n Spacing,\n SystemIcon,\n Typography,\n useModal,\n} from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport type { MouseEventHandler, PropsWithChildren } from \"react\";\nimport styled from \"styled-components\";\n\ntype ModalDemoProps = {\n width?: string;\n height?: string;\n} & PropsWithChildren;\n\nconst ModalDemo = ({ width, height, children }: ModalDemoProps) => {\n const { isModalOpen, openModal, closeModal } = useModal();\n\n return (\n <>\n <Button label=\"Click to open modal\" onClick={() => openModal()} />\n\n {isModalOpen ? (\n <Modal width={width} height={height}>\n <ModalContent>\n <ModalHeader onClickClose={() => closeModal()} />\n {children}\n </ModalContent>\n </Modal>\n ) : (\n <></>\n )}\n </>\n );\n};\n\nconst ModalContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing.px8};\n\n padding: ${Spacing.px20};\n`;\n\ntype ModalHeaderProps = {\n onClickClose: MouseEventHandler<HTMLElement>;\n};\n\nconst ModalHeader = ({ onClickClose }: ModalHeaderProps) => (\n <BaseModalHeader>\n <ModalTitle>Sample Modal Header</ModalTitle>\n <Button onClick={onClickClose} Icon={SystemIcon.XIcon} variant=\"ghost\" />\n </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst ModalTitle = styled.h3`\n ${applyTypography(Typography.heading3)}\n`;\n\nconst meta: Meta<typeof ModalDemo> = {\n title: \"Organisms/Modal\",\n component: Modal,\n tags: [\"autodocs\"],\n render: (args) => <ModalDemo {...args} />,\n args: {\n width: \"600px\",\n height: \"360px\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const ShortContent: Story = {\n args: {\n children: <p>Amplifying Business Grant Impact for SMEs & Scale-ups</p>,\n },\n};\n\nexport const LongContent: Story = {\n args: {\n children: (\n <div>\n <p>\n Grantbii is an AI-powered grant intelligence and matching platform\n that helps grant seekers effortlessly find, match, prep & apply for\n the right business grants - maximizing grant funding success with\n minimal effort. Our platform connects businesses with a trusted Grant\n Enabler Network - solution providers, consulting experts, and delivery\n partners - ensuring that every dollar of grant funding leads to real\n business transformation 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\n the 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\n on tools to assess your chances of success and offer expert support to\n ensure your application meets all necessary requirements.\n </p>\n </div>\n ),\n },\n};\n"]}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { SearchBar } from "@/.";
|
|
3
3
|
import { useState } from "react";
|
|
4
|
-
const SearchBarExample = ({ size }) => {
|
|
4
|
+
const SearchBarExample = ({ size, searchButtonVariant, }) => {
|
|
5
5
|
const [queryText, setQueryText] = useState("");
|
|
6
6
|
const performSearch = () => {
|
|
7
7
|
if (queryText.trim() !== "") {
|
|
8
8
|
alert(`Searching for ${queryText}`);
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
|
-
return (_jsx(SearchBar, { queryText: queryText,
|
|
11
|
+
return (_jsx(SearchBar, { queryText: queryText, onClickReset: () => setQueryText(""), onClickSearch: () => performSearch(), handlePressEnter: () => performSearch(), onChangeQueryText: (event) => setQueryText(event.target.value), searchButtonVariant: searchButtonVariant, size: size }));
|
|
12
12
|
};
|
|
13
13
|
const meta = {
|
|
14
14
|
title: "Organisms/SearchBar",
|
|
@@ -25,4 +25,7 @@ export const Small = {
|
|
|
25
25
|
export const Medium = {
|
|
26
26
|
args: { size: "medium" },
|
|
27
27
|
};
|
|
28
|
+
export const OutlineSearchButton = {
|
|
29
|
+
args: { size: "medium", searchButtonVariant: "outline" },
|
|
30
|
+
};
|
|
28
31
|
//# sourceMappingURL=SearchBar.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../stories/organisms/SearchBar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../stories/organisms/SearchBar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAA0C,MAAM,KAAK,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOjC,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,mBAAmB,GACG,EAAE,EAAE;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC5B,KAAK,CAAC,iBAAiB,SAAS,EAAE,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EACpC,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EACpC,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EACvC,iBAAiB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9D,mBAAmB,EAAE,mBAAmB,EACxC,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU;IACxC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,SAAS,EAAE;CACzD,CAAC","sourcesContent":["import { SearchBar, type ButtonVariant, type SearchBarSize } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype SearchBarExampleProps = {\n size?: SearchBarSize;\n searchButtonVariant?: ButtonVariant;\n};\n\nconst SearchBarExample = ({\n size,\n searchButtonVariant,\n}: SearchBarExampleProps) => {\n const [queryText, setQueryText] = useState(\"\");\n\n const performSearch = () => {\n if (queryText.trim() !== \"\") {\n alert(`Searching for ${queryText}`);\n }\n };\n\n return (\n <SearchBar\n queryText={queryText}\n onClickReset={() => setQueryText(\"\")}\n onClickSearch={() => performSearch()}\n handlePressEnter={() => performSearch()}\n onChangeQueryText={(event) => setQueryText(event.target.value)}\n searchButtonVariant={searchButtonVariant}\n size={size}\n />\n );\n};\n\nconst meta: Meta<typeof SearchBar> = {\n title: \"Organisms/SearchBar\",\n component: SearchBarExample,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"fullscreen\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Small: Story = {\n args: { size: \"small\" },\n};\n\nexport const Medium: Story = {\n args: { size: \"medium\" },\n};\n\nexport const OutlineSearchButton: Story = {\n args: { size: \"medium\", searchButtonVariant: \"outline\" },\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrantMatch.stories.js","sourceRoot":"","sources":["../../../stories/templates/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,kCAAkC,CAAC;AAExE,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;
|
|
1
|
+
{"version":3,"file":"GrantMatch.stories.js","sourceRoot":"","sources":["../../../stories/templates/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,kCAAkC,CAAC;AAExE,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;CACnB,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/templates/GrantMatch\";\nimport { type GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\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: \"Templates/Grant Match\",\n component: GrantMatchExample,\n tags: [\"autodocs\"],\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"]}
|