From 90dcd818a04829594a5fd1e67552fb085019b588 Mon Sep 17 00:00:00 2001 From: Valeriia Maltseva Date: Mon, 16 Dec 2024 18:01:41 +0100 Subject: [PATCH] updated the Skeleton component --- .../skeleton-avatar.stories.tsx | 39 +++++++++++++++++++ .../{ => skeleton-avatar}/skeleton-avatar.tsx | 4 +- .../skeleton-button.stories.tsx | 39 +++++++++++++++++++ .../{ => skeleton-button}/skeleton-button.tsx | 4 +- .../skeleton-input.stories.tsx} | 29 ++++++++++++-- .../{ => skeleton-input}/skeleton-input.tsx | 4 +- .../components/skeleton/skeleton.stories.tsx | 30 +++----------- .../src/core/components/skeleton/skeleton.tsx | 4 +- .../components/pagination/skeleton.tsx | 3 +- 9 files changed, 114 insertions(+), 42 deletions(-) create mode 100644 assets/js/src/core/components/skeleton/components/skeleton-avatar/skeleton-avatar.stories.tsx rename assets/js/src/core/components/skeleton/components/{ => skeleton-avatar}/skeleton-avatar.tsx (87%) create mode 100644 assets/js/src/core/components/skeleton/components/skeleton-button/skeleton-button.stories.tsx rename assets/js/src/core/components/skeleton/components/{ => skeleton-button}/skeleton-button.tsx (87%) rename assets/js/src/core/components/skeleton/{index.ts => components/skeleton-input/skeleton-input.stories.tsx} (51%) rename assets/js/src/core/components/skeleton/components/{ => skeleton-input}/skeleton-input.tsx (88%) diff --git a/assets/js/src/core/components/skeleton/components/skeleton-avatar/skeleton-avatar.stories.tsx b/assets/js/src/core/components/skeleton/components/skeleton-avatar/skeleton-avatar.stories.tsx new file mode 100644 index 000000000..5160ff5c5 --- /dev/null +++ b/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 diff --git a/assets/js/src/core/components/skeleton/components/skeleton-avatar.tsx b/assets/js/src/core/components/skeleton/components/skeleton-avatar/skeleton-avatar.tsx similarity index 87% rename from assets/js/src/core/components/skeleton/components/skeleton-avatar.tsx rename to assets/js/src/core/components/skeleton/components/skeleton-avatar/skeleton-avatar.tsx index 4357d2cb8..498dc9418 100644 --- a/assets/js/src/core/components/skeleton/components/skeleton-avatar.tsx +++ b/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 ( ) } - -export default SkeletonAvatar diff --git a/assets/js/src/core/components/skeleton/components/skeleton-button/skeleton-button.stories.tsx b/assets/js/src/core/components/skeleton/components/skeleton-button/skeleton-button.stories.tsx new file mode 100644 index 000000000..3990252e0 --- /dev/null +++ b/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 diff --git a/assets/js/src/core/components/skeleton/components/skeleton-button.tsx b/assets/js/src/core/components/skeleton/components/skeleton-button/skeleton-button.tsx similarity index 87% rename from assets/js/src/core/components/skeleton/components/skeleton-button.tsx rename to assets/js/src/core/components/skeleton/components/skeleton-button/skeleton-button.tsx index 735d52f43..61a9962aa 100644 --- a/assets/js/src/core/components/skeleton/components/skeleton-button.tsx +++ b/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 ( ) } - -export default SkeletonButton diff --git a/assets/js/src/core/components/skeleton/index.ts b/assets/js/src/core/components/skeleton/components/skeleton-input/skeleton-input.stories.tsx similarity index 51% rename from assets/js/src/core/components/skeleton/index.ts rename to assets/js/src/core/components/skeleton/components/skeleton-input/skeleton-input.stories.tsx index e0abe3838..904b09892 100644 --- a/assets/js/src/core/components/skeleton/index.ts +++ b/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 diff --git a/assets/js/src/core/components/skeleton/components/skeleton-input.tsx b/assets/js/src/core/components/skeleton/components/skeleton-input/skeleton-input.tsx similarity index 88% rename from assets/js/src/core/components/skeleton/components/skeleton-input.tsx rename to assets/js/src/core/components/skeleton/components/skeleton-input/skeleton-input.tsx index a77469a45..3e225469b 100644 --- a/assets/js/src/core/components/skeleton/components/skeleton-input.tsx +++ b/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 ( ) } - -export default SkeletonInput diff --git a/assets/js/src/core/components/skeleton/skeleton.stories.tsx b/assets/js/src/core/components/skeleton/skeleton.stories.tsx index 066cae9c9..0a78bf2f5 100644 --- a/assets/js/src/core/components/skeleton/skeleton.stories.tsx +++ b/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 => ( - -) - -export const WithButton = (): JSX.Element => ( - -) - -export const WithInput = (): JSX.Element => ( - -) +export const Rounded = { + args: { + round: true + } +} export default config diff --git a/assets/js/src/core/components/skeleton/skeleton.tsx b/assets/js/src/core/components/skeleton/skeleton.tsx index b3a100036..6d561f225 100644 --- a/assets/js/src/core/components/skeleton/skeleton.tsx +++ b/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 ( ) } - -export default Skeleton diff --git a/assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/dependencies/components/pagination/skeleton.tsx b/assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/dependencies/components/pagination/skeleton.tsx index b1475012a..4ea23dac6 100644 --- a/assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/dependencies/components/pagination/skeleton.tsx +++ b/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 (
-