@jk-core/components 1.1.17 → 1.1.19

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 (91) hide show
  1. package/README.md +73 -73
  2. package/dist/index.js +1299 -997
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.umd.cjs +8 -8
  5. package/dist/index.umd.cjs.map +1 -1
  6. package/dist/src/common/Carousel/index.d.ts +15 -0
  7. package/dist/src/common/RollingBanner/index.d.ts +11 -0
  8. package/dist/src/index.d.ts +3 -1
  9. package/dist/src/utils/ts/formatMoney.d.ts +1 -1
  10. package/package.json +99 -99
  11. package/src/Calendar/Calendar.module.scss +213 -213
  12. package/src/Calendar/RangeCalendar.tsx +125 -125
  13. package/src/Calendar/ScrollCalendar.module.scss +214 -214
  14. package/src/Calendar/ScrollCalendar.tsx +124 -124
  15. package/src/Calendar/SingleCalendar.tsx +121 -121
  16. package/src/Calendar/components/DateLabel/DateLabel.module.scss +89 -89
  17. package/src/Calendar/components/DateLabel/index.tsx +91 -91
  18. package/src/Calendar/components/DayTile/DayTile.module.scss +117 -117
  19. package/src/Calendar/components/DayTile/index.tsx +108 -108
  20. package/src/Calendar/components/MonthTile/MonthTile.module.scss +59 -59
  21. package/src/Calendar/components/MonthTile/index.tsx +50 -50
  22. package/src/Calendar/components/ViewSelector/ViewSelector.module.scss +48 -48
  23. package/src/Calendar/components/ViewSelector/index.tsx +49 -49
  24. package/src/Calendar/components/YearTile/YearTile.module.scss +85 -85
  25. package/src/Calendar/components/YearTile/index.tsx +65 -65
  26. package/src/Calendar/hooks/useCalendarNav.ts +83 -83
  27. package/src/Calendar/hooks/useDateSelect.ts +54 -54
  28. package/src/Calendar/index.scss +189 -189
  29. package/src/Calendar/index.tsx +66 -66
  30. package/src/Calendar/type.ts +3 -3
  31. package/src/Calendar/utils/getWeeksInMonth.ts +45 -45
  32. package/src/Calendar/utils/isInRange.ts +8 -8
  33. package/src/Calendar/utils/isSameDay.ts +21 -21
  34. package/src/assets/arrow.svg +11 -11
  35. package/src/assets/close.svg +15 -15
  36. package/src/assets/drop-arrow.svg +3 -3
  37. package/src/common/Accordion/Accordion.module.scss +53 -53
  38. package/src/common/Accordion/arrow-down.svg +3 -3
  39. package/src/common/Accordion/arrow-up.svg +3 -3
  40. package/src/common/Accordion/index.tsx +54 -54
  41. package/src/common/Breadcrumbs/Breadcrumbs.module.scss +46 -46
  42. package/src/common/Breadcrumbs/home.svg +5 -5
  43. package/src/common/Breadcrumbs/index.tsx +82 -82
  44. package/src/common/Button/Button.module.scss +127 -127
  45. package/src/common/Button/index.tsx +60 -60
  46. package/src/common/Card/Card.module.scss +28 -28
  47. package/src/common/Card/index.tsx +19 -19
  48. package/src/common/Carousel/Carousel.module.scss +222 -0
  49. package/src/common/Carousel/index.tsx +411 -0
  50. package/src/common/Divider/Divider.module.scss +101 -101
  51. package/src/common/Divider/index.tsx +24 -24
  52. package/src/common/DropDown/DropDown.module.scss +135 -135
  53. package/src/common/DropDown/List.tsx +156 -156
  54. package/src/common/DropDown/arrow-down.svg +3 -3
  55. package/src/common/DropDown/index.tsx +108 -108
  56. package/src/common/DropDown/search.svg +4 -4
  57. package/src/common/Pagination/Pagination.module.scss +210 -210
  58. package/src/common/Pagination/arrow-left.svg +11 -11
  59. package/src/common/Pagination/arrow-right.svg +11 -11
  60. package/src/common/Pagination/index.tsx +156 -156
  61. package/src/common/RollingBanner/RollingBanner.module.scss +126 -0
  62. package/src/common/RollingBanner/index.tsx +140 -0
  63. package/src/common/SegmentButton/SegmentButton.module.scss +46 -45
  64. package/src/common/SegmentButton/index.tsx +79 -79
  65. package/src/common/Skeleton/Skeleton.module.scss +80 -80
  66. package/src/common/Skeleton/index.tsx +47 -47
  67. package/src/common/SwitchButton/SwitchButton.module.scss +65 -65
  68. package/src/common/SwitchButton/index.tsx +57 -57
  69. package/src/common/Table/Table.module.scss +70 -70
  70. package/src/common/Table/index.tsx +128 -128
  71. package/src/index.scss +1 -1
  72. package/src/index.tsx +24 -22
  73. package/src/styles/color.scss +346 -346
  74. package/src/styles/font-face.scss +18 -18
  75. package/src/styles/font.scss +49 -49
  76. package/src/styles/mediaQuery.scss +22 -22
  77. package/src/styles/scrollbar.scss +71 -71
  78. package/src/svg.d.ts +6 -6
  79. package/src/utils/styles/mediaQuery.scss +22 -22
  80. package/src/utils/ts/allowDecimal.ts +4 -4
  81. package/src/utils/ts/autoHypen.ts +33 -33
  82. package/src/utils/ts/calculateMax.ts +24 -24
  83. package/src/utils/ts/checkIsMobilePlatform.ts +15 -15
  84. package/src/utils/ts/formatFileSize.ts +16 -16
  85. package/src/utils/ts/formatMoney.ts +16 -16
  86. package/src/utils/ts/gradientRatio.ts +61 -61
  87. package/src/utils/ts/kiloToMega.ts +30 -30
  88. package/src/utils/ts/maskingPhone.ts +8 -8
  89. package/src/utils/ts/toQueryString.ts +7 -7
  90. package/src/utils/ts/valueAsNumber.ts +15 -15
  91. package/src/vite-env.d.ts +2 -2
