From 7d17732e1bfb0f59135a4016c62f99581c3bb025 Mon Sep 17 00:00:00 2001 From: plouc Date: Thu, 23 Dec 2021 08:20:14 +0900 Subject: [PATCH] feat(website): adjust guides interactive demos to use the new control definitions --- .../{GuideDemoBlock.js => GuideDemoBlock.tsx} | 65 +++++++++------- .../{PatternsDots.js => PatternsDotsDemo.tsx} | 71 ++++++++++------- ...PatternsExample.js => PatternsExample.tsx} | 4 +- ...strations.js => PatternsIllustrations.tsx} | 10 ++- ...PatternsLines.js => PatternsLinesDemo.tsx} | 77 ++++++++++++------- ...ernsSquares.js => PatternsSquaresDemo.tsx} | 71 ++++++++++------- .../src/components/guides/patterns/index.ts | 5 ++ .../src/pages/guides/{axes.js => axes.txs} | 0 .../pages/guides/{colors.js => colors.tsx} | 0 .../guides/{gradients.js => gradients.tsx} | 0 .../pages/guides/{legends.js => legends.tsx} | 0 .../guides/{patterns.js => patterns.tsx} | 19 +++-- .../pages/guides/{theming.js => theming.tsx} | 70 ++++++++++------- 13 files changed, 238 insertions(+), 154 deletions(-) rename website/src/components/guides/{GuideDemoBlock.js => GuideDemoBlock.tsx} (80%) rename website/src/components/guides/patterns/{PatternsDots.js => PatternsDotsDemo.tsx} (53%) rename website/src/components/guides/patterns/{PatternsExample.js => PatternsExample.tsx} (92%) rename website/src/components/guides/patterns/{PatternsIllustrations.js => PatternsIllustrations.tsx} (96%) rename website/src/components/guides/patterns/{PatternsLines.js => PatternsLinesDemo.tsx} (51%) rename website/src/components/guides/patterns/{PatternsSquares.js => PatternsSquaresDemo.tsx} (54%) create mode 100644 website/src/components/guides/patterns/index.ts rename website/src/pages/guides/{axes.js => axes.txs} (100%) rename website/src/pages/guides/{colors.js => colors.tsx} (100%) rename website/src/pages/guides/{gradients.js => gradients.tsx} (100%) rename website/src/pages/guides/{legends.js => legends.tsx} (100%) rename website/src/pages/guides/{patterns.js => patterns.tsx} (85%) rename website/src/pages/guides/{theming.js => theming.tsx} (88%) diff --git a/website/src/components/guides/GuideDemoBlock.js b/website/src/components/guides/GuideDemoBlock.tsx similarity index 80% rename from website/src/components/guides/GuideDemoBlock.js rename to website/src/components/guides/GuideDemoBlock.tsx index 45406978ef..5496511358 100644 --- a/website/src/components/guides/GuideDemoBlock.js +++ b/website/src/components/guides/GuideDemoBlock.tsx @@ -1,9 +1,47 @@ -import React, { useState } from 'react' +import React, { ReactNode, useState } from 'react' import styled from 'styled-components' import media from '../../theming/mediaQueries' import { CollapsibleCard } from '../CollapsibleCard' import ControlsGroup from '../controls/ControlsGroup' import { Highlight } from '../Highlight' +import { ChartProperty } from '../../types' + +interface GuideDemoBlockProps { + title: string + initialSettings: Settings + controls: ChartProperty[] + generateCode: (settings: Settings) => string + children: (settings: Settings) => ReactNode +} + +export function GuideDemoBlock({ + title, + initialSettings, + controls, + generateCode, + children, +}: GuideDemoBlockProps) { + const [settings, setSettings] = useState(initialSettings) + + return ( + + + {children(settings)} + + + + + + + + + ) +} const Container = styled.div` display: grid; @@ -50,28 +88,3 @@ const Controls = styled.div` overflow-x: hidden; overflow-y: auto; ` - -const GuideDemoBlock = ({ title, initialSettings, controls, generateCode, children }) => { - const [settings, setSettings] = useState(initialSettings) - - return ( - - - {children(settings)} - - - - - - - - - ) -} - -export default GuideDemoBlock diff --git a/website/src/components/guides/patterns/PatternsDots.js b/website/src/components/guides/patterns/PatternsDotsDemo.tsx similarity index 53% rename from website/src/components/guides/patterns/PatternsDots.js rename to website/src/components/guides/patterns/PatternsDotsDemo.tsx index f47eb088cd..3aba7c705e 100644 --- a/website/src/components/guides/patterns/PatternsDots.js +++ b/website/src/components/guides/patterns/PatternsDotsDemo.tsx @@ -1,18 +1,42 @@ import React from 'react' -import { Defs, patternDotsDef, PatternDots } from '@nivo/core' -import GuideDemoBlock from '../GuideDemoBlock' +import { + Defs, + // @ts-ignore + patternDotsDef, + // @ts-ignore + PatternDots, +} from '@nivo/core' +import { ChartProperty } from '../../../types' +import { GuideDemoBlock } from '../GuideDemoBlock' +const defaults = (PatternDots as unknown as any).defaultProps as Settings const SAMPLE_SIZE = 120 const patternId = 'dots-pattern' -const controls = [ +interface Settings { + size: number + padding: number + stagger: boolean + background: string + color: string +} + +const initialSettings: Settings = { + size: defaults.size, + padding: defaults.padding, + stagger: defaults.stagger, + background: defaults.background, + color: defaults.color, +} + +const controls: ChartProperty[] = [ { name: 'size', type: 'number', help: 'dots size.', - controlType: 'range', - defaultValue: PatternDots.defaultProps.size, - controlOptions: { + defaultValue: defaults.size, + control: { + type: 'range', unit: 'px', min: 1, max: 24, @@ -22,9 +46,9 @@ const controls = [ name: 'padding', type: 'number', help: 'padding between dots.', - controlType: 'range', - defaultValue: PatternDots.defaultProps.padding, - controlOptions: { + defaultValue: defaults.padding, + control: { + type: 'range', unit: 'px', min: 0, max: 36, @@ -34,44 +58,37 @@ const controls = [ name: 'stagger', type: 'boolean', help: 'staggered dots.', - defaultValue: PatternDots.defaultProps.stagger, - controlType: 'switch', + defaultValue: defaults.stagger, + control: { type: 'switch' }, }, { name: 'background', type: 'string', help: 'pattern background color.', - defaultValue: PatternDots.defaultProps.background, - controlType: 'colorPicker', + defaultValue: defaults.background, + control: { type: 'colorPicker' }, }, { name: 'color', type: 'string', help: 'dots color.', - defaultValue: PatternDots.defaultProps.color, - controlType: 'colorPicker', + defaultValue: defaults.color, + control: { type: 'colorPicker' }, }, ] -const initialSettings = { - size: PatternDots.defaultProps.size, - padding: PatternDots.defaultProps.padding, - stagger: PatternDots.defaultProps.stagger, - background: PatternDots.defaultProps.background, - color: PatternDots.defaultProps.color, -} - -const generateCode = settings => +const generateCode = (settings: Settings) => ` // helper +import { patternDotsDef } from '@nivo/core' patternDotsDef('${patternId}', ${JSON.stringify(settings, null, ' ')}) // plain object ${JSON.stringify(patternDotsDef(patternId, settings), null, ' ')} `.trim() -const PatternDotsDemo = () => { +export const PatternsDotsDemo = () => { return ( - title="Dots" controls={controls} initialSettings={initialSettings} @@ -86,5 +103,3 @@ const PatternDotsDemo = () => { ) } - -export default PatternDotsDemo diff --git a/website/src/components/guides/patterns/PatternsExample.js b/website/src/components/guides/patterns/PatternsExample.tsx similarity index 92% rename from website/src/components/guides/patterns/PatternsExample.js rename to website/src/components/guides/patterns/PatternsExample.tsx index 5b572bf4ab..6913353a70 100644 --- a/website/src/components/guides/patterns/PatternsExample.js +++ b/website/src/components/guides/patterns/PatternsExample.tsx @@ -36,6 +36,4 @@ const MyChart = () => ( ) `.trim() -const PatternsExample = () => - -export default PatternsExample +export const PatternsExample = () => diff --git a/website/src/components/guides/patterns/PatternsIllustrations.js b/website/src/components/guides/patterns/PatternsIllustrations.tsx similarity index 96% rename from website/src/components/guides/patterns/PatternsIllustrations.js rename to website/src/components/guides/patterns/PatternsIllustrations.tsx index 1712039300..25ad1771e6 100644 --- a/website/src/components/guides/patterns/PatternsIllustrations.js +++ b/website/src/components/guides/patterns/PatternsIllustrations.tsx @@ -1,13 +1,15 @@ import React from 'react' +// @ts-ignore 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' -const PatternsIllustrations = () => { +export const PatternsIllustrations = () => { const theme = useTheme() return ( @@ -16,6 +18,7 @@ const PatternsIllustrations = () => {
{
{ axisBottom={null} enableGridY={false} enableLabel={false} + // @ts-ignore colorBy="index" defs={[ patternLinesDef('example2.lines', { @@ -126,6 +131,7 @@ const PatternsIllustrations = () => { animate={false} enableLabel={false} enableParentLabel={false} + // @ts-ignore defs={[ patternLinesDef('example3.lines', { rotation: -45, @@ -146,5 +152,3 @@ const PatternsIllustrations = () => { ) } - -export default PatternsIllustrations diff --git a/website/src/components/guides/patterns/PatternsLines.js b/website/src/components/guides/patterns/PatternsLinesDemo.tsx similarity index 51% rename from website/src/components/guides/patterns/PatternsLines.js rename to website/src/components/guides/patterns/PatternsLinesDemo.tsx index 2324d6e3a5..f790f7e4dc 100644 --- a/website/src/components/guides/patterns/PatternsLines.js +++ b/website/src/components/guides/patterns/PatternsLinesDemo.tsx @@ -1,18 +1,42 @@ import React from 'react' -import { Defs, PatternLines, patternLinesDef } from '@nivo/core' -import GuideDemoBlock from '../GuideDemoBlock' +import { + Defs, + PatternLines, + // @ts-ignore + patternLinesDef, +} from '@nivo/core' +import { ChartProperty } from '../../../types' +import { GuideDemoBlock } from '../GuideDemoBlock' +const defaults = (PatternLines as unknown as any).defaultProps as Settings const SAMPLE_SIZE = 120 const patternId = 'lines-pattern' -const controls = [ +interface Settings { + spacing: number + rotation: number + lineWidth: number + background: string + color: string +} + +const initialSettings: Settings = { + spacing: defaults.spacing, + rotation: defaults.rotation, + lineWidth: defaults.lineWidth, + background: defaults.background, + color: defaults.color, +} + +const controls: ChartProperty[] = [ { name: 'spacing', type: 'number', + required: false, help: 'spacing between lines.', - defaultValue: PatternLines.defaultProps.spacing, - controlType: 'range', - controlOptions: { + defaultValue: defaults.spacing, + control: { + type: 'range', min: 0, max: 32, }, @@ -20,10 +44,11 @@ const controls = [ { name: 'rotation', type: 'number', + required: false, help: 'lines rotation.', - defaultValue: PatternLines.defaultProps.rotation, - controlType: 'angle', - controlOptions: { + defaultValue: defaults.rotation, + control: { + type: 'angle', start: 90, min: -360, max: 360, @@ -32,48 +57,44 @@ const controls = [ { name: 'lineWidth', type: 'number', + required: false, help: 'lines thickness.', - defaultValue: PatternLines.defaultProps.lineWidth, - controlType: 'lineWidth', - controlOptions: { + defaultValue: defaults.lineWidth, + control: { + type: 'lineWidth', min: 1, }, }, { name: 'background', type: 'string', + required: false, help: 'pattern background color.', - defaultValue: PatternLines.defaultProps.background, - controlType: 'colorPicker', + defaultValue: defaults.background, + control: { type: 'colorPicker' }, }, { name: 'color', type: 'string', + required: false, help: 'lines color.', - defaultValue: PatternLines.defaultProps.color, - controlType: 'colorPicker', + defaultValue: defaults.color, + control: { type: 'colorPicker' }, }, ] -const initialSettings = { - spacing: PatternLines.defaultProps.spacing, - rotation: PatternLines.defaultProps.rotation, - lineWidth: PatternLines.defaultProps.lineWidth, - background: PatternLines.defaultProps.background, - color: PatternLines.defaultProps.color, -} - -const generateCode = settings => +const generateCode = (settings: Settings) => ` // helper +import { patternLinesDef } from '@nivo/core' patternLinesDef('${patternId}', ${JSON.stringify(settings, null, ' ')}) // plain object ${JSON.stringify(patternLinesDef(patternId, settings), null, ' ')} `.trim() -const PatternsLinesDemo = () => { +export const PatternsLinesDemo = () => { return ( - title="Lines" controls={controls} initialSettings={initialSettings} @@ -88,5 +109,3 @@ const PatternsLinesDemo = () => { ) } - -export default PatternsLinesDemo diff --git a/website/src/components/guides/patterns/PatternsSquares.js b/website/src/components/guides/patterns/PatternsSquaresDemo.tsx similarity index 54% rename from website/src/components/guides/patterns/PatternsSquares.js rename to website/src/components/guides/patterns/PatternsSquaresDemo.tsx index 07b4c89e23..2eb3c7c398 100644 --- a/website/src/components/guides/patterns/PatternsSquares.js +++ b/website/src/components/guides/patterns/PatternsSquaresDemo.tsx @@ -1,18 +1,42 @@ import React from 'react' -import { Defs, patternSquaresDef, PatternSquares } from '@nivo/core' -import GuideDemoBlock from '../GuideDemoBlock' +import { + Defs, + // @ts-ignore + patternSquaresDef, + // @ts-ignore + PatternSquares, +} from '@nivo/core' +import { ChartProperty } from '../../../types' +import { GuideDemoBlock } from '../GuideDemoBlock' +const defaults = (PatternSquares as unknown as any).defaultProps as Settings const SAMPLE_SIZE = 120 const patternId = 'squares-pattern' -const controls = [ +interface Settings { + size: number + padding: number + stagger: boolean + background: string + color: string +} + +const initialSettings: Settings = { + size: defaults.size, + padding: defaults.padding, + stagger: defaults.stagger, + background: defaults.background, + color: defaults.color, +} + +const controls: ChartProperty[] = [ { name: 'size', type: 'number', help: 'squares size.', - defaultValue: PatternSquares.defaultProps.size, - controlType: 'range', - controlOptions: { + defaultValue: defaults.size, + control: { + type: 'range', unit: 'px', min: 1, max: 24, @@ -22,9 +46,9 @@ const controls = [ name: 'padding', type: 'number', help: 'padding between squares.', - defaultValue: PatternSquares.defaultProps.padding, - controlType: 'range', - controlOptions: { + defaultValue: defaults.padding, + control: { + type: 'range', unit: 'px', min: 0, max: 36, @@ -34,44 +58,37 @@ const controls = [ name: 'stagger', type: 'boolean', help: 'staggered squares.', - defaultValue: PatternSquares.defaultProps.stagger, - controlType: 'switch', + defaultValue: defaults.stagger, + control: { type: 'switch' }, }, { name: 'background', type: 'string', help: 'pattern background color.', - defaultValue: PatternSquares.defaultProps.background, - controlType: 'colorPicker', + defaultValue: defaults.background, + control: { type: 'colorPicker' }, }, { name: 'color', type: 'string', help: 'squares color.', - defaultValue: PatternSquares.defaultProps.color, - controlType: 'colorPicker', + defaultValue: defaults.color, + control: { type: 'colorPicker' }, }, ] -const initialSettings = { - size: PatternSquares.defaultProps.size, - padding: PatternSquares.defaultProps.padding, - stagger: PatternSquares.defaultProps.stagger, - background: PatternSquares.defaultProps.background, - color: PatternSquares.defaultProps.color, -} - -const generateCode = settings => +const generateCode = (settings: Settings) => ` // helper +import { patternSquaresDef } from '@nivo/core' patternSquaresDef('${patternId}', ${JSON.stringify(settings, null, ' ')}) // plain object ${JSON.stringify(patternSquaresDef(patternId, settings), null, ' ')} `.trim() -const PatternsSquaresDemo = () => { +export const PatternsSquaresDemo = () => { return ( - title="Squares" controls={controls} initialSettings={initialSettings} @@ -86,5 +103,3 @@ const PatternsSquaresDemo = () => { ) } - -export default PatternsSquaresDemo diff --git a/website/src/components/guides/patterns/index.ts b/website/src/components/guides/patterns/index.ts new file mode 100644 index 0000000000..51bc3465d4 --- /dev/null +++ b/website/src/components/guides/patterns/index.ts @@ -0,0 +1,5 @@ +export * from './PatternsDotsDemo' +export * from './PatternsExample' +export * from './PatternsIllustrations' +export * from './PatternsLinesDemo' +export * from './PatternsSquaresDemo' diff --git a/website/src/pages/guides/axes.js b/website/src/pages/guides/axes.txs similarity index 100% rename from website/src/pages/guides/axes.js rename to website/src/pages/guides/axes.txs diff --git a/website/src/pages/guides/colors.js b/website/src/pages/guides/colors.tsx similarity index 100% rename from website/src/pages/guides/colors.js rename to website/src/pages/guides/colors.tsx diff --git a/website/src/pages/guides/gradients.js b/website/src/pages/guides/gradients.tsx similarity index 100% rename from website/src/pages/guides/gradients.js rename to website/src/pages/guides/gradients.tsx diff --git a/website/src/pages/guides/legends.js b/website/src/pages/guides/legends.tsx similarity index 100% rename from website/src/pages/guides/legends.js rename to website/src/pages/guides/legends.tsx diff --git a/website/src/pages/guides/patterns.js b/website/src/pages/guides/patterns.tsx similarity index 85% rename from website/src/pages/guides/patterns.js rename to website/src/pages/guides/patterns.tsx index 550ac52433..b16264f7f6 100644 --- a/website/src/pages/guides/patterns.js +++ b/website/src/pages/guides/patterns.tsx @@ -1,13 +1,16 @@ import React from 'react' import { Link } from 'gatsby' +// @ts-ignore import Layout from '../../components/Layout' import { Seo } from '../../components/Seo' import PageContent from '../../components/PageContent' -import PatternsIllustrations from '../../components/guides/patterns/PatternsIllustrations' -import PatternsExample from '../../components/guides/patterns/PatternsExample' -import PatternsDots from '../../components/guides/patterns/PatternsDots' -import PatternsLines from '../../components/guides/patterns/PatternsLines' -import PatternsSquares from '../../components/guides/patterns/PatternsSquares' +import { + PatternsIllustrations, + PatternsExample, + PatternsDotsDemo, + PatternsLinesDemo, + PatternsSquaresDemo, +} from '../../components/guides/patterns' import { DescriptionBlock } from '../../components/styled' const Patterns = () => ( @@ -52,9 +55,9 @@ const Patterns = () => (

Example

Available patterns

- - - + + +

Known limitations

Please be aware that pattern usage has some limitations, it's{' '} diff --git a/website/src/pages/guides/theming.js b/website/src/pages/guides/theming.tsx similarity index 88% rename from website/src/pages/guides/theming.js rename to website/src/pages/guides/theming.tsx index 046a188ae6..ae116ed42f 100644 --- a/website/src/pages/guides/theming.js +++ b/website/src/pages/guides/theming.tsx @@ -1,17 +1,24 @@ import React, { useState } from 'react' import styled from 'styled-components' -import { defaultTheme } from '@nivo/core' +import { + // @ts-ignore + defaultTheme, + Theme, +} from '@nivo/core' import { ResponsiveBar } from '@nivo/bar' import { ResponsiveLine } from '@nivo/line' +// @ts-ignore import Layout from '../../components/Layout' import { Seo } from '../../components/Seo' import { ComponentPage } from '../../components/components/ComponentPage' import { ComponentHeader } from '../../components/components/ComponentHeader' import { Markdown } from '../../components/Markdown' +// @ts-ignore import ComponentSettings from '../../components/components/ComponentSettings' import media from '../../theming/mediaQueries' +import { ChartProperty } from '../../types' -const initialTheme = { +const initialTheme: Theme = { background: '#ffffff', // defaultTheme.background, textColor: defaultTheme.textColor, fontSize: defaultTheme.fontSize, @@ -37,7 +44,11 @@ const initialTheme = { }, } -const controlGroups = [ +const controlGroups: { + name: string + group: string + properties: ChartProperty[] +}[] = [ { name: 'Theme', group: 'Theme', @@ -45,19 +56,19 @@ const controlGroups = [ { name: 'background', help: 'main background color.', - controlType: 'colorPicker', + control: { type: 'colorPicker' }, }, { name: 'textColor', help: 'main text color.', - controlType: 'colorPicker', + control: { type: 'colorPicker' }, }, // fontFamily: 'sans-serif', { name: 'fontSize', help: 'main font size.', - controlType: 'range', - controlOptions: { + control: { + type: 'range', unit: 'px', min: 6, max: 36, @@ -65,29 +76,29 @@ const controlGroups = [ }, { name: 'axis', - controlType: 'object', - controlOptions: { + control: { + type: 'object', isOpenedByDefault: true, props: [ { key: 'ticks', - controlType: 'object', - controlOptions: { + control: { + type: 'object', isOpenedByDefault: true, props: [ { key: 'line', - controlType: 'object', - controlOptions: { + control: { + type: 'object', isOpenedByDefault: true, props: [ { key: 'strokeWidth', - controlType: 'lineWidth', + control: { type: 'lineWidth' }, }, { key: 'stroke', - controlType: 'colorPicker', + control: { type: 'colorPicker' }, }, ], }, @@ -97,23 +108,23 @@ const controlGroups = [ }, { key: 'domain', - controlType: 'object', - controlOptions: { + control: { + type: 'object', isOpenedByDefault: true, props: [ { key: 'line', - controlType: 'object', - controlOptions: { + control: { + type: 'object', isOpenedByDefault: true, props: [ { key: 'strokeWidth', - controlType: 'lineWidth', + control: { type: 'lineWidth' }, }, { key: 'stroke', - controlType: 'colorPicker', + control: { type: 'colorPicker' }, }, ], }, @@ -126,23 +137,23 @@ const controlGroups = [ }, { name: 'grid', - controlType: 'object', - controlOptions: { + control: { + type: 'object', isOpenedByDefault: true, props: [ { key: 'line', - controlType: 'object', - controlOptions: { + control: { + type: 'object', isOpenedByDefault: true, props: [ { key: 'stroke', - controlType: 'colorPicker', + control: { type: 'colorPicker' }, }, { key: 'strokeWidth', - controlType: 'lineWidth', + control: { type: 'lineWidth' }, }, ], }, @@ -244,8 +255,9 @@ const Theming = () => { ], }, ]} - enableDots={true} - enableDotLabel={true} + enablePoints + enablePointLabel + pointSize={10} theme={theme} animate={false} axisBottom={{