Skip to content

Commit 1c77e96

Browse files
shinokadashinokada
committed
docs: individual examples for accordion, alert and avatar pages
1 parent 073989b commit 1c77e96

File tree

4 files changed

+158
-125
lines changed

4 files changed

+158
-125
lines changed

‎src/routes/components/accordion/+page.svelte‎

Lines changed: 77 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
<script lang="ts">
2-
import { type Component } from "svelte";
3-
import { uiHelpers, Label, Radio } from "$lib";
4-
import DynamicCodeBlockHighlight from "../../utils/DynamicCodeBlockHighlight.svelte";
2+
import HighlightCompo from "../../utils/HighlightCompo.svelte";
53
import CodeWrapper from "../../utils/CodeWrapper.svelte";
64
import H1 from "../../utils/H1.svelte";
75
import H2 from "../../utils/H2.svelte";
8-
import { isSvelteOverflow, getExampleFileName } from "../../utils/helpers";
96
// Props table
107
import CompoAttributesViewer from "../../utils/CompoAttributesViewer.svelte";
118
const dirName = "accordion";
@@ -17,54 +14,89 @@
1714
import: "default",
1815
eager: true
1916
}) as Record<string, string>;
17+
</script>
2018

21-
const exampleArr = [
22-
{ name: "Default", component: ExampleComponents.Default },
23-
{ name: "Open", component: ExampleComponents.Open },
24-
{ name: "Color", component: ExampleComponents.Color },
25-
{ name: "Flush", component: ExampleComponents.Flush },
26-
{ name: "Arrow style", component: ExampleComponents.ArrowStyle },
27-
{ name: "Icon", component: ExampleComponents.Icon },
28-
{ name: "Multiple mode", component: ExampleComponents.MultipleMode },
29-
{ name: "Transitions", component: ExampleComponents.Transitions },
30-
{ name: "Nesting", component: ExampleComponents.Nesting },
31-
{ name: "Open multiple", component: ExampleComponents.OpenMultiple }
32-
];
33-
let selectedExample: string | number = $state(exampleArr[0].name);
34-
let svelteCode = $derived(getExampleFileName(selectedExample, exampleArr));
19+
<H1>Accordion</H1>
3520

36-
function findObject(arr: { name: string; component: Component }[], name: string) {
37-
const matchingObject = arr.find((obj) => obj.name === name);
38-
return matchingObject ? matchingObject.component : null;
39-
}
40-
const SelectedComponent = $derived(findObject(exampleArr, selectedExample));
41-
// end of dynamic svelte component
21+
<H2>Default Accordion</H2>
4222

