fix: linting error and warning in storybook

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "ignorePatterns": ["*.test.tsx", "*.stories.tsx", "*.config.ts"],
+  "ignorePatterns": ["*.test.tsx", "*.config.ts"],
   "env": {
     "browser": true,
     "es2021": true

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.31
+
+- Fix linting error and warnings
+
 ## 3.0.30
 
 - updated the default value logic of SelectList component to handle onChange function

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.30",
+  "version": "3.0.31",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/Alert/Alert.stories.tsx

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 
 import { Alert as Component } from '.'
 
@@ -30,9 +30,10 @@ export default {
     children: {},
   },
 }
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args}>{args.children}</Component>
-)
+
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args}>{args.children}</Component>
 
 export const Alert = Template.bind({})
 Alert.args = {

src/components/basic/BaseImage/BaseImage.stories.tsx

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 
 import { BaseImage as Component } from '.'
 
@@ -28,9 +28,9 @@ export default {
   tags: ['autodocs'],
 }
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args} />
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args} />
 
 export const BaseImage = Template.bind({})
 BaseImage.args = {

src/components/basic/Breadcrumb/Breadcrumb.stories.tsx

@@ -19,7 +19,7 @@
  ********************************************************************************/
 
 import { Link, Typography } from '@mui/material'
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 
 import { Breadcrumb as Component } from '.'
 
@@ -36,7 +36,9 @@ const breadcrumbs = [
     key="1"
     color="inherit"
     sx={{ cursor: 'pointer' }}
-    onClick={() => console.log('navigate to home')}
+    onClick={() => {
+      console.log('navigate to home')
+    }}
   >
     Home
   </Link>,
@@ -45,7 +47,9 @@ const breadcrumbs = [
     key="2"
     color="inherit"
     sx={{ cursor: 'pointer' }}
-    onClick={() => console.log('navigate to Breackcrumb 1')}
+    onClick={() => {
+      console.log('navigate to Breackcrumb 1')
+    }}
   >
     Breadcrumb 1
   </Link>,
@@ -54,14 +58,16 @@ const breadcrumbs = [
   </Typography>,
 ]
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args} />
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args} />
 
 export const Breadcrumb = Template.bind({})
 Breadcrumb.args = {
   backButtonLabel: 'Back',
   backButtonVariant: 'outlined',
-  onBackButtonClick: () => console.log('Back button clicked!'),
-  breadcrumbs: breadcrumbs,
+  onBackButtonClick: () => {
+    console.log('Back button clicked!')
+  },
+  breadcrumbs,
 }

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import type { ComponentStory } from '@storybook/react'
 
 import { BackButton as Component } from './BackButton'
 import button from '../../../../docs/storybook/button.md?raw'
@@ -39,9 +39,9 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args} />
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args} />
 
 export const BackButton = Template.bind({})
 BackButton.args = {

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 
 import { LoadMoreButton as Component } from './LoadMoreButton'
 
@@ -29,9 +29,9 @@ export default {
   argTypes: {},
 }
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args} />
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args} />
 
 export const LoadMoreButton = Template.bind({})
 LoadMoreButton.args = {

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 
 import { ScrollToTopButton as Component } from './ScrollToTopButton'
 
@@ -33,9 +33,9 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args} />
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args} />
 
 export const ScrollToTopButton = Template.bind({})
 ScrollToTopButton.args = {

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 import { Carousel as Component } from '.'
 import { theme } from '../../../theme'
 import uniqueId from 'lodash/uniqueId'
@@ -40,7 +40,9 @@ const itemsArray = [
   'Element 5',
 ]
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => (
   <Component {...args}>
     {itemsArray.map((item: string) => {
       return (

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 import { CarouselBox as Component } from './CarouselBox'
 import { theme } from '../../../theme'
 import uniqueId from 'lodash/uniqueId'
@@ -40,7 +40,9 @@ const itemsArray = [
   'Element 5',
 ]
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => (
   <Component {...args}>
     {itemsArray.map((item: string) => {
       return (

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 
 import { CategoryDivider as Component } from '.'
 
@@ -29,9 +29,9 @@ export default {
   argTypes: {},
 }
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args} />
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args} />
 
 export const CategoryDivider = Template.bind({})
 CategoryDivider.args = {

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 
 import { Checkbox as Component } from '.'
 
@@ -33,9 +33,9 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args} />
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args} />
 
 export const Checkbox = Template.bind({})
 Checkbox.args = {

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 
 import { DraggableChip as Component } from './DraggableChip'
 
@@ -33,8 +33,8 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args}>{args.children}</Component>
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args}>{args.children}</Component>
 
 export const DraggableChip = Template.bind({})

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 import { Chip as Component } from '.'
 
 export default {
@@ -29,17 +29,21 @@ export default {
   parameters: {},
 }
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args} />
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args} />
 
 export const Chip = Template.bind({})
 Chip.args = {
   color: 'secondary',
   variant: 'filled',
   label: 'decline',
   type: 'decline',
-  onClick: () => console.log('Decline clicked'),
+  onClick: () => {
+    console.log('Decline clicked')
+  },
   withIcon: true,
-  handleDelete: () => console.log('onDelete clicked'),
+  handleDelete: () => {
+    console.log('onDelete clicked')
+  },
 }

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

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { ComponentStory } from '@storybook/react'
+import { type ComponentStory } from '@storybook/react'
 
 import { CircularProgress as Component } from '.'
 
@@ -28,8 +28,8 @@ export default {
   tags: ['autodocs'],
 }
 
-const Template: ComponentStory<typeof Component> = (args: any) => (
-  <Component {...args} />
-)
+const Template: ComponentStory<typeof Component> = (
+  args: React.ComponentProps<typeof Component>
+) => <Component {...args} />
 
 export const Loading = Template.bind({})