fix(type): fix to export option type definition

- Export option type interface from billboard.js
- Fix some type missmatch

Ref naver#3077

packages/react/CHANGELOG.md

@@ -0,0 +1,7 @@
+## 1.0.1 (2023-02-06)
+
+
+### Bug Fixes
+
+* **type:** Export options interface for react component (closes [#3077](https://github.com/naver/billboard.js/issues/3077)
+* **package:** Error in react package when option is passed as props (closes [#3075](https://github.com/naver/billboard.js/issues/3075)

packages/react/README.md

@@ -11,6 +11,7 @@ $ npm install billboard.js @billboard.js/react
 
 ## How to use
 
+### Basic Usage
 ```jsx
 import React, {useEffect, useRef} from "react";
 
@@ -24,7 +25,7 @@ import BillboardJS, {IChart} from "@billboard.js/react";
 
 function App() {
     // to get the instance, create ref and pass it to the component
-    const chartComponent = useRef<IChart>();
+    const chartComponent = useRef<IChart>(null);
     const options = {
         data: {
             columns: [
@@ -49,3 +50,66 @@ function App() {
     </div>;
 }
 ```
+
+### Using `props` passed to the component
+
+When the options are passed to the "chart" component.
+
+```js
+// index.tsx
+import App from "./App.tsx";
+
+const options = {
+    data: {
+        columns: [
+            ["data1", 300, 350, 300]
+        ],
+        type: "bar"
+    }
+};
+
+<App {...options} />
+
+// App.tsx
+import * as Chart from "billboard.js";
+import "billboard.js/dist/billboard.css";  // default css
+import BillboardJS, {IChar, IChartOptions} from "../src/index";
+
+export function App(props: IChartOptions) {
+    const chartComponent = useRef<IChart>(null);
+
+    // when chart "type" is passed from props, chart types need to be initialized separately.
+    // in this scenario, can't be "tree-shaken" only used chart type modules.
+    Chart[props.data.type]();
+
+    useEffect(() => {
+        const chart = chartComponent.current?.instance;
+
+        if (chart) {
+            chart.load( ... );
+        }
+    }, []);
+
+    return <div style={{width: "500px"}}>
+        <BillboardJS bb={Chart.bb} options={props} ref={chartComponent} />
+    </div>;
+}
+```
+
+### TypeScript Interfaces
+
+```ts
+// chart options
+interface IChartOptions;
+
+// @billboard.js/react props
+interface IProp {
+	bb: typeof bb;
+	options: ChartOptions;
+}
+
+// Chart instance
+interface IChart {
+	instance: Chart;
+}
+```

packages/react/demo/App.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useRef} from "react";
 
-import bb, {area, bar, line} from "billboard.js";
+import bb, {bar, line} from "billboard.js";
+import * as BB from "billboard.js";
 import "billboard.js/dist/billboard.css";
 import BillboardJS, {IChart} from "../src/index";
 // import BillboardJS, {IChart} from "@billboard.js/react";
@@ -11,7 +12,7 @@ import BillboardJS, {IChart} from "../src/index";
  * @returns {JSX.Element}
  */
 function App(props) {
-	const chartComponent = useRef<IChart>();
+	const chartComponent = useRef<IChart>(null);
 
 	const d = {
 		data: {
@@ -33,9 +34,11 @@ function App(props) {
 		}
 	};
 
-	if (props.data.type === "area") {
-		area();
-	}
+	BB[props.data.type]();
+
+	// if (props.data?.type === "area") {
+	// 	area();
+	// }
 
 	useEffect(() => {
 		const chart = chartComponent.current?.instance;

packages/react/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@billboard.js/react",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "React component for billboard.js",
 	"main": "dist/billboardjs-react.js",
 	"types": "dist/types/index.d.ts",
@@ -54,22 +54,22 @@
 		"@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/builder-vite": "^0.4.0",
 		"@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",
+		"@vitejs/plugin-react": "^3.1.0",
+		"@vitest/coverage-c8": "^0.28.3",
+		"@vitest/ui": "^0.28.3",
+		"babel-loader": "^9.1.2",
 		"billboard.js": "^3.5.1",
-		"jsdom": "^20.0.0",
+		"jsdom": "^21.1.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"
+		"vite": "^4.1.1",
+		"vitest": "^0.28.3"
 	}
 }

packages/react/src/index.tsx

@@ -5,6 +5,8 @@
 import React, {forwardRef, useEffect, useImperativeHandle, useRef} from "react";
 import type {bb, Chart, ChartOptions} from "billboard.js";
 
+export {ChartOptions as IChartOptions};
+
 export interface IProp {
 	bb: typeof bb;
 	options: ChartOptions;
@@ -14,7 +16,7 @@ export interface IChart {
 	instance: Chart;
 }
 
-export default forwardRef((props: IProp, ref) => {
+export default forwardRef<IChart, IProp>((props, ref) => {
 	const container = useRef<HTMLDivElement>(null);
 	const instance = useRef<Chart | null>();
 	const {bb, options: {...options}} = props;
@@ -50,7 +52,7 @@ export default forwardRef((props: IProp, ref) => {
 	useImperativeHandle(
 		ref, () => ({
 			get instance() {
-				return instance.current;
+				return instance.current as Chart;
 			}
 		})
 	);