@getmicdrop/svelte-components 2.4.0 → 2.6.1

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 (132) hide show
  1. package/dist/__LIB_STORES__.js +2 -30
  2. package/dist/components/Badges/Badge.svelte +3 -129
  3. package/dist/components/Badges/Badge.svelte.d.ts +2 -8
  4. package/dist/components/Badges/Badge.svelte.d.ts.map +1 -1
  5. package/dist/components/Breadcrumb/Breadcrumb.svelte +36 -65
  6. package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts +2 -16
  7. package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts.map +1 -1
  8. package/dist/components/Button/Button.svelte +0 -1
  9. package/dist/components/Calendar/Calendar.spec.d.ts +2 -0
  10. package/dist/components/Calendar/Calendar.spec.d.ts.map +1 -0
  11. package/dist/components/Calendar/Calendar.spec.js +131 -0
  12. package/dist/components/Calendar/Calendar.svelte +1115 -0
  13. package/dist/components/Calendar/{MiniMonthCalendar.svelte.d.ts → Calendar.svelte.d.ts} +21 -20
  14. package/dist/components/{Checkbox/Checkbox.svelte.d.ts.map → Calendar/Calendar.svelte.d.ts.map} +1 -1
  15. package/dist/components/Calendar/QuarterView.spec.d.ts +2 -0
  16. package/dist/components/Calendar/QuarterView.spec.d.ts.map +1 -0
  17. package/dist/components/Calendar/QuarterView.spec.js +394 -0
  18. package/dist/components/Calendar/QuarterView.stories.svelte +134 -0
  19. package/dist/components/{PublicCard/PublicCard.svelte.d.ts → Calendar/QuarterView.stories.svelte.d.ts} +21 -15
  20. package/dist/components/Calendar/QuarterView.stories.svelte.d.ts.map +1 -0
  21. package/dist/components/Calendar/QuarterView.svelte +736 -0
  22. package/dist/components/{FAQs/FAQs.svelte.d.ts → Calendar/QuarterView.svelte.d.ts} +10 -10
  23. package/dist/components/{Skeleton/Skeleton.svelte.d.ts.map → Calendar/QuarterView.svelte.d.ts.map} +1 -1
  24. package/dist/components/DarkModeToggle.svelte +0 -2
  25. package/dist/components/DarkModeToggle.svelte.d.ts.map +1 -1
  26. package/dist/components/Input/Input.svelte +12 -100
  27. package/dist/components/Input/Input.svelte.d.ts +6 -18
  28. package/dist/components/Input/Input.svelte.d.ts.map +1 -1
  29. package/dist/components/Input/MultiSelect.svelte +5 -4
  30. package/dist/components/Input/MultiSelect.svelte.d.ts +6 -6
  31. package/dist/components/Input/MultiSelect.svelte.d.ts.map +1 -1
  32. package/dist/components/Input/OTPInput.svelte +1 -1
  33. package/dist/components/Input/Select.svelte +5 -4
  34. package/dist/components/Input/Select.svelte.d.ts +6 -6
  35. package/dist/components/Input/Select.svelte.d.ts.map +1 -1
  36. package/dist/components/Layout/Header.svelte +4 -14
  37. package/dist/components/Modal/ConfirmationModal.svelte +17 -69
  38. package/dist/components/Modal/ConfirmationModal.svelte.d.ts +0 -22
  39. package/dist/components/Modal/ConfirmationModal.svelte.d.ts.map +1 -1
  40. package/dist/components/Modal/Modal.svelte +8 -34
  41. package/dist/components/Modal/Modal.svelte.d.ts +0 -2
  42. package/dist/components/Modal/Modal.svelte.d.ts.map +1 -1
  43. package/dist/components/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts +2 -2
  44. package/dist/components/Spinner/Spinner.svelte +17 -73
  45. package/dist/components/Spinner/Spinner.svelte.d.ts +3 -5
  46. package/dist/components/Spinner/Spinner.svelte.d.ts.map +1 -1
  47. package/dist/components/pages/performers/AvailabilityCalendarModal.svelte +632 -0
  48. package/dist/components/{ShowTimeCard/ShowTimeCard.svelte.d.ts → pages/performers/AvailabilityCalendarModal.svelte.d.ts} +14 -14
  49. package/dist/components/pages/performers/AvailabilityCalendarModal.svelte.d.ts.map +1 -0
  50. package/dist/components/pages/performers/ShowDetails.svelte.d.ts +2 -2
  51. package/dist/components/pages/performers/ShowItemCard.svelte.d.ts +8 -8
  52. package/dist/components/pages/performers/SwitchOption.svelte.d.ts +2 -2
  53. package/dist/components/pages/performers/VenueInfo.svelte.d.ts +2 -2
  54. package/dist/components/pages/performers/VenueItemCard.svelte +2 -2
  55. package/dist/components/pages/performers/VenueItemCard.svelte.d.ts +4 -4
  56. package/dist/components/pages/profile/profile-form.svelte +1 -1
  57. package/dist/components/pages/shows/TabNavigation.svelte +8 -7
  58. package/dist/constants/formOptions.d.ts +2 -5
  59. package/dist/constants/formOptions.d.ts.map +1 -1
  60. package/dist/constants/formOptions.js +1 -2
  61. package/dist/index.d.ts +4 -24
  62. package/dist/index.js +4 -30
  63. package/dist/services/EventService.js +75 -75
  64. package/dist/services/EventService.spec.js +217 -217
  65. package/dist/services/ShowService.spec.js +342 -342
  66. package/package.json +160 -160
  67. package/dist/components/AboutShow/AboutShow.svelte +0 -278
  68. package/dist/components/AboutShow/AboutShow.svelte.d.ts +0 -43
  69. package/dist/components/AboutShow/AboutShow.svelte.d.ts.map +0 -1
  70. package/dist/components/Accordion/Accordion.svelte +0 -44
  71. package/dist/components/Accordion/Accordion.svelte.d.ts +0 -42
  72. package/dist/components/Accordion/Accordion.svelte.d.ts.map +0 -1
  73. package/dist/components/Accordion/AccordionItem.svelte +0 -141
  74. package/dist/components/Accordion/AccordionItem.svelte.d.ts +0 -50
  75. package/dist/components/Accordion/AccordionItem.svelte.d.ts.map +0 -1
  76. package/dist/components/Calendar/MiniMonthCalendar.svelte +0 -1446
  77. package/dist/components/Calendar/MiniMonthCalendar.svelte.d.ts.map +0 -1
  78. package/dist/components/Checkbox/Checkbox.svelte +0 -116
  79. package/dist/components/Checkbox/Checkbox.svelte.d.ts +0 -52
  80. package/dist/components/Drawer/Drawer.svelte +0 -207
  81. package/dist/components/Drawer/Drawer.svelte.d.ts +0 -74
  82. package/dist/components/Drawer/Drawer.svelte.d.ts.map +0 -1
  83. package/dist/components/Dropdown/Dropdown.svelte +0 -129
  84. package/dist/components/Dropdown/Dropdown.svelte.d.ts +0 -48
  85. package/dist/components/Dropdown/Dropdown.svelte.d.ts.map +0 -1
  86. package/dist/components/Dropdown/DropdownItem.svelte +0 -111
  87. package/dist/components/Dropdown/DropdownItem.svelte.d.ts +0 -48
  88. package/dist/components/Dropdown/DropdownItem.svelte.d.ts.map +0 -1
  89. package/dist/components/FAQs/FAQs.svelte +0 -49
  90. package/dist/components/FAQs/FAQs.svelte.d.ts.map +0 -1
  91. package/dist/components/Input/Search.svelte +0 -173
  92. package/dist/components/Input/Search.svelte.d.ts +0 -68
  93. package/dist/components/Input/Search.svelte.d.ts.map +0 -1
  94. package/dist/components/Input/Textarea.svelte +0 -160
  95. package/dist/components/Input/Textarea.svelte.d.ts +0 -69
  96. package/dist/components/Input/Textarea.svelte.d.ts.map +0 -1
  97. package/dist/components/Label/Label.svelte +0 -60
  98. package/dist/components/Label/Label.svelte.d.ts +0 -48
  99. package/dist/components/Label/Label.svelte.d.ts.map +0 -1
  100. package/dist/components/Modal/InputModal.svelte +0 -180
  101. package/dist/components/Modal/InputModal.svelte.d.ts +0 -77
  102. package/dist/components/Modal/InputModal.svelte.d.ts.map +0 -1
  103. package/dist/components/Modal/StatusModal.svelte +0 -221
  104. package/dist/components/Modal/StatusModal.svelte.d.ts +0 -59
  105. package/dist/components/Modal/StatusModal.svelte.d.ts.map +0 -1
  106. package/dist/components/MonthSwitcher/MonthSwitcher.svelte +0 -206
  107. package/dist/components/MonthSwitcher/MonthSwitcher.svelte.d.ts +0 -37
  108. package/dist/components/MonthSwitcher/MonthSwitcher.svelte.d.ts.map +0 -1
  109. package/dist/components/OrderSummary/OrderSummary.svelte +0 -553
  110. package/dist/components/OrderSummary/OrderSummary.svelte.d.ts +0 -65
  111. package/dist/components/OrderSummary/OrderSummary.svelte.d.ts.map +0 -1
  112. package/dist/components/Pagination/Pagination.svelte +0 -197
  113. package/dist/components/Pagination/Pagination.svelte.d.ts +0 -53
  114. package/dist/components/Pagination/Pagination.svelte.d.ts.map +0 -1
  115. package/dist/components/PublicCard/PublicCard.svelte +0 -267
  116. package/dist/components/PublicCard/PublicCard.svelte.d.ts.map +0 -1
  117. package/dist/components/Radio/Radio.svelte +0 -119
  118. package/dist/components/Radio/Radio.svelte.d.ts +0 -54
  119. package/dist/components/Radio/Radio.svelte.d.ts.map +0 -1
  120. package/dist/components/ShowCard/ShowCard.svelte +0 -240
  121. package/dist/components/ShowCard/ShowCard.svelte.d.ts +0 -39
  122. package/dist/components/ShowCard/ShowCard.svelte.d.ts.map +0 -1
  123. package/dist/components/ShowTimeCard/ShowTimeCard.svelte +0 -92
  124. package/dist/components/ShowTimeCard/ShowTimeCard.svelte.d.ts.map +0 -1
  125. package/dist/components/Skeleton/Skeleton.svelte +0 -68
  126. package/dist/components/Skeleton/Skeleton.svelte.d.ts +0 -37
  127. package/dist/components/Tabs/TabItem.svelte +0 -39
  128. package/dist/components/Tabs/TabItem.svelte.d.ts +0 -52
  129. package/dist/components/Tabs/TabItem.svelte.d.ts.map +0 -1
  130. package/dist/components/Tabs/Tabs.svelte +0 -181
  131. package/dist/components/Tabs/Tabs.svelte.d.ts +0 -46
  132. package/dist/components/Tabs/Tabs.svelte.d.ts.map +0 -1
