feat(website): migrate the legends guide to TypeScript

plouc · Dec 26, 2021 · c3d7609 · c3d7609
1 parent 1f4f480
commit c3d7609
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 33 deletions.
diff --git a/website/src/components/guides/axes/AxesLegend.tsx b/website/src/components/guides/axes/AxesLegend.tsx
@@ -11,7 +11,7 @@ import { useAxisTheme } from './theme'
 
 const axisPositions = ['start', 'middle', 'end'] as const
 
-const AxesLegend = () => {
+export const AxesLegend = () => {
     const theme = useAxisTheme()
 
     return (
@@ -76,5 +76,3 @@ const AxesLegend = () => {
         </>
     )
 }
-
-export default AxesLegend
diff --git a/website/src/components/guides/axes/AxesPosition.tsx b/website/src/components/guides/axes/AxesPosition.tsx
@@ -9,7 +9,7 @@ import { linearXScale, linearYScale } from './scales'
 import { FullWidthBanner, DescriptionBlock } from '../../styled'
 import { useAxisTheme } from './theme'
 
-const AxesPosition = () => {
+export const AxesPosition = () => {
     const theme = useAxisTheme()
 
     return (
@@ -62,5 +62,3 @@ const AxesPosition = () => {
         </>
     )
 }
-
-export default AxesPosition
diff --git a/website/src/components/guides/axes/AxesTicks.tsx b/website/src/components/guides/axes/AxesTicks.tsx
@@ -9,7 +9,7 @@ import { linearXScale, pointXScale, timeXScale, timeXScaleHours } from './scales
 import { FullWidthBanner, DescriptionBlock } from '../../styled'
 import { useAxisTheme } from './theme'
 
-const AxesTicks = () => {
+export const AxesTicks = () => {
     const theme = useAxisTheme()
 
     return (
@@ -153,5 +153,3 @@ const AxesTicks = () => {
         </>
     )
 }
-
-export default AxesTicks
diff --git a/website/src/components/guides/axes/index.ts b/website/src/components/guides/axes/index.ts
@@ -0,0 +1,3 @@
+export * from './AxesLegend'
+export * from './AxesPosition'
+export * from './AxesTicks'
diff --git a/...ponents/guides/legends/LegendDirection.js → ...onents/guides/legends/LegendDirection.tsx b/...ponents/guides/legends/LegendDirection.js → ...onents/guides/legends/LegendDirection.tsx
@@ -9,7 +9,7 @@ const legendProps = {
     itemHeight: 24,
 }
 
-const LegendDirection = () => {
+export const LegendDirection = () => {
     const theme = useTheme()
 
     return (
@@ -47,5 +47,3 @@ const LegendDirection = () => {
         </div>
     )
 }
-
-export default LegendDirection
diff --git a/...nts/guides/legends/LegendItemDirection.js → ...ts/guides/legends/LegendItemDirection.tsx b/...nts/guides/legends/LegendItemDirection.js → ...ts/guides/legends/LegendItemDirection.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { LegendSvgItem } from '@nivo/legends'
 import { useTheme } from '../../../theming/context'
 
-const itemDirections = ['left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top']
+const itemDirections = ['left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top'] as const
 
-const LegendItemDirection = () => {
+export const LegendItemDirection = () => {
     const theme = useTheme()
 
     const itemsProps = {
@@ -96,5 +96,3 @@ const LegendItemDirection = () => {
         </div>
     )
 }
-
-export default LegendItemDirection
diff --git a/...mponents/guides/legends/LegendPosition.js → ...ponents/guides/legends/LegendPosition.tsx b/...mponents/guides/legends/LegendPosition.js → ...ponents/guides/legends/LegendPosition.tsx
@@ -13,7 +13,7 @@ const anchors = [
     'bottom-left',
     'left',
     'center',
-]
+] as const
 
 const translateExamples = [
     {
@@ -48,7 +48,7 @@ const legendProps = {
     direction: 'column',
 }
 
-const LegendPosition = () => {
+export const LegendPosition = () => {
     const theme = useTheme()
 
     return (
@@ -177,5 +177,3 @@ const LegendPosition = () => {
         </div>
     )
 }
-
-export default LegendPosition
diff --git a/.../components/guides/legends/SymbolShape.js → ...components/guides/legends/SymbolShape.tsx b/.../components/guides/legends/SymbolShape.js → ...components/guides/legends/SymbolShape.tsx
@@ -3,7 +3,7 @@ import { LegendSvgItem } from '@nivo/legends'
 import { Highlight } from '../../Highlight'
 import { useTheme } from '../../../theming/context'
 
-const shapes = ['square', 'circle', 'triangle', 'diamond']
+const shapes = ['square', 'circle', 'triangle', 'diamond'] as const
 
 const code = `
 const CustomSymbolShape = ({
@@ -23,7 +23,7 @@ const CustomSymbolShape = ({
 )
 `.trim()
 
-const SymbolShape = () => {
+export const SymbolShape = () => {
     const theme = useTheme()
 
     const itemsProps = {
@@ -82,5 +82,3 @@ const SymbolShape = () => {
         </div>
     )
 }
-
-export default SymbolShape
diff --git a/website/src/components/guides/legends/index.ts b/website/src/components/guides/legends/index.ts
@@ -0,0 +1,4 @@
+export * from './LegendDirection'
+export * from './LegendItemDirection'
+export * from './LegendPosition'
+export * from './SymbolShape'
diff --git a/website/src/pages/guides/axes.tsx b/website/src/pages/guides/axes.tsx
@@ -3,15 +3,13 @@ import { Link } from 'gatsby'
 import Layout from '../../components/Layout'
 import { Seo } from '../../components/Seo'
 import PageContent from '../../components/PageContent'
-import AxesPosition from '../../components/guides/axes/AxesPosition'
-import AxesTicks from '../../components/guides/axes/AxesTicks'
-import AxesLegend from '../../components/guides/axes/AxesLegend'
+import { AxesPosition, AxesTicks, AxesLegend } from '../../components/guides/axes'
 import { DescriptionBlock } from '../../components/styled'
 
 const AxesGuide = () => {
     return (
         <Layout>
-            <Seo title="Axes Guide" />
+            <Seo title="Axes Guide" description="Using chart axes in nivo components." />
             <PageContent>
                 <div className="guide__header">
                     <h1>Axes</h1>

diff --git a/website/src/pages/guides/legends.tsx b/website/src/pages/guides/legends.tsx
@@ -1,13 +1,16 @@
 import React from 'react'
+// @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'
-import LegendPosition from '../../components/guides/legends/LegendPosition'
-import LegendDirection from '../../components/guides/legends/LegendDirection'
-import LegendItemDirection from '../../components/guides/legends/LegendItemDirection'
-import SymbolShape from '../../components/guides/legends/SymbolShape'
+import {
+    LegendPosition,
+    LegendDirection,
+    LegendItemDirection,
+    SymbolShape,
+} from '../../components/guides/legends'
 import { DescriptionBlock } from '../../components/styled'
 
 const Legends = () => {
@@ -16,7 +19,7 @@ const Legends = () => {
     return (
         <Layout>
             <themeContext.Provider value={theme.nivo}>
-                <Seo title="Legends Guide" />
+                <Seo title="Legends Guide" description="How to add legends to your nivo charts?" />
                 <PageContent>
                     <div className="guide__header">
                         <h1>Legends</h1>