style(demos/narcissus-astro): 🛁 linting

rodneylab · Dec 9, 2021 · 1961322 · 1961322
1 parent c55588a
commit 1961322
Show file tree

Hide file tree

Showing 19 changed files with 125 additions and 138 deletions.
diff --git a/demos/narcissus-astro/src/components/AboutCard.tsx b/demos/narcissus-astro/src/components/AboutCard.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import type { FC } from 'react';
+import type { JSX } from 'react';
 import {
   cardContainer,
   cardContent,
@@ -9,9 +8,7 @@ import {
 } from '$components/AboutCard.css';
 import Card from '$components/Card';
 
-interface AboutCardProps {}
-
-const AboutCard: FC<AboutCardProps> = function AboutCard() {
+const AboutCard = function AboutCard(): JSX.Element {
   return (
     <Card containerClass={cardContainer} contentClass={cardContent}>
       <h2 className={summaryHeading}>

diff --git a/demos/narcissus-astro/src/components/BannerImage.tsx b/demos/narcissus-astro/src/components/BannerImage.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import type { FC } from 'react';
-import { container } from './BannerImage.css';
+import { container } from '$components/BannerImage.css';
+import type { JSX } from 'react';
 
 interface BannerImageProps {
   imageData: {
@@ -13,10 +12,9 @@ interface BannerImageProps {
   };
 }
 
-const BannerImage: FC<BannerImageProps> = function BannerImage({ imageData }) {
+const BannerImage = function BannerImage({ imageData }: BannerImageProps): JSX.Element {
   const { alt, width, height, src, sources, placeholder } = imageData;
   const sizes = '(max-width: 672px) calc(100vw - 32px), 672px';
-  console.log('src: ', src);
   return (
     <div className={container}>
       <picture>

diff --git a/demos/narcissus-astro/src/components/BlogPostSummary.tsx b/demos/narcissus-astro/src/components/BlogPostSummary.tsx
@@ -1,6 +1,5 @@
 import dayjs from 'dayjs';
-import React from 'react';
-import type { FC } from 'react';
+import type { JSX } from 'react';
 import { H_ELLIPSIS_ENTITY } from '$constants/entities';
 import {
   container,
@@ -25,15 +24,15 @@ interface BlogPostSummaryProps {
   comments: number;
 }
 
-const BlogPostSummary: FC<BlogPostSummaryProps> = function BlogPostSummary({
+const BlogPostSummary = function BlogPostSummary({
   postTitle,
   datePublished,
   seoMetaDescription,
   slug,
   likes,
   views,
   comments,
-}) {
+}: BlogPostSummaryProps): JSX.Element {
   const handleMouseEnter = (event: MouseEvent) => {
     (event.target as HTMLElement).style.cursor = 'pointer';
   };

diff --git a/demos/narcissus-astro/src/components/BlogRoll.tsx b/demos/narcissus-astro/src/components/BlogRoll.tsx
@@ -1,5 +1,5 @@
-import type { FC } from 'react';
-import React, { useState } from 'react';
+import type { JSX } from 'react';
+import { useState } from 'react';
 import { postSummary } from '$components/BlogRoll.css';
 import { H_ELLIPSIS_ENTITY } from '$constants/entities';
 import BlogPostSummary from '$components/BlogPostSummary';
@@ -17,7 +17,7 @@ interface BlogRollProps {
   }[];
 }
 
-const BlogRoll: FC<BlogRollProps> = function BlogRoll({ initialPosts, posts }) {
+const BlogRoll = function BlogRoll({ initialPosts, posts }: BlogRollProps): JSX.Element {
   const [showPosts, setShowPosts] = useState(initialPosts);
   const displayPosts = useState(posts.slice(0, showPosts));
 

diff --git a/demos/narcissus-astro/src/components/Card.tsx b/demos/narcissus-astro/src/components/Card.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import type { FC, ReactNode } from 'react';
-import { container, content } from './Card.css';
+import type { FC } from 'react';
+import { container, content } from '$components/Card.css';
 
 interface CardProps {
-  children: ReactNode;
   containerClass?: string;
   contentClass?: string;
 }

diff --git a/demos/narcissus-astro/src/components/CommentForm.tsx b/demos/narcissus-astro/src/components/CommentForm.tsx
@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import type { FC } from 'react';
+import Card from '$components/Card';
 import {
   button,
   buttonContainer,
@@ -9,23 +8,21 @@ import {
   formLink,
   heading,
 } from '$components/CommentForm.css';
-import Card from '$components/Card';
-import TextInputField from '$components/TextInputField';
 import TextArea from '$components/TextArea';
-import { ThemeProvider, useTheme } from '$hooks/themeContext';
+import TextInputField from '$components/TextInputField';
 import website from '$configuration/website';
+import { ThemeProvider, useTheme } from '$hooks/themeContext';
+import type { JSX } from 'react';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-// const ssr = import.meta.env.SSR;
-const ssr = typeof window === 'undefined';
-
 interface CommentFormProps {
   slug: string;
 }
 
 const { hcaptchaSitekey, workerUrl } = website;
 
-const CommentForm: FC<CommentFormProps> = function CommentForm({ slug }) {
+const CommentForm = function CommentForm({ slug }: CommentFormProps): JSX.Element {
   const [successfulCommentSubmission, setSuccessfulCommentSubmission] = useState<boolean>(false);
   const [submitting, setSubmitting] = useState<boolean>(false);
   const {
@@ -187,10 +184,10 @@ const CommentForm: FC<CommentFormProps> = function CommentForm({ slug }) {
   );
 };
 
-const ThemeWrapper: FC<{}> = function ThemeWrapper() {
+const ThemeWrapper = function ThemeWrapper({ slug }: CommentFormProps): JSX.Element {
   return (
     <ThemeProvider>
-      <CommentForm />
+      <CommentForm slug={slug} />
     </ThemeProvider>
   );
 };

diff --git a/demos/narcissus-astro/src/components/Comments.tsx b/demos/narcissus-astro/src/components/Comments.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import type { FC, ReactNode } from 'react';
+import type { JSX } from 'react';
 import Card from '$components/Card';
 import {
   authorText,
@@ -21,7 +20,7 @@ interface CommentsProps {
   comments: { created_at: string; author: string; text: string }[];
 }
 
-const Comments: FC<CommentsProps> = function Comments({ comments }) {
+const Comments = function Comments({ comments }: CommentsProps): JSX.Element {
   return (
     <section>
       <h2 id="comments">Visitor Comments</h2>

diff --git a/demos/narcissus-astro/src/components/ContactsCard.tsx b/demos/narcissus-astro/src/components/ContactsCard.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import type { FC } from 'react';
+import type { JSX } from 'react';
 import SocialIcons from '$components/SocialIcons';
 import {
   cardContainer,
@@ -20,9 +19,7 @@ const height = 36;
 const { contactEmail, facebookPageName, telegramUsername, twitterUserId, twitterUsername } =
   website;
 
-interface ContactsCardProps {}
-
-const ContactsCard: FC<ContactsCardProps> = function ContactsCard() {
+const ContactsCard = function ContactsCard(): JSX.Element {
   const {
     state: { theme },
   } = useTheme();
@@ -93,7 +90,7 @@ const ContactsCard: FC<ContactsCardProps> = function ContactsCard() {
   );
 };
 
-const ThemeWrapper: FC<{}> = function ThemeWrapper() {
+const ThemeWrapper = function ThemeWrapper(): JSX.Element {
   return (
     <ThemeProvider>
       <ContactsCard />

diff --git a/demos/narcissus-astro/src/components/ExternalLink.tsx b/demos/narcissus-astro/src/components/ExternalLink.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-import type { FC, ReactNode } from 'react';
+import type { FC } from 'react';
 
 interface ExternalLinkProps {
   'aria-label': string;
-  children: ReactNode;
   href: string;
 }
 

diff --git a/demos/narcissus-astro/src/components/Layout/Footer.tsx b/demos/narcissus-astro/src/components/Layout/Footer.tsx
@@ -1,8 +1,4 @@
-import React from 'react';
-import type { FC } from 'react';
 import SocialNetworkIcon from '$components/Icons/SocialNetwork';
-import website from '$configuration/website';
-import { COPYRIGHT_ENTITY } from '$constants/entities';
 import {
   container,
   content,
@@ -13,12 +9,11 @@ import {
   footerLink,
 } from '$components/Layout/Footer.css';
 import RodneyLabCredit from '$components/Layout/RodneyLabCredit';
+import website from '$configuration/website';
+import { COPYRIGHT_ENTITY } from '$constants/entities';
+import type { JSX } from 'react';
 
-interface FooterProps {
-  slug: string;
-}
-
-const Footer: FC<FooterProps> = function Footer() {
+const Footer = function Footer(): JSX.Element {
   const { facebookPage, githubPage, linkedinProfile, tiktokUsername, twitterUsername } = website;
 
   return (

diff --git a/demos/narcissus-astro/src/components/Layout/Header.tsx b/demos/narcissus-astro/src/components/Layout/Header.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
-import type { FC } from 'react';
+import { useEffect } from 'react';
+import type { JSX } from 'react';
 import { screenReaderText } from '$styles/styles.css';
-import { themeButton, themeButtonContainer } from '$components/Layout/Header.css.ts';
+import { themeButton, themeButtonContainer } from '$components/Layout/Header.css';
 import MoonIcon from '$components/Icons/Moon';
 import SunIcon from '$components/Icons/Sun';
 import {
@@ -20,7 +20,7 @@ interface HeaderProps {
   slug: string;
 }
 
-const Header: FC<HeaderProps> = function Header({ slug }) {
+const Header = function Header({ slug }: HeaderProps): JSX.Element {
   const {
     dispatch,
     state: { theme },

diff --git a/demos/narcissus-astro/src/components/Layout/RodneyLabCredit.tsx b/demos/narcissus-astro/src/components/Layout/RodneyLabCredit.tsx
@@ -1,35 +1,36 @@
-import React from 'react';
-import type { FC } from 'react';
+import type { JSX } from 'react';
 import { container, link, logo, rodneyLabText } from '$components/Layout/RodneyLabCredit.css';
 
-const RodneyLabCredit: FC<{}> = () => (
-  <div className={container}>
-    A project by{' '}
-    <a
-      aria-label="Open the Rodney Lab site"
-      href="https://rodneylab.com/"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <img
-        alt="Rodney Lab Logo"
-        className={logo}
-        src="/assets/rodneylab-logo.png"
-        height="16"
-        width="16"
-      />
-    </a>
-    <a
-      aria-label="Open the Rodney Lab site"
-      className={link}
-      href="https://rodneylab.com/"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <span className={rodneyLabText}>RODNEY LAB</span>
-    </a>
-    .
-  </div>
-);
+const RodneyLabCredit: JSX.Element = function RodneyLabCredit() {
+  return (
+    <div className={container}>
+      A project by{' '}
+      <a
+        aria-label="Open the Rodney Lab site"
+        href="https://rodneylab.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          alt="Rodney Lab Logo"
+          className={logo}
+          src="/assets/rodneylab-logo.png"
+          height="16"
+          width="16"
+        />
+      </a>
+      <a
+        aria-label="Open the Rodney Lab site"
+        className={link}
+        href="https://rodneylab.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span className={rodneyLabText}>RODNEY LAB</span>
+      </a>
+      .
+    </div>
+  );
+};
 
-export { RodneyLabCredit as default };
+export default RodneyLabCredit;
diff --git a/demos/narcissus-astro/src/components/Layout/index.tsx b/demos/narcissus-astro/src/components/Layout/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 // Lato
 // [100,300,400,700,900]
 // [italic,normal]
@@ -11,7 +10,7 @@ import '@fontsource/slabo-13px';
 // [400]
 // [normal]
 import '@fontsource/slabo-27px';
-import type { FC, ReactElement, ReactNode } from 'react';
+import type { FC } from 'react';
 import { ThemeProvider, useTheme } from '$hooks/themeContext';
 import '$styles/normalise.css';
 import '$styles/styles.css';
@@ -22,11 +21,10 @@ import Header from '$components/Layout/Header';
 import { container, main } from '$components/Layout/layout.css';
 
 interface LayoutProps {
-  children: ReactNode;
   slug: string;
 }
 
-const Layout: FC<LayoutProps> = function Layout({ children, slug }): ReactElement {
+const Layout: FC<LayoutProps> = function Layout({ children, slug }) {
   const {
     state: { theme },
   } = useTheme();
@@ -45,7 +43,7 @@ const Layout: FC<LayoutProps> = function Layout({ children, slug }): ReactElemen
 const ThemeWrapper: FC<LayoutProps> = function ThemeWrapper({ children, slug }) {
   return (
     <ThemeProvider>
-      <Layout slug={slug}>{children}</Layout>
+      <Layout slug={slug}> {children} </Layout>
     </ThemeProvider>
   );
 };

diff --git a/demos/narcissus-astro/src/components/MessageForm.tsx b/demos/narcissus-astro/src/components/MessageForm.tsx
@@ -1,5 +1,5 @@
-import type { FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import type { JSX } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import website from '$configuration/website';
 import { ThemeProvider, useTheme } from '$hooks/themeContext';
@@ -22,7 +22,7 @@ const ssr = typeof window === 'undefined';
 
 const { hcaptchaSitekey, workerUrl } = website;
 
-const MessageForm: FC<{}> = function MessageForm() {
+const MessageForm = function MessageForm(): JSX.Element {
   const [successfulMessageSubmission, setSuccessfulMessageSubmission] = useState<boolean>(false);
   const [submitting, setSubmitting] = useState<boolean>(false);
   const {
@@ -204,7 +204,7 @@ const MessageForm: FC<{}> = function MessageForm() {
   );
 };
 
-const ThemeWrapper: FC<{}> = function ThemeWrapper() {
+const ThemeWrapper = function ThemeWrapper(): JSX.Element {
   return (
     <ThemeProvider>
       <MessageForm />