KIR-610 membership card#89
Merged
Merged
Conversation
tomitheninja
commented
Jun 8, 2026
tomitheninja
commented
Collaborator
- feat: add typography components for design system
- style: Set accent colors
- style: Introduce glass effect
- style: Introduce extra utilities
- style: Tokenize layout
- style: Text component enhancements
- chore: Sort tailwind classes
- card manual
- card shadcn
- Reimplement membership-card
- style: Update membership card style
- fix: Make endDate optional in MembershipCard props
- feat: Enhance MembershipCard design via AI
- feat: Add UserAvatar component with various tiers and sizes
- feat: glassmorphism sheet
- fix formatting
Co-authored-by: Claude <claude@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Introduces “PDS v4” design-system foundations (typography, glassmorphism tokens/utilities) and new UI components (UserAvatar, Sheet, MembershipCard), while also adding tooling/support config (react-doctor, Biome, Storybook).
Changes:
- Added PDS v4 CSS tokens/utilities (tiers, glass effects, spacing tokens) and updated dark-mode selector approach.
- Added new design-system components + Storybook stories (typography, sheet, user-avatar, membership-card).
- Updated UI primitives and tooling config (Card uses PDS typography, Button variant tweaks, Biome config changes, react-doctor dependency/config).
Reviewed changes
Copilot reviewed 21 out of 22 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| package-lock.json | Locks new dev dependency graph including react-doctor. |
| full-stack/package.json | Adds react-doctor devDependency. |
| full-stack/react-doctor.config.json | Configures react-doctor ignores. |
| biome.json | Enables Biome useSortedClasses (configuration updated in this PR). |
| full-stack/biome.json | Expands Biome include paths to cover Storybook config. |
| full-stack/tsconfig.json | Adds @pds4/* path alias for design-system imports. |
| full-stack/.storybook/preview.tsx | Wraps stories with TooltipProvider and imports global styles. |
| full-stack/src/styles.css | Adds PDS v4 tokens/utilities (tiers, glass, spacing) and changes dark-mode selector. |
| full-stack/src/components/ui/button.tsx | Updates button base/variants/sizes (incl. focus ring handling). |
| full-stack/src/components/ui/card.tsx | Switches CardTitle/CardDescription to use PDS typography components. |
| full-stack/src/components/header.tsx | Tailwind class ordering/formatting adjustments. |
| full-stack/src/routes/index.tsx | Tailwind class ordering/formatting adjustments. |
| full-stack/src/routes/user/profile.tsx | Tailwind class ordering/formatting adjustments. |
| full-stack/src/devtools/tanstack-store.devtools.tsx | Tailwind class ordering/formatting adjustments. |
| full-stack/src/components/design-system/typography.tsx | Adds design-system typography primitives (Title/Subtitle/Text/etc.). |
| full-stack/src/components/design-system/typography.stories.tsx | Adds Storybook stories for typography scale. |
| full-stack/src/components/design-system/user-avatar.tsx | Adds tiered/avatar component with badge variants. |
| full-stack/src/components/design-system/user-avatar.stories.tsx | Adds Storybook stories for UserAvatar variants. |
| full-stack/src/components/design-system/sheet.tsx | Adds glassmorphism-wrapped Sheet primitives. |
| full-stack/src/components/design-system/sheet.stories.tsx | Adds Storybook stories for Sheet variants. |
| full-stack/src/components/design-system/membership-card.tsx | Adds MembershipCard component using new tokens/typography. |
| full-stack/src/components/design-system/membership-card.stories.tsx | Adds Storybook stories for MembershipCard. |
Comment on lines
7
to
9
| const buttonVariants = cva( | ||
| "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", | ||
| "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", | ||
| { |
Comment on lines
+163
to
+168
| className={cn( | ||
| 'relative flex min-h-fit min-w-fit cursor-pointer items-center rounded-2xl p-card!', | ||
| 'bg-muted/40! opacity-70 transition-opacity duration-fast', | ||
| 'group/activity overflow-hidden hover:opacity-100', | ||
| className | ||
| )} |
Comment on lines
+1
to
+5
| import { cva } from 'class-variance-authority'; | ||
| import { cn } from '@/lib/utils'; | ||
| import { Button } from '../ui/button'; | ||
| import { Card, CardContent, CardHeader } from '../ui/card'; | ||
| import { Detail, Subtitle, Text } from './typography'; |
Comment on lines
+16
to
+22
| const baseProps = { | ||
| groupName: 'Szent Schönherz Senior Lovagrend', | ||
| groupAvatarFallback: 'SS', | ||
| roles: 'körvezeto, gazdaságis', | ||
| membershipType: 'TAG', | ||
| startDate: '2020 mar', | ||
| }; |
Comment on lines
+1
to
+18
| import type { ComponentProps } from 'react'; | ||
| import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; | ||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| export type UserAvatarTier = | ||
| | 'tier-1' | ||
| | 'tier-2' | ||
| | 'active' | ||
| | 'inactive' | ||
| | 'unknown'; | ||
| export type UserAvatarSize = 'sm' | 'default' | 'lg'; | ||
|
|
||
| export interface UserAvatarProps extends ComponentProps<typeof Avatar> { | ||
| tier?: UserAvatarTier; | ||
| size?: UserAvatarSize; | ||
| showBadge?: boolean; | ||
| children?: React.ReactNode; | ||
| } |
Comment on lines
+33
to
+40
| className={cn( | ||
| 'relative rounded-full', | ||
| // Ring styling per tier | ||
| 'ring-4 data-[size=lg]:ring-6 data-[size=sm]:ring-2', | ||
| 'ring-transparent data-[tier=active]:ring-tier-3-start data-[tier=inactive]:ring-tier-inactive data-[tier=tier-1]:ring-tier-1-start data-[tier=tier-2]:ring-tier-2-start', | ||
| // Size styling | ||
| 'data-[size=default]:size-30 data-[size=lg]:size-50 data-[size=sm]:size-10', | ||
| className |
Comment on lines
+78
to
+83
| className={cn( | ||
| 'flex size-full items-center justify-center rounded-full', | ||
| 'font-semibold text-lg', | ||
| 'data-[size=sm]:text-xs', | ||
| 'data-[size=lg]:text-3xl', | ||
| className |
Comment on lines
+49
to
+56
| "useSortedClasses": { | ||
| "level": "on", | ||
| "fix": "safe", | ||
| "options": { | ||
| "attributes": ["classList"], | ||
| "functions": ["clsx", "cva", "tw", "tw.*"] | ||
| } | ||
| } |
| @import "@fontsource-variable/geist"; | ||
|
|
||
| @custom-variant dark (&:is(.dark *)); | ||
| @custom-variant dark (&:is([data-theme="dark"] *)); |
Comment on lines
+84
to
+85
| [data-theme="dark"] { | ||
| --tier-1-start: oklch(0.44 0.33 322.15); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.