refactor(EmptyState): migrate to ts

Author: artemmufazalov

src/components/EmptyState/EmptyState.js src/components/EmptyState/EmptyState.tsx

@@ -1,5 +1,6 @@
-import PropTypes from 'prop-types';
+import {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
+
 import Icon from '../Icon/Icon';
 
 import './EmptyState.scss';
@@ -12,7 +13,15 @@ const sizes = {
     l: 350,
 };
 
-export default function EmptyState({image, title, description, actions, size}) {
+interface EmptyStateProps {
+    title: string;
+    image?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode[];
+    size?: keyof typeof sizes;
+}
+
+export const EmptyState = ({image, title, description, actions, size = 'm'}: EmptyStateProps) => {
     return (
         <div className={block({size})}>
             <div className={block('wrapper', {size})}>
@@ -35,16 +44,4 @@ export default function EmptyState({image, title, description, actions, size}) {
             </div>
         </div>
     );
-}
-
-EmptyState.propTypes = {
-    title: PropTypes.string.isRequired,
-    image: PropTypes.node,
-    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    actions: PropTypes.arrayOf(PropTypes.node),
-    size: PropTypes.string,
-};
-
-EmptyState.defaultProps = {
-    size: 'm',
 };

src/components/EmptyState/index.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

src/components/Errors/403/AccessDenied.tsx

@@ -1,4 +1,4 @@
-import EmptyState from '../../EmptyState/EmptyState';
+import {EmptyState} from '../../EmptyState';
 import {Illustration} from '../../Illustration';
 
 import i18n from '../i18n';

src/containers/Storage/EmptyFilter/EmptyFilter.tsx

@@ -1,6 +1,6 @@
 import {Button} from '@gravity-ui/uikit';
 
-import EmptyState from '../../../components/EmptyState/EmptyState';
+import {EmptyState} from '../../../components/EmptyState';
 import {Illustration} from '../../../components/Illustration';
 
 import i18n from './i18n';
@@ -22,13 +22,12 @@ export const EmptyFilter = ({
         image={<Illustration name="thumbsUp" />}
         title={title}
         description={message}
-        actions={onShowAll && [
-            <Button
-                key="show-all"
-                onClick={onShowAll}
-            >
-                {showAll}
-            </Button>
-        ]}
+        actions={
+            onShowAll && [
+                <Button key="show-all" onClick={onShowAll}>
+                    {showAll}
+                </Button>,
+            ]
+        }
     />
 );

src/containers/Tablet/Tablet.js

@@ -14,7 +14,7 @@ import InfoViewer from '../../components/InfoViewer/InfoViewer';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import {Tag} from '../../components/Tag';
 import Icon from '../../components/Icon/Icon';
-import EmptyState from '../../components/EmptyState/EmptyState';
+import {EmptyState} from '../../components/EmptyState';
 import {Link as ExternalLink, Button, Loader} from '@gravity-ui/uikit';
 import DataTable from '@gravity-ui/react-data-table';
 import CriticalActionDialog from '../../components/CriticalActionDialog/CriticalActionDialog';