docs(nxdev): add type & simplify default notation (#11317)

nx-dev/ui-common/src/lib/announcement-banner.tsx

@@ -1,4 +1,4 @@
-export function AnnouncementBanner() {
+export function AnnouncementBanner(): JSX.Element {
   return (
     <div className="bg-slate-800">
       <div className="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
@@ -36,5 +36,3 @@ export function AnnouncementBanner() {
     </div>
   );
 }
-
-export default AnnouncementBanner;

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

@@ -1,7 +1,7 @@
 import { ChevronRightIcon } from '@heroicons/react/solid';
 import classNames from 'classnames';
 
-export function Breadcrumbs({ path }: { path: string }) {
+export function Breadcrumbs({ path }: { path: string }): JSX.Element {
   const cleanedPath = path.includes('?')
     ? path.slice(0, path.indexOf('?'))
     : path;
@@ -72,5 +72,3 @@ export function Breadcrumbs({ path }: { path: string }) {
     </div>
   );
 }
-
-export default Breadcrumbs;

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

@@ -4,7 +4,7 @@ import Link from 'next/link';
 export interface FooterProps {
   useDarkBackground?: boolean;
 }
-export function Footer({ useDarkBackground }: FooterProps) {
+export function Footer({ useDarkBackground }: FooterProps): JSX.Element {
   const navigation = {
     solutions: [
       { name: 'Nx', href: 'https://nx.dev' },
@@ -289,5 +289,3 @@ export function Footer({ useDarkBackground }: FooterProps) {
     </footer>
   );
 }
-
-export default Footer;

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

@@ -8,7 +8,7 @@ export interface HeaderProps {
   useDarkBackground?: boolean;
 }
 
-export function Header(props: HeaderProps) {
+export function Header(props: HeaderProps): JSX.Element {
   const router = useRouter();
   const isNxCloudDoc: boolean = router.asPath.startsWith('/nx-cloud');
   const isReferencesDoc: boolean = router.asPath.startsWith('/packages');
@@ -182,5 +182,3 @@ export function Header(props: HeaderProps) {
     </div>
   );
 }
-
-export default Header;

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

@@ -21,7 +21,7 @@ export function NpxCreateNxWorkspaceAnimation({
   restartFunction,
 }: {
   restartFunction: () => void;
-}) {
+}): JSX.Element {
   const npxCreateNxWorkspace = useAnimation();
   const wrapper = useAnimation();
   const firstLoading = useAnimation();
@@ -663,7 +663,7 @@ export function NpxCreateNxWorkspaceAnimation({
   );
 }
 
-export function NpxCreateNxWorkspace() {
+export function NpxCreateNxWorkspace(): JSX.Element {
   const [isDisplayed, setIsDisplayed] = useState(true);
 
   const restart = () => {
@@ -694,5 +694,3 @@ export function NpxCreateNxWorkspace() {
     </>
   );
 }
-
-export default NpxCreateNxWorkspace;

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

@@ -1,4 +1,4 @@
-export function NxUsersShowcase() {
+export function NxUsersShowcase(): JSX.Element {
   return (
     <div className="overflow-hidden py-4 px-4">
       <div className="top-1 bottom-3 mx-auto w-60 text-center text-xs text-gray-400">
@@ -1035,5 +1035,3 @@ export function NxUsersShowcase() {
     </div>
   );
 }
-
-export default NxUsersShowcase;

nx-dev/ui-common/src/lib/plugin-card.spec.tsx

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react';
-
-import PluginCard from './plugin-card';
-
-describe('PluginCard', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <PluginCard
-        name={'my plugin'}
-        description={'some description'}
-        url={'nx.dev'}
-      />
-    );
-    expect(baseElement).toBeTruthy();
-  });
-});

nx-dev/ui-common/src/lib/plugin-card.tsx

@@ -1,5 +1,3 @@
-import { ReactComponentElement } from 'react';
-
 export interface PluginCardProps {
   name: string;
   description: string;
@@ -12,7 +10,7 @@ export function PluginCard({
   description,
   url,
   isOfficial,
-}: PluginCardProps): ReactComponentElement<any> {
+}: PluginCardProps): JSX.Element {
   return (
     <div className="focus-within:ring-blue-nx-base relative flex w-full overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2 hover:bg-gray-50">
       <div className="flex w-full flex-col px-4 py-3">
@@ -51,5 +49,3 @@ export function PluginCard({
     </div>
   );
 }
-
-export default PluginCard;

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

@@ -8,9 +8,7 @@ export interface SelectorProps<T> {
   onChange: (item: { label: string; value: string; data?: T }) => void;
 }
 
-export function Selector<T = {}>(
+export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
-  props: SelectorProps<T>
-): ReactComponentElement<any> {
   return (
     <div className="w-full">
       <Listbox
@@ -87,5 +85,3 @@ export function Selector<T = {}>(
     </div>
   );
 }
-
-export default Selector;

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

@@ -2,17 +2,14 @@ import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
 import cx from 'classnames';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { ReactComponentElement, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export interface SidebarProps {
   menu: Menu;
   navIsOpen?: boolean;
 }
 
-export function Sidebar({
+export function Sidebar({ menu, navIsOpen }: SidebarProps): JSX.Element {
-  menu,
-  navIsOpen,
-}: SidebarProps): ReactComponentElement<any> {
   return (
     <div
       data-testid="sidebar"
@@ -42,11 +39,7 @@ export function Sidebar({
   );
 }
 
-function SidebarSection({
+function SidebarSection({ section }: { section: MenuSection }): JSX.Element {
-  section,
-}: {
-  section: MenuSection;
-}): ReactComponentElement<any> {
   return (
     <>
       {section.hideSectionHeader ? null : (
@@ -68,11 +61,7 @@ function SidebarSection({
   );
 }
 
-function SidebarSectionItems({
+function SidebarSectionItems({ item }: { item: MenuItem }): JSX.Element {
-  item,
-}: {
-  item: MenuItem;
-}): ReactComponentElement<any> {
   const router = useRouter();
   const [collapsed, setCollapsed] = useState(!item.disableCollapsible);
 
@@ -152,7 +141,7 @@ function CollapsibleIcon({
   isCollapsed,
 }: {
   isCollapsed: boolean;
-}): ReactComponentElement<any> {
+}): JSX.Element {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -173,5 +162,3 @@ function CollapsibleIcon({
     </svg>
   );
 }
-
-export default Sidebar;

nx-dev/ui-common/src/lib/testimonial-card.tsx

@@ -1,5 +1,3 @@
-import { ReactComponentElement } from 'react';
-
 interface Testimonial {
   author: string;
   title: string;
@@ -8,11 +6,7 @@ interface Testimonial {
   link: string;
 }
 
-export function TestimonialCard({
+export function TestimonialCard({ data }: { data: Testimonial }): JSX.Element {
-  data,
-}: {
-  data: Testimonial;
-}): ReactComponentElement<any> {
   return (
     <figure className="focus-within:ring-blue-nx-base relative flex flex-col-reverse rounded-lg border border-gray-300 bg-white p-6 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-offset-2  hover:bg-gray-50">
       <blockquote className="mt-6 text-slate-500">
@@ -38,5 +32,3 @@ export function TestimonialCard({
     </figure>
   );
 }
-
-export default TestimonialCard;