@jk-core/components 0.1.15 → 1.0.0

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 (53) hide show
  1. package/dist/index.d.ts +2 -4
  2. package/dist/index.js +665 -1030
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.umd.cjs +8 -16
  5. package/dist/index.umd.cjs.map +1 -1
  6. package/dist/src/index.d.ts +4 -0
  7. package/dist/vite.config.d.ts +2 -0
  8. package/package.json +24 -21
  9. package/src/Calendar/Calendar.module.scss +213 -0
  10. package/src/Calendar/RangeCalendar.tsx +125 -0
  11. package/src/Calendar/ScrollCalendar.module.scss +214 -0
  12. package/src/Calendar/ScrollCalendar.tsx +124 -0
  13. package/src/Calendar/SingleCalendar.tsx +121 -0
  14. package/src/Calendar/components/DateLabel/DateLabel.module.scss +89 -0
  15. package/src/Calendar/components/DateLabel/index.tsx +91 -0
  16. package/src/Calendar/components/DayTile/DayTile.module.scss +117 -0
  17. package/src/Calendar/components/DayTile/index.tsx +100 -0
  18. package/src/Calendar/components/MonthTile/MonthTile.module.scss +59 -0
  19. package/src/Calendar/components/MonthTile/index.tsx +50 -0
  20. package/src/Calendar/components/ViewSelector/ViewSelector.module.scss +48 -0
  21. package/src/Calendar/components/ViewSelector/index.tsx +49 -0
  22. package/src/Calendar/components/YearTile/YearTile.module.scss +86 -0
  23. package/src/Calendar/components/YearTile/index.tsx +65 -0
  24. package/src/Calendar/hooks/useCalendarNav.ts +80 -0
  25. package/src/Calendar/hooks/useDateSelect.ts +54 -0
  26. package/src/Calendar/index.scss +189 -0
  27. package/src/Calendar/index.tsx +66 -0
  28. package/src/Calendar/type.ts +3 -0
  29. package/src/Calendar/utils/getWeeksInMonth.ts +45 -0
  30. package/src/Calendar/utils/isInRange.ts +8 -0
  31. package/src/Calendar/utils/isSameDay.ts +21 -0
  32. package/src/assets/arrow.svg +12 -0
  33. package/src/assets/close.svg +16 -0
  34. package/src/assets/drop-arrow.svg +3 -0
  35. package/src/index.tsx +5 -0
  36. package/src/styles/mediaQuery.scss +22 -0
  37. package/src/svg.d.ts +4 -0
  38. package/src/vite-env.d.ts +2 -0
  39. /package/dist/{Calendar → src/Calendar}/RangeCalendar.d.ts +0 -0
  40. /package/dist/{Calendar → src/Calendar}/ScrollCalendar.d.ts +0 -0
  41. /package/dist/{Calendar → src/Calendar}/SingleCalendar.d.ts +0 -0
  42. /package/dist/{Calendar → src/Calendar}/components/DateLabel/index.d.ts +0 -0
  43. /package/dist/{Calendar → src/Calendar}/components/DayTile/index.d.ts +0 -0
  44. /package/dist/{Calendar → src/Calendar}/components/MonthTile/index.d.ts +0 -0
  45. /package/dist/{Calendar → src/Calendar}/components/ViewSelector/index.d.ts +0 -0
  46. /package/dist/{Calendar → src/Calendar}/components/YearTile/index.d.ts +0 -0
  47. /package/dist/{Calendar → src/Calendar}/hooks/useCalendarNav.d.ts +0 -0
  48. /package/dist/{Calendar → src/Calendar}/hooks/useDateSelect.d.ts +0 -0
  49. /package/dist/{Calendar → src/Calendar}/index.d.ts +0 -0
  50. /package/dist/{Calendar → src/Calendar}/type.d.ts +0 -0
  51. /package/dist/{Calendar → src/Calendar}/utils/getWeeksInMonth.d.ts +0 -0
  52. /package/dist/{Calendar → src/Calendar}/utils/isInRange.d.ts +0 -0
  53. /package/dist/{Calendar → src/Calendar}/utils/isSameDay.d.ts +0 -0
