Move InputVector to input package

frontend/apps/editor3d/app/src/components/reusable/InputVector/InputVector.mdx

@@ -1,10 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-
-import * as InputVectorStories from './InputVector.stories';
-
-<Meta of={InputVectorStories} />
-
-# 3 Input controls: one for x, y, and z
-It allows entry os plus or minus numbers with decimals. It can also be adjusted via dragging the mouse left or right.
-
-<Canvas of={InputVectorStories.Default} />

frontend/apps/editor3d/app/src/components/reusable/InputVector/InputVector.stories.tsx

@@ -1,44 +0,0 @@
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { InputVector } from "./InputVector";
-import { withActions } from "@storybook/addon-actions/decorator";
-
-const meta: Meta<typeof InputVector> = {
-  component: InputVector,
-  parameters: {
-    actions: {
-      handles: ["change", "blur", "focus"],
-    },
-  },
-  decorators: [withActions],
-};
-
-type Story = StoryObj<typeof InputVector>;
-
-const InputVectorRender = () => {
-  // Sets the hooks for both the label and primary props
-  const [xyz, setXyz] = useState<Record<string, string>>({
-    x: "0",
-    y: "0",
-    z: "0",
-  });
-
-  return (
-    <InputVector
-      x={xyz.x}
-      y={xyz.y}
-      z={xyz.z}
-      onChange={(value) => setXyz(value)}
-    />
-  );
-};
-
-export const Default: Story = {
-  render: () => (
-    <div className="bg-action p-8">
-      <InputVectorRender />
-    </div>
-  ),
-};
-
-export default meta;

frontend/apps/editor3d/app/src/components/reusable/InputVector/index.ts

@@ -1 +0,0 @@
-export * from "./InputVector";

frontend/apps/editor3d/app/src/components/reusable/index.ts

@@ -1,4 +1,3 @@
-export * from "./InputVector";
 export * from "./NumberInput";
 export * from "./Pagination";
 export * from "./SearchFilter";

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx

@@ -10,11 +10,13 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
+  disableHotkeyInput,
+  enableHotkeyInput,
   objectPanel as objectPanelSignals,
   timelineHeight,
 } from "../../signals";
 import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
-import { InputVector } from "~/components";
+import { InputVector } from "@storyteller/ui-input";
 import { Button } from "@storyteller/ui-button";
 import { editorState } from "~/pages/PageEnigma/signals/engine";
 import { twMerge } from "tailwind-merge";
@@ -252,6 +254,8 @@ export const ControlPanelSceneObject = () => {
             z={localPosition.z.toString()}
             onChange={handlePositionChange}
             disabled={locked}
+            enableHotkeyInput={enableHotkeyInput}
+            disableHotkeyInput={disableHotkeyInput}
           />
         </div>
 
@@ -264,6 +268,8 @@ export const ControlPanelSceneObject = () => {
             onChange={handleRotationChange}
             increment={1}
             disabled={locked}
+            enableHotkeyInput={enableHotkeyInput}
+            disableHotkeyInput={disableHotkeyInput}
           />
         </div>
 
@@ -277,6 +283,8 @@ export const ControlPanelSceneObject = () => {
             z={localScale.z.toString()}
             onChange={handleScaleChange}
             disabled={locked}
+            enableHotkeyInput={enableHotkeyInput}
+            disableHotkeyInput={disableHotkeyInput}
           />
         </div>
       </Transition>

frontend/libs/components/input/src/index.ts

@@ -1,2 +1,2 @@
-
 export * from './lib/input';
+export * from './lib/InputVector';

frontend/libs/components/input/src/lib/InputVector.tsx

@@ -1,10 +1,6 @@
 import React, { ChangeEvent, RefObject, useRef } from "react";
 import { twMerge } from "tailwind-merge";
-import {
-  disableHotkeyInput,
-  DomLevels,
-  enableHotkeyInput,
-} from "~/pages/PageEnigma/signals";
+import { DomLevels } from "@storyteller/common";
 
 interface InputVectorProps {
   x: string;
@@ -13,6 +9,8 @@ interface InputVectorProps {
   onChange: (v: Record<string, string>) => void;
   increment?: number;
   disabled?: boolean;
+  disableHotkeyInput: (level: DomLevels) => void;
+  enableHotkeyInput: (level: DomLevels) => void;
 }
 
 export const InputVector = ({
@@ -22,6 +20,8 @@ export const InputVector = ({
   onChange,
   increment = 0.1,
   disabled,
+  disableHotkeyInput,
+  enableHotkeyInput,
 }: InputVectorProps) => {
   const xRef = useRef<HTMLInputElement>(null);
   const yRef = useRef<HTMLInputElement>(null);