Merge branch 'develop' into fix/471-update-readme

IQSS · Oct 23, 2024 · bfaabd9 · bfaabd9
2 parents 5700c38 + 31c2d49
commit bfaabd9
Show file tree

Hide file tree

Showing 65 changed files with 356 additions and 247 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,33 @@
+# Ignore Cypress autogenerated files
+.nyc_output
+coverage
+cypress
+merged-coverage
+
+# Ignore dev environment files
+dev-env
+
+# Ignore deployment files
+deployment
+
+# Ignore both dist folders from SPA and Design System
+dist
+/packages/design-system/dist
+
+# Ignore mdx files due to different conflicts between prettier and mdx files
+*.mdx
+
+# Ignore config files
+.babelrc
+.eslintrc.json
+.nycrc.json
+.prettierrc
+.stylelintrc.json
+cypress.config.ts
+dev.Dockerfile
+lerna.json
+LICENSE
+package.json
+package-lock.json
+tsconfig.json
+vite.config.ts
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,3 +1,3 @@
 <script>
-  window.global = window;
-</script>
+  window.global = window
+</script>
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,6 +1,7 @@
+import React from 'react'
 import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
-import { MemoryRouter } from 'react-router-dom'
+import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom'
 import { FakerHelper } from '../tests/component/shared/FakerHelper'
 import 'react-loading-skeleton/dist/skeleton.css'
 
@@ -17,11 +18,18 @@ const preview: Preview = {
   decorators: [
     (Story) => {
       FakerHelper.setFakerSeed()
+
+      const routes: RouteObject[] = [
+        {
+          element: <Story />,
+          path: '/*'
+        }
+      ]
+      const browserRouter = createBrowserRouter(routes)
+
       return (
         <ThemeProvider>
-          <MemoryRouter>
-            <Story />
-          </MemoryRouter>
+          <RouterProvider router={browserRouter} />
         </ThemeProvider>
       )
     }

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -22,6 +22,14 @@
       {
         "ignoreSelectors": [":export"]
       }
+    ],
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "ignore": ["after-comment", "first-nested", "inside-block", "blockless-after-same-name-blockless"],
+        "severity": "warning",
+        "except": ["blockless-after-blockless"]
+      }
     ]
   }
 }
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -36,7 +36,7 @@ export default defineConfig({
   },
   env: {
     codeCoverage: {
-      exclude: 'tests/**/*.*'
+      exclude: ['tests/**/*.*', '**/ErrorPage.tsx']
     }
   }
 })
diff --git a/index.html b/index.html
@@ -2,34 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href='/favicon.ico' />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Open source research data repository software"
-    />
-    <link rel="apple-touch-icon" href='/logo192.png' />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href='/manifest.json' />
+    <meta name="description" content="Open source research data repository software" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Dataverse</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
   <script type="module" src="/src/index.tsx"></script>
 </html>
diff --git a/package.json b/package.json
@@ -53,10 +53,10 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "npm run lint:eslint && npm run lint:stylelint && npm run lint:prettier",
-    "lint:fix": "eslint --fix --ext .ts,.tsx ./src --ignore-path .gitignore . && stylelint --fix **/*.scss && prettier --write '**/*.(yml|json|md|css)'",
+    "lint:fix": "eslint --fix --ext .ts,.tsx ./src --ignore-path .gitignore . && stylelint --fix **/*.scss && prettier . --write",
     "lint:eslint": "eslint --ignore-path .gitignore .",
     "lint:stylelint": "stylelint **/*.scss ",
-    "lint:prettier": "prettier --check '**/*.(yml|json|md|css)' --ignore-path packages/design-system/.gitignore",
+    "lint:prettier": "prettier . --check",
     "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json,yml,md}' --config ./.prettierrc",
     "cy:open-e2e": "cypress open --e2e --browser chrome",
     "cy:open-unit": "cypress open --component --browser chrome",

diff --git a/packages/design-system/.storybook/preview-head.html b/packages/design-system/.storybook/preview-head.html
@@ -1,3 +1,3 @@
 <script>
-  window.global = window;
-</script>
+  window.global = window
+</script>
diff --git a/packages/design-system/.storybook/preview.tsx b/packages/design-system/.storybook/preview.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '../src/lib/components/theme/ThemeProvider'
 import DocumentationTemplate from '../src/lib/stories/DocumentationTemplate.mdx'

