feat: add example CSF Button with Play test

apps/desktop/src/lib/components/ShareIssueModal.svelte

@@ -168,7 +168,6 @@
 		<Textarea
 			label="Comments"
 			placeholder="Provide any steps necessary to reproduce the problem."
-			autocomplete="off"
 			autocorrect="off"
 			spellcheck
 			id="comments"

packages/ui/.storybook/main.ts

@@ -3,21 +3,20 @@ import type { StorybookConfig } from '@storybook/sveltekit';
 
 const config: StorybookConfig = {
 	stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)'],
-
 	addons: [
 		getAbsolutePath('@storybook/addon-links'),
 		getAbsolutePath('@storybook/addon-essentials'),
+		'@storybook/addon-svelte-csf',
 		getAbsolutePath('@storybook/experimental-addon-test'),
 		getAbsolutePath('storybook-dark-mode')
 	],
-
 	framework: {
 		name: getAbsolutePath('@storybook/sveltekit'),
 		options: {}
 	},
-
 	docs: {}
 };
+
 export default config;
 
 function getAbsolutePath(value: string): any {

packages/ui/package.json

@@ -30,11 +30,14 @@
 		"@csstools/postcss-bundler": "^2.0.5",
 		"@storybook/addon-docs": "^8.4.5",
 		"@storybook/addon-essentials": "^8.4.5",
+		"@storybook/addon-interactions": "^8.4.5",
 		"@storybook/addon-links": "^8.4.5",
+		"@storybook/addon-svelte-csf": "5.0.0--canary.228.e697925.0",
 		"@storybook/blocks": "^8.4.5",
 		"@storybook/experimental-addon-test": "^8.4.5",
 		"@storybook/svelte": "^8.4.5",
 		"@storybook/sveltekit": "^8.4.5",
+		"@storybook/test": "^8.4.5",
 		"@sveltejs/adapter-static": "catalog:svelte",
 		"@sveltejs/kit": "catalog:svelte",
 		"@sveltejs/package": "^2.3.7",

packages/ui/src/stories/button/Button.stories.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">
+	import Button from '$lib/Button.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn, expect, userEvent, within } from '@storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Inputs / Button / CSF Buttons',
+		component: Button,
+		tags: ['autodocs'],
+		args: {
+			loading: false,
+			disabled: false,
+			clickable: true,
+			size: 'button',
+			icon: 'ai-small',
+			style: 'neutral',
+			kind: 'solid',
+			outline: false,
+			dashed: false,
+			solidBackground: false,
+			helpShowDelay: 1200,
+			id: 'button',
+			tabindex: 0,
+			type: 'button',
+			shrinkable: false,
+			reversedDirection: false,
+			width: undefined,
+			wide: false,
+			grow: false,
+			align: 'center',
+			dropdownChild: false,
+			onclick: fn(() => {
+				console.log('Button clicked');
+			})
+		}
+	});
+</script>
+
+<Story
+	name="Primary"
+	play={async ({ args, canvasElement }) => {
+		const canvas = within(canvasElement);
+		const submitButton = canvas.getByRole('button');
+		await userEvent.click(submitButton);
+		await expect(args.onclick).toHaveBeenCalled();
+	}}
+>
+	Button Text
+</Story>