housekeeping: standardize uiAccess nomenclature, standardize signal component setup

src/KonvaApp/Engine.ts

@@ -59,7 +59,7 @@ export class Engine {
     });
 
     // TODO: You may listen to all the image toolbar events here
-    uiEvents.imageToolbar.MOVE.onClick(() => {
+    uiEvents.toolbarImage.MOVE.onClick(() => {
       console.log("move");
     });
 
@@ -159,7 +159,7 @@ export class Engine {
   public initializeStage(sceneToken: string) {
     // load canvas that was originaly saved TODO Save manager for resharing.
 
-    uiAccess.imageToolbar.hide();
+    uiAccess.toolbarImage.hide();
     uiAccess.loadingBar.hide();
     this.setupStage();
   }

src/KonvaApp/Nodes/VideoNode.ts

@@ -4,7 +4,7 @@ import { NetworkedNodeContext } from "./NetworkedNodeContext";
 import { v4 as uuidv4 } from "uuid";
 
 import { uiAccess } from "~/signals";
-const imageToolbar = uiAccess.imageToolbar;
+const toolbarImage = uiAccess.toolbarImage;
 const loadingBar = uiAccess.loadingBar;
 
 export class VideoNode extends NetworkedNodeContext {
@@ -159,7 +159,7 @@ export class VideoNode extends NetworkedNodeContext {
     });
 
     this.node.on("mousedown", () => {
-      imageToolbar.show();
+      toolbarImage.show();
       this.updateContextMenuPosition();
 
       if (this.didFinishLoading == false) {
@@ -194,7 +194,7 @@ export class VideoNode extends NetworkedNodeContext {
   }
 
   updateContextMenuPosition() {
-    imageToolbar.setPosition({
+    toolbarImage.setPosition({
       x: this.node.getPosition().x + this.node.getSize().width / 4,
       y: this.node.getPosition().y - 150,
     });

src/KonvaRootComponent/ContextualToolbarImage.tsx

@@ -10,15 +10,15 @@ import { ToolbarImageButtonNames } from "~/components/features/ToolbarImage/enum
 import { transitionTimingStyles } from "~/components/styles";
 
 export const ContextualToolbarImage = () => {
-  const { isShowing, position, ...rest } = uiAccess.imageToolbar.signal.value;
+  const { isShowing, position, ...rest } = uiAccess.toolbarImage.signal.value;
   const buttonsProps = Object.values(ToolbarImageButtonNames).reduce(
     (acc, buttonName) => {
       acc[buttonName] = {
-        onClick: dispatchUiEvents.imageToolbar[buttonName],
+        onClick: dispatchUiEvents.toolbarImage[buttonName],
         disabled:
-          uiAccess.imageToolbar.signal.value.buttonStates[buttonName].disabled,
+          uiAccess.toolbarImage.signal.value.buttonStates[buttonName].disabled,
         active:
-          uiAccess.imageToolbar.signal.value.buttonStates[buttonName].active,
+          uiAccess.toolbarImage.signal.value.buttonStates[buttonName].active,
       };
       return acc;
     },

src/KonvaRootComponent/KonvaRootComponent.tsx

@@ -5,7 +5,7 @@ import { KonvaCanvasContainer } from "./KonvaCanvasContainer";
 import { ContextualToolbarImage } from "./ContextualToolbarImage";
 import { ContextualLoadingBar } from "./ContextualLoadingBar";
 import { SignaledToolbarMain } from "./SignaledToolbarMain";
-import { DialogError } from "~/components/features";
+import { SignaledDialogError } from "./SignaledComponents";
 import { EngineType } from "~/KonvaApp";
 
 // The KonvaApp is the root of the Konva stage
@@ -33,7 +33,7 @@ export const KonvaRootComponent = ({ className }: { className: string }) => {
       <Button
         className="absolute bottom-0 left-0"
         onClick={() => {
-          uiAccess.errorDialogue.show({
+          uiAccess.dialogueError.show({
             title: "Test Error",
             message: "This is a test error",
           });
@@ -51,7 +51,7 @@ export const KonvaRootComponent = ({ className }: { className: string }) => {
       <SignaledToolbarMain />
       <ContextualToolbarImage />
       <ContextualLoadingBar />
-      <DialogError />
+      <SignaledDialogError />
     </>
   );
 };

src/KonvaRootComponent/SignaledComponents.tsx

@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+
+import { dialogueError } from "~/signals/uiAccess/dialogueError";
+
+import { DialogError } from "~/components/features";
+
+export const SignaledDialogError = () => {
+  const props = dialogueError.signal.value;
+  const { isShowing, title, message } = props;
+  const onClose = useCallback(() => {
+    dialogueError.hide();
+  }, []);
+  return (
+    <DialogError
+      isShowing={isShowing}
+      title={title}
+      message={message}
+      onClose={onClose}
+    />
+  );
+};

src/app/pages/sandbox/ContextualToolbarForm.tsx

@@ -8,13 +8,13 @@ import { ToolbarImageButtonData } from "~/components/features/ToolbarImage/data"
 import { ToolbarImageButtonNames } from "~/components/features/ToolbarImage/enums";
 
 export const ContextualToolbarForm = () => {
-  const imageToolbar = uiAccess.imageToolbar;
+  const toolbarImage = uiAccess.toolbarImage;
 
   const {
     isShowing,
     disabled: allDisabled,
     buttonStates,
-  } = imageToolbar.signal.value;
+  } = toolbarImage.signal.value;
 
   const [x, setX] = useState(0);
   const [y, setY] = useState(0);
@@ -49,7 +49,7 @@ export const ContextualToolbarForm = () => {
         />
         <Button
           onClick={() =>
-            imageToolbar.setPosition({
+            toolbarImage.setPosition({
               x: x,
               y: y,
             })
@@ -57,18 +57,18 @@ export const ContextualToolbarForm = () => {
         >
           Set Position
         </Button>
-        <Button disabled={isShowing} onClick={() => imageToolbar.show()}>
+        <Button disabled={isShowing} onClick={() => toolbarImage.show()}>
           Show
         </Button>
 
-        <Button disabled={!isShowing} onClick={() => imageToolbar.hide()}>
+        <Button disabled={!isShowing} onClick={() => toolbarImage.hide()}>
           Hide
         </Button>
         <Button
           onClick={() => {
             const exec = allDisabled
-              ? imageToolbar.enable
-              : imageToolbar.disable;
+              ? toolbarImage.enable
+              : toolbarImage.disable;
             exec();
           }}
         >
@@ -84,7 +84,7 @@ export const ContextualToolbarForm = () => {
               buttonStates[button.name].disabled ? "secondary" : "primary"
             }
             onClick={() =>
-              imageToolbar.changeButtonState(button.name, {
+              toolbarImage.changeButtonState(button.name, {
                 disabled: !buttonStates[button.name].disabled,
               })
             }
@@ -100,7 +100,7 @@ export const ContextualToolbarForm = () => {
             icon={button.icon}
             variant={buttonStates[button.name].active ? "primary" : "secondary"}
             onClick={() =>
-              imageToolbar.changeButtonState(button.name, {
+              toolbarImage.changeButtonState(button.name, {
                 active: !buttonStates[button.name].active,
               })
             }
@@ -118,9 +118,9 @@ export const ContextualToolbarForm = () => {
 
 export const LittleThing = () => {
   Object.values(ToolbarImageButtonNames).forEach((buttonName) => {
-    uiEvents.imageToolbar[buttonName].onClick(() => {
+    uiEvents.toolbarImage[buttonName].onClick(() => {
       console.log(buttonName);
-      uiAccess.imageToolbar.changeButtonState(buttonName, {
+      uiAccess.toolbarImage.changeButtonState(buttonName, {
         disabled: true,
       });
     });

src/app/pages/sandbox/DialogErrorForm.tsx

@@ -3,7 +3,7 @@ import { Input, Button } from "~/components/ui";
 
 import { uiAccess } from "~/signals/uiAccess";
 
-export const ErrorDialogForm = () => {
+export const DialogErrorForm = () => {
   const [title, setTitle] = useState<string | undefined>(undefined);
   const [message, setMessage] = useState<string | undefined>(undefined);
 
@@ -35,7 +35,7 @@ export const ErrorDialogForm = () => {
         />
         <Button
           onClick={() => {
-            uiAccess.errorDialogue.show({
+            uiAccess.dialogueError.show({
               title: title,
               message: message,
             });
@@ -45,7 +45,7 @@ export const ErrorDialogForm = () => {
         </Button>
         <Button
           onClick={() => {
-            uiAccess.errorDialogue.hide();
+            uiAccess.dialogueError.hide();
           }}
         >
           Hide

src/app/pages/sandbox/index.tsx

@@ -1,13 +1,13 @@
 import { ContextualToolbarImage } from "~/KonvaRootComponent/ContextualToolbarImage";
 import { ContextualLoadingBar } from "~/KonvaRootComponent/ContextualLoadingBar";
 
-import { DialogError } from "~/components/features";
+import { SignaledDialogError } from "~/KonvaRootComponent/SignaledComponents";
 
 import { useRenderCounter } from "~/hooks/useRenderCounter";
 
 import { ContextualToolbarForm } from "./ContextualToolbarForm";
 import { ContextualLoadingBarForm } from "./ContextualLoadingBarForm";
-import { ErrorDialogForm } from "./ErrorDialogForm";
+import { DialogErrorForm } from "./DialogErrorForm";
 
 import { ButtonTestTester } from "./ButtonTestTester";
 
@@ -21,12 +21,12 @@ export const Sandbox = () => {
         <ButtonTestTester />
         <ContextualToolbarForm />
         <ContextualLoadingBarForm />
-        <ErrorDialogForm />
+        <DialogErrorForm />
       </div>
 
       <ContextualToolbarImage />
       <ContextualLoadingBar />
-      <DialogError />
+      <SignaledDialogError />
     </div>
   );
 };

src/components/features/DialogError/index.tsx

@@ -1,5 +1,5 @@
 import { twMerge } from "tailwind-merge";
-import { uiAccess } from "~/signals/uiAccess";
+
 import { paperWrapperStyles } from "~/components/styles";
 import {
   Description,
@@ -9,15 +9,19 @@ import {
 } from "@headlessui/react";
 import { Button } from "~/components/ui";
 
-export const DialogError = () => {
-  const props = uiAccess.errorDialogue.signal.value;
-  const { isShowing, title, message } = props;
-
-  function handleClose() {
-    uiAccess.errorDialogue.hide();
-  }
+export const DialogError = ({
+  isShowing,
+  title,
+  message,
+  onClose,
+}: {
+  isShowing: boolean;
+  title: string;
+  message: string;
+  onClose: () => void;
+}) => {
   return (
-    <Dialog open={isShowing} onClose={handleClose} className="relative z-50">
+    <Dialog open={isShowing} onClose={onClose} className="relative z-50">
       <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
         <DialogPanel
           className={twMerge(
@@ -28,7 +32,7 @@ export const DialogError = () => {
           <DialogTitle className="font-bold">{title}</DialogTitle>
           <Description>{message}</Description>
           <div className="flex justify-end gap-4">
-            <Button onClick={handleClose}>Close</Button>
+            <Button onClick={onClose}>Close</Button>
           </div>
         </DialogPanel>
       </div>

src/signals/uiAccess/dialogueError.ts

@@ -5,20 +5,20 @@ const initialState = {
   title: "",
   message: "",
 };
-const errorDialogueSignal = signal(initialState);
+const dialogErrorSignal = signal(initialState);
 
-export const errorDialogue = {
-  signal: errorDialogueSignal,
+export const dialogueError = {
+  signal: dialogErrorSignal,
 
   show({ title, message }: { title?: string; message?: string }) {
-    errorDialogueSignal.value = {
-      ...errorDialogueSignal.value,
+    dialogErrorSignal.value = {
+      ...dialogErrorSignal.value,
       title: title ?? "Error",
       message: message ?? "An unknownerror occurred",
       isShowing: true,
     };
   },
   hide() {
-    errorDialogueSignal.value = initialState;
+    dialogErrorSignal.value = initialState;
   },
 };

src/signals/uiAccess/index.ts

@@ -8,16 +8,16 @@ export type { uiAccessType };
 
 import { buttonTest } from "./buttonTest";
 
-import { errorDialogue } from "./errorDialogue";
+import { dialogueError } from "./dialogueError";
 import { loadingBar } from "./loadingBar";
-import { toolbarImage as imageToolbar } from "./toolbarImage";
+import { toolbarImage } from "./toolbarImage";
 import { toolbarVideo } from "./toolbarVideo";
 import { toolbarMain } from "./toolbarMain";
 
 export const uiAccess = {
   buttonTest,
-  errorDialogue,
-  imageToolbar,
+  dialogueError,
+  toolbarImage,
   loadingBar,
   toolbarVideo,
   toolbarMain,

src/signals/uiAccess/toolbarImage.ts

@@ -2,7 +2,7 @@ import { signal } from "@preact/signals-react";
 import { ContextualUi } from "./type";
 import { ToolbarImageButtonNames } from "~/components/features/ToolbarImage/enums";
 
-interface ContextualImageToolbarProps extends ContextualUi {
+interface ContextualToolbarImageProps extends ContextualUi {
   disabled: boolean;
   buttonStates: {
     [key in ToolbarImageButtonNames]: {
@@ -12,7 +12,7 @@ interface ContextualImageToolbarProps extends ContextualUi {
   };
 }
 
-const toolbarImageSignal = signal<ContextualImageToolbarProps>({
+const toolbarImageSignal = signal<ContextualToolbarImageProps>({
   position: {
     x: 0,
     y: 0,
@@ -24,16 +24,16 @@ const toolbarImageSignal = signal<ContextualImageToolbarProps>({
 
 export const toolbarImage = {
   signal: toolbarImageSignal,
-  setup(props: ContextualImageToolbarProps) {
+  setup(props: ContextualToolbarImageProps) {
     toolbarImageSignal.value = props;
   },
-  update(props: Partial<ContextualImageToolbarProps>) {
+  update(props: Partial<ContextualToolbarImageProps>) {
     toolbarImageSignal.value = {
       ...toolbarImageSignal.value,
       ...props,
     };
   },
-  setPosition(position: ContextualImageToolbarProps["position"]) {
+  setPosition(position: ContextualToolbarImageProps["position"]) {
     toolbarImageSignal.value = {
       ...toolbarImageSignal.value,
       position,
@@ -88,5 +88,5 @@ function initButtonStates() {
       active: false,
     };
   });
-  return ret as ContextualImageToolbarProps["buttonStates"];
+  return ret as ContextualToolbarImageProps["buttonStates"];
 }

src/signals/uiEvents/index.ts

@@ -3,8 +3,8 @@ import {
   events as addMediaEvents,
 } from "./addMedia";
 import {
-  dispatchers as imageToolbarDispatchers,
-  eventsHandlers as imageToolbarEvents,
+  dispatchers as toolbarImageDispatchers,
+  eventsHandlers as toolbarImageEvents,
 } from "./toolbarImage";
 import {
   dispatchers as videoToolbarDispatchers,
@@ -22,14 +22,14 @@ import {
 export const uiEvents = {
   ...addMediaEvents,
   buttonTest: buttonTestEvent,
-  imageToolbar: imageToolbarEvents,
+  toolbarImage: toolbarImageEvents,
   toolbarMain: toolbarMainEvents,
   toolbarVideo: videoToolbarEvents,
 };
 export const dispatchUiEvents = {
   ...addMediaDispatchers,
   buttonTest: buttonTestDispatcher,
-  imageToolbar: imageToolbarDispatchers,
+  toolbarImage: toolbarImageDispatchers,
   toolbarMain: toolbarMainDispatchers,
   toolbarVideo: videoToolbarDispatchers,
 };