Dependencies Updates, Sidebar fixes, default plan, Radix single package (#297)

* Refactor Radix UI imports and update package dependencies, fix Sidebar "group" references, add default value to plan picker to preselect a plan
This commit is contained in:
Giancarlo Buomprisco
2025-07-11 16:57:27 +07:00
committed by GitHub
parent 1d734e6818
commit 50337298fd
72 changed files with 1902 additions and 1263 deletions

View File

@@ -1,7 +1,7 @@
import * as React from 'react';
import { Slot, Slottable } from '@radix-ui/react-slot';
import { ChevronRight } from 'lucide-react';
import { Slot } from 'radix-ui';
import { cn } from '../lib/utils';
@@ -12,7 +12,7 @@ export const CardButton: React.FC<
children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>
> = function CardButton({ className, asChild, ...props }) {
const Comp = asChild ? Slot : 'button';
const Comp = asChild ? Slot.Root : 'button';
return (
<Comp
@@ -22,7 +22,7 @@ export const CardButton: React.FC<
)}
{...props}
>
<Slottable>{props.children}</Slottable>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
};
@@ -33,7 +33,7 @@ export const CardButtonTitle: React.FC<
children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>
> = function CardButtonTitle({ className, asChild, ...props }) {
const Comp = asChild ? Slot : 'div';
const Comp = asChild ? Slot.Root : 'div';
return (
<Comp
@@ -43,7 +43,7 @@ export const CardButtonTitle: React.FC<
)}
{...props}
>
<Slottable>{props.children}</Slottable>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
};
@@ -60,11 +60,11 @@ export const CardButtonHeader: React.FC<
displayArrow = true,
...props
}) {
const Comp = asChild ? Slot : 'div';
const Comp = asChild ? Slot.Root : 'div';
return (
<Comp className={cn(className, 'p-4')} {...props}>
<Slottable>
<Slot.Slottable>
{props.children}
<ChevronRight
@@ -75,7 +75,7 @@ export const CardButtonHeader: React.FC<
},
)}
/>
</Slottable>
</Slot.Slottable>
</Comp>
);
};
@@ -86,11 +86,11 @@ export const CardButtonContent: React.FC<
children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>
> = function CardButtonContent({ className, asChild, ...props }) {
const Comp = asChild ? Slot : 'div';
const Comp = asChild ? Slot.Root : 'div';
return (
<Comp className={cn(className, 'flex flex-1 flex-col px-4')} {...props}>
<Slottable>{props.children}</Slottable>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
};
@@ -101,7 +101,7 @@ export const CardButtonFooter: React.FC<
children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>
> = function CardButtonFooter({ className, asChild, ...props }) {
const Comp = asChild ? Slot : 'div';
const Comp = asChild ? Slot.Root : 'div';
return (
<Comp
@@ -111,7 +111,7 @@ export const CardButtonFooter: React.FC<
)}
{...props}
>
<Slottable>{props.children}</Slottable>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
};

View File

@@ -2,7 +2,7 @@
import { useCallback, useMemo, useState } from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { Dialog as DialogPrimitive } from 'radix-ui';
import { Button } from '../shadcn/button';
import { Heading } from '../shadcn/heading';

View File

@@ -1,4 +1,4 @@
import { Slot, Slottable } from '@radix-ui/react-slot';
import { Slot } from 'radix-ui';
import { cn } from '../../lib/utils';
@@ -7,7 +7,7 @@ export const GradientSecondaryText: React.FC<
asChild?: boolean;
}
> = function GradientSecondaryTextComponent({ className, ...props }) {
const Comp = props.asChild ? Slot : 'span';
const Comp = props.asChild ? Slot.Root : 'span';
return (
<Comp
@@ -17,7 +17,7 @@ export const GradientSecondaryText: React.FC<
)}
{...props}
>
<Slottable>{props.children}</Slottable>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
};

View File

@@ -1,4 +1,4 @@
import { Slot, Slottable } from '@radix-ui/react-slot';
import { Slot } from 'radix-ui';
import { cn } from '../../lib/utils';
@@ -7,7 +7,7 @@ export const HeroTitle: React.FC<
asChild?: boolean;
}
> = function HeroTitleComponent({ children, className, ...props }) {
const Comp = props.asChild ? Slot : 'h1';
const Comp = props.asChild ? Slot.Root : 'h1';
return (
<Comp
@@ -17,7 +17,7 @@ export const HeroTitle: React.FC<
)}
{...props}
>
<Slottable>{children}</Slottable>
<Slot.Slottable>{children}</Slot.Slottable>
</Comp>
);
};

View File

@@ -1,4 +1,4 @@
import { Slot, Slottable } from '@radix-ui/react-slot';
import { Slot } from 'radix-ui';
import { cn } from '../../lib/utils';
import { GradientSecondaryText } from './gradient-secondary-text';
@@ -9,7 +9,7 @@ export const Pill: React.FC<
asChild?: boolean;
}
> = function PillComponent({ className, asChild, ...props }) {
const Comp = asChild ? Slot : 'h3';
const Comp = asChild ? Slot.Root : 'h3';
return (
<Comp
@@ -28,13 +28,13 @@ export const Pill: React.FC<
{props.label}
</span>
)}
<Slottable>
<Slot.Slottable>
<GradientSecondaryText
className={'flex items-center gap-x-2 font-semibold tracking-tight'}
>
{props.children}
</GradientSecondaryText>
</Slottable>
</Slot.Slottable>
</Comp>
);
};
@@ -44,7 +44,7 @@ export const PillActionButton: React.FC<
asChild?: boolean;
}
> = ({ asChild, ...props }) => {
const Comp = asChild ? Slot : 'button';
const Comp = asChild ? Slot.Root : 'button';
return (
<Comp

View File

@@ -11,8 +11,8 @@ import React, {
useState,
} from 'react';
import { Slot, Slottable } from '@radix-ui/react-slot';
import { useMutation } from '@tanstack/react-query';
import { Slot } from 'radix-ui';
import { Path, UseFormReturn } from 'react-hook-form';
import { z } from 'zod';
@@ -136,11 +136,11 @@ export const MultiStepFormStep: React.FC<
} & HTMLProps<HTMLDivElement>
>
> = function MultiStepFormStep({ children, asChild, ...props }) {
const Cmp = asChild ? Slot : 'div';
const Cmp = asChild ? Slot.Root : 'div';
return (
<Cmp {...props}>
<Slottable>{children}</Slottable>
<Slot.Slottable>{children}</Slot.Slottable>
</Cmp>
);
};
@@ -331,11 +331,11 @@ export const MultiStepFormHeader: React.FC<
} & HTMLProps<HTMLDivElement>
>
> = function MultiStepFormHeader({ children, asChild, ...props }) {
const Cmp = asChild ? Slot : 'div';
const Cmp = asChild ? Slot.Root : 'div';
return (
<Cmp {...props}>
<Slottable>{children}</Slottable>
<Slot.Slottable>{children}</Slot.Slottable>
</Cmp>
);
};
@@ -347,11 +347,11 @@ export const MultiStepFormFooter: React.FC<
} & HTMLProps<HTMLDivElement>
>
> = function MultiStepFormFooter({ children, asChild, ...props }) {
const Cmp = asChild ? Slot : 'div';
const Cmp = asChild ? Slot.Root : 'div';
return (
<Cmp {...props}>
<Slottable>{children}</Slottable>
<Slot.Slottable>{children}</Slot.Slottable>
</Cmp>
);
};