@ceed/cds 0.0.185 → 0.0.187-treeshaking.0

package/dist/components/Uploader/Uploader.js

@@ -0,0 +1,402 @@
+import React__default, { createContext, useRef, useState, useMemo, useCallback, useEffect, useContext } from 'react';
+import { styled, Input, Stack } from '@mui/joy';
+import MuiFileUploadIcon from '../../external/@mui/icons-material/esm/CloudUploadRounded.js';
+import MuiUploadFileIcon from '../../external/@mui/icons-material/esm/UploadFileRounded.js';
+import MuiClearIcon from '../../external/@mui/icons-material/esm/ClearRounded.js';
+import { Typography } from '../Typography/Typography.js';
+import { Card } from '../Card/Card.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { FormControl } from '../FormControl/FormControl.js';
+import { FormHelperText } from '../FormHelperText/FormHelperText.js';
+import { Sheet } from '../Sheet/Sheet.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+
+const AtlaskitContext = createContext({});
+const AtlaskitProvider = (props) => {
+    const [libs, setLibs] = useState({});
+    useEffect(() => {
+        (async () => {
+            setLibs({
+                combine: (await import('../../external/@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/combine.js'))
+                    .combine,
+                dropTargetForExternal: (await import('../../external/@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/external/adapter.js')).dropTargetForExternal,
+                monitorForExternal: (await import('../../external/@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/external/adapter.js')).monitorForExternal,
+                containsFiles: (await import('../../external/@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/external/file.js')).containsFiles,
+                getFiles: (await import('../../external/@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/external/file.js')).getFiles,
+                preventUnhandled: (await import('../../external/@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js')).preventUnhandled,
+            });
+        })();
+    }, []);
+    return (React__default.createElement(AtlaskitContext.Provider, { value: libs }, props.children));
+};
+const useAtlaskit = () => {
+    return useContext(AtlaskitContext);
+};
+const VisuallyHiddenInput = styled(Input)({
+    width: "1px",
+    height: "1px",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    position: "absolute",
+});
+const PreviewRoot = styled(Stack, {
+    name: "Uploader",
+    slot: "PreviewRoot",
+})({});
+const UploadCard = styled(Card, {
+    name: "Uploader",
+    slot: "UploadCard",
+})(({ theme }) => ({
+    padding: theme.spacing(2.5),
+    border: `1px solid ${theme.palette.neutral.outlinedBorder}`,
+}));
+const UploadFileIcon = styled(MuiUploadFileIcon, {
+    name: "Uploader",
+    slot: "UploadFileIcon",
+})(({ theme }) => ({
+    color: theme.palette.neutral["400"],
+    width: "32px",
+    height: "32px",
+}));
+const ClearIcon = styled(MuiClearIcon, {
+    name: "Uploader",
+    slot: "ClearIcon",
+})(({ theme }) => ({
+    color: theme.palette.neutral.plainColor,
+    width: "18px",
+    height: "18px",
+}));
+const UNITS = [
+    "byte",
+    "kilobyte",
+    "megabyte",
+    "gigabyte",
+    "terabyte",
+    "petabyte",
+];
+const ALL_EXTENSIONS_BY_TYPE = {
+    "image/*": [
+        ".jpeg",
+        ".jpg",
+        ".png",
+        ".gif",
+        ".bmp",
+        ".tiff",
+        ".svg",
+        ".webp",
+        ".heic",
+        ".ico",
+    ],
+    "audio/*": [
+        ".mp3",
+        ".wav",
+        ".flac",
+        ".aac",
+        ".ogg",
+        ".m4a",
+        ".wma",
+        ".aiff",
+        ".alac",
+        ".midi",
+        ".mp4",
+    ],
+    "video/*": [
+        ".mp4",
+        ".avi",
+        ".mkv",
+        ".mov",
+        ".wmv",
+        ".flv",
+        ".webm",
+        ".mpeg",
+        ".3gp",
+        ".m4v",
+    ],
+};
+const getFileSize = (n) => {
+    const i = n == 0 ? 0 : Math.floor(Math.log(n) / Math.log(1024));
+    const value = n / Math.pow(1024, i);
+    const unit = UNITS[i];
+    return Intl.NumberFormat("en-us", {
+        style: "unit",
+        unit,
+        unitDisplay: "narrow",
+    }).format(value);
+};
+const Preview = (props) => {
+    // prop destruction
+    const { files, uploaded, onDelete } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React__default.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => (React__default.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" },
+        React__default.createElement(Stack, { direction: "row", alignItems: "center", gap: 2 },
+            React__default.createElement(UploadFileIcon, null),
+            React__default.createElement(Stack, { flex: "1" },
+                React__default.createElement(Typography, { level: "body-sm", textColor: "common.black" }, file.name),
+                !!file.size && (React__default.createElement(Typography, { level: "body-xs", fontWeight: "300", lineHeight: "1.33", textColor: "text.tertiary" }, getFileSize(file.size)))),
+            React__default.createElement(IconButton, { onClick: () => onDelete?.(file) },
+                React__default.createElement(ClearIcon, null))))))));
+};
+const UploaderRoot = styled(Stack, {
+    name: "Uploader",
+    slot: "root",
+})(({ theme }) => ({
+    gap: theme.spacing(2),
+}));
+const FileDropZone = styled(Sheet, {
+    name: "Uploader",
+    slot: "dropZone",
+    shouldForwardProp: (prop) => prop !== "error",
+})(({ theme, state, error }) => ({
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: theme.spacing(5),
+    gap: theme.spacing(4),
+    cursor: "pointer",
+    backgroundColor: theme.palette.background.surface,
+    border: error
+        ? `1px solid ${theme.palette.danger.outlinedBorder}`
+        : state === "idle"
+            ? `1px solid ${theme.palette.neutral.outlinedBorder}`
+            : `1px solid ${theme.palette.primary.outlinedBorder}`,
+}));
+const UploaderIcon = styled(MuiFileUploadIcon, {
+    name: "Uploader",
+    slot: "iconContainer",
+    shouldForwardProp: (prop) => prop !== "error",
+})(({ theme, state, error }) => ({
+    color: error
+        ? `rgba(${theme.vars.palette.danger.mainChannel} / 0.6)`
+        : state === "over"
+            ? `rgba(${theme.palette.primary.mainChannel} / 0.6)`
+            : theme.palette.neutral.softActiveBg,
+    width: "32px",
+    height: "32px",
+}));
+const _Uploader = React__default.memo((props) => {
+    // prop destruction
+    const { accept, minCount, maxCount, name, size, maxFileSize, maxFileTotalSize, onChange, label, disabled, onDelete, } = props;
+    // lib hooks
+    const { combine, dropTargetForExternal, monitorForExternal, containsFiles, getFiles, preventUnhandled, } = useAtlaskit();
+    // state, ref, querystring hooks
+    const dropZoneRef = useRef(null);
+    const inputRef = useRef(null);
+    const [errorText, setErrorText] = useState();
+    const [files, setFiles] = useState([]);
+    const [uploaded, setUploaded] = useState(props.uploaded || []);
+    const [previewState, setPreviewState] = useState("idle");
+    // form hooks
+    // query hooks
+    // calculated values
+    const accepts = useMemo(() => accept.split(",").map((accept) => accept.trim()), [accept]);
+    const parsedAccepts = useMemo(() => accepts.flatMap((type) => {
+        if (["image/*", "video/*", "audio/*"].includes(type)) {
+            return ALL_EXTENSIONS_BY_TYPE[type];
+        }
+        return type;
+    }), [accepts]);
+    const helperText = useMemo(() => {
+        const [allAcceptedTypes, acceptedTypes] = [
+            accepts
+                .filter((accept) => ["image/*", "video/*", "audio/*"].includes(accept))
+                .map((accept) => {
+                const [type] = accept.split("/");
+                return type.toLowerCase();
+            }),
+            accepts
+                .filter((accept) => !["image/*", "video/*", "audio/*"].includes(accept))
+                .map((accept) => {
+                const [extensionOrType, subType] = accept.split("/");
+                if (!subType) {
+                    return extensionOrType.toUpperCase().replace(".", "");
+                }
+                return subType.toUpperCase();
+            }),
+        ];
+        const helperTexts = [];
+        if (allAcceptedTypes.length > 0) {
+            helperTexts.push(`Any ${allAcceptedTypes.join(", ")} file`);
+        }
+        if (acceptedTypes.length > 0) {
+            helperTexts.push(acceptedTypes.join(", "));
+        }
+        helperTexts.push(`Maximum ${getFileSize(maxFileTotalSize)}`);
+        if (maxCount) {
+            helperTexts.push(`Up to ${maxCount} ${maxCount === 1 ? "file" : "files"}`);
+        }
+        return helperTexts.join(", ");
+    }, [accepts, maxFileTotalSize, maxCount]);
+    const error = useMemo(() => !!errorText || props.error, [props.error, errorText]);
+    const showDropZone = useMemo(() => !maxCount || (maxCount && [...uploaded, ...files].length !== maxCount), [files, maxCount, uploaded]);
+    const addFiles = useCallback((uploads) => {
+        try {
+            const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
+            const fileExtension = new RegExp(`${types.join("|")}`);
+            uploads.forEach((file) => {
+                const ext = file.name.split(".").pop() || "";
+                if (!fileExtension.test(ext)) {
+                    throw new Error("Please upload acceptable file type.");
+                }
+            });
+            if (maxFileSize) {
+                uploads.forEach((file) => {
+                    if (file.size > maxFileSize) {
+                        throw new Error(`One or more File size exceeded the maximum limit. Each file size must be ${getFileSize(maxFileSize)} or less.`);
+                    }
+                });
+            }
+            const totalFileSize = [...files, ...uploads].reduce((acc, file) => acc + file.size, 0);
+            if (totalFileSize > maxFileTotalSize) {
+                throw new Error(`Total File size exceeded the maximum limit.`);
+            }
+            const newFiles = [...files, ...uploads];
+            if (maxCount && [...uploaded, ...newFiles].length > maxCount) {
+                throw new Error(`Exceeded the maximum number of files.`);
+            }
+            onChange?.({
+                target: {
+                    name,
+                    value: newFiles,
+                },
+            });
+            setFiles(newFiles);
+            setErrorText(undefined);
+        }
+        catch (error) {
+            // TODO: localization, internationalization해야하는 reserved 에러 메세지, 필요한가?
+            const err = error;
+            setErrorText(err.message);
+        }
+    }, [
+        files,
+        uploaded,
+        maxCount,
+        parsedAccepts,
+        maxFileSize,
+        maxFileTotalSize,
+        name,
+        onChange,
+    ]);
+    // effects
+    useEffect(() => {
+        const el = dropZoneRef.current;
+        if (!el ||
+            disabled ||
+            !combine ||
+            !monitorForExternal ||
+            !dropTargetForExternal ||
+            !containsFiles ||
+            !getFiles ||
+            !preventUnhandled) {
+            return;
+        }
+        return combine(dropTargetForExternal({
+            element: el,
+            canDrop: containsFiles,
+            onDragEnter: () => setPreviewState("over"),
+            onDragLeave: () => setPreviewState("potential"),
+            onDrop: async ({ source }) => {
+                const files = await getFiles({ source });
+                addFiles(files);
+            },
+        }), monitorForExternal({
+            canMonitor: containsFiles,
+            onDragStart: () => {
+                setPreviewState("potential");
+                preventUnhandled.start();
+            },
+            onDrop: () => {
+                setPreviewState("idle");
+                preventUnhandled.stop();
+            },
+        }));
+    }, [
+        disabled,
+        combine,
+        monitorForExternal,
+        dropTargetForExternal,
+        containsFiles,
+        getFiles,
+        preventUnhandled,
+        addFiles,
+    ]);
+    useEffect(() => {
+        if (inputRef.current && minCount) {
+            if (files.length < minCount) {
+                inputRef.current.setCustomValidity(`At least ${minCount} files are required.`);
+            }
+            else {
+                inputRef.current.setCustomValidity("");
+            }
+        }
+    }, [inputRef, files, minCount]);
+    // handlers
+    const handleFileChanged = useCallback((event) => {
+        const files = Array.from(event.target.files || []);
+        addFiles(files);
+    }, [addFiles]);
+    const handleDeleteFile = useCallback((deletedFile) => {
+        if (deletedFile instanceof File) {
+            setFiles((current) => {
+                onChange?.({
+                    target: {
+                        name,
+                        value: current.filter((file) => file !== deletedFile),
+                    },
+                });
+                return current.filter((file) => file !== deletedFile);
+            });
+        }
+        else {
+            setUploaded((uploaded) => uploaded.filter((file) => file.id !== deletedFile.id));
+            // NOTE: 이미 업로드된 파일에 대해서만 onDeleted를 호출한다.
+            onDelete?.(deletedFile);
+        }
+        setErrorText(undefined);
+    }, [name, onChange, onDelete]);
+    const handleUploaderButtonClick = useCallback(() => {
+        inputRef.current?.click();
+    }, []);
+    const uploader = (React__default.createElement(FileDropZone, { state: previewState, error: !!(error || errorText), ref: dropZoneRef, onClick: handleUploaderButtonClick },
+        React__default.createElement(Stack, { alignItems: "center", gap: 1 },
+            React__default.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText) })),
+        React__default.createElement(VisuallyHiddenInput, { disabled: disabled, required: !!minCount, onInvalid: (e) => {
+                if (minCount && files.length < minCount) {
+                    setErrorText(`Please choose ${minCount} ${minCount === 1 ? "file" : "files"} to upload.`);
+                }
+            }, slotProps: {
+                input: {
+                    multiple: true,
+                    accept: parsedAccepts.join(","),
+                    type: "file",
+                    ref: inputRef,
+                    role: "button",
+                    onChange: handleFileChanged,
+                },
+            } })));
+    return (React__default.createElement(UploaderRoot, null,
+        showDropZone && (React__default.createElement(FormControl, { size: size, error: !!(error || errorText), disabled: disabled, required: !!minCount },
+            label && React__default.createElement(FormLabel, null, label),
+            uploader,
+            React__default.createElement(FormHelperText, null,
+                React__default.createElement(Stack, null,
+                    errorText && React__default.createElement("div", null, errorText),
+                    React__default.createElement("div", null, helperText))))),
+        [...uploaded, ...files].length > 0 && (React__default.createElement(Preview, { files: files, uploaded: uploaded, onDelete: handleDeleteFile }))));
+});
+const Uploader = React__default.memo((props) => {
+    return (React__default.createElement(AtlaskitProvider, null,
+        React__default.createElement(_Uploader, { ...props })));
+});
+
+export { Uploader };

