From 19613222f94d4add5f250f25cfbf41cb465e394a Mon Sep 17 00:00:00 2001 From: Rodney Lab Date: Thu, 9 Dec 2021 07:38:04 +0000 Subject: [PATCH] =?UTF-8?q?style(demos/narcissus-astro):=20=F0=9F=9B=81=20?= =?UTF-8?q?linting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/AboutCard.tsx | 7 +- .../src/components/BannerImage.tsx | 8 +-- .../src/components/BlogPostSummary.tsx | 7 +- .../src/components/BlogRoll.tsx | 6 +- demos/narcissus-astro/src/components/Card.tsx | 5 +- .../src/components/CommentForm.tsx | 19 +++--- .../src/components/Comments.tsx | 5 +- .../src/components/ContactsCard.tsx | 9 +-- .../src/components/ExternalLink.tsx | 4 +- .../src/components/Layout/Footer.tsx | 13 ++-- .../src/components/Layout/Header.tsx | 8 +-- .../src/components/Layout/RodneyLabCredit.tsx | 65 ++++++++++--------- .../src/components/Layout/index.tsx | 8 +-- .../src/components/MessageForm.tsx | 8 +-- .../src/components/PostViewsLikes.tsx | 7 +- .../src/components/PostViewsLikesPure.tsx | 12 ++-- .../src/components/SocialIcons.tsx | 41 ++++++++---- .../src/components/TextArea.tsx | 17 +++-- .../src/components/TextInputField.tsx | 14 ++-- 19 files changed, 125 insertions(+), 138 deletions(-) diff --git a/demos/narcissus-astro/src/components/AboutCard.tsx b/demos/narcissus-astro/src/components/AboutCard.tsx index 20b8cdc..8a712c4 100644 --- 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 = function AboutCard() { +const AboutCard = function AboutCard(): JSX.Element { return (

diff --git a/demos/narcissus-astro/src/components/BannerImage.tsx b/demos/narcissus-astro/src/components/BannerImage.tsx index 7969cd5..c04bb1c 100644 --- 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 = 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 (
diff --git a/demos/narcissus-astro/src/components/BlogPostSummary.tsx b/demos/narcissus-astro/src/components/BlogPostSummary.tsx index 37e080e..e00700b 100644 --- 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,7 +24,7 @@ interface BlogPostSummaryProps { comments: number; } -const BlogPostSummary: FC = function BlogPostSummary({ +const BlogPostSummary = function BlogPostSummary({ postTitle, datePublished, seoMetaDescription, @@ -33,7 +32,7 @@ const BlogPostSummary: FC = function BlogPostSummary({ 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 index 9e23e67..ee72584 100644 --- 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 = 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 index dfa4dd1..708f211 100644 --- 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 index 9c04e57..ba663e0 100644 --- 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 = function CommentForm({ slug }) { +const CommentForm = function CommentForm({ slug }: CommentFormProps): JSX.Element { const [successfulCommentSubmission, setSuccessfulCommentSubmission] = useState(false); const [submitting, setSubmitting] = useState(false); const { @@ -187,10 +184,10 @@ const CommentForm: FC = function CommentForm({ slug }) { ); }; -const ThemeWrapper: FC<{}> = function ThemeWrapper() { +const ThemeWrapper = function ThemeWrapper({ slug }: CommentFormProps): JSX.Element { return ( - + ); }; diff --git a/demos/narcissus-astro/src/components/Comments.tsx b/demos/narcissus-astro/src/components/Comments.tsx index bc9c027..136517f 100644 --- 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 = function Comments({ comments }) { +const Comments = function Comments({ comments }: CommentsProps): JSX.Element { return (

Visitor Comments

diff --git a/demos/narcissus-astro/src/components/ContactsCard.tsx b/demos/narcissus-astro/src/components/ContactsCard.tsx index a0eb8d1..f674667 100644 --- 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 = function ContactsCard() { +const ContactsCard = function ContactsCard(): JSX.Element { const { state: { theme }, } = useTheme(); @@ -93,7 +90,7 @@ const ContactsCard: FC = function ContactsCard() { ); }; -const ThemeWrapper: FC<{}> = function ThemeWrapper() { +const ThemeWrapper = function ThemeWrapper(): JSX.Element { return ( diff --git a/demos/narcissus-astro/src/components/ExternalLink.tsx b/demos/narcissus-astro/src/components/ExternalLink.tsx index 34e4600..862bf85 100644 --- 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 index 333a633..52458b8 100644 --- 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 = 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 index b7e6a4f..bc52385 100644 --- 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 = 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 index 3588969..c0f5386 100644 --- 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<{}> = () => ( -
- A project by{' '} - - Rodney Lab Logo - - - RODNEY LAB - - . -
-); +const RodneyLabCredit: JSX.Element = function RodneyLabCredit() { + return ( +
+ A project by{' '} + + Rodney Lab Logo + + + RODNEY LAB + + . +
+ ); +}; -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 index 9c34dbd..958aa27 100644 --- 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 = function Layout({ children, slug }): ReactElement { +const Layout: FC = function Layout({ children, slug }) { const { state: { theme }, } = useTheme(); @@ -45,7 +43,7 @@ const Layout: FC = function Layout({ children, slug }): ReactElemen const ThemeWrapper: FC = function ThemeWrapper({ children, slug }) { return ( - {children} + {children} ); }; diff --git a/demos/narcissus-astro/src/components/MessageForm.tsx b/demos/narcissus-astro/src/components/MessageForm.tsx index c55ff6c..9a1f35f 100644 --- 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(false); const [submitting, setSubmitting] = useState(false); const { @@ -204,7 +204,7 @@ const MessageForm: FC<{}> = function MessageForm() { ); }; -const ThemeWrapper: FC<{}> = function ThemeWrapper() { +const ThemeWrapper = function ThemeWrapper(): JSX.Element { return ( diff --git a/demos/narcissus-astro/src/components/PostViewsLikes.tsx b/demos/narcissus-astro/src/components/PostViewsLikes.tsx index 3563377..c3f7569 100644 --- a/demos/narcissus-astro/src/components/PostViewsLikes.tsx +++ b/demos/narcissus-astro/src/components/PostViewsLikes.tsx @@ -1,7 +1,6 @@ -import type { FC } from 'react'; -import React from 'react'; import PostViewsLikesPure from '$components/PostViewsLikesPure'; import website from '$configuration/website'; +import type { JSX } from 'react'; interface PostViewsLikesProps { likes: number; @@ -13,7 +12,7 @@ interface PostViewsLikesProps { interactive: boolean; } -const PostViewsLikes: FC = function PostViewsLikes({ +const PostViewsLikes = function PostViewsLikes({ likes, views, slug, @@ -21,7 +20,7 @@ const PostViewsLikes: FC = function PostViewsLikes({ containerClass = undefined, contentClass = undefined, interactive = true, -}) { +}: PostViewsLikesProps): JSX.Element { const { workerUrl } = website; async function getViewsLikes(): Promise<{ likes: number; views: number }> { diff --git a/demos/narcissus-astro/src/components/PostViewsLikesPure.tsx b/demos/narcissus-astro/src/components/PostViewsLikesPure.tsx index 36af01f..5c97e8f 100644 --- a/demos/narcissus-astro/src/components/PostViewsLikesPure.tsx +++ b/demos/narcissus-astro/src/components/PostViewsLikesPure.tsx @@ -1,5 +1,5 @@ -import type { FC } from 'react'; -import React, { useEffect, useLayoutEffect, useState } from 'react'; +import type { JSX } from 'react'; +import { useEffect, useLayoutEffect, useState } from 'react'; import website from '$configuration/website'; import { container, @@ -25,7 +25,7 @@ interface PostViewsLikesPureProps { interactive: boolean; } -const PostViewsLikesPure: FC = function PostViewsLikesPure({ +const PostViewsLikesPure = function PostViewsLikesPure({ likes, views, slug, @@ -33,7 +33,7 @@ const PostViewsLikesPure: FC = function PostViewsLikesP containerClass = undefined, contentClass = undefined, interactive = true, -}) { +}: PostViewsLikesPureProps): JSX.Element { const { dispatch, state: { liked, viewed }, @@ -252,7 +252,7 @@ const PostViewsLikesPure: FC = function PostViewsLikesP ); }; -const LikedViewedWrapper: FC = function LikedViewedWrapper({ +const LikedViewedWrapper = function LikedViewedWrapper({ likes, views, slug, @@ -260,7 +260,7 @@ const LikedViewedWrapper: FC = function LikedViewedWrap containerClass = undefined, contentClass = undefined, interactive = true, -}) { +}: PostViewsLikesPureProps) { return ( = ({ network, width, height, fgColor = 'transparent', bgColor, url }) => ( - -); +} +const SocialIcons = function SocialIcons({ + network, + width, + height, + fgColor, + bgColor, + url, +}: SocialIconsProps): JSX.Element { + return ( + + ); +}; -export { SocialIcons as default }; +SocialIcons.defaultProps = { + fgColor: 'transparent', +}; + +export default SocialIcons; diff --git a/demos/narcissus-astro/src/components/TextArea.tsx b/demos/narcissus-astro/src/components/TextArea.tsx index 5c18884..65df7b6 100644 --- a/demos/narcissus-astro/src/components/TextArea.tsx +++ b/demos/narcissus-astro/src/components/TextArea.tsx @@ -1,12 +1,10 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import type { FC } from 'react'; -import { screenReaderText } from '$styles/styles.css'; import { container, input } from '$components/TextArea.css'; +import { screenReaderText } from '$styles/styles.css'; +import type { JSX } from 'react'; interface TextAreaProps { id: string; - rows: number; + rows?: number; maxLength?: number; pattern?: RegExp; register: () => {}; @@ -17,17 +15,17 @@ interface TextAreaProps { title: string; } -const TextArea: FC = function TextArea({ +const TextArea = function TextArea({ id, - rows = 5, - maxLength = 64, + rows, + maxLength, pattern, placeholder, register, required, errors, title, -}) { +}: TextAreaProps): JSX.Element { return (