Code Updates (#1588)

* chore: swap SFC for FC

* chore: convert react imports

* chore: update fragment usages

core/docz-core/__fixtures__/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react'
+import React, { FC } from 'react'
 import styled from '@emotion/styled'
 
 export type Kind = 'info' | 'positive' | 'negative' | 'warning'
@@ -27,6 +27,6 @@ const AlertStyled = styled('div')<AlertProps>`
   background: ${({ kind = 'info' }) => kinds[kind]};
 `
 
-export const Alert: SFC<AlertProps> = ({ kind, ...props }) => (
+export const Alert: FC<AlertProps> = ({ kind, ...props }) => (
   <AlertStyled {...props} kind={kind} />
 )

core/docz-core/__fixtures__/Label.tsx

@@ -1,4 +1,4 @@
-import React, { SFC } from 'react'
+import React, { FC } from 'react'
 
 export interface LabelProps {
   /**
@@ -8,7 +8,7 @@ export interface LabelProps {
   text: string
 }
 
-const Label: SFC<LabelProps> = ({ text, ...props }) => (
+const Label: FC<LabelProps> = ({ text, ...props }) => (
   <div className="label" {...props}>
     {text}
   </div>

core/docz-core/templates/404.tpl.js

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 const NotFound = () => {
   const style = {
@@ -10,9 +10,7 @@ const NotFound = () => {
     fontSize: 32,
   }
 
-  return (
-    <div style={style}>Not Found</div>
-  )
+  return <div style={style}>Not Found</div>
 }
 
 export default NotFound

core/docz/src/components/Playground.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import { ComponentType, SFC } from 'react'
+import React from 'react'
+import { ComponentType, FC } from 'react'
 import { useComponents } from '../hooks'
 
 export interface PlaygroundProps {
@@ -14,7 +14,7 @@ export interface PlaygroundProps {
   language?: string
 }
 
-export const Playground: SFC<PlaygroundProps> = ({
+export const Playground: FC<PlaygroundProps> = ({
   className,
   children,
   style,

core/docz/src/components/Props.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import { SFC, ComponentType } from 'react'
+import React from 'react'
+import { FC, ComponentType } from 'react'
 import { get } from 'lodash/fp'
 
 import { useComponents, useComponentProps } from '../hooks'
@@ -99,7 +99,7 @@ export interface PropsComponentProps {
   [key: string]: any
 }
 
-export const Props: SFC<PropsProps> = ({
+export const Props: FC<PropsProps> = ({
   title,
   isToggle,
   isRaw,

core/docz/src/hooks/useComponents.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
-import { useContext, createContext } from 'react'
-import { Fragment, SFC, ComponentType as CT } from 'react'
+import React, { useContext, createContext } from 'react'
+import { FC, ComponentType as CT } from 'react'
 
 import { Entry } from '../state'
 
@@ -30,9 +29,9 @@ export interface ComponentsMap {
   [key: string]: any
 }
 
-const DefNotFound: SFC = () => <Fragment>Not found</Fragment>
-const DefLayout: SFC = ({ children }) => <Fragment>{children}</Fragment>
-const DefPlayground: SFC<PlaygroundProps> = ({ component, code }) => (
+const DefNotFound: FC = () => <>Not found</>
+const DefLayout: FC = ({ children }) => <>{children}</>
+const DefPlayground: FC<PlaygroundProps> = ({ component, code }) => (
   <div>
     {component}
     <pre>{code}</pre>
@@ -50,7 +49,7 @@ export interface ComponentsProviderProps {
 }
 
 const ctx = createContext<ComponentsMap>(defaultComponents)
-export const ComponentsProvider: SFC<ComponentsProviderProps> = ({
+export const ComponentsProvider: FC<ComponentsProviderProps> = ({
   components: themeComponents = {},
   children,
 }) => (

core/docz/src/theme.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import { SFC, ComponentType as CT } from 'react'
+import React, { memo } from 'react'
+import { FC, ComponentType as CT } from 'react'
 import { doczState, Database, ThemeConfig, TransformFn, Entry } from './state'
 
 export interface ThemeProps {
@@ -13,7 +13,7 @@ export function theme(
   transform: TransformFn = c => c
 ): (WrappedComponent: CT) => CT<ThemeProps> {
   return WrappedComponent => {
-    const Theme: SFC<ThemeProps> = React.memo(props => {
+    const Theme: FC<ThemeProps> = memo(props => {
       const { db, currentEntry, children } = props
       const initial: any = { ...db, currentEntry, themeConfig, transform }
 

core/docz/src/utils/createState.tsx

@@ -1,20 +1,19 @@
-import * as React from 'react'
-import { Component } from 'react'
-import { createContext } from 'react'
+import React, { createContext } from 'react'
+import { Component, ReactNode, Context, ComponentType } from 'react'
 import equal from 'fast-deep-equal'
 
 export interface ProviderProps<T> {
   initial?: T
 }
 
 export type PrevState<T> = (prevState: T) => T
-export type GetFn<T> = (state: T) => React.ReactNode
+export type GetFn<T> = (state: T) => ReactNode
 export type Dispatch<T> = T | PrevState<T>
 
 export interface State<T> {
-  context: React.Context<T>
+  context: Context<T>
   set: (param: Dispatch<T>) => void
-  Provider: React.ComponentType<ProviderProps<T>>
+  Provider: ComponentType<ProviderProps<T>>
 }
 
 export function create<T = any>(initial: T): State<T> {
@@ -41,7 +40,7 @@ export function create<T = any>(initial: T): State<T> {
       public componentWillUnmount(): void {
         listeners.clear()
       }
-      public render(): React.ReactNode {
+      public render(): ReactNode {
         return (
           <ctx.Provider value={this.state}>{this.props.children}</ctx.Provider>
         )

core/gatsby-theme-docz/src/base/Layout.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { useComponents } from 'docz'
 import { propEq, get } from 'lodash/fp'
@@ -49,14 +49,14 @@ const Layout = ({ children, ...defaultProps }) => {
   const entry = findEntry(db, ctx)
   const isTransclusion = includesTransclusion(db, defaultProps)
   return (
-    <Fragment>
+    <>
       {entry && <SEO title={entry.value.name} {...entry.value} />}
       <Theme db={db} currentEntry={entry}>
         <Route {...defaultProps} entry={entry} isTransclusion={isTransclusion}>
           {children}
         </Route>
       </Theme>
-    </Fragment>
+    </>
   )
 }
 

core/gatsby-theme-docz/src/components/NavGroup/index.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
-import React from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { useCurrentDoc } from 'docz'
 
 import * as styles from './styles'
@@ -9,13 +9,13 @@ import { ChevronDown } from '../Icons'
 
 export const NavGroup = ({ item, sidebarRef }) => {
   const currentDoc = useCurrentDoc()
-  const currentDocRef = React.useRef()
+  const currentDocRef = useRef()
   const { name, menu } = item
-  const [subheadingsVisible, setShowsubheadings] = React.useState(
+  const [subheadingsVisible, setShowsubheadings] = useState(
     currentDoc.menu === name
   )
   const toggleSubheadings = () => setShowsubheadings(!subheadingsVisible)
-  React.useEffect(() => {
+  useEffect(() => {
     if (sidebarRef.current && currentDocRef.current) {
       sidebarRef.current.scrollTo(0, currentDocRef.current.offsetTop)
     }

core/gatsby-theme-docz/src/components/NavLink/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react'
+import { Fragment, forwardRef } from 'react'
 import { jsx } from 'theme-ui'
 import { Link } from 'gatsby'
 import { useDocs, useCurrentDoc } from 'docz'
@@ -20,7 +20,7 @@ const getCurrentHash = () => {
   return window.location ? decodeURI(window.location.hash) : ''
 }
 
-export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
+export const NavLink = forwardRef(function NavLink({ item, ...props }, ref) {
   const docs = useDocs()
   const current = useCurrentDoc()
 
@@ -34,7 +34,7 @@ export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
   const showHeadings = isCurrent && headings && headings.length > 0
   const currentHash = getCurrentHash()
   return (
-    <React.Fragment>
+    <Fragment>
       <Link
         {...props}
         to={to}
@@ -53,6 +53,6 @@ export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
             {heading.value}
           </Link>
         ))}
-    </React.Fragment>
+    </Fragment>
   )
 })

core/gatsby-theme-docz/src/components/Playground/index.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
-import React from 'react'
+import { useState } from 'react'
 import { useConfig } from 'docz'
 import { LiveProvider, LiveError, LivePreview, LiveEditor } from 'react-live'
 import { Resizable } from 're-resizable'
@@ -48,10 +48,10 @@ export const Playground = ({ code, scope, language, useScoping = false }) => {
   } = useConfig()
 
   // Makes sure scope is only given on mount to avoid infinite re-render on hot reloads
-  const [scopeOnMount] = React.useState(scope)
+  const [scopeOnMount] = useState(scope)
   const theme = usePrismTheme()
-  const [showingCode, setShowingCode] = React.useState(showPlaygroundEditor)
-  const [width, setWidth] = React.useState('100%')
+  const [showingCode, setShowingCode] = useState(showPlaygroundEditor)
+  const [width, setWidth] = useState('100%')
   const resizableProps = getResizableProps(width, setWidth)
 
   const copyCode = () => copy(code)

core/gatsby-theme-docz/src/components/Sidebar/index.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import React, { useState, useRef, useEffect } from 'react'
+import { Fragment, forwardRef, useState, useRef, useEffect } from 'react'
 import { Global } from '@emotion/core'
 import { jsx, Box } from 'theme-ui'
 import { useMenus, useCurrentDoc } from 'docz'
@@ -10,7 +9,7 @@ import { NavSearch } from '../NavSearch'
 import { NavLink } from '../NavLink'
 import { NavGroup } from '../NavGroup'
 
-export const Sidebar = React.forwardRef((props, ref) => {
+export const Sidebar = forwardRef(function Sidebar(props, ref) {
   const [query, setQuery] = useState('')
   const menus = useMenus({ query })
   const currentDoc = useCurrentDoc()
@@ -24,7 +23,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
     }
   }, [])
   return (
-    <>
+    <Fragment>
       <Box onClick={props.onClick} sx={styles.overlay(props)}>
         {props.open && <Global styles={styles.global} />}
       </Box>
@@ -52,6 +51,6 @@ export const Sidebar = React.forwardRef((props, ref) => {
             )
           })}
       </Box>
-    </>
+    </Fragment>
   )
 })

core/gatsby-theme-docz/src/wrapper.js

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
-const Wrapper = ({ children }) => <React.Fragment>{children}</React.Fragment>
+const Wrapper = ({ children }) => <>{children}</>
 export default Wrapper

examples/flow/src/components/Alert.jsx

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment } from 'react'
+import React from 'react'
 import styled from '@emotion/styled'
 
 const kinds = {

examples/images/src/index.jsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
+import React from 'react'
 
-export default function() {
+export default function Image() {
   return <img src="/public/tux.png" />
 }

examples/logo-in-sidebar/src/gatsby-theme-docz/components/Sidebar/index.js

@@ -1,29 +1,29 @@
 /** @jsx jsx */
-import React, { useState, useRef, useEffect } from "react";
-import { Global } from "@emotion/core";
-import { jsx, Box } from "theme-ui";
-import { useMenus, useCurrentDoc } from "docz";
+import { Fragment, forwardRef, useState, useRef, useEffect } from 'react'
+import { Global } from '@emotion/core'
+import { jsx, Box } from 'theme-ui'
+import { useMenus, useCurrentDoc } from 'docz'
 
-import * as styles from "gatsby-theme-docz/src/components/Sidebar/styles";
-import { NavSearch } from "gatsby-theme-docz/src/components/NavSearch";
-import { NavLink } from "gatsby-theme-docz/src/components/NavLink";
-import { NavGroup } from "gatsby-theme-docz/src/components/NavGroup";
+import * as styles from 'gatsby-theme-docz/src/components/Sidebar/styles'
+import { NavSearch } from 'gatsby-theme-docz/src/components/NavSearch'
+import { NavLink } from 'gatsby-theme-docz/src/components/NavLink'
+import { NavGroup } from 'gatsby-theme-docz/src/components/NavGroup'
 
-export const Sidebar = React.forwardRef((props, ref) => {
-  const [query, setQuery] = useState("");
-  const menus = useMenus({ query });
-  const currentDoc = useCurrentDoc();
-  const currentDocRef = useRef();
+export const Sidebar = forwardRef(function Sidebar(props, ref) {
+  const [query, setQuery] = useState('')
+  const menus = useMenus({ query })
+  const currentDoc = useCurrentDoc()
+  const currentDocRef = useRef()
   const handleChange = ev => {
-    setQuery(ev.target.value);
-  };
+    setQuery(ev.target.value)
+  }
   useEffect(() => {
     if (ref.current && currentDocRef.current) {
-      ref.current.scrollTo(0, currentDocRef.current.offsetTop);
+      ref.current.scrollTo(0, currentDocRef.current.offsetTop)
     }
-  }, []);
+  }, [])
   return (
-    <>
+    <Fragment>
       <Box onClick={props.onClick} sx={styles.overlay(props)}>
         {props.open && <Global styles={styles.global} />}
       </Box>
@@ -38,21 +38,21 @@ export const Sidebar = React.forwardRef((props, ref) => {
         {menus &&
           menus.map(menu => {
             if (!menu.route)
-              return <NavGroup key={menu.id} item={menu} sidebarRef={ref} />;
+              return <NavGroup key={menu.id} item={menu} sidebarRef={ref} />
             if (menu.route === currentDoc.route) {
               return (
                 <NavLink key={menu.id} item={menu} ref={currentDocRef}>
                   {menu.name}
                 </NavLink>
-              );
+              )
             }
             return (
               <NavLink key={menu.id} item={menu}>
                 {menu.name}
               </NavLink>
-            );
+            )
           })}
       </Box>
-    </>
-  );
-});
+    </Fragment>
+  )
+})