@@ -1,42 +1,43 @@
1
- export default MiniMonthCalendar;
2
- type MiniMonthCalendar = SvelteComponent<{
1
+ export default Calendar;
2
+ type Calendar = SvelteComponent<{
3
3
  variant?: string | undefined;
4
- selectedDates?: any[] | undefined;
4
+ view?: string | undefined;
5
5
  events?: any[] | undefined;
6
- saveStatus?: string | undefined;
7
- showLegend?: boolean | undefined;
6
+ selectedDates?: any[] | undefined;
7
+ showMonths?: number | undefined;
8
+ compact?: boolean | undefined;
8
9
  showNavigation?: boolean | undefined;
9
- showTodayButton?: boolean | undefined;
10
+ showViewSwitcher?: boolean | undefined;
10
11
  readOnly?: boolean | undefined;
11
- showPartialPreview?: boolean | undefined;
12
- disablePastNavigation?: boolean | undefined;
12
+ saveStatus?: string | undefined;
13
+ showLegend?: boolean | undefined;
13
14
  }, {
14
15
  dateSelect: CustomEvent<any>;
15
- dayClick: CustomEvent<any>;
16
- monthChange: CustomEvent<any>;
16
+ eventClick: CustomEvent<any>;
17
17
  } & {
18
18
  [evt: string]: CustomEvent<any>;
19
19
  }, {}> & {
20
20
  $$bindings?: string | undefined;
21
21
  };
22
- declare const MiniMonthCalendar: $$__sveltets_2_IsomorphicComponent<{
22
+ declare const Calendar: $$__sveltets_2_IsomorphicComponent<{
23
23
  variant?: string | undefined;
24
- selectedDates?: any[] | undefined;
24
+ view?: string | undefined;
25
25
  events?: any[] | undefined;
26
- saveStatus?: string | undefined;
27
- showLegend?: boolean | undefined;
26
+ selectedDates?: any[] | undefined;
27
+ showMonths?: number | undefined;
28
+ compact?: boolean | undefined;
28
29
  showNavigation?: boolean | undefined;
29
- showTodayButton?: boolean | undefined;
30
+ showViewSwitcher?: boolean | undefined;
30
31
  readOnly?: boolean | undefined;
31
- showPartialPreview?: boolean | undefined;
32
- disablePastNavigation?: boolean | undefined;
32
+ saveStatus?: string | undefined;
33
+ showLegend?: boolean | undefined;
33
34
  }, {
34
35
  dateSelect: CustomEvent<any>;
35
- dayClick: CustomEvent<any>;
36
- monthChange: CustomEvent<any>;
36
+ eventClick: CustomEvent<any>;
37
37
  } & {
38
38
  [evt: string]: CustomEvent<any>;
39
39
  }, {}, {}, string>;
40
+ import { Calendar } from '@fullcalendar/core';
40
41
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
41
42
  new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
42
43
  $$bindings?: Bindings;
@@ -50,4 +51,4 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
50
51
  };
51
52
  z_$$bindings?: Bindings;
52
53
  }
