554 Accordion block

[Paulson-Robert]

No description provided.

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

554 Accordion block

---

PR Type

Enhancement

---

Description

• Introduced a new AccordionBlock component for layout functionality.

• Added configuration and default styles for the AccordionBlock.

• Registered AccordionBlock in the default block definitions and menu.

• Updated the designer menu to include the AccordionBlock.

---

Changes walkthrough 📝

Relevant files

Enhancement

AccordionBlock.tsx Implement AccordionBlock component with slots                        packages/client/src/components/block-defaults/accordion-block/AccordionBlock.tsx Created the AccordionBlock component using @semoss/ui's Accordion. Defined the AccordionBlockDef interface for block structure. Implemented slots for header and content in the accordion. +40/-0    config.tsx Add configuration for AccordionBlock                                          packages/client/src/components/block-defaults/accordion-block/config.tsx Added configuration for the AccordionBlock. Defined default styles and slots for the block. Linked the AccordionBlock component to its configuration. +26/-0    index.ts Export AccordionBlock and configuration                                    packages/client/src/components/block-defaults/accordion-block/index.ts Exported AccordionBlock and its configuration. +2/-0      index.ts Register AccordionBlock in default block definitions          packages/client/src/components/block-defaults/index.ts Registered AccordionBlock in the default block definitions. Added AccordionBlockConfig to the default blocks registry. +8/-1      default-menu.ts Add AccordionBlock to designer menu                                            packages/client/src/components/designer/menu/default-menu.ts Added AccordionBlock to the designer menu under the layout section. Included an image reference for the AccordionBlock. +17/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Issue The overflowWrap: 'anywhere' style on line 26 may cause unintended behavior or visual issues in certain scenarios. It should be validated if this is the desired behavior for all use cases of the AccordionBlock. <div style={{ ...data.style, overflowWrap: 'anywhere', // text that overflows container }} {...attrs} > <Accordion> <Accordion.Trigger> <Slot slot={slots.header} /> </Accordion.Trigger> <Accordion.Content> <Slot slot={slots.content} /> </Accordion.Content> </Accordion> </div> ); Default Styling The default style object in the config file includes padding and gap values. These should be reviewed to ensure they align with the design system or intended layout. export const config: BlockConfig<AccordionBlockDef> = { widget: 'accordion', type: BLOCK_TYPE_LAYOUT, data: { style: { display: 'flex', flexDirection: 'column', padding: '4px', gap: '8px', }, }, listeners: {}, slots: { header: [], content: [], }, render: AccordionBlock, icon: Schema, contentMenu: [], styleMenu: [], };

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Security	Sanitize dynamic styles to prevent injection Ensure that the data.style object is properly validated or sanitized before being applied to the style attribute to prevent potential security risks like CSS injection. packages/client/src/components/block-defaults/accordion-block/AccordionBlock.tsx [24-27] style={{ - ...data.style, + ...sanitizeStyle(data.style), overflowWrap: 'anywhere', // text that overflows container }} Suggestion importance[1-10]: 9 __ Why: This suggestion addresses a critical security concern by ensuring that dynamic styles are sanitized before being applied, preventing potential CSS injection attacks. It is highly relevant and improves the safety of the code.	High
Possible issue	Add fallback for undefined useBlock values Add error handling or fallback logic in case useBlock fails to retrieve the id or returns undefined values for attrs, data, or slots. packages/client/src/components/block-defaults/accordion-block/AccordionBlock.tsx [20] -const { attrs, data, slots } = useBlock<AccordionBlockDef>(id); +const { attrs, data, slots } = useBlock<AccordionBlockDef>(id) || { attrs: {}, data: { style: {} }, slots: {} }; Suggestion importance[1-10]: 8 __ Why: Adding fallback logic for undefined values from useBlock enhances the robustness of the code, preventing potential runtime errors. This is a practical improvement for handling edge cases.	Medium
General	Validate image path for correctness Verify that the BLOCK_ACCORDION image path is valid and ensure the image is correctly loaded to avoid runtime errors or broken UI elements. packages/client/src/components/designer/menu/default-menu.ts [35] -import BLOCK_ACCORDION from '@/assets/img/BLOCK_ACCORDION.png'; +import BLOCK_ACCORDION from '@/assets/img/BLOCK_ACCORDION.png'; // Ensure this path is correct and image exists Suggestion importance[1-10]: 6 __ Why: While the suggestion to verify the image path is valid and ensures the image is correctly loaded is useful, it is more of a reminder than an actionable code change. It has moderate importance for preventing UI issues.	Low

[johbaxter]

Looks good, follow up ticket for Accordion Styles located here: #613

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-02-21

Added

• Introduced Accordion block as a new layout component.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'