Skip to content

Commit 8534ce3

Browse files
maiieulmaiieul
committed
docs(styled): add components copy/paste code
1 parent 1c268cd commit 8534ce3

File tree

18 files changed

+825
-12
lines changed

18 files changed

+825
-12
lines changed

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

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,80 @@ A vertically stacked set of interactive headings that each reveal a section of c
1414

1515
## Installation
1616

17-
### 1. Run the following command
17+
### 1. Run the following cli command or copy/paste the component code into your project
1818

1919
```sh
2020
qwik-ui add accordion
2121
```
2222

23+
```tsx
24+
import { component$, Slot, PropsOf } from '@builder.io/qwik';
25+
26+
import {
27+
AccordionContent as QwikUIAccordionContent,
28+
AccordionHeader as QwikUIAccordionHeader,
29+
AccordionItem as QwikUIAccordionItem,
30+
AccordionRoot as QwikUIAccordionRoot,
31+
AccordionTrigger as QwikUIAccordionTrigger,
32+
} from '@qwik-ui/headless';
33+
import { cn } from '@qwik-ui/utils';
34+
35+
import { LuChevronDown } from '@qwikest/icons/lucide';
36+
37+
export const Accordion = component$<PropsOf<typeof QwikUIAccordionRoot>>((props) => (
38+
<QwikUIAccordionRoot animated {...props} class={props.class}>
39+
<Slot />
40+
</QwikUIAccordionRoot>
41+
));
42+
43+
export const AccordionItem = component$<PropsOf<typeof QwikUIAccordionItem>>((props) => {
44+
return (
45+
<QwikUIAccordionItem {...props} class={cn('border-b', props.class)}>
46+
<Slot />
47+
</QwikUIAccordionItem>
48+
);
49+
});
50+
51+
export const AccordionTrigger = component$<
52+
PropsOf<typeof QwikUIAccordionTrigger> & {
53+
header?: PropsOf<typeof QwikUIAccordionHeader>['as'];
54+
}
55+
>(({ header = 'h3', ...props }) => {
56+
return (
57+
<QwikUIAccordionHeader as={header} class="flex">
58+
<QwikUIAccordionTrigger
59+
{...props}
60+
class={cn(
61+
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
62+
props.class,
63+
)}
64+
>
65+
<Slot />
66+
<LuChevronDown class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
67+
</QwikUIAccordionTrigger>
68+
</QwikUIAccordionHeader>
69+
);
70+
});
71+
72+
export const AccordionContent = component$<PropsOf<typeof QwikUIAccordionContent>>(
73+
(props) => {
74+
return (
75+
<QwikUIAccordionContent
76+
{...props}
77+
class={cn(
78+
'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm',
79+
props.class,
80+
)}
81+
>
82+
<div class="pb-4 pt-0">
83+
<Slot />
84+
</div>
85+
</QwikUIAccordionContent>
86+
);
87+
},
88+
);
89+
```
90+
2391
### 2. Update your 'tailwind.config.cjs'
2492

2593
Add the following animations to your tailwind.config.js file:

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,65 @@ Displays a callout for user attention.
1414

1515
## Installation
1616

17+
### Run the following cli command or copy/paste the component code into your project
18+
1719
```sh
1820
qwik-ui add alert
1921
```
2022

