use svelte templates for storybook

.eslintignore

@@ -16,3 +16,6 @@ yarn.lock
 /.github
 /.vscode
 /src-tauri
+
+#storybbok
+!.storybook

.storybook/main.ts

@@ -1,7 +1,9 @@
 import type { StorybookConfig } from '@storybook/sveltekit';
+
 const config: StorybookConfig = {
-	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	stories: ['../src/**/*.stories.svelte'],
 	addons: [
+		'@storybook/addon-svelte-csf',
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
 		'@storybook/addon-interactions'
@@ -11,7 +13,7 @@ const config: StorybookConfig = {
 		options: {}
 	},
 	docs: {
-		autodocs: 'tag'
+		autodocs: true
 	}
 };
 export default config;

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/svelte';
+
 import '../src/app.postcss';
 const preview: Preview = {
 	parameters: {

package.json

@@ -7,7 +7,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"check:watch": "pnpm check --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write .",
 		"tauri": "tauri",
@@ -57,9 +57,11 @@
 		"@storybook/addon-essentials": "next",
 		"@storybook/addon-interactions": "next",
 		"@storybook/addon-links": "next",
+		"@storybook/addon-svelte-csf": "next",
 		"@storybook/blocks": "next",
-		"@storybook/svelte": "next",
+		"@storybook/theming": "next",
 		"@storybook/sveltekit": "next",
+		"@storybook/svelte": "next",
 		"@storybook/testing-library": "next",
 		"@sveltejs/adapter-static": "^2.0.0",
 		"@sveltejs/kit": "^1.15.0",

src/lib/components/Button/Button.stories.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+	import Button from './Button.svelte';
+
+	let count = 0;
+</script>
+
+<Meta title="GitButler/Button" component={Button} />
+
+<Story name="Basic">
+	<Button on:click={() => count++} label="You clicked: {count}" />
+</Story>
+
+<Story name="Basic Outlined">
+	<Button on:click={() => count++} label="You clicked: {count}" outlined />
+</Story>
+
+<Story name="Basic Small">
+	<Button on:click={() => count++} label="You clicked: {count}" small />
+</Story>
+
+<Story name="Basic Outlined Small">
+	<Button on:click={() => count++} label="You clicked: {count}" small outlined />
+</Story>
+
+<Story name="Primary">
+	<Button on:click={() => count++} label="You clicked: {count}" primary />
+</Story>
+
+<Story name="Primary Small">
+	<Button on:click={() => count++} label="You clicked: {count}" primary small />
+</Story>
+
+<Story name="Primary Wide">
+	<Button on:click={() => count++} label="You clicked: {count}" primary wide />
+</Story>
+
+<Story name="Primary Small Wide">
+	<Button on:click={() => count++} label="You clicked: {count}" primary wide small />
+</Story>
+
+<Story name="Primary Outlined Small">
+	<Button on:click={() => count++} label="You clicked: {count}" primary outlined small />
+</Story>

src/lib/components/Button/Button.stories.ts

@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-
-import Button from './Button.svelte';
-
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
-const meta: Meta<Button> = {
-	title: 'GitButler/Button',
-	component: Button,
-	tags: ['autodocs'],
-	argTypes: {
-		primary: { control: 'boolean' },
-		outlined: { control: 'boolean' },
-		small: { control: 'boolean' },
-		wide: { control: 'boolean' },
-		label: { control: 'text' }
-	}
-};
-
-export default meta;
-type Story = StoryObj<Button>;
-
-// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
-export const Basic: Story = {
-	args: {
-		primary: false,
-		outlined: false,
-		label: 'Label'
-	}
-};
-
-export const BasicOutlined: Story = {
-	args: {
-		primary: false,
-		outlined: true,
-		label: 'Button'
-	}
-};
-
-export const BasicSmall: Story = {
-	args: {
-		primary: false,
-		outlined: false,
-		small: true,
-		label: 'Button'
-	}
-};
-
-export const BasicOutlinedSmall: Story = {
-	args: {
-		primary: false,
-		outlined: true,
-		small: true,
-		label: 'Button'
-	}
-};
-
-export const Primary: Story = {
-	args: {
-		primary: true,
-		outlined: false,
-		label: 'Label'
-	}
-};
-export const PrimaryOutlined: Story = {
-	args: {
-		primary: true,
-		outlined: true,
-		label: 'Label'
-	}
-};
-export const PrimarySmall: Story = {
-	args: {
-		primary: true,
-		outlined: false,
-		small: true,
-		label: 'Label'
-	}
-};
-
-export const PrimaryWide: Story = {
-	args: {
-		primary: true,
-		outlined: false,
-		wide: true,
-		label: 'Label'
-	}
-};
-
-export const PrimarySmallWide: Story = {
-	args: {
-		primary: true,
-		outlined: false,
-		wide: true,
-		small: true,
-		label: 'Label'
-	}
-};
-
-export const PrimaryOutlinedSmall: Story = {
-	args: {
-		primary: true,
-		outlined: true,
-		small: true,
-		label: 'Label'
-	}
-};

src/lib/components/ButtonGroup/ButtonGroup.stories.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+	import ButtonGroup from './ButtonGroup.svelte';
+
+	const noop = () => {};
+</script>
+
+<Meta title="GitButler/ButtonGroup" component={ButtonGroup} />
+
+<Story name="Two buttons">
+	<ButtonGroup leftLabel="Cancel" rightLabel="Submit" leftAction={noop} rightAction={noop} />
+</Story>
+
+<Story name="Two buttons wide">
+	<ButtonGroup leftLabel="Cancel" rightLabel="Submit" wide leftAction={noop} rightAction={noop} />
+</Story>
+
+<Story name="Three buttons">
+	<ButtonGroup
+		leftLabel="Cancel"
+		rightLabel="Submit"
+		middleLabel="Middle"
+		leftAction={noop}
+		rightAction={noop}
+	/>
+</Story>
+
+<Story name="Three buttons wide">
+	<ButtonGroup
+		leftLabel="Cancel"
+		rightLabel="Submit"
+		middleLabel="Middle"
+		wide
+		leftAction={noop}
+		rightAction={noop}
+	/>
+</Story>

src/lib/components/ButtonGroup/ButtonGroup.stories.ts

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-
-import ButtonGroup from './ButtonGroup.svelte';
-
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
-const meta: Meta<ButtonGroup> = {
-	title: 'GitButler/ButtonGroup',
-	component: ButtonGroup,
-	tags: ['autodocs'],
-	argTypes: {
-		leftLabel: { control: 'text' },
-		rightLabel: { control: 'text' },
-		middleLabel: { control: 'text' }
-	}
-};
-
-export default meta;
-type Story = StoryObj<ButtonGroup>;
-
-export const TwoButtons: Story = {
-	args: {
-		leftLabel: 'Cancel',
-		rightLabel: 'Submit'
-	}
-};
-
-export const TwoButtonsWide: Story = {
-	args: {
-		leftLabel: 'Cancel',
-		rightLabel: 'Submit',
-		wide: true
-	}
-};
-
-export const ThreeButtons: Story = {
-	args: {
-		leftLabel: 'Left',
-		middleLabel: 'Middle',
-		rightLabel: 'Right'
-	}
-};
-
-export const ThreeButtonsWide: Story = {
-	args: {
-		leftLabel: 'Left',
-		middleLabel: 'Middle',
-		rightLabel: 'Right',
-		wide: true
-	}
-};

src/lib/components/ButtonGroup/ButtonGroup.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button } from '$lib/components';
+	import Button from '../Button/Button.svelte';
 
 	export let leftLabel: string;
 	export let leftAction: () => void;
@@ -29,7 +29,7 @@
 	</div>
 {/if}
 
-<style>
+<style lang="postcss">
 	.joined-base {
 		@apply flex items-center justify-center border-[#71717a] text-base text-white;
 	}

src/lib/components/Dialog/Dialog.stories.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+	import Dialog from './Dialog.svelte';
+	import Button from '../Button/Button.svelte';
+
+	let dialog: Dialog;
+	let count = 0;
+</script>
+
+<Meta title="GitButler/Dialog" component={Dialog} />
+
+<Story name="Dialog with title only">
+	<Button label="Open Dialog" on:click={() => dialog.show()} />
+	<Dialog
+		title="Dialog title"
+		secondaryActionLabel="Cancel"
+		primaryActionLabel="You clicked: {count}"
+		primaryAction={() => count++}
+		bind:this={dialog}
+	/>
+</Story>
+
+<Story name="Dialog with title and body">
+	<Button label="Open Dialog" on:click={() => dialog.show()} />
+	<Dialog
+		title="Dialog title"
+		content="Dialog body content"
+		secondaryActionLabel="Cancel"
+		primaryActionLabel="You clicked: {count}"
+		primaryAction={() => count++}
+		bind:this={dialog}
+	/>
+</Story>
+
+<Story name="Dialog small">
+	<Button label="Open Dialog" on:click={() => dialog.show()} />
+	<Dialog
+		title="Dialog title"
+		content="Dialog body content"
+		size="small"
+		secondaryActionLabel="Cancel"
+		primaryActionLabel="You clicked: {count}"
+		primaryAction={() => count++}
+		bind:this={dialog}
+	/>
+</Story>
+
+<Story name="Dialog large">
+	<Button label="Open Dialog" on:click={() => dialog.show()} />
+	<Dialog
+		title="Dialog title"
+		content="Dialog body content"
+		size="large"
+		secondaryActionLabel="Cancel"
+		primaryActionLabel="You clicked: {count}"
+		primaryAction={() => count++}
+		bind:this={dialog}
+	/>
+</Story>

src/lib/components/Dialog/Dialog.stories.ts

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-
-import DialogWithButton from './DialogWithButton.svelte';
-
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
-const meta: Meta<DialogWithButton> = {
-	title: 'GitButler/Dialog',
-	component: DialogWithButton,
-	tags: ['autodocs'],
-	argTypes: {
-		title: { control: 'text' },
-		content: { control: 'text' },
-		secondaryActionLabel: { control: 'text' },
-		primaryActionLabel: { control: 'text' },
-		size: { control: 'text' }
-	}
-};
-
-export default meta;
-type Story = StoryObj<DialogWithButton>;
-
-export const DialogWithTitleOnly: Story = {
-	args: {
-		title: 'Dialog Title'
-	}
-};
-
-export const DialogWithTitleAndBody: Story = {
-	args: {
-		title: 'Dialog Title',
-		content: 'Dialog body content'
-	}
-};
-
-export const DialogSmall: Story = {
-	args: {
-		title: 'Dialog Title',
-		content: 'Dialog body content',
-		size: 'small'
-	}
-};
-
-export const DialogLarge: Story = {
-	args: {
-		title: 'Dialog Title',
-		content: 'Dialog body content',
-		size: 'large'
-	}
-};

src/lib/components/Dialog/Dialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { ButtonGroup, Modal } from '$lib/components';
+	import ButtonGroup from '../ButtonGroup/ButtonGroup.svelte';
+	import Modal from '../Modal.svelte';
 
 	export let title: string;
 	export let content: string | undefined = undefined;
@@ -7,7 +8,7 @@
 	export let primaryActionLabel = 'Confirm';
 	export let primaryAction: () => void;
 
-	export let size = 'default';
+	export let size: 'default' | 'small' | 'large' = 'default';
 
 	let modal: Modal;
 	export const show = () => {

src/lib/components/Dialog/DialogWithButton.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { Button, Dialog } from '$lib/components';
-
-	export let title: string;
-	export let content: string | undefined = undefined;
-	export let secondaryActionLabel = 'Cancel';
-	export let primaryActionLabel = 'Cancel';
-	export let size = 'default';
-
-	let dialog: Dialog;
-</script>
-
-<!--
-@component
-This exists only to facilitate testing of the `Dialog` component in Storybook.
-Do not use this in the app.
-Do not style this.
-Do not add any logic to this.
--->
-<div>
-	<Button label="Open Dialog" on:click={() => dialog.show()} />
-	<Dialog
-		{title}
-		{content}
-		{secondaryActionLabel}
-		{primaryActionLabel}
-		{size}
-		primaryAction={() => console.log('primary action')}
-		bind:this={dialog}
-	/>
-</div>

src/lib/components/Tooltip/Tooltip.stories.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+	import Tooltip from './Tooltip.svelte';
+</script>
+
+<Meta title="GitButler/Tooltip" component={Tooltip} />
+
+<Story name="text with tooltip">
+	<Tooltip label="This is a tooltip">
+		<span class="text-zinc-50">Hover me!</span>
+	</Tooltip>
+</Story>

src/lib/components/Tooltip/Tooltip.stories.ts

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-
-import TooltipOnText from './TooltipOnText.svelte';
-
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
-const meta: Meta<TooltipOnText> = {
-	title: 'GitButler/Tooltip',
-	component: TooltipOnText,
-	tags: ['autodocs'],
-	argTypes: {
-		label: { control: 'text' }
-	}
-};
-
-export default meta;
-type Story = StoryObj<TooltipOnText>;
-
-export const TextWithTooltip: Story = {
-	args: {
-		label: 'This is a tooltip'
-	}
-};

src/lib/components/Tooltip/Tooltip.svelte

@@ -37,7 +37,7 @@
 </script>
 
 <div
-	class="flex-auto overflow-auto"
+	class="h-fit w-fit flex-auto overflow-auto"
 	on:mouseenter={() => (timeout = setTimeout(() => (showTooltip = true), timeoutMilliseconds))}
 	on:mouseleave={() => {
 		clearTimeout(timeout);

src/lib/components/Tooltip/TooltipOnText.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { Tooltip } from '$lib/components';
-
-	export let label: string;
-</script>
-
-<!--
-@component
-This exists only to facilitate testing of the `Tooltip` component in Storybook.
-Do not use this in the app.
-Do not style this.
-Do not add any logic to this.
--->
-<div class="bg-[#737373] p-16">
-	<Tooltip {label}>
-		<span>Hover me!</span>
-	</Tooltip>
-</div>