From ef3b5460ad44d0a7960616ae6777e48b58710557 Mon Sep 17 00:00:00 2001 From: Joakim Olsson Date: Mon, 5 Feb 2024 16:48:02 +0100 Subject: [PATCH] chore: upgrade to Vue3/Vuetify3 --- .eslintrc.cjs | 46 +- Dockerfile | 2 +- components/pages/events/Event/distance.vue | 34 - .../{Event/index.vue => event-card.vue} | 112 +- components/pages/events/event-distance.vue | 39 + .../events/{List/index.vue => event-list.vue} | 14 +- .../events/{index.vue => event-page.vue} | 44 +- components/pages/filters/List/index.vue | 43 - components/pages/filters/filter-list.vue | 44 + .../filters/{index.vue => filter-page.vue} | 14 +- .../origins/{index.vue => origin-page.vue} | 35 +- graphql/generated/operations.ts | 34 +- i18n.config.ts | 6 + layouts/components/themed.vue | 16 - layouts/default.vue | 179 +- middleware/auth.js | 12 - nuxt.config.js | 172 +- package.json | 105 +- pages/filters.vue | 8 +- pages/index.vue | 8 +- pages/origins.vue | 8 +- plugins/apollo.js | 48 - plugins/apollo.ts | 138 + plugins/auth.ts | 141 - plugins/auth0.ts | 10 + plugins/hooks.js | 4 - plugins/i18n.js | 14 - plugins/pinia.ts | 10 - plugins/sentry.ts | 21 + plugins/vuetify.js | 4 - plugins/vuetify.ts | 14 + {static => public}/android-chrome-192x192.png | Bin {static => public}/android-chrome-512x512.png | Bin {static => public}/apple-touch-icon.png | Bin {static => public}/browserconfig.xml | 0 {static => public}/favicon-16x16.png | Bin {static => public}/favicon-32x32.png | Bin {static => public}/favicon.ico | Bin {static => public}/logo.png | Bin {static => public}/robots.txt | 0 {static => public}/safari-pinned-tab.svg | 0 {static => public}/site.webmanifest | 0 store/index.ts | 9 +- stylelint.config.cjs | 4 +- translations/app-en.ts | 11 + translations/app-sv.ts | 11 + translations/app.js | 24 - translations/en.ts | 14 + translations/events-en.ts | 20 + translations/events-sv.ts | 20 + translations/events.js | 42 - translations/filters-en.ts | 11 + translations/filters-sv.ts | 11 + translations/filters.js | 24 - translations/index.js | 19 - translations/numberFormats.js | 14 - translations/origins-en.ts | 8 + translations/origins-sv.ts | 8 + translations/origins.js | 18 - translations/sv.ts | 14 + translations/vuetify.js | 38 - tsconfig.json | 28 +- utils/environment.ts | 55 + utils/gql.ts | 2 +- yarn.lock | 10401 ++++------------ 65 files changed, 3153 insertions(+), 9032 deletions(-) delete mode 100644 components/pages/events/Event/distance.vue rename components/pages/events/{Event/index.vue => event-card.vue} (62%) create mode 100644 components/pages/events/event-distance.vue rename components/pages/events/{List/index.vue => event-list.vue} (78%) rename components/pages/events/{index.vue => event-page.vue} (87%) delete mode 100644 components/pages/filters/List/index.vue create mode 100644 components/pages/filters/filter-list.vue rename components/pages/filters/{index.vue => filter-page.vue} (94%) rename components/pages/origins/{index.vue => origin-page.vue} (83%) create mode 100644 i18n.config.ts delete mode 100644 layouts/components/themed.vue delete mode 100644 middleware/auth.js delete mode 100644 plugins/apollo.js create mode 100644 plugins/apollo.ts delete mode 100644 plugins/auth.ts create mode 100644 plugins/auth0.ts delete mode 100644 plugins/hooks.js delete mode 100644 plugins/i18n.js delete mode 100644 plugins/pinia.ts create mode 100644 plugins/sentry.ts delete mode 100644 plugins/vuetify.js create mode 100644 plugins/vuetify.ts rename {static => public}/android-chrome-192x192.png (100%) rename {static => public}/android-chrome-512x512.png (100%) rename {static => public}/apple-touch-icon.png (100%) rename {static => public}/browserconfig.xml (100%) rename {static => public}/favicon-16x16.png (100%) rename {static => public}/favicon-32x32.png (100%) rename {static => public}/favicon.ico (100%) rename {static => public}/logo.png (100%) rename {static => public}/robots.txt (100%) rename {static => public}/safari-pinned-tab.svg (100%) rename {static => public}/site.webmanifest (100%) create mode 100644 translations/app-en.ts create mode 100644 translations/app-sv.ts delete mode 100644 translations/app.js create mode 100644 translations/en.ts create mode 100644 translations/events-en.ts create mode 100644 translations/events-sv.ts delete mode 100644 translations/events.js create mode 100644 translations/filters-en.ts create mode 100644 translations/filters-sv.ts delete mode 100644 translations/filters.js delete mode 100644 translations/index.js delete mode 100644 translations/numberFormats.js create mode 100644 translations/origins-en.ts create mode 100644 translations/origins-sv.ts delete mode 100644 translations/origins.js create mode 100644 translations/sv.ts delete mode 100644 translations/vuetify.js create mode 100644 utils/environment.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index b0ff5c3..bfee290 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,36 +1,38 @@ module.exports = { - root: true, - env: { - browser: true, - node: true - }, parser: 'vue-eslint-parser', - plugins: [ - '@typescript-eslint' - ], parserOptions: { parser: '@typescript-eslint/parser', - requireConfigFile: false + sourceType: 'module', }, - extends: [ - '@nuxtjs', - '@nuxtjs/eslint-config-typescript', - 'plugin:nuxt/recommended' - ], - // add your custom rules here - rules: {}, + extends: ['@nuxtjs/eslint-config-typescript', 'eslint:recommended', 'plugin:vue/vue3-recommended'], + rules: { + 'vue/valid-v-slot': 'off', + 'arrow-parens': ['error', 'always'], + 'comma-dangle': ['error', 'always-multiline'], + 'space-before-function-paren': ['error', { + anonymous: 'never', + named: 'never', + asyncArrow: 'always', + }], + '@typescript-eslint/consistent-type-imports': ['error', { + fixStyle: 'inline-type-imports', + }], + }, + plugins: [], + ignorePatterns: ['nuxt.config.ts'], overrides: [ { files: ['pages/**/*.vue', 'layouts/*.vue'], rules: { - 'vue/multi-word-component-names': 'off' - } + 'vue/multi-word-component-names': 'off', + }, }, { files: ['graphql/generated/*.ts'], rules: { - 'no-use-before-define': 'off' - } - } - ] + 'no-use-before-define': 'off', + 'no-unused-vars': 'off', + }, + }, + ], } diff --git a/Dockerfile b/Dockerfile index 2f3066f..ea847bf 100644 --- a/Dockerfile +++ b/Dockerfile @@ -6,7 +6,7 @@ COPY ./package.json ./yarn.lock ./.snyk ./ RUN yarn install --frozen-lockfile COPY ./ ./ -RUN yarn build && yarn lint +RUN yarn run generate && yarn lint #RUN yarn start:ci & yarn wait && yarn test:cypress FROM nginx diff --git a/components/pages/events/Event/distance.vue b/components/pages/events/Event/distance.vue deleted file mode 100644 index 543a375..0000000 --- a/components/pages/events/Event/distance.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/components/pages/events/Event/index.vue b/components/pages/events/event-card.vue similarity index 62% rename from components/pages/events/Event/index.vue rename to components/pages/events/event-card.vue index 1133e85..5fa6d95 100644 --- a/components/pages/events/Event/index.vue +++ b/components/pages/events/event-card.vue @@ -1,80 +1,81 @@ @@ -112,30 +113,31 @@ import { format, formatDistanceToNow, parseISO } from 'date-fns' import { enGB, sv } from 'date-fns/locale' -import { computed, getCurrentInstance, PropType } from 'vue' -import { Event } from '~/graphql/generated/operations' -import DistanceDisplay from '~/components/pages/events/Event/distance.vue' +import { computed, type PropType } from 'vue' +import { useI18n } from '#i18n' +import { type Event } from '~/graphql/generated/operations' +import DistanceDisplay from '~/components/pages/events/event-distance.vue' const props = defineProps({ event: { type: Object as PropType, - required: true + required: true, }, hasUser: { type: Boolean, - required: true + required: true, }, toggleIgnore: { type: Function, - required: true - } + required: true, + }, }) -const instance = getCurrentInstance() -const locale = computed(() => (instance?.proxy.$i18n.locale ?? 'sv') === 'en' ? enGB : sv) +const { locale: currentLocale } = useI18n() +const locale = computed(() => (currentLocale.value ?? 'sv') === 'en' ? enGB : sv) const time = computed(() => (props.event.time || '').split('-')[0].replace('.', ':')) const weekday = computed(() => format(parseISO(props.event.date), 'EEEE', { locale: locale.value })) const daysUntil = computed(() => formatDistanceToNow(parseISO(`${props.event.date}T${time.value}`), { addSuffix: true, - locale: locale.value + locale: locale.value, })) diff --git a/components/pages/events/event-distance.vue b/components/pages/events/event-distance.vue new file mode 100644 index 0000000..58f5152 --- /dev/null +++ b/components/pages/events/event-distance.vue @@ -0,0 +1,39 @@ + + + diff --git a/components/pages/events/List/index.vue b/components/pages/events/event-list.vue similarity index 78% rename from components/pages/events/List/index.vue rename to components/pages/events/event-list.vue index e189260..3177b8f 100644 --- a/components/pages/events/List/index.vue +++ b/components/pages/events/event-list.vue @@ -1,34 +1,34 @@ diff --git a/components/pages/events/index.vue b/components/pages/events/event-page.vue similarity index 87% rename from components/pages/events/index.vue rename to components/pages/events/event-page.vue index f1839f7..2da58dd 100644 --- a/components/pages/events/index.vue +++ b/components/pages/events/event-page.vue @@ -10,14 +10,15 @@ -