refactor(components): reorganised the structure of the components keeping things cleaner (nodejs#2921)

Author: ovflowd

gatsby-browser.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactIntlProvider from './src/containers/ReactIntl';
+import ReactIntlProvider from './src/providers/ReactIntl';
 import { defaultLanguage, defaultMessages } from './locales';
 import type { WrapPageElementBrowser } from './src/types';
 

gatsby-ssr.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactIntlProvider from './src/containers/ReactIntl';
+import ReactIntlProvider from './src/providers/ReactIntl';
 import { defaultLanguage, defaultMessages } from './locales';
 import type { WrapPageElementSSR } from './src/types';
 

src/components/Alert/index.module.scss renamed to src/components/ArticleComponents/Alert/index.module.scss

@@ -1,6 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Author component does not render without a username 1`] = `<div />`;
+exports[`Author component does not render without a username 1`] = `
+<div>
+  <li>
+    <a
+      aria-label=" Github - opens in new tab"
+      class="link"
+      href="https://github.com/"
+      rel="noopener noreferrer"
+      style="margin-left: 0px;"
+      target="_blank"
+    >
+      <img
+        alt=""
+        src="https://github.com/.png?size="
+      />
+    </a>
+  </li>
+</div>
+`;
 
 exports[`Author component renders correctly 1`] = `
 <div>

src/components/Alert/index.tsx renamed to src/components/ArticleComponents/Alert/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
+import styles from './index.module.scss';
+
+interface Props {
+  index: number;
+  username: string;
+  size: string;
+}
+
+const Author = ({
+  index,
+  username,
+  size = '64',
+  intl,
+}: Props & WrappedComponentProps) => {
+  // Clean up username and build links.
+  const githubUserName = username.trim();
+  const githubLink = `https://github.com/${githubUserName}`;
+  const githubImgLink = `https://github.com/${githubUserName}.png?size=${size}`;
+
+  // If it's the first author then no margin left.
+  const mleft = index === 0 ? { marginLeft: 0 } : {};
+
+  const translation = intl.formatMessage(
+    { id: 'components.author.githubLinkLabel' },
+    { username }
+  );
+
+  return (
+    <li>
+      <a
+        className={styles.link}
+        href={githubLink}
+        aria-label={translation}
+        key={username}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={mleft}
+      >
+        <img src={githubImgLink} alt="" />
+      </a>
+    </li>
+  );
+};
+
+export default injectIntl(Author);

src/components/Author/__tests__/__snapshots__/index.test.tsx.snap renamed to src/components/ArticleComponents/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import Author from '../../components/Author';
+import Author from './Author';
 import styles from './index.module.scss';
 
 interface Props {
@@ -14,10 +14,9 @@ const AuthorList = ({ authors }: Props): JSX.Element => {
         <FormattedMessage id="containers.authorList.title" />
         <ul>
           {authors.map(
-            (author, i): string | JSX.Element =>
-              author && (
-                <Author index={i} username={author} key={author} size="60" />
-              )
+            (author, i): JSX.Element => (
+              <Author index={i} username={author} key={author} size="60" />
+            )
           )}
         </ul>
       </div>

src/components/Author/__tests__/index.test.tsx renamed to src/components/ArticleComponents/AuthorList/Author/__tests__/index.test.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { highlight, languages } from 'prismjs';
 import { sanitize } from 'isomorphic-dompurify';
 import classnames from 'classnames';
-import { copyTextToClipboard } from '../../util/copyTextToClipboard';
+import { copyTextToClipboard } from '../../../util/copyTextToClipboard';
 import styles from './index.module.scss';
 
 interface Props {

src/components/Author/index.module.scss renamed to src/components/ArticleComponents/AuthorList/Author/index.module.scss

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Pagination from '..';
-import { createPaginationInfo } from '../../../__fixtures__/page';
+import { createPaginationInfo } from '../../../../__fixtures__/page';
 
 describe('Pagination component', () => {
   it('renders links to the next and previous page', () => {

src/components/ArticleComponents/AuthorList/Author/index.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAnglesRight, faAnglesLeft } from '@fortawesome/free-solid-svg-icons';
-import { PaginationInfo } from '../../types';
+import { PaginationInfo } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {

src/containers/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap renamed to src/components/ArticleComponents/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import RecentPosts from '..';
-import { createBlogPageContext } from '../../../__fixtures__/page';
+import { createBlogPageContext } from '../../../../__fixtures__/page';
 
 describe('RecentPosts component', (): void => {
   it('should render correctly', (): void => {

src/containers/AuthorList/__tests__/authors-list.test.tsx renamed to src/components/ArticleComponents/AuthorList/__tests__/authors-list.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import { FormattedMessage } from 'react-intl';
-import { BlogPost } from '../../types';
+import { BlogPost } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {

src/containers/AuthorList/index.module.scss renamed to src/components/ArticleComponents/AuthorList/index.module.scss

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import TableOfContents from '..';
-import { mockTableOfContents } from '../../../__fixtures__/page';
+import { mockTableOfContents } from '../../../../__fixtures__/page';
 
 describe('TOC component', () => {
   it('renders correctly', () => {

src/containers/AuthorList/index.tsx renamed to src/components/ArticleComponents/AuthorList/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'gatsby';
-import { TableOfContentsItem } from '../../types';
+import { TableOfContentsItem } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {

src/components/BlockQuote/index.module.scss renamed to src/components/ArticleComponents/BlockQuote/index.module.scss

@@ -0,0 +1,11 @@
+export { default as Alert } from './Alert';
+export { default as BlockQuote } from './BlockQuote';
+export { default as AuthorList } from './AuthorList';
+export { default as Codebox } from './Codebox';
+export { default as InlineCode } from './Codebox/InlineCode';
+export { default as DataTag } from './DataTag';
+export { default as EditLink } from './EditLink';
+export { default as Pagination } from './Pagination';
+export { default as RecentPosts } from './RecentPosts';
+export { default as Table } from './Table';
+export { default as TableOfContents } from './TableOfContents';

src/components/BlockQuote/index.tsx renamed to src/components/ArticleComponents/BlockQuote/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import BlogAuthor from '..';
-import { BlogPostAuthor } from '../../../types';
+import { BlogPostAuthor } from '../../../../types';
 
 describe('Blog Author component', () => {
   it('renders correctly', () => {

src/components/Codebox/InlineCode.tsx renamed to src/components/ArticleComponents/Codebox/InlineCode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BlogPostAuthor } from '../../types';
-import { getTerminatingString } from '../../util/getTerminatingString';
+import { getTerminatingString } from '../../../util/getTerminatingString';
+import { BlogPostAuthor } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {

src/components/Codebox/__tests__/__snapshots__/index.test.tsx.snap renamed to src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { BlogPost } from '../../../types';
+import { BlogPost } from '../../../../types';
 import BlogCard from '..';
 
 describe('Blog Card component', () => {

src/components/Codebox/__tests__/index.test.tsx renamed to src/components/ArticleComponents/Codebox/__tests__/index.test.tsx

@@ -1,21 +1,21 @@
-import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import React, { Fragment } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
-import { BlogPost } from '../../types';
-import { getTerminatingString } from '../../util/getTerminatingString';
-import { blogPath } from '../../../pathPrefixes';
+import { LocalizedLink as Link } from 'gatsby-theme-i18n';
+import { getTerminatingString } from '../../../util/getTerminatingString';
+import { blogPath } from '../../../../pathPrefixes';
+import { BlogPost } from '../../../types';
 import styles from './index.module.scss';
 
-interface Props {
-  data: BlogPost;
-}
-
 const getBlogCategoryUrl = (category: string): string =>
   `${blogPath}${category}/`;
 
 const getBlogPostUrl = (slug: string) =>
   slug.endsWith('/') ? slug : `${slug}/`;
 
+interface Props {
+  data: BlogPost;
+}
+
 const BlogCard = ({
   data: {
     node: {

src/components/Codebox/dark.module.scss renamed to src/components/ArticleComponents/Codebox/dark.module.scss

@@ -0,0 +1,2 @@
+export { default as BlogAuthorsList } from './BlogAuthorsList';
+export { default as BlogCard } from './BlogCard';

src/components/Codebox/index.module.scss renamed to src/components/ArticleComponents/Codebox/index.module.scss

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Banner from '..';
-import { BannersIndex } from '../../../types';
+import { BannersIndex } from '../../../../types';
 
 const bannersIndex: BannersIndex = {
   endDate: '',

src/components/Codebox/index.tsx renamed to src/components/ArticleComponents/Codebox/index.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { sanitize } from 'isomorphic-dompurify';
-import { dateIsBetween } from '../../util/dateIsBetween';
-import config from '../../config.json';
-import { BannersIndex } from '../../types';
-import { isAbsoluteUrl } from '../../util/isAbsoluteUrl';
+import { dateIsBetween } from '../../../util/dateIsBetween';
+import { isAbsoluteUrl } from '../../../util/isAbsoluteUrl';
+import { BannersIndex } from '../../../types';
+import config from '../../../config.json';
 import styles from './index.module.scss';
 
 export interface BannerProps {

src/components/Codebox/light.module.scss renamed to src/components/ArticleComponents/Codebox/light.module.scss

@@ -1,7 +1,7 @@
 import React from 'react';
 import ModeNightIcon from '@mui/icons-material/ModeNight';
 import BrightnessMediumIcon from '@mui/icons-material/BrightnessMedium';
-import { useTheme } from '../../hooks/useTheme';
+import { useTheme } from '../../../hooks/useTheme';
 import styles from './index.module.scss';
 
 const DarkModeToggle = () => {

src/components/DataTag/__tests__/__snapshots__/index.test.tsx.snap renamed to src/components/ArticleComponents/DataTag/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-import type { ElementPositionAndSize } from '../../hooks/useElementPositionAndSize';
+import type { ElementPositionAndSize } from '../../../hooks/useElementPositionAndSize';
 
 export const exptraLeftValue = 10;
 export const exptraTopValue = 15;

src/components/DataTag/__tests__/index.test.tsx renamed to src/components/ArticleComponents/DataTag/__tests__/index.test.tsx

@@ -1,15 +1,9 @@
 import React, { useRef } from 'react';
-import { useElementPositionAndSize } from '../../hooks/useElementPositionAndSize';
+import { useElementPositionAndSize } from '../../../hooks/useElementPositionAndSize';
 import { computeDropdownStyles } from './computeDropdownStyles';
+import { DropdownItem } from '../../../types';
 import styles from './index.module.scss';
 
-export interface DropdownItem {
-  title: string;
-  label: string;
-  onClick: () => void;
-  active?: boolean;
-}
-
 interface Props<T> {
   items: Array<DropdownItem>;
   shouldShow: boolean;

src/components/DataTag/index.module.scss renamed to src/components/ArticleComponents/DataTag/index.module.scss

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { createNodeReleasesData } from '../../../__fixtures__/page';
+import { createNodeReleasesData } from '../../../../__fixtures__/page';
 
 import Hero from '..';
 

src/components/DataTag/index.tsx renamed to src/components/ArticleComponents/DataTag/index.tsx

@@ -1,4 +1,4 @@
-@use '../../styles/typography.scss';
+@use '../../../styles/typography.scss';
 
 .hero {
   align-items: center;

src/components/EditLink/__tests__/__snapshots__/edit-link.test.tsx.snap renamed to src/components/ArticleComponents/EditLink/__tests__/__snapshots__/edit-link.test.tsx.snap

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
-import { useDetectOs } from '../../hooks/useDetectOs';
-import type { NodeReleaseData } from '../../types';
+import { useDetectOs } from '../../../hooks/useDetectOs';
+import type { NodeReleaseData } from '../../../types';
 import styles from './index.module.scss';
 
 interface Props {

src/components/EditLink/__tests__/edit-link.test.tsx renamed to src/components/ArticleComponents/EditLink/__tests__/edit-link.test.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import TranslateIcon from '@mui/icons-material/Translate';
-import { useAutoClosableDropdown } from '../../hooks/useAutoClosableDropdown';
-import { useLocaleAsDropdown } from '../../hooks/useLocaleAsDropdown';
+import { useAutoClosableDropdown } from '../../../hooks/useAutoClosableDropdown';
+import { useLocaleAsDropdown } from '../../../hooks/useLocaleAsDropdown';
 import styles from './index.module.scss';
 
 const LanguageSelector = () => {