23+
```tsx
24+
import { component$, Slot, PropsOf } from '@builder.io/qwik';
25+
import { cn } from '@qwik-ui/utils';
26+
27+
import { cva, type VariantProps } from 'class-variance-authority';
28+
29+
export const alertVariants = cva(
30+
'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',
31+
{
32+
variants: {
33+
look: {
34+
neutral: 'bg-background text-foreground',
35+
alert: 'border-alert/60 text-alert [&>svg]:text-alert',
36+
primary: 'border-primary',
37+
secondary: 'border-secondary',
38+
},
39+
},
40+
defaultVariants: {
41+
look: 'neutral',
42+
},
43+
},
44+
);
45+
46+
type AlertProps = PropsOf<'div'> & VariantProps<typeof alertVariants>;
47+
48+
export const Alert = component$<AlertProps>(({ look, ...props }) => {
49+
return (
50+
<div {...props} role="alert" class={cn(alertVariants({ look }), props.class)}>
51+
<Slot />
52+
</div>
53+
);
54+
});
55+
56+
export const AlertTitle = component$<PropsOf<'h5'>>(({ ...props }) => {
57+
return (
58+
<h5
59+
{...props}
60+
class={cn('mb-1 font-medium leading-none tracking-tight', props.class)}
61+
>
62+
<Slot />
63+
</h5>
64+
);
65+
});
66+
67+
export const AlertDescription = component$<PropsOf<'div'>>(({ ...props }) => {
68+
return (
69+
<div {...props} class={cn('text-sm [&_p]:leading-relaxed', props.class)}>
70+
<Slot />
71+
</div>
72+
);
73+
});
74+
```
75+
2176
## Usage
2277

2378
```tsx

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,49 @@ An image element with a fallback for representing the user.
1414

1515
## Installation
1616

17+
### Run the following cli command or copy/paste the component code into your project
18+
1719
```sh
1820
qwik-ui add avatar
1921
```
2022

23+
```tsx
24+
import { PropsOf, Slot, component$ } from '@builder.io/qwik';
25+
import { cn } from '@qwik-ui/utils';
26+
27+
export const Avatar = component$<PropsOf<'div'>>(({ ...props }) => {
28+
return (
29+
<div
30+
{...props}
31+
class={cn(
32+
'relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full',
33+
props.class,
34+
)}
35+
>
36+
<Slot />
37+
</div>
38+
);
39+
});
40+
41+
export const AvatarImage = component$<PropsOf<'img'>>(({ ...props }) => (
42+
<img {...props} class={cn('aspect-square h-full w-full', props.class)} />
43+
));
44+
45+
export const AvatarFallback = component$<PropsOf<'div'>>(({ ...props }) => {
46+
return (
47+
<div
48+
{...props}
49+
class={cn(
50+
'bg-muted absolute -z-10 flex h-full w-full items-center justify-center rounded-full',
51+
props.class,
52+
)}
53+
>
54+
<Slot />
55+
</div>
56+
);
57+
});
58+
```
59+
2160
## Usage
2261

2362
```tsx

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,45 @@ Displays a badge or a component that looks like a badge.
1212

1313
## Installation
1414

15+
### Run the following cli command or copy/paste the component code into your project
16+
1517
```sh
1618
qwik-ui add badge
1719
```
1820

21+
```tsx
22+
import { component$, PropsOf, Slot } from '@builder.io/qwik';
23+
import { cn } from '@qwik-ui/utils';
24+
import { cva, type VariantProps } from 'class-variance-authority';
25+
26+
export const badgeVariants = cva(
27+
'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',
28+
{
29+
variants: {
30+
look: {
31+
primary: 'bg-primary text-primary-foreground hover:bg-primary/80',
32+
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
33+
alert: 'bg-alert text-alert-foreground hover:bg-alert/80',
34+
outline: 'border text-foreground',
35+
},
36+
},
37+
defaultVariants: {
38+
look: 'primary',
39+
},
40+
},
41+
);
42+
43+
export type BadgeProps = PropsOf<'div'> & VariantProps<typeof badgeVariants>;
44+
45+
export const Badge = component$<BadgeProps>(({ look, ...props }) => {
46+
return (
47+
<div {...props} class={cn(badgeVariants({ look }), props.class)}>
48+
<Slot />
49+
</div>
50+
);
51+
});
52+
```
53+
1954
## Examples
2055

2156
### Primary

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,60 @@ Displays a button or a component that looks like a button.
44

55
## Installation
66

7+
### Run the following cli command or copy/paste the component code into your project
8+
79
```sh
810
qwik-ui add button
911
```
1012

