styled-components alternative for react-vis

package.json

@@ -86,13 +86,16 @@
     "prettier": "^1.14.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "styled-components": "^5.1.0",
     "stylelint": "^7.7.1",
     "stylelint-config-standard": "^15.0.1",
     "tape": "^4.6.3",
     "uglify-js": "^2.8.22"
   },
   "peerDependencies": {
-    "react": "15.3.0 - 16.x"
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0",
+    "styled-components": ">= 5"
   },
   "keywords": [
     "d3",

src/plot/axis/axis-line.js

@@ -23,6 +23,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {ORIENTATION} from 'utils/axis-utils';
+import {XYPlotAxisLine} from '../styled-components';
 
 const {LEFT, RIGHT, TOP, BOTTOM} = ORIENTATION;
 
@@ -69,7 +70,7 @@ function AxisLine({orientation, width, height, style}) {
     };
   }
   return (
-    <line {...lineProps} className="rv-xy-plot__axis__line" style={style} />
+    <XYPlotAxisLine {...lineProps} style={style} />
   );
 }
 

src/plot/axis/decorative-axis.js

@@ -24,6 +24,7 @@ import PropTypes from 'prop-types';
 
 import AbstractSeries from 'plot/series/abstract-series';
 import DecorativeAxisTicks from './decorative-axis-ticks';
+import {XYPlotAxisLine} from '../styled-components';
 import Animation from 'animation';
 import {getCombinedClassName} from 'utils/styling-utils';
 
@@ -78,15 +79,14 @@ class DecorativeAxis extends AbstractSeries {
         className={getCombinedClassName(predefinedClassName, className)}
         transform={`translate(${marginLeft},${marginTop})`}
       >
-        <line
+        <XYPlotAxisLine
           {...{
             x1: x({x: axisStart.x}),
             x2: x({x: axisEnd.x}),
             y1: y({y: axisStart.y}),
             y2: y({y: axisEnd.y}),
             ...style.line
           }}
-          className="rv-xy-plot__axis__line"
         />
         <g className="rv-xy-manipulable-axis__ticks">
           {DecorativeAxisTicks({

src/plot/styled-components.js

@@ -0,0 +1,22 @@
+/* eslint-disable camelcase */
+import {styledWithClass} from 'utils/styling-utils';
+
+const $rv_xy_plot_axis_font_color = '#6b6b76';
+const $rv_xy_plot_axis_line_color = '#e6e6e9';
+const $rv_xy_plot_axis_font_size = '11px';
+const $rv_xy_plot_tooltip_background = '#3a3a48';
+const $rv_xy_plot_tooltip_color = '#fff';
+const $rv_xy_plot_tooltip_font_size = '12px';
+const $rv_xy_plot_tooltip_border_radius = '4px';
+const $rv_xy_plot_tooltip_shadow = '0 2px 4px rgba(0, 0, 0, 0.5)';
+const $rv_xy_plot_tooltip_padding = '7px 10px';
+
+export const XYPlotInnerSvg = styledWithClass('svg', 'rv-xy-plot__inner')`
+  display: block;
+`;
+
+export const XYPlotAxisLine = styledWithClass('line', 'rv-xy-plot__axis__line')`
+  fill: none;
+  stroke-width: 2px;
+  stroke: ${$rv_xy_plot_axis_line_color};
+`;

src/plot/xy-plot.js

@@ -23,6 +23,7 @@ import PropTypes from 'prop-types';
 import equal from 'deep-equal';
 
 import {getCombinedClassName} from 'utils/styling-utils';
+import {XYPlotInnerSvg} from './styled-components';
 
 import {
   extractScalePropsFromProps,
@@ -543,8 +544,7 @@ class XYPlot extends React.Component {
         }}
         className={getCombinedClassName("rv-xy-plot", className)}
       >
-        <svg
-          className="rv-xy-plot__inner"
+        <XYPlotInnerSvg
           width={width}
           height={height}
           style={style}
@@ -562,7 +562,7 @@ class XYPlot extends React.Component {
           onWheel={onWheel}
         >
           {components.filter(c => c && c.type.requiresSVG)}
-        </svg>
+        </XYPlotInnerSvg>
         {this.renderCanvasComponents(components, this.props)}
         {components.filter(c => c && !c.type.requiresSVG && !c.type.isCanvas)}
       </div>

src/styles/plot.scss

@@ -22,16 +22,6 @@ $rv-xy-plot-tooltip-padding: 7px 10px;
   }
 }
 
-.rv-xy-plot__inner {
-  display: block;
-}
-
-.rv-xy-plot__axis__line {
-  fill: none;
-  stroke-width: 2px;
-  stroke: $rv-xy-plot-axis-line-color;
-}
-
 .rv-xy-plot__axis__tick__line {
   stroke: $rv-xy-plot-axis-line-color;
 }

src/utils/styling-utils.js

@@ -17,14 +17,25 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
+import React from 'react';
+import styled from 'styled-components';
 
 /**
  * Generates interpolated class names signature based on multiple class names
  * ignoring the falsy and non-string values
  * @param {...string} classNames CSS class signatures.
  * @returns {string} Interpolated string containing all valid class names.
  */
-
 export function getCombinedClassName(...classNames) {
   return classNames.filter(cn => cn && typeof cn === 'string').join(' ')
 }
+
+export function styledWithClass(elementName, globalClassName) {
+  function StyledComponent({className, ...props}) {
+    return React.createElement(
+      elementName,
+      {className: `${globalClassName} ${className}`, ...props}
+    );
+  }
+  return styled(StyledComponent);
+}