Merge pull request #3 from keyko-io/setup/prettier

setup prettier

.eslintrc.cjs

@@ -1,14 +1,14 @@
 module.exports = {
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
   ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  plugins: ['react-refresh'],
+  parser: "@typescript-eslint/parser",
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn',
-  },
-}
+    "react-refresh/only-export-components": "warn"
+  }
+};

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "npx prettier --write ."
   },
   "dependencies": {
     "@tanstack/react-query": "^4.29.7",
@@ -30,6 +31,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "postcss": "^8.4.23",
+    "prettier": "2.8.8",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
     "vite": "^4.3.2"

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    autoprefixer: {}
+  }
+};

src/api/index.ts

@@ -1,39 +1,43 @@
-import axios from "axios"
-import { SentryDataTypes, SentryDataPeriods, ChartDataResponse } from "../types"
-import { formatSentryURL } from "../utils"
-import { config } from "../config"
+import axios from "axios";
+import {
+  SentryDataTypes,
+  SentryDataPeriods,
+  ChartDataResponse
+} from "../types";
+import { formatSentryURL } from "../utils";
+import { config } from "../config";
 
 export const fetchSentryData = async (
   period: SentryDataPeriods,
   type: SentryDataTypes
 ) => {
   try {
-    const url = formatSentryURL(period, type)
-    const response = await axios.get(url)
+    const url = formatSentryURL(period, type);
+    const response = await axios.get(url);
 
-    return response.data
+    return response.data;
   } catch (error) {
-    console.error(error)
-    return {}
+    console.error(error);
+    return {};
   }
-}
+};
 
 export const fetchSentryEvents = async (): Promise<ChartDataResponse> => {
   try {
-    const response = await axios.get(`${config.apiUri}/stats/sentry/events`)
-    return response.data
+    const response = await axios.get(`${config.apiUri}/stats/sentry/events`);
+    return response.data;
   } catch (error) {
-    return {}
+    return {};
   }
-}
+};
 
 export const getOpenBugsCount = async (): Promise<{ count: number }> => {
   try {
-    const url = `${config.apiUri}/stats/bugs/open`
-    const res = await axios.get(url)
-    return res.data
+    const url = `${config.apiUri}/stats/bugs/open`;
+    const res = await axios.get(url);
+    return res.data;
   } catch (error) {
-    console.log(error)
-    return { count: 0 }
+    console.log(error);
+    return { count: 0 };
   }
-}
+};

src/components/BarChart.tsx

@@ -1,32 +1,32 @@
-import ReactEcharts from "echarts-for-react"
-import { InfoIcon } from "../icons"
-import Tooltip from "./Tooltip"
-import { useState } from "react"
-import { CHART_TITLES } from "../constants"
-import TotalCount from "./TotalCount"
-import TimeRangeButton from "./TimeRangeButton"
-import { ChartTooltipContent } from "./ChartTooltipContent"
-import { barChartOption } from "../utils"
-import { BarData, GraphData } from "../types"
+import ReactEcharts from "echarts-for-react";
+import { InfoIcon } from "../icons";
+import Tooltip from "./Tooltip";
+import { useState } from "react";
+import { CHART_TITLES } from "../constants";
+import TotalCount from "./TotalCount";
+import TimeRangeButton from "./TimeRangeButton";
+import { ChartTooltipContent } from "./ChartTooltipContent";
+import { barChartOption } from "../utils";
+import { BarData, GraphData } from "../types";
 
 interface Props {
-  graphData: GraphData
+  graphData: GraphData;
 }
 
 const BarChart = ({ graphData }: Props) => {
-  const [tab, setTab] = useState(7)
+  const [tab, setTab] = useState(7);
 
-  let data: BarData[] = Object.keys(graphData.success).map((key) => ({
+  let data: BarData[] = Object.keys(graphData.success).map(key => ({
     day: key,
     positive: graphData.success[key],
-    negative: graphData.failure[key],
-  }))
+    negative: graphData.failure[key]
+  }));
 
   if (tab === 7) {
-    data = data.slice(7, 14)
+    data = data.slice(7, 14);
   }
 
-  const option = barChartOption(data)
+  const option = barChartOption(data);
 
   return (
     <div className="bg-white rounded-md flex flex-col p-4 shadow-md">
@@ -66,7 +66,7 @@ const BarChart = ({ graphData }: Props) => {
 
       <ReactEcharts option={option} />
     </div>
-  )
-}
+  );
+};
 
