@grantbii/design-system 1.0.44 → 1.0.46

package/core/atoms/Badge.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Colors, Icons } from "../foundations";
-const Badge = ({ text, Icon, iconSize = 20, iconWeight = "regular", onClickClose, textWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [Icon ? _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) : _jsx(_Fragment, {}), _jsx(BadgeText, { "$widthPixels": textWidthPixels, children: text }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
+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, {}))] }));
 export default Badge;
 const BaseBadge = styled.div `
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 10px;
 
   padding: 5px 16px;
@@ -14,8 +15,23 @@ const BaseBadge = styled.div `
   color: ${({ $color = Colors.typography.blackHigh }) => $color};
   background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) => $backgroundColor};
 `;
-const BadgeText = styled.p `
+const BadgeContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
   width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : "auto")};
+  max-width: ${({ $isCloseable }) => $isCloseable ? "calc(100% - 20px)" : "auto"};
+`;
+const IconContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  width: ${({ $iconSize = "auto" }) => $iconSize};
+  min-width: ${({ $iconSize = "auto" }) => $iconSize};
+  max-width: ${({ $iconSize = "auto" }) => $iconSize};
+`;
+const BadgeText = styled.p `
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -25,4 +41,7 @@ const BadgeText = styled.p `
 `;
 const Button = styled.button `
   display: flex;
