fixup! transform RUI to typescript (#394)

Author: lukasbriza

.eslintrc

@@ -1,11 +1,34 @@
 {
   "extends": [
     "@visionappscz/eslint-config-visionapps",
-    "airbnb-typescript",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:deprecation/recommended",
-    "plugin:typescript-sort-keys/recommended",
+    "plugin:deprecation/recommended"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "**/*.ts",
+        "**/*.tsx"
+      ],
+      "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"]
+      }
+    }
   ],
   "env": {
     "browser": true,

declaration.d.ts

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

src/components/Alert/Alert.tsx

@@ -1,18 +1,18 @@
-import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { TranslationsContext } from '../../providers/translations';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Alert.module.scss';
+import { AlertProps } from './Alert.types';
 
-export const Alert = ({
+export const Alert: React.FunctionComponent<AlertProps> = ({
   children,
-  color,
-  icon,
+  color = 'note',
+  icon = null,
   id,
-  onClose,
+  onClose = null,
   ...restProps
 }) => {
   const translations = useContext(TranslationsContext);
@@ -45,7 +45,7 @@ export const Alert = ({
           className={styles.close}
           onClick={() => onClose()}
           onKeyPress={() => onClose()}
-          tabIndex="0"
+          tabIndex={0}
           title={translations.Alert.close}
         >
           <span className={styles.closeSign}>×</span>
@@ -55,42 +55,6 @@ export const Alert = ({
   );
 };
 
-Alert.defaultProps = {
-  color: 'note',
-  icon: null,
-  id: undefined,
-  onClose: null,
-};
-
-Alert.propTypes = {
-  /**
-   * Alert body.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Color variant to clarify importance and meaning of the alert. Implements
-   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
-   */
-  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
-  /**
-   * Optional element to be displayed next to the alert body.
-   */
-  icon: PropTypes.node,
-  /**
-   * ID of the root HTML element.
-   *
-   * Also serves as base for ids of nested elements:
-   * * `<ID>__close`
-   * * `<ID>__content`
-   */
-  id: PropTypes.string,
-  /**
-   * Function to call when the close button is clicked. If not provided, close buttons will be
-   * hidden.
-   */
-  onClose: PropTypes.func,
-};
-
 export const AlertWithGlobalProps = withGlobalProps(Alert, 'Alert');
 
 export default AlertWithGlobalProps;

src/components/Alert/Alert.types.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import {
+  FeedbackColor,
+  NeutralColor,
+} from '../../types';
+
+export type AlertProps = React.ComponentProps<'div'> & {
+  /**
+   * Alert body.
+   */
+  children: ReactNode;
+  /**
+   * Color variant to clarify importance and meaning of the alert. Implements
+   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
+   */
+  color?: FeedbackColor | NeutralColor;
+  /**
+   * Optional element to be displayed next to the alert body.
+   */
+  icon?: ReactNode;
+  /**
+   * ID of the root HTML element.
+   *
+   * Also serves as base for ids of nested elements:
+   * * `<ID>__close`
+   * * `<ID>__content`
+   */
+  id?: string;
+  /**
+   * Function to call when the close button is clicked. If not provided, close buttons will be
+   * hidden.
+   */
+  onClose?: () => void;
+};

src/components/Badge/Badge.tsx

@@ -1,16 +1,16 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
+import { BadgeProps } from './Badge.types';
 import styles from './Badge.module.scss';
 
-export const Badge = ({
-  color,
+export const Badge: React.FunctionComponent<BadgeProps> = ({
+  color = 'note',
   label,
-  priority,
+  priority = 'filled',
   ...restProps
 }) => (
   <div
@@ -25,27 +25,6 @@ export const Badge = ({
   </div>
 );
 
-Badge.defaultProps = {
-  color: 'note',
-  priority: 'filled',
-};
-
-Badge.propTypes = {
-  /**
-   * Color to clarify importance and meaning of the badge. Implements
-   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
-   */
-  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
-  /**
-   * Text to be displayed.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Visual priority to highlight or suppress the badge.
-   */
-  priority: PropTypes.oneOf(['filled', 'outline']),
-};
-
 export const BadgeWithGlobalProps = withGlobalProps(Badge, 'Badge');
 
 export default BadgeWithGlobalProps;

src/components/Badge/Badge.types.ts

@@ -0,0 +1,21 @@
+import {
+  FeedbackColor,
+  NeutralColor,
+  Priority,
+} from '../../types';
+
+export type BadgeProps = React.ComponentProps<'div'> & {
+  /**
+   * Color to clarify importance and meaning of the badge. Implements
+   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
+   */
+  color?: FeedbackColor | NeutralColor;
+  /**
+   * Text to be displayed.
+   */
+  label: string;
+  /**
+   * Visual priority to highlight or suppress the badge.
+   */
+  priority?: Exclude<Priority, 'flat'>;
+};

src/components/Button/Button.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
@@ -10,23 +9,24 @@ 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 styles from './Button.module.scss';
 
-export const Button = React.forwardRef((props, ref) => {
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
-    afterLabel,
-    beforeLabel,
-    block,
-    disabled,
-    endCorner,
-    feedbackIcon,
+    afterLabel = null,
+    beforeLabel = null,
+    block = false,
+    disabled = false,
+    endCorner = null,
+    feedbackIcon = null,
     id,
     label,
-    labelVisibility,
-    priority,
-    size,
-    startCorner,
-    color,
+    labelVisibility = 'xs',
+    priority = 'filled',
+    size = 'medium',
+    startCorner = null,
+    color = 'primary',
     ...restProps
   } = props;
   const buttonGroupContext = useContext(ButtonGroupContext);
@@ -100,100 +100,6 @@ export const Button = React.forwardRef((props, ref) => {
   );
 });
 
-Button.defaultProps = {
-  afterLabel: null,
-  beforeLabel: null,
-  block: false,
-  color: 'primary',
-  disabled: false,
-  endCorner: null,
-  feedbackIcon: null,
-  id: undefined,
-  labelVisibility: 'xs',
-  priority: 'filled',
-  size: 'medium',
-  startCorner: null,
-  type: 'button',
-};
-
-Button.propTypes = {
-  /**
-   * Element to be displayed after label, eg. an icon.
-   */
-  afterLabel: PropTypes.node,
-  /**
-   * Element to be displayed before label, eg. an icon.
-   */
-  beforeLabel: PropTypes.node,
-  /**
-   * If `true`, the button will span the full width of its parent.
-   *
-   * Ignored if the component is rendered within `ButtonGroup` component
-   * as the value is inherited in such case.
-   */
-  block: PropTypes.bool,
-  /**
-   * Color variant to clarify importance and meaning of the alert. Implements
-   * [Action, Feedback and Neutral color collections](/docs/foundation/collections#colors).
-   */
-  color: PropTypes.oneOf(
-    ['primary', 'secondary', 'selected', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],
-  ),
-  /**
-   * If `true`, the button will be disabled.
-   *
-   * Ignored if the component is rendered within `ButtonGroup` component
-   * as the value is inherited in such case.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Element to be displayed in the top right corner.
-   */
-  endCorner: PropTypes.node,
-  /**
-   * Element to be displayed as a feedback icon on top of button label. When defined, it implies the
-   * button is in feedback state.
-   */
-  feedbackIcon: PropTypes.node,
-  /**
-   * ID of the root HTML element.
-   *
-   * Also serves as base for ids of nested elements:
-   * * `<ID>__labelText`
-   */
-  id: PropTypes.string,
-  /**
-   * Button label.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Defines minimum breakpoint from which the button label will be visible.
-   */
-  labelVisibility: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'x2l', 'x3l', 'none']),
-  /**
-   * Visual priority to highlight or suppress the button.
-   *
-   * Ignored if the component is rendered within `ButtonGroup` component
-   * as the value is inherited in such case.
-   */
-  priority: PropTypes.oneOf(['filled', 'outline', 'flat']),
-  /**
-   * Size of the button.
-   *
-   * Ignored if the component is rendered within `ButtonGroup` or `InputGroup` component as the value is inherited in
-   * such case.
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Element to be displayed in the top left corner.
-   */
-  startCorner: PropTypes.node,
-  /**
-   * Set the HTML `type` attribute of the `button` element.
-   */
-  type: PropTypes.oneOf(['button', 'submit']),
-};
-
 export const ButtonWithGlobalProps = withGlobalProps(Button, 'Button');
 
 export default ButtonWithGlobalProps;