Skip to content

599 chip block component#751

Merged
johbaxter merged 12 commits intodevfrom
599-chip-block-component
Mar 31, 2025
Merged

599 chip block component#751
johbaxter merged 12 commits intodevfrom
599-chip-block-component

Conversation

@Mezzet
Copy link
Copy Markdown
Contributor

@Mezzet Mezzet commented Mar 24, 2025

Description

create a chip block with variant, color, size, clickable,

Changes Made

Added file for chip block, config, chip settings, and updated index.ts and menus

How to Test

  1. Select chip type and other properties
  2. Should follow expected outcome based on mui chip props

Notes

Implement icon block for icon chip

@Mezzet Mezzet linked an issue Mar 24, 2025 that may be closed by this pull request
@github-actions
Copy link
Copy Markdown

@CodiumAI-Agent /describe

@QodoAI-Agent
Copy link
Copy Markdown

Title

599 chip block component


User description

Description

create a chip block with variant, color, size, clickable,

Changes Made

Added file for chip block, config, chip settings, and updated index.ts and menus

How to Test

  1. Select chip type and other properties
  2. Should follow expected outcome based on mui chip props

Notes

Implement icon block for icon chip


PR Type

  • Enhancement

Description

  • Added new Chip Block component for UI use.

  • Implemented versatile chip display (Chip, Avatar, Icon, Link).

  • Configured chip block settings and integration.

  • Updated menu to support chip block addition.


Changes walkthrough 📝

Relevant files
Enhancement
7 files
ChipBlock.tsx
Create new versatile Chip Block component.                             
+115/-0 
config.tsx
Add configuration defaults and settings for Chip Block.   
+173/-0 
index.ts
Export Chip Block and config for module.                                 
+2/-0     
index.ts
Integrate Chip Block into default block registry.               
+4/-0     
ChipSettings.tsx
Create Chip Settings component for customization.               
+193/-0 
index.ts
Export Chip Settings within custom settings module.           
+1/-0     
default-menu.ts
Add Chip Block option to default workspace menu.                 
+21/-0   
Formatting
1 files
LoginPage.tsx
Refactor login UI formatting and error handling.                 
+34/-34 

