feat(chord): add source code for chord stories

plouc · Dec 5, 2017 · 489f36f · 489f36f
1 parent 0a5120f
commit 489f36f
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 47 deletions.
diff --git a/Makefile b/Makefile
@@ -114,6 +114,11 @@ packages-publish: ##@packages publish all packages
 	@echo "${YELLOW}Publishing packages${RESET}"
 	@./node_modules/.bin/lerna publish ---exact
 
+package-build-watch-%: ##@packages build package (es flavor) on change, eg. `package-build-watch-bar`
+	@echo "${YELLOW}Running build watcher for package ${WHITE}${*}${RESET}"
+	@cd packages/nivo-${*} && yarn build:es:watch
+
+
 ########################################################################################################################
 #
 # WEBSITE

diff --git a/packages/nivo-bar/src/Bar.js b/packages/nivo-bar/src/Bar.js
@@ -10,8 +10,8 @@ import React from 'react'
 import { TransitionMotion, spring } from 'react-motion'
 import { bindDefs } from '@nivo/core'
 import { generateGroupedBars, generateStackedBars } from './compute'
-import enhance from './enhance'
 import setDisplayName from 'recompose/setDisplayName'
+import enhance from './enhance'
 import { BarPropTypes } from './props'
 import { Container, SvgWrapper } from '@nivo/core'
 import { Grid, Axes } from '@nivo/core'

diff --git a/packages/nivo-chord/src/Chord.js b/packages/nivo-chord/src/Chord.js
@@ -9,6 +9,7 @@
 import React from 'react'
 import { Container, SvgWrapper } from '@nivo/core'
 import enhance from './enhance'
+import setDisplayName from 'recompose/setDisplayName'
 import { ChordPropTypes } from './props'
 import ChordRibbons from './ChordRibbons'
 import ChordArcs from './ChordArcs'
@@ -122,4 +123,4 @@ const Chord = ({
 
 Chord.propTypes = ChordPropTypes
 
-export default enhance(Chord)
+export default setDisplayName('Chord')(enhance(Chord))
diff --git a/packages/nivo-chord/stories/chord.stories.js b/packages/nivo-chord/stories/chord.stories.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
 import { generateChordData } from '@nivo/generators'
 import { Chord } from '../es'
 
@@ -11,57 +12,71 @@ const commonProperties = {
     xPadding: 0.2,
 }
 
-const stories = storiesOf('Chord', module).addDecorator(story => (
-    <div className="wrapper">{story()}</div>
-))
+const stories = storiesOf('Chord', module)
 
-stories.add('default', () => <Chord {...commonProperties} />)
+stories.add('default', withInfo()(() => <Chord {...commonProperties} />))
 
-stories.add('radial labels', () => <Chord {...commonProperties} labelRotation={-90} />)
+stories.add('radial labels', withInfo()(() => <Chord {...commonProperties} labelRotation={-90} />))
 
 const customLabel = d => `${d.id} [${d.value}]`
-stories.add('custom labels text', () => (
-    <Chord {...commonProperties} {...generateChordData({ size: 5 })} label={customLabel} />
-))
+stories.add(
+    'custom labels text',
+    withInfo()(() => (
+        <Chord {...commonProperties} {...generateChordData({ size: 5 })} label={customLabel} />
+    ))
+)
 
-stories.add('angle padding', () => (
-    <Chord {...commonProperties} labelRotation={-90} padAngle={0.06} />
-))
+stories.add(
+    'angle padding',
+    withInfo()(() => <Chord {...commonProperties} labelRotation={-90} padAngle={0.06} />)
+)
 
-stories.add('ribbons offset', () => (
-    <Chord {...commonProperties} labelRotation={-90} padAngle={0.02} innerRadiusOffset={0.02} />
-))
+stories.add(
+    'ribbons offset',
+    withInfo()(() => (
+        <Chord {...commonProperties} labelRotation={-90} padAngle={0.02} innerRadiusOffset={0.02} />
+    ))
+)
 
-stories.add('alternative colors', () => (
-    <Chord
-        {...commonProperties}
-        labelRotation={-90}
-        padAngle={0.02}
-        innerRadiusOffset={0.02}
-        colors="d320b"
-    />
-))
+stories.add(
+    'alternative colors',
+    withInfo()(() => (
+        <Chord
+            {...commonProperties}
+            labelRotation={-90}
+            padAngle={0.02}
+            innerRadiusOffset={0.02}
+            colors="d320b"
+        />
+    ))
+)
 
-stories.add('putting labels inside arcs', () => (
-    <Chord
-        {...commonProperties}
-        {...generateChordData({ size: 5 })}
-        padAngle={0.02}
-        innerRadiusRatio={0.8}
-        innerRadiusOffset={0.02}
-        labelOffset={-30}
-        labelTextColor="inherit:darker(1.2)"
-    />
-))
+stories.add(
+    'putting labels inside arcs',
+    withInfo()(() => (
+        <Chord
+            {...commonProperties}
+            {...generateChordData({ size: 5 })}
+            padAngle={0.02}
+            innerRadiusRatio={0.8}
+            innerRadiusOffset={0.02}
+            labelOffset={-30}
+            labelTextColor="inherit:darker(1.2)"
+        />
+    ))
+)
 
-stories.add('with formatted values', () => (
-    <Chord
-        {...commonProperties}
-        {...generateChordData({ size: 5 })}
-        tooltipFormat={value =>
-            `${Number(value).toLocaleString('ru-RU', {
-                minimumFractionDigits: 2,
-            })} ₽`
-        }
-    />
-))
+stories.add(
+    'with formatted values',
+    withInfo()(() => (
+        <Chord
+            {...commonProperties}
+            {...generateChordData({ size: 5 })}
+            tooltipFormat={value =>
+                `${Number(value).toLocaleString('ru-RU', {
+                    minimumFractionDigits: 2,
+                })} ₽`
+            }
+        />
+    ))
+)