Merge pull request #10 from cngJo/8-storybook7

task: update storybook to version 7

.github/workflows/ci.yaml

@@ -31,7 +31,7 @@ jobs:
         - name: Setup Node.js environment
           uses: actions/setup-node@v3
           with:
-            node-version: 16
+            node-version: 19
             cache: 'npm'
 
         - name: Install dependencies

.github/workflows/e2e.yaml

@@ -23,7 +23,7 @@ jobs:
         - name: Setup Node.js environment
           uses: actions/setup-node@v3
           with:
-            node-version: 16
+            node-version: 19
             cache: 'npm'
 
         - name: Install dependencies

apps/docs/package.json

@@ -18,7 +18,7 @@
     "@babel/core": "^7.0.0",
     "@nuxt/devtools": "^0.1.2",
     "@types/node": "^17.0.12",
-    "eslint-config-custom": "*",
+    "eslint-config-custom": "file:../eslint-config-custom",
     "tsconfig": "*",
     "typescript": "^4.5.3"
   }

apps/storybook/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+};

apps/storybook/.gitignore

@@ -8,15 +8,19 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.DS_Store
 dist
 dist-ssr
+coverage
 *.local
 
+/cypress/videos/
+/cypress/screenshots/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
-.DS_Store
 *.suo
 *.ntvs*
 *.njsproj

apps/storybook/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

apps/storybook/.storybook/main.ts

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

apps/storybook/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/vue3'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  }
+}
+
+export default preview

apps/storybook/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

apps/storybook/README.md

@@ -1,15 +1,46 @@
-## Getting Started
+# storybook
 
-First, run the development server:
+This template should help get you started developing with Vue 3 in Vite.
 
-```bash
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
 npm run dev
 ```
 
-Open [http://localhost:6006](http://localhost:6006) with your browser to see Storybook.
+### Type-Check, Compile and Minify for Production
 
-## Learn More
+```sh
+npm run build
+```
 
-To learn more about Storybook, take a look at the following resources:
+### Lint with [ESLint](https://eslint.org/)
 
-- [Storybook Documentation](https://storybook.js.org/docs/react/get-started/introduction)
+```sh
+npm run lint
+```

apps/storybook/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
   </head>
   <body>
     <div id="app"></div>

apps/storybook/package.json

@@ -1,33 +1,45 @@
 {
   "name": "storybook",
-  "private": true,
   "version": "0.0.0",
-  "type": "module",
+  "private": true,
   "scripts": {
-    "dev": "start-storybook -p 6006",
-    "build": "build-storybook",
-		"lint": "eslint src",
-    "lint:write": "eslint src --fix"
+    "lint": "eslint src",
+    "lint:write": "eslint src --fix",
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build"
   },
   "dependencies": {
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
 		"ui": "*"
   },
   "devDependencies": {
-		"eslint-config-custom": "*",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.1.0",
-    "vue-tsc": "^1.0.24",
-    "@storybook/vue3": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
-    "vue-loader": "^16.8.3",
-    "@storybook/builder-vite": "^0.4.2",
-    "@babel/core": "^7.20.12",
-    "babel-loader": "^8.3.0"
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@storybook/addon-essentials": "^7.0.9",
+    "@storybook/addon-interactions": "^7.0.9",
+    "@storybook/addon-links": "^7.0.9",
+    "@storybook/blocks": "^7.0.9",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/vue3": "^7.0.9",
+    "@storybook/vue3-vite": "^7.0.9",
+    "@tsconfig/node18": "^2.0.0",
+    "@types/node": "^18.16.3",
+    "@vitejs/plugin-vue": "^4.2.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/tsconfig": "^0.3.2",
+    "eslint": "^8.39.0",
+    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-vue": "^9.11.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.9",
+    "typescript": "~5.0.4",
+    "vite": "^4.3.4",
+    "vue-tsc": "^1.6.4",
+		"eslint-config-custom": "file:../eslint-config-custom",
+		"tsconfig": "*"
   }
 }

apps/storybook/src/App.vue

@@ -1,30 +1,6 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+	<h1>Storybook</h1>
 </template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>

apps/storybook/src/main.ts

@@ -1,5 +1,6 @@
+import "./assets/main.css";
+
 import { createApp } from "vue";
-import "./style.css";
 import App from "./App.vue";
 
 createApp(App).mount("#app");

apps/storybook/src/stories/Button.stories.ts

@@ -0,0 +1,30 @@
+// Button.stories.ts
+
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { Button } from "ui";
+
+const meta: Meta<typeof Button> = {
+	/* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+	title: "Button",
+	component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+	render: () => ({
+		components: { Button, },
+		template: "<Button>UI Library Button</Button>",
+	}),
+};