feat: adding Flexgrid and FlexgridItem components

[aversini]

Summary by CodeRabbit

• New Features

  • Added a Flexgrid component for advanced grid layout capabilities.
  • Introduced a FlexgridItem component for defining items within the grid.
  • Included Storybook stories for Flexgrid to demonstrate basic and interactive usage.

• Enhancements

  • Implemented a new React context FlexgridContext for managing grid layout settings.
  • Added utility functions for style calculations and CSS class concatenation.

• Documentation

  • Updated Storybook with metadata and controls for the Flexgrid component.

• Testing

  • Created comprehensive test suites for Flexgrid and FlexgridItem components to ensure proper styling and functionality.

• Refactor

  • Defined new TypeScript type definitions for FlexgridProps and FlexgridItemProps to improve type safety and developer experience.

[coderabbitai]

Walkthrough

The overall change involves the introduction of a new Flexgrid component system in a UI component library, complete with context management, item components, and utilities for style calculations. This system is designed to provide a flexible and customizable grid layout for React applications. The updates include Storybook stories for documentation, TypeScript type definitions for strong typing, utility functions for style calculations, and tests to ensure the components behave as expected.

Changes

File Path	Change Summary
.../Flexgrid.stories.tsx	Added Storybook stories for Flexgrid with metadata and controls.
.../__tests__/helpers.ts	Introduced expectToHaveStyles function for testing styles.
.../common/constants.ts	Added constants for Flexgrid class names and configuration.
.../Flexgrid/Flexgrid.tsx	Created Flexgrid component with props for layout and style.
.../Flexgrid/FlexgridContext.ts	Introduced FlexgridContext for grid layout settings.
.../Flexgrid/FlexgridItem.tsx	Added FlexgridItem component for grid items with span control.
.../Flexgrid/FlexgridTypes.d.ts	Defined TypeScript types for Flexgrid and FlexgridItem props.
.../Flexgrid/__tests__/Flexgrid.test.tsx	Implemented tests for Flexgrid component's styles and props.
.../Flexgrid/__tests__/FlexgridItem.test.tsx	Implemented tests for FlexgridItem component's styles and span functionality.
.../Flexgrid/utilities.ts	Added utility functions for class generation and style calculations.
.../components/index.ts	Exported Flexgrid and FlexgridItem components.

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• If you reply to a review comment from CodeRabbit, the bot will automatically respond.
• To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment
• Note: Review comments are made on code diffs or files, not on the PR overview.
• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Note: For conversation with the bot, please use the review comments on code diffs or files.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

[bundlemon]

BundleMon

Files updated (2)

Status	Path	Size	Limits
✅	assets/index.js	6KB (+402B +7.01%)	10KB
✅	assets/style.css	3.29KB (+35B +1.05%)	4KB

Unchanged files (1)

Status	Path	Size	Limits
✅	index.html	316B	2KB

Total files change +437B +4.66%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[coderabbitai]

Review Status

Actionable comments generated: 3

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between e7214cc and 33a4af8.

Files selected for processing (11)

• packages/documentation/src/stories/Flexgrid.stories.tsx (1 hunks)
• packages/ui-components/src/common/tests/helpers.ts (1 hunks)
• packages/ui-components/src/common/constants.ts (1 hunks)
• packages/ui-components/src/components/Flexgrid/Flexgrid.tsx (1 hunks)
• packages/ui-components/src/components/Flexgrid/FlexgridContext.ts (1 hunks)
• packages/ui-components/src/components/Flexgrid/FlexgridItem.tsx (1 hunks)
• packages/ui-components/src/components/Flexgrid/FlexgridTypes.d.ts (1 hunks)
• packages/ui-components/src/components/Flexgrid/tests/Flexgrid.test.tsx (1 hunks)
• packages/ui-components/src/components/Flexgrid/tests/FlexgridItem.test.tsx (1 hunks)
• packages/ui-components/src/components/Flexgrid/utilities.ts (1 hunks)
• packages/ui-components/src/components/index.ts (2 hunks)

Files skipped from review due to trivial changes (2)

• packages/ui-components/src/components/Flexgrid/utilities.ts
• packages/ui-components/src/components/index.ts

Additional comments: 11

packages/documentation/src/stories/Flexgrid.stories.tsx (3)

• 1-49: The metadata for the Flexgrid component in Storybook is well-defined, with appropriate controls and default arguments. This will help users to interact with the component properties directly in the Storybook UI.

• 57-143: The Basic story for the Flexgrid component provides a clear and comprehensive example of how to use the Flexgrid and FlexgridItem components. It demonstrates various span configurations and the resulting layout.

