Merge branch 'main' into fix/305-update-deprecated-type-usage

.eslintrc.json

@@ -28,6 +28,24 @@
         "linebreak-style": ["error", "unix"],
         "quotes": ["error", "single"],
         "semi": ["error", "never"],
+        "import/order": [
+          "error",
+          {
+            "groups": [
+              "builtin",
+              "external",
+              "internal",
+              "parent",
+              "sibling",
+              "index"
+            ],
+            "alphabetize": {
+              "order": "asc",
+              "caseInsensitive": true
+            },
+            "newlines-between": "never"
+          }
+        ],
         "comma-dangle": 0,
         "react/react-in-jsx-scope": 0,
         "@typescript-eslint/comma-dangle": 0,

.github/workflows/dependencies.yaml

@@ -32,7 +32,7 @@ jobs:
 
     steps:
       - name: Set up JDK 17
-        uses: actions/setup-java@6a0805fcefea3d4657a47ac4c165951e33482018 # v4.2.2
+        uses: actions/setup-java@2dfa2011c5b2a0f1489bf9e433881c92c1631f88 # v4.3.0
         with:
           distribution: 'temurin'
           java-version: '17'

CHANGELOG.md

@@ -38,6 +38,8 @@
 - **chor:** update deoendency file ([bb45f76](https://github.com/eclipse-tractusx/portal-shared-components/commit/bb45f761102e442fd727b10f5a1d0362a0f124cf))
 - **chro:** update the package version ([506dc70](https://github.com/eclipse-tractusx/portal-shared-components/commit/506dc709a28e19cbfc2dd6ea38f3af60ed3ef74c))
 
+- **ImageGallery:** Fix 401 Unauthorized error when clicking on App Images ([#291](https://github.com/eclipse-tractusx/portal-shared-components/issues/291))
+
 ## [3.3.0](https://github.com/eclipse-tractusx/portal-shared-components/compare/v3.2.0...v3.3.0) (2024-08-23)
 
 ### Features

DEPENDENCIES

@@ -527,7 +527,7 @@ npm/npmjs/-/pkg-dir/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/pkg-dir/4.2.0, MIT, approved, clearlydefined
 npm/npmjs/-/polished/4.3.1, MIT AND (BSD-2-Clause AND BSD-3-Clause AND ISC AND MIT) AND BSD-3-Clause AND OFL-1.1, approved, #14008
 npm/npmjs/-/possible-typed-array-names/1.0.0, MIT, approved, clearlydefined
-npm/npmjs/-/postcss/8.4.41, MIT, approved, #3545
+npm/npmjs/-/postcss/8.4.45, MIT, approved, #3545
 npm/npmjs/-/prelude-ls/1.2.1, MIT, approved, clearlydefined
 npm/npmjs/-/prettier/3.3.3, MIT AND BSD-2-Clause AND ISC AND MPL-1.0, approved, #15480
 npm/npmjs/-/pretty-format/27.5.1, 0BSD AND Apache-2.0 AND BSD-2-Clause AND MIT, approved, #1948
@@ -726,7 +726,7 @@ npm/npmjs/-/validator/13.11.0, MIT, approved, clearlydefined
 npm/npmjs/-/vary/1.1.2, MIT, approved, clearlydefined
 npm/npmjs/-/vite-plugin-dts/3.7.3, MIT, approved, #14014
 npm/npmjs/-/vite-plugin-lib-inject-css/2.0.1, MIT, approved, #14016
-npm/npmjs/-/vite/5.4.2, MIT AND (ISC AND MIT) AND (Apache-2.0 AND BSD-2-Clause AND BlueOak-1.0.0 AND CC0-1.0 AND ISC AND MIT) AND (BSD-3-Clause AND MIT) AND ISC AND (BSD-2-Clause AND BSD-3-Clause), approved, #15844
+npm/npmjs/-/vite/5.4.3, MIT AND (ISC AND MIT) AND (Apache-2.0 AND BSD-2-Clause AND BlueOak-1.0.0 AND CC0-1.0 AND ISC AND MIT) AND (BSD-3-Clause AND MIT) AND ISC AND (BSD-2-Clause AND BSD-3-Clause), approved, #15844
 npm/npmjs/-/void-elements/3.1.0, MIT, approved, clearlydefined
 npm/npmjs/-/vue-template-compiler/2.7.16, 0BSD AND MIT AND MIT, approved, #3476
 npm/npmjs/-/vue-tsc/1.8.27, MIT, approved, clearlydefined

src/components/basic/BaseImage/index.tsx

@@ -18,8 +18,8 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { Box } from '@mui/material'
 import { Buffer } from 'buffer'
+import { Box } from '@mui/material'
 
 interface BaseImageProps {
   image: string

src/components/basic/Button/BackButton.tsx

@@ -18,8 +18,8 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { Button } from '.'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import { Button } from '.'
 
 export interface BackButtonProps {
   backButtonLabel?: string

src/components/basic/Button/Button.stories.tsx

@@ -19,7 +19,6 @@
  ********************************************************************************/
 
 import type { Meta, StoryObj } from '@storybook/react'
-
 import { Button } from '.'
 
 const meta: Meta<typeof Button> = {

src/components/basic/Button/LoadMoreButton.tsx

@@ -18,9 +18,9 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
 import { type ButtonProps as MuiButtonProps } from '@mui/material/Button/Button'
 import { Button } from '.'
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
 
 export interface LoadMoreButtonProps
   extends Omit<MuiButtonProps, 'color' | 'variant' | 'size'> {

src/components/basic/Button/ScrollToTopButton.stories.tsx

@@ -19,7 +19,6 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-
 import { ScrollToTopButton as Component } from './ScrollToTopButton'
 
 export default {

src/components/basic/Button/ScrollToTopButton.tsx

@@ -17,9 +17,9 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { IconButton } from '../IconButton'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
 import { useMediaQuery } from '@mui/material'
+import { IconButton } from '../IconButton'
 
 export interface ScrollToTopButtonProps {
   onButtonClick: React.MouseEventHandler

src/components/basic/Carousel/Carousel.stories.tsx

@@ -19,9 +19,9 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-import { Carousel as Component } from '.'
-import { theme } from '../../../theme'
 import uniqueId from 'lodash/uniqueId'
+import { theme } from '../../../theme'
+import { Carousel as Component } from '.'
 
 export default {
   title: 'Carousel',

src/components/basic/Carousel/CarouselBox.stories.tsx

@@ -19,9 +19,9 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-import { CarouselBox as Component } from './CarouselBox'
-import { theme } from '../../../theme'
 import uniqueId from 'lodash/uniqueId'
+import { theme } from '../../../theme'
+import { CarouselBox as Component } from './CarouselBox'
 
 export default {
   title: 'Carousel',

src/components/basic/Carousel/CarouselBox.tsx

@@ -18,15 +18,15 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import React, { useState, Children, useEffect } from 'react'
-import Slider from 'react-slick'
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import { IconButton } from '../IconButton'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import { Box } from '@mui/material'
 import uniqueId from 'lodash/uniqueId'
-import { Typography } from '../Typography'
+import React, { useState, Children, useEffect } from 'react'
+import Slider from 'react-slick'
 import { theme } from '../../../theme'
+import { IconButton } from '../IconButton'
+import { Typography } from '../Typography'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 

src/components/basic/Carousel/index.tsx

@@ -18,14 +18,14 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useState, Children, useEffect, useCallback } from 'react'
-import Slider from 'react-slick'
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import { IconButton } from '../IconButton'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import { Box } from '@mui/material'
-import { theme } from '../../../theme'
 import uniqueId from 'lodash/uniqueId'
+import { useState, Children, useEffect, useCallback } from 'react'
+import Slider from 'react-slick'
+import { theme } from '../../../theme'
+import { IconButton } from '../IconButton'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 import { type CarouselNavArrows } from './CarouselBox'
@@ -75,7 +75,7 @@ export const Carousel = ({
 }: CarouselProps) => {
   const [showArrows, setShowArrows] = useState(false)
   const onMouseEnter = () => {
-    setShowArrows(true)
+    setShowArrows(arrayChildren.length > 1)
   }
   const onMouseLeave = () => {
     setShowArrows(false)
@@ -155,7 +155,9 @@ export const Carousel = ({
 
   const settings = {
     dots,
-    infinite,
+    // @ref https://github.com/akiran/react-slick/issues/2093#issuecomment-1705213915
+    // Prevents broken UI by defaulting infinite scroll to false when only a single child element is present.
+    infinite: infinite && arrayChildren.length > 1,
     slidesToShow: responsiveSlides,
     slidesToScroll: responsiveSlides,
     swipeToSlide: false,

src/components/basic/CategoryDivider/CategoryDivider.stories.tsx

@@ -19,7 +19,6 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-
 import { CategoryDivider as Component } from '.'
 
 export default {

src/components/basic/Checkbox/Checkbox.stories.tsx

@@ -19,7 +19,6 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-
 import { Checkbox as Component } from '.'
 
 export default {

src/components/basic/Chip/DraggableChip.stories.tsx

@@ -19,7 +19,6 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-
 import { DraggableChip as Component } from './DraggableChip'
 
 export default {

src/components/basic/Chip/DraggableChip.tsx

@@ -18,8 +18,8 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { Box, type BoxProps, useTheme } from '@mui/material'
 import OpenWithIcon from '@mui/icons-material/OpenWith'
+import { Box, type BoxProps, useTheme } from '@mui/material'
 
 interface DraggableChipProps extends BoxProps {
   isSelected?: boolean

src/components/basic/Chip/TransitionChip.tsx

@@ -18,9 +18,9 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import MuiChip, { type ChipProps } from '@mui/material/Chip'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import HighlightOffIcon from '@mui/icons-material/HighlightOff'
+import MuiChip, { type ChipProps } from '@mui/material/Chip'
 import { useState } from 'react'
 import { theme } from '../../../theme'
 

src/components/basic/Chip/index.tsx

@@ -18,12 +18,12 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import MuiChip, { type ChipProps } from '@mui/material/Chip'
+import AutorenewIcon from '@mui/icons-material/Autorenew'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import HighlightOffIcon from '@mui/icons-material/HighlightOff'
-import { theme } from '../../../theme'
-import AutorenewIcon from '@mui/icons-material/Autorenew'
+import MuiChip, { type ChipProps } from '@mui/material/Chip'
 import React from 'react'
+import { theme } from '../../../theme'
 
 interface ChipCustomProps extends ChipProps {
   type?: 'decline' | 'confirm' | 'plain' | 'delete' | 'progress'

src/components/basic/CircularProgress/circularProgress.stories.tsx

@@ -19,7 +19,6 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-
 import { CircularProgress as Component } from '.'
 
 export default {

src/components/basic/CustomAccordion/CustomAccordion.stories.tsx

@@ -18,13 +18,13 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined'
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
 import { Box, Divider, Typography } from '@mui/material'
 import { type StoryFn } from '@storybook/react'
-import { CustomAccordion as Component } from '.'
 import { Table } from '../StaticTable/StaticTable.stories'
 import { type CustomAccordionProps } from './Item'
-import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined'
-import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
+import { CustomAccordion as Component } from '.'
 
 export default {
   title: 'CustomAccordion',

src/components/basic/CustomAccordion/Item.tsx

@@ -18,12 +18,12 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import React from 'react'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { AccordionActions, Box, Button, Typography } from '@mui/material'
 import Accordion, { type AccordionProps } from '@mui/material/Accordion'
-import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
-import { AccordionActions, Box, Button, Typography } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import React from 'react'
 
 export interface CustomAccordionProps extends AccordionProps {
   expanded: boolean | undefined

src/components/basic/Datepicker/Datepicker.stories.tsx

@@ -18,9 +18,8 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { type StoryFn } from '@storybook/react'
 import { Box } from '@mui/material'
-
+import { type StoryFn } from '@storybook/react'
 import { Datepicker as Component, type DateType } from '.'
 
 export default {

src/components/basic/Datepicker/index.tsx

@@ -18,16 +18,16 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useEffect, useState } from 'react'
 import { Box, Button } from '@mui/material'
 import { type TextFieldProps } from '@mui/material/TextField'
+import { type PickersDayProps } from '@mui/x-date-pickers'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DatePicker } from '@mui/x-date-pickers/DatePicker'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { de } from 'date-fns/locale/de'
 import { enUS } from 'date-fns/locale/en-US'
 import uniqueId from 'lodash/uniqueId'
-import { type PickersDayProps } from '@mui/x-date-pickers'
+import { useEffect, useState } from 'react'
 
 export type DateType = Date | null
 export interface DatepickerProps extends Omit<TextFieldProps, 'variant'> {

src/components/basic/Dialog/Dialog.stories.tsx

@@ -19,12 +19,11 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-
-import { Dialog as Component } from '.'
 import { Button } from '../Button'
 import { DialogActions } from './DialogActions'
 import { DialogContent } from './DialogContent'
 import { DialogHeader } from './DialogHeader'
+import { Dialog as Component } from '.'
 
 export default {
   title: 'Modal',

src/components/basic/Dialog/DialogActions.stories.tsx

@@ -19,9 +19,8 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-
-import { DialogActions as Component } from './DialogActions'
 import { Button } from '../Button'
+import { DialogActions as Component } from './DialogActions'
 
 export default {
   title: 'Modal',

src/components/basic/Dialog/DialogHeader.stories.tsx

@@ -19,7 +19,6 @@
  ********************************************************************************/
 
 import { type StoryFn } from '@storybook/react'
-
 import { DialogHeader as Component } from './DialogHeader'
 
 export default {

src/components/basic/Dialog/DialogHeader.tsx

@@ -18,13 +18,13 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import React from 'react'
+import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'
+import CloseIcon from '@mui/icons-material/Close'
 import { Box, useTheme } from '@mui/material'
 import MuiDialogTitle from '@mui/material/DialogTitle'
-import { Typography } from '../Typography'
+import React from 'react'
 import { IconButton } from '../IconButton'
-import CloseIcon from '@mui/icons-material/Close'
-import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'
+import { Typography } from '../Typography'
 import { CONTENT_SPACING_RIGHT_LEFT } from './index'
 
 export interface DialogHeaderProps {

src/components/basic/DropdownMenu/DropdownMenu.stories.tsx

@@ -22,7 +22,6 @@ import EditIcon from '@mui/icons-material/Edit'
 import FileCopyIcon from '@mui/icons-material/FileCopy'
 import MenuItem from '@mui/material/MenuItem'
 import { type StoryFn } from '@storybook/react'
-
 import { DropdownMenu as Component } from '.'
 
 export default {