Adding prettier (#36)

* Adds Prettier to the project

* Applies Prettier rules to project

* Applies Prettier rules to new files in the project

.github/workflows/lint-test-build.yml

@@ -35,6 +35,7 @@ jobs:
               run: npm ci
             - run: npm run tsc
             - run: npm run lint
+            - run: npm run prettier
 
     unit-tests:
         runs-on: ubuntu-latest

.prettierignore

@@ -0,0 +1,7 @@
+# Add files here to ignore them from prettier formatting
+
+/coverage
+/mkdocs
+
+.next
+node_modules

.prettierrc

@@ -0,0 +1,17 @@
+{
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "importOrder": [
+        "^react",
+        "^react-native",
+        "^[a-zA-Z]",
+        "^@?\\w",
+        "^@/?\\w",
+        "^[./]"
+    ],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true,
+    "plugins": ["@trivago/prettier-plugin-sort-imports"],
+    "tabWidth": 4
+}

package.json

@@ -9,6 +9,8 @@
         "build": "next build",
         "start": "next start",
         "lint": "next lint",
+        "prettier": "prettier -c \"{**/*,*}.{ts,tsx,json,js,md}\"",
+        "prettier-fix": "prettier --write \"{**/*,*}.{ts,tsx,json,js,md}\"",
         "prepare": "husky"
     },
     "dependencies": {

pages/_app.tsx

@@ -1,20 +1,19 @@
-import React, { useEffect, useState } from "react";
-import NoSSR from "react-no-ssr";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
-import { QueryClientConfig } from "react-query/types/core/types";
-
-import { SessionProvider } from "next-auth/react";
-import { NextAdapter } from "next-query-params";
-import App, { AppContext, AppInitialProps, AppProps } from "next/app";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import { QueryParamProvider } from "use-query-params";
-
-import type { EuiSideNavItemType } from "@elastic/eui";
-import { EuiProvider, EuiThemeColorMode } from "@elastic/eui";
-import "@elastic/eui/dist/eui_theme_light.min.css";
-
+import React, { useEffect, useState } from 'react';
+import NoSSR from 'react-no-ssr';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query/devtools';
+import { QueryClientConfig } from 'react-query/types/core/types';
+
+import { SessionProvider } from 'next-auth/react';
+import { NextAdapter } from 'next-query-params';
+import App, { AppContext, AppInitialProps, AppProps } from 'next/app';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { QueryParamProvider } from 'use-query-params';
+
+import type { EuiSideNavItemType } from '@elastic/eui';
+import { EuiProvider, EuiThemeColorMode } from '@elastic/eui';
+import '@elastic/eui/dist/eui_theme_light.min.css';
 import {
     ColorModes,
     ConfirmationDialogContextWrapper,
@@ -27,13 +26,13 @@ import {
     WfoPageTemplate,
     WfoToastsList,
     defaultOrchestratorTheme,
-} from "@orchestrator-ui/orchestrator-ui-components";
+} from '@orchestrator-ui/orchestrator-ui-components';
 
-import { getAppLogo } from "@/components/AppLogo/AppLogo";
-import { getInitialOrchestratorConfig } from "@/configuration";
-import { TranslationsProvider } from "@/translations/translationsProvider";
+import { getAppLogo } from '@/components/AppLogo/AppLogo';
+import { getInitialOrchestratorConfig } from '@/configuration';
+import { TranslationsProvider } from '@/translations/translationsProvider';
 
-import "../font/inter.css";
+import '../font/inter.css';
 
 type AppOwnProps = { orchestratorConfig: OrchestratorConfig };
 
@@ -55,17 +54,17 @@ function CustomApp({
     const [queryClient] = useState(() => new QueryClient(queryClientConfig));
 
     const [themeMode, setThemeMode] = useState<EuiThemeColorMode>(
-        ColorModes.LIGHT
+        ColorModes.LIGHT,
     );
 
     const handleThemeSwitch = (newThemeMode: EuiThemeColorMode) => {
         setThemeMode(newThemeMode);
-        localStorage.setItem("themeMode", newThemeMode);
+        localStorage.setItem('themeMode', newThemeMode);
     };
 
     useEffect(() => {
         // Initialize theme mode from localStorage or set it to 'light' if not present
-        const storedTheme = localStorage.getItem("themeMode");
+        const storedTheme = localStorage.getItem('themeMode');
         if (
             !storedTheme ||
             (storedTheme !== ColorModes.LIGHT &&
@@ -76,19 +75,19 @@ function CustomApp({
     }, []);
 
     const addMenuItems = (
-        defaultMenuItems: EuiSideNavItemType<object>[]
+        defaultMenuItems: EuiSideNavItemType<object>[],
     ): EuiSideNavItemType<object>[] => [
         ...defaultMenuItems,
         {
-            name: "Example form",
-            id: "10",
-            isSelected: router.pathname === "/example-form",
-            href: "/example-form",
+            name: 'Example form',
+            id: '10',
+            isSelected: router.pathname === '/example-form',
+            href: '/example-form',
             renderItem: () => (
                 <WfoMenuItemLink
-                    path={"/example-form"}
+                    path={'/example-form'}
                     translationString="Example form"
-                    isSelected={router.pathname === "/example-form"}
+                    isSelected={router.pathname === '/example-form'}
                 />
             ),
         },
@@ -168,7 +167,7 @@ function CustomApp({
 }
 
 CustomApp.getInitialProps = async (
-    context: AppContext
+    context: AppContext,
 ): Promise<AppOwnProps & AppInitialProps> => {
     const ctx = await App.getInitialProps(context);
 

pages/metadata/productblocks.tsx

@@ -1,17 +1,19 @@
+import React from 'react';
+
 import {
     PolicyResource,
     WfoPolicyRenderPageFallback,
     WfoProductBlocksPage,
-  } from '@orchestrator-ui/orchestrator-ui-components';
-  import React from 'react';
-
-  export const ProductBlocksPage = () => {
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+export const ProductBlocksPage = () => {
     return (
-      <WfoPolicyRenderPageFallback resource={PolicyResource.NAVIGATION_METADATA}>
-        <WfoProductBlocksPage />
-      </WfoPolicyRenderPageFallback>
+        <WfoPolicyRenderPageFallback
+            resource={PolicyResource.NAVIGATION_METADATA}
+        >
+            <WfoProductBlocksPage />
+        </WfoPolicyRenderPageFallback>
     );
-  };
-
-  export default ProductBlocksPage;
-
+};
+
+export default ProductBlocksPage;

pages/metadata/products.tsx

@@ -1,15 +1,15 @@
+import React from 'react';
+
 import {
     PolicyResource,
     WfoPolicyRenderPageFallback,
     WfoProductsPage,
-  } from '@orchestrator-ui/orchestrator-ui-components';
-  import React from 'react';
-
-  export const ProductsPage = () => (
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+export const ProductsPage = () => (
     <WfoPolicyRenderPageFallback resource={PolicyResource.NAVIGATION_METADATA}>
-      <WfoProductsPage />
+        <WfoProductsPage />
     </WfoPolicyRenderPageFallback>
-  );
-
-  export default ProductsPage;
-
+);
+
+export default ProductsPage;

pages/metadata/resource-types.tsx

@@ -1,15 +1,15 @@
+import React from 'react';
+
 import {
     PolicyResource,
     WfoPolicyRenderPageFallback,
     WfoResourceTypesPage,
-  } from '@orchestrator-ui/orchestrator-ui-components';
-  import React from 'react';
-
-  export const ResourceTypesPage = () => (
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+export const ResourceTypesPage = () => (
     <WfoPolicyRenderPageFallback resource={PolicyResource.NAVIGATION_METADATA}>
-      <WfoResourceTypesPage />
+        <WfoResourceTypesPage />
     </WfoPolicyRenderPageFallback>
-  );
-
-  export default ResourceTypesPage;
-
+);
+
+export default ResourceTypesPage;

pages/metadata/tasks.tsx

@@ -1,15 +1,15 @@
+import React from 'react';
+
 import {
     PolicyResource,
     WfoPolicyRenderPageFallback,
     WfoTasksPage,
-  } from '@orchestrator-ui/orchestrator-ui-components';
-  import React from 'react';
-
-  export const TasksPage = () => (
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+export const TasksPage = () => (
     <WfoPolicyRenderPageFallback resource={PolicyResource.NAVIGATION_METADATA}>
-      <WfoTasksPage />
+        <WfoTasksPage />
     </WfoPolicyRenderPageFallback>
-  );
-
-  export default TasksPage;
-
+);
+
+export default TasksPage;

pages/metadata/workflows.tsx

@@ -1,15 +1,15 @@
+import React from 'react';
+
 import {
     PolicyResource,
     WfoPolicyRenderPageFallback,
     WfoWorkflowsPage,
-  } from '@orchestrator-ui/orchestrator-ui-components';
-  import React from 'react';
-
-  export const WorkflowsPage = () => (
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+export const WorkflowsPage = () => (
     <WfoPolicyRenderPageFallback resource={PolicyResource.NAVIGATION_METADATA}>
-      <WfoWorkflowsPage />
+        <WfoWorkflowsPage />
     </WfoPolicyRenderPageFallback>
-  );
-
-  export default WorkflowsPage;
-
+);
+
+export default WorkflowsPage;

pages/settings.tsx

@@ -1,15 +1,15 @@
+import React from 'react';
+
 import {
     PolicyResource,
     WfoPolicyRenderPageFallback,
     WfoSettingsPage,
-  } from '@orchestrator-ui/orchestrator-ui-components';
-  import React from 'react';
-
-  export const SettingsPage = () => (
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+export const SettingsPage = () => (
     <WfoPolicyRenderPageFallback resource={PolicyResource.NAVIGATION_SETTINGS}>
-      <WfoSettingsPage />
+        <WfoSettingsPage />
     </WfoPolicyRenderPageFallback>
-  );
-
-  export default SettingsPage;
-
+);
+
+export default SettingsPage;

pages/subscriptions/[subscriptionId].tsx

@@ -1,17 +1,17 @@
+import React from 'react';
+
 import {
     PolicyResource,
     WfoPolicyRenderPageFallback,
     WfoSubscriptionDetailPage,
-  } from '@orchestrator-ui/orchestrator-ui-components';
-  import React from 'react';
-
-  const SubscriptionDetailPage = () => (
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+const SubscriptionDetailPage = () => (
     <WfoPolicyRenderPageFallback
-      resource={PolicyResource.NAVIGATION_SUBSCRIPTIONS}
+        resource={PolicyResource.NAVIGATION_SUBSCRIPTIONS}
     >
-      <WfoSubscriptionDetailPage />
+        <WfoSubscriptionDetailPage />
     </WfoPolicyRenderPageFallback>
-  );
-
-  export default SubscriptionDetailPage;
-
+);
+
+export default SubscriptionDetailPage;

pages/tasks/[taskId].tsx

@@ -1,29 +1,30 @@
+import React from 'react';
+
+import { useRouter } from 'next/router';
+
 import {
     PolicyResource,
-    usePolicy,
     WfoPageUnauthorized,
     WfoProcessDetailPage,
-  } from '@orchestrator-ui/orchestrator-ui-components';
-  import { useRouter } from 'next/router';
-  import React from 'react';
-
-  const TaskDetailPage = () => {
+    usePolicy,
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+const TaskDetailPage = () => {
     const router = useRouter();
     const { taskId } = router.query;
-  
+
     const { isAllowed } = usePolicy();
     if (!isAllowed(PolicyResource.NAVIGATION_TASKS)) {
-      return <WfoPageUnauthorized />;
+        return <WfoPageUnauthorized />;
     }
-  
+
     return (
-      <>
-        {(taskId && typeof taskId === 'string' && (
-          <WfoProcessDetailPage processId={taskId} />
-        )) || <div>Invalid taskId</div>}
-      </>
+        <>
+            {(taskId && typeof taskId === 'string' && (
+                <WfoProcessDetailPage processId={taskId} />
+            )) || <div>Invalid taskId</div>}
+        </>
     );
-  };
-
-  export default TaskDetailPage;
-
+};
+
+export default TaskDetailPage;