+  flex-direction: column;
+
+  min-width: 12px;
 `;

package/core/molecules/FileDrop.d.ts

@@ -0,0 +1,16 @@
+type FileDropzoneProps = {
+    uploadedFiles: File[];
+    uploadFiles: (acceptedFiles: File[]) => void;
+    removeFile: (fileName: string) => void;
+    errorMessage?: string;
+    maxFiles?: number;
+    maxSizeMB?: number;
+};
+declare const FileDrop: ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFiles, maxSizeMB, }: FileDropzoneProps) => import("react/jsx-runtime").JSX.Element;
+export default FileDrop;
+export declare const useFileDrop: (initialFiles?: File[], maxFiles?: number, maxSizeMB?: number) => {
+    files: File[];
+    uploadFiles: (acceptedFiles: File[]) => void;
+    removeFile: (fileName: string) => void;
+    errorMessage: string | undefined;
+};

package/core/molecules/FileDrop.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useDropzone } from "react-dropzone";
+import styled from "styled-components";
+import { Badge } from "../atoms";
+import { Colors, Icons } from "../foundations";
+const DEFAULT_MAX_FILE_SIZE_MB = 5;
+const DEFAULT_MAX_FILES = 5;
+const FileDrop = ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFiles = DEFAULT_MAX_FILES, maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB, }) => {
+    const reachedMaxUploads = uploadedFiles.length >= maxFiles;
+    const { getInputProps, getRootProps } = useDropzone({
+        onDrop: uploadFiles,
+        accept: { "application/pdf": [".pdf"] },
+        disabled: reachedMaxUploads,
+        noClick: reachedMaxUploads,
+        noDrag: reachedMaxUploads,
+        multiple: true,
+    });
+    return (_jsxs(BaseFileDrop, { children: [_jsxs(Dropzone, Object.assign({}, getRootProps(), { "$reachedMaxUploads": reachedMaxUploads, "$hasError": !!errorMessage, children: [_jsx("input", Object.assign({}, getInputProps(), { type: "file" })), _jsx(DropzoneContent, { maxFiles: maxFiles, maxSizeMB: maxSizeMB })] })), errorMessage ? _jsx(ErrorMessage, { children: errorMessage }) : _jsx(_Fragment, {}), _jsx(UploadedFiles, { uploadedFiles: uploadedFiles, removeFile: removeFile })] }));
+};
+export default FileDrop;
+const BaseFileDrop = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+const Dropzone = styled.div `
+  padding: 40px;
+  border-radius: 6px;
+  border: 1px solid
+    ${({ $hasError }) => $hasError ? Colors.accent.red1 : Colors.neutral.grey3};
+
+  &:hover {
+    cursor: ${({ $reachedMaxUploads }) => $reachedMaxUploads ? "not-allowed" : "pointer"};
+  }
+`;
+const DropzoneContent = ({ maxFiles, maxSizeMB }) => (_jsxs(BaseDropzoneContent, { children: [_jsx(Icons.FileDashedIcon, { weight: "thin", size: 48, color: Colors.neutral.grey1 }), _jsxs(DropzoneText, { children: [_jsx(DropzoneTitle, { children: `Drop up to ${maxFiles} files here ( ${maxSizeMB}MB each)` }), _jsx(DropzoneHighlightedSubtitle, { children: DROPZONE_BROWSE_TEXT }), _jsx(DropzoneSubtitle, { children: FILE_FORMAT_TEXT })] })] }));
+const DROPZONE_BROWSE_TEXT = "or click to browse with your file explorer";
+const FILE_FORMAT_TEXT = "Accepted file formats: .pdf (Coming soon: .doc, .ppt, .csv)";
+const BaseDropzoneContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: center;
+`;
+const DropzoneText = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const DropzoneTitle = styled.h3 `
+  font-weight: 500;
+  font-size: 14px;
+  text-align: center;
+`;
+const DropzoneHighlightedSubtitle = styled.p `
+  font-weight: 400;
+  font-size: 12px;
+  text-align: center;
+  color: ${Colors.accent.yellow1};
+`;
+const DropzoneSubtitle = styled.p `
+  font-weight: 400;
+  font-size: 12px;
+  text-align: center;
+  color: ${Colors.typography.blackLow};
+`;
+const ErrorMessage = styled.p `
+  color: ${Colors.accent.red1};
+`;
+const UploadedFiles = ({ uploadedFiles, removeFile }) => (_jsx(BaseUploadedFiles, { children: uploadedFiles.map(({ name: fileName, type: fileType }) => {
+        var _a;
+        return (_jsx(Badge, { text: getFileNameWithoutExtension(fileName), onClickClose: () => removeFile(fileName), Icon: (_a = FILE_TYPE_ICON_MAP[fileType]) !== null && _a !== void 0 ? _a : Icons.FileIcon }, fileName));
+    }) }));
+const BaseUploadedFiles = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const FILE_TYPE_ICON_MAP = {
+    "application/pdf": Icons.FilePdfIcon,
+};
+export const useFileDrop = (initialFiles = [], maxFiles = DEFAULT_MAX_FILES, maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB) => {
+    const [files, setFiles] = useState(() => initialFiles);
+    const [errorMessage, setErrorMessage] = useState();
+    const uploadFiles = (acceptedFiles) => {
+        if (files.length + acceptedFiles.length > maxFiles) {
+            setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);
+        }
+        else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {
+            setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);
+        }
+        else {
+            setErrorMessage(() => undefined);
+            setFiles((previousFiles) => combineFilesWithoutDuplicates(previousFiles, acceptedFiles));
+        }
+    };
+    const removeFile = (fileName) => {
+        setErrorMessage(() => undefined);
+        setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));
+    };
+    return {
+        files,
+        uploadFiles,
+        removeFile,
+        errorMessage,
+    };
+};
+const anyFileTooLarge = (files, maxSizeMB) => files.some((file) => {
+    console.log("file size:", file.size);
+    return file.size > convertMegabytesToBytes(maxSizeMB);
+});
+const convertMegabytesToBytes = (megabytes) => megabytes * 1024 * 1024;
+const combineFilesWithoutDuplicates = (oldFiles, newFiles) => {
+    const newFileNames = newFiles.map((file) => file.name);
+    const keptOldFiles = oldFiles.filter((oldFile) => !newFileNames.includes(oldFile.name));
+    return [...keptOldFiles, ...newFiles];
+};
+const filterFilesByName = (files, fileName) => files.filter((file) => file.name !== fileName);
+const getFileNameWithoutExtension = (fileName) => fileName.substring(0, fileName.lastIndexOf("."));

package/core/molecules/RadioButtons.d.ts

