feat(Input): component redesign with complete storybook coverage
This commit is contained in:
Ilia Mashkov
@@ -8,13 +8,39 @@ const { Story } = defineMeta({
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Styled input component with size and variant options',
|
||||
component: 'Input component',
|
||||
},
|
||||
story: { inline: false }, // Render stories in iframe for state isolation
|
||||
story: { inline: false },
|
||||
},
|
||||
layout: 'centered',
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: ['default', 'underline', 'filled'],
|
||||
description: 'Input variant',
|
||||
defaultValue: 'default',
|
||||
},
|
||||
size: {
|
||||
control: 'select',
|
||||
options: ['sm', 'md', 'lg', 'xl'],
|
||||
description: 'Input size',
|
||||
defaultValue: 'md',
|
||||
},
|
||||
error: {
|
||||
control: 'boolean',
|
||||
description: 'Input error state',
|
||||
defaultValue: false,
|
||||
},
|
||||
helperText: {
|
||||
control: 'text',
|
||||
description: 'Input helper text',
|
||||
},
|
||||
showClearButton: {
|
||||
control: 'boolean',
|
||||
description: 'Show clear button',
|
||||
defaultValue: false,
|
||||
},
|
||||
placeholder: {
|
||||
control: 'text',
|
||||
description: "input's placeholder",
|
||||
@@ -23,90 +49,78 @@ const { Story } = defineMeta({
|
||||
control: 'text',
|
||||
description: "input's value",
|
||||
},
|
||||
variant: {
|
||||
control: 'select',
|
||||
options: ['default', 'ghost'],
|
||||
description: 'Visual style variant',
|
||||
},
|
||||
size: {
|
||||
control: 'select',
|
||||
options: ['sm', 'md', 'lg'],
|
||||
description: 'Size variant',
|
||||
fullWidth: {
|
||||
control: 'boolean',
|
||||
description: 'Input fullWidth',
|
||||
defaultValue: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
let valueDefault = $state('Initial value');
|
||||
let valueSm = $state('');
|
||||
let valueMd = $state('');
|
||||
let valueLg = $state('');
|
||||
let valueGhostSm = $state('');
|
||||
let valueGhostMd = $state('');
|
||||
let valueGhostLg = $state('');
|
||||
import SearchIcon from '@lucide/svelte/icons/search';
|
||||
import ClearIcon from '@lucide/svelte/icons/x';
|
||||
let value = $state('');
|
||||
const placeholder = 'Enter text';
|
||||
</script>
|
||||
|
||||
<!-- Default Story -->
|
||||
<Story name="Default" args={{ placeholder }}>
|
||||
<!-- Default Story (Left Aligned) -->
|
||||
<Story name="Default" args={{ placeholder, value }}>
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueDefault} {placeholder} {...args} />
|
||||
<Input {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<Story name="Small" args={{ placeholder }}>
|
||||
<Story name="All sizes" args={{ value }}>
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueSm} {placeholder} size="sm" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Medium" args={{ placeholder }}>
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueMd} {placeholder} size="md" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Large" args={{ placeholder }}>
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueLg} {placeholder} size="lg" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<!-- Ghost Variant with Sizes -->
|
||||
<Story name="Ghost Small" args={{ placeholder }}>
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueGhostSm} {placeholder} variant="ghost" size="sm" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Ghost Medium" args={{ placeholder }}>
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueGhostMd} {placeholder} variant="ghost" size="md" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Ghost Large" args={{ placeholder }}>
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueGhostLg} {placeholder} variant="ghost" size="lg" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<!-- Size Comparison -->
|
||||
<Story name="All Sizes" tags={['!autodocs']}>
|
||||
<div class="flex flex-col gap-4 w-full max-w-md p-8">
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-sm font-medium text-text-muted">Small</span>
|
||||
<Input placeholder="Small input" size="sm" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-sm font-medium text-text-muted">Medium</span>
|
||||
<Input placeholder="Medium input" size="md" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-sm font-medium text-text-muted">Large</span>
|
||||
<Input placeholder="Large input" size="lg" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<Input size="sm" placeholder="Size sm" {...args} />
|
||||
<Input size="md" placeholder="Size md" {...args} />
|
||||
<Input size="lg" placeholder="Size lg" {...args} />
|
||||
<Input size="xl" placeholder="Size xl" {...args} />
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Underlined" args={{ placeholder, value }}>
|
||||
{#snippet template(args)}
|
||||
<Input variant="underline" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Filled" args={{ placeholder, value }}>
|
||||
{#snippet template(args)}
|
||||
<Input variant="filled" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With icon on the right" args={{ placeholder, value }}>
|
||||
{#snippet template(args)}
|
||||
<Input {...args}>
|
||||
{#snippet rightIcon()}
|
||||
<SearchIcon />
|
||||
{/snippet}
|
||||
</Input>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With icon on the left" args={{ placeholder, value }}>
|
||||
{#snippet template(args)}
|
||||
<Input {...args}>
|
||||
{#snippet leftIcon()}
|
||||
<SearchIcon />
|
||||
{/snippet}
|
||||
</Input>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With clear button" args={{ placeholder, value }}>
|
||||
{#snippet template(args)}
|
||||
<Input showClearButton {...args}>
|
||||
{#snippet rightIcon()}
|
||||
<ClearIcon />
|
||||
{/snippet}
|
||||
</Input>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -1,90 +1,157 @@
|
||||
<!--
|
||||
Component: Input
|
||||
Provides styled input component with all the shadcn input props
|
||||
design-system input. Zero border-radius, Space Grotesk, precise states.
|
||||
-->
|
||||
<script lang="ts" module>
|
||||
import { Input as BaseInput } from '$shared/shadcn/ui/input';
|
||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||
import {
|
||||
type VariantProps,
|
||||
tv,
|
||||
} from 'tailwind-variants';
|
||||
|
||||
export const inputVariants = tv({
|
||||
base: [
|
||||
'w-full backdrop-blur-md border font-medium transition-all duration-200',
|
||||
'focus-visible:border-border-soft focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-muted/30 focus-visible:bg-background-95',
|
||||
'hover:bg-background-95 hover:border-border-soft',
|
||||
'text-foreground placeholder:text-text-muted placeholder:font-mono placeholder:tracking-wide',
|
||||
],
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-background-80 border-border-muted shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
|
||||
ghost: 'bg-transparent border-transparent shadow-none',
|
||||
},
|
||||
size: {
|
||||
sm: [
|
||||
'h-9 sm:h-10 md:h-11 rounded-lg',
|
||||
'px-3 sm:px-3.5 md:px-4',
|
||||
'text-xs sm:text-sm md:text-base',
|
||||
'placeholder:text-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
|
||||
],
|
||||
md: [
|
||||
'h-10 sm:h-12 md:h-14 rounded-xl',
|
||||
'px-3.5 sm:px-4 md:px-5',
|
||||
'text-sm sm:text-base md:text-lg',
|
||||
'placeholder:text-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
|
||||
],
|
||||
lg: [
|
||||
'h-12 sm:h-14 md:h-16 rounded-2xl',
|
||||
'px-4 sm:px-5 md:px-6',
|
||||
'text-sm sm:text-base md:text-lg',
|
||||
'placeholder:text-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
|
||||
],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'lg',
|
||||
},
|
||||
});
|
||||
|
||||
type InputVariant = VariantProps<typeof inputVariants>['variant'];
|
||||
type InputSize = VariantProps<typeof inputVariants>['size'];
|
||||
|
||||
export type InputProps = {
|
||||
/**
|
||||
* Current search value (bindable)
|
||||
*/
|
||||
value?: string;
|
||||
/**
|
||||
* Additional CSS classes for the container
|
||||
*/
|
||||
class?: string;
|
||||
/**
|
||||
* Visual style variant
|
||||
*/
|
||||
variant?: InputVariant;
|
||||
/**
|
||||
* Size variant
|
||||
*/
|
||||
size?: InputSize;
|
||||
[key: string]: any;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||
import XIcon from '@lucide/svelte/icons/x';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import type { HTMLInputAttributes } from 'svelte/elements';
|
||||
import { scale } from 'svelte/transition';
|
||||
import type {
|
||||
InputSize,
|
||||
InputVariant,
|
||||
} from './types';
|
||||
|
||||
interface Props extends Omit<HTMLInputAttributes, 'size'> {
|
||||
variant?: InputVariant;
|
||||
size?: InputSize;
|
||||
/** Marks the input as invalid — red border + ring, red helper text. */
|
||||
error?: boolean;
|
||||
/** Helper / error message rendered below the input. */
|
||||
helperText?: string;
|
||||
/** Show an animated × button when the input has a value. */
|
||||
showClearButton?: boolean;
|
||||
/** Called when the clear button is clicked. */
|
||||
onclear?: () => void;
|
||||
/**
|
||||
* Snippet for the left icon slot.
|
||||
* Receives `size` as an argument for convenient icon sizing.
|
||||
* @example {#snippet leftIcon(size)}<SearchIcon size={inputIconSize[size]} />{/snippet}
|
||||
*/
|
||||
leftIcon?: Snippet<[InputSize]>;
|
||||
/**
|
||||
* Snippet for the right icon slot (rendered after the clear button).
|
||||
* Receives `size` as an argument.
|
||||
*/
|
||||
rightIcon?: Snippet<[InputSize]>;
|
||||
fullWidth?: boolean;
|
||||
value?: string | number | readonly string[];
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
variant = 'default',
|
||||
size = 'md',
|
||||
error = false,
|
||||
helperText,
|
||||
showClearButton = false,
|
||||
onclear,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
fullWidth = false,
|
||||
value = $bindable(''),
|
||||
class: className,
|
||||
variant = 'default',
|
||||
size = 'lg',
|
||||
...rest
|
||||
}: InputProps = $props();
|
||||
}: Props = $props();
|
||||
|
||||
// ── Size config ──────────────────────────────────────────────────────────────
|
||||
const sizeConfig: Record<InputSize, { input: string; text: string; height: string; clearIcon: number }> = {
|
||||
sm: { input: 'px-3 py-1.5', text: 'text-sm', height: 'h-8', clearIcon: 12 },
|
||||
md: { input: 'px-4 py-2', text: 'text-base', height: 'h-10', clearIcon: 14 },
|
||||
lg: { input: 'px-4 py-3', text: 'text-lg', height: 'h-12', clearIcon: 16 },
|
||||
xl: { input: 'px-4 py-3', text: 'text-xl', height: 'h-14', clearIcon: 18 },
|
||||
};
|
||||
|
||||
// ── Variant config ───────────────────────────────────────────────────────────
|
||||
const variantConfig: Record<InputVariant, { base: string; focus: string; error: string }> = {
|
||||
default: {
|
||||
base: 'bg-paper dark:bg-paper border border-black/5 dark:border-white/10',
|
||||
focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
|
||||
error: 'border-brand ring-1 ring-brand/20',
|
||||
},
|
||||
underline: {
|
||||
base: 'bg-transparent border-0 border-b border-neutral-300 dark:border-neutral-700',
|
||||
focus: 'focus:border-brand',
|
||||
error: 'border-brand',
|
||||
},
|
||||
filled: {
|
||||
base: 'bg-surface dark:bg-paper border border-transparent',
|
||||
focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
|
||||
error: 'border-brand ring-1 ring-brand/20',
|
||||
},
|
||||
};
|
||||
|
||||
const hasValue = $derived(value !== undefined && value !== '');
|
||||
const showClear = $derived(showClearButton && hasValue && !!onclear);
|
||||
const hasRightSlot = $derived(!!rightIcon || showClearButton);
|
||||
const cfg = $derived(sizeConfig[size]);
|
||||
const styles = $derived(variantConfig[variant]);
|
||||
|
||||
const inputClasses = $derived(cn(
|
||||
"font-['Space_Grotesk'] rounded-none outline-none transition-all duration-200",
|
||||
'text-neutral-900 dark:text-neutral-100',
|
||||
'placeholder:text-neutral-400 dark:placeholder:text-neutral-600',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
cfg.input,
|
||||
cfg.text,
|
||||
cfg.height,
|
||||
styles.base,
|
||||
error ? styles.error : styles.focus,
|
||||
!!leftIcon && 'pl-10',
|
||||
hasRightSlot && 'pr-10',
|
||||
fullWidth && 'w-full',
|
||||
className,
|
||||
));
|
||||
</script>
|
||||
|
||||
<BaseInput
|
||||
bind:value
|
||||
class={cn(inputVariants({ variant, size }), className)}
|
||||
{...rest}
|
||||
/>
|
||||
<div class={cn('flex flex-col gap-1', fullWidth && 'w-full')}>
|
||||
<div class={cn('relative group', fullWidth && 'w-full')}>
|
||||
<!-- Left icon slot -->
|
||||
{#if leftIcon}
|
||||
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-600 pointer-events-none z-10 flex items-center">
|
||||
{@render leftIcon(size)}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Input -->
|
||||
<input class={inputClasses} bind:value {...rest} />
|
||||
|
||||
<!-- Right slot: clear button + rightIcon -->
|
||||
{#if hasRightSlot}
|
||||
<div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2 z-10">
|
||||
{#if showClear}
|
||||
<button
|
||||
type="button"
|
||||
tabindex={-1}
|
||||
onclick={onclear}
|
||||
class="text-neutral-400 hover:text-brand transition-colors p-0.5 flex items-center"
|
||||
in:scale={{ duration: 150, start: 0.8, easing: cubicOut }}
|
||||
out:scale={{ duration: 100, start: 0.8, easing: cubicOut }}
|
||||
>
|
||||
<XIcon size={cfg.clearIcon} />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if rightIcon}
|
||||
<div class="text-neutral-400 dark:text-neutral-600 flex items-center">
|
||||
{@render rightIcon(size)}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Helper / error text -->
|
||||
{#if helperText}
|
||||
<span
|
||||
class={cn(
|
||||
"text-[0.625rem] font-['Space_Mono'] tracking-wide px-1",
|
||||
error ? 'text-brand ' : 'text-neutral-500 dark:text-neutral-400',
|
||||
)}
|
||||
>
|
||||
{helperText}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user