Skip to content

Card#41

Open
Diubii wants to merge 26 commits intomainfrom
Diubii/card
Open

Card#41
Diubii wants to merge 26 commits intomainfrom
Diubii/card

Conversation

@Diubii
Copy link
Copy Markdown
Contributor

@Diubii Diubii commented Mar 11, 2026

Closes #14

@Diubii Diubii self-assigned this Mar 11, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 11, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 69041532-64e2-4cda-8db1-5a43c2f0b9aa

📥 Commits

Reviewing files that changed from the base of the PR and between 1fbb836 and 3b6aa56.

📒 Files selected for processing (2)
  • src/components/card-path-selection.tsx
  • src/components/ui/card.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/card-path-selection.tsx

Walkthrough

Adds a foundational Card UI module with slot-based subcomponents and four new presentational card components: CardCaption, CardCourse, CardCourseGroup, and CardPathSelection. All components are presentational; no side effects, network calls, or runtime behavior changes were introduced. (47 words)

Changes

Cohort / File(s) Summary
Base Card System
src/components/ui/card.tsx
New Card UI suite built on Glass: Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardBottomButton. Adds size variants, data-slot attributes, merged className handling, size-dependent padding, and optional SVG gradient support for icons using React.useId().
Specialized Card Components
src/components/card-caption.tsx, src/components/card-course.tsx, src/components/card-course-group.tsx, src/components/card-path-selection.tsx
Four new presentational components using the Card system: CardCaption (title, caption, optional icon, iconPosition), CardCourse (courseName, location/language props, select icon), CardCourseGroup (groupName, optional WhatsApp/Telegram actions, secondary CVA variant), and CardPathSelection (fixed-size icon + caption). Prop types and defaults defined for each.

Possibly related PRs

  • feat: add card-course #63: Modifies the same Card UI module and adds course/group style card components that overlap with src/components/ui/card.tsx, CardCourse, and CardCourseGroup.
🚥 Pre-merge checks | ✅ 1 | ❌ 3

