Skip to content

Commit 3de71e9

Browse files
hngngnhngngn
committed
fix: installation tab code
1 parent 4be6ade commit 3de71e9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+198
-308
lines changed

‎docs/src/components/component-installation.tsx

+17-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import { setConfig } from "@/stores/config";
12
import {
23
Tabs,
34
TabsContent,
45
TabsIndicator,
56
TabsList,
67
TabsTrigger,
78
} from "@repo/tailwindcss/default/tabs";
8-
import type { JSX } from "solid-js";
9+
import { type JSX, createSignal } from "solid-js";
910

1011
type Props = {
1112
cli?: JSX.Element;
@@ -14,8 +15,22 @@ type Props = {
1415
};
1516

1617
const ComponentInstallation = (props: Props) => {
18+
const [selected, setSelected] = createSignal("cli");
19+
20+
const handleOnChange = (e: string) => {
21+
setSelected(e);
22+
setConfig("framework", {
23+
name: e === "tw" ? "tailwindcss" : "unocss",
24+
label: e === "tw" ? "TailwindCSS" : "UnoCSS",
25+
});
26+
};
27+
1728
return (
18-
<Tabs defaultValue="cli" class="relative mt-6 w-full">
29+
<Tabs
30+
value={selected()}
31+
onChange={handleOnChange}
32+
class="relative mt-6 w-full"
33+
>
1934
<TabsList class="bg-transparent border-b rounded-none">
2035
<TabsTrigger value="cli" class="w-fit">
2136
CLI

‎docs/src/components/component-preview.tsx

+4-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Index } from "@/__registry__";
2+
import { config } from "@/stores/config";
23
import {
34
Tabs,
45
TabsContent,
@@ -8,7 +9,6 @@ import {
89
} from "@repo/tailwindcss/default/tabs";
910
import { frameworks } from "scripts/utils/framework";
1011
import { type JSX, Show, createMemo } from "solid-js";
11-
import { StyleProvider, useStyle } from "./style-provider";
1212
import StyleSwitcher from "./style-switcher";
1313

1414
type Props = {
@@ -17,16 +17,15 @@ type Props = {
1717
styleSolid: HTMLElement;
1818
};
1919

20-
const ComponentPreviewImpl = (props: Props) => {
21-
const { style } = useStyle();
20+
const ComponentPreview = (props: Props) => {
2221
const Component = createMemo(
2322
() =>
2423
// @ts-expect-error
25-
Index[style().name][frameworks[0].name][props.name]
24+
Index[config.style.name][frameworks[0].name][props.name]
2625
.component as JSX.Element,
2726
);
2827
// @ts-expect-error -- ts not happy with this
29-
const Code = createMemo(() => props[`style${style().label}`]);
28+
const Code = createMemo(() => props[`style${config.style.label}`]);
3029

3130
return (
3231
<div class="group relative my-4 flex flex-col space-y-2 [&_.preview>div:not(:has(table))]:sm:max-w-[70%]">
@@ -91,12 +90,4 @@ const ComponentPreviewImpl = (props: Props) => {
9190
);
9291
};
9392

94-
const ComponentPreview = (props: Props) => {
95-
return (
96-
<StyleProvider>
97-
<ComponentPreviewImpl {...props} />
98-
</StyleProvider>
99-
);
100-
};
101-
10293
export default ComponentPreview;

‎docs/src/components/component-source.tsx

+5-17
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { cn } from "@/libs/cn";
2+
import { config } from "@/stores/config";
23
import type { CollapsibleTriggerProps } from "@kobalte/core/collapsible";
34
import { Button } from "@repo/tailwindcss/default/button";
45
import {
56
Collapsible,
67
CollapsibleContent,
78
CollapsibleTrigger,
89
} from "@repo/tailwindcss/default/collapsible";
9-
import { frameworks } from "scripts/utils/framework";
1010
import { Show, createMemo, createSignal } from "solid-js";
11-
import { StyleProvider, useStyle } from "./style-provider";
1211

1312
type Props = {
1413
name: string;
@@ -19,15 +18,12 @@ type Props = {
1918
styleSolidUnoCSS: HTMLElement;
2019
};
2120

22-
const ComponentSourceImpl = (props: Props) => {
23-
const { style } = useStyle();
21+
const ComponentSource = (props: Props) => {
2422
const [isOpened, setIsOpened] = createSignal(false);
25-
const framework = () =>
26-
frameworks.filter((i) => i.name === props.framework).map((i) => i.label)[0];
2723
const Code = createMemo(
2824
() =>
2925
// @ts-expect-error -- ts not happy with this
30-
props[`style${style().label}${framework()}`],
26+
props[`style${config.style.label}${config.framework.label}`],
3127
);
3228

3329
return (
@@ -45,7 +41,7 @@ const ComponentSourceImpl = (props: Props) => {
4541
)}
4642
>
4743
<Show
48-
when={Code}
44+
when={Code()}
4945
fallback={
5046
<p class="text-sm text-muted-foreground">
5147
Code for component{" "}
@@ -56,7 +52,7 @@ const ComponentSourceImpl = (props: Props) => {
5652
</p>
5753
}
5854
>
59-
<Code />
55+
{Code()}
6056
</Show>
6157
</div>
6258
</CollapsibleContent>
@@ -81,12 +77,4 @@ const ComponentSourceImpl = (props: Props) => {
8177
);
8278
};
8379

84-
const ComponentSource = (props: Props) => {
85-
return (
86-
<StyleProvider>
87-
<ComponentSourceImpl {...props} />
88-
</StyleProvider>
89-
);
90-
};
91-
9280
export default ComponentSource;

‎docs/src/components/style-provider.tsx

-55
This file was deleted.

‎docs/src/components/style-switcher.tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1+
import { config, setConfig } from "@/stores/config";
12
import {
23
Select,
34
SelectContent,
45
SelectItem,
56
SelectTrigger,
67
SelectValue,
78
} from "@repo/tailwindcss/default/select";
8-
import { styles } from "scripts/utils/styles";
9-
import { useStyle } from "./style-provider";
9+
import { type Style, styles } from "scripts/utils/styles";
1010

1111
const StyleSwitcher = () => {
12-
const { style, setStyle } = useStyle();
13-
1412
return (
1513
<Select
1614
disallowEmptySelection
1715
options={styles}
18-
value={style()}
19-
onChange={setStyle}
16+
value={config.style}
17+
onChange={(e) => setConfig("style", e)}
2018
optionValue="name"
2119
itemComponent={(props) => (
2220
<SelectItem item={props.item} class="text-xs">
@@ -26,7 +24,7 @@ const StyleSwitcher = () => {
2624
>
2725
<SelectTrigger class="h-7 w-[145px] text-xs [&>svg]:size-3">
2826
<span class="text-muted-foreground">Style: </span>
29-
<SelectValue<(typeof styles)[0]>>
27+
<SelectValue<Style>>
3028
{(state) => state.selectedOption().label}
3129
</SelectValue>
3230
</SelectTrigger>

‎docs/src/content/docs/components/accordion.mdx

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ link:
88
---
99

1010
import ComponentInstallation from "@/components/component-installation";
11-
import ComponentSource from "@/components/component-source";
1211
import ComponentPreview from "@/components/component-preview";
12+
import ComponentSource from "@/components/component-source";
1313

1414
<ComponentPreview name="accordion-demo" client:only="solid-js" />
1515

@@ -31,7 +31,7 @@ npm install @kobalte/core
3131
```
3232

3333
<StepItem>Copy and paste the following code into your project:</StepItem>
34-
<ComponentSource name="accordion" framework="tailwindcss" client:only="solid-js" />
34+
<ComponentSource name="accordion" client:only="solid-js" />
3535

3636
<StepItem>Update config:</StepItem>
3737

@@ -69,7 +69,7 @@ npm install @kobalte/core
6969
```
7070

7171
<StepItem>Copy and paste the following code into your project:</StepItem>
72-
<ComponentSource name="accordion" framework="unocss" client:only="solid-js" />
72+
<ComponentSource name="accordion" client:only="solid-js" />
7373

7474
<StepItem>Update config:</StepItem>
7575

@@ -119,6 +119,6 @@ import {
119119
</AccordionItem>
120120
</Accordion>
121121
```import ComponentInstallation from "@/components/component-installation";
122-
import ComponentSource from "@/components/component-source";
123122
import ComponentPreview from "@/components/component-preview";
123+
import ComponentSource from "@/components/component-source";
124124

‎docs/src/content/docs/components/alert-dialog.mdx

+17-6
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ link:
99

1010
import ComponentInstallation from "@/components/component-installation";
1111
import ComponentPreview from "@/components/component-preview";
12-
import RawCode from "@/components/raw-code.tsx";
13-
import TwRawCode from "@repo/tailwindcss/default/alert-dialog?raw";
14-
import UnoRawCode from "@repo/unocss/default/alert-dialog?raw";
12+
import ComponentSource from "@/components/component-source";
1513

1614
<ComponentPreview name="alert-dialog-demo" client:only="solid-js" />
1715

@@ -33,7 +31,7 @@ npm install @kobalte/core
3331
```
3432

3533
<StepItem>Copy and paste the following code into your project:</StepItem>
36-
<RawCode code={TwRawCode} client:only="solid-js" />
34+
<ComponentSource name="alert-dialog" client:only="solid-js" />
3735

3836
</Step>
3937

@@ -45,7 +43,7 @@ npm install @kobalte/core
4543
```
4644

4745
<StepItem>Copy and paste the following code into your project:</StepItem>
48-
<RawCode code={UnoRawCode} client:only="solid-js" />
46+
<ComponentSource name="alert-dialog" client:only="solid-js" />
4947

5048
</Step>
5149

@@ -84,4 +82,17 @@ import {
8482
</AlertDialogFooter>
8583
</AlertDialogContent>
8684
</AlertDialog>
87-
```
85+
```import ComponentInstallation from "@/components/component-installation";
86+
import ComponentPreview from "@/components/component-preview";
87+
import RawCode from "@/components/raw-code.tsx";
88+
import TwRawCode from "@repo/tailwindcss/default/alert-dialog?raw";
89+
import UnoRawCode from "@repo/unocss/default/alert-dialog?raw";
90+
import ComponentInstallation from "@/components/component-installation";
91+
import ComponentPreview from "@/components/component-preview";
92+
import RawCode from "@/components/raw-code.tsx";
93+
import TwRawCode from "@repo/tailwindcss/default/alert-dialog?raw";
94+
import UnoRawCode from "@repo/unocss/default/alert-dialog?raw";
95+
import ComponentInstallation from "@/components/component-installation";
96+
import ComponentPreview from "@/components/component-preview";
97+
import ComponentSource from "@/components/component-source";
98+

‎docs/src/content/docs/components/alert.mdx

+3-5
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ link:
99

1010
import ComponentInstallation from "@/components/component-installation";
1111
import ComponentPreview from "@/components/component-preview";
12-
import RawCode from "@/components/raw-code.tsx";
13-
import TwRawCode from "@repo/tailwindcss/default/alert?raw";
14-
import UnoRawCode from "@repo/unocss/default/alert?raw";
12+
import ComponentSource from "@/components/component-source";
1513

1614
<ComponentPreview name="alert-demo" client:only="solid-js" />
1715

@@ -33,7 +31,7 @@ npm install @kobalte/core
3331
```
3432

3533
<StepItem>Copy and paste the following code into your project:</StepItem>
36-
<RawCode code={TwRawCode} client:only="solid-js" />
34+
<ComponentSource name="alert" client:only="solid-js" />
3735

3836
</Step>
3937

@@ -45,7 +43,7 @@ npm install @kobalte/core
4543
```
4644

4745
<StepItem>Copy and paste the following code into your project:</StepItem>
48-
<RawCode code={UnoRawCode} client:only="solid-js" />
46+
<ComponentSource name="alert" client:only="solid-js" />
4947

5048
</Step>
5149

‎docs/src/content/docs/components/badge.mdx

+3-5
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ component: true
66

77
import ComponentInstallation from "@/components/component-installation";
88
import ComponentPreview from "@/components/component-preview";
9-
import RawCode from "@/components/raw-code.tsx";
10-
import TwRawCode from "@repo/tailwindcss/default/badge?raw";
11-
import UnoRawCode from "@repo/unocss/default/badge?raw";
9+
import ComponentSource from "@/components/component-source";
1210

1311
<ComponentPreview name="badge-demo" client:only="solid-js" />
1412

@@ -25,14 +23,14 @@ npx shadcn-solid@latest add badge
2523
<Step slot="tw">
2624

2725
<StepItem>Copy and paste the following code into your project:</StepItem>
28-
<RawCode code={TwRawCode} client:only="solid-js" />
26+
<ComponentSource name="badge" client:only="solid-js" />
2927

3028
</Step>
3129

3230
<Step slot="uno">
3331

3432
<StepItem>Copy and paste the following code into your project:</StepItem>
35-
<RawCode code={UnoRawCode} client:only="solid-js" />
33+
<ComponentSource name="badge" client:only="solid-js" />
3634

3735
</Step>
3836

0 commit comments

Comments
 (0)