chore: upgrade to prettier v3 (#2606)

Following the docs: https://prettier.io/blog/2023/07/05/3.0.0.html We relay currently on an older prettier version. Also this [PR](#2586) shows the need for an upgrade.
dnbexperience · Sep 4, 2023 · de796d3 · de796d3 · vercel · Sep 4, 2023
1 parent f9aae68
commit de796d3
Show file tree

Hide file tree

Showing 474 changed files with 5,098 additions and 4,679 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -6,7 +6,7 @@
   "useTabs": false,
   "semi": false,
   "bracketSameLine": false,
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "overrides": [
     {
       "files": ".yarnrc.yml",

diff --git a/packages/dnb-design-system-portal/.lintstagedrc b/packages/dnb-design-system-portal/.lintstagedrc
@@ -1,13 +1,13 @@
 {
-  "*.js": [
+  "*.{js,ts,tsx}": [
     "yarn prettier:js:staged",
     "yarn lint:js:staged"
   ],
   "*.{js,css}": [
     "yarn lint:styles:staged",
     "yarn test:staged"
   ],
-  "*.{json,md}": [
+  "*.{json,md,mdx}": [
     "yarn prettier:other:staged"
   ]
 }
diff --git a/packages/dnb-design-system-portal/.prettierrc b/packages/dnb-design-system-portal/.prettierrc
@@ -6,5 +6,5 @@
   "useTabs": false,
   "semi": false,
   "bracketSameLine": false,
-  "trailingComma": "es5"
+  "trailingComma": "all"
 }
diff --git a/packages/dnb-design-system-portal/above_the_line_medium.js b/packages/dnb-design-system-portal/above_the_line_medium.js
@@ -1,21 +1,30 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _extends from '@babel/runtime/helpers/esm/extends'
 
-var _path;
+var _path
 
-import React from 'react';
+import React from 'react'
 
-const above_the_line_medium = props => React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  fill: "none",
-  viewBox: "0 0 24 24"
-}, props), _path || (_path = React.createElement("path", {
-  stroke: "#000",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 1.5,
-  d: "M12 21V9m0 0-4 4m4-4s2.243 2.047 4 4M2 3.5h2m4 0h2m4 0h2m4 0h2"
-})));
+const above_the_line_medium = (props) =>
+  React.createElement(
+    'svg',
+    _extends(
+      {
+        xmlns: 'http://www.w3.org/2000/svg',
+        width: 24,
+        height: 24,
+        fill: 'none',
+        viewBox: '0 0 24 24',
+      },
+      props,
+    ),
+    _path ||
+      (_path = React.createElement('path', {
+        stroke: '#000',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        strokeWidth: 1.5,
+        d: 'M12 21V9m0 0-4 4m4-4s2.243 2.047 4 4M2 3.5h2m4 0h2m4 0h2m4 0h2',
+      })),
+  )
 
-export default above_the_line_medium;
+export default above_the_line_medium
diff --git a/packages/dnb-design-system-portal/gatsby-node.js b/packages/dnb-design-system-portal/gatsby-node.js
@@ -191,7 +191,7 @@ exports.onCreateWebpackConfig = ({
         'global.STYLE_IMPORT_PATH': JSON.stringify(
           PREBUILD_EXISTS
             ? '@dnb/eufemia/build/style/dnb-ui-core.min.css'
-            : '@dnb/eufemia/src/style/core'
+            : '@dnb/eufemia/src/style/core',
         ),
       }),
 
@@ -203,17 +203,17 @@ exports.onCreateWebpackConfig = ({
   if (PREBUILD_EXISTS && stage === 'build-javascript') {
     if (PREBUILD_EXISTS && !isCI) {
       reporter.warn(
-        '😱 There is a "dnb-eufemia/build" in your local repo. It is used durnig your local Portal build! \nKeep in mind, the code from "dnb-eufemia/build" may be outdated. \n\n👉 You can remove the build with: "yarn build:clean"\n\n'
+        '😱 There is a "dnb-eufemia/build" in your local repo. It is used durnig your local Portal build! \nKeep in mind, the code from "dnb-eufemia/build" may be outdated. \n\n👉 You can remove the build with: "yarn build:clean"\n\n',
       )
     }
 
     config.plugins.push(
       plugins.normalModuleReplacement(/@dnb\/eufemia\/src/, (resource) => {
         resource.request = resource.request.replace(
           /@dnb\/eufemia\/src(.*)/,
-          '@dnb/eufemia/build$1'
+          '@dnb/eufemia/build$1',
         )
-      })
+      }),
     )
   }
 

diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json
@@ -9,32 +9,36 @@
   "scripts": {
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 gatsby build",
     "build:ci": "yarn build:version && gatsby build --prefix-paths",
-    "build:visual-test": "SKIP_IMAGE_PROCESSING=1 IS_VISUAL_TEST=1 NODE_OPTIONS=--max-old-space-size=8192 gatsby build --no-uglify",
     "build:version": "node ./scripts/version.js --new-version",
+    "build:visual-test": "SKIP_IMAGE_PROCESSING=1 IS_VISUAL_TEST=1 NODE_OPTIONS=--max-old-space-size=8192 gatsby build --no-uglify",
     "clean": "gatsby clean",
-    "precommit": "yarn lint-staged",
     "lint": "eslint --quiet ./src",
-    "lint-staged": "lint-staged",
-    "lint:ci": "NODE_ENV=test yarn lint:js && yarn lint:styles",
+    "lint:ci": "NODE_ENV=test yarn lint:js && yarn lint:styles && yarn prettier:diff && yarn prettier:package",
     "lint:js": "yarn lint --fix",
     "lint:js:staged": "eslint --quiet --fix",
     "lint:styles": "stylelint './src/**/*.scss'",
     "lint:styles:staged": "stylelint './src/**/*.scss'",
+    "lint-staged": "lint-staged",
+    "precommit": "yarn lint-staged",
+    "prettier:diff": "prettier --list-different '**/*.{md,mdx,js,ts,tsx}'",
+    "prettier:package": "prettier-package-json --list-different ./package.json",
+    "prettier:package:write": "prettier-package-json --write ./package.json",
+    "prettier:write": "prettier --log-level warn --write '**/*.{md,mdx,js,ts,tsx}'",
     "reset": "yarn clean && rm -rf ./node_modules",
     "serve": "gatsby serve -p 8000",
     "start": "cross-env NODE_OPTIONS=--max-old-space-size=8192 gatsby develop",
     "test": "jest",
+    "test:ci": "jest --ci --passWithNoTests",
     "test:e2e": "yarn playwright test",
-    "test:e2e:watch": "playwright test --ui",
     "test:e2e:ci": "start-server-and-test serve 8000 test:e2e",
-    "test:watch": "jest --watch",
-    "test:ci": "jest --ci --passWithNoTests",
-    "test:staged": "jest --bail --findRelatedTests ",
+    "test:e2e:watch": "playwright test --ui",
     "test:screenshots": "yarn workspace @dnb/eufemia test:screenshots",
     "test:screenshots:ci": "start-server-and-test serve 8000 'yarn workspace @dnb/eufemia test:screenshots:ci'",
+    "test:staged": "jest --bail --findRelatedTests ",
     "test:types": "tsc --noEmit",
     "test:types:watch": "tsc --noEmit --watch",
-    "test:update": "jest --updateSnapshot"
+    "test:update": "jest --updateSnapshot",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "@dnb/eufemia": "workspace:*",
@@ -99,6 +103,8 @@
     "ora": "5.4.1",
     "postcss": "8.3.11",
     "postcss-preset-env": "6.7.0",
+    "prettier": "3.0.3",
+    "prettier-package-json": "2.8.0",
     "prism-react-renderer": "1.3.3",
     "process": "0.11.10",
     "prop-types": "15.7.2",
@@ -117,8 +123,8 @@
     "unist-util-visit": "^2"
   },
   "buildVersion": "[LOCAL BUILD]",
-  "releaseVersion": "[LOCAL BUILD]",
   "changelogVersion": "[LOCAL BUILD]",
+  "releaseVersion": "[LOCAL BUILD]",
   "volta": {
     "extends": "../../package.json"
   }

diff --git a/packages/dnb-design-system-portal/scripts/version.js b/packages/dnb-design-system-portal/scripts/version.js
@@ -13,7 +13,7 @@ const {
 const init = async () => {
   if (!isCI) {
     console.log(
-      'You may only set a new deploy version on a CI environment!'
+      'You may only set a new deploy version on a CI environment!',
     )
     return false
   }
@@ -73,7 +73,7 @@ async function createNewChangelogVersion() {
     const packageJson = await fs.readJson(file)
     const changelogFilePath = path.resolve(
       __dirname,
-      '../src/docs/EUFEMIA_CHANGELOG.mdx'
+      '../src/docs/EUFEMIA_CHANGELOG.mdx',
     )
     const content = await fs.readFile(changelogFilePath, 'utf-8')
 
@@ -87,7 +87,7 @@ async function createNewChangelogVersion() {
     await fs.writeFile(file, JSON.stringify(packageJson, null, 2))
   } catch (e) {
     console.warn(
-      `Failed to create new static version file! \n${e.message}`
+      `Failed to create new static version file! \n${e.message}`,
     )
   }
 }
diff --git a/packages/dnb-design-system-portal/src/core/PortalHead.tsx b/packages/dnb-design-system-portal/src/core/PortalHead.tsx
@@ -18,7 +18,7 @@ export const renderBody =
       <HeadComponents
         key="portal-head-components"
         {...pageContext?.headData}
-      />
+      />,
     )
   }
 

diff --git a/packages/dnb-design-system-portal/src/core/PortalLayout.tsx b/packages/dnb-design-system-portal/src/core/PortalLayout.tsx
@@ -99,7 +99,7 @@ export default function PortalLayout(props: PortalLayoutProps) {
       }
       return acc
     },
