@croquiscom/pds 4.4.2 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @croquiscom/pds
 
+## 4.6.0
+
+### Minor Changes
+
+- 439e2eb: add ColumnViewController
+
+## 4.5.0
+
+### Minor Changes
+
+- 134fef2: add arrow=false into Popover
+- 64082ab: add DraggableList
+
 ## 4.4.2
 
 ### Patch Changes

package/assets/icons/PinFill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7656 2.4696L21.5303 10.2343L20.4697 11.295L19.4808 10.3061L13.859 15.9279L13.6309 19.6342C13.6128 19.9287 13.4238 20.1851 13.1479 20.2896C12.8721 20.394 12.5606 20.3271 12.352 20.1185L8.64704 16.4135L3.53031 21.5303L2.46965 20.4696L7.58638 15.3529L3.88141 11.6479C3.67283 11.4393 3.60589 11.1279 3.71034 10.852C3.8148 10.5761 4.07126 10.3871 4.36568 10.369L8.072 10.1409L13.6938 4.51912L12.7049 3.53026L13.7656 2.4696Z" fill="#363644"/>
+</svg>

package/dist/components/column-view-controller/ColumnViewController.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { TableColumnType } from '../table';
+export interface TableColumnViewType<DataType> extends TableColumnType<DataType> {
+    isOn?: boolean;
+}
+export interface ColumnViewControllerProps<DataType> {
+    /**
+     * @default '열: 목록보기 설정'
+     */
+    buttonText?: string;
+    /**
+     * columns의 모든 width가 필수값이어야 함
+     */
+    columns: Array<TableColumnViewType<DataType>>;
+    onChange: (columns: Array<TableColumnViewType<DataType>>) => void;
+    width?: number;
+    /**
+     * 고정 column 변경 기능 사용 여부
+     * @default true
+     * @see maxFixedCount
+     * @see pullsFixed
+     */
+    canFixed?: boolean;
+    maxFixedCount?: number;
+    /**
+     * 고정 column을 별도로 끌어서 사용할 지 여부
+     * @default false
+     * @see noFixedItemsText
+     * @see fixedSectionTitle
+     */
+    pullsFixed?: boolean;
+    /**
+     * @default '고정 정보가 없습니다.'
+     */
+    noFixedItemsText?: string;
+    /**
+     * @default '고정 정보'
+     */
+    fixedSectionTitle?: string;
+    /**
+     * @default '목록 정보'
+     */
+    listSectionTitle?: string;
+}
+export declare const ColumnViewController: <T>({ columns, onChange, width, canFixed, pullsFixed, maxFixedCount, buttonText, noFixedItemsText, fixedSectionTitle, listSectionTitle, }: ColumnViewControllerProps<T>) => JSX.Element;

package/dist/components/column-view-controller/ColumnViewController.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(<T>({ columns, onChange, width, canFixed, pullsFixed, maxFixedCount, buttonText, noFixedItemsText, fixedSectionTitle, listSectionTitle, }: import("./ColumnViewController").ColumnViewControllerProps<T>) => JSX.Element)>;
+export default _default;
+export declare const Base: any;
+export declare const PullsFixed: any;
+export declare const MaxFixedCount: any;
+export declare const NoFixed: any;

package/dist/components/column-view-controller/index.d.ts

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

package/dist/components/icons/generated/PinFill.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgPinFill: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgPinFill;

package/dist/components/icons/generated/index.d.ts

@@ -172,6 +172,7 @@ export { default as IconPicture } from './Picture';
 export { default as IconPictureX } from './PictureX';
 export { default as IconPin } from './Pin';
 export { default as IconPinColor } from './PinColor';
+export { default as IconPinFill } from './PinFill';
 export { default as IconPlayFill } from './PlayFill';
 export { default as IconPlus } from './Plus';
 export { default as IconRefresh } from './Refresh';

package/dist/components/index.d.ts

@@ -28,3 +28,6 @@ export * from './pagination';
 export * from './file-upload';
 export * from './table';
 export * from './drawer';