@@ -0,0 +1,45 @@
1
+ const getWeeksInMonth = (viewDate:Date) => {
2
+ const startOfMonth = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
3
+ const endOfMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);
4
+ const weeks = [];
5
+ let currentWeek = [];
6
+
7
+ const startDayOfWeek = startOfMonth.getDay();
8
+ if (startDayOfWeek !== 0) {
9
+ const prevMonthEnd = new Date(startOfMonth);
10
+ prevMonthEnd.setDate(0);
11
+ for (let i = startDayOfWeek - 1; i >= 0; i -= 1) {
12
+ const prevDate = new Date(prevMonthEnd);
13
+ prevDate.setDate(prevMonthEnd.getDate() - i);
14
+ currentWeek.push({ thisMonth: 'before', date: prevDate });
15
+ }
16
+ }
17
+
18
+ const currentDate = new Date(startOfMonth);
19
+
20
+ while (currentDate <= endOfMonth) {
21
+ currentWeek.push({ thisMonth: 'this', date: new Date(currentDate) });
22
+ if (currentDate.getDay() === 6) {
23
+ weeks.push(currentWeek);
24
+ currentWeek = [];
25
+ }
26
+ currentDate.setDate(currentDate.getDate() + 1);
27
+ }
28
+
29
+ const endDayOfWeek = endOfMonth.getDay();
30
+ if (endDayOfWeek !== 6) {
31
+ for (let i = 1; i <= 6 - endDayOfWeek; i += 1) {
32
+ const nextDate = new Date(endOfMonth);
33
+ nextDate.setDate(endOfMonth.getDate() + i);
34
+ currentWeek.push({ thisMonth: 'after', date: nextDate });
35
+ }
36
+ }
37
+
38
+ if (currentWeek.length > 0) {
39
+ weeks.push(currentWeek);
40
+ }
41
+
42
+ return weeks;
43
+ };
44
+
45
+ export default getWeeksInMonth;
@@ -0,0 +1,8 @@
1
+ import { CalendarRange } from '../type';
2
+
3
+ const isInRange = (day: Date, range?:CalendarRange) => {
4
+ if (!range?.[0] || !range?.[1]) return false;
5
+ return day >= range[0] && day < range[1];
6
+ };
7
+
8
+ export default isInRange;
@@ -0,0 +1,21 @@
1
+ import { CalendarView } from '../type';
2
+
3
+ const isSameDay = (date1: Date | null, date2: Date | null, view: CalendarView = 'day'): boolean => {
4
+ if (date1 === null || date2 === null) return false;
5
+
6
+ switch (view) {
7
+ case 'day':
8
+ return date1.getFullYear() === date2.getFullYear()
9
+ && date1.getMonth() === date2.getMonth()
10
+ && date1.getDate() === date2.getDate();
11
+ case 'month':
12
+ return date1.getFullYear() === date2.getFullYear()
13
+ && date1.getMonth() === date2.getMonth();
14
+ case 'year':
15
+ return date1.getFullYear() === date2.getFullYear();
16
+ default:
17
+ return false;
18
+ }
19
+ };
20
+
21
+ export default isSameDay;
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
2
+
3
+ <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
4
+ <svg width="64px" height="64px" viewBox="0 0 24 24" fill="#0F0F0F" xmlns="http://www.w3.org/2000/svg">
5
+
6
+ <g id="SVGRepo_bgCarrier" stroke-width="0"/>
7
+
8
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
9
+
10
+ <g id="SVGRepo_iconCarrier"> <path d="M16.1795 3.26875C15.7889 2.87823 15.1558 2.87823 14.7652 3.26875L8.12078 9.91322C6.94952 11.0845 6.94916 12.9833 8.11996 14.155L14.6903 20.7304C15.0808 21.121 15.714 21.121 16.1045 20.7304C16.495 20.3399 16.495 19.7067 16.1045 19.3162L9.53246 12.7442C9.14194 12.3536 9.14194 11.7205 9.53246 11.33L16.1795 4.68297C16.57 4.29244 16.57 3.65928 16.1795 3.26875Z"/> </g>
11
+
12
+ </svg>
@@ -0,0 +1,16 @@
1
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
2
+
3
+ <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
4
+ <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000" fill="#000000" stroke-width="0.696">
5
+
6
+ <g id="SVGRepo_bgCarrier" stroke-width="0"/>
7
+
8
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
9
+
10
+ <g id="SVGRepo_iconCarrier">
11
+
12
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z" />
13
+
14
+ </g>
15
+
16
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="25" height="25" viewBox="0 0 20 20" fill="none" stroke="#2D2D2D" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5 7.5L10 13L15 7.5" stroke-width="1.4" stroke-linecap="round"/>
3
+ </svg>
package/src/index.tsx ADDED
@@ -0,0 +1,5 @@
1
+ import Calendar from './Calendar';
2
+ import { CalendarRange, CalendarView } from './Calendar/type';
3
+
4
+ export { Calendar };
5
+ export type { CalendarView, CalendarRange };
@@ -0,0 +1,22 @@
1
+ // 스크롤바 너비 14px 추가
2
+ $pc: 1396px;
3
+ $tablet: 1395px;
4
+ $mobile: 774px;
5
+
6
+ @mixin pc {
7
+ @media (min-width: $pc) {
8
+ @content;
9
+ }
10
+ }
11
+
12
+ @mixin tablet {
13
+ @media (max-width: $tablet) {
14
+ @content;
15
+ }
16
+ }
17
+
18
+ @mixin mobile {
19
+ @media (max-width: $mobile) {
20
+ @content;
21
+ }
22
+ }
package/src/svg.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ declare module '*.svg' {
2
+ const content: React.FC<React.SVGProps<SVGElement>>;
3
+ export default content;
4
+ }
@@ -0,0 +1,2 @@
1
+ /// <reference types="vite/client" />
2
+ /// <reference types="vite-plugin-svgr/client" />
File without changes
File without changes