js-peer: add prettier and build gh action

* chore: add prettier for consistent formatting * chore: run prettier in build command * chore: update prettier config * ci: add workflow to build and lint frontend * ci: run frontend build only on changes to js-peer * ci: fix build with working directory * ci: format workflow --------- Co-authored-by: Daniel N <2color@users.noreply.github.com>
libp2p · Feb 4, 2025 · 848d31d · 848d31d
1 parent d28e52c
commit 848d31d
Show file tree

Hide file tree

Showing 37 changed files with 451 additions and 416 deletions.
diff --git a/.github/workflows/js-peer.yml b/.github/workflows/js-peer.yml
@@ -0,0 +1,26 @@
+name: js-peer build
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'js-peer/**'
+  pull_request:
+    branches: [main]
+    paths:
+      - 'js-peer/**'
+
+jobs:
+  build-frontend:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: js-peer
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build
diff --git a/js-peer/package-lock.json b/js-peer/package-lock.json
diff --git a/js-peer/package.json b/js-peer/package.json
@@ -4,7 +4,8 @@
     "dev": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "format": "prettier --write src",
+    "lint": "prettier . --check && next lint",
     "tsc": "tsc --noEmit -p tsconfig.json",
     "protobuf": "protons src/lib/protobuf/*.proto"
   },
@@ -51,8 +52,17 @@
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.3",
     "postcss": "^8.4.38",
+    "prettier": "3.4.2",
     "protons": "^7.6.0",
     "tailwindcss": "^3.4.3",
     "typescript": "5.4.5"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 120,
+    "tabWidth": 2,
+    "bracketSpacing": true
   }
 }
