Styled-components + TS w/ eslint

.eslintrc.js

@@ -0,0 +1,44 @@
+const path = require("path");
+
+module.exports = {
+  extends: ["next"],
+  rules: {
+    "import/no-anonymous-default-export": "off",
+    "react/no-unescaped-entities": "off",
+    "react/display-name": "off",
+  },
+  ignorePatterns: ["src/**/*.stories.js"],
+
+  overrides: [
+    {
+      files: ["src/**/*.ts", "src/**/*.tsx"],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: "module",
+        project: "./tsconfig.json",
+        tsConfigRootDir: path.resolve(__dirname),
+      },
+      extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "next/core-web-vitals",
+      ],
+      rules: {
+        "@typescript-eslint/no-unsafe-assessment": "off",
+        "@typescript-eslint/no-inferrable-types": "off",
+        "@typescript-eslint/require-await": ["error"],
+        "@typescript-eslint/no-unsafe-return": ["error"],
+        "@typescript-eslint/no-unsafe-call": ["error"],
+        "@typescript-eslint/no-unsafe-argument": ["error"],
+        "@typescript-eslint/no-unsafe-member-access": ["error"],
+        "@typescript-eslint/no-non-null-assertion": ["error"],
+        "@typescript-eslint/ban-ts-comment": "off",
+        "no-unused-vars": "off",
+        "require-await": "off",
+      },
+    },
+  ],
+};

.gitignore

@@ -15,3 +15,6 @@ build-storybook.log
 .env
 .python-version
 docker-compose.override.yml
+
+# ts linter
+*.tsbuildinfo

README.md

@@ -31,6 +31,20 @@ docker-compose up -d
 
 This project is tested with BrowserStack.
 
+## Linting
+
+The linter is configured for both JS and TypeScript files, with the latter being much stricter.
+It runs during the build step but can also be ran during development by `yarn lint`
+
+Linter and TS configs are both located in the root of the project as `.eslintrc.js` and `tsconfig.json`
+
+
+## Styling
+
+Lagoon-UI uses styled-components and it's recommended to use separete files for styling for each component.
+`<style jsx>` tags are allowed but nesting is not.
+
+
 ## Plugin system
 
 The Lagoon UI supports basic plugins via a plugin registry.

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -7,6 +7,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "node server.js",
+    "lint": "tsc && eslint -- src/",
     "build": "next build src",
     "start": "NODE_ENV=production node server.js",
     "storybook": "start-storybook -s ./src -p 6006",
@@ -23,9 +24,13 @@
     "apollo-link-error": "^1.1.1",
     "apollo-link-http": "^1.5.5",
     "apollo-link-ws": "^1.0.10",
+    "babel-plugin-styled-components": "^2.0.7",
+    "colors": "^1.4.0",
     "d3": "^5.15.0",
     "date-fns": "^2.9.0",
     "dotenv-extended": "^2.2.0",
+    "eslint": "^8.35.0",
+    "eslint-config-next": "^13.2.3",
     "express": "^4.18.1",
     "git-up": "^7.0.0",
     "git-url-parse": "13.1.0",
@@ -49,17 +54,25 @@
     "react-markdown": "^6.0.0",
     "react-modal": "^3.8.1",
     "react-nice-dates": "^1.0.2",
-    "react-select": "^3.0.0",
+    "react-select": "5.7.0",
     "react-typekit": "^1.1.3",
     "recompose": "^0.30.0",
     "resize-observer-polyfill": "^1.5.1",
-    "styled-jsx-plugin-postcss": "^0.1.3",
+    "styled-components": "^5.3.6",
     "subscriptions-transport-ws": "^0.11.0",
     "svg-inline-loader": "^0.8.0",
     "webpack": "5.75.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",
+    "typescript": "^4.9.5",
+    "@types/git-url-parse": "^9.0.1",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-highlight-words": "^0.16.4",
+    "@types/recompose": "^0.30.10",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@storybook/addon-a11y": "^5.3.0",
     "@storybook/addon-actions": "^5.3.0",
     "@storybook/addon-docs": "^5.3.0",
