@asd20/ui 3.2.987 → 3.2.988

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.2.964",
+  "version": "3.2.987",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1285,7 +1285,6 @@
       "version": "7.27.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
       "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.14.0"
       }
@@ -1423,6 +1422,12 @@
             "restore-cursor": "^1.0.1"
           }
         },
+        "date-fns": {
+          "version": "1.30.1",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+          "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+          "dev": true
+        },
         "figures": {
           "version": "1.7.0",
           "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
@@ -11548,9 +11553,12 @@
       }
     },
     "date-fns": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
     },
     "dateformat": {
       "version": "3.0.3",
@@ -21394,6 +21402,12 @@
             "figures": "^2.0.0"
           },
           "dependencies": {
+            "date-fns": {
+              "version": "1.30.1",
+              "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+              "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+              "dev": true
+            },
             "figures": {
               "version": "2.0.0",
               "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -21833,6 +21847,12 @@
             "restore-cursor": "^1.0.1"
           }
         },
+        "date-fns": {
+          "version": "1.30.1",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+          "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+          "dev": true
+        },
         "figures": {
           "version": "1.7.0",
           "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
@@ -27520,8 +27540,7 @@
     "regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regenerator-transform": {
       "version": "0.15.2",

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.987",
+  "version": "3.2.988",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
     "axios": "^0.19.2",
     "basicscroll": "^3.0.2",
     "countup.js": "^2.0.0",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.30.0",
     "focus-trap": "^6.9.4",
     "focus-trap-vue": "^1.1.1",
     "js-cookie": "^2.2.1",

package/src/components/atoms/Asd20FormattedDate/index.vue

@@ -14,7 +14,7 @@ export default {
     formattedDate() {
       // let apStyle = ['Jan.', 'Feb.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.']
       // let shortMonths = /January|February|August|September|October|November|December /
-      let formatted = format(new Date(this.dateTime), ' MMMM D, YYYY')
+      let formatted = format(new Date(this.dateTime), ' MMMM d, yyyy')
       // for (let month of apStyle) {
       //   if (formatted.includes(month)) {
       //     formatted = month

package/src/components/molecules/Asd20Card/index.vue

@@ -343,8 +343,9 @@ export default {
     font-family: var(--website-typography__font-family-headlines);
     display: flex;
     align-items: flex-start;
-    margin-top: space(0.5);
-    margin-bottom: space(0.5);
+    margin-top: space(0.25);
+    margin-bottom: space(0.25);
+    align-items: center;
     .asd20-icon {
       --line-color: var(--website-icon__line-color);
       margin-left: -0.125em;
@@ -356,6 +357,7 @@ export default {
   }
   &__time + &__location {
     margin-top: space(0);
+    margin-bottom: space(0.25);
   }
   // &__date {
   //   margin-right: space(0.5);

package/src/components/molecules/Asd20EventListItem.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script>
-import parse from 'date-fns/parse'
 import format from 'date-fns/format'
 
 export default {
@@ -28,27 +27,27 @@ export default {
   computed: {
     startDay() {
       if (!this.event) return ''
-      return format(parse(this.event.start.dateTime), 'DD')
+      return format(new Date(this.event.start.dateTime), 'dd')
     },
     startMonthName() {
       if (!this.event) return ''
-      return format(parse(this.event.start.dateTime), 'MMM')
+      return format(new Date(this.event.start.dateTime), 'MMM')
     },
     startDate() {
       if (!this.event) return ''
-      return format(parse(this.event.start.dateTime), 'dddd MMM D, YYYY')
+      return format(new Date(this.event.start.dateTime), 'EEEE MMM d, yyyy')
     },
     endDate() {
       if (!this.event) return ''
-      return format(parse(this.event.end.dateTime), 'dddd MMM D, YYYY')
+      return format(new Date(this.event.end.dateTime), 'EEEE MMM d, yyyy')
     },
     startTime() {
       if (!this.event) return ''
-      return format(parse(this.event.start.dateTime), 'h:mm A')
+      return format(new Date(this.event.start.dateTime), 'h:mm aa')
     },
     endTime() {
       if (!this.event) return ''
-      return format(parse(this.event.end.dateTime), 'h:mm A')
+      return format(new Date(this.event.end.dateTime), 'h:mm aa')
     },
   },
 }

package/src/data/events/district-events.json

@@ -29,8 +29,8 @@
       "summary": "Winter Break - No School",
       "description": "No School",
       "location": "AAHS",
-      "start": "2025-12-19T07:00:00Z",
-      "end": "2026-01-05T07:00:00Z",
+      "start": "2025-12-20T07:00:00Z",
+      "end": "2026-12-25T07:00:00Z",
       "dtstamp": "2024-12-19T07:00:00Z",
       "class": "",
       "priority": "",
@@ -56,8 +56,8 @@
       "summary": "Register for Summer School",
       "description": "Ok. We're actually registeriing for Summer School really, really, really early.",
       "location": "EAC",
-      "start": "2025-12-24T07:01:00Z",
-      "end": "2025-12-24T07:01:00Z",
+      "start": "2025-12-24T16:01:00Z",
+      "end": "2025-12-24T16:01:00Z",
       "dtstamp": "2024-12-23T17:00:00Z",
       "class": "",
       "priority": "",

package/src/helpers/expandEvents.js

@@ -1,13 +1,13 @@
-import parse from 'date-fns/parse'
 import format from 'date-fns/format'
-import addDays from 'date-fns/add_days'
-import isSameDay from 'date-fns/is_same_day'
+import addDays from 'date-fns/addDays'
+import isSameDay from 'date-fns/isSameDay'
 
 export default function expandEvents(events, includePastEvents = false) {
   return events
     .reduce((acc, event) => {
-      const start = parse(event.start)
-      const end = event.end ? parse(event.end) : start
+      // Use new Date() for ISO date strings
+      const start = new Date(event.start)
+      const end = event.end ? new Date(event.end) : start
 
       const today = new Date()
       today.setHours(0, 0, 0, 0)
@@ -16,7 +16,6 @@ export default function expandEvents(events, includePastEvents = false) {
       const diffHours = diffTime / (1000 * 60 * 60)
       let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
 
-      // Safety net for zero-day events
       if (diffDays === 0) diffDays = 1
 
       const isAllDay = event.allDay || diffHours >= 23
@@ -28,22 +27,12 @@ export default function expandEvents(events, includePastEvents = false) {
       const normalizedEnd = new Date(end)
       normalizedEnd.setHours(0, 0, 0, 0)
 
-      // let isMultiDay
-
-      // if (isAllDay && diffDays === 1) {
-      //   // All-day event lasting exactly one day → NOT multi-day
-      //   isMultiDay = false
-      // } else {
-      //   isMultiDay = !isSameDay(normalizedStart, normalizedEnd)
-      // }
-
       const isMultiDay =
         diffDays > 1 || !isSameDay(normalizedStart, normalizedEnd)
 
       const expandedEvents = []
 
       if (isMultiDay) {
-        // Multi-day event expansion
         for (let d = 0; d < diffDays; d++) {
           const currentDay = addDays(normalizedStart, d)
 
@@ -55,16 +44,15 @@ export default function expandEvents(events, includePastEvents = false) {
               originalStart: start,
               allDay: true,
               multiDay: true,
-              weekday: format(currentDay, 'dddd'),
-              day: format(currentDay, 'DD'),
-              number: format(currentDay, 'D'),
+              weekday: format(currentDay, 'EEEE'),
+              day: format(currentDay, 'dd'),
+              number: format(currentDay, 'd'),
               month: format(currentDay, 'MMMM'),
-              year: format(currentDay, 'YYYY')
+              year: format(currentDay, 'yyyy'),
             })
           }
         }
       } else {
-        // Single-day event
         if (includePastEvents || normalizedStart >= today) {
           expandedEvents.push({
             ...event,
@@ -73,11 +61,11 @@ export default function expandEvents(events, includePastEvents = false) {
             originalStart: null,
             allDay: isAllDay,
             multiDay: false,
-            weekday: format(normalizedStart, 'dddd'),
-            day: format(normalizedStart, 'DD'),
-            number: format(normalizedStart, 'D'),
+            weekday: format(normalizedStart, 'EEEE'),
+            day: format(normalizedStart, 'dd'),
+            number: format(normalizedStart, 'd'),
             month: format(normalizedStart, 'MMMM'),
-            year: format(normalizedStart, 'YYYY')
+            year: format(normalizedStart, 'yyyy'),
           })
         }
       }
@@ -110,7 +98,6 @@ export default function expandEvents(events, includePastEvents = false) {
       if (isAHighPriority && !isBHighPriority) return -1
       if (!isAHighPriority && isBHighPriority) return 1
 
-      // Fall back to alphabetical order if both have same priority
       return aSummary.localeCompare(bSummary)
     })
 }

package/src/helpers/formatEventTime.js

@@ -1,47 +1,39 @@
 import format from 'date-fns/format'
-import parse from 'date-fns/parse'
+
+function safeFormatDate(dateObj, fmt) {
+  if (!dateObj || isNaN(dateObj)) return ''
+  try {
+    return format(dateObj, fmt)
+  } catch {
+    return ''
+  }
+}
 
 export default function formattedTime(event) {
-  if (!event) return
+  if (!event) return ''
 
   if (event.allDay) return 'All Day'
 
   if (event.multiDay) {
-    return `<b>MultiDay Event:</b><br/>Starts: ${format(
-      parse(event.originalStart, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-      '<b>h:mm aa</b>, ddd, MMM DD, YYYY'
-    )
-      .replace(/#/g, '&nbsp;')
-      .replace(/:00/g, '')}<br>Ends: ${format(
-      parse(event.end, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-      '<b>h:mm aa</b>, ddd, MM DD, YYYY'
-    )
-      .replace(/#/g, '&nbsp;')
-      .replace(/:00/g, '')}`
+    const startStr = safeFormatDate(event.originalStart, 'h:mm aa, EEE, MMM dd, yyyy')
+    const endStr = safeFormatDate(event.end, 'h:mm aa, EEE, MM dd, yyyy')
+    if (startStr && endStr) {
+      return `<b>MultiDay Event:</b><br/>Starts: ${startStr}<br>Ends: ${endStr}`
+    } else if (startStr) {
+      return `<b>MultiDay Event:</b><br/>Starts: ${startStr}`
+    } else if (endStr) {
+      return `<b>MultiDay Event:</b><br/>Ends: ${endStr}`
+    }
+    return 'MultiDay Event'
   }
 
-  const startTime = parse(event.start, "yyyy-MM-dd'T'HH:mm:ssX", new Date())
-  const endTime = parse(event.end, "yyyy-MM-dd'T'HH:mm:ssX", new Date())
-  // const startHour = startTime.getHours()
-
-  // if (
-  //   startTime.getTime() === endTime.getTime() &&
-  //   (startHour >= 23 || startHour < 3)
-  // ) {
-  //   return 'TBD'
-  // }
-
-  let time = `${format(startTime, '<b>h:mm aa</b>').replace(/:00/g, '')}`
+  const start = safeFormatDate(event.start, 'h:mm aa')
+  const end = safeFormatDate(event.end, 'h:mm aa')
 
-  if (startTime.getTime() === endTime.getTime()) {
-    time += ''
-  } else if (event.endTimeUndetermined) {
-    time += `${format(endTime).replace(/:00/g, '')}`
-  } else {
-    time += ` - ${format(endTime, '<b>h:mm aa</b>')
-      .replace(/#/g, '&nbsp;')
-      .replace(/:00/g, '')}`
+  if (start && end && event.start.getTime() !== event.end.getTime()) {
+    return `${start} - ${end}`
   }
+  if (start) return start
 
-  return time
+  return ''
 }

package/src/helpers/mapEventToCard.js

@@ -1,11 +1,10 @@
 import format from 'date-fns/format'
-import parse from 'date-fns/parse'
+import parseISO from 'date-fns/parseISO'
 import formattedTime from './formatEventTime'
 
 // Function to sanitize the summary
 const sanitizeSummary = summary => {
   if (!summary) return summary
-
   const pattern = /vs\.[^>]*>Multiple Schools/
   return summary.replace(pattern, 'vs. Multiple Schools')
 }
@@ -16,15 +15,12 @@ const sanitizeDescription = description => {
 
   // Check if the description contains ">Multiple Schools"
   if (description.includes('>Multiple Schools')) {
-    // Remove text between the ">" backwards to the first "." or ":" and replace '>Multiple Schools' with '.'
     description = description.replace(
       /([.:][^>]*?)>([^>]*Multiple Schools)/,
       '$1.'
     )
-
     // Separate capital letters preceded by lowercase letters with ', '
     description = description.replace(/([a-z])([A-Z])/g, '$1, $2')
-
     // Remove unmatched quotes between "." or ":" and ">"
     const quotePattern = /[.:][^>]*['"][^'"]*$|[^'"]*['"][^>]*['"]>Multiple Schools/g
     description = description.replace(quotePattern, match => {
@@ -32,7 +28,6 @@ const sanitizeDescription = description => {
       return quotes.length % 2 !== 0 ? match.replace(/['"]/g, '') : match
     })
   }
-
   return description
 }
 
@@ -40,11 +35,31 @@ export default function mapEventToCard(event) {
   const sanitizedSummary = sanitizeSummary(event.summary)
   const sanitizedDescription = sanitizeDescription(event.description)
 
+  let dateObj = null
+  if (event.start) {
+    try {
+      dateObj = parseISO(event.start)
+      if (isNaN(dateObj)) {
+        // fallback
+        const { parse } = require('date-fns')
+        dateObj = parse(event.start, "yyyy-MM-dd'T'HH:mm:ssX", new Date())
+      }
+    } catch (e) {
+      dateObj = null
+    }
+  }
+
+  // Always calculate these fields, not just rely on input
+  // const weekday = dateObj && !isNaN(dateObj) ? format(dateObj, 'EEEE') : ''
+  // const day = dateObj && !isNaN(dateObj) ? format(dateObj, 'dd') : ''
+  // const month = dateObj && !isNaN(dateObj) ? format(dateObj, 'MMMM') : ''
+  // const year = dateObj && !isNaN(dateObj) ? format(dateObj, 'yyyy') : ''
+
   return {
     title: sanitizedSummary,
     description: sanitizedDescription,
     categories: event.calendarCategories.concat([event.calendarName]),
-    date: format(parse(event.start, "yyyy-MM-dd'T'HH:mm:ssX", new Date())),
+    date: dateObj && !isNaN(dateObj) ? format(dateObj, 'MMMM d, yyyy') : '',
     time: formattedTime(event),
     weekday: event.weekday,
     day: event.day,

package/src/helpers/mapEventsToDays.js

@@ -1,18 +1,10 @@
-import parse from 'date-fns/parse'
 import format from 'date-fns/format'
-import addDays from 'date-fns/add_days'
-import isSameDay from 'date-fns/is_same_day'
-import getDaysInMonth from 'date-fns/get_days_in_month'
+import addDays from 'date-fns/addDays'
+import isSameDay from 'date-fns/isSameDay'
+import getDaysInMonth from 'date-fns/getDaysInMonth'
 
 /**
  * Given an array of events, returns an array of days with events grouped by date.
- *
- * @export
- * @param {Array} events - Array of events (should already be expanded if needed)
- * @param {number} year - Target year (used when showAll is false)
- * @param {number} month - Target month (zero-indexed, used when showAll is false)
- * @param {boolean} showAll - If true, returns only days with events (useful for agenda views)
- * @returns {Array} Array of day objects { date, events, ... }
  */
 export default function mapEventsToDays(
   events,
@@ -30,8 +22,8 @@ export default function mapEventsToDays(
     const uniqueDatesMap = new Map()
 
     events.forEach(event => {
-      const eventDate = parse(event.start)
-      const dateKey = format(eventDate, 'YYYY-MM-DD')
+      const eventDate = new Date(event.start)
+      const dateKey = format(eventDate, 'yyyy-MM-dd')
       if (!uniqueDatesMap.has(dateKey)) {
         uniqueDatesMap.set(dateKey, eventDate)
       }
@@ -44,8 +36,8 @@ export default function mapEventsToDays(
     const lastDayOfMonth = new Date(year, month + 1, 0)
     const daysInMonth = getDaysInMonth(firstDayOfMonth)
 
-    const prevMonthDays = firstDayOfMonth.getDay() // How many days to show before the 1st of the month (0=Sunday)
-    const nextMonthDays = 6 - lastDayOfMonth.getDay() // How many days to show after the last day of the month
+    const prevMonthDays = firstDayOfMonth.getDay()
+    const nextMonthDays = 6 - lastDayOfMonth.getDay()
     const totalDays = daysInMonth + prevMonthDays + nextMonthDays
 
     for (let i = -prevMonthDays; i < totalDays - prevMonthDays; i++) {
@@ -61,12 +53,6 @@ export default function mapEventsToDays(
 
 /**
  * Builds a day object with events attached.
- *
- * @param {Date} date - The date this day represents.
- * @param {Array} events - The full events list.
- * @param {boolean} outsideOfCurrentMonth - Whether this date is outside the target month.
- * @param {Date} today - Today's date (normalized to 00:00).
- * @returns {Object} The day object.
  */
 function createDayObject(date, events, outsideOfCurrentMonth = false, today) {
   const normalizedDate = new Date(date)
@@ -77,12 +63,12 @@ function createDayObject(date, events, outsideOfCurrentMonth = false, today) {
     date: normalizedDate,
     unix: normalizedDate.getTime(),
     today: isSameDay(normalizedDate, today),
-    events: events.filter(event => isSameDay(parse(event.start), normalizedDate)),
-    weekday: format(normalizedDate, 'dddd'),
-    day: format(normalizedDate, 'DD'),
-    shortDay: format(normalizedDate, 'D'),
-    number: format(normalizedDate, 'D'),
+    events: events.filter(event => isSameDay(new Date(event.start), normalizedDate)),
+    weekday: format(normalizedDate, 'EEEE'),
+    day: format(normalizedDate, 'dd'),
+    shortDay: format(normalizedDate, 'd'),
+    number: format(normalizedDate, 'd'),
     month: format(normalizedDate, 'MMMM'),
-    year: format(normalizedDate, 'YYYY'),
+    year: format(normalizedDate, 'yyyy'),
   }
 }

package/src/helpers/mapMessageToCard.js

@@ -1,4 +1,5 @@
 import format from 'date-fns/format'
+import parseISO from 'date-fns/parseISO'
 
 export default function mapMessageToCard(
   message,
@@ -48,14 +49,43 @@ export default function mapMessageToCard(
     }
   }
 
+  // Safely format dates (handle missing/null)
+  let date = ''
+  let modifiedDate = ''
+  let time = ''
+
+  if (message.publishDateTime) {
+    try {
+      const parsed = parseISO(message.publishDateTime)
+      if (!isNaN(parsed)) {
+        date = format(parsed, 'MMM. d, yyyy')
+        time = format(parsed, 'h:mm aa')
+      }
+    } catch (e) {
+      date = ''
+      time = ''
+    }
+  }
+
+  if (message.modifiedDateTime) {
+    try {
+      const parsed = parseISO(message.modifiedDateTime)
+      if (!isNaN(parsed)) {
+        modifiedDate = format(parsed, 'MMM. d, yyyy')
+      }
+    } catch (e) {
+      modifiedDate = ''
+    }
+  }
+
   return Object.assign(
     {
       title: message.title,
       description: message.description || message.summary,
       categories: message.categories,
-      date: format(message.publishDateTime, 'MMM. D, YYYY'),
-      modifiedDate: format(message.modifiedDateTime, 'MMM. D, YYYY'),
-      time: format(message.publishDateTime, 'h:mm A'),
+      date,
+      modifiedDate,
+      time,
       pinned: message.isFeatured || message.isDistrictFeatured,
       image: bannerImageOrDefault ? bannerImageOrDefault.url : '',
       alt: bannerImageOrDefault ? coverImageAlt : '',