From 60275226f962b86a553a2dcf2dea5eaedb3f0e5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=B0dris=20=C3=87elik?= <idris.celik7265@gmail.com>
Date: Sun, 25 Jan 2026 13:25:00 +0300
Subject: [PATCH 1/2] feat(admin): implement FilterChips component and stories

---
 .../crud-data/FilterChips.stories.svelte      | 201 +++++++++++++++++
 .../admin/crud-data/FilterChips.svelte        | 213 ++++++++++++++++++
 2 files changed, 414 insertions(+)
 create mode 100644 hexawebshare/src/components/admin/crud-data/FilterChips.stories.svelte

diff --git a/hexawebshare/src/components/admin/crud-data/FilterChips.stories.svelte b/hexawebshare/src/components/admin/crud-data/FilterChips.stories.svelte
new file mode 100644
index 00000000..652bb56a
--- /dev/null
+++ b/hexawebshare/src/components/admin/crud-data/FilterChips.stories.svelte
@@ -0,0 +1,201 @@
+<!--
+SPDX-FileCopyrightText: 2025 hexaTune LLC
+SPDX-License-Identifier: MIT
+-->
+
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FilterChips from './FilterChips.svelte';
+	import type { Filter } from './FilterChips.svelte';
+
+	const sampleFilters: Filter[] = [
+		{ id: '1', label: 'Status', value: 'Active', variant: 'success' },
+		{ id: '2', label: 'Role', value: 'Admin', variant: 'primary' },
+		{ id: '3', label: 'Date', value: 'Last 30 days', variant: 'info' }
+	];
+
+	const variantFilters: Filter[] = [
+		{ id: 'v1', label: 'Primary', value: 'Selected', variant: 'primary' },
+		{ id: 'v2', label: 'Secondary', value: 'Selected', variant: 'secondary' },
+		{ id: 'v3', label: 'Accent', value: 'Selected', variant: 'accent' },
+		{ id: 'v4', label: 'Neutral', value: 'Selected', variant: 'neutral' },
+		{ id: 'v5', label: 'Info', value: 'Selected', variant: 'info' },
+		{ id: 'v6', label: 'Success', value: 'Selected', variant: 'success' },
+		{ id: 'v7', label: 'Warning', value: 'Selected', variant: 'warning' },
+		{ id: 'v8', label: 'Error', value: 'Selected', variant: 'error' },
+		{ id: 'v9', label: 'Ghost', value: 'Selected', variant: 'ghost' }
+	];
+
+	const manyFilters: Filter[] = Array.from({ length: 15 }, (_, i) => ({
+		id: `many-${i}`,
+		label: `Filter ${i + 1}`,
+		value: `Value ${i + 1}`,
+		variant: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'][
+			i % 8
+		] as any
+	}));
+
+	const { Story } = defineMeta({
+		component: FilterChips,
+		title: 'Admin/CRUD Data/FilterChips',
+		tags: ['autodocs'],
+		argTypes: {
+			filters: {
+				control: 'object',
+				description: 'Array of active filters'
+			},
+			size: {
+				control: 'select',
+				options: ['xs', 'sm', 'md', 'lg'],
+				description: 'Chip size variant'
+			},
+			loading: {
+				control: 'boolean',
+				description: 'Show loading state'
+			},
+			disabled: {
+				control: 'boolean',
+				description: 'Disable all chips'
+			},
+			clearAllLabel: {
+				control: 'text',
+				description: 'Label for clear all button'
+			},
+			ariaLabel: {
+				control: 'text',
+				description: 'Accessible label for the filters container'
+			},
+			removeFilterAriaLabelFormat: {
+				control: 'text',
+				description: "Format for remove button's aria-label"
+			},
+			onRemove: { action: 'onRemove' },
+			onClearAll: { action: 'onClearAll' }
+		}
+	});
+</script>
+
+<!-- Story 1: Default -->
+<Story
+	name="Default"
+	args={{
+		filters: sampleFilters
+	}}
+/>
+
+<!-- Story 2: Empty State -->
+<Story
+	name="Empty"
+	args={{
+		filters: []
+	}}
+/>
+
+<!-- Story 3: Loading State -->
+<Story
+	name="Loading"
+	args={{
+		filters: [],
+		loading: true
+	}}
+/>
+
+<!-- Story 4: Disabled State -->
+<Story
+	name="Disabled"
+	args={{
+		filters: sampleFilters,
+		disabled: true
+	}}
+/>
+
+<!-- Story 5: Sizes -->
+<Story name="Size XS" args={{ filters: sampleFilters, size: 'xs' }} />
+
+<Story name="Size SM" args={{ filters: sampleFilters, size: 'sm' }} />
+
+<Story name="Size MD" args={{ filters: sampleFilters, size: 'md' }} />
+
+<Story name="Size LG" args={{ filters: sampleFilters, size: 'lg' }} />
+
+<!-- Story 6: All Variants -->
+<Story
+	name="All Variants"
+	args={{
+		filters: variantFilters
+	}}
+/>
+
+<!-- Story 7: With Clear All -->
+<Story
+	name="With Clear All"
+	args={{
+		filters: sampleFilters,
+		clearAllLabel: 'Filtreleri Temizle'
+	}}
+/>
+
+<!-- Story 8: Wrap & Overflow -->
+<Story
+	name="Wrap & Overflow"
+	args={{
+		filters: manyFilters
+	}}
+/>
+
+<!-- Story 9: Long Content -->
+<Story
+	name="Long Content"
+	args={{
+		filters: [
+			{
+				id: 'long-1',
+				label: 'Very Long Category Name That Might Wrap',
+				value: 'Extremely Long Value That Definitely Takes Up Space',
+				variant: 'primary'
+			}
+		]
+	}}
+/>
+
+<!-- Story 10: Interactive -->
+<Story
+	name="Interactive"
+	args={{
+		filters: sampleFilters,
+		onRemove: (id: string) => console.log('Remove', id),
+		onClearAll: () => console.log('Clear all')
+	}}
+/>
+
+<!-- Story 11: Accessibility -->
+<Story
+	name="Accessibility"
+	args={{
+		filters: sampleFilters,
+		id: 'acc-filter-chips'
+	}}
+/>
+
+<!-- Story 12: Loading with Filters -->
+<Story
+	name="Loading with Filters"
+	args={{
+		filters: sampleFilters,
+		loading: true
+	}}
+/>
+
+<!-- Story 13: Playground -->
+<Story
+	name="Playground"
+	args={{
+		filters: sampleFilters,
+		size: 'md',
+		loading: false,
+		disabled: false,
+		clearAllLabel: 'Clear all',
+		ariaLabel: 'Active filters',
+		removeFilterAriaLabelFormat: 'Remove {label} filter'
+	}}
+/>
diff --git a/hexawebshare/src/components/admin/crud-data/FilterChips.svelte b/hexawebshare/src/components/admin/crud-data/FilterChips.svelte
index 315da078..7c7fdee2 100644
--- a/hexawebshare/src/components/admin/crud-data/FilterChips.svelte
+++ b/hexawebshare/src/components/admin/crud-data/FilterChips.svelte
@@ -2,3 +2,216 @@
 SPDX-FileCopyrightText: 2025 hexaTune LLC
 SPDX-License-Identifier: MIT
 -->