@@ -1,61 +1,61 @@
1
- /**
2
- * 특정 퍼센트에서 시작 색상과 끝 색상 사이의 그라디언트 색상을 계산합니다.
3
- *
4
- * @param {Object} params - 그라디언트 계산을 위한 매개변수입니다.
5
- * @param {number} params.currPercent - 그라디언트 색상을 계산할 현재 퍼센트입니다.
6
- * @param {number} params.startPercent - 그라디언트의 시작 퍼센트입니다.
7
- * @param {string} params.startColor - 그라디언트의 시작 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
8
- * @param {number} params.endPercent - 그라디언트의 끝 퍼센트입니다.
9
- * @param {string} params.endColor - 그라디언트의 끝 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
10
- * @returns {string} 계산된 그라디언트 색상입니다. 16진수 형식(앞에 # 없이)으로 반환됩니다.
11
- */
12
- const gradientRatio = ({
13
- currPercent,
14
- startPercent,
15
- startColor,
16
- endPercent,
17
- endColor,
18
- }: {
19
- currPercent: number;
20
- startPercent: number;
21
- startColor: string;
22
- endPercent: number;
23
- endColor: string;
24
- }) => {
25
- if (currPercent < startPercent) return startColor;
26
- if (currPercent > endPercent) return endColor;
27
-
28
- const start = {
29
- R: parseInt(startColor.substr(0, 2), 16),
30
- G: parseInt(startColor.substr(2, 2), 16),
31
- B: parseInt(startColor.substr(4, 2), 16),
32
- };
33
- const end = {
34
- R: parseInt(endColor.substr(0, 2), 16),
35
- G: parseInt(endColor.substr(2, 2), 16),
36
- B: parseInt(endColor.substr(4, 2), 16),
37
- };
38
- const R = {
39
- coefficient: (end.R - start.R) / (endPercent - startPercent),
40
- intercept: start.R - (((end.R - start.R) / (endPercent - startPercent)) * startPercent),
41
- value: '',
42
- };
43
- const G = {
44
- coefficient: (end.G - start.G) / (endPercent - startPercent),
45
- intercept: start.G - (((end.G - start.G) / (endPercent - startPercent)) * startPercent),
46
- value: '',
47
- };
48
- const B = {
49
- coefficient: (end.B - start.B) / (endPercent - startPercent),
50
- intercept: start.B - (((end.B - start.B) / (endPercent - startPercent)) * startPercent),
51
- value: '',
52
- };
53
-
54
- R.value = Math.round(R.coefficient * currPercent + R.intercept).toString(16).padStart(2, '0');
55
- G.value = Math.round(G.coefficient * currPercent + G.intercept).toString(16).padStart(2, '0');
56
- B.value = Math.round(B.coefficient * currPercent + B.intercept).toString(16).padStart(2, '0');
57
-
58
- return (R.value + G.value + B.value);
59
- };
60
-
61
- export default gradientRatio;
1
+ /**
2
+ * 특정 퍼센트에서 시작 색상과 끝 색상 사이의 그라디언트 색상을 계산합니다.
3
+ *
4
+ * @param {Object} params - 그라디언트 계산을 위한 매개변수입니다.
5
+ * @param {number} params.currPercent - 그라디언트 색상을 계산할 현재 퍼센트입니다.
6
+ * @param {number} params.startPercent - 그라디언트의 시작 퍼센트입니다.
7
+ * @param {string} params.startColor - 그라디언트의 시작 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
8
+ * @param {number} params.endPercent - 그라디언트의 끝 퍼센트입니다.
9
+ * @param {string} params.endColor - 그라디언트의 끝 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
10
+ * @returns {string} 계산된 그라디언트 색상입니다. 16진수 형식(앞에 # 없이)으로 반환됩니다.
11
+ */
12
+ const gradientRatio = ({
13
+ currPercent,
14
+ startPercent,
15
+ startColor,
16
+ endPercent,
17
+ endColor,
18
+ }: {
19
+ currPercent: number;
20
+ startPercent: number;
21
+ startColor: string;
22
+ endPercent: number;
23
+ endColor: string;
24
+ }) => {
25
+ if (currPercent < startPercent) return startColor;
26
+ if (currPercent > endPercent) return endColor;
27
+
28
+ const start = {
29
+ R: parseInt(startColor.substr(0, 2), 16),
30
+ G: parseInt(startColor.substr(2, 2), 16),
31
+ B: parseInt(startColor.substr(4, 2), 16),
32
+ };
33
+ const end = {
34
+ R: parseInt(endColor.substr(0, 2), 16),
35
+ G: parseInt(endColor.substr(2, 2), 16),
36
+ B: parseInt(endColor.substr(4, 2), 16),
37
+ };
38
+ const R = {
39
+ coefficient: (end.R - start.R) / (endPercent - startPercent),
40
+ intercept: start.R - (((end.R - start.R) / (endPercent - startPercent)) * startPercent),
41
+ value: '',
42
+ };
43
+ const G = {
44
+ coefficient: (end.G - start.G) / (endPercent - startPercent),
45
+ intercept: start.G - (((end.G - start.G) / (endPercent - startPercent)) * startPercent),
46
+ value: '',
47
+ };
48
+ const B = {
49
+ coefficient: (end.B - start.B) / (endPercent - startPercent),
50
+ intercept: start.B - (((end.B - start.B) / (endPercent - startPercent)) * startPercent),
51
+ value: '',
52
+ };
53
+
54
+ R.value = Math.round(R.coefficient * currPercent + R.intercept).toString(16).padStart(2, '0');
55
+ G.value = Math.round(G.coefficient * currPercent + G.intercept).toString(16).padStart(2, '0');
56
+ B.value = Math.round(B.coefficient * currPercent + B.intercept).toString(16).padStart(2, '0');
57
+
58
+ return (R.value + G.value + B.value);
59
+ };
60
+
61
+ export default gradientRatio;
@@ -1,30 +1,30 @@
1
- import { roundNum } from '@jk-core/utils';
2
-
3
- const KiloToMega = (amount: number | null | undefined, unit = 'Wh', scale = 2, isKilo = true) => {
4
- const validAmount = amount ?? 0;
5
-
6
- if (!isKilo) {
7
- if (roundNum(validAmount / Math.pow(10, 9)) >= 1) {
8
- return { generation: roundNum(validAmount / Math.pow(10, 9), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 9), scale)} G${unit}` };
9
- }
10
- if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
11
- return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} M${unit}` };
12
- }
13
- if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
14
- return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `k${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} k${unit}` };
15
- }
16
-
17
- return { generation: roundNum(validAmount, scale), unit: `${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} ${unit}` };
18
- }
19
-
20
- if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
21
- return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} G${unit}` };
22
- }
23
- if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
24
- return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} M${unit}` };
25
- }
26
-
27
- return { generation: roundNum(validAmount, scale), unit: `k${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} k${unit}` };
28
- };
29
-
30
- export default KiloToMega;
1
+ import { roundNum } from '@jk-core/utils';
2
+
3
+ const KiloToMega = (amount: number | null | undefined, unit = 'Wh', scale = 2, isKilo = true) => {
4
+ const validAmount = amount ?? 0;
5
+
6
+ if (!isKilo) {
7
+ if (roundNum(validAmount / Math.pow(10, 9)) >= 1) {
8
+ return { generation: roundNum(validAmount / Math.pow(10, 9), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 9), scale)} G${unit}` };
9
+ }
10
+ if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
11
+ return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} M${unit}` };
12
+ }
13
+ if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
14
+ return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `k${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} k${unit}` };
15
+ }
16
+
17
+ return { generation: roundNum(validAmount, scale), unit: `${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} ${unit}` };
18
+ }
19
+
20
+ if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
21
+ return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} G${unit}` };
22
+ }
23
+ if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
24
+ return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} M${unit}` };
25
+ }
26
+
27
+ return { generation: roundNum(validAmount, scale), unit: `k${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} k${unit}` };
28
+ };
29
+
30
+ export default KiloToMega;
@@ -1,9 +1,9 @@
1
- const maskingPhone = (phone: string = '') => {
2
- const phoneArr = phone.split('-');
3
- if (phoneArr.length === 3) {
4
- return `${phoneArr[0]}-****-${phoneArr[2]}`;
5
- }
6
- return phone;
7
- };
8
-
1
+ const maskingPhone = (phone: string = '') => {
2
+ const phoneArr = phone.split('-');
3
+ if (phoneArr.length === 3) {
4
+ return `${phoneArr[0]}-****-${phoneArr[2]}`;
5
+ }
6
+ return phone;
7
+ };
8
+
9
9
  export default maskingPhone;