diff --git a/packages/design-system/src/lib/assets/styles/design-tokens/typography.module.scss b/packages/design-system/src/lib/assets/styles/design-tokens/typography.module.scss
@@ -2,7 +2,7 @@ $dv-font-size: 16px;
 $dv-font-size-sm: 12px;
 $dv-brand-font-size: 24px;
 
-$dv-font-family: ("Helvetica Neue",helvetica,arial,sans-serif);
+$dv-font-family: ('Helvetica Neue', helvetica, arial, sans-serif);
 
 $dv-font-weight: 400;
 $dv-font-weight-light: 300;
@@ -19,4 +19,4 @@ $dv-line-height: 1.5;
   fontWeightLight: $dv-font-weight-light;
   fontWeightBold: $dv-font-weight-bold;
   lineHeight: $dv-line-height;
-}
+}
diff --git a/packages/design-system/src/lib/assets/styles/fontcustom.scss b/packages/design-system/src/lib/assets/styles/fontcustom.scss
@@ -6,20 +6,22 @@
   font-weight: normal;
   font-family: fontcustom;
   font-style: normal;
-  src: url("fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.woff2") format("woff2"),
-       url("fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.woff") format("woff"),
-       url("fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.ttf") format("truetype"),
-       url("fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.svg#fontcustom") format("svg");
+  src: url('fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.woff2') format('woff2'),
+    url('fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.woff') format('woff'),
+    url('fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.ttf') format('truetype'),
+    url('fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.svg#fontcustom') format('svg');
 }
 
 @media screen and (min-resolution) {
   @font-face {
     font-family: fontcustom;
-    src: url("fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.svg#fontcustom") format("svg");
+    src: url('fontcustom/fontcustom_8c9f858763dbca8e064e7fd59d1aa2b7.svg#fontcustom') format('svg');
   }
 }
 
-[data-icon]::before { content: attr(data-icon); }
+[data-icon]::before {
+  content: attr(data-icon);
+}
 
 [data-icon]::before,
 .icon-astro::before,
@@ -50,18 +52,62 @@
   -webkit-font-smoothing: antialiased;
 }
 
-.icon-astro::before { content: "\f100"; }
-.icon-audio::before { content: "\f101"; }
-.icon-code::before { content: "\f102"; }
-.icon-collection::before { content: "\f103"; }
-.icon-dataset::before { content: "\f104"; }
-.icon-document::before { content: "\f105"; }
-.icon-file::before { content: "\f106"; }
-.icon-geodata::before { content: "\f107"; }
-.icon-image::before { content: "\f108"; }
-.icon-network::before { content: "\f109"; }
-.icon-other::before { content: "\f10a"; }
-.icon-package::before { content: "\f10b"; }
-.icon-tabular::before { content: "\f10c"; }
-.icon-unlock::before { content: "\f10d"; }
-.icon-video::before { content: "\f10e"; }
+.icon-astro::before {
+  content: '\f100';
+}
+
+.icon-audio::before {
+  content: '\f101';
+}
+
+.icon-code::before {
+  content: '\f102';
+}
+
+.icon-collection::before {
+  content: '\f103';
+}
+
+.icon-dataset::before {
+  content: '\f104';
+}
+
+.icon-document::before {
+  content: '\f105';
+}
+
+.icon-file::before {
+  content: '\f106';
+}
+
+.icon-geodata::before {
+  content: '\f107';
+}
+
+.icon-image::before {
+  content: '\f108';
+}
+
+.icon-network::before {
+  content: '\f109';
+}
+
+.icon-other::before {
+  content: '\f10a';
+}
+
+.icon-package::before {
+  content: '\f10b';
+}
+
+.icon-tabular::before {
+  content: '\f10c';
+}
+
+.icon-unlock::before {
+  content: '\f10d';
+}
+
+.icon-video::before {
+  content: '\f10e';
+}
diff --git a/packages/design-system/src/lib/assets/styles/index.scss b/packages/design-system/src/lib/assets/styles/index.scss
@@ -1,3 +1,2 @@
-@import "fontcustom";
-@import "bootstrap-customized";
-
+@import 'fontcustom';
+@import 'bootstrap-customized';
diff --git a/packages/design-system/src/lib/components/badge/Badge.module.scss b/packages/design-system/src/lib/components/badge/Badge.module.scss
@@ -3,25 +3,25 @@
 @import 'src/lib/assets/styles/design-tokens/colors.module';
 
 .primary:not(#\#) {
-    color: color-contrast($dv-primary-color);
+  color: color-contrast($dv-primary-color);
 }
 
 .secondary:not(#\#) {
-    color: color-contrast($dv-secondary-color);
+  color: color-contrast($dv-secondary-color);
 }
 
 .info:not(#\#) {
-    color: color-contrast($dv-info-color);
+  color: color-contrast($dv-info-color);
 }
 
 .success:not(#\#) {
-    color: color-contrast($dv-success-color);
+  color: color-contrast($dv-success-color);
 }
 
 .warning:not(#\#) {
-    color: color-contrast($dv-warning-color);
+  color: color-contrast($dv-warning-color);
 }
 
 .danger:not(#\#) {
-    color: color-contrast($dv-danger-color);
-}
+  color: color-contrast($dv-danger-color);
+}
diff --git a/packages/design-system/src/lib/components/button-group/ButtonGroup.module.scss b/packages/design-system/src/lib/components/button-group/ButtonGroup.module.scss
@@ -1,5 +1,6 @@
-@import "src/lib/assets/styles/design-tokens/colors.module";
+@import 'src/lib/assets/styles/design-tokens/colors.module';
 
