@croquiscom/pds 0.26.0 → 0.28.0

package/dist/message/MessageManager.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { NotificationComponentProps } from '../notification';
 import { ToastComponentProps } from '../toast';
-import { MessagePosition } from './types';
+import { MessageDirection, MessagePosition } from './types';
 export interface MessageContainerProps {
     /**
      * @desc 메세지 노출 위치
@@ -25,8 +25,12 @@ export interface MessageContainerProps {
      * @default 'toast'일 경우 1050, 'notification'일 경우 1040
      */
     z_index?: number;
+    /**
+     * @default 'column'
+     */
+    direction?: MessageDirection;
 }
-declare type MessageContainerKey = `${MessagePosition}_${number}_${number}`;
+declare type MessageContainerKey = `${MessagePosition}_${MessageDirection}_${number}_${number}`;
 declare type MessageComponentTypes = ToastComponentProps | NotificationComponentProps;
 export declare type MessageOptions<T extends MessageComponentTypes> = Omit<T, 'destroy' | 'position'> & Partial<MessageContainerProps>;
 export declare class MessageManager<T extends MessageComponentTypes> {
@@ -36,17 +40,19 @@ export declare class MessageManager<T extends MessageComponentTypes> {
     private default_max_count;
     private default_offset;
     private default_position;
+    private default_direction;
     private container_keys;
     private messages;
-    constructor({ component, container_id, z_index, default_max_count, default_offset, default_position, }: {
+    constructor({ component, container_id, z_index, default_max_count, default_offset, default_position, default_direction, }: {
         component: FunctionComponent<T>;
         container_id: 'notification' | 'toast';
         z_index?: number;
         default_max_count?: number;
         default_offset?: number;
         default_position?: MessagePosition;
+        default_direction?: MessageDirection;
     });
-    static generateContainerKey({ position, offset_x, offset_y }: MessageContainerProps): MessageContainerKey;
+    static generateContainerKey({ position, direction, offset_x, offset_y }: MessageContainerProps): MessageContainerKey;
     static getContainerPropsByKey(key: MessageContainerKey): MessageContainerProps;
     private generateMessageId;
     private findContainerKeyById;
@@ -54,7 +60,7 @@ export declare class MessageManager<T extends MessageComponentTypes> {
     private removeContainerKey;
     private getOffset;
     private render;
-    show({ id, position, offset_x, offset_y, max_count, ...options }: MessageOptions<T>): void;
+    show({ id, position, offset_x, offset_y, max_count, direction, ...options }: MessageOptions<T>): void;
     destroy(id: string, key?: MessageContainerKey): void;
 }
 export {};

package/dist/message/types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 export declare const MessagePosition: {
     readonly TOP_RIGHT: "top-right";
     readonly TOP_CENTER: "top-center";
@@ -6,3 +7,4 @@ export declare const MessagePosition: {
     readonly CENTER: "center";
 };
 export declare type MessagePosition = typeof MessagePosition[keyof typeof MessagePosition];
+export declare type MessageDirection = Extract<CSSProperties['flexDirection'], 'column' | 'column-reverse'>;

package/dist/modal/AlertModal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ConfirmModalProps } from './ConfirmModal';
+import { NotificationKind } from '../notification';
+export interface AlertModalProps extends Omit<ConfirmModalProps, 'cancelText' | 'onCancel'> {
+    /**
+     * @default info
+     */
+    kind?: NotificationKind;
+}
+export declare const AlertModal: ({ opened: openProp, kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element;
+export declare const Alert: (properties: AlertModalProps) => Promise<void>;

package/dist/modal/ConfirmModal.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ModalProps } from './Modal';
+export interface ConfirmModalProps extends Omit<ModalProps, 'closeButton' | 'onConfirm' | 'onCancel' | 'onClose' | 'width' | 'footerAddon'> {
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void | Promise<void>;
+    text: ReactNode;
+    subtext?: ReactNode;
+}
+export declare const ConfirmModal: ({ opened: openProp, title, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onExited, ...props }: ConfirmModalProps) => JSX.Element;
+export declare const Confirm: (properties: ConfirmModalProps) => Promise<boolean>;

package/dist/modal/Modal.d.ts

@@ -0,0 +1,26 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { ModalOverlayBaseProps } from './ModalOverlay';
+export interface ModalProps extends ModalOverlayBaseProps {
+    title?: ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    /**
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * @desc Footer 영역 좌측 영역에 렌더링될 요소
+     */
+    footerAddon?: ReactNode;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+export declare const MIN_WIDTH = 480;
+export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, dense, fill, footerAddon, onConfirm, onCancel, onClose, onExited, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
+export declare const ModalTitle: import("@emotion/styled").StyledComponent<React.PropsWithChildren<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/modal/Modal.stories.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { AlertModal as AlertModalComponent } from './AlertModal';
+import { ConfirmModal as ConfirmModalComponent } from './ConfirmModal';
+declare const _default: ComponentMeta<({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, dense, fill, footerAddon, onConfirm, onCancel, onClose, onExited, ...props }: React.PropsWithChildren<import("./Modal").ModalProps>) => JSX.Element>;
+export default _default;
+export declare const BasicModal: any;
+export declare const BasicModalDense: any;
+export declare const canClickOutside: any;
+export declare const Custom: any;
+export declare const ConfirmModal: ComponentStory<typeof ConfirmModalComponent>;
+export declare const ConfirmModalDenseWithFill: ComponentStory<typeof ConfirmModalComponent>;
+export declare const AlertModal: ComponentStory<typeof AlertModalComponent>;
+export declare const AlertModalDenseWithFill: ComponentStory<typeof AlertModalComponent>;
+export declare const AlertModalKind: ComponentStory<typeof AlertModalComponent>;
+export declare const NoticeModal: any;

package/dist/modal/ModalOverlay.d.ts

@@ -0,0 +1,32 @@
+import { PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import { CSSValueWithLength } from '../styles';
+import { CornerRadiusSize } from '../foundation';
+export interface ModalOverlayBaseProps {
+    /**
+     * @desc 100% 너비 사용, Alert 또는 Confirm Modal의 경우 최소너비(480) 범위내에서 적용됩니다.
+     * @default false
+     */
+    fill?: boolean;
+    width?: CSSValueWithLength;
+    className?: string;
+    opened?: boolean;
+    /**
+     * @default 1020
+     */
+    zIndex?: number;
+    /**
+     * @default false
+     */
+    canClickOutside?: boolean;
+    onExited?: () => void;
+    onClose?: () => void;
+}
+export interface ModalOverlayProps extends ModalOverlayBaseProps {
+    maxWidth?: CSSValueWithLength;
+    /**
+     * @default large
+     */
+    borderRadiusSize?: CornerRadiusSize;
+    setOpened: Dispatch<SetStateAction<boolean>>;
+}
+export declare const ModalOverlay: ({ width, maxWidth, borderRadiusSize, fill, className, children, opened: openProp, zIndex, canClickOutside, onExited, onClose, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;

package/dist/modal/NoticeModal.d.ts

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { ModalOverlayBaseProps } from './ModalOverlay';
+export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill'> {
+    label?: string;
+    title?: ReactNode;
+    text?: ReactNode;
+    /**
+     * @default false
+     */
+    checkReplay?: boolean;
+    /**
+     * @default '오늘 하루동안 이 창을 열지 않음'
+     */
+    checkReplayText?: string;
+    onChangeCheckReplay?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const NoticeModal: ({ opened: openProp, children, width, label, title, text, checkReplay, checkReplayText, onClose, onExited, onChangeCheckReplay, ...props }: PropsWithChildren<NoticeModalProps>) => JSX.Element;

package/dist/modal/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Modal';
+export * from './AlertModal';
+export * from './ConfirmModal';
+export * from './NoticeModal';

package/dist/modal/renderModal.d.ts

@@ -0,0 +1,2 @@
+export declare function getFloatingModalPortal(): HTMLElement;
+export declare function removeFloatingModalPortal(target: HTMLElement, unmountDelay?: number): void;

package/dist/toast/Toast.d.ts

@@ -18,6 +18,7 @@ export interface ToastComponentProps {
      * @default info
      */
     kind?: ToastKind;
+    fill?: boolean;
     destroy: () => void;
 }
 export declare const ToastComponent: React.FC<ToastComponentProps>;

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

@@ -6,4 +6,6 @@ export default _default;
 export declare const Base: any;
 export declare const Kind: any;
 export declare const Position: any;
+export declare const Direction: any;
+export declare const FullWidth: any;
 export declare const HandleDestroy: ComponentStory<typeof ToastComponent>;

package/dist/toast/types.d.ts

@@ -1,3 +1,4 @@
+import { MessageDirection } from '../message';
 export declare type ToastSize = 'large' | 'medium';
 export declare type ToastKind = 'info' | 'success' | 'error';
 export declare const ToastPosition: {
@@ -8,3 +9,4 @@ export declare const ToastPosition: {
     readonly CENTER: "center";
 };
 export declare type ToastPosition = typeof ToastPosition[keyof typeof ToastPosition];
+export declare type ToastDirection = MessageDirection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croquiscom/pds",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "Design system for Zigzag's Partner Center",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",