From fb50cbc26335869db33e205431c43468d6b8622a Mon Sep 17 00:00:00 2001
From: TuTiDore <tutidore@gmail.com>
Date: Sun, 24 Dec 2023 19:04:28 -0500
Subject: [PATCH] fix prettier config

---
 .prettierrc                           |  3 ---
 .prettierrc.cjs                       |  3 +++
 src/App.tsx                           | 20 ++++++++++----------
 src/components/FourPanel.tsx          |  6 ++++--
 src/components/FourPanelContainer.tsx |  2 +-
 src/components/Loading.tsx            |  6 +++---
 src/components/UpdatePing.tsx         |  4 ++--
 src/features/Config.tsx               | 14 +++++++-------
 src/features/FeatureForm.tsx          |  8 ++++----
 src/features/Toy.tsx                  | 12 ++++++------
 src/layout/Button.tsx                 |  2 +-
 src/layout/Select.tsx                 |  2 +-
 src/layout/Slider.tsx                 | 10 +++++-----
 src/layout/Switch.tsx                 |  2 +-
 src/layout/Tooltip.tsx                |  4 ++--
 15 files changed, 50 insertions(+), 48 deletions(-)
 delete mode 100644 .prettierrc
 create mode 100644 .prettierrc.cjs

diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 92617e2..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"]
-}
\ No newline at end of file
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
new file mode 100644
index 0000000..0518537
--- /dev/null
+++ b/.prettierrc.cjs
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
+};
diff --git a/src/App.tsx b/src/App.tsx
index 00fa7d4..397b851 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -75,7 +75,7 @@ export default function App() {
         disableOnPortChange={disableOnPortChange}
       />
     ) : !hasOnlineToys ? (
-      <div className="flex flex-col justify-center items-center w-full">
+      <div className="flex w-full flex-col items-center justify-center">
         <img src={cryingAnimeGirl} />
         <div>No Online Toys</div>
       </div>
@@ -97,13 +97,13 @@ export default function App() {
 
   return (
     <div
-      className="w-full h-screen p-4"
+      className="h-screen w-full p-4"
       onContextMenu={(e) => e.preventDefault()}
     >
       <div className="grid grid-cols-[12rem,_1fr] gap-3">
         <div className="flex flex-col gap-1">
           <img className="h-14 object-contain" src={VibecheckLogo} />
-          <div className="flex justify-around items-center mt-2 mb-1">
+          <div className="mb-1 mt-2 flex items-center justify-around">
             <ExternalLogo
               src={VrchatLogo}
               link="VRChatGroup"
@@ -120,8 +120,8 @@ export default function App() {
               tooltip="Vibecheck Github"
             />
           </div>
-          <div className="bg-zinc-800 rounded-md justify-between flex-col overflow-hidden h-[calc(100vh-185px)] flex">
-            <div className="flex flex-col pl-2 select-none overflow-y-scroll scrollbar">
+          <div className="flex h-[calc(100vh-185px)] flex-col justify-between overflow-hidden rounded-md bg-zinc-800">
+            <div className="scrollbar flex select-none flex-col overflow-y-scroll pl-2">
               <AnimatePresence>
                 {toysList.map((sidebarToy) => (
                   <button
@@ -134,7 +134,7 @@ export default function App() {
                       sidebarToy.toy_connected
                         ? "text-zinc-200"
                         : "text-zinc-500",
-                      "bg-zinc-700 rounded-md p-2 m-2 hover:bg-cyan-600 outline-2 outline-cyan-400",
+                      "m-2 rounded-md bg-zinc-700 p-2 outline-2 outline-cyan-400 hover:bg-cyan-600",
                     )}
                   >
                     {parseName(sidebarToy.toy_name)}
@@ -153,12 +153,12 @@ export default function App() {
               )}
             </Button>
           </div>
-          <div className="flex justify-around items-center">
+          <div className="flex items-center justify-around">
             <UpdatePing canUpdate={canUpdate}>
               <Settings
                 className={cn(
                   selection?.type == "Config" && "rotate-45",
-                  "h-10 cursor-pointer transform duration-300 ease-in-out",
+                  "h-10 transform cursor-pointer duration-300 ease-in-out",
                 )}
                 onClick={() => setConfig()}
               />
@@ -175,8 +175,8 @@ export default function App() {
             </Tooltip>
           </div>
         </div>
-        <div className="bg-zinc-800 rounded-lg">
-          <div className="flex p-4 h-full">{mainPanel}</div>
+        <div className="rounded-lg bg-zinc-800">
+          <div className="flex h-full p-4">{mainPanel}</div>
         </div>
       </div>
       {version}
diff --git a/src/components/FourPanel.tsx b/src/components/FourPanel.tsx
index 2a0a956..d9db2b5 100644
--- a/src/components/FourPanel.tsx
+++ b/src/components/FourPanel.tsx
@@ -33,8 +33,10 @@ export default function FourPanel({
         label
       )}
       <div>{two}</div>
-      <div className="text-right w-full col-span-2 md:col-span-1">{three}</div>
-      <div className="text-right hidden md:inline">{four}</div>
+      <div className="col-span-2 flex w-full flex-col text-right md:col-span-1">
+        {three}
+      </div>
+      <div className="hidden text-right md:inline">{four}</div>
     </>
   );
 }
diff --git a/src/components/FourPanelContainer.tsx b/src/components/FourPanelContainer.tsx
index fffea2b..0dd5601 100644
--- a/src/components/FourPanelContainer.tsx
+++ b/src/components/FourPanelContainer.tsx
@@ -6,7 +6,7 @@ export default function FourPanelContainer({
   children: ReactNode;
 }) {
   return (
-    <div className="grid grid-cols-2 md:grid-cols-[minmax(6rem,_1fr)_minmax(1rem,_1fr)_minmax(4rem,_6fr)_minmax(2.5rem,_1fr)] text-sm text-justify p-4 gap-y-1 md:gap-y-2 gap-x-0 md:gap-x-8 items-center">
+    <div className="grid grid-cols-2 items-center gap-x-0 gap-y-1 p-4 text-justify text-sm md:grid-cols-[minmax(6rem,_1fr)_minmax(1rem,_1fr)_minmax(4rem,_6fr)_minmax(2.5rem,_1fr)] md:gap-x-8 md:gap-y-2">
       {children}
     </div>
   );
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index f989bd1..0628bda 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -2,7 +2,7 @@ export default function Loading() {
   return (
     <>
       <div
-        className="animate-bounce transform -translate-y-1/4"
+        className="-translate-y-1/4 transform animate-bounce"
         style={{
           animationDelay: "250ms",
         }}
@@ -10,7 +10,7 @@ export default function Loading() {
         .
       </div>
       <div
-        className="animate-bounce transform -translate-y-1/4"
+        className="-translate-y-1/4 transform animate-bounce"
         style={{
           animationDelay: "500ms",
         }}
@@ -18,7 +18,7 @@ export default function Loading() {
         .
       </div>
       <div
-        className="animate-bounce transform -translate-y-1/4"
+        className="-translate-y-1/4 transform animate-bounce"
         style={{
           animationDelay: "750ms",
         }}
diff --git a/src/components/UpdatePing.tsx b/src/components/UpdatePing.tsx
index 58abca9..852bdb9 100644
--- a/src/components/UpdatePing.tsx
+++ b/src/components/UpdatePing.tsx
@@ -12,8 +12,8 @@ export default function UpdatePing({
       {children}
       {canUpdate && (
         <>
-          <div className="absolute top-0 right-0 w-2 h-2 rounded-full bg-green-300 animate-ping" />
-          <div className="absolute top-0 right-0 w-2 h-2 rounded-full bg-green-300" />
+          <div className="absolute right-0 top-0 h-2 w-2 animate-ping rounded-full bg-green-300" />
+          <div className="absolute right-0 top-0 h-2 w-2 rounded-full bg-green-300" />
         </>
       )}
     </div>
diff --git a/src/features/Config.tsx b/src/features/Config.tsx
index 23e067a..c0f986d 100644
--- a/src/features/Config.tsx
+++ b/src/features/Config.tsx
@@ -84,13 +84,13 @@ export default function Config({
   }
 
   return (
-    <div className="w-full h-full">
-      <div className="text-4xl flex justify-between items-center px-6">
+    <div className="h-full w-full">
+      <div className="flex items-center justify-between px-6 text-4xl">
         <div className="flex items-end gap-2">Config</div>
       </div>
-      <div className="flex flex-col justify-between w-full">
+      <div className="flex w-full flex-col justify-between">
         <form id="config" onSubmit={handleSubmit}>
-          <div className="grid grid-cols-[minmax(10rem,4fr)_1fr_minmax(4rem,_4fr)] text-sm text-justify gap-1 my-4 mx-8">
+          <div className="mx-8 my-4 grid grid-cols-[minmax(10rem,4fr)_1fr_minmax(4rem,_4fr)] gap-1 text-justify text-sm">
             <TooltipLabel
               text="OSC Bind"
               tooltip="OSC Receive Port (Default: 127.0.0.1:9001)"
@@ -98,7 +98,7 @@ export default function Config({
             <div />
             <input
               name="bind"
-              className="text-zinc-800 px-1 rounded-sm outline-none"
+              className="rounded-sm px-1 text-zinc-800 outline-none"
               value={newConfig.networking.bind}
               onChange={onChangeNetworking}
               pattern={String.raw`^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}:\d{1,5}$`}
@@ -118,7 +118,7 @@ export default function Config({
             <div />
             <input
               name="remote"
-              className="text-zinc-800 px-1 rounded-sm outline-none"
+              className="rounded-sm px-1 text-zinc-800 outline-none"
               value={newConfig.networking.remote}
               onChange={onChangeNetworking}
               pattern={String.raw`^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}:\d{1,5}$`}
@@ -145,7 +145,7 @@ export default function Config({
             ) : (
               <input
                 name="lc_override"
-                className="text-zinc-800 px-1"
+                className="px-1 text-zinc-800"
                 value={newConfig.lc_override}
                 onChange={onChange}
                 pattern={String.raw`^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$`}
diff --git a/src/features/FeatureForm.tsx b/src/features/FeatureForm.tsx
index e6fd6d1..672cb80 100644
--- a/src/features/FeatureForm.tsx
+++ b/src/features/FeatureForm.tsx
@@ -186,10 +186,10 @@ export default function FeatureForm({
                 <button onClick={() => addParam()}>
                   <Plus className="h-5" />
                 </button>
-                <div className="flex gap-4 m-2"></div>
+                <div className="m-2 flex gap-4"></div>
               </div>
               <HackyScrollArea>
-                <div className="grid grid-cols-[minmax(6rem,20fr),minmax(6rem,6fr),minmax(1rem,1fr)] text-sm text-justify p-4 gap-y-2 gap-x-6">
+                <div className="grid grid-cols-[minmax(6rem,20fr),minmax(6rem,6fr),minmax(1rem,1fr)] gap-x-6 gap-y-2 p-4 text-justify text-sm">
                   {feature.osc_parameters.map((param, paramIndex) => {
                     // TODO: Using index is generally an anti-pattern, but I think it's required in this specific scenario
                     // If we key on a parameter or other identifiers, typing the parameter name would trigger a refresh from the backend
@@ -198,7 +198,7 @@ export default function FeatureForm({
                       <Fragment key={paramIndex}>
                         {/* Adding debounce on this makes it more complex b/c separate state, plus parent key on index */}
                         <input
-                          className="text-zinc-800 px-4 rounded-sm outline-none w-full"
+                          className="w-full rounded-sm px-4 text-zinc-800 outline-none"
                           name="osc_parameter"
                           value={param.parameter.replace(OSC_PARAM_PREFIX, "")}
                           onChange={(e) => handleOscParam(e, paramIndex)}
@@ -428,7 +428,7 @@ export default function FeatureForm({
 
 function HackyScrollArea({ children }: { children: ReactNode }) {
   return (
-    <ScrollArea className="overflow-y-scroll scrollbar h-[calc(100vh-440px)]">
+    <ScrollArea className="scrollbar h-[calc(100vh-440px)] overflow-y-scroll">
       {children}
     </ScrollArea>
   );
diff --git a/src/features/Toy.tsx b/src/features/Toy.tsx
index 6a8799c..ade9b22 100644
--- a/src/features/Toy.tsx
+++ b/src/features/Toy.tsx
@@ -18,14 +18,14 @@ export default function Toy({ toy }: { toy: FeVCToy }) {
   }, [toy]);
 
   return (
-    <div className="w-full h-full">
-      <div className="text-4xl flex justify-between items-center px-6">
+    <div className="h-full w-full">
+      <div className="flex items-center justify-between px-6 text-4xl">
         <div>{nameInfo.shortName}</div>
         <ToyInfo nameInfo={nameInfo} toyPower={toy.toy_power} />
       </div>
       <div className="m-4 h-full">
         <ToySettings toy={toy} />
-        <div className="flex overflow-x-scroll scrollbar select-none w-[calc(100vw-300px)]">
+        <div className="scrollbar flex w-[calc(100vw-300px)] select-none overflow-x-scroll">
           {toy.features.map((feature, featureArrayIndex) => (
             <button
               key={`${feature.feature_type} ${feature.feature_index}`}
@@ -33,7 +33,7 @@ export default function Toy({ toy }: { toy: FeVCToy }) {
               className={cn(
                 featureArrayIndex == selectedFeatureIndex && "outline",
                 feature.feature_enabled ? "text-zinc-200" : "text-zinc-500",
-                "rounded-md bg-zinc-700 px-4 py-1 hover:bg-cyan-600 m-2 outline-2 outline-cyan-500 whitespace-nowrap",
+                "m-2 whitespace-nowrap rounded-md bg-zinc-700 px-4 py-1 outline-2 outline-cyan-500 hover:bg-cyan-600",
               )}
             >
               {feature.feature_type} {feature.feature_index}
@@ -92,10 +92,10 @@ function ToyInfo({
   toyPower: ToyPower;
 }) {
   return (
-    <div className="flex gap-x-4 items-center">
+    <div className="flex items-center gap-x-4">
       {nameInfo.logo != undefined && (
         <Tooltip text={nameInfo.fullName}>
-          <img className="max-h-6 rounded-lg cursor-help" src={nameInfo.logo} />
+          <img className="max-h-6 cursor-help rounded-lg" src={nameInfo.logo} />
         </Tooltip>
       )}
       <BatteryIcon toyPower={toyPower} />
diff --git a/src/layout/Button.tsx b/src/layout/Button.tsx
index ef1c99d..f68590d 100644
--- a/src/layout/Button.tsx
+++ b/src/layout/Button.tsx
@@ -4,7 +4,7 @@ export default function Button(props: ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <button
       {...props}
-      className="rounded-md bg-zinc-400 px-4 py-1 text-zinc-900 hover:bg-zinc-100 disabled:text-zinc-400 disabled:bg-zinc-600 m-2 disabled:cursor-not-allowed"
+      className="m-2 rounded-md bg-zinc-400 px-4 py-1 text-zinc-900 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:bg-zinc-600 disabled:text-zinc-400"
     >
       {props.children}
     </button>
diff --git a/src/layout/Select.tsx b/src/layout/Select.tsx
index 2507b15..8682f9e 100644
--- a/src/layout/Select.tsx
+++ b/src/layout/Select.tsx
@@ -14,7 +14,7 @@ export function Select({
 }) {
   return (
     <select
-      className="outline-none text-zinc-800 px-2 rounded-sm w-full"
+      className="w-full rounded-sm px-2 text-zinc-800 outline-none"
       value={value}
       onChange={onChange}
       name={name}
diff --git a/src/layout/Slider.tsx b/src/layout/Slider.tsx
index ea6094b..532bd6d 100644
--- a/src/layout/Slider.tsx
+++ b/src/layout/Slider.tsx
@@ -21,7 +21,7 @@ export default function Slider(
   return (
     <SliderPrimitive.Root
       className={cn(
-        "relative items-center flex",
+        "relative flex items-center",
         !props.disabled && "cursor-ew-resize",
       )}
       onMouseEnter={() => setHover(true)}
@@ -29,10 +29,10 @@ export default function Slider(
       {...props}
       aria-label="Slider"
     >
-      <SliderPrimitive.Track className="relative flex bg-zinc-700 flex-grow rounded-full h-2">
+      <SliderPrimitive.Track className="relative flex h-2 flex-grow rounded-full bg-zinc-700">
         <SliderPrimitive.Range
           className={cn(
-            "absolute bg-zinc-100 rounded-full h-full data-[disabled]:bg-zinc-600 transition-all",
+            "absolute h-full rounded-full bg-zinc-100 transition-all data-[disabled]:bg-zinc-600",
             color,
           )}
         />
@@ -45,7 +45,7 @@ export default function Slider(
             </TooltipPrimitive.Trigger>
             <TooltipPrimitive.Portal>
               <TooltipPrimitive.Content
-                className="rounded-md text-zinc-50 bg-zinc-600 pl-3 pr-3 max-w-md"
+                className="max-w-md rounded-md bg-zinc-600 pl-3 pr-3 text-zinc-50"
                 sideOffset={10}
                 key={first} // force update with key
               >
@@ -63,7 +63,7 @@ export default function Slider(
             </TooltipPrimitive.Trigger>
             <TooltipPrimitive.Portal>
               <TooltipPrimitive.Content
-                className="rounded-md text-zinc-50 bg-zinc-600 pl-3 pr-3 max-w-md"
+                className="max-w-md rounded-md bg-zinc-600 pl-3 pr-3 text-zinc-50"
                 sideOffset={10}
                 key={second} // force update with key
               >
diff --git a/src/layout/Switch.tsx b/src/layout/Switch.tsx
index b572592..7c0ce13 100644
--- a/src/layout/Switch.tsx
+++ b/src/layout/Switch.tsx
@@ -46,7 +46,7 @@ export default function Switch(
       className={cn(
         props.checked ? selectedTheme.active : selectedTheme.inactive,
         sizes[size].container,
-        "relative inline-flex cursor-pointer rounded-full border-transparent transition-all duration-200 ease-in-out disabled:bg-zinc-700 disabled:cursor-not-allowed",
+        "relative inline-flex cursor-pointer rounded-full border-transparent transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-zinc-700",
       )}
     >
       <SwitchPrimitive.Thumb
diff --git a/src/layout/Tooltip.tsx b/src/layout/Tooltip.tsx
index b6d1d91..678ae55 100644
--- a/src/layout/Tooltip.tsx
+++ b/src/layout/Tooltip.tsx
@@ -20,7 +20,7 @@ export default function Tooltip({
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
           <TooltipPrimitive.Content
-            className="rounded-md text-zinc-50 bg-zinc-600 pl-3 pr-3 max-w-md z-50 cursor-pointer pointer-events-none"
+            className="pointer-events-none z-50 max-w-md cursor-pointer rounded-md bg-zinc-600 pl-3 pr-3 text-zinc-50"
             sideOffset={5}
           >
             {text}
@@ -40,7 +40,7 @@ type TooltipProps = {
 export function TooltipLabel({ text, tooltip }: TooltipProps) {
   return (
     <Tooltip text={tooltip}>
-      <label className="justify-self-start cursor-help">{text}</label>
+      <label className="cursor-help justify-self-start">{text}</label>
     </Tooltip>
   );
 }