@lotte-innovate/ui-component-test 0.1.51 → 0.1.52

package/dist/cjs/src/utils/chart.js

@@ -0,0 +1,582 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IsColorMixedDescription = exports.AppearanceDescription = exports.DatalabelsDescription = exports.DatasetsDescription = exports.TitleDescription = exports.LegendDescription = exports.LabelDescription = void 0;
+var LabelDescription = function () { return (<div>
+    <p>차트의 각 데이터 포인트에 대한 레이블을 정의하는데 사용됩니다. </p>
+
+    <ul>
+      <li>
+        이 레이블은 차트의 축 또는 <code>범례(legend)</code>에 표시되며, 데이터 포인트를 식별하는데
+        도움을 줍니다
+      </li>
+      <li>
+        배열 형태로 제공되며, 이를 통해 차트의 각 데이터 포인터가 무엇을 나타내는지 이해할 수
+        있습니다.
+      </li>
+      <li>
+        차트의 데이터 포인트 위에 마우스를 올렸을때 표시되는 <code>tooltip</code>에{' '}
+        <code>lables</code>가 포함됩니다.
+      </li>
+    </ul>
+  </div>); };
+exports.LabelDescription = LabelDescription;
+var LegendDescription = function () { return (<div>
+    <p>차트의 범례를 설정하는데 사용됩니다.</p>
+
+    <p>
+      범례는 차트의 데이터 세트를 설명하는데 사용되며, 각 데이터 세트의 색상과 레이블을 표시합니다.
+    </p>
+
+    <details>
+      <summary style={{ color: 'black' }}>legend props</summary>
+
+      <table>
+        <tr>
+          <th>Props</th>
+          <th>Type</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+        <tr>
+          <td>display</td>
+          <td>boolean</td>
+          <td>범례를 표시할지 여부를 결정합니다</td>
+          <td>true</td>
+        </tr>
+        <tr>
+          <td>position</td>
+          <td>
+            <code>top</code> <code>right</code> <code>bottom</code> <code>left</code>
+          </td>
+          <td>범례의 위치를 설정합니다</td>
+          <td>
+            <code>top</code>
+          </td>
+        </tr>
+        <tr>
+          <td>align</td>
+          <td>
+            <code>start</code> <code>center</code> <code>end</code>
+          </td>
+          <td>범례의 정렬을 설정합니다</td>
+          <td>
+            <code>center</code>
+          </td>
+        </tr>
+        <tr>
+          <td>maxHeight</td>
+          <td>number</td>
+          <td>범례의 최대 높이(픽셀)을 설정합니다</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>maxWidth</td>
+          <td>number</td>
+          <td>범례의 최대 넓이(픽셀)을 설정합니다</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>fullSize</td>
+          <td>boolean</td>
+          <td>캔버스의 전체 너비/높이를 차지해야 한다는 것을 표시합니다</td>
+          <td>true</td>
+        </tr>
+        <tr>
+          <td>reverse</td>
+          <td>boolean</td>
+          <td>데이터 세트를 역순으로 설정합니다.</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>textDirection</td>
+          <td>
+            <code>rtl</code> <code>ltr</code>
+          </td>
+          <td>
+            캔버스에 지정된 CSS에 관계 없이 범례를 렌더링하기 위해 캔버스에서 텍스트 방향을{' '}
+            <code>rtl</code> 또는
+            <code>ltr</code>로 설정합니다.
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>rtl</td>
+          <td>boolean</td>
+          <td>
+            <code>true</code>로 설정 시 오른쪽에서 왼쪽으로 범례를 렌더링합니다.
+          </td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>title</td>
+          <td>object</td>
+          <td>범례의 타이틀 스타일을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>lables</td>
+          <td>object</td>
+          <td>범례의 lables 스타일을 설정합니다.</td>
+          <td></td>
+        </tr>
+      </table>
+    </details>
+
+    <details>
+      <summary style={{ color: 'black' }}>legend title props</summary>
+
+      <table>
+        <tr>
+          <th>Props</th>
+          <th>Type</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+        <tr>
+          <td>display</td>
+          <td>boolean</td>
+          <td>범례 제목을 표시할지 여부를 결정합니다</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>text</td>
+          <td>string</td>
+          <td>범례 제목을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>color</td>
+          <td>string</td>
+          <td>범례의 텍스트 색상을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>padding</td>
+          <td>number</td>
+          <td>범례 제목의 패딩을 설정합니다.</td>
+          <td>0</td>
+        </tr>
+      </table>
+    </details>
+
+    <details>
+      <summary style={{ color: 'black' }}>legend lables props</summary>
+
+      <table>
+        <tr>
+          <th>Props</th>
+          <th>Type</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+        <tr>
+          <td>boxWidth</td>
+          <td>number</td>
+          <td>색상 박스의 넓이를 설정합니다.</td>
+          <td>40</td>
+        </tr>
+        <tr>
+          <td>boxHeight</td>
+          <td>number</td>
+          <td>색상 박스의 높이를 설정합니다.</td>
+          <td>font.size</td>
+        </tr>
+        <tr>
+          <td>padding</td>
+          <td>number</td>
+          <td>색상 박스 간의 패딩을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>textAlign</td>
+          <td>
+            <code>left</code> <code>right</code> <code>center</code>
+          </td>
+          <td>범례 텍스트의 정렬을 설정합니다.</td>
+          <td>
+            <code>center</code>
+          </td>
+        </tr>
+        <tr>
+          <td>color</td>
+          <td>string</td>
+          <td>범례 레이블 텍스트의 색상을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>usePointStyle</td>
+          <td>boolean</td>
+          <td>레이블 스타일을 설정합니다.</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>pointStyleWidth</td>
+          <td>number</td>
+          <td>
+            <code>usePointStyle</code>이 <code>true</code>이면 범례에 사용되는 포인트 스타일의
+            너비입니다.
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>pointStyle</td>
+          <td>
+            <code>circle</code> <code>cross</code> <code>crossRot</code> <code>dash</code>{' '}
+            <code>line</code> <code>rect</code> <code>rectRounded</code> <code>rectRot</code>{' '}
+            <code>star</code> <code>triangle</code>
+            false
+          </td>
+          <td>
+            <code>usePointStyle</code>이 <code>true</code>일때 변경할 수 있는 스타일입니다.
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>useBorderRadius</td>
+          <td>boolean</td>
+          <td></td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>borderRadius</td>
+          <td>number</td>
+          <td></td>
+          <td></td>
+        </tr>
+      </table>
+    </details>
+  </div>); };
+exports.LegendDescription = LegendDescription;
+var TitleDescription = function () { return (<div>
+    <p>차트의 제목을 설정하는데 사용됩니다.</p>
+
+    <p>차트의 상단에 텍스틑를 표시하며 차트의 내용을 설명하거나 강조할 수 있습니다.</p>
+
+    <details>
+      <summary style={{ color: 'black' }}>title props</summary>
+      <table>
+        <tr>
+          <th>Props</th>
+          <th>Type</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+        <tr>
+          <td>display</td>
+          <td>boolean</td>
+          <td>제목을 표시할지 여부를 결정합니다</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>text</td>
+          <td>string | string[]</td>
+          <td>제목에 표시할 텍스트를 설정합니다</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>position</td>
+          <td>
+            <code>top</code> <code>right</code> <code>bottom</code> <code>left</code>
+          </td>
+          <td>제목의 위치를 설정합니다</td>
+          <td>
+            <code>top</code>
+          </td>
+        </tr>
+        <tr>
+          <td>align</td>
+          <td>
+            <code>start</code> <code>center</code> <code>end</code>
+          </td>
+          <td>제목의 정렬을 설정합니다</td>
+          <td>
+            <code>center</code>
+          </td>
+        </tr>
+        <tr>
+          <td>font</td>
+          <td>
+            <ul>
+              <li>size: number</li>
+              <li>
+                weight: <code>normal</code> <code>bold</code> <code>light</code> <code>bold</code>{' '}
+                number
+              </li>
+              <li>lineHeight: number</li>
+            </ul>
+          </td>
+          <td>제목의 폰트 스타일을 설정합니다</td>
+          <td></td>
+        </tr>
+      </table>
+    </details>
+  </div>); };
+exports.TitleDescription = TitleDescription;
+var DatasetsDescription = function (_a) {
+    var _b = _a.isPointStyle, isPointStyle = _b === void 0 ? false : _b;
+    return (<div>
+    <p>차트에 표시될 실제 데이터와 그 데이터를 시각적으로 표현하는 방법을 정의하는데 사용됩니다.</p>
+
+    <p>배열 형태로 제공되며, 각 배열 요소는 하나의 데이터 세트를 나타내는 객체입니다.</p>
+
+    <details>
+      <summary style={{ color: 'black' }}>datasets props</summary>
+      <table>
+        <tr>
+          <th>Props</th>
+          <th>Type</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+        <tr>
+          <td>data</td>
+          <td>object | object[] | number[] | string[]</td>
+          <td>데이터 세트의 데이터를 나타냅니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>label</td>
+          <td>string</td>
+          <td>데이터 세트의 이름을 설정합니다. 범례와 툴팁에 표시됩니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>backgroundColor</td>
+          <td>string[] | string</td>
+          <td>데이터 포인트의 배경색을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>borderColor</td>
+          <td>string[] | string</td>
+          <td>데이터 포인트의 테두리 색을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>borderWidth</td>
+          <td>number</td>
+          <td>데이터 포인트의 테두리 두께를 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>borderRadius</td>
+          <td>number</td>
+          <td>데이터 포인트의 둥글기를 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>borderDashOffset</td>
+          <td>number</td>
+          <td>점선의 시작 위치를 설정합니다. ex, 2: 점선의 시작 지점을 2픽셀 이동</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>offset</td>
+          <td>number</td>
+          <td>각 섹션 사이의 간격 조정</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>weight</td>
+          <td>number</td>
+          <td>각 섹션의 상대적인 두께를 설정, 섹션이 차지하는 공간의 비율을 조정합니다</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>borderDash</td>
+          <td>number[]</td>
+          <td>
+            각 섹션의 테두리를 점선을 설정합니다. ex,[5,5]: 5픽셀 길이의 선과 5픽셀 길이의 간격
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hoverBackgroundColor</td>
+          <td>object</td>
+          <td>마우스 호버 시 배경 색상을 설정합니다</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hoverBorderColor</td>
+          <td>object</td>
+          <td>마우스 호버 시 테두리 색상을 설정합니다</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hoverBorderWidth</td>
+          <td>number</td>
+          <td>마우스 호버 시 테두리 두께를 설정합니다</td>
+          <td></td>
+        </tr>
+        {isPointStyle && (<>
+            <tr>
+              <td>pointBackgroundColor</td>
+              <td>object</td>
+              <td>포인트 배경 색상을 설정합니다</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>pointBorderColor</td>
+              <td>object</td>
+              <td>포인트 테두리 색상을 설정합니다</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>pointBorderWidth</td>
+              <td>number</td>
+              <td>포인트 테두리 두께를 설정합니다</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>pointHoverBackgroundColor</td>
+              <td>object</td>
+              <td>마우스 호버 시 포인트 배경 색상을 설정합니다</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>pointHoverBorderColor</td>
+              <td>object</td>
+              <td>마우스 호버 시 포인트 테두리 색상을 설정합니다</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>pointHoverBorderWidth</td>
+              <td>number</td>
+              <td>마우스 호버 시 포인트 테두리 두께를 설정합니다</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>fill</td>
+              <td>boolean</td>
+              <td>선 아래 영역을 채울지 여부를 설정합니다</td>
+              <td></td>
+            </tr>
+          </>)}
+        <tr>
+          <td>order</td>
+          <td>number</td>
+          <td>데이터셋 순서를 설정합니다</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>hidden</td>
+          <td>boolean</td>
+          <td>데이터셋 표시 여부를 설정합니다</td>
+          <td></td>
+        </tr>
+      </table>
+    </details>
+  </div>);
+};
+exports.DatasetsDescription = DatasetsDescription;
+var DatalabelsDescription = function () { return (<div>
+    <p>차트의 데이터 레이블을 설정하고 스타일링하는 데 사용됩니다.</p>
+
+    <p>
+      데이터 레이블은 각 데이터 포인트에 텍스트를 표시하여 데이터를 더 명확하게 설명하는 데 도움이
+      됩니다.
+    </p>
+
+    <details>
+      <summary style={{ color: 'black' }}>datalabels props</summary>
+
+      <table>
+        <tr>
+          <th>Props</th>
+          <th>Type</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+        <tr>
+          <td>display</td>
+          <td>boolean</td>
+          <td>데이터 레이블을 표시할지 여부를 결정합니다</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>color</td>
+          <td>string</td>
+          <td>데이터 레이블의 텍스트 색상을 설정합니다.</td>
+          <td>gray</td>
+        </tr>
+        <tr>
+          <td>align</td>
+          <td>
+            <code>start</code> <code>center</code> <code>end</code> number
+          </td>
+          <td>데이터 레이블의 정렬을 설정합니다</td>
+          <td>
+            <code>center</code>
+          </td>
+        </tr>
+        <tr>
+          <td>backgroundColor</td>
+          <td>string</td>
+          <td>데이터 레이블의 배경색을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>borderColor</td>
+          <td>string</td>
+          <td>데이터 레이블의 테두리 색을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>borderRadius</td>
+          <td>number</td>
+          <td>데이터 레이블의 테두리 반경을 설정합니다.</td>
+          <td>0</td>
+        </tr>
+        <tr>
+          <td>borderWidth</td>
+          <td>number</td>
+          <td>데이터 레이블의 테두리 두께를 설정합니다.</td>
+          <td>0</td>
+        </tr>
+        <tr>
+          <td>font</td>
+          <td>object</td>
+          <td>데이터 레이블의 폰트 스타일을 설정합니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>formatter</td>
+          <td>function</td>
+          <td>데이터 레이블의 텍스트를 포맷하는 함수입니다.</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>padding</td>
+          <td>number</td>
+          <td>데이터 레이블의 패딩을 설정합니다.</td>
+          <td></td>
+        </tr>
+      </table>
+    </details>
+  </div>); };
+exports.DatalabelsDescription = DatalabelsDescription;
+var AppearanceDescription = function () { return (<div>
+    <p>
+      <code>appearance</code> props는 컴포넌트의 스타일을 변경합니다.
+    </p>
+
+    <p>
+      <code>soft</code>, <code>solid</code> 두가지 옵션이 있으며 기본값은 <code>solid</code>입니다.
+    </p>
+  </div>); };
+exports.AppearanceDescription = AppearanceDescription;
+var IsColorMixedDescription = function () { return (<div>
+    <p>
+      <code>isColorMixed</code>은 <code>boolean</code> 타입으로 차트의 기본 색상 스타일을
+      설정합니다.
+    </p>
+
+    <p>
+      <code>true</code>인 경우 색상이 교차됨, <code>false</code>인 경우 색상 순차적으로 사용됩니다.
+    </p>
+
+    <p>
+      기본값은 <code>true</code> 입니다.
+    </p>
+  </div>); };
+exports.IsColorMixedDescription = IsColorMixedDescription;

