Skip to content

Commit 4298977

Browse files
maiieulmaiieul
committed
refactor(styled): use same export convention for all components
1 parent 3dff9ef commit 4298977

File tree

13 files changed

+55
-110
lines changed

13 files changed

+55
-110
lines changed

‎packages/kit-styled/src/components/accordion/accordion.tsx‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,34 @@
1-
import { component$, Slot } from '@builder.io/qwik';
1+
import { component$, Slot, PropsOf } from '@builder.io/qwik';
22

33
import {
44
AccordionContent as QwikUIAccordionContent,
55
AccordionHeader as QwikUIAccordionHeader,
66
AccordionItem as QwikUIAccordionItem,
77
AccordionRoot as QwikUIAccordionRoot,
88
AccordionTrigger as QwikUIAccordionTrigger,
9-
type AccordionHeaderProps,
10-
type AccordionItemProps,
11-
type AccordionRootProps,
12-
type AccordionTriggerProps,
139
} from '@qwik-ui/headless';
1410
import { cn } from '@qwik-ui/utils';
1511

1612
import { LuChevronDown } from '@qwikest/icons/lucide';
1713

18-
const Accordion = component$<AccordionRootProps>((props) => (
14+
export const Accordion = component$<PropsOf<typeof QwikUIAccordionRoot>>((props) => (
1915
<QwikUIAccordionRoot animated {...props} class={props.class}>
2016
<Slot />
2117
</QwikUIAccordionRoot>
2218
));
2319

24-
const AccordionItem = component$<AccordionItemProps>((props) => {
20+
export const AccordionItem = component$<PropsOf<typeof QwikUIAccordionItem>>((props) => {
2521
return (
2622
<QwikUIAccordionItem {...props} class={cn('border-b', props.class)}>
2723
<Slot />
2824
</QwikUIAccordionItem>
2925
);
3026
});
3127

32-
const AccordionTrigger = component$<
33-
AccordionTriggerProps & { header?: AccordionHeaderProps['as'] }
28+
export const AccordionTrigger = component$<
29+
PropsOf<typeof QwikUIAccordionTrigger> & {
30+
header?: PropsOf<typeof QwikUIAccordionHeader>['as'];
31+
}
3432
>(({ header = 'h3', ...props }) => {
3533
return (
3634
<QwikUIAccordionHeader as={header} class="flex">
@@ -48,20 +46,20 @@ const AccordionTrigger = component$<
4846
);
4947
});
5048

51-
const AccordionContent = component$<AccordionItemProps>((props) => {
52-
return (
53-
<QwikUIAccordionContent
54-
{...props}
55-
class={cn(
56-
'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm',
57-
props.class,
58-
)}
59-
>
60-
<div class="pb-4 pt-0">
61-
<Slot />
62-
</div>
63-
</QwikUIAccordionContent>
64-
);
65-
});
66-
67-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
49+
export const AccordionContent = component$<PropsOf<typeof QwikUIAccordionContent>>(
50+
(props) => {
51+
return (
52+
<QwikUIAccordionContent
53+
{...props}
54+
class={cn(
55+
'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm',
56+
props.class,
57+
)}
58+
>
59+
<div class="pb-4 pt-0">
60+
<Slot />
61+
</div>
62+
</QwikUIAccordionContent>
63+
);
64+
},
65+
);

‎packages/kit-styled/src/components/alert/alert.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { cn } from '@qwik-ui/utils';
33

44
import { cva, type VariantProps } from 'class-variance-authority';
55

6-
const alertVariants = cva(
6+
export const alertVariants = cva(
77
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
88
{
99
variants: {
@@ -22,15 +22,15 @@ const alertVariants = cva(
2222

2323
type AlertProps = PropsOf<'div'> & VariantProps<typeof alertVariants>;
2424

25-
const Alert = component$<AlertProps>(({ look, ...props }) => {
25+
export const Alert = component$<AlertProps>(({ look, ...props }) => {
2626
return (
2727
<div {...props} role="alert" class={cn(alertVariants({ look }), props.class)}>
2828
<Slot />
2929
</div>
3030
);
3131
});
3232

33-
const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
33+
export const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
3434
return (
3535
<h5
3636
{...props}
@@ -41,12 +41,10 @@ const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
4141
);
4242
});
4343

44-
const AlertDescription = component$<PropsOf<'div'>>(({ ...props }) => {
44+
export const AlertDescription = component$<PropsOf<'div'>>(({ ...props }) => {
4545
return (
4646
<div {...props} class={cn('text-sm [&_p]:leading-relaxed', props.class)}>
4747
<Slot />
4848
</div>
4949
);
5050
});
51-
52-
export { Alert, AlertTitle, AlertDescription };

‎packages/kit-styled/src/components/avatar/avatar.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { PropsOf, Slot, component$ } from '@builder.io/qwik';
22
import { cn } from '@qwik-ui/utils';
33

4-
const Avatar = component$<PropsOf<'div'>>(({ ...props }) => {
4+
export const Avatar = component$<PropsOf<'div'>>(({ ...props }) => {
55
return (
66
<div
77
{...props}
@@ -15,11 +15,11 @@ const Avatar = component$<PropsOf<'div'>>(({ ...props }) => {
1515
);
1616
});
1717

18-
const AvatarImage = component$<PropsOf<'img'>>(({ ...props }) => (
18+
export const AvatarImage = component$<PropsOf<'img'>>(({ ...props }) => (
1919
<img {...props} class={cn('aspect-square h-full w-full', props.class)} />
2020
));
2121

22-
const AvatarFallback = component$<PropsOf<'div'>>(({ ...props }) => {
22+
export const AvatarFallback = component$<PropsOf<'div'>>(({ ...props }) => {
2323
return (
2424
<div
2525
{...props}
@@ -32,5 +32,3 @@ const AvatarFallback = component$<PropsOf<'div'>>(({ ...props }) => {
3232
</div>
3333
);
3434
});
35-
36-
export { Avatar, AvatarImage, AvatarFallback };

‎packages/kit-styled/src/components/badge/badge.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { component$, PropsOf, Slot } from '@builder.io/qwik';
22
import { cn } from '@qwik-ui/utils';
33
import { cva, type VariantProps } from 'class-variance-authority';
44

5-
const badgeVariants = cva(
5+
export const badgeVariants = cva(
66
'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
77
{
88
variants: {
@@ -21,12 +21,10 @@ const badgeVariants = cva(
2121

2222
export type BadgeProps = PropsOf<'div'> & VariantProps<typeof badgeVariants>;
2323

24-
const Badge = component$<BadgeProps>(({ look, ...props }) => {
24+
export const Badge = component$<BadgeProps>(({ look, ...props }) => {
2525
return (
2626
<div {...props} class={cn(badgeVariants({ look }), props.class)}>
2727
<Slot />
2828
</div>
2929
);
3030
});
31-
32-
export { Badge, badgeVariants };

‎packages/kit-styled/src/components/button/button.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
44

55
// TODO: Create a RFC of the variants and explaining the thought process behind them
66

7-
const buttonVariants = cva(
7+
export const buttonVariants = cva(
88
'inline-flex items-center justify-center text-sm font-medium rounded disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1',
99
{
1010
variants: {
@@ -36,12 +36,10 @@ const buttonVariants = cva(
3636

3737
type ButtonProps = PropsOf<'button'> & VariantProps<typeof buttonVariants>;
3838

39-
const Button = component$<ButtonProps>(({ size, look, ...props }) => {
39+
export const Button = component$<ButtonProps>(({ size, look, ...props }) => {
4040
return (
4141
<button {...props} class={cn(buttonVariants({ size, look }), props.class)}>
4242
<Slot />
4343
</button>
4444
);
4545
});
46-
47-
export { Button, buttonVariants };

‎packages/kit-styled/src/components/card/card.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { component$, type PropsOf, Slot } from '@builder.io/qwik';
22
import { cn } from '@qwik-ui/utils';
33

4-
const Card = component$<PropsOf<'div'>>((props) => {
4+
export const Card = component$<PropsOf<'div'>>((props) => {
55
return (
66
<div
77
{...props}
@@ -15,44 +15,42 @@ const Card = component$<PropsOf<'div'>>((props) => {
1515
);
1616
});
1717

18-
const CardHeader = component$<PropsOf<'div'>>((props) => {
18+
export const CardHeader = component$<PropsOf<'div'>>((props) => {
1919
return (
2020
<div {...props} class={cn('flex flex-col space-y-1.5 p-6', props.class)}>
2121
<Slot />
2222
</div>
2323
);
2424
});
2525

26-
const CardTitle = component$<PropsOf<'h3'>>((props) => {
26+
export const CardTitle = component$<PropsOf<'h3'>>((props) => {
2727
return (
2828
<h3 {...props} class={cn('font-semibold leading-none tracking-tight', props.class)}>
2929
<Slot />
3030
</h3>
3131
);
3232
});
3333

34-
const CardDescription = component$<PropsOf<'p'>>((props) => {
34+
export const CardDescription = component$<PropsOf<'p'>>((props) => {
3535
return (
3636
<p {...props} class={cn('text-muted-foreground text-sm', props.class)}>
3737
<Slot />
3838
</p>
3939
);
4040
});
4141

42-
const CardContent = component$<PropsOf<'div'>>((props) => {
42+
export const CardContent = component$<PropsOf<'div'>>((props) => {
4343
return (
4444
<div {...props} class={cn('p-6 pt-0', props.class)}>
4545
<Slot />
4646
</div>
4747
);
4848
});
4949

50-
const CardFooter = component$<PropsOf<'div'>>(({ ...props }) => {
50+
export const CardFooter = component$<PropsOf<'div'>>(({ ...props }) => {
5151
return (
5252
<div {...props} class={cn('flex items-center p-6 pt-0', props.class)}>
5353
<Slot />
5454
</div>
5555
);
5656
});
57-
58-
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

‎packages/kit-styled/src/components/checkbox/checkbox.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { component$, type QwikIntrinsicElements } from '@builder.io/qwik';
1+
import { PropsOf, component$ } from '@builder.io/qwik';
22
import { cn } from '@qwik-ui/utils';
33

4-
type CheckboxProps = QwikIntrinsicElements['input'];
5-
6-
const Checkbox = component$<CheckboxProps>(({ name, ...props }) => {
4+
export const Checkbox = component$<PropsOf<'input'>>(({ name, ...props }) => {
75
return (
86
<input
97
type="checkbox"
@@ -17,5 +15,3 @@ const Checkbox = component$<CheckboxProps>(({ name, ...props }) => {
1715
/>
1816
);
1917
});
20-
21-
export { Checkbox };

‎packages/kit-styled/src/components/popover/popover.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { PropsOf, Slot, component$, useStyles$ } from '@builder.io/qwik';
22
import {
3-
Popover as QwikUIPopover,
43
PopoverTrigger as QwikUIPopoverTrigger,
4+
Popover as QwikUIPopover,
55
} from '@qwik-ui/headless';
66
import { cn } from '@qwik-ui/utils';
77

8+
export const PopoverTrigger = QwikUIPopoverTrigger;
9+
810
export const Popover = component$<PropsOf<typeof QwikUIPopover>>(
911
({ floating, ...props }) => {
1012
useStyles$(`
@@ -37,5 +39,3 @@ export const Popover = component$<PropsOf<typeof QwikUIPopover>>(
3739
);
3840
},
3941
);
40-
41-
export const PopoverTrigger = QwikUIPopoverTrigger;

‎packages/kit-styled/src/components/radio-group/radio-group.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { PropsOf, Slot, component$ } from '@builder.io/qwik';
22
import { cn } from '@qwik-ui/utils';
33

4-
const RadioGroup = component$<PropsOf<'div'>>(({ ...props }) => {
4+
export const RadioGroup = component$<PropsOf<'div'>>(({ ...props }) => {
55
return (
66
<div class={cn('grid gap-2', props.class)} {...props}>
77
<Slot />
88
</div>
99
);
1010
});
1111

12-
const RadioGroupItem = component$<PropsOf<'input'>>(({ ...props }) => {
12+
export const RadioGroupItem = component$<PropsOf<'input'>>(({ ...props }) => {
1313
return (
1414
<input
1515
type="radio"
@@ -21,5 +21,3 @@ const RadioGroupItem = component$<PropsOf<'input'>>(({ ...props }) => {
2121
/>
2222
);
2323
});
24-
25-
export { RadioGroup, RadioGroupItem };

‎packages/kit-styled/src/components/separator/separator.tsx‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,3 @@
1-
// "use client"
2-
3-
// import * as React from "react"
4-
// import * as SeparatorPrimitive from "@radix-ui/react-separator"
5-
6-
// import { cn } from "@/lib/utils"
7-
8-
// const Separator = React.forwardRef<
9-
// React.ElementRef<typeof SeparatorPrimitive.Root>,
10-
// React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11-
// >(
12-
// (
13-
// { className, orientation = "horizontal", decorative = true, ...props },
14-
// ref
15-
// ) => (
16-
// <SeparatorPrimitive.Root
17-
// ref={ref}
18-
// decorative={decorative}
19-
// orientation={orientation}
20-
// className={cn(
21-
// "shrink-0 bg-border",
22-
// orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23-
// className
24-
// )}
25-
// {...props}
26-
// />
27-
// )
28-
// )
29-
// Separator.displayName = SeparatorPrimitive.Root.displayName
30-
31-
// export { Separator }
32-
331
import { PropsOf, component$ } from '@builder.io/qwik';
342
import { Separator as QwikUISeparator } from '@qwik-ui/headless';
353
import { cn } from '@qwik-ui/utils';
@@ -38,7 +6,6 @@ export const Separator = component$<PropsOf<typeof QwikUISeparator>>(
386
({ orientation = 'horizontal', decorative = true, ...props }) => {
397
return (
408
<>
41-
{/* class=" my-1 h-px" */}
429
<QwikUISeparator
4310
{...props}
4411
decorative={decorative}

0 commit comments

Comments
 (0)