chore: test fn component

bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/package.json

@@ -34,9 +34,9 @@
   "homepage": ".",
   "devDependencies": {
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "react-scripts": "^5.0.1",
-    "typescript": "^4.2.0"
+    "typescript": "^5.0.0"
   }
 }

bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/MyComponent.tsx

@@ -7,14 +7,14 @@ import React, { ReactNode } from "react"
 import {
   ConfigProvider,
   GPTVis,
-  // VisText,
-  // withDefaultChartCode,
-  // ChartType,
-  // DualAxes,
-  // Radar,
-  // Histogram,
-  // Treemap,
-  // WordCloud,
+  VisText,
+  withDefaultChartCode,
+  ChartType,
+  DualAxes,
+  Radar,
+  Histogram,
+  Treemap,
+  WordCloud,
 } from "@antv/gpt-vis"
 
 interface State {
@@ -29,18 +29,18 @@ class MyComponent extends StreamlitComponentBase<State> {
   public state = { numClicks: 0 }
 
   private components = {
-    // "vis-text": VisText,
-    // code: withDefaultChartCode({
-    //   components: {
-    //     [ChartType.DualAxes]: DualAxes,
-    //     [ChartType.Radar]: Radar,
-    //     [ChartType.Histogram]: Histogram,
-    //     [ChartType.Treemap]: Treemap,
-    //     [ChartType.WordCloud]: WordCloud,
-    //   },
-    //   loadingTimeout: 5,
-    //   debug: false,
-    // }),
+    "vis-text": VisText,
+    code: withDefaultChartCode({
+      components: {
+        [ChartType.DualAxes]: DualAxes,
+        [ChartType.Radar]: Radar,
+        [ChartType.Histogram]: Histogram,
+        [ChartType.Treemap]: Treemap,
+        [ChartType.WordCloud]: WordCloud,
+      },
+      loadingTimeout: 5,
+      debug: false,
+    }),
   }
 
   public render = (): ReactNode => {

bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/Render.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import {
+  Streamlit,
+  withStreamlitConnection,
+  ComponentProps,
+  Theme,
+} from "streamlit-component-lib"
+import {
+  ConfigProvider,
+  GPTVis,
+  VisText,
+  withDefaultChartCode,
+  ChartType,
+  DualAxes,
+  Radar,
+  Histogram,
+  Treemap,
+  WordCloud,
+} from "@antv/gpt-vis"
+
+const components = {
+  "vis-text": VisText,
+  code: withDefaultChartCode({
+    components: {
+      [ChartType.DualAxes]: DualAxes,
+      [ChartType.Radar]: Radar,
+      [ChartType.Histogram]: Histogram,
+      [ChartType.Treemap]: Treemap,
+      [ChartType.WordCloud]: WordCloud,
+    },
+    loadingTimeout: 5,
+    debug: false,
+  }),
+}
+
+const GPTVisRender: React.FC<ComponentProps> = (props) => {
+  const { theme, args } = props
+  const { config, content } = args
+
+  const style: React.CSSProperties = {}
+
+  if (theme) {
+    // Use the theme object to style our button border. Alternatively, the
+    // theme style is defined in CSS vars.
+    style.color = theme.textColor
+    style.font = theme.font
+    style.backgroundColor = theme.backgroundColor
+  }
+
+  return (
+    <div style={style}>
+      <ConfigProvider {...config}>
+        <GPTVis components={components}>{content}</GPTVis>
+      </ConfigProvider>
+    </div>
+  )
+}
+
+export const GPTVisRenderWrapper = withStreamlitConnection(GPTVisRender)

bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/index.tsx

@@ -1,10 +1,11 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import MyComponent from "./MyComponent"
+// import MyComponent from "./MyComponent"
+import { GPTVisRenderWrapper } from "./Render"
 
 ReactDOM.render(
   <React.StrictMode>
-    <MyComponent />
+    <GPTVisRenderWrapper />
   </React.StrictMode>,
   document.getElementById("root")
 )