feat: initial storybook setup

.editorconfig

@@ -12,7 +12,7 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 
-[*.{ts,vue}]
+[*.{ts,vue,mdx}]
 line_length=100
 indent_style = space
 indent_size = 2

.eslintrc.cjs

@@ -3,15 +3,23 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
+  extends: [
     '@vue/typescript/recommended',
     'plugin:vue/vue3-recommended',
     '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
+    '@vue/eslint-config-prettier/skip-formatting',
+    'plugin:storybook/recommended'
   ],
   rules: {
-    "@typescript-eslint/no-explicit-any": "off",
+    '@typescript-eslint/no-explicit-any': 'off',
+    'vue/multi-word-component-names': 'off'
   },
+  overrides: [
+    {
+      files: ['*.mdx'],
+      extends: 'plugin:mdx/recommended'
+    }
+  ],
   parserOptions: {
     ecmaVersion: 'latest'
   }

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "importOrder": ["^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,28 @@
+import type { Preview } from '@storybook/vue3'
+
+// import type { StoryIdentifier } from "@storybook/types"
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    options: {
+      // The `a` and `b` arguments in this function have a type of `import('@storybook/types').IndexEntry`. Remember that the function is executed in a JavaScript environment, so use JSDoc for IntelliSense to introspect it.
+      storySort: (a /*: StoryIdentifier*/, b /*: StoryIdentifier*/) => {
+        console.log('a', a, 'b', b)
+        if (a.id === b.id) {
+          return 0
+        } else {
+          return a.id.localeCompare(b.id, undefined, { numeric: true })
+        }
+      }
+    }
+  }
+}
+
+export default preview

Makefile

@@ -14,7 +14,7 @@ help:
 	@echo "  test-nocov  Run tests (no watch) without coverage"
 	@echo "  test-w      Run tests (watch)"
 	@echo "  ci          Install dependencies, run lints and tests"
-	@echo "  serve       Run the (development) server"
+	@echo "  serve       Run the Storybook server"
 
 .PHONY: deps
 deps:
@@ -56,8 +56,8 @@ ci: \
 
 .PHONY: serve
 serve:
-	MODE=development npm run dev
+	npm run storybook
 
 .PHONY: serve-public
 serve-public:
-	MODE=development npm run dev-public
+	npm run storybook -- --host=0.0.0.0

README.md

@@ -6,6 +6,15 @@
 
 Refactored reuseable components for REEV.
 
-For "everything", see
+This README file describes how to setup your dev environment for this library.
+For everything else, see the [REEV Project](https://github.com/bihealth/reev).
 
-- [REEV Project](https://github.com/bihealth/reev)
+## Setup
+
+```
+git clone [email protected]:bihealth/reev-frontend-lib.git
+cd reev-frontend-lib
+npm ci
+make serve
+# hack away!
+```