+
+<script lang="ts">
+	import Text from '../../core/typography/Text.svelte';
+	import IconButton from '../../core/buttons/IconButton.svelte';
+	import Button from '../../core/buttons/Button.svelte';
+	import SkeletonLoader from '../../core/feedback/SkeletonLoader.svelte';
+
+	/**
+	 * Interface for a single filter item
+	 */
+	export interface Filter {
+		/** Unique identifier for the filter */
+		id: string;
+		/** Label for the filter type (e.g., 'Status') */
+		label: string;
+		/** Value of the filter (e.g., 'Active') */
+		value: string | number | boolean;
+		/** Optional variant for the badge color */
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'accent'
+			| 'neutral'
+			| 'info'
+			| 'success'
+			| 'warning'
+			| 'error'
+			| 'ghost';
+	}
+
+	/**
+	 * Props interface for the FilterChips component
+	 */
+	interface Props {
+		/**
+		 * Array of active filters to display
+		 */
+		filters: Filter[];
+		/**
+		 * Callback function when a filter is removed
+		 * @param id The ID of the filter to remove
+		 */
+		onRemove?: (id: string) => void;
+		/**
+		 * Callback function to clear all filters
+		 */
+		onClearAll?: () => void;
+		/**
+		 * Size of the chips
+		 * @default 'md'
+		 */
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		/**
+		 * Whether the component is in loading state
+		 * @default false
+		 */
+		loading?: boolean;
+		/**
+		 * Whether the component is disabled
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Label for the "Clear all" button
+		 * @default 'Clear all'
+		 */
+		clearAllLabel?: string;
+		/**
+		 * Additional CSS classes for the container
+		 */
+		class?: string;
+		/**
+		 * HTML id attribute
+		 */
+		id?: string;
+		/**
+		 * Accessible label for the filters container
+		 * @default 'Active filters'
+		 */
+		ariaLabel?: string;
+		/**
+		 * Format string for the remove button's aria-label.
+		 * Use '{label}' as a placeholder for the filter label.
+		 * @default 'Remove {label} filter'
+		 */
+		removeFilterAriaLabelFormat?: string;
+	}
+
+	const {
+		filters = [],
+		onRemove,
+		onClearAll,
+		size = 'md',
+		loading = false,
+		disabled = false,
+		clearAllLabel = 'Clear all',
+		class: className = '',
+		id,
+		ariaLabel = 'Active filters',
+		removeFilterAriaLabelFormat = 'Remove {label} filter',
+		...props
+	}: Props = $props();
+
+	// Container classes using static classes
+	const containerClasses = $derived(
+		['flex flex-wrap items-center gap-2', className].filter(Boolean).join(' ')
+	);
+
+	// Badge and text size mappings
+	const badgeSizeClass = $derived(
+		size === 'xs'
+			? 'badge-xs'
+			: size === 'sm'
+				? 'badge-sm'
+				: size === 'md'
+					? 'badge-md'
+					: 'badge-lg'
+	);
+
+	const textSize = $derived(
+		size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : size === 'md' ? 'sm' : 'base'
+	);
+
+	const iconButtonSize = $derived(
+		size === 'xs' ? 'xs' : size === 'sm' ? 'xs' : size === 'md' ? 'sm' : 'sm'
+	);
+</script>
+
+<div
+	{id}
+	class={containerClasses}
+	role="list"
+	aria-label={ariaLabel}
+	aria-busy={loading}
+	{...props}
+>
+	{#if loading && filters.length === 0}
+		<div class="flex gap-2" aria-hidden="true">
+			<SkeletonLoader shape="pill" {size} width="short" variant="neutral" />
+			<SkeletonLoader shape="pill" {size} width="medium" variant="neutral" />
+			<SkeletonLoader shape="pill" {size} width="short" variant="neutral" />
+		</div>
+	{:else}
+		{#each filters as filter (filter.id)}
+			<div
+				class={[
+					'badge flex h-auto items-center gap-1',
+					badgeSizeClass,
+					filter.variant === 'primary' && 'badge-primary',
+					filter.variant === 'secondary' && 'badge-secondary',
+					filter.variant === 'accent' && 'badge-accent',
+					filter.variant === 'neutral' && 'badge-neutral',
+					filter.variant === 'info' && 'badge-info',
+					filter.variant === 'success' && 'badge-success',
+					filter.variant === 'warning' && 'badge-warning',
+					filter.variant === 'error' && 'badge-error',
+					filter.variant === 'ghost' && 'badge-ghost',
+					!filter.variant && 'badge-neutral',
+					(disabled || loading) && 'pointer-events-none cursor-not-allowed opacity-60',
+					size === 'xs' ? 'px-1.5 py-0.5' : size === 'sm' ? 'px-2 py-1' : 'px-3 py-1.5'
+				]
+					.filter(Boolean)
+					.join(' ')}
+				role="listitem"
+			>
+				<Text size={textSize} class="whitespace-nowrap">
+					<Text weight="semibold" size={textSize}>{filter.label}:</Text>
+					{filter.value}
+				</Text>
+				{#if onRemove && !disabled && !loading}
+					<IconButton
+						variant="ghost"
+						size={iconButtonSize}
+						circle
+						onclick={() => onRemove?.(filter.id)}
+						ariaLabel={removeFilterAriaLabelFormat.replace('{label}', filter.label)}
+						class="hover:bg-base-content/20 flex h-auto min-h-0 items-center justify-center p-0.5"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width={size === 'xs' ? '10' : '14'}
+							height={size === 'xs' ? '10' : '14'}
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<line x1="18" y1="6" x2="6" y2="18"></line>
+							<line x1="6" y1="6" x2="18" y2="18"></line>
+						</svg>
+					</IconButton>
+				{/if}
+			</div>
+		{/each}
+
+		{#if filters.length > 0 && onClearAll && !disabled && !loading}
+			<Button
+				variant="ghost"
+				size={size === 'xs' || size === 'sm' ? 'xs' : 'sm'}
+				onclick={onClearAll}
+				ariaLabel={clearAllLabel}
+				class="h-auto min-h-0 px-2 underline-offset-4 hover:underline"
+			>
+				<Text size={textSize} variant="primary" weight="medium">
+					{clearAllLabel}
+				</Text>
+			</Button>
+		{/if}
+	{/if}
+</div>

From 9aa7133026baaa89a4879bb39c1b8a2b0c8608af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=B0dris=20=C3=87elik?= <idris.celik7265@gmail.com>
Date: Sun, 25 Jan 2026 18:02:51 +0300
Subject: [PATCH 2/2] fix(admin): change Turkish text to English in FilterChips
 stories

---
 .../src/components/admin/crud-data/FilterChips.stories.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hexawebshare/src/components/admin/crud-data/FilterChips.stories.svelte b/hexawebshare/src/components/admin/crud-data/FilterChips.stories.svelte
index 652bb56a..aa3cde4e 100644
--- a/hexawebshare/src/components/admin/crud-data/FilterChips.stories.svelte
+++ b/hexawebshare/src/components/admin/crud-data/FilterChips.stories.svelte
@@ -131,7 +131,7 @@ SPDX-License-Identifier: MIT
 	name="With Clear All"
 	args={{
 		filters: sampleFilters,
-		clearAllLabel: 'Filtreleri Temizle'
+		clearAllLabel: 'Clear All Filters'
 	}}
 />