pds-dev-kit-web 0.4.2 → 0.5.3

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -118,5 +118,8 @@
     "sys_border_line_darktheme_04": "darkblue500",
     "usr_widget_brand_primary_darktheme_01": "darkblue500",
     "usr_text_brand_primary_darktheme_01": "darkblue500",
-    "sys_component_base_black_opacity50": "black/opacity50"
+    "sys_component_base_black_opacity50": "black/opacity50",
+    "sys_component_base_card": "white",
+    "sys_cpnt_textlabel_sys_brand_primary_opacity50": "blue500/opacity50",
+    "sys_widget_green_01": "green500"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -160,7 +160,7 @@
     "ui_cpnt_list_badge_active": "sys_widget_status_active_01",
     "ui_cpnt_list_badge_active_primary": "usr_brand_primary",
     "ui_cpnt_list_badge_disabled": "sys_widget_grey_03",
-    "ui_cpnt_list_badge_cancle": "sys_widget_error_01",
+    "ui_cpnt_list_badge_cancel": "sys_widget_error_01",
     "ui_cpnt_list_text_quantity_plus": "sys_text_brand_secondary_variant",
     "ui_cpnt_content_card_base": "sys_component_base_03",
     "ui_cpnt_content_icon_03": "sys_widget_grey_03",
@@ -275,7 +275,7 @@
     "ui_cpnt_chip_line_icon_02": "sys_widget_grey_02",
     "ui_cpnt_overlay_base": "sys_component_base_02",
     "ui_cpnt_profile_base": "sys_component_base_white_opacity00",
-    "ui_cpnt_card_base": "sys_component_base_white",
+    "ui_cpnt_card_base": "sys_component_base_card",
     "ui_cpnt_card_selected_border": "sys_border_line_06",
     "ui_cpnt_card_icon_basic": "sys_widget_primary_01",
     "ui_cpnt_card_icon_custom": "sys_widget_grey_01",
@@ -436,5 +436,13 @@
     "ui_cpnt_sheet_base_white": "sys_component_base_white",
     "ui_cpnt_sheet_base_black": "sys_component_base_black",
     "ui_cpnt_sheet_base_01": "sys_component_base_02",
