Skip to content

Commit 733fde6

Browse files
shairezshairez
committed
WIP: connected the docs with fluffy
1 parent 2faf9a2 commit 733fde6

File tree

8 files changed

+122
-100
lines changed

8 files changed

+122
-100
lines changed

‎apps/website/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@qwik-ui/cva": "workspace:*",
77
"@qwik-ui/headless": "workspace:*",
88
"@qwik-ui/tailwind": "workspace:*",
9+
"@qwik-ui/fluffy": "workspace:*",
910
"@qwik-ui/material": "workspace:*",
1011
"@qwik-ui/primitives": "workspace:*"
1112
}

‎apps/website/src/global.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
}
3434

3535
:root {
36+
--color-primary: #006ce9;
37+
3638
--qwik-dark-blue: #006ce9;
3739
--qwik-light-blue: #18b6f6;
3840
--qwik-light-purple: #ac7ff4;

‎apps/website/src/routes/docs/fluffy/(components)/button/index.tsx

Lines changed: 88 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { $, component$, useStylesScoped$ } from '@builder.io/qwik';
2-
import { Button } from '@qwik-ui/tailwind';
3-
import { button } from '../../../../../_fluffy/button/button';
2+
import { Button } from '@qwik-ui/fluffy';
3+
import { Button as TailwindButton } from '@qwik-ui/tailwind';
44

55
export default component$(() => {
66
useStylesScoped$(`
@@ -14,162 +14,166 @@ export default component$(() => {
1414
<>
1515
<h2>This is the documentation for the Button</h2>
1616

17-
<div class="flex flex-col gap-8 mt-4">
17+
<div class="mt-4 flex flex-col gap-8">
1818
<h2>Fluffy Example</h2>
1919

2020
<div>
21-
<button class={button({ intent: 'primary' })}>I'm from Fluffy</button>
21+
<Button intent="default">I'm from Fluffy</Button>
2222
</div>
2323

2424
<h2>Basic Example</h2>
2525
<div class="panel">
26-
<Button>default</Button>
27-
<Button variant="primary">primary</Button>
28-
<Button variant="secondary">secondary</Button>
29-
<Button variant="accent">accent</Button>
30-
<Button variant="info">info</Button>
31-
<Button variant="success">success</Button>
32-
<Button variant="warning">warning</Button>
33-
<Button variant="error">error</Button>
34-
<Button variant="ghost">ghost</Button>
35-
<Button variant="link">link</Button>
36-
<Button variant="primary" disabled>
26+
<TailwindButton>default</TailwindButton>
27+
<TailwindButton variant="primary">primary</TailwindButton>
28+
<TailwindButton variant="secondary">secondary</TailwindButton>
29+
<TailwindButton variant="accent">accent</TailwindButton>
30+
<TailwindButton variant="info">info</TailwindButton>
31+
<TailwindButton variant="success">success</TailwindButton>
32+
<TailwindButton variant="warning">warning</TailwindButton>
33+
<TailwindButton variant="error">error</TailwindButton>
34+
<TailwindButton variant="ghost">ghost</TailwindButton>
35+
<TailwindButton variant="link">link</TailwindButton>
36+
<TailwindButton variant="primary" disabled>
3737
primary disabled
38-
</Button>
39-
<Button variant="secondary" disabled>
38+
</TailwindButton>
39+
<TailwindButton variant="secondary" disabled>
4040
secondary disabled
41-
</Button>
41+
</TailwindButton>
4242
</div>
4343

4444
<h2>Active Example</h2>
4545
<div class="panel">
46-
<Button active>default</Button>
47-
<Button variant="primary" active>
46+
<TailwindButton active>default</TailwindButton>
47+
<TailwindButton variant="primary" active>
4848
primary
49-
</Button>
50-
<Button variant="secondary" active>
49+
</TailwindButton>
50+
<TailwindButton variant="secondary" active>
5151
secondary
52-
</Button>
53-
<Button variant="accent" active>
52+
</TailwindButton>
53+
<TailwindButton variant="accent" active>
5454
accent
55-
</Button>
56-
<Button variant="info" active>
55+
</TailwindButton>
56+
<TailwindButton variant="info" active>
5757
info
58-
</Button>
59-
<Button variant="success" active>
58+
</TailwindButton>
59+
<TailwindButton variant="success" active>
6060
success
61-
</Button>
62-
<Button variant="warning" active>
61+
</TailwindButton>
62+
<TailwindButton variant="warning" active>
6363
warning
64-
</Button>
65-
<Button variant="error" active>
64+
</TailwindButton>
65+
<TailwindButton variant="error" active>
6666
error
67-
</Button>
68-
<Button variant="ghost" active>
67+
</TailwindButton>
68+
<TailwindButton variant="ghost" active>
6969
ghost
70-
</Button>
71-
<Button variant="link" active>
70+
</TailwindButton>
71+
<TailwindButton variant="link" active>
7272
link
73-
</Button>
74-
<Button variant="primary" active disabled>
73+
</TailwindButton>
74+
<TailwindButton variant="primary" active disabled>
7575
primary | active | disabled
76-
</Button>
77-
<Button variant="secondary" active disabled>
76+
</TailwindButton>
77+
<TailwindButton variant="secondary" active disabled>
7878
secondary | active | disabled
79-
</Button>
79+
</TailwindButton>
8080
</div>
8181

8282
<h2>Outline Example</h2>
8383
<div class="panel">
84-
<Button outline variant="primary">
84+
<TailwindButton outline variant="primary">
8585
primary
86-
</Button>
87-
<Button outline variant="secondary">
86+
</TailwindButton>
87+
<TailwindButton outline variant="secondary">
8888
secondary
89-
</Button>
90-
<Button outline variant="accent">
89+
</TailwindButton>
90+
<TailwindButton outline variant="accent">
9191
accent
92-
</Button>
93-
<Button outline variant="info">
92+
</TailwindButton>
93+
<TailwindButton outline variant="info">
9494
info
95-
</Button>
96-
<Button outline variant="success">
95+
</TailwindButton>
96+
<TailwindButton outline variant="success">
9797
success
98-
</Button>
99-
<Button outline variant="warning">
98+
</TailwindButton>
99+
<TailwindButton outline variant="warning">
100100
warning
101-
</Button>
102-
<Button outline variant="error">
101+
</TailwindButton>
102+
<TailwindButton outline variant="error">
103103
error
104-
</Button>
105-
<Button outline variant="ghost">
104+
</TailwindButton>
105+
<TailwindButton outline variant="ghost">
106106
ghost
107-
</Button>
108-
<Button outline variant="link">
107+
</TailwindButton>
108+
<TailwindButton outline variant="link">
109109
link
110-
</Button>
111-
<Button outline variant="disabled">
110+
</TailwindButton>
111+
<TailwindButton outline variant="disabled">
112112
disabled
113-
</Button>
113+
</TailwindButton>
114114
</div>
115115

116116
<h2>size</h2>
117117
<div class="panel">
118-
<Button variant="primary" size="xs">
118+
<TailwindButton variant="primary" size="xs">
119119
xs
120-
</Button>
121-
<Button variant="secondary" size="sm">
120+
</TailwindButton>
121+
<TailwindButton variant="secondary" size="sm">
122122
sm
123-
</Button>
124-
<Button variant="accent" size="md">
123+
</TailwindButton>
124+
<TailwindButton variant="accent" size="md">
125125
md
126-
</Button>
127-
<Button variant="warning" size="lg">
126+
</TailwindButton>
127+
<TailwindButton variant="warning" size="lg">
128128
lg
129-
</Button>
129+
</TailwindButton>
130130
</div>
131131

132132
<h2>loading</h2>
133133
<div class="panel">
134-
<Button variant="primary" loading>
134+
<TailwindButton variant="primary" loading>
135135
loading
136-
</Button>
137-
<Button loading square></Button>
136+
</TailwindButton>
137+
<TailwindButton loading square></TailwindButton>
138138
</div>
139139

140140
<h2>no click animation</h2>
141141
<div class="panel">
142-
<Button variant="primary" noAnimation>
142+
<TailwindButton variant="primary" noAnimation>
143143
click me
144-
</Button>
145-
<Button variant="secondary" noAnimation>
144+
</TailwindButton>
145+
<TailwindButton variant="secondary" noAnimation>
146146
click me
147-
</Button>
147+
</TailwindButton>
148148
</div>
149149

150150
<h2>Square and Circle</h2>
151151
<div class="panel">
152-
<Button variant="secondary" square>
152+
<TailwindButton variant="secondary" square>
153153
A
154-
</Button>
155-
<Button variant="accent" circle>
154+
</TailwindButton>
155+
<TailwindButton variant="accent" circle>
156156
B
157-
</Button>
157+
</TailwindButton>
158158
</div>
159159

160160
<h2>Custom class</h2>
161161

162162
<div class="panel">
163-
<Button type="button" variant="primary" class="px-32 border-4 border-black">
163+
<TailwindButton
164+
type="TailwindButton"
165+
variant="primary"
166+
class="border-4 border-black px-32"
167+
>
164168
CUSTOM CLASS
165-
</Button>
169+
</TailwindButton>
166170
</div>
167171

168172
<div>
169173
<h2>Qwik Events</h2>
170-
<Button variant="primary" onClick$={$(() => window.alert('hello'))}>
174+
<TailwindButton variant="primary" onClick$={$(() => window.alert('hello'))}>
171175
SHOW ALERT
172-
</Button>
176+
</TailwindButton>
173177
</div>
174178
</div>
175179
</>

‎apps/website/tailwind.config.cjs

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,31 @@ const { join } = require('path');
44
module.exports = {
55
content: [
66
join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
7-
join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}'),
7+
join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}')
88
],
99
plugins: [require('daisyui')],
1010
darkMode: 'class',
1111
daisyui: {
1212
themes: ['light', 'dark'],
13-
base: true,
13+
base: true
1414
},
1515
theme: {
1616
extend: {
1717
backgroundImage: {
18-
'optional-theme-bg': "url('/Button-bg.svg')",
18+
'optional-theme-bg': "url('/Button-bg.svg')"
1919
},
2020
boxShadow: {
2121
depth: 'var(--shadow-elevation-medium)',
22-
'depth-dark': 'var(--dark-shadow-elevation-medium)',
22+
'depth-dark': 'var(--dark-shadow-elevation-medium)'
2323
},
24-
},
25-
},
24+
colors: {
25+
primary: {
26+
DEFAULT: 'var(--color-primary)',
27+
forground: 'var(--color-primary)',
28+
dark: 'var(--color-primary-dark)',
29+
light: 'var(--color-primary-light)'
30+
}
31+
}
32+
}
33+
}
2634
};

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@
4343
*/
4444

4545
import { Slot, component$ } from '@builder.io/qwik';
46-
import { cva, type VariantPropsFor } from '@qwik-ui/cva';
46+
import { cva, type AddVariantPropsTo } from '@qwik-ui/cva';
4747

4848
export const buttonVariants = cva(
4949
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
5050
{
5151
variants: {
52-
variant: {
52+
intent: {
5353
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
5454
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
5555
outline:
@@ -66,16 +66,18 @@ export const buttonVariants = cva(
6666
}
6767
},
6868
defaultVariants: {
69-
variant: 'default',
69+
intent: 'default',
7070
size: 'default'
7171
}
7272
}
7373
);
7474

75-
export type ButtonProps = VariantPropsFor<'button', typeof buttonVariants>;
75+
export type ButtonProps = AddVariantPropsTo<'button', typeof buttonVariants>;
7676

77-
export const Button = component$<ButtonProps>((props) => (
78-
<button {...props}>
79-
<Slot />
80-
</button>
81-
));
77+
export const Button = component$<ButtonProps>(({ intent, size, ...restOfProps }) => {
78+
return (
79+
<button class={buttonVariants({ intent, size })} {...restOfProps}>
80+
<Slot />
81+
</button>
82+
);
83+
});

‎packages/kit-fluffy/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './components/button/button';

‎pnpm-lock.yaml

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tsconfig.base.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"@qwik-ui/material": ["packages/kit-material/src/index.ts"],
2121
"@qwik-ui/primitives": ["packages/primitives/src/index.ts"],
2222
"@qwik-ui/shared": ["packages/shared/src/index.ts"],
23-
"@qwik-ui/tailwind": ["packages/kit-tailwind/src/index.ts"]
23+
"@qwik-ui/tailwind": ["packages/kit-tailwind/src/index.ts"],
24+
"@qwik-ui/fluffy": ["packages/kit-fluffy/src/index.ts"]
2425
}
2526
},
2627
"exclude": ["node_modules", "tmp"]

0 commit comments

Comments
 (0)