Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(website): adjust guides interactive demos to use the new control…
… definitions
  • Loading branch information
plouc committed Dec 23, 2021
1 parent e944623 commit 7d17732
Show file tree
Hide file tree
Showing 13 changed files with 238 additions and 154 deletions.
@@ -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<Settings> {
title: string
initialSettings: Settings
controls: ChartProperty[]
generateCode: (settings: Settings) => string
children: (settings: Settings) => ReactNode
}

export function GuideDemoBlock<Settings>({
title,
initialSettings,
controls,
generateCode,
children,
}: GuideDemoBlockProps<Settings>) {
const [settings, setSettings] = useState(initialSettings)

return (
<CollapsibleCard title={title} expandedByDefault={true}>
<Container>
<Preview>{children(settings)}</Preview>
<Controls>
<ControlsGroup
name={title}
controls={controls}
settings={settings}
onChange={setSettings}
/>
</Controls>
<Code>
<Highlight language="jsx" code={generateCode(settings)} />
</Code>
</Container>
</CollapsibleCard>
)
}

const Container = styled.div`
display: grid;
Expand Down Expand Up @@ -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 (
<CollapsibleCard title={title} expandedByDefault={true}>
<Container>
<Preview>{children(settings)}</Preview>
<Controls>
<ControlsGroup
name={title}
controls={controls}
settings={settings}
onChange={setSettings}
/>
</Controls>
<Code>
<Highlight language="jsx" code={generateCode(settings)} />
</Code>
</Container>
</CollapsibleCard>
)
}

export default GuideDemoBlock
@@ -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,
Expand All @@ -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,
Expand All @@ -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 (
<GuideDemoBlock
<GuideDemoBlock<Settings>
title="Dots"
controls={controls}
initialSettings={initialSettings}
Expand All @@ -86,5 +103,3 @@ const PatternDotsDemo = () => {
</GuideDemoBlock>
)
}

export default PatternDotsDemo
Expand Up @@ -36,6 +36,4 @@ const MyChart = () => (
)
`.trim()

const PatternsExample = () => <Highlight code={code} language="jsx" />

export default PatternsExample
export const PatternsExample = () => <Highlight code={code} language="jsx" />
@@ -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 (
Expand All @@ -16,6 +18,7 @@ const PatternsIllustrations = () => {
<div className="guide__illustrations__item">
<ResponsiveStream
margin={{ top: -2, right: -2, bottom: -2, left: -2 }}
// @ts-ignore
data={generateCountriesData(['a', 'b', 'c'], { size: 7 })}
indexBy="country"
keys={['a', 'b', 'c']}
Expand Down Expand Up @@ -61,6 +64,7 @@ const PatternsIllustrations = () => {
<div className="guide__illustrations__item">
<ResponsiveBar
margin={{ top: 15, right: -2, bottom: -2, left: -2 }}
// @ts-ignore
data={generateCountriesData(['a', 'b', 'c'], { size: 7 })}
indexBy="country"
keys={['a', 'b', 'c']}
Expand All @@ -70,6 +74,7 @@ const PatternsIllustrations = () => {
axisBottom={null}
enableGridY={false}
enableLabel={false}
// @ts-ignore
colorBy="index"
defs={[
patternLinesDef('example2.lines', {
Expand Down Expand Up @@ -126,6 +131,7 @@ const PatternsIllustrations = () => {
animate={false}
enableLabel={false}
enableParentLabel={false}
// @ts-ignore
defs={[
patternLinesDef('example3.lines', {
rotation: -45,
Expand All @@ -146,5 +152,3 @@ const PatternsIllustrations = () => {
</FullWidthBanner>
)
}

export default PatternsIllustrations
@@ -1,29 +1,54 @@
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,
},
},
{
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,
Expand All @@ -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 (
<GuideDemoBlock
<GuideDemoBlock<Settings>
title="Lines"
controls={controls}
initialSettings={initialSettings}
Expand All @@ -88,5 +109,3 @@ const PatternsLinesDemo = () => {
</GuideDemoBlock>
)
}

export default PatternsLinesDemo

0 comments on commit 7d17732

Please sign in to comment.