feat(storybook): improve components stories

plouc · Aug 30, 2018 · d29d21f · d29d21f
1 parent 4f98124
commit d29d21f
Show file tree

Hide file tree

Showing 18 changed files with 426 additions and 296 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -5,12 +5,55 @@ import infoAddon, { setDefaults } from '@storybook/addon-info'
 import './style.css'
 
 setDefaults({
-    header: false,
+    header: true,
     inline: true,
     propTables: false,
     maxPropObjectKeys: 10000,
     maxPropArrayLength: 10000,
-    maxPropStringLength: 10000
+    maxPropStringLength: 10000,
+    styles: {
+        infoBody: {
+            border: 'none',
+            borderRadius: 0,
+            padding: '0 30px 20px',
+            marginTop: '0',
+            marginBottom: '0',
+            boxShadow: 'none',
+        },
+        header: {
+            h1: {
+                fontSize: '28px',
+            },
+            h2: {
+                fontSize: '16px',
+            },
+        },
+        source: {
+            h1: {
+                fontSize: '22px',
+            },
+        },
+        /*
+        header: {
+    h1: {
+      margin: 0,
+      padding: 0,
+      fontSize: '35px',
+    },
+    h2: {
+      margin: '0 0 10px 0',
+      padding: 0,
+      fontWeight: 400,
+      fontSize: '22px',
+    },
+    body: {
+      borderBottom: '1px solid #eee',
+      paddingTop: 10,
+      marginBottom: 10,
+    },
+  },
+         */
+    },
 })
 setAddon(infoAddon)
 

diff --git a/packages/bar/stories/bar.stories.js b/packages/bar/stories/bar.stories.js
@@ -8,8 +8,8 @@ import { Bar } from '../index'
 
 const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
 const commonProps = {
-    width: 1000,
-    height: 600,
+    width: 900,
+    height: 500,
     margin: { top: 60, right: 80, bottom: 60, left: 80 },
     data: generateCountriesData(keys, { size: 7 }),
     indexBy: 'country',

diff --git a/packages/bar/stories/barCanvas.stories.js b/packages/bar/stories/barCanvas.stories.js
@@ -6,8 +6,8 @@ import { BarCanvas } from '../index'
 
 const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
 const commonProps = {
-    width: 1000,
-    height: 600,
+    width: 900,
+    height: 500,
     margin: { top: 60, right: 80, bottom: 60, left: 80 },
     data: generateCountriesData(keys, { size: 7 }),
     indexBy: 'country',

diff --git a/packages/chord/stories/chord.stories.js b/packages/chord/stories/chord.stories.js
@@ -5,8 +5,8 @@ import { generateChordData } from '@nivo/generators'
 import { Chord } from '../index'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
+    width: 900,
+    height: 500,
     margin: { top: 60, right: 80, bottom: 60, left: 80 },
     ...generateChordData({ size: 7 }),
     xPadding: 0.2,
@@ -46,7 +46,7 @@ stories.add(
             labelRotation={-90}
             padAngle={0.02}
             innerRadiusOffset={0.02}
-            colors="d320b"
+            colors="d310"
         />
     ))
 )

diff --git a/packages/circle-packing/stories/bubble.stories.js b/packages/circle-packing/stories/bubble.stories.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { generateLibTree } from '@nivo/generators'
 import { Bubble } from '../index'
-import { withInfo } from '@storybook/addon-info'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
+    width: 900,
+    height: 500,
     root: generateLibTree(),
     identity: 'name',
     value: 'loc',