13+
```tsx
14+
import { component$, PropsOf, Slot } from '@builder.io/qwik';
15+
import { cn } from '@qwik-ui/utils';
16+
import { cva, type VariantProps } from 'class-variance-authority';
17+
18+
// TODO: Create a RFC of the variants and explaining the thought process behind them
19+
20+
export const buttonVariants = cva(
21+
'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',
22+
{
23+
variants: {
24+
look: {
25+
primary:
26+
'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm transition-all duration-100 active:press active:shadow-base border-base',
27+
secondary:
28+
'bg-secondary text-secondary-foreground hover:bg-secondary/90 shadow-sm transition-all duration-100 active:press active:shadow-base border-base',
29+
alert:
30+
'bg-alert text-alert-foreground hover:bg-alert/90 shadow-sm transition-all duration-100 active:press active:shadow-base border-base',
31+
outline:
32+
'shadow-sm transition-all duration-100 active:press active:shadow-base bg-background text-foreground border hover:bg-accent',
33+
ghost: 'text-accent-foreground hover:bg-accent',
34+
link: 'text-foreground hover:underline hover:underline-offset-2 hover:text-foreground/80 hover:bg-transparent',
35+
},
36+
size: {
37+
sm: 'px-2 h-8 py-1.5 text-sm',
38+
md: 'px-4 h-12 py-3 text-base',
39+
lg: ' px-8 h-16 py-4 text-lg',
40+
icon: 'h-10 w-10',
41+
},
42+
},
43+
defaultVariants: {
44+
look: 'primary',
45+
size: 'md',
46+
},
47+
},
48+
);
49+
50+
type ButtonProps = PropsOf<'button'> & VariantProps<typeof buttonVariants>;
51+
52+
export const Button = component$<ButtonProps>(({ size, look, ...props }) => {
53+
return (
54+
<button {...props} class={cn(buttonVariants({ size, look }), props.class)}>
55+
<Slot />
56+
</button>
57+
);
58+
});
59+
```
60+
1161
## Examples
1262

1363
### Primary

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,71 @@ Displays a card with header, content, and footer.
1212

1313
## Installation
1414

15+
### Run the following cli command or copy/paste the component code into your project
16+
1517
```sh
1618
qwik-ui add card
1719
```
1820

21+
```tsx
22+
import { component$, type PropsOf, Slot } from '@builder.io/qwik';
23+
import { cn } from '@qwik-ui/utils';
24+
25+
export const Card = component$<PropsOf<'div'>>((props) => {
26+
return (
27+
<div
28+
{...props}
29+
class={cn(
30+
'bg-card text-card-foreground rounded-base border shadow-sm',
31+
props.class,
32+
)}
33+
>
34+
<Slot />
35+
</div>
36+
);
37+
});
38+
39+
export const CardHeader = component$<PropsOf<'div'>>((props) => {
40+
return (
41+
<div {...props} class={cn('flex flex-col space-y-1.5 p-6', props.class)}>
42+
<Slot />
43+
</div>
44+
);
45+
});
46+
47+
export const CardTitle = component$<PropsOf<'h3'>>((props) => {
48+
return (
49+
<h3 {...props} class={cn('font-semibold leading-none tracking-tight', props.class)}>
50+
<Slot />
51+
</h3>
52+
);
53+
});
54+
55+
export const CardDescription = component$<PropsOf<'p'>>((props) => {
56+
return (
57+
<p {...props} class={cn('text-muted-foreground text-sm', props.class)}>
58+
<Slot />
59+
</p>
60+
);
61+
});
62+
63+
export const CardContent = component$<PropsOf<'div'>>((props) => {
64+
return (
65+
<div {...props} class={cn('p-6 pt-0', props.class)}>
66+
<Slot />
67+
</div>
68+
);
69+
});
70+
71+
export const CardFooter = component$<PropsOf<'div'>>(({ ...props }) => {
72+
return (
73+
<div {...props} class={cn('flex items-center p-6 pt-0', props.class)}>
74+
<Slot />
75+
</div>
76+
);
77+
});
78+
```
79+
1980
## Examples
2081

2182
### Color

0 commit comments

Comments
 (0)