feat(code-diff): add interactive playground example#4134
Conversation
|
Warning Review limit reached
More reviews will be available in 55 minutes and 49 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (6)
📝 WalkthroughWalkthroughExtracts the ChangesCodeDiffLayout type and interactive playground
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Extract the inline `'unified' | 'split'` union into a named, public `CodeDiffLayout` type and re-export it from the package entry point, so consumers can reference the layout type directly instead of repeating the literal union. Update the `layout` prop and the line-wrap example to use the new type, and regenerate the API report.
Add a playground example, registered as the first example so it appears at the top of the docs page. It pairs two editable `limel-code-editor` boxes with a live `limel-code-diff`, plus controls to switch between unified and split layouts and toggle line wrapping.
|
Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-4134/ |
viktorSoftDev
force-pushed
the
feat/4133-code-diff-interactive-example
branch
from
5389918 to
33b6f9b
Compare
There was a problem hiding this comment.
Pull request overview
Adds a new interactive playground example for limel-code-diff and improves type-safety by extracting the layout prop’s literal union into a named public type (CodeDiffLayout) that’s exported for consumers.
Changes:
- Added
limel-example-code-diff-interactive(two editablelimel-code-editors + livelimel-code-diff+ layout/lineWrapping controls) and registered it as the first example on the docs page via@exampleComponent. - Introduced and exported a public
CodeDiffLayouttype and updated usages (component prop typing + examples). - Updated the API report to reflect the new public type and updated prop typing.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/interface.ts | Exports CodeDiffLayout publicly from the package entrypoint. |
| src/components/code-diff/examples/code-diff-line-wrap.tsx | Reuses the new CodeDiffLayout type for stronger typing in the example controls. |
| src/components/code-diff/examples/code-diff-interactive.tsx | New interactive playground example wiring two editors to a live diff + controls. |
| src/components/code-diff/examples/code-diff-interactive.scss | Styling for the interactive playground layout (responsive editor layout + sizing). |
| src/components/code-diff/code-diff.types.ts | Adds the new public CodeDiffLayout type. |
| src/components/code-diff/code-diff.tsx | Uses CodeDiffLayout for the layout prop and registers the new interactive example first. |
| etc/lime-elements.api.md | Updates the public API surface to include CodeDiffLayout and the updated prop type. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| * and collapsible unchanged context sections. | ||
| * | ||
| * @beta | ||
| * @exampleComponent limel-example-code-diff-interactive |
There was a problem hiding this comment.
Putting this on top makes perfect sense while it's being reviewed, but I think we should put it further down before we merge. At least the basic example should come first, so the reader gets a gentle introduction and understands what what component limel-code-diff actually produces (not obvious in the interactive example, since the first thing you see is the two code editors).
There was a problem hiding this comment.
Yeah, that makes a lot of sense
Closes #4133
Summary by CodeRabbit
New Features
Refactor
Adds an interactive playground to the top of the
limel-code-diffexamples page: two editablelimel-code-editorboxes feeding a livelimel-code-diff, with controls forunified/splitlayout andlineWrapping. Also extracts thelayoutprop's inline union into a named, publicCodeDiffLayouttype.Review:
Browsers tested:
(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)
Windows:
Linux:
macOS:
Mobile: