@grantbii/design-system 1.27.0 → 1.28.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.27.0",
+  "version": "1.28.1",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -12,7 +12,7 @@
   "main": "./index.js",
   "types": "./index.d.ts",
   "scripts": {
-    "lint": "next lint",
+    "lint": "eslint . --max-warnings=0",
     "prepare": "husky",
     "build": "npx tsc && cp -r ./core/assets ./dist/core && cp ./package.json ./dist && cp README.md ./dist",
     "postpublish": "rm -rf dist/",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "2.1.10",
-    "country-flag-icons": "1.6.19",
+    "country-flag-icons": "1.6.20",
     "react-dropzone": "15.0.0",
     "react-spinners": "0.17.0"
   },
@@ -52,7 +52,7 @@
     "eslint-plugin-storybook": "10.4.6",
     "husky": "9.1.7",
     "lint-staged": "17.0.8",
-    "next": "16.2.9",
+    "next": "16.2.10",
     "playwright": "1.61.1",
     "prettier": "3.9.4",
     "react": "19.2.7",
@@ -67,7 +67,7 @@
       "prettier --write"
     ],
     "**/*.{mjs,ts,tsx}": [
-      "eslint --fix",
+      "eslint --fix --max-warnings=0",
       "prettier --write"
     ]
   }

package/stories/archive/TallyModal.stories.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Button, TallyModal, useModal } from "@/.";
 import {} from "react";
 const TallyModalExample = (props) => {
-    const { showModal, openModal, closeModal } = useModal();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(TallyModal, { ...props, onClickClose: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
+    const { isModalOpen, openModal, closeModal } = useModal();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }), isModalOpen ? (_jsx(TallyModal, { ...props, onClickClose: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
 };
 const meta = {
     title: "Archive/Tally Modal",

package/stories/archive/TallyModal.stories.js.map

@@ -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,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAExD,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EACjE,SAAS,CAAC,CAAC,CAAC,CACX,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 { showModal, openModal, closeModal } = useModal();\n\n  return (\n    <>\n      <Button label=\"Click to open modal\" onClick={() => openModal()} />\n      {showModal ? (\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"]}
+{"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"]}

package/stories/organisms/Modal.stories.d.ts

@@ -1,14 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import type { JSX, ReactNode } from "react";
-type ModalExampleProps = {
-    header?: ReactNode;
-    content: JSX.Element;
-    footer?: ReactNode;
+import type { PropsWithChildren } from "react";
+type ModalDemoProps = {
     width?: string;
     height?: string;
-};
-declare const ModalExample: (props: ModalExampleProps) => JSX.Element;
-declare const meta: Meta<typeof ModalExample>;
+} & PropsWithChildren;
+declare const ModalDemo: ({ width, height, children }: ModalDemoProps) => import("react").JSX.Element;
+declare const meta: Meta<typeof ModalDemo>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const ShortContent: Story;

package/stories/organisms/Modal.stories.js

@@ -1,32 +1,45 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Modal, useModal } from "@/.";
-const ModalExample = (props) => {
-    const { showModal, openModal, closeModal } = useModal();
-    return (_jsxs("div", { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(Modal, { ...props, onClickClose: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { applyTypography, Button, Modal, Spacing, SystemIcon, Typography, useModal, } from "@/.";
+import styled from "styled-components";
+const ModalDemo = ({ width, height, children }) => {
+    const { isModalOpen, openModal, closeModal } = useModal();
+    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, {}))] }));
 };
+const ModalContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing.px8};
+
+  padding: ${Spacing.px20};
+`;
+const ModalHeader = ({ onClickClose }) => (_jsxs(BaseModalHeader, { children: [_jsx(ModalTitle, { children: "Sample Modal Header" }), _jsx(Button, { onClick: onClickClose, Icon: SystemIcon.XIcon, variant: "ghost" })] }));
+const BaseModalHeader = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const ModalTitle = styled.h3 `
+  ${applyTypography(Typography.heading3)}
+`;
 const meta = {
     title: "Organisms/Modal",
-    component: ModalExample,
+    component: Modal,
     tags: ["autodocs"],
+    render: (args) => _jsx(ModalDemo, { ...args }),
+    args: {
+        width: "600px",
+        height: "360px",
+    },
 };
 export default meta;
-const baseArgs = {
-    header: "Grantbii",
-    width: "600px",
-    height: "360px",
-};
-const shortContent = (_jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }));
 export const ShortContent = {
     args: {
-        ...baseArgs,
-        content: shortContent,
+        children: _jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }),
     },
 };
-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." })] }));
 export const LongContent = {
     args: {
-        ...baseArgs,
-        content: longContent,
+        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." })] })),
     },
 };
 //# sourceMappingURL=Modal.stories.js.map

package/stories/organisms/Modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/organisms/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,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EAEjE,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;CACnB,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 label=\"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: \"Organisms/Modal\",\n  component: ModalExample,\n  tags: [\"autodocs\"],\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"]}
+{"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"]}

package/stories/templates/GrantMatch.stories.js

@@ -27,9 +27,6 @@ const meta = {
     title: "Templates/Grant Match",
     component: GrantMatchExample,
     tags: ["autodocs"],
-    parameters: {
-        layout: "fullscreen",
-    },
 };
 export default meta;
 export const DefaultExample = {

package/stories/templates/GrantMatch.stories.js.map

@@ -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;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/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  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"]}
+{"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"]}