From 1f4f480ebc9f5f2b46194096781527e1a5ce9996 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sun, 26 Dec 2021 09:11:09 +0900
Subject: [PATCH] feat(website): migrate the axes guide to TypeScript

---
 .../axes/{AxesLegend.js => AxesLegend.tsx}    | 14 ++--
 .../{AxesPosition.js => AxesPosition.tsx}     |  9 +--
 .../axes/{AxesTicks.js => AxesTicks.tsx}      | 26 +++-----
 .../guides/axes/{scales.js => scales.tsx}     |  7 +-
 .../guides/axes/{theme.js => theme.tsx}       | 13 ++--
 website/src/pages/guides/axes.tsx             | 66 +++++++++----------
 website/src/theming/context.js                |  9 ---
 website/src/theming/context.tsx               |  6 ++
 8 files changed, 69 insertions(+), 81 deletions(-)
 rename website/src/components/guides/axes/{AxesLegend.js => AxesLegend.tsx} (87%)
 rename website/src/components/guides/axes/{AxesPosition.js => AxesPosition.tsx} (91%)
 rename website/src/components/guides/axes/{AxesTicks.js => AxesTicks.tsx} (88%)
 rename website/src/components/guides/axes/{scales.js => scales.tsx} (72%)
 rename website/src/components/guides/axes/{theme.js => theme.tsx} (62%)
 delete mode 100644 website/src/theming/context.js
 create mode 100644 website/src/theming/context.tsx

diff --git a/website/src/components/guides/axes/AxesLegend.js b/website/src/components/guides/axes/AxesLegend.tsx
similarity index 87%
rename from website/src/components/guides/axes/AxesLegend.js
rename to website/src/components/guides/axes/AxesLegend.tsx
index dbabf68996..efcc104766 100644
--- a/website/src/components/guides/axes/AxesLegend.js
+++ b/website/src/components/guides/axes/AxesLegend.tsx
@@ -1,11 +1,15 @@
 import React from 'react'
-import { ThemeProvider, MotionConfigProvider } from '@nivo/core'
+import {
+    ThemeProvider,
+    // @ts-ignore
+    MotionConfigProvider,
+} from '@nivo/core'
 import { Axis } from '@nivo/axes'
 import { linearXScale, linearYScale } from './scales'
 import { FullWidthBanner, DescriptionBlock } from '../../styled'
 import { useAxisTheme } from './theme'
 