diff --git a/js-peer/src/components/alert.tsx b/js-peer/src/components/alert.tsx
@@ -30,7 +30,10 @@ export function Alert({
   className,
   children,
   ...props
-}: { size?: keyof typeof sizes; children: React.ReactNode } & HeadlessDialogProps) {
+}: {
+  size?: keyof typeof sizes
+  children: React.ReactNode
+} & HeadlessDialogProps) {
   return (
     <HeadlessTransition appear show={open} {...props}>
       <HeadlessDialog onClose={onClose}>
@@ -59,7 +62,7 @@ export function Alert({
                 className={clsx(
                   className,
                   sizes[size],
-                  'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline'
+                  'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline',
                 )}
               >
                 {children}
@@ -78,7 +81,7 @@ export function AlertTitle({ className, ...props }: React.ComponentPropsWithoutR
       {...props}
       className={clsx(
         className,
-        'text-balance text-center text-base/6 font-semibold text-zinc-950 sm:text-wrap sm:text-left sm:text-sm/6 dark:text-white'
+        'text-balance text-center text-base/6 font-semibold text-zinc-950 sm:text-wrap sm:text-left sm:text-sm/6 dark:text-white',
       )}
     />
   )
@@ -104,7 +107,7 @@ export function AlertActions({ className, ...props }: React.ComponentPropsWithou
       {...props}
       className={clsx(
         className,
-        'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto'
+        'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto',
       )}
     />
   )

diff --git a/js-peer/src/components/avatar.tsx b/js-peer/src/components/avatar.tsx
@@ -30,7 +30,7 @@ export function Avatar({
         'inline-grid align-middle *:col-start-1 *:row-start-1',
 
         // Add the correct border radius
-        square ? 'rounded-[20%] *:rounded-[20%]' : 'rounded-full *:rounded-full'
+        square ? 'rounded-[20%] *:rounded-[20%]' : 'rounded-full *:rounded-full',
       )}
       {...props}
     >
@@ -62,12 +62,12 @@ export const AvatarButton = React.forwardRef(function AvatarButton(
     className,
     ...props
   }: AvatarProps & (HeadlessButtonProps | React.ComponentPropsWithoutRef<typeof Link>),
-  ref: React.ForwardedRef<HTMLElement>
+  ref: React.ForwardedRef<HTMLElement>,
 ) {
   let classes = clsx(
     className,
     square ? 'rounded-lg' : 'rounded-full',
-    'relative focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
+    'relative focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500',
   )
 
   return 'href' in props ? (

diff --git a/js-peer/src/components/badge.tsx b/js-peer/src/components/badge.tsx
@@ -43,7 +43,7 @@ export function Badge({ color = 'zinc', className, ...props }: BadgeProps & Reac
       className={clsx(
         className,
         'inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline',
-        colors[color]
+        colors[color],
       )}
     />
   )
@@ -56,11 +56,11 @@ export const BadgeButton = React.forwardRef(function BadgeButton(
     children,
     ...props
   }: BadgeProps & { children: React.ReactNode } & (HeadlessButtonProps | React.ComponentPropsWithoutRef<typeof Link>),
-  ref: React.ForwardedRef<HTMLElement>
+  ref: React.ForwardedRef<HTMLElement>,
 ) {
   let classes = clsx(
     className,
-    'group relative inline-flex rounded-md focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
+    'group relative inline-flex rounded-md focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500',
   )
 
   return 'href' in props ? (

diff --git a/js-peer/src/components/booting.tsx b/js-peer/src/components/booting.tsx
@@ -10,13 +10,7 @@ export function Booting({ error }: Props) {
   return (
     <div className="grid h-screen place-items-center">
       <div className="text-center">
-        <Image
-          src="/libp2p-logo.svg"
-          alt="libp2p logo"
-          height="156"
-          width="156"
-          className="text-white mx-auto mb-5"
-        />
+        <Image src="/libp2p-logo.svg" alt="libp2p logo" height="156" width="156" className="text-white mx-auto mb-5" />
         <h2 className="text-3xl font-bold text-gray-900 mb-2">Initializing libp2p peer</h2>
         {!error && (
           <>

diff --git a/js-peer/src/components/button.tsx b/js-peer/src/components/button.tsx
@@ -184,12 +184,12 @@ type ButtonProps = (
 
 export const Button = React.forwardRef(function Button(
   { color, outline, plain, className, children, ...props }: ButtonProps,
-  ref: React.ForwardedRef<HTMLElement>
+  ref: React.ForwardedRef<HTMLElement>,
 ) {
   let classes = clsx(
     className,
     styles.base,
-    outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, styles.colors[color ?? 'dark/zinc'])
+    outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, styles.colors[color ?? 'dark/zinc']),
   )
 
   return 'href' in props ? (

diff --git a/js-peer/src/components/chat.tsx b/js-peer/src/components/chat.tsx
@@ -27,10 +27,7 @@ export default function ChatContainer() {
   const sendPublicMessage = useCallback(async () => {
     if (input === '') return
 
-    log(
-      `peers in gossip for topic ${CHAT_TOPIC}:`,
-      libp2p.services.pubsub.getSubscribers(CHAT_TOPIC).toString(),
-    )
+    log(`peers in gossip for topic ${CHAT_TOPIC}:`, libp2p.services.pubsub.getSubscribers(CHAT_TOPIC).toString())
 
     const res = await libp2p.services.pubsub.publish(CHAT_TOPIC, new TextEncoder().encode(input))
     log(
@@ -76,9 +73,7 @@ export default function ChatContainer() {
         receivedAt: Date.now(),
       }
 
-      const updatedMessages = directMessages[roomId]
-        ? [...directMessages[roomId], newMessage]
-        : [newMessage]
+      const updatedMessages = directMessages[roomId] ? [...directMessages[roomId], newMessage] : [newMessage]
 
       setDirectMessages({
         ...directMessages,
@@ -91,7 +86,6 @@ export default function ChatContainer() {
     }
   }, [libp2p, setDirectMessages, directMessages, roomId, input])
 
-
   const sendFile = useCallback(
     async (readerEvent: ProgressEvent<FileReader>) => {
       const fileBody = readerEvent.target?.result as ArrayBuffer
@@ -198,31 +192,20 @@ export default function ChatContainer() {
     }
   }, [roomId, directMessages, messageHistory])
 
-
   return (
     <div className="container mx-auto">
       <div className="min-w-full border rounded lg:grid lg:grid-cols-6">
         <div className="lg:col-span-5 lg:block">
           <div className="w-full">
             <div className="relative flex items-center p-3 border-b border-gray-300">
-              {roomId === PUBLIC_CHAT_ROOM_ID &&
+              {roomId === PUBLIC_CHAT_ROOM_ID && (
                 <span className="block ml-2 font-bold text-gray-600">{PUBLIC_CHAT_ROOM_NAME}</span>
-              }
+              )}
               {roomId !== PUBLIC_CHAT_ROOM_ID && (
                 <>
-                  <Blockies
-                    seed={roomId}
-                    size={8}
-                    scale={3}
-                    className="rounded mr-2 max-h-10 max-w-10"
-                  />
-                  <span className={`text-gray-500 flex`}>
-                    {roomId.toString().slice(-7)}
-                  </span>
-                  <button
-                    onClick={handleBackToPublic}
-                    className="text-gray-500 flex ml-auto"
-                  >
+                  <Blockies seed={roomId} size={8} scale={3} className="rounded mr-2 max-h-10 max-w-10" />
+                  <span className={`text-gray-500 flex`}>{roomId.toString().slice(-7)}</span>
+                  <button onClick={handleBackToPublic} className="text-gray-500 flex ml-auto">
                     <ChevronLeftIcon className="w-6 h-6 text-gray-500" />
                     <span>Back to Public Chat</span>
                   </button>
@@ -231,27 +214,18 @@ export default function ChatContainer() {
             </div>
             <div className="relative w-full flex flex-col-reverse p-3 overflow-y-auto h-[40rem] bg-gray-100">
               <ul className="space-y-2">
-                  {messages.map(
-                    ({
-                      msgId,
-                      msg,
-                      fileObjectUrl,
-                      peerId,
-                      read,
-                      receivedAt,
-                    }: ChatMessage) => (
-                      <Message
-                        key={msgId}
-                        dm={roomId !== ''}
-                        msg={msg}
-                        fileObjectUrl={fileObjectUrl}
-                        peerId={peerId}
-                        read={read}
-                        msgId={msgId}
-                        receivedAt={receivedAt}
-                      />
-                    ),
-                  )}
+                {messages.map(({ msgId, msg, fileObjectUrl, peerId, read, receivedAt }: ChatMessage) => (
+                  <Message
+                    key={msgId}
+                    dm={roomId !== ''}
+                    msg={msg}
+                    fileObjectUrl={fileObjectUrl}
+                    peerId={peerId}
+                    read={read}
+                    msgId={msgId}
+                    receivedAt={receivedAt}
+                  />
+                ))}
               </ul>
             </div>
 
@@ -266,7 +240,7 @@ export default function ChatContainer() {
               <button
                 onClick={handleFileSend}
                 disabled={roomId !== PUBLIC_CHAT_ROOM_ID}
-                title={roomId === PUBLIC_CHAT_ROOM_ID ? 'Upload file' : "Unsupported in DM's" }
+                title={roomId === PUBLIC_CHAT_ROOM_ID ? 'Upload file' : "Unsupported in DM's"}
                 className={roomId === PUBLIC_CHAT_ROOM_ID ? '' : 'cursor-not-allowed'}
               >
                 <svg

diff --git a/js-peer/src/components/checkbox.tsx b/js-peer/src/components/checkbox.tsx
@@ -19,7 +19,7 @@ export function CheckboxGroup({ className, ...props }: React.ComponentPropsWitho
         'space-y-3',
 
         // With descriptions
-        'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
+        'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium',
       )}
     />
   )
@@ -46,7 +46,7 @@ export function CheckboxField({ className, ...props }: HeadlessFieldProps) {
         '[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2',
 
         // With description
-        '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
+        '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium',
       )}
     />
   )

diff --git a/js-peer/src/components/dialog.tsx b/js-peer/src/components/dialog.tsx
@@ -30,7 +30,10 @@ export function Dialog({
   className,
   children,
   ...props
-}: { size?: keyof typeof sizes; children: React.ReactNode } & HeadlessDialogProps) {
+}: {
+  size?: keyof typeof sizes
+  children: React.ReactNode
+} & HeadlessDialogProps) {
   return (
     <HeadlessTransition appear show={open} {...props}>
       <HeadlessDialog onClose={onClose}>
@@ -59,7 +62,7 @@ export function Dialog({
                 className={clsx(
                   className,
                   sizes[size],
-                  'row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-[--gutter] shadow-lg ring-1 ring-zinc-950/10 [--gutter:theme(spacing.8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline'
+                  'row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-[--gutter] shadow-lg ring-1 ring-zinc-950/10 [--gutter:theme(spacing.8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline',
                 )}
               >
                 {children}
@@ -95,7 +98,7 @@ export function DialogActions({ className, ...props }: React.ComponentPropsWitho
       {...props}
       className={clsx(
         className,
-        'mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto'
+        'mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto',
       )}
     />
   )