43-
// for examples DynamicCodeBlockHighlight
44-
let codeBlock = uiHelpers();
45-
let exampleExpand = $state(false);
46-
let showExpandButton = $derived(isSvelteOverflow(svelteCode, exampleModules));
47-
const handleExpandClick = () => {
48-
exampleExpand = !exampleExpand;
49-
};
50-
// end of DynamicCodeBlock setup
51-
$effect(() => {
52-
exampleExpand = codeBlock.isOpen;
53-
});
54-
</script>
23+
<CodeWrapper>
24+
<ExampleComponents.Default />
25+
{#snippet codeblock()}
26+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Default.svelte"] as string} />
27+
{/snippet}
28+
</CodeWrapper>
5529

56-
<H1>Accordion</H1>
30+
<H2>Open</H2>
31+
32+
<CodeWrapper>
33+
<ExampleComponents.Open />
34+
{#snippet codeblock()}
35+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Open.svelte"] as string} />
36+
{/snippet}
37+
</CodeWrapper>
38+
39+
<H2>Color</H2>
40+
<CodeWrapper>
41+
<ExampleComponents.Color />
42+
{#snippet codeblock()}
43+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Color.svelte"] as string} />
44+
{/snippet}
45+
</CodeWrapper>
46+
47+
<H2>Flush</H2>
48+
<CodeWrapper>
49+
<ExampleComponents.Flush />
50+
{#snippet codeblock()}
51+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Flush.svelte"] as string} />
52+
{/snippet}
53+
</CodeWrapper>
54+
55+
<H2>Arrow style</H2>
56+
<CodeWrapper>
57+
<ExampleComponents.ArrowStyle />
58+
{#snippet codeblock()}
59+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/ArrowStyle.svelte"] as string} />
60+
{/snippet}
61+
</CodeWrapper>
62+
63+
<H2>Icon (animated icons)</H2>
64+
<CodeWrapper>
65+
<ExampleComponents.Icon />
66+
{#snippet codeblock()}
67+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Icon.svelte"] as string} />
68+
{/snippet}
69+
</CodeWrapper>
70+
71+
<H2>Multiple mode</H2>
72+
<CodeWrapper>
73+
<ExampleComponents.MultipleMode />
74+
{#snippet codeblock()}
75+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/MultipleMode.svelte"] as string} />
76+
{/snippet}
77+
</CodeWrapper>
78+
79+
<H2>Transitions</H2>
80+
<CodeWrapper>
81+
<ExampleComponents.Transitions />
82+
{#snippet codeblock()}
83+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Transitions.svelte"] as string} />
84+
{/snippet}
85+
</CodeWrapper>
86+
87+
<H2>Nesting</H2>
88+
<CodeWrapper>
89+
<ExampleComponents.Nesting />
90+
{#snippet codeblock()}
91+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Nesting.svelte"] as string} />
92+
{/snippet}
93+
</CodeWrapper>
5794

95+
<H2>Open multiple</H2>
5896
<CodeWrapper>
59-
<div class="mb-12 flex flex-wrap">
60-
<Label class="mb-4 w-full font-bold">Example</Label>
61-
{#each exampleArr as style}
62-
<Radio labelClass="w-40 my-1" onclick={() => (exampleExpand = false)} name="block_style" bind:group={selectedExample} value={style.name}>{style.name}</Radio>
63-
{/each}
64-
</div>
65-
<SelectedComponent />
97+
<ExampleComponents.OpenMultiple />
6698
{#snippet codeblock()}
67-
<DynamicCodeBlockHighlight replaceLib {handleExpandClick} expand={exampleExpand} {showExpandButton} code={exampleModules[`./examples/${svelteCode}`] as string} />
99+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/OpenMultiple.svelte"] as string} />
68100
{/snippet}
69101
</CodeWrapper>
70102

‎src/routes/components/alert/+page.svelte‎

Lines changed: 28 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts">
2-
import { type Component } from "svelte";
32
import { Alert, alert as fsalert, Button, Label, Radio, type AlertProps, uiHelpers } from "$lib";
43
import { InfoCircleSolid } from "flowbite-svelte-icons";
54
import { blur, fly, slide, scale } from "svelte/transition";
@@ -10,7 +9,7 @@
109
import CodeWrapper from "../../utils/CodeWrapper.svelte";
1110
import H1 from "../../utils/H1.svelte";
1211
import H2 from "../../utils/H2.svelte";
13-
import { isGeneratedCodeOverflow, isSvelteOverflow, getExampleFileName } from "../../utils/helpers";
12+
import { isGeneratedCodeOverflow } from "../../utils/helpers";
1413
// Props table
1514
import CompoAttributesViewer from "../../utils/CompoAttributesViewer.svelte";
1615
const dirName = "alert";
@@ -24,22 +23,6 @@
2423
eager: true
2524
}) as Record<string, string>;
2625
27-
const exampleArr = [
28-
{ name: "Alert with list", component: ExampleComponents.AlertWithList },
29-
{ name: "Additional content", component: ExampleComponents.AdditionalContent },
30-
{ name: "Custom color", component: ExampleComponents.CustomColor },
31-
{ name: "Event", component: ExampleComponents.Event }
32-
];
33-
let selectedExample: string | number = $state(exampleArr[0].name);
34-
let svelteCode = $derived(getExampleFileName(selectedExample, exampleArr));
35-
36-
function findObject(arr: { name: string; component: Component }[], name: string) {
37-
const matchingObject = arr.find((obj) => obj.name === name);
38-
return matchingObject ? matchingObject.component : null;
39-
}
40-
const SelectedComponent = $derived(findObject(exampleArr, selectedExample));
41-
// end of dynamic svelte component
42-
4326
// for interactive code builder
4427
const colors = Object.keys(fsalert.variants.color);
4528
let color: AlertProps["color"] = $state("primary");
@@ -140,18 +123,8 @@
140123
const handleBuilderExpandClick = () => {
141124
builderExpand = !builderExpand;
142125
};
143-
// for DynamicCodeBlock setup for examples section. dynamically adjust the height of the code block based on the svelteCode content.
144-
145-
// for examples DynamicCodeBlockHighlight
146-
let codeBlock = uiHelpers();
147-
let exampleExpand = $state(false);
148-
let showExpandButton = $derived(isSvelteOverflow(svelteCode, exampleModules));
149-
const handleExpandClick = () => {
150-
exampleExpand = !exampleExpand;
151-
};
152-
// end of DynamicCodeBlock setup
126+
153127
$effect(() => {
154-
exampleExpand = codeBlock.isOpen;
155128
builderExpand = builder.isOpen;
156129
});
157130
</script>
@@ -202,18 +175,35 @@
202175
{/snippet}
203176
</CodeWrapper>
204177

205-
<H2>Examples</H2>
178+
<H2>Alert with list</H2>
179+
<CodeWrapper>
180+
<ExampleComponents.AlertWithList />
181+
{#snippet codeblock()}
182+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/AlertWithList.svelte"] as string} />
183+
{/snippet}
184+
</CodeWrapper>
206185

186+
<H2>Additional content</H2>
207187
<CodeWrapper>
208-
<div class="mb-12 flex flex-wrap">
209-
<Label class="mb-4 w-full font-bold">Example</Label>
210-
{#each exampleArr as style}
211-
<Radio labelClass="w-40 my-1" onclick={() => (exampleExpand = false)} name="block_style" bind:group={selectedExample} value={style.name}>{style.name}</Radio>
212-
{/each}
213-
</div>
214-
<SelectedComponent />
188+
<ExampleComponents.AdditionalContent />
189+
{#snippet codeblock()}
190+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/AdditionalContent.svelte"] as string} />
191+
{/snippet}
192+
</CodeWrapper>
193+
194+
<H2>Custom color</H2>
195+
<CodeWrapper>
196+
<ExampleComponents.CustomColor />
197+
{#snippet codeblock()}
198+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/CustomColor.svelte"] as string} />
199+
{/snippet}
200+
</CodeWrapper>
201+
202+
<H2>Event</H2>
203+
<CodeWrapper>
204+
<ExampleComponents.Event />
215205
{#snippet codeblock()}
216-
<DynamicCodeBlockHighlight replaceLib {handleExpandClick} expand={exampleExpand} {showExpandButton} code={exampleModules[`./examples/${svelteCode}`] as string} />
206+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Event.svelte"] as string} />
217207
{/snippet}
218208
</CodeWrapper>
219209

‎src/routes/components/avatar/+page.svelte‎

Lines changed: 52 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<script lang="ts">
2-
import { type Component } from "svelte";
32
import { Avatar, avatar, Label, Radio, Button, uiHelpers, type AvatarProps } from "$lib";
43
import HighlightCompo from "../../utils/HighlightCompo.svelte";
54
import DynamicCodeBlockHighlight from "../../utils/DynamicCodeBlockHighlight.svelte";
65
import CodeWrapper from "../../utils/CodeWrapper.svelte";
76
import H1 from "../../utils/H1.svelte";
87
import H2 from "../../utils/H2.svelte";
9-
import { isGeneratedCodeOverflow, isSvelteOverflow, getExampleFileName } from "../../utils/helpers";
8+
import { isGeneratedCodeOverflow } from "../../utils/helpers";
109
// Props table
1110
import CompoAttributesViewer from "../../utils/CompoAttributesViewer.svelte";
1211
const dirName = "avatar";
@@ -19,25 +18,6 @@
1918
eager: true
2019
}) as Record<string, string>;
2120
22-
const exampleArr = [
23-
{ name: "Avatar text", component: ExampleComponents.AvatarText },
24-
{ name: "Dot indicator", component: ExampleComponents.DotIndicator },
25-
{ name: "Placeholder", component: ExampleComponents.Placeholder },
26-
{ name: "Placeholder initial", component: ExampleComponents.PlaceholderInitial },
27-
{ name: "Stacked", component: ExampleComponents.Stacked },
28-
{ name: "User dropdown", component: ExampleComponents.UserDropdown },
29-
{ name: "Avatar with tooltip", component: ExampleComponents.AvatarWithTooltip }
30-
];
31-
let selectedExample: string | number = $state(exampleArr[0].name);
32-
let svelteCode = $derived(getExampleFileName(selectedExample, exampleArr));
33-
34-
function findObject(arr: { name: string; component: Component }[], name: string) {
35-
const matchingObject = arr.find((obj) => obj.name === name);
36-
return matchingObject ? matchingObject.component : null;
37-
}
38-
const SelectedComponent = $derived(findObject(exampleArr, selectedExample));
39-
// end of dynamic svelte component
40-
4121
// reactive example, rounded, border, stacked, size, className
4222
const sizes = Object.keys(avatar.variants.size);
4323
let avatarSize: AvatarProps["size"] = $state("md");
@@ -81,18 +61,8 @@
8161
const handleBuilderExpandClick = () => {
8262
builderExpand = !builderExpand;
8363
};
84-
// for DynamicCodeBlock setup for examples section. dynamically adjust the height of the code block based on the svelteCode content.
85-
86-
// for examples DynamicCodeBlockHighlight
87-
let codeBlock = uiHelpers();
88-
let exampleExpand = $state(false);
89-
let showExpandButton = $derived(isSvelteOverflow(svelteCode, exampleModules));
90-
const handleExpandClick = () => {
91-
exampleExpand = !exampleExpand;
92-
};
93-
// end of DynamicCodeBlock setup
64+
9465
$effect(() => {
95-
exampleExpand = codeBlock.isOpen;
9666
builderExpand = builder.isOpen;
9767
});
9868
</script>
@@ -126,18 +96,59 @@
12696
{/snippet}
12797
</CodeWrapper>
12898

129-
<H2>Examples</H2>
99+
<H2>Avatar text</H2>
100+
<CodeWrapper>
101+
<ExampleComponents.AvatarText />
102+
{#snippet codeblock()}
103+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/AvatarText.svelte"] as string} />
104+
{/snippet}
105+
</CodeWrapper>
130106

107+
<H2>Dot indicator</H2>
131108
<CodeWrapper>
132-
<div class="mb-12 flex flex-wrap">
133-
<Label class="mb-4 w-full font-bold">Example</Label>
134-
{#each exampleArr as style}
135-
<Radio labelClass="w-40 my-1" onclick={() => (exampleExpand = false)} name="block_style" bind:group={selectedExample} value={style.name}>{style.name}</Radio>
136-
{/each}
137-
</div>
138-
<SelectedComponent />
109+
<ExampleComponents.DotIndicator />
110+
{#snippet codeblock()}
111+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/DotIndicator.svelte"] as string} />
112+
{/snippet}
113+
</CodeWrapper>
114+
115+
<H2>Placeholder</H2>
116+
<CodeWrapper>
117+
<ExampleComponents.Placeholder />
118+
{#snippet codeblock()}
119+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Placeholder.svelte"] as string} />
120+
{/snippet}
121+
</CodeWrapper>
122+
123+
<H2>Placeholder initial</H2>
124+
<CodeWrapper>
125+
<ExampleComponents.PlaceholderInitial />
126+
{#snippet codeblock()}
127+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/PlaceholderInitial.svelte"] as string} />
128+
{/snippet}
129+
</CodeWrapper>
130+
131+
<H2>Stacked</H2>
132+
<CodeWrapper>
133+
<ExampleComponents.Stacked />
134+
{#snippet codeblock()}
135+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/Stacked.svelte"] as string} />
136+
{/snippet}
137+
</CodeWrapper>
138+
139+
<H2>User dropdown</H2>
140+
<CodeWrapper>
141+
<ExampleComponents.UserDropdown />
142+
{#snippet codeblock()}
143+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/UserDropdown.svelte"] as string} />
144+
{/snippet}
145+
</CodeWrapper>
146+
147+
<H2>Avatar with tooltip</H2>
148+
<CodeWrapper>
149+
<ExampleComponents.AvatarWithTooltip />
139150
{#snippet codeblock()}
140-
<DynamicCodeBlockHighlight replaceLib {handleExpandClick} expand={exampleExpand} {showExpandButton} code={exampleModules[`./examples/${svelteCode}`] as string} />
151+
<HighlightCompo codeLang="ts" code={exampleModules["./examples/AvatarWithTooltip.svelte"] as string} />
141152
{/snippet}
142153
</CodeWrapper>
143154

‎src/routes/components/avatar/examples/AvatarWithTooltip.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Avatar, Tooltip } from "$lib";
33
</script>
44

5-
<div class="flex justify-center gap-8">
5+
<div class="flex h-32 items-center justify-center gap-8">
66
<Avatar id="jese" cornerStyle="rounded" alt="Jese Leos" src="/images/profile-picture-1.webp" />
77
<Tooltip triggeredBy="#jese">Jese Leos</Tooltip>
88
<Avatar id="robert" cornerStyle="rounded" alt="Robert Gouth" src="/images/profile-picture-2.webp" />

0 commit comments

Comments
 (0)