feat(loadingindicator): convert to TypeScript and export types

src/LoadingIndicator/LoadingIndicator.spec.js → src/LoadingIndicator/LoadingIndicator.spec.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
 import { renderWithTheme } from '../../test/utils';
-import LoadingIndicator from './LoadingIndicator';
+import { LoadingIndicator } from './LoadingIndicator';
 
 describe('<LoadingIndicator />', () => {
   it('renders LoadingIndicator', () => {

src/LoadingIndicator/LoadingIndicator.stories.js → src/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-
+import { ComponentMeta } from '@storybook/react';
 import styled from 'styled-components';
 
-import { LoadingIndicator } from '..';
+import { LoadingIndicator } from 'react95';
 
 const Wrapper = styled.div`
   background: ${({ theme }) => theme.material};
@@ -13,7 +12,7 @@ export default {
   title: 'LoadingIndicator',
   component: LoadingIndicator,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof LoadingIndicator>;
 
 export function Default() {
   return (

src/LoadingIndicator/LoadingIndicator.js → src/LoadingIndicator/LoadingIndicator.tsx

@@ -1,9 +1,13 @@
 import React, { forwardRef } from 'react';
-import propTypes from 'prop-types';
-
-import styled, { keyframes, css } from 'styled-components';
-
+import styled, { css, keyframes } from 'styled-components';
 import { StyledCutout } from '../Cutout/Cutout';
+import { CommonStyledProps } from '../types';
+
+type LoadingIndicatorProps = {
+  isLoading?: boolean;
+  shadow?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
 
 const Wrapper = styled.div`
   display: inline-block;
@@ -127,35 +131,28 @@ const IndeterminateSecondaryInner = styled.span`
   animation: ${secondaryScale} 2s infinite linear;
 `;
 
-const LoadingIndicator = forwardRef(function LoadingIndicator(props, ref) {
-  const { isLoading, shadow, ...otherProps } = props;
-
-  return (
-    <Wrapper ref={ref} role='progressbar' {...otherProps}>
-      <ProgressCutout shadow={shadow}>
-        {isLoading && (
-          <IndeterminateWrapper data-testid='loading-wrapper'>
-            <IndeterminatePrimary>
-              <IndeterminatePrimaryInner />
-            </IndeterminatePrimary>
-            <IndeterminateSecondary>
-              <IndeterminateSecondaryInner />
-            </IndeterminateSecondary>
-          </IndeterminateWrapper>
-        )}
-      </ProgressCutout>
-    </Wrapper>
-  );
-});
-
-LoadingIndicator.defaultProps = {
-  shadow: false,
-  isLoading: true
-};
-
-LoadingIndicator.propTypes = {
-  shadow: propTypes.bool,
-  isLoading: propTypes.bool
-};
+const LoadingIndicator = forwardRef<HTMLDivElement, LoadingIndicatorProps>(
+  function LoadingIndicator(
+    { isLoading = true, shadow = false, ...otherProps },
+    ref
+  ) {
+    return (
+      <Wrapper ref={ref} role='progressbar' {...otherProps}>
+        <ProgressCutout shadow={shadow}>
+          {isLoading && (
+            <IndeterminateWrapper data-testid='loading-wrapper'>
+              <IndeterminatePrimary>
+                <IndeterminatePrimaryInner />
+              </IndeterminatePrimary>
+              <IndeterminateSecondary>
+                <IndeterminateSecondaryInner />
+              </IndeterminateSecondary>
+            </IndeterminateWrapper>
+          )}
+        </ProgressCutout>
+      </Wrapper>
+    );
+  }
+);
 
-export default LoadingIndicator;
+export { LoadingIndicator, LoadingIndicatorProps };

src/index.ts

@@ -18,7 +18,7 @@ export { default as Fieldset } from './Fieldset/Fieldset';
 export * from './Hourglass/Hourglass';
 export { default as List } from './List/List';
 export { default as ListItem } from './ListItem/ListItem';
-export { default as LoadingIndicator } from './LoadingIndicator/LoadingIndicator';
+export * from './LoadingIndicator/LoadingIndicator';
 export { default as NumberField } from './NumberField/NumberField';
 export * from './Panel/Panel';
 export * from './Progress/Progress';