Skip to content

Commit 37f9947

Browse files
thevuongthevuong
authored
Feature/payment method (#2)
* feat(payment-method): add radio card selection UI Introduce a new RadioCards component in the payment method form to enhance user experience. This change allows users to visually select between different payment options like card, PayPal, and Apple Pay. * chore: update turbo and eslint-config-turbo to 2.2.1 Upgraded turbo and eslint-config-turbo versions from 2.2.0 to 2.2.1. Also added focus and transition styles to radio-cards component, and adjusted code style settings for soft margins to 120 in Project.xml. * fix(ui): update focus-visible styles in calendar component Updated the focus-visible styles to improve visual clarity and accessibility. The changes include replacing the ring style with a more detailed outline style, ensuring a better focus indicator for users. * refactor: replace RadioGroup with RadioCards component Simplified the payment method selection by replacing the RadioGroup component with the more versatile RadioCards component. This change reduces redundancy and enhances code readability. * fix: update focus-visible ring color and order Standardize the focus-visible ring color across components and toggle focus-visible ring order in Tailwind plugin. This improves consistency and ensures the focus styles match the new design guidelines. * feat: update primary and ring color variables Changed the primary color from sky-900 to sky-600 and the ring color from sky-500 to sky-400. These updates refine the visual design for better contrast and accessibility. * chore: remove redundant space-x-3 class from FormItem components Removed the unnecessary 'space-x-3' class from the FormItem components in the notifications form. This change simplifies the class definitions while maintaining the same visual layout. * fix: remove unnecessary space-x-3 class from FormItem Removed redundant space-x-3 class from several FormItem components to simplify the layout styling. This change ensures consistent spacing and alignment across the forms and stories. * fix: enhance focus-visible styles with ring offset Added focus-visible ring offset to improve visual clarity across multiple components. This enhances accessibility and visual feedback for users focusing on elements such as buttons, inputs, and switches. * feat(ui): enhance radio button styling Added shadow effect for radio buttons and adjusted focus styles for better visibility. The changes improve the visual feedback and accessibility. * refactor: improve styling for radio and slider components Enhance styling consistency across radio, radio group, and slider components. Introduce refined class names and structure to better align with design requirements and ensure more predictable behavior. * chore: revert React and TypeScript versions to stable releases Reverted React versions from 19.0.0-rc to 18.3.1 for stable support. Adjusted TypeScript configurations accordingly to ensure compatibility and stability across applications and packages. * chore: update react and associated dependencies to v19 Upgrade react, react-dom, and related packages to version 19.0.0-rc, along with their type definitions. This ensures compatibility with the latest React release and prepares the codebase for future updates. * refactor: update multiple components and hooks Enhanced `DayButton` props for better type safety, modified `useRef` initialization in `use-event` hook, converted `MailPage` to async for cookie handling, and improved key assignments in `nav` and `carousel` components to ensure stability. * refactor: update component styling and border-color variables Refactored styling for Checkbox, Radio, and Slider components to ensure better alignment and consistency. Modified global.css to update the input border color variable. * chore: update dependencies in pnpm-lock.yaml Updated various dependencies to their latest versions to ensure compatibility and take advantage of the latest fixes and features. Notable updates include `next` to 15.0.1, `turbo` to 2.2.3, and `chromatic` to 11.14.0.
1 parent 553d2e1 commit 37f9947

33 files changed

+1337
-1481
lines changed

‎.changeset/config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
2+
"$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
33
"changelog": "@changesets/cli/changelog",
44
"baseBranch": "main",
55
"commit": false,

‎.idea/codeStyles/Project.xml

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/docs/app/examples/cards/_components/payment-method.tsx

Lines changed: 27 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
CardHeader,
88
CardTitle,
99
Label,
10-
RadioGroup,
11-
RadioGroupItem,
10+
RadioCards,
11+
RadioCardsItem,
1212
Select,
1313
SelectContent,
1414
SelectItem,
@@ -28,50 +28,32 @@ export function PaymentMethod(): JSX.Element {
2828
<CardDescription>Add a new payment method to your account.</CardDescription>
2929
</CardHeader>
3030
<CardContent className="grid gap-6">
31-
<RadioGroup className="grid grid-cols-3 gap-4" defaultValue="card">
32-
<div>
33-
<RadioGroupItem className="peer sr-only" id="card" value="card" />
34-
<Label
35-
className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
36-
htmlFor="card"
31+
<RadioCards className="grid-cols-1 sm:grid-cols-3" defaultValue="card">
32+
<RadioCardsItem className="flex-col gap-3 text-sm font-medium leading-none" value="card">
33+
<svg
34+
className="size-6"
35+
fill="none"
36+
stroke="currentColor"
37+
strokeLinecap="round"
38+
strokeLinejoin="round"
39+
strokeWidth="2"
40+
viewBox="0 0 24 24"
41+
xmlns="http://www.w3.org/2000/svg"
3742
>
38-
<svg
39-
className="mb-3 size-6"
40-
fill="none"
41-
stroke="currentColor"
42-
strokeLinecap="round"
43-
strokeLinejoin="round"
44-
strokeWidth="2"
45-
viewBox="0 0 24 24"
46-
xmlns="http://www.w3.org/2000/svg"
47-
>
48-
<rect height="14" rx="2" width="20" x="2" y="5" />
49-
<path d="M2 10h20" />
50-
</svg>
51-
Card
52-
</Label>
53-
</div>
54-
<div>
55-
<RadioGroupItem className="peer sr-only" id="paypal" value="paypal" />
56-
<Label
57-
className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
58-
htmlFor="paypal"
59-
>
60-
<Icons.Paypal className="mb-3 size-6" />
61-
Paypal
62-
</Label>
63-
</div>
64-
<div>
65-
<RadioGroupItem className="peer sr-only" id="apple" value="apple" />
66-
<Label
67-
className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
68-
htmlFor="apple"
69-
>
70-
<Icons.Apple className="mb-3 size-6" />
71-
Apple
72-
</Label>
73-
</div>
74-
</RadioGroup>
43+
<rect height="14" rx="2" width="20" x="2" y="5" />
44+
<path d="M2 10h20" />
45+
</svg>
46+
Card
47+
</RadioCardsItem>
48+
<RadioCardsItem className="flex-col gap-3 text-sm font-medium leading-none" value="paypal">
49+
<Icons.Paypal className="mb-3 size-6" />
50+
Paypal
51+
</RadioCardsItem>
52+
<RadioCardsItem className="flex-col gap-3 text-sm font-medium leading-none" value="apple">
53+
<Icons.Apple className="mb-3 size-6" />
54+
Apple
55+
</RadioCardsItem>
56+
</RadioCards>
7557
<div className="grid gap-2">
7658
<Label htmlFor="name">Name</Label>
7759
<TextInput id="name" placeholder="First Last" />

‎apps/docs/app/examples/forms/display/_components/display-form.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export function DisplayForm(): JSX.Element {
9292
name="items"
9393
render={({ field }) => {
9494
return (
95-
<FormItem key={item.id} className="flex flex-row items-start space-x-3 space-y-0">
95+
<FormItem key={item.id} className="flex flex-row items-start space-y-0">
9696
<FormControl>
9797
<Checkbox
9898
checked={field.value.includes(item.id)}

‎apps/docs/app/examples/forms/notifications/_components/notifications-form.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,19 +75,19 @@ export function NotificationsForm(): JSX.Element {
7575
defaultValue={field.value}
7676
onValueChange={field.onChange}
7777
>
78-
<FormItem className="flex items-center space-x-3 space-y-0">
78+
<FormItem className="flex items-center space-y-0">
7979
<FormControl>
8080
<RadioGroupItem value="all" />
8181
</FormControl>
8282
<FormLabel className="font-normal">All new messages</FormLabel>
8383
</FormItem>
84-
<FormItem className="flex items-center space-x-3 space-y-0">
84+
<FormItem className="flex items-center space-y-0">
8585
<FormControl>
8686
<RadioGroupItem value="mentions" />
8787
</FormControl>
8888
<FormLabel className="font-normal">Direct messages and mentions</FormLabel>
8989
</FormItem>
90-
<FormItem className="flex items-center space-x-3 space-y-0">
90+
<FormItem className="flex items-center space-y-0">
9191
<FormControl>
9292
<RadioGroupItem value="none" />
9393
</FormControl>
@@ -168,7 +168,7 @@ export function NotificationsForm(): JSX.Element {
168168
control={form.control}
169169
name="mobile"
170170
render={({ field }) => (
171-
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
171+
<FormItem className="flex flex-row items-start space-y-0">
172172
<FormControl>
173173
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
174174
</FormControl>

‎apps/docs/app/examples/mail/_components/nav.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,9 @@ export function Nav({ links, isCollapsed }: NavProps): JSX.Element {
1717
return (
1818
<div className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2" data-collapsed={isCollapsed}>
1919
<nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
20-
{links.map((link, index) =>
20+
{links.map((link) =>
2121
isCollapsed ? (
22-
// eslint-disable-next-line react/no-array-index-key -- we don't expect the links to change
23-
<Tooltip key={index} delayDuration={0}>
22+
<Tooltip key={link.label} delayDuration={0}>
2423
<TooltipTrigger asChild>
2524
<Link
2625
className={cn(
@@ -42,8 +41,7 @@ export function Nav({ links, isCollapsed }: NavProps): JSX.Element {
4241
</Tooltip>
4342
) : (
4443
<Link
45-
// eslint-disable-next-line react/no-array-index-key -- we don't expect the links to change
46-
key={index}
44+
key={link.label}
4745
className={cn(
4846
buttonVariants({ variant: link.variant, size: 'sm' }),
4947
link.variant === 'default' && 'dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white',

‎apps/docs/app/globals.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@
128128
|---------------------------------------------------------------------------
129129
| Used for primary actions such as <Button variant="primary">
130130
--------------------------------------------------------------------------*/
131-
--primary: var(--sky-700);
131+
--primary: var(--sky-600);
132132
--primary-foreground: var(--sky-50);
133133

134134
/*--------------------------------------------------------------------------
@@ -225,14 +225,14 @@
225225
|---------------------------------------------------------------------------
226226
| Border color for inputs such as TextInput, NumberInput, TextArea.
227227
--------------------------------------------------------------------------*/
228-
--input: var(--border);
228+
--input: var(--slate-400);
229229

230230
/*--------------------------------------------------------------------------
231231
| Ring Color
232232
|---------------------------------------------------------------------------
233233
| Used for focus ring
234234
--------------------------------------------------------------------------*/
235-
--ring: var(--primary);
235+
--ring: var(--sky-400);
236236

237237
/*--------------------------------------------------------------------------
238238
| Chart Colors

‎apps/docs/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
"jotai": "2.10.1",
3030
"lodash-es": "4.17.21",
3131
"lucide-react": "0.453.0",
32-
"next": "15.0.0-canary.202",
33-
"react": "19.0.0-rc-b8ae38f8-20241018",
34-
"react-dom": "19.0.0-rc-b8ae38f8-20241018",
32+
"next": "15.0.1",
33+
"react": "19.0.0-rc-65a56d0e-20241020",
34+
"react-dom": "19.0.0-rc-65a56d0e-20241020",
3535
"react-hook-form": "7.53.1",
3636
"recharts": "2.13.0",
3737
"zod": "3.23.8"
@@ -54,12 +54,12 @@
5454
"@types/react": "npm:[email protected]",
5555
"@types/react-dom": "npm:[email protected]",
5656
"autoprefixer": "10.4.20",
57-
"chromatic": "11.12.6",
57+
"chromatic": "11.14.0",
5858
"concurrently": "9.0.1",
5959
"eslint": "8.57.1",
60-
"eslint-config-next": "15.0.0-canary.202",
61-
"eslint-config-turbo": "2.2.0",
62-
"eslint-plugin-storybook": "0.9.0",
60+
"eslint-config-next": "15.0.1",
61+
"eslint-config-turbo": "2.2.3",
62+
"eslint-plugin-storybook": "0.10.1",
6363
"postcss": "8.4.47",
6464
"serve": "14.2.4",
6565
"storybook": "8.3.6",

‎apps/docs/stories/carousel.stories.tsx

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -34,26 +34,29 @@ type Story = StoryObj<typeof Carousel>;
3434
* -------------------------------------------------------------------------- */
3535

3636
export const Default: Story = {
37-
render: (args) => (
38-
<Carousel className="w-full max-w-xs" {...args}>
39-
<CarouselContent>
40-
{Array.from({ length: 5 }).map((_, index) => (
41-
// eslint-disable-next-line react/no-array-index-key -- okay for static content
42-
<CarouselItem key={index}>
43-
<div className="p-1">
44-
<Card>
45-
<CardContent className="flex aspect-square items-center justify-center p-6">
46-
<span className="text-4xl font-semibold">{index + 1}</span>
47-
</CardContent>
48-
</Card>
49-
</div>
50-
</CarouselItem>
51-
))}
52-
</CarouselContent>
53-
<CarouselPrevious />
54-
<CarouselNext />
55-
</Carousel>
56-
),
37+
render: (args) => {
38+
const numbers = Array.from({ length: 5 }, (_, index) => index + 1);
39+
40+
return (
41+
<Carousel className="w-full max-w-xs" {...args}>
42+
<CarouselContent>
43+
{numbers.map((number, index) => (
44+
<CarouselItem key={number}>
45+
<div className="p-1">
46+
<Card>
47+
<CardContent className="flex aspect-square items-center justify-center p-6">
48+
<span className="text-4xl font-semibold">{index + 1}</span>
49+
</CardContent>
50+
</Card>
51+
</div>
52+
</CarouselItem>
53+
))}
54+
</CarouselContent>
55+
<CarouselPrevious />
56+
<CarouselNext />
57+
</Carousel>
58+
);
59+
},
5760
};
5861

5962
/* -----------------------------------------------------------------------------

‎apps/docs/stories/checkbox-group.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,19 +110,19 @@ export const ReactHookForm: Story = {
110110
defaultValue={field.value}
111111
onValueChange={field.onChange}
112112
>
113-
<FormItem className="flex items-center space-x-3 space-y-0">
113+
<FormItem className="flex items-center space-y-0">
114114
<FormControl>
115115
<CheckboxGroupItem value="all" />
116116
</FormControl>
117117
<FormLabel className="font-normal">All new messages</FormLabel>
118118
</FormItem>
119-
<FormItem className="flex items-center space-x-3 space-y-0">
119+
<FormItem className="flex items-center space-y-0">
120120
<FormControl>
121121
<CheckboxGroupItem value="mentions" />
122122
</FormControl>
123123
<FormLabel className="font-normal">Direct messages and mentions</FormLabel>
124124
</FormItem>
125-
<FormItem className="flex items-center space-x-3 space-y-0">
125+
<FormItem className="flex items-center space-y-0">
126126
<FormControl>
127127
<CheckboxGroupItem value="none" />
128128
</FormControl>

0 commit comments

Comments
 (0)