• 145-193: The Interactive story includes default arguments and a render function that showcases a simple use case with different cell sizes. This story will allow users to interact with the Flexgrid component and see the effects of changing its properties in real-time.

packages/ui-components/src/common/__tests__/helpers.ts (2)

• 16-17:
  The implementation of expectToHaveClasses correctly checks for the presence of each class in the element's class list.

• 20-28:
  The implementation of expectToHaveStyles correctly retrieves computed styles and checks them against expected values.

packages/ui-components/src/common/constants.ts (1)

• 4-13:
  The new constants for the Flexgrid system are consistent with the existing naming conventions and are well-organized.

packages/ui-components/src/components/Flexgrid/Flexgrid.tsx (1)

• 7-51: - The Flexgrid component is well-structured and follows the requirements outlined in the summary. It uses default props, context, and CSS-in-JS to apply styles.

• The use of clsx for conditional class names is appropriate.
• The negative margin trick in lines 32-33 is a clever way to handle the gap issue, but ensure that this does not lead to unexpected visual issues in the layout, especially when columnGap or rowGap are large.
• The context object in line 42 is correctly providing columnGap and rowGap to the FlexgridContext.Provider.
• The spread of otherProps on the div element allows for extensibility and custom attributes.

packages/ui-components/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx (4)

• 9-12:
  This test ensures that the FlexgridItem component is properly exported and can be imported from the root of the package.

• 15-31:
  The test verifies that FlexgridItem has sensible default styles and classes, ensuring that it behaves as expected without any additional props.

• 34-45:
  The test checks that FlexgridItem correctly calculates its flex-basis when spanning across 4 columns, which is crucial for the layout to work as intended.

• 47-59:
  The test ensures that FlexgridItem can span the full available space by setting the appropriate flex properties, which is important for responsive design.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between 33a4af8 and d185510.

Files selected for processing (1)

• packages/ui-components/src/components/Flexgrid/tests/Flexgrid.test.tsx (1 hunks)

Additional comments: 4

packages/ui-components/src/components/Flexgrid/__tests__/Flexgrid.test.tsx (4)

• 9-13:
  This test ensures that the Flexgrid component is properly exported and can be imported from the root of the package.

• 15-25:
  The test verifies that the Flexgrid component has sensible default styles and classes, ensuring that it behaves as expected out of the box.

• 27-34:
  The test checks that the Flexgrid component applies default margins to compensate for the column gap, which is important for maintaining consistent spacing.

• 37-103:
  The tests cover a wide range of Flexgrid component properties, ensuring that each prop correctly affects the component's styling.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between d185510 and 1cc8632.

Files selected for processing (3)

• packages/ui-components/src/components/Flexgrid/FlexgridItem.tsx (1 hunks)
• packages/ui-components/src/components/Flexgrid/FlexgridTypes.d.ts (1 hunks)
• packages/ui-components/src/components/Flexgrid/utilities.ts (1 hunks)

Additional comments: 3

packages/ui-components/src/components/Flexgrid/FlexgridItem.tsx (1)

• 1-40:

The implementation of the FlexgridItem component appears to be correct and aligns with the summary provided. It properly uses context to obtain grid settings and calculates styles accordingly. The use of clsx for dynamic class name generation is also appropriate. Ensure that the spread of otherProps on the div element does not lead to any unexpected behavior or security issues, such as overriding essential properties.

packages/ui-components/src/components/Flexgrid/FlexgridTypes.d.ts (1)

• 1-77:

The TypeScript type definitions for FlexgridProps and FlexgridItemProps are correctly implemented and align with the summary description.

packages/ui-components/src/components/Flexgrid/utilities.ts (1)

• 3-27:

The implementation of getBasis function correctly handles different cases for the span parameter and returns the expected styles. This aligns with the summary provided.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between 1cc8632 and db15930.

Files selected for processing (1)

• packages/ui-components/src/components/Flexgrid/tests/FlexgridItem.test.tsx (1 hunks)

Additional comments: 4

packages/ui-components/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx (4)

• 9-26:
  The test case for rendering FlexgridItem without a parent Flexgrid is well-implemented and checks for default styles.

• 29-45:
  The test case for default styles of FlexgridItem when nested inside a Flexgrid is well-implemented and checks for sensible defaults.

• 48-59:
  The test case for FlexgridItem spanning across 4 columns is well-implemented and verifies the computed style for flex-basis.

• 61-73:
  The test case for FlexgridItem spanning the full space is well-implemented and verifies the computed styles for flex-basis, flex-grow, and max-width.