@grantbii/design-system 1.4.9 → 1.4.11
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.js +1 -1
- package/core/atoms/Badge.js.map +1 -1
- package/core/atoms/Dropdown.js +1 -1
- package/core/atoms/Dropdown.js.map +1 -1
- package/core/atoms/Input.js +1 -1
- package/core/atoms/Input.js.map +1 -1
- package/core/atoms/Textarea.js +1 -1
- package/core/atoms/Textarea.js.map +1 -1
- package/core/atoms/shared.js +1 -1
- package/core/atoms/shared.js.map +1 -1
- package/core/molecules/FileDrop.js +1 -1
- package/core/molecules/FileDrop.js.map +1 -1
- package/core/molecules/Modal.d.ts +1 -1
- package/core/molecules/Modal.js +5 -5
- package/core/molecules/Modal.js.map +1 -1
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/core/atoms/Badge.js
CHANGED
|
@@ -10,7 +10,7 @@ const BaseBadge = styled.div `
|
|
|
10
10
|
gap: 10px;
|
|
11
11
|
|
|
12
12
|
padding: 5px 16px;
|
|
13
|
-
border-radius:
|
|
13
|
+
border-radius: 120px;
|
|
14
14
|
|
|
15
15
|
color: ${({ $color = Colors.typography.blackHigh }) => $color};
|
|
16
16
|
background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) => $backgroundColor};
|
package/core/atoms/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AACA,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,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,wBAAmB,eAAe,YAAU,KAAK,aACzD,MAAC,YAAY,oBAAe,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACvE,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,KAAK,GAAa,IACjB,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, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\nexport type BadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<Icons.IconProps>;\n iconSize?: string | number;\n iconWeight?: Icons.IconWeight;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n labelWidthPixels?: number;\n backgroundColor?: string;\n color?: string;\n};\n\nconst Badge = ({\n label,\n Icon,\n iconSize = 20,\n iconWeight = \"regular\",\n onClickClose,\n labelWidthPixels,\n backgroundColor,\n color,\n}: BadgeProps) => (\n <BaseBadge $backgroundColor={backgroundColor} $color={color}>\n <BadgeContent $isCloseable={!!onClickClose} $widthPixels={labelWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={iconSize} weight={iconWeight} />\n </IconContainer>\n ) : (\n <></>\n )}\n <BadgeText>{label}</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:
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AACA,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,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,wBAAmB,eAAe,YAAU,KAAK,aACzD,MAAC,YAAY,oBAAe,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACvE,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,KAAK,GAAa,IACjB,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, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\nexport type BadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<Icons.IconProps>;\n iconSize?: string | number;\n iconWeight?: Icons.IconWeight;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n labelWidthPixels?: number;\n backgroundColor?: string;\n color?: string;\n};\n\nconst Badge = ({\n label,\n Icon,\n iconSize = 20,\n iconWeight = \"regular\",\n onClickClose,\n labelWidthPixels,\n backgroundColor,\n color,\n}: BadgeProps) => (\n <BaseBadge $backgroundColor={backgroundColor} $color={color}>\n <BadgeContent $isCloseable={!!onClickClose} $widthPixels={labelWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={iconSize} weight={iconWeight} />\n </IconContainer>\n ) : (\n <></>\n )}\n <BadgeText>{label}</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: 120px;\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/Dropdown.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/atoms/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAU3C,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,WAAW,EAAiB,EAAE,EAAE,CAAC,CAC7E,MAAC,MAAM,OAAK,WAAW,aACrB,iBAAQ,MAAM,QAAC,QAAQ,QAAC,KAAK,EAAC,EAAE,YAC7B,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAC3B,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,CACV,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;sBAEN,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC","sourcesContent":["import type { DetailedHTMLProps, SelectHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, type Option } from \"../foundations\";\nimport { InputValidation } from \"./shared\";\n\nexport type DropdownProps = {\n options: Option[];\n defaultLabel?: string;\n} & DetailedHTMLProps<\n SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n>;\n\nconst Dropdown = ({ options, defaultLabel, ...selectProps }: DropdownProps) => (\n <Select {...selectProps}>\n <option hidden disabled value=\"\">\n {defaultLabel ? defaultLabel : \"-\"}\n </option>\n\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </Select>\n);\n\nexport default Dropdown;\n\nconst Select = styled.select`\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius:
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/atoms/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAU3C,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,WAAW,EAAiB,EAAE,EAAE,CAAC,CAC7E,MAAC,MAAM,OAAK,WAAW,aACrB,iBAAQ,MAAM,QAAC,QAAQ,QAAC,KAAK,EAAC,EAAE,YAC7B,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAC3B,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,CACV,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;sBAEN,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC","sourcesContent":["import type { DetailedHTMLProps, SelectHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, type Option } from \"../foundations\";\nimport { InputValidation } from \"./shared\";\n\nexport type DropdownProps = {\n options: Option[];\n defaultLabel?: string;\n} & DetailedHTMLProps<\n SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n>;\n\nconst Dropdown = ({ options, defaultLabel, ...selectProps }: DropdownProps) => (\n <Select {...selectProps}>\n <option hidden disabled value=\"\">\n {defaultLabel ? defaultLabel : \"-\"}\n </option>\n\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </Select>\n);\n\nexport default Dropdown;\n\nconst Select = styled.select`\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n"]}
|
package/core/atoms/Input.js
CHANGED
package/core/atoms/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/atoms/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAO3C,MAAM,KAAK,GAAG,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE,CAAC,CAC5E,8BACE,KAAC,SAAS,OAAK,UAAU,EAAE,IAAI,EAAE,UAAU,GAAI,EAE9C,UAAU,IAAI,eAAe,CAAC,CAAC,CAAC,CAC/B,KAAC,QAAQ,IAAC,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,GAAI,CACvD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA;;sBAER,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAOF,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAiB,EAAE,EAAE,CAAC,CACnD,mBAAU,EAAE,EAAE,EAAE,YACb,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,GACO,CACZ,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, type Option } from \"../foundations\";\nimport { InputValidation } from \"./shared\";\n\ntype InputProps = {\n datalistId?: string;\n datalistOptions?: Option[];\n} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Input = ({ datalistOptions, datalistId, ...inputProps }: InputProps) => (\n <>\n <BaseInput {...inputProps} list={datalistId} />\n\n {datalistId && datalistOptions ? (\n <Datalist id={datalistId} options={datalistOptions} />\n ) : (\n <></>\n )}\n </>\n);\n\nexport default Input;\n\nconst BaseInput = styled.input`\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius:
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/atoms/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAO3C,MAAM,KAAK,GAAG,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE,CAAC,CAC5E,8BACE,KAAC,SAAS,OAAK,UAAU,EAAE,IAAI,EAAE,UAAU,GAAI,EAE9C,UAAU,IAAI,eAAe,CAAC,CAAC,CAAC,CAC/B,KAAC,QAAQ,IAAC,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,GAAI,CACvD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA;;sBAER,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAOF,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAiB,EAAE,EAAE,CAAC,CACnD,mBAAU,EAAE,EAAE,EAAE,YACb,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,GACO,CACZ,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, type Option } from \"../foundations\";\nimport { InputValidation } from \"./shared\";\n\ntype InputProps = {\n datalistId?: string;\n datalistOptions?: Option[];\n} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Input = ({ datalistOptions, datalistId, ...inputProps }: InputProps) => (\n <>\n <BaseInput {...inputProps} list={datalistId} />\n\n {datalistId && datalistOptions ? (\n <Datalist id={datalistId} options={datalistOptions} />\n ) : (\n <></>\n )}\n </>\n);\n\nexport default Input;\n\nconst BaseInput = styled.input`\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\ntype DatalistProps = {\n id: string;\n options: Option[];\n};\n\nconst Datalist = ({ id, options }: DatalistProps) => (\n <datalist id={id}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </datalist>\n);\n"]}
|
package/core/atoms/Textarea.js
CHANGED
|
@@ -1 +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;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAA4B;YAChD,CAAC,EAAE,aAAa,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,aAAa;;;sBAGhC,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../foundations\";\nimport { InputValidation } from \"./shared\";\n\nconst Textarea = styled.textarea<{ $heightPixels?: number }>`\n height: ${({ $heightPixels = 100 }) => $heightPixels}px;\n\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius:
|
|
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;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAA4B;YAChD,CAAC,EAAE,aAAa,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,aAAa;;;sBAGhC,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../foundations\";\nimport { InputValidation } from \"./shared\";\n\nconst Textarea = styled.textarea<{ $heightPixels?: number }>`\n height: ${({ $heightPixels = 100 }) => $heightPixels}px;\n\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\nexport default Textarea;\n"]}
|
package/core/atoms/shared.js
CHANGED
|
@@ -19,7 +19,7 @@ export const BaseButton = styled.div `
|
|
|
19
19
|
background-color: ${({ $underline = false, $backgroundColor = Colors.main.grantbiiBlue, }) => ($underline ? "transparent" : $backgroundColor)};
|
|
20
20
|
|
|
21
21
|
border: 1px solid ${({ $borderColor = "transparent" }) => $borderColor};
|
|
22
|
-
border-radius:
|
|
22
|
+
border-radius: 8px;
|
|
23
23
|
`;
|
|
24
24
|
export const LabelledInput = styled.div `
|
|
25
25
|
display: flex;
|
package/core/atoms/shared.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../core/atoms/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAMlC;;;;;;WAMS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;;;;;;qBAOrB,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;;sBAEjC,CAAC,EAAE,YAAY,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC,YAAY;;CAEvE,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;wBAEV,MAAM,CAAC,OAAO,CAAC,KAAK;wBACpB,MAAM,CAAC,OAAO,CAAC,KAAK;;;;;wBAKpB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,OAAO,CAAC,KAAK;;;;;wBAKpB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,MAAM,CAAC,KAAK;yBAClB,MAAM,CAAC,MAAM,CAAC,KAAK;;;;wBAIpB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;;;;;wBAKlB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;yBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;;CAE1C,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IACpE,iBAAiB,EAAE,KAAK,CAAC,WAAW;IACpC,WAAW,EAAE,KAAK,CAAC,WAAW;IAC9B,YAAY,EAAE,KAAK,CAAC,WAAW;CAChC,CAAC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colors, Icons } from \"../foundations\";\n\nexport const BaseButton = styled.div<{\n $underline?: boolean;\n $backgroundColor?: string;\n $borderColor?: 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\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 border: 1px solid ${({ $borderColor = \"transparent\" }) => $borderColor};\n border-radius:
|
|
1
|
+
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../core/atoms/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAMlC;;;;;;WAMS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;;;;;;qBAOrB,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;;sBAEjC,CAAC,EAAE,YAAY,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC,YAAY;;CAEvE,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;wBAEV,MAAM,CAAC,OAAO,CAAC,KAAK;wBACpB,MAAM,CAAC,OAAO,CAAC,KAAK;;;;;wBAKpB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,OAAO,CAAC,KAAK;;;;;wBAKpB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,MAAM,CAAC,KAAK;yBAClB,MAAM,CAAC,MAAM,CAAC,KAAK;;;;wBAIpB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;;;;;wBAKlB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;yBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;;CAE1C,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IACpE,iBAAiB,EAAE,KAAK,CAAC,WAAW;IACpC,WAAW,EAAE,KAAK,CAAC,WAAW;IAC9B,YAAY,EAAE,KAAK,CAAC,WAAW;CAChC,CAAC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colors, Icons } from \"../foundations\";\n\nexport const BaseButton = styled.div<{\n $underline?: boolean;\n $backgroundColor?: string;\n $borderColor?: 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\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 border: 1px solid ${({ $borderColor = \"transparent\" }) => $borderColor};\n border-radius: 8px;\n`;\n\nexport const LabelledInput = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport const InputValidation = css`\n &:disabled {\n background-color: ${Colors.neutral.grey4};\n border: 1px solid ${Colors.neutral.grey3};\n outline: none;\n }\n\n &:valid {\n background-color: ${Colors.base.white};\n border: 1px solid ${Colors.neutral.grey3};\n outline: none;\n }\n\n &:valid&:focus {\n background-color: ${Colors.base.white};\n border: 1px solid ${Colors.accent.blue1};\n outline: 1px solid ${Colors.accent.blue1};\n }\n\n &:invalid {\n background-color: ${Colors.base.white};\n border: 1px solid ${Colors.accent.red1};\n outline: none;\n }\n\n &:invalid&:focus {\n background-color: ${Colors.base.white};\n border: 1px solid ${Colors.accent.red1};\n outline: 1px solid ${Colors.accent.red1};\n }\n`;\n\nexport const FILE_TYPE_ICON_MAP: { [mimeType: string]: Icons.Icon } = {\n \"application/pdf\": Icons.FilePdfIcon,\n \"image/png\": Icons.FilePngIcon,\n \"image/jpeg\": Icons.FileJpgIcon,\n};\n"]}
|
|
@@ -1 +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\";\nimport { FILE_TYPE_ICON_MAP } from \"../atoms/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: 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 (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 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 label={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\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
|
+
{"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\";\nimport { FILE_TYPE_ICON_MAP } from \"../atoms/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 }) =>\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 (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 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 label={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\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"]}
|
|
@@ -5,7 +5,7 @@ type ModalProps = {
|
|
|
5
5
|
footer?: ReactNode;
|
|
6
6
|
width?: string;
|
|
7
7
|
height?: string;
|
|
8
|
-
onClickClose
|
|
8
|
+
onClickClose?: MouseEventHandler<HTMLButtonElement>;
|
|
9
9
|
closeText?: string;
|
|
10
10
|
};
|
|
11
11
|
declare const Modal: ({ header, content, footer, width, height, onClickClose, closeText, }: ModalProps) => import("react").ReactPortal;
|
package/core/molecules/Modal.js
CHANGED
|
@@ -4,7 +4,7 @@ import styled from "styled-components";
|
|
|
4
4
|
import { Button } from "../atoms";
|
|
5
5
|
import { Colors, Responsive } from "../foundations";
|
|
6
6
|
import { createPortal } from "react-dom";
|
|
7
|
-
const Modal = ({ header, content, footer, width, height, onClickClose, closeText, }) => createPortal(_jsx(Overlay, { children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [_jsx(CloseButton, { onClick: onClickClose, closeText: closeText }), footer ? footer : _jsx(_Fragment, {})] })] }) }), document.body);
|
|
7
|
+
const Modal = ({ header, content, footer, width, height, onClickClose, closeText, }) => createPortal(_jsx(Overlay, { children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [onClickClose ? (_jsx(CloseButton, { onClick: onClickClose, closeText: closeText })) : (_jsx(_Fragment, {})), footer ? footer : _jsx(_Fragment, {})] })] }) }), document.body);
|
|
8
8
|
export default Modal;
|
|
9
9
|
export const useModal = () => {
|
|
10
10
|
const [showModal, setShowModal] = useState(false);
|
|
@@ -72,14 +72,14 @@ const ModalWindow = styled.div `
|
|
|
72
72
|
width: ${({ $width }) => $width};
|
|
73
73
|
height: ${({ $height }) => $height};
|
|
74
74
|
|
|
75
|
-
border-radius:
|
|
75
|
+
border-radius: 8px;
|
|
76
76
|
}
|
|
77
77
|
`;
|
|
78
78
|
const ModalHeader = styled.div `
|
|
79
79
|
font-weight: 500;
|
|
80
80
|
font-size: 18px;
|
|
81
81
|
|
|
82
|
-
padding: 12px
|
|
82
|
+
padding: 12px 20px;
|
|
83
83
|
border-bottom: 1px solid ${Colors.neutral.grey3};
|
|
84
84
|
`;
|
|
85
85
|
const ModalBody = styled.div `
|
|
@@ -95,7 +95,7 @@ const ModalBody = styled.div `
|
|
|
95
95
|
height: 100%;
|
|
96
96
|
min-height: 100px;
|
|
97
97
|
|
|
98
|
-
padding: 2px
|
|
98
|
+
padding: 2px 20px;
|
|
99
99
|
border: none;
|
|
100
100
|
}
|
|
101
101
|
`;
|
|
@@ -104,7 +104,7 @@ const ModalFooter = styled.div `
|
|
|
104
104
|
justify-content: space-between;
|
|
105
105
|
gap: 12px;
|
|
106
106
|
|
|
107
|
-
padding: 20px
|
|
107
|
+
padding: 16px 20px;
|
|
108
108
|
`;
|
|
109
109
|
const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { text: closeText, onClick: onClick, backgroundColor: Colors.neutral.grey3, color: Colors.typography.blackHigh }));
|
|
110
110
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/molecules/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,WAAW,EACX,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAYzC,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,YAAY,EACZ,SAAS,GACE,EAAE,EAAE,CACf,YAAY,CACV,KAAC,OAAO,cACN,MAAC,WAAW,cAAS,KAAK,aAAW,MAAM,aACxC,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,MAAM,GAAe,CAAC,CAAC,CAAC,mBAAK,EAErD,KAAC,SAAS,cAAE,OAAO,GAAa,EAEhC,MAAC,WAAW,
|
|
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\";\nimport { createPortal } from \"react-dom\";\n\ntype ModalProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n closeText?: string;\n};\n\nconst Modal = ({\n header,\n content,\n footer,\n width,\n height,\n onClickClose,\n closeText,\n}: ModalProps) =>\n createPortal(\n <Overlay>\n <ModalWindow $width={width} $height={height}>\n {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n <ModalBody>{content}</ModalBody>\n\n <ModalFooter>\n {onClickClose ? (\n <CloseButton onClick={onClickClose} closeText={closeText} />\n ) : (\n <></>\n )}\n {footer ? footer : <></>}\n </ModalFooter>\n </ModalWindow>\n </Overlay>,\n document.body,\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: 9999;\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: 8px;\n }\n`;\n\nconst ModalHeader = styled.div`\n font-weight: 500;\n font-size: 18px;\n\n padding: 12px 20px;\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: 12px;\n overflow-y: auto;\n\n > * {\n width: 100%;\n height: 100%;\n min-height: 100px;\n\n padding: 2px 20px;\n border: none;\n }\n`;\n\nconst ModalFooter = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 12px;\n\n padding: 16px 20px;\n`;\n\ntype CloseButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n closeText?: string;\n};\n\nconst CloseButton = ({ onClick, closeText = \"Close\" }: CloseButtonProps) => (\n <Button\n text={closeText}\n onClick={onClick}\n backgroundColor={Colors.neutral.grey3}\n color={Colors.typography.blackHigh}\n />\n);\n"]}
|