From 2405593b253351365560178dcdd8e3d4c5daa721 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Wed, 28 Sep 2022 18:10:56 +0300
Subject: [PATCH] TS-ify VItemGroup and VPopover components

---
 src/components/VItemGroup/VItem.vue           | 19 ++--
 src/components/VItemGroup/VItemGroup.vue      | 88 ++++++++-----------
 .../VItemGroup/meta/VItemGroup.stories.js     |  4 +-
 src/components/VPopover/VPopover.vue          | 22 +++--
 src/components/VPopover/VPopoverContent.vue   | 15 ++--
 ...ialog-content.js => use-dialog-content.ts} | 44 ++++------
 src/composables/use-focus-on-show.ts          |  2 +-
 ...over-content.js => use-popover-content.ts} | 27 +++---
 src/composables/use-popper.ts                 |  4 +-
 src/models/item-group.ts                      | 36 ++++++++
 tsconfig.json                                 |  7 +-
 11 files changed, 145 insertions(+), 123 deletions(-)
 rename src/composables/{use-dialog-content.js => use-dialog-content.ts} (59%)
 rename src/composables/{use-popover-content.js => use-popover-content.ts} (54%)
 create mode 100644 src/models/item-group.ts

diff --git a/src/components/VItemGroup/VItem.vue b/src/components/VItemGroup/VItem.vue
index a5da1c607e..14f2e87850 100644
--- a/src/components/VItemGroup/VItem.vue
+++ b/src/components/VItemGroup/VItem.vue
@@ -49,25 +49,26 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   defineComponent,
   inject,
   ref,
   computed,
   watch,
+  PropType,
 } from '@nuxtjs/composition-api'
 
 import { warn } from '~/utils/console'
 
-import VButton from '~/components/VButton.vue'
-import VIcon from '~/components/VIcon/VIcon.vue'
-import { VPopoverContentContextKey } from '~/components/VPopover/VPopoverContent.vue'
-
 import {
   VItemGroupContextKey,
   VItemGroupFocusContextKey,
-} from './VItemGroup.vue'
+} from '~/models/item-group'
+
+import VButton from '~/components/VButton.vue'
+import VIcon from '~/components/VIcon/VIcon.vue'
+import { VPopoverContentContextKey } from '~/components/VPopover/VPopoverContent.vue'
 
 import checkmark from '~/assets/icons/checkmark.svg'
 