-const axisPositions = ['start', 'middle', 'end']
+const axisPositions = ['start', 'middle', 'end'] as const
 
 const AxesLegend = () => {
     const theme = useAxisTheme()
@@ -42,9 +46,6 @@ const AxesLegend = () => {
                                             axis="x"
                                             scale={linearXScale}
                                             length={280}
-                                            animate={false}
-                                            motionStiffness={0}
-                                            motionDamping={0}
                                             legend={position}
                                             legendPosition={position}
                                             legendOffset={-32}
@@ -60,9 +61,6 @@ const AxesLegend = () => {
                                             axis="y"
                                             scale={linearYScale}
                                             length={160}
-                                            animate={false}
-                                            motionStiffness={0}
-                                            motionDamping={0}
                                             legend={position}
                                             legendPosition={position}
                                             legendOffset={-32}
diff --git a/website/src/components/guides/axes/AxesPosition.js b/website/src/components/guides/axes/AxesPosition.tsx
similarity index 91%
rename from website/src/components/guides/axes/AxesPosition.js
rename to website/src/components/guides/axes/AxesPosition.tsx
index c0d0dc8b9c..7db8106610 100644
--- a/website/src/components/guides/axes/AxesPosition.js
+++ b/website/src/components/guides/axes/AxesPosition.tsx
@@ -1,5 +1,9 @@
 import React from 'react'
-import { ThemeProvider, MotionConfigProvider } from '@nivo/core'
+import {
+    ThemeProvider,
+    // @ts-ignore
+    MotionConfigProvider,
+} from '@nivo/core'
 import { Axes } from '@nivo/axes'
 import { linearXScale, linearYScale } from './scales'
 import { FullWidthBanner, DescriptionBlock } from '../../styled'
@@ -28,9 +32,6 @@ const AxesPosition = () => {
                                         yScale={linearYScale}
                                         width={280}
                                         height={160}
-                                        animate={false}
-                                        motionStiffness={0}
-                                        motionDamping={0}
                                         top={{
                                             legend: 'axisTop',
                                             legendPosition: 'middle',
diff --git a/website/src/components/guides/axes/AxesTicks.js b/website/src/components/guides/axes/AxesTicks.tsx
similarity index 88%
rename from website/src/components/guides/axes/AxesTicks.js
rename to website/src/components/guides/axes/AxesTicks.tsx
index 9ccaae52ab..6ca9f4099c 100644
--- a/website/src/components/guides/axes/AxesTicks.js
+++ b/website/src/components/guides/axes/AxesTicks.tsx
@@ -1,5 +1,9 @@
 import React from 'react'
-import { ThemeProvider, MotionConfigProvider } from '@nivo/core'
+import {
+    ThemeProvider,
+    // @ts-ignore
+    MotionConfigProvider,
+} from '@nivo/core'
 import { Axis } from '@nivo/axes'
 import { linearXScale, pointXScale, timeXScale, timeXScaleHours } from './scales'
 import { FullWidthBanner, DescriptionBlock } from '../../styled'
@@ -63,11 +67,9 @@ const AxesTicks = () => {
                                 <g transform={`translate(50,50)`}>
                                     <Axis
                                         axis="x"
-                                        scale={pointXScale}
+                                        scale={pointXScale as any}
                                         tickValues={['A', 'C', 'E', 'G', 'I']}
                                         length={280}
-                                        theme={theme}
-                                        animate={false}
                                         legend="point scale ['A', 'C', 'E', 'G', 'I']"
                                         legendPosition="start"
                                         legendOffset={-38}
@@ -80,8 +82,6 @@ const AxesTicks = () => {
                                         scale={linearXScale}
                                         tickValues={[0, 20, 40, 60, 80]}
                                         length={280}
-                                        theme={theme}
-                                        animate={false}
                                         legend="linear scale [0, 20, 40, 60, 80]"
                                         legendPosition="start"
                                         legendOffset={-38}
@@ -91,16 +91,14 @@ const AxesTicks = () => {
                                 <g transform={`translate(50,190)`}>
                                     <Axis
                                         axis="x"
-                                        scale={timeXScale}
+                                        scale={timeXScale as any}
                                         tickValues={[
                                             new Date(2019, 0, 1, 0, 0, 0, 0),
                                             new Date(2019, 6, 1, 0, 0, 0, 0),
                                             new Date(2020, 0, 1, 0, 0, 0, 0),
                                         ]}
                                         length={280}
-                                        theme={theme}
                                         format="%Y/%m"
-                                        animate={false}
                                         legend="time scale with three dates"
                                         legendPosition="start"
                                         legendOffset={-38}
@@ -112,12 +110,10 @@ const AxesTicks = () => {
                                 <g transform={`translate(50,50)`}>
                                     <Axis
                                         axis="x"
-                                        scale={timeXScaleHours}
+                                        scale={timeXScaleHours as any}
                                         tickValues="every 15 minutes"
                                         format="%H:%M"
                                         length={280}
-                                        theme={theme}
-                                        animate={false}
                                         legend="time scale, every 15 minutes"
                                         legendPosition="start"
                                         legendOffset={-38}
@@ -130,8 +126,6 @@ const AxesTicks = () => {
                                         scale={linearXScale}
                                         tickValues={5}
                                         length={280}
-                                        theme={theme}
-                                        animate={false}
                                         legend="linear scale, tickValues: 5"
                                         legendPosition="start"
                                         legendOffset={-38}
@@ -141,12 +135,10 @@ const AxesTicks = () => {
                                 <g transform={`translate(50,190)`}>
                                     <Axis
                                         axis="x"
-                                        scale={timeXScale}
+                                        scale={timeXScale as any}
                                         tickValues={5}
                                         length={280}
-                                        theme={theme}
                                         format="%Y/%m"
-                                        animate={false}
                                         legend="time scale, tickValues: 5"
                                         legendPosition="start"
                                         legendOffset={-38}
diff --git a/website/src/components/guides/axes/scales.js b/website/src/components/guides/axes/scales.tsx
similarity index 72%
rename from website/src/components/guides/axes/scales.js
rename to website/src/components/guides/axes/scales.tsx
index 3a9a1bd107..6bf439067d 100644
--- a/website/src/components/guides/axes/scales.js
+++ b/website/src/components/guides/axes/scales.tsx
@@ -1,10 +1,9 @@
 import { scaleLinear, scalePoint, scaleTime } from 'd3-scale'
+import { castLinearScale } from '@nivo/scales'
 
-export const linearXScale = scaleLinear().range([0, 280]).domain([0, 80])
-linearXScale.type = 'linear'
+export const linearXScale = castLinearScale(scaleLinear().range([0, 280]).domain([0, 80]))
 
-export const linearYScale = scaleLinear().range([160, 0]).domain([0, 35])
-linearYScale.type = 'linear'
+export const linearYScale = castLinearScale(scaleLinear().range([160, 0]).domain([0, 35]))
 
 export const pointXScale = scalePoint()
     .range([0, 280])
diff --git a/website/src/components/guides/axes/theme.js b/website/src/components/guides/axes/theme.tsx
similarity index 62%
rename from website/src/components/guides/axes/theme.js
rename to website/src/components/guides/axes/theme.tsx
index 92dbf3a82e..3e5f6ea136 100644
--- a/website/src/components/guides/axes/theme.js
+++ b/website/src/components/guides/axes/theme.tsx
@@ -1,24 +1,25 @@
 import { useMemo } from 'react'
+import { Theme } from '@nivo/core'
 import { useTheme } from '../../../theming/context'
 
-export const useAxisTheme = () => {
+export const useAxisTheme = (): Theme => {
     const theme = useTheme()
-    const nivoTheme = useMemo(() => {
+    const nivoTheme: Theme = useMemo(() => {
         return {
             ...theme.nivo,
             axis: {
                 ...theme.nivo.axis,
                 domain: {
-                    ...theme.nivo.axis.domain,
+                    ...theme.nivo.axis!.domain,
                     line: {
-                        ...theme.nivo.axis.domain.line,
+                        ...theme.nivo.axis!.domain!.line,
                         strokeWidth: 1,
                     },
                 },
                 legend: {
-                    ...theme.nivo.axis.legend,
+                    ...theme.nivo.axis!.legend,
                     text: {
-                        ...theme.nivo.axis.legend.text,
+                        ...theme.nivo.axis!.legend!.text,
                         fill: theme.colors.accent,
                     },
                 },
diff --git a/website/src/pages/guides/axes.tsx b/website/src/pages/guides/axes.tsx
index f724019064..d6149d7b4a 100644
--- a/website/src/pages/guides/axes.tsx
+++ b/website/src/pages/guides/axes.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Link } from 'gatsby'
 import Layout from '../../components/Layout'
 import { Seo } from '../../components/Seo'
@@ -8,36 +8,36 @@ import AxesTicks from '../../components/guides/axes/AxesTicks'
 import AxesLegend from '../../components/guides/axes/AxesLegend'
 import { DescriptionBlock } from '../../components/styled'
 
-export default class Axes extends Component {
-    render() {
-        return (
-            <Layout>
-                <Seo title="Axes Guide" />
-                <PageContent>
-                    <div className="guide__header">
-                        <h1>Axes</h1>
-                    </div>
-                </PageContent>
-                <DescriptionBlock>
-                    <h2>Using axes in nivo components</h2>
-                    <p>
-                        Axes are built on top of{' '}
-                        <a
-                            href="https://github.com/d3/d3-scale"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            d3 scales
-                        </a>
-                        . A lot of nivo components make use of it (<Link to="/bar">Bar</Link>,{' '}
-                        <Link to="/line">Line</Link>, <Link to="/scatterplot">ScatterPlot</Link>
-                        …).
-                    </p>
-                </DescriptionBlock>
-                <AxesPosition />
-                <AxesTicks />
-                <AxesLegend />
-            </Layout>
-        )
-    }
+const AxesGuide = () => {
+    return (
+        <Layout>
+            <Seo title="Axes Guide" />
+            <PageContent>
+                <div className="guide__header">
+                    <h1>Axes</h1>
+                </div>
+            </PageContent>
+            <DescriptionBlock>
+                <h2>Using axes in nivo components</h2>
+                <p>
+                    Axes are built on top of{' '}
+                    <a
+                        href="https://github.com/d3/d3-scale"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        d3 scales
+                    </a>
+                    . A lot of nivo components make use of it (<Link to="/bar/">Bar</Link>,{' '}
+                    <Link to="/line/">Line</Link>, <Link to="/scatterplot/">ScatterPlot</Link>
+                    …).
+                </p>
+            </DescriptionBlock>
+            <AxesPosition />
+            <AxesTicks />
+            <AxesLegend />
+        </Layout>
+    )
 }
+
+export default AxesGuide
diff --git a/website/src/theming/context.js b/website/src/theming/context.js
deleted file mode 100644
index e3c3146f3e..0000000000
--- a/website/src/theming/context.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createContext, useContext } from 'react'
-
-export const themeContext = createContext()
-
-export const useTheme = () => {
-    const theme = useContext(themeContext)
-
-    return theme
-}
diff --git a/website/src/theming/context.tsx b/website/src/theming/context.tsx
new file mode 100644
index 0000000000..7508345f68
--- /dev/null
+++ b/website/src/theming/context.tsx
@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react'
+import { DefaultTheme } from 'styled-components'
+
+export const themeContext = createContext<DefaultTheme>({} as any)
+
+export const useTheme = (): DefaultTheme => useContext(themeContext)