storybook

packages/svelte/.storybook/main.js

@@ -0,0 +1,17 @@
+/** @type { import('@storybook/sveltekit').StorybookConfig } */
+const config = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
+	addons: [
+		'@chromatic-com/storybook',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/addon-styling-webpack',
+		'@storybook/addon-svelte-csf',
+		'@storybook/addon-themes',
+	],
+	framework: {
+		name: '@storybook/sveltekit',
+		options: {},
+	},
+};
+export default config;

packages/svelte/.storybook/preview.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

packages/svelte/.storybook/preview.js

@@ -0,0 +1,28 @@
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import './preview.css';
+
+/** @type { import('@storybook/svelte').Preview } */
+const preview = {
+	tags: ['autodocs'],
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+	decorators: [
+		withThemeByDataAttribute({
+			themes: {
+				light: 'light',
+				dark: 'dark',
+				night: 'night',
+			},
+			defaultTheme: 'dark',
+			attributeName: 'data-theme',
+		}),
+	],
+};
+
+export default preview;

packages/svelte/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@atlas/svelte",
-	"version": "1.0.1-alpha",
+	"version": "1.0.2-alpha",
 	"type": "module",
 	"exports": {
-		"components": {
+		"./components": {
 			"types": "./dist/components/index.d.ts",
 			"svelte": "./dist/components/index.js"
 		},
-		"types": {
+		"./types": {
 			"types": "./dist/types/index.d.ts"
 		}
 	},
@@ -19,10 +19,17 @@
 		"dist"
 	],
 	"scripts": {
+		"build-storybook": "storybook build",
+		"test:unit": "vitest",
+		"test": "bun run test:unit -- --run && bun run test:e2e",
+		"storybook": "storybook dev -p 6006",
+		"test:e2e": "playwright test",
 		"package": "svelte-kit sync && svelte-package",
 		"prepublishOnly": "bun package"
 	},
 	"devDependencies": {
+		"@chromatic-com/storybook": "^3.2.2",
+		"@playwright/test": "^1.45.3",
 		"@storybook/addon-essentials": "^8.5.0",
 		"@storybook/addon-interactions": "^8.5.0",
 		"@storybook/addon-styling-webpack": "^1.0.1",
@@ -32,10 +39,11 @@
 		"@storybook/svelte": "^8.5.0",
 		"@storybook/sveltekit": "^8.5.0",
 		"@storybook/test": "^8.5.0",
-		"@sveltejs/kit": "^2.15.2",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.15.3",
 		"@sveltejs/package": "^2.3.9",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@types/bun": "latest",
+		"@types/bun": "^1.1.15",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -46,13 +54,14 @@
 		"storybook": "^8.5.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.8.2",
-		"vite": "^6.0.7"
+		"vite": "^6.0.7",
+		"vitest": "^2.0.4"
 	},
 	"dependencies": {
+		"clsx": "^2.1.1",
 		"tailwind-merge": "^2.5.5"
 	},
 	"peerDependencies": {
-		"clsx": "^2.1.1",
 		"daisyui": "^4.12.22",
 		"svelte": "^5.0.0",
 		"tailwindcss": "^3.4.9"

packages/svelte/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+import { sveltekit } from '@sveltejs/kit/vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}'],
+	},
+});