Stories typechecking fix (#4042) (#4043)

* fix(storybook): Stories typechecking fix (#4042)

* build: Run type check of whole project on precommit (#4042)

* fix(date-input): made number valid model value type

* fix(stepper): correct Step type

---------

Co-authored-by: Maksim Nedoshev <[email protected]>

packages/ui/.storybook/vuestic-config/demo-icon-aliases.ts

@@ -1,4 +1,4 @@
-import { IconConfiguration } from '../../services/icon/types'
+import {IconConfiguration} from "@/services/icon";
 
 const DemoAliases: IconConfiguration[] = [
   {

packages/ui/package.json

@@ -29,14 +29,15 @@
   "scripts": {
     "serve:production": "vue-cli-service serve --mode production",
     "build": "tsx build/build.ts",
-    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types --project tsconfig.build.json",
+    "typecheck": "vue-tsc --noEmit",
     "lint": "vue-cli-service lint",
     "lint:style": "stylelint '**/*.{vue,html,css,scss}' --fix",
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vitest",
     "push": "npm publish --tag=next",
     "push-production": "npm publish --tag=latest",
-    "precommit": "lint-staged --concurrent=false && yarn test:unit --run",
+    "precommit": "lint-staged --concurrent=false && yarn typecheck && yarn test:unit --run",
     "server:webapp": "npx http-server dist --push-state",
     "serve:storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build",

packages/ui/src/components/va-accordion/VaAccordion.stories.ts

@@ -1,5 +1,6 @@
 import { VaAccordion } from './'
 import { VaCollapse } from '../va-collapse'
+import { StoryFn } from '@storybook/vue3'
 import { within, userEvent } from '@storybook/testing-library'
 import { expect } from '@storybook/jest'
 import { sleep } from '../../utils/sleep'
@@ -10,7 +11,7 @@ export default {
   tags: ['autodocs'],
 }
 
-export const Default = () => ({
+export const Default: StoryFn = () => ({
   components: { VaAccordion, VaCollapse },
   data: () => ({ value: [] }),
   template: `
@@ -52,7 +53,7 @@ Default.play = async ({ canvasElement, step }) => {
   })
 }
 
-export const Stateful = () => ({
+export const Stateful: StoryFn = () => ({
   components: { VaAccordion, VaCollapse },
   template: `
     <p>[true] - should open</p>
@@ -87,7 +88,7 @@ Stateful.play = async ({ canvasElement, step }) => {
   })
 }
 
-export const Multiple = () => ({
+export const Multiple: StoryFn = () => ({
   components: { VaAccordion, VaCollapse },
   data: () => ({ value: [] }),
   template: `
@@ -117,7 +118,7 @@ Multiple.play = async ({ canvasElement, step }) => {
   })
 }
 
-export const vModel = () => ({
+export const vModel: StoryFn = () => ({
   components: { VaAccordion, VaCollapse },
   data: () => ({ value: [true, false, true] }),
   template: `

packages/ui/src/components/va-affix/VaAffix.stories.ts

@@ -1,12 +1,13 @@
 import { VaAffix } from './'
 import { expect } from '@storybook/jest'
+import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaAffix',
   component: VaAffix,
 }
 
-export const FixedTop = () => ({
+export const FixedTop: StoryFn = () => ({
   components: { VaAffix },
   template: `
     <div class="w-1/4">
@@ -28,7 +29,7 @@ FixedTop.play = async ({ canvasElement, step }) => {
   })
 }
 
-export const FixedBottom = () => ({
+export const FixedBottom: StoryFn = () => ({
   components: { VaAffix },
   template: `
     <div class="w-1/4">

packages/ui/src/components/va-alert/VaAlert.stories.ts

@@ -3,6 +3,7 @@ import { VaButton } from '../va-button'
 import { userEvent } from '../../../.storybook/interaction-utils/userEvent'
 import { within } from '@storybook/testing-library'
 import { expect } from '@storybook/jest'
+import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaAlert',
@@ -89,7 +90,7 @@ export const CloseIcon = () => ({
   `,
 })
 
-export const Stateful = () => ({
+export const Stateful: StoryFn = () => ({
   components: { VaAlert },
   template: `
     [true]
@@ -187,7 +188,7 @@ export const Slotted = () => ({
   `,
 })
 
-export const HideAndShow = () => ({
+export const HideAndShow: StoryFn = () => ({
   components: { VaAlert, VaButton },
   data: () => ({ isVisible: true }),
   template: `

packages/ui/src/components/va-app-bar/VaAppBar.stories.ts

@@ -1,4 +1,5 @@
 import { VaAppBar } from './'
+import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaAppBar',
@@ -53,7 +54,7 @@ export const FixedBottom = () => ({
   `,
 })
 
-export const HideOnScroll = () => ({
+export const HideOnScroll: StoryFn = () => ({
   components: { VaAppBar },
   template: `
     <div class="flex flex-col relative max-h-32 overflow-hidden">
@@ -78,7 +79,7 @@ HideOnScroll.play = async ({ canvasElement, step }) => {
   target.scrollTo({ top: target.clientHeight })
 }
 
-export const ShadowOnScroll = () => ({
+export const ShadowOnScroll: StoryFn = () => ({
   components: { VaAppBar },
   template: `
     <div class="flex flex-col relative max-h-32 overflow-hidden">
@@ -103,7 +104,7 @@ ShadowOnScroll.play = async ({ canvasElement, step }) => {
   target.scrollTo({ top: target.clientHeight })
 }
 
-export const ShadowColor = () => ({
+export const ShadowColor: StoryFn = () => ({
   components: { VaAppBar },
   template: `
     <div class="flex flex-col relative max-h-32 overflow-hidden">

packages/ui/src/components/va-backtop/VaBacktop.stories.ts

@@ -3,19 +3,20 @@ import { VaRadio } from '../va-radio'
 import { userEvent, within } from '@storybook/testing-library'
 import { expect } from '@storybook/jest'
 import { sleep } from '../../utils/sleep'
+import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaBacktop',
   component: VaBacktop,
 }
 
-const getBacktop = (): HTMLElement | undefined => document.querySelector('.va-backtop')
+const getBacktop = () => document.querySelector<HTMLElement>('.va-backtop')!
 const scroll = async () => {
   window.scrollTo({ top: 400 })
   await sleep()
 }
 
-export const Default = () => ({
+export const Default: StoryFn = () => ({
   components: { VaBacktop },
   template: `
     <p class="m-1">{{ $vb.lorem(10000) }}</p>
@@ -73,7 +74,7 @@ Offset.play = async () => {
   scroll()
 }
 
-export const Position = () => ({
+export const Position: StoryFn = () => ({
   components: { VaBacktop, VaRadio },
   data: () => {
     const OPTIONS_X = ['left', 'right']
@@ -105,7 +106,7 @@ Position.play = async ({ canvasElement, step }) => {
   canvas.getByTestId('controls').scrollIntoView()
 }
 
-export const ClickEvent = () => ({
+export const ClickEvent: StoryFn = () => ({
   components: { VaBacktop },
   data: () => ({ clicked: false }),
   template: `
@@ -120,13 +121,13 @@ ClickEvent.play = async ({ canvasElement, step }) => {
   await scroll()
 
   await step('Click triggered', async () => {
-    getBacktop().click()
+    getBacktop()?.click()
     await sleep()
     expect(clicked.innerText).toBe('true')
   })
 }
 
-export const Target = () => ({
+export const Target: StoryFn = () => ({
   components: { VaBacktop },
   template: `
     [not the target]

packages/ui/src/components/va-carousel/VaCarousel.stories.ts

@@ -4,6 +4,7 @@ import { within } from '@storybook/testing-library'
 import { VaCarousel } from '../va-carousel'
 import { expect } from '@storybook/jest'
 import { sleep } from '../../utils/sleep'
+import { StoryFn } from '@storybook/vue3'
 
 const getItems = () => [
   'https://picsum.photos/id/10/2500',
@@ -33,7 +34,7 @@ export const Vertical = () => ({
   `,
 })
 
-export const ZeroOneTwoSlides = () => ({
+export const ZeroOneTwoSlides: StoryFn = () => ({
   components: { VaCarousel },
   data: () => ({ items: getItems() }),
   template: `
@@ -72,7 +73,7 @@ export const Swipe = () => ({
   `,
 })
 
-export const Arrows = () => ({
+export const Arrows: StoryFn = () => ({
   components: { VaCarousel },
   data: () => ({ items: getItems(), current: 0 }),
   template: `
@@ -94,7 +95,7 @@ Arrows.play = async ({ canvasElement, step }) => {
   })
 }
 
-export const Indicators = () => ({
+export const Indicators: StoryFn = () => ({
   components: { VaCarousel },
   data: () => ({ items: getItems() }),
   template: `
@@ -116,7 +117,7 @@ Indicators.play = async ({ canvasElement, step }) => {
   })
 }
 
-export const IndicatorsTrigger = () => ({
+export const IndicatorsTrigger: StoryFn = () => ({
   components: { VaCarousel },
   data: () => ({ items: getItems() }),
   template: `
@@ -161,7 +162,7 @@ IndicatorsTrigger.play = async ({ canvasElement, step }) => {
   })
 }
 
-export const Infinite = () => ({
+export const Infinite: StoryFn = () => ({
   components: { VaCarousel },
   data: () => ({ items: getItems() }),
   template: `
@@ -187,7 +188,7 @@ Infinite.play = async ({ canvasElement, step }) => {
   })
 }
 
-export const Stateful = () => ({
+export const Stateful: StoryFn = () => ({
   components: { VaCarousel },
   data: () => ({ items: getItems() }),
   template: `
@@ -214,7 +215,7 @@ Stateful.play = async ({ canvasElement, step }) => {
   })
 }
 
-export const Autoscroll = () => ({
+export const Autoscroll: StoryFn = () => ({
   components: { VaCarousel },
   data: () => ({ items: getItems() }),
   template: `

packages/ui/src/components/va-counter/VaCounter.stories.ts

@@ -2,14 +2,15 @@ import { addText } from '../../../.storybook/interaction-utils/addText'
 import { userEvent } from '../../../.storybook/interaction-utils/userEvent'
 import { expect } from '@storybook/jest'
 import { VaCounter } from './'
+import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaCounter',
   component: VaCounter,
   tags: ['autodocs'],
 }
 
-export const Default = () => ({
+export const Default: StoryFn = () => ({
   components: { VaCounter },
   data: () => ({ value: 0 }),
   template: `
@@ -47,7 +48,7 @@ export const LongPressDelay = () => ({
   `,
 })
 
-export const Stateful = () => ({
+export const Stateful: StoryFn = () => ({
   components: { VaCounter },
   template: `
     <p>[true]</p>
@@ -72,7 +73,7 @@ Stateful.play = async ({ step }) => {
   })
 }
 
-export const Min = () => ({
+export const Min: StoryFn = () => ({
   components: { VaCounter },
   template: `
     <VaCounter
@@ -90,7 +91,7 @@ Min.play = async ({ step }) => {
   })
 }
 
-export const Max = () => ({
+export const Max: StoryFn = () => ({
   components: { VaCounter },
   template: `
     <VaCounter
@@ -108,7 +109,7 @@ Max.play = async ({ step }) => {
   })
 }
 
-export const Step = () => ({
+export const Step: StoryFn = () => ({
   components: { VaCounter },
   template: `
     <VaCounter

packages/ui/src/components/va-data-table/VaDataTable.new.demo.vue

@@ -268,7 +268,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import cloneDeep from 'lodash/cloneDeep.js'
-import { DataTableSelectMode, DataTableSortingOrder, VaDataTable } from './'
+import { DataTableColumn, DataTableSelectMode, DataTableSortingOrder, VaDataTable } from './'
 import { VaChip } from '../va-chip'
 import { VaAlert } from '../va-alert'
 import { faker } from '@faker-js/faker'
@@ -401,7 +401,7 @@ export default defineComponent({
       },
     ]
 
-    const columns = [
+    const columns: DataTableColumn[] = [
       { key: 'username', sortable: true },
       { key: 'email', sortable: true },
       { key: 'name', sortable: true },
@@ -411,7 +411,7 @@ export default defineComponent({
     ]
 
     return {
-      items: faker.seed(1) && faker.helpers.shuffle(cloneDeep(users)),
+      items: faker.seed(1) ? faker.helpers.shuffle(cloneDeep(users)) : [],
       itemsHuge: new Array(500).fill(null).map((_, idx) => idx % 2 ? users[0] : users[1]),
       columns,