Skip to content

Commit 926daed

Browse files
shairezshairez
committed
docs(fluffy): modified installation doc
1 parent e366073 commit 926daed

File tree

9 files changed

+195
-71
lines changed

9 files changed

+195
-71
lines changed

‎apps/website/src/_state/component-statuses.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const statusByComponent: ComponentKitsStatuses = {
1515
Alert: ComponentStatus.Planned,
1616
Badge: ComponentStatus.Planned,
1717
Breadcrumb: ComponentStatus.Planned,
18-
Button: ComponentStatus.Planned,
18+
Button: ComponentStatus.Beta,
1919
'Button Group': ComponentStatus.Planned,
2020
Card: ComponentStatus.Planned,
2121
Carousel: ComponentStatus.Planned,

‎apps/website/src/routes/docs/_components/code-copy/code-copy.tsx

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,20 @@ export const CodeCopy = component$(
1414
const copied = useSignal(false);
1515

1616
return (
17-
<div>
18-
<Button
19-
look="ghost"
20-
intent="basic"
21-
animation={!copied.value ? 'bouncy' : 'none'}
22-
{...restOfProps}
23-
title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
24-
class={twMerge(stringifyClassList(outsideClass))}
25-
onClick$={async () => {
26-
await copy(code);
27-
copied.value = true;
28-
}}
29-
>
30-
{!copied.value ? 'Copy' : 'Copied!'}
31-
</Button>
32-
)
33-
</div>
17+
<Button
18+
look="ghost"
19+
intent="basic"
20+
animation={!copied.value ? 'bouncy' : 'none'}
21+
{...restOfProps}
22+
title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
23+
class={twMerge(stringifyClassList(outsideClass))}
24+
onClick$={async () => {
25+
await copy(code);
26+
copied.value = true;
27+
}}
28+
>
29+
{!copied.value ? 'Copy' : 'Copied!'}
30+
</Button>
3431
);
3532
},
3633
);

‎apps/website/src/routes/docs/_components/highlight/highlight.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
1-
import { QwikIntrinsicElements, component$, useSignal, useTask$ } from '@builder.io/qwik';
1+
import {
2+
ClassList,
3+
QwikIntrinsicElements,
4+
component$,
5+
useSignal,
6+
useTask$,
7+
} from '@builder.io/qwik';
28
import { OmitSignalClass } from '@qwik-ui/type-utils';
39
import { CodeCopy } from '../code-copy/code-copy';
410
import { getOrCreateHighlighter } from './get-or-create-highlighter';
511

612
export type HighlightProps = OmitSignalClass<QwikIntrinsicElements['pre']> & {
713
code: string;
14+
copyCodeClass?: ClassList;
15+
language?: 'tsx' | 'html' | 'css';
816
splitCommentStart?: string;
917
splitCommentEnd?: string;
1018
};
1119

1220
export const Highlight = component$(
1321
({
1422
code,
23+
copyCodeClass,
24+
language = 'tsx',
1525
splitCommentStart = '{/* start */}',
1626
splitCommentEnd = '{/* end */}',
1727
...props
@@ -32,19 +42,19 @@ export const Highlight = component$(
3242
modifiedCode = partsOfCode[0];
3343
}
3444

35-
codeSig.value = highlighter.codeToHtml(modifiedCode, { lang: 'tsx' });
45+
codeSig.value = highlighter.codeToHtml(modifiedCode, { lang: language });
3646
});
3747

3848
return (
3949
<div
4050
{...props}
4151
class={[
42-
'tab-size relative h-full max-w-full overflow-hidden overflow-x-auto rounded-xl bg-slate-50 p-12 text-sm dark:bg-slate-800',
52+
'tab-size relative max-w-full overflow-hidden overflow-x-auto rounded-xl bg-slate-50 p-12 text-sm dark:bg-slate-800',
4353
props.class,
4454
]}
4555
>
4656
<div dangerouslySetInnerHTML={codeSig.value} />
47-
<CodeCopy class="absolute right-2 top-2" code={code} />
57+
<CodeCopy class={['absolute right-2 top-2', copyCodeClass]} code={code} />
4858
</div>
4959
);
5060
},

‎apps/website/src/routes/docs/fluffy/(getting-started)/install/examples.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* eslint-disable @nx/enforce-module-boundaries */
2+
3+
import rootCssCode from '../../../../../../../../packages/kit-fluffy/src/templates/root.css_template?raw';
4+
import tailwindConfigCode from '../../../../../../../../packages/kit-fluffy/src/templates/tailwind.config.js_template?raw';
5+
import { Highlight } from '../../../_components/highlight/highlight';
6+
7+
export const InstallExample = () => (
8+
<Highlight
9+
class="border p-6 shadow-md"
10+
copyCodeClass="top-3"
11+
code="pnpm i -D @qwik-ui/headless"
12+
/>
13+
);
14+
15+
export const TailwindConfigExample = () => <Highlight code={tailwindConfigCode} />;
16+
export const RootCssExample = () => <Highlight code={rootCssCode} language="css" />;

‎apps/website/src/routes/docs/fluffy/(getting-started)/install/index.mdx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: 'Qwik UI | Fluffy (styled) Kit - Installation'
3+
---
4+
5+
import {InstallExample, TailwindConfigExample, RootCssExample} from './examples';
6+
7+
# Installing Fluffy (styled) Kit
8+
9+
## Step 1: Install the Fluffy (styled) Kit
10+
11+
To get started with the Fluffy (styled) Kit for Qwik UI, you first need to install the headless package:
12+
13+
<InstallExample/>
14+
15+
16+
17+
## Step 2: Add CSS variables
18+
19+
Then you need to add the CSS variables to your root CSS file:
20+
21+
<RootCssExample/>
22+
23+
## Step 3: Modify your tailwind.config.js file
24+
25+
Finally, you need to modify your `tailwind.config.js` file:
26+
27+
<TailwindConfigExample/>
28+
29+
Now you can start building beautiful Qwik websites.
30+
Choose from each of the ready made components and read their installation instructions.

