Merge pull request #9 from nada-deriv/nada/WEBREL-1317/prettier

feat: add prettier config

.prettierrc

@@ -1 +1,11 @@
-{}
+{
+    "endOfLine": "lf",
+    "singleQuote": true,
+    "useTabs": false,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "printWidth": 120,
+    "jsxSingleQuote": true,
+    "arrowParens": "avoid",
+    "proseWrap": "preserve"
+}

package.json

@@ -1,36 +1,37 @@
 {
-  "name": "smarttrader",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "test": "vitest"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/node": "^20.6.3",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "jsdom": "^22.1.0",
-    "prettier": "3.0.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
-    "vitest": "^0.34.5"
-  }
+    "name": "smarttrader",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\"",
+        "preview": "vite preview",
+        "test": "vitest"
+    },
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@testing-library/jest-dom": "^6.1.3",
+        "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.5.1",
+        "@types/node": "^20.6.3",
+        "@types/react": "^18.2.15",
+        "@types/react-dom": "^18.2.7",
+        "@typescript-eslint/eslint-plugin": "^6.0.0",
+        "@typescript-eslint/parser": "^6.0.0",
+        "@vitejs/plugin-react": "^4.0.3",
+        "eslint": "^8.45.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.3",
+        "jsdom": "^22.1.0",
+        "prettier": "3.0.3",
+        "typescript": "^5.0.2",
+        "vite": "^4.4.5",
+        "vitest": "^0.34.5"
+    }
 }

src/App.tsx

@@ -1,13 +1,13 @@
-import ErrorBoundary from "Components/common/error-boundary";
-import Layout from "Components/layout";
-import AuthProvider from "Contexts/authProvider";
+import ErrorBoundary from 'Components/common/error-boundary';
+import Layout from 'Components/layout';
+import AuthProvider from 'Contexts/authProvider';
 
 const App = () => (
-  <AuthProvider>
-    <ErrorBoundary>
-      <Layout>App</Layout>
-    </ErrorBoundary>
-  </AuthProvider>
+    <AuthProvider>
+        <ErrorBoundary>
+            <Layout>App</Layout>
+        </ErrorBoundary>
+    </AuthProvider>
 );
 
 export default App;

src/components/chart/tools/index.tsx

@@ -1,24 +1,24 @@
-import ChartTemplate from "./chart-template";
-import ChartType from "./chart-type";
-import Comparisons from "./comparisons";
-import DrawingTools from "./drawing-tools";
-import Indicators from "./indicators";
-import ShareChart from "./share-chart";
-import TimeInterval from "./time-interval";
+import ChartTemplate from './chart-template';
+import ChartType from './chart-type';
+import Comparisons from './comparisons';
+import DrawingTools from './drawing-tools';
+import Indicators from './indicators';
+import ShareChart from './share-chart';
+import TimeInterval from './time-interval';
 
 const Tools = () => (
-  <div
-    // test styles, we should not write inline styles :))
-    style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
-  >
-    <ChartTemplate />
-    <ChartType />
-    <Comparisons />
-    <DrawingTools />
-    <Indicators />
-    <ShareChart />
-    <TimeInterval />
-  </div>
+    <div
+        // test styles, we should not write inline styles :))
+        style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+    >
+        <ChartTemplate />
+        <ChartType />
+        <Comparisons />
+        <DrawingTools />
+        <Indicators />
+        <ShareChart />
+        <TimeInterval />
+    </div>
 );
 
 export default Tools;

src/components/common/error-boundary/index.tsx

@@ -1,4 +1,4 @@
-import { Component, ErrorInfo, ReactNode } from "react";
+import { Component, ErrorInfo, ReactNode } from 'react';
 
 /* 
 By default, if our application throws an error during rendering, React will remove its UI from the screen. 
@@ -7,49 +7,46 @@ An error boundary is a special component that lets us display some fallback UI i
 */
 
 type TErrorBoundaryProps = {
-  children?: ReactNode;
+    children?: ReactNode;
 };
 
 type TErrorBoundaryStates = {
-  has_error: boolean;
+    has_error: boolean;
 };
 
