Merge branch '512-stricter-type-script' into 517-table-heights-watch

.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

packages/theme/package.json

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

packages/ui/package.json

@@ -30,7 +30,7 @@
     "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": {
@@ -42,7 +42,6 @@
     "focus-trap": "^7.3",
     "jsoneditor": "^9.5",
     "lodash-es": "^4.17",
-    "tiny-invariant": "^1.3",
     "type-fest": "^3.6",
     "vue": "^3.2"
   },

packages/ui/src/components/Table/STableColumn.ts

@@ -1,17 +1,17 @@
 import { defineComponent, type PropType } from 'vue'
-import { type TableActionColumnApi, type TableColumnApi, useTableApi } from '@/components'
 import { uniqueElementId } from '@/util'
 import { usePropTypeFilter } from '@/composables/prop-type-filter'
-import { TABLE_COLUMN_ALIGN_VALUES, TABLE_COLUMN_TYPE_VALUES } from '@/components/Table/consts'
+import { TABLE_COLUMN_ALIGN_VALUES, TABLE_COLUMN_TYPE_VALUES } from './consts'
 import type {
   TableColumnCellValueFormatter,
   TableColumnRowSelectableFunc,
   TableColumnSortBy,
-  TableColumnSortOrder,
+  TableColumnSortOrders,
   TableColumnAlign,
   TableColumnType,
 } from './types'
-import type { TableColumnWidthProps } from './api'
+import { useTableApi } from './api'
+import type { TableColumnWidthProps, TableActionColumnApi, TableColumnApi } from './api'
 
 export default /* @__PURE__ */ defineComponent({
   name: 'STableColumn',
@@ -81,8 +81,8 @@ export default /* @__PURE__ */ defineComponent({
      * Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array
      */
     sortOrders: {
-      type: Array as PropType<TableColumnSortOrder[]>,
-      default: () => ['ascending', 'descending', null],
+      type: Array as unknown as PropType<TableColumnSortOrders>,
+      default: (): TableColumnSortOrders => ['ascending', 'descending', null],
     },
     /**
      * Function that formats cell content

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

@@ -4,9 +4,9 @@ import type {
   TableColumnCellValueFormatter,
   TableColumnRowSelectableFunc,
   TableColumnSortBy,
-  TableColumnSortOrder,
   TableColumnAlign,
   TableRow,
+  TableColumnSortOrders,
 } from './types'
 
 export interface TableColumnWidthProps {
@@ -23,7 +23,7 @@ export interface TableColumnSortProps {
   sortable: boolean | 'custom'
   sortMethod: (<T extends TableRow>(a: T, b: T) => number) | null
   sortBy: TableColumnSortBy
-  sortOrders: TableColumnSortOrder[]
+  sortOrders: TableColumnSortOrders
 }
 
 export interface TableCommonColumnApi extends TableColumnWidthProps, TableColumnAlignProps, TableColumnSortProps {

packages/ui/src/components/Table/types.ts

@@ -24,7 +24,16 @@ export type TableColumnCellValueFormatter = (
 export type TableColumnSortByPropKeyFunc = (row: TableRow, index: number) => string
 export type TableColumnRowSelectableFunc = (row: TableRow, index: number) => boolean
 export type TableColumnSortBy = string | TableColumnSortByPropKeyFunc | (TableColumnSortByPropKeyFunc | string)[]
-export type TableColumnSortOrder = 'ascending' | 'descending' | null
+export type TableColumnSortOrder = TableColumnSortOrders[0]
+export type TableColumnSortOrders =
+  | OptionalNonEmptyTriple<['ascending', 'descending', null]>
+  | OptionalNonEmptyTriple<['ascending', null, 'descending']>
+  | OptionalNonEmptyTriple<['descending', 'ascending', null]>
+  | OptionalNonEmptyTriple<['descending', null, 'ascending']>
+  | OptionalNonEmptyTriple<[null, 'ascending', 'descending']>
+  | OptionalNonEmptyTriple<[null, 'descending', 'ascending']>
+
+type OptionalNonEmptyTriple<T extends [any, any, any]> = [T[0], T[1]?, T[2]?]
 
 export interface TableRowConfigCallbackParams {
   row: TableRow

packages/ui/src/components/Table/use-column-sort.ts

@@ -2,7 +2,6 @@ import type { Ref } from 'vue'
 import type { TableColumnApi } from './api'
 import type { TableColumnSortOrder, TableRow } from './types'
 import { get } from 'lodash-es'
-import invariant from 'tiny-invariant'
 
 export function useColumnSort(data: Ref<TableRow[]>) {
   const sortState: { column: TableColumnApi | null; order: TableColumnSortOrder } = shallowReactive({
@@ -16,11 +15,10 @@ export function useColumnSort(data: Ref<TableRow[]>) {
     sortState.order = null
   }
 
-  function getNextOrder(column: TableColumnApi, order: TableColumnSortOrder) {
-    const index = column.sortOrders.indexOf(order)
-    const item = column.sortOrders[(index + 1) % column.sortOrders.length]
-    invariant(item)
-    return item
+  function getNextOrder(column: TableColumnApi, order: TableColumnSortOrder): TableColumnSortOrder {
+    const array = column.sortOrders
+    // `!` is safe because of `%` and array's non-emptiness
+    return array[(array.indexOf(order) + 1) % array.length]!
   }
 
   function getKey(column: TableColumnApi, { value, index }: { value: TableRow; index: number }) {

packages/ui/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src", "auto-imports.d.ts"],
+  "compilerOptions": {
+    "outDir": "ts-build",
+    "declaration": true,
+    "emitDeclarationOnly": true
+  }
+}

packages/ui/tsconfig.json

@@ -10,6 +10,12 @@
     // not really works within Vue templates
     "exactOptionalPropertyTypes": false
   },
+  "ts-node": {
+    "compilerOptions": {
+      // Cypress conflicts with `verbatimModuleSyntax`
+      "verbatimModuleSyntax": false
+    }
+  },
   "include": ["."],
   "exclude": ["dist", "ts-build", "cypress", "test", "storybook-static", "stories"]
 }