❌ Failed checks (1 warning, 2 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'Card' is vague and generic, providing minimal information about the specific changes or which card component was added. Use a more descriptive title such as 'Add Card component suite with variants' or 'Implement reusable Card UI components' to clarify the scope of changes.
Linked Issues check ❓ Inconclusive Issue #14 provides no coding requirements or specifications, making it impossible to validate whether the implementation meets stated objectives. Review issue #14 for detailed requirements, or consult with reviewers to clarify expected functionality and implementation scope.
✅ Passed checks (1 passed)
Check name Status Explanation
Out of Scope Changes check ✅ Passed All changes are related to Card component implementations; no unrelated modifications detected outside the component scope.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Diubii Diubii changed the title Card CardCaption Mar 17, 2026
@Diubii Diubii changed the title CardCaption Card Mar 17, 2026
Diubii added 18 commits April 2, 2026 14:17
* created cardCaption.tsx

* Updated card-caption to use react-icons

* Adjusted font sizes

* Updated card-caption to use react-icons

* Adjusted font sizes

* chore: biome

* feat: typography

* aligned card.tsx between all cards

* fix: homepage cards layout

* chore: biome
* created cardCaption.tsx

* Updated card-caption to use react-icons

* Adjusted font sizes

* Added path selection cards

* chore: biome

* Updated card-caption to use react-icons

* Adjusted font sizes

* Added path selection cards

* chore: biome

* rm: card-caption from this branch

* fix: typography

* fix: imports and home layout

* remove: bg-background-blur
* feat: card-groups initial commit

* fix: spacing between elements

* chore: biome

* fix: homepage layout for cards

* remove: bg-background-blur

* chore: biome
* feat: card-course-group initial commit

* chore: biome

* fix: make text and icons black

* feat: added cards to homepage; feat: added bg-background-blur to the card

* remove: bg-background-blur

* remove: truncate class

* feat: secondary variant

* chore: biome

* chore: biome
@Diubii Diubii marked this pull request as ready for review April 9, 2026 19:42
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (3)
src/components/card-course-group.tsx (1)

42-57: Extract duplicated action styling into one variable.

The two CardAction branches repeat the same class computation; extracting it will simplify future style changes.

Proposed patch
 export function CardCourseGroup({
@@
 } & VariantProps<typeof cardCourseGroupVariants>) {
+  const actionClassName = cn("rounded-full p-3.75", secondary ? "bg-[`#51A2FF`]" : "bg-[`#74D4FF`]")
+
   return (
     <Card className={cn(cardCourseGroupVariants({ secondary }))}>
@@
       {hasWhatsapp && (
         <CardAction
           gradient={false}
-          className={cn("rounded-full p-3.75", secondary ? "bg-[`#51A2FF`]" : "bg-[`#74D4FF`]")}
+          className={actionClassName}
           icon={IconWhatsApp}
           iconSize="normal"
         />
       )}
       {hasTelegram && (
         <CardAction
           gradient={false}
-          className={cn("rounded-full p-3.75", secondary ? "bg-[`#51A2FF`]" : "bg-[`#74D4FF`]")}
+          className={actionClassName}
           icon={IconTelegram}
           iconSize="normal"
         />
       )}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/card-course-group.tsx` around lines 42 - 57, The two
CardAction render branches duplicate the same className computation; extract the
computed class into a local variable (e.g., actionClass) before the JSX and use
it for both CardAction components so future style changes are in one place.
Compute actionClass using the existing cn call and the secondary prop logic (the
same expression used now for className), then replace className={cn(...)} in
both CardAction usages with className={actionClass}; keep all other props
(gradient, icon, iconSize) unchanged and reference hasWhatsapp and hasTelegram
as before.
src/components/card-path-selection.tsx (1)

12-12: TODO left in component source.

Line 12 still has an inline TODO (add hover effect). If this is post-MVP work, consider opening a follow-up issue and referencing it here.

If useful, I can draft the hover-state implementation and a small issue template for it.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/card-path-selection.tsx` at line 12, Remove the inline TODO
comment "//TODO: add hover effect" from the CardPathSelection component and
either implement a minimal hover state now or replace the TODO with a one-line
task reference to a created follow-up issue (e.g., "TODO: see ISSUE-123 for
hover-state work") so the codebase contains no dangling todos; locate the
comment in the CardPathSelection component (card-path-selection.tsx) and update
the file to either implement the hover effect in the component's styles/JSX or
annotate the TODO with the issue ID and a short note about scope (post-MVP).
src/components/ui/card.tsx (1)

61-61: Make iconSize optional in the prop type to match the default.

iconSize has a runtime default of "normal" (line 58) but the type (line 61) requires it, making the API stricter than necessary.

Proposed patch
-}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "small" | "normal" | "large"; gradient?: boolean }) {
+}: React.ComponentProps<"div"> & { icon: IconType; iconSize?: "small" | "normal" | "large"; gradient?: boolean }) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/card.tsx` at line 61, The prop type currently requires
iconSize even though the component assigns a default of "normal"; make iconSize
optional in the component's props type by changing the declaration for iconSize
to iconSize?: "small" | "normal" | "large" so the runtime default (set near line
58) matches the TypeScript type—update the props object/type used in the
function signature in src/components/ui/card.tsx (the iconSize prop)
accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/ui/card.tsx`:
- Around line 71-73: The non-visual SVG that defines the gradient (the <svg>
using gradientId) is currently reachable by assistive tech; update that SVG to
be ignored by screen readers by adding aria-hidden="true" and
role="presentation" (and focusable="false" for IE/SVG compatibility) and remove
the <title> element so it won't be announced; locate the SVG in
src/components/ui/card.tsx around the gradientId usage and apply those
attributes and remove the title element.

---

Nitpick comments:
In `@src/components/card-course-group.tsx`:
- Around line 42-57: The two CardAction render branches duplicate the same
className computation; extract the computed class into a local variable (e.g.,
actionClass) before the JSX and use it for both CardAction components so future
style changes are in one place. Compute actionClass using the existing cn call
and the secondary prop logic (the same expression used now for className), then
replace className={cn(...)} in both CardAction usages with
className={actionClass}; keep all other props (gradient, icon, iconSize)
unchanged and reference hasWhatsapp and hasTelegram as before.

