Enable linters

Signed-off-by: Ryan Nowak <[email protected]>

.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/eslintrc.json",
+  "root": true,
+  "ignorePatterns": [
+    "dist/",
+    "dist-types/",
+    "node_modules/",
+    "playwright.config.ts"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "@typescript-eslint/triple-slash-reference": 0,
+    "react/no-children-prop": 0
+  }
+}

.github/workflows/build.yaml

@@ -16,13 +16,21 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-      - run: corepack enable
-      - name: Install Node.js 20
+      - name: Enable corepack
+        run: corepack enable
+      - name: Install Node.js 20 # Must be after corepack is enabled.
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
-          cache: "yarn"
-          cache-dependency-path: "yarn.lock"
-      - run: yarn install --frozen-lockfile
-      - run: yarn workspaces foreach -A run build:all
-      - run: yarn workspace rad-components run build-storybook
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: 'yarn.lock'
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Lint
+        run: yarn run lint:all
+      - name: Format
+        run: yarn run format:check
+      - name: Build
+        run: yarn workspaces foreach -A run build:all
+      - name: Build Storybook
+        run: yarn workspace rad-components run build-storybook

.gitignore

@@ -32,9 +32,9 @@ node_modules/
 .env.test
 
 # Build output
-dist
-dist-types
-storybook-static
+dist/
+dist-types/
+storybook-static/
 
 # Temporary change files created by Vim
 *.swp

.prettierignore

@@ -2,3 +2,4 @@ dist
 dist-types
 coverage
 .vscode
+node_modules/

.prettierrc

@@ -1,4 +1,4 @@
 {
   "printWidth": 160,
   "tabWidth": 2
-}
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[json]": {
+    "editor.tabSize": 2
+  },
+  "[jsonc]": {
+    "editor.tabSize": 2
+  },
+  "[javascript]": {
+    "editor.tabSize": 2
+  },
+  "[javascriptreact]": {
+    "editor.tabSize": 2
+  },
+  "[typescript]": {
+    "editor.tabSize": 2
+  },
+  "[typescriptreact]": {
+    "editor.tabSize": 2
+  }
+}

README.md

@@ -15,6 +15,8 @@ It is organized as a mono-repo.
 
 You'll also want an environment where you can experiment with Radius.
 
+For development, we recommend VS Code. This repo is configured with recommended extensions that can automate parts of the development process when installed.
+
 ## Building
 
 **Install dependencies:**
@@ -54,4 +56,30 @@ yarn workspace rad-components run lint
 yarn workspace rad-components run storybook
 ```
 
-This will launch Storybook at `http://localhost:6006`
+This will launch Storybook at `http://localhost:6006`
+
+## Linting
+
+This project is configured to use `eslint` for linting, along with recommended rules for React and TypeScript. This is checked as part of the pull-request process.
+
+**Run the linter manually:**
+
+```
+yarn run lint:all
+```
+
+## Formatting
+
+This project is configured to use `prettier` for code formatting. This is checked as part of the pull-request process.
+
+**Run the formatter to find violations:**
+
+```
+yarn run format:check
+```
+
+**Run the formatter to automatically fix violations:**
+
+```
+yarn run format:write
+```

app-config.yaml

@@ -43,7 +43,8 @@ integrations:
     #   apiBaseUrl: https://ghe.example.net/api/v3
     #   token: ${GHE_TOKEN}
 
-proxy: {}
+proxy:
+  {}
   ### Example for how to add a proxy endpoint for the frontend.
   ### A typical reason to do this is to handle HTTPS and CORS for internal services.
   # endpoints:
@@ -66,7 +67,8 @@ auth:
   # see https://backstage.io/docs/auth/ to learn about auth providers
   providers: {}
 
-scaffolder: {}
+scaffolder:
+  {}
   # see https://backstage.io/docs/features/software-templates/configuration for software template options
 
 catalog:

package.json

@@ -24,7 +24,8 @@
     "fix": "backstage-cli repo fix",
     "lint": "backstage-cli repo lint --since origin/main",
     "lint:all": "backstage-cli repo lint",
-    "prettier:check": "prettier --check .",
+    "format:check": "prettier --check .",
+    "format:write": "prettier --write .",
     "new": "backstage-cli new --scope internal"
   },
   "workspaces": {

packages/app/src/App.test.tsx

@@ -17,7 +17,7 @@ describe('App', () => {
           },
           context: 'test',
         },
-      ] as any,
+      ] as unknown as string,
     };
 
     const rendered = await renderWithEffects(<App />);

packages/app/src/components/Root/Root.tsx

@@ -57,7 +57,7 @@ const SidebarLogo = () => {
   );
 };
 
-export const Root = ({ children }: PropsWithChildren<{}>) => (
+export const Root = ({ children }: PropsWithChildren<NonNullable<object>>) => (
   <SidebarPage>
     <Sidebar>
       <SidebarLogo />

packages/backend/src/index.ts

@@ -96,7 +96,6 @@ async function main() {
   apiRouter.use('/proxy', await proxy(proxyEnv));
   apiRouter.use('/search', await search(searchEnv));
   apiRouter.use('/kubernetes', await kubernetes(kubernetesEnv));
-  //apiRouter.use('/radius', await radius(radiusEnv));
 
   // Add backends ABOVE this line; this 404 handler is the catch-all fallback
   apiRouter.use(notFoundHandler());

packages/backend/src/plugins/catalog.ts

@@ -2,7 +2,7 @@ import { CatalogBuilder } from '@backstage/plugin-catalog-backend';
 import { ScaffolderEntitiesProcessor } from '@backstage/plugin-catalog-backend-module-scaffolder-entity-model';
 import { Router } from 'express';
 import { PluginEnvironment } from '../types';
-import { RadiusProcessor } from '../../../../plugins/plugin-radius-backend/src/service/catalog';
+import { RadiusProcessor } from '@internal/plugin-radius-backend';
 
 export default async function createPlugin(
   env: PluginEnvironment,

packages/backend/src/plugins/kubernetes.ts

@@ -14,4 +14,4 @@ export default async function createPlugin(
     permissions: env.permissions,
   }).build();
   return router;
-}
+}

packages/rad-components/.storybook/main.ts

@@ -1,28 +1,28 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite';
 
-import { join, dirname } from "path";
+import { join, dirname } from 'path';
 
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, "package.json")));
+  return dirname(require.resolve(join(value, 'package.json')));
 }
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-onboarding"),
-    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
   ],
   framework: {
-    name: getAbsolutePath("@storybook/react-vite"),
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;

packages/rad-components/.storybook/preview.ts

@@ -1,8 +1,8 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

packages/rad-components/setupTests.ts

@@ -1,12 +1,12 @@
 /// <reference types="vitest" />
-import { expect } from "vitest";
+import { expect } from 'vitest';
 import '@testing-library/jest-dom';
-import * as matchers from "@testing-library/jest-dom/matchers";
-import { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
-declare module "vitest" {
+import * as matchers from '@testing-library/jest-dom/matchers';
+import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+declare module 'vitest' {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   interface Assertion<T = any>
     extends jest.Matchers<void, T>,
       TestingLibraryMatchers<T, void> {}
 }
-expect.extend(matchers);
+expect.extend(matchers);