-    { ...currentFm }
+    { ...currentFm },
   )
 
   // Ensure heading levels are reset before each page renders
@@ -117,7 +117,7 @@ export default function PortalLayout(props: PortalLayoutProps) {
   }
 
   const makeUseOfCategory = Boolean(
-    !mdx?.frontmatter?.title && mdx?.frontmatter?.showTabs
+    !mdx?.frontmatter?.title && mdx?.frontmatter?.showTabs,
   )
   const rootPath =
     '/' + (makeUseOfCategory ? category?.fields?.slug : mdx?.fields?.slug)

diff --git a/packages/dnb-design-system-portal/src/core/PortalSkeleton.tsx b/packages/dnb-design-system-portal/src/core/PortalSkeleton.tsx
@@ -24,7 +24,7 @@ function setSkeletonEnabled(skeleton) {
   try {
     window.localStorage.setItem(
       'skeleton-enabled',
-      String(skeleton ? true : false)
+      String(skeleton ? true : false),
     )
   } catch (e) {
     //

diff --git a/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx b/packages/dnb-design-system-portal/src/docs/brand/development/import-styles.mdx
@@ -23,6 +23,6 @@ import { Theme } from '@dnb/eufemia/shared'
 render(
   <Theme name="sbanken">
     <App />
-  </Theme>
+  </Theme>,
 )
 ```
diff --git a/...design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx b/...design-system-portal/src/docs/contribute/getting-started/make-and-run-tests.mdx
@@ -98,11 +98,11 @@ describe('Button scss', () => {
     (themeName) => {
       const css = loadScss(
         require.resolve(
-          `../style/themes/dnb-button-theme-${themeName}.scss`
-        )
+          `../style/themes/dnb-button-theme-${themeName}.scss`,
+        ),
       )
       expect(css).toMatchSnapshot()
-    }
+    },
   )
 })
 ```
@@ -123,7 +123,7 @@ describe('Breadcrumb aria', () => {
         ]}
         variant="collapse"
         isCollapsed={false}
-      />
+      />,
     )
     expect(await axeComponent(Component)).toHaveNoViolations()
   })