In `@src/components/card-path-selection.tsx`:
- Line 12: Remove the inline TODO comment "//TODO: add hover effect" from the
CardPathSelection component and either implement a minimal hover state now or
replace the TODO with a one-line task reference to a created follow-up issue
(e.g., "TODO: see ISSUE-123 for hover-state work") so the codebase contains no
dangling todos; locate the comment in the CardPathSelection component
(card-path-selection.tsx) and update the file to either implement the hover
effect in the component's styles/JSX or annotate the TODO with the issue ID and
a short note about scope (post-MVP).

In `@src/components/ui/card.tsx`:
- Line 61: The prop type currently requires iconSize even though the component
assigns a default of "normal"; make iconSize optional in the component's props
type by changing the declaration for iconSize to iconSize?: "small" | "normal" |
"large" so the runtime default (set near line 58) matches the TypeScript
type—update the props object/type used in the function signature in
src/components/ui/card.tsx (the iconSize prop) accordingly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 18c9061f-6b8d-49fc-9473-f3348ab7ba50

📥 Commits

Reviewing files that changed from the base of the PR and between 615d1bd and cd4e805.

📒 Files selected for processing (5)
  • src/components/card-caption.tsx
  • src/components/card-course-group.tsx
  • src/components/card-course.tsx
  • src/components/card-path-selection.tsx
  • src/components/ui/card.tsx

Comment thread src/components/ui/card.tsx Outdated
@Diubii
Copy link
Copy Markdown
Contributor Author

Diubii commented Apr 9, 2026

Ci sarà da aggiungere l'hover effect di @BIA3IA

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (1)
src/components/ui/card.tsx (1)

71-73: ⚠️ Potential issue | 🟡 Minor

Finish the decorative SVG accessibility cleanup.

Line 72 still includes a <title> inside the non-visual gradient helper SVG. Since this SVG is decorative, remove the title and mark it presentational to avoid assistive-tech noise.

Suggested patch
-        <svg width="0" height="0" className="absolute" aria-hidden="true" focusable="false">
-          <title>Icon gradient helper</title>
+        <svg width="0" height="0" className="absolute" aria-hidden="true" role="presentation" focusable="false">
           <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/card.tsx` around lines 71 - 73, Remove the non‑visual
<title> element from the decorative SVG and mark the SVG as presentational:
delete the <title> line and add role="presentation" to the <svg> element (the
element that uses gradientId in src/components/ui/card.tsx) while keeping
aria-hidden="true" and focusable="false".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@src/components/ui/card.tsx`:
- Around line 71-73: Remove the non‑visual <title> element from the decorative
SVG and mark the SVG as presentational: delete the <title> line and add
role="presentation" to the <svg> element (the element that uses gradientId in
src/components/ui/card.tsx) while keeping aria-hidden="true" and
focusable="false".

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c91ffba4-2ea5-4b78-b746-071cd3ffa9b0

📥 Commits

Reviewing files that changed from the base of the PR and between cd4e805 and 1fbb836.

📒 Files selected for processing (2)
  • src/components/card-course-group.tsx
  • src/components/ui/card.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/card-course-group.tsx

@lorenzocorallo lorenzocorallo self-requested a review April 9, 2026 22:27
Copy link
Copy Markdown
Contributor

@toto04 toto04 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

due commentini tanto i componenti li ho già visti nelle singole PR

Comment thread src/components/ui/card.tsx Outdated
Comment thread src/components/card-path-selection.tsx Outdated
@Diubii
Copy link
Copy Markdown
Contributor Author

Diubii commented Apr 14, 2026

Okk, stasera procedo con le modifiche

@Diubii Diubii requested a review from toto04 April 14, 2026 19:25
@Diubii
Copy link
Copy Markdown
Contributor Author

Diubii commented Apr 14, 2026

Fatto, scusate per il ritardo. Bisogna cambiare qualcosa riguardo la struttura della directory dei components? Vedo che Bianca sta creando nuove cartelle per i suoi, per ora io ho card.tsx sotto components/ui mentre i derivati sotto components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Card

3 participants