@@ -16,18 +16,24 @@ const commonProperties = {
 
 storiesOf('Bubble', module)
     .addDecorator(story => <div className="wrapper">{story()}</div>)
-    .add('default', () => <Bubble {...commonProperties} />)
-    .add('rendering leaves only', () => <Bubble {...commonProperties} leavesOnly={true} />)
-    .add('with formatted values', () => (
-        <Bubble
-            {...commonProperties}
-            tooltipFormat={value =>
-                `${Number(value).toLocaleString('ru-RU', {
-                    minimumFractionDigits: 2,
-                })} ₽`
-            }
-        />
-    ))
+    .add('default', withInfo()(() => <Bubble {...commonProperties} />))
+    .add(
+        'rendering leaves only',
+        withInfo()(() => <Bubble {...commonProperties} leavesOnly={true} />)
+    )
+    .add(
+        'with formatted values',
+        withInfo()(() => (
+            <Bubble
+                {...commonProperties}
+                tooltipFormat={value =>
+                    `${Number(value).toLocaleString('ru-RU', {
+                        minimumFractionDigits: 2,
+                    })} ₽`
+                }
+            />
+        ))
+    )
     .add(
         'custom tooltip',
         withInfo()(() => (

diff --git a/packages/circle-packing/stories/bubbleHtml.stories.js b/packages/circle-packing/stories/bubbleHtml.stories.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { generateLibTree } from '@nivo/generators'
 import { BubbleHtml } from '../index'
-import { withInfo } from '@storybook/addon-info'
 
 const commonProperties = {
-    width: 600,
-    height: 600,
+    width: 900,
+    height: 500,
     root: generateLibTree(),
     identity: 'name',
     value: 'loc',
@@ -16,18 +16,24 @@ const commonProperties = {
 
 storiesOf('BubbleHtml', module)
     .addDecorator(story => <div className="wrapper">{story()}</div>)
-    .add('default', () => <BubbleHtml {...commonProperties} />)
-    .add('rendering leaves only', () => <BubbleHtml {...commonProperties} leavesOnly={true} />)
-    .add('with formatted values', () => (
-        <BubbleHtml
-            {...commonProperties}
-            tooltipFormat={value =>
-                `${Number(value).toLocaleString('ru-RU', {
-                    minimumFractionDigits: 2,
-                })} ₽`
-            }
-        />
-    ))
+    .add('default', withInfo()(() => <BubbleHtml {...commonProperties} />))
+    .add(
+        'rendering leaves only',
+        withInfo()(() => <BubbleHtml {...commonProperties} leavesOnly={true} />)
+    )
+    .add(
+        'with formatted values',
+        withInfo()(() => (
+            <BubbleHtml
+                {...commonProperties}
+                tooltipFormat={value =>
+                    `${Number(value).toLocaleString('ru-RU', {
+                        minimumFractionDigits: 2,
+                    })} ₽`
+                }
+            />
+        ))
+    )
     .add(
         'custom tooltip',
         withInfo()(() => (

diff --git a/packages/heatmap/stories/heatmap.stories.js b/packages/heatmap/stories/heatmap.stories.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { generateCountriesData } from '@nivo/generators'
 import { HeatMap } from '../index'
 
@@ -56,7 +57,7 @@ const keys = [
 ]
 const commonProperties = {
     width: 900,
-    height: 520,
+    height: 500,
     margin: { top: 60, right: 80, bottom: 60, left: 80 },
     data: generateCountriesData(keys, { size: 9, min: 0, max: 100 }),
     indexBy: 'country',
@@ -67,76 +68,94 @@ const stories = storiesOf('HeatMap', module).addDecorator(story => (
     <div className="wrapper">{story()}</div>
 ))
 
-stories.add('default', () => <HeatMap {...commonProperties} />)
+stories.add('default', withInfo()(() => <HeatMap {...commonProperties} />))
 
-stories.add('square cells', () => (
-    <HeatMap
-        {...commonProperties}
-        forceSquare={true}
-        axisTop={{
-            orient: 'top',
-            tickSize: 5,
-            tickPadding: 5,
-            tickRotation: -55,
-            legend: '',
-            legendOffset: 36,
-        }}
-    />
-))
+stories.add(
+    'square cells',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            forceSquare={true}
+            axisTop={{
+                orient: 'top',
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: -55,
+                legend: '',
+                legendOffset: 36,
+            }}
+        />
+    ))
+)
 
-stories.add('circle cells', () => (
-    <HeatMap {...commonProperties} cellShape="circle" padding={2} enableGridY={true} />
-))
+stories.add(
+    'circle cells',
+    withInfo()(() => (
+        <HeatMap {...commonProperties} cellShape="circle" padding={2} enableGridY={true} />
+    ))
+)
 
-stories.add('alternative colors', () => <HeatMap {...commonProperties} colors="BrBG" />)
+stories.add('alternative colors', withInfo()(() => <HeatMap {...commonProperties} colors="BrBG" />))
 
-stories.add('variable cell size', () => (
-    <HeatMap
-        {...commonProperties}
-        colors="BuPu"
-        cellShape="circle"
-        padding={2}
-        sizeVariation={0.6}
-        enableGridX={true}
-        enableGridY={true}
-    />
-))
+stories.add(
+    'variable cell size',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            colors="BuPu"
+            cellShape="circle"
+            padding={2}
+            sizeVariation={0.6}
+            enableGridX={true}
+            enableGridY={true}
+        />
+    ))
+)
 
-stories.add('Custom cell component', () => (
-    <HeatMap
-        {...commonProperties}
-        cellShape={CustomCell}
-        padding={4}
-        colors="GnBu"
-        labelTextColor="inherit:darker(1.6)"
-    />
-))
+stories.add(
+    'Custom cell component',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            cellShape={CustomCell}
+            padding={4}
+            colors="GnBu"
+            labelTextColor="inherit:darker(1.6)"
+        />
+    ))
+)
 
-stories.add('with formatted values', () => (
-    <HeatMap
-        {...commonProperties}
-        tooltipFormat={value =>
-            `${Number(value).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
+stories.add(
+    'with formatted values',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            tooltipFormat={value =>
+                `${Number(value).toLocaleString('ru-RU', {
+                    minimumFractionDigits: 2,
+                })} ₽`
+            }
+        />
+    ))
+)
 
-stories.add('custom tooltip', () => (
-    <HeatMap
-        {...commonProperties}
-        tooltip={({ xKey, yKey, value, color }) => (
-            <strong style={{ color }}>
-                {xKey} / {yKey}: {value}
-            </strong>
-        )}
-        theme={{
-            tooltip: {
-                container: {
-                    background: 'gray',
+stories.add(
+    'custom tooltip',
+    withInfo()(() => (
+        <HeatMap
+            {...commonProperties}
+            tooltip={({ xKey, yKey, value, color }) => (
+                <strong style={{ color }}>
+                    {xKey} / {yKey}: {value}
+                </strong>
+            )}
+            theme={{
+                tooltip: {
+                    container: {
+                        background: 'gray',
+                    },
                 },
-            },
-        }}
-    />
-))
+            }}
+        />
+    ))
+)
diff --git a/packages/line/stories/line.stories.js b/packages/line/stories/line.stories.js
@@ -8,8 +8,8 @@ import { Line } from '../index'
 const data = generateDrinkStats(18)
 const commonProperties = {
     width: 900,
-    height: 360,
-    margin: { top: 60, right: 80, bottom: 60, left: 80 },
+    height: 400,
+    margin: { top: 20, right: 20, bottom: 60, left: 80 },
     data,
     animate: true,
 }