Merge branch 'main' into ci/pipelines

* main:
  Create the `InputField` and `SearchBar` components (#380)
  Add VPopover component (#397)
  Search and media store refactoring (#398)
  Node 16 and NPM 8 (#413)

.eslintrc.js

@@ -46,6 +46,10 @@ module.exports = {
       },
     ],
     'vuejs-accessibility/aria-role': 'warn',
+    'vuejs-accessibility/label-has-for': [
+      'warn',
+      { required: { some: ['nesting', 'id'] } },
+    ],
     'unicorn/filename-case': ['error', { case: 'kebabCase' }],
   },
   settings: {

.storybook/decorators/with-rtl.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import { ref, watch, useContext } from '@nuxtjs/composition-api'
+import { ref, watch, useContext, onMounted } from '@nuxtjs/composition-api'
 import { useEffect } from '@storybook/client-api'
 
 const languageDirection = Vue.observable({ value: 'ltr' })
@@ -16,14 +16,20 @@ export const WithRTL = (story, context) => {
     setup() {
       const element = ref()
       const { i18n } = useContext()
-      watch(languageDirection, (direction) => {
-        i18n.localeProperties.dir = direction.value
-        if (element.value) {
-          element.value.ownerDocument.documentElement.setAttribute(
-            'dir',
-            direction.value
-          )
-        }
+      onMounted(() => {
+        watch(
+          languageDirection,
+          (direction) => {
+            i18n.localeProperties.dir = direction.value
+            if (element.value) {
+              element.value.ownerDocument.documentElement.setAttribute(
+                'dir',
+                direction?.value ?? 'ltr'
+              )
+            }
+          },
+          { immediate: true }
+        )
       })
       return { element }
     },

nuxt.config.js

@@ -135,6 +135,7 @@ export default {
       '~/components/MetaSearch',
       '~/components/MediaTag',
       '~/components/Skeleton',
+      '~/components/VPopover',
     ],
   },
   plugins: [

package.json

@@ -109,16 +109,16 @@
     "vue-jest": "^3.0.7"
   },
   "engines": {
-    "node": ">= 12.0.0",
-    "npm": ">= 6.0.0"
+    "node": ">= 16.0.0",
+    "npm": ">= 8.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ],
   "volta": {
-    "node": "14.17.5",
-    "npm": "7.21.0"
+    "node": "16.13.0",
+    "npm": "8.1.3"
   }
 }

src/components/.eslintrc.js

@@ -3,7 +3,11 @@ module.exports = {
   rules: {
     'unicorn/filename-case': [
       'error',
-      { case: 'pascalCase', ignore: ['.eslintrc.js', '.*\\.stories\\.js'] },
+      // Allow things like `Component.stories.js` and `Component.types.js`
+      {
+        case: 'pascalCase',
+        ignore: ['.eslintrc.js', '.*\\..*\\.js'],
+      },
     ],
   },
 }

src/components/AudioDetails/Tags.vue

@@ -17,9 +17,9 @@
 </template>
 
 <script>
-import { SET_Q } from '~/constants/mutation-types'
+import { UPDATE_QUERY } from '~/constants/action-types'
 import { SEARCH } from '~/constants/store-modules'
-import { mapMutations } from 'vuex'
+import { mapActions } from 'vuex'
 
 export default {
   name: 'AudioTags',
@@ -30,7 +30,7 @@ export default {
     },
   },
   methods: {
-    ...mapMutations(SEARCH, { setSearchTerm: SET_Q }),
+    ...mapActions(SEARCH, { setSearchTerm: UPDATE_QUERY }),
     isClarifaiTag(provider) {
       return provider === 'clarifai'
     },

src/components/AudioResultsList.vue

@@ -1,22 +1,22 @@
 <template>
   <section>
-    <div v-show="!isFetching" class="results-meta">
+    <div v-show="!fetchingState.isFetching" class="results-meta">
       <span class="caption font-semibold">
         {{ _audiosCount }}
       </span>
     </div>
     <div class="px-6 pt-6">
       <AudioTrack
-        v-for="audio in audios"
+        v-for="audio in results.items"
         :key="audio.id"
         :audio="audio"
         :size="audioTrackSize"
         layout="row"
       />
     </div>
-    <div v-if="!isFetchingError" class="load-more">
+    <div v-if="!fetchingState.fetchingError" class="load-more">
       <button
-        v-show="!isFetching"
+        v-show="!fetchingState.isFetching"
         class="button"
         :disabled="isFinished"
         @click="onLoadMoreAudios"
@@ -29,16 +29,19 @@
         }}</span>
         <span v-else>{{ $t('browse-page.load') }}</span>
       </button>
-      <LoadingIcon v-show="isFetching" />
+      <LoadingIcon v-show="fetchingState.isFetching" />
     </div>
-    <div v-if="isFetchingError" class="m-auto w-1/2 text-center pt-6">
+    <div
+      v-if="fetchingState.fetchingError"
+      class="m-auto w-1/2 text-center pt-6"
+    >
       <h5>
         {{
           $t('browse-page.fetching-error', {
             type: $t('browse-page.search-form.audio'),
           })
         }}
-        {{ errorMessage }}
+        {{ fetchingState.fetchingError }}
       </h5>
     </div>
   </section>
@@ -48,54 +51,42 @@
 import { mapActions, mapGetters, mapState } from 'vuex'
 import { FETCH_MEDIA } from '~/constants/action-types'
 import { AUDIO } from '~/constants/media'
-import { FILTER, SEARCH } from '~/constants/store-modules'
+import { MEDIA, SEARCH } from '~/constants/store-modules'
 
 export default {
   name: 'AudioResultsList',
   async fetch() {
-    if (!this.audios.length) {
+    if (!this.results.items.length) {
       await this.fetchMedia({
         ...this.query,
         mediaType: AUDIO,
       })
     }
   },
   computed: {
-    ...mapState(SEARCH, [
-      'audios',
-      'errorMessage',
-      'audiosCount',
-      'audioPage',
-      'pageCount',
-      'query',
-    ]),
-    ...mapGetters(SEARCH, ['isFetching', 'isFetchingError']),
-    ...mapState(FILTER, ['isFilterVisible']),
+    ...mapState(SEARCH, ['query', 'isFilterVisible']),
+    ...mapGetters(MEDIA, ['fetchingState', 'results', 'isFinished']),
     _audiosCount() {
-      const count = this.audiosCount
+      const count = this.results.count
       if (count === 0) {
         return this.$t('browse-page.audio-no-results')
       }
-      return count >= 10000
-        ? this.$tc('browse-page.audio-result-count-more', count, {
-            localeCount: count.toLocaleString(this.$i18n.locale),
-          })
-        : this.$tc('browse-page.audio-result-count', count, {
-            localeCount: count.toLocaleString(this.$i18n.locale),
-          })
-    },
-    isFinished() {
-      return this.audioPage >= this.pageCount.audio
+      const localeCount = count.toLocaleString(this.$i18n.locale)
+      const i18nKey =
+        count >= 10000
+          ? 'browse-page.audio-result-count-more'
+          : 'browse-page.audio-result-count'
+      return this.$tc(i18nKey, count, { localeCount })
     },
     audioTrackSize() {
       return this.isFilterVisible ? 'm' : 's'
     },
   },
   methods: {
-    ...mapActions(SEARCH, { fetchMedia: FETCH_MEDIA }),
+    ...mapActions(MEDIA, { fetchMedia: FETCH_MEDIA }),
     onLoadMoreAudios() {
       const searchParams = {
-        page: this.audioPage + 1,
+        page: this.results.page + 1,
         shouldPersistMedia: true,
         ...this.query,
       }

src/components/EmbeddedNavSection.vue

@@ -124,10 +124,10 @@
 </template>
 
 <script>
-import { SET_Q } from '~/constants/mutation-types'
+import { UPDATE_QUERY } from '~/constants/action-types'
 import Dropdown from '~/components/Dropdown'
 import { SEARCH } from '~/constants/store-modules'
-import { mapMutations } from 'vuex'
+import { mapActions } from 'vuex'
 
 export default {
   name: 'EmbeddedNavSection',
@@ -144,7 +144,7 @@ export default {
     },
   },
   methods: {
-    ...mapMutations(SEARCH, { setSearchTerm: SET_Q }),
+    ...mapActions(SEARCH, { setSearchTerm: UPDATE_QUERY }),
     onSubmit() {
       const q = this.form.searchTerm
       this.setSearchTerm({ q })

src/components/Filters/FilterChecklist.vue

@@ -150,7 +150,7 @@ export default {
       this.licenseExplanationVisible = false
     },
     getFilterTypeValue(filterKey, val) {
-      return this.$store.state.filter.filters[filterKey].filter((item) =>
+      return this.$store.state.search.filters[filterKey].filter((item) =>
         item.code.includes(val)
       )
     },

src/components/Filters/FilterDisplay.vue

@@ -19,17 +19,17 @@
 import { TOGGLE_FILTER } from '~/constants/action-types'
 import FilterTag from '~/components/Filters/FilterTag'
 import { mapGetters } from 'vuex'
-import { FILTER } from '~/constants/store-modules'
+import { SEARCH } from '~/constants/store-modules'
 
 export default {
   name: 'FilterDisplay',
   components: { FilterTag },
   computed: {
-    ...mapGetters(FILTER, ['appliedFilterTags', 'isAnyFilterApplied']),
+    ...mapGetters(SEARCH, ['appliedFilterTags', 'isAnyFilterApplied']),
   },
   methods: {
     onUpdateFilter({ code, filterType }) {
-      this.$store.dispatch(`${FILTER}/${TOGGLE_FILTER}`, { code, filterType })
+      this.$store.dispatch(`${SEARCH}/${TOGGLE_FILTER}`, { code, filterType })
     },
   },
 }

src/components/Filters/FiltersList.vue

@@ -49,37 +49,20 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 import { kebabize } from '~/utils/format-strings'
-import { AUDIO, IMAGE, VIDEO } from '~/constants/media'
+import { SEARCH } from '~/constants/store-modules'
 import FilterChecklist from './FilterChecklist'
-import { FILTER, SEARCH } from '~/constants/store-modules'
 
 export default {
   name: 'FiltersList',
   components: {
     FilterChecklist,
   },
   computed: {
-    ...mapState(SEARCH, ['searchType']),
-    ...mapGetters(FILTER, [
-      'audioFiltersForDisplay',
-      'imageFiltersForDisplay',
-      'videoFiltersForDisplay',
-      'allFiltersForDisplay',
-      'isAnyFilterApplied',
-    ]),
+    ...mapGetters(SEARCH, ['mediaFiltersForDisplay', 'isAnyFilterApplied']),
     filters() {
-      switch (this.searchType) {
-        case AUDIO:
-          return this.audioFiltersForDisplay
-        case IMAGE:
-          return this.imageFiltersForDisplay
-        case VIDEO:
-          return this.videoFiltersForDisplay
-        default:
-          return this.allFiltersForDisplay
-      }
+      return this.mediaFiltersForDisplay || {}
     },
     filterTypes() {
       return Object.keys(this.filters)

src/components/Filters/SearchGridFilter.vue

@@ -16,21 +16,21 @@ import {
   CLEAR_FILTERS,
 } from '~/constants/mutation-types'
 import { TOGGLE_FILTER } from '~/constants/action-types'
-import { FILTER } from '~/constants/store-modules'
+import { SEARCH } from '~/constants/store-modules'
 import FiltersList from '~/components/Filters/FiltersList'
 
 export default {
   name: 'SearchGridFilter',
   components: { FiltersList },
   computed: {
-    ...mapState(FILTER, ['filters', 'isFilterVisible']),
+    ...mapState(SEARCH, ['filters', 'isFilterVisible']),
   },
   methods: {
-    ...mapActions(FILTER, {
+    ...mapActions(SEARCH, {
       toggleFilter: TOGGLE_FILTER,
       clearFilters: CLEAR_FILTERS,
     }),
-    ...mapMutations(FILTER, {
+    ...mapMutations(SEARCH, {
       setFilterVisible: SET_FILTER_IS_VISIBLE,
     }),
     onUpdateFilter({ code, filterType }) {