feat(progress): convert to TypeScript and export types

Author: WesSouza

src/Progress/Progress.mdx

@@ -3,7 +3,7 @@ name: Progress
 menu: Components
 ---
 
-import Progress from './Progress';
+import { Progress } from './Progress';
 
 # Progress
 

src/Progress/Progress.spec.js renamed to src/Progress/Progress.spec.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-
 import { renderWithTheme } from '../../test/utils';
-import Progress from './Progress';
+import { Progress } from './Progress';
 
 describe('<Progress />', () => {
   it('renders Progress', () => {
@@ -20,8 +18,12 @@ describe('<Progress />', () => {
         const value = 32;
         const { queryByTestId } = renderWithTheme(<Progress value={value} />);
 
-        expect(queryByTestId('defaultProgress1').textContent).toBe(`${value}%`);
-        expect(queryByTestId('defaultProgress2').textContent).toBe(`${value}%`);
+        expect(queryByTestId('defaultProgress1')?.textContent).toBe(
+          `${value}%`
+        );
+        expect(queryByTestId('defaultProgress2')?.textContent).toBe(
+          `${value}%`
+        );
 
         expect(queryByTestId('defaultProgress2')).toHaveStyleRule(
           'clip-path',

src/Progress/Progress.stories.js renamed to src/Progress/Progress.stories.tsx

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

src/Progress/Progress.js renamed to src/Progress/Progress.tsx

@@ -1,10 +1,23 @@
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
-import propTypes from 'prop-types';
-
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import styled, { css } from 'styled-components';
 
-import { StyledCutout } from '../Cutout/Cutout';
 import { blockSizes } from '../common/system';
+import { StyledCutout } from '../Cutout/Cutout';
+import { CommonStyledProps } from '../types';
+
+type ProgressProps = {
+  hideValue?: boolean;
+  shadow?: boolean;
+  value?: number;
+  variant?: 'default' | 'tile';
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
 
 const Wrapper = styled.div`
   display: inline-block;
@@ -42,7 +55,7 @@ const WhiteBar = styled.div`
   color: ${({ theme }) => theme.materialText};
 `;
 
-const BlueBar = styled.div`
+const BlueBar = styled.div<Required<Pick<ProgressProps, 'value'>>>`
   position: absolute;
   top: 2px;
   left: 2px;
@@ -79,53 +92,45 @@ const Tile = styled.span`
   border-style: solid;
 `;
 
-const Progress = forwardRef(function Progress(props, ref) {
-  const { value, variant, shadow, hideValue, ...otherProps } = props;
+const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(
+  {
+    hideValue = false,
+    shadow = true,
+    value = 0,
+    variant = 'default',
+    ...otherProps
+  },
+  ref
+) {
   const displayValue = hideValue ? null : `${value}%`;
 
-  const progressProps = {};
-  if (value !== undefined) {
-    progressProps['aria-valuenow'] = Math.round(value);
-  }
-
-  const tilesWrapperRef = useRef();
-  const savedCallback = useRef();
-  const [tilesNumber, setTilesNumber] = useState(0);
+  const tilesWrapperRef = useRef<HTMLDivElement | null>(null);
+  const [tiles, setTiles] = useState([]);
 
   // TODO debounce this function
-  function updateTilesNumber() {
-    if (tilesWrapperRef.current) {
-      const progressWidth =
-        tilesWrapperRef.current.getBoundingClientRect().width;
-      const newTilesNumber = Math.round(
-        ((value / 100) * progressWidth) / tileWidth
-      );
-      setTilesNumber(newTilesNumber);
+  const updateTilesNumber = useCallback(() => {
+    if (!tilesWrapperRef.current) {
+      return;
     }
-  }
-  useEffect(() => {
-    savedCallback.current = updateTilesNumber;
-  });
+    const progressWidth = tilesWrapperRef.current.getBoundingClientRect().width;
+    const newTilesNumber = Math.round(
+      ((value / 100) * progressWidth) / tileWidth
+    );
+    setTiles(Array.from({ length: newTilesNumber }));
+  }, [value]);
+
   useEffect(() => {
-    function update() {
-      savedCallback.current();
-    }
+    updateTilesNumber();
 
-    // then listen on window resize to recalculate number of tiles
-    window.addEventListener('resize', update);
-    return () => window.removeEventListener('resize', update);
-  }, []);
+    window.addEventListener('resize', updateTilesNumber);
+    return () => window.removeEventListener('resize', updateTilesNumber);
+  }, [updateTilesNumber]);
 
-  // recalculate number of tiles when value changes
-  useEffect(() => {
-    savedCallback.current();
-  }, [value]);
   return (
     <Wrapper
-      // TODO what to do with ref from forwardRef ?
+      aria-valuenow={value !== undefined ? Math.round(value) : undefined}
       ref={ref}
       role='progressbar'
-      {...progressProps}
       {...otherProps}
     >
       <ProgressCutout shadow={shadow}>
@@ -138,30 +143,14 @@ const Progress = forwardRef(function Progress(props, ref) {
           </>
         ) : (
           <TilesWrapper ref={tilesWrapperRef} data-testid='tileProgress'>
-            {Array(tilesNumber)
-              .fill(null)
-              .map((_, index) => (
-                <Tile key={index} />
-              ))}
+            {tiles.map((_, index) => (
+              <Tile key={index} />
+            ))}
           </TilesWrapper>
         )}
       </ProgressCutout>
     </Wrapper>
   );
 });
 
-Progress.defaultProps = {
-  value: 0,
-  shadow: true,
-  variant: 'default',
-  hideValue: false
-};
-
-Progress.propTypes = {
-  value: propTypes.number,
-  shadow: propTypes.bool,
-  variant: propTypes.oneOf(['default', 'tile']),
-  hideValue: propTypes.bool
-};
-
-export default Progress;
+export { Progress, ProgressProps };

src/index.ts

@@ -21,7 +21,7 @@ export { default as ListItem } from './ListItem/ListItem';
 export { default as LoadingIndicator } from './LoadingIndicator/LoadingIndicator';
 export { default as NumberField } from './NumberField/NumberField';
 export * from './Panel/Panel';
-export { default as Progress } from './Progress/Progress';
+export * from './Progress/Progress';
 export * from './Radio/Radio';
 export * from './Select/Select';
 export { default as Slider } from './Slider/Slider';