transform codebase to typescript

.eslintrc

@@ -1,11 +1,30 @@
 {
   "extends" : [
-    "@visionappscz/eslint-config-visionapps"
+    "@visionappscz/eslint-config-visionapps",
+    "airbnb-typescript",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:typescript-sort-keys/recommended",
+    // "plugin:@typescript-eslint/recommended-requiring-type-checking"
   ],
+  "ignorePatterns": ["src/wasm/wasm.*"],
   "env": {
     "browser": true,
     "jest": true
   },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "import/prefer-default-export": "off",
+    "react/default-props-match-prop-types": "off",
+    "no-console": ["error"],
+    "@typescript-eslint/object-curly-spacing": ["error"],
+    "@typescript-eslint/no-unused-vars": ["error"]
+  },
   "overrides": [
     {
       "files": ["**/*.md", "**/*.mdx"],
@@ -14,9 +33,5 @@
         "plugin:mdx/recommended"
       ]
     }
-  ],
-  "parser": "@babel/eslint-parser",
-  "rules": {
-    "import/prefer-default-export": "off"
-  }
-}
+  ]
+}

babel.config.js

@@ -12,5 +12,6 @@ module.exports = {
       },
     ],
     '@babel/preset-react',
+    '@babel/preset-typescript',
   ],
 };

declaration.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

definitions.d.ts

@@ -0,0 +1,49 @@
+/**
+ * [Color variant](/foundation/colors#component-colors)
+ */
+declare type Color = 'primary' | 'secondary' | 'selected' | 'success' | 'warning' | 'danger' | 'help' | 'info' | 'note' | 'light' | 'dark';
+/**
+ * Scrolling mode:
+ */
+declare type Scrolling = 'auto' | 'custom' | 'none';
+/**
+ * Set the HTML `type` attribute of the `button` element.
+ */
+declare type Type = 'button' | 'submit';
+/**
+ *  Vertical alignment
+ */
+declare type Align = 'top' | 'middle' | 'bottom' | 'baseline';
+/**
+ * Horizontal alignment (distribution)
+ */
+declare type Justify = 'start' | 'center' | 'end' | 'space-between' | 'stretch';
+/**
+ * HTML input type
+ */
+declare type InputType = 'email' | 'number' | 'password' | 'tel' | 'text';
+declare type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'x2l' | 'x3l' | 'none';
+declare type Priority = 'filled' | 'outline' | 'flat';
+declare type Size = 'small' | 'medium' | 'large';
+declare type Position = 'before' | 'after';
+declare type Validation = 'invalid' | 'valid' | 'warning';
+declare type Layout = 'horizontal' | 'vertical';
+declare type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+declare type AutoScroll = 'always' | 'detectEnd' | 'off';
+declare type Direction = 'asc' | 'desc';
+declare type Hyphens = 'none' | 'auto' | 'manual';
+declare type WordWrapping = 'normal' | 'long-words' | 'anywhere';
+declare type VerticalModalPosition = 'top' | 'center';
+
+declare type PredefinedLabelWidthValues = 'auto' | 'default' | 'limited';
+
+// Test types
+
+declare type AssertFn = (rootElement: HTMLElement) => void;
+
+declare interface NonMandatoryProps {
+  [key: string]: unknown;
+}
+
+declare type TestingProps = [nonMandatoryProps, AssertFn];
+

jest.config.js

@@ -2,19 +2,25 @@ module.exports = {
   moduleFileExtensions: [
     'js',
     'jsx',
+    'ts',
+    'tsx',
   ],
   moduleNameMapper: {
     '\\.scss$': 'identity-obj-proxy',
   },
   modulePathIgnorePatterns: [
     '<rootDir>/.docz/',
   ],
+  preset: 'ts-jest',
   setupFiles: [
     '<rootDir>/tests/setupJest.js',
   ],
   setupFilesAfterEnv: [
     '<rootDir>/tests/setupTestingLibrary.js',
   ],
   testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(t|j)sx?$': 'ts-jest',
+  },
   verbose: true,
 };