Reduce any/eslint warnings (#671)

* Add react import to stories * More fixes for linting * More fixes * Even more, 600ish now * Fixesx
sussexstudent · Dec 4, 2019 · 43b837f · 43b837f
1 parent 6665754
commit 43b837f
Show file tree

Hide file tree

Showing 171 changed files with 467 additions and 426 deletions.
diff --git a/packages/basil/src/Accordion/Accordion.stories.tsx b/packages/basil/src/Accordion/Accordion.stories.tsx
@@ -1,5 +1,7 @@
+import React from 'react';
+
 import { Accordion } from './index';
 
 export default { title: 'Navigation|Accordion' };
-export const Closed = () => <Accordion isOpen={false} />;
-export const Open = () => <Accordion isOpen={true} />;
+export const Closed: React.FC = () => <Accordion isOpen={false} />;
+export const Open: React.FC = () => <Accordion isOpen={true} />;
diff --git a/packages/basil/src/Accordion/index.tsx b/packages/basil/src/Accordion/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-interface IProps {
+interface AccordionProps {
   isOpen: boolean;
 }
 
-export const Accordion: React.FC<IProps> = ({ isOpen }) => {
+export const Accordion: React.FC<AccordionProps> = ({ isOpen }) => {
   return (
     <ul className="ModalAccordion">
       <li className="ModalAccordion__item">

diff --git a/packages/basil/src/BackBar/BackBar.stories.tsx b/packages/basil/src/BackBar/BackBar.stories.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { BackBar } from '../../../website/src/components/BackBar/index';
 
 export default { title: 'Navigation|BackBar' };

diff --git a/packages/basil/src/BrandColors/BrandColors.stories.tsx b/packages/basil/src/BrandColors/BrandColors.stories.tsx
@@ -1,12 +1,14 @@
+import React from 'react';
+
 import { BrandColorCard } from './index';
 import { COLORS } from '../style';
 
 export default { title: 'System|Brand Color' };
 
-export const AllColors = () => (
+export const AllColors: React.FC = () => (
   <div>
     {Object.entries(COLORS).map(([name, color]) => (
-      <BrandColorCard color={color} name={name} />
+      <BrandColorCard key={color} color={color} name={name} />
     ))}
   </div>
 );
diff --git a/packages/basil/src/BreadcrumbBar/BreadcrumbBar.stories.tsx b/packages/basil/src/BreadcrumbBar/BreadcrumbBar.stories.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { BreadcrumbBar } from '../../../website/src/components/BreadcrumbBar/index';
 
 const crumbs = [
@@ -17,4 +19,4 @@ const crumbs = [
 
 export default { title: 'Navigation|BreadcrumbBar' };
 
-export const normal = () => <BreadcrumbBar>{crumbs}</BreadcrumbBar>;
+export const normal: React.FC = () => <BreadcrumbBar>{crumbs}</BreadcrumbBar>;
diff --git a/packages/basil/src/BrickWall/BrickWall.stories.tsx b/packages/basil/src/BrickWall/BrickWall.stories.tsx
@@ -1,6 +1,8 @@
+import React from 'react';
+
 export default { title: 'Navigation|Brick Wall' };
 
-export const Default = () => (
+export const Default: React.FC = () => (
   <ul className="BrickWall List--reset">
     <li className="BrickWall__item">
       <button className="BrickWall__anchor" type="button">

diff --git a/packages/basil/src/Button/Button.stories.tsx b/packages/basil/src/Button/Button.stories.tsx
@@ -1,32 +1,34 @@
+import React from 'react';
+
 import { Button } from './index';
 
 export default { title: 'Form|Button' };
 
-export const Default = () => (
+export const Default: React.FC = () => (
   <Button className="Button" href="#">
     Default button
   </Button>
 );
 
-export const EndOfCard = () => (
+export const EndOfCard: React.FC = () => (
   <Button className="Button Button--endOfCard" href="#">
     Default button
   </Button>
 );
 
-export const Start = () => (
+export const Start: React.FC = () => (
   <Button className="Button Button--start" href="#">
     Start button
   </Button>
 );
 
-export const Danger = () => (
+export const Danger: React.FC = () => (
   <Button className="Button Button--color-red" href="#">
     Red button
   </Button>
 );
 
-export const Confirm = () => (
+export const Confirm: React.FC = () => (
   <Button className="Button Button--color-green" href="#">
     Green button
   </Button>

diff --git a/packages/basil/src/Button/index.tsx b/packages/basil/src/Button/index.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import { css } from '@emotion/core';
 
-interface IProps {
+interface ButtonProps {
   href: string;
-  children: any;
   className?: string;
 }
 
-export const Button: React.FC<IProps> = ({ href, children, className }) => {
+export const Button: React.FC<ButtonProps> = ({
+  href,
+  children,
+  className,
+}) => {
   return (
     <a href={href} className={className} css={css({ display: 'block' })}>
       {children}

diff --git a/packages/basil/src/ContentCard/ContentCard.stories.tsx b/packages/basil/src/ContentCard/ContentCard.stories.tsx
@@ -1,15 +1,17 @@
+import React from 'react';
+
 import { ContentCard } from './index';
 
 export default { title: 'ContentCard' };
 
-export const Standard = () => (
+export const Standard: React.FC = () => (
   <ContentCard>
     <h1>Hello there</h1>
     <h2>This is a content card with content inside.</h2>
   </ContentCard>
 );
 
-export const Error = () => (
+export const Error: React.FC = () => (
   <ContentCard className="ContentCard__error-message">
     <span>This is an error message in a content card</span>
   </ContentCard>

diff --git a/packages/basil/src/ContentCard/index.tsx b/packages/basil/src/ContentCard/index.tsx
@@ -13,7 +13,6 @@ export const ContentCardContent: React.FC = ({ children }) => (
 export const ContentCard: React.FC<ContentCardProps> = ({
   anchor = undefined,
   children,
-  bleed = false,
   className,
   ...props
 }) => (

diff --git a/packages/basil/src/ContentNavigation/ContentNavigation.stories.tsx b/packages/basil/src/ContentNavigation/ContentNavigation.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { ContentNavigation } from '../../../website/src/components/ContentNavigation/index';
 import slugify from '@ussu/common/src/libs/slugify';
 

diff --git a/packages/basil/src/CookieMessage/CookieMessage.stories.tsx b/packages/basil/src/CookieMessage/CookieMessage.stories.tsx
@@ -1,5 +1,6 @@
+import React from 'react';
 import { CookieMessage } from '../../../website/src/components/CookieMessage/index';
 
 export default { title: 'Page|CookieMessage' };
 
-export const Default = () => <CookieMessage />;
+export const Default: React.FC = () => <CookieMessage />;
diff --git a/packages/basil/src/CopyToClipboard/CopyToClipboard.stories.tsx b/packages/basil/src/CopyToClipboard/CopyToClipboard.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { CopyToClipboardButton } from '../../../website/src/components/CopyToClipboardButton/index';
 
 export default { title: 'Utils|Copy to clipboard' };

diff --git a/packages/basil/src/DeckChair/Deckchair.stories.tsx b/packages/basil/src/DeckChair/Deckchair.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import React from 'react';
 import { Deckchair } from '../../../website/src/components/Deckchair/index';
 
 export default { title: 'Deckchair' };

diff --git a/packages/basil/src/ErrorState/ErrorState.stories.tsx b/packages/basil/src/ErrorState/ErrorState.stories.tsx
@@ -1,7 +1,8 @@
+import React from 'react';
 import { ErrorState } from '../../../website/src/components/ErrorState/index';
 
 export default { title: 'Utils|ErrorState' };
-export const Standard = () => (
+export const Standard: React.FC = () => (
   <div>
     <ErrorState />
   </div>

diff --git a/packages/basil/src/Footer/Footer.stories.tsx b/packages/basil/src/Footer/Footer.stories.tsx
@@ -1,5 +1,6 @@
+import React from 'react';
 import { Footer } from '../../../website/src/components/Footer/index';
 
 export default { title: 'Page|Footer' };
 
-export const Standard = () => <Footer />;
+export const Standard: React.FC = () => <Footer />;
diff --git a/packages/basil/src/Heading/Heading.stories.tsx b/packages/basil/src/Heading/Heading.stories.tsx
@@ -1,8 +1,9 @@
+import React from 'react';
 import { Heading, HeadingLevel } from '../../../website/src/components/Heading';
 
 export default { title: 'Typography|Headings' };
 
-export const Default = () => (
+export const Default: React.FC = () => (
   <div>
     <Heading level={HeadingLevel.h1}>This is a level 1 heading </Heading>
     <hr></hr>

diff --git a/packages/basil/src/HomepageSplash/HomepageSplash.stories.tsx b/packages/basil/src/HomepageSplash/HomepageSplash.stories.tsx
@@ -1,5 +1,6 @@
+import React from 'react';
 import { HomepageSplash } from '../../../website/src/components/HomepageSplash/index';
 
 export default { title: 'Homepage Splash' };
 
-export const Standard = () => <HomepageSplash />;
+export const Standard: React.FC = () => <HomepageSplash />;
diff --git a/packages/basil/src/HoverTapTooltip.stories.tsx/HoverTapTooltip.stories.tsx b/packages/basil/src/HoverTapTooltip.stories.tsx/HoverTapTooltip.stories.tsx
@@ -1,8 +1,9 @@
+import React from 'react';
 import { HoverTapTooltip } from '../../../website/src/components/HoverTapToolTip/index';
 
 export default { title: 'Utils|HoverTapTooltip' };
 
-export const Default = () => (
+export const Default: React.FC = () => (
   <div>
     <h1>Tooltip demo</h1>
 

diff --git a/packages/basil/src/Icons/Icons.stories.tsx b/packages/basil/src/Icons/Icons.stories.tsx
@@ -1,9 +1,11 @@
+import React from 'react';
+
 import { CrossIcon } from '../../../website/src/components/CrossIcon';
 import { MenuIcon } from '../../../website/src/components/MenuIcon';
 import { SearchIcon } from '../../../website/src/components/SearchIcon';
 
 export default { title: 'Utils|Icons' };
 
-export const Search = () => <SearchIcon />;
-export const Menu = () => <MenuIcon />;
-export const Cross = () => <CrossIcon />;
+export const Search: React.FC = () => <SearchIcon />;
+export const Menu: React.FC = () => <MenuIcon />;
+export const Cross: React.FC = () => <CrossIcon />;
diff --git a/packages/basil/src/InternalAppLink/InternalAppLink.stories.tsx b/packages/basil/src/InternalAppLink/InternalAppLink.stories.tsx
@@ -1,7 +1,8 @@
+import React from 'react';
 import { InternalAppLink } from '../../../website/src/components/InternalAppLink/index';
 
 export default { title: 'Utils|Internal App Link' };
 
-export const Standard = () => (
+export const Standard: React.FC = () => (
   <InternalAppLink to="#">Test internal app link</InternalAppLink>
 );
diff --git a/packages/basil/src/LoadableLoading/LoadableLoading.stories.tsx b/packages/basil/src/LoadableLoading/LoadableLoading.stories.tsx
@@ -1,19 +1,20 @@
+import React from 'react';
 import { LoadableLoading } from '../../../website/src/components/LoadableLoading/index';
 
 export default { title: 'Utils|Module Loader' };
 
-export const ErrorState = () => (
+export const ErrorState: React.FC = () => (
   <LoadableLoading
     error={new Error('failure')}
     timedOut={false}
     pastDelay={false}
   />
 );
 
-export const TimeOutState = () => (
+export const TimeOutState: React.FC = () => (
   <LoadableLoading error={null} timedOut={true} pastDelay={false} />
 );
 
-export const PastDelayState = () => (
+export const PastDelayState: React.FC = () => (
   <LoadableLoading error={null} timedOut={false} pastDelay={true} />
 );
diff --git a/packages/basil/src/Loader/Loader.stories.tsx b/packages/basil/src/Loader/Loader.stories.tsx
@@ -1,6 +1,7 @@
+import React from 'react';
 import { Loader } from '../../../website/src/components/Loader';
 
 export default { title: 'Utils|Loader' };
 
-export const Light = () => <Loader />;
-export const Dark = () => <Loader dark />;
+export const Light: React.FC = () => <Loader />;
+export const Dark: React.FC = () => <Loader dark />;
diff --git a/packages/basil/src/LokiHeader/LokiHeader.stories.tsx b/packages/basil/src/LokiHeader/LokiHeader.stories.tsx
@@ -1,4 +1,5 @@
+import React from 'react';
 import { LokiHeader } from '../../../website/src/components/LokiHeader/index';
 
 export default { title: 'Page|LokiHeader' };
-export const Standard = () => <LokiHeader />;
+export const Standard: React.FC = () => <LokiHeader />;
diff --git a/packages/basil/src/LokiMenu/LokiMenu.stories.tsx b/packages/basil/src/LokiMenu/LokiMenu.stories.tsx
@@ -1,5 +1,6 @@
+import React from 'react';
 import { LokiMenu } from '../../../website/src/components/LokiMenu/index';
 
 export default { title: 'Page|LokiMenu' };
 
-export const Standard = () => <LokiMenu />;
+export const Standard: React.FC = () => <LokiMenu />;
diff --git a/packages/basil/src/LokiSideMenu/LokiSideMenu.stories.tsx b/packages/basil/src/LokiSideMenu/LokiSideMenu.stories.tsx
@@ -1,6 +1,7 @@
+import React from 'react';
 import { LokiSideMenu } from '../../../website/src/components/LokiSideMenu/index';
 
 export default { title: 'Page|LokiSideMenu' };
-export const Closed = () => (
+export const Closed: React.FC = () => (
   <LokiSideMenu isOpen={true} onBackdropClick={() => function() {}} />
 );
diff --git a/packages/basil/src/MobileFooterTreats/MobileFooterTreats.stories.tsx b/packages/basil/src/MobileFooterTreats/MobileFooterTreats.stories.tsx
@@ -1,9 +1,10 @@
+import React from 'react';
 import { SocialMenu } from '../../../website/src/components/SocialMenu';
 import { css } from '@emotion/core';
 
 export default { title: 'Page|Mobile Footer Treats' };
 
-export const Default = () => (
+export const Default: React.FC = () => (
   <div className="MobileFooterTreats" css={css({ display: 'block' })}>
     <div className="MobileFooterTreats__social">
       <SocialMenu mobile />

diff --git a/packages/basil/src/Modal/Modal.stories.tsx b/packages/basil/src/Modal/Modal.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Modal } from '../../../website/src/components/Modal';
 
 export default { title: 'Modal' };

diff --git a/packages/basil/src/NewsList/NewsBlock.stories.tsx b/packages/basil/src/NewsList/NewsBlock.stories.tsx
@@ -1,8 +1,9 @@
+import React from 'react';
 import { NewsBlock } from '../../../website/src/components/NewsList/NewsBlock';
 
 export default { title: 'NewsBlock' };
 
-export const Standard = () => (
+export const Standard: React.FC = () => (
   <NewsBlock
     item={{
       id: 2,

diff --git a/packages/basil/src/NewsletterSignup/NewsletterSignup.stories.tsx b/packages/basil/src/NewsletterSignup/NewsletterSignup.stories.tsx
@@ -1,5 +1,6 @@
+import React from 'react';
 import { NewsletterSignup } from '../../../website/src/components/NewsletterSignup/index';
 
 export default { title: 'NewsletterSignup' };
 
-export const Default = () => <NewsletterSignup />;
+export const Default: React.FC = () => <NewsletterSignup />;
diff --git a/packages/basil/src/OneImage/OneImage.stories.tsx b/packages/basil/src/OneImage/OneImage.stories.tsx
@@ -1,11 +1,13 @@
+import React from 'react';
+
 import {
   AspectRatio,
   OneImage,
 } from '@ussu/website/src/components/OneImage/index';
 
 export default { title: 'Utils|OneImage' };
 
-export const r16by9 = () => (
+export const r16by9: React.FC = () => (
   <OneImage
     aspectRatio={AspectRatio.r16by9}
     src="asset/News/6412/unnamed.jpg"
@@ -14,7 +16,7 @@ export const r16by9 = () => (
   />
 );
 
-export const r1by1 = () => (
+export const r1by1: React.FC = () => (
   <OneImage
     aspectRatio={AspectRatio.r1by1}
     src="asset/News/6412/unnamed.jpg"
@@ -23,15 +25,15 @@ export const r1by1 = () => (
   />
 );
 
-export const r20by9 = () => (
+export const r20by9: React.FC = () => (
   <OneImage
     aspectRatio={AspectRatio.r20by9}
     src="asset/News/6412/unnamed.jpg"
     alt="Alt text"
     mslResource
   />
 );
-export const r3by4 = () => (
+export const r3by4: React.FC = () => (
   <OneImage
     aspectRatio={AspectRatio.r3by4}
     src="asset/News/6412/unnamed.jpg"