@croquiscom/pds 0.16.0 → 0.18.0

package/dist/message/MessageManager.d.ts

@@ -0,0 +1,61 @@
+import { FunctionComponent } from 'react';
+import { NotificationComponentProps } from '../notification';
+import { ToastComponentProps } from '../toast';
+export declare const MessagePosition: {
+    readonly TOP_RIGHT: "top-right";
+    readonly TOP_CENTER: "top-center";
+    readonly BOTTOM_RIGHT: "bottom-right";
+    readonly BOTTOM_CENTER: "bottom-center";
+    readonly CENTER: "center";
+};
+export declare type MessagePosition = typeof MessagePosition[keyof typeof MessagePosition];
+export interface MessageContainerProps {
+    /**
+     * @desc 메세지 노출 위치
+     * @default top-center
+     */
+    position: MessagePosition;
+    /**
+     * @desc position 기준으로 커스텀 위치, center일 경우 적용되지 않습니다
+     */
+    offset_x: number;
+    /**
+     * @desc position 기준으로 커스텀 위치, center일 경우 적용되지 않습니다.
+     */
+    offset_y: number;
+    /**
+     * @desc 최대 노출 메세지 갯수
+     * @default 6
+     */
+    max_count?: number;
+}
+declare type MessageContainerKey = `${MessagePosition}_${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> {
+    private container;
+    private component;
+    private default_max_count;
+    private default_offset;
+    private default_position;
+    private container_keys;
+    private messages;
+    constructor({ component, container_id, default_max_count, default_offset, default_position, }: {
+        component: FunctionComponent<T>;
+        container_id: string;
+        default_max_count?: number;
+        default_offset?: number;
+        default_position?: MessagePosition;
+    });
+    static generateContainerKey({ position, offset_x, offset_y }: MessageContainerProps): MessageContainerKey;
+    static getContainerPropsByKey(key: MessageContainerKey): MessageContainerProps;
+    private generateMessageId;
+    private findContainerKeyById;
+    private addContainerKey;
+    private removeContainerKey;
+    private getOffset;
+    private render;
+    show({ id, position, offset_x, offset_y, max_count, ...options }: MessageOptions<T>): void;
+    destroy(id: string, key?: MessageContainerKey): void;
+}
+export {};

package/dist/message/index.d.ts

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

package/dist/message/styles.d.ts

@@ -0,0 +1,2 @@
+import { MessageContainerProps } from './MessageManager';
+export declare function getContainerStyle({ position, offset_x, offset_y }: MessageContainerProps): import("@emotion/utils").SerializedStyles;

package/dist/notification/Notification.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { MessageManager, MessagePosition } from '../message';
+export declare type NotificationType = 'info' | 'success' | 'error' | 'warning';
+export interface NotificationComponentProps {
+    id?: string;
+    /** @default info */
+    type?: NotificationType;
+    title: string;
+    content: ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    linkText?: string;
+    /** @default false */
+    closeButton?: boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    onClickLink?: () => void;
+    destroy: () => void;
+    position: MessagePosition;
+}
+export declare const NotificationComponent: React.FC<NotificationComponentProps>;
+export declare const Notification: MessageManager<NotificationComponentProps>;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { NotificationComponent, NotificationComponentProps } from './Notification';
+declare const _default: ComponentMeta<React.FC<NotificationComponentProps>>;
+export default _default;
+export declare const Base: any;
+export declare const Type: any;
+export declare const HandleEvent: ComponentStory<typeof NotificationComponent>;

package/dist/notification/index.d.ts

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

package/dist/notification/styles.d.ts

@@ -0,0 +1,4 @@
+import { NotificationType } from './Notification';
+import { MessagePosition } from '../message';
+export declare const notification_type_css: Record<NotificationType, string>;
+export declare const notification_hide_animation: (position: MessagePosition) => import("@emotion/serialize").Keyframes;

package/dist/radio/RadioGroup.d.ts

@@ -6,7 +6,7 @@ interface RadioItem<RadioValue> {
     value: RadioValue;
     disabled?: boolean;
 }
-export interface RadioGroupProps<RadioValue> {
+export interface RadioGroupProps<RadioValue> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'value' | 'onChange'> {
     className?: string;
     defaultValue?: RadioValue;
     value?: RadioValue;

package/dist/toast/Toast.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { MessageManager } from '../message';
 export declare type ToastSize = 'large' | 'medium';
 export declare type ToastVariant = 'info' | 'success' | 'error';
 export interface ToastComponentProps {
@@ -21,3 +22,4 @@ export interface ToastComponentProps {
     destroy: () => void;
 }
 export declare const ToastComponent: React.FC<ToastComponentProps>;
+export declare const Toast: MessageManager<ToastComponentProps>;

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FC<import("./Toast").ToastComponentProps>>;
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ToastComponent, ToastComponentProps } from './Toast';
+declare const _default: ComponentMeta<React.FC<ToastComponentProps>>;
 export default _default;
 export declare const Base: any;
 export declare const Variant: any;
 export declare const Position: any;
+export declare const HandleDestroy: ComponentStory<typeof ToastComponent>;

package/dist/toast/index.d.ts

@@ -1 +1 @@
-export * from './ToastManager';
+export * from './Toast';

package/dist/toast/styles.d.ts

@@ -1,6 +1,4 @@
 import { ToastSize } from './Toast';
-import { ToastContainerProps } from './ToastManager';
 export declare const toast_size_css: Record<ToastSize, string>;
 export declare const toast_show_animation: import("@emotion/serialize").Keyframes;
 export declare const toast_hide_animation: import("@emotion/serialize").Keyframes;
-export declare function getContainerStyle({ position, offset_x, offset_y }: ToastContainerProps): import("@emotion/utils").SerializedStyles;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export declare type Optional<T> = {
+    [K in keyof T]?: T[K];
+};

package/dist/utils/props.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function composeEvent<T extends (...args: any[]) => void>(...funcs: (T | null | undefined)[]): T;
+export declare function composeRef<T>(...refs: (React.Ref<T> | null | undefined)[]): React.RefCallback<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croquiscom/pds",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Design system for Zigzag's Partner Center",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
@@ -43,6 +43,7 @@
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-url": "^6.0.0",
+    "@storybook/addon-a11y": "^6.5.12",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-docs": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",

package/dist/toast/ToastManager.d.ts

@@ -1,50 +0,0 @@
-import { ToastComponentProps } from './Toast';
-export declare const ToastPosition: {
-    readonly TOP_RIGHT: "top-right";
-    readonly TOP_CENTER: "top-center";
-    readonly BOTTOM_RIGHT: "bottom-right";
-    readonly BOTTOM_CENTER: "bottom-center";
-    readonly CENTER: "center";
-};
-export declare type ToastPosition = typeof ToastPosition[keyof typeof ToastPosition];
-export interface ToastContainerProps {
-    /**
-     * @desc 토스트 노출 위치
-     * @default top-center
-     */
-    position: ToastPosition;
-    /**
-     * @desc position 기준으로 커스텀 위치, center일 경우 적용되지 않습니다
-     */
-    offset_x: number;
-    /**
-     * @desc position 기준으로 커스텀 위치, center일 경우 적용되지 않습니다.
-     */
-    offset_y: number;
-    /**
-     * @desc 최대 노출 토스트 갯수
-     * @default 6
-     */
-    max_count?: number;
-}
-export interface ToastOptions extends Omit<ToastComponentProps, 'destroy'>, Partial<ToastContainerProps> {
-}
-declare type ToastContainerKey = `${ToastPosition}_${number}_${number}`;
-declare class ToastManager {
-    private container;
-    private container_keys;
-    private toasts;
-    constructor();
-    static generateContainerKey({ position, offset_x, offset_y }: ToastContainerProps): ToastContainerKey;
-    static getContainerPropsByKey(key: ToastContainerKey): ToastContainerProps;
-    private generateToastId;
-    private findContainerKeyById;
-    private addContainerKey;
-    private removeContainerKey;
-    private getOffset;
-    private render;
-    show({ id, position, offset_x, offset_y, max_count, ...options }: ToastOptions): void;
-    destroy(id: string, key?: ToastContainerKey): void;
-}
-export declare const Toast: ToastManager;
-export {};