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',

src/components/Button/Button.tsx

@@ -1,4 +1,7 @@
-import React, { useContext } from 'react';
+import React, {
+  useContext,
+  forwardRef,
+} from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
@@ -9,10 +12,10 @@ import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { ButtonGroupContext } from '../ButtonGroup';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
-import { ButtonProps } from './Button.types';
+import type { ButtonProps } from './Button.types';
 import styles from './Button.module.scss';
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     afterLabel,
     beforeLabel,

src/components/Button/Button.types.ts

@@ -1,15 +1,16 @@
-import {
+import type {
   ButtonHTMLAttributes,
   ReactNode,
 } from 'react';
-import {
+import type {
   Breakpoint,
+  CleanedComponentProps,
   Color,
   Priority,
   Size,
 } from '../../types';
 
-export type ButtonProps = React.ComponentProps<'button'> & {
+export type ButtonProps = CleanedComponentProps<'button'> & {
   /**
    * Element to be displayed after label, eg. an icon.
    */

src/components/Button/helpers/getRootLabelVisibilityClassName.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from '../../../types';
+import type { Breakpoint } from '../../../types';
 
 export default (labelVisibility: Breakpoint, styles: Record<string, string>) => {
   // Intentionally omitting `xs` which means label is visible on all screen sizes.

src/components/Button/helpers/getRootPriorityClassName.ts

@@ -1,4 +1,4 @@
-import { Priority } from '../../../types';
+import type { Priority } from '../../../types';
 
 export default (priority: Priority, styles: Record<string, string>) => {
   if (priority === 'filled') {

src/components/ButtonGroup/ButtonGroup.tsx

@@ -10,8 +10,8 @@ import {
   ButtonGroupContext,
   defaultValues,
 } from './ButtonGroupContext';
-import { ButtonGroupProps } from './ButtonGroup.types';
-import { ButtonGroupContextType } from './ButtonGroupContext.types';
+import type { ButtonGroupProps } from './ButtonGroup.types';
+import type { ButtonGroupContextType } from './ButtonGroupContext.types';
 import styles from './ButtonGroup.module.scss';
 
 export const ButtonGroup: React.FunctionComponent<ButtonGroupProps> = ({

src/components/ButtonGroup/ButtonGroup.types.ts

@@ -1,10 +1,11 @@
-import { ReactNode } from 'react';
-import {
+import type { ReactNode } from 'react';
+import type {
+  CleanedComponentPropsWithChildren,
   Priority,
   Size,
 } from '../../types';
 
-export type ButtonGroupProps = React.ComponentProps<'fieldset'> & {
+export type ButtonGroupProps = CleanedComponentPropsWithChildren<'fieldset'> & {
   /**
    * If `true`, the button group will span the full width of its parent.
    */

src/components/ButtonGroup/ButtonGroupContext.ts

@@ -1,15 +1,11 @@
 import React from 'react';
-import {
-  Priority,
-  Size,
-} from '../../types';
-import { ButtonGroupContextType } from './ButtonGroupContext.types';
+import type { ButtonGroupContextType } from './ButtonGroupContext.types';
 
 export const defaultValues: ButtonGroupContextType = {
   block: false,
   disabled: false,
-  priority: 'filled' as Priority,
-  size: 'medium' as Size,
+  priority: 'filled',
+  size: 'medium',
 };
 
 export const ButtonGroupContext = React.createContext <ButtonGroupContextType>(defaultValues);

src/components/ButtonGroup/ButtonGroupContext.types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   Priority,
   Size,
 } from '../../types';

src/components/Card/Card.tsx

@@ -3,7 +3,7 @@ import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
-import { CardProps } from './Card.types';
+import type { CardProps } from './Card.types';
 import styles from './Card.module.scss';
 
 export const Card: React.FunctionComponent<CardProps> = ({

src/components/Card/Card.types.ts

@@ -1,12 +1,13 @@
-import {
+import type {
+  CleanedComponentPropsWithChildren,
   FeedbackColor,
   NeutralColor,
 } from '../../types';
-import { ScrollViewProps } from '../ScrollView/ScrollView.types';
-import { CardBodyProps } from './CardBody.types';
-import { CardFooterProps } from './CardFooter.types';
+import type { ScrollViewProps } from '../ScrollView/ScrollView.types';
+import type { CardBodyProps } from './CardBody.types';
+import type { CardFooterProps } from './CardFooter.types';
 
-export type CardProps = React.ComponentProps<'div'> & {
+export type CardProps = CleanedComponentPropsWithChildren<'div'> & {
   /**
    * Slot for individual card elements that build up the inner layout:
    * * `CardBody`

src/components/Card/CardBody.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../helpers/transferProps';
-import { CardBodyProps } from './CardBody.types';
+import type { CardBodyProps } from './CardBody.types';
 import styles from './Card.module.scss';
 
 export const CardBody: React.FunctionComponent<CardBodyProps> = ({

src/components/Card/CardBody.types.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { CleanedComponentPropsWithChildren } from '../../types';
 
-export type CardBodyProps = React.ComponentProps<'div'> & {
+export type CardBodyProps = CleanedComponentPropsWithChildren<'div'> & {
   /**
    * Content of the card.
    */

src/components/Card/CardFooter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { transferProps } from '../../helpers/transferProps';
 import { withGlobalProps } from '../../providers/globalProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import { CardFooterProps } from './CardFooter.types';
+import type { CardFooterProps } from './CardFooter.types';
 import styles from './Card.module.scss';
 
 export const CardFooter: React.FunctionComponent<CardFooterProps> = ({

src/components/Card/CardFooter.types.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { CleanedComponentPropsWithChildren } from '../../types';
 
-export type CardFooterProps = React.ComponentProps<'div'> & {
+export type CardFooterProps = CleanedComponentPropsWithChildren<'div'> & {
   /**
    * Card actions, usually buttons.
    */

src/components/Card/__tests__/Card.test.jsx

@@ -5,10 +5,10 @@ import {
 } from '@testing-library/react';
 import { feedbackColorPropTest } from '../../../../tests/jest/propTests/feedbackColorPropTest';
 import { raisedPropTest } from '../../../../tests/jest/propTests/raisedPropTest';
-import { ScrollView } from '../../ScrollView';
-import { Card } from '../Card';
-import { CardBody } from '../CardBody';
-import { CardFooter } from '../CardFooter';
+import { ScrollView } from '../../ScrollView/index.ts';
+import { Card } from '../Card.tsx';
+import { CardBody } from '../CardBody.tsx';
+import { CardFooter } from '../CardFooter.tsx';
 import { densePropTest } from '../../../../tests/jest/propTests/densePropTest';
 
 const mandatoryProps = {

src/components/Card/__tests__/CardBody.test.jsx

@@ -3,7 +3,7 @@ import {
   render,
   within,
 } from '@testing-library/react';
-import { CardBody } from '../CardBody';
+import { CardBody } from '../CardBody.tsx';
 
 const defaultProps = {
   children: 'content',

src/components/Card/__tests__/CardFooter.test.jsx

@@ -4,7 +4,7 @@ import {
   within,
 } from '@testing-library/react';
 import { childrenEmptyPropTest } from '../../../../tests/jest/propTests/childrenEmptyPropTest';
-import { CardFooter } from '../CardFooter';
+import { CardFooter } from '../CardFooter.tsx';
 
 const defaultProps = {
   children: 'content',

src/components/CheckboxField/CheckboxField.tsx

@@ -1,13 +1,16 @@
-import React, { useContext } from 'react';
+import React, {
+  useContext,
+  forwardRef,
+} from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { FormLayoutContext } from '../FormLayout';
-import { CheckboxFieldProps } from './CheckboxField.types';
+import type { CheckboxFieldProps } from './CheckboxField.types';
 import styles from './CheckboxField.module.scss';
 
-export const CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>((props, ref) => {
+export const CheckboxField = forwardRef<HTMLInputElement, CheckboxFieldProps>((props, ref) => {
   const {
     disabled = false,
     helpText,