feat(counter): convert to TypeScript and export types

Author: WesSouza

src/Counter/Counter.js

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

src/Counter/Counter.mdx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { renderWithTheme } from '../../test/utils';
 
-import Counter from './Counter';
+import { Counter } from './Counter';
 
 describe('<Counter />', () => {
   it('should render', () => {
     const { container } = renderWithTheme(<Counter />);
-    const counter = container.firstChild;
+    const counter = container.firstElementChild;
 
     expect(counter).toBeInTheDocument();
   });
@@ -15,15 +15,17 @@ describe('<Counter />', () => {
     const { container } = renderWithTheme(
       <Counter style={{ backgroundColor: 'papayawhip' }} />
     );
-    const counter = container.firstChild;
+    const counter = container.firstElementChild;
 
     expect(counter).toHaveAttribute('style', 'background-color: papayawhip;');
   });
 
   it('should handle custom props', () => {
-    const customProps = { title: 'potatoe' };
+    const customProps: React.HTMLAttributes<HTMLDivElement> = {
+      title: 'potatoe'
+    };
     const { container } = renderWithTheme(<Counter {...customProps} />);
-    const counter = container.firstChild;
+    const counter = container.firstElementChild;
 
     expect(counter).toHaveAttribute('title', 'potatoe');
   });
@@ -33,18 +35,18 @@ describe('<Counter />', () => {
       const { container } = renderWithTheme(
         <Counter value={32} minLength={7} />
       );
-      const counter = container.firstChild;
+      const counter = container.firstElementChild;
 
-      expect(counter.childElementCount).toBe(7);
+      expect(counter && counter.childElementCount).toBe(7);
     });
 
     it('value length takes priority if bigger than minLength', () => {
       const { container } = renderWithTheme(
         <Counter value={1234} minLength={2} />
       );
-      const counter = container.firstChild;
+      const counter = container.firstElementChild;
 
-      expect(counter.childElementCount).toBe(4);
+      expect(counter && counter.childElementCount).toBe(4);
     });
   });
 });

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { useState } from 'react';
+import { Button, Counter, Panel } from 'react95';
 import styled from 'styled-components';
 
-import { Counter, Panel, Button } from 'react95';
-
 const Wrapper = styled.div`
   padding: 5rem;
   background: ${({ theme }) => theme.desktopBackground};
@@ -23,7 +23,7 @@ export default {
   title: 'Counter',
   component: Counter,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Counter>;
 
 export function Default() {
   const [count, setCount] = useState(13);

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

@@ -0,0 +1,45 @@
+import React, { forwardRef, useMemo } from 'react';
+import styled from 'styled-components';
+
+import { createWellBorderStyles } from '../common';
+import { CommonStyledProps, Sizes } from '../types';
+import { Digit } from './Digit';
+
+type CounterProps = {
+  minLength?: number;
+  size?: Sizes | 'xl';
+  value?: number;
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
+
+const CounterWrapper = styled.div`
+  ${createWellBorderStyles(true)}
+  display: inline-flex;
+  background: #000000;
+`;
+
+const pixelSizes = {
+  sm: 1,
+  md: 2,
+  lg: 3,
+  xl: 4
+};
+
+const Counter = forwardRef<HTMLDivElement, CounterProps>(function Counter(
+  { value = 0, minLength = 3, size = 'md', ...otherProps },
+  ref
+) {
+  const digits = useMemo(
+    () => value.toString().padStart(minLength, '0').split(''),
+    [minLength, value]
+  );
+  return (
+    <CounterWrapper ref={ref} {...otherProps}>
+      {digits.map((digit, i) => (
+        <Digit digit={digit} pixelSize={pixelSizes[size]} key={i} />
+      ))}
+    </CounterWrapper>
+  );
+});
+
+export { Counter, CounterProps };

src/Counter/Counter.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
-import propTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
 import { createHatchedBackground } from '../common';
+import { CommonStyledProps } from '../types';
 
-const DigitWrapper = styled.div`
+type DigitProps = {
+  pixelSize?: number;
+  digit?: number | string;
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
+
+const DigitWrapper = styled.div<Required<Pick<DigitProps, 'pixelSize'>>>`
   position: relative;
   --react95-digit-primary-color: #ff0102;
   --react95-digit-secondary-color: #740201;
@@ -167,8 +173,8 @@ const digitActiveSegments = [
   [1, 1, 1, 1, 1, 0, 1] // 9
 ];
 
-function Digit({ digit, pixelSize, ...otherProps }) {
-  const segmentClasses = digitActiveSegments[digit].map((isActive, i) =>
+function Digit({ digit = 0, pixelSize = 2, ...otherProps }: DigitProps) {
+  const segmentClasses = digitActiveSegments[Number(digit)].map((isActive, i) =>
     isActive ? `${segments[i]} active` : segments[i]
   );
   return (
@@ -180,14 +186,4 @@ function Digit({ digit, pixelSize, ...otherProps }) {
   );
 }
 
-Digit.defaultProps = {
-  pixelSize: 2,
-  digit: 0
-};
-
-Digit.propTypes = {
-  pixelSize: propTypes.number,
-  digit: propTypes.oneOfType([propTypes.number, propTypes.string])
-};
-
-export default Digit;
+export { Digit, DigitProps };

src/Counter/Digit.js renamed to src/Counter/Digit.tsx

@@ -10,7 +10,7 @@ export * from './Bar/Bar';
 export { default as Button } from './Button/Button';
 export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as ColorInput } from './ColorInput/ColorInput';
-export { default as Counter } from './Counter/Counter';
+export * from './Counter/Counter';
 export { default as Cutout } from './Cutout/Cutout';
 export { default as Desktop } from './Desktop/Desktop';
 export * from './Divider/Divider';