Feat/support element as party in timeline and icon placement in copiable

[Harman-singh-waraich]

PR-Codex overview

The focus of this PR is to enhance the Copiable component and TimelineProgress UI elements by adding new features and improving styling.

Detailed summary

• Copiable component now supports iconPlacement prop
• Added PartyContainer, StyledLabel, and StyledLink styled components
• TimelineProgress now includes PartyContainer, StyledLabel, and StyledLink
• Spine component now dynamically adjusts height based on title position
• Added PartyElementWrapper styled component for Bullet component

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

• New Features

  • Added iconPlacement prop to Copiable component, allowing users to specify the position of an icon (left or right).
  • Enhanced Spine component to dynamically adjust the height of a Line element based on a reference, improving layout flexibility.

• Enhancements

  • Updated party prop in Bullet and TimelineItem components to accept both strings and React elements for richer content customization.
  • Enhanced TimelineProgress component to support more complex JSX structures including links and labels.

• Bug Fixes

  • None

• Documentation

  • None

• Refactor

  • None

• Style

  • None

• Tests

  • None

• Chores

  • None

• Revert

  • None

[coderabbitai]

Walkthrough

This update introduces new customization options and enhanced flexibility to various components within the library. Key changes include adding an iconPlacement prop to the Copiable component, allowing dynamic placement of icons, and modifying the TimelineItem interface to support both strings and React elements for the party property. Additionally, dynamic height adjustments for the Spine component were implemented for better alignment, and new styled elements were introduced in the timeline examples.

Changes

Files	Change Summary
src/examples/copiable.tsx	Added iconPlacement prop to CopiableExample component.
src/lib/copiable/index.tsx	Introduced iconPlacement prop with dynamic flex-direction adjustment in the Copiable component.
src/lib/progress/timeline/bullet.tsx	Enhanced party prop to accept strings or React elements, adding position and alignment styles.
src/lib/progress/timeline/custom.tsx	Changed party property in TimelineItem interface to accept strings or React elements.
src/lib/progress/timeline/spine.tsx	Added useState and useEffect hooks to dynamically calculate topHeight for Line component.
src/examples/timeline.tsx	Added styled components and updated party field in TimelineProgress for complex JSX structures.

Poem

In lines of code, a tale we weave,
New props and hooks, a fresh reprieve.
Icons left or right, they shine,
Dynamic heights now align.
Timeline stories rich and bold,
React elements unfold.
Our playground grows with joy and cheer,
These changes make our path more clear.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

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 an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• 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/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 2

Outside diff range and nitpick comments (1)

src/lib/progress/timeline/spine.tsx (1)

Line range hint 12-12: Use a regular expression literal instead of the RegExp constructor for better performance and readability.

- const colorRegex = new RegExp("^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$");
+ const colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 11fc42f and 4420a86.

Files selected for processing (5)

• src/examples/copiable.tsx (1 hunks)
• src/lib/copiable/index.tsx (3 hunks)
• src/lib/progress/timeline/bullet.tsx (6 hunks)
• src/lib/progress/timeline/custom.tsx (1 hunks)
• src/lib/progress/timeline/spine.tsx (2 hunks)

Additional context used

Biome

src/lib/progress/timeline/spine.tsx

[error] 12-12: Use a regular expression literal instead of the RegExp constructor. (lint/complexity/useRegexLiterals)

Regular expression literals avoid some escaping required in a string literal, and are easier to analyze statically.
Safe fix: Use a literal notation instead.

src/lib/progress/timeline/bullet.tsx

[error] 103-103: Invalid typeof comparison value: this expression is not a string literal (lint/suspicious/useValidTypeof)

not a string literal

Additional comments not posted (8)

src/examples/copiable.tsx (1)

7-9: The implementation of the iconPlacement prop in the Copiable component is correct and matches the PR description and AI-generated summary.

src/lib/progress/timeline/spine.tsx (4)

1-1: Correct usage of useState and useEffect hooks for dynamic component behavior.

---

34-37: The conditional styling based on topHeight is efficiently implemented, allowing dynamic control over the Line component's appearance.

---

45-45: The addition of the titleRef prop to SpineProps is a good enhancement for dynamic height calculation based on external elements.

---

48-64: The dynamic calculation of topHeight based on titleRef is a robust solution for responsive design. Ensure that the titleRef is provided wherever the Spine component is used to fully utilize this feature.

src/lib/copiable/index.tsx (1)

10-10: The implementation of the iconPlacement prop in the Copiable component is correct. The default value and the conditional styling are implemented effectively to manage the icon's position based on the prop's value.

Also applies to: 13-19, 52-52, 68-68

src/lib/progress/timeline/bullet.tsx (2)

1-1: Added useRef import and defined PartyElementWrapper.

This aligns with the PR objectives to enhance the functionality of the timeline components by allowing the party prop to accept React elements.

Also applies to: 20-22

---

56-60: Usage of PartyElementWrapper within Bullet.

The implementation correctly handles the party prop when it is a React element, ensuring proper styling and layout.

[coderabbitai]

Actionable comments posted: 1

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 4420a86 and 18f8b13.

Files selected for processing (1)

• src/lib/progress/timeline/spine.tsx (2 hunks)

Additional context used

Biome

src/lib/progress/timeline/spine.tsx

[error] 12-12: Use a regular expression literal instead of the RegExp constructor. (lint/complexity/useRegexLiterals)

Regular expression literals avoid some escaping required in a string literal, and are easier to analyze statically.
Safe fix: Use a literal notation instead.

Additional comments not posted (4)

src/lib/progress/timeline/spine.tsx (4)

48-68: Ensure that the cleanup function in useEffect effectively removes the event listener to prevent memory leaks.

---

34-37: The conditional styling in Line is well-implemented for dynamic height adjustment.

---

48-77: The implementation of dynamic height adjustment based on titleRef in the Spine component is robust and well-structured.

---

77-77: The default export of the Spine component is consistent with common React practices.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[coderabbitai]

Actionable comments posted: 2

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 18f8b13 and 2fa05f6.

Files selected for processing (1)

• src/examples/timeline.tsx (2 hunks)

Additional comments not posted (2)

src/examples/timeline.tsx (2)

17-21: New PartyContainer styled component looks good and is well-defined for layout.

---

23-26: The StyledLabel component is correctly using theming for text color, ensuring consistency across the application.

[kemuru]

lgtm