Clean up storybook stories design and UX

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

@@ -9,12 +9,13 @@
  */
 
 import { type Meta } from '@storybook/react'
-import React from 'react'
+import React, { useState } from 'react'
 import { ButtonGroup } from './button-group'
 import { LanguageSelection } from '@Pimcore/components/language-selection/language-selection'
 import { Button } from '../button/button'
 import { IconButton } from '../icon-button/icon-button'
 import { IconTextButton } from '../icon-text-button/icon-text-button'
+import { ImageZoom } from '@Pimcore/components/image-zoom/image-zoom'
 
 const config: Meta = {
   title: 'Components/Controls/Buttons/ButtonGroup',
@@ -180,3 +181,22 @@ export const LanguageSelectionExample = {
     ]
   }
 }
+
+const ImageZoomWrapper = (): React.JSX.Element => {
+  const [zoom, setZoom] = useState<number>(100)
+  return (
+    <ButtonGroup
+      items={ [
+        <ImageZoom
+          key="zoom"
+          setZoom={ setZoom }
+          zoom={ zoom }
+        />
+      ] }
+    />
+  )
+}
+
+export const ImageZoomExample = {
+  render: () => <ImageZoomWrapper />
+}

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

@@ -393,86 +393,6 @@ export const InlineForm: Story = {
   }
 }
 
-// Horizontal form example
-const HorizontalFormExample = (): React.JSX.Element => {
-  const [form] = Form.useForm()
-
-  const onFinish = (values: any): void => {
-    console.log('Horizontal form submitted:', values)
-  }
-
-  return (
-    <Form
-      form={ form }
-      labelCol={ { span: 6 } }
-      layout="horizontal"
-      onFinish={ onFinish }
-      wrapperCol={ { span: 16 } }
-    >
-      <Form.Item
-        label="Username"
-        name="username"
-        rules={ [{ required: true, message: 'Please input your username!' }] }
-      >
-        <Input />
-      </Form.Item>
-
-      <Form.Item
-        label="Email"
-        name="email"
-        rules={ [
-          { required: true, message: 'Please input your email!' },
-          { type: 'email', message: 'Please enter a valid email!' }
-        ] }
-      >
-        <Input />
-      </Form.Item>
-
-      <Form.Item
-        label="Role"
-        name="role"
-      >
-        <Select
-          options={ [
-            { value: 'admin', label: 'Administrator' },
-            { value: 'editor', label: 'Editor' },
-            { value: 'viewer', label: 'Viewer' }
-          ] }
-          placeholder="Select role"
-        />
-      </Form.Item>
-
-      <Form.Item
-        label="Active"
-        name="active"
-        valuePropName="checked"
-      >
-        <Switch />
-      </Form.Item>
-
-      <Form.Item wrapperCol={ { offset: 6, span: 16 } }>
-        <Button
-          htmlType="submit"
-          type="primary"
-        >
-          Create User
-        </Button>
-      </Form.Item>
-    </Form>
-  )
-}
-
-export const HorizontalForm: Story = {
-  render: () => <HorizontalFormExample />,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Horizontal form layout with labels positioned to the left of form controls. Good for forms with consistent label widths.'
-      }
-    }
-  }
-}
-
 interface AllControlsFormData {
   // Text Inputs
   basicInput: string

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

@@ -24,11 +24,3 @@ const config: Meta = {
 export default config
 
 export const _default = {}
-
-export const WithPreview = {
-  args: {
-    preview: {
-      src: ''
-    }
-  }
-}

assets/js/src/core/components/modal/alert-modal/hooks/use-alert-modal.tsx

@@ -9,11 +9,11 @@
  */
 
 import { type ModalFuncProps } from 'antd'
-import type React from 'react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { isUndefined } from 'lodash'
 import { useStudioModal } from '@sdk/components'
+import { Icon } from '@Pimcore/components/icon/icon'
 
 type ConfigUpdate = ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps)
 
@@ -35,33 +35,39 @@ export const useAlertModal = (): UseAlertModalResponse => {
 
   return useMemo<UseAlertModalResponse>(
     () => ({
-      info: ({ title, content, ...rest }) => (
+      info: ({ title, content, icon, ...rest }) => (
         modal.info({
           title: !isUndefined(title) ? t(title) : t('info'),
           content,
+          icon: icon ?? <Icon value='info' />,
+          okText: t('alert-modal.ok-text'),
           ...rest
         })
       ),
-      error: ({ title, content, ...rest }) => {
-        return (
-          modal.error({
-            title: !isUndefined(title) ? t(title) : t('error'),
-            content,
-            ...rest
-          })
-        )
-      },
-      warn: ({ title, content, ...rest }) => (
+      error: ({ title, content, icon, ...rest }) => (
+        modal.error({
+          title: !isUndefined(title) ? t(title) : t('error'),
+          content,
+          icon: icon ?? <Icon value='close-filled' />,
+          okText: t('alert-modal.ok-text'),
+          ...rest
+        })
+      ),
+      warn: ({ title, content, icon, ...rest }) => (
         modal.warning({
           title: !isUndefined(title) ? t(title) : t('warning'),
           content,
+          icon: icon ?? <Icon value='alert' />,
+          okText: t('alert-modal.ok-text'),
           ...rest
         })
       ),
-      success: ({ title, content, ...rest }) => (
+      success: ({ title, content, icon, ...rest }) => (
         modal.success({
           title: !isUndefined(title) ? t(title) : t('success'),
           content,
+          icon: icon ?? <Icon value='checkmark' />,
+          okText: t('alert-modal.ok-text'),
           ...rest
         })
       )