+export * from './list';
+export * from './list-item';
+export * from './column-view-controller';

package/dist/components/list/List.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ListItemProps } from '../list-item';
+export interface ListProps<T = string> {
+    items: Array<ListItemProps<T>>;
+    /**
+     * 항목을 드래그해서 순서를 바꿀 수 있는 기능 확장 여부
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * 드래그될 경우 변경된 items값을 파라미터로 넘겨준다
+     * @see draggable
+     */
+    onChange?: (items: Array<ListItemProps<T>>) => void;
+    width?: number;
+}
+export declare const List: <T extends string>({ items, draggable, onChange, width }: ListProps<T>) => JSX.Element;

package/dist/components/list/List.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(<T extends string>({ items, draggable, onChange, width }: import("./List").ListProps<T>) => JSX.Element)>;
+export default _default;
+export declare const Base: any;
+export declare const Draggable: any;
+export declare const FullCase: any;

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

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

package/dist/components/list-item/ListItem.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export interface ListItemProps<T = string> {
+    id: T;
+    text: ReactNode;
+    disabled?: boolean;
+    /**
+     * 항목을 드래그해서 순서를 바꿀 수 있는 기능 확장 여부
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * draggable=true이면, index는 필수값이 된다
+     * @see draggable
+     */
+    index?: number;
+    /**
+     * isOn 정의시 토글버튼을 사용한다 (Togglable)
+     */
+    isOn?: boolean;
+    /**
+     * isOn 정의시 onToggle은 필수값이 된다
+     * @see isOn
+     */
+    onToggle?: (isOn: boolean, index?: number) => void;
+    /**
+     * fixed 정의시 핀버튼을 사용한다 (Pinnable)
+     */
+    fixed?: boolean;
+    /**
+     * fixed 정의시 onPin은 필수값이 된다
+     * @see fixed
+     */
+    onPin?: (fixed: boolean, index?: number) => void;
+}
+export declare const ListItem: <T extends string>({ id, isOn, fixed, disabled, text, draggable, index, onToggle, onPin, }: ListItemProps<T>) => JSX.Element;

package/dist/components/list-item/ListItem.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(<T extends string>({ id, isOn, fixed, disabled, text, draggable, index, onToggle, onPin, }: import("./ListItem").ListItemProps<T>) => JSX.Element)>;
+export default _default;
+export declare const Base: any;
+export declare const Draggable: any;
+export declare const Disabled: any;
+export declare const Togglable: any;
+export declare const Pinnable: any;
+export declare const FullCase: any;

package/dist/components/list-item/index.d.ts

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

package/dist/components/list-item/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const getItemStyle: (isDragging: boolean, draggableStyle: any) => any;
+export declare const item_base_css: import("@emotion/utils").SerializedStyles;
+export declare const pin_base_css: import("@emotion/utils").SerializedStyles;
+export declare const getStylesByPinned: (isFixed: boolean) => import("@emotion/utils").SerializedStyles;
+export declare const three_bars_base_css: import("@emotion/utils").SerializedStyles;

package/dist/components/popover/Popover.d.ts

@@ -44,6 +44,14 @@ export interface PopoverProps {
      * @default true
      */
     canClickOutside?: boolean;
+    /**
+     * 화살표 사용 여부
+     *  - false로 지정할 경우, 화살표가 빠지고 border-radius와 box-shadow가 적용됩니다.
+     *   - placement의 기본값은 'bottom-start' 로 변경 됩니다. (자동 배치 되지 않음)
+     *   - openerTriggerEvent의 기본값은 'click' 로 변경 됩니다.
+     * @default true
+     */
+    arrow?: boolean;
 }
 export declare const Popover: React.FC<PopoverProps>;
 export {};

package/dist/components/popover/Popover.stories.d.ts

@@ -18,3 +18,13 @@ export declare const TemplateWithCloseButton: {
     };
 };
 export declare const HidingFullyClippedReferenceElements: () => JSX.Element;
+export declare const NoArrow: {
+    (): JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/components/popover/PopoverRoundedBase.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const PopoverRoundedBase: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;