@grantbii/design-system 1.0.74 → 1.0.78
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/atoms/Badge.d.ts +1 -1
- package/core/atoms/Badge.js +2 -1
- package/core/atoms/Badge.js.map +1 -0
- package/core/atoms/BrandLogo.js +1 -1
- package/core/atoms/BrandLogo.js.map +1 -0
- package/core/atoms/Button.d.ts +1 -1
- package/core/atoms/Button.js +3 -1
- package/core/atoms/Button.js.map +1 -0
- package/core/atoms/Checkbox.d.ts +1 -1
- package/core/atoms/Checkbox.js +3 -16
- package/core/atoms/Checkbox.js.map +1 -0
- package/core/atoms/LinkButton.d.ts +1 -1
- package/core/atoms/LinkButton.js +4 -16
- package/core/atoms/LinkButton.js.map +1 -0
- package/core/atoms/PageLoader.d.ts +1 -1
- package/core/atoms/PageLoader.js +3 -16
- package/core/atoms/PageLoader.js.map +1 -0
- package/core/atoms/RadioButton.d.ts +1 -1
- package/core/atoms/RadioButton.js +3 -16
- package/core/atoms/RadioButton.js.map +1 -0
- package/core/atoms/Textarea.js +1 -1
- package/core/atoms/Textarea.js.map +1 -0
- package/core/atoms/index.js +1 -0
- package/core/atoms/index.js.map +1 -0
- package/core/atoms/shared.js +1 -0
- package/core/atoms/shared.js.map +1 -0
- package/core/foundations/colors.js +1 -0
- package/core/foundations/colors.js.map +1 -0
- package/core/foundations/flags.js +1 -0
- package/core/foundations/flags.js.map +1 -0
- package/core/foundations/icons.js +1 -0
- package/core/foundations/icons.js.map +1 -0
- package/core/foundations/index.js +1 -0
- package/core/foundations/index.js.map +1 -0
- package/core/foundations/responsive.js +1 -0
- package/core/foundations/responsive.js.map +1 -0
- package/core/foundations/types.js +1 -0
- package/core/foundations/types.js.map +1 -0
- package/core/foundations/typography.d.ts +1 -1
- package/core/foundations/typography.js +2 -0
- package/core/foundations/typography.js.map +1 -0
- package/core/global/GlobalStyle.js +1 -1
- package/core/global/GlobalStyle.js.map +1 -0
- package/core/global/index.js +1 -0
- package/core/global/index.js.map +1 -0
- package/core/integrations/StyledComponentsRegistry.d.ts +1 -1
- package/core/integrations/StyledComponentsRegistry.js +1 -1
- package/core/integrations/StyledComponentsRegistry.js.map +1 -0
- package/core/integrations/index.js +1 -0
- package/core/integrations/index.js.map +1 -0
- package/core/molecules/FileDrop.js +3 -6
- package/core/molecules/FileDrop.js.map +1 -0
- package/core/molecules/Modal.d.ts +2 -2
- package/core/molecules/Modal.js +2 -2
- package/core/molecules/Modal.js.map +1 -0
- package/core/molecules/RadioButtons.d.ts +2 -2
- package/core/molecules/RadioButtons.js +4 -16
- package/core/molecules/RadioButtons.js.map +1 -0
- package/core/molecules/index.js +1 -0
- package/core/molecules/index.js.map +1 -0
- package/core/organisms/GrantMatch/ActiveQueryFiles.js +3 -4
- package/core/organisms/GrantMatch/ActiveQueryFiles.js.map +1 -0
- package/core/organisms/GrantMatch/GrantMatchModal.js +1 -1
- package/core/organisms/GrantMatch/GrantMatchModal.js.map +1 -0
- package/core/organisms/GrantMatch/SearchBar.js +13 -4
- package/core/organisms/GrantMatch/SearchBar.js.map +1 -0
- package/core/organisms/GrantMatch/context.d.ts +1 -1
- package/core/organisms/GrantMatch/context.js +2 -0
- package/core/organisms/GrantMatch/context.js.map +1 -0
- package/core/organisms/GrantMatch/index.d.ts +1 -1
- package/core/organisms/GrantMatch/index.js +4 -3
- package/core/organisms/GrantMatch/index.js.map +1 -0
- package/core/organisms/TallyModal.d.ts +1 -1
- package/core/organisms/TallyModal.js +3 -16
- package/core/organisms/TallyModal.js.map +1 -0
- package/core/organisms/YesNoOptions.d.ts +1 -1
- package/core/organisms/YesNoOptions.js +4 -3
- package/core/organisms/YesNoOptions.js.map +1 -0
- package/core/organisms/index.js +1 -0
- package/core/organisms/index.js.map +1 -0
- package/index.js +2 -0
- package/index.js.map +1 -0
- package/package.json +4 -3
- package/stories/atoms/Badge.stories.d.ts +1 -1
- package/stories/atoms/Badge.stories.js +2 -0
- package/stories/atoms/Badge.stories.js.map +1 -0
- package/stories/atoms/BrandLogo.stories.d.ts +1 -1
- package/stories/atoms/BrandLogo.stories.js +2 -0
- package/stories/atoms/BrandLogo.stories.js.map +1 -0
- package/stories/atoms/Button.stories.d.ts +1 -1
- package/stories/atoms/Button.stories.js +20 -4
- package/stories/atoms/Button.stories.js.map +1 -0
- package/stories/atoms/Checkbox.stories.d.ts +1 -1
- package/stories/atoms/Checkbox.stories.js +2 -0
- package/stories/atoms/Checkbox.stories.js.map +1 -0
- package/stories/atoms/LinkButton.stories.d.ts +1 -1
- package/stories/atoms/LinkButton.stories.js +20 -4
- package/stories/atoms/LinkButton.stories.js.map +1 -0
- package/stories/atoms/PageLoader.stories.d.ts +1 -1
- package/stories/atoms/PageLoader.stories.js +2 -0
- package/stories/atoms/PageLoader.stories.js.map +1 -0
- package/stories/atoms/Textarea.stories.d.ts +1 -1
- package/stories/atoms/Textarea.stories.js +2 -0
- package/stories/atoms/Textarea.stories.js.map +1 -0
- package/stories/molecules/FileDrop.stories.d.ts +1 -1
- package/stories/molecules/FileDrop.stories.js +2 -0
- package/stories/molecules/FileDrop.stories.js.map +1 -0
- package/stories/molecules/Modal.stories.d.ts +3 -3
- package/stories/molecules/Modal.stories.js +4 -1
- package/stories/molecules/Modal.stories.js.map +1 -0
- package/stories/molecules/RadioButtons.stories.d.ts +1 -1
- package/stories/molecules/RadioButtons.stories.js +3 -1
- package/stories/molecules/RadioButtons.stories.js.map +1 -0
- package/stories/organisms/GrantMatch.stories.d.ts +1 -1
- package/stories/organisms/GrantMatch.stories.js +4 -1
- package/stories/organisms/GrantMatch.stories.js.map +1 -0
- package/stories/organisms/TallyModal.stories.d.ts +2 -2
- package/stories/organisms/TallyModal.stories.js +4 -1
- package/stories/organisms/TallyModal.stories.js.map +1 -0
- package/stories/organisms/YesNoOptions.stories.d.ts +1 -1
- package/stories/organisms/YesNoOptions.stories.js +6 -1
- package/stories/organisms/YesNoOptions.stories.js.map +1 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/vitest.config.js +1 -0
- package/vitest.config.js.map +1 -0
package/core/atoms/Badge.d.ts
CHANGED
package/core/atoms/Badge.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import {} from "react";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import { Colors, Icons, Responsive, Typography } from "../foundations";
|
|
5
5
|
const Badge = ({ text, Icon, iconSize = 20, iconWeight = "regular", onClickClose, textWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$isCloseable": !!onClickClose, "$widthPixels": textWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeText, { children: text })] }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
|
|
@@ -53,3 +53,4 @@ const Button = styled.button `
|
|
|
53
53
|
|
|
54
54
|
min-width: 12px;
|
|
55
55
|
`;
|
|
56
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA8C,MAAM,OAAO,CAAC;AACnE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAavE,MAAM,KAAK,GAAG,CAAC,EACb,IAAI,EACJ,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,wBAAmB,eAAe,YAAU,KAAK,aACzD,MAAC,YAAY,oBAAe,CAAC,CAAC,YAAY,kBAAgB,eAAe,aACtE,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,GAAI,GAC5C,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EACD,KAAC,SAAS,cAAE,IAAI,GAAa,IAChB,EAEd,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,YACzC,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GAClB,CACV,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACS,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgD;;;;;;;;;WASjE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAClE,gBAAgB;CACnB,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;;;WAKS,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;eAC/D,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAChC,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM;CAC9C,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAiC;;;;WAItD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACrC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;oBAON,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,iBAAiB,CAAC,KAAK;;;qBAG9B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,iBAAiB,CAAC,GAAG;;CAEhD,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAK3B,CAAC","sourcesContent":["import { type ComponentType, type MouseEventHandler } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\ntype BadgeProps = {\n text: string;\n Icon?: ComponentType<Icons.IconProps>;\n iconSize?: string | number;\n iconWeight?: Icons.IconWeight;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n textWidthPixels?: number;\n backgroundColor?: string;\n color?: string;\n};\n\nconst Badge = ({\n text,\n Icon,\n iconSize = 20,\n iconWeight = \"regular\",\n onClickClose,\n textWidthPixels,\n backgroundColor,\n color,\n}: BadgeProps) => (\n <BaseBadge $backgroundColor={backgroundColor} $color={color}>\n <BadgeContent $isCloseable={!!onClickClose} $widthPixels={textWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={iconSize} weight={iconWeight} />\n </IconContainer>\n ) : (\n <></>\n )}\n <BadgeText>{text}</BadgeText>\n </BadgeContent>\n\n {onClickClose ? (\n <Button type=\"button\" onClick={onClickClose}>\n <Icons.XIcon size={12} />\n </Button>\n ) : (\n <></>\n )}\n </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{ $backgroundColor?: string; $color?: string }>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n\n padding: 5px 16px;\n border-radius: 130px;\n\n color: ${({ $color = Colors.typography.blackHigh }) => $color};\n background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n $backgroundColor};\n`;\n\nconst BadgeContent = styled.div<{\n $isCloseable: 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: ${({ $isCloseable }) =>\n $isCloseable ? \"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 BadgeText = styled.p`\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n font-weight: 500;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.HELPER_FONT_SIZES.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.HELPER_FONT_SIZES.big};\n }\n`;\n\nconst Button = styled.button`\n display: flex;\n flex-direction: column;\n\n min-width: 12px;\n`;\n"]}
|
package/core/atoms/BrandLogo.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
2
|
import Image from "next/image";
|
|
4
3
|
import styled from "styled-components";
|
|
@@ -18,3 +17,4 @@ const CustomImage = styled(Image) `
|
|
|
18
17
|
height: 48px;
|
|
19
18
|
}
|
|
20
19
|
`;
|
|
20
|
+
//# sourceMappingURL=BrandLogo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BrandLogo.js","sourceRoot":"","sources":["../../../core/atoms/BrandLogo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAO5C,MAAM,SAAS,GAAG,CAAC,EACjB,WAAW,GAAG,IAAI,EAClB,GAAG,GAAG,UAAU,GACD,EAAE,EAAE,CAAC,CACpB,KAAC,WAAW,IACV,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,SACR,CACH,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACb,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport darkLogo from \"../assets/logos/brand_logo-dark.webp\";\nimport lightLogo from \"../assets/logos/brand_logo-light.webp\";\nimport { Responsive } from \"../foundations\";\n\ntype BrandLogoProps = {\n isDarkTheme?: boolean;\n alt?: string;\n};\n\nconst BrandLogo = ({\n isDarkTheme = true,\n alt = \"Grantbii\",\n}: BrandLogoProps) => (\n <CustomImage\n src={isDarkTheme ? darkLogo : lightLogo}\n width={250}\n height={80}\n alt={alt}\n priority\n />\n);\n\nexport default BrandLogo;\n\nconst CustomImage = styled(Image)`\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 125px;\n height: 40px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 150px;\n height: 48px;\n }\n`;\n"]}
|
package/core/atoms/Button.d.ts
CHANGED
package/core/atoms/Button.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import {} from "react";
|
|
3
|
+
import { Icons } from "../foundations";
|
|
3
4
|
import { BaseButton as ButtonContent } from "./shared";
|
|
4
5
|
import styled from "styled-components";
|
|
5
6
|
const Button = ({ text, onClick, disabled, LeftIcon, RightIcon, underline, backgroundColor, color, width, type = "button", }) => (_jsx(BaseButton, { type: type, onClick: onClick, disabled: disabled, "$width": width, children: _jsxs(ButtonContent, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
|
|
@@ -7,3 +8,4 @@ export default Button;
|
|
|
7
8
|
const BaseButton = styled.button `
|
|
8
9
|
width: ${({ $width = "auto" }) => $width};
|
|
9
10
|
`;
|
|
11
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/atoms/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA8C,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAevC,MAAM,MAAM,GAAG,CAAC,EACd,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,KAAK,EACL,KAAK,EACL,IAAI,GAAG,QAAQ,GACH,EAAE,EAAE,CAAC,CACjB,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,YAAU,KAAK,YACzE,MAAC,aAAa,kBACA,SAAS,sBACH,eAAe,YACzB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACxD,sBAAI,IAAI,GAAK,EACZ,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC5C,GACL,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAqB;WAC1C,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;CACzC,CAAC","sourcesContent":["import { type ComponentType, type MouseEventHandler } from \"react\";\nimport { Icons } from \"../foundations\";\nimport { BaseButton as ButtonContent } from \"./shared\";\nimport styled from \"styled-components\";\n\ntype ButtonProps = {\n text: string;\n onClick: MouseEventHandler<HTMLButtonElement>;\n disabled?: boolean;\n type?: \"button\" | \"submit\" | \"reset\";\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n color?: string;\n width?: string;\n};\n\nconst Button = ({\n text,\n onClick,\n disabled,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n color,\n width,\n type = \"button\",\n}: ButtonProps) => (\n <BaseButton type={type} onClick={onClick} disabled={disabled} $width={width}>\n <ButtonContent\n $underline={underline}\n $backgroundColor={backgroundColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n <p>{text}</p>\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </ButtonContent>\n </BaseButton>\n);\n\nexport default Button;\n\nconst BaseButton = styled.button<{ $width?: string }>`\n width: ${({ $width = \"auto\" }) => $width};\n`;\n"]}
|
package/core/atoms/Checkbox.d.ts
CHANGED
package/core/atoms/Checkbox.js
CHANGED
|
@@ -1,19 +1,6 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import {} from "react";
|
|
14
3
|
import { LabelledInput } from "./shared";
|
|
15
|
-
const Checkbox = (
|
|
16
|
-
var { id, label, labelBefore = false } = _a, checkboxProps = __rest(_a, ["id", "label", "labelBefore"]);
|
|
17
|
-
return (_jsxs(LabelledInput, { children: [labelBefore ? _jsx("label", { htmlFor: `${id}-checkbox`, children: label }) : _jsx(_Fragment, {}), _jsx("input", Object.assign({}, checkboxProps, { id: `${id}-checkbox`, type: "checkbox" })), labelBefore ? _jsx(_Fragment, {}) : _jsx("label", { htmlFor: `${id}-checkbox`, children: label })] }));
|
|
18
|
-
};
|
|
4
|
+
const Checkbox = ({ id, label, labelBefore = false, ...checkboxProps }) => (_jsxs(LabelledInput, { children: [labelBefore ? _jsx("label", { htmlFor: `${id}-checkbox`, children: label }) : _jsx(_Fragment, {}), _jsx("input", { ...checkboxProps, id: `${id}-checkbox`, type: "checkbox" }), labelBefore ? _jsx(_Fragment, {}) : _jsx("label", { htmlFor: `${id}-checkbox`, children: label })] }));
|
|
19
5
|
export default Checkbox;
|
|
6
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../core/atoms/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAOzC,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,GAAG,aAAa,EACF,EAAE,EAAE,CAAC,CACnB,MAAC,aAAa,eACX,WAAW,CAAC,CAAC,CAAC,gBAAO,OAAO,EAAE,GAAG,EAAE,WAAW,YAAG,KAAK,GAAS,CAAC,CAAC,CAAC,mBAAK,EACxE,mBAAW,aAAa,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAC,UAAU,GAAG,EACjE,WAAW,CAAC,CAAC,CAAC,mBAAK,CAAC,CAAC,CAAC,gBAAO,OAAO,EAAE,GAAG,EAAE,WAAW,YAAG,KAAK,GAAS,IAC1D,CACjB,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { type DetailedHTMLProps, type InputHTMLAttributes } from \"react\";\nimport { LabelledInput } from \"./shared\";\n\ntype CheckboxProps = {\n label: string;\n labelBefore?: boolean;\n} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Checkbox = ({\n id,\n label,\n labelBefore = false,\n ...checkboxProps\n}: CheckboxProps) => (\n <LabelledInput>\n {labelBefore ? <label htmlFor={`${id}-checkbox`}>{label}</label> : <></>}\n <input {...checkboxProps} id={`${id}-checkbox`} type=\"checkbox\" />\n {labelBefore ? <></> : <label htmlFor={`${id}-checkbox`}>{label}</label>}\n </LabelledInput>\n);\n\nexport default Checkbox;\n"]}
|
package/core/atoms/LinkButton.js
CHANGED
|
@@ -1,24 +1,12 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
2
|
import Link from "next/link";
|
|
3
|
+
import {} from "react";
|
|
4
|
+
import { Icons } from "../foundations";
|
|
15
5
|
import { BaseButton } from "./shared";
|
|
16
6
|
/**
|
|
17
7
|
* A link that looks like a button
|
|
18
8
|
*/
|
|
19
|
-
const LinkButton = (
|
|
20
|
-
var { href, target, disabled } = _a, contentProps = __rest(_a, ["href", "target", "disabled"]);
|
|
21
|
-
return disabled ? (_jsx(Content, Object.assign({}, contentProps))) : (_jsx(Link, { href: href, target: target, children: _jsx(Content, Object.assign({}, contentProps)) }));
|
|
22
|
-
};
|
|
9
|
+
const LinkButton = ({ href, target, disabled, ...contentProps }) => disabled ? (_jsx(Content, { ...contentProps })) : (_jsx(Link, { href: href, target: target, children: _jsx(Content, { ...contentProps }) }));
|
|
23
10
|
export default LinkButton;
|
|
24
11
|
const Content = ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, }) => (_jsxs(BaseButton, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }));
|
|
12
|
+
//# sourceMappingURL=LinkButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/atoms/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAsD,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAetC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,GAAG,YAAY,EACC,EAAE,EAAE,CACpB,QAAQ,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAC9B,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AAEJ,eAAe,UAAU,CAAC;AAY1B,MAAM,OAAO,GAAG,CAAC,EACf,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,KAAK,EACL,KAAK,GACQ,EAAE,EAAE,CAAC,CAClB,MAAC,UAAU,kBACG,SAAS,sBACH,eAAe,YACzB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACxD,sBAAI,IAAI,GAAK,EACZ,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC/C,CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport { type ComponentType, type HTMLAttributeAnchorTarget } from \"react\";\nimport { Icons } from \"../foundations\";\nimport { BaseButton } from \"./shared\";\n\ntype LinkButtonProps = {\n text: string;\n href: string;\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n color?: string;\n width?: string;\n};\n\n/**\n * A link that looks like a button\n */\nconst LinkButton = ({\n href,\n target,\n disabled,\n ...contentProps\n}: LinkButtonProps) =>\n disabled ? (\n <Content {...contentProps} />\n ) : (\n <Link href={href} target={target}>\n <Content {...contentProps} />\n </Link>\n );\n\nexport default LinkButton;\n\ntype ContentProps = {\n text: string;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n color?: string;\n width?: string;\n};\n\nconst Content = ({\n text,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n color,\n width,\n}: ContentProps) => (\n <BaseButton\n $underline={underline}\n $backgroundColor={backgroundColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n <p>{text}</p>\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </BaseButton>\n);\n"]}
|
package/core/atoms/PageLoader.js
CHANGED
|
@@ -1,26 +1,12 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
2
|
import { MoonLoader, PacmanLoader } from "react-spinners";
|
|
3
|
+
import {} from "react-spinners/helpers/props";
|
|
15
4
|
import styled from "styled-components";
|
|
16
5
|
import { Colors } from "../foundations";
|
|
17
6
|
/**
|
|
18
7
|
* The animation to show when loading the whole page
|
|
19
8
|
*/
|
|
20
|
-
const PageLoader = (
|
|
21
|
-
var { isPacman = false, color = Colors.accent.blue1, size } = _a, restOfProps = __rest(_a, ["isPacman", "color", "size"]);
|
|
22
|
-
return (_jsx(Background, { children: isPacman ? (_jsx(PacmanLoader, Object.assign({ color: color, size: size ? size : 20 }, restOfProps))) : (_jsx(MoonLoader, Object.assign({ color: color, size: size ? size : 32 }, restOfProps))) }));
|
|
23
|
-
};
|
|
9
|
+
const PageLoader = ({ isPacman = false, color = Colors.accent.blue1, size, ...restOfProps }) => (_jsx(Background, { children: isPacman ? (_jsx(PacmanLoader, { color: color, size: size ? size : 20, ...restOfProps })) : (_jsx(MoonLoader, { color: color, size: size ? size : 32, ...restOfProps })) }));
|
|
24
10
|
export default PageLoader;
|
|
25
11
|
const Background = styled.div `
|
|
26
12
|
display: flex;
|
|
@@ -30,3 +16,4 @@ const Background = styled.div `
|
|
|
30
16
|
width: 100%;
|
|
31
17
|
height: 100%;
|
|
32
18
|
`;
|
|
19
|
+
//# sourceMappingURL=PageLoader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/atoms/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAA8B,MAAM,8BAA8B,CAAC;AAC1E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAMxC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAC3B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,KAAC,UAAU,cACR,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACtE,GACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport { type LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../foundations\";\n\ntype PageLoaderProps = {\n isPacman?: boolean;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n isPacman = false,\n color = Colors.accent.blue1,\n size,\n ...restOfProps\n}: PageLoaderProps) => (\n <Background>\n {isPacman ? (\n <PacmanLoader color={color} size={size ? size : 20} {...restOfProps} />\n ) : (\n <MoonLoader color={color} size={size ? size : 32} {...restOfProps} />\n )}\n </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 100%;\n`;\n"]}
|
|
@@ -1,19 +1,6 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import {} from "react";
|
|
14
3
|
import { LabelledInput } from "./shared";
|
|
15
|
-
const RadioButton = (
|
|
16
|
-
var { id, label } = _a, radioButtonProps = __rest(_a, ["id", "label"]);
|
|
17
|
-
return (_jsxs(LabelledInput, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: `${id}-radio-button`, type: "radio" })), _jsx("label", { htmlFor: `${id}-radio-button`, children: label })] }));
|
|
18
|
-
};
|
|
4
|
+
const RadioButton = ({ id, label, ...radioButtonProps }) => (_jsxs(LabelledInput, { children: [_jsx("input", { ...radioButtonProps, id: `${id}-radio-button`, type: "radio" }), _jsx("label", { htmlFor: `${id}-radio-button`, children: label })] }));
|
|
19
5
|
export default RadioButton;
|
|
6
|
+
//# sourceMappingURL=RadioButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../core/atoms/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAMzC,MAAM,WAAW,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,gBAAgB,EAAoB,EAAE,EAAE,CAAC,CAC5E,MAAC,aAAa,eACZ,mBAAW,gBAAgB,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAC,OAAO,GAAG,EACtE,gBAAO,OAAO,EAAE,GAAG,EAAE,eAAe,YAAG,KAAK,GAAS,IACvC,CACjB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { type DetailedHTMLProps, type InputHTMLAttributes } from \"react\";\nimport { LabelledInput } from \"./shared\";\n\ntype RadioButtonProps = {\n label: string;\n} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst RadioButton = ({ id, label, ...radioButtonProps }: RadioButtonProps) => (\n <LabelledInput>\n <input {...radioButtonProps} id={`${id}-radio-button`} type=\"radio\" />\n <label htmlFor={`${id}-radio-button`}>{label}</label>\n </LabelledInput>\n);\n\nexport default RadioButton;\n"]}
|
package/core/atoms/Textarea.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import styled from "styled-components";
|
|
3
2
|
import { Colors } from "../foundations";
|
|
4
3
|
const Textarea = styled.textarea `
|
|
@@ -30,3 +29,4 @@ const Textarea = styled.textarea `
|
|
|
30
29
|
}
|
|
31
30
|
`;
|
|
32
31
|
export default Textarea;
|
|
32
|
+
//# sourceMappingURL=Textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../core/atoms/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAA4B;YAChD,CAAC,EAAE,aAAa,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,aAAa;;;;;wBAK9B,MAAM,CAAC,OAAO,CAAC,KAAK;wBACpB,MAAM,CAAC,OAAO,CAAC,KAAK;;;;wBAIpB,MAAM,CAAC,OAAO,CAAC,KAAK;;;;wBAIpB,MAAM,CAAC,MAAM,CAAC,IAAI;;;;wBAIlB,MAAM,CAAC,MAAM,CAAC,KAAK;yBAClB,MAAM,CAAC,MAAM,CAAC,KAAK;;;;wBAIpB,MAAM,CAAC,MAAM,CAAC,IAAI;yBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;;CAE1C,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../foundations\";\n\nconst Textarea = styled.textarea<{ $heightPixels?: number }>`\n height: ${({ $heightPixels = 100 }) => $heightPixels}px;\n padding: 12px 16px;\n border-radius: 6px;\n\n &:disabled {\n background-color: ${Colors.neutral.grey4};\n border: 1px solid ${Colors.neutral.grey3};\n }\n\n &:valid {\n border: 1px solid ${Colors.neutral.grey3};\n }\n\n &:invalid {\n border: 1px solid ${Colors.accent.red1};\n }\n\n &:focus&:valid {\n border: 1px solid ${Colors.accent.blue1};\n outline: 1px solid ${Colors.accent.blue1};\n }\n\n &:focus&:invalid {\n border: 1px solid ${Colors.accent.red1};\n outline: 1px solid ${Colors.accent.red1};\n }\n`;\n\nexport default Textarea;\n"]}
|
package/core/atoms/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge } from \"./Badge\";\nexport { default as BrandLogo } from \"./BrandLogo\";\nexport { default as Button } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as LinkButton } from \"./LinkButton\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\n"]}
|
package/core/atoms/shared.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../core/atoms/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAKlC;;;;;;WAMS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;;;;;;;qBAQrB,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAC5C,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;;WAE1B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EACnB,UAAU,GAAG,KAAK,EAClB,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,GAC5C,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC;CACtD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../foundations\";\n\nexport const BaseButton = styled.div<{\n $underline?: boolean;\n $backgroundColor?: string;\n $color?: string;\n $width?: string;\n}>`\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n\n width: ${({ $width = \"auto\" }) => $width};\n\n padding: 10px 16px;\n border-radius: 4px;\n\n font-weight: 500;\n font-size: 14px;\n\n text-decoration: ${({ $underline = false }) =>\n $underline ? \"underline\" : \"none\"};\n\n color: ${({ $color = Colors.typography.whiteHigh }) => $color};\n background-color: ${({\n $underline = false,\n $backgroundColor = Colors.main.grantbiiBlue,\n }) => ($underline ? \"transparent\" : $backgroundColor)};\n`;\n\nexport const LabelledInput = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../core/foundations/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,WAAW;IACxB,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,WAAW;IACxB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,OAAO,EAAE,WAAW;CACrB,CAAC","sourcesContent":["export const main = {\n grantbiiBlue: \"#16538a\",\n grantbiiOrange: \"#f3924d\",\n};\n\nexport const base = {\n black: \"#232022\",\n white: \"#ffffff\",\n};\n\nexport const neutral = {\n grey1: \"#999999\",\n grey2: \"#cccccc\",\n grey3: \"#eeeeee\",\n grey4: \"#fafafa\",\n};\n\nexport const accent = {\n // usually includes dangerous, wrong or rejected information\n red1: \"#c02318\",\n red2: \"#f88e86\",\n red3: \"#fcc7c3\",\n // usually indicates warning, progressing, etc\n yellow1: \"#edab03\",\n yellow2: \"#f4cc68\",\n yellow3: \"#fae6b3\",\n // usually indicates success, correct, passed, etc\n green1: \"#08a45e\",\n green2: \"#6bc89e\",\n green3: \"#b5e4cf\",\n // usually indicates info, no emotion\n blue1: \"#1878e4\",\n blue2: \"#74aeef\",\n blue3: \"#bad6f7\",\n};\n\nexport const typography = {\n blackHigh: \"#000000e5\",\n blackMedium: \"#00000099\",\n blackLow: \"#0000004d\",\n whiteHigh: \"#ffffff\",\n whiteMedium: \"#ffffff99\",\n whiteLow: \"#0000001a\",\n};\n\nexport const semantic = {\n overlay: \"#13131366\",\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flags.js","sourceRoot":"","sources":["../../../core/foundations/flags.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from \"country-flag-icons/react/3x2\";\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../core/foundations/icons.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from \"@phosphor-icons/react\";\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/foundations/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC","sourcesContent":["export * as Responsive from \"./responsive\";\nexport * as Colors from \"./colors\";\nexport * as Flags from \"./flags\";\nexport * as Icons from \"./icons\";\nexport type * from \"./types\";\nexport * as Typography from \"./typography\";\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../../core/foundations/responsive.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;oBACrB,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;oBACnB,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC","sourcesContent":["import styled from \"styled-components\";\n\nexport const WIDTH_BREAKPOINTS = {\n laptop: \"1024px\",\n};\n\nexport const SmallScreenOnly = styled.div`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n display: inline;\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n`;\n\nexport const BigScreenOnly = styled.div`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n display: inline;\n }\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../core/foundations/types.ts"],"names":[],"mappings":"","sourcesContent":["export type ScreenSize = \"big\" | \"small\";\n\nexport type Option = {\n label: string;\n value: string;\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../core/foundations/typography.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,MAAM,SAAS,CAAC;AAI1C,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,GAAG,EAAE,MAAM;IACX,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,GAAG,EAAE,MAAM;IACX,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAc;IAC7C,GAAG,EAAE,MAAM;IACX,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,GAAG,EAAE,MAAM;IACX,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,GAAG,EAAE,MAAM;IACX,KAAK,EAAE,MAAM;CACd,CAAC","sourcesContent":["import { type ScreenSize } from \"./types\";\n\ntype FontSizes = { [screenSize in ScreenSize]: string };\n\nexport const TITLE_FONT_SIZES: FontSizes = {\n big: \"24px\",\n small: \"22px\",\n};\n\nexport const HEADER_FONT_SIZES: FontSizes = {\n big: \"22px\",\n small: \"20px\",\n};\n\nexport const SUBHEADER_FONT_SIZES: FontSizes = {\n big: \"20px\",\n small: \"18px\",\n};\n\nexport const BODY_FONT_SIZES: FontSizes = {\n big: \"16px\",\n small: \"14px\",\n};\n\nexport const HELPER_FONT_SIZES: FontSizes = {\n big: \"14px\",\n small: \"12px\",\n};\n"]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { createGlobalStyle } from "styled-components";
|
|
3
2
|
import "../assets/fonts/satoshi/css/satoshi.css";
|
|
4
3
|
import * as Colors from "../foundations/colors";
|
|
@@ -63,3 +62,4 @@ const GlobalStyle = createGlobalStyle `
|
|
|
63
62
|
}
|
|
64
63
|
`;
|
|
65
64
|
export default GlobalStyle;
|
|
65
|
+
//# sourceMappingURL=GlobalStyle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAEhD,MAAM,WAAW,GAAG,iBAAiB,CAAA;;;;;;;aAOxB,MAAM,CAAC,UAAU,CAAC,SAAS;kBACtB,MAAM,CAAC,IAAI,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDlC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\nimport \"../assets/fonts/satoshi/css/satoshi.css\";\nimport * as Colors from \"../foundations/colors\";\n\nconst GlobalStyle = createGlobalStyle`\n html,\n body {\n max-width: 100vw;\n }\n\n body {\n color: ${Colors.typography.blackHigh};\n background: ${Colors.base.white};\n font-family: Satoshi;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n button,\n fieldset,\n textarea {\n all: unset;\n }\n\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button:hover {\n cursor: pointer;\n }\n\n button:disabled {\n cursor: not-allowed;\n }\n\n li {\n list-style-position: inside;\n }\n\n li * {\n vertical-align: middle;\n }\n\n /* number textfield in Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* number textfield in Firefox */\n input[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: textfield;\n }\n`;\n\nexport default GlobalStyle;\n"]}
|
package/core/global/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/global/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default as GlobalStyle } from \"./GlobalStyle\";\n"]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
3
2
|
import { useServerInsertedHTML } from "next/navigation";
|
|
4
3
|
import { useState } from "react";
|
|
@@ -15,3 +14,4 @@ const StyledComponentsRegistry = ({ children }) => {
|
|
|
15
14
|
return typeof window !== "undefined" ? (_jsx(_Fragment, { children: children })) : (_jsx(StyleSheetManager, { sheet: styledComponentsStyleSheet.instance, children: children }));
|
|
16
15
|
};
|
|
17
16
|
export default StyledComponentsRegistry;
|
|
17
|
+
//# sourceMappingURL=StyledComponentsRegistry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StyledComponentsRegistry.js","sourceRoot":"","sources":["../../../core/integrations/StyledComponentsRegistry.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAA0B,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAExE,MAAM,wBAAwB,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACnE,sDAAsD;IACtD,0EAA0E;IAC1E,MAAM,CAAC,0BAA0B,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC;IAE5E,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAG,0BAA0B,CAAC,eAAe,EAAE,CAAC;QAC5D,0BAA0B,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;QAC/C,OAAO,4BAAG,MAAM,GAAI,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,CACrC,4BAAG,QAAQ,GAAI,CAChB,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,KAAK,EAAE,0BAA0B,CAAC,QAAQ,YAC1D,QAAQ,GACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,wBAAwB,CAAC","sourcesContent":["import { useServerInsertedHTML } from \"next/navigation\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { ServerStyleSheet, StyleSheetManager } from \"styled-components\";\n\nconst StyledComponentsRegistry = ({ children }: PropsWithChildren) => {\n // Only create stylesheet once with lazy initial state\n // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state\n const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());\n\n useServerInsertedHTML(() => {\n const styles = styledComponentsStyleSheet.getStyleElement();\n styledComponentsStyleSheet.instance.clearTag();\n return <>{styles}</>;\n });\n\n return typeof window !== \"undefined\" ? (\n <>{children}</>\n ) : (\n <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>\n {children}\n </StyleSheetManager>\n );\n};\n\nexport default StyledComponentsRegistry;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/integrations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { default as StyledComponentsRegistry } from \"./StyledComponentsRegistry\";\n"]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
2
|
import { useState } from "react";
|
|
4
3
|
import { useDropzone } from "react-dropzone";
|
|
@@ -17,7 +16,7 @@ const FileDrop = ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFil
|
|
|
17
16
|
noDrag: reachedMaxUploads,
|
|
18
17
|
multiple: true,
|
|
19
18
|
});
|
|
20
|
-
return (_jsxs(BaseFileDrop, { children: [_jsxs(Dropzone,
|
|
19
|
+
return (_jsxs(BaseFileDrop, { children: [_jsxs(Dropzone, { ...getRootProps(), "$reachedMaxUploads": reachedMaxUploads, "$hasError": !!errorMessage, children: [_jsx("input", { ...getInputProps(), type: "file" }), _jsx(DropzoneContent, { maxFiles: maxFiles, maxSizeMB: maxSizeMB })] }), errorMessage ? _jsx(ErrorMessage, { children: errorMessage }) : _jsx(_Fragment, {}), _jsx(UploadedFiles, { uploadedFiles: uploadedFiles, removeFile: removeFile })] }));
|
|
21
20
|
};
|
|
22
21
|
export default FileDrop;
|
|
23
22
|
const BaseFileDrop = styled.div `
|
|
@@ -81,10 +80,7 @@ const DropzoneSubtitle = styled.p `
|
|
|
81
80
|
const ErrorMessage = styled.p `
|
|
82
81
|
color: ${Colors.accent.red1};
|
|
83
82
|
`;
|
|
84
|
-
const UploadedFiles = ({ uploadedFiles, removeFile }) => (_jsx(BaseUploadedFiles, { children: uploadedFiles.map(({ name: fileName, type: fileType }) => {
|
|
85
|
-
var _a;
|
|
86
|
-
return (_jsx(Badge, { text: getFileNameWithoutExtension(fileName), onClickClose: () => removeFile(fileName), Icon: (_a = FILE_TYPE_ICON_MAP[fileType]) !== null && _a !== void 0 ? _a : Icons.FileIcon }, fileName));
|
|
87
|
-
}) }));
|
|
83
|
+
const UploadedFiles = ({ uploadedFiles, removeFile }) => (_jsx(BaseUploadedFiles, { children: uploadedFiles.map(({ name: fileName, type: fileType }) => (_jsx(Badge, { text: getFileNameWithoutExtension(fileName), onClickClose: () => removeFile(fileName), Icon: FILE_TYPE_ICON_MAP[fileType] ?? Icons.FileIcon }, fileName))) }));
|
|
88
84
|
const BaseUploadedFiles = styled.div `
|
|
89
85
|
display: flex;
|
|
90
86
|
flex-direction: column;
|
|
@@ -128,3 +124,4 @@ const combineFilesWithoutDuplicates = (oldFiles, newFiles) => {
|
|
|
128
124
|
};
|
|
129
125
|
const filterFilesByName = (files, fileName) => files.filter((file) => file.name !== fileName);
|
|
130
126
|
const getFileNameWithoutExtension = (fileName) => fileName.substring(0, fileName.lastIndexOf("."));
|
|
127
|
+
//# sourceMappingURL=FileDrop.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/molecules/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport { Badge } from \"../atoms\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\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: { \"application/pdf\": [\".pdf\"] },\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: 6px;\n border: 1px solid\n ${({ $hasError }) =>\n $hasError ? Colors.accent.red1 : Colors.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 <Icons.FileDashedIcon\n weight=\"thin\"\n size={48}\n color={Colors.neutral.grey1}\n />\n <AllDropzoneText>\n <DropzoneText>\n {`Drop up to ${maxFiles} files here ( ${maxSizeMB}MB each)`}\n </DropzoneText>\n\n <DropzoneSubtitle $isHighlighted>{DROPZONE_BROWSE_TEXT}</DropzoneSubtitle>\n <DropzoneSubtitle>{FILE_FORMAT_TEXT}</DropzoneSubtitle>\n </AllDropzoneText>\n </BaseDropzoneContent>\n);\n\nconst DROPZONE_BROWSE_TEXT = \"or click to browse with your file explorer\";\nconst FILE_FORMAT_TEXT = \"Accepted file formats: .pdf (more coming soon)\";\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 font-weight: 500;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.BODY_FONT_SIZES.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.BODY_FONT_SIZES.big};\n }\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n text-align: center;\n\n font-weight: 400;\n\n color: ${({ $isHighlighted = false }) =>\n $isHighlighted ? Colors.accent.yellow1 : Colors.typography.blackLow};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.HELPER_FONT_SIZES.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${Typography.HELPER_FONT_SIZES.big};\n }\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Colors.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 text={getFileNameWithoutExtension(fileName)}\n onClickClose={() => removeFile(fileName)}\n Icon={FILE_TYPE_ICON_MAP[fileType] ?? Icons.FileIcon}\n />\n ))}\n </BaseUploadedFiles>\n);\n\nconst BaseUploadedFiles = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst FILE_TYPE_ICON_MAP: { [itemType: string]: Icons.Icon } = {\n \"application/pdf\": Icons.FilePdfIcon,\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 = newFiles.map((file) => file.name);\n const keptOldFiles = oldFiles.filter(\n (oldFile) => !newFileNames.includes(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,7 +1,7 @@
|
|
|
1
|
-
import { MouseEventHandler, ReactNode } from "react";
|
|
1
|
+
import { type JSX, type MouseEventHandler, type ReactNode } from "react";
|
|
2
2
|
type ModalProps = {
|
|
3
3
|
header?: ReactNode;
|
|
4
|
-
content:
|
|
4
|
+
content: JSX.Element;
|
|
5
5
|
footer?: ReactNode;
|
|
6
6
|
width?: string;
|
|
7
7
|
height?: string;
|
package/core/molecules/Modal.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useCallback, useState } from "react";
|
|
2
|
+
import { useCallback, useState, } from "react";
|
|
4
3
|
import styled from "styled-components";
|
|
5
4
|
import { Button } from "../atoms";
|
|
6
5
|
import { Colors, Responsive } from "../foundations";
|
|
@@ -107,3 +106,4 @@ const ModalFooter = styled.div `
|
|
|
107
106
|
padding: 24px;
|
|
108
107
|
`;
|
|
109
108
|
const CancelButton = ({ onClick }) => (_jsx(Button, { text: "Cancel", onClick: onClick, backgroundColor: Colors.neutral.grey3, color: Colors.typography.blackHigh }));
|
|
109
|
+
//# sourceMappingURL=Modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/molecules/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n type JSX,\n type MouseEventHandler,\n type ReactNode,\n useCallback,\n useState,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Button } from \"../atoms\";\nimport { Colors, Responsive } from \"../foundations\";\n\ntype ModalProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n onClickCancel: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst Modal = ({\n header,\n content,\n footer,\n width,\n height,\n onClickCancel,\n}: ModalProps) => (\n <Overlay>\n <ModalWindow $width={width} $height={height}>\n {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n <ModalBody>{content}</ModalBody>\n\n <ModalFooter>\n <CancelButton onClick={onClickCancel} />\n {footer ? footer : <></>}\n </ModalFooter>\n </ModalWindow>\n </Overlay>\n);\n\nexport default Modal;\n\nexport const useModal = () => {\n const [showModal, setShowModal] = useState(false);\n\n const lockScroll = useCallback(() => {\n document.body.style.overflow = \"hidden\";\n }, []);\n\n const unlockScroll = useCallback(() => {\n document.body.style.overflow = \"initial\";\n }, []);\n\n const openModal = () => {\n setShowModal(true);\n lockScroll();\n };\n\n const closeModal = () => {\n setShowModal(false);\n unlockScroll();\n };\n\n return {\n showModal,\n openModal,\n closeModal,\n };\n};\n\nconst Overlay = styled.div`\n background-color: ${Colors.semantic.overlay};\n\n z-index: ${Number.MAX_SAFE_INTEGER};\n position: fixed;\n top: 0px;\n left: 0px;\n\n width: 100vw;\n height: 100vh;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n`;\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n display: flex;\n flex-direction: column;\n\n background-color: ${Colors.base.white};\n\n min-height: 100px;\n max-height: 100vh;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n position: fixed;\n bottom: 0px;\n left: 0px;\n\n width: 100%;\n height: 100%;\n\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n position: static;\n bottom: auto;\n left: auto;\n\n width: ${({ $width }) => $width};\n height: ${({ $height }) => $height};\n\n border-radius: 6px;\n }\n`;\n\nconst ModalHeader = styled.div`\n font-weight: 500;\n font-size: 18px;\n\n padding: 12px 24px;\n border-bottom: 1px solid ${Colors.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n\n height: 100%;\n padding-top: 24px;\n overflow-y: auto;\n\n > * {\n width: 100%;\n height: 100%;\n min-height: 100px;\n\n padding: 2px 24px;\n border: none;\n }\n`;\n\nconst ModalFooter = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 12px;\n\n padding: 24px;\n`;\n\ntype CancelButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CancelButton = ({ onClick }: CancelButtonProps) => (\n <Button\n text=\"Cancel\"\n onClick={onClick}\n backgroundColor={Colors.neutral.grey3}\n color={Colors.typography.blackHigh}\n />\n);\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { DetailedHTMLProps, InputHTMLAttributes } from "react";
|
|
2
|
-
import { Option } from "../foundations";
|
|
1
|
+
import { type DetailedHTMLProps, type InputHTMLAttributes } from "react";
|
|
2
|
+
import { type Option } from "../foundations";
|
|
3
3
|
export type RadioOption = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
4
4
|
type RadioButtonProps = {
|
|
5
5
|
name?: string;
|
|
@@ -1,24 +1,11 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
2
|
import { createElement as _createElement } from "react";
|
|
3
|
+
import {} from "react";
|
|
15
4
|
import styled from "styled-components";
|
|
16
5
|
import { RadioButton } from "../atoms";
|
|
6
|
+
import {} from "../foundations";
|
|
17
7
|
const RadioButtons = ({ name, options }) => {
|
|
18
|
-
return (_jsx(RadioGroup, { children: options.map((
|
|
19
|
-
var { value } = _a, props = __rest(_a, ["value"]);
|
|
20
|
-
return (_createElement(RadioButton, Object.assign({}, props, { key: `${name}-${value}`, id: `${name}-${value}`, value: value, name: name })));
|
|
21
|
-
}) }));
|
|
8
|
+
return (_jsx(RadioGroup, { children: options.map(({ value, ...props }) => (_createElement(RadioButton, { ...props, key: `${name}-${value}`, value: value, name: name }))) }));
|
|
22
9
|
};
|
|
23
10
|
export default RadioButtons;
|
|
24
11
|
const RadioGroup = styled.div `
|
|
@@ -26,3 +13,4 @@ const RadioGroup = styled.div `
|
|
|
26
13
|
align-items: center;
|
|
27
14
|
gap: 12px;
|
|
28
15
|
`;
|
|
16
|
+
//# sourceMappingURL=RadioButtons.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/molecules/RadioButtons.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAe,MAAM,gBAAgB,CAAC;AAU7C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE;IAC3D,OAAO,CACL,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACpC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI5B,CAAC","sourcesContent":["import { type DetailedHTMLProps, type InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../atoms\";\nimport { type Option } from \"../foundations\";\n\nexport type RadioOption = Option &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\ntype RadioButtonProps = {\n name?: string;\n options: RadioOption[];\n};\n\nconst RadioButtons = ({ name, options }: RadioButtonProps) => {\n return (\n <RadioGroup>\n {options.map(({ value, ...props }) => (\n <RadioButton\n {...props}\n key={`${name}-${value}`}\n value={value}\n name={name}\n />\n ))}\n </RadioGroup>\n );\n};\n\nexport default RadioButtons;\n\nconst RadioGroup = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n`;\n"]}
|
package/core/molecules/index.js
CHANGED