@croquiscom/pds 3.10.0 → 4.0.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +4 -3
  2. package/dist/components/icons/generated/index.d.ts +0 -6
  3. package/dist/components/message/MessageManager.d.ts +15 -6
  4. package/dist/components/message/types.d.ts +1 -1
  5. package/dist/components/notification/Notification.d.ts +2 -4
  6. package/dist/components/notification/index.d.ts +1 -0
  7. package/dist/components/notification/styles.d.ts +2 -2
  8. package/dist/components/notification/types.d.ts +1 -1
  9. package/dist/components/notification/useNotification.d.ts +3 -0
  10. package/dist/components/toast/Toast.d.ts +0 -2
  11. package/dist/components/toast/index.d.ts +1 -0
  12. package/dist/components/toast/types.d.ts +1 -1
  13. package/dist/components/toast/useToast.d.ts +3 -0
  14. package/dist/index.es.js +1 -1
  15. package/dist/index.es.js.map +1 -1
  16. package/dist/index.js +1 -1
  17. package/dist/index.js.map +1 -1
  18. package/locales/en.d.ts +66 -0
  19. package/locales/en.esm.d.ts +66 -0
  20. package/locales/ja.d.ts +66 -0
  21. package/locales/ja.esm.d.ts +66 -0
  22. package/locales/ko.d.ts +66 -0
  23. package/locales/ko.esm.d.ts +66 -0
  24. package/package.json +1 -1
  25. package/assets/icons/Cancel.svg +0 -3
  26. package/assets/icons/ColoredFaceBad.svg +0 -6
  27. package/assets/icons/ColoredFaceGood.svg +0 -6
  28. package/assets/icons/ColoredFaceNeutral.svg +0 -6
  29. package/assets/icons/ColoredFaceVeryBad.svg +0 -4
  30. package/assets/icons/ColoredFaceVeryGood.svg +0 -5
  31. package/dist/components/icons/generated/Cancel.d.ts +0 -4
  32. package/dist/components/icons/generated/ColoredFaceBad.d.ts +0 -4
  33. package/dist/components/icons/generated/ColoredFaceGood.d.ts +0 -4
  34. package/dist/components/icons/generated/ColoredFaceNeutral.d.ts +0 -4
  35. package/dist/components/icons/generated/ColoredFaceVeryBad.d.ts +0 -4
  36. package/dist/components/icons/generated/ColoredFaceVeryGood.d.ts +0 -4
package/CHANGELOG.md CHANGED
@@ -1,10 +1,11 @@
1
1
  # @croquiscom/pds
2
2
 
3
- ## 3.10.0
3
+ ## 4.0.0-next.0
4
4
 
5
- ### Minor Changes
5
+ ### Major Changes
6
6
 
7
- - ecf6746: 인사이트 셀러피드백 아이콘 추가
7
+ - 85a3423: - MessageManager를 이용한 컴포넌트들을 ssr시에도 사용할 수 있도록 변경
8
+ - Toast는 useToast의 형태로, Notification은 useNotification의 형태로 변경
8
9
 
9
10
  ## 3.9.0
10
11
 
@@ -46,7 +46,6 @@ export { default as IconBulb } from './Bulb';
46
46
  export { default as IconBulbFill } from './BulbFill';
47
47
  export { default as IconCalendar } from './Calendar';
48
48
  export { default as IconCamera } from './Camera';
49
- export { default as IconCancel } from './Cancel';
50
49
  export { default as IconCart } from './Cart';
51
50
  export { default as IconCategoryBeauty } from './CategoryBeauty';
52
51
  export { default as IconCategoryBrand } from './CategoryBrand';
@@ -91,11 +90,6 @@ export { default as IconColoredCoupon } from './ColoredCoupon';
91
90
  export { default as IconColoredDocument } from './ColoredDocument';
92
91
  export { default as IconColoredExcel } from './ColoredExcel';
93
92
  export { default as IconColoredEyes } from './ColoredEyes';
94
- export { default as IconColoredFaceBad } from './ColoredFaceBad';
95
- export { default as IconColoredFaceGood } from './ColoredFaceGood';
96
- export { default as IconColoredFaceNeutral } from './ColoredFaceNeutral';
97
- export { default as IconColoredFaceVeryBad } from './ColoredFaceVeryBad';
98
- export { default as IconColoredFaceVeryGood } from './ColoredFaceVeryGood';
99
93
  export { default as IconColoredFlag } from './ColoredFlag';
100
94
  export { default as IconColoredGift } from './ColoredGift';
101
95
  export { default as IconColoredGraphDown } from './ColoredGraphDown';
@@ -1,13 +1,13 @@
1
1
  import { FunctionComponent } from 'react';
2
2
  import { NotificationComponentProps } from '../notification';
3
3
  import { ToastComponentProps } from '../toast';
