From e0a0ffbb064e132a6fd8bc312042126559ac701c Mon Sep 17 00:00:00 2001 From: plouc Date: Mon, 3 Jan 2022 03:49:34 +0900 Subject: [PATCH] feat(website): inline global styles --- website/gatsby-browser.js | 21 +++++++---- website/gatsby-ssr.js | 21 +++++++---- website/src/components/Highlight.tsx | 2 +- website/src/components/PageWrapper.tsx | 34 +++-------------- website/src/components/RootWrapper.tsx | 7 ++++ website/src/components/ThemeSelector.tsx | 32 +++++++--------- .../components/components/ComponentTabs.tsx | 3 +- .../components/ComponentTemplate.tsx | 2 +- .../components/api-client/ApiTabs.tsx | 3 +- .../explorer/ComponentsGridItem.tsx | 3 +- .../components/controls/OpacityControl.tsx | 4 +- website/src/components/controls/Select.tsx | 2 +- website/src/components/guides/axes/theme.tsx | 2 +- .../guides/colors/ColorsIllustrations.js | 2 +- .../gradients/GradientsIllustrations.js | 2 +- .../guides/legends/LegendDirection.tsx | 2 +- .../guides/legends/LegendItemDirection.tsx | 2 +- .../guides/legends/LegendPosition.tsx | 2 +- .../components/guides/legends/SymbolShape.tsx | 2 +- .../guides/patterns/PatternsIllustrations.tsx | 4 +- website/src/components/home/Home.js | 2 +- website/src/components/nav/MiniNavLink.js | 3 +- website/src/components/state.js | 24 ------------ website/src/pages/guides/legends.tsx | 2 +- .../src/theming/SwitchableThemeProvider.tsx | 37 +++++++++++++++++++ website/src/theming/context.tsx | 6 --- 26 files changed, 108 insertions(+), 118 deletions(-) create mode 100644 website/src/components/RootWrapper.tsx delete mode 100644 website/src/components/state.js create mode 100644 website/src/theming/SwitchableThemeProvider.tsx delete mode 100644 website/src/theming/context.tsx diff --git a/website/gatsby-browser.js b/website/gatsby-browser.js index 37947bc8d7..ec42ace55a 100644 --- a/website/gatsby-browser.js +++ b/website/gatsby-browser.js @@ -1,13 +1,18 @@ import React from 'react' -import PageWrapper from './src/components/PageWrapper' +import { RootWrapper } from './src/components/RootWrapper' +import { PageWrapper } from './src/components/PageWrapper' -export const wrapPageElement = ({ element }) => { - return ( - - {element} - - ) -} +export const wrapRootElement = ({ element }) => ( + + {element} + +) + +export const wrapPageElement = ({ element }) => ( + + {element} + +) export const onServiceWorkerUpdateReady = () => { const answer = window.confirm([ diff --git a/website/gatsby-ssr.js b/website/gatsby-ssr.js index 5c8b5bb111..0fe1ad7f75 100644 --- a/website/gatsby-ssr.js +++ b/website/gatsby-ssr.js @@ -1,10 +1,15 @@ import React from 'react' -import PageWrapper from './src/components/PageWrapper' +import { RootWrapper } from './src/components/RootWrapper' +import { PageWrapper } from './src/components/PageWrapper' -export const wrapRootElement = ({ element }) => { - return ( - - {element} - - ) -} \ No newline at end of file +export const wrapRootElement = ({ element }) => ( + + {element} + +) + +export const wrapPageElement = ({ element }) => ( + + {element} + +) diff --git a/website/src/components/Highlight.tsx b/website/src/components/Highlight.tsx index eddb91e7bd..7cab234119 100644 --- a/website/src/components/Highlight.tsx +++ b/website/src/components/Highlight.tsx @@ -1,6 +1,6 @@ import React from 'react' import HighlightBase, { defaultProps, Language } from 'prism-react-renderer' -import { useTheme } from '../theming/context' +import { useTheme } from 'styled-components' interface HighlightProps { code: string diff --git a/website/src/components/PageWrapper.tsx b/website/src/components/PageWrapper.tsx index 492e69e44e..3be3315ce3 100644 --- a/website/src/components/PageWrapper.tsx +++ b/website/src/components/PageWrapper.tsx @@ -1,38 +1,16 @@ -import '../styles/index.css' -import React, { useReducer } from 'react' -import { ThemeProvider } from 'styled-components' +import React from 'react' import { GlobalStyle } from '../theming/GlobalStyle' -import theme from '../theming/theme' -import { themeContext } from '../theming/context' -import { globalDispatchContext, globalStateContext, globalStateReducer } from './state' -// import useLocalStorage from '../lib/useLocalStorage' - -const PageWrapper = ({ children }) => { - // const [themeId] = useLocalStorage('theme', 'light') - const [state, dispatch] = useReducer(globalStateReducer, { - theme: 'light', - }) - const currentTheme = theme[state.theme] +export const PageWrapper = ({ children }: { children: any }) => { const isCapturing = children.props && children.props.location && children.props.location.search.indexOf('capture=1') !== -1 return ( - - - - -
- - {children} -
- - - - + <> + +
{children}
+ ) } - -export default PageWrapper diff --git a/website/src/components/RootWrapper.tsx b/website/src/components/RootWrapper.tsx new file mode 100644 index 0000000000..91cae4c4b1 --- /dev/null +++ b/website/src/components/RootWrapper.tsx @@ -0,0 +1,7 @@ +import React, { ReactNode } from 'react' +import { SwitchableThemeProvider } from '../theming/SwitchableThemeProvider' +import '../styles/index.css' + +export const RootWrapper = ({ children }: { children: ReactNode }) => ( + {children} +) diff --git a/website/src/components/ThemeSelector.tsx b/website/src/components/ThemeSelector.tsx index 2c414826ff..4eee1ad8d2 100644 --- a/website/src/components/ThemeSelector.tsx +++ b/website/src/components/ThemeSelector.tsx @@ -1,27 +1,23 @@ import React, { useCallback, useMemo } from 'react' -import styled from 'styled-components' -import { useTheme } from '../theming/context' -import { useGlobalDispatch, useGlobalState } from './state' +import styled, { useTheme } from 'styled-components' +import { useSetTheme } from '../theming/SwitchableThemeProvider' import { Switch } from './controls/Switch' -// import useLocalStorage from '../lib/useLocalStorage' const ThemeSelector = () => { - // const [themeId, saveThemeId] = useLocalStorage('theme') - const dispatch = useGlobalDispatch() - const state = useGlobalState() + const theme = useTheme() + const themeId = theme.id + const setThemeId = useSetTheme() + const toggleTheme = useCallback(() => { - const theme = state.theme === 'light' ? 'dark' : 'light' - // saveThemeId(theme) - dispatch({ type: 'setTheme', theme }) - }, [dispatch, state.theme]) + setThemeId(themeId === 'light' ? 'dark' : 'light') + }, [theme, themeId]) + const setTheme = useCallback( theme => { - // saveThemeId(theme) - dispatch({ type: 'setTheme', theme }) + setThemeId(theme) }, - [dispatch] + [setThemeId] ) - const theme = useTheme() const colors = useMemo( () => ({ on: theme.colors.cardBackground, @@ -35,20 +31,20 @@ const ThemeSelector = () => { setTheme('light')} > light setTheme('dark')} > dark diff --git a/website/src/components/components/ComponentTabs.tsx b/website/src/components/components/ComponentTabs.tsx index ecd113aacb..c4f81238cc 100644 --- a/website/src/components/components/ComponentTabs.tsx +++ b/website/src/components/components/ComponentTabs.tsx @@ -1,7 +1,6 @@ import React, { PropsWithChildren, useState } from 'react' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import media from '../../theming/mediaQueries' -import { useTheme } from '../../theming/context' import { Highlight } from '../Highlight' import { CodeBlock } from '../CodeBlock' diff --git a/website/src/components/components/ComponentTemplate.tsx b/website/src/components/components/ComponentTemplate.tsx index 82fd8c5d8e..247f8d49ad 100644 --- a/website/src/components/components/ComponentTemplate.tsx +++ b/website/src/components/components/ComponentTemplate.tsx @@ -1,10 +1,10 @@ import React, { useState, useCallback, useMemo } from 'react' import { IGatsbyImageData } from 'gatsby-plugin-image' +import { useTheme } from 'styled-components' import { Theme as NivoTheme } from '@nivo/core' import { startCase } from 'lodash' import { Seo } from '../Seo' import Layout from '../Layout' -import { useTheme } from '../../theming/context' import { generateChartCode } from '../../lib/generateChartCode' import { ComponentPage } from './ComponentPage' import { ComponentHeader } from './ComponentHeader' diff --git a/website/src/components/components/api-client/ApiTabs.tsx b/website/src/components/components/api-client/ApiTabs.tsx index 2281bf86d3..0384675698 100644 --- a/website/src/components/components/api-client/ApiTabs.tsx +++ b/website/src/components/components/api-client/ApiTabs.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react' -import styled, { keyframes } from 'styled-components' +import styled, { keyframes, useTheme } from 'styled-components' import media from '../../../theming/mediaQueries' -import { useTheme } from '../../../theming/context' import { CodeBlock } from '../../CodeBlock' import { ApiPreview } from './ApiPreview' diff --git a/website/src/components/components/explorer/ComponentsGridItem.tsx b/website/src/components/components/explorer/ComponentsGridItem.tsx index adb14f80ea..2bd6560d8f 100644 --- a/website/src/components/components/explorer/ComponentsGridItem.tsx +++ b/website/src/components/components/explorer/ComponentsGridItem.tsx @@ -1,8 +1,7 @@ import React, { memo } from 'react' import { Link } from 'gatsby' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import media from '../../../theming/mediaQueries' -import { useTheme } from '../../../theming/context' interface ComponentsGridItemProps { path: string diff --git a/website/src/components/controls/OpacityControl.tsx b/website/src/components/controls/OpacityControl.tsx index 4ca15fa1cc..13fce4099c 100644 --- a/website/src/components/controls/OpacityControl.tsx +++ b/website/src/components/controls/OpacityControl.tsx @@ -1,11 +1,9 @@ import React, { useCallback } from 'react' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { Control } from './Control' import { PropertyHeader } from './PropertyHeader' import { TextInput } from './TextInput' import { Help } from './Help' -// @ts-ignore -import { useTheme } from '../../theming/context' import { Flavor, ChartProperty } from '../../types' import { OpacityControlConfig } from './types' diff --git a/website/src/components/controls/Select.tsx b/website/src/components/controls/Select.tsx index fba0113c6f..d5c5267f8b 100644 --- a/website/src/components/controls/Select.tsx +++ b/website/src/components/controls/Select.tsx @@ -1,6 +1,6 @@ import React from 'react' import ReactSelect from 'react-select' -import { useTheme } from '../../theming/context' +import { useTheme } from 'styled-components' const Select = props => { const theme = useTheme() diff --git a/website/src/components/guides/axes/theme.tsx b/website/src/components/guides/axes/theme.tsx index 3e5f6ea136..33c48d19d0 100644 --- a/website/src/components/guides/axes/theme.tsx +++ b/website/src/components/guides/axes/theme.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react' import { Theme } from '@nivo/core' -import { useTheme } from '../../../theming/context' +import { useTheme } from 'styled-components' export const useAxisTheme = (): Theme => { const theme = useTheme() diff --git a/website/src/components/guides/colors/ColorsIllustrations.js b/website/src/components/guides/colors/ColorsIllustrations.js index 80126fdc22..bb7496bcc7 100644 --- a/website/src/components/guides/colors/ColorsIllustrations.js +++ b/website/src/components/guides/colors/ColorsIllustrations.js @@ -1,10 +1,10 @@ import React from 'react' +import { useTheme } from 'styled-components' import { ResponsiveBar } from '@nivo/bar' import { ResponsiveStream } from '@nivo/stream' import { ResponsiveTreeMap } from '@nivo/treemap' import { generateCountriesData } from '@nivo/generators' import { FullWidthBanner } from '../../styled' -import { useTheme } from '../../../theming/context' const ColorsIllustrations = () => { const theme = useTheme() diff --git a/website/src/components/guides/gradients/GradientsIllustrations.js b/website/src/components/guides/gradients/GradientsIllustrations.js index bab730a558..16c67763f5 100644 --- a/website/src/components/guides/gradients/GradientsIllustrations.js +++ b/website/src/components/guides/gradients/GradientsIllustrations.js @@ -1,11 +1,11 @@ import React from 'react' +import { useTheme } from 'styled-components' import { linearGradientDef } from '@nivo/core' import { ResponsiveBar } from '@nivo/bar' import { ResponsiveStream } from '@nivo/stream' import { ResponsiveTreeMap } from '@nivo/treemap' import { generateCountriesData } from '@nivo/generators' import { FullWidthBanner } from '../../styled' -import { useTheme } from '../../../theming/context' const GradientsIllustrations = () => { const theme = useTheme() diff --git a/website/src/components/guides/legends/LegendDirection.tsx b/website/src/components/guides/legends/LegendDirection.tsx index 3dd1956130..e09ae7186e 100644 --- a/website/src/components/guides/legends/LegendDirection.tsx +++ b/website/src/components/guides/legends/LegendDirection.tsx @@ -1,6 +1,6 @@ import React from 'react' +import { useTheme } from 'styled-components' import { BoxLegendSvg } from '@nivo/legends' -import { useTheme } from '../../../theming/context' const legendProps = { containerWidth: 800, diff --git a/website/src/components/guides/legends/LegendItemDirection.tsx b/website/src/components/guides/legends/LegendItemDirection.tsx index fe9ad0bdcf..98cedbb108 100644 --- a/website/src/components/guides/legends/LegendItemDirection.tsx +++ b/website/src/components/guides/legends/LegendItemDirection.tsx @@ -1,6 +1,6 @@ import React from 'react' +import { useTheme } from 'styled-components' import { LegendSvgItem } from '@nivo/legends' -import { useTheme } from '../../../theming/context' const itemDirections = ['left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top'] as const diff --git a/website/src/components/guides/legends/LegendPosition.tsx b/website/src/components/guides/legends/LegendPosition.tsx index 0ca946f257..b9a557a212 100644 --- a/website/src/components/guides/legends/LegendPosition.tsx +++ b/website/src/components/guides/legends/LegendPosition.tsx @@ -1,7 +1,7 @@ import React from 'react' import omit from 'lodash/omit' +import { useTheme } from 'styled-components' import { BoxLegendSvg } from '@nivo/legends' -import { useTheme } from '../../../theming/context' const anchors = [ 'top-left', diff --git a/website/src/components/guides/legends/SymbolShape.tsx b/website/src/components/guides/legends/SymbolShape.tsx index 4646a3b57e..11b2f1e8d9 100644 --- a/website/src/components/guides/legends/SymbolShape.tsx +++ b/website/src/components/guides/legends/SymbolShape.tsx @@ -1,7 +1,7 @@ import React from 'react' +import { useTheme } from 'styled-components' import { LegendSvgItem } from '@nivo/legends' import { Highlight } from '../../Highlight' -import { useTheme } from '../../../theming/context' const shapes = ['square', 'circle', 'triangle', 'diamond'] as const diff --git a/website/src/components/guides/patterns/PatternsIllustrations.tsx b/website/src/components/guides/patterns/PatternsIllustrations.tsx index 25ad1771e6..262b176455 100644 --- a/website/src/components/guides/patterns/PatternsIllustrations.tsx +++ b/website/src/components/guides/patterns/PatternsIllustrations.tsx @@ -1,13 +1,11 @@ import React from 'react' -// @ts-ignore +import { useTheme } from 'styled-components' import { patternDotsDef, patternLinesDef, patternSquaresDef } from '@nivo/core' import { ResponsiveBar } from '@nivo/bar' import { ResponsiveStream } from '@nivo/stream' import { ResponsiveTreeMap } from '@nivo/treemap' import { generateCountriesData } from '@nivo/generators' import { FullWidthBanner } from '../../styled' -// @ts-ignore -import { useTheme } from '../../../theming/context' export const PatternsIllustrations = () => { const theme = useTheme() diff --git a/website/src/components/home/Home.js b/website/src/components/home/Home.js index 4c06d90139..c3246389a3 100644 --- a/website/src/components/home/Home.js +++ b/website/src/components/home/Home.js @@ -1,5 +1,5 @@ import React from 'react' -import { useTheme } from '../../theming/context' +import { useTheme } from 'styled-components' import { Container, HomeBaseline, HomeLogo } from './styled' import { HomeChord } from './HomeChord' import HomeLine from './HomeLine' diff --git a/website/src/components/nav/MiniNavLink.js b/website/src/components/nav/MiniNavLink.js index 2f18740986..4878280b50 100644 --- a/website/src/components/nav/MiniNavLink.js +++ b/website/src/components/nav/MiniNavLink.js @@ -1,7 +1,6 @@ import React, { memo } from 'react' import { Link } from 'gatsby' -import styled from 'styled-components' -import { useTheme } from '../../theming/context' +import styled, { useTheme } from 'styled-components' const Label = styled.span` position: absolute; diff --git a/website/src/components/state.js b/website/src/components/state.js deleted file mode 100644 index 2a99b1e251..0000000000 --- a/website/src/components/state.js +++ /dev/null @@ -1,24 +0,0 @@ -import { createContext, useContext } from 'react' - -export const globalStateContext = createContext() -export const globalDispatchContext = createContext() - -export const useGlobalState = () => useContext(globalStateContext) -export const useGlobalDispatch = () => useContext(globalDispatchContext) - -export const globalStateReducer = (state, action) => { - switch (action.type) { - case 'setTheme': - if (action.theme !== state.theme) { - return { - ...state, - theme: action.theme, - } - } - - return state - - default: - return state - } -} diff --git a/website/src/pages/guides/legends.tsx b/website/src/pages/guides/legends.tsx index 94ba606f96..a995280d93 100644 --- a/website/src/pages/guides/legends.tsx +++ b/website/src/pages/guides/legends.tsx @@ -1,7 +1,7 @@ import React from 'react' +import { useTheme } from 'styled-components' // @ts-ignore import { themeContext } from '@nivo/core' -import { useTheme } from '../../theming/context' import Layout from '../../components/Layout' import { Seo } from '../../components/Seo' import PageContent from '../../components/PageContent' diff --git a/website/src/theming/SwitchableThemeProvider.tsx b/website/src/theming/SwitchableThemeProvider.tsx new file mode 100644 index 0000000000..4c89a4f6c8 --- /dev/null +++ b/website/src/theming/SwitchableThemeProvider.tsx @@ -0,0 +1,37 @@ +import React, { createContext, ReactNode, useContext, useMemo, useState } from 'react' +import { ThemeProvider } from 'styled-components' +import themes from './theme' + +type ThemeId = keyof typeof themes + +interface ThemeIdContextValue { + themeId: ThemeId + setThemeId: (themeId: ThemeId) => void +} + +const ThemeIdContext = createContext({} as any) + +export const useSetTheme = () => { + const { setThemeId } = useContext(ThemeIdContext) + + return setThemeId +} + +export const SwitchableThemeProvider = ({ children }: { children: ReactNode }) => { + const [themeId, setThemeId] = useState('light') + const contextValue = useMemo( + () => ({ + themeId, + setThemeId, + }), + [themeId, setThemeId] + ) + + const theme = themes[themeId] + + return ( + + {children} + + ) +} diff --git a/website/src/theming/context.tsx b/website/src/theming/context.tsx deleted file mode 100644 index 7508345f68..0000000000 --- a/website/src/theming/context.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { createContext, useContext } from 'react' -import { DefaultTheme } from 'styled-components' - -export const themeContext = createContext({} as any) - -export const useTheme = (): DefaultTheme => useContext(themeContext)