Merge pull request #518 from soramitsu/512-stricter-type-script

[refactor] #512: use stricter tsconfig

.changeset/chilly-badgers-retire.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**refactor**: refactor internals with stricter TypeScript options

.changeset/spotty-jeans-sell.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**refactor**(`SSelect`): use `readonly options` in `UseSelectModelParams`

.changeset/thick-rice-remain.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**refactor**(`STableColumn`): use strict type for `sort-orders` prop -- it should be 1-3 length array without duplications

package.json

@@ -14,6 +14,9 @@
     "test:ui:unit": "pnpm --filter ui test:unit",
     "test:ui:cy": "pnpm --filter ui cy:ci:component",
     "test:ui:after-build": "pnpm --filter ui test:after-build",
+    "typecheck": "run-s typecheck:root typecheck:ui",
+    "typecheck:root": "tsc --noEmit",
+    "typecheck:ui": "pnpm --filter ui typecheck",
     "build": "run-s build:vite-plugin-svg build:ui",
     "build:vite-plugin-svg": "pnpm --filter vite-plugin-svg build",
     "build:ui": "pnpm --filter ui build",
@@ -29,10 +32,10 @@
   "devDependencies": {
     "@changesets/cli": "^2.17.0",
     "@types/node": "^18.14.6",
-    "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "del-cli": "^5.0.0",
-    "eslint": "^8.16.0",
+    "eslint": "^8.36.0",
     "eslint-config-alloy": "^4.5.1",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-vue": "^9.0.1",
@@ -41,7 +44,8 @@
     "prettier": "^2.6.2",
     "prettier-eslint": "^15.0.0",
     "prettier-eslint-cli": "^7.1.0",
-    "typescript": "5.0.1-rc",
+    "typescript": "5.0.2",
+    "vite": "^4.1.4",
     "vitest": "^0.29.2"
   }
 }

packages/theme/package.json

@@ -10,7 +10,7 @@
     "src"
   ],
   "scripts": {
-    "test": "vitest"
+    "test": "vitest run"
   },
   "devDependencies": {
     "sass": "^1.49.0"

packages/ui/cypress/component/SModal.spec.cy.ts

@@ -1,9 +1,9 @@
 import { VueTestUtils } from 'cypress/vue'
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 import { bareMetalVModel } from '@/util'
-import { SModal, SModalCard, useModalApi, SBodyScrollLockProvider, BodyScrollLockApi } from '@/lib'
+import { SModal, SModalCard, useModalApi, SBodyScrollLockProvider, type BodyScrollLockApi } from '@/lib'
 import { objectPick } from '@vueuse/core'
-import { Options as FocusTrapOptions } from 'focus-trap'
+import { type Options as FocusTrapOptions } from 'focus-trap'
 import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock'
 
 const showVModel = (val: Ref<boolean>) => bareMetalVModel(val, 'show')

packages/ui/cypress/component/SPopover.spec.cy.ts

@@ -1,7 +1,7 @@
 import { SPopover, SPopoverWrappedTransition } from '@/components/Popover'
 import { usePopoverApi } from '@/components/Popover/api'
 
-import { Instance } from '@popperjs/core'
+import { type Instance } from '@popperjs/core'
 import { VueTestUtils } from 'cypress/vue'
 
 before(() => {

packages/ui/cypress/component/STabsPanel.spec.cy.ts

@@ -1,5 +1,5 @@
 import { VueTestUtils } from 'cypress/vue'
-import { STabsPanel, STab, useTabsPanelApi, TabsPanelApi } from '@/lib'
+import { STabsPanel, STab, useTabsPanelApi, type TabsPanelApi } from '@/lib'
 
 before(() => {
   VueTestUtils.config.global.components = { STabsPanel, STab }

packages/ui/cypress/component/SToasts.spec.cy.ts

@@ -1,4 +1,4 @@
-import { SToastsProvider, SToastsDisplay, ToastsApi, TOASTS_API_KEY } from '@/lib'
+import { SToastsProvider, SToastsDisplay, type ToastsApi, TOASTS_API_KEY } from '@/lib'
 
 import { VueTestUtils } from 'cypress/vue'
 import { forceInject } from '@/util'

packages/ui/cypress/tsconfig.json

@@ -4,7 +4,8 @@
     "types": ["cypress", "cypress-axe"],
     "paths": {
       "@/*": ["../src/*"]
-    }
+    },
+    "noEmit": true
   },
   "include": ["./", "../auto-imports.d.ts", "../src"]
 }

packages/ui/package.json

@@ -25,11 +25,12 @@
     "cy": "cypress open",
     "cy:ci:component": "cypress run --component --quiet --reporter spec",
     "typecheck": "vue-tsc --noEmit",
+    "typecheck:cypress": "vue-tsc -p ./cypress",
     "build": "run-s build:clean build:vite build:dts",
     "build:clean": "del dist ts-build",
     "build:vite": "vite build",
     "build:dts": "run-s build:dts:tsc build:dts:rollup",
-    "build:dts:tsc": "vue-tsc --outDir ts-build --declaration --emitDeclarationOnly",
+    "build:dts:tsc": "vue-tsc -p tsconfig.build.json",
     "build:dts:rollup": "rollup -c rollup.dts.config.cjs"
   },
   "dependencies": {
@@ -82,7 +83,7 @@
     "storybook": "^7.0.0-beta.62",
     "tabbable": "^6.0.0",
     "ts-pattern": "^4.2.1",
-    "typescript": "5.0.1-rc",
+    "typescript": "5.0.2",
     "unimport": "^3.0.2",
     "unplugin-auto-import": "^0.15.1",
     "unplugin-icons": "^0.15.3",

packages/ui/rollup.dts.config.ts

@@ -11,9 +11,11 @@ const shimCssPlugin = (): Plugin => {
     name: 'soramitsu-ui:shim-css',
     resolveId(id) {
       if (/\.(css|scss|sass)$/.test(id)) return id + CSS_SUFFIX
+      return
     },
     load(id) {
       if (id.endsWith(CSS_SUFFIX)) return `declare const css: string\n export default css`
+      return
     },
   }
 }
@@ -27,7 +29,7 @@ export default defineConfig({
       },
     }),
     shimCssPlugin(),