package/dist/cjs/src/utils/move-cjs.mjs

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var child_process_1 = require("child_process");
+var os_1 = __importDefault(require("os"));
+var isWindows = os_1.default.platform() === 'win32';
+var source = 'dist/src/lib';
+var destination = 'dist/cjs/lib';
+try {
+    if (isWindows) {
+        (0, child_process_1.execSync)("move \"".concat(source.replace(/\//g, '\\'), "\" \"").concat(destination.replace(/\//g, '\\'), "\""), {
+            stdio: 'inherit',
+        });
+    }
+    else {
+        (0, child_process_1.execSync)("mv ".concat(source, " ").concat(destination), { stdio: 'inherit' });
+    }
+    (0, child_process_1.execSync)('rimraf dist/src');
+    console.log('Move operation completed successfully.');
+}
+catch (error) {
+    console.error('Error during move operation:', error);
+    process.exit(1);
+}

package/dist/cjs/src/utils/move-esm.mjs

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var child_process_1 = require("child_process");
+var os_1 = __importDefault(require("os"));
+var isWindows = os_1.default.platform() === 'win32';
+var source = 'dist/src/lib';
+var destination = 'dist/esm/lib';
+try {
+    if (isWindows) {
+        (0, child_process_1.execSync)("move \"".concat(source.replace(/\//g, '\\'), "\" \"").concat(destination.replace(/\//g, '\\'), "\""), {
+            stdio: 'inherit',
+        });
+    }
+    else {
+        (0, child_process_1.execSync)("mv ".concat(source, " ").concat(destination), { stdio: 'inherit' });
+    }
+    (0, child_process_1.execSync)('rimraf dist/src');
+    // 기존 리드미파일 백업
+    if (isWindows) {
+        (0, child_process_1.execSync)('move README.md README_backup.md', { stdio: 'inherit' });
+    }
+    else {
+        (0, child_process_1.execSync)('mv README.md README_backup.md', { stdio: 'inherit' });
+    }
+    // npm 패키지 리드미 파일 이름 변경
+    if (isWindows) {
+        (0, child_process_1.execSync)('copy src\\lib\\README.md README.md', { stdio: 'inherit' });
+    }
+    else {
+        (0, child_process_1.execSync)('cp src/lib/README.md README.md', { stdio: 'inherit' });
+    }
+    console.log('Move operation completed successfully.');
+}
+catch (error) {
+    console.error('Error during move operation:', error);
+    process.exit(1);
+}