feat: Jupyter accepts children (#4663)

* Fixes an issue where I forgot to allow a children prop in JupyterRoot
* Also moves the Jupyter components to a subdirectory
* Also fixes the Plasmic styling

Author: ryscheng

apps/frontend/components/widgets/index.ts

@@ -20,7 +20,7 @@ import {
   JupyterRootMeta,
   JupyterNotebookMeta,
   JupyterConsoleMeta,
-} from "@/components/widgets/jupyter-meta";
+} from "@/components/widgets/jupyter/jupyter-meta";
 import { Markdown, MarkdownMeta } from "@/components/widgets/markdown";
 import {
   MonacoEditor,
@@ -47,15 +47,15 @@ export function registerAllWidgets(PLASMIC: NextJsPlasmicComponentLoader) {
     AlgoliaSearchListMeta,
   );
   PLASMIC.registerComponent(
-    dynamic(() => import("./jupyter-root"), { ssr: false }),
+    dynamic(() => import("./jupyter/jupyter-root"), { ssr: false }),
     JupyterRootMeta,
   );
   PLASMIC.registerComponent(
-    dynamic(() => import("./jupyter-notebook"), { ssr: false }),
+    dynamic(() => import("./jupyter/jupyter-notebook"), { ssr: false }),
     JupyterNotebookMeta,
   );
   PLASMIC.registerComponent(
-    dynamic(() => import("./jupyter-console"), { ssr: false }),
+    dynamic(() => import("./jupyter/jupyter-console"), { ssr: false }),
     JupyterConsoleMeta,
   );
 

apps/frontend/components/widgets/jupyter-console.tsx renamed to apps/frontend/components/widgets/jupyter/jupyter-console.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Console } from "@datalayer/jupyter-react";
-import type { JupyterConsoleProps } from "@/components/widgets/jupyter-meta";
+import type { JupyterConsoleProps } from "@/components/widgets/jupyter/jupyter-meta";
 
 function JupyterConsole(props: JupyterConsoleProps) {
   return (

apps/frontend/components/widgets/jupyter-meta.tsx renamed to apps/frontend/components/widgets/jupyter/jupyter-meta.tsx

@@ -1,16 +1,19 @@
 "use client";
 
+import { ReactElement } from "react";
 import { CodeComponentMeta } from "@plasmicapp/loader-nextjs";
 import type { JupyterProps, INotebookProps } from "@datalayer/jupyter-react";
 
 type JupyterRootProps = Partial<JupyterProps> & {
   className?: string;
+  children?: ReactElement;
 };
 
 const JupyterRootMeta: CodeComponentMeta<JupyterRootProps> = {
   name: "JupyterRoot",
   description: "Root wrapper for Jupyter components",
   props: {
+    children: "slot",
     jupyterServerUrl: "string",
     jupyterServerToken: "string",
     lite: "boolean",

apps/frontend/components/widgets/jupyter-notebook.tsx renamed to apps/frontend/components/widgets/jupyter/jupyter-notebook.tsx

@@ -1,9 +1,14 @@
 "use client";
 import { Notebook } from "@datalayer/jupyter-react";
-import type { JupyterNotebookProps } from "@/components/widgets/jupyter-meta";
+import type { JupyterNotebookProps } from "@/components/widgets/jupyter/jupyter-meta";
 
 function JupyterNotebook(props: JupyterNotebookProps) {
-  return <Notebook className={props.className} {...props} />;
+  const { className, ...restProps } = props;
+  return (
+    <div className={className}>
+      <Notebook {...restProps} />
+    </div>
+  );
 }
 
 export default JupyterNotebook;

apps/frontend/components/widgets/jupyter-root.tsx renamed to apps/frontend/components/widgets/jupyter/jupyter-root.tsx

@@ -1,10 +1,15 @@
 "use client";
 
 import { Jupyter } from "@datalayer/jupyter-react";
-import type { JupyterRootProps } from "@/components/widgets/jupyter-meta";
+import type { JupyterRootProps } from "@/components/widgets/jupyter/jupyter-meta";
 
 function JupyterRoot(props: JupyterRootProps) {
-  return <Jupyter className={props.className} {...props} />;
+  const { className, children, ...restProps } = props;
+  return (
+    <div className={className}>
+      <Jupyter {...restProps}>{children}</Jupyter>;
+    </div>
+  );
 }
 
 export default JupyterRoot;