refactor(styled): use same export convention for all components

maiieul · maiieul · commit 4298977883c2 · 2024-03-18T21:54:41.000+01:00
diff --git a/packages/kit-styled/src/components/accordion/accordion.tsx b/packages/kit-styled/src/components/accordion/accordion.tsx
@@ -1,36 +1,34 @@
-import { component$, Slot } from '@builder.io/qwik';
+import { component$, Slot, PropsOf } from '@builder.io/qwik';
 
 import {
   AccordionContent as QwikUIAccordionContent,
   AccordionHeader as QwikUIAccordionHeader,
   AccordionItem as QwikUIAccordionItem,
   AccordionRoot as QwikUIAccordionRoot,
   AccordionTrigger as QwikUIAccordionTrigger,
-  type AccordionHeaderProps,
-  type AccordionItemProps,
-  type AccordionRootProps,
-  type AccordionTriggerProps,
 } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
 import { LuChevronDown } from '@qwikest/icons/lucide';
 
-const Accordion = component$<AccordionRootProps>((props) => (
+export const Accordion = component$<PropsOf<typeof QwikUIAccordionRoot>>((props) => (
   <QwikUIAccordionRoot animated {...props} class={props.class}>
     <Slot />
   </QwikUIAccordionRoot>
 ));
 
-const AccordionItem = component$<AccordionItemProps>((props) => {
+export const AccordionItem = component$<PropsOf<typeof QwikUIAccordionItem>>((props) => {
   return (
     <QwikUIAccordionItem {...props} class={cn('border-b', props.class)}>
       <Slot />
     </QwikUIAccordionItem>
   );
 });
 
-const AccordionTrigger = component$<
-  AccordionTriggerProps & { header?: AccordionHeaderProps['as'] }
+export const AccordionTrigger = component$<
+  PropsOf<typeof QwikUIAccordionTrigger> & {
+    header?: PropsOf<typeof QwikUIAccordionHeader>['as'];
+  }
 >(({ header = 'h3', ...props }) => {
   return (
     <QwikUIAccordionHeader as={header} class="flex">
@@ -48,20 +46,20 @@ const AccordionTrigger = component$<
   );
 });
 
-const AccordionContent = component$<AccordionItemProps>((props) => {
-  return (
-    <QwikUIAccordionContent
-      {...props}
-      class={cn(
-        'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm',
-        props.class,
-      )}
-    >
-      <div class="pb-4 pt-0">
-        <Slot />
-      </div>
-    </QwikUIAccordionContent>
-  );
-});
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+export const AccordionContent = component$<PropsOf<typeof QwikUIAccordionContent>>(
+  (props) => {
+    return (
+      <QwikUIAccordionContent
+        {...props}
+        class={cn(
+          'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm',
+          props.class,
+        )}
+      >
+        <div class="pb-4 pt-0">
+          <Slot />
+        </div>
+      </QwikUIAccordionContent>
+    );
+  },
+);
diff --git a/packages/kit-styled/src/components/alert/alert.tsx b/packages/kit-styled/src/components/alert/alert.tsx
@@ -3,7 +3,7 @@ import { cn } from '@qwik-ui/utils';
 
 import { cva, type VariantProps } from 'class-variance-authority';
 
-const alertVariants = cva(
+export const alertVariants = cva(
   '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',
   {
     variants: {
@@ -22,15 +22,15 @@ const alertVariants = cva(
 
 type AlertProps = PropsOf<'div'> & VariantProps<typeof alertVariants>;
 
-const Alert = component$<AlertProps>(({ look, ...props }) => {
+export const Alert = component$<AlertProps>(({ look, ...props }) => {
   return (
     <div {...props} role="alert" class={cn(alertVariants({ look }), props.class)}>
       <Slot />
     </div>
   );
 });
 
-const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
+export const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
   return (
     <h5
       {...props}
@@ -41,12 +41,10 @@ const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
   );
 });
 
-const AlertDescription = component$<PropsOf<'div'>>(({ ...props }) => {
+export const AlertDescription = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
     <div {...props} class={cn('text-sm [&_p]:leading-relaxed', props.class)}>
       <Slot />
     </div>
   );
 });
-
-export { Alert, AlertTitle, AlertDescription };
diff --git a/packages/kit-styled/src/components/avatar/avatar.tsx b/packages/kit-styled/src/components/avatar/avatar.tsx
@@ -1,7 +1,7 @@
 import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-const Avatar = component$<PropsOf<'div'>>(({ ...props }) => {
+export const Avatar = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
     <div
       {...props}
@@ -15,11 +15,11 @@ const Avatar = component$<PropsOf<'div'>>(({ ...props }) => {
   );
 });
 
-const AvatarImage = component$<PropsOf<'img'>>(({ ...props }) => (
+export const AvatarImage = component$<PropsOf<'img'>>(({ ...props }) => (
   <img {...props} class={cn('aspect-square h-full w-full', props.class)} />
 ));
 
-const AvatarFallback = component$<PropsOf<'div'>>(({ ...props }) => {
+export const AvatarFallback = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
     <div
       {...props}
@@ -32,5 +32,3 @@ const AvatarFallback = component$<PropsOf<'div'>>(({ ...props }) => {
     </div>
   );
 });
-
-export { Avatar, AvatarImage, AvatarFallback };
diff --git a/packages/kit-styled/src/components/badge/badge.tsx b/packages/kit-styled/src/components/badge/badge.tsx
@@ -2,7 +2,7 @@ import { component$, PropsOf, Slot } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-const badgeVariants = cva(
+export const badgeVariants = cva(
   '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',
   {
     variants: {
@@ -21,12 +21,10 @@ const badgeVariants = cva(
 
 export type BadgeProps = PropsOf<'div'> & VariantProps<typeof badgeVariants>;
 
-const Badge = component$<BadgeProps>(({ look, ...props }) => {
+export const Badge = component$<BadgeProps>(({ look, ...props }) => {
   return (
     <div {...props} class={cn(badgeVariants({ look }), props.class)}>
       <Slot />
     </div>
   );
 });
-
-export { Badge, badgeVariants };
diff --git a/packages/kit-styled/src/components/button/button.tsx b/packages/kit-styled/src/components/button/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 // TODO: Create a RFC of the variants and explaining the thought process behind them
 
-const buttonVariants = cva(
+export const buttonVariants = cva(
   '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',
   {
     variants: {
@@ -36,12 +36,10 @@ const buttonVariants = cva(
 
 type ButtonProps = PropsOf<'button'> & VariantProps<typeof buttonVariants>;
 
-const Button = component$<ButtonProps>(({ size, look, ...props }) => {
+export const Button = component$<ButtonProps>(({ size, look, ...props }) => {
   return (
     <button {...props} class={cn(buttonVariants({ size, look }), props.class)}>
       <Slot />
     </button>
   );
 });
-
-export { Button, buttonVariants };
diff --git a/packages/kit-styled/src/components/card/card.tsx b/packages/kit-styled/src/components/card/card.tsx
@@ -1,7 +1,7 @@
 import { component$, type PropsOf, Slot } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-const Card = component$<PropsOf<'div'>>((props) => {
+export const Card = component$<PropsOf<'div'>>((props) => {
   return (
     <div
       {...props}
@@ -15,44 +15,42 @@ const Card = component$<PropsOf<'div'>>((props) => {
   );
 });
 
-const CardHeader = component$<PropsOf<'div'>>((props) => {
+export const CardHeader = component$<PropsOf<'div'>>((props) => {
   return (
     <div {...props} class={cn('flex flex-col space-y-1.5 p-6', props.class)}>
       <Slot />
     </div>
   );
 });
 
-const CardTitle = component$<PropsOf<'h3'>>((props) => {
+export const CardTitle = component$<PropsOf<'h3'>>((props) => {
   return (
     <h3 {...props} class={cn('font-semibold leading-none tracking-tight', props.class)}>
       <Slot />
     </h3>
   );
 });
 
-const CardDescription = component$<PropsOf<'p'>>((props) => {
+export const CardDescription = component$<PropsOf<'p'>>((props) => {
   return (
     <p {...props} class={cn('text-muted-foreground text-sm', props.class)}>
       <Slot />
     </p>
   );
 });
 
-const CardContent = component$<PropsOf<'div'>>((props) => {
+export const CardContent = component$<PropsOf<'div'>>((props) => {
   return (
     <div {...props} class={cn('p-6 pt-0', props.class)}>
       <Slot />
     </div>
   );
 });
 
-const CardFooter = component$<PropsOf<'div'>>(({ ...props }) => {
+export const CardFooter = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
     <div {...props} class={cn('flex items-center p-6 pt-0', props.class)}>
       <Slot />
     </div>
   );
 });
-
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
diff --git a/packages/kit-styled/src/components/checkbox/checkbox.tsx b/packages/kit-styled/src/components/checkbox/checkbox.tsx
@@ -1,9 +1,7 @@
-import { component$, type QwikIntrinsicElements } from '@builder.io/qwik';
+import { PropsOf, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-type CheckboxProps = QwikIntrinsicElements['input'];
-
-const Checkbox = component$<CheckboxProps>(({ name, ...props }) => {
+export const Checkbox = component$<PropsOf<'input'>>(({ name, ...props }) => {
   return (
     <input
       type="checkbox"
@@ -17,5 +15,3 @@ const Checkbox = component$<CheckboxProps>(({ name, ...props }) => {
     />
   );
 });
-
-export { Checkbox };
diff --git a/packages/kit-styled/src/components/popover/popover.tsx b/packages/kit-styled/src/components/popover/popover.tsx
@@ -1,10 +1,12 @@
 import { PropsOf, Slot, component$, useStyles$ } from '@builder.io/qwik';
 import {
-  Popover as QwikUIPopover,
   PopoverTrigger as QwikUIPopoverTrigger,
+  Popover as QwikUIPopover,
 } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
+export const PopoverTrigger = QwikUIPopoverTrigger;
+
 export const Popover = component$<PropsOf<typeof QwikUIPopover>>(
   ({ floating, ...props }) => {
     useStyles$(`
@@ -37,5 +39,3 @@ export const Popover = component$<PropsOf<typeof QwikUIPopover>>(
     );
   },
 );
-
-export const PopoverTrigger = QwikUIPopoverTrigger;
diff --git a/packages/kit-styled/src/components/radio-group/radio-group.tsx b/packages/kit-styled/src/components/radio-group/radio-group.tsx
@@ -1,15 +1,15 @@
 import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-const RadioGroup = component$<PropsOf<'div'>>(({ ...props }) => {
+export const RadioGroup = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
     <div class={cn('grid gap-2', props.class)} {...props}>
       <Slot />
     </div>
   );
 });
 
-const RadioGroupItem = component$<PropsOf<'input'>>(({ ...props }) => {
+export const RadioGroupItem = component$<PropsOf<'input'>>(({ ...props }) => {
   return (
     <input
       type="radio"
@@ -21,5 +21,3 @@ const RadioGroupItem = component$<PropsOf<'input'>>(({ ...props }) => {
     />
   );
 });
-
-export { RadioGroup, RadioGroupItem };
diff --git a/packages/kit-styled/src/components/separator/separator.tsx b/packages/kit-styled/src/components/separator/separator.tsx
@@ -1,35 +1,3 @@
-// "use client"
-
-// import * as React from "react"
-// import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-// import { cn } from "@/lib/utils"
-
-// const Separator = React.forwardRef<
-//   React.ElementRef<typeof SeparatorPrimitive.Root>,
-//   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
-// >(
-//   (
-//     { className, orientation = "horizontal", decorative = true, ...props },
-//     ref
-//   ) => (
-//     <SeparatorPrimitive.Root
-//       ref={ref}
-//       decorative={decorative}
-//       orientation={orientation}
-//       className={cn(
-//         "shrink-0 bg-border",
-//         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-//         className
-//       )}
-//       {...props}
-//     />
-//   )
-// )
-// Separator.displayName = SeparatorPrimitive.Root.displayName
-
-// export { Separator }
-
 import { PropsOf, component$ } from '@builder.io/qwik';
 import { Separator as QwikUISeparator } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
@@ -38,7 +6,6 @@ export const Separator = component$<PropsOf<typeof QwikUISeparator>>(
   ({ orientation = 'horizontal', decorative = true, ...props }) => {
     return (
       <>
-        {/* class=" my-1 h-px" */}
         <QwikUISeparator
           {...props}
           decorative={decorative}
diff --git a/packages/kit-styled/src/components/skeleton/skeleton.tsx b/packages/kit-styled/src/components/skeleton/skeleton.tsx
@@ -1,7 +1,7 @@
-import { QwikIntrinsicElements, component$ } from '@builder.io/qwik';
+import { PropsOf, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-export const Skeleton = component$<QwikIntrinsicElements['div']>(({ ...props }) => {
+export const Skeleton = component$<PropsOf<'div'>>(({ ...props }) => {
   return (
     <div {...props} class={cn('bg-foreground/10 animate-pulse rounded', props.class)} />
   );
diff --git a/packages/kit-styled/src/components/tabs/tabs.tsx b/packages/kit-styled/src/components/tabs/tabs.tsx
diff --git a/packages/kit-styled/src/components/textarea/textarea.tsx b/packages/kit-styled/src/components/textarea/textarea.tsx
