refactor(css): removes css, inline required CSS into <style>

Importing CSS files globally (e.g. `import "./styles.css"`) can cause resolution issues with certain
libraries/frameworks.
Example: Next.js (https://github.com/vercel/next.js/blob/master/errors/css-npm.md)

Since rd3t's CSS is bare bones to begin with, we provide all required styles as a template string,
which can be imported like any other TS/JS module and inlined into a `<style></style>` tag.

Author: bkrem

package.json

@@ -8,15 +8,12 @@
     "url": "https://github.com/bkrem/react-d3-tree/issues"
   },
   "homepage": "https://github.com/bkrem/react-d3-tree",
-  "files": [
-    "lib"
-  ],
+  "files": ["lib"],
   "main": "lib/index.js",
   "scripts": {
-    "cp:css": "cd src && find . -name '*.css' | cpio -pdm ../lib && cd ..",
     "build:docs": "rimraf ./docs && typedoc",
-    "build": "rimraf lib && npm run cp:css && tsc",
-    "build:watch": "rimraf lib && npm run cp:css && tsc -w",
+    "build": "rimraf lib && tsc",
+    "build:watch": "rimraf lib && tsc -w",
     "lint": "eslint src/**/*.js",
     "test": "jest --coverage --verbose",
     "test:clean": "rimraf ./coverage",
@@ -49,17 +46,8 @@
     }
   },
   "lint-staged": {
-    "src/**/*.js": [
-      "eslint",
-      "prettier --write",
-      "jest --findRelatedTests",
-      "git add"
-    ],
-    "src/**/*.{ts,tsx}": [
-      "prettier --write",
-      "jest --findRelatedTests",
-      "git add"
-    ]
+    "src/**/*.js": ["eslint", "prettier --write", "jest --findRelatedTests", "git add"],
+    "src/**/*.{ts,tsx}": ["prettier --write", "jest --findRelatedTests", "git add"]
   },
   "dependencies": {
     "clone": "^2.1.1",

src/Link/index.tsx

@@ -10,7 +10,6 @@ import {
   TreeNodeDatum,
   PathClassFunction,
 } from '../types/common';
-import './style.css';
 
 type LinkEventHandler = (
   source: HierarchyPointNode<TreeNodeDatum>,

src/Link/style.css

@@ -4,7 +4,6 @@ import { select } from 'd3-selection';
 
 import { Orientation, Point, TreeNodeDatum, RenderCustomNodeElementFn } from '../types/common';
 import DefaultNodeElement from './DefaultNodeElement';
-import './style.css';
 
 type NodeEventHandler = (id: string, evt: SyntheticEvent) => void;
 

src/Node/index.tsx

@@ -11,7 +11,7 @@ import Node from '../Node';
 import Link from '../Link';
 import { TreeNodeDatum, Point, RawNodeDatum } from '../types/common';
 import { TreeLinkEventCallback, TreeProps } from './types';
-import './style.css';
+import globalCss from '../globalCss';
 
 type TreeState = {
   dataRef: TreeProps['data'];
@@ -489,6 +489,7 @@ class Tree extends React.Component<TreeProps, TreeState> {
 
     return (
       <div className={`rd3t-tree-container ${zoomable ? 'rd3t-grabbable' : undefined}`}>
+        <style>{globalCss}</style>
         <svg className={[rd3tSvgClassName, svgClassName].join(' ')} width="100%" height="100%">
           <TransitionGroupWrapper
             enableLegacyTransitions={enableLegacyTransitions}

src/Node/style.css

@@ -0,0 +1,58 @@
+// Importing CSS files globally (e.g. `import "./styles.css"`) can cause resolution issues with certain
+// libraries/frameworks.
+// Example: Next.js (https://github.com/vercel/next.js/blob/master/errors/css-npm.md)
+//
+// Since rd3t's CSS is bare bones to begin with, we provide all required styles as a template string,
+// which can be imported like any other TS/JS module and inlined into a `<style></style>` tag.
+
+export default `
+/* Tree */
+.rd3t-tree-container {
+  width: 100%;
+  height: 100%;
+}
+
+.rd3t-grabbable {
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+}
+.rd3t-grabbable:active {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}
+
+/* Node */
+.rd3t-node {
+  cursor: pointer;
+  fill: #777;
+  stroke: #000;
+  stroke-width: 2;
+}
+
+.rd3t-leaf-node {
+  cursor: pointer;
+  fill: transparent;
+  stroke: #000;
+  stroke-width: 2;
+}
+
+.rd3t-label__title {
+  stroke: #000;
+  stroke-width: 1;
+}
+
+.rd3t-label__attributes {
+  stroke: #777;
+  stroke-width: 1;
+  font-size: smaller;
+}
+
+/* Link */
+.rd3t-link {
+  fill: none;
+  stroke: #000;
+}
+`;

src/Tree/index.tsx

@@ -1,3 +1,4 @@
+import { SyntheticEvent } from 'react';
 import { HierarchyPointNode } from 'd3-hierarchy';
 
 export type Orientation = 'horizontal' | 'vertical';
@@ -31,7 +32,7 @@ export type PathFunctionOption = 'diagonal' | 'elbow' | 'straight' | 'step';
 export type PathFunction = (link: TreeLinkDatum, orientation: Orientation) => string;
 export type PathClassFunction = PathFunction;
 
-export type SyntheticEventHandler = (evt: React.SyntheticEvent) => void;
+export type SyntheticEventHandler = (evt: SyntheticEvent) => void;
 
 /**
  * The properties that are passed to the user-defined `renderCustomNodeElement` render function.
@@ -50,4 +51,4 @@ export interface CustomNodeElementProps {
   toggleNode: () => void;
 }
 
-export type RenderCustomNodeElementFn = (rd3tProps: CustomNodeElementProps) => JSX.Element;
+export type RenderCustomNodeElementFn = (rd3tNodeProps: CustomNodeElementProps) => JSX.Element;