infra: add linting and formatting for js projects (#230)

* wip

* wip

* wip

* format

* wip(mobile): lint and format

* cleanup

* nits

* nits

* idiomatic react

* nit

* format all root files

js/desktop/src/features/network-billing.tsx

@@ -1,24 +1,24 @@
-import { useState } from "react";
-import { ExternalLink } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Separator } from "@/components/ui/separator";
-import { Muted } from "@/components/ui/typography";
-import { CopyableEmail } from "@/components/copyable-email";
-import { cn } from "@/lib/utils";
-import { toUserMessage } from "@/lib/errors";
-import { SUPPORT_EMAIL } from "@/lib/constants";
+import { useState } from 'react';
+import { ExternalLink } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Separator } from '@/components/ui/separator';
+import { Muted } from '@/components/ui/typography';
+import { CopyableEmail } from '@/components/copyable-email';
+import { cn } from '@/lib/utils';
+import { toUserMessage } from '@/lib/errors';
+import { SUPPORT_EMAIL } from '@/lib/constants';
 import {
   useCreateCheckoutSession,
   useCreatePortalSession,
   useNetworkBilling,
-} from "@/hooks/use-billing";
-import { useNetworkUsage } from "@/hooks/use-network-usage";
-import { useIsNetworkAdmin } from "@/hooks/use-networks";
-import type { BillingCadence, BillingStatus } from "@/api/types";
-import { platform } from "@/lib/platform";
+} from '@/hooks/use-billing';
+import { useNetworkUsage } from '@/hooks/use-network-usage';
+import { useIsNetworkAdmin } from '@/hooks/use-networks';
+import type { BillingCadence, BillingStatus } from '@/api/types';
+import { platform } from '@/lib/platform';
 
 function formatCents(cents: number): string {
   if (cents % 100 === 0) return `$${cents / 100}`;
@@ -27,17 +27,17 @@ function formatCents(cents: number): string {
 
 function formatDate(date: Date): string {
   return date.toLocaleDateString(undefined, {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
   });
 }
 
-function PlanStatusBadge({ status }: { status: BillingStatus["plan_status"] }) {
-  if (status === "past_due")
+function PlanStatusBadge({ status }: { status: BillingStatus['plan_status'] }) {
+  if (status === 'past_due')
     return <Badge variant="destructive">Past due</Badge>;
-  if (status === "canceled") return <Badge variant="secondary">Canceled</Badge>;
-  if (status === "trialing") return <Badge variant="secondary">Trialing</Badge>;
+  if (status === 'canceled') return <Badge variant="secondary">Canceled</Badge>;
+  if (status === 'trialing') return <Badge variant="secondary">Trialing</Badge>;
   return null;
 }
 
@@ -76,8 +76,8 @@ function CadenceOption({
     <Label
       htmlFor={`cadence-${value}`}
       className={cn(
-        "hover:bg-accent flex w-full cursor-pointer items-center gap-3 px-4 py-3 font-normal transition-colors",
-        selected && "bg-accent/50",
+        'hover:bg-accent flex w-full cursor-pointer items-center gap-3 px-4 py-3 font-normal transition-colors',
+        selected && 'bg-accent/50',
       )}
     >
       <RadioGroupItem id={`cadence-${value}`} value={value} />
@@ -98,15 +98,15 @@ function CadenceOption({
 
 function formatResetLocal(resetAt: Date): string {
   const time = resetAt.toLocaleTimeString(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
+    hour: 'numeric',
+    minute: '2-digit',
   });
   const now = new Date();
   const isSameDay =
     resetAt.getFullYear() === now.getFullYear() &&
     resetAt.getMonth() === now.getMonth() &&
     resetAt.getDate() === now.getDate();
-  return `${isSameDay ? "today" : "tomorrow"} at ${time}`;
+  return `${isSameDay ? 'today' : 'tomorrow'} at ${time}`;
 }
 
 /**
@@ -119,7 +119,7 @@ function PlanSummary({ networkId }: { networkId: string }) {
 
   if (!usage) return null;
 
-  const isPro = usage.plan === "pro";
+  const isPro = usage.plan === 'pro';
 
   return (
     <>
@@ -127,9 +127,9 @@ function PlanSummary({ networkId }: { networkId: string }) {
         label="Plan"
         value={
           <div className="flex items-center gap-2">
-            <span>{isPro ? "Llink Pro" : "Llink Free"}</span>
-            <Badge variant={isPro ? "default" : "secondary"}>
-              {isPro ? "Pro" : "Free"}
+            <span>{isPro ? 'Llink Pro' : 'Llink Free'}</span>
+            <Badge variant={isPro ? 'default' : 'secondary'}>
+              {isPro ? 'Pro' : 'Free'}
             </Badge>
           </div>
         }
@@ -168,7 +168,7 @@ function FreeBilling({
   billing: BillingStatus;
 }) {
   const createCheckout = useCreateCheckoutSession(networkId);
-  const [cadence, setCadence] = useState<BillingCadence>("annual");
+  const [cadence, setCadence] = useState<BillingCadence>('annual');
 
   const handleUpgrade = () => {
     createCheckout.mutate(cadence, {
@@ -194,7 +194,7 @@ function FreeBilling({
           perSeatCents={annualPerSeatMonthlyCents}
           billedNote="Billed annually"
           saveBadge={savingsPct > 0 ? `Save ${savingsPct}%` : undefined}
-          selected={cadence === "annual"}
+          selected={cadence === 'annual'}
         />
         <Separator className="mx-4" />
         <CadenceOption
@@ -202,7 +202,7 @@ function FreeBilling({
           label="Monthly"
           perSeatCents={billing.price_monthly_cents}
           billedNote="Billed monthly · cancel anytime"
-          selected={cadence === "monthly"}
+          selected={cadence === 'monthly'}
         />
       </RadioGroup>
       <div className="px-4 py-3">
@@ -211,7 +211,7 @@ function FreeBilling({
           onClick={handleUpgrade}
           disabled={createCheckout.isPending}
         >
-          {createCheckout.isPending ? "Opening Stripe..." : "Upgrade to Pro"}
+          {createCheckout.isPending ? 'Opening Stripe...' : 'Upgrade to Pro'}
         </Button>
       </div>
     </>
@@ -233,9 +233,9 @@ function ProBilling({
     });
   };
 
-  const cadenceLabel = billing.cadence === "annual" ? "Annual" : "Monthly";
+  const cadenceLabel = billing.cadence === 'annual' ? 'Annual' : 'Monthly';
   const perSeatCents =
-    billing.cadence === "annual"
+    billing.cadence === 'annual'
       ? Math.round(billing.price_annual_cents / 12)
       : billing.price_monthly_cents;
   const renewal = billing.current_period_end
@@ -249,7 +249,7 @@ function ProBilling({
           Your subscription is set to downgrade to Free on {renewal}.
         </div>
       )}
-      {billing.plan_status === "past_due" && (
+      {billing.plan_status === 'past_due' && (
         <div className="border-destructive/30 bg-destructive/10 text-destructive mx-4 my-2 rounded-md border px-3 py-2 text-sm">
           Your last payment failed. Update your payment method to keep Pro
           active.
@@ -271,7 +271,7 @@ function ProBilling({
         <>
           <Separator className="mx-4" />
           <InfoRow
-            label={billing.cancel_at_period_end ? "Ends" : "Renews"}
+            label={billing.cancel_at_period_end ? 'Ends' : 'Renews'}
             value={renewal}
           />
         </>
@@ -284,9 +284,7 @@ function ProBilling({
           disabled={createPortal.isPending}
         >
           <ExternalLink className="mr-2 size-3.5" />
-          {createPortal.isPending
-            ? "Opening Stripe..."
-            : "Manage subscription"}
+          {createPortal.isPending ? 'Opening Stripe...' : 'Manage subscription'}
         </Button>
       </div>
     </>
@@ -340,11 +338,13 @@ function AdminBillingControls({ networkId }: { networkId: string }) {
   if (error) {
     return (
       <div className="px-4 py-3">
-        <Muted className="text-sm">Couldn't load billing: {toUserMessage(error)}</Muted>
+        <Muted className="text-sm">
+          Couldn't load billing: {toUserMessage(error)}
+        </Muted>
       </div>
     );
   }
-  if (billing.plan === "pro") {
+  if (billing.plan === 'pro') {
     return <ProBilling networkId={networkId} billing={billing} />;
   }
   return <FreeBilling networkId={networkId} billing={billing} />;