add popover component, v0.3.0

Author: devxpy

app/app.tsx

@@ -58,6 +58,7 @@ export const links: LinksFunction = () => {
     },
     ...require("~/dataTable.styles").links(),
     ...require("~/gooeyFileInput.styles").links(),
+    ...require("~/components/GooeyPopover.styles").links(),
     { rel: "stylesheet", href: customStyles },
     { rel: "stylesheet", href: appStyles },
   ];

app/components/GooeyPopover.styles.tsx

@@ -0,0 +1,6 @@
+import { LinksFunction } from "@remix-run/node";
+import tippyAnimStyles from "tippy.js/animations/scale.css";
+
+export const links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: tippyAnimStyles }];
+};

app/components/GooeyPopover.tsx

@@ -0,0 +1,49 @@
+import Tippy from "@tippyjs/react";
+import { useState } from "react";
+import { OnChange } from "~/app";
+import { RenderedChildren, TreeNode } from "~/renderer";
+
+export default function GooeyPopover({
+  content,
+  children,
+  onChange,
+  state,
+  ...props
+}: {
+  content: Array<TreeNode>;
+  children: Array<TreeNode>;
+  onChange: OnChange;
+  state: Record<string, any>;
+}) {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <Tippy
+      visible={visible}
+      onClickOutside={() => setVisible(false)}
+      content={
+        <div onClick={() => setVisible(false)}>
+          <RenderedChildren
+            children={content}
+            onChange={onChange}
+            state={state}
+          />
+        </div>
+      }
+      animation="scale"
+      {...props}
+    >
+      <button
+        type="button"
+        className="border-0 bg-transparent"
+        onClick={() => setVisible(!visible)}
+      >
+        <RenderedChildren
+          children={children}
+          onChange={onChange}
+          state={state}
+        />
+      </button>
+    </Tippy>
+  );
+}

app/renderer.tsx

@@ -18,6 +18,8 @@ import { OnChange } from "./app";
 import CountdownTimer from "./components/countdown";
 import GooeySelect from "./components/GooeySelect";
 import { lazyImport } from "./lazyImports";
+import Tippy from "@tippyjs/react";
+import GooeyPopover from "./components/GooeyPopover";
 
 const { DataTable, DataTableRaw } = lazyImport(() => import("~/dataTable"));
 
@@ -42,7 +44,7 @@ const Plot = lazyImport(
 
 const CodeEditor = lazyImport(() => import("./components/CodeEditor")).default;
 
-type TreeNode = {
+export type TreeNode = {
   name: string;
   props: Record<string, any>;
   children: Array<TreeNode>;
@@ -355,27 +357,16 @@ function RenderedTreeNode({
       }
     }
     case "gui-button": {
-      const { label, className, ...args } = props;
+      const { label, ...args } = props;
       return (
-        <button
-          type="button"
-          className={`btn btn-theme ${className ?? ""}`}
-          {...args}
-        >
+        <button type="button" {...args}>
           <RenderedMarkdown body={label} />
         </button>
       );
     }
     case "download-button": {
-      const { label, className, url, ...args } = props;
-      return (
-        <DownloadButton
-          label={label}
-          className={className}
-          url={url}
-          {...args}
-        />
-      );
+      const { label, url, ...args } = props;
+      return <DownloadButton label={label} url={url} {...args} />;
     }
     case "select":
       return <GooeySelect props={props} onChange={onChange} state={state} />;
@@ -439,6 +430,18 @@ function RenderedTreeNode({
       const { chart, ...args } = props;
       return <Plot {...chart} style={{ width: "100%" }} />;
     }
+    case "popover": {
+      const { content, ...args } = props;
+      return (
+        <GooeyPopover
+          content={content}
+          children={children}
+          onChange={onChange}
+          state={state}
+          {...args}
+        />
+      );
+    }
     default:
       return (
         <div>

app/styles/app.css

@@ -292,3 +292,7 @@ div[id^="react-select-"][id$="-listbox"] {
 .gui-input-number input {
   padding: 0.5rem;
 }
+
+.bg-hover-light:hover {
+  background-color: var(--bs-gray-200) !important;
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gooey-gui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "sideEffects": false,
   "scripts": {
     "build": "remix build",
@@ -29,6 +29,7 @@
     "@sentry/integrations": "^7.73.0",
     "@sentry/remix": "^7.73.0",
     "@textea/json-viewer": "^3.0.0",
+    "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-theme-dracula": "^4.23.0",
     "@uiw/react-codemirror": "^4.23.0",
     "@uppy/audio": "^1.1.1",

package.json

@@ -115,8 +115,8 @@ def markdown(
     )
 
 
-def _node(name: str, **props):
-    node = core.RenderTreeNode(name=name, props=props)
+def _node(nodename: str, **props):
+    node = core.RenderTreeNode(name=nodename, props=props)
     node.mount()
     return core.NestingCtx(node)
 
@@ -556,7 +556,7 @@ def button(
     """
     if not key:
         key = core.md5_values("button", label, help, type, props)
-    className = f"btn-{type} " + props.pop("className", "")
+    className = f"btn btn-theme btn-{type} " + props.pop("className", "")
     core.RenderTreeNode(
         name=component,
         props=dict(
@@ -1019,6 +1019,17 @@ def plotly_chart(figure_or_data, **kwargs):
     ).mount()
 
 
+def popover(**props) -> tuple[core.NestingCtx, core.NestingCtx]:
+    content = core.RenderTreeNode(name="content")
+
+    popover = core.RenderTreeNode(
+        name="popover", props=props | dict(content=content.children)
+    )
+    popover.mount()
+
+    return core.NestingCtx(popover), core.NestingCtx(content)
+
+
 def dedent(text: str | None) -> str | None:
     if not text:
         return text

py/gooey_gui/components/common.py

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "gooey-gui"
-version = "0.2.1"
+version = "0.3.0"
 description = ""
 authors = ["Dev Aggarwal <devxpy@gmail.com>"]
 license = "Apache-2.0"