feat(components): add Code component#249
Conversation
WalkthroughAdds a new LumexCode UI component (component, styles, tests), documentation pages and interactive previews, inserts LumexCode into docs navigation, and updates docs .gitignore to track the component docs. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant Docs as Docs Page
participant Preview as PreviewCode
participant Example as Example Component
participant Lumex as LumexCode
participant Styles as Styles.Code
participant TM as TwMerge
U->>Docs: open /docs/components/code
Docs->>Preview: render preview wrapper
Preview->>Example: render example (Usage/Sizes/Colors/...)
Example->>Lumex: instantiate <LumexCode> with params & ChildContent
Lumex->>Styles: request Style(TwMerge)
Styles-->>Lumex: component variant (base + variants)
Lumex->>TM: TwMerge merges classes (+ AdditionalAttributes)
TM-->>Lumex: merged class string
Lumex-->>Example: rendered <code> element
Example-->>Preview: visible preview
Preview-->>U: interactive output
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (8)
docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Usage.razor (1)
1-5: Reduce stringly-typed snippet keysOptional: extract "Code.Code.Usage" into a shared constant to avoid typos across previews.
docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Sizes.razor (1)
1-7: Deduplicate repeated markup with a small loopSame snippet repeated for three sizes; a simple loop keeps this DRY.
-<div class="flex flex-col gap-2"> - <LumexCode Size="Size.Small">dotnet add package LumexUI</LumexCode> - - <LumexCode Size="Size.Medium">dotnet add package LumexUI</LumexCode> - - <LumexCode Size="Size.Large">dotnet add package LumexUI</LumexCode> -</div> +<div class="flex flex-col gap-2"> + @foreach (var size in new[] { Size.Small, Size.Medium, Size.Large }) + { + <LumexCode Size="@size">dotnet add package LumexUI</LumexCode> + } +</div>docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Colors.razor (1)
1-25: Loop through ThemeColor to cut repetitionYou can render all six colors via a loop to keep examples concise.
-<div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2"> - <LumexCode Color="@ThemeColor.Default"> - dotnet add package LumexUI - </LumexCode> - - <LumexCode Color="@ThemeColor.Primary"> - dotnet add package LumexUI - </LumexCode> - - <LumexCode Color="@ThemeColor.Secondary"> - dotnet add package LumexUI - </LumexCode> - - <LumexCode Color="@ThemeColor.Warning"> - dotnet add package LumexUI - </LumexCode> - - <LumexCode Color="@ThemeColor.Success"> - dotnet add package LumexUI - </LumexCode> - - <LumexCode Color="@ThemeColor.Danger"> - dotnet add package LumexUI - </LumexCode> -</div> +<div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2"> + @foreach (var color in new[] { ThemeColor.Default, ThemeColor.Primary, ThemeColor.Secondary, ThemeColor.Warning, ThemeColor.Success, ThemeColor.Danger }) + { + <LumexCode Color="@color"> + dotnet add package LumexUI + </LumexCode> + } +</div>src/LumexUI/Components/Code/LumexCode.razor (1)
2-2: Redundant @inherits with code-behindWith a partial class deriving LumexComponentBase, @inherits is unnecessary.
Apply:
-@inherits LumexComponentBasesrc/LumexUI/Styles/Code.cs (1)
37-65: Add missing Color variants (None, Info) for completenessColorVariants.Flat defines None and Info but they’re not exposed here, limiting API surface.
Apply:
[nameof( LumexCode.Color )] = new VariantValueCollection { + [nameof( ThemeColor.None )] = new SlotCollection + { + [nameof( CodeSlots.Base )] = ColorVariants.Flat[ThemeColor.None] + }, [nameof( ThemeColor.Default )] = new SlotCollection { [nameof( CodeSlots.Base )] = ColorVariants.Flat[ThemeColor.Default] }, @@ [nameof( ThemeColor.Danger )] = new SlotCollection { [nameof( CodeSlots.Base )] = ColorVariants.Flat[ThemeColor.Danger] }, + [nameof( ThemeColor.Info )] = new SlotCollection + { + [nameof( CodeSlots.Base )] = ColorVariants.Flat[ThemeColor.Info] + }, },docs/LumexUI.Docs.Client/Pages/Components/Code/Code.razor (1)
38-46: Headings mention “Radius” but no section is renderedEither add a Radius section or remove the heading entry. For now, remove to avoid a dead anchor.
Apply:
private readonly Heading[] _headings = new Heading[] { new("Usage", [ new("Sizes"), - new("Colors"), - new("Radius") + new("Colors") ]), new("API") };tests/LumexUI.Tests/Components/Code/CodeTests.razor (2)
25-25: Remove unused local variableMinor cleanup.
Apply:
- RenderFragment content = @<span data-testid="code-children" />;
22-37: Add a test to verify custom Class is merged (regression guard for the markup fix)Validates that user classes aren’t dropped.
Apply:
[Fact] public void ShouldRenderChildrenAndContent() { @@ cut.FindByTestId("code-children").Should().NotBeNull(); } + + [Fact] + public void ShouldMergeCustomClass() + { + var cut = Render( + @<LumexCode data-testid="code-root" Class="custom-class"> + dotnet add package LumexUI + </LumexCode> + ); + + cut.FindByTestId("code-root").GetAttribute("class") + .Should().Contain("custom-class"); + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs(1 hunks)docs/LumexUI.Docs.Client/Pages/.gitignore(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Code.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Colors.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Examples.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Sizes.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Usage.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Colors.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Examples.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Sizes.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Usage.razor(1 hunks)src/LumexUI/Components/Code/CodeSlots.cs(1 hunks)src/LumexUI/Components/Code/LumexCode.razor(1 hunks)src/LumexUI/Components/Code/LumexCode.razor.cs(1 hunks)src/LumexUI/Styles/Code.cs(1 hunks)tests/LumexUI.Tests/Components/Code/CodeTests.razor(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-01-30T00:22:33.596Z
Learnt from: desmondinho
PR: LumexUI/lumexui#159
File: src/LumexUI.Motion/LumexUI.Motion.csproj:9-11
Timestamp: 2025-01-30T00:22:33.596Z
Learning: LumexUI.Motion is planned to be distributed as a separate NuGet package with its own test coverage, hence the assembly-wide coverage exclusion in the project.
Applied to files:
docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Usage.razor
🧬 Code graph analysis (3)
src/LumexUI/Components/Code/CodeSlots.cs (2)
src/LumexUI/Components/Code/LumexCode.razor.cs (1)
ExcludeFromCodeCoverage(72-85)src/LumexUI/Styles/Code.cs (1)
ExcludeFromCodeCoverage(14-107)
src/LumexUI/Components/Code/LumexCode.razor.cs (4)
src/LumexUI/Components/Bases/LumexComponentBase.cs (1)
LumexComponentBase(18-58)src/LumexUI/Utilities/Variants/TwVariants.cs (1)
ComponentSlot(112-115)src/LumexUI/Components/Code/CodeSlots.cs (1)
ExcludeFromCodeCoverage(11-14)src/LumexUI/Styles/Code.cs (1)
ExcludeFromCodeCoverage(14-107)
src/LumexUI/Styles/Code.cs (6)
src/LumexUI/Components/Code/CodeSlots.cs (1)
ExcludeFromCodeCoverage(11-14)src/LumexUI/Components/Code/LumexCode.razor.cs (3)
ExcludeFromCodeCoverage(72-85)LumexCode(14-86)LumexCode(55-58)src/LumexUI/Utilities/Variants/SlotCollection.cs (1)
SlotCollection(9-34)src/LumexUI/Utilities/Variants/VariantCollection.cs (1)
VariantCollection(9-34)src/LumexUI/Utilities/Variants/VariantValueCollection.cs (1)
VariantValueCollection(9-34)src/LumexUI/Styles/ColorVariants.cs (1)
ColorVariants(5-78)
🔇 Additional comments (7)
docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Usage.razor (1)
1-1: LGTM: clear, minimal usage exampleNo issues spotted. Renders a simple install snippet as intended.
docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs (1)
33-33: Nav item added for LumexCode — route verified
Code.razor declares @page "/docs/components/code".docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Colors.razor (1)
1-5: LGTMMatches existing PreviewCode pattern and should render fine.
src/LumexUI/Components/Code/CodeSlots.cs (1)
11-14: LGTMMinimal marker slot type is correct and consistent with the styling system.
docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Sizes.razor (1)
1-5: LGTMConsistent with other preview pages.
tests/LumexUI.Tests/Components/Code/CodeTests.razor (1)
4-10: Ensure required usings for DI and TwMerge are availableIf not globally imported, add explicit usings to avoid build breaks.
Apply:
@using LumexUI.Styles +@using TailwindMerge +@using Microsoft.Extensions.DependencyInjectionsrc/LumexUI/Components/Code/LumexCode.razor.cs (1)
52-70: LGTMVariant wiring and slot resolution are correct; defaults align with Styles.Code.
| Code | ||
|
|
||
| !Components/Code No newline at end of file |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix ignore rules: remove BOM and unignore nested files under Components/Code
- Line 1 starts with a UTF-8 BOM; this can break the
Codepattern. Please remove the BOM. !Components/Codewon’t re-include children ifCodeis ignored higher up. Add!Components/Code/**so examples and previews are tracked.
Apply:
-Code
+Code
!Components/Code
+!Components/Code/**Optionally, if your intent is only to ignore a top-level Pages/Code directory (not every nested “Code”), anchor it:
-Code
+/Code/📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Code | |
| !Components/Code | |
| Code | |
| !Components/Code | |
| !Components/Code/** |
🤖 Prompt for AI Agents
In docs/LumexUI.Docs.Client/Pages/.gitignore around lines 1 to 3 there is a
UTF-8 BOM at the start of line 1 that can break the literal "Code" pattern and
the unignore rule only targets the directory itself; remove the BOM from the
file and replace the solitary unignore with one that also includes nested files
(e.g., unignore Components/Code/**) so children like examples and previews are
tracked; if you only meant to unignore a top-level Pages/Code, instead anchor
the rule to that path to avoid re-including every nested "Code" directory.
docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Examples.razor
Outdated
Show resolved
Hide resolved
docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Examples.razor
Outdated
Show resolved
Hide resolved
desmondinho
left a comment
desmondinho
left a comment
There was a problem hiding this comment.
Hey @Denny09310 ,
Thank you so much for this PR! I really like the motivation behind it -- you picked a great component to work on :)
Overall, you did a very good job! There are just a few small things we should tweak before moving forward. If anything is unclear or you need help, please don’t hesitate to reach out.
If you enjoyed the process and want to contribute more, I’d recommend deepening your understanding of the repo by creating a couple more small components, such as Kbd and/or User. Honestly, Kbd seems both fun and easy to build. But of course, feel free to do both if you’d like. I’d be really happy and grateful either way!
Thanks again for contributing! ❤️
docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Examples.razor
Outdated
Show resolved
Hide resolved
desmondinho
changed the title
|
@desmondinho thanks a lot. I really like this library and want to contribute. I'll start fixing the things you've suggested and then try to create other small components 😁 |
Thank you! Your contribution is very helpful! And actually, if you feel ready to take on a bigger component, please go ahead! Sorry if I made it sound like I was setting boundaries :) |
|
No worries! I didn't even thought was meant that way. Instead I like making small components first to learn 😄 |
|
Hey @Denny09310, Probably you might have not noticed this due to a big amount of different comments.. but there is this comment, where I mention that there is no need for Here is also a comment regarding styles in this case. Let me know if you are unsure how to achieve what I am talking about. |
|
Yeah, sorry. I was unsure if leave it there or not. Edit: I've read the comment twice and, undoubtedly, you have told me to use the "Base" class 😅. Gonna change it today |
No worries! So, here you basically just remove everything that is related to slots:
|
…lass' as component parameter
|
Hopefully I've made everything correctly 😄 |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
src/LumexUI/Styles/Code.cs (1)
27-33: Size mapping matches prior guidance
Small→text-tiny,Medium→text-small,Large→text-mediumapplied as requested.src/LumexUI/Components/Code/LumexCode.razor.cs (1)
12-15: XML summary added and scoped to LumexCodeDocs header now present and clear. Matches prior feedback.
🧹 Nitpick comments (1)
docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/CustomStyles.razor (1)
3-5: Shorten fully-qualified component usage (optional)Add a
@using LumexUI.Docs.Client.Pages.Components.Code.Examplesand use<CustomStyles />for readability.-<PreviewCode Code="@new(name: null, snippet: "Code.Code.CustomStyles")"> - <LumexUI.Docs.Client.Pages.Components.Code.Examples.CustomStyles /> -</PreviewCode> +@using LumexUI.Docs.Client.Pages.Components.Code.Examples +<PreviewCode Code='@new(name: null, snippet: "Code.Code.CustomStyles")'> + <CustomStyles /> +</PreviewCode>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/LumexUI.Docs.Client/Pages/Components/Code/Code.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/CustomStyles.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/CustomStyles.razor(1 hunks)src/LumexUI/Components/Code/LumexCode.razor(1 hunks)src/LumexUI/Components/Code/LumexCode.razor.cs(1 hunks)src/LumexUI/Styles/Code.cs(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/CustomStyles.razor
🚧 Files skipped from review as they are similar to previous changes (2)
- docs/LumexUI.Docs.Client/Pages/Components/Code/Code.razor
- src/LumexUI/Components/Code/LumexCode.razor
🧰 Additional context used
🧬 Code graph analysis (2)
src/LumexUI/Components/Code/LumexCode.razor.cs (2)
src/LumexUI/Components/Bases/LumexComponentBase.cs (1)
LumexComponentBase(18-58)src/LumexUI/Styles/Code.cs (1)
GetStyles(56-65)
src/LumexUI/Styles/Code.cs (2)
src/LumexUI/Styles/ColorVariants.cs (1)
ColorVariants(5-78)src/LumexUI/Components/Code/LumexCode.razor.cs (2)
LumexCode(15-56)LumexCode(52-55)
🔇 Additional comments (3)
src/LumexUI/Components/Code/LumexCode.razor.cs (1)
46-47: Root class composition looks good
TwMerge.Merge(Code.GetStyles(this))aligns with the styling pattern.docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/CustomStyles.razor (2)
1-1: Confirm render mode consistency across PreviewCodesEnsure all files under docs/LumexUI.Docs.Client/Pages/Components/**/PreviewCodes use @rendermode InteractiveWebAssembly (or intentionally differ). Automated scan failed; verify locally and fix any mismatches.
3-5: Target-typed new is valid; embedded HTML snippet not found
- Target-typed new(name: null, snippet: "...") is valid — CodeBlock is declared at docs/LumexUI.Docs.Client/Common/CodeBlock.cs and PreviewCode.Code is CodeBlock (docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs); usage in docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/CustomStyles.razor is correct.
- I found no embedded Pages//*.html resource that contains "Code.Code.CustomStyles" (csproj embeds Pages//*.html at docs/LumexUI.Docs.Client/LumexUI.Docs.Client.csproj). Add/commit the generated HTML (resource name must contain "Code.Code.CustomStyles.html") or ensure your build step embeds it so CodeSnippet can load the snippet.
You were close! :) I understand that some parts might not have been very clear. Also, a few of the instructions were actually wrong -- that’s because I used two different approaches to composing style files, and I personally hadn’t applied the new style to no-slots components before :D The old style (where the styles are in separate methods) will be gone. I also added an example for Overall, you did a great job! Thanks again for contributing! |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #249 +/- ##
==========================================
- Coverage 96.95% 93.18% -3.78%
==========================================
Files 70 146 +76
Lines 1542 2579 +1037
Branches 150 390 +240
==========================================
+ Hits 1495 2403 +908
- Misses 28 92 +64
- Partials 19 84 +65 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
src/LumexUI/Styles/Code.cs (1)
68-81: Sizes follow the agreed downscaletext-tiny/small/medium reflect the prior feedback to downsize. Nice.
src/LumexUI/Components/Code/LumexCode.razor.cs (2)
19-47: Docs and parameters look goodSummaries use cref and grammar is fixed. Defaults match Styles.
48-83: Remove slot plumbing and GetStyles; use RootClass instead (matches “no slots” guidance)You don’t expose slots; per prior feedback, drop _slots and GetStyles and compute the base classes through RootClass. This simplifies the component and removes the slot artifact.
Apply this diff:
- private Dictionary<string, ComponentSlot> _slots = []; - - /// <summary> - /// Initializes a new instance of the <see cref="LumexCode"/>. - /// </summary> - public LumexCode() - { - As = "code"; - } - - /// <inheritdoc /> - protected override void OnParametersSet() - { - var code = Styles.Code.Style( TwMerge ); - _slots = code( new() - { - [nameof( Size )] = Size.ToString(), - [nameof( Color )] = Color.ToString(), - [nameof( Radius )] = Radius.ToString(), - } ); - } - - [ExcludeFromCodeCoverage] - private string? GetStyles( string slot ) - { - if( !_slots.TryGetValue( slot, out var styles ) ) - { - throw new NotImplementedException(); - } - - return slot switch - { - nameof( SlotBase.Base ) => styles( Class ), - _ => throw new NotImplementedException() - }; - } + /// <summary> + /// Initializes a new instance of the <see cref="LumexCode"/>. + /// </summary> + public LumexCode() + { + As = "code"; + } + + private protected override string? RootClass + => Styles.Code.Style( TwMerge )( new() + { + [nameof( Size )] = Size.ToString(), + [nameof( Color )] = Color.ToString(), + [nameof( Radius )] = Radius.ToString(), + } )[nameof( SlotBase.Base )]( Class );Follow-ups:
- Update LumexCode.razor to bind class to RootClass (remove any GetStyles("Base") usage).
🧹 Nitpick comments (1)
src/LumexUI/Styles/Code.cs (1)
36-66: Trim duplication in color variants (optional)The per-color blocks are repetitive. You can construct the VariantValueCollection from ColorVariants.Flat programmatically.
Apply this diff to replace the manual color mapping:
- [nameof( LumexCode.Color )] = new VariantValueCollection - { - [nameof( ThemeColor.Default )] = new SlotCollection - { - [nameof( SlotBase.Base )] = ColorVariants.Flat[ThemeColor.Default] - }, - [nameof( ThemeColor.Primary )] = new SlotCollection - { - [nameof( SlotBase.Base )] = ColorVariants.Flat[ThemeColor.Primary] - }, - [nameof( ThemeColor.Secondary )] = new SlotCollection - { - [nameof( SlotBase.Base )] = ColorVariants.Flat[ThemeColor.Secondary] - }, - [nameof( ThemeColor.Success )] = new SlotCollection - { - [nameof( SlotBase.Base )] = ColorVariants.Flat[ThemeColor.Success] - }, - [nameof( ThemeColor.Warning )] = new SlotCollection - { - [nameof( SlotBase.Base )] = ColorVariants.Flat[ThemeColor.Warning] - }, - [nameof( ThemeColor.Danger )] = new SlotCollection - { - [nameof( SlotBase.Base )] = ColorVariants.Flat[ThemeColor.Danger] - }, - [nameof( ThemeColor.Info )] = new SlotCollection - { - [nameof( SlotBase.Base )] = ColorVariants.Flat[ThemeColor.Info] - }, - }, + [nameof( LumexCode.Color )] = new VariantValueCollection + { + // Build from the dictionary so future ThemeColor additions auto-flow here. + // Note: Enum.ToString() matches keys used in VariantValueCollection. + [.. ColorVariants.Flat.Select(kv => new KeyValuePair<string, SlotCollection?>( + kv.Key.ToString(), + new SlotCollection { [nameof(SlotBase.Base)] = kv.Value } + ))] + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs/LumexUI.Docs.Client/Pages/Components/Code/Code.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Colors.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/CustomStyles.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Radii.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Sizes.razor(1 hunks)docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Radius.razor(1 hunks)src/LumexUI/Components/Code/LumexCode.razor(1 hunks)src/LumexUI/Components/Code/LumexCode.razor.cs(1 hunks)src/LumexUI/Styles/Code.cs(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- docs/LumexUI.Docs.Client/Pages/Components/Code/PreviewCodes/Radius.razor
- docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/CustomStyles.razor
🚧 Files skipped from review as they are similar to previous changes (3)
- src/LumexUI/Components/Code/LumexCode.razor
- docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Sizes.razor
- docs/LumexUI.Docs.Client/Pages/Components/Code/Code.razor
🧰 Additional context used
🧬 Code graph analysis (2)
src/LumexUI/Styles/Code.cs (5)
src/LumexUI/Components/Code/LumexCode.razor.cs (3)
ExcludeFromCodeCoverage(70-83)LumexCode(17-84)LumexCode(53-56)src/LumexUI/Utilities/Variants/VariantCollection.cs (1)
VariantCollection(9-34)src/LumexUI/Utilities/Variants/VariantValueCollection.cs (1)
VariantValueCollection(9-34)src/LumexUI/Utilities/Variants/SlotCollection.cs (1)
SlotCollection(9-34)src/LumexUI/Styles/ColorVariants.cs (1)
ColorVariants(5-78)
src/LumexUI/Components/Code/LumexCode.razor.cs (3)
src/LumexUI/Components/Bases/LumexComponentBase.cs (1)
LumexComponentBase(18-58)src/LumexUI/Utilities/Variants/TwVariants.cs (1)
ComponentSlot(112-115)src/LumexUI/Styles/Code.cs (1)
ExcludeFromCodeCoverage(14-110)
🔇 Additional comments (5)
docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Radii.razor (1)
1-7: LGTM — clear radius showcaseReads well and aligns with the component API. No issues.
docs/LumexUI.Docs.Client/Pages/Components/Code/Examples/Colors.razor (1)
1-9: LGTM — complete color matrixCovers all ThemeColor values, including Info. No issues.
src/LumexUI/Styles/Code.cs (2)
23-33: Solid base stylesBase classes look good for inline code (mono, compact padding, nowrap). No changes needed.
84-106: Radius variants look correctAll enum values are covered; defaults align with component defaults.
src/LumexUI/Components/Code/LumexCode.razor.cs (1)
61-67: Verify TwMerge DI lifetime before static cachingsrc/LumexUI/Extensions/ServiceCollectionExtensions.cs calls services.AddTailwindMerge(...), but the AddTailwindMerge implementation isn’t in this repo; tests register TwMerge as a singleton (e.g. many tests call Services.AddSingleton()). Confirm AddTailwindMerge actually registers TwMerge as Singleton — if it’s Scoped/Transient, stop capturing the TwMerge instance in a static ComponentVariant and instead cache per-TwMerge instance or move the cache into TwVariants/instance scope.
2 participants
Description
What's been done?
Checklist
Additional Notes
This is a very simple component chosen intentionally so I can get familiar with the codebase, coding style, and logic behind component development in this project. The goal was to start small before contributing to more complex features.
Summary by CodeRabbit
New Features
Documentation
Tests
Chores