docs(nxdev): cleanup & misc improvements (#9013)

nx-dev/data-access-documents/src/lib/documents.api.ts

@@ -1,8 +1,8 @@
 import { readFileSync } from 'fs';
-import { join } from 'path';
 import matter from 'gray-matter';
-import { extractTitle } from './documents.utils';
+import { join } from 'path';
 import { DocumentData, DocumentMetadata } from './documents.models';
+import { extractTitle } from './documents.utils';
 
 export interface StaticDocumentPaths {
   params: { segments: string[] };

nx-dev/data-access-documents/src/lib/menu.models.ts

@@ -1,4 +1,4 @@
-import { DocumentMetadata, VersionMetadata } from './documents.models';
+import { DocumentMetadata } from './documents.models';
 
 export interface Menu {
   sections: MenuSection[];

nx-dev/feature-conf/src/lib/conf-workshop.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { MemberCard } from '@nrwl/nx-dev/ui-member-card';
+import { ReactComponentElement } from 'react';
 
-export function ConfWorkshop(): JSX.Element {
+export function ConfWorkshop(): ReactComponentElement<any> {
   return (
     <div className="border-t border-b border-gray-600">
       <div className="mx-auto max-w-screen-lg text-white xl:max-w-screen-xl">

nx-dev/feature-doc-viewer/src/lib/code-block.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
 // @ts-ignore
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import SyntaxHighlighter from 'react-syntax-highlighter';
 
 export function CodeBlock({
   text,

nx-dev/feature-doc-viewer/src/lib/content.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import autolinkHeadings from 'rehype-autolink-headings';
-import gfm from 'remark-gfm';
-import slug from 'rehype-slug';
 import { DocumentData } from '@nrwl/nx-dev/data-access-documents';
 import { sendCustomEvent } from '@nrwl/nx-dev/feature-analytics';
-import { transformImagePath } from './renderers/transform-image-path';
+import { ReactComponentElement } from 'react';
-import { renderIframes } from './renderers/render-iframe';
+import ReactMarkdown from 'react-markdown';
+import autolinkHeadings from 'rehype-autolink-headings';
+import slug from 'rehype-slug';
+import gfm from 'remark-gfm';
 import { CodeBlock } from './code-block';
+import { renderIframes } from './renderers/render-iframe';
+import { transformImagePath } from './renderers/transform-image-path';
 
 export interface ContentProps {
   document: DocumentData;
@@ -41,7 +41,7 @@ const components: any = (config: ComponentsConfig) => ({
   },
 });
 
-export function Content(props: ContentProps) {
+export function Content(props: ContentProps): ReactComponentElement<any> {
   return (
     <div className="min-w-0 flex-auto px-4 pt-8 pb-24 sm:px-6 lg:pb-16 xl:px-8">
       <ReactMarkdown

nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import cx from 'classnames';
-import { useRouter } from 'next/router';
-import { NextSeo } from 'next-seo';
 import { DocumentData, Menu } from '@nrwl/nx-dev/data-access-documents';
+import cx from 'classnames';
+import { NextSeo } from 'next-seo';
+import { useRouter } from 'next/router';
+import { ReactComponentElement } from 'react';
 import Content from './content';
 import Sidebar from './sidebar';
 
@@ -17,7 +17,7 @@ export function DocViewer({
   document,
   menu,
   navIsOpen,
-}: DocumentationFeatureDocViewerProps) {
+}: DocumentationFeatureDocViewerProps): ReactComponentElement<any> {
   const router = useRouter();
 
   return (

nx-dev/feature-doc-viewer/src/lib/renderers/transform-image-path.ts

@@ -1,6 +1,6 @@
-import { uriTransformer } from 'react-markdown';
 import { DocumentData } from '@nrwl/nx-dev/data-access-documents';
 import { join } from 'path';
+import { uriTransformer } from 'react-markdown';
 
 export function transformImagePath({
   document,

nx-dev/feature-doc-viewer/src/lib/sidebar.spec.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/dom';
-import { render } from '@testing-library/react';
-
-import Sidebar from './sidebar';
-
-describe('Sidebar', () => {
-  it('should render sections', () => {
-    render(
-      <Sidebar
-        navIsOpen={false}
-        menu={{
-          sections: [
-            {
-              id: 'basic',
-              name: 'Basic',
-              hideSectionHeader: true,
-              itemList: [
-                {
-                  id: 'getting-started',
-                  name: 'getting started',
-                  itemList: [
-                    { id: 'a', name: 'A', path: '/a', url: '/a' },
-                    { id: 'b', name: 'B', path: '/b', url: '/b' },
-                    { id: 'c', name: 'C', path: '/c', url: '/c' },
-                  ],
-                },
-              ],
-            },
-            {
-              id: 'api',
-              name: 'API',
-              itemList: [
-                {
-                  id: 'overview',
-                  name: 'overview',
-                  itemList: [
-                    { id: 'd', name: 'D', path: '/d', url: '/d' },
-                    { id: 'e', name: 'E', path: '/e', url: '/e' },
-                  ],
-                },
-              ],
-            },
-          ],
-        }}
-      />
-    );
-
-    // TODO: figure out the type errors and fix
-    // @ts-ignore
-    expect(() => screen.getByTestId('section-h4:basic')).toThrow(
-      /Unable to find/
-    );
-    // @ts-ignore
-    expect(screen.getByTestId('section-h4:api')).toBeTruthy();
-  });
-});

nx-dev/feature-doc-viewer/src/lib/sidebar.tsx

@@ -1,19 +1,22 @@
-import React, { useCallback, useState } from 'react';
-import cx from 'classnames';
-import Link from 'next/link';
 import {
   Menu,
   MenuItem,
   MenuSection,
 } from '@nrwl/nx-dev/data-access-documents';
+import cx from 'classnames';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { ReactComponentElement, useCallback, useState } from 'react';
 
 export interface SidebarProps {
   menu: Menu;
   navIsOpen?: boolean;
 }
 
-export function Sidebar({ menu, navIsOpen }: SidebarProps) {
+export function Sidebar({
+  menu,
+  navIsOpen,
+}: SidebarProps): ReactComponentElement<any> {
   return (
     <div
       data-testid="sidebar"
@@ -43,7 +46,11 @@ export function Sidebar({ menu, navIsOpen }: SidebarProps) {
   );
 }
 
-function SidebarSection({ section }: { section: MenuSection }) {
+function SidebarSection({
+  section,
+}: {
+  section: MenuSection;
+}): ReactComponentElement<any> {
   return (
     <>
       {section.hideSectionHeader ? null : (
@@ -65,7 +72,11 @@ function SidebarSection({ section }: { section: MenuSection }) {
   );
 }
 
-function SidebarSectionItems({ item }: { item: MenuItem }) {
+function SidebarSectionItems({
+  item,
+}: {
+  item: MenuItem;
+}): ReactComponentElement<any> {
   const router = useRouter();
   const [collapsed, setCollapsed] = useState(!item.disableCollapsible);
 
@@ -131,7 +142,11 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
   );
 }
 
-function CollapsibleIcon({ isCollapsed }: { isCollapsed: boolean }) {
+function CollapsibleIcon({
+  isCollapsed,
+}: {
+  isCollapsed: boolean;
+}): ReactComponentElement<any> {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

nx-dev/feature-search/src/lib/algolia-search.tsx

@@ -1,10 +1,10 @@
+import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
 import { SearchIcon } from '@heroicons/react/solid';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import Link from 'next/link';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
 
 const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control'];
 const ACTION_KEY_APPLE = ['⌘', 'Command'];

nx-dev/feature-versions-and-flavors/src/lib/flavor-context.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { VersionMetadata } from '@nrwl/nx-dev/data-access-documents';
+import { createContext, ReactNode, useContext } from 'react';
 
 interface VersionsAndFlavorsContextValue {
   versions: VersionMetadata[];
@@ -7,27 +7,28 @@ interface VersionsAndFlavorsContextValue {
   isFallbackActiveFlavor?: boolean;
 }
 
-const VersionsContext =
+const VersionsContext = createContext<null | VersionsAndFlavorsContextValue>(
-  React.createContext<null | VersionsAndFlavorsContextValue>(null);
+  null
+);
 
 const missingErrorMessage =
   'Context not found. Did you include <VersionsProvider> in your app?';
 
 export function useVersions(): VersionMetadata[] {
-  const ctx = React.useContext(VersionsContext);
+  const ctx = useContext(VersionsContext);
   if (!ctx) throw new Error(missingErrorMessage);
   return ctx.versions;
 }
 
 export function useActiveVersion(): VersionMetadata {
-  const ctx = React.useContext(VersionsContext);
+  const ctx = useContext(VersionsContext);
   if (!ctx) throw new Error(missingErrorMessage);
   return ctx.activeVersion;
 }
 
 export function VersionsAndFlavorsProvider(props: {
   value: VersionsAndFlavorsContextValue;
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   return (
     <VersionsContext.Provider value={props.value}>

nx-dev/nx-dev/pages/[...segments].tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import Router from 'next/router';
-import cx from 'classnames';
 import type { DocumentData, Menu } from '@nrwl/nx-dev/data-access-documents';
 import { DocViewer } from '@nrwl/nx-dev/feature-doc-viewer';
 import { Footer, Header } from '@nrwl/nx-dev/ui-common';
+import cx from 'classnames';
+import Router from 'next/router';
+import { useCallback, useEffect, useState } from 'react';
 import { documentsApi, menuApi } from '../lib/api';
 
 interface DocumentationPageProps {

nx-dev/nx-dev/pages/_app.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect } from 'react';
+import { sendPageViewEvent } from '@nrwl/nx-dev/feature-analytics';
+import { DefaultSeo } from 'next-seo';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { DefaultSeo } from 'next-seo';
-import { sendPageViewEvent } from '@nrwl/nx-dev/feature-analytics';
 import Script from 'next/script';
+import { useEffect } from 'react';
 import '../styles/main.css';
 
 export default function CustomApp({ Component, pageProps }: AppProps) {

nx-dev/nx-dev/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document';
+import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (

nx-dev/nx-dev/pages/community.tsx

@@ -6,11 +6,12 @@ import {
 import { Footer, Header } from '@nrwl/nx-dev/ui-common';
 import {
   ConnectWithUs,
-  PluginDirectory,
   CreateNxPlugin,
+  PluginDirectory,
 } from '@nrwl/nx-dev/ui-community';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
+import { ReactComponentElement } from 'react';
 
 declare const fetch: any;
 
@@ -34,7 +35,7 @@ export async function getStaticProps(): Promise<{ props: CommunityProps }> {
   };
 }
 
-export function Community(props: CommunityProps) {
+export function Community(props: CommunityProps): ReactComponentElement<any> {
   const router = useRouter();
 
   return (

nx-dev/nx-dev/pages/conf.tsx

@@ -1,16 +1,16 @@
-import Link from 'next/link';
-import { NextSeo } from 'next-seo';
-import { useRouter } from 'next/router';
-import { Footer, Header } from '@nrwl/nx-dev/ui-common';
 import {
   ConfSchedule,
   ConfSpeakers,
   ConfSponsors,
   ConfWorkshop,
 } from '@nrwl/nx-dev/feature-conf';
-import { useStorage } from '@nrwl/nx-dev/feature-storage';
+import { Footer, Header } from '@nrwl/nx-dev/ui-common';
+import { NextSeo } from 'next-seo';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { ReactComponentElement } from 'react';
 
-export function ConfPage() {
+export function ConfPage(): ReactComponentElement<any> {
   const router = useRouter();
   return (
     <>

nx-dev/nx-dev/pages/index.tsx

@@ -1,6 +1,3 @@
-import React from 'react';
-import Link from 'next/link';
-import { NextSeo } from 'next-seo';
 import {
   Footer,
   Header,
@@ -24,8 +21,11 @@ import {
   VscodePlugin,
   YoutubeChannel,
 } from '@nrwl/nx-dev/ui-home';
+import { NextSeo } from 'next-seo';
+import Link from 'next/link';
+import { ReactComponentElement } from 'react';
 
-export function Index() {
+export function Index(): ReactComponentElement<any> {
   return (
     <>
       <NextSeo

nx-dev/nx-dev/specs/index.spec.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
-import Index from '../pages/index';
-
-describe('Index', () => {
-  it('should render successfully', () => {
-    mockAllIsIntersecting(true);
-    const { baseElement } = render(<Index />);
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-commands/src/lib/inline-command.spec.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import InlineCommand from './inline-command';
-
-describe('InlineCommand', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <InlineCommand command={'npx create-nx-workspace'} language={'bash'} />
-    );
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-commands/src/lib/inline-command.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import { ReactComponentElement, useEffect, useState } from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
+// @ts-ignore
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import SyntaxHighlighter from 'react-syntax-highlighter';
 
 /* eslint-disable-next-line */
 export interface InlineCommandProps {
@@ -13,7 +14,7 @@ export function InlineCommand({
   language,
   command,
   callback,
-}: InlineCommandProps) {
+}: InlineCommandProps): ReactComponentElement<any> {
   const [copied, setCopied] = useState(false);
   useEffect(() => {
     let t: NodeJS.Timeout;

nx-dev/ui-common/src/lib/footer.spec.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Footer from './footer';
-
-describe('Footer', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Footer />);
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-common/src/lib/header.spec.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Header from './header';
-
-describe('Header', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Header showSearch={true} />);
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-common/src/lib/header.tsx

@@ -1,6 +1,6 @@
+import { AlgoliaSearch } from '@nrwl/nx-dev/feature-search';
 import cx from 'classnames';
 import Link from 'next/link';
-import { AlgoliaSearch } from '@nrwl/nx-dev/feature-search';
 
 export interface HeaderProps {
   isDocViewer?: boolean;

nx-dev/ui-common/src/lib/npx-create-nx-workspace.spec.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import NpxCreateNxWorkspace from './npx-create-nx-workspace';
-
-describe('NpxCreateNxWorkspace', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<NpxCreateNxWorkspace />);
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-common/src/lib/nx-users-showcase.spec.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import NxUsersShowcase from './nx-users-showcase';
-
-describe('NxUsersShowcase', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<NxUsersShowcase />);
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-common/src/lib/selector.spec.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Selector from './selector';
-
-describe('Selector', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <Selector
-        items={[
-          { label: 'Latest', value: 'latest' },
-          { label: 'Previous', value: 'previous' },
-        ]}
-        selected={{ label: 'Latest', value: 'latest' }}
-        onChange={(item) => void 0}
-      />
-    );
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-common/src/lib/selector.tsx

@@ -1,6 +1,6 @@
-import React, { Fragment } from 'react';
 import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
+import { Fragment, ReactComponentElement } from 'react';
 
 export interface SelectorProps<T> {
   items: { label: string; value: string; data?: T }[];
@@ -8,7 +8,9 @@ export interface SelectorProps<T> {
   onChange: (item: { label: string; value: string; data?: T }) => void;
 }
 
-export function Selector<T = {}>(props: SelectorProps<T>) {
+export function Selector<T = {}>(
+  props: SelectorProps<T>
+): ReactComponentElement<any> {
   return (
     <div className="w-full">
       <Listbox

nx-dev/ui-community/src/lib/connect-with-us.tsx

@@ -22,7 +22,7 @@ export function ConnectWithUs(): ReactComponentElement<any> {
       <div className="relative flex-none lg:w-7/12 xl:w-7/12">
         <div className="relative flex flex-col space-y-6 md:flex-row md:space-x-6 md:space-y-0">
           <div className="space-y-6 md:mt-24 md:w-1/2">
-            <div className="group rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out hover:border-violet-300">
+            <div className="group relative rounded-2xl border-2 border-gray-100 bg-white p-5 transition duration-200 ease-out hover:border-violet-300">
               <div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
                 <div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-violet-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105"></div>
                 <div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#4A154B] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105"></div>

nx-dev/ui-community/src/lib/create-nx-plugin.tsx

@@ -3,8 +3,8 @@ import {
   DocumentAddIcon,
   ShareIcon,
 } from '@heroicons/react/solid';
-import { ReactComponentElement } from 'react';
 import Link from 'next/link';
+import { ReactComponentElement } from 'react';
 
 export function CreateNxPlugin(): ReactComponentElement<any> {
   return (

nx-dev/ui-community/src/lib/plugin-directory.tsx

@@ -1,7 +1,6 @@
-import { ReactComponentElement } from 'react';
-import { useState } from 'react';
-import { PluginCard } from '@nrwl/nx-dev/ui-common';
 import { SearchIcon } from '@heroicons/react/solid';
+import { PluginCard } from '@nrwl/nx-dev/ui-common';
+import { ReactComponentElement, useState } from 'react';
 
 interface Plugin {
   description: string;

nx-dev/ui-home/src/lib/affected-command.tsx

@@ -1,7 +1,7 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
 import { motion, useAnimation } from 'framer-motion';
+import Image from 'next/image';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 export function AffectedCommand(): ReactComponentElement<any> {

nx-dev/ui-home/src/lib/cloud-support.spec.tsx

@@ -1,10 +0,0 @@
-import CloudSupport from './cloud-support';
-import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
-
-describe('CloudSupport', () => {
-  it('should render successfully', () => {
-    mockAllIsIntersecting(true);
-    // const { baseElement } = render(<CloudSupport />);
-    // expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-home/src/lib/cloud-support.tsx

@@ -1,7 +1,7 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
 import { motion, useAnimation } from 'framer-motion';
+import Image from 'next/image';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 export function CloudSupport(): ReactComponentElement<any> {

nx-dev/ui-home/src/lib/dependency-graph.tsx

@@ -1,6 +1,6 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
 import { motion, useAnimation } from 'framer-motion';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 export function DependencyGraph(): ReactComponentElement<any> {

nx-dev/ui-home/src/lib/ecosystem-features.tsx

@@ -1,7 +1,7 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
 import cx from 'classnames';
 import { motion, useAnimation } from 'framer-motion';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 const featureItems: {

nx-dev/ui-home/src/lib/egghead-courses.tsx

@@ -1,6 +1,6 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
 import { motion, useAnimation } from 'framer-motion';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 export function EggheadCourses(): ReactComponentElement<any> {

nx-dev/ui-home/src/lib/experience-features.tsx

@@ -1,7 +1,7 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
 import cx from 'classnames';
 import { motion, useAnimation } from 'framer-motion';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 const featureItems: {

nx-dev/ui-home/src/lib/getting-started.tsx

@@ -1,10 +1,10 @@
-import { ReactComponentElement, useState } from 'react';
+import { sendCustomEvent } from '@nrwl/nx-dev/feature-analytics';
+import { InlineCommand } from '@nrwl/nx-dev/ui-commands';
+import cx from 'classnames';
+import { AnimatePresence, motion } from 'framer-motion';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { AnimatePresence, motion } from 'framer-motion';
+import { ReactComponentElement, useState } from 'react';
-import cx from 'classnames';
-import { InlineCommand } from '@nrwl/nx-dev/ui-commands';
-import { sendCustomEvent } from '@nrwl/nx-dev/feature-analytics';
 
 interface Tab {
   id: string;

nx-dev/ui-home/src/lib/monorepo-features.tsx

@@ -1,7 +1,7 @@
-import { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
 import cx from 'classnames';
 import { motion, useAnimation } from 'framer-motion';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 const featureItems: {

nx-dev/ui-home/src/lib/nx-playbook.spec.tsx

@@ -1,12 +0,0 @@
-import { render } from '@testing-library/react';
-
-import NxPlaybook from './nx-playbook';
-import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
-
-describe('NxPlaybook', () => {
-  it('should render successfully', () => {
-    mockAllIsIntersecting(true);
-    const { baseElement } = render(<NxPlaybook />);
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-home/src/lib/nx-playbook.tsx

@@ -1,6 +1,6 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
 import { motion, useAnimation } from 'framer-motion';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 export function NxPlaybook(): ReactComponentElement<any> {

nx-dev/ui-home/src/lib/open-platform.tsx

@@ -1,5 +1,5 @@
-import React, { ReactComponentElement, useEffect } from 'react';
 import { motion, useAnimation } from 'framer-motion';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 const featureItems: ReactComponentElement<any>[] = [

nx-dev/ui-home/src/lib/open-source-projects.tsx

@@ -1,8 +1,8 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
-import { motion, useAnimation } from 'framer-motion';
-import { useInView } from 'react-intersection-observer';
 import cx from 'classnames';
+import { motion, useAnimation } from 'framer-motion';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
 
 export function OpenSourceProjects(): ReactComponentElement<any> {
   const projectList = [

nx-dev/ui-home/src/lib/performance.tsx

@@ -1,4 +1,3 @@
-import React, { ReactComponentElement, useEffect, useRef } from 'react';
 import {
   animate,
   motion,
@@ -7,6 +6,7 @@ import {
   useMotionValue,
   useTransform,
 } from 'framer-motion';
+import { ReactComponentElement, useEffect, useRef } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 function Counter({

nx-dev/ui-home/src/lib/testimonials.tsx

@@ -1,5 +1,5 @@
-import React, { ReactComponentElement } from 'react';
 import { TestimonialCard } from '@nrwl/nx-dev/ui-common';
+import { ReactComponentElement } from 'react';
 
 export function Testimonials(): ReactComponentElement<any> {
   const column1 = [

nx-dev/ui-home/src/lib/vscode-plugin.tsx

@@ -1,8 +1,8 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
 import { motion, useAnimation } from 'framer-motion';
-import { useInView } from 'react-intersection-observer';
 import Image from 'next/image';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
 
 export function VscodePlugin(): ReactComponentElement<any> {
   const opacityTranslateXVariant = {

nx-dev/ui-home/src/lib/youtube-channel.spec.tsx

@@ -1,12 +0,0 @@
-import { render } from '@testing-library/react';
-
-import YoutubeChannel from './youtube-channel';
-import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
-
-describe('YoutubeChannel', () => {
-  it('should render successfully', () => {
-    mockAllIsIntersecting(true);
-    const { baseElement } = render(<YoutubeChannel />);
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-home/src/lib/youtube-channel.tsx

@@ -1,6 +1,6 @@
-import React, { ReactComponentElement, useEffect } from 'react';
-import Link from 'next/link';
 import { motion, useAnimation } from 'framer-motion';
+import Link from 'next/link';
+import { ReactComponentElement, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 export function YoutubeChannel(): ReactComponentElement<any> {