feat(packages): Intent to ship React wrapper

Implementation of react wrapper

Close #2838

.eslintrc

@@ -40,6 +40,10 @@
         "import/prefer-default-export": 0,
         "no-unused-vars": "off",
         "no-sequences": 0,
+        "spaced-comment": ["error", "always", {
+            "exceptions": ["-", "+"],
+            "markers": ["/"]
+        }],
         "@typescript-eslint/no-unused-vars": [
             "error", {
                 "vars": "all",

packages/react/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+test/coverage
+test/__snapshots__
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/react/.storybook/main.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+	"stories": [
+		"../stories/**/*.stories.mdx",
+		"../stories/**/*.stories.@(js|jsx|ts|tsx)"
+	],
+	"addons": [
+		"@storybook/addon-console",
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-interactions"
+	],
+	"framework": "@storybook/react",
+	"core": {
+		"builder": "@storybook/builder-vite"
+	},
+	"features": {
+		"storyStoreV7": true
+	},
+	"reactOptions": {
+		"legacyRootApi": false
+	}
+}

packages/react/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

packages/react/.storybook/preview.cjs

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

packages/react/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 ~ present NAVER Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 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.

packages/react/README.md

@@ -0,0 +1,51 @@
+# @billboard.js/react
+
+React component for billboard.js
+
+## Installation
+
+```bash
+# Install billboard.js together if you don't have it already
+$ npm install billboard.js @billboard.js/react
+```
+
+## How to use
+
+```jsx
+import React, {useEffect, useRef} from "react";
+
+// import billboard.js
+import bb, {line} from "billboard.js";
+import "billboard.js/dist/billboard.css";  // default css
+
+// import react wrapper
+import BillboardJS, {IChart} from "@billboard.js/react";
+// const BillboardJS = require("@billboard.js/react");  // for CJS
+
+function App() {
+    // to get the instance, create ref and pass it to the component
+    const chartComponent = useRef<IChart>();
+    const options = {
+        data: {
+            columns: [
+                ["data1", 300, 350, 300]
+            ],
+            type: line()
+        }
+    };
+
+    useEffect(() => {
+        // get the instance from ref
+		const chart = chartComponent.current?.instance;
+
+        // call APIs
+        if (chart) {
+            chart.load( ... );
+        }
+    }, []);
+
+    return <div style={{width: "500px"}}>
+        <BillboardJS bb={bb} options={options} ref={chartComponent} />
+    </div>;
+}
+```

packages/react/demo/App.tsx

@@ -0,0 +1,61 @@
+import React, {useEffect, useRef} from "react";
+
+import bb, {bar, line} from "billboard.js";
+import "billboard.js/dist/billboard.css";
+import BillboardJS, {IChart} from "../src/index";
+// import BillboardJS, {IChart} from "@billboard.js/react";
+
+/**
+ * Default App
+ * @returns {JSX.Element}
+ */
+function App() {
+	const chartComponent = useRef<IChart>();
+
+	const d = {
+		data: {
+			columns: [
+				["data1", 300, 350, 300],
+				["data4", 30, 20, 50]
+			],
+			type: line()
+		}
+	};
+
+	const d2 = {
+		data: {
+			columns: [
+				["data1", 100, 250, 100],
+				["data2", 300, 120, 250]
+			],
+			type: bar()
+		}
+	};
+
+	useEffect(() => {
+		const chart = chartComponent.current?.instance;
+
+		if (chart) {
+			chart.load({
+				columns: [
+					["data1", 130, 120, 150],
+					["data4", 30, 20, 50]
+				],
+				unload: true
+			});
+		}
+
+		// @ts-ignore
+		// expose all instances to global
+		window.charts = chart.internal.charts;
+	}, []);
+
+	return (
+		<div className="App" style={{width: "500px"}}>
+			<BillboardJS bb={bb} options={d} ref={chartComponent} />
+			<BillboardJS bb={bb} options={d2} />
+		</div>
+	);
+}
+
+export default App;

packages/react/demo/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@billboard.js/react</title>
+  </head>
+  <body>
+    <h1>@billboard.js/react</h1>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

packages/react/demo/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+// import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
+);

packages/react/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@billboard.js/react",
+	"version": "1.0.0",
+	"description": "React component for billboard.js",
+	"main": "dist/billboardjs-react.js",
+	"types": "dist/types/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./dist/billboardjs-react.js",
+			"require": "./dist/billboardjs-react.cjs"
+		}
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build && tsc --emitDeclarationOnly",
+		"build:test": "vite --config vite.config.test.ts build",
+		"preview": "npm run build:test && vite preview",
+		"test": "npm run build:test && vitest",
+		"test:ui": "npm test -- --ui",
+		"coverage": "npm run build:test && vitest run --coverage",
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook",
+		"deploy": "npm run coverage && npm run build"
+	},
+	"keywords": [
+		"billboard.js",
+		"chart",
+		"graph",
+		"react",
+		"svg"
+	],
+	"files": [
+		"dist",
+		"src",
+		"README.md"
+	],
+	"author": "NAVER Corp.",
+	"license": "MIT",
+	"readmeFilename": "README.md",
+	"peerDependencies": {
+		"billboard.js": ">=3.0.0",
+		"react": ">=16.8.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.18.10",
+		"@playwright/test": "^1.25.1",
+		"@storybook/addon-actions": "^6.5.10",
+		"@storybook/addon-console": "^1.2.3",
+		"@storybook/addon-essentials": "^6.5.10",
+		"@storybook/addon-interactions": "^6.5.10",
+		"@storybook/addon-links": "^6.5.10",
+		"@storybook/builder-vite": "^0.2.2",
+		"@storybook/react": "^6.5.10",
+		"@storybook/testing-library": "^0.0.13",
+		"@types/react": "^18.0.17",
+		"@types/react-dom": "^18.0.6",
+		"@vitejs/plugin-react": "^2.0.1",
+		"@vitest/coverage-c8": "^0.22.1",
+		"@vitest/ui": "^0.22.1",
+		"babel-loader": "^8.2.5",
+		"billboard.js": "^3.5.1",
+		"jsdom": "^20.0.0",
+		"playwright": "^1.25.1",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"typescript": "^4.6.4",
+		"vite": "^3.0.7",
+		"vitest": "^0.22.1"
+	}
+}

packages/react/src/index.tsx

@@ -0,0 +1,55 @@
+import React, {forwardRef, useEffect, useImperativeHandle, useRef} from "react";
+import type {bb, Chart, ChartOptions} from "billboard.js";
+
+export interface IProp {
+	bb: typeof bb;
+	options: ChartOptions;
+}
+
+export interface IChart {
+	instance: Chart;
+}
+
+export default forwardRef((props: IProp, ref) => {
+	const container = useRef<HTMLDivElement>(null);
+	const instance = useRef<Chart | null>();
+	const {bb, options} = props;
+
+	// generate chart
+	const generate = () => {
+		if (!instance.current) {
+			options.bindto = container.current;
+
+			// generate chart
+			instance.current = bb.generate(options);
+		}
+	};
+
+	useEffect(() => {
+		if (!bb || !options) {
+			// eslint-disable-next-line no-console
+			console.warn("Required props('bb' or 'options') are not defined.");
+		} else {
+			generate();
+		}
+
+		// cleanup
+		return () => {
+			if (instance.current) {
+				instance.current.destroy();
+				instance.current = null;
+			}
+		};
+	}, []);
+
+	// customize ref to return the chart instance
+	useImperativeHandle(
+		ref, () => ({
+			get instance() {
+				return instance.current;
+			}
+		})
+	);
+
+	return <div ref={container} />;
+});