updated the Skeleton component

assets/js/src/core/components/skeleton/components/skeleton-avatar/skeleton-avatar.stories.tsx

@@ -0,0 +1,39 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { type Meta } from '@storybook/react'
+import { SkeletonAvatar } from './skeleton-avatar'
+
+const config: Meta = {
+  title: 'Components/General/Skeleton/SkeletonAvatar',
+  component: SkeletonAvatar,
+  args: {
+    active: true
+  }
+}
+
+export const _default = {}
+
+export const Large = {
+  args: {
+    size: 'large'
+  }
+}
+
+export const WithSquareShape = {
+  args: {
+    shape: 'square'
+  }
+}
+
+export default config

assets/js/src/core/components/skeleton/components/skeleton-avatar.tsx → assets/js/src/core/components/skeleton/components/skeleton-avatar/skeleton-avatar.tsx

@@ -17,10 +17,8 @@ import type { AvatarProps } from 'antd/es/skeleton/Avatar'
 
 export interface ISkeletonAvatarProps extends SkeletonProps, AvatarProps {}
 
-const SkeletonAvatar = (props: ISkeletonAvatarProps): JSX.Element => {
+export const SkeletonAvatar = (props: ISkeletonAvatarProps): JSX.Element => {
   return (
     <AntSkeleton.Avatar { ...props } />
   )
 }
-
-export default SkeletonAvatar

assets/js/src/core/components/skeleton/components/skeleton-button/skeleton-button.stories.tsx

@@ -0,0 +1,39 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { type Meta } from '@storybook/react'
+import { SkeletonButton } from './skeleton-button'
+
+const config: Meta = {
+  title: 'Components/General/Skeleton/SkeletonButton',
+  component: SkeletonButton,
+  args: {
+    active: true
+  }
+}
+
+export const _default = {}
+
+export const Round = {
+  args: {
+    shape: 'round'
+  }
+}
+
+export const Small = {
+  args: {
+    size: 'small'
+  }
+}
+
+export default config

assets/js/src/core/components/skeleton/components/skeleton-button.tsx → assets/js/src/core/components/skeleton/components/skeleton-button/skeleton-button.tsx

@@ -17,10 +17,8 @@ import type { SkeletonButtonProps } from 'antd/es/skeleton/Button'
 
 export interface ISkeletonButtonProps extends SkeletonProps, SkeletonButtonProps {}
 
-const SkeletonButton = (props: ISkeletonButtonProps): JSX.Element => {
+export const SkeletonButton = (props: ISkeletonButtonProps): JSX.Element => {
   return (
     <AntSkeleton.Button { ...props } />
   )
 }
-
-export default SkeletonButton

assets/js/src/core/components/skeleton/index.ts → assets/js/src/core/components/skeleton/components/skeleton-input/skeleton-input.stories.tsx

@@ -11,8 +11,29 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-export { default } from './skeleton'
+import { type Meta } from '@storybook/react'
+import { SkeletonInput } from './skeleton-input'
 
-export { default as SkeletonAvatar } from './components/skeleton-avatar'
-export { default as SkeletonButton } from './components/skeleton-button'
-export { default as SkeletonInput } from './components/skeleton-input'
+const config: Meta = {
+  title: 'Components/General/Skeleton/SkeletonInput',
+  component: SkeletonInput,
+  args: {
+    active: true
+  }
+}
+
+export const _default = {}
+
+export const Large = {
+  args: {
+    size: 'large'
+  }
+}
+
+export const Small = {
+  args: {
+    size: 'small'
+  }
+}
+
+export default config

assets/js/src/core/components/skeleton/components/skeleton-input.tsx → assets/js/src/core/components/skeleton/components/skeleton-input/skeleton-input.tsx

@@ -17,10 +17,8 @@ import type { SkeletonInputProps } from 'antd/es/skeleton/Input'
 
 export interface ISkeletonInputProps extends SkeletonProps, SkeletonInputProps {}
 
-const SkeletonInput = (props: ISkeletonInputProps): JSX.Element => {
+export const SkeletonInput = (props: ISkeletonInputProps): JSX.Element => {
   return (
     <AntSkeleton.Input { ...props } />
   )
 }
-
-export default SkeletonInput

assets/js/src/core/components/skeleton/skeleton.stories.tsx

@@ -11,41 +11,23 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import React from 'react'
 import { type Meta } from '@storybook/react'
-import Skeleton from './skeleton'
-import SkeletonAvatar from './components/skeleton-avatar'
-import SkeletonButton from './components/skeleton-button'
-import SkeletonInput from './components/skeleton-input'
+import { Skeleton } from './skeleton'
 
 const config: Meta = {
   title: 'Components/General/Skeleton',
   component: Skeleton,
   args: {
     active: true
-  },
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      }
-    }
   }
 }
 
 export const _default = {}
 
-export const WithAvatar = (): JSX.Element => (
-  <SkeletonAvatar />
-)
-
-export const WithButton = (): JSX.Element => (
-  <SkeletonButton />
-)
-
-export const WithInput = (): JSX.Element => (
-  <SkeletonInput />
-)
+export const Rounded = {
+  args: {
+    round: true
+  }
+}
 
 export default config

assets/js/src/core/components/skeleton/skeleton.tsx

@@ -16,10 +16,8 @@ import { Skeleton as AntSkeleton, type SkeletonProps } from 'antd'
 
 export interface ISkeletonProps extends SkeletonProps {}
 
-const Skeleton = (props: ISkeletonProps): JSX.Element => {
+export const Skeleton = (props: ISkeletonProps): JSX.Element => {
   return (
     <AntSkeleton { ...props } />
   )
 }
-
-export default Skeleton

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/dependencies/components/pagination/skeleton.tsx

@@ -14,14 +14,13 @@
 import React from 'react'
 import { Skeleton } from 'antd'
 import { useStyle } from './skeleton.styles'
-import { SkeletonInput } from '@Pimcore/components/skeleton'
 
 export const PaginationSkeleton = (): React.JSX.Element => {
   const { styles } = useStyle()
 
   return (
     <div className={ styles.skeleton }>
-      <SkeletonInput
+      <Skeleton.Input
         active
         size={ 'small' }
       />