Add additional spacing components (#540)

* Add additional spacing components

* Fix pipeline

* Fix typo

* Apply eslint-fixer changes

* Automatic frontend build

---------

Co-authored-by: vin0401 <[email protected]>

assets/js/src/core/__stories__/spacing/overview.mdx

@@ -0,0 +1,13 @@
+import { SpacingOverview } from './spacing-overview.tsx';
+import {Meta, Title, Subtitle, Description} from '@storybook/blocks';
+
+<Meta title="Components/Layout/Spacing/01 Overview" />
+
+# Available spacings
+
+To create an overall consistent layout, we use a set of predefined spacings.  
+It's recommended to use these spacings to ensure a consistent look and feel across the application.  
+So always prefer the different string values from the list below over using custom numeric values.
+
+<SpacingOverview />
+

assets/js/src/core/__stories__/spacing/spacing-overview.tsx

@@ -0,0 +1,48 @@
+/**
+* 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 { theme } from 'antd'
+import React from 'react'
+
+const { useToken } = theme
+
+const sizes = ['none', 'mini', 'extra-small', 'small', 'normal', 'medium', 'large', 'extra-large', 'maxi']
+
+export const SpacingOverview = (): React.JSX.Element => {
+  const { token } = useToken()
+
+  const sizeTokenMap = {
+    none: 0,
+    mini: token.sizeXXS,
+    'extra-small': token.sizeXS,
+    small: token.sizeSM,
+    normal: token.size,
+    medium: token.sizeMD,
+    large: token.sizeLG,
+    'extra-large': token.sizeXL,
+    maxi: token.sizeXXL
+  }
+
+  return (
+    <>
+      <table>
+        {sizes.map((size) => (
+          <tr key={ size }>
+            <td>{size} ({sizeTokenMap[size]}px)</td>
+            <td style={ { width: 500 } }><div style={ { width: '100%', height: sizeTokenMap[size], backgroundColor: token.colorPrimary } } /></td>
+          </tr>
+        ))}
+      </table>
+    </>
+  )
+}

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

@@ -0,0 +1,84 @@
+/**
+* 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 { Compact } from './compact'
+import React from 'react'
+import { Button } from '../button/button'
+import { IconButton } from '../icon-button/icon-button'
+import { Input } from 'antd'
+import { IconTextButton } from '../icon-text-button/icon-text-button'
+
+const config: Meta = {
+  title: 'Components/Layout/Spacing/Compact',
+  component: Compact,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+}
+
+export default config
+
+export const _default = {
+  args: {
+    children: <>
+      <Button>Button 1</Button>
+      <Button>Button 2</Button>
+      <IconButton
+        icon='trash'
+        type='primary'
+      />
+    </>
+  }
+}
+
+export const Horizontal = {
+  args: {
+    ..._default.args,
+    direction: 'horizontal'
+  }
+}
+
+export const Vertical = {
+  args: {
+    ..._default.args,
+    direction: 'vertical'
+  }
+}
+
+export const WithInputComponents = {
+  args: {
+    children: <>
+      <Input placeholder='Input 1' />
+      <IconButton
+        icon='group'
+        type='primary'
+      />
+    </>,
+    size: 10
+  }
+}
+
+export const WithInputComponents2 = {
+  args: {
+    children: <>
+      <Input placeholder='Input 1' />
+      <IconTextButton
+        icon='group'
+        type='primary'
+      >Choose</IconTextButton>
+    </>,
+    size: 10
+  }
+}

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

@@ -0,0 +1,25 @@
+/**
+* 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 { Space } from 'antd'
+import { type SpaceCompactProps } from 'antd/es/space/Compact'
+import React from 'react'
+
+interface CompactProps extends SpaceCompactProps {
+}
+
+export const Compact = (props: CompactProps): React.JSX.Element => {
+  return (
+    <Space.Compact { ...props } />
+  )
+}

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

@@ -0,0 +1,40 @@
+/**
+* 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 { Split } from './split'
+import React from 'react'
+import { Button } from '../button/button'
+
+const config: Meta = {
+  title: 'Components/Layout/Spacing/Split',
+  component: Split,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+}
+
+export default config
+
+export const _default = {
+  args: {
+    children: (
+      <>
+        <Button>Button 1</Button>
+        <div>Content 2</div>
+        <div>Content 3</div>
+      </>
+    )
+  }
+}

assets/js/src/core/components/split/split.styles.ts

@@ -0,0 +1,25 @@
+/**
+* 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 { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    split: css`
+      .ant-divider {
+        height: 24px; 
+        margin-inline: 0;
+      }
+    `
+  }
+})

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

@@ -0,0 +1,31 @@
+/**
+* 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 React from 'react'
+import { Space, type SpaceProps } from '../space/space'
+import { Divider } from 'antd'
+import { useStyles } from '@Pimcore/components/split/split.styles'
+
+export interface SplitProps extends Omit<SpaceProps, 'split'> {}
+
+export const Split = (props: SplitProps): React.JSX.Element => {
+  const { styles } = useStyles()
+
+  return (
+    <Space
+      className={ styles.split }
+      split={ <Divider type="vertical" /> }
+      { ...props }
+    />
+  )
+}

public/build/3bc300c5-8935-45a5-bb94-16d9a69272ed/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/3bc300c5-8935-45a5-bb94-16d9a69272ed/main.js"
+      ]
+    }
+  }
+}

public/build/3bc300c5-8935-45a5-bb94-16d9a69272ed/main.js.LICENSE.txt

@@ -0,0 +1,16 @@
+/*!
+ * 
+ *       /**
+ *        * 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
+ *        * /
+ *
+ */

public/build/3bc300c5-8935-45a5-bb94-16d9a69272ed/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/3bc300c5-8935-45a5-bb94-16d9a69272ed/main.js": "/bundles/pimcorestudioui/build/3bc300c5-8935-45a5-bb94-16d9a69272ed/main.js"
+}

public/build/94f093f5-177b-4acc-9e46-2cd92c176978/105.js.LICENSE.txt

@@ -0,0 +1,16 @@
+/*!
+ * 
+ *       /**
+ *        * 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
+ *        * /
+ *
+ */