53
- //# sourceMappingURL=MiniMonthCalendar.svelte.d.ts.map
54
+ //# sourceMappingURL=Calendar.svelte.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiEA;;;;;;;;;;;;;;eAAyK;sCATnI,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Calendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/Calendar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6qBA;;;;;;;;;;;;;;;;;mBAAiQ;yBAxqBxO,oBAAoB;6CA+pBA,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=QuarterView.spec.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QuarterView.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/QuarterView.spec.js"],"names":[],"mappings":""}
@@ -0,0 +1,394 @@
1
+ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
2
+ import { render, fireEvent } from '@testing-library/svelte';
3
+ import { writable, get } from 'svelte/store';
4
+ import QuarterView from './QuarterView.svelte';
5
+
6
+ // Mock date-fns functions
7
+ vi.mock('date-fns', () => ({
8
+ getDay: vi.fn((date) => date.getDay()),
9
+ getDaysInMonth: vi.fn((date) => {
10
+ return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
11
+ }),
12
+ startOfMonth: vi.fn((date) => new Date(date.getFullYear(), date.getMonth(), 1)),
13
+ }));
14
+
15
+ describe('QuarterView Component', () => {
16
+ let selectedDates;
17
+
18
+ beforeEach(() => {
19
+ vi.useFakeTimers();
20
+ vi.setSystemTime(new Date(2024, 5, 15)); // June 15, 2024
21
+
22
+ selectedDates = writable([]);
23
+
24
+ // Mock navigator.vibrate for haptic feedback tests
25
+ Object.defineProperty(navigator, 'vibrate', {
26
+ value: vi.fn(),
27
+ writable: true,
28
+ });
29
+ });
30
+
31
+ afterEach(() => {
32
+ vi.useRealTimers();
33
+ });
34
+
35
+ it('renders calendar container', () => {
36
+ const { container } = render(QuarterView, {
37
+ props: {
38
+ currentevents: [],
39
+ selectedDates,
40
+ },
41
+ });
42
+ const calendarContainer = container.querySelector('.calendar-container');
43
+ expect(calendarContainer).toBeTruthy();
44
+ });
45
+
46
+ it('renders day headers', () => {
47
+ const { getByText } = render(QuarterView, {
48
+ props: {
49
+ currentevents: [],
50
+ selectedDates,
51
+ },
52
+ });
53
+ expect(getByText('Sun')).toBeTruthy();
54
+ expect(getByText('Mon')).toBeTruthy();
55
+ expect(getByText('Tue')).toBeTruthy();
56
+ expect(getByText('Wed')).toBeTruthy();
57
+ expect(getByText('Thu')).toBeTruthy();
58
+ expect(getByText('Fri')).toBeTruthy();
59
+ expect(getByText('Sat')).toBeTruthy();
60
+ });
61
+
62
+ it('renders current month name', () => {
63
+ const { getByText } = render(QuarterView, {
64
+ props: {
65
+ currentevents: [],
66
+ selectedDates,
67
+ },
68
+ });
69
+ expect(getByText('June')).toBeTruthy();
70
+ });
71
+
72
+ it('renders current year', () => {
73
+ const { getByText } = render(QuarterView, {
74
+ props: {
75
+ currentevents: [],
76
+ selectedDates,
77
+ },
78
+ });
79
+ expect(getByText('2024')).toBeTruthy();
80
+ });
81
+
82
+ it('renders navigation buttons', () => {
83
+ const { container } = render(QuarterView, {
84
+ props: {
85
+ currentevents: [],
86
+ selectedDates,
87
+ },
88
+ });
89
+ const navButtons = container.querySelectorAll('.nav-btn');
90
+ expect(navButtons.length).toBe(2);
91
+ });
92
+
93
+ it('renders Today button', () => {
94
+ const { getByText } = render(QuarterView, {
95
+ props: {
96
+ currentevents: [],
97
+ selectedDates,
98
+ },
99
+ });
100
+ expect(getByText('Today')).toBeTruthy();
101
+ });
102
+
103
+ it('renders day cells', () => {
104
+ const { container } = render(QuarterView, {
105
+ props: {
106
+ currentevents: [],
107
+ selectedDates,
108
+ },
109
+ });
110
+ const dayCells = container.querySelectorAll('.day-cell');
111
+ // June 2024 has 30 days
112
+ expect(dayCells.length).toBe(30);
113
+ });
114
+
115
+ it('previous button has aria-label', () => {
116
+ const { container } = render(QuarterView, {
117
+ props: {
118
+ currentevents: [],
119
+ selectedDates,
120
+ },
121
+ });
122
+ const prevButton = container.querySelector('[aria-label="Previous month"]');
123
+ expect(prevButton).toBeTruthy();
124
+ });
125
+
126
+ it('next button has aria-label', () => {
127
+ const { container } = render(QuarterView, {
128
+ props: {
129
+ currentevents: [],
130
+ selectedDates,
131
+ },
132
+ });
133
+ const nextButton = container.querySelector('[aria-label="Next month"]');
134
+ expect(nextButton).toBeTruthy();
135
+ });
136
+
137
+ it('clicking next navigates to next month', async () => {
138
+ const { container, getByText } = render(QuarterView, {
139
+ props: {
140
+ currentevents: [],
141
+ selectedDates,
142
+ },
143
+ });
144
+
145
+ const nextButton = container.querySelector('[aria-label="Next month"]');
146
+ await fireEvent.click(nextButton);
147
+
148
+ vi.advanceTimersByTime(300);
149
+
150
+ expect(getByText('July')).toBeTruthy();
151
+ });
152
+
153
+ it('clicking previous navigates to previous month', async () => {
154
+ const { container, getByText } = render(QuarterView, {
155
+ props: {
156
+ currentevents: [],
157
+ selectedDates,
158
+ },
159
+ });
160
+
161
+ const prevButton = container.querySelector('[aria-label="Previous month"]');
162
+ await fireEvent.click(prevButton);
163
+
164
+ vi.advanceTimersByTime(300);
165
+
166
+ expect(getByText('May')).toBeTruthy();
167
+ });
168
+
169
+ it('shows save status when provided', () => {
170
+ const { container } = render(QuarterView, {
171
+ props: {
172
+ currentevents: [],
173
+ selectedDates,
174
+ saveStatus: 'saving',
175
+ },
176
+ });
177
+ const saveIndicator = container.querySelector('.save-indicator-overlay');
178
+ expect(saveIndicator).toBeTruthy();
179
+ });
180
+
181
+ it('shows saved indicator', () => {
182
+ const { container } = render(QuarterView, {
183
+ props: {
184
+ currentevents: [],
185
+ selectedDates,
186
+ saveStatus: 'saved',
187
+ },
188
+ });
189
+ const saveIndicator = container.querySelector('.save-indicator-overlay');
190
+ expect(saveIndicator).toBeTruthy();
191
+ });
192
+
193
+ it('disables non-event days', () => {
194
+ const { container } = render(QuarterView, {
195
+ props: {
196
+ currentevents: [],
197
+ selectedDates,
198
+ },
199
+ });
200
+ const disabledCells = container.querySelectorAll('.day-cell.disabled');
201
+ // All days should be disabled when no events
202
+ expect(disabledCells.length).toBe(30);
203
+ });
204
+
205
+ it('enables event days', () => {
206
+ const { container } = render(QuarterView, {
207
+ props: {
208
+ currentevents: [{ date: '2024-06-20' }],
209
+ selectedDates,
210
+ },
211
+ });
212
+
213
+ const dayCells = container.querySelectorAll('.day-cell');
214
+ // Find the cell for day 20
215
+ const day20Cell = Array.from(dayCells).find(
216
+ (cell) => cell.querySelector('.day-number')?.textContent === '20'
217
+ );
218
+
219
+ // Day 20 (future event) should not be disabled
220
+ expect(day20Cell.classList.contains('disabled')).toBe(false);
221
+ });
222
+
223
+ it('marks selected dates', async () => {
224
+ selectedDates.set(['2024-06-20']);
225
+
226
+ const { container } = render(QuarterView, {
227
+ props: {
228
+ currentevents: [{ date: '2024-06-20' }],
229
+ selectedDates,
230
+ },
231
+ });
232
+
233
+ const dayCells = container.querySelectorAll('.day-cell');
234
+ const day20Cell = Array.from(dayCells).find(
235
+ (cell) => cell.querySelector('.day-number')?.textContent === '20'
236
+ );
237
+
238
+ expect(day20Cell.classList.contains('selected')).toBe(true);
239
+ });
240
+
241
+ it('toggles date selection on click', async () => {
242
+ const { container } = render(QuarterView, {
243
+ props: {
244
+ currentevents: [{ date: '2024-06-20' }],
245
+ selectedDates,
246
+ },
247
+ });
248
+
249
+ const dayCells = container.querySelectorAll('.day-cell');
250
+ const day20Cell = Array.from(dayCells).find(
251
+ (cell) => cell.querySelector('.day-number')?.textContent === '20'
252
+ );
253
+
254
+ await fireEvent.click(day20Cell);
255
+
256
+ // Check that selectedDates store was updated
257
+ const dates = get(selectedDates);
258
+ expect(dates).toContain('2024-06-20');
259
+ });
260
+
261
+ it('removes date from selection on second click', async () => {
262
+ selectedDates.set(['2024-06-20']);
263
+
264
+ const { container } = render(QuarterView, {
265
+ props: {
266
+ currentevents: [{ date: '2024-06-20' }],
267
+ selectedDates,
268
+ },
269
+ });
270
+
271
+ const dayCells = container.querySelectorAll('.day-cell');
272
+ const day20Cell = Array.from(dayCells).find(
273
+ (cell) => cell.querySelector('.day-number')?.textContent === '20'
274
+ );
275
+
276
+ await fireEvent.click(day20Cell);
277
+
278
+ const dates = get(selectedDates);
279
+ expect(dates).not.toContain('2024-06-20');
280
+ });
281
+
282
+ it('has aria-pressed attribute on day buttons', () => {
283
+ const { container } = render(QuarterView, {
284
+ props: {
285
+ currentevents: [],
286
+ selectedDates,
287
+ },
288
+ });
289
+
290
+ const dayCell = container.querySelector('.day-cell');
291
+ expect(dayCell.hasAttribute('aria-pressed')).toBe(true);
292
+ });
293
+
294
+ it('has aria-label for day buttons', () => {
295
+ const { container } = render(QuarterView, {
296
+ props: {
297
+ currentevents: [],
298
+ selectedDates,
299
+ },
300
+ });
301
+
302
+ const dayCell = container.querySelector('.day-cell');
303
+ expect(dayCell.getAttribute('aria-label')).toMatch(/Day \d+/);
304
+ });
305
+
306
+ it('handles touch swipe events', async () => {
307
+ const { container } = render(QuarterView, {
308
+ props: {
309
+ currentevents: [],
310
+ selectedDates,
311
+ },
312
+ });
313
+
314
+ const grid = container.querySelector('.calendar-grid');
315
+
316
+ // Simulate touch swipe
317
+ await fireEvent.touchStart(grid, {
318
+ touches: [{ clientX: 200, clientY: 100 }],
319
+ });
320
+
321
+ await fireEvent.touchMove(grid, {
322
+ touches: [{ clientX: 100, clientY: 100 }],
323
+ });
324
+
325
+ await fireEvent.touchEnd(grid, {
326
+ changedTouches: [{ clientX: 50, clientY: 100 }],
327
+ });
328
+
329
+ vi.advanceTimersByTime(300);
330
+ });
331
+
332
+ it('calls haptic feedback via vibration API', async () => {
333
+ const { container } = render(QuarterView, {
334
+ props: {
335
+ currentevents: [{ date: '2024-06-20' }],
336
+ selectedDates,
337
+ },
338
+ });
339
+
340
+ const dayCells = container.querySelectorAll('.day-cell');
341
+ const day20Cell = Array.from(dayCells).find(
342
+ (cell) => cell.querySelector('.day-number')?.textContent === '20'
343
+ );
344
+
345
+ await fireEvent.click(day20Cell);
346
+
347
+ // vibrate should have been called
348
+ expect(navigator.vibrate).toHaveBeenCalled();
349
+ });
350
+
351
+ it('navigates months correctly across year boundary (December to January)', async () => {
352
+ vi.setSystemTime(new Date(2024, 11, 15)); // December 15, 2024
353
+
354
+ const { container, getByText } = render(QuarterView, {
355
+ props: {
356
+ currentevents: [],
357
+ selectedDates,
358
+ },
359
+ });
360
+
361
+ expect(getByText('December')).toBeTruthy();
362
+ expect(getByText('2024')).toBeTruthy();
363
+
364
+ const nextButton = container.querySelector('[aria-label="Next month"]');
365
+ await fireEvent.click(nextButton);
366
+
367
+ vi.advanceTimersByTime(300);
368
+
369
+ expect(getByText('January')).toBeTruthy();
370
+ expect(getByText('2025')).toBeTruthy();
371
+ });
372
+
373
+ it('navigates months correctly across year boundary (January to December)', async () => {
374
+ vi.setSystemTime(new Date(2024, 0, 15)); // January 15, 2024
375
+
376
+ const { container, getByText } = render(QuarterView, {
377
+ props: {
378
+ currentevents: [],
379
+ selectedDates,
380
+ },
381
+ });
382
+
383
+ expect(getByText('January')).toBeTruthy();
384
+ expect(getByText('2024')).toBeTruthy();
385
+
386
+ const prevButton = container.querySelector('[aria-label="Previous month"]');
387
+ await fireEvent.click(prevButton);
388
+
389
+ vi.advanceTimersByTime(300);
390
+
391
+ expect(getByText('December')).toBeTruthy();
392
+ expect(getByText('2023')).toBeTruthy();
393
+ });
394
+ });
@@ -0,0 +1,134 @@
1
+ <script context="module">
2
+ import { Story, Template } from "@storybook/addon-svelte-csf";
3
+ import QuarterView from "./QuarterView.svelte";
4
+ import { writable } from "svelte/store";
5
+
6
+ export const meta = {
7
+ title: "Components/Calendar/QuarterView",
8
+ component: QuarterView,
9
+ argTypes: {
10
+ currentevents: { control: "object" },
11
+ selectedDates: { control: "object" },
12
+ },
13
+ };
14
+
15
+ // Helper to generate dates for the current month
16
+ function generateEventDates(count = 10) {
17
+ const events = [];
18
+ const today = new Date();
19
+ const year = today.getFullYear();
20
+ const month = today.getMonth();
21
+
22
+ for (let i = 0; i < count; i++) {
23
+ const day = Math.floor(Math.random() * 28) + 1;
24
+ events.push({
25
+ date: new Date(year, month, day).toISOString(),
26
+ title: `Event ${i + 1}`
27
+ });
28
+ }
29
+ return events;
30
+ }
31
+
32
+ // Generate future event dates for next month
33
+ function generateFutureEventDates(count = 8) {
34
+ const events = [];
35
+ const today = new Date();
36
+ const year = today.getFullYear();
37
+ const month = today.getMonth() + 1;
38
+
39
+ for (let i = 0; i < count; i++) {
40
+ const day = Math.floor(Math.random() * 28) + 1;
41
+ events.push({
42
+ date: new Date(year, month, day).toISOString(),
43
+ title: `Future Event ${i + 1}`
44
+ });
45
+ }
46
+ return events;
47
+ }
48
+
49
+ // Generate specific dates
50
+ function generateSpecificDates() {
51
+ const today = new Date();
52
+ const year = today.getFullYear();
53
+ const month = today.getMonth();
54
+
55
+ return [
56
+ { date: new Date(year, month, 5).toISOString(), title: "Comedy Night" },
57
+ { date: new Date(year, month, 12).toISOString(), title: "Jazz Evening" },
58
+ { date: new Date(year, month, 18).toISOString(), title: "Rock Concert" },
59
+ { date: new Date(year, month, 25).toISOString(), title: "Open Mic" },
60
+ ];
61
+ }
62
+ </script>
63
+
64
+ <Template let:args>
65
+ <div style="max-width: 600px; margin: 0 auto;">
66
+ <QuarterView {...args} />
67
+ </div>
68
+ </Template>
69
+
70
+ <Story
71
+ name="With Random Events"
72
+ args={{
73
+ currentevents: generateEventDates(10),
74
+ selectedDates: writable([])
75
+ }}
76
+ />
77
+
78
+ <Story name="With Specific Events">
79
+ <div style="max-width: 600px; margin: 0 auto;">
80
+ <QuarterView
81
+ currentevents={generateSpecificDates()}
82
+ selectedDates={writable([])}
83
+ />
84
+ </div>
85
+ </Story>
86
+
87
+ <Story name="With Pre-selected Dates">
88
+ <div style="max-width: 600px; margin: 0 auto;">
89
+ <QuarterView
90
+ currentevents={generateEventDates(12)}
91
+ selectedDates={writable([
92
+ `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-05`,
93
+ `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-12`,
94
+ `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-18`,
95
+ ])}
96
+ />
97
+ </div>
98
+ </Story>
99
+
100
+ <Story name="With Many Events">
101
+ <div style="max-width: 600px; margin: 0 auto;">
102
+ <QuarterView
103
+ currentevents={generateEventDates(20)}
104
+ selectedDates={writable([])}
105
+ />
106
+ </div>
107
+ </Story>
108
+
109
+ <Story name="With Few Events">
110
+ <div style="max-width: 600px; margin: 0 auto;">
111
+ <QuarterView
112
+ currentevents={generateSpecificDates().slice(0, 2)}
113
+ selectedDates={writable([])}
114
+ />
115
+ </div>
116
+ </Story>
117
+
118
+ <Story name="Empty Calendar">
119
+ <div style="max-width: 600px; margin: 0 auto;">
120
+ <QuarterView
121
+ currentevents={[]}
122
+ selectedDates={writable([])}
123
+ />
124
+ </div>
125
+ </Story>
126
+
127
+ <Story name="Next Month Events">
128
+ <div style="max-width: 600px; margin: 0 auto;">
129
+ <QuarterView
130
+ currentevents={generateFutureEventDates(8)}
131
+ selectedDates={writable([])}
132
+ />
133
+ </div>
134
+ </Story>
@@ -1,29 +1,35 @@
1
- export default PublicCard;
2
- type PublicCard = SvelteComponent<{
3
- view?: string | undefined;
4
- events?: any[] | undefined;
5
- placeholderImage?: null | undefined;
1
+ export namespace meta {
2
+ export let title: string;
3
+ export { QuarterView as component };
4
+ export namespace argTypes {
5
+ namespace currentevents {
6
+ let control: string;
7
+ }
8
+ namespace selectedDates {
9
+ let control_1: string;
10
+ export { control_1 as control };
11
+ }
12
+ }
13
+ }
14
+ export default QuarterView;
15
+ type QuarterView = SvelteComponent<{
16
+ [x: string]: never;
6
17
  }, {
7
- eventClick: CustomEvent<any>;
8
- } & {
9
18
  [evt: string]: CustomEvent<any>;
10
19
  }, {}> & {
11
20
  $$bindings?: string | undefined;
12
21
  };
13
- declare const PublicCard: $$__sveltets_2_IsomorphicComponent<{
14
- view?: string | undefined;
15
- events?: any[] | undefined;
16
- placeholderImage?: null | undefined;
22
+ declare const QuarterView: $$__sveltets_2_IsomorphicComponent<{
23
+ [x: string]: never;
17
24
  }, {
18
- eventClick: CustomEvent<any>;
19
- } & {
20
25
  [evt: string]: CustomEvent<any>;
21
26
  }, {}, {}, string>;
27
+ import QuarterView from "./QuarterView.svelte";
22
28
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
23
29
  new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
24
30
  $$bindings?: Bindings;
25
31
  } & Exports;
26
- (internal: unknown, props: Props & {
32
+ (internal: unknown, props: {
27
33
  $$events?: Events;
28
34
  $$slots?: Slots;
29
35
  }): Exports & {
@@ -32,4 +38,4 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
32
38
  };
33
39
  z_$$bindings?: Bindings;
34
40
  }
35
- //# sourceMappingURL=PublicCard.svelte.d.ts.map
41
+ //# sourceMappingURL=QuarterView.stories.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QuarterView.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/QuarterView.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+HA;;;;mBAAuH;wBA3H7F,sBAAsB;6CAkHH,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}