@grantbii/design-system 1.4.4 → 1.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/molecules/FileDrop.js +1 -1
- package/core/molecules/FileDrop.js.map +1 -1
- package/core/templates/PageLoader.d.ts +3 -1
- package/core/templates/PageLoader.js +26 -4
- package/core/templates/PageLoader.js.map +1 -1
- package/package.json +18 -18
- package/stories/templates/PageLoader.stories.d.ts +5 -2
- package/stories/templates/PageLoader.stories.js +8 -2
- package/stories/templates/PageLoader.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -14,7 +14,7 @@ const FileDrop = ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFil
|
|
|
14
14
|
accept: {
|
|
15
15
|
"application/pdf": [".pdf"],
|
|
16
16
|
"image/png": [".png"],
|
|
17
|
-
"image/jpeg": ["jpeg", ".jpg"],
|
|
17
|
+
"image/jpeg": [".jpeg", ".jpg"],
|
|
18
18
|
},
|
|
19
19
|
disabled: reachedMaxUploads,
|
|
20
20
|
noClick: reachedMaxUploads,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/molecules/FileDrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAW5B,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,WAAW,EACX,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,iBAAiB,EAC5B,SAAS,GAAG,wBAAwB,GAClB,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,IAAI,QAAQ,CAAC;IAE3D,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC;QAClD,MAAM,EAAE,WAAW;QACnB,MAAM,EAAE;YACN,iBAAiB,EAAE,CAAC,MAAM,CAAC;YAC3B,WAAW,EAAE,CAAC,MAAM,CAAC;YACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;SAC/B;QACD,QAAQ,EAAE,iBAAiB;QAC3B,OAAO,EAAE,iBAAiB;QAC1B,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,YAAY,eACX,MAAC,QAAQ,OACH,YAAY,EAAE,wBACE,iBAAiB,eAC1B,CAAC,CAAC,YAAY,aAEzB,mBAAW,aAAa,EAAE,EAAE,IAAI,EAAC,MAAM,GAAG,EAC1C,KAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAI,IACpD,EAEV,YAAY,CAAC,CAAC,CAAC,KAAC,YAAY,cAAE,YAAY,GAAgB,CAAC,CAAC,CAAC,mBAAK,EAEnE,KAAC,aAAa,IAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,GAAI,IAC1D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAGzB;;;;MAII,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;;;cAG7C,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CACnC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;;CAEnD,CAAC;AAOF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,EAAE,EAAE,CAAC,CACzE,MAAC,mBAAmB,eAClB,KAAC,KAAK,CAAC,cAAc,IACnB,MAAM,EAAC,MAAM,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,GAC3B,EACF,MAAC,eAAe,eACd,KAAC,YAAY,cACV,cAAc,QAAQ,sBAAsB,SAAS,UAAU,GACnD,EAEf,KAAC,gBAAgB,qFAEE,EAEnB,KAAC,gBAAgB,uDAAwD,IACzD,IACE,CACvB,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKrC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;oBAKT,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,eAAe,CAAC,KAAK;;;qBAG5B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,eAAe,CAAC,GAAG;;CAE9C,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAA8B;;;;;WAKpD,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CACtC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ;;oBAEnD,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,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;WAClB,MAAM,CAAC,MAAM,CAAC,IAAI;CAC5B,CAAC;AAOF,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAsB,EAAE,EAAE,CAAC,CAC3E,KAAC,iBAAiB,cACf,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACzD,KAAC,KAAK,IAEJ,IAAI,EAAE,2BAA2B,CAAC,QAAQ,CAAC,EAC3C,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EACxC,IAAI,EAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,QAAQ,IAH/C,QAAQ,CAIb,CACH,CAAC,GACgB,CACrB,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,eAAuB,EAAE,EACzB,WAAmB,iBAAiB,EACpC,YAAoB,wBAAwB,EAC5C,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEvE,MAAM,WAAW,GAAG,CAAC,aAAqB,EAAE,EAAE;QAC5C,IAAI,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,QAAQ,EAAE,CAAC;YACnD,eAAe,CAAC,GAAG,EAAE,CAAC,2BAA2B,QAAQ,QAAQ,CAAC,CAAC;QACrE,CAAC;aAAM,IAAI,eAAe,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,CAAC;YACrD,eAAe,CAAC,GAAG,EAAE,CAAC,wBAAwB,SAAS,IAAI,CAAC,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;YACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CACzB,6BAA6B,CAAC,aAAa,EAAE,aAAa,CAAC,CAC5D,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,QAAgB,EAAE,EAAE;QACtC,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO;QACL,KAAK;QACL,WAAW;QACX,UAAU;QACV,YAAY;KACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,SAAiB,EAAW,EAAE,CACpE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC;AAEvE,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAU,EAAE,CAC5D,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1B,MAAM,6BAA6B,GAAG,CACpC,QAAgB,EAChB,QAAgB,EACR,EAAE;IACV,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAClC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAClD,CAAC;IAEF,OAAO,CAAC,GAAG,YAAY,EAAE,GAAG,QAAQ,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAU,EAAE,CACpE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;AAEjD,MAAM,2BAA2B,GAAG,CAAC,QAAgB,EAAU,EAAE,CAC/D,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC","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/png\": [\".png\"],\n \"image/jpeg\": [\"jpeg\", \".jpg\"],\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 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\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/png\": [\".png\"],\n \"image/jpeg\": [\".jpeg\", \".jpg\"],\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 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\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,9 +1,11 @@
|
|
|
1
1
|
import type { LoaderSizeMarginProps } from "react-spinners/helpers/props";
|
|
2
2
|
type PageLoaderProps = {
|
|
3
3
|
isPacman?: boolean;
|
|
4
|
+
loadingText?: string;
|
|
5
|
+
tip?: string;
|
|
4
6
|
} & LoaderSizeMarginProps;
|
|
5
7
|
/**
|
|
6
8
|
* The animation to show when loading the whole page
|
|
7
9
|
*/
|
|
8
|
-
declare const PageLoader: ({ isPacman, color, size, ...restOfProps }: PageLoaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare const PageLoader: ({ loadingText, tip, isPacman, color, size, ...restOfProps }: PageLoaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
11
|
export default PageLoader;
|
|
@@ -1,18 +1,40 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { MoonLoader, PacmanLoader } from "react-spinners";
|
|
3
3
|
import styled from "styled-components";
|
|
4
|
-
import { Colors } from "../foundations";
|
|
4
|
+
import { Colors, Responsive, Typography } from "../foundations";
|
|
5
5
|
/**
|
|
6
6
|
* The animation to show when loading the whole page
|
|
7
7
|
*/
|
|
8
|
-
const PageLoader = ({ isPacman = false, color = Colors.accent.blue1, size, ...restOfProps }) => (
|
|
8
|
+
const PageLoader = ({ loadingText, tip, isPacman = false, color = Colors.accent.blue1, size, ...restOfProps }) => (_jsxs(Background, { children: [isPacman ? (_jsx(PacmanLoader, { color: color, size: size ? size : 20, ...restOfProps })) : (_jsx(MoonLoader, { color: color, size: size ? size : 32, ...restOfProps })), loadingText || tip ? (_jsxs(Text, { children: [loadingText ? _jsx(LoadingText, { children: loadingText }) : _jsx(_Fragment, {}), tip ? _jsx(Tip, { children: tip }) : _jsx(_Fragment, {})] })) : (_jsx(_Fragment, {}))] }));
|
|
9
9
|
export default PageLoader;
|
|
10
10
|
const Background = styled.div `
|
|
11
11
|
display: flex;
|
|
12
|
-
|
|
12
|
+
flex-direction: column;
|
|
13
13
|
justify-content: center;
|
|
14
|
+
align-items: center;
|
|
15
|
+
gap: 20px;
|
|
14
16
|
|
|
15
17
|
width: 100%;
|
|
16
18
|
height: 100%;
|
|
17
19
|
`;
|
|
20
|
+
const Text = styled.div `
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
align-items: center;
|
|
24
|
+
gap: 8px;
|
|
25
|
+
`;
|
|
26
|
+
const LoadingText = styled.p `
|
|
27
|
+
font-weight: 500;
|
|
28
|
+
`;
|
|
29
|
+
const Tip = styled.p `
|
|
30
|
+
color: ${Colors.typography.blackMedium};
|
|
31
|
+
|
|
32
|
+
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
33
|
+
font-size: ${Typography.HELPER_FONT_SIZES.small};
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
37
|
+
font-size: ${Typography.HELPER_FONT_SIZES.big};
|
|
38
|
+
}
|
|
39
|
+
`;
|
|
18
40
|
//# sourceMappingURL=PageLoader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/templates/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/templates/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQhE;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,GAAG,EACH,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAC3B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,MAAC,UAAU,eACR,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,EAEA,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,MAAC,IAAI,eACF,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,WAAW,GAAe,CAAC,CAAC,CAAC,mBAAK,EAC9D,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,GAAG,GAAO,CAAC,CAAC,CAAC,mBAAK,IAC1B,CACR,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS5B,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE3B,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAA;WACT,MAAM,CAAC,UAAU,CAAC,WAAW;;oBAEpB,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","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport type { LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Colors, Responsive, Typography } from \"../foundations\";\n\ntype PageLoaderProps = {\n isPacman?: boolean;\n loadingText?: string;\n tip?: string;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n loadingText,\n tip,\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\n {loadingText || tip ? (\n <Text>\n {loadingText ? <LoadingText>{loadingText}</LoadingText> : <></>}\n {tip ? <Tip>{tip}</Tip> : <></>}\n </Text>\n ) : (\n <></>\n )}\n </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n\n width: 100%;\n height: 100%;\n`;\n\nconst Text = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n`;\n\nconst LoadingText = styled.p`\n font-weight: 500;\n`;\n\nconst Tip = styled.p`\n color: ${Colors.typography.blackMedium};\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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.6",
|
|
4
4
|
"description": "Grantbii's Design System",
|
|
5
5
|
"homepage": "https://design.grantbii.com",
|
|
6
6
|
"repository": {
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
"build-storybook": "storybook build"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@grantbii/ui-core": "1.1.
|
|
22
|
+
"@grantbii/ui-core": "1.1.4",
|
|
23
23
|
"@phosphor-icons/react": "2.1.10",
|
|
24
|
-
"country-flag-icons": "1.5.
|
|
25
|
-
"next": "15.5.
|
|
24
|
+
"country-flag-icons": "1.5.21",
|
|
25
|
+
"next": "15.5.4",
|
|
26
26
|
"react": "19.1.1",
|
|
27
27
|
"react-dom": "19.1.1",
|
|
28
28
|
"react-dropzone": "14.3.8",
|
|
@@ -31,26 +31,26 @@
|
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@chromatic-com/storybook": "4.1.1",
|
|
34
|
-
"@eslint/js": "9.
|
|
35
|
-
"@next/eslint-plugin-next": "15.5.
|
|
36
|
-
"@storybook/addon-a11y": "9.1.
|
|
37
|
-
"@storybook/addon-docs": "9.1.
|
|
38
|
-
"@storybook/addon-onboarding": "9.1.
|
|
39
|
-
"@storybook/addon-vitest": "9.1.
|
|
40
|
-
"@storybook/nextjs-vite": "9.1.
|
|
34
|
+
"@eslint/js": "9.36.0",
|
|
35
|
+
"@next/eslint-plugin-next": "15.5.4",
|
|
36
|
+
"@storybook/addon-a11y": "9.1.8",
|
|
37
|
+
"@storybook/addon-docs": "9.1.8",
|
|
38
|
+
"@storybook/addon-onboarding": "9.1.8",
|
|
39
|
+
"@storybook/addon-vitest": "9.1.8",
|
|
40
|
+
"@storybook/nextjs-vite": "9.1.8",
|
|
41
41
|
"@types/node": "22.18.0",
|
|
42
|
-
"@types/react": "19.1.
|
|
42
|
+
"@types/react": "19.1.13",
|
|
43
43
|
"@types/react-dom": "19.1.9",
|
|
44
44
|
"@vitest/browser": "3.2.4",
|
|
45
45
|
"@vitest/coverage-v8": "3.2.4",
|
|
46
|
-
"eslint": "9.
|
|
47
|
-
"eslint-config-next": "15.5.
|
|
48
|
-
"eslint-plugin-storybook": "9.1.
|
|
46
|
+
"eslint": "9.36.0",
|
|
47
|
+
"eslint-config-next": "15.5.4",
|
|
48
|
+
"eslint-plugin-storybook": "9.1.8",
|
|
49
49
|
"husky": "9.1.7",
|
|
50
|
-
"lint-staged": "16.
|
|
51
|
-
"playwright": "1.55.
|
|
50
|
+
"lint-staged": "16.2.0",
|
|
51
|
+
"playwright": "1.55.1",
|
|
52
52
|
"prettier": "3.6.2",
|
|
53
|
-
"storybook": "9.1.
|
|
53
|
+
"storybook": "9.1.8",
|
|
54
54
|
"typescript": "5.9.2",
|
|
55
55
|
"vitest": "3.2.4"
|
|
56
56
|
},
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
|
|
2
2
|
type PageLoaderExampleProps = {
|
|
3
3
|
isPacman?: boolean;
|
|
4
|
+
loadingText?: string;
|
|
5
|
+
tip?: string;
|
|
4
6
|
};
|
|
5
|
-
declare const PageLoaderExample: (
|
|
7
|
+
declare const PageLoaderExample: (props: PageLoaderExampleProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
declare const meta: Meta<typeof PageLoaderExample>;
|
|
7
9
|
export default meta;
|
|
8
10
|
type Story = StoryObj<typeof meta>;
|
|
9
|
-
export declare const
|
|
11
|
+
export declare const GrantInsights: Story;
|
|
12
|
+
export declare const GrantbiiDashboard: Story;
|
|
10
13
|
export declare const AdminConsole: Story;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { PageLoader } from "@/.";
|
|
3
3
|
import styled from "styled-components";
|
|
4
|
-
const PageLoaderExample = (
|
|
4
|
+
const PageLoaderExample = (props) => (_jsx(BaseExample, { children: _jsx(PageLoader, { ...props }) }));
|
|
5
5
|
const BaseExample = styled.div `
|
|
6
6
|
width: 100vw;
|
|
7
7
|
height: 100vh;
|
|
@@ -15,9 +15,15 @@ const meta = {
|
|
|
15
15
|
},
|
|
16
16
|
};
|
|
17
17
|
export default meta;
|
|
18
|
-
export const
|
|
18
|
+
export const GrantInsights = {
|
|
19
19
|
args: {},
|
|
20
20
|
};
|
|
21
|
+
export const GrantbiiDashboard = {
|
|
22
|
+
args: {
|
|
23
|
+
loadingText: "Loading...",
|
|
24
|
+
tip: "Pro tip: go grab a cup of coffee while waiting for the page to load",
|
|
25
|
+
},
|
|
26
|
+
};
|
|
21
27
|
export const AdminConsole = {
|
|
22
28
|
args: { isPacman: true },
|
|
23
29
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLoader.stories.js","sourceRoot":"","sources":["../../../stories/templates/PageLoader.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"PageLoader.stories.js","sourceRoot":"","sources":["../../../stories/templates/PageLoader.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,CAC3D,KAAC,WAAW,cACV,KAAC,UAAU,OAAK,KAAK,GAAI,GACb,CACf,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7B,CAAC;AAEF,MAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,WAAW,EAAE,YAAY;QACzB,GAAG,EAAE,qEAAqE;KAC3E;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;CACzB,CAAC","sourcesContent":["import { PageLoader } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport styled from \"styled-components\";\n\ntype PageLoaderExampleProps = {\n isPacman?: boolean;\n loadingText?: string;\n tip?: string;\n};\n\nconst PageLoaderExample = (props: PageLoaderExampleProps) => (\n <BaseExample>\n <PageLoader {...props} />\n </BaseExample>\n);\n\nconst BaseExample = styled.div`\n width: 100vw;\n height: 100vh;\n`;\n\nconst meta: Meta<typeof PageLoaderExample> = {\n title: \"Templates/Page Loader\",\n component: PageLoaderExample,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"fullscreen\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const GrantInsights: Story = {\n args: {},\n};\n\nexport const GrantbiiDashboard: Story = {\n args: {\n loadingText: \"Loading...\",\n tip: \"Pro tip: go grab a cup of coffee while waiting for the page to load\",\n },\n};\n\nexport const AdminConsole: Story = {\n args: { isPacman: true },\n};\n"]}
|