-class ErrorBoundary extends Component<
-  TErrorBoundaryProps,
-  TErrorBoundaryStates
-> {
-  constructor(props: TErrorBoundaryProps) {
-    super(props);
-    this.state = { has_error: false };
-  }
-
-  static getDerivedStateFromError(error: Error): TErrorBoundaryStates {
-    console.log("error: ", error);
-    /* Update state so the next render will show the fallback UI. */
-    return { has_error: true };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    // Example "componentStack":
-    //   in ComponentThatThrows (created by App)
-    //   in ErrorBoundary (created by App)
-    //   in div (created by App)
-    //   in App
-    console.log(error, info.componentStack);
-  }
-
-  render() {
-    const { has_error } = this.state;
-    const { children } = this.props;
-
-    if (has_error) {
-      // we can render any custom fallback UI
-      //   return fallback;
-      return <h1>Sorry.. there was an error</h1>;
+class ErrorBoundary extends Component<TErrorBoundaryProps, TErrorBoundaryStates> {
+    constructor(props: TErrorBoundaryProps) {
+        super(props);
+        this.state = { has_error: false };
     }
 
-    return children;
-  }
+    static getDerivedStateFromError(error: Error): TErrorBoundaryStates {
+        console.log('error: ', error);
+        /* Update state so the next render will show the fallback UI. */
+        return { has_error: true };
+    }
+
+    componentDidCatch(error: Error, info: ErrorInfo) {
+        // Example "componentStack":
+        //   in ComponentThatThrows (created by App)
+        //   in ErrorBoundary (created by App)
+        //   in div (created by App)
+        //   in App
+        console.log(error, info.componentStack);
+    }
+
+    render() {
+        const { has_error } = this.state;
+        const { children } = this.props;
+
+        if (has_error) {
+            // we can render any custom fallback UI
+            //   return fallback;
+            return <h1>Sorry.. there was an error</h1>;
+        }
+
+        return children;
+    }
 }
 
 export default ErrorBoundary;

src/components/common/loading/__test__/loading.test.tsx

@@ -1,11 +1,11 @@
 // Test for passing the github actions
 // TODO should update this test later
-import { describe, expect, test } from "vitest";
-import { render, screen } from "@testing-library/react";
-import Loading from "..";
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Loading from '..';
 
-describe("Loading component", () =>
-  test("should show loading text", () => {
-    render(<Loading />);
-    expect(screen.getByText("loading")).toBeInTheDocument();
-  }));
+describe('Loading component', () =>
+    test('should show loading text', () => {
+        render(<Loading />);
+        expect(screen.getByText('loading')).toBeInTheDocument();
+    }));

src/components/layout/index.tsx

@@ -1,13 +1,13 @@
-import { Fragment, PropsWithChildren } from "react";
-import Header from "./header";
-import Footer from "./footer";
+import { Fragment, PropsWithChildren } from 'react';
+import Header from './header';
+import Footer from './footer';
 
 const Layout = ({ children }: PropsWithChildren<unknown>) => (
-  <Fragment>
-    <Header />
-    {children}
-    <Footer />
-  </Fragment>
+    <Fragment>
+        <Header />
+        {children}
+        <Footer />
+    </Fragment>
 );
 
 export default Layout;

src/contexts/authProvider.tsx

@@ -1,20 +1,18 @@
-import { PropsWithChildren, createContext, useState } from "react";
+import { PropsWithChildren, createContext, useState } from 'react';
 
 // @ts-ignore
 export const AuthContext = createContext();
 // @ts-ignore
 export const AuthDispatcher = createContext();
 
 const AuthProvider = ({ children }: PropsWithChildren<unknown>) => {
-  const [test, setTest] = useState(false);
+    const [test, setTest] = useState(false);
 
-  return (
-    <AuthContext.Provider value={{ test }}>
-      <AuthDispatcher.Provider value={{ setTest }}>
-        {children}
-      </AuthDispatcher.Provider>
-    </AuthContext.Provider>
-  );
+    return (
+        <AuthContext.Provider value={{ test }}>
+            <AuthDispatcher.Provider value={{ setTest }}>{children}</AuthDispatcher.Provider>
+        </AuthContext.Provider>
+    );
 };
 
 export default AuthProvider;

src/hooks/useAuth.ts

@@ -1,5 +1,5 @@
-import { useContext } from "react";
-import { AuthContext } from "Contexts/authProvider";
+import { useContext } from 'react';
+import { AuthContext } from 'Contexts/authProvider';
 
 const useAuth = () => useContext(AuthContext);
 

src/hooks/useAuthAction.ts

@@ -1,5 +1,5 @@
-import { useContext } from "react";
-import { AuthDispatcher } from "Contexts/authProvider";
+import { useContext } from 'react';
+import { AuthDispatcher } from 'Contexts/authProvider';
 
 const useAuthAction = () => useContext(AuthDispatcher);
 

src/hooks/useResponsive.ts

@@ -1,5 +1,5 @@
 const useResponsive = () => {
-  return {};
+    return {};
 };
 
 export default useResponsive;

src/main.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
 );

src/utils/storage.ts

@@ -1,11 +1,11 @@
 // we can make this better later, I just put it there as an example
 
 export const setToStorage = <T>(key: string, data: T) => {
-  localStorage.setItem(key, JSON.stringify(data));
-  return true;
+    localStorage.setItem(key, JSON.stringify(data));
+    return true;
 };
 
 export const getFromStorage = <T>(key: string): T => {
-  const data = localStorage.getItem(key) || "";
-  return JSON.parse(data);
+    const data = localStorage.getItem(key) || '';
+    return JSON.parse(data);
 };