Skip to content

Commit

Permalink
Styled-components + TS w/ eslint (#104)
Browse files Browse the repository at this point in the history
  • Loading branch information
DaveDarsa authored Mar 23, 2023
1 parent 77bc7ac commit 57f0dd0
Show file tree
Hide file tree
Showing 147 changed files with 7,244 additions and 5,955 deletions.
44 changes: 44 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -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",
},
},
],
};
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,6 @@ build-storybook.log
.env
.python-version
docker-compose.override.yml

# ts linter
*.tsbuildinfo
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
5 changes: 5 additions & 0 deletions next-env.d.ts
Original file line number Diff line number Diff line change
@@ -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.
18 changes: 16 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
14 changes: 2 additions & 12 deletions src/.babelrc
Original file line number Diff line number Diff line change
@@ -1,14 +1,4 @@
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-postcss"
]
}
}
]
]
"presets": [["next/babel"]],
"plugins": [["styled-components", { "ssr": true }]]
}
62 changes: 62 additions & 0 deletions src/components/Accordion/StyledAccordion.tsx
Original file line number Diff line number Diff line change
@@ -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;
}
}
`;
91 changes: 0 additions & 91 deletions src/components/Accordion/index.js

This file was deleted.

47 changes: 47 additions & 0 deletions src/components/Accordion/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
24 changes: 24 additions & 0 deletions src/components/ActiveStandbyConfirm/StyledActiveStandbyConfirm.tsx
Original file line number Diff line number Diff line change
@@ -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;
}
`;
Loading

0 comments on commit 57f0dd0

Please sign in to comment.