-    "ui_cpnt_sheet_base_02": "sys_component_base_01"
+    "ui_cpnt_sheet_base_02": "sys_component_base_01",
+    "ui_temp_background": "sys_container_background_01",
+    "ui_list_progress_shape_normal": "sys_widget_primary_01",
+    "ui_list_progress_shape_error": "sys_widget_error_01",
+    "ui_list_progress_shape_base": "sys_widget_grey_04",
+    "ui_cpnt_textlabel_sys_brand_primary_opacity50": "sys_cpnt_textlabel_sys_brand_primary_opacity50",
+    "ui_cpnt_progressbar_01": "sys_widget_green_01",
+    "ui_cpnt_progressbar_02": "sys_widget_grey_04",
+    "ui_36": "sys_component_base_black_opacity80"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -1,59 +1,4 @@
 declare const colorSet: {
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-    };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -175,6 +120,9 @@ declare const colorSet: {
         usr_widget_brand_primary_darktheme_01: string;
         usr_text_brand_primary_darktheme_01: string;
         sys_component_base_black_opacity50: string;
+        sys_component_base_card: string;
+        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
+        sys_widget_green_01: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -297,6 +245,64 @@ declare const colorSet: {
         usr_widget_brand_primary_darktheme_01: string;
         usr_text_brand_primary_darktheme_01: string;
         sys_component_base_black_opacity50: string;
+        sys_component_base_card: string;
+        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
+        sys_widget_green_01: string;
+    };
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -460,7 +466,7 @@ declare const colorSet: {
         ui_cpnt_list_badge_active: string;
         ui_cpnt_list_badge_active_primary: string;
         ui_cpnt_list_badge_disabled: string;
-        ui_cpnt_list_badge_cancle: string;
+        ui_cpnt_list_badge_cancel: string;
         ui_cpnt_list_text_quantity_plus: string;
         ui_cpnt_content_card_base: string;
         ui_cpnt_content_icon_03: string;
@@ -737,6 +743,14 @@ declare const colorSet: {
         ui_cpnt_sheet_base_black: string;
         ui_cpnt_sheet_base_01: string;
         ui_cpnt_sheet_base_02: string;
+        ui_temp_background: string;
+        ui_list_progress_shape_normal: string;
+        ui_list_progress_shape_error: string;
+        ui_list_progress_shape_base: string;
+        ui_cpnt_textlabel_sys_brand_primary_opacity50: string;
+        ui_cpnt_progressbar_01: string;
+        ui_cpnt_progressbar_02: string;
+        ui_36: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
+    SemanticColor: SemanticColor_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -160,7 +160,7 @@ export interface UITheme {
     ui_cpnt_list_badge_active: string;
     ui_cpnt_list_badge_active_primary: string;
     ui_cpnt_list_badge_disabled: string;
-    ui_cpnt_list_badge_cancle: string;
+    ui_cpnt_list_badge_cancel: string;
     ui_cpnt_list_text_quantity_plus: string;
     ui_cpnt_content_card_base: string;
     ui_cpnt_content_icon_03: string;
@@ -437,4 +437,12 @@ export interface UITheme {
     ui_cpnt_sheet_base_black: string;
     ui_cpnt_sheet_base_01: string;
     ui_cpnt_sheet_base_02: string;
+    ui_temp_background: string;
+    ui_list_progress_shape_normal: string;
+    ui_list_progress_shape_error: string;
+    ui_list_progress_shape_base: string;
+    ui_cpnt_textlabel_sys_brand_primary_opacity50: string;
+    ui_cpnt_progressbar_01: string;
+    ui_cpnt_progressbar_02: string;
+    ui_36: string;
 }

package/dist/src/common/styles/index.d.ts

@@ -29,6 +29,7 @@ export declare const theme: {
         form2: string;
         blog1: string;
         singleLine: string;
+        btn: string;
     };
     mobileFontSize: {
         displayHeading: string;
@@ -56,6 +57,7 @@ export declare const theme: {
         form2: string;
         blog1: string;
         singleLine: string;
+        btn: string;
     };
     uiColors: import("..").UITheme;
 };

package/dist/src/common/styles/theme.d.ts

@@ -29,6 +29,7 @@ export declare const desktopLineHeight: {
     form2: string;
     blog1: string;
     singleLine: string;
+    btn: string;
 };
 export declare const mobileFontSize: {
     displayHeading: string;
@@ -56,6 +57,7 @@ export declare const mobileLineHeight: {
     form2: string;
     blog1: string;
     singleLine: string;
+    btn: string;
 };
 export declare const boxShadow: {
     elevation0: string;

package/dist/src/common/styles/theme.js

@@ -42,7 +42,8 @@ exports.desktopLineHeight = {
     form1: '1.6',
     form2: '1.6',
     blog1: '1.6',
-    singleLine: 'normal'
+    singleLine: 'normal',
+    btn: '1'
 };
 exports.mobileFontSize = {
     displayHeading: '32px',
@@ -69,7 +70,8 @@ exports.mobileLineHeight = {
     form1: '1.6',
     form2: '1.6',
     blog1: '1.6',
-    singleLine: 'normal'
+    singleLine: 'normal',
+    btn: '1'
 };
 exports.boxShadow = {
     elevation0: '0 0 0 0 #0003',

package/dist/src/common/styles/ui-colors.d.ts

@@ -1,4 +1,2 @@
 import { UITheme } from './colorSet/ui-type';
 export declare const uiColors: UITheme;
-export declare const setTone: (tone: 'dark' | 'light') => void;
-export declare const getTone: () => "dark" | "light";

package/dist/src/common/styles/ui-colors.js

@@ -3,34 +3,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTone = exports.setTone = exports.uiColors = void 0;
+exports.uiColors = void 0;
 var colorSet_1 = __importDefault(require("./colorSet"));
 function buildCascadedColors(lowLevel, highLevel, override) {
     if (override === void 0) { override = {}; }
     return Object.keys(highLevel).reduce(function (acc, key) {
-        console.log('highLevel', highLevel);
         var keyInLowLevelColors = highLevel[key];
-        console.log('keyInLowLevelColors', keyInLowLevelColors);
         var colorValue;
         if (keyInLowLevelColors.indexOf('/') !== -1) {
             colorValue = override[key]
                 ? override[key]
                 : lowLevel[keyInLowLevelColors.split('/')[0]] + lowLevel[keyInLowLevelColors.split('/')[1]];
-            // console.log('colorValue1', colorValue);
         }
         else {
             colorValue = override[key] ? override[key] : lowLevel[keyInLowLevelColors];
-            console.log('colorValue2', colorValue);
         }
         acc[key] = colorValue;
-        console.log('acc : ', acc);
         return acc;
     }, {});
 }
-var colorSetting = {
-    tone: 'dark',
-    customPalette: {}
-};
 // fetch-palette-phase
 // 서버로부터 해당 채널이 라이트 톤을 사용하는지, 다크 톤을 사용하는지 가져오기
 // 서버로부터 해당 채널에서 커스텀으로 설정한 팔레트 가져오기
@@ -41,16 +32,7 @@ var channelSettings = {
         usr_good_job: '#999999'
     }
 };
-var phaseTwoJSON = colorSetting.tone === 'light' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
+var phaseTwoJSON = channelSettings.tone === 'light' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
 // ui-color-build-phase
-var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.customPalette);
+var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, channelSettings.customPalette);
 exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
-var setTone = function (tone) {
-    colorSetting.tone = tone; // light
-};
-exports.setTone = setTone;
-var getTone = function () {
-    console.log('colorSetting', colorSetting);
-    return colorSetting.tone;
-};
-exports.getTone = getTone;

package/dist/src/common/types/form.d.ts

@@ -0,0 +1,3 @@
+export interface IFormValues {
+    [key: string]: string;
+}

package/dist/src/common/types/form.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/common/types/icon.d.ts

@@ -0,0 +1,4 @@
+import fillIcons from '../assets/icons/fill';
+import lineIcons from '../assets/icons/line';
+export declare type FillIconNameKeys = keyof typeof fillIcons;
+export declare type LineIconNameKeys = keyof typeof lineIcons;

package/dist/src/common/types/icon.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/common/types/styled-components.d.ts

@@ -29,6 +29,7 @@ export interface PdsDevKitTheme {
         form2: string;
         blog1: string;
         singleLine: string;
+        btn: string;
     };
     mobileFontSize: {
         displayHeading: string;
@@ -56,6 +57,7 @@ export interface PdsDevKitTheme {
         form2: string;
         blog1: string;
         singleLine: string;
+        btn: string;
     };
     boxShadow: {
         elevation0: string;

package/dist/src/common/types/uiColors.d.ts

@@ -0,0 +1,2 @@
+import { uiColors } from '../styles/ui-colors';
+export declare type UiColors = keyof typeof uiColors;

package/dist/src/common/types/uiColors.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -0,0 +1,45 @@
+import { TFunctionResult } from 'i18next';
+import React from 'react';
+import { Path } from 'react-hook-form';
+import { desktopFontSize, fontWeight } from '../../../../common/styles/theme';
+import { uiColors } from '../../../../common/styles/ui-colors';
+import { IFormValues } from '../../../../common/types/form';
+export declare type DesktopFontSize = keyof typeof desktopFontSize;
+export declare type FontWeight = keyof typeof fontWeight;
+export declare type UiColors = keyof typeof uiColors;
+export declare type TextFieldBaseProps = {
+    name: Path<IFormValues>;
+    hintText?: string | number | null | TFunctionResult;
+    defaultText?: string | number | null | TFunctionResult;
+    validation?: {
+        [key: string]: any;
+    };
+    preventBlankMode?: 'none' | 'trim' | 'all';
+    textLineType: 'single' | 'multi' | 'auto';
+    multiRows?: number;
+    autoMinRows?: number;
+    autoMaxRows?: number;
+    inputType?: string;
+    state?: 'normal' | 'read_only' | 'disabled';
+    colorTheme?: 'none' | 'dark';
+    min?: number;
+    max?: number;
+    maxLength?: number;
+    textSize: DesktopFontSize;
+    textWeight: FontWeight;
+    fieldPadding?: string;
+    fieldHeight?: number;
+    deleteIconMode?: 'none' | 'use';
+    deleteIconSize?: 12 | 16 | 20 | 24;
+    deleteIconColor?: UiColors;
+    isFocused?: boolean;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: () => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onTarget?: () => void;
+    [x: string]: any;
+} & Record<string, any>;
+declare function TextFieldBase({ name, hintText, defaultText, validation, preventBlankMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
+export default TextFieldBase;