pimcore-studio-ui-react-components

React components in Pimcore Studio UI should use a folder-per-component layout, grouping the main tsx file, styles, and stories together. This enforces clear conventions and ensures consistency across projects by keeping related files organized.

CSS-in-JS for Pimcore Studio UI components should use a dedicated .styles.tsx file. This approach mandates separate styling files using the antd-style method, keeping component logic and styles decoupled for better maintainability.

Prop interfaces for TypeScript React components in Pimcore Studio UI require explicit TypeScript interfaces. This improves type safety and editor guidance by clearly defining expected props, ensuring robust typing across the application.

Use forwardRef and memoization patterns for React components when building complex elements requiring advanced render strategies. Outlining these patterns in Pimcore Studio UI ensures optimal performance and proper ref forwarding in intricate component hierarchies.

Pimcore Studio UI defines specific export conventions for composing sub-components under a single module. This ensures a unified folder-based structure and predictable import behavior across the codebase.

Existing Pimcore Studio UI components lack a unified structure because development often proceeds without standardized conventions. Applying a structured approach with explicit prop interfaces, forwardRef support, and separate styles files solves this inconsistency and ensures quality.