chore: resolved ui-forms typescript errors

Author: jeffdowdle

packages/eslint-config-ripple/index.js

@@ -1,5 +1,11 @@
 module.exports = {
   parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaFeatures: {
+      jsx: false
+    }
+  },
   env: {
     browser: true,
     node: true,

packages/ripple-ui-forms/cypress/support/component.ts

@@ -28,6 +28,17 @@ import { mount } from 'cypress/vue'
 import { h } from 'vue'
 import RplFauxForm from './components/RplFauxForm.vue'
 import { RplButton, RplIcon } from '@dpc-sdp/ripple-ui-core/vue'
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to mount a Vue component.
+       * @example cy.mount(MyComponent)
+       */
+      mount: typeof mount
+    }
+  }
+}
 
 Cypress.on('uncaught:exception', (err) => {
   // https://stackoverflow.com/a/50387233 Ignore Resize observer loop
@@ -36,7 +47,7 @@ Cypress.on('uncaught:exception', (err) => {
   }
 })
 
-Cypress.Commands.add('mount', (component, options = {}) => {
+Cypress.Commands.add('mount', ((component: any, options: any = {}) => {
   return mount(
     () => {
       return h(RplFauxForm, { component, componentProps: options.props })
@@ -49,7 +60,7 @@ Cypress.Commands.add('mount', (component, options = {}) => {
       }
     }
   )
-})
+}) as typeof mount)
 
 // Example use:
 // cy.mount(MyComponent)

packages/ripple-ui-forms/src/components/RplForm/RplForm.vue

@@ -17,7 +17,11 @@ import {
   type FormKitPlugin
 } from '@formkit/core'
 import { getValidationMessages } from '@formkit/validation'
-import { createMultiStepPlugin } from '@formkit/addons'
+import {
+  type StepChangeData,
+  type StepSlotData,
+  createMultiStepPlugin
+} from '@formkit/addons'
 import rplFormInputs from '../../plugin'
 import RplFormAlert from '../RplFormAlert/RplFormAlert.vue'
 import RplFormSteps from '../RplFormSteps/RplFormSteps.vue'
@@ -26,6 +30,7 @@ import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { sanitisePIIFields } from '../../lib/sanitisePII'
 import useFormFocus from '../../composables/useFormFocus'
+import { RplFormKitStepNode } from '../../types'
 
 interface Props {
   id: string
@@ -104,32 +109,29 @@ const stepsRef = ref(null)
 const serverMessageRef = ref(null)
 const errorSummaryRef = ref(null)
 const cachedErrors = ref<Record<string, CachedError>>({})
-const submitCounter = ref(0)
-const focusStepField = ref(null)
-const focusStepFromLabel = ref(null)
+const submitCounter = ref<number>(0)
+const focusStepField = ref<string | null>(null)
+const focusStepFromLabel = ref<string | null>(null)
 const stepsId = `${props.id}-steps`
 
-const formSteps = computed(() => {
+const formSteps = computed<RplFormKitStepNode[]>(() => {
   if (!props.schema || !Array.isArray(props.schema)) return []
 
-  return props.schema.filter((i) => i['$step'])
+  return props.schema.filter((item: unknown) => {
+    return (<RplFormKitStepNode>item)['$step']
+  }) as unknown as RplFormKitStepNode[]
 })
 const isLastStep = () => {
-  return getNode(stepsId)?.context?.steps?.find((s) => s?.isActiveStep)
-    ?.isLastStep
+  const currentNode = getNode(stepsId)
+  const steps = (currentNode?.context?.steps || []) as StepSlotData[]
+  return steps?.find((s) => s?.isActiveStep)?.isLastStep
 }
 const getFormNode = (node?: FormKitNode) => {
   return formSteps.value.length ? getNode(stepsId) : node || getNode(props.id)
 }
-interface Steps {
-  findIndex: (arg0) => string
-  find: (arg0) => { stepName: string }
-}
-const getStepEventData = (
-  step: { stepIndex: number; stepName: string } = null
-) => {
+const getStepEventData = (step: StepSlotData | null = null) => {
   if (!formSteps.value.length) return {}
-  const steps: Steps = getFormNode()?.context?.steps as Steps
+  const steps: StepSlotData[] = getFormNode()?.context?.steps as StepSlotData[]
 
   return {
     index: step
@@ -193,7 +195,9 @@ provide('onFormReset', onFormReset)
 const submitLabel =
   props.schema?.find((field) => field?.key === 'actions')?.label || 'Submit'
 
-const getErrorMessages = (node: FormKitNode) => {
+const getErrorMessages = (node?: FormKitNode) => {
+  if (!node) return {}
+
   const validations = getValidationMessages(node)
 
   const cachedErrorsMap = {}
@@ -211,7 +215,7 @@ const getErrorMessages = (node: FormKitNode) => {
   return cachedErrorsMap
 }
 
-const submitHandler = (form, node: FormKitNode) => {
+const submitHandler = (form: any, node: FormKitNode) => {
   // If a user hits enter within a form field in a multistep form
   // we check if in there's a next step and if so navigate to that instead of submitting
   if (formSteps.value.length && !isLastStep()) {
@@ -296,7 +300,7 @@ const errorSummaryMessages = computed(() => {
 })
 
 const rplFormConfig = ref({
-  rootClasses: function (sectionKey) {
+  rootClasses: function (sectionKey: string) {
     return {
       [`rpl-form__${sectionKey}`]: true
     }
@@ -383,7 +387,11 @@ const emitStepChange = (currentStep, targetStep, forwards) => {
   focusStepFromLabel.value = null
 }
 
-const handleStepChange = async ({ currentStep, delta, targetStep }) => {
+const handleStepChange = async ({
+  currentStep,
+  delta,
+  targetStep
+}: StepChangeData) => {
   const forwards = delta > 0
   let isStepValid = currentStep.isValid
 

packages/ripple-ui-forms/src/components/RplFormActions/RplFormActions.vue

@@ -4,6 +4,7 @@ import { computed, inject, onMounted } from 'vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { getCaptchaElementId } from '../../utils/getCaptchaElementId'
+import { IRplFormProvidedState } from '../../types'
 
 interface Props {
   id: string
@@ -49,7 +50,7 @@ const iconPosition = computed(() => {
   return undefined
 })
 
-const form: object = inject('form')
+const form: IRplFormProvidedState | undefined = inject('form')
 const onCaptchaElementReady: (() => void) | undefined = inject(
   'onCaptchaElementReady'
 )

packages/ripple-ui-forms/src/components/RplFormDateSelect/RplFormDateSelect.vue

@@ -12,7 +12,7 @@ import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { sanitisePIIField } from '../../lib/sanitisePII'
 
-import VueDatePicker from '@vuepic/vue-datepicker'
+import VueDatePicker, { VueDatePickerProps } from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 
 interface Props {
@@ -177,43 +177,45 @@ watch(
 )
 
 // Vue-datepicker config
-const params = computed(() => ({
-  enableTimePicker: false,
-  disabled: props.disabled,
-  name: props.name,
-  id: props.id,
-  format: 'd/MM/yyyy',
-  placeholder: 'dd/mm/yyyy',
-  dayNames: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
-  locale: 'en-AU',
-  offset: '0',
-  hideOffsetDates: false,
-  arrowNavigation: true,
-  highlight:
-    highlightedRange?.value?.length > 1 ? highlightedRange.value : undefined,
-  markers: highlightedRange?.value?.length > 1 ? markers?.value : undefined,
-  minDate:
-    highlightedRange.value?.length > 0 &&
-    props.minDate !== '' &&
-    props.minDate !== undefined
-      ? parse(props.minDate, props.dateFormat, new Date())
-      : null,
-  maxDate:
-    highlightedRange.value?.length > 0 &&
-    props.maxDate !== '' &&
-    props.maxDate !== undefined
-      ? parse(props.maxDate, props.dateFormat, new Date())
-      : null,
-  startDate: internalDate.value ? internalDate.value : undefined,
-  autoApply: true,
-  textInput: {
-    format: 'd/M/yyyy',
-    selectOnFocus: true
-  },
-  actionRow: {
-    showPreview: false
-  }
-}))
+const params = computed<VueDatePickerProps>(() => {
+  return {
+    enableTimePicker: false,
+    disabled: props.disabled,
+    name: props.name,
+    id: props.id,
+    format: 'd/MM/yyyy',
+    placeholder: 'dd/mm/yyyy',
+    dayNames: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+    locale: 'en-AU',
+    offset: '0',
+    hideOffsetDates: false,
+    arrowNavigation: true,
+    highlight:
+      highlightedRange?.value?.length > 1 ? highlightedRange.value : undefined,
+    markers: highlightedRange?.value?.length > 1 ? markers?.value : undefined,
+    minDate:
+      highlightedRange.value?.length > 0 &&
+      props.minDate !== '' &&
+      props.minDate !== undefined
+        ? parse(props.minDate, props.dateFormat, new Date())
+        : null,
+    maxDate:
+      highlightedRange.value?.length > 0 &&
+      props.maxDate !== '' &&
+      props.maxDate !== undefined
+        ? parse(props.maxDate, props.dateFormat, new Date())
+        : null,
+    startDate: internalDate.value ? internalDate.value : undefined,
+    autoApply: true,
+    textInput: {
+      format: 'd/M/yyyy',
+      selectOnFocus: true
+    },
+    actionRow: {
+      showPreview: false
+    }
+  } as VueDatePickerProps
+})
 
 watch(internalDate, (updated) => {
   if (updated) {

packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.vue

@@ -5,14 +5,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, nextTick, inject, type Ref } from 'vue'
+import { computed, ref, watch, nextTick, inject } from 'vue'
 import { onClickOutside, useDebounceFn } from '@vueuse/core'
 import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendlyEventEmitter'
 import MultiValueLabel from './MultiValueLabel.vue'
 import MultiValueTagList from './MultiValueTagList.vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { sanitisePIIField } from '../../lib/sanitisePII'
+import { IRplFormProvidedState } from '../../types'
 
 export interface RplFormDropdownOption {
   id: string
@@ -75,7 +76,8 @@ const emit = defineEmits<{
   ): void
 }>()
 
-const form: object = inject('form', undefined)
+const form: IRplFormProvidedState | undefined = inject('form')
+
 const { emitRplEvent } = useRippleEvent('rpl-form-dropdown', emit)
 
 const defaultOptionId = '__default-option'
@@ -84,11 +86,11 @@ const containerRef = ref(null)
 const inputRef = ref(null)
 const menuRef = ref(null)
 const searchCache = ref('')
-const searchRef = ref<Ref<HTMLInputElement | null>>(null)
+const searchRef = ref<HTMLInputElement | null>(null)
 const searchValue = ref('')
 const searchFocused = ref(false)
 const filtering = ref(false)
-const toggleRef = ref<Ref<HTMLElement>>(null)
+const toggleRef = ref<HTMLElement | null>(null)
 const tagListRef = ref(null)
 const focusTag = ref(0)
 
@@ -231,11 +233,15 @@ const handleSearchLeft = () => {
   }
 }
 
-const handleSearchUpdate = (event: Event) => {
+const handleSearchUpdate = (event: InputEvent) => {
   filtering.value = true
 
   // If the single search value is cleared the selected option should be cleared
-  if (singleSearch.value && props.value && event.target?.value === '') {
+  if (
+    singleSearch.value &&
+    props.value &&
+    (<HTMLInputElement>event.target)?.value === ''
+  ) {
     useFormkitFriendlyEventEmitter(props, emit, 'onChange', null)
   }
 }

packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.vue

@@ -10,6 +10,7 @@ import { useDebounceFn } from '@vueuse/core'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { sanitisePIIField } from '../../lib/sanitisePII'
+import { IRplFormProvidedState } from '../../types'
 
 interface Props {
   id: string
@@ -65,7 +66,7 @@ const emit = defineEmits<{
 
 const { emitRplEvent } = useRippleEvent('rpl-form-input', emit)
 
-const form: object = inject('form')
+const form: IRplFormProvidedState | undefined = inject('form')
 
 const classes = computed(() => {
   return {

packages/ripple-ui-forms/src/components/RplFormNumber/RplFormNumber.vue

@@ -11,6 +11,7 @@ import useFormkitFriendlyEventEmitter from '../../composables/useFormkitFriendly
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { sanitisePIIField } from '../../lib/sanitisePII'
+import { IRplFormProvidedState } from '../../types.js'
 
 interface Props {
   id: string
@@ -63,7 +64,7 @@ const emit = defineEmits<{
 
 const { emitRplEvent } = useRippleEvent('rpl-form-number', emit)
 
-const form: any = inject('form')
+const form: IRplFormProvidedState | undefined = inject('form')
 
 const classes = computed(() => {
   return {

packages/ripple-ui-forms/src/components/RplFormOptionButtons/RplFormOptionButtons.vue

@@ -4,6 +4,7 @@ import { inject } from 'vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { sanitisePIIField } from '../../lib/sanitisePII'
+import { IRplFormProvidedState } from '../../types'
 
 export interface Props {
   id: string
@@ -37,7 +38,7 @@ const emit = defineEmits<{
   (e: 'update', payload: rplEventPayload & { action: 'update' }): void
 }>()
 
-const form: object = inject('form')
+const form: IRplFormProvidedState | undefined = inject('form')
 const { emitRplEvent } = useRippleEvent('rpl-form-option-buttons', emit)
 
 const handleChange = (selectedId: string) => {

packages/ripple-ui-forms/src/components/RplFormOptions/RplFormCheckboxGroup.vue

@@ -5,6 +5,7 @@ import { inject } from 'vue'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { sanitisePIIField } from '../../lib/sanitisePII'
+import { IRplFormProvidedState } from '../../types'
 
 interface Props {
   id: string
@@ -39,7 +40,7 @@ const emit = defineEmits<{
   (e: 'update', payload: rplEventPayload & { action: 'update' }): void
 }>()
 
-const form: object = inject('form')
+const form: IRplFormProvidedState | undefined = inject('form')
 const { emitRplEvent } = useRippleEvent('rpl-form-checkbox-group', emit)
 
 const handleToggle = (selectedValue: string) => {