BREAKING CHANGE: remove prop-types

Author: Hypnosphi

.storybook/custom-header/version.tsx

@@ -1,5 +1,3 @@
-import PropTypes from 'prop-types';
-
 import DropdownMenu from '../../src/dropdown-menu/dropdown-menu';
 
 import branches from '../branches.json';
@@ -44,8 +42,4 @@ const Version = ({version}: VersionProps) => (
   />
 );
 
-Version.propTypes = {
-  version: PropTypes.string
-};
-
 export default Version;

CHANGELOG.md

@@ -9,6 +9,7 @@
 - `palette.css` is removed
 - Table: `wideFirstColumn` is now `false` by default
 - Tag: `angled` prop is removed
+- propTypes are removed in favor of TypeScript
 
 ## [6.0.0](https://youtrack.jetbrains.com/issue/RG-2303/Release-Ring-UI-6.0)
 

package-lock.json

@@ -204,7 +204,6 @@
     "@types/combokeys": "^2.4.9",
     "@types/deep-equal": "^1.0.4",
     "@types/element-resize-detector": "^1.1.6",
-    "@types/prop-types": "^15.7.12",
     "@types/react-virtualized": "9.21.30",
     "@types/util-deprecate": "^1.0.3",
     "@ungap/url-search-params": "^0.2.2",
@@ -233,7 +232,6 @@
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
     "postcss-preset-env": "^10.0.0",
-    "prop-types": "^15.8.1",
     "react-movable": "^3.3.1",
     "react-virtualized": "^9.22.5",
     "react-waypoint": "^10.3.0",

package.json

@@ -25,7 +25,6 @@ const WHITE_LIST = [
   'highlight.js',
   'just-debounce-it',
   'memoize-one',
-  'prop-types',
   'react-movable',
   'react-virtualized',
   'react-waypoint',

prepare-built-package.js

@@ -1,7 +1,6 @@
 import {PureComponent, ReactNode} from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import exceptionIcon from '@jetbrains/icons/exception';
 import checkmarkIcon from '@jetbrains/icons/checkmark';
@@ -60,10 +59,17 @@ const TypeToIconColor: Partial<Record<AlertType, Color>> = {
 export interface AlertProps {
   theme: Theme,
   timeout: number
+  /**
+   * Fires when alert starts closing if timeout is out or user clicks "Close" button
+   */
   onCloseRequest: ((event?: React.MouseEvent<HTMLElement>) => void)
   onClose: (() => void)
   isShaking: boolean
   isClosing: boolean
+  /**
+   * Whether an alert is rendered inside an **Alerts** container
+   * or standalone.
+   */
   inline: boolean
   showWithAnimation: boolean
   closeable: boolean
@@ -88,31 +94,6 @@ interface State {
  * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
  */
 export default class Alert extends PureComponent<AlertProps, State> {
-  static propTypes = {
-    timeout: PropTypes.number,
-    /**
-     * Fires when alert starts closing if timeout is out or user clicks "Close" button
-     */
-    onCloseRequest: PropTypes.func,
-    onClose: PropTypes.func,
-    isShaking: PropTypes.bool,
-    isClosing: PropTypes.bool,
-    /**
-     * Whether an alert is rendered inside an **Alerts** container
-     * or standalone.
-     */
-    inline: PropTypes.bool,
-    showWithAnimation: PropTypes.bool,
-    closeable: PropTypes.bool,
-    type: PropTypes.oneOf(Object.values(AlertType)),
-
-    children: PropTypes.node,
-    className: PropTypes.string,
-    captionClassName: PropTypes.string,
-    closeButtonClassName: PropTypes.string,
-    'data-test': PropTypes.string
-  };
-
   /** @override */
   static defaultProps = {
     theme: Theme.DARK,

src/alert/alert.tsx

@@ -1,7 +1,6 @@
 import {Children, cloneElement, PureComponent, HTMLAttributes, isValidElement} from 'react';
 import {createPortal} from 'react-dom';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import styles from './container.css';
 
@@ -14,11 +13,6 @@ import styles from './container.css';
 export type AlertContainerProps = HTMLAttributes<HTMLDivElement>
 
 export default class Alerts extends PureComponent<AlertContainerProps> {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
-  };
-
   render() {
     const {children, className, ...restProps} = this.props;
     const classes = classNames(styles.alertContainer, className);

src/alert/container.tsx

@@ -1,5 +1,4 @@
 import {Component} from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {Content} from '../island/island';
@@ -33,26 +32,6 @@ export interface AuthDialogProps {
 }
 
 export default class AuthDialog extends Component<AuthDialogProps> {
-  static propTypes = {
-    className: PropTypes.string,
-    title: PropTypes.string,
-    errorMessage: PropTypes.string,
-    serviceImage: PropTypes.string,
-    serviceName: PropTypes.string,
-    loginCaption: PropTypes.string,
-    loginToCaption: PropTypes.string,
-
-    show: PropTypes.bool,
-    cancelOnEsc: PropTypes.bool,
-    confirmLabel: PropTypes.string,
-    cancelLabel: PropTypes.string,
-    tryAgainLabel: PropTypes.string,
-
-    onConfirm: PropTypes.func,
-    onCancel: PropTypes.func,
-    onTryAgain: PropTypes.func
-  };
-
   static defaultProps = {
     loginCaption: 'Log in',
     loginToCaption: 'Log in to %serviceName%',

src/auth-dialog/auth-dialog.tsx

@@ -1,6 +1,5 @@
 import {ReactNode} from 'react';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 
 import alertService from '../alert-service/alert-service';
 import Alert from '../alert/alert';
@@ -46,14 +45,6 @@ function Message({translations, onCheckAgain}: BackendDownMessageProps) {
     </div>
   );
 }
-Message.propTypes = {
-  translations: PropTypes.shape({
-    backendIsNotAvailable: PropTypes.string,
-    checkAgain: PropTypes.string,
-    errorMessage: PropTypes.string
-  }),
-  onCheckAgain: PropTypes.func
-};
 
 export interface OnBackendDownParams {
   translations: BackendDownTranslations

src/auth/down-notification.tsx

@@ -1,5 +1,4 @@
 import {PureComponent, ImgHTMLAttributes} from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {encodeURL, isDataURI, parseQueryString} from '../global/url';
@@ -35,19 +34,6 @@ export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
 }
 
 export default class Avatar extends PureComponent<AvatarProps> {
-  static propTypes = {
-    dpr: PropTypes.number,
-    className: PropTypes.string,
-    size: PropTypes.number,
-    style: PropTypes.object,
-    url: PropTypes.string,
-    round: PropTypes.bool,
-    subavatar: PropTypes.string,
-    subavatarSize: PropTypes.number,
-    username: PropTypes.string,
-    skipParams: PropTypes.bool
-  };
-
   static defaultProps = {
     dpr: getPixelRatio(),
     size: Size.Size20,