@grantbii/design-system 1.19.6 → 1.20.1

package/vitest.config.js

@@ -3,9 +3,9 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { defineConfig } from "vitest/config";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
-const dirname = typeof __dirname !== "undefined"
-    ? __dirname
-    : path.dirname(fileURLToPath(import.meta.url));
+const dirname = typeof __dirname === "undefined"
+    ? path.dirname(fileURLToPath(import.meta.url))
+    : __dirname;
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
     test: {

package/vitest.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"vitest.config.js","sourceRoot":"","sources":["../vitest.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEtE,MAAM,OAAO,GACX,OAAO,SAAS,KAAK,WAAW;IAC9B,CAAC,CAAC,SAAS;IACX,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAEnD,2FAA2F;AAC3F,eAAe,YAAY,CAAC;IAC1B,IAAI,EAAE;QACJ,QAAQ,EAAE;YACR;gBACE,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE;oBACP,6EAA6E;oBAC7E,2GAA2G;oBAC3G,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,CAAC;iBAC/D;gBACD,IAAI,EAAE;oBACJ,IAAI,EAAE,WAAW;oBACjB,OAAO,EAAE;wBACP,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,QAAQ,EAAE,UAAU,EAAE;wBACtB,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;qBACrC;oBACD,UAAU,EAAE,CAAC,4BAA4B,CAAC;iBAC3C;aACF;SACF;KACF;CACF,CAAC,CAAC","sourcesContent":["import { playwright } from \"@vitest/browser-playwright\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport { defineConfig } from \"vitest/config\";\n\nimport { storybookTest } from \"@storybook/addon-vitest/vitest-plugin\";\n\nconst dirname =\n  typeof __dirname !== \"undefined\"\n    ? __dirname\n    : path.dirname(fileURLToPath(import.meta.url));\n\n// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon\nexport default defineConfig({\n  test: {\n    projects: [\n      {\n        extends: true,\n        plugins: [\n          // The plugin will run tests for the stories defined in your Storybook config\n          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest\n          storybookTest({ configDir: path.join(dirname, \".storybook\") }),\n        ],\n        test: {\n          name: \"storybook\",\n          browser: {\n            enabled: true,\n            headless: true,\n            provider: playwright(),\n            instances: [{ browser: \"chromium\" }],\n          },\n          setupFiles: [\".storybook/vitest.setup.ts\"],\n        },\n      },\n    ],\n  },\n});\n"]}
+{"version":3,"file":"vitest.config.js","sourceRoot":"","sources":["../vitest.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEtE,MAAM,OAAO,GACX,OAAO,SAAS,KAAK,WAAW;IAC9B,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,CAAC,CAAC,SAAS,CAAC;AAEhB,2FAA2F;AAC3F,eAAe,YAAY,CAAC;IAC1B,IAAI,EAAE;QACJ,QAAQ,EAAE;YACR;gBACE,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE;oBACP,6EAA6E;oBAC7E,2GAA2G;oBAC3G,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,CAAC;iBAC/D;gBACD,IAAI,EAAE;oBACJ,IAAI,EAAE,WAAW;oBACjB,OAAO,EAAE;wBACP,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,QAAQ,EAAE,UAAU,EAAE;wBACtB,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;qBACrC;oBACD,UAAU,EAAE,CAAC,4BAA4B,CAAC;iBAC3C;aACF;SACF;KACF;CACF,CAAC,CAAC","sourcesContent":["import { playwright } from \"@vitest/browser-playwright\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport { defineConfig } from \"vitest/config\";\n\nimport { storybookTest } from \"@storybook/addon-vitest/vitest-plugin\";\n\nconst dirname =\n  typeof __dirname === \"undefined\"\n    ? path.dirname(fileURLToPath(import.meta.url))\n    : __dirname;\n\n// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon\nexport default defineConfig({\n  test: {\n    projects: [\n      {\n        extends: true,\n        plugins: [\n          // The plugin will run tests for the stories defined in your Storybook config\n          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest\n          storybookTest({ configDir: path.join(dirname, \".storybook\") }),\n        ],\n        test: {\n          name: \"storybook\",\n          browser: {\n            enabled: true,\n            headless: true,\n            provider: playwright(),\n            instances: [{ browser: \"chromium\" }],\n          },\n          setupFiles: [\".storybook/vitest.setup.ts\"],\n        },\n      },\n    ],\n  },\n});\n"]}

package/core/templates/GrantMatch/SearchBar.d.ts

@@ -1,6 +0,0 @@
-type SearchBarProps = {
-    textSearchCallback?: () => void;
-    openModalCallback?: () => void;
-};
-declare const SearchBar: ({ textSearchCallback, openModalCallback, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
-export default SearchBar;

package/core/templates/GrantMatch/SearchBar.js

@@ -1,165 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
-import { applyTypography } from "../../integrations";
-import { Color, Responsive, SystemIcon, Typography } from "../../atoms";
-import { Button } from "../../molecules";
-import { useGrantMatchContext } from "./context";
-const SearchBar = ({ textSearchCallback, openModalCallback, }) => {
-    const { activeQuery, queryText } = useGrantMatchContext();
-    return (_jsxs(BaseSearchBar, { children: [_jsxs(TextSearchArea, { "$showBorder": activeQuery.text !== "", children: [_jsx(QueryTextInput, {}), queryText === "" ? (_jsx(ResetTextButtonPlaceholder, {})) : (_jsx(ResetTextButton, {}))] }), _jsx(TextSearchButton, { textSearchCallback: textSearchCallback }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }));
-};
-export default SearchBar;
-const BaseSearchBar = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  width: 100%;
-
-  color: ${Color.typography.blackHigh};
-  background-color: ${Color.neutral.white};
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    gap: 8px;
-    padding: 0px;
-
-    box-shadow: none;
-    border-radius: 0px;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    gap: 16px;
-    padding: 12px 16px;
-
-    box-shadow: 0px 0px 40px 0px #00000008;
-    border-radius: 12px;
-  }
-`;
-const TextSearchArea = styled.div `
-  display: flex;
-  align-items: center;
-
-  height: 40px;
-  width: 100%;
-
-  background-color: ${Color.neutral.grey4};
-  border-radius: 8px;
-
-  border: 1px solid
-    ${({ $showBorder }) => $showBorder ? Color.accent.yellow1 : Color.neutral.grey2};
-
-  &:focus-within {
-    border: 1px solid ${Color.accent.yellow1};
-  }
-`;
-const QueryTextInput = () => {
-    const { activeQuery, updateActiveQuery, queryText, updateQueryText } = useGrantMatchContext();
-    const onKeyDown = (event) => {
-        if (event.key === "Enter" && !event.repeat) {
-            event.preventDefault();
-            updateActiveQuery({ files: activeQuery.files, text: queryText });
-        }
-    };
-    return (_jsx(BaseQueryTextInput, { value: queryText, onChange: (event) => updateQueryText(event.target.value), onKeyDown: onKeyDown, placeholder: "Search grant or describe your project" }));
-};
-const BaseQueryTextInput = styled.input `
-  width: 100%;
-  margin-left: 16px;
-  outline: none;
-  border: none;
-
-  background-color: ${Color.neutral.grey4};
-  text-overflow: ellipsis;
-`;
-const ResetTextButton = () => {
-    const { activeQuery, updateActiveQuery, updateQueryText } = useGrantMatchContext();
-    const onClick = () => {
-        updateQueryText("");
-        updateActiveQuery({ files: activeQuery.files, text: "" });
-    };
-    return (_jsx(BaseResetTextButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { size: 14, color: Color.neutral.black }) }));
-};
-const BaseResetTextButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 38px;
-  min-width: 38px;
-  height: 38px;
-
-  background-color: ${Color.neutral.grey4};
-  border-radius: 8px;
-`;
-const ResetTextButtonPlaceholder = styled.div `
-  width: 38px;
-  height: 38px;
-
-  border-radius: 8px;
-`;
-const TextSearchButton = ({ textSearchCallback }) => {
-    const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();
-    const onClick = () => {
-        if (textSearchCallback) {
-            textSearchCallback();
-        }
-        updateActiveQuery({ files: activeQuery.files, text: queryText });
-    };
-    return (_jsx(Button, { Icon: SystemIcon.MagnifyingGlassIcon, onClick: onClick, size: "small" }));
-};
-const OpenModalButton = ({ openModalCallback }) => {
-    const { openModal } = useGrantMatchContext();
-    const onClickOpen = () => {
-        if (openModalCallback) {
-            openModalCallback();
-        }
-        openModal();
-    };
-    return (_jsxs(BaseOpenModalButton, { onClick: onClickOpen, children: [_jsx(SystemIcon.FileArrowUpIcon, { size: 20 }), _jsx(OpenModalButtonText, { children: "File Drop" })] }));
-};
-const BaseOpenModalButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-
-  height: 40px;
-
-  border-radius: 8px;
-
-  background-color: ${Color.neutral.grey3};
-  color: ${Color.typography.blackHigh};
-
-  ${applyTypography(Typography.bodySecondaryRegular)}
-
-  &:hover {
-    background-color: ${Color.accent.blue3};
-  }
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    width: 40px;
-    min-width: 40px;
-    padding: 0px;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    width: auto;
-    min-width: 90px;
-    padding: 2px 16px;
-  }
-`;
-const OpenModalButtonText = styled.p `
-  font-weight: 500;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: none;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: inline;
-  }
-`;
-//# sourceMappingURL=SearchBar.js.map

package/core/templates/GrantMatch/SearchBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { applyTypography } from \"../../integrations\";\nimport { Color, Responsive, SystemIcon, Typography } from \"../../atoms\";\nimport { Button } from \"../../molecules\";\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>\n      <TextSearchArea $showBorder={activeQuery.text !== \"\"}>\n        <QueryTextInput />\n\n        {queryText === \"\" ? (\n          <ResetTextButtonPlaceholder />\n        ) : (\n          <ResetTextButton />\n        )}\n      </TextSearchArea>\n\n      <TextSearchButton textSearchCallback={textSearchCallback} />\n      <OpenModalButton openModalCallback={openModalCallback} />\n    </BaseSearchBar>\n  );\n};\n\nexport default SearchBar;\n\nconst BaseSearchBar = 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.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 8px;\n    padding: 0px;\n\n    box-shadow: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 16px;\n    padding: 12px 16px;\n\n    box-shadow: 0px 0px 40px 0px #00000008;\n    border-radius: 12px;\n  }\n`;\n\nconst TextSearchArea = styled.div<{ $showBorder: boolean }>`\n  display: flex;\n  align-items: center;\n\n  height: 40px;\n  width: 100%;\n\n  background-color: ${Color.neutral.grey4};\n  border-radius: 8px;\n\n  border: 1px solid\n    ${({ $showBorder }) =>\n      $showBorder ? Color.accent.yellow1 : Color.neutral.grey2};\n\n  &:focus-within {\n    border: 1px solid ${Color.accent.yellow1};\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=\"Search grant or describe your project\"\n    />\n  );\n};\n\nconst BaseQueryTextInput = styled.input`\n  width: 100%;\n  margin-left: 16px;\n  outline: none;\n  border: none;\n\n  background-color: ${Color.neutral.grey4};\n  text-overflow: ellipsis;\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      <SystemIcon.XIcon size={14} color={Color.neutral.black} />\n    </BaseResetTextButton>\n  );\n};\n\nconst BaseResetTextButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 38px;\n  min-width: 38px;\n  height: 38px;\n\n  background-color: ${Color.neutral.grey4};\n  border-radius: 8px;\n`;\n\nconst ResetTextButtonPlaceholder = styled.div`\n  width: 38px;\n  height: 38px;\n\n  border-radius: 8px;\n`;\n\ntype TextSearchButtonProps = {\n  textSearchCallback?: () => void;\n};\n\nconst TextSearchButton = ({ textSearchCallback }: TextSearchButtonProps) => {\n  const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();\n\n  const onClick = () => {\n    if (textSearchCallback) {\n      textSearchCallback();\n    }\n\n    updateActiveQuery({ files: activeQuery.files, text: queryText });\n  };\n\n  return (\n    <Button\n      Icon={SystemIcon.MagnifyingGlassIcon}\n      onClick={onClick}\n      size=\"small\"\n    />\n  );\n};\n\ntype OpenModalButtonProps = {\n  openModalCallback?: () => void;\n};\n\nconst OpenModalButton = ({ openModalCallback }: OpenModalButtonProps) => {\n  const { openModal } = useGrantMatchContext();\n\n  const onClickOpen = () => {\n    if (openModalCallback) {\n      openModalCallback();\n    }\n\n    openModal();\n  };\n\n  return (\n    <BaseOpenModalButton onClick={onClickOpen}>\n      <SystemIcon.FileArrowUpIcon size={20} />\n      <OpenModalButtonText>File Drop</OpenModalButtonText>\n    </BaseOpenModalButton>\n  );\n};\n\nconst BaseOpenModalButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n\n  height: 40px;\n\n  border-radius: 8px;\n\n  background-color: ${Color.neutral.grey3};\n  color: ${Color.typography.blackHigh};\n\n  ${applyTypography(Typography.bodySecondaryRegular)}\n\n  &:hover {\n    background-color: ${Color.accent.blue3};\n  }\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 40px;\n    min-width: 40px;\n    padding: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: auto;\n    min-width: 90px;\n    padding: 2px 16px;\n  }\n`;\n\nconst OpenModalButtonText = styled.p`\n  font-weight: 500;\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"]}