Install missing prettier package, fix readme

README.md

@@ -9,10 +9,10 @@
 @cebby2420 has kindly made a desktop app that does so. This has no official affiliation with VIA, but you can find it at https://github.com/cebby2420/via-desktop.
 
 ## Useful commands
-### `npm run start`
+### `npm run dev`
 
 Runs the app in the development mode.
-Open http://localhost:8080 to view it in the browser.
+Open http://localhost:5173 to view it in the browser.
 
 The page will reload if you make edits.
 You will also see any lint errors in the console.
@@ -23,10 +23,9 @@ Builds a static copy of your site to the `build/` folder.
 Your app is ready to be deployed!
 
 
-### `npm run test`
+### `npm run format`
 
-Launches the application test runner.
-Run with the `--watch` flag (`npm test -- --watch`) to run in interactive watch mode.
+Formats the code with prettier.
 
 #
 

package.json

@@ -1,4 +1,6 @@
 {
+  "private": true,
+  "name": "via-app",
   "license": "GPL-3.0",
   "scripts": {
     "dev": "node scripts/build-definitions.js && vite --force",
@@ -63,6 +65,7 @@
     "@vitejs/plugin-react": "^3.1.0",
     "concurrently": "^7.6.0",
     "husky": "^8.0.3",
+    "prettier": "^3.3.3",
     "typescript": "^5.6.2",
     "vite": "^4.1.4",
     "vite-plugin-html": "^3.2.0"

src/Routes.tsx

@@ -35,13 +35,13 @@ export default () => {
   const testContextState = useState({clearTestKeys: () => {}});
   return (
     <>
-        <TestContext.Provider value={testContextState}>
-          <GlobalStyle />
-          {hasHIDSupport && <UnconnectedGlobalMenu />}
-          <CanvasRouter />
+      <TestContext.Provider value={testContextState}>
+        <GlobalStyle />
+        {hasHIDSupport && <UnconnectedGlobalMenu />}
+        <CanvasRouter />
 
-          <Home hasHIDSupport={hasHIDSupport}>{RouteComponents}</Home>
-        </TestContext.Provider>
+        <Home hasHIDSupport={hasHIDSupport}>{RouteComponents}</Home>
+      </TestContext.Provider>
     </>
   );
 };

src/components/inputs/accent-select.tsx

@@ -15,13 +15,13 @@ const customStyles = {
       background: state.isSelected
         ? 'var(--color_accent)'
         : state.isFocused
-        ? 'var(--bg_control)'
-        : 'var(--bg_menu)',
+          ? 'var(--bg_control)'
+          : 'var(--bg_menu)',
       color: state.isSelected
         ? 'var(--color_inside-accent)'
         : state.isFocused
-        ? 'var(--color_accent)'
-        : 'var(--color_accent)',
+          ? 'var(--color_accent)'
+          : 'var(--color_accent)',
     };
   },
   container: (provided: any) => ({

src/components/panes/configure-panes/custom/custom-control.tsx

@@ -83,10 +83,10 @@ const VIACustomControl = (props: VIACustomControlProps) => {
       const buttonOption: any[] = options || [1];
       return (
         <AccentButton
-          onClick={() => 
-            props.updateValue(name, ...command, buttonOption[0])
-          }
-        >Click</AccentButton>
+          onClick={() => props.updateValue(name, ...command, buttonOption[0])}
+        >
+          Click
+        </AccentButton>
       );
     }
     case 'range': {

src/components/panes/configure-panes/custom/menu-generator.tsx

@@ -99,8 +99,9 @@ const MenuComponent = React.memo((props: any) => (
   </>
 ));
 
-const MenuBuilder = (elem: any) => (props: any) =>
-  <MenuComponent {...props} key={elem._id} elem={elem} />;
+const MenuBuilder = (elem: any) => (props: any) => (
+  <MenuComponent {...props} key={elem._id} elem={elem} />
+);
 
 function submenuGenerator(
   elem: TagWithId<VIASubmenu, VIASubmenuSlice>,

src/components/panes/configure-panes/keycode.tsx

@@ -35,9 +35,7 @@ import {
   updateKey as updateKeyAction,
   updateSelectedKey,
 } from 'src/store/keymapSlice';
-import {
-  getMacroCount,
-} from 'src/store/macrosSlice';
+import {getMacroCount} from 'src/store/macrosSlice';
 import {
   disableGlobalHotKeys,
   enableGlobalHotKeys,
@@ -117,8 +115,10 @@ const KeycodeDesc = styled.div`
   }
 `;
 
-const generateKeycodeCategories = (basicKeyToByte: Record<string, number>, numMacros: number = 16) =>
-  getKeycodes(numMacros).concat(getOtherMenu(basicKeyToByte));
+const generateKeycodeCategories = (
+  basicKeyToByte: Record<string, number>,
+  numMacros: number = 16,
+) => getKeycodes(numMacros).concat(getOtherMenu(basicKeyToByte));
 
 const maybeFilter = <M extends Function>(maybe: boolean, filter: M) =>
   maybe ? () => true : filter;

src/components/panes/configure-panes/submenus/macros/keycode-sequence-components.tsx

@@ -184,10 +184,10 @@ export const getSequenceItemComponent = (
   action === RawKeycodeSequenceAction.Down
     ? KeycodeDownLabel
     : action === RawKeycodeSequenceAction.Up
-    ? KeycodeUpLabel
-    : action === RawKeycodeSequenceAction.CharacterStream
-    ? CharacterStreamLabel
-    : KeycodePressLabel;
+      ? KeycodeUpLabel
+      : action === RawKeycodeSequenceAction.CharacterStream
+        ? CharacterStreamLabel
+        : KeycodePressLabel;
 
 function capitalize(string: string) {
   return string[0].toUpperCase() + string.slice(1);

src/components/panes/configure-panes/submenus/macros/macro-controls.tsx

@@ -189,8 +189,8 @@ export const MacroEditControls: React.FC<{
                 {!isDelaySupported
                   ? 'Upgrade firmware to use delays'
                   : !recordDelays
-                  ? 'Record Delays'
-                  : 'Skip Recording Delays'}
+                    ? 'Record Delays'
+                    : 'Skip Recording Delays'}
               </IconButtonTooltip>
             </IconToggleContainer>
           </MacroControlGroupContainer>

src/components/panes/configure-panes/submenus/macros/macro-recorder.tsx

@@ -104,13 +104,16 @@ const smartTransform = (
 };
 
 const componentJoin = (arr: (JSX.Element | null)[], separator: JSX.Element) => {
-  return arr.reduce((acc, next, idx) => {
-    if (idx) {
-      acc.push({...separator, key: idx});
-    }
-    acc.push(next);
-    return acc;
-  }, [] as (JSX.Element | null)[]);
+  return arr.reduce(
+    (acc, next, idx) => {
+      if (idx) {
+        acc.push({...separator, key: idx});
+      }
+      acc.push(next);
+      return acc;
+    },
+    [] as (JSX.Element | null)[],
+  );
 };
 
 const KeycodeMap = getKeycodes()
@@ -283,10 +286,10 @@ export const MacroRecorder: React.FC<{
                       </span>,
                     )
                   : Array.isArray(actionArg)
-                  ? actionArg
-                      .map((k) => getSequenceLabel(KeycodeMap[k]) ?? k)
-                      .join(' + ')
-                  : getSequenceLabel(KeycodeMap[actionArg])}
+                    ? actionArg
+                        .map((k) => getSequenceLabel(KeycodeMap[k]) ?? k)
+                        .join(' + ')
+                    : getSequenceLabel(KeycodeMap[actionArg])}
               </Label>
             ) : (
               <WaitInput

src/components/panes/design.tsx

@@ -158,8 +158,8 @@ function importDefinitions(
                   ? res
                   : keyboardDefinitionV2ToVIADefinitionV2(res)
                 : isVIADefinitionV3(res)
-                ? res
-                : keyboardDefinitionV3ToVIADefinitionV3(res);
+                  ? res
+                  : keyboardDefinitionV3ToVIADefinitionV3(res);
             return definition;
           } else {
             errors = (

src/components/panes/errors.tsx

@@ -95,11 +95,7 @@ const AppErrors: React.FC<{}> = ({}) => {
         }) => (
           <Container key={timestamp}>
             {timestamp}
-            <ul>
-              {error?.split('\n').map((line) => (
-                <li>{line}</li>
-              ))}
-            </ul>
+            <ul>{error?.split('\n').map((line) => <li>{line}</li>)}</ul>
             <ul>
               <li>Device: {productName}</li>
               <li>Vid: {printId(vendorId)}</li>

src/components/three-fiber/canvas-router.tsx

@@ -131,8 +131,8 @@ export const NonSuspenseCanvasRouter = () => {
             ? !hideTerrainBG
               ? 'translateY(-500px)'
               : !dimensions
-              ? ''
-              : `translateY(${-300 + dimensions!.height / 2}px)`
+                ? ''
+                : `translateY(${-300 + dimensions!.height / 2}px)`
             : '',
           position: hideCanvasScene && !hideTerrainBG ? 'absolute' : 'relative',
           overflow: 'visible',

src/components/three-fiber/unit-key/keycap.tsx

@@ -22,8 +22,8 @@ const getMacroData = ({
   label && label.length > 15
     ? label
     : macroExpression && macroExpression.length
-    ? macroExpression
-    : null;
+      ? macroExpression
+      : null;
 
 const paintEncoder = (
   canvas: HTMLCanvasElement,
@@ -377,8 +377,8 @@ export const Keycap: React.FC<ThreeFiberKeycapProps> = React.memo((props) => {
         ? KeycapState.Pressed
         : KeycapState.Unpressed
       : hovered || selected
-      ? KeycapState.Unpressed
-      : KeycapState.Pressed;
+        ? KeycapState.Unpressed
+        : KeycapState.Pressed;
   const [keycapZ, rotationZ] =
     pressedState === KeycapState.Pressed
       ? [zDown, rotation[2]]
@@ -392,8 +392,8 @@ export const Keycap: React.FC<ThreeFiberKeycapProps> = React.memo((props) => {
           : 'lightgrey'
         : 'pink'
       : pressedState === KeycapState.Unpressed
-      ? 'lightgrey'
-      : 'lightgrey';
+        ? 'lightgrey'
+        : 'lightgrey';
 
   const {z, b, rotateZ, tooltipScale} = useSpring({
     config: {duration: 100},
@@ -409,35 +409,35 @@ export const Keycap: React.FC<ThreeFiberKeycapProps> = React.memo((props) => {
       return disabled
         ? [noop, noop, noop, noop]
         : props.mode === DisplayMode.ConfigureColors
-        ? [
-            noop,
-            (evt: ThreeEvent<MouseEvent>) => {
-              if (onPointerOver) {
-                onPointerOver(evt, idx);
-              }
-            },
-            noop,
-            (evt: ThreeEvent<MouseEvent>) => {
-              if (onPointerDown) {
-                onPointerDown(evt, idx);
-              }
-            },
-          ]
-        : [
-            (evt: ThreeEvent<MouseEvent>) => onClick(evt, idx),
-            (evt: ThreeEvent<MouseEvent>) => {
-              if (onPointerOver) {
-                onPointerOver(evt, idx);
-              }
-              hover(true);
-            },
-            () => hover(false),
-            (evt: ThreeEvent<MouseEvent>) => {
-              if (onPointerDown) {
-                onPointerDown(evt, idx);
-              }
-            },
-          ];
+          ? [
+              noop,
+              (evt: ThreeEvent<MouseEvent>) => {
+                if (onPointerOver) {
+                  onPointerOver(evt, idx);
+                }
+              },
+              noop,
+              (evt: ThreeEvent<MouseEvent>) => {
+                if (onPointerDown) {
+                  onPointerDown(evt, idx);
+                }
+              },
+            ]
+          : [
+              (evt: ThreeEvent<MouseEvent>) => onClick(evt, idx),
+              (evt: ThreeEvent<MouseEvent>) => {
+                if (onPointerOver) {
+                  onPointerOver(evt, idx);
+                }
+                hover(true);
+              },
+              () => hover(false),
+              (evt: ThreeEvent<MouseEvent>) => {
+                if (onPointerDown) {
+                  onPointerDown(evt, idx);
+                }
+              },
+            ];
     }, [disabled, onClick, onPointerDown, onPointerOver, hover, idx, mode]);
 
   const AniMeshMaterial = animated.meshPhongMaterial as any;

src/components/two-string/canvas-router.tsx

@@ -111,8 +111,8 @@ export const CanvasRouter = () => {
             ? !hideTerrainBG
               ? 'translateY(-500px)'
               : !dimensions
-              ? ''
-              : `translateY(${-300 + dimensions!.height / 2}px)`
+                ? ''
+                : `translateY(${-300 + dimensions!.height / 2}px)`
             : '',
           position: hideCanvasScene && !hideTerrainBG ? 'absolute' : 'relative',
           overflow: 'visible',