pds-dev-kit-web-test 0.0.10 → 0.0.12

package/dist/src/mobile/panels/SectionSheet/SectionSheet.d.ts

@@ -0,0 +1,56 @@
+import React, { CSSProperties } from 'react';
+import { UiColors } from '../../../common';
+declare type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
+export declare type SectionSheetProps = {
+    width: string;
+    height: string;
+    backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
+    overrideBackgroundColorKey?: UiColors;
+    borderMode?: 'none' | 'use';
+    borderWidth?: 1 | 2;
+    borderColorTheme?: 'grey' | 'blue' | 'green';
+    overrideBorderColorKey?: UiColors;
+    shapeType?: 'rectangle' | 'round';
+    radius?: 8 | 16 | 24;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+    overrideCSS?: CSSProperties;
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export declare type StyleProps = {
+    $width?: string;
+    $height?: string;
+    $backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
+    overrideBackgroundColorKey?: UiColors;
+    borderMode?: 'none' | 'use';
+    $borderWidth?: 1 | 2;
+    $borderColorTheme?: 'grey' | 'blue' | 'green';
+    overrideBorderColorKey?: UiColors;
+    shapeType?: 'rectangle' | 'round';
+    $radius?: 8 | 16 | 24;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+};
+declare const paddingSpacing: {
+    readonly spacing_a: "spacingA";
+    readonly spacing_b: "spacingB";
+    readonly spacing_c: "spacingC";
+    readonly spacing_d: "spacingD";
+    readonly spacing_e: "spacingE";
+    readonly spacing_f: "spacingF";
+    readonly spacing_g: "spacingG";
+    readonly spacing_h: "spacingH";
+    readonly spacing_i: "spacingI";
+    readonly spacing_j: "spacingJ";
+    readonly spacing_k: "spacingK";
+    readonly spacing_l: "spacingL";
+    readonly spacing_m: "spacingM";
+    readonly spacing_n: "spacingN";
+};
+declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: SectionSheetProps): JSX.Element;
+export default SectionSheet;

package/dist/src/mobile/panels/SectionSheet/SectionSheet.js

@@ -0,0 +1,131 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var backgroundColorTheme = {
+    transparent: 'ui_cpnt_sheet_base_03',
+    white: 'ui_cpnt_sheet_base_white',
+    black: 'ui_cpnt_sheet_base_black',
+    base1: 'ui_cpnt_sheet_base_01',
+    base2: 'ui_cpnt_sheet_base_02',
+    base3: 'ui_cpnt_sheet_base'
+};
+var borderColorTheme = {
+    grey: 'ui_cpnt_sheet_border_01',
+    blue: 'ui_cpnt_sheet_border_02',
+    green: 'ui_cpnt_sheet_border_03'
+};
+var paddingSpacing = {
+    spacing_a: 'spacingA',
+    spacing_b: 'spacingB',
+    spacing_c: 'spacingC',
+    spacing_d: 'spacingD',
+    spacing_e: 'spacingE',
+    spacing_f: 'spacingF',
+    spacing_g: 'spacingG',
+    spacing_h: 'spacingH',
+    spacing_i: 'spacingI',
+    spacing_j: 'spacingJ',
+    spacing_k: 'spacingK',
+    spacing_l: 'spacingL',
+    spacing_m: 'spacingM',
+    spacing_n: 'spacingN'
+};
+function SectionSheet(_a) {
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (react_1.default.createElement(S_SectionSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, children));
+}
+var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+    var $radius = _a.$radius;
+    return $radius + "px";
+});
+var paddingTopStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingTop = _a.paddingTop;
+    return paddingTop && (paddingTop === 'none' ? 0 : theme.spacing[paddingSpacing[paddingTop]]);
+});
+var paddingRightStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingRight = _a.paddingRight;
+    return paddingRight && (paddingRight === 'none' ? 0 : theme.spacing[paddingSpacing[paddingRight]]);
+});
+var paddingBottomStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: ", ";\n"], ["\n  padding-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingBottom = _a.paddingBottom;
+    return paddingBottom && (paddingBottom === 'none' ? 0 : theme.spacing[paddingSpacing[paddingBottom]]);
+});
+var paddingLeftStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingLeft = _a.paddingLeft;
+    return paddingLeft && (paddingLeft === 'none' ? 0 : theme.spacing[paddingSpacing[paddingLeft]]);
+});
+var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
+}, function (_a) {
+    var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
+    return overrideBorderColorKey && theme[overrideBorderColorKey];
+});
+var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var $width = _a.$width;
+    return $width;
+}, function (_a) {
+    var $height = _a.$height;
+    return $height;
+}, function (_a) {
+    var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
+    return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
+}, function (_a) {
+    var borderMode = _a.borderMode;
+    return (borderMode === 'use' ? 'solid' : 'none');
+}, function (_a) {
+    var $borderWidth = _a.$borderWidth;
+    return $borderWidth + "px";
+}, function (_a) {
+    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
+    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && radiusStyle;
+}, function (_a) {
+    var paddingTop = _a.paddingTop;
+    return paddingTop !== 'none' && paddingTopStyle;
+}, function (_a) {
+    var paddingRight = _a.paddingRight;
+    return paddingRight !== 'none' && paddingRightStyle;
+}, function (_a) {
+    var paddingBottom = _a.paddingBottom;
+    return paddingBottom !== 'none' && paddingBottomStyle;
+}, function (_a) {
+    var paddingLeft = _a.paddingLeft;
+    return paddingLeft !== 'none' && paddingLeftStyle;
+}, advancedCSS);
+exports.default = SectionSheet;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/mobile/panels/SectionSheet/index.d.ts

