@grantbii/design-system 1.23.2 → 1.23.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/molecules/Badge.js +1 -1
- package/core/molecules/Badge.js.map +1 -1
- package/core/molecules/Button.js +4 -4
- package/core/molecules/Button.js.map +1 -1
- package/core/organisms/FileDrop.js +2 -3
- package/core/organisms/FileDrop.js.map +1 -1
- package/core/organisms/SearchBar.d.ts +4 -2
- package/core/organisms/SearchBar.js +9 -6
- package/core/organisms/SearchBar.js.map +1 -1
- package/core/templates/GrantMatch/ActiveQueryFiles.js +4 -5
- package/core/templates/GrantMatch/ActiveQueryFiles.js.map +1 -1
- package/core/templates/GrantMatch/index.js +1 -1
- package/core/templates/GrantMatch/index.js.map +1 -1
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/core/molecules/Badge.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Color,
|
|
3
|
+
import { Color, Spacing, SystemIcon, Typography } from "../atoms";
|
|
4
4
|
import { applyTypography } from "../integrations";
|
|
5
5
|
const Badge = ({ variant = "default", ...restOfProps }) => {
|
|
6
6
|
const variantProps = VARIANT_PROPS_MAP[variant];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\n\ntype BadgeVariant = \"default\" | \"neutral\" | \"blue\" | \"green\" | \"yellow\" | \"red\";\n\ntype CustomBadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<SystemIcon.IconProps>;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onClickX?: MouseEventHandler<HTMLButtonElement>;\n labelWidthPixels?: number;\n};\n\ntype BadgeProps = {\n variant?: BadgeVariant;\n} & CustomBadgeProps;\n\nconst Badge = ({ variant = \"default\", ...restOfProps }: BadgeProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n return <RawBadge {...variantProps} {...restOfProps} />;\n};\n\nexport default Badge;\n\ntype VariantStyleProps = {\n color: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in BadgeVariant]: VariantStyleProps } = {\n default: {\n color: Color.typography.blackHigh,\n defaultBackgroundColor: Color.accent.blue3,\n hoverBackgroundColor: Color.accent.blue4,\n },\n neutral: {\n color: Color.typography.blackHigh,\n defaultBackgroundColor: Color.neutral.grey4,\n hoverBackgroundColor: Color.neutral.grey3,\n },\n blue: {\n color: Color.accent.blue1,\n defaultBackgroundColor: Color.accent.blue3,\n hoverBackgroundColor: Color.accent.blue4,\n },\n green: {\n color: Color.accent.green1,\n defaultBackgroundColor: Color.accent.green3,\n hoverBackgroundColor: Color.accent.green4,\n },\n yellow: {\n color: Color.accent.yellow1,\n defaultBackgroundColor: Color.accent.yellow3,\n hoverBackgroundColor: Color.accent.yellow4,\n },\n red: {\n color: Color.accent.red1,\n defaultBackgroundColor: Color.accent.red3,\n hoverBackgroundColor: Color.accent.red4,\n },\n};\n\ntype RawBadgeProps = CustomBadgeProps & VariantStyleProps;\n\nexport const RawBadge = ({\n label,\n Icon,\n onClick,\n onClickX,\n labelWidthPixels,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n color,\n}: RawBadgeProps) => (\n <BaseBadge\n onClick={onClick}\n $isClickable={!!onClick}\n $defaultBackgroundColor={defaultBackgroundColor}\n $hoverBackgroundColor={hoverBackgroundColor}\n $color={color}\n >\n <BadgeContent $hasX={!!onClickX} $widthPixels={labelWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={12} />\n </IconContainer>\n ) : (\n <></>\n )}\n\n <BadgeLabel>{label}</BadgeLabel>\n </BadgeContent>\n\n {onClickX ? <XButton onClick={onClickX} /> : <></>}\n </BaseBadge>\n);\n\nconst BaseBadge = styled.div<{\n $isClickable: boolean;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $color: Color.DesignColor;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n\n height: 26px;\n padding: 5px ${Spacing.px12};\n border-radius: 100px;\n\n font-size: 12px;\n font-weight: ${Typography.weight.medium};\n\n color: ${(props) => props.$color};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n cursor: ${(props) => (props.$isClickable ? \"pointer\" : \"auto\")};\n\n &:hover {\n background-color: ${(props) =>\n props.$isClickable\n ? props.$hoverBackgroundColor\n : props.$defaultBackgroundColor};\n }\n`;\n\nconst BadgeContent = styled.div<{\n $hasX: boolean;\n $widthPixels?: number;\n}>`\n display: flex;\n align-items: center;\n gap: 10px;\n\n width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n max-width: ${({ $hasX: $closeable }) =>\n $closeable ? \"calc(100% - 20px)\" : \"auto\"};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n display: flex;\n flex-direction: column;\n\n width: ${({ $iconSize = \"auto\" }) => $iconSize};\n min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeLabel = styled.div`\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n ${applyTypography(Typography.bodySecondaryMedium)}\n`;\n\ntype XButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst XButton = ({ onClick }: XButtonProps) => (\n <BaseCloseButton type=\"button\" onClick={onClick}>\n <SystemIcon.XIcon color={Color.typography.blackMedium} size={12} />\n </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n display: flex;\n flex-direction: column;\n\n min-width: 12px;\n`;\n"]}
|
package/core/molecules/Button.js
CHANGED
|
@@ -63,19 +63,19 @@ const VARIANT_PROPS_MAP = {
|
|
|
63
63
|
const SIZE_PROPS_MAP = {
|
|
64
64
|
small: {
|
|
65
65
|
height: "40px",
|
|
66
|
-
padding:
|
|
66
|
+
padding: `10px ${Spacing.px16}`, // not following spacing scale
|
|
67
67
|
fontSize: "14px",
|
|
68
68
|
actionIconSize: "40px",
|
|
69
69
|
},
|
|
70
70
|
medium: {
|
|
71
71
|
height: "46px",
|
|
72
|
-
padding:
|
|
72
|
+
padding: `12px ${Spacing.px16}`, // not following spacing scale
|
|
73
73
|
fontSize: "16px",
|
|
74
74
|
actionIconSize: "44px",
|
|
75
75
|
},
|
|
76
76
|
large: {
|
|
77
77
|
height: "52px",
|
|
78
|
-
padding:
|
|
78
|
+
padding: `14px ${Spacing.px16}`, // not following spacing scale
|
|
79
79
|
fontSize: "18px",
|
|
80
80
|
actionIconSize: "48px",
|
|
81
81
|
},
|
|
@@ -111,7 +111,7 @@ const ButtonStyle = css `
|
|
|
111
111
|
box-sizing: border-box;
|
|
112
112
|
width: ${(props) => (props.$isActionIcon ? props.$actionIconSize : "auto")};
|
|
113
113
|
height: ${(props) => props.$isActionIcon ? props.$actionIconSize : props.$height};
|
|
114
|
-
padding: ${(props) => props.$isActionIcon ?
|
|
114
|
+
padding: ${(props) => (props.$isActionIcon ? "0px" : props.$padding)};
|
|
115
115
|
|
|
116
116
|
font-weight: ${Typography.weight.medium};
|
|
117
117
|
font-size: ${(props) => props.$fontSize};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"next/link\";\nimport type {\n ButtonHTMLAttributes,\n HTMLAttributeAnchorTarget,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\ntype ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"ghost\"\n | \"text\"\n | \"danger\";\n\ntype ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype CustomButtonProps = {\n label?: ReactNode;\n Icon?: SystemIcon.Icon;\n iconRight?: boolean;\n onClick?: MouseEventHandler<HTMLElement>;\n type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n href?: string;\n};\n\ntype ButtonProps = {\n variant?: ButtonVariant;\n size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n variant = \"primary\",\n size = \"medium\",\n ...restOfProps\n}: ButtonProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n const sizeProps = SIZE_PROPS_MAP[size];\n\n return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n defaultColor: Color.DesignColor;\n hoverColor?: Color.DesignColor;\n disabledColor?: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n disabledBackgroundColor?: Color.DesignColor;\n borderColor?: Color.DesignColor;\n textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n primary: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiBlue,\n hoverBackgroundColor: Color.accent.blue2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n secondary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiYellow,\n hoverBackgroundColor: Color.accent.yellow2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n tertiary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.neutral.grey3,\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n outline: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n borderColor: Color.neutral.grey2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n ghost: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n text: {\n defaultColor: Color.typography.blackHigh,\n hoverColor: Color.typography.blackMedium,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n textDecoration: \"underline\",\n },\n danger: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.accent.red1,\n hoverBackgroundColor: Color.accent.red2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n};\n\ntype SizeStyleProps = {\n height: string;\n padding: string;\n fontSize: string;\n actionIconSize?: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n padding: \"10px\", // not following spacing scale\n fontSize: \"14px\",\n actionIconSize: \"40px\",\n },\n medium: {\n height: \"46px\",\n padding: \"12px\", // not following spacing scale\n fontSize: \"16px\",\n actionIconSize: \"44px\",\n },\n large: {\n height: \"52px\",\n padding: \"14px\", // not following spacing scale\n fontSize: \"18px\",\n actionIconSize: \"48px\",\n },\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n Icon,\n iconRight = false,\n label,\n href,\n target,\n disabled,\n type,\n height,\n padding,\n fontSize,\n actionIconSize = height,\n textDecoration = \"none\",\n defaultColor,\n hoverColor = defaultColor,\n disabledColor = defaultColor,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n disabledBackgroundColor = defaultBackgroundColor,\n borderColor,\n ...restOfProps\n}: RawButtonProps) => {\n const isActionIcon = !!Icon && !label;\n\n const styleProps: ButtonStyleProps = {\n $isActionIcon: isActionIcon,\n $actionIconSize: actionIconSize,\n $height: height,\n $fontSize: fontSize,\n $padding: padding,\n $textDecoration: textDecoration,\n $defaultColor: defaultColor,\n $hoverColor: hoverColor,\n $disabledColor: disabledColor,\n $defaultBackgroundColor: defaultBackgroundColor,\n $hoverBackgroundColor: hoverBackgroundColor,\n $disabledBackgroundColor: disabledBackgroundColor,\n $borderColor: borderColor,\n };\n\n const content = (\n <>\n {Icon && !iconRight && <Icon size={20} />}\n {label}\n {Icon && iconRight && <Icon size={20} />}\n </>\n );\n\n const isLink = !!href && !disabled;\n\n return isLink ? (\n <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n {content}\n </BaseLink>\n ) : (\n <BaseButton\n {...restOfProps}\n {...styleProps}\n disabled={disabled}\n type={type}\n >\n {content}\n </BaseButton>\n );\n};\n\ntype ButtonStyleProps = {\n $isActionIcon: boolean;\n $actionIconSize: string;\n $height: string;\n $padding: string;\n $fontSize: string;\n $textDecoration: string;\n $defaultColor: Color.DesignColor;\n $hoverColor: Color.DesignColor;\n $disabledColor: Color.DesignColor;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $disabledBackgroundColor: Color.DesignColor;\n $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: ${Spacing.px8};\n\n box-sizing: border-box;\n width: ${(props) => (props.$isActionIcon ? props.$actionIconSize : \"auto\")};\n height: ${(props) =>\n props.$isActionIcon ? props.$actionIconSize : props.$height};\n padding: ${(props) =>\n props.$isActionIcon ? props.$padding : `${props.$padding} ${Spacing.px16}`};\n\n font-weight: ${Typography.weight.medium};\n font-size: ${(props) => props.$fontSize};\n white-space: nowrap;\n\n color: ${(props) => props.$defaultColor};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n border: ${(props) =>\n props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n border-radius: ${Spacing.px8};\n\n text-decoration: ${(props) => props.$textDecoration};\n\n &:hover {\n color: ${(props) => props.$hoverColor};\n background-color: ${(props) => props.$hoverBackgroundColor};\n }\n\n &:disabled {\n color: ${(props) => props.$disabledColor};\n background-color: ${(props) => props.$disabledBackgroundColor};\n }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"next/link\";\nimport type {\n ButtonHTMLAttributes,\n HTMLAttributeAnchorTarget,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\ntype ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"ghost\"\n | \"text\"\n | \"danger\";\n\ntype ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype CustomButtonProps = {\n label?: ReactNode;\n Icon?: SystemIcon.Icon;\n iconRight?: boolean;\n onClick?: MouseEventHandler<HTMLElement>;\n type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n href?: string;\n};\n\ntype ButtonProps = {\n variant?: ButtonVariant;\n size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n variant = \"primary\",\n size = \"medium\",\n ...restOfProps\n}: ButtonProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n const sizeProps = SIZE_PROPS_MAP[size];\n\n return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n defaultColor: Color.DesignColor;\n hoverColor?: Color.DesignColor;\n disabledColor?: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n disabledBackgroundColor?: Color.DesignColor;\n borderColor?: Color.DesignColor;\n textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n primary: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiBlue,\n hoverBackgroundColor: Color.accent.blue2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n secondary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiYellow,\n hoverBackgroundColor: Color.accent.yellow2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n tertiary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.neutral.grey3,\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n outline: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n borderColor: Color.neutral.grey2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n ghost: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n text: {\n defaultColor: Color.typography.blackHigh,\n hoverColor: Color.typography.blackMedium,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n textDecoration: \"underline\",\n },\n danger: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.accent.red1,\n hoverBackgroundColor: Color.accent.red2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n};\n\ntype SizeStyleProps = {\n height: string;\n padding: string;\n fontSize: string;\n actionIconSize?: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n padding: `10px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"14px\",\n actionIconSize: \"40px\",\n },\n medium: {\n height: \"46px\",\n padding: `12px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"16px\",\n actionIconSize: \"44px\",\n },\n large: {\n height: \"52px\",\n padding: `14px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"18px\",\n actionIconSize: \"48px\",\n },\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n Icon,\n iconRight = false,\n label,\n href,\n target,\n disabled,\n type,\n height,\n padding,\n fontSize,\n actionIconSize = height,\n textDecoration = \"none\",\n defaultColor,\n hoverColor = defaultColor,\n disabledColor = defaultColor,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n disabledBackgroundColor = defaultBackgroundColor,\n borderColor,\n ...restOfProps\n}: RawButtonProps) => {\n const isActionIcon = !!Icon && !label;\n\n const styleProps: ButtonStyleProps = {\n $isActionIcon: isActionIcon,\n $actionIconSize: actionIconSize,\n $height: height,\n $fontSize: fontSize,\n $padding: padding,\n $textDecoration: textDecoration,\n $defaultColor: defaultColor,\n $hoverColor: hoverColor,\n $disabledColor: disabledColor,\n $defaultBackgroundColor: defaultBackgroundColor,\n $hoverBackgroundColor: hoverBackgroundColor,\n $disabledBackgroundColor: disabledBackgroundColor,\n $borderColor: borderColor,\n };\n\n const content = (\n <>\n {Icon && !iconRight && <Icon size={20} />}\n {label}\n {Icon && iconRight && <Icon size={20} />}\n </>\n );\n\n const isLink = !!href && !disabled;\n\n return isLink ? (\n <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n {content}\n </BaseLink>\n ) : (\n <BaseButton\n {...restOfProps}\n {...styleProps}\n disabled={disabled}\n type={type}\n >\n {content}\n </BaseButton>\n );\n};\n\ntype ButtonStyleProps = {\n $isActionIcon: boolean;\n $actionIconSize: string;\n $height: string;\n $padding: string;\n $fontSize: string;\n $textDecoration: string;\n $defaultColor: Color.DesignColor;\n $hoverColor: Color.DesignColor;\n $disabledColor: Color.DesignColor;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $disabledBackgroundColor: Color.DesignColor;\n $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: ${Spacing.px8};\n\n box-sizing: border-box;\n width: ${(props) => (props.$isActionIcon ? props.$actionIconSize : \"auto\")};\n height: ${(props) =>\n props.$isActionIcon ? props.$actionIconSize : props.$height};\n padding: ${(props) => (props.$isActionIcon ? \"0px\" : props.$padding)};\n\n font-weight: ${Typography.weight.medium};\n font-size: ${(props) => props.$fontSize};\n white-space: nowrap;\n\n color: ${(props) => props.$defaultColor};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n border: ${(props) =>\n props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n border-radius: ${Spacing.px8};\n\n text-decoration: ${(props) => props.$textDecoration};\n\n &:hover {\n color: ${(props) => props.$hoverColor};\n background-color: ${(props) => props.$hoverBackgroundColor};\n }\n\n &:disabled {\n color: ${(props) => props.$disabledColor};\n background-color: ${(props) => props.$disabledBackgroundColor};\n }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n"]}
|
|
@@ -4,8 +4,8 @@ import { useDropzone } from "react-dropzone";
|
|
|
4
4
|
import styled from "styled-components";
|
|
5
5
|
import { Color, Spacing, SystemIcon, Typography } from "../atoms";
|
|
6
6
|
import { applyTypography } from "../integrations";
|
|
7
|
-
import { FILE_TYPE_ICON_MAP } from "../shared";
|
|
8
7
|
import { Badge } from "../molecules";
|
|
8
|
+
import { FILE_TYPE_ICON_MAP } from "../shared";
|
|
9
9
|
const DEFAULT_MAX_FILE_SIZE_MB = 5;
|
|
10
10
|
const DEFAULT_MAX_FILES = 5;
|
|
11
11
|
const FileDrop = ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFiles = DEFAULT_MAX_FILES, maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB, }) => {
|
|
@@ -68,7 +68,7 @@ const DropzoneSubtitle = styled.p `
|
|
|
68
68
|
const ErrorMessage = styled.p `
|
|
69
69
|
color: ${Color.accent.red1};
|
|
70
70
|
`;
|
|
71
|
-
const UploadedFiles = ({ uploadedFiles, removeFile }) => (_jsx(BaseUploadedFiles, { children: uploadedFiles.map(({ name: fileName, type: fileType }) => (_jsx(Badge, { label:
|
|
71
|
+
const UploadedFiles = ({ uploadedFiles, removeFile }) => (_jsx(BaseUploadedFiles, { children: uploadedFiles.map(({ name: fileName, type: fileType }) => (_jsx(Badge, { label: fileName, onClickX: () => removeFile(fileName), Icon: FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon }, fileName))) }));
|
|
72
72
|
const BaseUploadedFiles = styled.div `
|
|
73
73
|
display: flex;
|
|
74
74
|
flex-direction: column;
|
|
@@ -108,5 +108,4 @@ const combineFilesWithoutDuplicates = (oldFiles, newFiles) => {
|
|
|
108
108
|
return [...keptOldFiles, ...newFiles];
|
|
109
109
|
};
|
|
110
110
|
const filterFilesByName = (files, fileName) => files.filter((file) => file.name !== fileName);
|
|
111
|
-
const getFileNameWithoutExtension = (fileName) => fileName.substring(0, fileName.lastIndexOf("."));
|
|
112
111
|
//# sourceMappingURL=FileDrop.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\nimport { Badge } from \"../molecules\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n uploadedFiles: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n maxFiles?: number;\n maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n uploadedFiles,\n uploadFiles,\n removeFile,\n errorMessage,\n maxFiles = DEFAULT_MAX_FILES,\n maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n const { getInputProps, getRootProps } = useDropzone({\n onDrop: uploadFiles,\n accept: {\n \"application/pdf\": [\".pdf\"],\n \"image/jpeg\": [\".jpeg\", \".jpg\"],\n \"image/png\": [\".png\"],\n },\n disabled: reachedMaxUploads,\n noClick: reachedMaxUploads,\n noDrag: reachedMaxUploads,\n multiple: true,\n });\n\n return (\n <BaseFileDrop>\n <Dropzone\n {...getRootProps()}\n $reachedMaxUploads={reachedMaxUploads}\n $hasError={!!errorMessage}\n >\n <input {...getInputProps()} type=\"file\" />\n <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n </Dropzone>\n\n {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n </BaseFileDrop>\n );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n $reachedMaxUploads: boolean;\n $hasError: boolean;\n}>`\n padding: 40px;\n border-radius: 8px;\n border: 1px solid\n ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n &:hover {\n cursor: ${({ $reachedMaxUploads }) =>\n $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n }\n`;\n\ntype DropzoneContentProps = {\n maxFiles: number;\n maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n <BaseDropzoneContent>\n <SystemIcon.FileDashedIcon\n weight=\"thin\"\n size={48}\n color={Color.neutral.grey1}\n />\n <AllDropzoneText>\n <DropzoneText>\n {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n </DropzoneText>\n\n <DropzoneSubtitle $isHighlighted>\n or click to browse with your file explorer\n </DropzoneSubtitle>\n\n <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n </AllDropzoneText>\n </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n text-align: center;\n\n ${applyTypography(Typography.bodyPrimaryMedium)}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n text-align: center;\n\n color: ${({ $isHighlighted = false }) =>\n $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n ${applyTypography(Typography.bodySecondaryRegular)}\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n uploadedFiles: File[];\n removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => (\n <BaseUploadedFiles>\n {uploadedFiles.map(({ name: fileName, type: fileType }) => (\n <Badge\n key={fileName}\n label={getFileNameWithoutExtension(fileName)}\n onClickX={() => removeFile(fileName)}\n Icon={FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon}\n variant=\"neutral\"\n />\n ))}\n </BaseUploadedFiles>\n);\n\nconst BaseUploadedFiles = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing.px4};\n`;\n\nexport const useFileDrop = (\n initialFiles: File[] = [],\n maxFiles: number = DEFAULT_MAX_FILES,\n maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n const [files, setFiles] = useState<File[]>(() => initialFiles);\n const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n const uploadFiles = (acceptedFiles: File[]) => {\n if (files.length + acceptedFiles.length > maxFiles) {\n setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n } else {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) =>\n combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n );\n }\n };\n\n const removeFile = (fileName: string) => {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n };\n\n return {\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n oldFiles: File[],\n newFiles: File[],\n): File[] => {\n const newFileNames = new Set(newFiles.map((file) => file.name));\n const keptOldFiles = oldFiles.filter(\n (oldFile) => !newFileNames.has(oldFile.name),\n );\n\n return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}
|
|
1
|
+
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { Badge } from \"../molecules\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n uploadedFiles: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n maxFiles?: number;\n maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n uploadedFiles,\n uploadFiles,\n removeFile,\n errorMessage,\n maxFiles = DEFAULT_MAX_FILES,\n maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n const { getInputProps, getRootProps } = useDropzone({\n onDrop: uploadFiles,\n accept: {\n \"application/pdf\": [\".pdf\"],\n \"image/jpeg\": [\".jpeg\", \".jpg\"],\n \"image/png\": [\".png\"],\n },\n disabled: reachedMaxUploads,\n noClick: reachedMaxUploads,\n noDrag: reachedMaxUploads,\n multiple: true,\n });\n\n return (\n <BaseFileDrop>\n <Dropzone\n {...getRootProps()}\n $reachedMaxUploads={reachedMaxUploads}\n $hasError={!!errorMessage}\n >\n <input {...getInputProps()} type=\"file\" />\n <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n </Dropzone>\n\n {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n </BaseFileDrop>\n );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n $reachedMaxUploads: boolean;\n $hasError: boolean;\n}>`\n padding: 40px;\n border-radius: 8px;\n border: 1px solid\n ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n &:hover {\n cursor: ${({ $reachedMaxUploads }) =>\n $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n }\n`;\n\ntype DropzoneContentProps = {\n maxFiles: number;\n maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n <BaseDropzoneContent>\n <SystemIcon.FileDashedIcon\n weight=\"thin\"\n size={48}\n color={Color.neutral.grey1}\n />\n <AllDropzoneText>\n <DropzoneText>\n {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n </DropzoneText>\n\n <DropzoneSubtitle $isHighlighted>\n or click to browse with your file explorer\n </DropzoneSubtitle>\n\n <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n </AllDropzoneText>\n </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n text-align: center;\n\n ${applyTypography(Typography.bodyPrimaryMedium)}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n text-align: center;\n\n color: ${({ $isHighlighted = false }) =>\n $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n ${applyTypography(Typography.bodySecondaryRegular)}\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n uploadedFiles: File[];\n removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => (\n <BaseUploadedFiles>\n {uploadedFiles.map(({ name: fileName, type: fileType }) => (\n <Badge\n key={fileName}\n label={fileName}\n onClickX={() => removeFile(fileName)}\n Icon={FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon}\n />\n ))}\n </BaseUploadedFiles>\n);\n\nconst BaseUploadedFiles = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing.px4};\n`;\n\nexport const useFileDrop = (\n initialFiles: File[] = [],\n maxFiles: number = DEFAULT_MAX_FILES,\n maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n const [files, setFiles] = useState<File[]>(() => initialFiles);\n const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n const uploadFiles = (acceptedFiles: File[]) => {\n if (files.length + acceptedFiles.length > maxFiles) {\n setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n } else {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) =>\n combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n );\n }\n };\n\n const removeFile = (fileName: string) => {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n };\n\n return {\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n oldFiles: File[],\n newFiles: File[],\n): File[] => {\n const newFileNames = new Set(newFiles.map((file) => file.name));\n const keptOldFiles = oldFiles.filter(\n (oldFile) => !newFileNames.has(oldFile.name),\n );\n\n return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n files.filter((file) => file.name !== fileName);\n"]}
|
|
@@ -4,9 +4,11 @@ type SearchBarProps = {
|
|
|
4
4
|
updateActiveQuery: (query: GrantMatchQuery) => void;
|
|
5
5
|
queryText: string;
|
|
6
6
|
updateQueryText: (newText: string) => void;
|
|
7
|
-
|
|
7
|
+
onSearch?: () => void;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
runSearchOnReset?: boolean;
|
|
8
10
|
size?: SearchBarSize;
|
|
9
11
|
};
|
|
10
12
|
type SearchBarSize = "small" | "medium";
|
|
11
|
-
declare const SearchBar: ({ activeQuery, updateActiveQuery, queryText, updateQueryText,
|
|
13
|
+
declare const SearchBar: ({ activeQuery, updateActiveQuery, queryText, updateQueryText, onSearch, placeholder, runSearchOnReset, size, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
14
|
export default SearchBar;
|
|
@@ -2,17 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import { Color, Responsive, SystemIcon } from "../atoms";
|
|
4
4
|
import { Button } from "../molecules";
|
|
5
|
-
const
|
|
5
|
+
const DEFAULT_PLACEHOLDER = "Search grant or describe your project";
|
|
6
|
+
const SearchBar = ({ activeQuery, updateActiveQuery, queryText, updateQueryText, onSearch, placeholder = DEFAULT_PLACEHOLDER, runSearchOnReset = false, size = "medium", }) => {
|
|
6
7
|
const { height, fontSize } = SIZE_PROPS_MAP[size];
|
|
7
8
|
const resetSearch = () => {
|
|
8
9
|
updateQueryText("");
|
|
9
|
-
|
|
10
|
+
if (runSearchOnReset) {
|
|
11
|
+
updateActiveQuery({ files: activeQuery.files, text: "" });
|
|
12
|
+
}
|
|
10
13
|
};
|
|
11
14
|
const executeSearch = () => {
|
|
12
|
-
|
|
15
|
+
onSearch?.();
|
|
13
16
|
updateActiveQuery({ files: activeQuery.files, text: queryText });
|
|
14
17
|
};
|
|
15
|
-
return (_jsxs(BaseSearchBar, { children: [_jsxs(SearchArea, { "$height": height, "$hasQueryText": queryText !== "", children: [_jsx(TextInput, { queryText: queryText, updateQueryText: updateQueryText, executeSearch: executeSearch, fontSize: fontSize }), queryText === "" ? (_jsx(ResetButtonPlaceholder, {})) : (_jsx(ResetButton, { resetSearch: resetSearch }))] }), _jsx(Button, { Icon: SystemIcon.MagnifyingGlassIcon, onClick: executeSearch, size: size })] }));
|
|
18
|
+
return (_jsxs(BaseSearchBar, { children: [_jsxs(SearchArea, { "$height": height, "$hasQueryText": queryText !== "", children: [_jsx(TextInput, { queryText: queryText, updateQueryText: updateQueryText, executeSearch: executeSearch, placeholder: placeholder, fontSize: fontSize }), queryText === "" ? (_jsx(ResetButtonPlaceholder, {})) : (_jsx(ResetButton, { resetSearch: resetSearch }))] }), _jsx(Button, { Icon: SystemIcon.MagnifyingGlassIcon, onClick: executeSearch, size: size })] }));
|
|
16
19
|
};
|
|
17
20
|
export default SearchBar;
|
|
18
21
|
const SIZE_PROPS_MAP = {
|
|
@@ -59,14 +62,14 @@ const SearchArea = styled.div `
|
|
|
59
62
|
border: 0.5px solid ${Color.accent.yellow1};
|
|
60
63
|
}
|
|
61
64
|
`;
|
|
62
|
-
const TextInput = ({ queryText, updateQueryText, executeSearch, fontSize, }) => {
|
|
65
|
+
const TextInput = ({ queryText, updateQueryText, executeSearch, placeholder, fontSize, }) => {
|
|
63
66
|
const onKeyDown = (event) => {
|
|
64
67
|
if (event.key === "Enter" && !event.repeat) {
|
|
65
68
|
event.preventDefault();
|
|
66
69
|
executeSearch();
|
|
67
70
|
}
|
|
68
71
|
};
|
|
69
|
-
return (_jsx(BaseTextInput, { value: queryText, placeholder:
|
|
72
|
+
return (_jsx(BaseTextInput, { value: queryText, placeholder: placeholder, onChange: (event) => updateQueryText(event.target.value), onKeyDown: onKeyDown, "$fontSize": fontSize }));
|
|
70
73
|
};
|
|
71
74
|
const BaseTextInput = styled.input `
|
|
72
75
|
width: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport type { KeyboardEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, SystemIcon } from \"../atoms\";\nimport { Button } from \"../molecules\";\n\ntype SearchBarProps = {\n activeQuery: GrantMatchQuery;\n updateActiveQuery: (query: GrantMatchQuery) => void;\n queryText: string;\n updateQueryText: (newText: string) => void;\n onSearch?: () => void;\n placeholder?: string;\n runSearchOnReset?: boolean;\n size?: SearchBarSize;\n};\n\ntype SearchBarSize = \"small\" | \"medium\";\n\nconst DEFAULT_PLACEHOLDER = \"Search grant or describe your project\";\n\nconst SearchBar = ({\n activeQuery,\n updateActiveQuery,\n queryText,\n updateQueryText,\n onSearch,\n placeholder = DEFAULT_PLACEHOLDER,\n runSearchOnReset = false,\n size = \"medium\",\n}: SearchBarProps) => {\n const { height, fontSize } = SIZE_PROPS_MAP[size];\n\n const resetSearch = () => {\n updateQueryText(\"\");\n\n if (runSearchOnReset) {\n updateActiveQuery({ files: activeQuery.files, text: \"\" });\n }\n };\n\n const executeSearch = () => {\n onSearch?.();\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n };\n\n return (\n <BaseSearchBar>\n <SearchArea $height={height} $hasQueryText={queryText !== \"\"}>\n <TextInput\n queryText={queryText}\n updateQueryText={updateQueryText}\n executeSearch={executeSearch}\n placeholder={placeholder}\n fontSize={fontSize}\n />\n\n {queryText === \"\" ? (\n <ResetButtonPlaceholder />\n ) : (\n <ResetButton resetSearch={resetSearch} />\n )}\n </SearchArea>\n\n <Button\n Icon={SystemIcon.MagnifyingGlassIcon}\n onClick={executeSearch}\n size={size}\n />\n </BaseSearchBar>\n );\n};\n\nexport default SearchBar;\n\ntype SizeStyleProps = {\n height: string;\n fontSize: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in SearchBarSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n fontSize: \"12px\",\n },\n medium: {\n height: \"44px\",\n fontSize: \"14px\",\n },\n};\n\nconst BaseSearchBar = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n\n width: 100%;\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n border-radius: 12px;\n }\n`;\n\ntype SearchAreaProps = {\n $height: string;\n $hasQueryText: boolean;\n};\n\nconst SearchArea = styled.div<SearchAreaProps>`\n display: flex;\n align-items: center;\n\n box-sizing: border-box;\n height: ${(props) => props.$height};\n width: 100%;\n\n background-color: ${(props) =>\n props.$hasQueryText ? Color.neutral.white : Color.neutral.grey4};\n border: 0.5px solid\n ${(props) =>\n props.$hasQueryText ? Color.accent.yellow1 : Color.neutral.grey2};\n border-radius: 8px;\n\n &:focus-within {\n background-color: ${Color.neutral.white};\n border: 0.5px solid ${Color.accent.yellow1};\n }\n`;\n\ntype TextInputProps = {\n queryText: string;\n updateQueryText: (newText: string) => void;\n executeSearch: () => void;\n placeholder: string;\n fontSize: string;\n};\n\nconst TextInput = ({\n queryText,\n updateQueryText,\n executeSearch,\n placeholder,\n fontSize,\n}: TextInputProps) => {\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && !event.repeat) {\n event.preventDefault();\n executeSearch();\n }\n };\n\n return (\n <BaseTextInput\n value={queryText}\n placeholder={placeholder}\n onChange={(event) => updateQueryText(event.target.value)}\n onKeyDown={onKeyDown}\n $fontSize={fontSize}\n />\n );\n};\n\nconst BaseTextInput = styled.input<{ $fontSize: string }>`\n width: 100%;\n margin-left: 16px;\n\n font-size: ${(props) => props.$fontSize};\n text-overflow: ellipsis;\n\n background-color: transparent;\n outline: none;\n border: none;\n`;\n\ntype ResetButtonProps = {\n resetSearch: () => void;\n};\n\nconst ResetButton = ({ resetSearch }: ResetButtonProps) => (\n <BaseResetButton onClick={resetSearch} type=\"button\">\n <SystemIcon.XIcon size={14} color={Color.neutral.black} />\n </BaseResetButton>\n);\n\nconst BaseResetButton = 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 border-radius: 8px;\n`;\n\nconst ResetButtonPlaceholder = styled.div`\n width: 38px;\n height: 38px;\n\n border-radius: 8px;\n`;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { SystemIcon } from "../../atoms";
|
|
4
|
-
import { Badge,
|
|
3
|
+
import { Color, SystemIcon } from "../../atoms";
|
|
4
|
+
import { Badge, RawButton } from "../../molecules";
|
|
5
5
|
import { FILE_TYPE_ICON_MAP } from "../../shared";
|
|
6
6
|
import { useGrantMatchContext } from "./context";
|
|
7
7
|
const ActiveQueryFiles = () => (_jsxs(BaseActiveFiles, { children: [_jsx(FileBadges, {}), _jsx(ResetFilesButton, {})] }));
|
|
@@ -20,7 +20,7 @@ const FileBadges = () => {
|
|
|
20
20
|
};
|
|
21
21
|
updateActiveQuery(newQuery);
|
|
22
22
|
};
|
|
23
|
-
return (_jsx(BaseFileBadges, { children: activeQuery.files.map((file) => (_jsx(Badge, { label: file.name
|
|
23
|
+
return (_jsx(BaseFileBadges, { children: activeQuery.files.map((file) => (_jsx(Badge, { label: file.name, Icon: FILE_TYPE_ICON_MAP[file.type] ?? SystemIcon.FileIcon, onClickX: () => removeActiveQueryFile(file.name), labelWidthPixels: 160 }, file.name))) }));
|
|
24
24
|
};
|
|
25
25
|
const BaseFileBadges = styled.div `
|
|
26
26
|
display: flex;
|
|
@@ -28,7 +28,6 @@ const BaseFileBadges = styled.div `
|
|
|
28
28
|
gap: 8px;
|
|
29
29
|
|
|
30
30
|
width: 100%;
|
|
31
|
-
|
|
32
31
|
overflow-x: auto;
|
|
33
32
|
|
|
34
33
|
/* hide scrollbar but still allow for scrolling */
|
|
@@ -42,6 +41,6 @@ const BaseFileBadges = styled.div `
|
|
|
42
41
|
`;
|
|
43
42
|
const ResetFilesButton = () => {
|
|
44
43
|
const { activeQuery, updateActiveQuery } = useGrantMatchContext();
|
|
45
|
-
return (_jsx(
|
|
44
|
+
return (_jsx(RawButton, { label: "Reset", onClick: () => updateActiveQuery({ files: [], text: activeQuery.text }), defaultColor: Color.typography.blackHigh, hoverColor: Color.typography.blackMedium, disabledColor: Color.typography.blackLow, defaultBackgroundColor: "transparent", textDecoration: "underline", height: "26px", padding: "10px 0px", fontSize: "14px" }));
|
|
46
45
|
};
|
|
47
46
|
//# sourceMappingURL=ActiveQueryFiles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActiveQueryFiles.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/ActiveQueryFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"ActiveQueryFiles.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/ActiveQueryFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,MAAC,eAAe,eACd,KAAC,UAAU,KAAG,EACd,KAAC,gBAAgB,KAAG,IACJ,CACnB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAEhC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG;YACf,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;YACjE,IAAI,EAAE,WAAW,CAAC,IAAI;SACvB,CAAC;QAEF,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,cACZ,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,KAAC,KAAK,IAEJ,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,QAAQ,EAC1D,QAAQ,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EAChD,gBAAgB,EAAE,GAAG,IAJhB,IAAI,CAAC,IAAI,CAKd,CACH,CAAC,GACa,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBhC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,EACvE,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ,EACxC,sBAAsB,EAAC,aAAa,EACpC,cAAc,EAAC,WAAW,EAC1B,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAC,MAAM,GACf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Color, SystemIcon } from \"../../atoms\";\nimport { Badge, RawButton } from \"../../molecules\";\nimport { FILE_TYPE_ICON_MAP } from \"../../shared\";\nimport { useGrantMatchContext } from \"./context\";\n\nconst ActiveQueryFiles = () => (\n <BaseActiveFiles>\n <FileBadges />\n <ResetFilesButton />\n </BaseActiveFiles>\n);\n\nexport default ActiveQueryFiles;\n\nconst BaseActiveFiles = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nconst FileBadges = () => {\n const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n const removeActiveQueryFile = (fileName: string) => {\n const newQuery = {\n files: activeQuery.files.filter((file) => file.name !== fileName),\n text: activeQuery.text,\n };\n\n updateActiveQuery(newQuery);\n };\n\n return (\n <BaseFileBadges>\n {activeQuery.files.map((file) => (\n <Badge\n key={file.name}\n label={file.name}\n Icon={FILE_TYPE_ICON_MAP[file.type] ?? SystemIcon.FileIcon}\n onClickX={() => removeActiveQueryFile(file.name)}\n labelWidthPixels={160}\n />\n ))}\n </BaseFileBadges>\n );\n};\n\nconst BaseFileBadges = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n\n width: 100%;\n overflow-x: auto;\n\n /* hide scrollbar but still allow for scrolling */\n -ms-overflow-style: none;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n\n /* TODO: fade effect on overflow-x */\n`;\n\nconst ResetFilesButton = () => {\n const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n return (\n <RawButton\n label=\"Reset\"\n onClick={() => updateActiveQuery({ files: [], text: activeQuery.text })}\n defaultColor={Color.typography.blackHigh}\n hoverColor={Color.typography.blackMedium}\n disabledColor={Color.typography.blackLow}\n defaultBackgroundColor=\"transparent\"\n textDecoration=\"underline\"\n height=\"26px\"\n padding=\"10px 0px\"\n fontSize=\"14px\"\n />\n );\n};\n"]}
|
|
@@ -27,7 +27,7 @@ const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGr
|
|
|
27
27
|
openModal,
|
|
28
28
|
closeModal,
|
|
29
29
|
]);
|
|
30
|
-
return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText,
|
|
30
|
+
return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, onSearch: textSearchCallback, size: "small" }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), showModal ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
|
|
31
31
|
};
|
|
32
32
|
export default GrantMatch;
|
|
33
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,MAAM,aAAa,CAAC;AAChD,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,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEnE,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CAAC,EACF;QACE,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CACF,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC5C,MAAC,cAAc,eACb,MAAC,kBAAkB,eACjB,KAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,
|
|
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,MAAM,aAAa,CAAC;AAChD,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,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEnE,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CAAC,EACF;QACE,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CACF,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC5C,MAAC,cAAc,eACb,MAAC,kBAAkB,eACjB,KAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,kBAAkB,EAC5B,IAAI,EAAC,OAAO,GACZ,EACF,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,IACtC,EAEpB,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,mBAAK,EAE3D,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,eAAe,IACd,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACc,GACU,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;WAO1B,KAAK,CAAC,UAAU,CAAC,SAAS;sBACf,KAAK,CAAC,OAAO,CAAC,KAAK;;oBAErB,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;;;;qBAQhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;;;CAOrD,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,iBAAsD,EACtD,eAA2B,EACV,EAAE;IACnB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB;QAC9D,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,EAAE;KACT,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,cAAc,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;QAEhC,IAAI,qBAAqB,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAC5C,CAAC,CAAC","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { checkGrantMatchActive } from \"@grantbii/ui-core/match/validations\";\nimport { useMemo, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive } 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 { showModal, openModal, closeModal } = useModal();\n const [queryText, setQueryText] = useState(activeQuery.text);\n const updateQueryText = (newText: string) => setQueryText(newText);\n\n const commonProps = useMemo(\n () => ({\n activeQuery,\n updateActiveQuery,\n queryText,\n updateQueryText,\n openModal,\n closeModal,\n }),\n [\n activeQuery,\n updateActiveQuery,\n queryText,\n updateQueryText,\n openModal,\n closeModal,\n ],\n );\n\n return (\n <GrantMatchContext.Provider value={commonProps}>\n <BaseGrantMatch>\n <SearchBarContainer>\n <SearchBar\n activeQuery={activeQuery}\n updateActiveQuery={updateActiveQuery}\n queryText={queryText}\n updateQueryText={updateQueryText}\n onSearch={textSearchCallback}\n size=\"small\"\n />\n <OpenModalButton openModalCallback={openModalCallback} />\n </SearchBarContainer>\n\n {activeQuery.files.length > 0 ? <ActiveQueryFiles /> : <></>}\n\n {showModal ? (\n <GrantMatchModal\n findGrantsCallback={findGrantsCallback}\n closeModalCallback={closeModalCallback}\n />\n ) : (\n <></>\n )}\n </BaseGrantMatch>\n </GrantMatchContext.Provider>\n );\n};\n\nexport default GrantMatch;\n\nconst BaseGrantMatch = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n width: 100%;\n max-width: 100vw;\n`;\n\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: 8px;\n padding: 0px;\n\n box-shadow: none;\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n gap: 16px;\n padding: 12px 16px;\n\n box-shadow: 0px 0px 40px 0px #00000008;\n border-radius: 12px;\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