feat(chord): update @nivo/chord directory layout

plouc · Dec 13, 2017 · a143d80 · a143d80
1 parent a39731c
commit a143d80
Show file tree

Hide file tree

Showing 16 changed files with 83 additions and 54 deletions.
diff --git a/packages/nivo-chord/src/ChordCanvas.js → ...ages/nivo-chord/src/canvas/ChordCanvas.js b/packages/nivo-chord/src/ChordCanvas.js → ...ages/nivo-chord/src/canvas/ChordCanvas.js
@@ -11,9 +11,9 @@ import { partial } from 'lodash'
 import { midAngle, getPolarLabelProps, degreesToRadians } from '@nivo/core'
 import { getRelativeCursor, getHoveredArc } from '@nivo/core'
 import { Container } from '@nivo/core'
-import { ChordPropTypes } from './props'
-import enhance from './enhance'
-import ChordArcTooltip from './ChordArcTooltip'
+import { ChordPropTypes } from '../props'
+import enhance from '../enhance'
+import ChordArcTooltip from '../ChordArcTooltip'
 
 class ChordCanvas extends Component {
     componentDidMount() {

diff --git a/...s/nivo-chord/src/ResponsiveChordCanvas.js → ...chord/src/canvas/ResponsiveChordCanvas.js b/...s/nivo-chord/src/ResponsiveChordCanvas.js → ...chord/src/canvas/ResponsiveChordCanvas.js
diff --git a/packages/nivo-chord/src/canvas/index.js b/packages/nivo-chord/src/canvas/index.js
@@ -0,0 +1,10 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+export { default as ChordCanvas } from './ChordCanvas'
+export { default as ResponsiveChordCanvas } from './ResponsiveChordCanvas'
diff --git a/packages/nivo-chord/src/index.js b/packages/nivo-chord/src/index.js
@@ -6,8 +6,6 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-export { default as Chord } from './Chord'
-export { default as ChordCanvas } from './ChordCanvas'
-export { default as ResponsiveChord } from './ResponsiveChord'
-export { default as ResponsiveChordCanvas } from './ResponsiveChordCanvas'
+export * from './svg'
+export * from './canvas'
 export * from './props'
diff --git a/packages/nivo-chord/src/ChordArcs.js → packages/nivo-chord/src/svg/ChordArcsSvg.js b/packages/nivo-chord/src/ChordArcs.js → packages/nivo-chord/src/svg/ChordArcsSvg.js
@@ -11,10 +11,10 @@ import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
 import pure from 'recompose/pure'
 import { colorMotionSpring, getInterpolatedColor } from '@nivo/core'
-import ChordArcTooltip from './ChordArcTooltip'
+import ChordArcTooltip from '../ChordArcTooltip'
 import { motionPropTypes } from '@nivo/core'
 
-const ChordArcs = ({
+const ChordArcsSvg = ({
     arcs,
     borderWidth,
     getBorderColor,
@@ -119,7 +119,7 @@ const ChordArcs = ({
     )
 }
 
-ChordArcs.propTypes = {
+ChordArcsSvg.propTypes = {
     arcs: PropTypes.array.isRequired,
     shapeGenerator: PropTypes.func.isRequired,
     borderWidth: PropTypes.number.isRequired,
@@ -133,4 +133,4 @@ ChordArcs.propTypes = {
     ...motionPropTypes,
 }
 
-export default pure(ChordArcs)
+export default pure(ChordArcsSvg)
diff --git a/packages/nivo-chord/src/ChordLabels.js → ...ages/nivo-chord/src/svg/ChordLabelsSvg.js b/packages/nivo-chord/src/ChordLabels.js → ...ages/nivo-chord/src/svg/ChordLabelsSvg.js
@@ -12,7 +12,7 @@ import { TransitionMotion, spring } from 'react-motion'
 import { midAngle, getPolarLabelProps } from '@nivo/core'
 import { motionPropTypes } from '@nivo/core'
 
-const ChordLabels = ({
+const ChordLabelsSvg = ({
     arcs,
     radius,
     rotation,
@@ -96,7 +96,7 @@ const ChordLabels = ({
     )
 }
 
-ChordLabels.propTypes = {
+ChordLabelsSvg.propTypes = {
     arcs: PropTypes.array.isRequired,
     radius: PropTypes.number.isRequired,
     rotation: PropTypes.number.isRequired,
@@ -106,4 +106,4 @@ ChordLabels.propTypes = {
     ...motionPropTypes,
 }
 
-export default ChordLabels
+export default ChordLabelsSvg
diff --git a/packages/nivo-chord/src/ChordRibbons.js → ...ges/nivo-chord/src/svg/ChordRibbonsSvg.js b/packages/nivo-chord/src/ChordRibbons.js → ...ges/nivo-chord/src/svg/ChordRibbonsSvg.js
@@ -79,7 +79,7 @@ const ribbonWillLeave = springConfig => ({ data: ribbon }) => ({
     ...colorMotionSpring(ribbon.source.color, springConfig),
 })
 
-const ChordRibbons = ({
+const ChordRibbonsSvg = ({
     ribbons,
     shapeGenerator,
     borderWidth,
@@ -213,7 +213,7 @@ const ChordRibbons = ({
     )
 }
 
-ChordRibbons.propTypes = {
+ChordRibbonsSvg.propTypes = {
     ribbons: PropTypes.array.isRequired,
     shapeGenerator: PropTypes.func.isRequired,
     borderWidth: PropTypes.number.isRequired,
@@ -235,4 +235,4 @@ const enhance = compose(
     pure
 )
 
-export default enhance(ChordRibbons)
+export default enhance(ChordRibbonsSvg)
diff --git a/packages/nivo-chord/src/Chord.js → packages/nivo-chord/src/svg/ChordSvg.js b/packages/nivo-chord/src/Chord.js → packages/nivo-chord/src/svg/ChordSvg.js
@@ -9,14 +9,14 @@
 import React from 'react'
 import { Container, SvgWrapper } from '@nivo/core'
 import { BoxLegendSvg } from '@nivo/legends'
-import enhance from './enhance'
 import setDisplayName from 'recompose/setDisplayName'
-import { ChordPropTypes } from './props'
-import ChordRibbons from './ChordRibbons'
-import ChordArcs from './ChordArcs'
-import ChordLabels from './ChordLabels'
+import { ChordPropTypes } from '../props'
+import enhance from '../enhance'
+import ChordRibbonsSvg from './ChordRibbonsSvg'
+import ChordArcsSvg from './ChordArcsSvg'
+import ChordLabelsSvg from './ChordLabelsSvg'
 
-const Chord = ({
+const ChordSvg = ({
     // dimensions
     margin,
     width,
@@ -84,7 +84,7 @@ const Chord = ({
                 return (
                     <SvgWrapper width={outerWidth} height={outerHeight} margin={margin}>
                         <g transform={`translate(${centerX}, ${centerY})`}>
-                            <ChordRibbons
+                            <ChordRibbonsSvg
                                 ribbons={ribbons}
                                 shapeGenerator={ribbonGenerator}
                                 borderWidth={ribbonBorderWidth}
@@ -97,7 +97,7 @@ const Chord = ({
                                 hideTooltip={hideTooltip}
                                 {...motionProps}
                             />
-                            <ChordArcs
+                            <ChordArcsSvg
                                 arcs={arcs}
                                 shapeGenerator={arcGenerator}
                                 borderWidth={arcBorderWidth}
@@ -111,7 +111,7 @@ const Chord = ({
                                 {...motionProps}
                             />
                             {enableLabel && (
-                                <ChordLabels
+                                <ChordLabelsSvg
                                     arcs={arcs}
                                     radius={radius + labelOffset}
                                     rotation={labelRotation}
@@ -138,6 +138,6 @@ const Chord = ({
     )
 }
 
-Chord.propTypes = ChordPropTypes
+ChordSvg.propTypes = ChordPropTypes
 
-export default setDisplayName('Chord')(enhance(Chord))
+export default setDisplayName('ChordSvg')(enhance(ChordSvg))
diff --git a/packages/nivo-chord/src/ResponsiveChord.js → .../nivo-chord/src/svg/ResponsiveChordSvg.js b/packages/nivo-chord/src/ResponsiveChord.js → .../nivo-chord/src/svg/ResponsiveChordSvg.js
@@ -8,12 +8,12 @@
  */
 import React from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
-import Chord from './Chord'
+import ChordSvg from './ChordSvg'
 
-const ResponsiveChord = props => (
+const ResponsiveChordSvg = props => (
     <ResponsiveWrapper>
-        {({ width, height }) => <Chord width={width} height={height} {...props} />}
+        {({ width, height }) => <ChordSvg width={width} height={height} {...props} />}
     </ResponsiveWrapper>
 )
 
-export default ResponsiveChord
+export default ResponsiveChordSvg
diff --git a/packages/nivo-chord/src/svg/index.js b/packages/nivo-chord/src/svg/index.js
@@ -0,0 +1,13 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+export { default as ChordArcsSvg } from './ChordArcsSvg'
+export { default as ChordLabelsSvg } from './ChordLabelsSvg'
+export { default as ChordRibbonsSvg } from './ChordRibbonsSvg'
+export { default as ChordSvg } from './ChordSvg'
+export { default as ResponsiveChordSvg } from './ResponsiveChordSvg'
diff --git a/packages/nivo-chord/stories/chord.stories.js b/packages/nivo-chord/stories/chord.stories.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
 import { generateChordData } from '@nivo/generators'
-import { Chord } from '../es'
+import { ChordSvg } from '../es'
 
 const commonProperties = {
     width: 600,
@@ -14,34 +14,42 @@ const commonProperties = {
 
 const stories = storiesOf('Chord', module)
 
-stories.add('default', withInfo()(() => <Chord {...commonProperties} />))
+stories.add('default', withInfo()(() => <ChordSvg {...commonProperties} />))
 
-stories.add('radial labels', withInfo()(() => <Chord {...commonProperties} labelRotation={-90} />))
+stories.add(
+    'radial labels',
+    withInfo()(() => <ChordSvg {...commonProperties} labelRotation={-90} />)
+)
 
 const customLabel = d => `${d.id} [${d.value}]`
 stories.add(
     'custom labels text',
     withInfo()(() => (
-        <Chord {...commonProperties} {...generateChordData({ size: 5 })} label={customLabel} />
+        <ChordSvg {...commonProperties} {...generateChordData({ size: 5 })} label={customLabel} />
     ))
 )
 
 stories.add(
     'angle padding',
-    withInfo()(() => <Chord {...commonProperties} labelRotation={-90} padAngle={0.06} />)
+    withInfo()(() => <ChordSvg {...commonProperties} labelRotation={-90} padAngle={0.06} />)
 )
 
 stories.add(
     'ribbons offset',
     withInfo()(() => (
-        <Chord {...commonProperties} labelRotation={-90} padAngle={0.02} innerRadiusOffset={0.02} />
+        <ChordSvg
+            {...commonProperties}
+            labelRotation={-90}
+            padAngle={0.02}
+            innerRadiusOffset={0.02}
+        />
     ))
 )
 
 stories.add(
     'alternative colors',
     withInfo()(() => (
-        <Chord
+        <ChordSvg
             {...commonProperties}
             labelRotation={-90}
             padAngle={0.02}
@@ -54,7 +62,7 @@ stories.add(
 stories.add(
     'putting labels inside arcs',
     withInfo()(() => (
-        <Chord
+        <ChordSvg
             {...commonProperties}
             {...generateChordData({ size: 5 })}
             padAngle={0.02}
@@ -69,7 +77,7 @@ stories.add(
 stories.add(
     'with formatted values',
     withInfo()(() => (
-        <Chord
+        <ChordSvg
             {...commonProperties}
             {...generateChordData({ size: 5 })}
             tooltipFormat={value =>

diff --git a/packages/nivo-chord/tests/Chord.test.js → ...ges/nivo-chord/tests/svg/ChordSvg.test.js b/packages/nivo-chord/tests/Chord.test.js → ...ges/nivo-chord/tests/svg/ChordSvg.test.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import Chord from '../src/Chord'
+import ChordSvg from '../../src/svg/ChordSvg'
 
 const sampleKeys = ['john', 'raph', 'junko']
 const sampleMatrix = [[10, 20, 0], [0, 30, 15], [15, 0, 25]]
 
 it('should render a basic chord diagram', () => {
     const component = renderer.create(
-        <Chord width={500} height={300} keys={sampleKeys} matrix={sampleMatrix} />
+        <ChordSvg width={500} height={300} keys={sampleKeys} matrix={sampleMatrix} />
     )
 
     let tree = component.toJSON()
@@ -16,7 +16,7 @@ it('should render a basic chord diagram', () => {
 
 it('should allow to disable labels', () => {
     const component = renderer.create(
-        <Chord
+        <ChordSvg
             width={500}
             height={300}
             keys={sampleKeys}

diff --git a/...rd/tests/__snapshots__/Chord.test.js.snap → ...s/svg/__snapshots__/ChordSvg.test.js.snap b/...rd/tests/__snapshots__/Chord.test.js.snap → ...s/svg/__snapshots__/ChordSvg.test.js.snap
diff --git a/website/src/SiteMap.js b/website/src/SiteMap.js
@@ -170,7 +170,7 @@ const SITEMAP = [
                     {
                         className: 'react',
                         path: '/',
-                        label: 'Chord',
+                        label: 'ChordSvg',
                         component: Chord,
                         exact: true,
                         tags: ['svg', 'relational', 'isomorphic'],

diff --git a/website/src/components/charts/chord/Chord.js b/website/src/components/charts/chord/Chord.js
@@ -9,7 +9,7 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import MediaQuery from 'react-responsive'
-import { ResponsiveChord } from '@nivo/chord'
+import { ResponsiveChordSvg } from '@nivo/chord'
 import ChartHeader from '../../ChartHeader'
 import ChartTabs from '../../ChartTabs'
 import ChordControls from './ChordControls'
@@ -106,7 +106,7 @@ export default class Chord extends Component {
         const mappedSettings = propsMapper(settings)
 
         const code = generateCode(
-            'ResponsiveChord',
+            'ResponsiveChordSvg',
             { keys, ...mappedSettings },
             {
                 pkg: '@nivo/chord',
@@ -116,7 +116,7 @@ export default class Chord extends Component {
 
         const header = (
             <ChartHeader
-                chartClass="Chord"
+                chartClass="ChordSvg"
                 tags={['relational', 'isomorphic', 'api']}
                 diceRoll={this.diceRoll}
             />
@@ -140,7 +140,7 @@ export default class Chord extends Component {
                     >
                         this block
                     </a>. The responsive alternative of this component is{' '}
-                    <code>ResponsiveChord</code>.
+                    <code>ResponsiveChordSvg</code>.
                 </p>
                 <p className="description">
                     This component is available in the{' '}
@@ -175,7 +175,7 @@ export default class Chord extends Component {
                         {description}
                     </MediaQuery>
                     <ChartTabs chartClass="chord" code={code} data={matrix}>
-                        <ResponsiveChord
+                        <ResponsiveChordSvg
                             matrix={matrix}
                             keys={keys}
                             {...mappedSettings}
@@ -193,7 +193,7 @@ export default class Chord extends Component {
                         settings={settings}
                         onChange={this.handleSettingsUpdate}
                     />
-                    <ComponentPropsDocumentation chartClass="Chord" properties={properties} />
+                    <ComponentPropsDocumentation chartClass="ChordSvg" properties={properties} />
                 </div>
             </div>
         )

diff --git a/website/src/components/pages/Home/index.js b/website/src/components/pages/Home/index.js
@@ -25,7 +25,7 @@ import {
 import { ResponsiveSankey } from '@nivo/sankey'
 import { ResponsiveVoronoi } from '@nivo/voronoi'
 import { ResponsiveRadar } from '@nivo/radar'
-import { ResponsiveChord } from '@nivo/chord'
+import { ResponsiveChordSvg } from '@nivo/chord'
 import { ResponsiveCalendar } from '@nivo/calendar'
 import { ResponsiveBubble } from '@nivo/circle-packing'
 import { ResponsiveSunburst } from '@nivo/sunburst'
@@ -92,7 +92,7 @@ class Home extends Component {
                 <Helmet title="nivo" />
                 <MediaQuery query="(min-width: 1200px)" className="home_item">
                     <Link to="/chord">
-                        <ResponsiveChord
+                        <ResponsiveChordSvg
                             colors={colors}
                             padAngle={0.04}
                             innerRadiusRatio={0.94}
@@ -343,7 +343,7 @@ class Home extends Component {
                 </MediaQuery>
                 <MediaQuery query="(min-width: 1000px)" className="home_item">
                     <Link to="/chord">
-                        <ResponsiveChord
+                        <ResponsiveChordSvg
                             colors={colors}
                             padAngle={0.04}
                             innerRadiusRatio={0.94}