fix(website): fix types forwardRefs and function (#5)

fix(website): fix types forwardRefs and function

src/components/atoms/InputText/InputText.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import * as colors from '../../../constants/colors';
-import { statusColors } from '../../../constants/colors';
+import { getBorderColorByStatus } from '../../../helpers/utils';
 import { IInput } from '../../types';
 
-export const getBorderColorByStatus = ({ hasError, isValid }: IInput) =>
-  hasError ? statusColors.error : isValid ? statusColors.valid : colors.neutral.neutral75;
-
 const Input = styled.input<IInput>`
   border: 2px solid ${getBorderColorByStatus};
   border-radius: 4px;

src/components/atoms/Link/Link.tsx

@@ -38,7 +38,7 @@ const TargetIcon = (props: ITargetIconProps) => {
   );
 };
 
-const Link = React.forwardRef<HTMLAnchorElement, ILinkProps>((props, ref) => {
+const Link: FC<ILinkProps> = React.forwardRef<HTMLAnchorElement, ILinkProps>((props, ref) => {
   const { children, ...rest } = props;
   return (
     <SLink ref={ref} {...rest}>

src/components/molecules/RadioField/RadioField.tsx

@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from 'react';
 import styled, { keyframes } from 'styled-components';
 import * as colors from '../../../constants/colors';
+import { getBorderColorByStatus } from '../../../helpers/utils';
 import InputLabel from '../../atoms/InputLabel/InputLabel';
-import { getBorderColorByStatus } from '../../atoms/InputText/InputText';
 import SizedContainer from '../../layout/SizedContainer/SizedContainer';
 import { IField, IInputStatus } from '../../types';
 

src/components/organisms/Accordion/AccordionSection/AccordionSection.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { FC } from 'react';
 
-const AccordionSection = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const AccordionSection: FC = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ children, ...rest }, ref) => (
     <div {...rest}>
       <div ref={ref}>{children}</div>

src/components/organisms/Navbar/NavbarLink/NavbarLink.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import styled from 'styled-components';
 import * as colors from '../../../../constants/colors';
 import Chevron from '../../../icons/Chevron/Chevron';
@@ -52,7 +52,7 @@ export interface INavbarLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorE
   open?: boolean;
 }
 
-const NavbarLink = React.forwardRef<HTMLAnchorElement, INavbarLinkProps>(
+const NavbarLink: FC<INavbarLinkProps> = React.forwardRef<HTMLAnchorElement, INavbarLinkProps>(
   ({ active = false, children, open = false, withChevron = false, color = colors.primary.blue500, ...rest }, ref) => (
     <StyledNavbarLink active={active} withChevron={withChevron} color={color} ref={ref} {...rest}>
       {children}

src/helpers/utils.ts

@@ -1 +1,8 @@
+import { IInputStatus } from '../components/types';
+import { statusColors } from '../constants/colors';
+import * as colors from '../constants/colors';
+
 export const mod = (x: number, n: number) => ((x % n) + n) % n;
+
+export const getBorderColorByStatus = ({ hasError, isValid }: IInputStatus) =>
+  hasError ? statusColors.error : isValid ? statusColors.valid : colors.neutral.neutral75;