Merge pull request #652 from maiieul/docs-styled-components-code

docs(styled): add components copy/paste code

Author: maiieul

apps/component-tests/tailwind.config.cjs

@@ -3,10 +3,6 @@ const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 
-// RFC maiieul: I have added -base utility modifiers to start to have a good default specific to each utility based in each style.
-// This means using something non-standard that developers would have to learn.
-// Although it's not much and should be intuitive- and not knowing it doesn't break the tailwind design tokens system.
-
 module.exports = {
   content: [
     join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
@@ -85,6 +81,10 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
       },
       borderRadius: {
         base: 'var(--border-radius)',

apps/website/src/routes/docs/styled/accordion/index.mdx

@@ -14,12 +14,80 @@ A vertically stacked set of interactive headings that each reveal a section of c
 
 ## Installation
 
-### 1. Run the following command
+### 1. Run the following cli command or copy/paste the component code into your project
 
 ```sh
 qwik-ui add accordion
 ```
 
+```tsx
+import { component$, Slot, PropsOf } from '@builder.io/qwik';
+
+import {
+  AccordionContent as QwikUIAccordionContent,
+  AccordionHeader as QwikUIAccordionHeader,
+  AccordionItem as QwikUIAccordionItem,
+  AccordionRoot as QwikUIAccordionRoot,
+  AccordionTrigger as QwikUIAccordionTrigger,
+} from '@qwik-ui/headless';
+import { cn } from '@qwik-ui/utils';
+
+import { LuChevronDown } from '@qwikest/icons/lucide';
+
+export const Accordion = component$<PropsOf<typeof QwikUIAccordionRoot>>((props) => (
+  <QwikUIAccordionRoot animated {...props} class={props.class}>
+    <Slot />
+  </QwikUIAccordionRoot>
+));
+
+export const AccordionItem = component$<PropsOf<typeof QwikUIAccordionItem>>((props) => {
+  return (
+    <QwikUIAccordionItem {...props} class={cn('border-b', props.class)}>
+      <Slot />
+    </QwikUIAccordionItem>
+  );
+});
+
+export const AccordionTrigger = component$<
+  PropsOf<typeof QwikUIAccordionTrigger> & {
+    header?: PropsOf<typeof QwikUIAccordionHeader>['as'];
+  }
+>(({ header = 'h3', ...props }) => {
+  return (
+    <QwikUIAccordionHeader as={header} class="flex">
+      <QwikUIAccordionTrigger
+        {...props}
+        class={cn(
+          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )}
+      >
+        <Slot />
+        <LuChevronDown class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
+      </QwikUIAccordionTrigger>
+    </QwikUIAccordionHeader>
+  );
+});
+
+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>
+    );
+  },
+);
+```
+
 ### 2. Update your 'tailwind.config.cjs'
 
 Add the following animations to your tailwind.config.js file:

apps/website/src/routes/docs/styled/alert/index.mdx

@@ -14,10 +14,65 @@ Displays a callout for user attention.
 
 ## Installation
 
+### Run the following cli command or copy/paste the component code into your project
+
 ```sh
 qwik-ui add alert
 ```
 
+```tsx
+import { component$, Slot, PropsOf } from '@builder.io/qwik';
+import { cn } from '@qwik-ui/utils';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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: {
+      look: {
+        neutral: 'bg-background text-foreground',
+        alert: 'border-alert/60 text-alert [&>svg]:text-alert',
+        primary: 'border-primary',
+        secondary: 'border-secondary',
+      },
+    },
+    defaultVariants: {
+      look: 'neutral',
+    },
+  },
+);
+
+type AlertProps = PropsOf<'div'> & VariantProps<typeof alertVariants>;
+
+export const Alert = component$<AlertProps>(({ look, ...props }) => {
+  return (
+    <div {...props} role="alert" class={cn(alertVariants({ look }), props.class)}>
+      <Slot />
+    </div>
+  );
+});
+
+export const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
+  return (
+    <h5
+      {...props}
+      class={cn('mb-1 font-medium leading-none tracking-tight', props.class)}
+    >
+      <Slot />
+    </h5>
+  );
+});
+
+export const AlertDescription = component$<PropsOf<'div'>>(({ ...props }) => {
+  return (
+    <div {...props} class={cn('text-sm [&_p]:leading-relaxed', props.class)}>
+      <Slot />
+    </div>
+  );
+});
+```
+
 ## Usage
 
 ```tsx

apps/website/src/routes/docs/styled/avatar/index.mdx

@@ -14,10 +14,49 @@ An image element with a fallback for representing the user.
 
 ## Installation
 
+### Run the following cli command or copy/paste the component code into your project
+
 ```sh
 qwik-ui add avatar
 ```
 
+```tsx
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
+import { cn } from '@qwik-ui/utils';
+
+export const Avatar = component$<PropsOf<'div'>>(({ ...props }) => {
+  return (
+    <div
+      {...props}
+      class={cn(
+        'relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full',
+        props.class,
+      )}
+    >
+      <Slot />
+    </div>
+  );
+});
+
+export const AvatarImage = component$<PropsOf<'img'>>(({ ...props }) => (
+  <img {...props} class={cn('aspect-square h-full w-full', props.class)} />
+));
+
+export const AvatarFallback = component$<PropsOf<'div'>>(({ ...props }) => {
+  return (
+    <div
+      {...props}
+      class={cn(
+        'bg-muted absolute -z-10 flex h-full w-full items-center justify-center rounded-full',
+        props.class,
+      )}
+    >
+      <Slot />
+    </div>
+  );
+});
+```
+
 ## Usage
 
 ```tsx

apps/website/src/routes/docs/styled/badge/index.mdx

@@ -12,10 +12,45 @@ Displays a badge or a component that looks like a badge.
 
 ## Installation
 
+### Run the following cli command or copy/paste the component code into your project
+
 ```sh
 qwik-ui add badge
 ```
 
+```tsx
+import { component$, PropsOf, Slot } from '@builder.io/qwik';
+import { cn } from '@qwik-ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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: {
+      look: {
+        primary: 'bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        alert: 'bg-alert text-alert-foreground hover:bg-alert/80',
+        outline: 'border text-foreground',
+      },
+    },
+    defaultVariants: {
+      look: 'primary',
+    },
+  },
+);
+
+export type BadgeProps = PropsOf<'div'> & VariantProps<typeof badgeVariants>;
+
+export const Badge = component$<BadgeProps>(({ look, ...props }) => {
+  return (
+    <div {...props} class={cn(badgeVariants({ look }), props.class)}>
+      <Slot />
+    </div>
+  );
+});
+```
+
 ## Examples
 
 ### Primary

apps/website/src/routes/docs/styled/button/index.mdx

@@ -4,10 +4,60 @@ Displays a button or a component that looks like a button.
 
 ## Installation
 
+### Run the following cli command or copy/paste the component code into your project
+
 ```sh
 qwik-ui add button
 ```
 
+```tsx
+import { component$, PropsOf, Slot } from '@builder.io/qwik';
+import { cn } from '@qwik-ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// TODO: Create a RFC of the variants and explaining the thought process behind them
+
+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: {
+      look: {
+        primary:
+          'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm transition-all duration-100 active:press active:shadow-base border-base',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/90 shadow-sm transition-all duration-100 active:press active:shadow-base border-base',
+        alert:
+          'bg-alert text-alert-foreground hover:bg-alert/90 shadow-sm transition-all duration-100 active:press active:shadow-base border-base',
+        outline:
+          'shadow-sm transition-all duration-100 active:press active:shadow-base bg-background text-foreground border hover:bg-accent',
+        ghost: 'text-accent-foreground hover:bg-accent',
+        link: 'text-foreground hover:underline hover:underline-offset-2 hover:text-foreground/80 hover:bg-transparent',
+      },
+      size: {
+        sm: 'px-2 h-8 py-1.5 text-sm',
+        md: 'px-4 h-12 py-3 text-base',
+        lg: ' px-8 h-16 py-4 text-lg',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      look: 'primary',
+      size: 'md',
+    },
+  },
+);
+
+type ButtonProps = PropsOf<'button'> & VariantProps<typeof buttonVariants>;
+
+export const Button = component$<ButtonProps>(({ size, look, ...props }) => {
+  return (
+    <button {...props} class={cn(buttonVariants({ size, look }), props.class)}>
+      <Slot />
+    </button>
+  );
+});
+```
+
 ## Examples
 
 ### Primary

apps/website/src/routes/docs/styled/card/index.mdx

@@ -12,10 +12,71 @@ Displays a card with header, content, and footer.
 
 ## Installation
 
+### Run the following cli command or copy/paste the component code into your project
+
 ```sh
 qwik-ui add card
 ```
 
+```tsx
+import { component$, type PropsOf, Slot } from '@builder.io/qwik';
+import { cn } from '@qwik-ui/utils';
+
+export const Card = component$<PropsOf<'div'>>((props) => {
+  return (
+    <div
+      {...props}
+      class={cn(
+        'bg-card text-card-foreground rounded-base border shadow-sm',
+        props.class,
+      )}
+    >
+      <Slot />
+    </div>
+  );
+});
+
+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>
+  );
+});
+
+export const CardTitle = component$<PropsOf<'h3'>>((props) => {
+  return (
+    <h3 {...props} class={cn('font-semibold leading-none tracking-tight', props.class)}>
+      <Slot />
+    </h3>
+  );
+});
+
+export const CardDescription = component$<PropsOf<'p'>>((props) => {
+  return (
+    <p {...props} class={cn('text-muted-foreground text-sm', props.class)}>
+      <Slot />
+    </p>
+  );
+});
+
+export const CardContent = component$<PropsOf<'div'>>((props) => {
+  return (
+    <div {...props} class={cn('p-6 pt-0', props.class)}>
+      <Slot />
+    </div>
+  );
+});
+
+export const CardFooter = component$<PropsOf<'div'>>(({ ...props }) => {
+  return (
+    <div {...props} class={cn('flex items-center p-6 pt-0', props.class)}>
+      <Slot />
+    </div>
+  );
+});
+```
+
 ## Examples
 
 ### Color