migrate prettier to v3; styled to v6

uselagoon · Mar 5, 2024 · 0a8addb · 0a8addb
1 parent e6abaa5
commit 0a8addb
Show file tree

Hide file tree

Showing 19 changed files with 51 additions and 63 deletions.
diff --git a/.github/workflows/ui-workflow.yaml b/.github/workflows/ui-workflow.yaml
@@ -22,7 +22,7 @@ jobs:
 
     - name: Formatting check
       run: |
-        yarn add prettier@2.8.7 @trivago/prettier-plugin-sort-imports
+        yarn add prettier@3.1.1 @trivago/prettier-plugin-sort-imports
         yarn format-check
 
   lint:

diff --git a/.prettierrc b/.prettierrc
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: ['@trivago/prettier-plugin-sort-imports'],
+  singleQuote: true,
+  bracketSpacing: true,
+  printWidth: 120,
+  arrowParens: 'avoid',
+  tabWidth: 2,
+  importOrder: ['^react(.*)$', '^next(.*)$', '<THIRD_PARTY_MODULES>', '^src/(.*)$', '^[./]'],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  trailingComma: 'es5',
+};
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -18,7 +18,7 @@ const config: StorybookConfig = {
         },
       },
     },
-    '@storybook/addon-mdx-gfm'
+    '@storybook/addon-mdx-gfm',
   ],
   framework: {
     name: '@storybook/nextjs',

diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "recompose": "^0.30.0",
     "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^6.1.8",
+    "stylis": "^4.0.0",
     "subscriptions-transport-ws": "^0.11.0",
     "svg-inline-loader": "^0.8.0",
     "webpack": "5.89.0"
@@ -106,16 +107,15 @@
     "@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": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
     "apollo-link-schema": "^1.2.4",
     "axe-playwright": "^1.2.3",
     "babel-loader": "^9.1.2",
     "babel-plugin-macros": "^3.1.0",
+    "chromatic": "^10.2.0",
     "cypress": "13.6.1",
     "cypress-network-idle": "^1.14.2",
-    "chromatic": "^10.2.0",
     "eslint-plugin-storybook": "^0.6.15",
     "faker": "^6.6.6",
     "msw": "^1.2.1",

diff --git a/src/components/Accordion/index.stories.tsx b/src/components/Accordion/index.stories.tsx
@@ -66,4 +66,4 @@ export const WithChildren: Story = {
   },
 };
 
-export default meta;
+export default meta;
diff --git a/src/components/AddVariable/index.js b/src/components/AddVariable/index.js
@@ -230,8 +230,8 @@ export const AddVariable = ({
                             ? 'Update environment variable'
                             : 'Add environment variable'
                           : updateVar || varName
-                          ? 'Update project variable'
-                          : 'Add project variable'}
+                            ? 'Update project variable'
+                            : 'Add project variable'}
                       </ButtonBootstrap>
                     </Popconfirm>
                   );
@@ -248,8 +248,8 @@ export const AddVariable = ({
                           ? 'Update environment variable'
                           : 'Add environment variable'
                         : updateVar || varName
-                        ? 'Update project variable'
-                        : 'Add project variable'}
+                          ? 'Update project variable'
+                          : 'Add project variable'}
                     </ButtonBootstrap>
                   );
                 }

diff --git a/src/components/AddVariable/logic.js b/src/components/AddVariable/logic.js
@@ -18,8 +18,7 @@ const withInputHandlers = withHandlers({
       setInputName(event.target.value),
   setClear:
     ({ setInputValue, setInputName, setInputScope }) =>
-    () =>
-      [setInputValue(''), setInputName(''), setInputScope('')],
+    () => [setInputValue(''), setInputName(''), setInputScope('')],
 });
 
 const withModalState = withState('open', 'setOpen', false);

diff --git a/src/components/DeleteConfirm/index.stories.tsx b/src/components/DeleteConfirm/index.stories.tsx
@@ -14,19 +14,7 @@ interface Props {
   closeModalFunction: () => void;
 }
 
