feat(hourglass): convert to TypeScript and export types

Author: WesSouza

src/Hourglass/Hourglass.js

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

src/Hourglass/Hourglass.mdx

@@ -0,0 +1,34 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { Hourglass } from './Hourglass';
+
+describe('<Hourglass />', () => {
+  it('should render hourglass', () => {
+    const { container } = render(<Hourglass />);
+    const hourglass = container.firstElementChild;
+
+    expect(hourglass).toBeInTheDocument();
+  });
+
+  it('should render correct size', () => {
+    const { container } = render(<Hourglass size='66px' />);
+    const hourglass = container.firstElementChild;
+
+    const computedStyles = hourglass
+      ? window.getComputedStyle(hourglass)
+      : null;
+    expect(computedStyles?.width).toBe('66px');
+    expect(computedStyles?.height).toBe('66px');
+  });
+
+  it('should handle custom props', () => {
+    const customProps: React.HTMLAttributes<HTMLSpanElement> = {
+      title: 'hourglass'
+    };
+    const { container } = render(<Hourglass {...customProps} />);
+    const hourglass = container.firstElementChild;
+
+    expect(hourglass).toHaveAttribute('title', 'hourglass');
+  });
+});

src/Hourglass/Hourglass.spec.js

@@ -1,7 +1,7 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import { Hourglass } from 'react95';
+import { ComponentMeta } from '@storybook/react';
 
 const Wrapper = styled.div`
   padding: 5rem;
@@ -12,7 +12,7 @@ export default {
   title: 'Hourglass',
   component: Hourglass,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Hourglass>;
 
 export function Default() {
   return <Hourglass size={32} />;

src/Hourglass/Hourglass.spec.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { getSize } from '../common/utils';
+import base64hourglass from './base64hourglass';
+
+type HourglassProps = {
+  size?: string | number;
+};
+
+const StyledContainer = styled.span<Required<Pick<HourglassProps, 'size'>>>`
+  display: inline-block;
+  height: ${({ size }) => getSize(size)};
+  width: ${({ size }) => getSize(size)};
+`;
+
+const StyledHourglass = styled.span`
+  display: block;
+  background: ${base64hourglass};
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+`;
+
+const Hourglass = forwardRef<HTMLSpanElement, HourglassProps>(
+  function Hourglass({ size = 30, ...otherProps }, ref) {
+    return (
+      <StyledContainer size={size} ref={ref} {...otherProps}>
+        <StyledHourglass />
+      </StyledContainer>
+    );
+  }
+);
+
+export { Hourglass, HourglassProps };

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

@@ -15,7 +15,7 @@ export { default as Cutout } from './Cutout/Cutout';
 export * from './Desktop/Desktop';
 export * from './Divider/Divider';
 export { default as Fieldset } from './Fieldset/Fieldset';
-export { default as Hourglass } from './Hourglass/Hourglass';
+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';