@@ -2,7 +2,7 @@ import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 import { Option } from "../foundations";
 export type RadioOption = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 type RadioButtonProps = {
-    name: string;
+    name?: string;
     options: RadioOption[];
 };
 declare const RadioButtons: ({ name, options }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

package/core/molecules/index.d.ts

@@ -1,2 +1,3 @@
+export { default as FileDrop, useFileDrop } from "./FileDrop";
 export { default as Modal, useModal } from "./Modal";
 export { default as RadioButtons, type RadioOption } from "./RadioButtons";

package/core/molecules/index.js

@@ -1,2 +1,3 @@
+export { default as FileDrop, useFileDrop } from "./FileDrop";
 export { default as Modal, useModal } from "./Modal";
 export { default as RadioButtons } from "./RadioButtons";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -23,6 +23,7 @@
     "next": "^15.3.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-dropzone": "^14.3.8",
     "styled-components": "^6.1.19"
   },
   "devDependencies": {

package/stories/molecules/FileDrop.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+declare const FileDropExample: () => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof FileDropExample>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Example: Story;

package/stories/molecules/FileDrop.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileDrop, useFileDrop } from "@/.";
+import styled from "styled-components";
+const FileDropExample = () => {
+    const { files, uploadFiles, removeFile, errorMessage } = useFileDrop();
+    return (_jsx(Container, { children: _jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile, errorMessage: errorMessage }) }));
+};
+const Container = styled.div `
+  width: 400px;
+`;
+const meta = {
+    title: "Molecules/File Drop",
+    component: FileDropExample,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const Example = {
+    args: {},
+};

package/stories/molecules/RadioButtons.stories.d.ts

@@ -1,7 +1,10 @@
-import { RadioButtons } from "@/core/molecules";
 import { Meta, StoryObj } from "@storybook/nextjs-vite";
-declare const meta: Meta<typeof RadioButtons>;
+type ExampleProps = {
+    controlled: boolean;
+};
+declare const RadioButtonsExample: ({ controlled }: ExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof RadioButtonsExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const NoneSelectedByDefault: Story;
-export declare const OneSelectedByDefault: Story;
+export declare const Uncontrolled: Story;
+export declare const Controlled: Story;

package/stories/molecules/RadioButtons.stories.js

@@ -1,45 +1,59 @@
-import { RadioButtons } from "@/core/molecules";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioButtons } from "@/.";
+import { useState } from "react";
+const SINGAPORE = "Singapore";
+const HONG_KONG = "Hong Kong";
+const RadioButtonsExample = ({ controlled }) => {
+    const [location, setLocation] = useState("");
+    const controlledProps = {
+        options: [
+            {
+                label: SINGAPORE,
+                value: SINGAPORE,
+                checked: location === SINGAPORE,
+                onClick: () => setLocation(SINGAPORE),
+            },
+            {
+                label: HONG_KONG,
+                value: HONG_KONG,
+                checked: location === HONG_KONG,
+                onClick: () => setLocation(HONG_KONG),
+            },
+        ],
+    };
+    return (_jsx(RadioButtons, Object.assign({}, (controlled ? controlledProps : uncontrolledProps))));
+};
+const uncontrolledProps = {
+    name: "location",
+    options: [
+        {
+            label: SINGAPORE,
+            value: SINGAPORE,
+            onChange: () => alert(`Selected ${SINGAPORE}!`),
+        },
+        {
+            label: HONG_KONG,
+            value: HONG_KONG,
+            onChange: () => alert(`Selected ${HONG_KONG}!`),
+        },
+    ],
+};
 const meta = {
     title: "Molecules/Radio Buttons",
-    component: RadioButtons,
+    component: RadioButtonsExample,
     tags: ["autodocs"],
     parameters: {
         layout: "centered",
     },
 };
 export default meta;
-export const NoneSelectedByDefault = {
+export const Uncontrolled = {
     args: {
-        name: "location ",
-        options: [
-            {
-                label: "Singapore",
-                value: "Singapore",
-                onChange: () => alert("Selected Singapore!"),
-            },
-            {
-                label: "Hong Kong",
-                value: "Hong Kong",
-                onChange: () => alert("Selected Hong Kong!"),
-            },
-        ],
+        controlled: false,
     },
 };
-export const OneSelectedByDefault = {
+export const Controlled = {
     args: {
-        name: "location ",
-        options: [
-            {
-                label: "Singapore",
-                value: "Singapore",
-                onChange: () => alert("Selected Singapore!"),
-                defaultChecked: true,
-            },
-            {
-                label: "Hong Kong",
-                value: "Hong Kong",
-                onChange: () => alert("Selected Hong Kong!"),
-            },
-        ],
+        controlled: true,
     },
 };