Setup linter and lint all files

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  extends: [
+    'next/core-web-vitals',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
+  plugins: ['react'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'prettier/prettier': [
+      'error',
+      {
+        bracketSpacing: true,
+        singleQuote: true,
+        trailingComma: 'es5',
+        jsxBracketSameLine: false,
+      },
+    ],
+  },
+};

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true
+}

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev -p ${CADENCE_WEB_PORT}",
     "build": "NODE_ENV=production && next build",
     "start": "next start -p ${CADENCE_WEB_PORT-8088}",
-    "lint": "next lint",
+    "lint": "next lint --fix",
     "install-idl": "mkdir -p node_modules && cd node_modules && npx --yes tiged  https://github.com/uber/cadence-idl#e3a59cdd3c3676b0edee2f3262a22379f25b9fa5 cadence-idl",
     "generate:idl": "mkdir -p src/idl; npm run generate:idl:proto",
     "generate:idl:proto": "rm -rf src/idl/proto && cp -R node_modules/cadence-idl/proto src/idl/proto",
@@ -40,10 +40,13 @@
     "@types/react-dom": "^18.2.19",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.1.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-baseui": "^13.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "next-router-mock": "^0.9.13",
+    "prettier": "3.2.5",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

src/app/(Home)/domains/page.tsx

@@ -1,3 +1,3 @@
-import DomainPage from "@/containers/domains-page/domains-page";
+import DomainPage from '@/containers/domains-page/domains-page';
 
-export default DomainPage;
+export default DomainPage;

src/app/(Home)/domainz/page.tsx

@@ -1,3 +1,3 @@
-import DomainPage from "@/containers/domains-page/domains-page";
+import DomainPage from '@/containers/domains-page/domains-page';
 
-export default DomainPage;
+export default DomainPage;

src/app/(Home)/error.tsx

@@ -1,29 +1,29 @@
-"use client"
-import { HeadingXSmall } from "baseui/typography";
-import { ThemeConsumer, styled } from "baseui";
-import AlertIcon from "baseui/icon/alert";
+'use client';
+import { HeadingXSmall } from 'baseui/typography';
+import { ThemeConsumer, styled } from 'baseui';
+import AlertIcon from 'baseui/icon/alert';
 
 const StyledContainer = styled('div', ({ $theme }) => {
-    return {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: $theme.sizing.scale800,
-        padding: `${$theme.sizing.scale900} ${$theme.sizing.scale600}`,
-    };
+  return {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: $theme.sizing.scale800,
+    padding: `${$theme.sizing.scale900} ${$theme.sizing.scale600}`,
+  };
 });
 
 export default function HomePageError({
-    error
+  error,
 }: Readonly<{
-    error: Error;
+  error: Error;
 }>) {
-    return (
-        <StyledContainer>
-            <AlertIcon size={64} />
-            <HeadingXSmall>Something went wrong</HeadingXSmall>
-        </StyledContainer>
-    );
+  return (
+    <StyledContainer>
+      <AlertIcon size={64} />
+      <HeadingXSmall>Something went wrong</HeadingXSmall>
+    </StyledContainer>
+  );
 }

src/app/(Home)/layout.tsx

@@ -1,5 +1,4 @@
-import AppNavBar from "@/layout/app-nav-bar/app-nav-bar";
-
+import AppNavBar from '@/layout/app-nav-bar/app-nav-bar';
 
 export default function HomeLayout({
   children,
@@ -9,7 +8,7 @@ export default function HomeLayout({
   return (
     <main>
       <AppNavBar />
-        {children}
+      {children}
     </main>
   );
 }

src/app/(Home)/loading.tsx

@@ -1,14 +1,12 @@
-"use client"
-import { ProgressBar, ProgressBarOverrides } from "baseui/progress-bar";
+'use client';
+import { ProgressBar, ProgressBarOverrides } from 'baseui/progress-bar';
 
 const progressOverrides = {
-    BarContainer: {
-        style: { margin: 0 }
-    }
+  BarContainer: {
+    style: { margin: 0 },
+  },
 } satisfies ProgressBarOverrides;
 
 export default function HomePageLoading() {
-    return (
-        <ProgressBar overrides={progressOverrides} infinite />
-    );
+  return <ProgressBar overrides={progressOverrides} infinite />;
 }

src/app/layout.tsx

@@ -1,14 +1,15 @@
-import type { Metadata } from "next";
-import { Rubik } from "next/font/google";
-import "./globals.css";
-import StyledJsxRegistry from "./registry";
-import StyletronProvider from "../providers/styletron-provider";
+import type { Metadata } from 'next';
+import { Rubik } from 'next/font/google';
+import './globals.css';
+import StyledJsxRegistry from './registry';
+import StyletronProvider from '../providers/styletron-provider';
 
-const inter = Rubik({ subsets: ["latin"] });
+const inter = Rubik({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Cadence",
-  description: "Fault-Tolerant Stateful Code Platform, focus on your business logic and let Cadence take care of the complexity of distributed systems",
+  title: 'Cadence',
+  description:
+    'Fault-Tolerant Stateful Code Platform, focus on your business logic and let Cadence take care of the complexity of distributed systems',
 };
 
 export default function RootLayout({
@@ -20,9 +21,7 @@ export default function RootLayout({
     <html lang="en">
       <StyledJsxRegistry />
       <body className={inter.className}>
-        <StyletronProvider>
-          {children}
-        </StyletronProvider>
+        <StyletronProvider>{children}</StyletronProvider>
       </body>
     </html>
   );

src/app/page.tsx

@@ -1,6 +1,6 @@
-import { redirect } from 'next/navigation'
+import { redirect } from 'next/navigation';
 
 export default function Home() {
-  redirect('/domains')
-  return null
+  redirect('/domains');
+  return null;
 }