feat(chart): add BBChart component for billboard.js integration

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/BBChart/BBChart.tsx

@@ -0,0 +1,27 @@
+import { ChartOptions, bb } from 'billboard.js';
+import { memo, useEffect, useRef } from 'react';
+
+interface BBChartProps {
+  options: ChartOptions;
+}
+
+const BBChart = ({ options }: BBChartProps) => {
+  const _chartRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!_chartRef.current) return;
+
+    const chart = bb.generate({
+      bindto: _chartRef.current,
+      ...options
+    });
+
+    return () => {
+      chart.destroy();
+    };
+  }, [options]);
+
+  return <div ref={_chartRef} onClickCapture={(e) => e.stopPropagation()} />;
+};
+
+export default memo(BBChart);

src/custom/BBChart/index.ts

@@ -0,0 +1,3 @@
+import BBChart from './BBChart';
+
+export { BBChart };

src/custom/index.tsx

@@ -1,4 +1,5 @@
 import { ActionButton } from './ActionButton';
+import { BBChart } from './BBChart';
 import { BookmarkNotification } from './BookmarkNotification';
 import CatalogFilter, { CatalogFilterProps } from './CatalogFilter/CatalogFilter';
 import { ChapterCard } from './ChapterCard';
@@ -67,6 +68,7 @@ export { UserSearchField } from './UserSearchField';
 
 export {
   ActionButton,
+  BBChart,
   BookmarkNotification,
   CatalogCardDesignLogo,
   CatalogFilter,
@@ -148,6 +150,7 @@ export type {
 export * from './CatalogDesignTable';
 export * from './CatalogDetail';
 export * from './Dialog';
+export * from './ResourceDetailFormatters';
 export * from './ShareModal';
 export * from './UserSearchField';
 export * from './Workspaces';