@@ -1,7 +1,7 @@
1
- const makeQueryString = ({ path, data }: { path: string; data: object; }) =>
2
- `${path}?${Object.entries(data).reduce((acc, [key, value]) => {
3
- acc.append(key, value);
4
- return acc;
5
- }, new URLSearchParams())}`;
6
-
7
- export default makeQueryString;
1
+ const makeQueryString = ({ path, data }: { path: string; data: object; }) =>
2
+ `${path}?${Object.entries(data).reduce((acc, [key, value]) => {
3
+ acc.append(key, value);
4
+ return acc;
5
+ }, new URLSearchParams())}`;
6
+
7
+ export default makeQueryString;
@@ -1,16 +1,16 @@
1
- /**
2
- * useForm의 register option중
3
- * valueAsNumber: true인 경우에
4
- * input 필드가 비어있는 경우 (즉, ''인 경우)
5
- * 필드값이 NaN으로 할당되어 이를 대체하기위한 함수
6
- *
7
- * e.g.) ...register('calibrationFactor', valueAsNumber()),
8
- * e.g.) ...register('vltMp', { required: true, ...valueAsNumber() }),
9
- */
10
- export const valueAsNumber = () => ({
11
- setValueAs: (v: string): undefined | string | number => {
12
- if (v === '' || v === undefined) return undefined;
13
- if (Number.isNaN(Number(v))) return v;
14
- return Number(v);
15
- },
1
+ /**
2
+ * useForm의 register option중
3
+ * valueAsNumber: true인 경우에
4
+ * input 필드가 비어있는 경우 (즉, ''인 경우)
5
+ * 필드값이 NaN으로 할당되어 이를 대체하기위한 함수
6
+ *
7
+ * e.g.) ...register('calibrationFactor', valueAsNumber()),
8
+ * e.g.) ...register('vltMp', { required: true, ...valueAsNumber() }),
9
+ */
10
+ export const valueAsNumber = () => ({
11
+ setValueAs: (v: string): undefined | string | number => {
12
+ if (v === '' || v === undefined) return undefined;
13
+ if (Number.isNaN(Number(v))) return v;
14
+ return Number(v);
15
+ },
16
16
  });
package/src/vite-env.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- /// <reference types="vite/client" />
2
- /// <reference types="vite-plugin-svgr/client" />
1
+ /// <reference types="vite/client" />
2
+ /// <reference types="vite-plugin-svgr/client" />