[Studio] improvements

Author: dpfaffenbauer

docs/03_Development/14_Studio/01_Extending_Shipping_Rules.md

@@ -267,7 +267,7 @@ class VolumeConditionChecker implements ShippingConditionCheckerInterface
 ## Best Practices
 
 1. **Prefer PHP FormTypes**: Use the schema-driven approach for all new conditions/actions
-2. **Use appropriate Symfony form types**: `ChoiceType` for selects, `NumberType` for numbers, `AutocompleteType` for Pimcore relations
+2. **Use appropriate Symfony form types**: `ChoiceType` for selects, `NumberType` for numbers, `PimcoreRelationType` for Pimcore relations
 3. **Use FormTypeExtensions**: To add cross-bundle fields (e.g., CoreBundle adding stores/currencies to other bundles' forms)
 4. **Only write React for truly special UIs**: Recursive nesting, drag-and-drop, real-time validation that can't be server-driven
 5. **Test with the schema endpoint**: `GET /pimcore-studio/api/coreshop-studio-form/schema/{blockPrefix}` to verify your form generates correctly

docs/03_Development/14_Studio/02_Base_Infrastructure/04_StudioFormBundle.md

@@ -166,10 +166,10 @@ import { PimcoreRelationWidget } from './PimcoreRelationWidget'
 
 const registry = container.get<WidgetRegistry>(widgetRegistryServiceId)
 
-registry.register('coreshop_autocomplete', (field) => ({
+registry.register('coreshop_pimcore_relation', (field) => ({
     component: PimcoreRelationWidget,
     props: {
-        autocompleteClass: field.extra?.autocomplete_class,
+        relationClass: field.extra?.relation_class,
         multiple: field.extra?.multiple ?? false,
     },
 }))

docs/03_Development/14_Studio/02_Base_Infrastructure/05_StudioFormBundle_Examples.md

@@ -309,9 +309,9 @@ export const CategoryForm: React.FC<{
 
 ## Category 2: Special Field Types
 
-### Example 4 — Pimcore Relations (AutocompleteType)
+### Example 4 — Pimcore Relations (PimcoreRelationType)
 
-Use `AutocompleteType` to create fields that reference Pimcore Data Objects. The widget shows an autocomplete search and renders as a relation/tag widget.
+Use `PimcoreRelationType` to create fields that reference Pimcore Data Objects. The widget renders Pimcore's native ManyToOneRelation / ManyToManyRelation picker.
 
 **PHP — FormType:**
 
@@ -320,7 +320,7 @@ Use `AutocompleteType` to create fields that reference Pimcore Data Objects. The
 
 namespace App\Form\Type;
 
-use CoreShop\Bundle\StudioFormBundle\Form\Type\AutocompleteType;
+use CoreShop\Bundle\StudioFormBundle\Form\Type\PimcoreRelationType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 use Symfony\Component\Form\FormBuilderInterface;
@@ -331,10 +331,10 @@ final class FeaturedCategoriesConfigurationType extends AbstractType
     {
         $builder
             // Multiple Pimcore object relations
-            ->add('categories', AutocompleteType::class, [
+            ->add('categories', PimcoreRelationType::class, [
                 'label' => 'app_condition_categories',
-                'autocomplete_class' => 'CoreShopCategory',  // Pimcore class name
-                'multiple' => true,                           // Allow multiple selections
+                'relation_class' => 'CoreShopCategory',  // Pimcore class name
+                'multiple' => true,                       // Allow multiple selections
             ])
             ->add('recursive', CheckboxType::class, [
                 'label' => 'app_condition_recursive',
@@ -349,17 +349,17 @@ final class FeaturedCategoriesConfigurationType extends AbstractType
 }
 ```
 
-The `autocomplete_class` option is exposed through the schema as `extra.autocomplete_class`. The CoreBundle registers a custom widget for the `coreshop_autocomplete` block prefix that renders a `PimcoreRelationWidget`:
+The `relation_class` option is exposed through the schema as `extra.relation_class`. The CoreBundle registers a custom widget for the `coreshop_pimcore_relation` block prefix that renders a `PimcoreRelationWidget`:
 
 ```typescript
 // Already registered by CoreBundle — you don't need to do this yourself.
 // Shown here for understanding:
 const registry = container.get<WidgetRegistry>(widgetRegistryServiceId)
 
-registry.register('coreshop_autocomplete', (field) => ({
+registry.register('coreshop_pimcore_relation', (field) => ({
   component: PimcoreRelationWidget,
   props: {
-    autocompleteClass: field.extra?.autocomplete_class,
+    relationClass: field.extra?.relation_class,
     multiple: field.extra?.multiple ?? false,
   },
 }))
@@ -1148,7 +1148,7 @@ This is especially impactful when a rule has many conditions/actions expanded si
 | Simple entity form | `AbstractResourceType` + `coreshop.studio_form` tag | `<SchemaForm blockPrefix="..." />` |
 | Add choices | `ChoiceType` or entity `ChoiceType` | Automatic |
 | Add translations | `ResourceTranslationsType` | Pass `currentLocale` + `locales` |
-| Add Pimcore relations | `AutocompleteType` | Automatic (widget registered) |
+| Add Pimcore relations | `PimcoreRelationType` | Automatic (widget registered) |
 | Add dynamic lists | `CollectionType` with `allow_add`/`allow_delete` | Automatic |
 | Group fields in sections | `FormSchemaEnricherInterface` + `SectionSchema` | Automatic |
 | Group fields in tabs | `FormSchemaEnricherInterface` + `TabSchema` | Automatic |

docs/03_Development/14_Studio/04_ProductBundle/01_Product_Price_Rules.md

@@ -322,7 +322,7 @@ Note: There are no `conditions/` or `actions/` subdirectories — all condition/
 ## Best Practices
 
 1. **Prefer PHP FormTypes**: Use the schema-driven approach for all new conditions/actions
-2. **Use appropriate Symfony form types**: `ChoiceType` for selects, `NumberType` for numbers, `AutocompleteType` for Pimcore relations
+2. **Use appropriate Symfony form types**: `ChoiceType` for selects, `NumberType` for numbers, `PimcoreRelationType` for Pimcore relations
 3. **Test with both rule types**: Ensure your extension works for both Product Price Rules and Product Specific Price Rules
 4. **Only write React for truly special UIs**: Recursive nesting, drag-and-drop, etc.
 5. **Test with the schema endpoint**: `GET /pimcore-studio/api/coreshop-studio-form/schema/{blockPrefix}` to verify your form generates correctly

src/CoreShop/Bundle/AddressBundle/Resources/assets/pimcore-studio/package.json

@@ -13,15 +13,15 @@
   "license": "CCL",
   "private": true,
   "dependencies": {
-    "@coreshop/resource": "*",
-    "@coreshop/studio-form": "*",
     "@pimcore/studio-ui-bundle": "1.0.0-canary.20251119-143005-1b35b01",
     "@reduxjs/toolkit": "^2.0.1",
     "antd": "^5.12.0",
     "immer": "^10.1.1",
     "react": "18.3.x",
     "react-dom": "18.3.x",
     "react-redux": "^9.0.4",
-    "zustand": "^5.0.7"
+    "zustand": "^5.0.7",
+    "@coreshop/resource": "file:../../../../ResourceBundle/Resources/assets/pimcore-studio",
+    "@coreshop/studio-form": "*"
   }
 }

src/CoreShop/Bundle/AddressBundle/Resources/assets/pimcore-studio/src/modules/address-identifiers/api.ts

@@ -1,6 +1,6 @@
 import { EntityApi } from '@coreshop/resource/src/entities/api'
 
-export interface AddressIdentifierDetail {
+export interface AddressIdentifierDetail extends Record<string, any> {
   id: number
   name: string
   active: boolean

src/CoreShop/Bundle/AddressBundle/Resources/assets/pimcore-studio/src/modules/countries/CountryForm.tsx

@@ -13,34 +13,15 @@
  */
 
 import React from 'react'
-import { SchemaForm } from '@coreshop/studio-form/src/schema-adapter'
+import { SchemaForm, type SchemaFormProps } from '@coreshop/studio-form/src/schema-adapter'
 import type { CountryDetail } from './api'
 
-export interface CountryFormProps {
-  data?: CountryDetail
-  onChange: (draft: Partial<CountryDetail>) => void
-  currentLocale?: string
-  locales?: string[]
-}
-
-/**
- * Country Form Component
- *
- * Uses SchemaForm pattern for composable, extensible form configuration.
- * Base form is defined in AddressBundle, extensions added by CoreBundle and others.
- */
-export const CountryForm: React.FC<CountryFormProps> = ({
-  data,
-  onChange,
-  currentLocale,
-}) => {
+export const CountryForm: React.FC<SchemaFormProps<CountryDetail>> = (props) => {
   return (
     <div style={{ padding: 12 }}>
       <SchemaForm<CountryDetail>
+        {...props}
         blockPrefix="coreshop_country"
-        data={data}
-        onChange={onChange}
-        currentLocale={currentLocale}
       />
     </div>
   )

src/CoreShop/Bundle/AddressBundle/Resources/assets/pimcore-studio/src/modules/countries/api.ts

@@ -1,6 +1,6 @@
 import { EntityApi } from '@coreshop/resource/src/entities'
 
-export interface CountryDetail {
+export interface CountryDetail extends Record<string, any> {
   id: number
   name: string
   active: boolean

src/CoreShop/Bundle/AddressBundle/Resources/assets/pimcore-studio/src/modules/states/StateForm.tsx

@@ -13,34 +13,15 @@
  */
 
 import React from 'react'
-import { SchemaForm } from '@coreshop/studio-form/src/schema-adapter'
+import { SchemaForm, type SchemaFormProps } from '@coreshop/studio-form/src/schema-adapter'
 import type { StateDetail } from './api'
 
-export interface StateFormProps {
-  data?: StateDetail
-  onChange: (draft: Partial<StateDetail>) => void
-  currentLocale?: string
-  locales?: string[]
-}
-
-/**
- * State Form Component
- *
- * Uses SchemaForm pattern for composable, extensible form configuration.
- * Base form is defined in AddressBundle, extensions can be added by other bundles.
- */
-export const StateForm: React.FC<StateFormProps> = ({
-  data,
-  onChange,
-  currentLocale,
-}) => {
+export const StateForm: React.FC<SchemaFormProps<StateDetail>> = (props) => {
   return (
     <div style={{ padding: 12 }}>
       <SchemaForm<StateDetail>
+        {...props}
         blockPrefix="coreshop_state"
-        data={data}
-        onChange={onChange}
-        currentLocale={currentLocale}
       />
     </div>
   )

src/CoreShop/Bundle/AddressBundle/Resources/assets/pimcore-studio/src/modules/states/StateManager.tsx

@@ -38,14 +38,7 @@ export const StateManager: React.FC = () => {
         return null
       }}
       applyGroup={(data, groupId) => ({ ...data, country: groupId ?? undefined } as StateDetail)}
-      buildSavePayload={(data) => ({
-        id: data.id,
-        name: data.name,
-        active: data.active,
-        isoCode: data.isoCode,
-        country: data.country,
-        translations: data.translations
-      })}
+      buildSavePayload={(data) => data}
       onAdd={async (groupId?: number) => await new Promise<number>((resolve) => {
         modal.input({
           title: t('coreshop_state_add', { defaultValue: 'Add State' }),