@jk-core/components 1.1.17 → 1.1.18

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 (83) hide show
  1. package/README.md +73 -73
  2. package/dist/index.js +42 -42
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.umd.cjs +2 -2
  5. package/dist/index.umd.cjs.map +1 -1
  6. package/package.json +99 -99
  7. package/src/Calendar/Calendar.module.scss +213 -213
  8. package/src/Calendar/RangeCalendar.tsx +125 -125
  9. package/src/Calendar/ScrollCalendar.module.scss +214 -214
  10. package/src/Calendar/ScrollCalendar.tsx +124 -124
  11. package/src/Calendar/SingleCalendar.tsx +121 -121
  12. package/src/Calendar/components/DateLabel/DateLabel.module.scss +89 -89
  13. package/src/Calendar/components/DateLabel/index.tsx +91 -91
  14. package/src/Calendar/components/DayTile/DayTile.module.scss +117 -117
  15. package/src/Calendar/components/DayTile/index.tsx +108 -108
  16. package/src/Calendar/components/MonthTile/MonthTile.module.scss +59 -59
  17. package/src/Calendar/components/MonthTile/index.tsx +50 -50
  18. package/src/Calendar/components/ViewSelector/ViewSelector.module.scss +48 -48
  19. package/src/Calendar/components/ViewSelector/index.tsx +49 -49
  20. package/src/Calendar/components/YearTile/YearTile.module.scss +85 -85
  21. package/src/Calendar/components/YearTile/index.tsx +65 -65
  22. package/src/Calendar/hooks/useCalendarNav.ts +83 -83
  23. package/src/Calendar/hooks/useDateSelect.ts +54 -54
  24. package/src/Calendar/index.scss +189 -189
  25. package/src/Calendar/index.tsx +66 -66
  26. package/src/Calendar/type.ts +3 -3
  27. package/src/Calendar/utils/getWeeksInMonth.ts +45 -45
  28. package/src/Calendar/utils/isInRange.ts +8 -8
  29. package/src/Calendar/utils/isSameDay.ts +21 -21
  30. package/src/assets/arrow.svg +11 -11
  31. package/src/assets/close.svg +15 -15
  32. package/src/assets/drop-arrow.svg +3 -3
  33. package/src/common/Accordion/Accordion.module.scss +53 -53
  34. package/src/common/Accordion/arrow-down.svg +3 -3
  35. package/src/common/Accordion/arrow-up.svg +3 -3
  36. package/src/common/Accordion/index.tsx +54 -54
  37. package/src/common/Breadcrumbs/Breadcrumbs.module.scss +46 -46
  38. package/src/common/Breadcrumbs/home.svg +5 -5
  39. package/src/common/Breadcrumbs/index.tsx +82 -82
  40. package/src/common/Button/Button.module.scss +127 -127
  41. package/src/common/Button/index.tsx +60 -60
  42. package/src/common/Card/Card.module.scss +28 -28
  43. package/src/common/Card/index.tsx +19 -19
  44. package/src/common/Divider/Divider.module.scss +101 -101
  45. package/src/common/Divider/index.tsx +24 -24
  46. package/src/common/DropDown/DropDown.module.scss +135 -135
  47. package/src/common/DropDown/List.tsx +156 -156
  48. package/src/common/DropDown/arrow-down.svg +3 -3
  49. package/src/common/DropDown/index.tsx +108 -108
  50. package/src/common/DropDown/search.svg +4 -4
  51. package/src/common/Pagination/Pagination.module.scss +210 -210
  52. package/src/common/Pagination/arrow-left.svg +11 -11
  53. package/src/common/Pagination/arrow-right.svg +11 -11
  54. package/src/common/Pagination/index.tsx +156 -156
  55. package/src/common/SegmentButton/SegmentButton.module.scss +46 -45
  56. package/src/common/SegmentButton/index.tsx +79 -79
  57. package/src/common/Skeleton/Skeleton.module.scss +80 -80
  58. package/src/common/Skeleton/index.tsx +47 -47
  59. package/src/common/SwitchButton/SwitchButton.module.scss +65 -65
  60. package/src/common/SwitchButton/index.tsx +57 -57
  61. package/src/common/Table/Table.module.scss +70 -70
  62. package/src/common/Table/index.tsx +128 -128
  63. package/src/index.scss +1 -1
  64. package/src/index.tsx +21 -21
  65. package/src/styles/color.scss +346 -346
  66. package/src/styles/font-face.scss +18 -18
  67. package/src/styles/font.scss +49 -49
  68. package/src/styles/mediaQuery.scss +22 -22
  69. package/src/styles/scrollbar.scss +71 -71
  70. package/src/svg.d.ts +6 -6
  71. package/src/utils/styles/mediaQuery.scss +22 -22
  72. package/src/utils/ts/allowDecimal.ts +4 -4
  73. package/src/utils/ts/autoHypen.ts +33 -33
  74. package/src/utils/ts/calculateMax.ts +24 -24
  75. package/src/utils/ts/checkIsMobilePlatform.ts +15 -15
  76. package/src/utils/ts/formatFileSize.ts +16 -16
  77. package/src/utils/ts/formatMoney.ts +16 -16
  78. package/src/utils/ts/gradientRatio.ts +61 -61
  79. package/src/utils/ts/kiloToMega.ts +30 -30
  80. package/src/utils/ts/maskingPhone.ts +8 -8
  81. package/src/utils/ts/toQueryString.ts +7 -7
  82. package/src/utils/ts/valueAsNumber.ts +15 -15
  83. 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" />