-export default BarChart
+export default BarChart;

src/components/ChartSkeleton.tsx

@@ -17,16 +17,16 @@ const ChartSkeleton = () => {
         <div className="flex-1 h-full bg-gray-300 animate-pulse"></div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 const ChaartSkeletonWrapper = () => {
   return (
     <div className="flex flex-col space-y-4">
       <ChartSkeleton />
       <ChartSkeleton />
     </div>
-  )
-}
+  );
+};
 
-export default ChaartSkeletonWrapper
+export default ChaartSkeletonWrapper;

src/components/ChartTooltipContent.tsx

@@ -1,9 +1,9 @@
-import { METRICS_TOOLTIP_INFO } from "../constants"
-import { ChartKey } from "../types"
-import Square from "./Square"
+import { METRICS_TOOLTIP_INFO } from "../constants";
+import { ChartKey } from "../types";
+import Square from "./Square";
 
 interface Props {
-  title: ChartKey
+  title: ChartKey;
 }
 
 export const ChartTooltipContent = ({ title }: Props) => {
@@ -25,5 +25,5 @@ export const ChartTooltipContent = ({ title }: Props) => {
       </p>
       <p>{METRICS_TOOLTIP_INFO?.[title]?.extraInfo}</p>
     </div>
-  )
-}
+  );
+};

src/components/SideBar.tsx

@@ -1,19 +1,19 @@
-import { NavLink, Link } from "react-router-dom"
-import logo from "../assets/fil-plus.svg"
-import { CubeIcon, UserIcon } from "../icons"
+import { NavLink, Link } from "react-router-dom";
+import logo from "../assets/fil-plus.svg";
+import { CubeIcon, UserIcon } from "../icons";
 
 const navigationItems = [
   {
     name: "Blockchain",
     to: "",
-    svg: <CubeIcon />,
+    svg: <CubeIcon />
   },
   {
     name: "User",
     to: "user",
-    svg: <UserIcon />,
-  },
-]
+    svg: <UserIcon />
+  }
+];
 
 const SideBar = () => {
   return (
@@ -27,7 +27,7 @@ const SideBar = () => {
       </NavLink>
 
       <div className="flex flex-col flex-1 px-5">
-        {navigationItems.map((item) => {
+        {navigationItems.map(item => {
           return (
             <NavLink
               key={item.name}
@@ -42,7 +42,7 @@ const SideBar = () => {
               <span>{item.svg}</span>
               <span>{item.name}</span>
             </NavLink>
-          )
+          );
         })}
       </div>
 
@@ -51,7 +51,7 @@ const SideBar = () => {
         <span>About Fil+ Metrics</span>
       </Link>
     </nav>
-  )
-}
+  );
+};
 
-export default SideBar
+export default SideBar;

src/components/Square.tsx

@@ -1,9 +1,9 @@
 interface Props {
-  bgColor: string
+  bgColor: string;
 }
 
 const Square = ({ bgColor }: Props) => {
-  return <span className={`${bgColor} h-2 w-2 inline-block mr-1`}></span>
-}
+  return <span className={`${bgColor} h-2 w-2 inline-block mr-1`}></span>;
+};
 
-export default Square
+export default Square;

src/components/TimeRangeButton.tsx

@@ -1,7 +1,7 @@
 interface Props {
-  tab: number
-  setTab: (value: React.SetStateAction<number>) => void
-  changeTab: number
+  tab: number;
+  setTab: (value: React.SetStateAction<number>) => void;
+  changeTab: number;
 }
 
 const TimeRangeButton = ({ tab, setTab, changeTab }: Props) => {
@@ -15,7 +15,7 @@ const TimeRangeButton = ({ tab, setTab, changeTab }: Props) => {
     >
       {changeTab + "D"}
     </button>
-  )
-}
+  );
+};
 
-export default TimeRangeButton
+export default TimeRangeButton;

src/components/Tooltip.tsx

@@ -1,9 +1,9 @@
 const Tooltip = ({
   comp,
-  children,
+  children
 }: {
-  comp: string | React.ReactNode
-  children: React.ReactNode
+  comp: string | React.ReactNode;
+  children: React.ReactNode;
 }) => {
   return (
     <div className="relative group">
@@ -12,7 +12,7 @@ const Tooltip = ({
         <div className="min-w-[30rem]">{comp}</div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Tooltip
+export default Tooltip;