feat: APPS-3049 Create Calendar component (Part 1) (#655)

* task: install vuetify v3.4.9

* task: setup vuetify config

* task: install vite vuetify plugin

* task: add vuetify lab import to vite config

* wip: add minimal calendar

* task: uninstall vuetify

* task: remove unneeded vuetify plugin folder/file

* task: adjusting/refining vuetify config

* fix: linting

* wip: display test events

* wip: calendar navigation

* wip: calendar styling/theming

* fix: linting

* wip: configure storybook vuetify integration

* add baseCalendar stories

* wip: update calendar styling

* fix: linting

* fix: set fix min width for calendar cells

* Add preview export to storybook/vuetify config

* wip: move vuetify config into plugins folder

* task: clean up commented vuetify code in main.ts

* wip: testing storybook preview.ts update

* adjust config for vuetify-storybook, add style to wrap comp

* task: uninstall vite-plugin-vuetify

* ci: fix cypress binary error

* ci: add cypress verify command to ci.yml

* feat: refactor vuetifywrapper and make it external for the build

* fix: eslint errors

---------

Co-authored-by: tinuola <[email protected]>
Co-authored-by: Parinita Mulak <[email protected]>

.github/workflows/ci.yml

@@ -98,6 +98,8 @@ jobs:
       env:
         NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
         NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_STORYBOOK_VUE3X }}
+    - name: Verify Cypress Installation
+      run: pnpm exec cypress verify
     - name: Cypress test for Storybook Components
       uses: cypress-io/github-action@v5
       with:

.github/workflows/setup-workspace/action.yml

@@ -25,3 +25,14 @@ runs:
     - name: Install Global Packages
       shell: bash
       run: pnpm add -g gulp prettier typescript
+    - name: Install Cypress Binary
+      shell: bash
+      run: pnpm exec cypress install
+
+    - name: Cache Cypress Binary
+      uses: actions/cache@v3
+      with:
+        path: ~/.cache/Cypress
+        key: cypress-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+        restore-keys: |
+          cypress-${{ runner.os }}-

.storybook/VuetifyStoryWrapper.vue

@@ -0,0 +1,16 @@
+<!-- Integrating Vuetify with Storybook -->
+<!-- https://storybook.js.org/recipes/vuetify -->
+<!-- https://github.com/storybookjs/vue3-code-examples/blob/main/.storybook/VuetifyAppWrapper.vue -->
+
+<template>
+      <div class="vuetify-storybook-wrapper">
+      <slot name="story"></slot>
+    </div>
+</template>
+
+<style>
+.vuetify-storybook-wrapper {
+  display: flex;
+  justify-content: center;
+}
+</style>

.storybook/preview.ts

@@ -1,11 +1,15 @@
 import { setup } from "@storybook/vue3"
-import type { Preview } from "@storybook/vue3"
 import "ucla-library-design-tokens/scss/app-global.scss"
 import "@/styles/global.scss"
 import router from "@/router"
 import { createPinia } from 'pinia';
+import type { App } from 'vue'
 
+import { vuetify } from '../src/plugins/vuetify'
 
+function registerPlugins(app: App) {
+    app.use(vuetify)
+}
 
 export const parameters = {
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -62,7 +66,9 @@ export const parameters = {
         },
     },
 }
-setup((app) => {
+
+setup((app: App) => {
+    registerPlugins(app)
     app.use(router)
     app.use(createPinia())
-})
+})

.storybook/withVuetifyTheme.decorator.js

@@ -0,0 +1,24 @@
+// Integrating Vuetify with Storybook
+// https://storybook.js.org/recipes/vuetify
+
+import { h } from 'vue'
+import StoryWrapper from './VuetifyStoryWrapper.vue'
+
+// Define a decorator function
+export const withVuetifyTheme = (storyFn, context) => {
+  // Call the original story function to get the story component
+  const story = storyFn()
+
+  // Return a new function that will be used as the story component
+  return () => {
+    // Use the "h" function to create a StoryWrapper element
+    return h(
+      StoryWrapper, // Component to create
+      {}, // Props for StoryWrapper (empty in this case)
+      {
+        // Pass the story component into the "story" slot of StoryWrapper
+        story: () => h(story, { ...context.args }) // The storyFn with context args
+      }
+    )
+  }
+}

package.json

@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.43.1",
+    "@mdi/font": "^7.4.47",
     "@percy/cli": "^1.30.0",
     "@percy/cypress": "^3.1.2",
     "@semantic-release/changelog": "^6.0.3",
@@ -89,12 +90,14 @@
     "date-fns": "^2.30.0",
     "lodash": "^4.17.21",
     "pinia": "^2.2.4",
-    "vue3-carousel": "^0.3.1"
+    "vue3-carousel": "^0.3.1",
+    "vuetify": "^3.7.4"
   },
   "peerDependencies": {
-    "vue": "^3.5.12"
+    "vue": "^3.5.12",
+    "vuetify": "^3.7.4"
   },
   "engines": {
     "pnpm": "^9.12.1"
   }
-}
+}

src/lib-components/BaseCalendar.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed, onMounted, useTemplateRef } from 'vue'
+import format from 'date-fns/format'
+import { useTheme } from '@/composables/useTheme'
+
+const { events, value } = defineProps({
+  events: {
+    type: Array,
+    default: () => [],
+  },
+
+  value: {
+    type: Array,
+    default: () => [new Date()]
+  }
+})
+
+// const newDateRef = ref(value)
+
+const calendarRef = useTemplateRef('calendar')
+
+onMounted(() => {
+  updateCalendarWeekdays()
+})
+
+const parsedEvents = computed(() => {
+  if (events.length === 0)
+    return []
+
+  const calendarEvents = events.map((obj) => {
+    const rawDate = obj.startDateWithTime
+
+    return {
+      title: obj.title,
+      start: new Date(rawDate),
+      end: new Date(rawDate),
+      time: formatEventTime(rawDate),
+    }
+  })
+
+  return calendarEvents
+})
+// console.log(parsedEvents.value)
+
+// Format time as '00:00 PM'
+function formatEventTime(date) {
+  const formattedTime = format(new Date(date), 'h:mm aaa')
+  return formattedTime.toUpperCase()
+}
+
+// Vuetify calendar day format is single-lettered: S, M, etc.
+// Update day to full name: Sunday, Monday, etc.
+function updateCalendarWeekdays() {
+  const weekDayLabels = calendarRef.value.querySelectorAll('.v-calendar-weekly__head-weekday-with-weeknumber')
+
+  const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+  weekDayLabels.forEach((elem, idx) => elem.innerHTML = weekDays[idx])
+}
+
+const theme = useTheme()
+
+const classes = computed(() => {
+  return ['base-calendar', theme?.value || '']
+})
+</script>
+
+<template>
+  <div
+    ref="calendar"
+    :class="classes"
+  >
+    <div class="calendar-wrapper">
+      <v-sheet class="calendar-body">
+        <v-calendar
+          :events="parsedEvents"
+          view-mode="month"
+        >
+          <!-- Vuetify calendar header slot -->
+          <!--
+        <template #header="header">
+          {{ header.title }}
+        </template>
+-->
+
+          <!-- Vuetify calendar event slot -->
+          <template #event="event">
+            <div class="calendar-event-item">
+              <p class="calendar-event-title">
+                {{ event.event.title }}
+              </p>
+              <p class="calendar-event-time">
+                {{ event.event.time }}
+              </p>
+            </div>
+          </template>
+        </v-calendar>
+      </v-sheet>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "@/styles/default/_base-calendar.scss";
+@import "@/styles/ftva/_base-calendar.scss";
+</style>