@@ -0,0 +1 @@
+export { default as SectionSheet } from './SectionSheet';

package/dist/src/mobile/panels/SectionSheet/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionSheet = void 0;
+var SectionSheet_1 = require("./SectionSheet");
+Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return __importDefault(SectionSheet_1).default; } });

package/dist/src/mobile/panels/index.d.ts

@@ -1,2 +1,5 @@
+import { AnnotationSheet } from './AnnotationSheet';
+import { ContentSheet } from './ContentSheet';
 import { MobileBasicModal } from './MobileBasicModal';
-export { MobileBasicModal };
+import { SectionSheet } from './SectionSheet';
+export { AnnotationSheet, ContentSheet, MobileBasicModal, SectionSheet };

package/dist/src/mobile/panels/index.js

@@ -1,5 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileBasicModal = void 0;
+exports.SectionSheet = exports.MobileBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
+var AnnotationSheet_1 = require("./AnnotationSheet");
+Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
+var ContentSheet_1 = require("./ContentSheet");
+Object.defineProperty(exports, "ContentSheet", { enumerable: true, get: function () { return ContentSheet_1.ContentSheet; } });
 var MobileBasicModal_1 = require("./MobileBasicModal");
 Object.defineProperty(exports, "MobileBasicModal", { enumerable: true, get: function () { return MobileBasicModal_1.MobileBasicModal; } });
+var SectionSheet_1 = require("./SectionSheet");
+Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return SectionSheet_1.SectionSheet; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -20,6 +20,7 @@
     "i18next": "^21.3.2",
     "i18next-browser-languagedetector": "^6.1.2",
     "i18next-intervalplural-postprocessor": "^3.0.0",
+    "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",

package/release-note.md

@@ -1,6 +1,11 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.10]
+## [v0.0.12]
 
-* theme의 spacing에 1.3배 부여
-* theme에 editor관련 font size 추가
-* theme에 editor관련 line height 추가
+* layout
+  * WTA에 추가
+    * x-pds-layout-id="WTA1"
+    * className="WTA2"
+* component
+  * MainButton에 추가
+    * x-pds-component-id="MainButton1"
+    * className="MainButton2"