chore(IconButon): delete unusual code

This commit is contained in:
Ilia Mashkov
2026-02-27 12:43:21 +03:00
parent 12718593e3
commit d516a383e1
2 changed files with 0 additions and 157 deletions

View File

@@ -1,105 +0,0 @@
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import IconButton from './IconButton.svelte';
const { Story } = defineMeta({
title: 'Shared/IconButton',
component: IconButton,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Icon button with rotation animation on click. Features clockwise/counterclockwise rotation options and icon snippet support for flexible icon rendering.',
},
story: { inline: false },
},
layout: 'centered',
},
argTypes: {
rotation: {
control: 'select',
options: ['clockwise', 'counterclockwise'],
description: 'Direction of rotation animation on click',
},
icon: {
control: 'object',
description: 'Icon snippet to render (required)',
},
disabled: {
control: 'boolean',
description: 'Disable the button',
},
onclick: {
action: 'clicked',
description: 'Click handler',
},
},
});
</script>
<script lang="ts">
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
import ChevronRight from '@lucide/svelte/icons/chevron-right';
import MinusIcon from '@lucide/svelte/icons/minus';
import PlusIcon from '@lucide/svelte/icons/plus';
import SettingsIcon from '@lucide/svelte/icons/settings';
import XIcon from '@lucide/svelte/icons/x';
</script>
{#snippet chevronRightIcon({ className }: { className: string })}
<ChevronRight class={className} />
{/snippet}
{#snippet chevronLeftIcon({ className }: { className: string })}
<ChevronLeft class={className} />
{/snippet}
{#snippet plusIcon({ className }: { className: string })}
<PlusIcon class={className} />
{/snippet}
{#snippet minusIcon({ className }: { className: string })}
<MinusIcon class={className} />
{/snippet}
{#snippet settingsIcon({ className }: { className: string })}
<SettingsIcon class={className} />
{/snippet}
{#snippet xIcon({ className }: { className: string })}
<XIcon class={className} />
{/snippet}
<Story
name="Default"
args={{
icon: chevronRightIcon,
}}
>
{#snippet template(args)}
<IconButton onclick={() => console.log('Default clicked')} {...args}>
{#snippet icon({ className })}
<ChevronRight class={className} />
{/snippet}
</IconButton>
{/snippet}
</Story>
<Story
name="Disabled"
args={{
icon: chevronRightIcon,
disabled: true,
}}
>
{#snippet template(args)}
<div class="flex flex-col gap-4 items-center">
<IconButton disabled {...args}>
{#snippet icon({ className })}
<ChevronRight class={className} />
{/snippet}
</IconButton>
</div>
{/snippet}
</Story>

View File

@@ -1,52 +0,0 @@
<!--
Component: IconButton
Shadcn button size="icon" variant="ghost" with custom styling and icon snippet
-->
<script lang="ts">
import { Button } from '$shared/shadcn/ui/button';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type {
ComponentProps,
Snippet,
} from 'svelte';
interface Props extends ComponentProps<typeof Button> {
/**
* Direction of the rotation effect on click
* @default clockwise
*/
rotation?: 'clockwise' | 'counterclockwise';
/**
* Icon
*/
icon: Snippet<[{ className: string }]>;
}
let { rotation = 'clockwise', icon, ...rest }: Props = $props();
</script>
<Button
variant="ghost"
class="
group relative border-none size-9
bg-background-20 hover:bg-background-60
backdrop-blur-3xl
transition-all duration-200 ease-out
will-change-transform
hover:-translate-y-0.5
active:translate-y-0 active:scale-95 active:shadow-none
cursor-pointer
disabled:opacity-50 disabled:pointer-events-none
"
size="icon"
{...rest}
>
{@render icon?.({
className: cn(
'size-4 transition-all duration-200 stroke-[1.5] stroke-text-muted group-hover:stroke-foreground group-hover:scale-110 group-hover:stroke-2 group-active:scale-90 group-disabled:stroke-transparent',
rotation === 'clockwise'
? 'group-active:rotate-6'
: 'group-active:-rotate-6',
),
})}
</Button>