@croquiscom/pds 3.12.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @croquiscom/pds
 
+## 4.0.0
+
+### Major Changes
+
+- 40813dc: - MessageManager를 이용한 컴포넌트들을 ssr시에도 사용할 수 있도록 변경
+  - Toast는 useToast의 형태로, Notification은 useNotification의 형태로 변경
+
 ## 3.12.0
 
 ### Minor Changes

package/dist/components/message/MessageManager.d.ts

@@ -1,13 +1,13 @@
 import { FunctionComponent } from 'react';
 import { NotificationComponentProps } from '../notification';
 import { ToastComponentProps } from '../toast';
-import { MessageDirection, MessagePosition } from './types';
+import type { MessageDirection, MessagePositionType } from './types';
 export interface MessageContainerProps {
     /**
      * @desc 메세지 노출 위치
      * @default top-center
      */
-    position: MessagePosition;
+    position: MessagePositionType;
     /**
      * @desc position 기준으로 커스텀 위치, center일 경우 적용되지 않습니다
      */
@@ -30,12 +30,14 @@ export interface MessageContainerProps {
      */
     direction?: MessageDirection;
 }
-type MessageContainerKey = `${MessagePosition}_${MessageDirection}_${number}_${number}`;
+type MessageContainerType = 'toast' | 'notification';
+type MessageContainerKey = `${MessagePositionType}_${MessageDirection}_${number}_${number}`;
 type MessageComponentTypes = ToastComponentProps | NotificationComponentProps;
 export type MessageOptions<T extends MessageComponentTypes> = Omit<T, 'destroy' | 'position'> & Partial<MessageContainerProps>;
 export declare class MessageManager<T extends MessageComponentTypes> {
     private root;
     private component;
+    private type;
     private z_index;
     private default_max_count;
     private default_offset;
@@ -43,15 +45,22 @@ export declare class MessageManager<T extends MessageComponentTypes> {
     private default_direction;
     private container_keys;
     private messages;
-    constructor({ component, container_id, z_index, default_max_count, default_offset, default_position, default_direction, }: {
+    private static instance;
+    constructor({ component, type, z_index, default_max_count, default_offset, default_position, default_direction, }: {
         component: FunctionComponent<T>;
-        container_id: 'notification' | 'toast';
+        type: MessageContainerType;
         z_index?: number;
         default_max_count?: number;
         default_offset?: number;
-        default_position?: MessagePosition;
+        default_position?: MessagePositionType;
         default_direction?: MessageDirection;
     });
+    static getInstance(type: MessageContainerType): MessageManager<MessageComponentTypes>;
+    set setInstance({ default_max_count, default_offset, default_position, }: {
+        default_max_count: number;
+        default_offset: number;
+        default_position: MessagePositionType;
+    });
     static generateContainerKey({ position, direction, offset_x, offset_y }: MessageContainerProps): MessageContainerKey;
     static getContainerPropsByKey(key: MessageContainerKey): MessageContainerProps;
     private generateMessageId;

package/dist/components/message/types.d.ts

@@ -6,5 +6,5 @@ export declare const MessagePosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export type MessagePosition = typeof MessagePosition[keyof typeof MessagePosition];
+export type MessagePositionType = typeof MessagePosition[keyof typeof MessagePosition];
 export type MessageDirection = Extract<CSSProperties['flexDirection'], 'column' | 'column-reverse'>;

package/dist/components/notification/Notification.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
-import { MessageManager } from '../message';
-import { NotificationKind, NotificationPosition } from './types';
+import type { NotificationKind, NotificationPositionType } from './types';
 export interface NotificationComponentProps {
     /**
      * id값을 지정할 수 있습니다.
@@ -29,7 +28,6 @@ export interface NotificationComponentProps {
     onClose?: () => void;
     onClickLink?: () => void;
     destroy: () => void;
-    position: NotificationPosition;
+    position: NotificationPositionType;
 }
 export declare const NotificationComponent: React.FC<NotificationComponentProps>;
-export declare const Notification: MessageManager<NotificationComponentProps>;

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

@@ -1,2 +1,3 @@
 export * from './Notification';
 export * from './types';
+export * from './useNotification';

package/dist/components/notification/styles.d.ts

@@ -1,3 +1,3 @@
-import { NotificationKind, NotificationPosition } from './types';
+import type { NotificationKind, NotificationPositionType } from './types';
 export declare const notification_kind_css: Record<NotificationKind, string>;
-export declare const notification_hide_animation: (position: NotificationPosition) => import("@emotion/serialize").Keyframes;
+export declare const notification_hide_animation: (position: NotificationPositionType) => import("@emotion/serialize").Keyframes;

package/dist/components/notification/types.d.ts

@@ -6,4 +6,4 @@ export declare const NotificationPosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export type NotificationPosition = typeof NotificationPosition[keyof typeof NotificationPosition];
+export type NotificationPositionType = typeof NotificationPosition[keyof typeof NotificationPosition];

package/dist/components/notification/useNotification.d.ts

@@ -0,0 +1,3 @@
+import { MessageManager } from '../message';
+import { NotificationComponentProps } from './Notification';
+export declare function useNotification(): MessageManager<NotificationComponentProps>;

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

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-import { MessageManager } from '../message';
 import { ToastSize, ToastKind } from './types';
 export interface ToastComponentProps {
     /**
@@ -27,4 +26,3 @@ export interface ToastComponentProps {
     destroy: () => void;
 }
 export declare const ToastComponent: React.FC<ToastComponentProps>;
-export declare const Toast: MessageManager<ToastComponentProps>;

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

@@ -1,2 +1,3 @@
 export * from './Toast';
 export * from './types';
+export * from './useToast';

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

@@ -8,5 +8,5 @@ export declare const ToastPosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export type ToastPosition = typeof ToastPosition[keyof typeof ToastPosition];
+export type ToastPositionType = typeof ToastPosition[keyof typeof ToastPosition];
 export type ToastDirection = MessageDirection;

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

@@ -0,0 +1,3 @@
+import { MessageManager } from '../message';
+import { ToastComponentProps } from './Toast';
+export declare function useToast(): MessageManager<ToastComponentProps>;