Add rule builder SDK (#2929)

Author: markus-moser

assets/js/src/core/components/code-editor/code-editor.tsx

@@ -13,7 +13,7 @@ import ReactCodeMirror, { type ReactCodeMirrorProps } from '@uiw/react-codemirro
 import { getPresetExtensions } from '@Pimcore/components/code-editor/helpers'
 import { useStyles } from './code-editor.styles'
 
-export type CodeEditorPreset = 'text' | 'yaml'
+export type CodeEditorPreset = 'text' | 'yaml' | 'html'
 
 export interface CodeEditorProps extends Omit<ReactCodeMirrorProps, 'extensions' | 'value' | 'onChange'> {
   preset?: CodeEditorPreset

assets/js/src/core/components/code-editor/helpers.ts

@@ -14,6 +14,7 @@ import yaml from 'js-yaml'
 import { isEmpty } from 'lodash'
 import type { Extension } from '@codemirror/state'
 import { yaml as codeMirrorYaml } from '@codemirror/lang-yaml'
+import { html as codeMirrorHtml } from '@codemirror/lang-html'
 import { type CodeEditorPreset } from '@Pimcore/components/code-editor/code-editor'
 
 const yamlLinter = linter((view: EditorView): Diagnostic[] => {
@@ -51,6 +52,8 @@ export const getPresetExtensions = (preset: CodeEditorPreset): Extension[] => {
   switch (preset) {
     case 'yaml':
       return [codeMirrorYaml(), yamlLinter, lintGutter()]
+    case 'html':
+      return [codeMirrorHtml()]
     case 'text':
     default:
       return []

assets/js/src/core/components/rule-condition/components/add-condition-button/add-condition-button.tsx

@@ -0,0 +1,49 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import React from 'react'
+import { Dropdown } from 'antd'
+import { useTranslation } from 'react-i18next'
+import { IconTextButton } from '@Pimcore/components/icon-text-button/icon-text-button'
+import { useAddConditionMenuItems } from '../../hooks/use-add-condition-menu-items'
+
+interface AddConditionButtonProps {
+  afterIndex: number
+  disabled?: boolean
+  children?: React.ReactNode
+}
+
+export const AddConditionButton = ({
+  afterIndex,
+  disabled = false,
+  children
+}: AddConditionButtonProps): React.JSX.Element => {
+  const { t } = useTranslation()
+  const menuItems = useAddConditionMenuItems(afterIndex)
+
+  const defaultButton = (
+    <IconTextButton
+      disabled={ disabled }
+      icon={ { value: 'plus-circle' } }
+    >
+      {t('rule-condition.add-condition')}
+    </IconTextButton>
+  )
+
+  return (
+    <Dropdown
+      disabled={ disabled }
+      menu={ { items: menuItems } }
+      trigger={ ['click'] }
+    >
+      {children ?? defaultButton}
+    </Dropdown>
+  )
+}

assets/js/src/core/components/rule-condition/components/bracket-button/bracket-button.styles.ts

@@ -0,0 +1,59 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ token, css }) => ({
+  bracketButton: css`
+    min-width: 20px;
+    height: auto;
+    padding: 0;
+    margin: 0 ${token.marginXXS}px;
+    font-size: 48px;
+    font-weight: 200 !important;
+    line-height: 1;
+    border: none;
+    background-color: transparent;
+    color: ${token.colorTextDisabled};
+    cursor: pointer;
+    transition: all ${token.motionDurationMid};
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover:not(:disabled) {
+      color: ${token.colorPrimary};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+  `,
+
+  bracketButtonActive: css`
+    color: ${token.colorPrimary};
+    font-weight: bold;
+
+    &:hover:not(:disabled) {
+      color: ${token.colorPrimaryHover};
+    }
+  `,
+
+  bracketButtonError: css`
+    color: ${token.colorError};
+    font-weight: bold;
+
+    &:hover:not(:disabled) {
+      color: ${token.colorErrorHover};
+    }
+  `
+}))

assets/js/src/core/components/rule-condition/components/bracket-button/bracket-button.tsx

@@ -0,0 +1,54 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useStyles } from './bracket-button.styles'
+
+interface BracketButtonProps {
+  side: 'left' | 'right'
+  active: boolean
+  onToggle: () => void
+  disabled?: boolean
+  hasError?: boolean
+}
+
+export const BracketButton = ({
+  side,
+  active,
+  onToggle,
+  disabled = false,
+  hasError = false
+}: BracketButtonProps): React.JSX.Element => {
+  const { t } = useTranslation()
+  const { styles, cx } = useStyles()
+
+  const label = t(side === 'left' ? 'rule-condition.bracket.toggle-left' : 'rule-condition.bracket.toggle-right')
+  const icon = side === 'left' ? '(' : ')'
+
+  return (
+    <button
+      aria-label={ label }
+      aria-pressed={ active }
+      className={ cx(
+        styles.bracketButton,
+        {
+          [styles.bracketButtonActive]: active && !hasError,
+          [styles.bracketButtonError]: hasError
+        }
+      ) }
+      disabled={ disabled }
+      onClick={ onToggle }
+      type="button"
+    >
+      {icon}
+    </button>
+  )
+}

assets/js/src/core/components/rule-condition/components/condition-item/condition-item.styles.ts

@@ -0,0 +1,90 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { createStyles } from 'antd-style'
+import { CONDITION_ANIMATION_DURATION } from '../../rule-condition.constants'
+
+export const useStyles = createStyles(({ token, css }) => {
+  const borderPseudoElements = css`
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+    }
+    
+    &::before {
+      left: 0;
+    }
+    
+    &::after {
+      right: 0;
+    }
+  `
+
+  return {
+    conditionItemWrapper: css`
+      position: relative;
+      padding-left: ${token.paddingXS}px;
+      padding-right: ${token.paddingXS}px;
+      ${borderPseudoElements}
+    `,
+
+    conditionItemWrapperNew: css`
+      animation: slideInFade ${CONDITION_ANIMATION_DURATION}ms ease-in-out;
+      
+      @keyframes slideInFade {
+        0% {
+          opacity: 0;
+          transform: translateY(-12px);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `,
+
+    borderLevel1: css`
+      ${borderPseudoElements}
+      &::before,
+      &::after {
+        background-color: ${token.colorPrimaryBorder};
+      }
+    `,
+
+    borderLevel2: css`
+      ${borderPseudoElements}
+      &::before,
+      &::after {
+        background-color: ${token.colorAccent};
+      }
+    `,
+
+    borderLevel3: css`
+      ${borderPseudoElements}
+      &::before,
+      &::after {
+        background-color: ${token.colorAccentSecondary};
+      }
+    `,
+
+    conditionBoxWrapper: css`
+      flex: 1;
+      min-width: 0;
+    `,
+
+    conditionFormContainer: css`
+      width: 100%;
+    `
+  }
+})