@@ -69,6 +82,7 @@
     "@storybook/addons": "^5.3.0",
     "@storybook/core": "^5.3.0",
     "@storybook/react": "^5.3.0",
+    "@typescript-eslint/parser": "^5.54.0",
     "apollo-link-schema": "^1.2.4",
     "babel-loader": "^8.0.6",
     "babel-plugin-macros": "^2.7.1",

src/.babelrc

@@ -1,14 +1,4 @@
 {
-  "presets": [
-    [
-      "next/babel",
-      {
-        "styled-jsx": {
-          "plugins": [
-            "styled-jsx-plugin-postcss"
-          ]
-        }
-      }
-    ]
-  ]
+  "presets": [["next/babel"]],
+  "plugins": [["styled-components", { "ssr": true }]]
 }

src/components/Accordion/StyledAccordion.tsx

@@ -0,0 +1,62 @@
+import styled from "styled-components";
+import { color } from "lib/variables";
+
+export const StyledAccordion = styled.div`
+  .accordion-meta-heading {
+    display: flex;
+    justify-content: space-between;
+    background: ${color.lightestGrey};
+    padding: 5px 20px;
+  }
+  .accordion-heading {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 12px;
+    border: 1px solid ${color.lightestGrey};
+    background: ${color.white};
+    cursor: pointer;
+    word-break: break-word;
+
+    &.minified {
+      padding: 1em;
+    }
+
+    > div {
+      padding: 0 6px;
+    }
+
+    &.cols-6 {
+      > div {
+        width: calc(100% / 6);
+        text-align: center;
+      }
+
+      .identifier {
+        text-align: left;
+      }
+    }
+
+    .identifier {
+      width: 40%;
+    }
+    .source {
+      width: 15%;
+    }
+    .associatedPackage {
+      width: 15%;
+    }
+    .severity {
+      width: 12.5%;
+    }
+    .created {
+      width: 20%;
+    }
+    .severityScore {
+      width: 10%;
+    }
+    .projectsAffected {
+      width: 17.5%;
+      text-align: right;
+    }
+  }
+`;

src/components/Accordion/index.tsx

@@ -0,0 +1,47 @@
+import React, { useState, Fragment, FC } from "react";
+import { StyledAccordion } from "./StyledAccordion";
+
+interface AccordionProps {
+  children: JSX.Element[];
+  defaultValue?: boolean;
+  minified?: boolean;
+  className?: string;
+  onToggle?: (visibility: boolean) => void;
+  columns?: { [key: string]: string } | string[];
+}
+
+const Accordion: FC<AccordionProps> = ({
+  children,
+  defaultValue = true,
+  minified = false,
+  className = "",
+  onToggle,
+  columns,
+}) => {
+  const [visibility, setVisibility] = useState(defaultValue);
+  const accordionType = minified ? "minified" : "wide";
+  const colCountClass = columns && "cols-" + String(Object.keys(columns).length);
+
+  return (
+    <StyledAccordion className={className}>
+      <div
+        className={`accordion-heading ${accordionType} ${colCountClass ? colCountClass : ""}`}
+        onClick={() => {
+          setVisibility(!visibility);
+          if (onToggle) onToggle(!visibility);
+        }}
+      >
+        {columns &&
+          Object.keys(columns).map((item, i) => (
+            <div key={i} className={item}>
+              {columns[item]}
+            </div>
+          ))}
+      </div>
+
+      {visibility ? <Fragment>{children}</Fragment> : null}
+    </StyledAccordion>
+  );
+};
+
+export default Accordion;

src/components/ActiveStandbyConfirm/StyledActiveStandbyConfirm.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { color } from "lib/variables";
+
+export const StyledActiveStandbyConfirm = styled.div`
+  .margins {
+    margin-right: 10px;
+  }
+  input {
+    margin-right: 10px;
+    width: 100%;
+  }
+  .environment-name {
+    font-weight: bold;
+    color: ${color.lightBlue};
+  }
+  a.hover-state {
+    margin-right: 10px;
+    color: ${color.blue};
+  }
+  .form-input {
+    display: flex;
+    align-items: center;
+  }
+`;