rstudio · nstrayer · Dec 1, 2023 · Dec 1, 2023 · Dec 1, 2023 · Dec 1, 2023
diff --git a/inst/communication-types/package.json b/inst/communication-types/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "editor": "*",
     "shared-configs": "*",
-    "typescript": "^5.0.4"
+    "typescript": "^5.3.0"
   },
   "scripts": {
     "type-check": "tsc -p ./ --noEmit",

diff --git a/inst/editor-component-lib/package.json b/inst/editor-component-lib/package.json
@@ -30,8 +30,8 @@
     "tailwindcss": "^3.3.3",
     "shared-configs": "*",
     "tsx": "^3.12.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.4",
     "vite-tsconfig-paths": "^4.0.5"
   }
 }
diff --git a/inst/editor/README.md b/inst/editor/README.md
@@ -0,0 +1,3 @@
+How to get running with editor
+
+TODO: Add info on getting development going on editor
diff --git a/inst/editor/build/assets/index-faf2b339.css → inst/editor/build/assets/index-R-rzO2Tn.css b/inst/editor/build/assets/index-faf2b339.css → inst/editor/build/assets/index-R-rzO2Tn.css
diff --git a/inst/editor/build/assets/index-f1413a39.js → inst/editor/build/assets/index-UWa3tAPI.js b/inst/editor/build/assets/index-f1413a39.js → inst/editor/build/assets/index-UWa3tAPI.js
diff --git a/inst/editor/build/index.html b/inst/editor/build/index.html
@@ -26,13 +26,12 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Shiny UI Editor</title>
-    <script type="module" crossorigin src="./assets/index-f1413a39.js"></script>
-    <link rel="stylesheet" href="./assets/index-faf2b339.css">
+    <script type="module" crossorigin src="./assets/index-UWa3tAPI.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-R-rzO2Tn.css">
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" style="height: 100vh; display: relative"></div>
-
   </body>
 </html>
diff --git a/inst/editor/package.json b/inst/editor/package.json
@@ -65,9 +65,9 @@
     "storybook": "^7.0.0-beta.47",
     "tailwindcss": "^3.3.3",
     "tsx": "^3.11.0",
-    "typescript": "^5.0.4",
+    "typescript": "^5.3.0",
     "typescript-plugin-css-modules": "^5.0.1",
-    "vite": "^4.4.8",
+    "vite": "^5.0.4",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.30.1",
     "yarn": "^1.22.19"

diff --git a/inst/editor/playwright/component-tests/bsicon-chooser.spec.tsx b/inst/editor/playwright/component-tests/bsicon-chooser.spec.tsx
@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/experimental-ct-react";
 
