feat(form-preview): add FormPreview component with initial props and translations#663
feat(form-preview): add FormPreview component with initial props and translations#663
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces static code examples in the Form documentation with a new dynamic FormPreview component and adds the required internationalization strings. The review feedback identifies several improvement opportunities, including translating a hardcoded label in the preview component, removing redundant CSS styles, and implementing a source formatter to ensure the preview's source code section correctly displays the form's children. Additionally, the heading levels for the API section in both the German and English documentation files should be adjusted to maintain structural consistency.
| return ( | ||
| <Preview<JSX.KolForm> | ||
| propertyComponents={{ | ||
| _requiredText: <KolInputText _label="Required text" />, |
There was a problem hiding this comment.
The label for the property editor is hardcoded in English. To maintain consistency with the rest of the component and support internationalization, this string should be translated using the translate function.
| layout={PreviewLayout.FULL_SIZE} | ||
| > | ||
| {(componentProps) => ( | ||
| <KolForm {...componentProps} className="block w-full" style={{ width: '100%' }}> |
There was a problem hiding this comment.
The style={{ width: '100%' }} attribute is redundant as the w-full class already handles this. Removing it simplifies the code.
| <KolForm {...componentProps} className="block w-full" style={{ width: '100%' }}> | |
| <KolForm {...componentProps} className="block w-full"> |
| <Preview<JSX.KolForm> | ||
| propertyComponents={{ | ||
| _requiredText: <KolInputText _label="Required text" />, | ||
| }} | ||
| initialProps={{ ...defaultProps, ...props.initialProps }} | ||
| componentName="KolForm" | ||
| visibleProperties={props.visibleProperties} | ||
| codeCollapsable={props.codeCollapsable} | ||
| codeCollapsed={props.codeCollapsed} | ||
| layout={PreviewLayout.FULL_SIZE} | ||
| > |
There was a problem hiding this comment.
The Preview component's automatic source code generation does not include the children of the component rendered in the preview. As a result, the 'Source Code' section in the documentation will only show the opening and closing tags of KolForm without its internal fields. To provide a complete example for users, consider implementing a sourceFormatter that includes the full form structure.
| <kol-input-text _label="Vorname"></kol-input-text> | ||
| <kol-input-text _label="Nachname"></kol-input-text> | ||
| </kol-form> | ||
| # API |
There was a problem hiding this comment.
The heading level for 'API' is inconsistent. It should be a second-level heading (##) to align with the document structure (e.g., 'Konstruktion' and 'Beispiele').
## API
| <kol-input-text _label="Vorname"></kol-input-text> | ||
| <kol-input-text _label="Nachname"></kol-input-text> | ||
| </kol-form> | ||
| # API |
There was a problem hiding this comment.
The heading level for 'API' is inconsistent. It should be a second-level heading (##) to align with the document structure (e.g., 'Construction' and 'Examples').
## API
1 participant
This pull request updates the documentation and preview functionality for the Form component, focusing on improving the developer experience and internationalization support. The main changes include replacing static code examples and the live editor with a new interactive
FormPreviewcomponent, and adding new translation keys for form-related labels in both English and German.Documentation and Preview Improvements:
LiveEditorCompactwith the new interactiveFormPreviewcomponent in both the English and German Form documentation files (form.mdx). This streamlines the documentation and provides a more consistent preview experience. [1] [2]FormPreviewReact component, which renders an interactive form preview using the Kolibri UI components and supports configurable properties for demonstration purposes.Internationalization Enhancements:
code.json). This ensures that the form preview is fully localized. [1] [2]