Need help?
  • Type /help how to ... in the comments thread for any questions about PR-Agent usage.
  • Check out the documentation for more information.
  • @Mezzet Mezzet marked this pull request as ready for review March 24, 2025 14:52
    @Mezzet Mezzet requested a review from a team as a code owner March 24, 2025 14:52
    @github-actions
    Copy link
    Copy Markdown

    @CodiumAI-Agent /review

    @QodoAI-Agent
    Copy link
    Copy Markdown

    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

    Accessibility

    Consider adding accessibility features (e.g., alt text for avatars or icons) to improve usability for assistive technologies.

    const StyledAvatar = styled(Avatar, {
        shouldForwardProp: (prop) => prop !== "chipColor",
    })<{ chipColor: string }>(({ chipColor, theme }) => {
        const palette = theme.palette;
    
        return {
            "&&": {
                backgroundColor: palette[chipColor]?.main || palette.grey[500],
                color: palette[chipColor]?.contrastText,
            },
        };
    Error Logic

    The error message conditions are quite complex. Simplify and refactor the conditional logic to make the helper text clearer and avoid duplicate message checks.

        error.includes(
            'Password must have atleast one special character among [!,@,#,$,%,^,&,*]',
        )
    }
    helperText={
        error &&
        (error.includes(
            'Password must be at least 8 characters in length',
        ) ||
            error.includes(
                'Password must have atleast one uppercase character',
            ) ||
            error.includes(
                'Password must have atleast one lowercase character',
            ) ||
            error.includes(
                'Password must have atleast one special character among [!,@,#,$,%,^,&,*]',
            ) ||
            error.includes(
                'Password must have atleast one special character among [!,@,#,$,%,^,&,*]',
            ))
            ? error.includes(
                  'Passwords do no match',
              )
                ? 'Passwords do not match'
                : 'Passwords must be at least 8 characters in length and contain one lowercase, one uppercase, one special character.'
            : ''
    }

    @github-actions
    Copy link
    Copy Markdown

    @CodiumAI-Agent /improve

    @QodoAI-Agent
    Copy link
    Copy Markdown

    QodoAI-Agent commented Mar 24, 2025

    PR Code Suggestions ✨

    CategorySuggestion                                                                                                                                    Impact
    Possible issue
    Correct avatar data type

    For the "Avatar" chip type, ensure the updated value remains a React element by
    wrapping the input string in an Avatar component before calling setData.

    libs/renderer/src/components/block-settings/custom/ChipSettings.tsx [104-107]

     const handleChipChange = (chip, e) => {
         setChipValue(e.target.value);
    -    setData(chip.toLowerCase(), e.target.value);
    +    if (chip === "Avatar") {
    +        setData(chip.toLowerCase(), <Avatar>{e.target.value}</Avatar>);
    +    } else {
    +        setData(chip.toLowerCase(), e.target.value);
    +    }
     };
    Suggestion importance[1-10]: 7

    __

    Why: The suggestion attempts to address a potential data type mismatch by ensuring that when the chip type is "Avatar", the input value is wrapped in an Avatar component. This improvement is contextually relevant although it may depend on how the data is later used.

    Medium
    General
    Enable secure link navigation

    To allow proper navigation and improve security, remove the preventDefault handler
    and add target and rel attributes to the anchor tag.

    libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx [84-92]

     case "Link":
         return (
    -        <a href={link}>
    -            <Chip {...chipProps} onClick={(e) => e.preventDefault()} />
    +        <a href={link} target="_blank" rel="noopener noreferrer">
    +            <Chip {...chipProps} />
             </a>
         );
    Suggestion importance[1-10]: 7

    __

    Why: The suggestion improves the link behavior by removing the preventDefault handler and adding target and rel attributes for security. This change enhances the user experience and security, although it may adjust the originally intended behavior.

    Medium

    @johbaxter
    Copy link
    Copy Markdown
    Contributor

    johbaxter commented Mar 31, 2025

    image

    • Chip block icon settings - allow icon select

    @Mezzet Remember that Icon block, we could possibly add in that icon selection settings component you made for this extra setting that is needed

    image

    • Chip Block - Link settings bug - LowPri

    image

    • Custom color chip block

    @kyang4 do you mind making these tickets

    @QodoAI-Agent
    Copy link
    Copy Markdown

    PR Code Suggestions ✨

    CategorySuggestion                                                                                                                                    Impact
    Possible issue
    Correct avatar data type

    For the "Avatar" chip type, ensure the updated value remains a React element by
    wrapping the input string in an Avatar component before calling setData.

    libs/renderer/src/components/block-settings/custom/ChipSettings.tsx [104-107]

     const handleChipChange = (chip, e) => {
         setChipValue(e.target.value);
    -    setData(chip.toLowerCase(), e.target.value);
    +    if (chip === "Avatar") {
    +        setData(chip.toLowerCase(), <Avatar>{e.target.value}</Avatar>);
    +    } else {
    +        setData(chip.toLowerCase(), e.target.value);
    +    }
     };
    Suggestion importance[1-10]: 7

    __

    Why: The suggestion attempts to address a potential data type mismatch by ensuring that when the chip type is "Avatar", the input value is wrapped in an Avatar component. This improvement is contextually relevant although it may depend on how the data is later used.

    Medium
    General
    Enable secure link navigation

    To allow proper navigation and improve security, remove the preventDefault handler
    and add target and rel attributes to the anchor tag.

    libs/renderer/src/components/block-defaults/chip-block/ChipBlock.tsx [84-92]

     case "Link":
         return (
    -        <a href={link}>
    -            <Chip {...chipProps} onClick={(e) => e.preventDefault()} />
    +        <a href={link} target="_blank" rel="noopener noreferrer">
    +            <Chip {...chipProps} />
             </a>
         );
    Suggestion importance[1-10]: 7

    __

    Why: The suggestion improves the link behavior by removing the preventDefault handler and adding target and rel attributes for security. This change enhances the user experience and security, although it may adjust the originally intended behavior.

    Medium

    @kyang4 kyang4 mentioned this pull request Mar 31, 2025
    @johbaxter johbaxter merged commit 94b8133 into dev Mar 31, 2025
    3 checks passed
    @johbaxter johbaxter deleted the 599-chip-block-component branch March 31, 2025 20:51
    @github-actions
    Copy link
    Copy Markdown

    @CodiumAI-Agent /update_changelog

    @QodoAI-Agent
    Copy link
    Copy Markdown

    Changelog updates: 🔄

    2025-03-31

    Added

    • New Chip block component with configurable variants, colors, sizes, and interactivity.
    • Integrated Chip block settings and menu support into the UI renderer.

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

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Labels

    None yet

    Projects

    None yet

    Development

    Successfully merging this pull request may close these issues.

    Chip block component

    3 participants