package/dist/components/Uploader/index.d.ts

@@ -1,3 +1,3 @@
-import { Uploader } from './Uploader';
-export * from './Uploader';
+import { Uploader } from "./Uploader.js";
+export * from "./Uploader.js";
 export default Uploader;

package/dist/components/index.d.ts

@@ -1,53 +1,53 @@
-export { Accordion, AccordionDetails, Accordions, AccordionSummary, } from "./Accordions";
-export { Autocomplete } from "./Autocomplete";
-export { Avatar, AvatarGroup } from "./Avatar";
-export { Box } from "./Box";
-export { Breadcrumbs } from "./Breadcrumbs";
-export { Button } from "./Button";
-export { Calendar } from "./Calendar";
-export { Card } from "./Card";
-export { Checkbox } from "./Checkbox";
-export { Container } from "./Container";
-export { CurrencyInput } from "./CurrencyInput";
-export { DataTable } from "./DataTable";
-export { DatePicker } from "./DatePicker";
-export { DateRangePicker } from "./DateRangePicker";
-export { Drawer } from "./Drawer";
-export { DialogActions } from "./DialogActions";
-export { DialogContent } from "./DialogContent";
-export { DialogTitle } from "./DialogTitle";
-export { DialogFrame } from "./DialogFrame";
-export { Divider } from "./Divider";
-export { InsetDrawer } from "./InsetDrawer";
-export { Dropdown } from "./Dropdown";
-export { FormControl } from "./FormControl";
-export { FormHelperText } from "./FormHelperText";
-export { FormLabel } from "./FormLabel";
-export { Grid } from "./Grid";
-export { IconButton } from "./IconButton";
-export { Input } from "./Input";
-export { Markdown } from "./Markdown";
-export { Menu, MenuItem } from "./Menu";
-export { MenuButton } from "./MenuButton";
-export { Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, } from "./Modal";
-export { MonthPicker } from "./MonthPicker";
-export { MonthRangePicker } from "./MonthRangePicker";
-export { NavigationGroup } from "./NavigationGroup";
-export { NavigationItem } from "./NavigationItem";
-export { Navigator } from "./Navigator";
-export { Pagination } from "./Pagination";
-export { PercentageInput } from "./PercentageInput";
-export { Radio, RadioGroup } from "./Radio";
-export { RadioList } from "./RadioList";
-export { Select, Option } from "./Select";
-export { Sheet } from "./Sheet";
-export { Stack } from "./Stack";
-export { Stepper, Step, StepIndicator } from "./Stepper";
-export { Switch } from "./Switch";
-export { Table, TableHead, TableBody } from "./Table";
-export { Tabs, Tab, TabList, TabPanel } from "./Tabs";
-export { Textarea } from "./Textarea";
-export { ThemeProvider, CssBaseline, theme, extendTheme, } from "./ThemeProvider";
-export { Tooltip } from "./Tooltip";
-export { Typography } from "./Typography";
-export { Uploader } from "./Uploader";
+export { Accordion, AccordionDetails, Accordions, AccordionSummary, } from "./Accordions/index.js";
+export { Autocomplete } from "./Autocomplete/index.js";
+export { Avatar, AvatarGroup } from "./Avatar/index.js";
+export { Box } from "./Box/index.js";
+export { Breadcrumbs } from "./Breadcrumbs/index.js";
+export { Button } from "./Button/index.js";
+export { Calendar } from "./Calendar/index.js";
+export { Card } from "./Card/index.js";
+export { Checkbox } from "./Checkbox/index.js";
+export { Container } from "./Container/index.js";
+export { CurrencyInput } from "./CurrencyInput/index.js";
+export { DataTable } from "./DataTable/index.js";
+export { DatePicker } from "./DatePicker/index.js";
+export { DateRangePicker } from "./DateRangePicker/index.js";
+export { Drawer } from "./Drawer/index.js";
+export { DialogActions } from "./DialogActions/index.js";
+export { DialogContent } from "./DialogContent/index.js";
+export { DialogTitle } from "./DialogTitle/index.js";
+export { DialogFrame } from "./DialogFrame/index.js";
+export { Divider } from "./Divider/index.js";
+export { InsetDrawer } from "./InsetDrawer/index.js";
+export { Dropdown } from "./Dropdown/index.js";
+export { FormControl } from "./FormControl/index.js";
+export { FormHelperText } from "./FormHelperText/index.js";
+export { FormLabel } from "./FormLabel/index.js";
+export { Grid } from "./Grid/index.js";
+export { IconButton } from "./IconButton/index.js";
+export { Input } from "./Input/index.js";
+export { Markdown } from "./Markdown/index.js";
+export { Menu, MenuItem } from "./Menu/index.js";
+export { MenuButton } from "./MenuButton/index.js";
+export { Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, } from "./Modal/index.js";
+export { MonthPicker } from "./MonthPicker/index.js";
+export { MonthRangePicker } from "./MonthRangePicker/index.js";
+export { NavigationGroup } from "./NavigationGroup/index.js";
+export { NavigationItem } from "./NavigationItem/index.js";
+export { Navigator } from "./Navigator/index.js";
+export { Pagination } from "./Pagination/index.js";
+export { PercentageInput } from "./PercentageInput/index.js";
+export { Radio, RadioGroup } from "./Radio/index.js";
+export { RadioList } from "./RadioList/index.js";
+export { Select, Option } from "./Select/index.js";
+export { Sheet } from "./Sheet/index.js";
+export { Stack } from "./Stack/index.js";
+export { Stepper, Step, StepIndicator } from "./Stepper/index.js";
+export { Switch } from "./Switch/index.js";
+export { Table, TableHead, TableBody } from "./Table/index.js";
+export { Tabs, Tab, TabList, TabPanel } from "./Tabs/index.js";
+export { Textarea } from "./Textarea/index.js";
+export { ThemeProvider, CssBaseline, theme, extendTheme, } from "./ThemeProvider/index.js";
+export { Tooltip } from "./Tooltip/index.js";
+export { Typography } from "./Typography/index.js";
+export { Uploader } from "./Uploader/index.js";

package/dist/external/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter-native-data-key.js

@@ -0,0 +1,8 @@
+/**
+ * This key has been pulled into a separate module
+ * so that the external adapter does not need to import
+ * the element adapter
+ */
+var elementAdapterNativeDataKey = 'application/vnd.pdnd';
+
+export { elementAdapterNativeDataKey };