-interface ConfirmArgs {
-  deleteType: string;
-  deleteName: string;
-  icon:  string;
-  onDelete: () => void;
-  inputValue: string | number;
-  setInputValue: () => void;
-  open: boolean;
-  openModal: () => void,
-  closeModal :() => void,
-}
-
-const DeleteConfirmWrapper = (args: ConfirmArgs) => {
+const DeleteConfirmWrapper = (args: any) => {
   const [open, setOpen] = useState(true);
 
   return <DeleteConfirm {...args} open={open} closeModal={() => setOpen(false)} />;
@@ -63,7 +51,6 @@ export const WithConfirmationBlocked = ({
     open={openBoolean}
     openModal={openModalFunction}
     closeModal={closeModalFunction}
-    icon=""
   />
 );
 

diff --git a/src/components/DeleteVariable/logic.js b/src/components/DeleteVariable/logic.js
@@ -10,8 +10,7 @@ const withInputHandlers = withHandlers({
       setInputValue(event.target.value),
   setClear:
     ({ setInputValue }) =>
-    () =>
-      [setInputValue('')],
+    () => [setInputValue('')],
 });
 
 const withModalState = withState('open', 'setOpen', false);

diff --git a/src/components/Modal/index.stories.tsx b/src/components/Modal/index.stories.tsx
@@ -25,12 +25,12 @@ const SampleContent = () => (
 
 interface ModalArgs {
   isOpen: boolean;
-  onRequestClose: ()=>void;
+  onRequestClose: () => void;
   children: ReactNode;
   contentLabel: string;
   variant: string;
 }
-const ModalWrapper = (args: ModalArgs ) => {
+const ModalWrapper = (args: ModalArgs) => {
   const [isOpen, setIsOpen] = useState(false);
   const closeModal = () => setIsOpen(false);
   const openModal = () => setIsOpen(true);

diff --git a/src/components/Organizations/PaginatedTable/PaginatedTable.tsx b/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
@@ -295,7 +295,7 @@ const PaginatedTable: FC<Props> = ({
           </Checkbox>
         ) : null}
         {withSorter ? (
-          <select onChange={handleSortChange} placeholder="Sort by" defaultValue={''}>
+          <select onChange={handleSortChange} defaultValue={''}>
             <option value="" disabled hidden>
               Sort by
             </option>

diff --git a/src/components/Problem/ContentDisplay/StyledContent.tsx b/src/components/Problem/ContentDisplay/StyledContent.tsx
@@ -52,7 +52,9 @@ export const StyledDefaultContent = styled.div`
       margin: 0;
       background: #2d2d2d;
       color: white;
-      font: 0.8rem Inconsolata, monospace;
+      font:
+        0.8rem Inconsolata,
+        monospace;
       line-height: 2;
       transition: all 0.6s ease-in-out;
     }
@@ -77,7 +79,9 @@ export const StyledDrutinyContent = styled.div`
     background: #2d2d2d;
     padding: 20px;
     color: white;
-    font: 0.8rem Inconsolata, monospace;
+    font:
+      0.8rem Inconsolata,
+      monospace;
     line-height: 2;
     transition: all 0.6s ease-in-out;
     padding: 20px;

diff --git a/src/components/Problems/sortedItems.js b/src/components/Problems/sortedItems.js
@@ -22,14 +22,14 @@ const useSortableProblemsData = initialItems => {
           sortConfig.key === 'created'
             ? new moment(a[sortConfig.key]).format('YYYYMMDD')
             : a[sortConfig.key]
-            ? a[sortConfig.key].toString().toLowerCase().trim()
-            : null;
+              ? a[sortConfig.key].toString().toLowerCase().trim()
+              : null;
         let bParsed =
           sortConfig.key === 'created'
             ? new moment(b[sortConfig.key]).format('YYYYMMDD')
             : b[sortConfig.key]
-            ? b[sortConfig.key].toString().toLowerCase().trim()
-            : null;
+              ? b[sortConfig.key].toString().toLowerCase().trim()
+              : null;
 
         if (aParsed < bParsed) {
           return sortConfig.direction === 'ascending' ? -1 : 1;

diff --git a/src/components/ProblemsByIdentifier/StyledProblemsByIdentifier.tsx b/src/components/ProblemsByIdentifier/StyledProblemsByIdentifier.tsx
@@ -168,7 +168,9 @@ export const StyledProblemsByIdentifier = styled.div`
       margin: 0;
       background: #2d2d2d;
       color: white;
-      font: 0.8rem Inconsolata, monospace;
+      font:
+        0.8rem Inconsolata,
+        monospace;
       line-height: 2;
       transition: all 0.6s ease-in-out;
     }

diff --git a/src/components/ProblemsByProject/StyledProblemsByProject.tsx b/src/components/ProblemsByProject/StyledProblemsByProject.tsx
@@ -128,7 +128,9 @@ export const StyledProblemsByProject = styled.div`
     padding: 20px;
     margin: 0;
     color: ${color.white};
-    font: 0.8rem Inconsolata, monospace;
+    font:
+      0.8rem Inconsolata,
+      monospace;
     line-height: 2;
     transition: all 0.6s ease-in-out;
     padding: 20px;

diff --git a/src/components/ProjectDetailsSidebar/StyledProjectSidebar.tsx b/src/components/ProjectDetailsSidebar/StyledProjectSidebar.tsx
@@ -146,7 +146,9 @@ export const FieldWrapper = styled.div`
       right: 0;
       text-transform: uppercase;
       top: 20px;
-      transition: top 0.5s, opacity 0.75s ease-in;
+      transition:
+        top 0.5s,
+        opacity 0.75s ease-in;
     }
   }
 

diff --git a/src/layouts/GlobalStyles/index.tsx b/src/layouts/GlobalStyles/index.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 import { bp, color, fontSize } from 'lib/variables';
-import { DefaultTheme, GlobalStyleComponent, createGlobalStyle } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
 
 /**
  * Applies styles globally to any component nested inside it.
  */
 
-export const GlobalStyles: GlobalStyleComponent<Record<string, never>, DefaultTheme> = createGlobalStyle`
+export const GlobalStyle = createGlobalStyle`
 * {
   box-sizing: border-box;
 }
@@ -313,7 +313,7 @@ main{
 }
 `;
 
-const AppGlobalStyles = React.memo(() => <GlobalStyles />);
+const AppGlobalStyles = React.memo(() => <GlobalStyle />);
 
 AppGlobalStyles.displayName = 'GlobalStyles';
 

diff --git a/yarn.lock b/yarn.lock
@@ -3688,7 +3688,7 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@^3.3.0":
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
   integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
@@ -3950,15 +3950,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
   integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
 
-"@types/styled-components@^5.1.26":
-  version "5.1.34"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.34.tgz#4107df8ef8a7eaba4fa6b05f78f93fba4daf0300"
-  integrity sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==
-  dependencies:
-    "@types/hoist-non-react-statics" "*"
-    "@types/react" "*"
-    csstype "^3.0.2"
-
 "@types/stylis@4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
@@ -14316,7 +14307,7 @@ stylis@4.2.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-stylis@4.3.1, stylis@^4.0.13:
+stylis@4.3.1, stylis@^4.0.0, stylis@^4.0.13:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
   integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,4 +66,4 @@ export const WithChildren: Story = { @@
       },
     };
-    export default meta;
+    export default meta;