diff --git a/...dnb-design-system-portal/src/docs/contribute/getting-started/making-changes.mdx b/...dnb-design-system-portal/src/docs/contribute/getting-started/making-changes.mdx
@@ -107,7 +107,7 @@ function MyComponent(props: ComponentAllProps) {
   const { myString } = extendPropsWithContext(
     props,
     defaultProps,
-    context.getTranslation(props).MyComponent // details below 👇
+    context.getTranslation(props).MyComponent, // details below 👇
     // ...
   )
 
@@ -140,7 +140,7 @@ function MyComponent(props: ComponentAllProps) {
   const { myParam, ...rest } = extendPropsWithContext(
     props,
     defaultProps,
-    context.MyComponent
+    context.MyComponent,
     // ...
   )
 
@@ -204,7 +204,7 @@ function MyComponent(props: ComponentAllProps) {
 
   const { myParam, className, ...rest } = extendPropsWithContext(
     props,
-    defaultProps
+    defaultProps,
     // ...
   )
 
@@ -215,7 +215,7 @@ function MyComponent(props: ComponentAllProps) {
   rest.className = classnames(
     'dnb-my-component',
     createSpacingClasses(props),
-    className
+    className,
   )
 
   // Spread the ...rest on your root element
@@ -254,7 +254,7 @@ function MyComponent(props: ComponentAllProps) {
   const { skeleton, className, ...rest } = extendPropsWithContext(
     props,
     defaultProps,
-    { skeleton: context?.skeleton }
+    { skeleton: context?.skeleton },
     // ...
   )
 
@@ -266,7 +266,7 @@ function MyComponent(props: ComponentAllProps) {
     'shape',
     skeleton,
     context,
-    className
+    className,
   )
 
   // Use skeleton and spread the ...rest

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx
@@ -27,7 +27,7 @@ import { Link } from 'gatsby'
 render(
   <Anchor to="/url" element={Link}>
     Link
-  </Anchor>
+  </Anchor>,
 )
 ```
 
@@ -47,6 +47,6 @@ render(
     </Anchor>
 
     <div id="hash-id">element to scroll to</div>
-  </>
+  </>,
 )
 ```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.tsx
@@ -123,7 +123,7 @@ export const AutocompleteDynamicallyUpdatedData = () => (
               return () => clearTimeout(timeout)
             },
             { value },
-            250
+            250,
           )
         }
         return (

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/Examples.tsx
@@ -305,7 +305,7 @@ export const DialogConfirmScrollableContent = () => {
               onOpen={() => {
                 if (
                   document.documentElement.classList.contains(
-                    'scroll-to-bottom'
+                    'scroll-to-bottom',
                   )
                 ) {
                   scrollRef.current.scrollTop = 100000

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/drawer/visual-tests/Examples.tsx
@@ -25,30 +25,30 @@ export const DrawerScrollViewSetup = () => (
             scrollRef={scrollRef}
             onOpen={() => {
               const innerOverflowY = window.getComputedStyle(
-                innerRef.current
+                innerRef.current,
               ).overflowY
 
               const contentElem = scrollRef.current.querySelector(
-                '.dnb-drawer__content'
+                '.dnb-drawer__content',
               )
               const contentOverflowY =
                 window.getComputedStyle(contentElem)?.overflowY
 
               const scxrollOverflowY = window.getComputedStyle(
-                scrollRef.current
+                scrollRef.current,
               ).overflowY
 
               if (contentOverflowY !== 'visible') {
                 setErrorMessage(
                   '.dnb-drawer__content was "' +
                     contentOverflowY +
-                    '" and not "visible"'
+                    '" and not "visible"',
                 )
               } else if (innerOverflowY !== 'visible') {
                 setErrorMessage(
                   '.dnb-drawer__inner was "' +
                     innerOverflowY +
-                    '" and not "visible"'
+                    '" and not "visible"',
                 )
               } else if (scxrollOverflowY !== 'auto') {
                 setErrorMessage('.dnb-scroll-view was not "auto"')
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ export const renderBody = @@
           <HeadComponents
             key="portal-head-components"
             {...pageContext?.headData}
-          />
+          />,
         )
       }
@@ Expand Down @@