glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: storybook cases and mocks

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-19 13:58:12 +03:00
parent 9d1f59d819
commit da79dd2e35
22 changed files with 3047 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/shared/ui/VirtualList/VirtualList.stories.svelte
View File

@@ -38,27 +38,31 @@ const { Story } = defineMeta({
<script lang="ts">
const smallDataSet = Array.from({ length: 20 }, (_, i) => `${i + 1}) I will not waste chalk.`);
const largeDataSet = Array.from(
{ length: 10000 },
const mediumDataSet = Array.from(
{ length: 200 },
(_, i) => `${i + 1}) I will not skateboard in the halls.`,
);
const emptyDataSet: string[] = [];
</script>
<Story name="Small Dataset">
<VirtualList items={smallDataSet} itemHeight={40}>
{#snippet children({ item })}
<div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
{/snippet}
</VirtualList>
<div class="h-[400px]">
<VirtualList items={smallDataSet} itemHeight={40}>
{#snippet children({ item })}
<div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
{/snippet}
</VirtualList>
</div>
</Story>
<Story name="Large Dataset">
<VirtualList items={largeDataSet} itemHeight={40}>
{#snippet children({ item })}
<div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
{/snippet}
</VirtualList>
<Story name="Medium Dataset (200 items)">
<div class="h-[400px]">
<VirtualList items={mediumDataSet} itemHeight={40}>
{#snippet children({ item })}
<div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
{/snippet}
</VirtualList>
</div>
</Story>
<Story name="Empty Dataset">