-.border > button, .border > [role="group"] > button {
+.border > button,
+.border > [role='group'] > button {
   border: 1px solid $dv-button-border-color;
-}
+}
diff --git a/packages/design-system/src/lib/components/button/Button.module.scss b/packages/design-system/src/lib/components/button/Button.module.scss
@@ -1,3 +1,3 @@
 .spacing {
   margin: 0 7px;
-}
+}
diff --git a/packages/design-system/src/lib/components/dropdown-button/DropdownButton.module.scss b/packages/design-system/src/lib/components/dropdown-button/DropdownButton.module.scss
@@ -1,3 +1,3 @@
 .spacing {
-  margin: 0 7px
+  margin: 0 7px;
 }
diff --git a/...rc/lib/components/form/form-group-multiple-fields/FormGroupWithMultipleFields.module.scss b/...rc/lib/components/form/form-group-multiple-fields/FormGroupWithMultipleFields.module.scss
@@ -1,7 +1,7 @@
-@import "src/lib/assets/styles/design-tokens/typography.module";
+@import 'src/lib/assets/styles/design-tokens/typography.module';
 
 .title {
   padding-top: calc(0.375rem + 1px);
   padding-bottom: calc(0.375rem + 1px);
   font-weight: $dv-font-weight-bold;
-}
+}
diff --git a/...sign-system/src/lib/components/form/required-input-symbol/RequiredInputSymbol.module.scss b/...sign-system/src/lib/components/form/required-input-symbol/RequiredInputSymbol.module.scss
@@ -1,5 +1,5 @@
-@import "src/lib/assets/styles/design-tokens/colors.module";
+@import 'src/lib/assets/styles/design-tokens/colors.module';
 
 .asterisk {
- color: $dv-danger-color;
-}
+  color: $dv-danger-color;
+}
diff --git a/packages/design-system/src/lib/components/icon/Icon.module.scss b/packages/design-system/src/lib/components/icon/Icon.module.scss
@@ -1,3 +1,3 @@
 .icon {
-  margin-right: .3em;
-}
+  margin-right: 0.3em;
+}
diff --git a/packages/design-system/src/lib/components/table/Table.module.scss b/packages/design-system/src/lib/components/table/Table.module.scss
@@ -1,3 +1,3 @@
 .table > thead {
   text-align: center;
-}
+}
diff --git a/...s/design-system/src/lib/components/tooltip/question-mark-tooltip/QuestionIcon.module.scss b/...s/design-system/src/lib/components/tooltip/question-mark-tooltip/QuestionIcon.module.scss
@@ -1,9 +1,9 @@
-@import "src/lib/assets/styles/design-tokens/colors.module";
+@import 'src/lib/assets/styles/design-tokens/colors.module';
 
 .question-tooltip {
   color: $dv-tooltip-color;
 }
 
 .question-tooltip:hover {
   color: $dv-tooltip-hover-color;
-}
+}
diff --git a/...n-system/src/lib/components/tooltip/question-mark-tooltip/QuestionMarkTooltip.module.scss b/...n-system/src/lib/components/tooltip/question-mark-tooltip/QuestionMarkTooltip.module.scss
@@ -1,4 +1,4 @@
 .tooltip {
   display: inline-block;
   vertical-align: 0.125em;
-}
+}