@@ -96,9 +97,9 @@ export default defineComponent({
      * @variants 'button', 'VLink'
      */
     as: {
-      type: String,
+      type: String as PropType<'button' | 'VLink'>,
       default: 'button',
-      validator: (val) => ['button', 'VLink'].includes(val),
+      validator: (val: string) => ['button', 'VLink'].includes(val),
     },
   },
   /**
@@ -116,7 +117,7 @@ export default defineComponent({
     const isInPopover = inject(VPopoverContentContextKey, false)
     const contextProps = inject(VItemGroupContextKey)
 
-    if (!contextProps) {
+    if (!contextProps || !focusContext) {
       throw new Error(
         'Do not use `VItem` outside of a `VItemGroup`. Use `VButton` instead.'
       )
diff --git a/src/components/VItemGroup/VItemGroup.vue b/src/components/VItemGroup/VItemGroup.vue
index c3a1890e0f..9a34acf46b 100644
--- a/src/components/VItemGroup/VItemGroup.vue
+++ b/src/components/VItemGroup/VItemGroup.vue
@@ -19,44 +19,31 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   defineComponent,
   provide,
   ref,
   readonly,
+  PropType,
 } from '@nuxtjs/composition-api'
 
 import { useI18n } from '~/composables/use-i18n'
 
 import { keycodes } from '~/constants/key-codes'
 import { ensureFocus } from '~/utils/reakit-utils/focus'
-
-/**
- * @typedef VItemGroupContext
- * @property {'vertical' | 'horizontal'} direction
- * @property {boolean} bordered
- * @property {'menu' | 'radiogroup'} type
- * @property {'small' | 'medium'} size
- */
-
-/**
- * @type {import('@nuxtjs/composition-api').InjectionKey<VItemGroupContext>}
- */
-export const VItemGroupContextKey = Symbol('VItemGroupContext')
-
-/**
- * @typedef VItemGroupFocusContext
- * @property {import('@nuxtjs/composition-api').Readonly<import('@nuxtjs/composition-api').Ref<boolean>>} isGroupFocused
- * @property {(event: KeyboardEvent) => void} onItemKeyPress
- * @property {import('@nuxtjs/composition-api').Readonly<import('@nuxtjs/composition-api').Ref<number>>} selectedCount
- * @property {(selected: boolean, previousSelected: boolean) => void} setSelected
- */
-
-/**
- * @type {import('@nuxtjs/composition-api').InjectionKey<VItemGroupFocusContext>}
- */
-export const VItemGroupFocusContextKey = Symbol('VItemGroupFocusContext')
+import type {
+  ItemGroupDirection,
+  ItemGroupSize,
+  ItemGroupType,
+} from '~/models/item-group'
+import {
+  itemGroupDirections,
+  itemGroupSizes,
+  itemGroupTypes,
+  VItemGroupContextKey,
+  VItemGroupFocusContextKey,
+} from '~/models/item-group'
 
 const arrows = [
   keycodes.ArrowUp,
@@ -74,11 +61,10 @@ export default defineComponent({
      * @default 'vertical'
      */
     direction: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'vertical' | 'horizontal' | 'columns' >} */ (
-        String
-      ),
+      type: String as PropType<ItemGroupDirection>,
       default: 'vertical',
-      validate: (v) => ['vertical', 'horizontal', 'columns'].includes(v),
+      validate: (v: string) =>
+        (itemGroupDirections as unknown as string[]).includes(v),
     },
     /**
      * Whether to render a bordered, separated list of items. When false each
@@ -105,11 +91,10 @@ export default defineComponent({
      * @default 'menu'
      */
     type: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'menu' | 'radiogroup'>} */ (
-        String
-      ),
+      type: String as PropType<ItemGroupType>,
       default: 'menu',
-      validate: (v) => ['menu', 'radiogroup'].includes(v),
+      validate: (v: string) =>
+        (itemGroupTypes as unknown as string[]).includes(v),
     },
     /**
      * Size of the item group corresponds to the size of the component.
@@ -117,14 +102,14 @@ export default defineComponent({
      * @default 'small'
      */
     size: {
-      type: String,
+      type: String as PropType<ItemGroupSize>,
       default: 'small',
-      validate: (val) => ['small', 'medium'].includes(val),
+      validate: (v: string) =>
+        (itemGroupSizes as unknown as string[]).includes(v),
     },
   },
   setup(props) {
-    /** @type {import('@nuxtjs/composition-api').Ref<HTMLElement | undefined>} */
-    const nodeRef = ref()
+    const nodeRef = ref<HTMLElement | null>(null)
     const isFocused = ref(false)
     provide(VItemGroupContextKey, props)
 
@@ -135,29 +120,26 @@ export default defineComponent({
      * because the DOM order gets reversed to be opposite the visual order relative to left/right movement.
      *
      * For vertical locales it should remain the same.
-     * @param {string} ltr
-     * @param {string} rtl
+     * @param ltr
+     * @param rtl
      */
-    const resolveArrow = (ltr, rtl) => {
+    const resolveArrow = (ltr: string, rtl: string) => {
       return i18n.localeProperties.dir === 'rtl' &&
         props.direction === 'horizontal'
         ? rtl
         : ltr
     }
 
-    /**
-     * @param {KeyboardEvent} event
-     */
-    const onItemKeyPress = (event) => {
-      if (!arrows.includes(event.key) || !nodeRef.value) return
+    const onItemKeyPress = (event: KeyboardEvent): undefined | number => {
+      if (!(arrows as string[]).includes(event.key) || !nodeRef.value) return
 
       event.preventDefault()
 
       const target = event.target
 
       // While VItem ultimately renders a button at the moment, that could change in the future, so using a data attribute selector makes it more flexible for the future
-      const items = Array.from(
-        nodeRef.value.querySelectorAll('[data-item-group-item]')
+      const items = Array.from<HTMLElement>(
+        nodeRef.value?.querySelectorAll('[data-item-group-item]')
       )
 
       const targetIndex = items.findIndex((item) => item === target)
@@ -175,16 +157,18 @@ export default defineComponent({
             return ensureFocus(items[0])
           }
           return ensureFocus(items[targetIndex + 1])
+        default:
+          return
       }
     }
 
     const selectedCount = ref(0)
 
     /**
-     * @param {boolean} selected
-     * @param {boolean} previousSelected
+     * @param selected
+     * @param previousSelected
      */
-    const setSelected = (selected, previousSelected) => {
+    const setSelected = (selected: boolean, previousSelected: boolean) => {
       if (previousSelected && !selected) selectedCount.value -= 1
       if (!previousSelected && selected) selectedCount.value += 1
     }
diff --git a/src/components/VItemGroup/meta/VItemGroup.stories.js b/src/components/VItemGroup/meta/VItemGroup.stories.js
index 883a5422e0..44ec055812 100644
--- a/src/components/VItemGroup/meta/VItemGroup.stories.js
+++ b/src/components/VItemGroup/meta/VItemGroup.stories.js
@@ -1,5 +1,7 @@
 import { ref } from '@nuxtjs/composition-api'
 
+import { itemGroupDirections } from '~/models/item-group'
+
 import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
 import VItem from '~/components/VItemGroup/VItem.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
@@ -20,7 +22,7 @@ export default {
   args: {
     direction: {
       type: 'radio',
-      options: ['vertical', 'horizontal'],
+      options: itemGroupDirections,
     },
     bordered: 'boolean',
   },
diff --git a/src/components/VPopover/VPopover.vue b/src/components/VPopover/VPopover.vue
index 3ee24f3b01..3e8a1a340f 100644
--- a/src/components/VPopover/VPopover.vue
+++ b/src/components/VPopover/VPopover.vue
@@ -42,17 +42,20 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   defineComponent,
   ref,
   watch,
   reactive,
   computed,
+  PropType,
 } from '@nuxtjs/composition-api'
 
 import VPopoverContent from '~/components/VPopover/VPopoverContent.vue'
 
+import type { Placement, PositioningStrategy } from '@popperjs/core'
+
 export default defineComponent({
   name: 'VPopover',
   components: { VPopoverContent },
@@ -97,9 +100,7 @@ export default defineComponent({
      * @default 'bottom'
      */
     placement: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<import('@popperjs/core').Placement>} */ (
-        String
-      ),
+      type: String as PropType<Placement>,
     },
     /**
      * The positioning strategy of the popover. If your reference element is in a fixed container
@@ -110,9 +111,7 @@ export default defineComponent({
      * @default 'absolute'
      */
     strategy: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<import('@popperjs/core').PositioningStrategy>} */ (
-        String
-      ),
+      type: String as PropType<PositioningStrategy>,
     },
     /**
      * The label of the popover content. Must be provided if `labelledBy` is empty.
@@ -133,7 +132,7 @@ export default defineComponent({
       type: Number,
       default: 50,
       // TODO: extract valid z-indexes (these are from the tailwind config)
-      validator: (v) => [0, 10, 20, 30, 40, 50].includes(v),
+      validator: (v: number) => [0, 10, 20, 30, 40, 50].includes(v),
     },
     /**
      * Whether the popover height should be clipped and made scrollable
@@ -153,8 +152,7 @@ export default defineComponent({
   ],
   setup(_, { emit }) {
     const visibleRef = ref(false)
-    /** @type {import('@nuxtjs/composition-api').Ref<HTMLElement | undefined>} */
-    const triggerContainerRef = ref()
+    const triggerContainerRef = ref<HTMLElement | null>(null)
 
     const triggerA11yProps = reactive({
       'aria-expanded': false,
@@ -163,11 +161,11 @@ export default defineComponent({
 
     const triggerRef = computed(() =>
       triggerContainerRef.value?.firstChild
-        ? /** @type {HTMLElement} */ (triggerContainerRef.value.firstChild)
+        ? (triggerContainerRef.value.firstChild as HTMLElement)
         : undefined
     )
 
-    watch([visibleRef], ([visible]) => {
+    watch(visibleRef, (visible) => {
       triggerA11yProps['aria-expanded'] = visible
     })
 
diff --git a/src/components/VPopover/VPopoverContent.vue b/src/components/VPopover/VPopoverContent.vue
index b1b6663fdc..f22648069f 100644
--- a/src/components/VPopover/VPopoverContent.vue
+++ b/src/components/VPopover/VPopoverContent.vue
@@ -41,6 +41,7 @@ import { warn } from '~/utils/console'
 import { defineEvent } from '~/types/emits'
 
 import type { CSSProperties } from '@vue/runtime-dom'
+import type { SetupContext } from 'vue'
 
 export const VPopoverContentContextKey = Symbol(
   'VPopoverContentContextKey'
@@ -74,17 +75,21 @@ export default defineComponent({
       default: true,
     },
     triggerElement: {
-      type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
+      type: (process.server
+        ? Object
+        : HTMLElement) as PropType<HTMLElement | null>,
+      default: null,
     },
     placement: {
       type: String as PropType<Placement>,
       default: 'bottom-end',
-      validate: (v) => popoverPlacements.includes(v),
+      validate: (v: string) =>
+        (popoverPlacements as unknown as string[]).includes(v),
     },
     strategy: {
       type: String as PropType<PositioningStrategy>,
       default: 'absolute',
-      validate: (v) => ['absolute', 'fixed'].includes(v),
+      validate: (v: string) => ['absolute', 'fixed'].includes(v),
     },
     zIndex: {
       type: Number,
@@ -111,12 +116,12 @@ export default defineComponent({
     }
 
     const propsRefs = toRefs(props)
-    const popoverRef = ref<HTMLElement | undefined>()
+    const popoverRef = ref<HTMLElement | null>(null)
 
     const { onKeyDown, onBlur, maxHeightRef } = usePopoverContent({
       popoverRef,
       popoverPropsRefs: propsRefs,
-      emit,
+      emit: emit as SetupContext['emit'],
     })
 
     const heightProperties = computed(() => {
diff --git a/src/composables/use-dialog-content.js b/src/composables/use-dialog-content.ts
similarity index 59%
rename from src/composables/use-dialog-content.js
rename to src/composables/use-dialog-content.ts
index 7b2e665f16..4f8212948e 100644
--- a/src/composables/use-dialog-content.js
+++ b/src/composables/use-dialog-content.ts
@@ -3,25 +3,23 @@ import { useFocusOnHide } from '~/composables/use-focus-on-hide'
 import { useHideOnClickOutside } from '~/composables/use-hide-on-click-outside'
 import { useFocusOnBlur } from '~/composables/use-focus-on-blur'
 
-/**
- * @typedef InnerProps
- * @property {HTMLElement} dialogRef
- * @property {boolean} visibleRef
- * @property {boolean} autoFocusOnShowRef
- * @property {HTMLElement} triggerElementRef
- * @property {boolean} autoFocusOnHideRef
- * @property {boolean} hideOnClickOutsideRef
- * @property {boolean} hideOnEscRef
- * @property {HTMLElement} initialFocusElementRef
- * @property {() => void} hideRef
- */
-
-/** @typedef {import('./types').ToRefs<InnerProps> & { emit: import('@nuxtjs/composition-api').SetupContext['emit']}} Props */
+import type { Ref } from '@nuxtjs/composition-api'
+import type { SetupContext } from 'vue'
+
+type Props = {
+  dialogRef: Ref<HTMLElement | null>
+  visibleRef: Ref<boolean>
+  autoFocusOnShowRef: Ref<boolean>
+  autoFocusOnHideRef: Ref<boolean>
+  triggerElementRef: Ref<HTMLElement | null>
+  hideOnClickOutsideRef: Ref<boolean>
+  hideOnEscRef: Ref<boolean>
+  initialFocusElementRef?: Ref<HTMLElement | null>
+  hideRef: Ref<() => void>
+  emit: SetupContext['emit']
+}
 
-/**
- * @param {Props} params
- */
-export function useDialogContent({ emit, ...props }) {
+export function useDialogContent({ emit, ...props }: Props) {
   const focusOnBlur = useFocusOnBlur({
     dialogRef: props.dialogRef,
     visibleRef: props.visibleRef,
@@ -41,10 +39,7 @@ export function useDialogContent({ emit, ...props }) {
     hideRef: props.hideRef,
   })
 
-  /**
-   * @param {KeyboardEvent} event
-   */
-  const onKeyDown = (event) => {
+  const onKeyDown = (event: KeyboardEvent) => {
     emit('keydown', event)
 
     if (event.defaultPrevented) return
@@ -55,10 +50,7 @@ export function useDialogContent({ emit, ...props }) {
     props.hideRef.value()
   }
 
-  /**
-   * @param {FocusEvent} event
-   */
-  const onBlur = (event) => {
+  const onBlur = (event: FocusEvent) => {
     emit('blur', event)
     focusOnBlur(event)
   }
diff --git a/src/composables/use-focus-on-show.ts b/src/composables/use-focus-on-show.ts
index 908681937d..9fbdd5628e 100644
--- a/src/composables/use-focus-on-show.ts
+++ b/src/composables/use-focus-on-show.ts
@@ -14,7 +14,7 @@ type Props = {
   dialogRef: Ref<HTMLElement | null>
   visibleRef: Ref<boolean>
   autoFocusOnShowRef: Ref<boolean>
-  initialFocusElementRef: Ref<HTMLElement | null>
+  initialFocusElementRef?: Ref<HTMLElement | null>
 }
 
 /**
diff --git a/src/composables/use-popover-content.js b/src/composables/use-popover-content.ts
similarity index 54%
rename from src/composables/use-popover-content.js
rename to src/composables/use-popover-content.ts
index 096b3d7dc3..c2fc40f852 100644
--- a/src/composables/use-popover-content.js
+++ b/src/composables/use-popover-content.ts
@@ -1,18 +1,21 @@
-import { usePopper } from '~/composables/use-popper'
+import { PopoverContentProps, usePopper } from '~/composables/use-popper'
 
-import { useDialogContent } from './use-dialog-content'
+import { useDialogContent } from '~/composables/use-dialog-content'
 
-/**
- * @typedef Props
- * @property {import('./types').Ref<HTMLElement>} popoverRef
- * @property {import('./types').ToRefs<import('~/composables/use-popper').PopoverContentProps>} popoverPropsRefs
- * @property {import('@nuxtjs/composition-api').SetupContext['emit']} emit
- */
+import type { SetupContext } from 'vue'
+import type { Ref, ToRefs } from '@nuxtjs/composition-api'
 
-/**
- * @param {Props} props
- */
-export function usePopoverContent({ popoverRef, popoverPropsRefs, emit }) {
+type Props = {
+  popoverRef: Ref<HTMLElement | null>
+  popoverPropsRefs: ToRefs<PopoverContentProps>
+  emit: SetupContext['emit']
+}
+
+export function usePopoverContent({
+  popoverRef,
+  popoverPropsRefs,
+  emit,
+}: Props) {
   const { onKeyDown, onBlur } = useDialogContent({
     dialogRef: popoverRef,
     visibleRef: popoverPropsRefs.visible,
diff --git a/src/composables/use-popper.ts b/src/composables/use-popper.ts
index b611de8acf..1bdd683db3 100644
--- a/src/composables/use-popper.ts
+++ b/src/composables/use-popper.ts
@@ -16,14 +16,14 @@ export type PopoverContentProps = {
   hideOnClickOutside: boolean
   autoFocusOnShow: boolean
   autoFocusOnHide: boolean
-  triggerElement: HTMLElement
+  triggerElement: HTMLElement | null
   placement: Placement
   strategy: PositioningStrategy
   zIndex: number
 }
 
 type Props = {
-  popoverRef: Ref<HTMLElement>
+  popoverRef: Ref<HTMLElement | null>
   popoverPropsRefs: ToRefs<PopoverContentProps>
 }
 
diff --git a/src/models/item-group.ts b/src/models/item-group.ts
new file mode 100644
index 0000000000..ac5fae608c
--- /dev/null
+++ b/src/models/item-group.ts
@@ -0,0 +1,36 @@
+import type { InjectionKey, Ref } from '@nuxtjs/composition-api'
+
+export const itemGroupDirections = [
+  'vertical',
+  'horizontal',
+  'columns',
+] as const
+export type ItemGroupDirection = typeof itemGroupDirections[number]
+
+export const itemGroupTypes = ['list', 'menu', 'radiogroup'] as const
+export type ItemGroupType = typeof itemGroupTypes[number]
+
+export const itemGroupSizes = ['small', 'medium'] as const
+export type ItemGroupSize = typeof itemGroupSizes[number]
+
+export type VIemGroupContext = {
+  direction: ItemGroupDirection
+  bordered: boolean
+  type: ItemGroupType
+  size: ItemGroupSize
+}
+
+export const VItemGroupContextKey = Symbol(
+  'VItemGroupContext'
+) as InjectionKey<VIemGroupContext>
+
+export type VIemGroupFocusContext = {
+  isGroupFocused: Readonly<Ref<boolean>>
+  onItemKeyPress: (event: KeyboardEvent) => void
+  selectedCount: Readonly<Ref<number>>
+  setSelected: (selected: boolean, previousSelected: boolean) => void
+}
+
+export const VItemGroupFocusContextKey = Symbol(
+  'VItemGroupFocusContext'
+) as InjectionKey<VIemGroupFocusContext>
diff --git a/tsconfig.json b/tsconfig.json
index 53e88d9b23..7d4a7b040e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -59,13 +59,15 @@
     "src/components/VContentLink/**.vue",
     "src/components/VGlobalAudioSection/**.vue",
     "src/components/VIcon/**.vue",
-    "src/components/VImageGrid/**.vue",
     "src/components/VIconButton/**.vue",
+    "src/components/VImageGrid/**.vue",
     "src/components/VInputField/**.vue",
+    "src/components/VItemGroup/**.vue",
     "src/components/VLicense/**.vue",
     "src/components/VLogoLoader/**.vue",
     "src/components/VMediaInfo/**.vue",
     "src/components/VMediaTag/**.vue",
+    "src/components/VPopover/**.vue",
     "src/components/VRecentSearches/**.vue",
     "src/components/VSkeleton/**.vue",
     "src/components/VTabs/**.vue",
@@ -79,13 +81,12 @@
     "src/components/VErrorSection/VErrorImage.vue",
     "src/components/VFilters/VLicenseExplanation.vue",
     "src/components/VHeader/VFilterButton.vue",
-    "src/components/VHeader/VSearchBar/**.vue",
     "src/components/VHeader/VPageLinks.vue",
+    "src/components/VHeader/VSearchBar/**.vue",
     "src/components/VImageDetails/VRelatedImages.vue",
     "src/pages/feedback.vue",
     "src/pages/search-help.vue",
     "src/composables/types.js",
-    "src/composables/use-event-listener-outside.js",
 
     // This section cannot be converted to TypeScript because it's used in non-TS contexts (like Tailwind configuration)
     "src/constants/screens.js",