@croquiscom/pds 10.11.1 → 10.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @croquiscom/pds
 
+## 10.12.0
+
+### Minor Changes
+
+- 2d21b1d: ImageUpload 컴포넌트 추가
+
+## 10.11.2
+
+### Patch Changes
+
+- 34d9f59: Toast fill props deprecate
+
 ## 10.11.1
 
 ### Patch Changes

package/README.md

@@ -2,9 +2,7 @@
 
 # PDS
 
-- 🎨 [Storybook](https://storybook.kakaostyle.in/master/pds/?path=/story/intro--page)
-
-PDS(파트너 디자인 시스템)은 [카카오스타일 파트너센터](https://shop.zigzag.kr/) 디자인 시스템을 위한 리액트 기반의 라이브러리입니다.
+PDS(파트너 디자인 시스템)은 카카오스타일 파트너센터 디자인 시스템을 위한 리액트 기반의 라이브러리입니다.
 
 ## 사용
 
@@ -113,11 +111,12 @@ yarn storybook
 - **types**: 타입 정의를 포함합니다.
 - **assets**: svg 등의 에셋을 포함합니다.
 - **locales**: 기본표기등에 사용되는 언어셋을 포함합니다.
+- **scripts**: 플러그인 제작을 위한 스크립트를 포함합니다.
 - **tools**: svgr template 등의 라이브러리 제작을 위한 스크립트를 포함합니다.
 
 ### 아이콘 추가
 
-⚠️ SVGR을 통해 svg파일을 리액트 컴포넌트로 제네레이트합니다. `src/[icons|images]/generated` 하위에서 직접 수정하지 말아주세요!
+⚠️ 기본적으로 피그마 플러그인을 통해 자동 생성합니다. 수동 추가를 할 경우 SVGR을 통해 svg파일을 리액트 컴포넌트로 제네레이트합니다. `src/[icons|images]/generated` 하위에서 직접 수정하지 말아주세요!
 
 - `assets/icons`, `assets/images`에 svg를 추가합니다.
 - `yarn svgr`을 실행합니다.

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

@@ -51,6 +51,7 @@ export interface FileUploadProps {
     onClickFile?: (file: UploadFile, index: number) => void;
     /**
      * 업로드 시도시 maxCount를 넘길 경우 전달합니다.
+     * @deprecated maxCount 도달하면 disabled 처리되므로 사용하지 않습니다.
      */
     onLimitMaxCount?: () => void;
     /**

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { UploadFile } from './FileUpload';
+export interface ImageFile extends Omit<UploadFile, 'value'> {
+    value?: File | null;
+    src?: string;
+    removable?: boolean;
+    label?: string;
+}
+export interface ImageUploadProps {
+    className?: string;
+    objectFit?: 'contain' | 'cover' | 'fill';
+    size?: 'medium' | 'small';
+    /**
+     * size가 'medium'일 경우 width, height를 변경할 수 있습니다.
+     * 최소 width: 60, height: 60
+     */
+    width?: number;
+    height?: number;
+    /**
+     * accept에서 image/를 제외한 영역만 지정할 수 있습니다. prefix(image/)
+     * @default *
+     */
+    accept?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    /**
+     * HTMLInputElement['multiple']
+     */
+    multiple?: boolean;
+    /**
+     * 최대 업로드 파일 갯수
+     */
+    maxCount?: number;
+    /**
+     * FileList내 삭제버튼 사용 유무
+     * @default true
+     */
+    showRemoveButton?: boolean;
+    /**
+     * FileList를 노출하려면 지정된 UploadFile 타입으로 전달해야합니다.
+     */
+    fileList?: ImageFile[];
+    onChange?: (file: File | File[]) => void;
+    /**
+     * 파일 업로드 버튼 클릭시 실행되는 이벤트
+     */
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
+    /**
+     * FileList 클릭시 인덱스 정보와 함께 전달합니다.
+     */
+    onClickFile?: (image_url: string, index: number) => void;
+    /**
+     * 삭제 버튼 클릭시 인덱스 정보와 함께  전달합니다.
+     */
+    onClickFileRemove?: (file: ImageFile, index: number) => void;
+}
+export declare const ImageUpload: ({ className, size, width, height, accept, objectFit, disabled, loading, multiple, maxCount, showRemoveButton, fileList, onChange, onClick, onClickFile, onClickFileRemove, }: ImageUploadProps) => React.JSX.Element;

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ImageUpload } from './ImageUpload';
+declare const meta: Meta<typeof ImageUpload>;
+export default meta;
+type Story = StoryObj<typeof ImageUpload>;
+export declare const Base: Story;
+export declare const ObjectFitCover: Story;
+export declare const CustomSize: Story;
+export declare const DisabledHideRemoveButton: Story;
+export declare const OnlyJpgFileExtension: Story;
+export declare const ClickUploadButton: Story;
+export declare const FileStatus: Story;
+export declare const Disabled: Story;
+export declare const MultipleImageUpload: Story;
+export declare const MaxCount: Story;
+export declare const Loading: Story;

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

@@ -0,0 +1,12 @@
+import React, { InputHTMLAttributes } from 'react';
+export interface ImageUploadButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** @default medium */
+    size?: 'medium' | 'small';
+    width?: number;
+    height?: number;
+    /** @default false */
+    multiple?: boolean;
+    loading?: boolean;
+    onFileUpload?: (file: File | File[]) => void;
+}
+export declare const ImageUploadButton: ({ size, accept, width, height, disabled, className, multiple, loading, onFileUpload, ...props }: ImageUploadButtonProps) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ImageUploadButton } from './ImageUploadButton';
+declare const meta: Meta<typeof ImageUploadButton>;
+export default meta;
+type Story = StoryObj<typeof ImageUploadButton>;
+export declare const Base: Story;
+export declare const Disabled: Story;
+export declare const Multiple: Story;
+export declare const Loading: Story;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ImageUploadPreviewProps {
+    src?: string;
+    width?: number;
+    height?: number;
+    file?: File;
+    alt?: string;
+    label?: string;
+    objectFit: 'contain' | 'cover' | 'fill';
+    /** @default medium */
+    size?: 'medium' | 'small';
+    disabled?: boolean;
+    loading?: boolean;
+    removable?: boolean;
+    error?: boolean;
+    onClick?: (image_url: string) => void;
+    onClickRemove?: () => void;
+}
+export declare const ImageUploadPreview: ({ size, width, height, objectFit, src, file, alt, label, disabled, loading, error, removable, onClick, onClickRemove, }: ImageUploadPreviewProps) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ImageUploadPreview } from './ImageUploadPreview';
+declare const meta: Meta<typeof ImageUploadPreview>;
+export default meta;
+type Story = StoryObj<typeof ImageUploadPreview>;
+export declare const Base: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const Error: Story;

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

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

package/dist/components/toast/Toast.d.ts

@@ -22,6 +22,9 @@ export interface ToastComponentProps {
      * @default info
      */
     kind?: ToastKind;
+    /**
+     * @deprecated fill은 삭제될 예정입니다. 항상 false로 처리됩니다.
+     */
     fill?: boolean;
     destroy: () => void;
 }

package/dist/components/toast/Toast.stories.d.ts

@@ -8,6 +8,5 @@ export declare const Base: Story;
 export declare const Kind: Story;
 export declare const Position: Story;
 export declare const Direction: Story;
-export declare const FullWidth: Story;
 export declare const HandleDestroy: Story;
 export declare const Inline: Story;