-import { IconSelector } from "../../src/Shiny-Ui-Elements/Bslib/ValueBox/IconSelector";
+import { IconSelector } from "../../src/ui-node-definitions/Bslib/ValueBox/IconSelector";
 
 test("Can choose icons with search", async ({ mount, page }) => {
   let chosen_icon: string | null = null;

diff --git a/...-sure-cards-with-too-much-content-don-t-overflow-visually-1-chromium-darwin.png b/...-sure-cards-with-too-much-content-don-t-overflow-visually-1-chromium-darwin.png
diff --git a/...e-sure-cards-with-too-much-content-don-t-overflow-visually-1-firefox-darwin.png b/...e-sure-cards-with-too-much-content-don-t-overflow-visually-1-firefox-darwin.png
diff --git a/...ke-sure-cards-with-too-much-content-don-t-overflow-visually-1-webkit-darwin.png b/...ke-sure-cards-with-too-much-content-don-t-overflow-visually-1-webkit-darwin.png
diff --git a/...gression.spec.ts-snapshots/Landing-page-visual-regression-1-chromium-darwin.png b/...gression.spec.ts-snapshots/Landing-page-visual-regression-1-chromium-darwin.png
diff --git a/...egression.spec.ts-snapshots/Landing-page-visual-regression-1-firefox-darwin.png b/...egression.spec.ts-snapshots/Landing-page-visual-regression-1-firefox-darwin.png
diff --git a/...regression.spec.ts-snapshots/Landing-page-visual-regression-1-webkit-darwin.png b/...regression.spec.ts-snapshots/Landing-page-visual-regression-1-webkit-darwin.png
diff --git a/...sion.spec.ts-snapshots/Template-Chooser-visual-regression-1-chromium-darwin.png b/...sion.spec.ts-snapshots/Template-Chooser-visual-regression-1-chromium-darwin.png
diff --git a/...ssion.spec.ts-snapshots/Template-Chooser-visual-regression-1-firefox-darwin.png b/...ssion.spec.ts-snapshots/Template-Chooser-visual-regression-1-firefox-darwin.png
diff --git a/...ession.spec.ts-snapshots/Template-Chooser-visual-regression-1-webkit-darwin.png b/...ession.spec.ts-snapshots/Template-Chooser-visual-regression-1-webkit-darwin.png
diff --git a/inst/editor/src/DragAndDropHelpers/DropWatcherPanel.tsx b/inst/editor/src/DragAndDropHelpers/DropWatcherPanel.tsx
@@ -9,7 +9,6 @@ import {
 import UiNode from "../components/UiNode/UiNode";
 import { usePlaceNode } from "../state/usePlaceNode";
 import type { PathElement, NodePath } from "../ui-node-definitions/NodePath";
-import { makeChildPath } from "../ui-node-definitions/nodePathUtils";
 import type { ShinyUiNode } from "../ui-node-definitions/ShinyUiNode";
 import { getIsValidMove } from "../ui-node-definitions/TreeManipulation/getIsValidMove";
 import type { WrappingNode } from "../ui-node-definitions/TreeManipulation/wrapInNode";
@@ -18,6 +17,7 @@ import {
   getUiNodeTitle,
   getUiNodeInfo,
 } from "../ui-node-definitions/uiNodeTypes";
+import { makeChildPath } from "../ui-node-definitions/utils/nodePathUtils";
 import { mergeClasses } from "../utils/mergeClasses";
 
 import type { DraggedNodeInfo } from "./DragAndDropHelpers";

diff --git a/inst/editor/src/DragAndDropHelpers/useFilteredDrop.tsx b/inst/editor/src/DragAndDropHelpers/useFilteredDrop.tsx
@@ -144,7 +144,10 @@ function useDropHighlights({
     // the layout shift from the drop mode can cause the mouse to leave the
     // dragged item and thus prematurely terminate the drag event
     setTimeout(() => {
-      watcherRef.current?.classList.add(canAcceptDropClass);
+      if (!watcherRef.current) return;
+
+      watcherRef.current.classList.add(canAcceptDropClass);
+      watcherRef.current.dataset.canAcceptDrop = "true";
     }, 1);
   }, [canAcceptDropClass, watcherRef]);
 
@@ -165,6 +168,7 @@ function useDropHighlights({
 
     watcherRef.current.classList.remove(hoveringOverClass);
     watcherRef.current.classList.remove(canAcceptDropClass);
+    watcherRef.current.dataset.canAcceptDrop = "false";
   }, [canAcceptDropClass, hoveringOverClass, watcherRef]);
 
   return {

diff --git a/inst/editor/src/EditorContainer/getAllInputOutputIdsInApp.tsx b/inst/editor/src/EditorContainer/getAllInputOutputIdsInApp.tsx
@@ -1,5 +1,5 @@
 import type { ShinyUiNode } from "../ui-node-definitions/ShinyUiNode";
-import { walkUiNode } from "../ui-node-definitions/walkUiNode";
+import { walkUiNode } from "../ui-node-definitions/utils/walkUiNode";
 
 export function getAllInputOutputIdsInApp(ui_tree: ShinyUiNode): string[] {
   const ids: string[] = [];

diff --git a/inst/editor/src/ElementsPalette/UiElementIcon.tsx b/inst/editor/src/ElementsPalette/UiElementIcon.tsx
@@ -5,7 +5,6 @@ import {
 } from "../components/PopoverEl/FloatingPopover";
 import { useMakeDraggable } from "../DragAndDropHelpers/useMakeDraggable";
 import { getDefaultSettings } from "../SettingsPanel/buildStaticSettingsInfo";
-import { getUiNodeIcon } from "../Shiny-Ui-Elements/registered_ui_nodes";
 import type { ShinyUiNode } from "../ui-node-definitions/ShinyUiNode";
 import type { ShinyUiNodeIds } from "../ui-node-definitions/uiNodeTypes";
 import { getUiNodeInfo } from "../ui-node-definitions/uiNodeTypes";
@@ -52,3 +51,13 @@ export function UiElementIcon({ id }: { id: ShinyUiNodeIds }) {
     </Tooltip>
   );
 }
+
+/**
+ *
+ * @param id Name of ui node to look up
+ * @returns icon source for node or undefined if that icon doesn't exist
+ * @throws Error if node doesn't exist
+ */
+function getUiNodeIcon(id: string): string | undefined {
+  return getUiNodeInfo(id).iconSrc;
+}
diff --git a/inst/editor/src/ElementsPalette/index.tsx b/inst/editor/src/ElementsPalette/index.tsx
@@ -1,9 +1,9 @@
 import type { LanguageMode } from "communication-types/src/AppInfo";
 
 import { PanelHeader } from "../EditorLayout/PanelHeader";
-import { registered_ui_nodes } from "../Shiny-Ui-Elements/registered_ui_nodes";
 import { useLanguageMode } from "../state/languageMode";
 import type { ShinyUiNodeInfo } from "../ui-node-definitions/uiNodeTypes";
+import { all_node_info } from "../ui-node-definitions/uiNodeTypes";
 
 import classes from "./styles.module.css";
 import { UiElementIcon } from "./UiElementIcon";
@@ -23,7 +23,7 @@ const categoryOrder = Object.keys({
   Uncategorized: 1,
 } satisfies Record<Exclude<ShinyUiNodeInfo["category"], "TESTING">, 1>);
 
-type NodeInfo = (typeof registered_ui_nodes)[number];
+type NodeInfo = (typeof all_node_info)[number];
 
 function sortByCategory(info_a: NodeInfo, info_b: NodeInfo): number {
   const cat_a = categoryOrder.indexOf(info_a.category);
@@ -44,7 +44,7 @@ function filterToLanguage(info: NodeInfo, language: LanguageMode): boolean {
 export default function ElementsPalette() {
   const languageMode = useLanguageMode();
 
-  const ui_node_names = registered_ui_nodes
+  const ui_node_names = all_node_info
     .filter((info) => filterToLanguage(info, languageMode))
     .sort(sortByCategory)
     .map((info) => info.id);

diff --git a/inst/editor/src/SettingsPanel/FormBuilder.tsx b/inst/editor/src/SettingsPanel/FormBuilder.tsx
@@ -19,9 +19,26 @@ import { UnknownArgumentsRender } from "./UnknownArgumentsRender";
 
 type SettingsObj = Record<string, unknown>;
 
+/**
+ * A function that can be used to render a custom form for a node.
+ */
 export type CustomFormRenderFn<Settings extends SettingsObj> = (x: {
+  /**
+   * A map keyed by the name of an argument with values that are react elements rendering the appropriate settings input for adjusting that argument.
+   */
   inputs: Record<StringKeys<Settings>, JSX.Element>;
+  /**
+   * The current values of the settings/ arugments for a node
+   */
   settings: Settings;
+
+  /**
+   * Callback that can be used to update an argument's value if more complex
+   * logic is needed than is provided in the component provided by the arguments `inputs` component.
+   * @param name Name of the argument to update
+   * @param action How to update the argument. Is an object with either `type: "UPDATE"` or `type: "REMOVE"` and a `value` property if the type is `UPDATE`
+   * @returns void
+   */
   onSettingsChange?: (name: string, action: SettingsUpdateAction) => void;
 }) => JSX.Element;
 

diff --git a/inst/editor/src/SettingsPanel/SettingsInput/valueIsType.tsx b/inst/editor/src/SettingsPanel/SettingsInput/valueIsType.tsx
@@ -4,7 +4,7 @@ import type {
   KnownInputFieldTypes,
   InputTypeNames,
 } from "../../ui-node-definitions/inputFieldTypes";
-import { isShinyUiNode } from "../../ui-node-definitions/isShinyUiNode";
+import { isShinyUiNode } from "../../ui-node-definitions/utils/isShinyUiNode";
 
 // import type { InputTypeNames, KnownInputFieldTypes } from "../inputFieldTypes";
 
@@ -48,10 +48,6 @@ export function valueIsType(
     return typeof value === "string";
   }
 
-  if (type === "string-array") {
-    return Array.isArray(value) && typeof value[0] === "string";
-  }
-
   if (type === "ui-node") {
     return isShinyUiNode(value);
   }

diff --git a/inst/editor/src/SettingsPanel/SettingsPanel.tsx b/inst/editor/src/SettingsPanel/SettingsPanel.tsx
@@ -5,7 +5,6 @@ import { ErrorBoundary } from "react-error-boundary";
 
 import { GeneralErrorView } from "../components/ErrorCatcher/GeneralErrorView";
 import { PanelHeader } from "../EditorLayout/PanelHeader";
-import { getUiNodeSettingsRenderer } from "../Shiny-Ui-Elements/registered_ui_nodes";
 import type { ShinyUiNode } from "../ui-node-definitions/ShinyUiNode";
 import { getUiNodeInfo } from "../ui-node-definitions/uiNodeTypes";
 import {
@@ -23,6 +22,16 @@ import PathBreadcrumb from "./PathBreadcrumb";
 import { useGetNodeServerBindingInfo } from "./useGetNodeServerBindingInfo";
 import { useUpdateSettings } from "./useUpdateSettings";
 
+/**
+ *
+ * @param id Name of ui node to look up
+ * @returns Component used to render that node
+ * @throws Error if node doesn't exist
+ */
+function getUiNodeSettingsRenderer(id: string) {
+  return getUiNodeInfo(id).settingsFormRender;
+}
+
 export function SettingsPanel({ app_tree }: { app_tree: ShinyUiNode }) {
   const {
     currentNode,

diff --git a/inst/editor/src/SettingsPanel/UnknownArgumentsRender.tsx b/inst/editor/src/SettingsPanel/UnknownArgumentsRender.tsx
@@ -7,8 +7,8 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "../components/PopoverEl/FloatingPopover";
-import type { UnknownUiNode } from "../ui-node-definitions/internal/unknown_code";
-import { isKnownShinyUiNode } from "../ui-node-definitions/isShinyUiNode";
+import type { UnknownUiNode } from "../ui-node-definitions/internal/UnknownUiFunction/unknown_code";
+import { isKnownShinyUiNode } from "../ui-node-definitions/utils/isShinyUiNode";
 
 import type { FormBuilderProps } from "./FormBuilder";
 

diff --git a/inst/editor/src/Shiny-Ui-Elements/Bslib/BslibCard.tsx b/inst/editor/src/Shiny-Ui-Elements/Bslib/BslibCard.tsx
diff --git a/inst/editor/src/Shiny-Ui-Elements/Bslib/BslibCardBodyFill.tsx b/inst/editor/src/Shiny-Ui-Elements/Bslib/BslibCardBodyFill.tsx
diff --git a/inst/editor/src/Shiny-Ui-Elements/Bslib/BslibCardFooter.tsx b/inst/editor/src/Shiny-Ui-Elements/Bslib/BslibCardFooter.tsx
diff --git a/inst/editor/src/Shiny-Ui-Elements/Bslib/NavPanel.tsx b/inst/editor/src/Shiny-Ui-Elements/Bslib/NavPanel.tsx
diff --git a/inst/editor/src/Shiny-Ui-Elements/Bslib/index.tsx b/inst/editor/src/Shiny-Ui-Elements/Bslib/index.tsx
diff --git a/inst/editor/src/Shiny-Ui-Elements/DtDtOutput/index.tsx b/inst/editor/src/Shiny-Ui-Elements/DtDtOutput/index.tsx
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		How to get running with editor

		TODO: Add info on getting development going on editor