‎apps/website/src/routes/docs/fluffy/(getting-started)/install/index.tsx

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎packages/kit-fluffy/src/templates/root.css_template

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@layer base {
2+
3+
:root {
4+
--color-background: 0 0% 100%;
5+
--color-foreground: 263 84% 5%;
6+
7+
--color-primary: 263 56% 52%;
8+
--color-primary-foreground: 0 0% 100%;
9+
10+
--color-secondary: 202 91% 52%;
11+
--color-secondary-foreground: 0 0% 100%;
12+
13+
--color-muted: 210 40% 96%;
14+
--color-muted-foreground: 263 16% 47%;
15+
16+
--color-accent: 0 0% 89%;
17+
--color-accent-foreground: 263 47% 11%;
18+
19+
--color-destructive: 0 84% 60%;
20+
--color-destructive-foreground: 263 0% 100%;
21+
22+
--color-card: 0 0% 100%;
23+
--color-card-foreground: 263 84% 5%;
24+
25+
--color-popover: 0 0% 100%;
26+
--color-popover-foreground: 263 84% 5%;
27+
28+
--color-border: 263 32% 91%;
29+
30+
--color-input: 263 32% 91%;
31+
32+
--color-ring: 263 18% 61%;
33+
34+
--border-radius: 0.375rem;
35+
}
36+
37+
.dark {
38+
--color-background: 222 47% 11%;
39+
--color-foreground: 263 40% 98%;
40+
41+
--color-primary: 263 70% 58%;
42+
--color-primary-foreground: 190 40% 98%;
43+
44+
--color-secondary: 202 97% 55%;
45+
--color-secondary-foreground: 190 40% 98%;
46+
47+
--color-muted: 218 32.6% 17.5%;
48+
--color-muted-foreground: 263 20.2% 65.1%;
49+
50+
--color-accent: 0 0% 23%;
51+
--color-accent-foreground: 263 40% 98%;
52+
53+
--color-destructive: 0 70% 40%;
54+
--color-destructive-foreground: 263 40% 98%;
55+
56+
--color-card: 263 84% 4.9%;
57+
--color-card-foreground: 263 40% 98%;
58+
59+
--color-popover: 263 84% 4.9%;
60+
--color-popover-foreground: 263 40% 98%;
61+
62+
--color-border: 263 32.6% 17.5%;
63+
64+
--color-input: 263 32.6% 17.5%;
65+
66+
--color-ring: 263 26.8% 83.9%;
67+
}
68+
}

‎packages/kit-fluffy/src/templates/tailwind.config.js_template

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/** @type {import('tailwindcss').Config} */
2+
3+
module.exports = {
4+
darkMode: 'class',
5+
theme: {
6+
extend: {
7+
colors: {
8+
border: 'hsl(var(--color-border))',
9+
input: 'hsl(var(--color-input))',
10+
ring: 'hsl(var(--color-ring))',
11+
background: 'hsl(var(--color-background))',
12+
foreground: 'hsl(var(--color-foreground))',
13+
14+
primary: {
15+
DEFAULT: 'hsl(var(--color-primary))',
16+
foreground: 'hsl(var(--color-primary-foreground))',
17+
},
18+
secondary: {
19+
DEFAULT: 'hsl(var(--color-secondary))',
20+
foreground: 'hsl(var(--color-secondary-foreground))',
21+
},
22+
accent: {
23+
DEFAULT: 'hsl(var(--color-accent))',
24+
foreground: 'hsl(var(--color-accent-foreground))',
25+
},
26+
muted: {
27+
DEFAULT: 'hsl(var(--color-muted))',
28+
foreground: 'hsl(var(--color-muted-foreground))',
29+
},
30+
destructive: {
31+
DEFAULT: 'hsl(var(--color-destructive))',
32+
foreground: 'hsl(var(--color-destructive-foreground))',
33+
},
34+
popover: {
35+
DEFAULT: 'hsl(var(--color-popover))',
36+
foreground: 'hsl(var(--color-popover-foreground))',
37+
},
38+
card: {
39+
DEFAULT: 'hsl(var(--color-card))',
40+
foreground: 'hsl(var(--color-card-foreground))',
41+
},
42+
}
43+
borderRadius: {
44+
lg: 'var(--border-radius)',
45+
md: 'calc(var(--border-radius) - 2px)',
46+
sm: 'calc(var(--border-radius) - 4px)',
47+
},
48+
}
49+
}
50+
}

‎tsconfig.base.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"skipDefaultLibCheck": true,
1616
"baseUrl": ".",
1717
"paths": {
18+
"@/*": ["./*"],
1819
"@qwik-ui/cva": ["packages/cva/src/index.ts"],
1920
"@qwik-ui/fluffy": ["packages/kit-fluffy/src/index.ts"],
2021
"@qwik-ui/headless": ["packages/kit-headless/src/index.ts"],
@@ -25,5 +26,6 @@
2526
"@qwik-ui/type-utils": ["packages/shared/util/types/src/index.ts"]
2627
}
2728
},
29+
"include": ["packages"],
2830
"exclude": ["node_modules", "tmp"]
2931
}

0 commit comments

Comments
 (0)