@croquiscom/pds 0.39.0 → 0.40.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @croquiscom/pds
 
+## 0.40.0
+
+### Minor Changes
+
+- 28c224a: FileUpload 컴포넌트 추가
+
+### Patch Changes
+
+- 0471c8a: ..
+
 ## 0.39.0
 
 ### Minor Changes

package/dist/components/file-upload/FileUpload.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading';
+export type FileType = File & {
+    [key: string]: any;
+};
+export interface UploadFile {
+    value: FileType | null;
+    status?: UploadFileStatus;
+    /**
+     * @desc current upload progress percent
+     */
+    percent?: number;
+}
+export interface FileUploadProps {
+    className?: string;
+    label?: ReactNode;
+    accept?: HTMLInputElement['accept'];
+    disabled?: boolean;
+    maxCount?: number;
+    /**
+     * @default true
+     */
+    showRemoveButton?: boolean;
+    /**
+     * @desc FileUploadButton과 함께 업로드된 FileList를 노출하려면 지정된 UploadFile 타입으로 전달해야합니다.
+     */
+    fileList?: UploadFile[];
+    onChange?: (file: File) => void;
+    onClickFile?: (file: UploadFile) => void;
+    onLimitMaxCount?: () => void;
+    onClickFileRemove?: (file: UploadFile) => void;
+}
+export declare const FileUpload: ({ className, accept, label, disabled, maxCount, showRemoveButton, fileList, onChange, onClickFile, onLimitMaxCount, onClickFileRemove, }: FileUploadProps) => JSX.Element;

package/dist/components/file-upload/FileUpload.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { FileUpload } from './FileUpload';
+declare const _default: ComponentMeta<({ className, accept, label, disabled, maxCount, showRemoveButton, fileList, onChange, onClickFile, onLimitMaxCount, onClickFileRemove, }: import("./FileUpload").FileUploadProps) => JSX.Element>;
+export default _default;
+export declare const Base: any;
+export declare const MaxCount: any;
+export declare const OnlyJpgFileExtension: any;
+export declare const FileStatus: ComponentStory<typeof FileUpload>;
+export declare const Disabled: ComponentStory<typeof FileUpload>;

package/dist/components/file-upload/FileUploadButton.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode, InputHTMLAttributes } from 'react';
+export interface FileUploadButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'multiple'> {
+    /** @default '파일 업로드' */
+    label: ReactNode;
+    onFileUpload?: (file: File) => void;
+}
+export declare const FileUploadButton: ({ accept, label, disabled, className, onFileUpload, ...props }: FileUploadButtonProps) => JSX.Element;

package/dist/components/file-upload/FileUploadButton.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ accept, label, disabled, className, onFileUpload, ...props }: import("./FileUploadButton").FileUploadButtonProps) => JSX.Element>;
+export default _default;
+export declare const Base: any;
+export declare const Disabled: any;

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1 @@
+export * from './FileUpload';

package/dist/components/index.d.ts

@@ -25,3 +25,4 @@ export * from './tabs';
 export * from './date-picker';
 export * from './time-picker';
 export * from './pagination';
+export * from './file-upload';

package/dist/components/modal/ConfirmModal.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ModalProps } from './Modal';
-export interface ConfirmModalProps extends Omit<ModalProps, 'closeButton' | 'onConfirm' | 'onCancel' | 'onClose' | 'width' | 'footerAddon' | 'fullScreen'> {
+export interface ConfirmModalProps extends Omit<ModalProps, 'closeButton' | 'onConfirm' | 'onCancel' | 'onClose' | 'width' | 'footerAddon' | 'fullScreen' | 'canClickOutside'> {
     onConfirm?: () => void | Promise<void>;
     onCancel?: () => void | Promise<void>;
     text: ReactNode;

package/dist/components/modal/Modal.d.ts

@@ -39,11 +39,12 @@ export interface ModalProps extends ModalOverlayBaseProps {
     onConfirm?: () => void;
     onCancel?: () => void;
     onClickBackButton?: () => void;
+    onClickOverlay?: () => void;
 }
 export interface ModalContentProps extends Pick<ModalProps, 'fixedHeader' | 'fixedFooter' | 'dense'>, SpaceProps {
 }
 export declare const MIN_WIDTH = 480;
-export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onClose, onExited, onClickBackButton, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
+export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onClose, onExited, onClickBackButton, onClickOverlay, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
 export declare const ModalTitle: import("@emotion/styled").StyledComponent<(import("../text").BaseTextProps & (React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>)) & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/dist/components/modal/Modal.stories.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Modal } from './Modal';
-declare const _default: ComponentMeta<({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onClose, onExited, onClickBackButton, ...props }: React.PropsWithChildren<import("./Modal").ModalProps>) => JSX.Element>;
+declare const _default: ComponentMeta<({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onClose, onExited, onClickBackButton, onClickOverlay, ...props }: React.PropsWithChildren<import("./Modal").ModalProps>) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Dense: any;

package/dist/components/modal/ModalOverlay.d.ts

@@ -33,5 +33,6 @@ export interface ModalOverlayProps extends ModalOverlayBaseProps {
      */
     borderRadiusSize?: CornerRadiusSize;
     setOpened: Dispatch<SetStateAction<boolean>>;
+    onCloseOutsidePress?: () => void;
 }
-export declare const ModalOverlay: ({ width, maxWidth, borderRadiusSize, fill, fullScreen, className, children, opened: openProp, zIndex, canClickOutside, onExited, onClose, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;
+export declare const ModalOverlay: ({ width, maxWidth, borderRadiusSize, fill, fullScreen, className, children, opened: openProp, zIndex, canClickOutside, onExited, onClose, onCloseOutsidePress, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;

package/dist/components/modal/NoticeModal.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { ModalOverlayBaseProps } from './ModalOverlay';
-export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | 'fullScreen'> {
+export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | 'fullScreen' | 'canClickOutside'> {
     label?: string;
     title?: ReactNode;
     text?: ReactNode;