feat: Added Storybook with sample story and tailwindcss support

Added storybook using pnpm with set hoist pattern - see [storybookjs/builder-vite#55 (comment)]
Indeedornot · Oct 27, 2022 · 6550cfb · 6550cfb
1 parent 5e43dfd
commit 6550cfb
Show file tree

Hide file tree

Showing 17 changed files with 10,351 additions and 1,226 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,10 +1,20 @@
 module.exports = {
 	root: true,
 	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'prettier',
+		'plugin:storybook/recommended'
+	],
 	plugins: ['svelte3', '@typescript-eslint'],
 	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	overrides: [
+		{
+			files: ['*.svelte'],
+			processor: 'svelte3/svelte3'
+		}
+	],
 	settings: {
 		'svelte3/typescript': () => require('typescript')
 	},

diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,5 @@ node_modules
 .env.*
 !.env.example
 .idea
+
+src/stories/sample
diff --git a/.npmrc b/.npmrc
@@ -1 +1,2 @@
 engine-strict=true
+public-hoist-pattern[]=*storybook*
diff --git a/.storybook/main.cjs b/.storybook/main.cjs
@@ -0,0 +1,19 @@
+module.exports = {
+	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'storybook-dark-mode'
+	],
+	framework: '@storybook/svelte',
+	core: {
+		builder: '@storybook/builder-vite'
+	},
+	svelteOptions: {
+		preprocess: import('../svelte.config.js').preprocess
+	},
+	features: {
+		storyStoreV7: false
+	}
+};
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Title</title>
+		<style>
+			:root {
+				--color-primary: 1 4 9;
+				--color-secondary: 22 27 34;
+				--color-accent: 13 17 24;
+				--color-text-primary: 139 148 158;
+				--color-text-secondary: 217 223 228;
+			}
+
+			.dark {
+			}
+		</style>
+	</head>
+	<body></body>
+</html>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+	window.global = window;
+</script>
diff --git a/.storybook/preview.cjs b/.storybook/preview.cjs
@@ -0,0 +1,18 @@
+import '../src/app.css';
+import {themes} from '@storybook/theming';
+
+export const parameters = {
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/
+		}
+	},
+	darkMode: {
+		// Override the default dark theme
+		dark: { ...themes.dark, appBg: 'black' },
+		// Override the default light theme
+		light: { ...themes.normal, appBg: 'red' }
+	}
+};
diff --git a/package.json b/package.json
@@ -8,29 +8,48 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"lint:fix": "prettier --plugin-search-dir . --check . && eslint .",
+		"lint:format": "prettier --plugin-search-dir . --write .",
+		"lint": "npm run lint:format && npm run lint:fix",
+		"storybook": "start-storybook -p 6006 --no-open",
+		"build-storybook": "build-storybook"
 	},
 	"devDependencies": {
+		"@babel/core": "^7.19.6",
+		"@storybook/addon-actions": "^6.5.13",
+		"@storybook/addon-essentials": "^6.5.13",
+		"@storybook/addon-interactions": "^6.5.13",
+		"@storybook/addon-links": "^6.5.13",
+		"@storybook/builder-vite": "^0.2.4",
+		"@storybook/svelte": "^6.5.13",
+		"@storybook/testing-library": "^0.0.13",
+		"@storybook/theming": "^6.5.13",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"autoprefixer": "^10.4.7",
-		"eslint": "^8.16.0",
+		"babel-loader": "^8.2.5",
+		"eslint": "^8.26.0",
 		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-storybook": "^0.6.6",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.14",
+		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",
-		"svelte": "^3.44.0",
+		"storybook-dark-mode": "^1.1.2",
+		"svelte": "^3.52.0",
 		"svelte-check": "^2.7.1",
+		"svelte-loader": "^3.1.3",
 		"svelte-preprocess": "^4.10.7",
 		"tailwindcss": "3.1.8",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.4",
-		"vite": "^3.1.0",
-		"postcss-load-config": "^4.0.1"
+		"vite": "^3.1.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@storybook/addon-svelte-csf": "^2.0.8"
+	}
 }