libs/react: add checkbox and expandable components (DEV-1080)

[tglaz]

Filter Shelter Results
https://betterangels.atlassian.net/browse/DEV-1080

Partial PR

• expandable container
• checkbox + checkboxGroup
• add --color-primary-95 to shelter css

Summary by Sourcery

Add Checkbox and ExpandableContainer components to the React library.

New Features:

• Added a Checkbox component with a label, checked state, and change handler.
• Added a CheckboxGroup component to manage multiple checkboxes, including a select-all option.
• Added an ExpandableContainer component with a header and collapsible content.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR introduces new checkbox and expandable container components to the React library, and applies styling updates to the Shelter web application.

Class diagram for new Form components and ExpandableContainer

classDiagram
    class Checkbox {
        +string label
        +boolean checked
        +function onChange(checked: boolean)
        +string className
        +boolean required
        +boolean disabled
        +handleChange()
    }

    class CheckboxGroup {
        +string className
        +TCheckboxOption[] options
        +string[] values
        +string selectAll
        +function onChange(selected: string[])
        +handleChange(value: string, checked: boolean)
    }

    class ExpandableContainer {
        +string className
        +ReactNode|string header
        +boolean disabled
        +boolean open
        +function onClick(opened: boolean)
        +boolean isOpen
        +onExpanCollapse()
    }

    note for CheckboxGroup "Manages multiple checkboxes with select all functionality"
    note for ExpandableContainer "Collapsible container with header and chevron icon"

Loading

File-Level Changes

Change	Details	Files
Added Checkbox and CheckboxGroup components for form elements.	Created a Checkbox component to handle individual checkbox elements. Created a CheckboxGroup component to manage a group of checkboxes, including a "Select All" option. Exported the components through libs/react/components/src/lib/Form/index.ts.	libs/react/components/src/lib/Form/Checkbox.tsx libs/react/components/src/lib/Form/CheckboxGroup.tsx libs/react/components/src/lib/Form/index.ts
Created ExpandableContainer component.	Implemented the ExpandableContainer component to provide expandable and collapsible content sections. Added props for header content, disabled state, open/close control, and click handling. Exported the component via libs/react/components/src/lib/ExpandableContainer/index.ts.	libs/react/components/src/lib/ExpandableContainer/ExpandableContainer.tsx libs/react/components/src/lib/ExpandableContainer/index.ts
Added new icons.	Introduced CheckIcon and ChevronLeftIcon components. Exported the new icons through libs/react/icons/src/lib/index.ts.	libs/react/icons/src/lib/index.ts libs/react/icons/src/lib/components/checkIcon.tsx libs/react/icons/src/lib/components/chevronLeftIcon.tsx
Updated styling for Shelter web app.	Added --color-primary-95 to the global CSS variables. Included the new color variable in the tailwind config file to make it available for use in the application styling. Updated component styles to use new color variable	apps/shelter-web/src/assets/styles/global.css apps/shelter-web/tailwind.config.js
Exported new components.	Exported the ExpandableContainer component. Exported form components from the form directory	libs/react/components/src/lib/index.ts
Created utility function for merging CSS classes.	Created a utility function mergeCss to handle merging of CSS classes using clsx and tailwind-merge. This function simplifies the process of combining CSS classes from different sources, ensuring proper formatting and avoiding conflicts.	libs/react/components/src/utils/mergeCss.ts

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @tglaz - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider adding unit tests for the new components to verify behavior and prevent regressions
• Documentation with prop descriptions and usage examples would make these components more maintainable and easier to use

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

issue: Add guard clause for undefined values in array case

The function should filter out undefined values when handling arrays to prevent potential runtime errors