4
- import { MessageDirection, MessagePosition } from './types';
4
+ import type { MessageDirection, MessagePositionType } from './types';
5
5
  export interface MessageContainerProps {
6
6
  /**
7
7
  * @desc 메세지 노출 위치
8
8
  * @default top-center
9
9
  */
10
- position: MessagePosition;
10
+ position: MessagePositionType;
11
11
  /**
12
12
  * @desc position 기준으로 커스텀 위치, center일 경우 적용되지 않습니다
13
13
  */
@@ -30,12 +30,14 @@ export interface MessageContainerProps {
30
30
  */
31
31
  direction?: MessageDirection;
32
32
  }
33
- type MessageContainerKey = `${MessagePosition}_${MessageDirection}_${number}_${number}`;
33
+ type MessageContainerType = 'toast' | 'notification';
34
+ type MessageContainerKey = `${MessagePositionType}_${MessageDirection}_${number}_${number}`;
34
35
  type MessageComponentTypes = ToastComponentProps | NotificationComponentProps;
35
36
  export type MessageOptions<T extends MessageComponentTypes> = Omit<T, 'destroy' | 'position'> & Partial<MessageContainerProps>;
36
37
  export declare class MessageManager<T extends MessageComponentTypes> {
37
38
  private root;
38
39
  private component;
40
+ private type;
39
41
  private z_index;
40
42
  private default_max_count;
41
43
  private default_offset;
@@ -43,15 +45,22 @@ export declare class MessageManager<T extends MessageComponentTypes> {
43
45
  private default_direction;
44
46
  private container_keys;
45
47
  private messages;
46
- constructor({ component, container_id, z_index, default_max_count, default_offset, default_position, default_direction, }: {
48
+ private static instance;
49
+ constructor({ component, type, z_index, default_max_count, default_offset, default_position, default_direction, }: {
47
50
  component: FunctionComponent<T>;
48
- container_id: 'notification' | 'toast';
51
+ type: MessageContainerType;
49
52
  z_index?: number;
50
53
  default_max_count?: number;
51
54
  default_offset?: number;
52
- default_position?: MessagePosition;
55
+ default_position?: MessagePositionType;
53
56
  default_direction?: MessageDirection;
54
57
  });
58
+ static getInstance(type: MessageContainerType): MessageManager<MessageComponentTypes>;
59
+ set setInstance({ default_max_count, default_offset, default_position, }: {
60
+ default_max_count: number;
61
+ default_offset: number;
62
+ default_position: MessagePositionType;
63
+ });
55
64
  static generateContainerKey({ position, direction, offset_x, offset_y }: MessageContainerProps): MessageContainerKey;
56
65
  static getContainerPropsByKey(key: MessageContainerKey): MessageContainerProps;
57
66
  private generateMessageId;
@@ -6,5 +6,5 @@ export declare const MessagePosition: {
6
6
  readonly BOTTOM_CENTER: "bottom-center";
7
7
  readonly CENTER: "center";
8
8
  };
9
- export type MessagePosition = typeof MessagePosition[keyof typeof MessagePosition];
9
+ export type MessagePositionType = typeof MessagePosition[keyof typeof MessagePosition];
10
10
  export type MessageDirection = Extract<CSSProperties['flexDirection'], 'column' | 'column-reverse'>;
@@ -1,6 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { MessageManager } from '../message';
3
- import { NotificationKind, NotificationPosition } from './types';
2
+ import type { NotificationKind, NotificationPositionType } from './types';
4
3
  export interface NotificationComponentProps {
5
4
  /**
6
5
  * id값을 지정할 수 있습니다.
@@ -29,7 +28,6 @@ export interface NotificationComponentProps {
29
28
  onClose?: () => void;
30
29
  onClickLink?: () => void;
31
30
  destroy: () => void;
32
- position: NotificationPosition;
31
+ position: NotificationPositionType;
33
32
  }
34
33
  export declare const NotificationComponent: React.FC<NotificationComponentProps>;
35
- export declare const Notification: MessageManager<NotificationComponentProps>;
@@ -1,2 +1,3 @@
1
1
  export * from './Notification';
2
2
  export * from './types';
3
+ export * from './useNotification';
@@ -1,3 +1,3 @@
1
- import { NotificationKind, NotificationPosition } from './types';
1
+ import type { NotificationKind, NotificationPositionType } from './types';
2
2
  export declare const notification_kind_css: Record<NotificationKind, string>;
3
- export declare const notification_hide_animation: (position: NotificationPosition) => import("@emotion/serialize").Keyframes;
3
+ export declare const notification_hide_animation: (position: NotificationPositionType) => import("@emotion/serialize").Keyframes;
@@ -6,4 +6,4 @@ export declare const NotificationPosition: {
6
6
  readonly BOTTOM_CENTER: "bottom-center";
7
7
  readonly CENTER: "center";
8
8
  };
9
- export type NotificationPosition = typeof NotificationPosition[keyof typeof NotificationPosition];
9
+ export type NotificationPositionType = typeof NotificationPosition[keyof typeof NotificationPosition];
@@ -0,0 +1,3 @@
1
+ import { MessageManager } from '../message';
2
+ import { NotificationComponentProps } from './Notification';
3
+ export declare function useNotification(): MessageManager<NotificationComponentProps>;
@@ -1,5 +1,4 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { MessageManager } from '../message';
3
2
  import { ToastSize, ToastKind } from './types';
4
3
  export interface ToastComponentProps {
5
4
  /**
@@ -27,4 +26,3 @@ export interface ToastComponentProps {
27
26
  destroy: () => void;
28
27
  }
29
28
  export declare const ToastComponent: React.FC<ToastComponentProps>;
30
- export declare const Toast: MessageManager<ToastComponentProps>;
@@ -1,2 +1,3 @@
1
1
  export * from './Toast';
2
2
  export * from './types';
3
+ export * from './useToast';
@@ -8,5 +8,5 @@ export declare const ToastPosition: {
8
8
  readonly BOTTOM_CENTER: "bottom-center";
9
9
  readonly CENTER: "center";
10
10
  };
11
- export type ToastPosition = typeof ToastPosition[keyof typeof ToastPosition];
11
+ export type ToastPositionType = typeof ToastPosition[keyof typeof ToastPosition];
12
12
  export type ToastDirection = MessageDirection;
@@ -0,0 +1,3 @@
1
+ import { MessageManager } from '../message';
2
+ import { ToastComponentProps } from './Toast';
3
+ export declare function useToast(): MessageManager<ToastComponentProps>;