Skip to content
This repository was archived by the owner on Jan 24, 2025. It is now read-only.

Commit f9bf964

Browse files
stramelstramel
authored
Code Updates (#1588)
* chore: swap SFC for FC * chore: convert react imports * chore: update fragment usages
1 parent becd589 commit f9bf964

File tree

32 files changed

+110
-117
lines changed

32 files changed

+110
-117
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { SFC } from 'react'
1+
import React, { FC } from 'react'
22
import styled from '@emotion/styled'
33

44
export type Kind = 'info' | 'positive' | 'negative' | 'warning'
@@ -27,6 +27,6 @@ const AlertStyled = styled('div')<AlertProps>`
2727
background: ${({ kind = 'info' }) => kinds[kind]};
2828
`
2929

30-
export const Alert: SFC<AlertProps> = ({ kind, ...props }) => (
30+
export const Alert: FC<AlertProps> = ({ kind, ...props }) => (
3131
<AlertStyled {...props} kind={kind} />
3232
)

‎core/docz-core/__fixtures__/Label.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { SFC } from 'react'
1+
import React, { FC } from 'react'
22

33
export interface LabelProps {
44
/**
@@ -8,7 +8,7 @@ export interface LabelProps {
88
text: string
99
}
1010

11-
const Label: SFC<LabelProps> = ({ text, ...props }) => (
11+
const Label: FC<LabelProps> = ({ text, ...props }) => (
1212
<div className="label" {...props}>
1313
{text}
1414
</div>

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as React from 'react'
1+
import React from 'react'
22

33
const NotFound = () => {
44
const style = {
@@ -10,9 +10,7 @@ const NotFound = () => {
1010
fontSize: 32,
1111
}
1212

13-
return (
14-
<div style={style}>Not Found</div>
15-
)
13+
return <div style={style}>Not Found</div>
1614
}
1715

1816
export default NotFound

‎core/docz/src/components/Playground.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as React from 'react'
2-
import { ComponentType, SFC } from 'react'
1+
import React from 'react'
2+
import { ComponentType, FC } from 'react'
33
import { useComponents } from '../hooks'
44

55
export interface PlaygroundProps {
@@ -14,7 +14,7 @@ export interface PlaygroundProps {
1414
language?: string
1515
}
1616

17-
export const Playground: SFC<PlaygroundProps> = ({
17+
export const Playground: FC<PlaygroundProps> = ({
1818
className,
1919
children,
2020
style,

‎core/docz/src/components/Props.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as React from 'react'
2-
import { SFC, ComponentType } from 'react'
1+
import React from 'react'
2+
import { FC, ComponentType } from 'react'
33
import { get } from 'lodash/fp'
44

55
import { useComponents, useComponentProps } from '../hooks'
@@ -99,7 +99,7 @@ export interface PropsComponentProps {
9999
[key: string]: any
100100
}
101101

102-
export const Props: SFC<PropsProps> = ({
102+
export const Props: FC<PropsProps> = ({
103103
title,
104104
isToggle,
105105
isRaw,

‎core/docz/src/hooks/useComponents.tsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import * as React from 'react'
2-
import { useContext, createContext } from 'react'
3-
import { Fragment, SFC, ComponentType as CT } from 'react'
1+
import React, { useContext, createContext } from 'react'
2+
import { FC, ComponentType as CT } from 'react'
43

54
import { Entry } from '../state'
65

@@ -30,9 +29,9 @@ export interface ComponentsMap {
3029
[key: string]: any
3130
}
3231

33-
const DefNotFound: SFC = () => <Fragment>Not found</Fragment>
34-
const DefLayout: SFC = ({ children }) => <Fragment>{children}</Fragment>
35-
const DefPlayground: SFC<PlaygroundProps> = ({ component, code }) => (
32+
const DefNotFound: FC = () => <>Not found</>
33+
const DefLayout: FC = ({ children }) => <>{children}</>
34+
const DefPlayground: FC<PlaygroundProps> = ({ component, code }) => (
3635
<div>
3736
{component}
3837
<pre>{code}</pre>
@@ -50,7 +49,7 @@ export interface ComponentsProviderProps {
5049
}
5150

5251
const ctx = createContext<ComponentsMap>(defaultComponents)
53-
export const ComponentsProvider: SFC<ComponentsProviderProps> = ({
52+
export const ComponentsProvider: FC<ComponentsProviderProps> = ({
5453
components: themeComponents = {},
5554
children,
5655
}) => (

‎core/docz/src/theme.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as React from 'react'
2-
import { SFC, ComponentType as CT } from 'react'
1+
import React, { memo } from 'react'
2+
import { FC, ComponentType as CT } from 'react'
33
import { doczState, Database, ThemeConfig, TransformFn, Entry } from './state'
44

55
export interface ThemeProps {
@@ -13,7 +13,7 @@ export function theme(
1313
transform: TransformFn = c => c
1414
): (WrappedComponent: CT) => CT<ThemeProps> {
1515
return WrappedComponent => {
16-
const Theme: SFC<ThemeProps> = React.memo(props => {
16+
const Theme: FC<ThemeProps> = memo(props => {
1717
const { db, currentEntry, children } = props
1818
const initial: any = { ...db, currentEntry, themeConfig, transform }
1919

‎core/docz/src/utils/createState.tsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import * as React from 'react'
2-
import { Component } from 'react'
3-
import { createContext } from 'react'
1+
import React, { createContext } from 'react'
2+
import { Component, ReactNode, Context, ComponentType } from 'react'
43
import equal from 'fast-deep-equal'
54

65
export interface ProviderProps<T> {
76
initial?: T
87
}
98

109
export type PrevState<T> = (prevState: T) => T
11-
export type GetFn<T> = (state: T) => React.ReactNode
10+
export type GetFn<T> = (state: T) => ReactNode
1211
export type Dispatch<T> = T | PrevState<T>
1312

1413
export interface State<T> {
15-
context: React.Context<T>
14+
context: Context<T>
1615
set: (param: Dispatch<T>) => void
17-
Provider: React.ComponentType<ProviderProps<T>>
16+
Provider: ComponentType<ProviderProps<T>>
1817
}
1918

2019
export function create<T = any>(initial: T): State<T> {
@@ -41,7 +40,7 @@ export function create<T = any>(initial: T): State<T> {
4140
public componentWillUnmount(): void {
4241
listeners.clear()
4342
}
44-
public render(): React.ReactNode {
43+
public render(): ReactNode {
4544
return (
4645
<ctx.Provider value={this.state}>{this.props.children}</ctx.Provider>
4746
)

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Fragment } from 'react'
1+
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { useComponents } from 'docz'
44
import { propEq, get } from 'lodash/fp'
@@ -49,14 +49,14 @@ const Layout = ({ children, ...defaultProps }) => {
4949
const entry = findEntry(db, ctx)
5050
const isTransclusion = includesTransclusion(db, defaultProps)
5151
return (
52-
<Fragment>
52+
<>
5353
{entry && <SEO title={entry.value.name} {...entry.value} />}
5454
<Theme db={db} currentEntry={entry}>
5555
<Route {...defaultProps} entry={entry} isTransclusion={isTransclusion}>
5656
{children}
5757
</Route>
5858
</Theme>
59-
</Fragment>
59+
</>
6060
)
6161
}
6262

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @jsx jsx */
22
import { jsx } from 'theme-ui'
3-
import React from 'react'
3+
import { useEffect, useState, useRef } from 'react'
44
import { useCurrentDoc } from 'docz'
55

66
import * as styles from './styles'
@@ -9,13 +9,13 @@ import { ChevronDown } from '../Icons'
99

1010
export const NavGroup = ({ item, sidebarRef }) => {
1111
const currentDoc = useCurrentDoc()
12-
const currentDocRef = React.useRef()
12+
const currentDocRef = useRef()
1313
const { name, menu } = item
14-
const [subheadingsVisible, setShowsubheadings] = React.useState(
14+
const [subheadingsVisible, setShowsubheadings] = useState(
1515
currentDoc.menu === name
1616
)
1717
const toggleSubheadings = () => setShowsubheadings(!subheadingsVisible)
18-
React.useEffect(() => {
18+
useEffect(() => {
1919
if (sidebarRef.current && currentDocRef.current) {
2020
sidebarRef.current.scrollTo(0, currentDocRef.current.offsetTop)
2121
}

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** @jsx jsx */
2-
import React from 'react'
2+
import { Fragment, forwardRef } from 'react'
33
import { jsx } from 'theme-ui'
44
import { Link } from 'gatsby'
55
import { useDocs, useCurrentDoc } from 'docz'
@@ -20,7 +20,7 @@ const getCurrentHash = () => {
2020
return window.location ? decodeURI(window.location.hash) : ''
2121
}
2222

23-
export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
23+
export const NavLink = forwardRef(function NavLink({ item, ...props }, ref) {
2424
const docs = useDocs()
2525
const current = useCurrentDoc()
2626

@@ -34,7 +34,7 @@ export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
3434
const showHeadings = isCurrent && headings && headings.length > 0
3535
const currentHash = getCurrentHash()
3636
return (
37-
<React.Fragment>
37+
<Fragment>
3838
<Link
3939
{...props}
4040
to={to}
@@ -53,6 +53,6 @@ export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
5353
{heading.value}
5454
</Link>
5555
))}
56-
</React.Fragment>
56+
</Fragment>
5757
)
5858
})

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @jsx jsx */
22
import { jsx } from 'theme-ui'
3-
import React from 'react'
3+
import { useState } from 'react'
44
import { useConfig } from 'docz'
55
import { LiveProvider, LiveError, LivePreview, LiveEditor } from 'react-live'
66
import { Resizable } from 're-resizable'
@@ -48,10 +48,10 @@ export const Playground = ({ code, scope, language, useScoping = false }) => {
4848
} = useConfig()
4949

5050
// Makes sure scope is only given on mount to avoid infinite re-render on hot reloads
51-
const [scopeOnMount] = React.useState(scope)
51+
const [scopeOnMount] = useState(scope)
5252
const theme = usePrismTheme()
53-
const [showingCode, setShowingCode] = React.useState(showPlaygroundEditor)
54-
const [width, setWidth] = React.useState('100%')
53+
const [showingCode, setShowingCode] = useState(showPlaygroundEditor)
54+
const [width, setWidth] = useState('100%')
5555
const resizableProps = getResizableProps(width, setWidth)
5656

5757
const copyCode = () => copy(code)

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

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/** @jsx jsx */
2-
/** @jsxFrag React.Fragment */
3-
import React, { useState, useRef, useEffect } from 'react'
2+
import { Fragment, forwardRef, useState, useRef, useEffect } from 'react'
43
import { Global } from '@emotion/core'
54
import { jsx, Box } from 'theme-ui'
65
import { useMenus, useCurrentDoc } from 'docz'
@@ -10,7 +9,7 @@ import { NavSearch } from '../NavSearch'
109
import { NavLink } from '../NavLink'
1110
import { NavGroup } from '../NavGroup'
1211

13-
export const Sidebar = React.forwardRef((props, ref) => {
12+
export const Sidebar = forwardRef(function Sidebar(props, ref) {
1413
const [query, setQuery] = useState('')
1514
const menus = useMenus({ query })
1615
const currentDoc = useCurrentDoc()
@@ -24,7 +23,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
2423
}
2524
}, [])
2625
return (
27-
<>
26+
<Fragment>
2827
<Box onClick={props.onClick} sx={styles.overlay(props)}>
2928
{props.open && <Global styles={styles.global} />}
3029
</Box>
@@ -52,6 +51,6 @@ export const Sidebar = React.forwardRef((props, ref) => {
5251
)
5352
})}
5453
</Box>
55-
</>
54+
</Fragment>
5655
)
5756
})

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as React from 'react'
1+
import React from 'react'
22

3-
const Wrapper = ({ children }) => <React.Fragment>{children}</React.Fragment>
3+
const Wrapper = ({ children }) => <>{children}</>
44
export default Wrapper

‎examples/flow/src/components/Alert.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// @flow
22

3-
import React, { Fragment } from 'react'
3+
import React from 'react'
44
import styled from '@emotion/styled'
55

66
const kinds = {

‎examples/images/src/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as React from 'react'
1+
import React from 'react'
22

3-
export default function() {
3+
export default function Image() {
44
return <img src="/public/tux.png" />
55
}

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

+24-24
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
/** @jsx jsx */
2-
import React, { useState, useRef, useEffect } from "react";
3-
import { Global } from "@emotion/core";
4-
import { jsx, Box } from "theme-ui";
5-
import { useMenus, useCurrentDoc } from "docz";
2+
import { Fragment, forwardRef, useState, useRef, useEffect } from 'react'
3+
import { Global } from '@emotion/core'
4+
import { jsx, Box } from 'theme-ui'
5+
import { useMenus, useCurrentDoc } from 'docz'
66

7-
import * as styles from "gatsby-theme-docz/src/components/Sidebar/styles";
8-
import { NavSearch } from "gatsby-theme-docz/src/components/NavSearch";
9-
import { NavLink } from "gatsby-theme-docz/src/components/NavLink";
10-
import { NavGroup } from "gatsby-theme-docz/src/components/NavGroup";
7+
import * as styles from 'gatsby-theme-docz/src/components/Sidebar/styles'
8+
import { NavSearch } from 'gatsby-theme-docz/src/components/NavSearch'
9+
import { NavLink } from 'gatsby-theme-docz/src/components/NavLink'
10+
import { NavGroup } from 'gatsby-theme-docz/src/components/NavGroup'
1111

12-
export const Sidebar = React.forwardRef((props, ref) => {
13-
const [query, setQuery] = useState("");
14-
const menus = useMenus({ query });
15-
const currentDoc = useCurrentDoc();
16-
const currentDocRef = useRef();
12+
export const Sidebar = forwardRef(function Sidebar(props, ref) {
13+
const [query, setQuery] = useState('')
14+
const menus = useMenus({ query })
15+
const currentDoc = useCurrentDoc()
16+
const currentDocRef = useRef()
1717
const handleChange = ev => {
18-
setQuery(ev.target.value);
19-
};
18+
setQuery(ev.target.value)
19+
}
2020
useEffect(() => {
2121
if (ref.current && currentDocRef.current) {
22-
ref.current.scrollTo(0, currentDocRef.current.offsetTop);
22+
ref.current.scrollTo(0, currentDocRef.current.offsetTop)
2323
}
24-
}, []);
24+
}, [])
2525
return (
26-
<>
26+
<Fragment>
2727
<Box onClick={props.onClick} sx={styles.overlay(props)}>
2828
{props.open && <Global styles={styles.global} />}
2929
</Box>
@@ -38,21 +38,21 @@ export const Sidebar = React.forwardRef((props, ref) => {
3838
{menus &&
3939
menus.map(menu => {
4040
if (!menu.route)
41-
return <NavGroup key={menu.id} item={menu} sidebarRef={ref} />;
41+
return <NavGroup key={menu.id} item={menu} sidebarRef={ref} />
4242
if (menu.route === currentDoc.route) {
4343
return (
4444
<NavLink key={menu.id} item={menu} ref={currentDocRef}>
4545
{menu.name}
4646
</NavLink>
47-
);
47+
)
4848
}
4949
return (
5050
<NavLink key={menu.id} item={menu}>
5151
{menu.name}
5252
</NavLink>
53-
);
53+
)
5454
})}
5555
</Box>
56-
</>
57-
);
58-
});
56+
</Fragment>
57+
)
58+
})

0 commit comments

Comments
 (0)