fixup! fixup! fixup! fixup! Rename JavaScript files to TypeScript files

react-ui-org · Apr 28, 2023 · fa713b8 · fa713b8
1 parent 942cd06
commit fa713b8
Show file tree

Hide file tree

Showing 124 changed files with 2,499 additions and 2,605 deletions.
diff --git a/src/lib/components/Alert/Alert.test.tsx b/src/lib/components/Alert/Alert.test.tsx
@@ -6,30 +6,30 @@ import {
   within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { colorPropTest } from '../../../../../tests/propTests/colorPropTest';
-import defaultTranslations from '../../../translations/en';
-import { Alert } from '../Alert';
+import { colorPropTest } from '../../../../tests/propTests/colorPropTest';
+import defaultTranslations from '../../translations/en';
+import { Alert } from './Alert';
 
 const mandatoryProps = {
   children: 'content',
   translations: defaultTranslations.Alert,
 };
 
 describe('rendering', () => {
-  it.each([
+  it.each<TestingProps>([
     [
       { children: <div>content text</div> },
       (rootElement) => expect(within(rootElement).getByText('content text')),
     ],
-    ...colorPropTest,
+    ...(colorPropTest as unknown as TestingProps[]),
     [
       { icon: (<div>icon</div>) },
       (rootElement) => expect(within(rootElement).getByText('icon')),
     ],
     [
       {
         id: 'id',
-        onClose: () => {},
+        onClose: () => { },
       },
       (rootElement) => {
         expect(rootElement).toHaveAttribute('id', 'id');
@@ -45,7 +45,7 @@ describe('rendering', () => {
       />
     ));
 
-    assert(dom.container.firstChild);
+    assert(dom.container.firstChild as HTMLElement);
   });
 });
 

diff --git a/src/lib/components/Alert/Alert.tsx b/src/lib/components/Alert/Alert.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
   RUIContext,
@@ -8,10 +7,11 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Alert.scss';
+import { AlertProps } from './Alert.types';
 
-export const Alert = ({
+export const Alert: React.FunctionComponent<AlertProps> = ({
   children,
-  color,
+  color = 'note',
   icon,
   id,
   onClose,
@@ -30,9 +30,9 @@ export const Alert = ({
       role="alert"
     >
       {icon && (
-        <div className={styles.icon}>
-          {icon}
-        </div>
+      <div className={styles.icon}>
+        {icon}
+      </div>
       )}
       <div
         className={styles.message}
@@ -41,57 +41,23 @@ export const Alert = ({
         {children}
       </div>
       {onClose && (
-        <button
-          type="button"
-          {...(id && { id: `${id}__close` })}
-          className={styles.close}
-          onClick={() => onClose()}
-          onKeyPress={() => onClose()}
-          tabIndex="0"
-          title={translations.Alert.close}
-        >
-          <span className={styles.closeSign}>×</span>
-        </button>
+      <button
+        type="button"
+        {...(id && { id: `${id}__close` })}
+        className={styles.close}
+        onClick={() => onClose()}
+        onKeyPress={() => onClose()}
+        tabIndex={0}
+        title={translations?.Alert.close}
+      >
+        <span className={styles.closeSign}>×</span>
+      </button>
       )}
     </div>
   );
 };
 
-Alert.defaultProps = {
-  color: 'note',
-  icon: null,
-  id: undefined,
-  onClose: null,
-};
-
-Alert.propTypes = {
-  /**
-   * Alert body.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the alert.
-   */
-  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;
+
diff --git a/src/lib/components/Alert/Alert.types.ts b/src/lib/components/Alert/Alert.types.ts
@@ -0,0 +1,31 @@
+export interface AlertProps {
+  /**
+   * Rest of the props.
+   */
+  [key: string]: unknown;
+  /**
+   * Alert Body
+   */
+  children: React.ReactNode;
+  /**
+   * [Color variant] (/foundation/colors#component-colors) to clarify importance and meaning of the alert.
+   */
+  color?: Color;
+  /**
+   * Optional element to be displayed next to the alert body.
+   */
+  icon?: React.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;
+}
diff --git a/src/lib/components/Badge/Badge.test.tsx b/src/lib/components/Badge/Badge.test.tsx
@@ -3,16 +3,16 @@ import {
   render,
   within,
 } from '@testing-library/react';
-import { colorPropTest } from '../../../../../tests/propTests/colorPropTest';
-import { Badge } from '../Badge';
+import { colorPropTest } from '../../../../tests/propTests/colorPropTest';
+import { Badge } from './Badge';
 
 const mandatoryProps = {
   label: 'label',
 };
 
 describe('rendering', () => {
-  it.each([
-    ...colorPropTest,
+  it.each<TestingProps>([
+    ...(colorPropTest as unknown as TestingProps[]),
     [
       { label: 'label text' },
       (rootElement) => expect(within(rootElement).getByText('label text')),
@@ -33,6 +33,6 @@ describe('rendering', () => {
       />
     ));
 
-    assert(dom.container.firstChild);
+    assert(dom.container.firstChild as HTMLElement);
   });
 });
diff --git a/src/lib/components/Badge/Badge.tsx b/src/lib/components/Badge/Badge.tsx
@@ -1,15 +1,15 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Badge.scss';
+import { BadgeProps } from './Badge.types';
 
-export const Badge = ({
-  color,
+export const Badge: React.FunctionComponent<BadgeProps> = ({
+  color = 'note',
   label,
-  priority,
+  priority = 'filled',
   ...restProps
 }) => (
   <div
@@ -24,26 +24,6 @@ export const Badge = ({
   </div>
 );
 
-Badge.defaultProps = {
-  color: 'note',
-  priority: 'filled',
-};
-
-Badge.propTypes = {
-  /**
-   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the badge.
-   */
-  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;
diff --git a/src/lib/components/Badge/Badge.types.ts b/src/lib/components/Badge/Badge.types.ts
@@ -0,0 +1,18 @@
+export interface BadgeProps {
+  /**
+   * Rest of the props.
+   */
+  [key: string]: unknown;
+  /**
+   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the badge.
+   */
+  color?: Color;
+  /**
+   * Text to be displayed.
+   */
+  label: string;
+  /**
+   * Visual priority to highlight or suppress the badge.
+   */
+  priority?: Exclude<Priority, 'flat'>;
+}
diff --git a/src/lib/components/Button/Button.test.tsx b/src/lib/components/Button/Button.test.tsx
@@ -6,22 +6,22 @@ import {
 } from '@testing-library/react';
 import sinon from 'sinon';
 import userEvent from '@testing-library/user-event';
-import { actionColorPropTest } from '../../../../../tests/propTests/actionColorPropTest';
-import { blockPropTest } from '../../../../../tests/propTests/blockPropTest';
-import { colorPropTest } from '../../../../../tests/propTests/colorPropTest';
-import { refPropTest } from '../../../../../tests/propTests/refPropTest';
-import { labelPropTest } from '../../../../../tests/propTests/labelPropTest';
-import { sizePropTest } from '../../../../../tests/propTests/sizePropTest';
-import { ButtonGroupContext } from '../../ButtonGroup';
-import { Button } from '../Button';
+import { actionColorPropTest } from '../../../../tests/propTests/actionColorPropTest';
+import { blockPropTest } from '../../../../tests/propTests/blockPropTest';
+import { colorPropTest } from '../../../../tests/propTests/colorPropTest';
+import { refPropTest } from '../../../../tests/propTests/refPropTest';
+import { labelPropTest } from '../../../../tests/propTests/labelPropTest';
+import { sizePropTest } from '../../../../tests/propTests/sizePropTest';
+import { ButtonGroupContext } from '../ButtonGroup';
+import { Button } from './Button';
 
 const mandatoryProps = {
   label: 'label',
 };
 
 describe('rendering', () => {
-  it.each([
-    ...blockPropTest,
+  it.each<TestingProps>([
+    ...(blockPropTest as unknown as TestingProps[]),
     [
       { disabled: true },
       (rootElement) => expect(rootElement).toBeDisabled(),
@@ -42,7 +42,7 @@ describe('rendering', () => {
       { priority: 'flat' },
       (rootElement) => expect(rootElement).toHaveClass('isRootPriorityFlat'),
     ],
-    ...sizePropTest,
+    ...(sizePropTest as unknown as TestingProps[]),
   ])('renders with ButtonGroup props: "%s"', (testedProps, assert) => {
     const dom = render((
       <ButtonGroupContext.Provider
@@ -54,10 +54,10 @@ describe('rendering', () => {
       </ButtonGroupContext.Provider>
     ));
 
-    assert(dom.container.firstChild);
+    assert(dom.container.firstChild as HTMLElement);
   });
 
-  it.each([
+  it.each<TestingProps>([
     [
       { afterLabel: <div>after label</div> },
       (rootElement) => expect(within(rootElement).getByText('after label')),
@@ -66,9 +66,9 @@ describe('rendering', () => {
       { beforeLabel: <div>before label</div> },
       (rootElement) => expect(within(rootElement).getByText('before label')),
     ],
-    ...actionColorPropTest,
-    ...blockPropTest,
-    ...colorPropTest,
+    ...(actionColorPropTest as unknown as TestingProps[]),
+    ...(blockPropTest as unknown as TestingProps[]),
+    ...(colorPropTest as unknown as TestingProps[]),
     [
       { disabled: true },
       (rootElement) => expect(rootElement).toBeDisabled(),
@@ -81,15 +81,15 @@ describe('rendering', () => {
       { endCorner: <div>corner text</div> },
       (rootElement) => expect(within(rootElement).getByText('corner text')),
     ],
-    ...refPropTest(React.createRef()),
+    ...(refPropTest(React.createRef()) as unknown as TestingProps[]),
     [
       { id: 'id' },
       (rootElement) => {
         expect(rootElement).toHaveAttribute('id', 'id');
         expect(within(rootElement).getByText('label')).toHaveAttribute('id', 'id__labelText');
       },
     ],
-    ...labelPropTest,
+    ...(labelPropTest as unknown as TestingProps[]),
     [
       { labelVisibility: 'sm' },
       (rootElement) => expect(rootElement).toHaveClass('hasLabelVisibleSm'),
@@ -138,7 +138,7 @@ describe('rendering', () => {
       { priority: 'flat' },
       (rootElement) => expect(rootElement).toHaveClass('isRootPriorityFlat'),
     ],
-    ...sizePropTest,
+    ...(sizePropTest as unknown as TestingProps[]),
     [
       { startCorner: <div>corner text</div> },
       (rootElement) => expect(within(rootElement).getByText('corner text')),
@@ -151,7 +151,7 @@ describe('rendering', () => {
       />
     ));
 
-    assert(dom.container.firstChild);
+    assert(dom.container.firstChild as HTMLElement);
   });
 });
 
@@ -169,3 +169,4 @@ describe('functionality', () => {
     expect(spy.calledOnce).toEqual(true);
   });
 });
+