@grantbii/design-system 1.0.49 → 1.0.51

package/core/foundations/flags.d.ts

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

package/core/foundations/flags.js

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

package/core/foundations/icons.d.ts

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

package/core/foundations/icons.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export * from "@phosphor-icons/react";
+import Image from "next/image";
+export const GrantMatchIcon = ({ size = 20 }) => (_jsx(Image, { src: "/icons/grant_match.webp", alt: "Grant Match", width: size, height: size }));

package/core/foundations/index.d.ts

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

package/core/foundations/index.js

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

package/core/molecules/Modal.js

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { Button } from "../atoms";
 import { Colors } from "../foundations";
-const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { "$isFullScreen": isFullScreen, children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: _jsx(ModalContent, { children: content }) }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
+const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { "$isFullScreen": isFullScreen, children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
 export default Modal;
 export const useModal = () => {
     const [showModal, setShowModal] = useState(false);
@@ -70,14 +70,15 @@ const ModalBody = styled.div `
   height: 100%;
   padding-top: 24px;
   overflow-y: auto;
-`;
-const ModalContent = styled.div `
-  width: 100%;
-  height: 100%;
-  min-height: 100px;
 
-  padding: 2px 24px;
-  border: none;
+  > * {
+    width: 100%;
+    height: 100%;
+    min-height: 100px;
+
+    padding: 2px 24px;
+    border: none;
+  }
 `;
 const ModalFooter = styled.div `
   display: flex;

package/core/organisms/GrantMatch.d.ts

@@ -0,0 +1,21 @@
+type MatchQuery = {
+    files: File[];
+    text: string;
+};
+type GrantMatchProps = {
+    query: MatchQuery;
+    updateQueryFiles: (newFiles: File[]) => void;
+    updateQueryText: (newText: string) => void;
+    onPerformGrantMatch: (query: MatchQuery) => void;
+    onResetGrantMatch: () => void;
+};
+declare const GrantMatch: ({ query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
+export default GrantMatch;
+export declare const useMatchQuery: () => {
+    query: {
+        files: File[];
+        text: string;
+    };
+    updateQueryFiles: (newFiles: File[]) => void;
+    updateQueryText: (newText: string) => void;
+};

package/core/organisms/GrantMatch.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import { Badge, Button, Textarea } from "../atoms";
+import { Colors, Icons } from "../foundations";
+import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
+const GrantMatch = ({ query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, }) => {
+    const { showModal, openModal, closeModal } = useModal();
+    const { performGrantMatch, resetGrantMatch, removeUploadedFile, removeQueryText, } = useGrantMatch(query, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, closeModal);
+    return (_jsxs(Container, { children: [_jsx(GrantMatchButtons, { active: isQueryActive(query), onClickMatch: () => openModal(), onClickReset: () => resetGrantMatch() }), isQueryActive(query) ? (_jsx(QueryItems, { uploadedFiles: query.files, removeUploadedFile: removeUploadedFile, queryText: query.text, removeQueryText: removeQueryText })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeFiles: query.files, activeText: query.text, performGrantMatch: performGrantMatch, onClickCancel: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
+};
+export default GrantMatch;
+export const useMatchQuery = () => {
+    const [files, setFiles] = useState([]);
+    const [text, setText] = useState("");
+    return {
+        query: { files, text },
+        updateQueryFiles: (newFiles) => setFiles(newFiles),
+        updateQueryText: (newText) => setText(newText),
+    };
+};
+const useGrantMatch = (matchQuery, updateQueryFiles, updateQueryText, onPerformGrantMatch, onResetGrantMatch, closeModal) => {
+    const performGrantMatch = (newFiles, newText) => {
+        updateQueryFiles(newFiles);
+        updateQueryText(newText);
+        onPerformGrantMatch({ files: newFiles, text: newText });
+        closeModal();
+    };
+    const resetGrantMatch = () => {
+        updateQueryFiles([]);
+        updateQueryText("");
+        onResetGrantMatch();
+    };
+    const removeUploadedFile = (fileName) => {
+        const newFiles = matchQuery.files.filter((file) => file.name !== fileName);
+        updateQueryFiles(newFiles);
+        const newQuery = { files: newFiles, text: matchQuery.text };
+        if (isQueryActive(newQuery)) {
+            onPerformGrantMatch(newQuery);
+        }
+        else {
+            onResetGrantMatch();
+        }
+    };
+    const removeQueryText = () => {
+        updateQueryText("");
+        const newQuery = { files: matchQuery.files, text: "" };
+        if (isQueryActive(newQuery)) {
+            onPerformGrantMatch(newQuery);
+        }
+        else {
+            onResetGrantMatch();
+        }
+    };
+    return {
+        performGrantMatch,
+        resetGrantMatch,
+        removeUploadedFile,
+        removeQueryText,
+    };
+};
+const isQueryActive = (query) => query.files.length !== 0 || query.text.trim() !== "";
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  padding: 16px 16px 0px 16px;
+
+  width: 100%;
+  max-width: 100vw;
+`;
+const GrantMatchButtons = ({ active, onClickMatch, onClickReset, }) => (_jsxs(Buttons, { children: [_jsx(GrantMatchButton, { active: active, onClick: onClickMatch }), active ? (_jsx(Button, { text: "Reset", onClick: onClickReset, color: Colors.typography.blackMedium, underline: true })) : (_jsx(_Fragment, {}))] }));
+const Buttons = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const GrantMatchButton = ({ active, onClick }) => (_jsxs(BaseGrantMatchButton, { type: "button", "$active": active, onClick: onClick, children: [_jsx(Icons.GrantMatchIcon, { size: 20 }), _jsx("p", { children: "Find grants that match your needs" }), _jsx(Icons.MagnifyingGlassIcon, { size: 20 })] }));
+const BaseGrantMatchButton = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  height: 20px;
+  padding: 10px 16px;
+  border-radius: 200px;
+
+  font-size: 14px;
+  font-weight: 500;
+
+  color: ${Colors.typography.blackMedium};
+  background-color: ${Colors.base.white};
+  border: 1px solid
+    ${({ $active }) => ($active ? Colors.accent.yellow1 : Colors.neutral.grey3)};
+`;
+const QueryItems = ({ uploadedFiles, removeUploadedFile, queryText, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [uploadedFiles.map((file) => {
+            var _a;
+            return (_jsx(Badge, { text: file.name, Icon: (_a = FILE_TYPE_ICON_MAP[file.type]) !== null && _a !== void 0 ? _a : Icons.FileIcon, onClickClose: () => removeUploadedFile(file.name), textWidthPixels: 160 }, file.name));
+        }), queryText === "" ? (_jsx(_Fragment, {})) : (_jsx(Badge, { text: "Additional Information", Icon: Icons.TextAaIcon, onClickClose: () => removeQueryText(), textWidthPixels: 160 }, "additional-information-query-item"))] }));
+const BaseQueryItems = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  overflow-x: auto;
+
+  /* hide scrollbar but still allow for scrolling */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const FILE_TYPE_ICON_MAP = {
+    "application/pdf": Icons.FilePdfIcon,
+};
+const GrantMatchModal = ({ activeFiles, activeText, performGrantMatch, onClickCancel, }) => {
+    const { files, uploadFiles, removeFile } = useFileDrop(activeFiles);
+    const [queryText, setQueryText] = useState(activeText);
+    const updateQueryText = (newText) => setQueryText(newText);
+    return (_jsx(Modal, { header: _jsx(Header, {}), content: _jsx(Content, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, queryText: queryText, updateQueryText: updateQueryText }), footer: _jsx(Button, { text: "Find My Grants", onClick: () => performGrantMatch(files, queryText), backgroundColor: Colors.accent.yellow1 }), onClickCancel: onClickCancel }));
+};
+const Header = () => (_jsxs(BaseHeader, { children: [_jsx(Icons.GrantMatchIcon, { size: 24 }), _jsx("div", { children: "Grant Match" })] }));
+const BaseHeader = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const Content = ({ files, uploadFiles, removeFile, queryText, updateQueryText, }) => {
+    const additionalInformationId = "grant-match-additional-information";
+    return (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(QueryText, { children: [_jsx("label", { htmlFor: additionalInformationId, children: "Additional Information" }), _jsx(Textarea, { id: additionalInformationId, value: queryText, onChange: (event) => updateQueryText(event.target.value) })] })] }));
+};
+const BaseContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+const QueryText = styled.div `
+  display: flex;
+  flex-direction: column;
+`;

package/core/organisms/TallyModal.d.ts

@@ -0,0 +1,10 @@
+import { MouseEventHandler, ReactNode } from "react";
+type TallyModalProps = {
+    header?: ReactNode;
+    tallyId: string;
+    prefilledFieldsQueryParams?: string;
+    isFullScreen?: boolean;
+    onClickCancel: MouseEventHandler<HTMLButtonElement>;
+};
+declare const TallyModal: ({ tallyId, prefilledFieldsQueryParams, ...modalProps }: TallyModalProps) => import("react/jsx-runtime").JSX.Element;
+export default TallyModal;

package/core/organisms/TallyModal.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "../molecules";
+const TallyModal = (_a) => {
+    var { tallyId, prefilledFieldsQueryParams } = _a, modalProps = __rest(_a, ["tallyId", "prefilledFieldsQueryParams"]);
+    return (_jsx(Modal, Object.assign({}, modalProps, { content: _jsx("iframe", { src: constructIframeSrc(tallyId, prefilledFieldsQueryParams), loading: "lazy" }), width: "640px", height: "480px" })));
+};
+export default TallyModal;
+const constructIframeSrc = (tallyId, prefilledFieldsQueryParams) => `https://tally.so/embed/${tallyId}?${TALLY_QUERIES}${prefilledFieldsQueryParams ? `&${prefilledFieldsQueryParams}` : ""}`;
+const TALLY_QUERIES = "alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0";

package/core/organisms/index.d.ts

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

package/core/organisms/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/molecules/Modal.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Button, Modal, useModal } from "@/.";
 const ModalExample = (props) => {
     const { showModal, openModal, closeModal } = useModal();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { text: "Click to open modal", onClick: openModal }), showModal ? (_jsx(Modal, Object.assign({}, props, { onClickCancel: () => closeModal() }))) : (_jsx(_Fragment, {}))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(Modal, Object.assign({}, props, { onClickCancel: () => closeModal() }))) : (_jsx(_Fragment, {}))] }));
 };
 const meta = {
     title: "Molecules/Modal",

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+declare const GrantMatchExample: () => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof GrantMatchExample>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Example: Story;

package/stories/organisms/GrantMatch.stories.js

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

package/stories/organisms/TallyModal.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { ReactNode } from "react";
+type TallyModalExampleProps = {
+    header?: ReactNode;
+    tallyId: string;
+    prefilledFieldsQueryParams?: string;
+    isFullScreen?: boolean;
+};
+declare const TallyModalExample: (props: TallyModalExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof TallyModalExample>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const PopUp: Story;
+export declare const FullScreen: Story;

package/stories/organisms/TallyModal.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, TallyModal, useModal } from "@/.";
+const TallyModalExample = (props) => {
+    const { showModal, openModal, closeModal } = useModal();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(TallyModal, Object.assign({}, props, { onClickCancel: () => closeModal() }))) : (_jsx(_Fragment, {}))] }));
+};
+const meta = {
+    title: "Organisms/Tally Modal",
+    component: TallyModalExample,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+const baseArgs = {
+    header: "Apply with us",
+    tallyId: "3jAj5Q",
+};
+export const PopUp = {
+    args: baseArgs,
+};
+export const FullScreen = {
+    args: Object.assign(Object.assign({}, baseArgs), { isFullScreen: true }),
+};