feat(website): update code according to react-markdown API changes

plouc · plouc · commit 74fdbbb6579b · 2021-08-29T18:52:43.000+09:00
diff --git a/website/src/components/Header.js b/website/src/components/Header.js
@@ -1,14 +1,12 @@
 import React from 'react'
 import styled from 'styled-components'
-import HeaderNav from './HeaderNav'
+import { HeaderNav } from './HeaderNav'
 
-const Header = () => {
-    return (
-        <Container>
-            <HeaderNav />
-        </Container>
-    )
-}
+const Header = () => (
+    <Container>
+        <HeaderNav />
+    </Container>
+)
 
 export default Header
 
diff --git a/website/src/components/HeaderNav.tsx b/website/src/components/HeaderNav.tsx
@@ -6,7 +6,7 @@ import media from '../theming/mediaQueries'
 import * as nav from '../data/nav'
 import ThemeSelector from './ThemeSelector'
 
-const HeaderNav = () => {
+export const HeaderNav = () => {
     return (
         <Container>
             <HeaderInternalLink to="/about">About</HeaderInternalLink>
@@ -58,8 +58,6 @@ const HeaderNav = () => {
     )
 }
 
-export default HeaderNav
-
 const Container = styled.nav`
     position: absolute;
     top: 0;
diff --git a/website/src/components/Markdown.js b/website/src/components/Markdown.js
@@ -4,7 +4,7 @@ import { Link } from 'gatsby'
 import ReactMarkdown from 'react-markdown'
 import config from '../data/config'
 
-const linkRenderer = ({ href, children }) => {
+const link = ({ href, children }) => {
     if (href.indexOf('self:') === 0) {
         return <Link to={href.replace('self:', '')}>{children}</Link>
     }
@@ -24,15 +24,13 @@ const linkRenderer = ({ href, children }) => {
     )
 }
 
+const customComponents = { a: link }
+
 const Markdown = memo(({ source }) => {
     return (
-        <ReactMarkdown
-            source={source}
-            transformLinkUri={u => u}
-            renderers={{
-                link: linkRenderer,
-            }}
-        />
+        <ReactMarkdown transformLinkUri={u => u} components={customComponents}>
+            {source}
+        </ReactMarkdown>
     )
 })
 
diff --git a/website/src/components/ThemeSelector.js b/website/src/components/ThemeSelector.js
@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import { useTheme } from '../theming/context'
 import { useGlobalDispatch, useGlobalState } from './state'
-import Switch from './controls/Switch'
+import { Switch } from './controls/Switch'
 // import useLocalStorage from '../lib/useLocalStorage'
 
 const ThemeSelector = () => {
diff --git a/website/src/components/controls/AngleControl.tsx b/website/src/components/controls/AngleControl.tsx
@@ -1,5 +1,4 @@
 import React, { memo, useCallback } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
@@ -10,30 +9,23 @@ const size = 36
 const center = size / 2
 const markerSize = 6
 
-const Row = styled.div`
-    display: grid;
-    grid-template-columns: 60px ${size}px auto;
-    grid-column-gap: 9px;
-    align-items: center;
-    max-width: 240px;
-    margin-bottom: 5px;
-`
-
-const Circle = styled.circle`
-    fill: ${({ theme }) => theme.colors.background};
-    strokewidth: 1px;
-    stroke: ${({ theme }) => theme.colors.border};
-`
-
-const Line = styled.line`
-    stroke: ${({ theme }) => theme.colors.accent};
-`
-
-const Marker = styled.circle`
-    fill: ${({ theme }) => theme.colors.accent};
-`
+interface AngleControlProps {
+    id: string
+    property: {
+        description?: string
+    }
+    flavors: ('svg' | 'html' | 'canvas' | 'api')[]
+    currentFlavor: 'svg' | 'html' | 'canvas' | 'api'
+    value: number
+    options: {
+        start?: number
+        min?: number
+        max?: number
+    }
+    onChange: (v: number) => void
+}
 
-const AngleControl = memo(({ id, property, flavors, currentFlavor, value, options, onChange }) => {
+export const AngleControl = memo(({ id, property, flavors, currentFlavor, value, options, onChange }: AngleControlProps) => {
     const start = options.start || 0
     const min = options.min || 0
     const max = options.max || 360
@@ -73,18 +65,25 @@ const AngleControl = memo(({ id, property, flavors, currentFlavor, value, option
     )
 })
 
-AngleControl.propTypes = {
-    id: PropTypes.string.isRequired,
-    property: PropTypes.object.isRequired,
-    flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
-    currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
-    value: PropTypes.number.isRequired,
-    options: PropTypes.shape({
-        start: PropTypes.number,
-        min: PropTypes.number,
-        max: PropTypes.number,
-    }).isRequired,
-    onChange: PropTypes.func.isRequired,
-}
+const Row = styled.div`
+    display: grid;
+    grid-template-columns: 60px ${size}px auto;
+    grid-column-gap: 9px;
+    align-items: center;
+    max-width: 240px;
+    margin-bottom: 5px;
+`
 
-export default AngleControl
+const Circle = styled.circle`
+    fill: ${({ theme }) => theme.colors.background};
+    stroke-width: 1px;
+    stroke: ${({ theme }) => theme.colors.border};
+`
+
+const Line = styled.line`
+    stroke: ${({ theme }) => theme.colors.accent};
+`
+
+const Marker = styled.circle`
+    fill: ${({ theme }) => theme.colors.accent};
+`
diff --git a/website/src/components/controls/ControlsGroup.js b/website/src/components/controls/ControlsGroup.js
@@ -19,7 +19,7 @@ import OpacityControl from './OpacityControl'
 import LineWidthControl from './LineWidthControl'
 import MotionConfigControl from './MotionConfigControl'
 import NumberArrayControl from './NumberArrayControl'
-import AngleControl from './AngleControl'
+import { AngleControl } from './AngleControl'
 import OrdinalColorsControl from './OrdinalColorsControl'
 import InheritedColorControl from './InheritedColorControl'
 import BlendModeControl from './BlendModeControl'
diff --git a/website/src/components/controls/Help.tsx b/website/src/components/controls/Help.tsx
@@ -3,6 +3,20 @@ import styled from 'styled-components'
 import dedent from 'dedent-js'
 import Markdown from '../Markdown'
 
+interface HelpProps {
+    children?: string | undefined
+}
+
+export const Help = ({ children }: HelpProps) => {
+    if (!children) return null
+
+    return (
+        <Container>
+            <Markdown source={dedent(children)} />
+        </Container>
+    )
+}
+
 export const Container = styled.div`
     display: inline;
     font-size: 0.8rem;
@@ -16,13 +30,3 @@ export const Container = styled.div`
         color: ${({ theme }) => theme.colors.text};
     }
 `
-
-export const Help = ({ children }) => {
-    if (!children) return null
-
-    return (
-        <Container>
-            <Markdown source={dedent(children)} />
-        </Container>
-    )
-}
diff --git a/website/src/components/controls/MotionConfigControl.js b/website/src/components/controls/MotionConfigControl.js
@@ -6,7 +6,7 @@ import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import Radio from './Radio'
 import Select from './Select'
-import Switch from './Switch'
+import { Switch } from './Switch'
 import { Help } from './Help'
 
 const Row = styled.div`
diff --git a/website/src/components/controls/Switch.tsx b/website/src/components/controls/Switch.tsx
@@ -1,8 +1,18 @@
 import React, { memo, useCallback } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-const Switch = memo(({ id, value, onChange, colors = {} }) => {
+interface SwitchProps {
+    id: string
+    value: boolean
+    onChange: (v: boolean) => void
+    colors?: {
+        on?: string
+        off?: string
+        dot?: string
+    }
+}
+
+export const Switch = memo(({ id, value, onChange, colors = {} }: SwitchProps) => {
     const handleChange = useCallback(event => onChange(event.target.checked), [onChange])
 
     return (
@@ -19,27 +29,15 @@ const Switch = memo(({ id, value, onChange, colors = {} }) => {
     )
 })
 
-Switch.displayName = 'Switch'
-Switch.propTypes = {
-    id: PropTypes.string.isRequired,
-    value: PropTypes.bool.isRequired,
-    onChange: PropTypes.func.isRequired,
-    colors: PropTypes.shape({
-        on: PropTypes.string,
-        off: PropTypes.string,
-        dot: PropTypes.string,
-    }),
-}
-
-export default Switch
-
 const Wrapper = styled.span`
     display: inline-block;
     vertical-align: text-bottom;
     margin: 0;
 `
 
-const Input = styled.input`
+const Input = styled.input<{
+    colors: SwitchProps['colors']
+}>`
     position: absolute;
     margin-left: -9999px;
     visibility: hidden;
diff --git a/website/src/components/controls/SwitchControl.js b/website/src/components/controls/SwitchControl.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import { Help } from './Help'
-import Switch from './Switch'
+import { Switch } from './Switch'
 
 const SwitchControl = memo(({ id, property, flavors, currentFlavor, value, onChange }) => {
     return (
diff --git a/website/src/components/controls/SwitchableRangeControl.js b/website/src/components/controls/SwitchableRangeControl.js
@@ -6,7 +6,7 @@ import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import { Help } from './Help'
 import TextInput from './TextInput'
-import Switch from './Switch'
+import { Switch } from './Switch'
 
 const SwitchRow = styled.div`
     display: flex;
diff --git a/website/src/components/controls/ValueFormatControl.js b/website/src/components/controls/ValueFormatControl.js
@@ -5,7 +5,7 @@ import { components } from 'react-select'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import Switch from './Switch'
+import { Switch } from './Switch'
 import Select from './Select'
 import { Help } from './Help'
 import { FaChevronUp, FaChevronDown } from 'react-icons/fa'
