rewrite Spinner component to typescript

Author: thayannevls

react/components/EXPERIMENTAL_Table/Sections/Loading.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 
-import Spinner from '../../Spinner/index.js'
+import Spinner from '../../Spinner'
 import useTableMotion from '../hooks/useTableMotion'
 import { E2ETestable } from '../types'
 

react/components/Spinner/index.js react/components/Spinner/index.tsx

@@ -1,28 +1,37 @@
-import React from 'react'
+import React, { FC } from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { baseClassname } from '../icon/utils'
 
 const radius = 40
 const circ = 2 * radius * Math.PI
 
-class Spinner extends React.Component {
-  render() {
-    const { color, size, block } = this.props
+const propTypes = {
+  /** Color of the spinner */
+  color: PropTypes.string,
+  /** Size (diameter) of the spinner */
+  size: PropTypes.number,
+  /** Sets the display to block */
+  block: PropTypes.bool,
+}
+
+type Props = PropTypes.InferProps<typeof propTypes>
 
-    return (
-      <svg
-        className={`${baseClassname('spinner')} ${
-          !color ? 'c-action-primary' : ''
-        } ${block ? 'db' : ''}`}
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 100 100"
-        preserveAspectRatio="xMidYMid"
-        height={size}
-        width={size}
-      >
-        <style>
-          {`
+const Spinner: FC<Props> = ({ color, size, block }: Props) => (
+  <svg
+    className={classNames(`${baseClassname('spinner')}`, {
+      'c-action-primary': !color,
+      db: block,
+    })}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    preserveAspectRatio="xMidYMid"
+    height={size}
+    width={size}
+  >
+    <style>
+      {`
             @keyframes vtex-spinner-rotate {
               from {
                 transform-origin: 50% 50%;
@@ -50,33 +59,24 @@ class Spinner extends React.Component {
               animation: vtex-spinner-fill 1.25s infinite cubic-bezier(0.455, 0.030, 0.515, 0.955), vtex-spinner-rotate 0.625s infinite linear;
             }
           `}
-        </style>
+    </style>
 
-        <circle
-          className="vtex-spinner_circle"
-          cx="50"
-          cy="50"
-          fill="none"
-          r={radius}
-          stroke={color || 'currentColor'}
-          strokeWidth="10"
-          strokeDasharray={`0 0 ${circ * 0.75} ${circ}`}
-          strokeLinecap="round"
-          strokeDashoffset="1"
-        />
-      </svg>
-    )
-  }
-}
+    <circle
+      className="vtex-spinner_circle"
+      cx="50"
+      cy="50"
+      fill="none"
+      r={radius}
+      stroke={color ?? 'currentColor'}
+      strokeWidth="10"
+      strokeDasharray={`0 0 ${circ * 0.75} ${circ}`}
+      strokeLinecap="round"
+      strokeDashoffset="1"
+    />
+  </svg>
+)
 
-Spinner.propTypes = {
-  /** Color of the spinner */
-  color: PropTypes.string,
-  /** Size (diameter) of the spinner */
-  size: PropTypes.number,
-  /** Sets the display to block */
-  block: PropTypes.bool,
-}
+Spinner.propTypes = propTypes
 
 Spinner.defaultProps = {
   block: false,

styleguide.config.js

@@ -97,7 +97,7 @@ module.exports = {
             'react/components/EmptyState/index.js',
             'react/components/FilterBar/index.js',
             'react/components/FilterOptions/index.js',
-            'react/components/Spinner/index.js',
+            'react/components/Spinner/index.tsx',
             'react/components/Table/index.js',
             'react/components/Tag/index.js',
             'react/components/Progress/index.tsx',
@@ -147,7 +147,7 @@ module.exports = {
           name: 'Notification',
           components: [
             'react/components/Alert/index.js',
-            'react/components/Spinner/index.js',
+            'react/components/Spinner/index.tsx',
             'react/components/ToastProvider/index.js',
           ],
         },