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

[tinuola]

Connected to APPS-3049

Component Created: BaseComponent.vue

Stories: ~/stories/BaseCalendar.stories.js

Spec: ~/stories/BaseCalendar.spec.js

Notes:

• Part 1 of event calendar component build:

  • New calendar component that extends Vuetify's calendar component
    • Set up calendar view; create custom styles; load placeholder events
  • Installed vuetify; created plugins folder to load framework
  • Updated .storybook configuration files to setup Vuetify integration for Storybook
    • References: https://storybook.js.org/recipes/vuetify
    • https://github.com/storybookjs/vue3-code-examples/tree/main/.storybook
  • Event parsing logic is currently minimal -- only displaying event title and time

• To Do in Part 2:

  • Use feedback from @pghorpade's ticket APPS-3075 to refine/update event parsing logic as needed
  • Create event card popup
  • Update styles from initial UX review

Preview:

Checklist:

• I checked that it is working locally in the dev server
• I checked that it is working locally in the storybook
• I checked that it is working locally in the
  library-website-nuxt dev server
• I added a screenshot of it working
• UX has reviewed and approved this
• I requested a PR review from the Dev team
• I used a conventional commit message
• I assigned myself to this PR

[github-actions]

Percy Screenshots

In order to conserve our percy screenshot allowance, percy is not configured to run automatically. Please make sure the PR is ready and all other checks are passing, then start it manually:

1. Visit https://github.com/UCLALibrary/ucla-library-website-components/actions/workflows/percy.yml 2. Click the 'Run workflow' button in the blue bar. 3. Select the correct branch for this PR and click 'Run workflow' again to confirm.

[github-actions]

🚀 Deployed on https://deploy-preview-655--ucla-library-storybook.netlify.app