From c9ddce8eab6885ba20fb085a283a4f85ca85d843 Mon Sep 17 00:00:00 2001 From: Tinuola 'Tinu' Awopetu <24995224+tinuola@users.noreply.github.com> Date: Tue, 26 Nov 2024 18:11:50 -0800 Subject: [PATCH] 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 Co-authored-by: Parinita Mulak --- .github/workflows/ci.yml | 2 + .github/workflows/setup-workspace/action.yml | 11 + .storybook/VuetifyStoryWrapper.vue | 16 + .storybook/preview.ts | 12 +- .storybook/withVuetifyTheme.decorator.js | 24 ++ package.json | 9 +- pnpm-lock.yaml | 74 +++++ src/lib-components/BaseCalendar.vue | 106 +++++++ src/lib-components/Flexible/MediaGallery.vue | 15 +- src/lib-components/index.js | 1 + src/main.ts | 8 +- src/plugins/vuetify.ts | 10 + src/stories/BaseCalendar.spec.js | 9 + src/stories/BaseCalendar.stories.js | 34 +++ src/stories/mock/CalendarEvents.js | 300 +++++++++++++++++++ src/styles/default/_base-calendar.scss | 141 +++++++++ src/styles/ftva/_base-calendar.scss | 24 ++ vite.config.ts | 7 +- 18 files changed, 783 insertions(+), 20 deletions(-) create mode 100644 .storybook/VuetifyStoryWrapper.vue create mode 100644 .storybook/withVuetifyTheme.decorator.js create mode 100644 src/lib-components/BaseCalendar.vue create mode 100644 src/plugins/vuetify.ts create mode 100644 src/stories/BaseCalendar.spec.js create mode 100644 src/stories/BaseCalendar.stories.js create mode 100644 src/stories/mock/CalendarEvents.js create mode 100644 src/styles/default/_base-calendar.scss create mode 100644 src/styles/ftva/_base-calendar.scss diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6eef6bce3..39bd78faf 100644 --- a/.github/workflows/ci.yml +++ b/.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: diff --git a/.github/workflows/setup-workspace/action.yml b/.github/workflows/setup-workspace/action.yml index 0bd376870..f16f5c956 100644 --- a/.github/workflows/setup-workspace/action.yml +++ b/.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 }}- diff --git a/.storybook/VuetifyStoryWrapper.vue b/.storybook/VuetifyStoryWrapper.vue new file mode 100644 index 000000000..b6ac78590 --- /dev/null +++ b/.storybook/VuetifyStoryWrapper.vue @@ -0,0 +1,16 @@ + + + + + + + \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 6687f5cfa..c0dd75313 100644 --- a/.storybook/preview.ts +++ b/.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()) -}) +}) \ No newline at end of file diff --git a/.storybook/withVuetifyTheme.decorator.js b/.storybook/withVuetifyTheme.decorator.js new file mode 100644 index 000000000..fdaa5230a --- /dev/null +++ b/.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 + } + ) + } +} \ No newline at end of file diff --git a/package.json b/package.json index 52421d990..dc0e4a06a 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 44450d57c..cee8fcc41 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,10 +32,16 @@ importers: vue3-carousel: specifier: ^0.3.1 version: 0.3.4(vue@3.5.12(typescript@5.6.3)) + vuetify: + specifier: ^3.7.4 + version: 3.7.4(typescript@5.6.3)(vite-plugin-vuetify@2.0.4)(vue@3.5.12(typescript@5.6.3)) devDependencies: '@antfu/eslint-config': specifier: ^0.43.1 version: 0.43.1(eslint@8.57.1)(typescript@5.6.3) + '@mdi/font': + specifier: ^7.4.47 + version: 7.4.47 '@percy/cli': specifier: ^1.30.0 version: 1.30.1(typescript@5.6.3) @@ -1100,6 +1106,9 @@ packages: '@juggle/resize-observer@3.4.0': resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==} + '@mdi/font@7.4.47': + resolution: {integrity: sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==} + '@mdx-js/react@2.3.0': resolution: {integrity: sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==} peerDependencies: @@ -2420,6 +2429,12 @@ packages: peerDependencies: vue: '>=3.2.0' + '@vuetify/loader-shared@2.0.3': + resolution: {integrity: sha512-Ss3GC7eJYkp2SF6xVzsT7FAruEmdihmn4OCk2+UocREerlXKWgOKKzTN5PN3ZVN5q05jHHrsNhTuWbhN61Bpdg==} + peerDependencies: + vue: ^3.0.0 + vuetify: ^3.0.0 + '@vueuse/components@11.2.0': resolution: {integrity: sha512-L9uDsTcaMvz3x1tX2RepdmvDJGIHBiSeYVXNFfHceiM3mmPY6vfRlS/XqZTpip7FdXxu0s/zSmtZCffZGTNRXQ==} @@ -6029,6 +6044,10 @@ packages: resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==} engines: {node: '>=8'} + upath@2.0.1: + resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==} + engines: {node: '>=4'} + update-browserslist-db@1.1.1: resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} hasBin: true @@ -6112,6 +6131,14 @@ packages: videojs-vtt.js@0.15.5: resolution: {integrity: sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==} + vite-plugin-vuetify@2.0.4: + resolution: {integrity: sha512-A4cliYUoP/u4AWSRVRvAPKgpgR987Pss7LpFa7s1GvOe8WjgDq92Rt3eVXrvgxGCWvZsPKziVqfHHdCMqeDhfw==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + vite: '>=5' + vue: ^3.0.0 + vuetify: ^3.0.0 + vite-svg-loader@5.1.0: resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==} peerDependencies: @@ -6209,6 +6236,22 @@ packages: typescript: optional: true + vuetify@3.7.4: + resolution: {integrity: sha512-Y8UU5wUDQXC3oz2uumPb8IOdvB4XMCxtxnmqdOc+LihNuPlkSgxIwf92ndRzbOtJFKHsggFUxpyLqpQp+A+5kg==} + engines: {node: ^12.20 || >=14.13} + peerDependencies: + typescript: '>=4.7' + vite-plugin-vuetify: '>=1.0.0' + vue: ^3.3.0 + webpack-plugin-vuetify: '>=2.0.0' + peerDependenciesMeta: + typescript: + optional: true + vite-plugin-vuetify: + optional: true + webpack-plugin-vuetify: + optional: true + walker@1.0.8: resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==} @@ -7474,6 +7517,8 @@ snapshots: '@juggle/resize-observer@3.4.0': {} + '@mdi/font@7.4.47': {} + '@mdx-js/react@2.3.0(react@18.3.1)': dependencies: '@types/mdx': 2.0.13 @@ -9313,6 +9358,13 @@ snapshots: date-fns: 3.6.0 vue: 3.5.12(typescript@5.6.3) + '@vuetify/loader-shared@2.0.3(vue@3.5.12(typescript@5.6.3))(vuetify@3.7.4)': + dependencies: + upath: 2.0.1 + vue: 3.5.12(typescript@5.6.3) + vuetify: 3.7.4(typescript@5.6.3)(vite-plugin-vuetify@2.0.4)(vue@3.5.12(typescript@5.6.3)) + optional: true + '@vueuse/components@11.2.0(vue@3.5.12(typescript@5.6.3))': dependencies: '@vueuse/core': 11.2.0(vue@3.5.12(typescript@5.6.3)) @@ -13140,6 +13192,9 @@ snapshots: untildify@4.0.0: {} + upath@2.0.1: + optional: true + update-browserslist-db@1.1.1(browserslist@4.24.2): dependencies: browserslist: 4.24.2 @@ -13228,6 +13283,18 @@ snapshots: dependencies: global: 4.4.0 + vite-plugin-vuetify@2.0.4(vite@5.4.10(@types/node@18.19.64)(sass@1.80.6))(vue@3.5.12(typescript@5.6.3))(vuetify@3.7.4): + dependencies: + '@vuetify/loader-shared': 2.0.3(vue@3.5.12(typescript@5.6.3))(vuetify@3.7.4) + debug: 4.3.7(supports-color@8.1.1) + upath: 2.0.1 + vite: 5.4.10(@types/node@18.19.64)(sass@1.80.6) + vue: 3.5.12(typescript@5.6.3) + vuetify: 3.7.4(typescript@5.6.3)(vite-plugin-vuetify@2.0.4)(vue@3.5.12(typescript@5.6.3)) + transitivePeerDependencies: + - supports-color + optional: true + vite-svg-loader@5.1.0(vue@3.5.12(typescript@5.6.3)): dependencies: svgo: 3.3.2 @@ -13312,6 +13379,13 @@ snapshots: optionalDependencies: typescript: 5.6.3 + vuetify@3.7.4(typescript@5.6.3)(vite-plugin-vuetify@2.0.4)(vue@3.5.12(typescript@5.6.3)): + dependencies: + vue: 3.5.12(typescript@5.6.3) + optionalDependencies: + typescript: 5.6.3 + vite-plugin-vuetify: 2.0.4(vite@5.4.10(@types/node@18.19.64)(sass@1.80.6))(vue@3.5.12(typescript@5.6.3))(vuetify@3.7.4) + walker@1.0.8: dependencies: makeerror: 1.0.12 diff --git a/src/lib-components/BaseCalendar.vue b/src/lib-components/BaseCalendar.vue new file mode 100644 index 000000000..fc189af4d --- /dev/null +++ b/src/lib-components/BaseCalendar.vue @@ -0,0 +1,106 @@ + + + + + diff --git a/src/lib-components/Flexible/MediaGallery.vue b/src/lib-components/Flexible/MediaGallery.vue index 8707d46a7..24a39c0d1 100644 --- a/src/lib-components/Flexible/MediaGallery.vue +++ b/src/lib-components/Flexible/MediaGallery.vue @@ -1,7 +1,4 @@ -