fixup! transform RUI to typescript (#394)

Author: lukasbriza

.eslintrc

@@ -1,48 +1,27 @@
 {
   "extends": [
-    "@visionappscz/eslint-config-visionapps",
-    "plugin:deprecation/recommended"
+    "@visionappscz/eslint-config-visionapps"
+  ],
+  "env": {
+    "browser": true,
+    "jest": true
+  },
+  "ignorePatterns": [
+    "src/docs/_assets/generated"
   ],
   "overrides": [
     {
       "files": [
-        "**/*.ts",
-        "**/*.tsx"
+        "**/*.md"
       ],
       "extends": [
-        "@visionappscz/eslint-config-visionapps",
-        "airbnb-typescript",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:typescript-sort-keys/recommended"
-      ],
-      "parser": "@typescript-eslint/parser",
-      "parserOptions": {
-        "project": "tsconfig.json"
-      },
-      "plugins": ["@typescript-eslint"],
-      "rules": {
-        "@typescript-eslint/no-unused-vars": ["error"],
-        "@typescript-eslint/object-curly-spacing": ["error"],
-        "import/prefer-default-export": ["off"],
-        "no-console": ["error"],
-        "react/default-props-match-prop-types": ["off"],
-        "react/require-default-props": ["off"]
-      }
+        "plugin:markdown/recommended"
+      ]
     }
   ],
-  "env": {
-    "browser": true,
-    "jest": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": "./tsconfig.json"
-  },
-  "plugins": [
-    "@typescript-eslint"
-  ],
+  "parser": "@babel/eslint-parser",
   "rules": {
     "import/prefer-default-export": "off",
     "no-console": "error"
   }
-}
+}

.eslintrc-ts

@@ -5,7 +5,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-type-checked",
     "plugin:deprecation/recommended",
-    "plugin:typescript-sort-keys/recommended",
+    "plugin:typescript-sort-keys/recommended"
   ],
   "env": {
     "browser": true,
@@ -15,7 +15,7 @@
     {
       "files": [
         "*.spec.tsx",
-        "*.story.tsx",
+        "*.story.tsx"
       ],
       "rules": {
         "@typescript-eslint/unbound-method": "off"

README.md

@@ -80,7 +80,6 @@ It is possible to run React UI in your app in development mode. This is useful
 because:
 
 - In production mode React UI uses non-human-readable class names.
-- Runtime check (i.e. PropTypes) are suppressed in production mode.
 
 To enable development mode, add the following code to the `webpack.config.js`
 file in your app:

declaration.d.ts

@@ -1,2 +1,9 @@
-declare module '*.css';
-declare module '*.scss';
+declare module '*.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package.json

@@ -121,7 +121,6 @@
     "mini-css-extract-plugin": "^2.9.0",
     "postcss": "^8.4.39",
     "postcss-loader": "^8.1.1",
-    "prop-types": "^15.8.1",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "sass": "^1.77.6",

src/components/Alert/Alert.tsx

@@ -5,7 +5,7 @@ import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Alert.module.scss';
-import { AlertProps } from './Alert.types';
+import type { AlertProps } from './Alert.types';
 
 export const Alert: React.FunctionComponent<AlertProps> = ({
   children,

src/components/Alert/Alert.types.ts

@@ -1,10 +1,11 @@
-import { ReactNode } from 'react';
-import {
+import type { ReactNode } from 'react';
+import type {
+  CleanedComponentProps,
   FeedbackColor,
   NeutralColor,
 } from '../../types';
 
-export type AlertProps = React.ComponentProps<'div'> & {
+export type AlertProps = CleanedComponentProps<'div'> & {
   /**
    * Alert body.
    */

src/components/Badge/Badge.tsx

@@ -4,7 +4,7 @@ import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
-import { BadgeProps } from './Badge.types';
+import type { BadgeProps } from './Badge.types';
 import styles from './Badge.module.scss';
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({

src/components/Badge/Badge.types.ts

@@ -1,10 +1,11 @@
-import {
+import type {
+  CleanedComponentProps,
   FeedbackColor,
   NeutralColor,
   Priority,
 } from '../../types';
 
-export type BadgeProps = React.ComponentProps<'div'> & {
+export type BadgeProps = CleanedComponentProps<'div'> & {
   /**
    * Color to clarify importance and meaning of the badge. Implements
    * [Feedback and Neutral color collections](/docs/foundation/collections#colors).

src/components/Badge/__tests__/Badge.test.jsx

@@ -5,7 +5,7 @@ import {
 } from '@testing-library/react';
 import { feedbackColorPropTest } from '../../../../tests/jest/propTests/feedbackColorPropTest';
 import { neutralColorPropTest } from '../../../../tests/jest/propTests/neutralColorPropTest';
-import { Badge } from '../Badge';
+import { Badge } from '../Badge.tsx';
 
 const mandatoryProps = {
   label: 'label',