feat(anchor): convert to TypeScript and export types

src/Anchor/Anchor.spec.js → src/Anchor/Anchor.spec.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
-import Anchor from './Anchor';
+import { Anchor } from './Anchor';
 
 const defaultProps = {
   children: '',

src/Anchor/Anchor.stories.js → src/Anchor/Anchor.stories.tsx

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

src/Anchor/Anchor.js → src/Anchor/Anchor.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import propTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 
 import styled from 'styled-components';
 
@@ -12,20 +11,19 @@ const StyledAnchor = styled.a`
   }
 `;
 
-const Anchor = React.forwardRef(function Anchor(props, ref) {
-  const { children, ...otherProps } = props;
+interface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: React.ReactNode;
+}
 
+const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function Anchor(
+  { children, ...otherProps }: AnchorProps,
+  ref
+) {
   return (
     <StyledAnchor ref={ref} {...otherProps}>
       {children}
     </StyledAnchor>
   );
 });
 
-Anchor.defaultProps = {};
-
-Anchor.propTypes = {
-  children: propTypes.node.isRequired
-};
-
-export default Anchor;
+export { Anchor, AnchorProps };

src/index.ts

@@ -3,7 +3,7 @@ export { default as styleReset } from './common/styleReset';
 export { createScrollbars } from './common/index';
 
 /* components */
-export { default as Anchor } from './Anchor/Anchor';
+export * from './Anchor/Anchor';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as Bar } from './Bar/Bar';