-    dtsPlugin(),
+    dtsPlugin() as Plugin,
   ],
   onwarn(warning, defaultHandler) {
     match(warning)

packages/ui/src/components/Accordion/SAccordion.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { AccordionItemApi, AccordionApi, ACCORDION_API_KEY } from './api'
-import { provide, Ref, watch } from 'vue'
+import { type AccordionItemApi, type AccordionApi, ACCORDION_API_KEY } from './api'
+import { provide, type Ref, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{

packages/ui/src/components/Accordion/api.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, Ref, inject } from 'vue'
+import { type InjectionKey, type Ref, inject } from 'vue'
 
 export interface AccordionItemApi {
   name: string

packages/ui/src/components/Badge/SBadge.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SSpinner } from '../Spinner'
-import { BadgeType } from './api'
+import { type BadgeType } from './api'
 
 const props = withDefaults(
   defineProps<{

packages/ui/src/components/BodyScrollLockProvider/index.ts

@@ -1,4 +1,4 @@
-import { MaybeElementRef } from '@vueuse/core'
+import type { MaybeElementRef } from '@vueuse/core'
 import type { VNode, InjectionKey, PropType } from 'vue'
 
 export interface BodyScrollLockApi {

packages/ui/src/components/Button/SButton.vue

@@ -9,7 +9,7 @@ import {
   SPINNER_WIDTH,
   FONT_SIZE,
 } from './consts'
-import { ButtonType, ButtonSize, ButtonIconPosition, HTMLButtonType } from './types'
+import type { ButtonType, ButtonSize, ButtonIconPosition, HTMLButtonType } from './types'
 
 const props = withDefaults(
   defineProps<{

packages/ui/src/components/Checkbox/SCheckboxAtom.ts

@@ -3,8 +3,8 @@ import './SCheckboxAtom.scss'
 import IconCheck from '~icons/uil/check'
 import IconMinus from '~icons/uil/minus'
 
-import { FunctionalComponent, mergeProps, PropType } from 'vue'
-import { CheckboxSize, CheckboxState } from './types'
+import { type FunctionalComponent, mergeProps, type PropType } from 'vue'
+import type { CheckboxSize, CheckboxState } from './types'
 
 interface Props {
   size: CheckboxSize

packages/ui/src/components/Checkbox/SCheckboxSolo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { uniqueElementId } from '@/util'
-import { CheckboxSize, CheckboxType, CHECKBOX_SIZE_VALUES, CHECKBOX_TYPE_VALUES } from './types'
+import { type CheckboxSize, type CheckboxType, CHECKBOX_SIZE_VALUES, CHECKBOX_TYPE_VALUES } from './types'
 import { usePropTypeFilter } from '@/composables/prop-type-filter'
 import SRadioBody from '../Radio/SRadioBody'
 import SCheckboxAtom from './SCheckboxAtom'

packages/ui/src/components/DatePicker/SDatePicker.vue

@@ -9,7 +9,7 @@ import { SPopover, SPopoverWrappedTransition } from '@/components/Popover'
 import { and } from '@vueuse/math'
 import { format } from 'date-fns'
 
-import {
+import type {
   DatePickerType,
   RangeState,
   DateState,
@@ -20,7 +20,7 @@ import {
   ModelValueType,
   DatePickerOptions,
 } from './types'
-import { DatePickerApi, DATE_PICKER_API_KEY } from './api'
+import { type DatePickerApi, DATE_PICKER_API_KEY } from './api'
 import { DEFAULT_SHORTCUTS } from './consts'
 
 type Props = {
@@ -78,8 +78,8 @@ const init = () => {
   } else if (props.type === 'pick') {
     pickState.value = innerModelValue.value as PickState
   } else {
-    rangeStateRef.value.startDate = (innerModelValue.value as Date[])[0]
-    rangeStateRef.value.endDate = (innerModelValue.value as Date[])[1]
+    rangeStateRef.value.startDate = (innerModelValue.value as Date[])[0]!
+    rangeStateRef.value.endDate = (innerModelValue.value as Date[])[1]!
   }
   updateShowedMonths()
 }
@@ -125,17 +125,16 @@ const updateShowedMonths = () => {
   let date: Date | null = null
   switch (props.type) {
     case 'pick':
-      date = pickState.value[pickState.value.length - 1]
+      date = pickState.value[pickState.value.length - 1]!
       break
     case 'day':
       date = dayState.value
       break
     case 'range':
       date = rangeState[dateForTime.value as keyof RangeState] as Date | null
       break
-    default:
   }
-  if (!date) return `00:00`
+  if (!date) return
   updateShowedState(date.getMonth(), date.getFullYear())
 }
 
@@ -196,7 +195,7 @@ const changeView = (viewName: string) => {
   currentView.value = viewName
 }
 
-const headTitle = computed(() => {
+const headTitle = computed<string>(() => {
   if (menuState.value && menuState.value !== 'Custom') {
     return menuState.value
   }
@@ -209,13 +208,12 @@ const headTitle = computed(() => {
         const modelValue = props.modelValue as Date[]
         return modelValue.map((item) => formatDate(item)).join(' - ')
       }
-
       case 'pick': {
         const modelValue = props.modelValue as Date[]
         return modelValue.map((item) => formatDate(item)).join(', ')
       }
       default:
-        break
+        return ''
     }
   } catch {
     return ''

packages/ui/src/components/DatePicker/SDatePickerPanelCalendars.vue

@@ -3,8 +3,8 @@ import MonthTable from './SDatePickerTableMonths.vue'
 import YearTable from './SDatePickerTableYears.vue'
 import DatePanel from './SDatePickerPanelDate.vue'
 
-import { StateStore, ShowState, ModelValueType } from './types'
-import { DatePickerApi, useDatePickerApi } from './api'
+import type { StateStore, ShowState, ModelValueType } from './types'
+import { type DatePickerApi, useDatePickerApi } from './api'
 
 type Props = {
   currentView: string
@@ -29,7 +29,7 @@ const firstCalendarModelValue = computed(() => {
   if (!props.modelValue) return new Date()
 
   if (state.type === 'range') {
-    const modelValue = props.modelValue as Date[]
+    const modelValue = props.modelValue as [Date, ...Date[]]
     return modelValue[0]
   } else {
     return props.modelValue

packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { RangeState, StateStore } from './types'
+import type { RangeState, StateStore } from './types'
 import { parse, isValid } from 'date-fns'
-import { DatePickerApi, useDatePickerApi } from './api'
+import { type DatePickerApi, useDatePickerApi } from './api'
 
 type Props = {
   stateStore: StateStore
@@ -92,6 +92,8 @@ function dateMask(date: string) {
   if (date.match(/^\d{2}\/\d{2}$/) !== null) {
     return date + '/'
   }
+
+  return undefined
 }
 
 function dateTimeMask(date: string) {
@@ -112,6 +114,8 @@ function dateTimeMask(date: string) {
   if (date.match(/^\d{2}\/\d{2}\/\d{4}, \d{2}:\d{2}$/) !== null) {
     return date
   }
+
+  return undefined
 }
 
 const customInputLength = computed(() => {

packages/ui/src/components/DatePicker/SDatePickerPanelDate.vue

@@ -2,7 +2,7 @@
 import MonthPanel from './SDatePickerPanelMonths.vue'
 import DateTable from './SDatePickerTableDate.vue'
 
-import { ShowState, StateStore } from './types'
+import type { ShowState, StateStore } from './types'
 
 type Props = {
   showState: ShowState

packages/ui/src/components/DatePicker/SDatePickerPanelMonths.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { IconArrowsChevronRight24, IconArrowsChevronLeft24 } from '@/components/icons'
 import { months } from './consts'
-import { ShowState } from './types'
+import type { ShowState } from './types'
 
 type Props = {
   showState: ShowState

packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DatePickerOptions } from './types'
+import type { DatePickerOptions } from './types'
 import { IconBasicCheckMark24 } from '@/components/icons'
-import { DatePickerApi, useDatePickerApi } from './api'
+import { type DatePickerApi, useDatePickerApi } from './api'
 
 type Props = {
   menuState: string